feat: 替换 OpenBridge 组件并实现航海规范主题系统

- 使用 shadcn/ui 重新实现 TopBar、ThemeSidebar、AlertBadge 组件 - 解决 @oicl/openbridge-webcomponents ESM 模块解析问题 - 添加 OpenBridge 四种主题 CSS 变量 (day/bright/dusk/night) - Night 主题使用暗黄色文字保护夜视能力 - 更新 API 端点适配新的按模型分组数据结构
refactor: 简化项目配置，改用环境变量端口并专注 MSI 发布
2026-01-26 21:17:56 +08:00 · 2026-01-22 14:19:43 +08:00 · 2026-01-22 13:02:43 +08:00 · 2026-01-22 12:00:06 +08:00 · 2026-01-21 20:15:34 +08:00
33 changed files with 1960 additions and 503 deletions
--- a/.env.example
+++ b/.env.example
@@ -1 +1,2 @@
-TOKEN_USAGE_URL=
+TOKEN_USAGE_URL=http://10.0.1.1:8318/usage
+PROJECT_SERVER_PORT=3214
--- a/README.md
+++ b/README.md
@@ -6,27 +6,50 @@

 ## 功能特点

- **实时配额监控**: 显示 4 个账户的 Claude Opus 4.5 (Thinking) 模型配额使用情况
- **可视化仪表盘**: Apple Health 风格的圆环进度指示器
+- **实时配额监控**: 显示最多 4 个账户的 Claude Opus 4.5 (Thinking) 模型配额使用情况
+- **可视化仪表盘**: Apple Health 风格的圆环进度指示器，颜色根据剩余配额自动变化
 - **智能告警系统**: 
  - 当配额剩余 < 20% 时显示警告 (Warning)
  - 当配额剩余 < 5% 时显示紧急告警 (Alarm)
- **主题切换**: 支持白天/夜间模式切换
+- **主题切换**: 支持白天/夜间模式切换，OpenBridge 设计系统主题
 - **自动刷新**: 配额数据每 5 分钟自动刷新
 - **倒计时显示**: 显示配额重置剩余时间
+- **SSR 支持**: 服务端渲染，首屏即有数据

 ## 技术栈

-| 层级 | 技术 |
+### 核心框架
+
+| 层级 | 技术 | 版本 |
+|------|------|------|
+| 前端框架 | React | 19.2 |
+| 路由 | TanStack Router | 1.151 |
+| 状态管理 | TanStack Query | 5.90 |
+| SSR 框架 | TanStack Start | 1.151 |
+| RPC 通信 | ORPC (类型安全契约优先) | 1.13 |
+| UI 组件 | OpenBridge Web Components | 0.0.17 |
+| 样式 | Tailwind CSS | v4 |
+| 桌面壳 | Tauri | v2.9 |
+| 运行时 | Bun | 1.3.6 |
+
+### 后端 & 数据
+
+| 技术 | 说明 |
 |------|------|
-| 前端框架 | React 19 + TanStack Router |
-| UI 组件 | OpenBridge Web Components |
-| 状态管理 | TanStack Query |
-| 样式 | Tailwind CSS v4 |
-| RPC 通信 | ORPC (类型安全) |
-| 桌面壳 | Tauri v2 |
-| 运行时 | Bun |
-| 构建 | Vite + Turbo |
+| SQLite | Bun 内置驱动 (bun:sqlite)，无需额外安装 |
+| Drizzle ORM | 类型安全 ORM，支持迁移 |
+| Nitro | 服务端框架 (bun preset) |
+| Zod | 运行时类型验证 |
+
+### 构建工具
+
+| 技术 | 说明 |
+|------|------|
+| Vite | 开发服务器 + 构建 |
+| Turbo | 任务并行化 |
+| Effect | 函数式构建脚本 |
+| Biome | 代码格式化 + Lint |
+| React Compiler | 自动优化，无需手动 memo |

 ## 快速开始

@@ -53,13 +76,19 @@ bun run dev         # Tauri 桌面应用 + Web
 ### 构建

 ```bash
-bun run build:vite   # 构建 Web 版本
+bun run build:vite   # 构建 Web 版本 (输出到 .output/)
 bun run build        # 构建 Tauri 桌面安装包
 ```

-构建产物位置：
- **MSI 安装包**: `src-tauri/target/release/bundle/msi/app-desktop_0.1.0_x64_en-US.msi`
- **NSIS 安装包**: `src-tauri/target/release/bundle/nsis/app-desktop_0.1.0_x64-setup.exe`
+### 构建产物位置
+
+| 类型 | 路径 |
+|------|------|
+| **Vite Web 构建** | `.output/` |
+| **Sidecar 二进制** | `src-tauri/binaries/app-<target>` |
+| **MSI 安装包** | `src-tauri/target/release/bundle/msi/app-desktop_0.1.0_x64_en-US.msi` |
+| **NSIS 安装包** | `src-tauri/target/release/bundle/nsis/app-desktop_0.1.0_x64-setup.exe` |
+| **macOS DMG** | `src-tauri/target/release/bundle/dmg/app-desktop_0.1.0_aarch64.dmg` |

 ## 配置

@@ -92,15 +121,129 @@ TOKEN_USAGE_URL=http://your-server:8318/usage

 ## 常用命令

+### 开发
+
 | 命令 | 说明 |
 |------|------|
-| `bun dev` | 启动 Tauri + Vite 开发服务器 |
-| `bun dev:vite` | 仅启动 Vite 开发服务器 |
+| `bun dev` | 启动 Tauri + Vite 开发服务器 (并行) |
+| `bun dev:vite` | 仅启动 Vite 开发服务器 (http://localhost:3000) |
 | `bun dev:tauri` | 仅启动 Tauri (需先启动 Vite) |
-| `bun build` | 完整构建 (Tauri 桌面应用) |
-| `bun build:vite` | 仅构建 Web 版本 |
+| `bun db:studio` | 打开 Drizzle Studio 数据库管理界面 |
+
+### 构建
+
+| 命令 | 说明 |
+|------|------|
+| `bun build` | 完整构建 (Vite → 编译 → Tauri 打包) |
+| `bun build:vite` | 仅构建 Web 版本 (输出到 .output/) |
+| `bun build:compile` | 编译 Sidecar 二进制 (使用 build.ts) |
+| `bun build:tauri` | 构建 Tauri 桌面安装包 |
+
+### 代码质量
+
+| 命令 | 说明 |
+|------|------|
 | `bun typecheck` | TypeScript 类型检查 |
-| `bun fix` | 自动修复格式和 Lint 问题 |
+| `bun fix` | 自动修复格式和 Lint 问题 (Biome) |
+
+### 数据库
+
+| 命令 | 说明 |
+|------|------|
+| `bun db:init` | 初始化 SQLite 数据库 |
+| `bun db:generate` | 从 schema 生成迁移文件 |
+| `bun db:migrate` | 执行数据库迁移 |
+| `bun db:studio` | 打开 Drizzle Studio |
+
+## 项目结构
+
+```
+├── src/
+│   ├── components/                 # React 组件
+│   │   ├── HealthRing.tsx          # 圆环进度指示器 (Apple Health 风格)
+│   │   ├── TokenUsageDashboard.tsx # 主仪表盘 (告警+主题+圆环)
+│   │   ├── Error.tsx               # 错误边界回退组件
+│   │   └── NotFount.tsx            # 404 页面
+│   │
+│   ├── hooks/                      # React Hooks
+│   │   ├── useCountdown.ts         # 倒计时 Hook (useMemo 优化)
+│   │   └── useTheme.ts             # OpenBridge 主题切换 Hook
+│   │
+│   ├── orpc/                       # ORPC RPC 层
+│   │   ├── contracts/              # 契约定义 (Zod schema)
+│   │   │   └── usage.ts            # 使用量查询契约
+│   │   ├── handlers/               # 服务端处理器
+│   │   │   └── usage.ts            # 获取配额数据+存储历史
+│   │   ├── middlewares/            # ORPC 中间件
+│   │   │   └── db.ts               # 数据库连接 Provider
+│   │   ├── client.ts               # 同构客户端 (SSR/CSR 自动切换)
+│   │   ├── contract.ts             # 契约聚合
+│   │   ├── router.ts               # 路由组合
+│   │   ├── server.ts               # 服务端实例
+│   │   └── types.ts                # 类型导出
+│   │
+│   ├── routes/                     # TanStack Router 文件路由
+│   │   ├── __root.tsx              # 根布局 (OpenBridge 主题集成)
+│   │   ├── index.tsx               # 首页 (SSR 预取+自动刷新)
+│   │   └── api/rpc.$.ts            # ORPC HTTP 端点
+│   │
+│   ├── db/                         # 数据库层
+│   │   ├── schema/                 # Drizzle Schema
+│   │   │   └── usage-history.ts    # 使用量历史表
+│   │   └── index.ts                # 数据库连接 (SQLite WAL)
+│   │
+│   ├── lib/                        # 工具函数
+│   ├── env.ts                      # 环境变量验证 (t3-env)
+│   └── router.tsx                  # 路由配置
+│
+├── src-tauri/                      # Tauri 桌面应用
+│   ├── src/
+│   │   ├── lib.rs                  # Tauri 入口
+│   │   └── sidecar.rs              # Sidecar 进程管理
+│   ├── binaries/                   # 编译后的 sidecar 二进制
+│   └── tauri.conf.json             # Tauri 配置
+│
+├── build.ts                        # 跨平台构建脚本 (Effect 框架)
+├── vite.config.ts                  # Vite 配置
+├── drizzle.config.ts               # Drizzle ORM 配置
+└── .output/                        # Vite 构建输出
+```
+
+## 架构说明
+
+### ORPC 同构客户端
+
+ORPC 客户端根据运行环境自动选择最优调用方式:
+
+- **SSR (服务端)**: 直接调用 router 处理器，零网络开销
+- **CSR (客户端)**: 通过 `/api/rpc` 端点进行 HTTP 调用
+
+```tsx
+// 使用 TanStack Query
+const { data } = useSuspenseQuery(orpc.usage.getUsage.queryOptions())
+```
+
+### Tauri Sidecar
+
+应用采用 Sidecar 架构:
+
+1. **Tauri 壳**: 提供原生窗口和系统集成
+2. **Bun 服务端**: 编译为独立可执行文件，处理 SSR 和 API 请求
+3. **通信**: Tauri WebView 通过 localhost:3000 与 Sidecar 通信
+
+### 数据流
+
+```
+Token API (http://10.0.1.1:8318/usage)
+    ↓
+ORPC Handler (usage.ts)
+    ↓
+SQLite (data/app.db) ← 历史记录存储
+    ↓
+TanStack Query Cache
+    ↓
+React Components (TokenUsageDashboard)
+```

 ## 故障排除

@@ -188,34 +331,6 @@ taskkill /F /PID <PID>
 2. 重新安装新的 MSI
 3. 确保安装目录有写入权限

-## 项目结构
-
-```
-├── src/
-│   ├── components/
-│   │   ├── HealthRing.tsx      # 圆环进度指示器
-│   │   ├── TokenUsageDashboard.tsx  # 主仪表盘
-│   │   └── ...
-│   ├── hooks/
-│   │   └── useTheme.ts         # 主题切换 Hook
-│   ├── orpc/
-│   │   ├── contracts/usage.ts  # API 契约
-│   │   └── handlers/usage.ts   # 数据获取逻辑
-│   ├── routes/
-│   │   ├── __root.tsx          # 根布局
-│   │   └── index.tsx           # 首页
-│   └── env.ts                  # 环境变量配置
-│
-├── src-tauri/                  # Tauri 桌面应用
-│   ├── src/
-│   │   ├── lib.rs              # Tauri 入口
-│   │   └── sidecar.rs          # Sidecar 管理
-│   ├── binaries/               # 编译后的 sidecar
-│   └── tauri.conf.json         # Tauri 配置
-│
-└── .output/                    # Vite 构建输出
-```
-
 ## 许可证

 MIT
--- a/build.ts
+++ b/build.ts
@@ -1,11 +1,36 @@
+/**
+ * 跨平台构建脚本
+ *
+ * 使用 Effect 框架实现类型安全的多目标编译。
+ * 将 TanStack Start 的 SSR 服务器打包为独立可执行文件，
+ * 用于 Tauri 的 sidecar 机制。
+ *
+ * 支持目标平台:
+ * - Windows (x64)
+ * - macOS (ARM64/x64)
+ * - Linux (x64/ARM64)
+ *
+ * 用法: bun run build:compile
+ */
 import { Schema } from '@effect/schema'
 import { $ } from 'bun'
 import { Console, Context, Data, Effect, Layer } from 'effect'

 // ============================================================================
-// Domain Models & Schema
+// 项目配置
 // ============================================================================

+/** 项目名称 - 用于生成 sidecar 文件名 */
+const PROJECT_NAME = 'openbridgeTokenUsageViewerServer'
+
+// ============================================================================
+// 领域模型和 Schema 定义
+// ============================================================================
+
+/**
+ * Bun 目标平台到 Rust 目标三元组的映射
+ * 用于生成 Tauri sidecar 所需的文件名格式
+ */
 const targetMap = {
  'bun-windows-x64': 'x86_64-pc-windows-msvc',
  'bun-darwin-arm64': 'aarch64-apple-darwin',
@@ -14,6 +39,7 @@ const targetMap = {
  'bun-linux-arm64': 'aarch64-unknown-linux-gnu',
 } as const

+/** Bun 编译目标 Schema */
 const BunTargetSchema = Schema.Literal(
  'bun-windows-x64',
  'bun-darwin-arm64',
@@ -22,48 +48,63 @@ const BunTargetSchema = Schema.Literal(
  'bun-linux-arm64',
 )

+/** Bun 编译目标类型 */
 type BunTarget = Schema.Schema.Type<typeof BunTargetSchema>

+/** 构建配置 Schema */
 const BuildConfigSchema = Schema.Struct({
+  /** 入口文件路径 */
  entrypoint: Schema.String.pipe(Schema.nonEmptyString()),
+  /** 输出目录 */
  outputDir: Schema.String.pipe(Schema.nonEmptyString()),
+  /** 目标平台列表 */
  targets: Schema.Array(BunTargetSchema).pipe(Schema.minItems(1)),
 })

+/** 构建配置类型 */
 type BuildConfig = Schema.Schema.Type<typeof BuildConfigSchema>

+/** 构建结果 Schema */
 const BuildResultSchema = Schema.Struct({
+  /** 编译目标 */
  target: BunTargetSchema,
+  /** 输出文件路径列表 */
  outputs: Schema.Array(Schema.String),
 })

+/** 构建结果类型 */
 type BuildResult = Schema.Schema.Type<typeof BuildResultSchema>

 // ============================================================================
-// Error Models (使用 Data.TaggedError)
+// 错误模型 (使用 Effect Data.TaggedError)
 // ============================================================================

+/** 清理目录错误 */
 class CleanError extends Data.TaggedError('CleanError')<{
  readonly dir: string
  readonly cause: unknown
 }> {}

+/** 构建错误 */
 class BuildError extends Data.TaggedError('BuildError')<{
  readonly target: BunTarget
  readonly cause: unknown
 }> {}

+/** 配置验证错误 */
 class ConfigError extends Data.TaggedError('ConfigError')<{
  readonly message: string
  readonly cause: unknown
 }> {}

 // ============================================================================
-// Services
+// 服务层
 // ============================================================================

 /**
- * 配置服务
+ * 构建配置服务
+ *
+ * 提供类型安全的配置验证和默认配置。
 */
 class BuildConfigService extends Context.Tag('BuildConfigService')<
  BuildConfigService,
@@ -71,6 +112,9 @@ class BuildConfigService extends Context.Tag('BuildConfigService')<
 >() {
  /**
   * 从原始数据创建并验证配置
+   *
+   * @param raw - 原始配置对象
+   * @returns 验证后的配置或配置错误
   */
  static fromRaw = (raw: unknown) =>
    Effect.gen(function* () {
@@ -89,12 +133,13 @@ class BuildConfigService extends Context.Tag('BuildConfigService')<

  /**
   * 默认配置 Layer
+   *
+   * 输出到 src-tauri/binaries 目录，供 Tauri sidecar 使用
   */
  static readonly Live = Layer.effect(
    BuildConfigService,
    BuildConfigService.fromRaw({
      entrypoint: '.output/server/index.mjs',
-      // outputDir: 'out',
      outputDir: 'src-tauri/binaries',
      targets: ['bun-windows-x64', 'bun-darwin-arm64', 'bun-linux-x64'],
    }),
@@ -103,10 +148,13 @@ class BuildConfigService extends Context.Tag('BuildConfigService')<

 /**
 * 文件系统服务
+ *
+ * 提供目录清理等文件操作。
 */
 class FileSystemService extends Context.Tag('FileSystemService')<
  FileSystemService,
  {
+    /** 清理指定目录 */
    readonly cleanDir: (dir: string) => Effect.Effect<void, CleanError>
  }
 >() {
@@ -127,14 +175,18 @@ class FileSystemService extends Context.Tag('FileSystemService')<

 /**
 * 构建服务
+ *
+ * 使用 Bun.build 进行跨平台编译。
 */
 class BuildService extends Context.Tag('BuildService')<
  BuildService,
  {
+    /** 为单个目标编译 */
    readonly buildForTarget: (
      config: BuildConfig,
      target: BunTarget,
    ) => Effect.Effect<BuildResult, BuildError>
+    /** 并行编译所有目标 */
    readonly buildAll: (
      config: BuildConfig,
    ) => Effect.Effect<ReadonlyArray<BuildResult>, BuildError>
@@ -150,7 +202,7 @@ class BuildService extends Context.Tag('BuildService')<
            Bun.build({
              entrypoints: [config.entrypoint],
              compile: {
-                outfile: `app-${targetMap[target]}`,
+                outfile: `${PROJECT_NAME}-${targetMap[target]}`,
                target: target,
              },
              outdir: config.outputDir,
@@ -172,6 +224,7 @@ class BuildService extends Context.Tag('BuildService')<

    buildAll: (config: BuildConfig) =>
      Effect.gen(function* () {
+        // 为每个目标创建编译任务
        const effects = config.targets.map((target) =>
          Effect.gen(function* () {
            yield* Console.log(`🔨 开始构建: ${target}`)
@@ -181,7 +234,7 @@ class BuildService extends Context.Tag('BuildService')<
                Bun.build({
                  entrypoints: [config.entrypoint],
                  compile: {
-                    outfile: `app-${targetMap[target]}`,
+                    outfile: `${PROJECT_NAME}-${targetMap[target]}`,
                    target: target,
                  },
                  outdir: config.outputDir,
@@ -203,6 +256,7 @@ class BuildService extends Context.Tag('BuildService')<
            } satisfies BuildResult
          }),
        )
+        // 并行执行所有编译任务
        return yield* Effect.all(effects, { concurrency: 'unbounded' })
      }),
  })
@@ -210,10 +264,13 @@ class BuildService extends Context.Tag('BuildService')<

 /**
 * 报告服务
+ *
+ * 输出构建结果摘要。
 */
 class ReporterService extends Context.Tag('ReporterService')<
  ReporterService,
  {
+    /** 打印构建摘要 */
    readonly printSummary: (
      results: ReadonlyArray<BuildResult>,
    ) => Effect.Effect<void>
@@ -234,9 +291,17 @@ class ReporterService extends Context.Tag('ReporterService')<
 }

 // ============================================================================
-// Main Program
+// 主程序
 // ============================================================================

+/**
+ * 构建流程主程序
+ *
+ * 步骤:
+ * 1. 清理输出目录
+ * 2. 并行构建所有目标平台
+ * 3. 输出构建摘要
+ */
 const program = Effect.gen(function* () {
  const config = yield* BuildConfigService
  const fs = yield* FileSystemService
@@ -257,9 +322,10 @@ const program = Effect.gen(function* () {
 })

 // ============================================================================
-// Layer Composition
+// Layer 组合
 // ============================================================================

+/** 合并所有服务 Layer */
 const MainLayer = Layer.mergeAll(
  BuildConfigService.Live,
  FileSystemService.Live,
@@ -268,9 +334,10 @@ const MainLayer = Layer.mergeAll(
 )

 // ============================================================================
-// Runner
+// 执行入口
 // ============================================================================

+/** 可运行的程序（附带错误处理） */
 const runnable = program.pipe(
  Effect.provide(MainLayer),
  Effect.catchTags({
@@ -284,6 +351,7 @@ const runnable = program.pipe(
  Effect.tapErrorCause((cause) => Console.error('❌ 未预期的错误:', cause)),
 )

+// 执行程序
 Effect.runPromise(runnable).catch(() => {
  process.exit(1)
 })
--- a/bun.lock
+++ b/bun.lock
@@ -5,21 +5,31 @@
    "": {
      "name": "fullstack-starter",
      "dependencies": {
+        "@effect/schema": "^0.75.5",
+        "@oicl/openbridge-webcomponents-react": "^0.0.17",
        "@orpc/client": "^1.13.4",
        "@orpc/contract": "^1.13.4",
        "@orpc/server": "^1.13.4",
        "@orpc/tanstack-query": "^1.13.4",
        "@orpc/zod": "^1.13.4",
+        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-slot": "^1.2.4",
        "@t3-oss/env-core": "^0.13.10",
        "@tanstack/react-query": "^5.90.18",
        "@tanstack/react-router": "^1.151.0",
        "@tanstack/react-router-ssr-query": "^1.151.0",
        "@tanstack/react-start": "^1.151.0",
        "@tauri-apps/api": "^2.9.1",
+        "@types/react": "^19.2.9",
+        "@types/react-dom": "^19.2.3",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
        "drizzle-orm": "^0.45.1",
        "drizzle-zod": "^0.8.3",
+        "lucide-react": "^0.563.0",
        "react": "^19.2.3",
        "react-dom": "^19.2.3",
+        "tailwind-merge": "^3.4.0",
        "zod": "^4.3.5",
      },
      "devDependencies": {
@@ -38,6 +48,7 @@
        "nitro": "npm:nitro-nightly@latest",
        "tailwindcss": "^4.1.18",
        "turbo": "^2.7.5",
+        "tw-animate-css": "^1.4.0",
        "typescript": "^5.9.3",
        "vite": "^8.0.0-beta.8",
        "vite-tsconfig-paths": "^6.0.4",
@@ -129,6 +140,8 @@

    "@drizzle-team/brocli": ["@drizzle-team/brocli@0.10.2", "", {}, "sha512-z33Il7l5dKjUgGULTqBsQBQwckHh5AbIuxhdsIxDDiZAzBOrZO6q9ogcWC65kU382AfynTfgNumVcNIjuIua6w=="],

+    "@effect/schema": ["@effect/schema@0.75.5", "", { "dependencies": { "fast-check": "^3.21.0" }, "peerDependencies": { "effect": "^3.9.2" } }, "sha512-TQInulTVCuF+9EIbJpyLP6dvxbQJMphrnRqgexm/Ze39rSjfhJuufF7XvU3SxTgg3HnL7B/kpORTJbHhlE6thw=="],
+
    "@emnapi/core": ["@emnapi/core@1.8.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" } }, "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg=="],

    "@emnapi/runtime": ["@emnapi/runtime@1.8.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg=="],
@@ -201,8 +214,22 @@

    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],

+    "@lit-labs/observers": ["@lit-labs/observers@2.1.0", "", { "dependencies": { "@lit/reactive-element": "^1.0.0 || ^2.0.0" } }, "sha512-oeQ2tvi/ygq7S+VgnXIInMKHHFPFqvIV9j2zBzpCwl33cWviT2ltuxNpbd11etwtUVsM8woKQzfVnrc80PKhKA=="],
+
+    "@lit-labs/ssr-dom-shim": ["@lit-labs/ssr-dom-shim@1.5.1", "", {}, "sha512-Aou5UdlSpr5whQe8AA/bZG0jMj96CoJIWbGfZ91qieWu5AWUMKw8VR/pAkQkJYvBNhmCcWnZlyyk5oze8JIqYA=="],
+
+    "@lit/localize": ["@lit/localize@0.12.2", "", { "dependencies": { "lit": "^3.2.0" } }, "sha512-Qv9kvgJKDq/JVSwXOxuWvQnnOBysHA99ti9im9a4fImCmx+fto+XXcUYQbjZHqiueEEc4V20PcRDPO+1g/6seQ=="],
+
+    "@lit/react": ["@lit/react@1.0.8", "", { "peerDependencies": { "@types/react": "17 || 18 || 19" } }, "sha512-p2+YcF+JE67SRX3mMlJ1TKCSTsgyOVdAwd/nxp3NuV1+Cb6MWALbN6nT7Ld4tpmYofcE5kcaSY1YBB9erY+6fw=="],
+
+    "@lit/reactive-element": ["@lit/reactive-element@2.1.2", "", { "dependencies": { "@lit-labs/ssr-dom-shim": "^1.5.0" } }, "sha512-pbCDiVMnne1lYUIaYNN5wrwQXDtHaYtg7YEFPeW+hws6U47WeFvISGUWekPGKWOP1ygrs0ef0o1VJMk1exos5A=="],
+
    "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.1", "", { "dependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1", "@tybys/wasm-util": "^0.10.1" } }, "sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A=="],

+    "@oicl/openbridge-webcomponents": ["@oicl/openbridge-webcomponents@0.0.17", "", { "dependencies": { "@lit-labs/observers": "^2.0.4", "@lit/localize": "^0.12.2", "lit": "^3.2.1" } }, "sha512-Rky530eF/C6BY43AW9Jl1WLa1CsCcH4YpExHdHo0cKF4xsquG4h5KE78mi0CO2ZRaN/MJjI46YrNu2jNYaqsag=="],
+
+    "@oicl/openbridge-webcomponents-react": ["@oicl/openbridge-webcomponents-react@0.0.17", "", { "dependencies": { "@lit/react": "^1.0.0", "@oicl/openbridge-webcomponents": "^0.0.17" }, "peerDependencies": { "@types/react": "^17 || ^18", "react": "^17 || ^18" } }, "sha512-WOa1QN4oEB3z6ROdD0Cfr5bJyPYHF3npAB8Z5x2nCiAQYAUyA1fCKcq0k9r7B/QY3QYXyO7hlHuz4lDJf6M7RA=="],
+
    "@oozcitak/dom": ["@oozcitak/dom@2.0.2", "", { "dependencies": { "@oozcitak/infra": "^2.0.2", "@oozcitak/url": "^3.0.0", "@oozcitak/util": "^10.0.0" } }, "sha512-GjpKhkSYC3Mj4+lfwEyI1dqnsKTgwGy48ytZEhm4A/xnH/8z9M3ZVXKr/YGQi3uCLs1AEBS+x5T2JPiueEDW8w=="],

    "@oozcitak/infra": ["@oozcitak/infra@2.0.2", "", { "dependencies": { "@oozcitak/util": "^10.0.0" } }, "sha512-2g+E7hoE2dgCz/APPOEK5s3rMhJvNxSMBrP+U+j1OWsIbtSpWxxlUjq1lU8RIsFJNYv7NMlnVsCuHcUzJW+8vA=="],
@@ -327,6 +354,40 @@

    "@oxc-transform/binding-win32-x64-msvc": ["@oxc-transform/binding-win32-x64-msvc@0.108.0", "", { "os": "win32", "cpu": "x64" }, "sha512-k+7tuCMULfB7zr57jb68sVzxbyleZBasyr1h1Ieiu1U95XHYe64pbSrwHmlaSmiNHqV91ikM3809+ps68jZZhw=="],

+    "@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],
+
+    "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
+
+    "@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
+
+    "@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw=="],
+
+    "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg=="],
+
+    "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw=="],
+
+    "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw=="],
+
+    "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
+
+    "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.9", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ=="],
+
+    "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.5", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ=="],
+
+    "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
+
+    "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
+
+    "@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.2", "", { "dependencies": { "@radix-ui/react-use-effect-event": "0.0.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg=="],
+
+    "@radix-ui/react-use-effect-event": ["@radix-ui/react-use-effect-event@0.0.2", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA=="],
+
+    "@radix-ui/react-use-escape-keydown": ["@radix-ui/react-use-escape-keydown@1.1.1", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g=="],
+
+    "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
+
    "@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.0.0-beta.60", "", { "os": "android", "cpu": "arm64" }, "sha512-hOW6iQXtpG4uCW1zGK56+KhEXGttSkTp2ykncW/nkOIF/jOKTqbM944Q73HVeMXP1mPRvE2cZwNp3xeLIeyIGQ=="],

    "@rolldown/binding-darwin-arm64": ["@rolldown/binding-darwin-arm64@1.0.0-beta.60", "", { "os": "darwin", "cpu": "arm64" }, "sha512-vyDA4HXY2mP8PPtl5UE17uGPxUNG4m1wkfa3kAkR8JWrFbarV97UmLq22IWrNhtBPa89xqerzLK8KoVmz5JqCQ=="],
@@ -557,10 +618,12 @@

    "@types/node": ["@types/node@25.0.9", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-/rpCXHlCWeqClNBwUhDcusJxXYDjZTyE8v5oTO7WbL8eij2nKhUeU89/6xgjU7N4/Vh3He0BtyhJdQbDyhiXAw=="],

-    "@types/react": ["@types/react@19.2.8", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-3MbSL37jEchWZz2p2mjntRZtPt837ij10ApxKfgmXCTuHWagYg7iA5bqPw6C8BMPfwidlvfPI/fxOc42HLhcyg=="],
+    "@types/react": ["@types/react@19.2.9", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-Lpo8kgb/igvMIPeNV2rsYKTgaORYdO1XGVZ4Qz3akwOj0ySGYMPlQWa8BaLn0G63D1aSaAQ5ldR06wCpChQCjA=="],

    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],

+    "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
+
    "@typespec/ts-http-runtime": ["@typespec/ts-http-runtime@0.3.2", "", { "dependencies": { "http-proxy-agent": "^7.0.0", "https-proxy-agent": "^7.0.0", "tslib": "^2.6.2" } }, "sha512-IlqQ/Gv22xUC1r/WQm4StLkYQmaaTsXAhUVsNE0+xiyf0yRFiH5++q78U3bw6bLKDCTmh0uqKB9eG9+Bt75Dkg=="],

    "@vitejs/plugin-react": ["@vitejs/plugin-react@5.1.2", "", { "dependencies": { "@babel/core": "^7.28.5", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.53", "@types/babel__core": "^7.20.5", "react-refresh": "^0.18.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-EcA07pHJouywpzsoTUqNh5NwGayl2PPVEJKUSinGGSxFGYn+shYbqMGBg6FXDqgXum9Ou/ecb+411ssw8HImJQ=="],
@@ -575,6 +638,8 @@

    "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],

+    "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],
+
    "ast-types": ["ast-types@0.16.1", "", { "dependencies": { "tslib": "^2.0.1" } }, "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg=="],

    "babel-dead-code-elimination": ["babel-dead-code-elimination@1.0.12", "", { "dependencies": { "@babel/core": "^7.23.7", "@babel/parser": "^7.23.6", "@babel/traverse": "^7.23.7", "@babel/types": "^7.23.6" } }, "sha512-GERT7L2TiYcYDtYk1IpD+ASAYXjKbLTDPhBtYj7X1NuRMDTMtAx9kyBenub1Ev41lo91OHCKdmP+egTDmfQ7Ig=="],
@@ -609,6 +674,8 @@

    "chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],

+    "class-variance-authority": ["class-variance-authority@0.7.1", "", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
+
    "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],

    "consola": ["consola@3.4.2", "", {}, "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA=="],
@@ -639,6 +706,8 @@

    "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],

+    "detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="],
+
    "diff": ["diff@8.0.3", "", {}, "sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ=="],

    "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="],
@@ -689,6 +758,8 @@

    "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],

+    "get-nonce": ["get-nonce@1.0.1", "", {}, "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="],
+
    "get-tsconfig": ["get-tsconfig@4.13.0", "", { "dependencies": { "resolve-pkg-maps": "^1.0.0" } }, "sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ=="],

    "glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
@@ -771,6 +842,12 @@

    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.30.2", "", { "os": "win32", "cpu": "x64" }, "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw=="],

+    "lit": ["lit@3.3.2", "", { "dependencies": { "@lit/reactive-element": "^2.1.0", "lit-element": "^4.2.0", "lit-html": "^3.3.0" } }, "sha512-NF9zbsP79l4ao2SNrH3NkfmFgN/hBYSQo90saIVI1o5GpjAdCPVstVzO1MrLOakHoEhYkrtRjPK6Ob521aoYWQ=="],
+
+    "lit-element": ["lit-element@4.2.2", "", { "dependencies": { "@lit-labs/ssr-dom-shim": "^1.5.0", "@lit/reactive-element": "^2.1.0", "lit-html": "^3.3.0" } }, "sha512-aFKhNToWxoyhkNDmWZwEva2SlQia+jfG0fjIWV//YeTaWrVnOxD89dPKfigCUspXFmjzOEUQpOkejH5Ly6sG0w=="],
+
+    "lit-html": ["lit-html@3.3.2", "", { "dependencies": { "@types/trusted-types": "^2.0.2" } }, "sha512-Qy9hU88zcmaxBXcc10ZpdK7cOLXvXpRoBxERdtqV9QOrfpMZZ6pSYP91LhpPtap3sFMUiL7Tw2RImbe0Al2/kw=="],
+
    "lodash.includes": ["lodash.includes@4.3.0", "", {}, "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w=="],

    "lodash.isboolean": ["lodash.isboolean@3.0.3", "", {}, "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="],
@@ -787,6 +864,8 @@

    "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],

+    "lucide-react": ["lucide-react@0.563.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-8dXPB2GI4dI8jV4MgUDGBeLdGk8ekfqVZ0BdLcrRzocGgG75ltNEmWS+gE7uokKF/0oSUuczNDT+g9hFJ23FkA=="],
+
    "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],

    "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
@@ -843,6 +922,12 @@

    "react-refresh": ["react-refresh@0.18.0", "", {}, "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw=="],

+    "react-remove-scroll": ["react-remove-scroll@2.7.2", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],
+
+    "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
+
+    "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
+
    "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],

    "recast": ["recast@0.23.11", "", { "dependencies": { "ast-types": "^0.16.1", "esprima": "~4.0.0", "source-map": "~0.6.1", "tiny-invariant": "^1.3.3", "tslib": "^2.0.1" } }, "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA=="],
@@ -883,6 +968,8 @@

    "tagged-tag": ["tagged-tag@1.0.0", "", {}, "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng=="],

+    "tailwind-merge": ["tailwind-merge@3.4.0", "", {}, "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g=="],
+
    "tailwindcss": ["tailwindcss@4.1.18", "", {}, "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw=="],

    "tapable": ["tapable@2.3.0", "", {}, "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg=="],
@@ -915,6 +1002,8 @@

    "turbo-windows-arm64": ["turbo-windows-arm64@2.7.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-G377Gxn6P42RnCzfMyDvsqQV7j69kVHKlhz9J4RhtJOB5+DyY4yYh/w0oTIxZQ4JRMmhjwLu3w9zncMoQ6nNDw=="],

+    "tw-animate-css": ["tw-animate-css@1.4.0", "", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="],
+
    "type-fest": ["type-fest@5.4.1", "", { "dependencies": { "tagged-tag": "^1.0.0" } }, "sha512-xygQcmneDyzsEuKZrFbRMne5HDqMs++aFzefrJTgEIKjQ3rekM+RPfFCVq2Gp1VIDqddoYeppCj4Pcb+RZW0GQ=="],

    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
@@ -933,6 +1022,10 @@

    "update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="],

+    "use-callback-ref": ["use-callback-ref@1.3.3", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg=="],
+
+    "use-sidecar": ["use-sidecar@1.1.3", "", { "dependencies": { "detect-node-es": "^1.1.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ=="],
+
    "use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],

    "uuid": ["uuid@8.3.2", "", { "bin": { "uuid": "dist/bin/uuid" } }, "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="],
@@ -963,6 +1056,10 @@

    "@esbuild-kit/core-utils/esbuild": ["esbuild@0.18.20", "", { "optionalDependencies": { "@esbuild/android-arm": "0.18.20", "@esbuild/android-arm64": "0.18.20", "@esbuild/android-x64": "0.18.20", "@esbuild/darwin-arm64": "0.18.20", "@esbuild/darwin-x64": "0.18.20", "@esbuild/freebsd-arm64": "0.18.20", "@esbuild/freebsd-x64": "0.18.20", "@esbuild/linux-arm": "0.18.20", "@esbuild/linux-arm64": "0.18.20", "@esbuild/linux-ia32": "0.18.20", "@esbuild/linux-loong64": "0.18.20", "@esbuild/linux-mips64el": "0.18.20", "@esbuild/linux-ppc64": "0.18.20", "@esbuild/linux-riscv64": "0.18.20", "@esbuild/linux-s390x": "0.18.20", "@esbuild/linux-x64": "0.18.20", "@esbuild/netbsd-x64": "0.18.20", "@esbuild/openbsd-x64": "0.18.20", "@esbuild/sunos-x64": "0.18.20", "@esbuild/win32-arm64": "0.18.20", "@esbuild/win32-ia32": "0.18.20", "@esbuild/win32-x64": "0.18.20" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA=="],

+    "@radix-ui/react-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
    "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.8.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg=="],

    "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.8.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg=="],
--- a/components.json
+++ b/components.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "fullstack-starter",
+  "name": "openbridgeTokenUsageViewer",
  "private": true,
  "type": "module",
  "packageManager": "bun@1.3.6",
@@ -27,6 +27,8 @@
    "@orpc/server": "^1.13.4",
    "@orpc/tanstack-query": "^1.13.4",
    "@orpc/zod": "^1.13.4",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-slot": "^1.2.4",
    "@t3-oss/env-core": "^0.13.10",
    "@tanstack/react-query": "^5.90.18",
    "@tanstack/react-router": "^1.151.0",
@@ -35,10 +37,14 @@
    "@tauri-apps/api": "^2.9.1",
    "@types/react": "^19.2.9",
    "@types/react-dom": "^19.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
    "drizzle-orm": "^0.45.1",
    "drizzle-zod": "^0.8.3",
+    "lucide-react": "^0.563.0",
    "react": "^19.2.3",
    "react-dom": "^19.2.3",
+    "tailwind-merge": "^3.4.0",
    "zod": "^4.3.5"
  },
  "devDependencies": {
@@ -57,6 +63,7 @@
    "nitro": "npm:nitro-nightly@latest",
    "tailwindcss": "^4.1.18",
    "turbo": "^2.7.5",
+    "tw-animate-css": "^1.4.0",
    "typescript": "^5.9.3",
    "vite": "^8.0.0-beta.8",
    "vite-tsconfig-paths": "^6.0.4"
--- a/src-tauri/.gitignore
+++ b/src-tauri/.gitignore
@@ -8,3 +8,5 @@

 # Tauri Sidecar
 binaries/
+
+.DS_Store
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -47,17 +47,6 @@ version = "1.0.100"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a23eb6b1614318a8071c9b2521f36b424b2c83db5eb3a0fead4a6c0809af6e61"

-[[package]]
-name = "app-desktop"
-version = "0.1.0"
-dependencies = [
- "serde",
- "tauri",
- "tauri-build",
- "tauri-plugin-shell",
- "tokio",
-]
-
 [[package]]
 name = "atk"
 version = "0.18.2"
@@ -2071,6 +2060,17 @@ dependencies = [
 "pathdiff",
 ]

+[[package]]
+name = "openbridgeTokenUsageViewer"
+version = "0.1.0"
+dependencies = [
+ "serde",
+ "tauri",
+ "tauri-build",
+ "tauri-plugin-shell",
+ "tokio",
+]
+
 [[package]]
 name = "option-ext"
 version = "0.2.0"
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,7 +1,7 @@
 [package]
-name = "app-desktop"
+name = "openbridgeTokenUsageViewer"
 version = "0.1.0"
-description = "A Tauri App"
+description = "OpenBridge Token Usage Viewer"
 authors = ["imbytecat"]
 edition = "2021"

@@ -11,7 +11,7 @@ edition = "2021"
 # The `_lib` suffix may seem redundant but it is necessary
 # to make the lib name unique and wouldn't conflict with the bin name.
 # This seems to be only an issue on Windows, see https://github.com/rust-lang/cargo/issues/8519
-name = "app_desktop_lib"
+name = "openbridgeTokenUsageViewer_lib"
 crate-type = ["staticlib", "cdylib", "rlib"]

 [build-dependencies]
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -2,5 +2,5 @@
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

 fn main() {
-    app_desktop_lib::run()
+    openbridgeTokenUsageViewer_lib::run()
 }
--- a/src-tauri/src/sidecar.rs
+++ b/src-tauri/src/sidecar.rs
@@ -5,14 +5,27 @@ use tauri::Manager;
 use tauri_plugin_shell::process::{CommandChild, CommandEvent};
 use tauri_plugin_shell::ShellExt;

+// ===== 项目配置 =====
+
+/// Sidecar 二进制名称
+const SIDECAR_NAME: &str = "openbridgeTokenUsageViewerServer";
+
+/// 默认服务器端口
+const DEFAULT_PORT: u16 = 3000;
+
+/// 从环境变量获取端口 (PROJECT_SERVER_PORT)，默认 3000
+fn get_project_port() -> u16 {
+    std::env::var("PROJECT_SERVER_PORT")
+        .ok()
+        .and_then(|s| s.parse().ok())
+        .unwrap_or(DEFAULT_PORT)
+}
+
 // ===== 配置常量 =====

 /// Sidecar App 启动超时时间（秒）
 const STARTUP_TIMEOUT_SECS: u64 = 30;

-/// 默认起始端口
-const DEFAULT_PORT: u16 = 3000;
-
 /// 端口扫描范围（从起始端口开始扫描的端口数量）
 const PORT_SCAN_RANGE: u16 = 100;

@@ -23,7 +36,7 @@ const DEFAULT_WINDOW_WIDTH: f64 = 1200.0;
 const DEFAULT_WINDOW_HEIGHT: f64 = 800.0;

 /// 窗口标题
-const WINDOW_TITLE: &str = "Tauri App";
+const WINDOW_TITLE: &str = "OpenBridge Token Usage Viewer";

 // ===== 数据结构 =====

@@ -72,15 +85,19 @@ fn show_error_dialog(message: &str) {
 pub fn spawn_sidecar(app_handle: tauri::AppHandle) {
    // 检测是否为开发模式
    let is_dev = cfg!(debug_assertions);
+    // 获取项目专用端口
+    let project_port = get_project_port();

    if is_dev {
        // 开发模式：直接创建窗口连接到 Vite 开发服务器
        println!("🔧 开发模式");
+        println!("📌 端口: {}", project_port);

+        let dev_url = format!("http://localhost:{}", project_port);
        match tauri::WebviewWindowBuilder::new(
            &app_handle,
            "main",
-            tauri::WebviewUrl::External("http://localhost:3000".parse().unwrap()),
+            tauri::WebviewUrl::External(dev_url.parse().unwrap()),
        )
        .title(WINDOW_TITLE)
        .inner_size(DEFAULT_WINDOW_WIDTH, DEFAULT_WINDOW_HEIGHT)
@@ -100,12 +117,12 @@ pub fn spawn_sidecar(app_handle: tauri::AppHandle) {
    tauri::async_runtime::spawn(async move {
        println!("🚀 生产模式");

-        // 查找可用端口
-        let port = find_available_port(DEFAULT_PORT).await;
-        println!("使用端口: {}", port);
+        // 查找可用端口 (从项目端口开始扫描)
+        let port = find_available_port(project_port).await;
+        println!("📌 端口: {}", port);

        // 启动 sidecar
-        let sidecar = match app_handle.shell().sidecar("app") {
+        let sidecar = match app_handle.shell().sidecar(SIDECAR_NAME) {
            Ok(cmd) => cmd.env("PORT", port.to_string()),
            Err(e) => {
                eprintln!("✗ 无法找到 sidecar: {}", e);
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,8 +1,8 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
-  "productName": "app-desktop",
+  "productName": "openbridgeTokenUsageViewer",
  "version": "0.1.0",
-  "identifier": "com.imbytecat.app-desktop",
+  "identifier": "com.imbytecat.openbridgetokenusageviewer",
  "app": {
    "withGlobalTauri": true,
    "windows": [],
@@ -12,7 +12,7 @@
  },
  "bundle": {
    "active": true,
-    "targets": "all",
+    "targets": ["msi"],
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
@@ -20,6 +20,6 @@
      "icons/icon.icns",
      "icons/icon.ico"
    ],
-    "externalBin": ["binaries/app"]
+    "externalBin": ["binaries/openbridgeTokenUsageViewerServer"]
  }
 }
--- a/src/components/Error.tsx
+++ b/src/components/Error.tsx
@@ -1,3 +1,27 @@
-export function ErrorComponent() {
-  return <div>An unhandled error happened!</div>
+/**
+ * 错误边界回退组件
+ *
+ * 当应用发生未捕获的错误时显示此组件。
+ * 提供友好的错误提示和刷新按钮。
+ */
+
+/** 错误页面组件 */
+export const ErrorComponent = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-[var(--container-background-color)] text-[var(--on-container-color)]">
+      <div className="text-center p-8">
+        <h1 className="text-2xl font-bold mb-4">发生错误</h1>
+        <p className="text-[var(--on-container-color)] opacity-70 mb-6">
+          抱歉，应用遇到了未预期的问题。
+        </p>
+        <button
+          type="button"
+          onClick={() => window.location.reload()}
+          className="px-4 py-2 bg-[var(--primary-color)] text-white rounded hover:opacity-90 transition-opacity"
+        >
+          刷新页面
+        </button>
+      </div>
+    </div>
+  )
 }
--- a/src/components/HealthRing.tsx
+++ b/src/components/HealthRing.tsx
@@ -1,11 +1,13 @@
 /**
 * HealthRing 组件
 *
- * Apple 健康风格的圆环进度指示器
- * 中心显示倒计时
+ * Apple 健康风格的圆环进度指示器，用于可视化配额使用情况。
+ * 中心显示百分比和倒计时，颜色根据剩余配额自动变化。
 */
+import { useMemo } from 'react'
 import { useCountdown } from '@/hooks/useCountdown'

+/** 组件 Props 类型定义 */
 export interface HealthRingProps {
  /** 账户名称 */
  account: string
@@ -17,28 +19,36 @@ export interface HealthRingProps {
  remainingFraction: number
  /** 配额重置时间 (ISO 8601) */
  resetTime?: string
-  /** 圆环尺寸 */
+  /** 圆环尺寸 (像素)，默认 160 */
  size?: number
 }

 /**
- * 根据剩余配额获取颜色
+ * 颜色阈值配置
+ * 根据剩余配额百分比决定显示颜色
 */
-const getRingColor = (fraction: number): string => {
-  if (fraction < 0.05) return '#FF3B30' // 红色 - 紧急
-  if (fraction < 0.2) return '#FF9500' // 橙色 - 警告
-  if (fraction < 0.5) return '#FFCC00' // 黄色 - 注意
-  return '#34C759' // 绿色 - 正常
-}
+const COLOR_THRESHOLDS = [
+  { threshold: 0.05, color: '#FF3B30', bgColor: 'rgba(255, 59, 48, 0.2)' }, // 红色 - 紧急
+  { threshold: 0.2, color: '#FF9500', bgColor: 'rgba(255, 149, 0, 0.2)' }, // 橙色 - 警告
+  { threshold: 0.5, color: '#FFCC00', bgColor: 'rgba(255, 204, 0, 0.2)' }, // 黄色 - 注意
+] as const
+
+/** 默认颜色 (绿色 - 正常状态) */
+const DEFAULT_COLOR = { color: '#34C759', bgColor: 'rgba(52, 199, 89, 0.2)' }

 /**
- * 根据剩余配额获取背景色（较暗）
+ * 根据剩余配额获取对应的颜色配置
+ *
+ * @param fraction - 剩余配额百分比 (0-1)
+ * @returns 前景色和背景色配置
 */
-const getRingBgColor = (fraction: number): string => {
-  if (fraction < 0.05) return 'rgba(255, 59, 48, 0.2)'
-  if (fraction < 0.2) return 'rgba(255, 149, 0, 0.2)'
-  if (fraction < 0.5) return 'rgba(255, 204, 0, 0.2)'
-  return 'rgba(52, 199, 89, 0.2)'
+const getColorConfig = (
+  fraction: number,
+): { color: string; bgColor: string } => {
+  for (const { threshold, color, bgColor } of COLOR_THRESHOLDS) {
+    if (fraction < threshold) return { color, bgColor }
+  }
+  return DEFAULT_COLOR
 }

 export const HealthRing = ({
@@ -50,20 +60,25 @@ export const HealthRing = ({
  size = 160,
 }: HealthRingProps) => {
  const countdown = useCountdown(resetTime)
+
+  // 使用 useMemo 缓存 SVG 计算值，避免不必要的重新计算
+  const svgParams = useMemo(() => {
+    const strokeWidth = size * 0.1
+    const radius = (size - strokeWidth) / 2
+    const circumference = 2 * Math.PI * radius
+    const strokeDashoffset = circumference * (1 - remainingFraction)
+
+    return { strokeWidth, radius, circumference, strokeDashoffset }
+  }, [size, remainingFraction])
+
  const percentage = Math.round(remainingFraction * 100)
-
-  // SVG 参数
-  const strokeWidth = size * 0.1
-  const radius = (size - strokeWidth) / 2
-  const circumference = 2 * Math.PI * radius
-  const strokeDashoffset = circumference * (1 - remainingFraction)
-
-  const ringColor = getRingColor(remainingFraction)
-  const ringBgColor = getRingBgColor(remainingFraction)
+  const { color: ringColor, bgColor: ringBgColor } =
+    getColorConfig(remainingFraction)
+  const { strokeWidth, radius, circumference, strokeDashoffset } = svgParams

  return (
    <div className="flex flex-col items-center gap-3">
-      {/* 圆环 */}
+      {/* 圆环容器 */}
      <div className="relative" style={{ width: size, height: size }}>
        <svg
          width={size}
@@ -97,27 +112,27 @@ export const HealthRing = ({
          />
        </svg>

-        {/* 中心内容 - 倒计时 */}
+        {/* 中心内容 - 百分比和倒计时 */}
        <div className="absolute inset-0 flex flex-col items-center justify-center">
          <span className="text-2xl font-bold" style={{ color: ringColor }}>
            {percentage}%
          </span>
-          <span className="text-sm text-[var(--on-container-color)] opacity-70">
+          <span className="text-sm text-[var(--element-inactive-color,#707070)]">
            {countdown.formatted}
          </span>
        </div>
      </div>

-      {/* 标签 */}
+      {/* 底部标签 */}
      <div className="text-center">
        <div
-          className="text-sm font-medium truncate max-w-[140px] text-[var(--on-container-color)]"
+          className="text-sm font-medium truncate max-w-[140px] text-[var(--element-active-color,#3d3d3d)]"
          title={displayName || model}
        >
          {displayName || 'Claude Opus 4.5'}
        </div>
        <div
-          className="text-xs truncate max-w-[140px] text-[var(--on-container-color)] opacity-50"
+          className="text-xs truncate max-w-[140px] text-[var(--element-inactive-color,#707070)]"
          title={account}
        >
          {account}
--- a/src/components/NotFount.tsx
+++ b/src/components/NotFount.tsx
@@ -1,3 +1,29 @@
-export function NotFoundComponent() {
-  return <div>404 - Not Found</div>
+/**
+ * 404 页面未找到组件
+ *
+ * 当用户访问不存在的路由时显示此组件。
+ * 提供友好的提示和返回首页按钮。
+ */
+
+/** 404 页面组件 */
+export const NotFoundComponent = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-[var(--container-background-color)] text-[var(--on-container-color)]">
+      <div className="text-center p-8">
+        <h1 className="text-6xl font-bold mb-4 text-[var(--on-container-color)] opacity-30">
+          404
+        </h1>
+        <h2 className="text-xl font-medium mb-4">页面未找到</h2>
+        <p className="text-[var(--on-container-color)] opacity-70 mb-6">
+          抱歉，您访问的页面不存在。
+        </p>
+        <a
+          href="/"
+          className="inline-block px-4 py-2 bg-[var(--primary-color)] text-white rounded hover:opacity-90 transition-opacity"
+        >
+          返回首页
+        </a>
+      </div>
+    </div>
+  )
 }
--- a/src/components/TokenUsageDashboard.tsx
+++ b/src/components/TokenUsageDashboard.tsx
@@ -1,65 +1,39 @@
 /**
 * TokenUsageDashboard 组件
 *
- * 主仪表盘，展示 4 个账户的 claude-opus-4-5-thinking 配额使用情况
- * 使用 OpenBridge TopBar + AlertTopbarElement
+ * 主仪表盘，展示多个账户的 claude-opus-4-5-thinking 配额使用情况。
+ * 使用自定义组件替代 OpenBridge 组件，基于 shadcn/ui 实现。
+ *
+ * 特性:
+ * - 多账户配额可视化 (根据 API 返回的账户数量动态显示)
+ * - 实时告警通知 (低于 20% 警告，低于 5% 紧急)
+ * - 支持四种主题切换 (day/bright/dusk/night)
 */
-import '@oicl/openbridge-webcomponents/dist/icons/icon-palette-day.js'
-import '@oicl/openbridge-webcomponents/dist/icons/icon-palette-night.js'
-import { AlertType } from '@oicl/openbridge-webcomponents/dist/types'
-import { lazy, Suspense, useCallback, useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { HealthRing } from '@/components/HealthRing'
+import {
+  AlertBadge,
+  AlertNotification,
+  AlertType,
+} from '@/components/ui/AlertBadge'
+import { ThemeSidebar } from '@/components/ui/ThemeSidebar'
+import { TopBar } from '@/components/ui/TopBar'
 import { useTheme } from '@/hooks/useTheme'
 import type { ModelUsage } from '@/orpc/contracts/usage'

-// 懒加载 OpenBridge 组件以避免 SSR 问题
-const ObcTopBar = lazy(() =>
-  import(
-    '@oicl/openbridge-webcomponents-react/components/top-bar/top-bar'
-  ).then((mod) => ({ default: mod.ObcTopBar })),
-)
-
-const ObcAlertTopbarElement = lazy(() =>
-  import(
-    '@oicl/openbridge-webcomponents-react/components/alert-topbar-element/alert-topbar-element'
-  ).then((mod) => ({ default: mod.ObcAlertTopbarElement })),
-)
-
-const ObcNotificationMessageItem = lazy(() =>
-  import(
-    '@oicl/openbridge-webcomponents-react/components/notification-message-item/notification-message-item'
-  ).then((mod) => ({ default: mod.ObcNotificationMessageItem })),
-)
-
-const ObcAlertIcon = lazy(() =>
-  import(
-    '@oicl/openbridge-webcomponents-react/components/alert-icon/alert-icon'
-  ).then((mod) => ({ default: mod.ObcAlertIcon })),
-)
-
-const ObcNavigationMenu = lazy(() =>
-  import(
-    '@oicl/openbridge-webcomponents-react/components/navigation-menu/navigation-menu'
-  ).then((mod) => ({ default: mod.ObcNavigationMenu })),
-)
-
-const ObcNavigationItem = lazy(() =>
-  import(
-    '@oicl/openbridge-webcomponents-react/components/navigation-item/navigation-item'
-  ).then((mod) => ({ default: mod.ObcNavigationItem })),
-)
+// ============================================================================
+// 类型定义
+// ============================================================================

 export interface TokenUsageDashboardProps {
+  /** 从 API 获取的使用量数据 */
  data: {
    opusModels: ModelUsage[]
    fetchedAt: string
  }
 }

-/** 告警阈值 */
-const ALERT_THRESHOLD = 0.2 // 20% 警戒线
-const CRITICAL_THRESHOLD = 0.05 // 5% 紧急阈值
-
+/** 告警信息类型 */
 interface AlertInfo {
  account: string
  model: string
@@ -68,18 +42,34 @@ interface AlertInfo {
  type: AlertType
 }

+// ============================================================================
+// 常量配置
+// ============================================================================
+
+/** 告警阈值配置 */
+const ALERT_THRESHOLD = 0.2 // 20% - 警告阈值
+const CRITICAL_THRESHOLD = 0.05 // 5% - 紧急阈值
+
+/** 已知的账户前缀列表 */
+const KNOWN_PREFIXES = [
+  'antigravity-',
+  'anthropic-',
+  'claude-',
+  'openai-',
+] as const
+
+// ============================================================================
+// 工具函数
+// ============================================================================
+
 /**
 * 从账户名中提取用户名部分
- * 例如: "antigravity-2220328339_qq" -> "2220328339_qq"
+ *
+ * @param account - 完整账户名 (如 "antigravity-2220328339_qq")
+ * @returns 提取后的用户名 (如 "2220328339_qq")
 */
 const extractUsername = (account: string): string => {
-  // 移除 "antigravity-" 前缀
-  if (account.startsWith('antigravity-')) {
-    return account.slice('antigravity-'.length)
-  }
-  // 移除其他常见前缀
-  const prefixes = ['anthropic-', 'claude-', 'openai-']
-  for (const prefix of prefixes) {
+  for (const prefix of KNOWN_PREFIXES) {
    if (account.startsWith(prefix)) {
      return account.slice(prefix.length)
    }
@@ -89,11 +79,17 @@ const extractUsername = (account: string): string => {

 /**
 * 计算告警列表
+ *
+ * 根据配额剩余比例生成告警列表，并按严重程度排序。
+ *
+ * @param models - 模型使用量列表
+ * @returns 排序后的告警列表 (Alarm 优先)
 */
-const getAlerts = (models: ModelUsage[]): AlertInfo[] => {
+const computeAlerts = (models: ModelUsage[]): AlertInfo[] => {
  const alerts: AlertInfo[] = []

  for (const model of models) {
+    // 低于 5% 为紧急告警
    if (model.remainingFraction < CRITICAL_THRESHOLD) {
      alerts.push({
        account: model.account,
@@ -102,7 +98,9 @@ const getAlerts = (models: ModelUsage[]): AlertInfo[] => {
        remainingFraction: model.remainingFraction,
        type: AlertType.Alarm,
      })
-    } else if (model.remainingFraction < ALERT_THRESHOLD) {
+    }
+    // 低于 20% 为警告
+    else if (model.remainingFraction < ALERT_THRESHOLD) {
      alerts.push({
        account: model.account,
        model: model.model,
@@ -113,16 +111,20 @@ const getAlerts = (models: ModelUsage[]): AlertInfo[] => {
    }
  }

-  // 按严重程度排序（Alarm 优先）
+  // 按严重程度排序: Alarm > Warning，相同级别按剩余配额升序
  return alerts.sort((a, b) => {
-    if (a.type === AlertType.Alarm && b.type !== AlertType.Alarm) return -1
-    if (a.type !== AlertType.Alarm && b.type === AlertType.Alarm) return 1
+    if (a.type !== b.type) {
+      return a.type === AlertType.Alarm ? -1 : 1
+    }
    return a.remainingFraction - b.remainingFraction
  })
 }

 /**
- * 获取最高告警类型
+ * 获取最高级别的告警类型
+ *
+ * @param alerts - 告警列表
+ * @returns 最高级别的告警类型
 */
 const getHighestAlertType = (alerts: AlertInfo[]): AlertType => {
  if (alerts.some((a) => a.type === AlertType.Alarm)) return AlertType.Alarm
@@ -130,151 +132,77 @@ const getHighestAlertType = (alerts: AlertInfo[]): AlertType => {
  return AlertType.Caution
 }

-/**
- * TopBar 占位符（SSR 时显示）
- */
-const TopBarFallback = () => (
-  <div className="h-14 bg-[var(--container-background-color)] border-b border-[var(--divider-color)]" />
-)
+// ============================================================================
+// 主组件
+// ============================================================================

 export const TokenUsageDashboard = ({ data }: TokenUsageDashboardProps) => {
  const { opusModels } = data
  const { theme, setTheme } = useTheme()
+
+  // UI 状态
  const [alertMuted, setAlertMuted] = useState(false)
  const [menuOpen, setMenuOpen] = useState(false)

-  // 计算告警
-  const alerts = useMemo(() => getAlerts(opusModels), [opusModels])
-  const alertType = getHighestAlertType(alerts)
+  // 计算告警信息 (使用 useMemo 缓存)
+  const alerts = useMemo(() => computeAlerts(opusModels), [opusModels])
+  const alertType = useMemo(() => getHighestAlertType(alerts), [alerts])

-  // 处理静音点击
+  // 获取最重要的告警 (用于顶栏显示)
+  const topAlert = alerts[0]
+
+  // ========== 事件处理器 ==========
+
+  /** 切换告警静音状态 */
  const handleMuteClick = useCallback(() => {
    setAlertMuted((prev) => !prev)
  }, [])

-  // 处理菜单按钮点击
+  /** 切换菜单开关状态 */
  const handleMenuButtonClick = useCallback(() => {
    setMenuOpen((prev) => !prev)
  }, [])

-  // 处理主题切换
-  const handleThemeChange = useCallback(
-    (newTheme: 'day' | 'night') => {
-      setTheme(newTheme)
-      setMenuOpen(false)
-    },
-    [setTheme],
-  )
+  // ========== 渲染 ==========

  return (
-    <div className="min-h-screen flex flex-col bg-[var(--container-background-color)] text-[var(--on-container-color)]">
+    <div className="min-h-screen flex flex-col bg-[var(--container-background-color,#f7f7f7)] text-[var(--element-active-color,#3d3d3d)]">
      {/* 顶部导航栏 */}
-      <header className="sticky top-0 z-50">
-        <Suspense fallback={<TopBarFallback />}>
-          <ObcTopBar
-            appTitle="Token Usage Viewer"
-            pageName=""
-            onMenuButtonClicked={
-              handleMenuButtonClick as unknown as EventListener
-            }
-            menuButtonActivated={menuOpen}
-          >
-            {/* 右侧: 告警面板 */}
-            <div slot="alerts">
-              <Suspense fallback={null}>
-                <ObcAlertTopbarElement
-                  nAlerts={alerts.length}
-                  alertType={alertType}
-                  alertMuted={alertMuted}
-                  showAck={false}
-                  onMuteclick={handleMuteClick as unknown as EventListener}
-                >
-                  {alerts.length > 0 && alerts[0] && (
-                    <Suspense fallback={null}>
-                      <ObcNotificationMessageItem time="">
-                        <span slot="icon">
-                          <Suspense fallback={null}>
-                            <ObcAlertIcon
-                              name={
-                                alerts[0].type === AlertType.Alarm
-                                  ? 'alarm-unack'
-                                  : 'warning-unack'
-                              }
-                            />
-                          </Suspense>
-                        </span>
-                        <span slot="message">
-                          {extractUsername(alerts[0].account)}: 剩余{' '}
-                          {Math.round(alerts[0].remainingFraction * 100)}%
-                        </span>
-                      </ObcNotificationMessageItem>
-                    </Suspense>
-                  )}
-                </ObcAlertTopbarElement>
-              </Suspense>
-            </div>
-          </ObcTopBar>
-        </Suspense>
-      </header>
+      <TopBar
+        appTitle="Token Usage Viewer"
+        menuButtonActivated={menuOpen}
+        onMenuButtonClick={handleMenuButtonClick}
+        rightSlot={
+          <>
+            <AlertBadge
+              count={alerts.length}
+              alertType={alertType}
+              muted={alertMuted}
+              onMuteClick={handleMuteClick}
+            />
+            {topAlert && (
+              <AlertNotification
+                account={extractUsername(topAlert.account)}
+                remainingPercent={Math.round(topAlert.remainingFraction * 100)}
+                alertType={topAlert.type}
+              />
+            )}
+          </>
+        }
+      />

-      {/* 侧边导航菜单 */}
-      {menuOpen && (
-        <aside className="fixed top-14 left-0 z-40 h-[calc(100vh-3.5rem)] w-64 bg-[var(--container-background-color)] border-r border-[var(--divider-color)] shadow-lg">
-          <Suspense fallback={null}>
-            <ObcNavigationMenu>
-              <div slot="main">
-                <Suspense fallback={null}>
-                  <ObcNavigationItem
-                    label="白天模式"
-                    checked={theme === 'day'}
-                    onClick={() => handleThemeChange('day')}
-                  >
-                    <span
-                      slot="icon"
-                      // biome-ignore lint: custom element
-                      dangerouslySetInnerHTML={{
-                        __html: '<obi-palette-day></obi-palette-day>',
-                      }}
-                    />
-                  </ObcNavigationItem>
-                </Suspense>
-                <Suspense fallback={null}>
-                  <ObcNavigationItem
-                    label="夜间模式"
-                    checked={theme === 'night'}
-                    onClick={() => handleThemeChange('night')}
-                  >
-                    <span
-                      slot="icon"
-                      // biome-ignore lint: custom element
-                      dangerouslySetInnerHTML={{
-                        __html: '<obi-palette-night></obi-palette-night>',
-                      }}
-                    />
-                  </ObcNavigationItem>
-                </Suspense>
-              </div>
-            </ObcNavigationMenu>
-          </Suspense>
-        </aside>
-      )}
+      {/* 主题切换侧边栏 */}
+      <ThemeSidebar
+        open={menuOpen}
+        onOpenChange={setMenuOpen}
+        currentTheme={theme}
+        onThemeChange={setTheme}
+      />

-      {/* 点击遮罩关闭菜单 */}
-      {menuOpen && (
-        <button
-          type="button"
-          aria-label="关闭菜单"
-          className="fixed inset-0 z-30 bg-black/20 cursor-default"
-          onClick={() => setMenuOpen(false)}
-          onKeyDown={(e) => e.key === 'Escape' && setMenuOpen(false)}
-        />
-      )}
-
-      {/* 主内容区 */}
+      {/* 主内容区 - 配额圆环展示 */}
      <main className="flex-1 flex flex-col items-center justify-center p-8">
-        {/* 4 个圆环横向排列 */}
        <div className="flex flex-wrap justify-center gap-10 lg:gap-16">
-          {opusModels.slice(0, 4).map((model) => (
+          {opusModels.map((model) => (
            <HealthRing
              key={`${model.account}-${model.model}`}
              account={extractUsername(model.account)}
--- a/src/components/ui/AlertBadge.tsx
+++ b/src/components/ui/AlertBadge.tsx
@@ -0,0 +1,140 @@
+/**
+ * AlertBadge 组件
+ *
+ * 告警徽章组件，显示告警数量和状态。
+ * 支持三种告警类型：Alarm（紧急）、Warning（警告）、Caution（注意）
+ */
+import { AlertTriangle, Bell, BellOff, XCircle } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+/** 告警类型枚举 */
+export enum AlertType {
+  Caution = 'caution',
+  Warning = 'warning',
+  Alarm = 'alarm',
+}
+
+export interface AlertBadgeProps {
+  /** 告警数量 */
+  count: number
+  /** 告警类型 */
+  alertType: AlertType
+  /** 是否静音 */
+  muted?: boolean
+  /** 静音按钮点击事件 */
+  onMuteClick?: () => void
+  /** 额外的 className */
+  className?: string
+}
+
+/** 告警类型对应的颜色配置 - 使用 OpenBridge CSS 变量 */
+const ALERT_COLORS: Record<
+  AlertType,
+  { bgVar: string; textClass: string; icon: typeof AlertTriangle }
+> = {
+  [AlertType.Alarm]: {
+    bgVar: 'var(--alert-alarm-color, rgb(227, 0, 25))',
+    textClass: 'text-white',
+    icon: XCircle,
+  },
+  [AlertType.Warning]: {
+    bgVar: 'var(--alert-warning-color, rgb(254, 148, 19))',
+    textClass: 'text-white',
+    icon: AlertTriangle,
+  },
+  [AlertType.Caution]: {
+    bgVar: 'var(--alert-caution-color, rgb(255, 219, 55))',
+    textClass: 'text-gray-900',
+    icon: AlertTriangle,
+  },
+}
+
+export const AlertBadge = ({
+  count,
+  alertType,
+  muted = false,
+  onMuteClick,
+  className,
+}: AlertBadgeProps) => {
+  const { bgVar, textClass, icon: Icon } = ALERT_COLORS[alertType]
+
+  if (count === 0) {
+    return null
+  }
+
+  return (
+    <div className={cn('flex items-center gap-1', className)}>
+      {/* 告警徽章 */}
+      <div
+        className={cn(
+          'flex items-center gap-1.5 px-2.5 py-1 rounded-full',
+          textClass,
+        )}
+        style={{ backgroundColor: bgVar }}
+      >
+        <Icon className="size-4" />
+        <span className="text-sm font-medium">{count}</span>
+      </div>
+
+      {/* 静音按钮 */}
+      {onMuteClick && (
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          onClick={onMuteClick}
+          className={cn(
+            'hover:bg-[var(--element-hover-color,rgba(0,0,0,0.12))]',
+            muted && 'opacity-50',
+          )}
+          aria-label={muted ? '取消静音' : '静音告警'}
+        >
+          {muted ? (
+            <BellOff className="size-4 text-[var(--element-inactive-color,#707070)]" />
+          ) : (
+            <Bell className="size-4 text-[var(--element-active-color,#3d3d3d)]" />
+          )}
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export interface AlertNotificationProps {
+  /** 账户名 */
+  account: string
+  /** 剩余百分比 */
+  remainingPercent: number
+  /** 告警类型 */
+  alertType: AlertType
+}
+
+/** 获取告警类型对应的 CSS 变量颜色 */
+const getAlertColor = (alertType: AlertType): string => {
+  switch (alertType) {
+    case AlertType.Alarm:
+      return 'var(--alert-alarm-color, rgb(227, 0, 25))'
+    case AlertType.Warning:
+      return 'var(--alert-warning-color, rgb(254, 148, 19))'
+    case AlertType.Caution:
+      return 'var(--alert-caution-color, rgb(255, 219, 55))'
+  }
+}
+
+export const AlertNotification = ({
+  account,
+  remainingPercent,
+  alertType,
+}: AlertNotificationProps) => {
+  const { icon: Icon } = ALERT_COLORS[alertType]
+  const alertColor = getAlertColor(alertType)
+
+  return (
+    <div className="flex items-center gap-2 px-3 py-2 text-sm">
+      <Icon className="size-4 shrink-0" style={{ color: alertColor }} />
+      <span className="text-[var(--element-active-color,#3d3d3d)]">
+        {account}: 剩余 {remainingPercent}%
+      </span>
+    </div>
+  )
+}
--- a/src/components/ui/ThemeSidebar.tsx
+++ b/src/components/ui/ThemeSidebar.tsx
@@ -0,0 +1,130 @@
+/**
+ * ThemeSidebar 组件
+ *
+ * 主题切换侧边栏，使用 shadcn Sheet 组件实现。
+ * 支持 OpenBridge 四种主题：day/bright/dusk/night
+ */
+import { Check, Moon, Sun, SunDim, Sunrise } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet'
+import type { ObcTheme } from '@/hooks/useTheme'
+import { cn } from '@/lib/utils'
+
+export interface ThemeSidebarProps {
+  /** 是否打开 */
+  open: boolean
+  /** 关闭事件 */
+  onOpenChange: (open: boolean) => void
+  /** 当前主题 */
+  currentTheme: ObcTheme
+  /** 主题切换事件 */
+  onThemeChange: (theme: ObcTheme) => void
+}
+
+/** 主题配置 */
+const THEME_OPTIONS: Array<{
+  value: ObcTheme
+  label: string
+  icon: typeof Sun
+  description: string
+}> = [
+  {
+    value: 'day',
+    label: '白天模式',
+    icon: Sun,
+    description: '明亮的白色背景',
+  },
+  {
+    value: 'bright',
+    label: '明亮模式',
+    icon: SunDim,
+    description: '高对比度明亮主题',
+  },
+  {
+    value: 'dusk',
+    label: '黄昏模式',
+    icon: Sunrise,
+    description: '柔和的暖色调',
+  },
+  {
+    value: 'night',
+    label: '夜间模式',
+    icon: Moon,
+    description: '深色背景护眼',
+  },
+]
+
+export const ThemeSidebar = ({
+  open,
+  onOpenChange,
+  currentTheme,
+  onThemeChange,
+}: ThemeSidebarProps) => {
+  const handleThemeSelect = (theme: ObcTheme) => {
+    onThemeChange(theme)
+    onOpenChange(false)
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="left"
+        className="w-72 bg-[var(--container-background-color,#fcfcfc)] border-[var(--divider-color,#e0e0e0)]"
+        showCloseButton={false}
+      >
+        <SheetHeader className="border-b border-[var(--divider-color,#e0e0e0)] pb-4">
+          <SheetTitle className="text-[var(--on-container-color,#1a1a1a)]">
+            外观设置
+          </SheetTitle>
+        </SheetHeader>
+
+        <nav className="flex flex-col gap-1 py-4">
+          {THEME_OPTIONS.map(({ value, label, icon: Icon, description }) => {
+            const isActive = currentTheme === value
+
+            return (
+              <Button
+                key={value}
+                variant="ghost"
+                onClick={() => handleThemeSelect(value)}
+                className={cn(
+                  'w-full justify-start gap-3 h-14 px-3',
+                  'hover:bg-[var(--element-hover-color,rgba(0,0,0,0.12))]',
+                  isActive &&
+                    'bg-[var(--element-focused-color,rgba(0,0,0,0.08))]',
+                )}
+              >
+                <div
+                  className={cn(
+                    'size-10 rounded-lg flex items-center justify-center',
+                    'bg-[var(--container-section-color,#f0f0f0)]',
+                  )}
+                >
+                  <Icon className="size-5 text-[var(--element-active-color,#1a1a1a)]" />
+                </div>
+
+                <div className="flex-1 text-left">
+                  <div className="text-sm font-medium text-[var(--element-active-color,#1a1a1a)]">
+                    {label}
+                  </div>
+                  <div className="text-xs text-[var(--element-inactive-color,#666)]">
+                    {description}
+                  </div>
+                </div>
+
+                {isActive && (
+                  <Check className="size-5 text-[var(--alert-running-color,#34C759)]" />
+                )}
+              </Button>
+            )
+          })}
+        </nav>
+      </SheetContent>
+    </Sheet>
+  )
+}
--- a/src/components/ui/TopBar.tsx
+++ b/src/components/ui/TopBar.tsx
@@ -0,0 +1,84 @@
+/**
+ * TopBar 组件
+ *
+ * 基于 OpenBridge 设计系统的顶部导航栏，使用 shadcn/ui 重新实现。
+ * 特性：汉堡菜单按钮、应用标题、右侧告警/操作区域
+ */
+import { Menu } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+export interface TopBarProps {
+  /** 应用标题 */
+  appTitle: string
+  /** 页面名称（可选，显示在标题右侧） */
+  pageName?: string
+  /** 菜单按钮是否激活 */
+  menuButtonActivated?: boolean
+  /** 菜单按钮点击事件 */
+  onMenuButtonClick?: () => void
+  /** 右侧插槽内容（告警、操作按钮等） */
+  rightSlot?: ReactNode
+  /** 额外的 className */
+  className?: string
+}
+
+export const TopBar = ({
+  appTitle,
+  pageName,
+  menuButtonActivated = false,
+  onMenuButtonClick,
+  rightSlot,
+  className,
+}: TopBarProps) => {
+  return (
+    <header
+      className={cn(
+        'h-12 flex items-center justify-between px-2',
+        'bg-[var(--container-background-color,#fcfcfc)]',
+        'border-b border-[var(--divider-color,#e0e0e0)]',
+        'shadow-[0px_2px_4px_0px_rgba(0,0,0,0.1)]',
+        className,
+      )}
+    >
+      {/* 左侧：汉堡菜单按钮 + 标题 */}
+      <div className="flex items-center gap-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onMenuButtonClick}
+          className={cn(
+            'size-8 rounded-md',
+            'hover:bg-[var(--element-focused-color,rgba(0,0,0,0.08))]',
+            menuButtonActivated &&
+              'bg-[var(--element-active-color,rgba(0,0,0,0.12))]',
+          )}
+          aria-label="打开菜单"
+          aria-expanded={menuButtonActivated}
+        >
+          <Menu className="size-5 text-[var(--on-container-color,#1a1a1a)]" />
+        </Button>
+
+        <div className="flex items-center gap-1.5">
+          <span className="text-base font-medium text-[var(--on-container-color,#1a1a1a)]">
+            {appTitle}
+          </span>
+          {pageName && (
+            <>
+              <span className="text-[var(--on-container-low-color,#666)]">
+                /
+              </span>
+              <span className="text-sm text-[var(--on-container-low-color,#666)]">
+                {pageName}
+              </span>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* 右侧：告警/操作区域 */}
+      {rightSlot && <div className="flex items-center gap-1">{rightSlot}</div>}
+    </header>
+  )
+}
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,64 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import type * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Button({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -0,0 +1,141 @@
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+import type * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-1.5 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
--- a/src/db/index.ts
+++ b/src/db/index.ts
@@ -1,8 +1,13 @@
 /**
 * 数据库连接模块
 *
- * 使用 Bun 内置的 SQLite 驱动，无需额外安装原生模块。
- * 数据库文件存储在可执行文件同级的 data/app.db
+ * 使用 Bun 内置的 SQLite 驱动 (bun:sqlite)，无需安装额外的原生模块。
+ * 数据库文件存储在可执行文件同目录的 data/app.db。
+ *
+ * 特性:
+ * - WAL 模式提升并发性能
+ * - 自动创建表结构
+ * - 智能路径检测 (开发/生产)
 */

 import { Database } from 'bun:sqlite'
@@ -11,16 +16,31 @@ import { dirname, join } from 'node:path'
 import { drizzle } from 'drizzle-orm/bun-sqlite'
 import * as schema from '@/db/schema'

-/**
- * 获取数据库路径
- * - 在打包后的 sidecar 中，使用可执行文件所在目录
- * - 在开发模式下，使用项目根目录
- */
-function getDbPath(): string {
-  const execPath = process.execPath
-  const isBundled = !execPath.includes('node') && !execPath.includes('bun')
+// ============================================================================
+// 路径工具函数
+// ============================================================================

-  const baseDir = isBundled ? dirname(execPath) : process.cwd()
+/**
+ * 判断是否为打包后的可执行文件运行环境
+ *
+ * @returns 是否为打包后的二进制文件
+ */
+const isBundledExec = (): boolean => {
+  const execPath = process.execPath
+  return !execPath.includes('node') && !execPath.includes('bun')
+}
+
+/**
+ * 获取数据库文件存储路径
+ *
+ * 路径策略:
+ * - 打包后的 sidecar: 使用可执行文件所在目录
+ * - 开发模式: 使用项目根目录 (process.cwd())
+ *
+ * @returns 数据库文件完整路径
+ */
+const getDbPath = (): string => {
+  const baseDir = isBundledExec() ? dirname(process.execPath) : process.cwd()
  const dataDir = join(baseDir, 'data')

  // 确保 data 目录存在
@@ -31,14 +51,24 @@ function getDbPath(): string {
  return join(dataDir, 'app.db')
 }

-/** 数据库文件路径 */
+// ============================================================================
+// 表初始化
+// ============================================================================
+
+/** 数据库文件路径 (在模块加载时计算一次) */
 const DB_PATH = getDbPath()

 /**
 * 初始化数据库表结构
+ *
+ * 使用 IF NOT EXISTS 确保幂等性，可安全多次执行。
+ * 创建 usage_history 表和相应的索引。
+ *
+ * @param sqlite - SQLite 数据库实例
 */
-function initTables(sqlite: Database) {
+const initTables = (sqlite: Database): void => {
  sqlite.exec(`
+    -- 使用量历史记录表
    CREATE TABLE IF NOT EXISTS usage_history (
      id TEXT PRIMARY KEY,
      account TEXT NOT NULL,
@@ -48,26 +78,38 @@ function initTables(sqlite: Database) {
      reset_time TEXT,
      recorded_at INTEGER NOT NULL DEFAULT (unixepoch())
    );
+
+    -- 按记录时间查询的索引
    CREATE INDEX IF NOT EXISTS idx_usage_history_recorded_at 
      ON usage_history(recorded_at);
  `)
 }

+// ============================================================================
+// 数据库连接
+// ============================================================================
+
 /**
 * 创建数据库连接
 *
- * 启用 WAL (Write-Ahead Logging) 模式以提高并发读写性能。
- * 如果数据库文件不存在，会自动创建并初始化表结构。
+ * 特性:
+ * - 启用 WAL (Write-Ahead Logging) 模式提高并发读写性能
+ * - 自动创建数据库文件 (如不存在)
+ * - 自动初始化表结构
+ *
+ * @returns Drizzle ORM 数据库实例
 */
-export function createDb() {
+export const createDb = () => {
  const sqlite = new Database(DB_PATH, { create: true })
+
+  // 启用 WAL 模式，提升并发性能
  sqlite.exec('PRAGMA journal_mode = WAL;')

-  // 自动初始化表结构
+  // 初始化表结构
  initTables(sqlite)

  return drizzle(sqlite, { schema })
 }

-/** 数据库实例类型 */
+/** 数据库实例类型 (用于 TypeScript 类型推导) */
 export type Db = ReturnType<typeof createDb>
--- a/src/env.ts
+++ b/src/env.ts
@@ -1,10 +1,74 @@
+/**
+ * 环境变量配置模块
+ *
+ * 使用 @t3-oss/env-core 进行类型安全的环境变量验证。
+ * 支持从同目录的 .env 文件加载配置（优先级低于系统环境变量）。
+ */
 import { existsSync, readFileSync } from 'node:fs'
 import { dirname, join } from 'node:path'
 import { createEnv } from '@t3-oss/env-core'
 import { z } from 'zod'

-/** 默认的 TOKEN_USAGE_URL */
-const DEFAULT_TOKEN_USAGE_URL = 'http://10.0.1.1:8318/usage'
+/** Token 使用量 API 的默认地址 (按模型分组) */
+const DEFAULT_TOKEN_USAGE_URL = 'http://10.0.1.1:8318/api/usage/model'
+
+/** 服务器端口默认值 */
+const DEFAULT_SERVER_PORT = '3000'
+
+/**
+ * 判断当前是否为打包后的可执行文件运行环境
+ *
+ * @returns 是否为打包后的二进制文件
+ */
+const isBundledExec = (): boolean => {
+  const execPath = process.execPath
+  return !execPath.includes('node') && !execPath.includes('bun')
+}
+
+/**
+ * 获取配置文件的基础目录
+ *
+ * - 打包后的 sidecar: 使用可执行文件所在目录
+ * - 开发模式: 使用项目根目录
+ *
+ * @returns 基础目录路径
+ */
+const getBaseDir = (): string =>
+  isBundledExec() ? dirname(process.execPath) : process.cwd()
+
+/**
+ * 解析 .env 文件内容
+ *
+ * 支持:
+ * - 空行和 # 开头的注释
+ * - KEY=value 格式
+ * - 只设置系统环境变量中不存在的变量
+ *
+ * @param content - .env 文件内容
+ * @returns 解析后的环境变量对象
+ */
+const parseEnvContent = (content: string): Record<string, string> => {
+  const result: Record<string, string> = {}
+
+  for (const line of content.split('\n')) {
+    const trimmed = line.trim()
+    // 跳过空行和注释
+    if (!trimmed || trimmed.startsWith('#')) continue
+
+    const eqIndex = trimmed.indexOf('=')
+    if (eqIndex <= 0) continue
+
+    const key = trimmed.slice(0, eqIndex).trim()
+    const value = trimmed.slice(eqIndex + 1).trim()
+
+    // 只设置系统环境变量中不存在的变量
+    if (!process.env[key]) {
+      result[key] = value
+    }
+  }
+
+  return result
+}

 /**
 * 从同目录的 .env 配置文件读取环境变量
@@ -13,71 +77,69 @@ const DEFAULT_TOKEN_USAGE_URL = 'http://10.0.1.1:8318/usage'
 * 1. 系统环境变量 (process.env)
 * 2. 可执行文件同目录的 .env 文件
 * 3. 默认值
+ *
+ * @returns 从文件解析的环境变量
 */
-function loadEnvFromFile(): Record<string, string> {
-  const result: Record<string, string> = {}
+const loadEnvFromFile = (): Record<string, string> => {
+  const envPath = join(getBaseDir(), '.env')

-  // 确定可执行文件所在目录
-  const execPath = process.execPath
-  const isBundled = !execPath.includes('node') && !execPath.includes('bun')
-  const baseDir = isBundled ? dirname(execPath) : process.cwd()
-  const envPath = join(baseDir, '.env')
+  if (!existsSync(envPath)) return {}

-  // 如果 .env 文件存在，解析它
-  if (existsSync(envPath)) {
-    try {
-      const content = readFileSync(envPath, 'utf-8')
-      for (const line of content.split('\n')) {
-        const trimmed = line.trim()
-        // 跳过空行和注释
-        if (!trimmed || trimmed.startsWith('#')) continue
+  try {
+    const content = readFileSync(envPath, 'utf-8')
+    return parseEnvContent(content)
+  } catch {
+    // 忽略读取错误（权限问题等）
+    return {}
+  }
+}

-        const eqIndex = trimmed.indexOf('=')
-        if (eqIndex > 0) {
-          const key = trimmed.slice(0, eqIndex).trim()
-          const value = trimmed.slice(eqIndex + 1).trim()
-          // 只设置不存在的环境变量
-          if (!process.env[key]) {
-            result[key] = value
-          }
-        }
-      }
-    } catch {
-      // 忽略读取错误
+/**
+ * 构建合并后的环境变量对象
+ *
+ * 合并顺序: process.env > fileEnv > 默认值
+ */
+const buildMergedEnv = (): Record<string, string | undefined> => {
+  const fileEnv = loadEnvFromFile()
+  const merged: Record<string, string | undefined> = { ...process.env }
+
+  // 从文件填充缺失的变量
+  for (const [key, value] of Object.entries(fileEnv)) {
+    if (!merged[key]) {
+      merged[key] = value
    }
  }

-  return result
-}
-
-// 加载配置文件中的环境变量
-const fileEnv = loadEnvFromFile()
-
-// 合并环境变量: process.env > fileEnv > 默认值
-const mergedEnv: Record<string, string | undefined> = {
-  ...process.env,
-}
-
-// 从文件填充缺失的变量
-for (const [key, value] of Object.entries(fileEnv)) {
-  if (!mergedEnv[key]) {
-    mergedEnv[key] = value
-  }
-}
-
-// 如果仍然没有 TOKEN_USAGE_URL，使用默认值
-if (!mergedEnv.TOKEN_USAGE_URL) {
-  mergedEnv.TOKEN_USAGE_URL = DEFAULT_TOKEN_USAGE_URL
+  // 设置默认值
+  merged.TOKEN_USAGE_URL ??= DEFAULT_TOKEN_USAGE_URL
+  merged.PROJECT_SERVER_PORT ??= DEFAULT_SERVER_PORT
+
+  return merged
 }

+/**
+ * 类型安全的环境变量配置
+ *
+ * 服务端变量:
+ * - TOKEN_USAGE_URL: Token 使用量 API 地址
+ *
+ * 客户端变量 (VITE_ 前缀):
+ * - VITE_APP_TITLE: 应用标题 (可选)
+ */
 export const env = createEnv({
  server: {
    TOKEN_USAGE_URL: z.string().url(),
+    PROJECT_SERVER_PORT: z.coerce
+      .number()
+      .int()
+      .min(1)
+      .max(65535)
+      .default(3000),
  },
  clientPrefix: 'VITE_',
  client: {
    VITE_APP_TITLE: z.string().min(1).optional(),
  },
-  runtimeEnv: mergedEnv,
+  runtimeEnv: buildMergedEnv(),
  emptyStringAsUndefined: true,
 })
--- a/src/hooks/useCountdown.ts
+++ b/src/hooks/useCountdown.ts
@@ -1,10 +1,12 @@
 /**
 * 倒计时 Hook
 *
- * 计算目标时间到当前时间的剩余时间，每秒更新一次
+ * 计算目标时间到当前时间的剩余时间，每秒更新一次。
+ * 使用 useMemo 优化计算，避免不必要的重渲染。
 */
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'

+/** 倒计时结果类型 */
 export interface CountdownResult {
  /** 剩余总秒数 */
  totalSeconds: number
@@ -20,58 +22,84 @@ export interface CountdownResult {
  isExpired: boolean
 }

+/** 时间常量 (毫秒) */
+const SECOND = 1000
+const MINUTE = 60
+const HOUR = 3600
+
+/** 无效/过期时的默认返回值 */
+const EXPIRED_RESULT: CountdownResult = {
+  totalSeconds: 0,
+  hours: 0,
+  minutes: 0,
+  seconds: 0,
+  formatted: '--:--',
+  isExpired: true,
+}
+
+/**
+ * 格式化倒计时为可读字符串
+ *
+ * @param hours - 小时数
+ * @param minutes - 分钟数
+ * @param seconds - 秒数
+ * @returns 格式化后的字符串 (如 "2h 15m" 或 "45m 30s")
+ */
+const formatCountdown = (
+  hours: number,
+  minutes: number,
+  seconds: number,
+): string => {
+  if (hours > 0) return `${hours}h ${minutes}m`
+  if (minutes > 0) return `${minutes}m ${seconds}s`
+  return `${seconds}s`
+}
+
 /**
 * 计算并实时更新目标时间的倒计时
- * @param targetTime ISO 8601 格式的目标时间字符串
- * @returns 倒计时结果
+ *
+ * @param targetTime - ISO 8601 格式的目标时间字符串
+ * @returns 倒计时结果对象
+ *
+ * @example
+ * ```tsx
+ * const countdown = useCountdown('2024-12-31T23:59:59Z')
+ * console.log(countdown.formatted) // "2h 15m"
+ * ```
 */
 export const useCountdown = (
  targetTime: string | undefined,
 ): CountdownResult => {
-  const [now, setNow] = useState(() => Date.now())
+  const [now, setNow] = useState(Date.now)

+  // 每秒更新当前时间
  useEffect(() => {
-    const timer = setInterval(() => {
-      setNow(Date.now())
-    }, 1000)
-
+    const timer = setInterval(() => setNow(Date.now()), SECOND)
    return () => clearInterval(timer)
  }, [])

-  if (!targetTime) {
+  // 使用 useMemo 缓存计算结果，仅在 now 或 targetTime 变化时重新计算
+  return useMemo(() => {
+    if (!targetTime) return EXPIRED_RESULT
+
+    const target = new Date(targetTime).getTime()
+    const diff = Math.max(0, target - now)
+    const totalSeconds = Math.floor(diff / SECOND)
+
+    // 已过期
+    if (totalSeconds === 0) return EXPIRED_RESULT
+
+    const hours = Math.floor(totalSeconds / HOUR)
+    const minutes = Math.floor((totalSeconds % HOUR) / MINUTE)
+    const seconds = totalSeconds % MINUTE
+
    return {
-      totalSeconds: 0,
-      hours: 0,
-      minutes: 0,
-      seconds: 0,
-      formatted: '--:--',
-      isExpired: true,
+      totalSeconds,
+      hours,
+      minutes,
+      seconds,
+      formatted: formatCountdown(hours, minutes, seconds),
+      isExpired: false,
    }
-  }
-
-  const target = new Date(targetTime).getTime()
-  const diff = Math.max(0, target - now)
-  const totalSeconds = Math.floor(diff / 1000)
-
-  const hours = Math.floor(totalSeconds / 3600)
-  const minutes = Math.floor((totalSeconds % 3600) / 60)
-  const seconds = totalSeconds % 60
-
-  let formatted: string
-  if (hours > 0) {
-    formatted = `${hours}h ${minutes}m`
-  } else if (minutes > 0) {
-    formatted = `${minutes}m ${seconds}s`
-  } else {
-    formatted = `${seconds}s`
-  }
-
-  return {
-    totalSeconds,
-    hours,
-    minutes,
-    seconds,
-    formatted,
-    isExpired: totalSeconds === 0,
-  }
+  }, [now, targetTime])
 }
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -1,42 +1,70 @@
 /**
 * OpenBridge 主题管理 Hook
 *
- * 管理 data-obc-theme 属性，支持 day/dusk/night/bright 四种主题
- * 主题选择会持久化到 localStorage
+ * 管理 data-obc-theme 属性，支持 day/dusk/night/bright 四种主题。
+ * 主题选择会持久化到 localStorage。
 */
 import { useCallback, useEffect, useState } from 'react'

+/** 支持的 OpenBridge 主题类型 */
 export type ObcTheme = 'day' | 'dusk' | 'night' | 'bright'

+/** 主题列表，用于循环切换 */
+const THEMES: readonly ObcTheme[] = ['day', 'dusk', 'night', 'bright'] as const
+
+/** localStorage 存储键名 */
 const STORAGE_KEY = 'obc-theme'
+
+/** 默认主题 */
 const DEFAULT_THEME: ObcTheme = 'day'

+/**
+ * 类型守卫：检查值是否为有效的主题
+ *
+ * @param value - 待检查的值
+ * @returns 是否为有效主题
+ */
+const isValidTheme = (value: unknown): value is ObcTheme =>
+  typeof value === 'string' && THEMES.includes(value as ObcTheme)
+
 /**
 * 获取初始主题（从 localStorage 或默认值）
+ *
+ * @returns 初始主题值
 */
 const getInitialTheme = (): ObcTheme => {
-  if (typeof window === 'undefined') {
-    return DEFAULT_THEME
-  }
+  // SSR 环境下使用默认主题
+  if (typeof window === 'undefined') return DEFAULT_THEME
+
  const stored = localStorage.getItem(STORAGE_KEY)
-  if (stored && ['day', 'dusk', 'night', 'bright'].includes(stored)) {
-    return stored as ObcTheme
-  }
-  return DEFAULT_THEME
+  return isValidTheme(stored) ? stored : DEFAULT_THEME
 }

 /**
 * 管理 OpenBridge 主题切换
+ *
+ * @returns 主题状态和控制函数
+ *
+ * @example
+ * ```tsx
+ * const { theme, setTheme, cycleTheme } = useTheme()
+ *
+ * // 设置为夜间模式
+ * setTheme('night')
+ *
+ * // 循环切换到下一个主题
+ * cycleTheme()
+ * ```
 */
 export const useTheme = () => {
  const [theme, setThemeState] = useState<ObcTheme>(getInitialTheme)

-  // 应用主题到 DOM
+  // 应用主题到 DOM 并持久化
  useEffect(() => {
-    if (typeof document !== 'undefined') {
-      document.documentElement.setAttribute('data-obc-theme', theme)
-      localStorage.setItem(STORAGE_KEY, theme)
-    }
+    if (typeof document === 'undefined') return
+
+    document.documentElement.setAttribute('data-obc-theme', theme)
+    localStorage.setItem(STORAGE_KEY, theme)
  }, [theme])

  // 切换到指定主题
@@ -46,18 +74,12 @@ export const useTheme = () => {

  // 循环切换主题
  const cycleTheme = useCallback(() => {
-    const themes: ObcTheme[] = ['day', 'dusk', 'night', 'bright']
-    const currentIndex = themes.indexOf(theme)
-    const nextIndex = (currentIndex + 1) % themes.length
-    const nextTheme = themes[nextIndex]
-    if (nextTheme) {
-      setThemeState(nextTheme)
-    }
-  }, [theme])
+    setThemeState((current) => {
+      const currentIndex = THEMES.indexOf(current)
+      const nextIndex = (currentIndex + 1) % THEMES.length
+      return THEMES[nextIndex] ?? DEFAULT_THEME
+    })
+  }, [])

-  return {
-    theme,
-    setTheme,
-    cycleTheme,
-  }
+  return { theme, setTheme, cycleTheme } as const
 }
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/src/orpc/client.ts
+++ b/src/orpc/client.ts
@@ -1,11 +1,11 @@
 /**
 * ORPC 同构客户端
 *
- * 根据运行环境自动选择最优调用方式:
- * - SSR (服务端): 直接调用 router，无 HTTP 开销
- * - CSR (客户端): 通过 /api/rpc 端点 HTTP 调用
+ * 根据运行环境自动选择最优的 RPC 调用方式:
+ * - SSR (服务端): 直接调用 router 处理器，零网络开销
+ * - CSR (客户端): 通过 /api/rpc 端点进行 HTTP 调用
 *
- * 同时配置了 TanStack Query 集成，mutation 成功后自动刷新相关查询。
+ * 同时集成 TanStack Query，提供开箱即用的查询/突变 hooks。
 */
 import { createORPCClient } from '@orpc/client'
 import { RPCLink } from '@orpc/client/fetch'
@@ -16,36 +16,58 @@ import { getRequestHeaders } from '@tanstack/react-start/server'
 import { router } from './router'
 import type { RouterClient } from './types'

+// ============================================================================
+// 客户端创建
+// ============================================================================
+
 /**
 * 创建同构 ORPC 客户端
 *
- * 服务端: 直接调用路由处理器
- * 客户端: 通过 HTTP 调用 /api/rpc 端点
+ * 使用 TanStack Start 的 createIsomorphicFn 实现服务端/客户端代码分离:
+ * - server(): 在 SSR 时执行，直接调用路由处理器
+ * - client(): 在浏览器中执行，通过 HTTP 调用 API
 */
 const getORPCClient = createIsomorphicFn()
  .server(() =>
+    // 服务端: 创建直接调用路由器的客户端
    createRouterClient(router, {
+      // 传递原始请求的 headers (用于身份验证等)
      context: () => ({
        headers: getRequestHeaders(),
      }),
    }),
  )
  .client(() => {
+    // 客户端: 创建 HTTP 客户端
    const link = new RPCLink({
      url: `${window.location.origin}/api/rpc`,
    })
    return createORPCClient<RouterClient>(link)
  })

+/** 同构客户端实例 */
 const client: RouterClient = getORPCClient()

+// ============================================================================
+// TanStack Query 集成
+// ============================================================================
+
 /**
- * ORPC + TanStack Query 工具
+ * ORPC + TanStack Query 工具集
 *
- * 使用方式:
+ * 提供类型安全的 queryOptions 和 mutationOptions 方法。
+ *
+ * @example
 * ```tsx
- * // 查询
+ * // 查询 (使用 Suspense)
 * const { data } = useSuspenseQuery(orpc.usage.getUsage.queryOptions())
+ *
+ * // 查询 (不使用 Suspense)
+ * const { data, isLoading } = useQuery(orpc.usage.getUsage.queryOptions())
+ *
+ * // 突变
+ * const mutation = useMutation(orpc.todo.create.mutationOptions())
+ * mutation.mutate({ title: '新任务' })
 * ```
 */
 export const orpc = createTanstackQueryUtils(client)
--- a/src/orpc/handlers/usage.ts
+++ b/src/orpc/handlers/usage.ts
@@ -8,17 +8,24 @@ import { env } from '@/env'
 import { dbProvider } from '@/orpc/middlewares'
 import { os } from '@/orpc/server'

-/** 远程 API 响应中的模型数据结构 */
-interface RemoteModelData {
-  model: string
-  displayName?: string
+/** 远程 API 响应中的账户数据结构 */
+interface RemoteAccountData {
+  accountName: string
  remainingFraction: number
  resetTime?: string
+  status?: string
+}
+
+/** 远程 API 响应中的模型数据结构 (按模型分组) */
+interface RemoteModelData {
+  modelId: string
+  displayName?: string
+  accounts: RemoteAccountData[]
 }

 /** 远程 API 响应结构 */
 interface RemoteResponse {
-  result: Record<string, RemoteModelData[]>
+  data: RemoteModelData[]
 }

 export const getUsage = os.usage.getUsage
@@ -31,7 +38,7 @@ export const getUsage = os.usage.getUsage
    }
    const data = (await response.json()) as RemoteResponse

-    // 2. 解析并筛选每个账户的 claude-opus-4-5-thinking 模型
+    // 2. 找到 claude-opus-4-5-thinking 模型，然后从其 accounts 中提取数据
    const opusModels: Array<{
      account: string
      model: string
@@ -40,21 +47,22 @@ export const getUsage = os.usage.getUsage
      resetTime?: string
    }> = []

-    for (const [accountFile, models] of Object.entries(data.result)) {
-      const account = accountFile.replace('.json', '')
+    // 新 API 按模型分组，找到目标模型
+    const opusModelData = data.data.find(
+      (m) => m.modelId === 'claude-opus-4-5-thinking',
+    )

-      // 只找 claude-opus-4-5-thinking 模型
-      const opusModel = models.find(
-        (m) => m.model === 'claude-opus-4-5-thinking',
-      )
+    if (opusModelData) {
+      // 遍历该模型下的所有账户
+      for (const accountData of opusModelData.accounts) {
+        const account = accountData.accountName.replace('.json', '')

-      if (opusModel) {
        opusModels.push({
          account,
-          model: opusModel.model,
-          displayName: opusModel.displayName,
-          remainingFraction: opusModel.remainingFraction,
-          resetTime: opusModel.resetTime,
+          model: opusModelData.modelId,
+          displayName: opusModelData.displayName,
+          remainingFraction: accountData.remainingFraction,
+          resetTime: accountData.resetTime,
        })
      }
    }
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -1,26 +1,44 @@
+/**
+ * 路由配置模块
+ *
+ * 创建并配置 TanStack Router 实例，集成 TanStack Query 进行 SSR 数据获取。
+ *
+ * 特性:
+ * - 自动滚动恢复
+ * - SSR 查询集成
+ * - 文件路由（由 routeTree.gen.ts 生成）
+ */
 import { QueryClient } from '@tanstack/react-query'
 import { createRouter } from '@tanstack/react-router'
 import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'
 import type { RouterContext } from './routes/__root'
 import { routeTree } from './routeTree.gen'

+/**
+ * 创建路由实例工厂函数
+ *
+ * 每次调用创建新的 QueryClient 和 Router 实例。
+ * 这对于 SSR 很重要，避免请求之间共享状态。
+ *
+ * @returns 配置好的 TanStack Router 实例
+ */
 export const getRouter = () => {
+  // 创建 TanStack Query 客户端
  const queryClient = new QueryClient()

+  // 创建路由实例
  const router = createRouter({
    routeTree,
-    context: {
-      queryClient,
-    } satisfies RouterContext,
-
+    context: { queryClient } satisfies RouterContext,
+    // 启用滚动位置恢复
    scrollRestoration: true,
+    // 预加载数据立即过期，确保总是获取最新数据
    defaultPreloadStaleTime: 0,
  })

-  setupRouterSsrQueryIntegration({
-    router,
-    queryClient,
-  })
+  // 设置 SSR 查询集成
+  // 将路由器的预取与 TanStack Query 的缓存连接起来
+  setupRouterSsrQueryIntegration({ router, queryClient })

  return router
 }
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,3 +1,13 @@
+/**
+ * 根布局组件
+ *
+ * 定义应用的 HTML 结构、全局样式和错误处理。
+ *
+ * 特性:
+ * - OpenBridge 设计系统集成 (CSS 变量主题)
+ * - TanStack Router 上下文配置
+ * - 全局错误边界和 404 处理
+ */
 import '@oicl/openbridge-webcomponents/src/palettes/variables.css'
 import type { QueryClient } from '@tanstack/react-query'
 import {
@@ -10,36 +20,44 @@ import { ErrorComponent } from '@/components/Error'
 import { NotFoundComponent } from '@/components/NotFount'
 import appCss from '@/styles.css?url'

+/** 路由上下文类型 - 包含 TanStack Query 客户端 */
 export interface RouterContext {
  queryClient: QueryClient
 }

+/**
+ * 根路由定义
+ *
+ * 配置:
+ * - head: 页面 meta 标签和样式表
+ * - shellComponent: HTML 文档结构
+ * - errorComponent: 错误边界回退
+ * - notFoundComponent: 404 页面
+ */
 export const Route = createRootRouteWithContext<RouterContext>()({
  head: () => ({
    meta: [
-      {
-        charSet: 'utf-8',
-      },
-      {
-        name: 'viewport',
-        content: 'width=device-width, initial-scale=1',
-      },
-      {
-        title: 'Token Usage Viewer',
-      },
-    ],
-    links: [
-      {
-        rel: 'stylesheet',
-        href: appCss,
-      },
+      { charSet: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { title: 'Token Usage Viewer' },
    ],
+    links: [{ rel: 'stylesheet', href: appCss }],
  }),
  shellComponent: RootDocument,
  errorComponent: () => <ErrorComponent />,
  notFoundComponent: () => <NotFoundComponent />,
 })

+/**
+ * HTML 文档根结构
+ *
+ * 设置:
+ * - lang="zh-Hans": 简体中文
+ * - data-obc-theme="day": OpenBridge 默认日间主题
+ * - obc-component-size-regular: OpenBridge 标准组件尺寸
+ *
+ * @param children - 页面内容
+ */
 function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
  return (
    <html lang="zh-Hans" data-obc-theme="day">
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,7 +1,12 @@
 /**
 * Token Usage Viewer 主页面
 *
- * 展示 Opus/Thinking 模型的配额使用情况仪表盘
+ * 展示 claude-opus-4-5-thinking 模型的配额使用情况仪表盘。
+ *
+ * 特性:
+ * - SSR 预加载数据（通过 loader）
+ * - 每 5 分钟自动刷新配额数据
+ * - Tauri 环境下自动设置窗口标题
 */
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { createFileRoute } from '@tanstack/react-router'
@@ -11,8 +16,16 @@ import { useEffect } from 'react'
 import { TokenUsageDashboard } from '@/components/TokenUsageDashboard'
 import { orpc } from '@/orpc'

+/** 数据自动刷新间隔 (毫秒) - 5 分钟 */
+const REFETCH_INTERVAL = 5 * 60 * 1000
+
 export const Route = createFileRoute('/')({
  component: Home,
+  /**
+   * 路由加载器 - SSR 数据预取
+   *
+   * 在服务端渲染时预先获取使用量数据，确保首次渲染即有内容。
+   */
  loader: async ({ context }) => {
    await context.queryClient.ensureQueryData(
      orpc.usage.getUsage.queryOptions(),
@@ -20,13 +33,19 @@ export const Route = createFileRoute('/')({
  },
 })

+/**
+ * 首页组件
+ *
+ * 使用 useSuspenseQuery 获取并展示配额数据，
+ * 确保 data 不为空（由 loader 预取保证）。
+ */
 function Home() {
  const { data } = useSuspenseQuery({
    ...orpc.usage.getUsage.queryOptions(),
-    refetchInterval: 300000, // 每 5 分钟自动刷新
+    refetchInterval: REFETCH_INTERVAL,
  })

-  // 设置 Tauri 窗口标题
+  // Tauri 环境: 设置窗口标题
  useEffect(() => {
    if (!isTauri()) return
    getCurrentWindow().setTitle('Token Usage Viewer')
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,292 @@
@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+/* ============================================================================
+ * OpenBridge 航海设计系统 - 四种光照条件主题
+ * 
+ * 符合 IMO 航海规范，确保在各种光照条件下的可读性：
+ * - Day: 日间正常光照
+ * - Bright: 强光/阳光直射
+ * - Dusk: 黄昏/低光照
+ * - Night: 夜间模式（保护夜视能力）
+ * ============================================================================ */
+
+/* Day 主题 - 日间正常光照 */
+:root[data-obc-theme='day'] {
+  /* 容器/背景颜色 */
+  --container-global-color: rgb(255, 255, 255);
+  --container-background-color: rgb(247, 247, 247);
+  --container-section-color: rgb(240, 240, 240);
+  --container-backdrop-color: rgb(224, 224, 224);
+  
+  /* 文字/元素颜色 - 深色文字确保可读性 */
+  --element-active-color: rgb(61, 61, 61);
+  --element-neutral-color: rgb(83, 83, 83);
+  --element-inactive-color: rgb(112, 112, 112);
+  --element-disabled-color: rgb(202, 202, 202);
+  
+  /* 兼容旧变量名 */
+  --on-container-color: rgb(61, 61, 61);
+  --on-container-low-color: rgb(112, 112, 112);
+  
+  /* 分割线/边框颜色 */
+  --border-outline-color: rgb(221, 221, 221);
+  --border-divider-color: rgb(221, 221, 221);
+  --border-silhouette-color: rgb(247, 247, 247);
+  --divider-color: rgb(221, 221, 221);
+  
+  /* 交互状态 */
+  --element-focused-color: rgba(0, 0, 0, 0.08);
+  --element-hover-color: rgba(0, 0, 0, 0.12);
+  
+  /* 告警颜色 */
+  --alert-alarm-color: rgb(227, 0, 25);
+  --alert-warning-color: rgb(254, 148, 19);
+  --alert-caution-color: rgb(255, 219, 55);
+  --alert-running-color: rgb(0, 131, 0);
+  
+  /* 按钮/强调色 */
+  --primary-color: rgb(51, 84, 131);
+  --border-focus-color: rgb(51, 84, 131);
+}
+
+/* Bright 主题 - 强光/阳光直射（高对比度） */
+:root[data-obc-theme='bright'] {
+  /* 容器/背景颜色 - 纯白最大亮度 */
+  --container-global-color: rgb(255, 255, 255);
+  --container-background-color: rgb(255, 255, 255);
+  --container-section-color: rgb(255, 255, 255);
+  --container-backdrop-color: rgb(255, 255, 255);
+  
+  /* 文字/元素颜色 - 最深黑色确保阳光下可读 */
+  --element-active-color: rgb(26, 26, 26);
+  --element-neutral-color: rgb(61, 61, 61);
+  --element-inactive-color: rgb(83, 83, 83);
+  --element-disabled-color: rgb(202, 202, 202);
+  
+  /* 兼容旧变量名 */
+  --on-container-color: rgb(26, 26, 26);
+  --on-container-low-color: rgb(83, 83, 83);
+  
+  /* 分割线/边框颜色 - 加粗边框增强对比 */
+  --border-outline-color: rgb(142, 142, 142);
+  --border-divider-color: rgb(142, 142, 142);
+  --border-silhouette-color: rgb(255, 255, 255);
+  --divider-color: rgb(142, 142, 142);
+  
+  /* 交互状态 */
+  --element-focused-color: rgba(0, 0, 0, 0.12);
+  --element-hover-color: rgba(0, 0, 0, 0.18);
+  
+  /* 告警颜色 - 饱和度更高 */
+  --alert-alarm-color: rgb(235, 0, 20);
+  --alert-warning-color: rgb(254, 148, 19);
+  --alert-caution-color: rgb(228, 186, 2);
+  --alert-running-color: rgb(6, 131, 6);
+  
+  /* 按钮/强调色 - 更深的蓝色 */
+  --primary-color: rgb(34, 60, 97);
+  --border-focus-color: rgb(34, 60, 97);
+}
+
+/* Dusk 主题 - 黄昏/低光照 */
+:root[data-obc-theme='dusk'] {
+  /* 容器/背景颜色 - 深灰色减少眩光 */
+  --container-global-color: rgb(36, 36, 36);
+  --container-background-color: rgb(26, 26, 26);
+  --container-section-color: rgb(18, 18, 18);
+  --container-backdrop-color: rgb(3, 3, 3);
+  
+  /* 文字/元素颜色 - 浅灰色文字 */
+  --element-active-color: rgb(198, 198, 198);
+  --element-neutral-color: rgb(165, 165, 165);
+  --element-inactive-color: rgb(130, 130, 130);
+  --element-disabled-color: rgb(58, 58, 58);
+  
+  /* 兼容旧变量名 */
+  --on-container-color: rgb(198, 198, 198);
+  --on-container-low-color: rgb(130, 130, 130);
+  
+  /* 分割线/边框颜色 */
+  --border-outline-color: rgb(0, 0, 0);
+  --border-divider-color: rgba(255, 255, 255, 0.09);
+  --border-silhouette-color: rgb(0, 0, 0);
+  --divider-color: rgba(255, 255, 255, 0.09);
+  
+  /* 交互状态 */
+  --element-focused-color: rgba(255, 255, 255, 0.08);
+  --element-hover-color: rgba(255, 255, 255, 0.12);
+  
+  /* 告警颜色 */
+  --alert-alarm-color: rgb(203, 19, 29);
+  --alert-warning-color: rgb(254, 155, 41);
+  --alert-caution-color: rgb(233, 195, 0);
+  --alert-running-color: rgb(18, 119, 15);
+  
+  /* 按钮/强调色 - 亮蓝色 */
+  --primary-color: rgb(133, 167, 216);
+  --border-focus-color: rgb(133, 167, 216);
+}
+
+/* Night 主题 - 夜间模式（保护夜视能力）
+ * 使用红色/黄色光谱，避免蓝光影响夜视适应 */
+:root[data-obc-theme='night'] {
+  /* 容器/背景颜色 - 纯黑背景 */
+  --container-global-color: rgb(10, 10, 0);
+  --container-background-color: rgb(0, 0, 0);
+  --container-section-color: rgb(0, 0, 0);
+  --container-backdrop-color: rgb(5, 5, 0);
+  
+  /* 文字/元素颜色 - 暗黄色文字（保护夜视） */
+  --element-active-color: rgb(71, 71, 0);
+  --element-neutral-color: rgba(71, 71, 0, 0.65);
+  --element-inactive-color: rgba(71, 71, 0, 0.45);
+  --element-disabled-color: rgba(71, 71, 0, 0.25);
+  
+  /* 兼容旧变量名 */
+  --on-container-color: rgb(71, 71, 0);
+  --on-container-low-color: rgba(71, 71, 0, 0.65);
+  
+  /* 分割线/边框颜色 */
+  --border-outline-color: rgba(71, 71, 0, 0.2);
+  --border-divider-color: rgba(71, 71, 0, 0.2);
+  --border-silhouette-color: rgb(0, 0, 0);
+  --divider-color: rgba(71, 71, 0, 0.2);
+  
+  /* 交互状态 */
+  --element-focused-color: rgba(71, 71, 0, 0.15);
+  --element-hover-color: rgba(71, 71, 0, 0.25);
+  
+  /* 告警颜色 - 低亮度红/黄/绿 */
+  --alert-alarm-color: rgb(77, 0, 5);
+  --alert-warning-color: rgb(92, 44, 0);
+  --alert-caution-color: rgb(92, 69, 0);
+  --alert-running-color: rgb(23, 56, 0);
+  
+  /* 按钮/强调色 - 暗绿色 */
+  --primary-color: rgb(0, 51, 21);
+  --border-focus-color: rgb(71, 71, 0);
+}
+
+/* ============================================================================ */
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,35 +1,75 @@
+/**
+ * Vite 构建配置
+ *
+ * 集成 TanStack Start (SSR) + Nitro (服务端) + Tailwind CSS + React Compiler。
+ *
+ * 特性:
+ * - Bun 运行时优化 (nitro preset: 'bun')
+ * - 静态资源内联 (serveStatic: 'inline')
+ * - React Compiler 自动优化 (无需手动 memo)
+ * - 端口从环境变量 PROJECT_SERVER_PORT 读取 (默认 3000)
+ */
 import tailwindcss from '@tailwindcss/vite'
 import { devtools as tanstackDevtools } from '@tanstack/devtools-vite'
 import { tanstackStart } from '@tanstack/react-start/plugin/vite'
 import react from '@vitejs/plugin-react'
 import { nitro } from 'nitro/vite'
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import tsconfigPaths from 'vite-tsconfig-paths'

+// ============================================================================
+// 项目配置 (集中管理)
+// ============================================================================
+
+/** 加载 .env 文件中的环境变量 */
+const envVars = loadEnv('development', process.cwd(), '')
+
+/** 开发服务器端口 (从环境变量读取，默认 3000) */
+const DEV_PORT = Number(envVars.PROJECT_SERVER_PORT) || 3000
+
 export default defineConfig({
+  // 禁止清屏，方便与 Tauri 开发工具共用终端
  clearScreen: false,
+
  build: {
-    cssMinify: 'esbuild', // 使用 esbuild 替代 lightningcss 避免第三方 CSS 兼容性问题
+    // 使用 esbuild 进行 CSS 压缩
+    // 避免 lightningcss 处理第三方 CSS 时的兼容性问题
+    cssMinify: 'esbuild',
  },
+
  plugins: [
+    // TanStack 开发工具
    tanstackDevtools(),
+
+    // Nitro 服务端框架 (Bun 运行时)
    nitro({
      preset: 'bun',
      serveStatic: 'inline',
    }),
+
+    // TypeScript 路径别名 (@/* -> src/*)
    tsconfigPaths(),
+
+    // Tailwind CSS v4
    tailwindcss(),
+
+    // TanStack Start SSR 框架
    tanstackStart(),
+
+    // React + Babel (启用 React Compiler)
    react({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
+
  server: {
-    port: 3000,
-    strictPort: true,
+    port: DEV_PORT,
+    // 如果端口被占用则报错，而不是自动切换端口
+    strictPort: false,
    watch: {
+      // 忽略 Tauri 源码目录，避免不必要的重编译
      ignored: ['**/src-tauri/**'],
    },
  },
Author	SHA1	Message	Date
MAO Dongyang	d22a0f8d69	feat: 替换 OpenBridge 组件并实现航海规范主题系统 - 使用 shadcn/ui 重新实现 TopBar、ThemeSidebar、AlertBadge 组件 - 解决 @oicl/openbridge-webcomponents ESM 模块解析问题 - 添加 OpenBridge 四种主题 CSS 变量 (day/bright/dusk/night) - Night 主题使用暗黄色文字保护夜视能力 - 更新 API 端点适配新的按模型分组数据结构	2026-01-26 21:17:56 +08:00
MAO Dongyang	fa625ca301	refactor: 简化项目配置，改用环境变量端口并专注 MSI 发布 - 重命名项目为 openbridgeTokenUsageViewer (camelCase 风格) - 移除 DJB2 hash 端口计算，改用 PROJECT_SERVER_PORT 环境变量 (默认 3000) - 删除 src/lib/project-port.ts 冗余模块 - 打包目标从 "all" 改为 "msi"，专注 Windows 安装程序发布	2026-01-22 14:19:43 +08:00
MAO Dongyang	b520cdaf35	feat: 支持4种OpenBridge主题切换，统一项目命名和端口配置 - 添加 OpenBridge 四种主题切换 (day/bright/dusk/night) - 实现 DJB2 hash 算法生成项目专用端口 (14323) - 统一项目名称为 openbridge-token-usage-viewer - 更新 Tauri 应用名称、sidecar 命名和窗口标题 - 开发服务器端口从 3000 改为基于项目名称的稳定端口	2026-01-22 13:02:43 +08:00
MAO Dongyang	d077dfdd90	feat: 动态显示账户圆环数量，移除硬编码限制 - 移除 MAX_DISPLAY_ACCOUNTS = 4 的硬编码限制 - 圆环数量现在根据 API 返回的账户数自动调整 - 支持 5 个或更多账户的显示	2026-01-22 12:00:06 +08:00
MAO Dongyang	13a873ec76	refactor: 优化代码结构，添加中文注释，完善 README 文档 - Hooks/组件添加 useMemo 优化，减少不必要的重计算 - 简化 TokenUsageDashboard 的 Suspense 嵌套层级 - 完善 README: 技术栈、构建产物位置、架构说明	2026-01-21 20:15:34 +08:00