codex额度查看工具开发完成1.0版本

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+release/
+*.log
+.DS_Store

README.md

@@ -0,0 +1,40 @@
+# Codex Halo
+
+使用 Vue 3、JavaScript 与 Electron 开发的 Windows Codex 本地额度悬浮仪表。
+
+## 功能
+
+- 从 `%USERPROFILE%\.codex\sessions` 读取 5 小时与 7 天额度快照
+- 监听 Codex JSONL 日志变化并自动刷新
+- 透明无边框、始终置顶、可拖动悬浮窗口
+- 系统托盘、手动刷新和窗口位置记忆
+- 纯 SVG/CSS 原创界面，不依赖图片资源
+- 完全本地运行，不需要服务器或数据库
+
+## 开发
+
+```powershell
+npm install
+npm run dev
+```
+
+浏览器单独预览页面：
+
+```powershell
+npm run dev:web
+```
+
+生成真实 Electron 窗口预览图：
+
+```powershell
+npm run capture
+```
+
+## 测试与构建
+
+```powershell
+npm test
+npm run build
+```
+
+构建产物会生成在 `release` 目录。

build/icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <rect x="16" y="16" width="224" height="224" rx="60" fill="#3157F6"/>
+  <rect x="60" y="62" width="38" height="132" rx="19" fill="#FFFFFF"/>
+  <rect x="109" y="94" width="38" height="100" rx="19" fill="#FFFFFF" fill-opacity="0.88"/>
+  <rect x="158" y="126" width="38" height="68" rx="19" fill="#FFFFFF" fill-opacity="0.68"/>
+</svg>

electron/main.js

@@ -0,0 +1,344 @@
+import { app, BrowserWindow, ipcMain, Menu, nativeImage, screen, systemPreferences, Tray } from 'electron'
+import { readFileSync, writeFileSync } from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { UsageReader } from './usage-reader.js'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const SINGLE_TILE_WIDTH = 120
+const DOUBLE_TILE_WIDTH = 236
+const WINDOW_HEIGHT = 60
+const DOCK_WIDTH = 12
+const DOCK_TRIGGER_DISTANCE = 16
+const DOCK_ANIMATION_DURATION = 210
+const screenshotArgument = process.argv.find((argument) => argument.startsWith('--screenshot='))
+const screenshotPath = screenshotArgument?.slice('--screenshot='.length)
+
+if (screenshotPath) {
+  app.setPath('userData', path.join(os.tmpdir(), `codex-halo-preview-${process.pid}`))
+}
+
+let mainWindow
+let tray
+let usageReader
+let isQuitting = false
+let saveBoundsTimer
+let dragState = null
+let normalWindowWidth = SINGLE_TILE_WIDTH
+let isDocked = false
+let isDockCollapsed = false
+let dockTimer
+let dockAnimationTimer
+
+function settingsPath() {
+  return path.join(app.getPath('userData'), 'window-state.json')
+}
+
+function readWindowState() {
+  try {
+    return JSON.parse(readFileSync(settingsPath(), 'utf8'))
+  } catch {
+    return null
+  }
+}
+
+function isVisibleOnAnyDisplay(bounds) {
+  return screen.getAllDisplays().some(({ workArea }) => {
+    const horizontal = bounds.x < workArea.x + workArea.width && bounds.x + bounds.width > workArea.x
+    const vertical = bounds.y < workArea.y + workArea.height && bounds.y + bounds.height > workArea.y
+    return horizontal && vertical
+  })
+}
+
+function initialBounds() {
+  const saved = readWindowState()
+  if (saved && isVisibleOnAnyDisplay(saved)) {
+    return {
+      width: SINGLE_TILE_WIDTH,
+      height: WINDOW_HEIGHT,
+      x: saved.x + Math.max(0, saved.width - SINGLE_TILE_WIDTH),
+      y: saved.y,
+    }
+  }
+
+  const { workArea } = screen.getPrimaryDisplay()
+  return {
+    width: SINGLE_TILE_WIDTH,
+    height: WINDOW_HEIGHT,
+    x: workArea.x + workArea.width - SINGLE_TILE_WIDTH - 28,
+    y: workArea.y + 28,
+  }
+}
+
+function resizeForSnapshot(snapshot) {
+  if (!mainWindow || mainWindow.isDestroyed()) return
+  const now = Date.now()
+  const hasShortWindow = snapshot.shortWindow?.resetsAt > now
+  const hasWeekWindow = snapshot.weekWindow?.resetsAt > now
+  const width = hasShortWindow && hasWeekWindow ? DOUBLE_TILE_WIDTH : SINGLE_TILE_WIDTH
+  const bounds = mainWindow.getBounds()
+  normalWindowWidth = width
+
+  if (isDocked) {
+    clearInterval(dockAnimationTimer)
+    const { workArea } = screen.getDisplayMatching(bounds)
+    const dockWidth = isDockCollapsed ? DOCK_WIDTH : normalWindowWidth
+    mainWindow.setBounds({
+      x: workArea.x + workArea.width - dockWidth,
+      y: bounds.y,
+      width: dockWidth,
+      height: WINDOW_HEIGHT,
+    })
+    return
+  }
+
+  if (bounds.width !== width || bounds.height !== WINDOW_HEIGHT) {
+    mainWindow.setBounds({
+      x: bounds.x + bounds.width - width,
+      y: bounds.y,
+      width,
+      height: WINDOW_HEIGHT,
+    })
+  }
+}
+
+function saveWindowState() {
+  if (!mainWindow || mainWindow.isDestroyed() || isDocked) return
+  clearTimeout(saveBoundsTimer)
+  saveBoundsTimer = setTimeout(() => {
+    if (isDocked) return
+    writeFileSync(settingsPath(), JSON.stringify(mainWindow.getBounds()))
+  }, 250)
+}
+
+function setDockCollapsed(collapsed, animated = true) {
+  if (!isDocked || !mainWindow || mainWindow.isDestroyed()) return
+  const bounds = mainWindow.getBounds()
+  const { workArea } = screen.getDisplayMatching(bounds)
+  const targetWidth = collapsed ? DOCK_WIDTH : normalWindowWidth
+  const rightEdge = workArea.x + workArea.width
+  const y = Math.max(
+    workArea.y,
+    Math.min(bounds.y, workArea.y + workArea.height - WINDOW_HEIGHT),
+  )
+  isDockCollapsed = collapsed
+  clearInterval(dockAnimationTimer)
+
+  if (!animated || systemPreferences.getAnimationSettings().prefersReducedMotion) {
+    mainWindow.setBounds({ x: rightEdge - targetWidth, y, width: targetWidth, height: WINDOW_HEIGHT })
+    return
+  }
+
+  const startWidth = bounds.width
+  const startedAt = Date.now()
+  dockAnimationTimer = setInterval(() => {
+    if (!mainWindow || mainWindow.isDestroyed()) {
+      clearInterval(dockAnimationTimer)
+      return
+    }
+
+    const elapsed = Math.min(1, (Date.now() - startedAt) / DOCK_ANIMATION_DURATION)
+    const eased = 1 - Math.pow(1 - elapsed, 3)
+    const width = Math.round(startWidth + (targetWidth - startWidth) * eased)
+    mainWindow.setBounds({ x: rightEdge - width, y, width, height: WINDOW_HEIGHT })
+
+    if (elapsed === 1) clearInterval(dockAnimationTimer)
+  }, 16)
+}
+
+function dockAtRightEdge() {
+  const bounds = mainWindow.getBounds()
+  const { workArea } = screen.getDisplayMatching(bounds)
+  const rightEdge = workArea.x + workArea.width
+  if (bounds.x + bounds.width < rightEdge - DOCK_TRIGGER_DISTANCE) return
+  isDocked = true
+  setDockCollapsed(true)
+}
+
+function createTrayImage() {
+  const size = 40
+  const bitmap = Buffer.alloc(size * size * 4)
+
+  function isInsideRoundedRect(x, y, left, top, right, bottom, radius) {
+    const nearestX = Math.max(left + radius, Math.min(x, right - radius))
+    const nearestY = Math.max(top + radius, Math.min(y, bottom - radius))
+    return Math.hypot(x - nearestX, y - nearestY) <= radius
+  }
+
+  for (let y = 0; y < size; y += 1) {
+    for (let x = 0; x < size; x += 1) {
+      const offset = (y * size + x) * 4
+      const isTile = isInsideRoundedRect(x + 0.5, y + 0.5, 4, 4, 36, 36, 9)
+      const isTallBar = isInsideRoundedRect(x + 0.5, y + 0.5, 13, 12, 18, 29, 2.5)
+      const isShortBar = isInsideRoundedRect(x + 0.5, y + 0.5, 23, 19, 28, 29, 2.5)
+
+      if (isTile) {
+        // Bitmap pixels use BGRA order. This matches the widget's cobalt-blue identity.
+        bitmap[offset] = 246
+        bitmap[offset + 1] = 87
+        bitmap[offset + 2] = 49
+        bitmap[offset + 3] = 255
+      }
+
+      if (isTallBar || isShortBar) {
+        bitmap[offset] = 255
+        bitmap[offset + 1] = 255
+        bitmap[offset + 2] = 255
+        bitmap[offset + 3] = 255
+      }
+    }
+  }
+
+  return nativeImage
+    .createFromBitmap(bitmap, { width: size, height: size, scaleFactor: 1 })
+    .resize({ width: 20, height: 20, quality: 'best' })
+}
+
+function showWindow() {
+  if (!mainWindow) return
+  mainWindow.showInactive()
+  mainWindow.moveTop()
+}
+
+function trayMenu() {
+  return Menu.buildFromTemplate([
+    { label: '重新读取', click: () => usageReader.refresh() },
+    {
+      label: '始终置顶',
+      type: 'checkbox',
+      checked: mainWindow?.isAlwaysOnTop() ?? true,
+      click: ({ checked }) => mainWindow?.setAlwaysOnTop(checked, 'floating'),
+    },
+    { type: 'separator' },
+    {
+      label: '退出',
+      click: () => {
+        isQuitting = true
+        app.quit()
+      },
+    },
+  ])
+}
+
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    ...initialBounds(),
+    frame: false,
+    transparent: true,
+    backgroundColor: '#00000000',
+    alwaysOnTop: true,
+    skipTaskbar: true,
+    show: false,
+    resizable: false,
+    hasShadow: false,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.cjs'),
+      contextIsolation: true,
+      nodeIntegration: false,
+      sandbox: true,
+    },
+  })
+
+  mainWindow.setAlwaysOnTop(true, 'floating')
+  mainWindow.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: false })
+
+  if (process.env.VITE_DEV_SERVER_URL) mainWindow.loadURL(process.env.VITE_DEV_SERVER_URL)
+  else mainWindow.loadFile(path.join(__dirname, '..', 'dist', 'index.html'))
+
+  mainWindow.once('ready-to-show', () => {
+    showWindow()
+    usageReader.refresh()
+  })
+
+  mainWindow.webContents.once('did-finish-load', async () => {
+    if (screenshotPath) {
+      showWindow()
+      await new Promise((resolve) => setTimeout(resolve, 1200))
+      mainWindow.webContents.invalidate()
+      const image = await mainWindow.webContents.capturePage()
+      writeFileSync(path.resolve(screenshotPath), image.toPNG())
+      isQuitting = true
+      app.quit()
+    }
+  })
+
+  mainWindow.on('move', saveWindowState)
+  mainWindow.on('close', (event) => {
+    if (!isQuitting) {
+      event.preventDefault()
+      mainWindow.hide()
+    }
+  })
+
+  mainWindow.webContents.on('context-menu', () => trayMenu().popup({ window: mainWindow }))
+}
+
+function createTray() {
+  tray = new Tray(createTrayImage())
+  tray.setToolTip('Codex Halo · 本地额度仪表')
+  tray.setContextMenu(trayMenu())
+  tray.on('double-click', showWindow)
+}
+
+const hasSingleInstanceLock = screenshotPath || app.requestSingleInstanceLock()
+if (!hasSingleInstanceLock) app.quit()
+
+app.on('second-instance', showWindow)
+app.on('before-quit', () => {
+  isQuitting = true
+  clearInterval(dockAnimationTimer)
+  usageReader?.stop()
+})
+
+app.whenReady().then(() => {
+  const sessionsPath = path.join(os.homedir(), '.codex', 'sessions')
+  usageReader = new UsageReader(sessionsPath)
+  usageReader.on('snapshot', (snapshot) => {
+    if (mainWindow && !mainWindow.isDestroyed()) {
+      resizeForSnapshot(snapshot)
+      mainWindow.webContents.send('usage:snapshot', snapshot)
+    }
+  })
+  usageReader.start()
+
+  ipcMain.handle('usage:get', () => usageReader.readLatest())
+  ipcMain.handle('usage:refresh', () => usageReader.refresh())
+  ipcMain.on('window:drag-start', (event, point) => {
+    if (event.sender !== mainWindow?.webContents) return
+    clearTimeout(dockTimer)
+    if (isDocked) setDockCollapsed(false, false)
+    isDocked = false
+    isDockCollapsed = false
+    const bounds = mainWindow.getBounds()
+    dragState = { pointerX: point.x, pointerY: point.y, windowX: bounds.x, windowY: bounds.y }
+  })
+  ipcMain.on('window:drag-move', (event, point) => {
+    if (event.sender !== mainWindow?.webContents || !dragState) return
+    mainWindow.setPosition(
+      Math.round(dragState.windowX + point.x - dragState.pointerX),
+      Math.round(dragState.windowY + point.y - dragState.pointerY),
+    )
+  })
+  ipcMain.on('window:drag-end', () => {
+    dragState = null
+    dockAtRightEdge()
+  })
+  ipcMain.on('window:dock-expand', (event) => {
+    if (event.sender !== mainWindow?.webContents || !isDocked) return
+    clearTimeout(dockTimer)
+    setDockCollapsed(false)
+  })
+  ipcMain.on('window:dock-collapse', (event) => {
+    if (event.sender !== mainWindow?.webContents || !isDocked || dragState) return
+    clearTimeout(dockTimer)
+    dockTimer = setTimeout(() => setDockCollapsed(true), 180)
+  })
+
+  createWindow()
+  if (!screenshotPath) createTray()
+})
+
+app.on('window-all-closed', () => {
+  // The tray owns the application lifecycle on Windows.
+})

electron/preload.cjs

@@ -0,0 +1,16 @@
+const { contextBridge, ipcRenderer } = require('electron')
+
+contextBridge.exposeInMainWorld('codexHalo', {
+  getUsage: () => ipcRenderer.invoke('usage:get'),
+  refreshUsage: () => ipcRenderer.invoke('usage:refresh'),
+  startWindowDrag: (point) => ipcRenderer.send('window:drag-start', point),
+  moveWindowDrag: (point) => ipcRenderer.send('window:drag-move', point),
+  endWindowDrag: () => ipcRenderer.send('window:drag-end'),
+  expandDock: () => ipcRenderer.send('window:dock-expand'),
+  collapseDock: () => ipcRenderer.send('window:dock-collapse'),
+  onUsage: (callback) => {
+    const listener = (_event, snapshot) => callback(snapshot)
+    ipcRenderer.on('usage:snapshot', listener)
+    return () => ipcRenderer.removeListener('usage:snapshot', listener)
+  },
+})

electron/usage-reader.js

@@ -0,0 +1,193 @@
+import { EventEmitter } from 'node:events'
+import { closeSync, existsSync, fstatSync, openSync, readSync, readdirSync, statSync, watch } from 'node:fs'
+import path from 'node:path'
+
+export const SHORT_WINDOW_MINUTES = 300
+export const WEEK_WINDOW_MINUTES = 10080
+
+const MAX_FILES_TO_SCAN = 160
+const TAIL_BYTES_PER_FILE = 2 * 1024 * 1024
+
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value))
+}
+
+export function parseUsageLine(line, sourceFile = '') {
+  if (!line.includes('"rate_limits"') || !line.includes('"token_count"')) return []
+
+  try {
+    const root = JSON.parse(line)
+    if (root?.type !== 'event_msg' || root?.payload?.type !== 'token_count') return []
+
+    const observedAt = Number.isNaN(Date.parse(root.timestamp))
+      ? Date.now()
+      : Date.parse(root.timestamp)
+
+    return ['primary', 'secondary'].flatMap((key) => {
+      const window = root.payload.rate_limits?.[key]
+      const windowMinutes = Number(window?.window_minutes)
+      const usedPercent = Number(window?.used_percent)
+      const resetsAtSeconds = Number(window?.resets_at)
+
+      if (![SHORT_WINDOW_MINUTES, WEEK_WINDOW_MINUTES].includes(windowMinutes)) return []
+      if (![usedPercent, resetsAtSeconds].every(Number.isFinite)) return []
+
+      return [{
+        windowMinutes,
+        usedPercent: clamp(usedPercent, 0, 100),
+        remainingPercent: clamp(100 - usedPercent, 0, 100),
+        resetsAt: resetsAtSeconds * 1000,
+        observedAt,
+        sourceFile,
+      }]
+    })
+  } catch {
+    return []
+  }
+}
+
+function collectRolloutFiles(rootPath) {
+  const results = []
+  const pending = [rootPath]
+
+  while (pending.length > 0) {
+    const directory = pending.pop()
+    let entries
+
+    try {
+      entries = readdirSync(directory, { withFileTypes: true })
+    } catch {
+      continue
+    }
+
+    for (const entry of entries) {
+      const fullPath = path.join(directory, entry.name)
+      if (entry.isDirectory()) pending.push(fullPath)
+      else if (entry.isFile() && /^rollout-.*\.jsonl$/i.test(entry.name)) results.push(fullPath)
+    }
+  }
+
+  return results
+    .map((filePath) => {
+      try {
+        return { filePath, modifiedAt: statSync(filePath).mtimeMs }
+      } catch {
+        return null
+      }
+    })
+    .filter(Boolean)
+    .sort((a, b) => b.modifiedAt - a.modifiedAt)
+    .slice(0, MAX_FILES_TO_SCAN)
+}
+
+function readFileTail(filePath) {
+  let descriptor
+
+  try {
+    descriptor = openSync(filePath, 'r')
+    const size = fstatSync(descriptor).size
+    const start = Math.max(0, size - TAIL_BYTES_PER_FILE)
+    const length = size - start
+    const buffer = Buffer.alloc(length)
+    readSync(descriptor, buffer, 0, length, start)
+
+    const lines = buffer.toString('utf8').split(/\r?\n/).filter(Boolean)
+    if (start > 0) lines.shift()
+    return lines
+  } catch {
+    return []
+  } finally {
+    if (descriptor !== undefined) closeSync(descriptor)
+  }
+}
+
+export function readLatestUsage(sessionsPath) {
+  if (!existsSync(sessionsPath)) {
+    return {
+      shortWindow: null,
+      weekWindow: null,
+      status: '未找到 Codex 会话目录',
+      updatedAt: Date.now(),
+    }
+  }
+
+  let shortWindow = null
+  let weekWindow = null
+
+  for (const { filePath, modifiedAt } of collectRolloutFiles(sessionsPath)) {
+    for (const line of readFileTail(filePath)) {
+      for (const snapshot of parseUsageLine(line, filePath)) {
+        if (snapshot.windowMinutes === SHORT_WINDOW_MINUTES &&
+            (!shortWindow || snapshot.observedAt > shortWindow.observedAt)) {
+          shortWindow = snapshot
+        }
+
+        if (snapshot.windowMinutes === WEEK_WINDOW_MINUTES &&
+            (!weekWindow || snapshot.observedAt > weekWindow.observedAt)) {
+          weekWindow = snapshot
+        }
+      }
+    }
+
+    if (shortWindow && weekWindow &&
+        modifiedAt < shortWindow.observedAt && modifiedAt < weekWindow.observedAt) break
+  }
+
+  const now = Date.now()
+  if (shortWindow?.resetsAt <= now) shortWindow = null
+  if (weekWindow?.resetsAt <= now) weekWindow = null
+
+  return {
+    shortWindow,
+    weekWindow,
+    status: shortWindow || weekWindow ? '已从本地日志同步' : '本地日志中暂无额度快照',
+    updatedAt: Date.now(),
+  }
+}
+
+export class UsageReader extends EventEmitter {
+  constructor(sessionsPath) {
+    super()
+    this.sessionsPath = sessionsPath
+    this.fileWatcher = null
+    this.refreshTimer = null
+    this.safetyTimer = null
+  }
+
+  readLatest() {
+    return readLatestUsage(this.sessionsPath)
+  }
+
+  refresh() {
+    const snapshot = this.readLatest()
+    this.emit('snapshot', snapshot)
+    return snapshot
+  }
+
+  requestRefresh() {
+    clearTimeout(this.refreshTimer)
+    this.refreshTimer = setTimeout(() => this.refresh(), 250)
+  }
+
+  start() {
+    if (existsSync(this.sessionsPath)) {
+      try {
+        this.fileWatcher = watch(this.sessionsPath, { recursive: true }, (_event, fileName) => {
+          if (!fileName || /(^|[\\/])rollout-.*\.jsonl$/i.test(fileName)) this.requestRefresh()
+        })
+        this.fileWatcher.on('error', () => this.requestRefresh())
+      } catch {
+        this.fileWatcher = null
+      }
+    }
+
+    this.safetyTimer = setInterval(() => this.requestRefresh(), 15_000)
+  }
+
+  stop() {
+    clearTimeout(this.refreshTimer)
+    clearInterval(this.safetyTimer)
+    this.fileWatcher?.close()
+    this.fileWatcher = null
+  }
+}

findings.md

@@ -0,0 +1,47 @@
+# 发现与决策
+
+## 需求
+
+- 参考桌面 `codexorbit-1.2.3` 的功能开发 Vue 版本。
+- 使用前端技术和 JavaScript。
+- 样式重新设计，不使用原项目图片。
+- 最终可构建为 Windows EXE。
+
+## 原项目发现
+
+- 原项目为 C#、WPF、.NET Framework 4.8、x64 WinExe。
+- 读取 `%USERPROFILE%\.codex\sessions` 下的 `rollout-*.jsonl`。
+- 从 `event_msg` / `token_count` / `rate_limits` 记录提取 primary 与 secondary 时间窗口。
+- 5 小时窗口为 300 分钟，周窗口为 10080 分钟。
+- 使用文件监听器更新额度；窗口位置写入本地配置文件。
+- 不需要服务器或数据库。
+
+## 组件地图
+
+| 模块 | 单一职责 | 数据契约 |
+|------|----------|----------|
+| `App.vue` | 组合应用外壳与额度面板 | 使用 `useUsage`，向面板传入快照 |
+| `QuotaTile.vue` | 以悬浮标签展示单个周期百分比和垂直刻度 | props: `value`, `label`, `tone` |
+| `UsagePanel.vue` | 展示双窗口额度、状态与重置时间 | props: `snapshot`; emit: `refresh` |
+| `useUsage.js` | 管理 IPC 订阅、刷新和演示数据 | 返回只读快照、连接状态和刷新动作 |
+| Electron main | 窗口、托盘、日志解析和文件监听 | 通过 `usage:snapshot` IPC 推送快照 |
+| Electron preload | 仅暴露受限桌面 API | `getUsage`, `refreshUsage`, `onUsage` |
+
+## 视觉方向（第二版）
+
+- “瑞士编辑排版 × 工业仪表”：奶油纸张色、炭黑信息块、朱红和酸绿色功能色。
+- 去掉发光圆环，改为大数字、分段刻度和两种材质并置，提升扫读效率。
+- 使用纯 CSS 几何元素，不使用图片；保留非对称圆角作为识别特征。
+
+## 视觉方向（最终精简版）
+
+- 去掉外层卡片、阴影、边框、标题、状态、重置时间与刷新按钮。
+- 只保留圆形额度表盘、百分比和 `5h/7d` 标签。
+- 5 小时快照已经过期时视为不存在，界面只显示周额度。
+- Electron 窗口根据一枚或两枚表盘自动调整宽度，避免透明区域拦截桌面操作。
+
+## 视觉方向（独立原创版）
+
+- 放弃圆环参考，改为无边框、无阴影的悬浮额度标签。
+- 以大号百分比、单色信号点和右侧垂直刻度表达额度，不增加业务文案。
+- 周额度使用酸绿色，5小时额度使用珊瑚红；两者存在时并列，不存在时自动收缩。

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#08100f" />
+    <title>Codex Halo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,49 @@
+{
+  "name": "codex-halo",
+  "version": "1.0.1",
+  "description": "A lightweight Codex usage orbit for Windows.",
+  "type": "module",
+  "main": "electron/main.js",
+  "author": "Local",
+  "license": "MIT",
+  "scripts": {
+    "dev": "concurrently -k \"vite --host 127.0.0.1\" \"wait-on tcp:5173 && cross-env VITE_DEV_SERVER_URL=http://127.0.0.1:5173 electron .\"",
+    "dev:web": "vite --host 127.0.0.1",
+    "test": "node --test",
+    "icon": "electron scripts/generate-icon.cjs",
+    "build:web": "vite build",
+    "capture": "vite build && electron . --screenshot=preview.png",
+    "build": "npm run test && npm run icon && vite build && electron-builder --win portable",
+    "pack": "npm run icon && vite build && electron-builder --win dir"
+  },
+  "build": {
+    "appId": "dev.codexhalo.desktop",
+    "productName": "Codex Halo",
+    "directories": {
+      "output": "release"
+    },
+    "files": [
+      "dist/**/*",
+      "electron/**/*",
+      "package.json"
+    ],
+    "asar": true,
+    "win": {
+      "target": "portable",
+      "icon": "build/icon.ico",
+      "artifactName": "CodexHalo-${version}.exe"
+    }
+  },
+  "dependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.0",
+    "concurrently": "^9.0.0",
+    "cross-env": "^7.0.3",
+    "electron": "^37.0.0",
+    "electron-builder": "^26.0.0",
+    "vite": "^7.0.0",
+    "wait-on": "^8.0.0"
+  }
+}

progress.md

@@ -0,0 +1,51 @@
+# 进度日志
+
+## 2026-07-16
+
+### 阶段 1：需求与发现
+- **状态：** complete
+- 已确认 Vue 3 + JavaScript + Electron 技术栈。
+- 已分析 C# 版本的项目配置、界面方式、日志路径和数据窗口。
+- 已确定组件边界与原创视觉方向。
+- 创建文件：`task_plan.md`、`findings.md`、`progress.md`。
+
+### 阶段 2：项目与界面实现
+- **状态：** complete
+- 创建 Vue 3 + Vite + Electron 基础工程。
+- 实现 `OrbitGauge.vue`、`UsagePanel.vue` 和 `useUsage.js`。
+- 完成深空导航仪器风格的纯 SVG/CSS 原创界面。
+
+### 阶段 3：桌面能力实现
+- **状态：** in_progress
+- 实现 JSONL 尾部读取、额度解析、目录监听和 15 秒安全刷新。
+- 实现透明置顶窗口、托盘、右键菜单、IPC 与窗口位置保存。
+
+### 阶段 6：视觉重构
+- **状态：** complete
+- 根据用户反馈弃用第一版深色发光圆环视觉。
+- 使用 frontend-design 技能确定“瑞士编辑排版 × 工业仪表”方向。
+- 新增 `QuotaMeter.vue`，重构 `UsagePanel.vue`，未改变数据与桌面功能。
+- 根据用户参考将展示进一步精简为 `QuotaDial.vue`，移除全部外层卡片信息。
+- 日志读取层现在会过滤已过期的5小时和周额度快照。
+- 单元测试 3 项全部通过，包含“过期5小时额度不展示”回归测试。
+- Vue生产构建通过；Electron真实日志截图显示单枚 `7d` 周额度圆盘，无外层阴影和边框。
+
+## 测试结果
+
+| 测试 | 预期结果 | 实际结果 | 状态 |
+|------|----------|----------|------|
+| Node 环境 | Node/npm 可用 | Node 24.10.0，npm 11.6.1 | 通过 |
+| 过期5小时额度 | `shortWindow` 返回 `null` | 回归测试通过 | 通过 |
+| 精简版生产构建 | Vue构建成功 | 16个模块构建成功 | 通过 |
+| 真实Electron预览 | 仅显示有效周额度圆盘 | 显示 `19% / 7d` | 通过 |
+
+## 错误日志
+
+| 错误 | 尝试次数 | 解决方案 |
+|------|---------|---------|
+| `npm install` 超过 120 秒被终止，未输出包错误 | 1 | 检查安装状态后延长时限继续 |
+| `ModuleNotFoundError: playwright` | 2 | Python 运行时均未提供该包，改用内置 Node Playwright |
+| Playwright 默认 Chromium 未安装 | 1 | 视觉脚本指定本机 Chrome 可执行文件 |
+| 系统 Chrome 无头测试超时 | 1 | 停止进程，加入 Electron 原生截图验证模式 |
+| 打包阶段 `win-unpacked.tmp` 重命名被拒绝 | 1 | 排查 Electron 残留进程及目录占用后重试 |
+| 首个 portable 验证时未生成应用截图 | 1 | 检查发现预打包目录尚未注入应用代码，重新制作完整预打包目录 |

scripts/generate-icon.cjs

@@ -0,0 +1,83 @@
+const { app, nativeImage } = require('electron')
+const { writeFileSync } = require('node:fs')
+const path = require('node:path')
+
+const projectRoot = path.join(__dirname, '..')
+const sizes = [16, 24, 32, 48, 64, 128, 256]
+
+function insideRoundedRect(x, y, left, top, right, bottom, radius) {
+  const nearestX = Math.max(left + radius, Math.min(x, right - radius))
+  const nearestY = Math.max(top + radius, Math.min(y, bottom - radius))
+  return Math.hypot(x - nearestX, y - nearestY) <= radius
+}
+
+function createSourceImage() {
+  const size = 512
+  const bitmap = Buffer.alloc(size * size * 4)
+  const bars = [
+    [120, 124, 196, 388, 38, 255],
+    [218, 188, 294, 388, 38, 224],
+    [316, 252, 392, 388, 38, 173],
+  ]
+
+  for (let y = 0; y < size; y += 1) {
+    for (let x = 0; x < size; x += 1) {
+      const offset = (y * size + x) * 4
+      if (insideRoundedRect(x + 0.5, y + 0.5, 32, 32, 480, 480, 120)) {
+        bitmap[offset] = 246
+        bitmap[offset + 1] = 87
+        bitmap[offset + 2] = 49
+        bitmap[offset + 3] = 255
+      }
+
+      const bar = bars.find(([left, top, right, bottom, radius]) => (
+        insideRoundedRect(x + 0.5, y + 0.5, left, top, right, bottom, radius)
+      ))
+      if (bar) {
+        const opacity = bar[5] / 255
+        bitmap[offset] = Math.round(246 + (255 - 246) * opacity)
+        bitmap[offset + 1] = Math.round(87 + (255 - 87) * opacity)
+        bitmap[offset + 2] = Math.round(49 + (255 - 49) * opacity)
+        bitmap[offset + 3] = 255
+      }
+    }
+  }
+
+  return nativeImage.createFromBitmap(bitmap, { width: size, height: size, scaleFactor: 1 })
+}
+
+function generateIcon() {
+  const source = createSourceImage()
+  const images = sizes.map((size) => source.resize({ width: size, height: size, quality: 'best' }).toPNG())
+  const headerSize = 6 + images.length * 16
+  const header = Buffer.alloc(headerSize)
+  header.writeUInt16LE(0, 0)
+  header.writeUInt16LE(1, 2)
+  header.writeUInt16LE(images.length, 4)
+
+  let imageOffset = headerSize
+  images.forEach((image, index) => {
+    const entryOffset = 6 + index * 16
+    const size = sizes[index]
+    header.writeUInt8(size === 256 ? 0 : size, entryOffset)
+    header.writeUInt8(size === 256 ? 0 : size, entryOffset + 1)
+    header.writeUInt8(0, entryOffset + 2)
+    header.writeUInt8(0, entryOffset + 3)
+    header.writeUInt16LE(1, entryOffset + 4)
+    header.writeUInt16LE(32, entryOffset + 6)
+    header.writeUInt32LE(image.length, entryOffset + 8)
+    header.writeUInt32LE(imageOffset, entryOffset + 12)
+    imageOffset += image.length
+  })
+
+  writeFileSync(path.join(projectRoot, 'build', 'icon-preview.png'), images.at(-1))
+  writeFileSync(path.join(projectRoot, 'build', 'icon.ico'), Buffer.concat([header, ...images]))
+}
+
+app.whenReady()
+  .then(generateIcon)
+  .then(() => app.quit())
+  .catch((error) => {
+    console.error(error)
+    app.exit(1)
+  })

src/App.vue

@@ -0,0 +1,10 @@
+<script setup>
+import UsagePanel from '@/components/UsagePanel.vue'
+import { useUsage } from '@/composables/useUsage'
+
+const { snapshot } = useUsage()
+</script>
+
+<template>
+  <UsagePanel :snapshot="snapshot" />
+</template>

src/assets/main.css

@@ -0,0 +1,26 @@
+:root {
+  font-family: 'Microsoft YaHei UI', 'Segoe UI', sans-serif;
+  color-scheme: dark;
+  font-synthesis: none;
+  text-rendering: geometricPrecision;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  background: transparent;
+  user-select: none;
+}
+
+button,
+input {
+  font: inherit;
+}

src/components/OrbitGauge.vue

@@ -0,0 +1,148 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  value: { type: Number, default: 0 },
+  label: { type: String, required: true },
+  accent: { type: String, default: 'amber' },
+  compact: { type: Boolean, default: false },
+})
+
+const radius = 42
+const circumference = 2 * Math.PI * radius
+const normalizedValue = computed(() => Math.min(100, Math.max(0, props.value)))
+const ringStyle = computed(() => ({
+  strokeDasharray: `${circumference} ${circumference}`,
+  strokeDashoffset: circumference * (1 - normalizedValue.value / 100),
+}))
+</script>
+
+<template>
+  <div class="gauge" :class="[`gauge--${accent}`, { 'gauge--compact': compact }]">
+    <svg class="gauge__svg" viewBox="0 0 100 100" aria-hidden="true">
+      <circle class="gauge__track" cx="50" cy="50" :r="radius" />
+      <circle class="gauge__ticks" cx="50" cy="50" r="47" />
+      <circle class="gauge__progress" cx="50" cy="50" :r="radius" :style="ringStyle" />
+    </svg>
+    <div class="gauge__content">
+      <strong class="gauge__value">{{ Math.round(normalizedValue) }}</strong>
+      <span class="gauge__unit">%</span>
+      <span class="gauge__label">{{ label }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.gauge {
+  --gauge-accent: #ffad42;
+  --gauge-glow: rgba(255, 173, 66, 0.38);
+  position: relative;
+  width: 112px;
+  height: 112px;
+  flex: 0 0 auto;
+}
+
+.gauge--mint {
+  --gauge-accent: #55e6bd;
+  --gauge-glow: rgba(85, 230, 189, 0.3);
+}
+
+.gauge--compact {
+  width: 58px;
+  height: 58px;
+}
+
+.gauge__svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  transform: rotate(-90deg);
+  filter: drop-shadow(0 0 9px var(--gauge-glow));
+}
+
+.gauge__track,
+.gauge__progress {
+  fill: none;
+  stroke-width: 5.5;
+}
+
+.gauge__track {
+  stroke: rgba(255, 255, 255, 0.075);
+}
+
+.gauge__ticks {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.13);
+  stroke-width: 1;
+  stroke-dasharray: 0.8 5.1;
+}
+
+.gauge__progress {
+  stroke: var(--gauge-accent);
+  stroke-linecap: round;
+  transition: stroke-dashoffset 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.gauge__content {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  padding-top: 32px;
+  color: #f5f1e7;
+}
+
+.gauge__value {
+  font-family: Bahnschrift, 'Aptos Display', sans-serif;
+  font-size: 31px;
+  font-weight: 450;
+  line-height: 1;
+  letter-spacing: -1.5px;
+}
+
+.gauge__unit {
+  margin-left: 2px;
+  color: var(--gauge-accent);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.gauge__label {
+  position: absolute;
+  top: 66px;
+  color: rgba(224, 231, 225, 0.48);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+.gauge--compact .gauge__track,
+.gauge--compact .gauge__progress {
+  stroke-width: 7;
+}
+
+.gauge--compact .gauge__ticks {
+  display: none;
+}
+
+.gauge--compact .gauge__content {
+  padding-top: 17px;
+}
+
+.gauge--compact .gauge__value {
+  font-size: 16px;
+  letter-spacing: -0.5px;
+}
+
+.gauge--compact .gauge__unit {
+  font-size: 7px;
+}
+
+.gauge--compact .gauge__label {
+  top: 35px;
+  font-size: 6px;
+  letter-spacing: 0.7px;
+}
+</style>

src/components/QuotaTile.vue

@@ -0,0 +1,149 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  value: { type: Number, required: true },
+  label: { type: String, required: true },
+  mark: { type: String, required: true },
+  tone: { type: String, default: 'week' },
+})
+
+const normalizedValue = computed(() => Math.min(100, Math.max(0, props.value)))
+const roundedValue = computed(() => Math.round(normalizedValue.value))
+const progressStyle = computed(() => ({
+  transform: `scaleX(${normalizedValue.value / 100})`,
+}))
+</script>
+
+<template>
+  <article
+    class="quota"
+    :class="`quota--${tone}`"
+    :aria-label="`${label}剩余${roundedValue}%`"
+  >
+    <div class="quota__mark" aria-hidden="true">{{ mark }}</div>
+
+    <div class="quota__content">
+      <div class="quota__reading">
+        <strong>{{ roundedValue }}</strong><span>%</span>
+      </div>
+      <div class="quota__track" aria-hidden="true">
+        <i :style="progressStyle"></i>
+      </div>
+    </div>
+
+    <span
+      class="sr-only"
+      role="progressbar"
+      :aria-label="`${label}剩余额度`"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      :aria-valuenow="roundedValue"
+    ></span>
+  </article>
+</template>
+
+<style scoped>
+.quota {
+  --accent: #3157f6;
+  display: flex;
+  width: 112px;
+  height: 52px;
+  flex: 0 0 112px;
+  align-items: center;
+  gap: 9px;
+  padding: 8px;
+  color: #17181c;
+  background: #f2f0e9;
+  border-radius: 15px;
+  -webkit-app-region: no-drag;
+  animation: quota-enter 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.quota--short {
+  --accent: #eb6448;
+  background: #f4eee8;
+}
+
+.quota__mark {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  flex: 0 0 30px;
+  place-items: center;
+  color: #fff;
+  background: var(--accent);
+  border-radius: 9px;
+  font-family: Bahnschrift, 'Aptos Narrow', sans-serif;
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: 0.04em;
+}
+
+.quota__content {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.quota__reading {
+  display: flex;
+  align-items: baseline;
+  font-family: Bahnschrift, 'Aptos Display', sans-serif;
+  line-height: 1;
+}
+
+.quota__reading strong {
+  font-size: 25px;
+  font-weight: 620;
+  letter-spacing: -1.2px;
+}
+
+.quota__reading span {
+  margin-left: 2px;
+  color: var(--accent);
+  font-size: 9px;
+  font-weight: 750;
+}
+
+.quota__track {
+  width: 44px;
+  height: 4px;
+  margin-top: 5px;
+  overflow: hidden;
+  background: #d3d0c7;
+  border-radius: 99px;
+}
+
+.quota__track i {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: var(--accent);
+  border-radius: inherit;
+  transform-origin: left center;
+  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+@keyframes quota-enter {
+  from { opacity: 0; transform: translateY(3px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .quota { animation: none; }
+  .quota__track i { transition: none; }
+}
+</style>

src/components/UsagePanel.vue

@@ -0,0 +1,148 @@
+<script setup>
+import { computed } from 'vue'
+import QuotaTile from './QuotaTile.vue'
+
+const props = defineProps({
+  snapshot: { type: Object, default: null },
+})
+
+const shortWindow = computed(() => props.snapshot?.shortWindow ?? null)
+const weekWindow = computed(() => props.snapshot?.weekWindow ?? null)
+const dockWindows = computed(() => [shortWindow.value, weekWindow.value].filter(Boolean))
+
+let draggingPointer = null
+
+function startDrag(event) {
+  const hitTarget = event.target.closest('.quota, .dock-strip')
+  if (!hitTarget || event.button !== 0 || !window.codexHalo?.startWindowDrag) return
+  draggingPointer = event.pointerId
+  event.currentTarget.setPointerCapture(event.pointerId)
+  window.codexHalo.startWindowDrag({ x: event.screenX, y: event.screenY })
+}
+
+function moveDrag(event) {
+  if (event.pointerId !== draggingPointer) return
+  window.codexHalo.moveWindowDrag({ x: event.screenX, y: event.screenY })
+}
+
+function endDrag(event) {
+  if (event.pointerId !== draggingPointer) return
+  draggingPointer = null
+  window.codexHalo.endWindowDrag()
+}
+
+function progressStyle(value) {
+  const normalized = Math.min(100, Math.max(0, value))
+  return { transform: `scaleY(${normalized / 100})` }
+}
+
+function expandDock() {
+  window.codexHalo?.expandDock?.()
+}
+
+function collapseDock() {
+  window.codexHalo?.collapseDock?.()
+}
+</script>
+
+<template>
+  <main
+    class="panel"
+    @pointerdown="startDrag"
+    @pointermove="moveDrag"
+    @pointerup="endDrag"
+    @pointercancel="endDrag"
+    @pointerleave="collapseDock"
+  >
+    <QuotaTile
+      v-if="shortWindow"
+      :value="shortWindow.remainingPercent"
+      label="5 小时"
+      mark="5H"
+      tone="short"
+    />
+    <QuotaTile
+      v-if="weekWindow"
+      :value="weekWindow.remainingPercent"
+      label="周限额"
+      mark="7D"
+    />
+    <div class="dock-strip" aria-hidden="true" @pointerenter="expandDock">
+      <span v-for="quota in dockWindows" :key="quota.windowMinutes">
+        <i :style="progressStyle(quota.remainingPercent)"></i>
+      </span>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.panel {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  background: transparent;
+  user-select: none;
+  touch-action: none;
+}
+
+:deep(.quota),
+.dock-strip {
+  cursor: grab;
+}
+
+:deep(.quota:active),
+.dock-strip:active {
+  cursor: grabbing;
+}
+
+.dock-strip {
+  display: none;
+}
+
+@media (max-width: 30px) {
+  .panel {
+    justify-content: flex-end;
+  }
+
+  .quota {
+    display: none;
+  }
+
+  .dock-strip {
+    display: flex;
+    width: 9px;
+    height: 52px;
+    align-items: stretch;
+    justify-content: center;
+    gap: 1px;
+    padding: 5px 2px;
+    overflow: hidden;
+    background: #f2f0e9;
+    border-radius: 8px 0 0 8px;
+  }
+
+  .dock-strip > span {
+    position: relative;
+    width: 3px;
+    overflow: hidden;
+    background: #d3d0c7;
+    border-radius: 99px;
+  }
+
+  .dock-strip i {
+    position: absolute;
+    inset: 0;
+    background: #3157f6;
+    border-radius: inherit;
+    transform-origin: center bottom;
+  }
+
+  .dock-strip > span:first-child:not(:last-child) i {
+    background: #eb6448;
+  }
+}
+
+</style>

src/composables/useUsage.js

@@ -0,0 +1,56 @@
+import { onMounted, onUnmounted, readonly, shallowRef } from 'vue'
+
+function demoSnapshot() {
+  const now = Date.now()
+  return {
+    shortWindow: null,
+    weekWindow: {
+      remainingPercent: 21,
+      usedPercent: 79,
+      resetsAt: now + 3 * 24 * 60 * 60 * 1000 + 8 * 60 * 60 * 1000,
+    },
+    status: '浏览器预览数据',
+    updatedAt: now,
+  }
+}
+
+export function useUsage() {
+  const snapshot = shallowRef(null)
+  const isRefreshing = shallowRef(false)
+  let unsubscribe
+
+  async function refresh() {
+    if (!window.codexHalo) {
+      snapshot.value = demoSnapshot()
+      return
+    }
+
+    isRefreshing.value = true
+    try {
+      snapshot.value = await window.codexHalo.refreshUsage()
+    } finally {
+      isRefreshing.value = false
+    }
+  }
+
+  onMounted(async () => {
+    if (!window.codexHalo) {
+      snapshot.value = demoSnapshot()
+      return
+    }
+
+    unsubscribe = window.codexHalo.onUsage((nextSnapshot) => {
+      snapshot.value = nextSnapshot
+      isRefreshing.value = false
+    })
+    snapshot.value = await window.codexHalo.getUsage()
+  })
+
+  onUnmounted(() => unsubscribe?.())
+
+  return {
+    snapshot: readonly(snapshot),
+    isRefreshing: readonly(isRefreshing),
+    refresh,
+  }
+}

src/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './assets/main.css'
+
+createApp(App).mount('#app')

task_plan.md

@@ -0,0 +1,67 @@
+# Codex Orbit Vue 开发计划
+
+## 目标
+使用 Vue 3、JavaScript 与 Electron 开发一个原创视觉的 Windows Codex 额度悬浮工具，不复用 C# 版本的图片资源。
+
+## 当前阶段
+阶段 6：视觉重构完成
+
+## 阶段
+
+### 阶段 1：需求与发现
+- [x] 确认技术栈与用户约束
+- [x] 检查原 C# 项目的日志读取方式
+- [x] 记录组件边界与技术方案
+- **状态：** complete
+
+### 阶段 2：项目与界面实现
+- [x] 创建 Vue 3 + Vite + Electron 工程
+- [x] 实现原创悬浮仪表界面
+- [x] 实现演示模式与响应式状态
+- **状态：** complete
+
+### 阶段 3：桌面能力实现
+- [x] 解析 Codex 本地 JSONL 日志
+- [x] 监听日志并通过 IPC 更新 Vue
+- [x] 实现托盘、置顶、拖动、保存位置
+- **状态：** in_progress
+
+### 阶段 4：构建与验证
+- [ ] 安装依赖并运行静态检查
+- [ ] 构建前端与 Windows EXE
+- [ ] 启动应用并进行视觉验证
+- **状态：** pending
+
+### 阶段 5：交付
+- [ ] 检查输出文件和使用说明
+- [ ] 更新进度与最终结果
+- **状态：** pending
+
+### 阶段 6：视觉重构
+- [x] 确定新的编辑式工业仪表方向
+- [x] 将圆环组件替换为分段额度组件
+- [x] 重构面板排版、颜色、字体和动效
+- [x] 根据用户参考进一步精简为纯额度表盘
+- [x] 修复过期5小时额度仍然显示的问题
+- [x] 构建并进行真实窗口视觉验证
+- **状态：** complete
+
+## 已做决策
+
+| 决策 | 理由 |
+|------|------|
+| Vue 3 Composition API + JavaScript | 用户已确认希望使用 JavaScript |
+| Electron + electron-builder | 提供透明窗口、托盘、本地文件和 EXE 打包能力 |
+| SVG + CSS 原创建图 | 不复用原项目图片，保持界面轻量清晰 |
+| 无服务器、无数据库 | 数据来自本机 Codex 会话日志 |
+
+## 遇到的错误
+
+| 错误 | 尝试次数 | 解决方案 |
+|------|---------|---------|
+| 首次 `npm install` 在 120 秒工具时限内未完成 | 1 | 保留已下载内容并使用更长时限继续安装 |
+| 系统与内置 Python 均缺少 Playwright 模块 | 2 | 改用工作区已提供的 Node Playwright 包 |
+| 内置 Playwright 缺少默认浏览器二进制 | 1 | 指定系统已安装的 Chrome 作为测试浏览器 |
+| 系统 Chrome 无头视觉会话未正常退出 | 1 | 改用 Electron 自身的 `capturePage` 验证真实窗口 |
+| electron-builder 重命名临时发布目录时遇到 Windows `EPERM` | 1 | 检查残留进程和发布目录锁后清理临时产物重试 |
+| 从临时目录生成的首个 portable 仅含 Electron 空运行时 | 1 | 不交付该文件；补齐应用 `app.asar` 和产品 EXE 后重新封装验证 |

tests/usage-reader.test.js

@@ -0,0 +1,56 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { mkdtempSync, rmSync, writeFileSync } from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
+import { parseUsageLine, readLatestUsage } from '../electron/usage-reader.js'
+
+test('parses primary and secondary Codex rate limit windows', () => {
+  const line = JSON.stringify({
+    timestamp: '2026-07-16T08:00:00.000Z',
+    type: 'event_msg',
+    payload: {
+      type: 'token_count',
+      rate_limits: {
+        primary: { window_minutes: 300, used_percent: 32, resets_at: 1784203200 },
+        secondary: { window_minutes: 10080, used_percent: 59, resets_at: 1784808000 },
+      },
+    },
+  })
+
+  const snapshots = parseUsageLine(line, 'rollout-test.jsonl')
+  assert.equal(snapshots.length, 2)
+  assert.equal(snapshots[0].remainingPercent, 68)
+  assert.equal(snapshots[1].remainingPercent, 41)
+  assert.equal(snapshots[0].sourceFile, 'rollout-test.jsonl')
+})
+
+test('ignores malformed or unrelated lines', () => {
+  assert.deepEqual(parseUsageLine('{broken'), [])
+  assert.deepEqual(parseUsageLine(JSON.stringify({ type: 'event_msg', payload: { type: 'message' } })), [])
+})
+
+test('does not expose an expired five-hour window', () => {
+  const sessionsPath = mkdtempSync(path.join(os.tmpdir(), 'codex-halo-test-'))
+  const now = Date.now()
+  const line = JSON.stringify({
+    timestamp: new Date(now).toISOString(),
+    type: 'event_msg',
+    payload: {
+      type: 'token_count',
+      rate_limits: {
+        primary: { window_minutes: 300, used_percent: 31, resets_at: Math.floor(now / 1000) - 30 },
+        secondary: { window_minutes: 10080, used_percent: 79, resets_at: Math.floor(now / 1000) + 3600 },
+      },
+    },
+  })
+
+  try {
+    writeFileSync(path.join(sessionsPath, 'rollout-test.jsonl'), line)
+    const snapshot = readLatestUsage(sessionsPath)
+    assert.equal(snapshot.shortWindow, null)
+    assert.equal(snapshot.weekWindow.remainingPercent, 21)
+  } finally {
+    rmSync(sessionsPath, { recursive: true, force: true })
+  }
+})

vite.config.js

@@ -0,0 +1,17 @@
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  base: './',
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+})