diff --git a/.agents/skills/frontend-craft/SKILL.md b/.agents/skills/frontend-craft/SKILL.md
new file mode 100644
index 0000000..8c90b42
--- /dev/null
+++ b/.agents/skills/frontend-craft/SKILL.md
@@ -0,0 +1,192 @@
+---
+name: frontend-craft
+description: 生成或修改前端界面时建立并维持统一的设计系统。当用户要求做前端页面/组件/样式、抱怨界面丑或乱或不一致、做前端技术选型与设计 Token、或需要整理迁移既有 CSS（样式膨胀、重复规则、颜色字号失控）时使用。提供两阶段工作流（先建 token/原语/lint/截图验收回路，再生成界面）、设计 Token 数值基准、原语组件模板、反模式清单、提示词模板与零依赖截图方法。不适用于纯后端工作；也不替代用户做审美与参照物的最终选择。
+---
+
+# 前端界面工程（frontend-craft）
+
+## 目标
+
+让 AI 产出的前端界面**一致、完整、可维护**，并且让"漂移"从一件无人察觉的事
+变成一件会被机器发现的事。
+
+**这个技能解决的不是"审美"问题，是"约束"问题。** 界面看起来乱，
+绝大多数时候不是因为某个颜色选错了，而是因为**每一轮迭代都在重新发明一个值**。
+一份真实的体检报告：某项目 1313 行 CSS 里只有 31 次 `var()`（约 97% 硬编码），
+产出 7 个几乎一样的绿色、21 种圆角、19 种字号、24 种 rgba、3 个互相覆盖的 `:root` 块、
+66 条重复声明。**单个按钮都不丑，叠在一起眼睛找不到节奏。**
+
+所以做法不是"重新画得好看一点"（那会把同一类错误再犯一次），
+而是**先把约束建起来，再在约束内生成**。
+
+---
+
+## 诚实的能力边界（先读，避免期待错位）
+
+**这个技能能做到：**
+- 消除颜色/字号/圆角/间距的失控（从"21 种圆角"到"3 种"）
+- 补齐 hover / focus / disabled / 空态 / 错态 / 加载态，不再遗漏
+- 新会话不用重新解释规范（规范在仓库里，不在对话里）
+- 从 mock 切真后端时改动极小（契约是真的）
+- 让漂移可被机器发现，而不是靠人眼
+
+**这个技能做不到：**
+- **提升审美上限。** 参照物选得差，产出依然是"整洁的差品味"。
+- **替代信息架构判断。** 把控件状态当正文写进页面，token 和 lint 都拦不住。
+- **阻止用户自己用临时 prompt 破坏体系。** 技能管不住旁边那个人。
+
+> 一句话：**这个技能把"很烂"提到"整洁统一"，这是真实且巨大的提升。
+> 从"整洁"到"优秀"那一步靠参照物和人的品味判断。**
+> 不要向用户承诺超出这个范围的结果。
+
+---
+
+## 适用与不适用
+
+**适用**：新项目前端从零搭建 / 既有界面整理迁移 / 用户抱怨"界面丑、乱、不一致" /
+需要定义设计 Token / 需要建 lint 与验收回路 / 需要写前端相关的提示词。
+
+**不适用**：纯后端或 CLI 工作 / 用户只想要一个一次性的静态页面（用不上这套）/
+用户已明确有成熟设计系统且不希望改动。
+
+---
+
+## 工作流
+
+### 0. 先判断当前处于哪个阶段
+
+| 现象 | 阶段 | 去哪 |
+|---|---|---|
+| 项目没有 `tokens.css` / `DESIGN.md` | **阶段一（建约束）** | `references/bootstrap.md` |
+| 有约束，要做一个新页面/组件 | **阶段二（生成）** | `references/build.md` |
+| 已有界面但样式乱了，要整理 | **迁移** | `tokens-baseline.md` 第 4 节 |
+| 需要对照截图检查 | **验收** | `references/screenshot-and-qa.md` |
+
+**不要跳过阶段一直接生成界面。** 这是本技能最核心的一条。
+理由见 `bootstrap.md` 开头 —— 简单说：直接生成时 AI 要做 200 个即兴决定，
+其中 190 个没有依据，而这些决定会不可逆地叠加。
+
+### 1. 阶段一：建设约束基础设施
+
+产出 12 项（清单见 `bootstrap.md`），核心是这四类：
+
+1. **具体数值** → `src/styles/tokens.css`（复制 `templates/tokens.css`，
+   只调正文基准字号、主色、中性色偏色三处）
+2. **视觉契约** → `docs/design/DESIGN.md`（复制 `templates/DESIGN.md`）
+   —— 尤其是**参照物表**和**页面×状态矩阵**
+3. **可执行检查** → `stylelint.config.mjs` + `scripts/audit-css.mjs`
+4. **验收回路** → `scripts/capture.mjs` + `docs/design/qa-checklist.md`
+
+**为什么要"可执行检查"这一层**：一句写在文档里的"禁止字面量颜色"，
+被违反时什么都不会发生。一条会 `exit 1` 的规则，被违反时你一定会知道。
+**规则的价值不在于被写下来，而在于被违反时会发生什么。**
+
+### 2. 阶段二：按契约生成界面
+
+**顺序是铁律**：
+
+```
+灰块结构 → 空态 + 错态 → 加载态 → 正常态 → 边界态 → 截图验收
+```
+
+两个最关键的顺序决定：
+- **空态和错态在正常态之前** —— 反过来的话，空态需要的引导按钮和居中容器
+  在正常态布局里没有位置，只能硬塞或草草了事。
+  **顺序反了 = 空态永远补不上。** 而且新用户第一次打开看到的就是空态。
+- **灰块结构在最前面** —— 先填内容再调布局，等于在移动的靶子上画画。
+
+细节见 `references/build.md`。
+
+### 3. 迁移既有界面
+
+**不要推翻重做**（那是把同一类错误再犯一次，还丢掉已完成的交互）。
+按 `tokens-baseline.md` 第 4 节：取色 → 按频次归一 → 主色取现状中最后生效的那个
+（不新造，避免"又换风格了"的反弹）→ 用 `audit-css.mjs` 记录迁移前后分数。
+
+按频次归一（19 种字号 → 7 种，21 种圆角 → 3 种）会**立刻**让界面看起来整齐 ——
+因为噪音消失了，而不是因为"变漂亮了"。这是投入产出比最高的一次改动。
+
+### 4. 验收（每次改完必做）
+
+```
+截图 → 看图挑刺 → 改 → 再截图
+```
+
+- 截图：`node scripts/capture.mjs <url> shots --widths 375,1280`（输出目录是位置参数）
+- 挑刺：对照 `templates/qa-checklist.md`，按 8 组**顺序**过（对齐优先于颜色）
+- **必须真的调用读图工具看图。** 声称"我看到界面很整洁"但没读图，是编造。
+- 反馈必须能直接翻译成一行 CSS 改动。**"看起来不够精致"是无效反馈**，
+  "工具栏三个控件高度是 28/36/32px"才是有效反馈。
+- 更有效：开一个**全新的 subagent**，只给它截图和清单、不告诉它代码是谁写的。
+  它的上下文里没有"我这么写是有道理的"这笔账。见 `prompts.md` 第 5 节。
+
+---
+
+## 硬规则（不可协商）
+
+写进每个 prompt，并让 lint 强制：
+
+1. 全项目**只有一个 `:root` 块**，只在 `tokens.css` 里
+2. **禁止颜色字面量**（`#xxx` / `rgb()` / `hsl()`），颜色只用 `var(--c-*)`
+3. **禁止设计维度写裸 px**（间距/字号/圆角/行高），只用 `var(--space-* / --text-* / --radius-* / --leading-*）`。例外：`1px` 边框线宽
+4. **禁止 `!important`**（几乎总是重复规则打架的后遗症）
+5. **禁止 `outline: none`**（焦点环是键盘用户唯一的导航手段）
+6. **禁止为同一语义造第二个 token**（先 grep 找最接近的复用）
+7. **改原规则，不要在文件末尾追加覆盖块** —— 这是 CSS 膨胀的头号来源。
+   真实案例：某文件 453 条规则只覆盖 387 个选择器，66 条重复声明，文件注释就是 6 段迭代史
+8. **禁止"顺便优化"** —— "发现其他问题请单独列出，不要顺手改"
+9. **一次只改一个维度**（对齐 → 间距 → 灰度 → 圆角 → 颜色），改完截图再动下一个
+10. **禁止给形容词下需求** —— 给数值或给参照图。"高级感"没有可执行的落点
+
+完整清单（22 条，含症状/为什么坏/正确做法）见 `templates/anti-patterns.md`。
+
+---
+
+## 物料索引
+
+**物料比方法论值钱。** 大部分的实际效果来自下面这些具体文件和数值，
+而不是上面这些流程描述。
+
+### templates/ —— 复制到项目里去用的
+
+| 文件 | 用途 |
+|---|---|
+| `templates/tokens.css` | 设计 Token 唯一真相源：11 节、含不可违反规则注释、深色模式结构预留 |
+| `templates/DESIGN.md` | 视觉契约模板：定位/参照物表/组件白名单/页面×状态矩阵/变更流程 |
+| `templates/anti-patterns.md` | 22 条视觉禁飞区，每条含症状·为什么坏·正确做法·机器检测方式 |
+| `templates/qa-checklist.md` | 8 组视觉验收清单，全部可对着截图回答 |
+| `templates/stylelint.config.mjs` | 把硬规则变成会 `exit 1` 的检查 |
+| `templates/vue/Ui{Button,Input,Select,Card,Badge,EmptyState}.vue` | 6 个 Vue 3 原语，已覆盖 4 种交互状态、零颜色字面量 |
+
+### references/ —— 按需加载的方法说明
+
+| 文件 | 什么时候读 |
+|---|---|
+| `references/bootstrap.md` | 阶段一：为什么必须先建约束、12 项产出清单与验收判据 |
+| `references/build.md` | 阶段二：单页面实现顺序、契约层与 mock、切真后端判据 |
+| `references/tokens-baseline.md` | Token 数值为什么是这些数字；三种项目类型的调参；迁移做法 |
+| `references/screenshot-and-qa.md` | 零依赖截图方案（实测可用）、截不到时的降级策略、验收回路、MCP 选型 |
+| `references/reference-sources.md` | 去哪找参照图、**为什么 AI 不能替用户选参照物**、常见错误 |
+| `references/prompts.md` | 6 个可直接复制的提示词模板 + 好坏对照表 |
+
+### scripts/ —— 阶段一生成到项目里的
+
+| 脚本 | 作用 |
+|---|---|
+| `scripts/capture.mjs` | 零依赖截图（自动探测 Chrome/Edge，多宽度，SPA 等待） |
+| `scripts/audit-css.mjs` | 设计系统漂移记分卡（`:root` 块数、颜色近重复聚类、字号/圆角档位、token 覆盖率、冗余声明），任一超阈值 `exit 1`；支持 `--ignore <片段>` 排除 token 文件这类"字面量本来就合法"的文件；「同一选择器分散在多块」只提示、不参与判定 |
+
+---
+
+## 关键提醒
+
+**参照物是价值最高的一项（约占 80%），而它的选择不能由 AI 代劳。**
+"好看"是用户的品味判断，不在代码里也不在任何可检索的资料里。
+AI 应该产出**候选集 + 特征分析 + 截图**，由用户做最终选择。
+详见 `references/reference-sources.md` 第 4 节。
+
+**如果项目已有界面，优先取现状中最后生效的那个主色**，
+而不是新造一个 —— 迁移在视觉上接近中性，阻力最小。
+
+**截图能力已实测**（本环境零依赖）：Chrome headless 675ms 产出 PNG，
+可正常读图。不要因为"没有截图工具"而跳过验收 —— `capture.mjs` 今天就能用。
diff --git a/.agents/skills/frontend-craft/references/bootstrap.md b/.agents/skills/frontend-craft/references/bootstrap.md
new file mode 100644
index 0000000..7bf54dc
--- /dev/null
+++ b/.agents/skills/frontend-craft/references/bootstrap.md
@@ -0,0 +1,153 @@
+# bootstrap.md — 阶段一：先把"约束"建起来，再写界面
+
+> **本文回答**："先让 AI 按 skill 把仓库契约文件、可执行检查、验收回路都准备好，
+> 然后再按 skill 生成前端代码，这样做出来会不会更好？"
+>
+> **答案是会，而且这是这套方法里最重要的一步。** 但要说清它好在哪里 ——
+> 它提升的是**下限和稳定性**，不是审美上限。
+
+---
+
+## 为什么必须先做这一步
+
+对比两种做法，同一个 AI、同一个需求：
+
+**做法 A（绝大多数 vibe coding）**：直接说"给我做个工作台界面"。
+AI 从零开始，每个决定都是即兴的：这个绿还是那个绿？12px 还是 13px？
+圆角 8 还是 10？——每个决定单独看都合理，合起来就是 7 个绿 + 21 种圆角 +
+19 种字号。**不是因为它审美差，而是因为它一共要做 200 个决定，
+其中 190 个没有依据。**
+
+**做法 B（先建约束）**：先花一轮把 token 表定下来（7 档字号、4 档圆角、
+4 个有彩色），把原语组件写出来，把 lint 打开，把截图脚本跑通。
+然后再生成界面 —— 此时 AI 要做的是**选择**而不是**发明**：正文用
+`--text-base`，卡片用 `--radius-md`，主色用 `--c-accent`。
+
+差别在于：做法 A 里"12px"和"13px"是两个同等合法的即兴创作；
+做法 B 里只有一个存在，另一个在 lint 里会报错。
+
+> **一句话**：这一步不产生任何业务价值，它的全部价值是让后面每一步都有依据。
+> 跳过它，后面 200 个决定就全部失去约束，而这些决定是不可逆地叠加的。
+
+---
+
+## 阶段一的产出清单
+
+按顺序做，每一项都必须**落盘成文件**。没落盘 = 没做（下一轮会话就忘了）。
+
+| # | 产出 | 路径 | 验收方式 |
+|---|---|---|---|
+| A1 | 目录骨架 | `src/{components/{ui,layout},styles,api,mocks,views}` | 目录存在 |
+| A2 | Design Token | `src/styles/tokens.css` | `audit-css.mjs` 的 `:root` 块数 == 1 |
+| A3 | 视觉契约 | `docs/design/DESIGN.md` | 参照物表非空；状态矩阵填满 |
+| A4 | 负面清单 | `docs/design/anti-patterns.md` | 至少 10 条 |
+| A5 | 原语组件 | `src/components/ui/Ui{Button,Input,Select,Card,Badge,EmptyState}.vue` | 每个覆盖 4 种状态；无字面量颜色 |
+| A6 | 布局骨架 | `src/components/layout/AppShell.vue` | **只有灰块**，无业务内容 |
+| A7 | 契约层 | `src/api/types.ts` + `client.ts` | 类型完整；唯一网络出口 |
+| A8 | Mock | `src/mocks/*` | 能返回 typed 假数据 |
+| A9 | lint | `stylelint.config.mjs` + `package.json` 脚本 | 在干净项目上通过 |
+| A10 | 漂移审计 | `scripts/audit-css.mjs` | 能跑出报告 |
+| A11 | 截图 | `scripts/capture.mjs` | 能产出非空 PNG |
+| A12 | 验收清单 | `docs/design/qa-checklist.md` | 清单已按项目调整 |
+
+**A6 的"只有灰块"是硬要求。** 先用灰色矩形把布局占满，确认结构、间距、
+断点都对了，再往里填内容。先填内容再调布局，等于在移动的靶子上画画 ——
+你会发现每次改内容都要重调布局。
+
+---
+
+## A2 / A3 的具体做法
+
+### 定 token（这一步决定了 80% 的后续自由度）
+
+**不要从零发明。** 直接抄 `tokens-baseline.md` 里的数值表，只调三件事：
+
+1. **正文基准字号**：密集工具界面 13px；阅读/营销型 15~16px。
+2. **主色**：从参照物或品牌色取一个。
+   > 如果项目已有界面，**优先取现状里最后生效的那个主色**，
+   > 而不是新造一个。这样迁移看起来是"整理"而不是"换风格"，
+   > 阻力最小，也不会引起"又改配色"的反弹。
+3. **中性色偏色**：冷灰（偏蓝）显得技术、理性；暖灰（偏黄/绿）显得柔和。
+
+其余档位（间距 13 档、圆角 3 档、语义色 3 个）**不要动**，它们不是审美选择，
+是防膨胀的结构。
+
+### 定参照物（这一步决定上限）
+
+见 `reference-sources.md`。核心：**AI 不能替用户选参照物** ——
+因为"好看"是用户的品味判断，不是技术判断。AI 可以找到候选、
+可以描述差异、可以指出某个参照物和你的产品调性不匹配，
+但最终选定必须由人做。
+
+如果没有参照物，产出会稳定地落在"整洁但平庸"这个位置。
+
+---
+
+## A9 / A10 / A11 为什么算"阶段一"的一部分
+
+因为它们不是"代码质量工具"，它们是**约束的执行机构**。
+
+- 一句写在文档里的"禁止字面量颜色"，AI 有 5% 概率违反且你不会知道。
+- 一条会 `exit 1` 的 stylelint 规则，违反时你**一定会知道**。
+
+**规则的价值不在于被写下来，而在于被违反时会发生什么。**
+文字规则违反后什么都不会发生 —— 这就是为什么单靠 SKILL.md 不够。
+
+同理，`capture.mjs` 让"看一眼"从一件麻烦事变成一条命令。
+如果截图很麻烦，它就不会发生；不发生的验收等于没有验收。
+
+---
+
+## 阶段一结束的判据
+
+全部满足才算阶段一完成：
+
+- [ ] `npx stylelint "src/**/*.{css,vue}"` 在**新代码**上 0 error。
+      迁移期 legacy 文件用下面的 audit 跟踪收敛，不进这个硬门 ——
+      一开就是 600+ 条报错时，人会习惯性忽略输出，那等于没开。
+- [ ] **token 文件本身干净**：`node scripts/audit-css.mjs src/styles/tokens.css`
+      的报告里 `:root` 块 = 1、变量无重复声明、**冗余声明（同属性重复声明）= 0**。
+      > 「同一选择器分散在多块」已降级为提示项，不计入这条判据 ——
+      > 各块属性互不重叠时它并不冗余，把它归零反而要冒合并块带来的渲染风险。
+      > ⚠️ **不要拿"全绿"当这条的判据。** token 文件按定义必然让
+      > `token 覆盖率` 和 `彩色 distinct` 两项 FAIL —— 它**就是**那些
+      > 字面量的唯一合法来源。这两项要在「排除 token 文件之后」的主样式上量：
+      > `node scripts/audit-css.mjs src --ignore tokens.css`。
+- [ ] `node scripts/audit-css.mjs src --ignore tokens.css` 能跑出报告，
+      并把当前分数**存档**（这就是迁移的"前"分数，阶段二每一步都要跟它比）
+- [ ] `node scripts/capture.mjs <本地 URL> shots` 产出非空 PNG，
+      且**你亲眼看过**那张图（没看过的截图等于没截）
+- [ ] **迁移项目专用**：引入 token 文件后重截，与引入前**逐像素一致**。
+      阶段一的硬要求是"零视觉变化" —— 地基不该改变外观，只改变依据。
+- [ ] 原语组件在 `AppShell` 灰块骨架里渲染正常（**新建项目**要求；
+      迁移项目跳过，不要为了这一条去重建已有的壳）
+- [ ] `DESIGN.md` 的参照物表和状态矩阵已填
+- [ ] `api/types.js`（JS 项目用 JSDoc `@typedef`）或 `api/types.ts`（TS 项目）
+      覆盖了所有接口的形状，且**形状来自真实响应**而不是凭印象写的。
+      把取证记录（哪个端点、HTTP 码、响应大小、观测到的枚举值）写进文件末尾。
+
+**此时应该能截到一张"结构正确但内容空洞"的界面**（新建项目），
+或者一张"和改造前逐像素相同、但依据已经换掉"的界面（迁移项目）。
+这张图就是后续所有页面的地基。
+
+---
+
+## 诚实的边界
+
+做这一步**会**带来：
+
+- 一致性的数量级提升（不再有 7 个绿、21 种圆角）
+- 空态/错态/hover/focus 不再遗漏（因为原语层就要求覆盖）
+- 新会话不用重新解释规范（规范在仓库里）
+- 从 mock 切真后端时改动极小（契约是真的）
+- 漂移可被机器发现，而不是靠人眼
+
+做这一步**不会**带来：
+
+- 审美上限。参照物选得差，产出依然是"整洁的差品味"。
+- 信息架构能力。把不该出现在正文里的控件状态写进正文（AP-18），
+  token 和 lint 都拦不住 —— 那是产品判断。
+- 阻止用户自己用临时 prompt 破坏体系。skill 管不住旁边那个人。
+
+> **所以：这一步把"很烂"提到"整洁统一"，这是真实且巨大的提升。
+> 但"整洁"到"优秀"之间那一步，靠的是参照物和人的品味判断。**
diff --git a/.agents/skills/frontend-craft/references/build.md b/.agents/skills/frontend-craft/references/build.md
new file mode 100644
index 0000000..2b740d6
--- /dev/null
+++ b/.agents/skills/frontend-craft/references/build.md
@@ -0,0 +1,173 @@
+# build.md — 阶段二：按契约生成界面
+
+> 前置：阶段一已完成（`bootstrap.md` 的判据全部满足）。
+> 此时你有：token、原语、灰块骨架、契约+mock、lint、截图脚本、验收清单。
+>
+> 本文是**单个页面/组件**的实现流程。核心是**顺序**。
+
+---
+
+## 铁律：顺序不能颠倒
+
+```
+灰块结构 → 空态 + 错态 → 加载态 → 正常态 → 边界态 → 截图验收
+```
+
+### 为什么"空态和错态要在正常态之前"
+
+这是最反直觉、也最有效的一条。
+
+**做正常态时，你脑子里有一份"数据长什么样"的完整图景**，
+于是布局自然就根据数据反推出来了。等做完正常态再补空态，
+你会发现空态需要的引导按钮、提示文案、居中容器，
+在正常态的布局里**没有位置** —— 于是只能硬塞，或者草草了事。
+
+**反过来做**：先做空态。空态要求你回答"这个页面在没有数据时，
+用户应该做什么"。这个问题会倒逼你想清楚页面的**主要目的**，
+而这个理解会直接改善正常态的设计。
+
+而且从用户视角看：**新用户第一次打开就是空态。**
+只做正常态，等于让第一批用户看到一个半成品。
+
+> 顺序反了 = 空态永远补不上。这不是推测，是几乎所有项目的实际结局。
+
+### 为什么"灰块结构"要在最前面
+
+先只用灰块把布局撑起来，确认：区块位置、间距、断点、滚动行为。
+此时不涉及颜色字号 —— 所以布局问题不会被视觉细节掩盖。
+
+**先填内容再调布局，等于在移动的靶子上画画。** 每加一个字段，
+布局就要重调一次，而且永远调不完。
+
+---
+
+## 单页面实现流程
+
+### 第 1 步：读约束（不要跳过）
+
+- `DESIGN.md` 第 5 节（组件白名单）→ 你能用哪些原语
+- `DESIGN.md` 第 6 节（状态矩阵）→ 本页要覆盖哪些状态
+- `DESIGN.md` 第 2 节 + `reference/` → 参照物，以及"取什么/不取什么"
+- `anti-patterns.md` → 禁止事项
+
+**第 1 步的信号**：如果读完你还说不出这个页面的"主要目的是什么"，
+停下，去问，不要开始写。
+
+### 第 2 步：灰块结构
+
+只做：容器、分区、栅格、间距、断点。
+不做：颜色、字号、图标、真实文本（用等高灰条占位）。
+
+**验收**：截一张图，只看结构。区块的层级关系清楚吗？
+间距有节奏吗？375px 下不崩吗？
+
+### 第 3 步：空态
+
+- 一句说明"这里是空的，因为……"
+- 一个**主操作**（不是三个）
+- 视觉居中，不要贴在页面顶部
+- 用 `UiEmptyState` 原语
+
+### 第 4 步：错态
+
+- 人能看懂的错误信息（不是 `Error: 500`）
+- 一个**重试**操作
+- 保留页面框架（不要整页替换成错误页，除非是致命错误）
+
+### 第 5 步：加载态
+
+- **优先骨架屏**，不用 spinner（骨架屏能保留布局，不跳动）
+- 骨架屏的尺寸要接近真实内容，否则加载完会跳一下
+- 超过 300ms 才显示（避免闪烁）
+
+### 第 6 步：正常态
+
+此时布局和所有状态容器都已就位，你只是在往既定框架里填内容。
+**这一步会异常顺利** —— 这就是前面顺序的价值。
+
+### 第 7 步：边界态
+
+- 超长标题（截断 + tooltip）
+- 空字段（显示 `—`，不是留白或 `null`）
+- 单条数据 / 极多数据
+- 窄屏 375px
+
+### 第 8 步：截图验收
+
+按 `qa-checklist.md` 走一遍。**必须真的看图**，不是看代码。
+
+---
+
+## 契约层与 mock
+
+### 唯一网络出口
+
+```
+src/api/types.ts    ← 所有接口的形状（类型）
+src/api/client.ts   ← 唯一的网络调用处
+src/mocks/*         ← 假数据，形状与 types.ts 一致
+```
+
+**组件永远不直接 fetch。** 组件只调用 `client.ts` 里导出的 typed 函数。
+
+为什么：
+- 接口改字段 → 只改 client 和 types，不用改 N 个组件
+- 能在没有后端时开发界面（这是整个方法的前提）
+- 错误处理、鉴权、loading 可以统一
+
+### 强制切换状态做验收
+
+在开发模式下支持 URL 参数强制状态：
+
+```ts
+// src/api/client.ts
+const forced = new URLSearchParams(location.search).get('state')
+if (forced === 'empty')   return MOCK_EMPTY
+if (forced === 'error')   throw new ApiError('模拟失败')
+if (forced === 'loading') return new Promise(() => {})  // 永不 resolve
+```
+
+这样 `?state=empty` / `?state=error` 可以直接截图，
+不用手工造数据。**这是让验收变得便宜的关键技巧** ——
+如果造一个错误态要 5 分钟，你就不会去验收错误态。
+
+### 切真后端的判据
+
+> **改动应该极小。**
+
+切换时只应该改 `client.ts` 里 mock 与真实请求的替换，外加少量字段适配。
+如果页面代码要改 >10%，说明契约是假的 —— 你当初写的类型
+只是"看起来像"接口，实际上页面在直接依赖 mock 的具体形状。
+
+**此时不要修页面，回退去修契约。**
+在页面打补丁会让下一次接口变更更贵。
+
+---
+
+## 常见错误
+
+| 错误 | 后果 | 正确做法 |
+|---|---|---|
+| 先做正常态 | 空态/错态永远补不上 | 空态错态先行 |
+| 边写结构边定颜色 | 布局问题被视觉细节掩盖 | 灰块阶段只做结构 |
+| 组件内直接 fetch | 接口一改改 20 个文件 | 唯一网络出口 |
+| 一次改多个维度 | 出问题无法归因 | 一次一个，改完截图 |
+| 让 AI 自评"看起来不错" | 它没有眼睛，是编造 | 截图 + 独立 agent 审查 |
+| 空态放在页面顶部一行灰字 | 用户不知道要干什么 | 居中 + 主操作引导 |
+| 加载态用整页 spinner | 加载完布局跳动 | 骨架屏 |
+| 契约不严（用 any） | 切真后端时全崩 | 类型完整 + mock 符合类型 |
+
+---
+
+## 完成一个页面的定义
+
+- [ ] `DESIGN.md` 状态矩阵里本页那一行**全部勾上**
+- [ ] 截图覆盖：正常/空/错/加载 + 375px + 1280px
+- [ ] `qa-checklist.md` 8 组全部通过
+- [ ] stylelint 通过
+- [ ] `audit-css.mjs` 无新增违规（颜色/字号/圆角档位数量没涨）
+- [ ] 独立 subagent 审查过（见 `prompts.md` 第 5 节）
+- [ ] `DESIGN.md` 如有新决定，已回写
+
+> **最后一条最容易漏。** 实现过程中产生的新决定（"这个页面用 24px 顶部留白"）
+> 如果不回写文档，下一轮会话就不知道，于是又发明一个新值 —— 漂移就是这么开始的。
diff --git a/.agents/skills/frontend-craft/references/prompts.md b/.agents/skills/frontend-craft/references/prompts.md
new file mode 100644
index 0000000..705a1f1
--- /dev/null
+++ b/.agents/skills/frontend-craft/references/prompts.md
@@ -0,0 +1,241 @@
+# prompts.md — 提示词模板
+
+> **原理**：prompt 是**短时记忆**，仓库是**长期记忆**。
+>
+> 不要试图在 prompt 里写完整规范 —— 那会随会话消失。prompt 的职责只有三件事：
+> 1. **指向**仓库里的约束（"先读 X"）
+> 2. **定义**这一轮的验收标准
+> 3. **禁止** AI 的默认行为
+>
+> 维持一致性是仓库文件的职责，不是 prompt 的职责。
+> prompt 写得再好，也管不住第 20 轮。
+
+---
+
+## 0. 通用约束块（所有 prompt 都带上）
+
+复制这段作为每个 prompt 的开头，按项目替换路径：
+
+```
+【约束来源 — 先读，再动手】
+1. docs/design/DESIGN.md      —— 视觉契约（参照物、组件白名单、状态矩阵）
+2. src/styles/tokens.css      —— 唯一的设计变量来源
+3. docs/design/anti-patterns.md —— 禁止事项，强制阅读
+4. docs/design/qa-checklist.md —— 验收标准
+
+【硬规则 — 违反即返工】
+- 禁止字面量颜色（#xxx / rgb() / hsl()）；颜色只能用 var(--c-*)
+- 禁止设计维度写裸 px（间距/字号/圆角/行高）；只能用 var(--space-* / --text-* / --radius-* / --leading-*)
+  例外：1px 边框线宽
+- 禁止新增 :root 块或任何 CSS 变量定义
+- 禁止 !important
+- 禁止 outline: none
+- 禁止修改已有 class 名或已有 token 值
+- 禁止新增全局 CSS 文件；样式写在组件内或既有文件里
+- 只使用 DESIGN.md 组件白名单里的原语；缺什么先告诉我，不要就地手写
+- 禁止"顺便优化"：只做我要求的事。发现其他问题请**单独列出**，不要顺手改。
+
+【流程】
+先给我一份改动计划（要改哪些文件、每处改什么），我确认后你再写代码。
+```
+
+> **最后一句很重要**：先给计划再写代码，能在 30 秒内发现方向错误，
+> 而不是等它写完 300 行才发现理解偏了。
+
+---
+
+## 1. 阶段一：搭基础设施
+
+```
+【任务】为这个项目搭建设计系统的地基。**不要写任何业务界面。**
+
+范围严格限定在以下产出，一次做完，逐个告诉我完成情况：
+
+1. src/styles/tokens.css
+   —— 复制 templates/tokens.css 的内容（我将提供），
+      只调整三处：正文基准字号、主色、中性色偏色。其余档位不要动。
+
+2. docs/design/DESIGN.md
+   —— 用 templates/DESIGN.md 作骨架。
+      第 1 节"一句话定位"先留空等我填。
+      第 2 节参照物表先留空（我会提供截图）。
+      第 6 节状态矩阵：列出我下面说的这几个页面，但状态先不勾。
+
+3. src/components/ui/ 下的 6 个原语
+   —— 用 templates/vue/ 里的模板（我将提供）。
+      每个组件必须覆盖 default / hover / focus-visible / disabled。
+
+4. src/components/layout/AppShell.vue
+   —— **只放灰色方块占位**，把布局骨架撑起来。不要填任何业务内容。
+
+5. stylelint.config.mjs + package.json 的 lint:css 脚本
+   —— 复制模板。跑一次，把现有违规列出来（先不要修）。
+
+6. scripts/audit-css.mjs 和 scripts/capture.mjs
+   —— 复制模板。各跑一次，把输出贴给我。
+
+【验收】
+- npx stylelint 能跑起来
+- node scripts/audit-css.mjs src/styles/tokens.css 输出全绿
+- node scripts/capture.mjs 能产出一张非空 PNG，并把路径给我
+
+【禁止】
+- 不要创建任何 views/ 下的页面
+- 不要写任何 API 调用
+- 不要"顺便"安装 UI 组件库
+- 不要改动 ui/src/styles/main.css 的现有内容（后面单独处理迁移）
+```
+
+---
+
+## 2. 生成原语组件
+
+```
+【任务】创建 src/components/ui/UiStat.vue —— 一个展示"标签 + 数值"的小组件。
+
+【约束】见前面的通用约束块。
+
+【要求】
+- props: label (string, 必填), value (string|number, 必填), tone ('neutral'|'accent'|'success'|'warning'|'danger', 默认 'neutral')
+- label 用 var(--text-sm) + var(--c-text-secondary)
+- value 用 var(--text-md) + var(--c-text) + font-weight 600
+- 两者垂直排列，间距 var(--space-4)
+- tone 只影响 value 的颜色，用现有的语义色 token
+- 容器不设边框、不设背景（它是嵌入式组件，不是卡片）
+- **超长文本**：value 用 overflow-wrap: anywhere 且不设死宽度
+
+【验收 — 写成可核对条目】
+□ 组件内没有任何颜色字面量（我会 grep）
+□ 组件内没有裸 px（1px 边框除外）
+□ 5 个 tone 值都有对应样式，无遗漏
+□ 新组件没有修改任何既有文件的既有 class
+
+【完成后】告诉我：(1) 文件路径 (2) 用到了哪些 token (3) 有没有发现 DESIGN.md 里缺失的定义
+```
+
+---
+
+## 3. 生成一个页面
+
+```
+【任务】实现 "会话列表" 页面（src/views/SessionListView.vue）。
+
+【前置】先读：
+- docs/design/DESIGN.md 第 5 节（组件白名单）和第 6 节（状态矩阵，本页那一行）
+- docs/design/reference/linear-inbox.png（参照图 — 取什么/不取什么见 direction.md）
+
+【顺序要求 — 必须按这个顺序做，每一步做完跟我说一声】
+第 1 步：只搭结构。用 AppShell + 灰块，不定颜色不定字号，先把区块位置和间距定下来。
+第 2 步：**先做空态和错误态**。空态要有引导文案和一个主操作按钮；错误态要有重试。
+第 3 步：再做加载态（骨架屏，不用 spinner）。
+第 4 步：最后做正常态（有数据）。
+第 5 步：补超长内容态（长标题截断 + tooltip）。
+
+【实现约束】
+- 数据从 src/api/client.ts 取，不要直接 fetch
+- 类型来自 src/api/types.ts
+- 列表项用 UiCard 或纯 div？——按参照图的密度决定，并说明你的选择理由
+- 所有间距来自 --space-*，所有文字来自 --text-*
+
+【验收】
+□ 上面的状态矩阵这一行，6 个状态全部有实现
+□ 每个可点击元素有 hover 和 focus-visible
+□ 长标题（100 字）不溢出、不撑破容器
+□ 375px 宽度下布局不崩（侧栏折叠）
+□ 页面内 0 个字面量颜色、0 个裸 px（1px 除外）
+
+【交付后】我会截图验收。先不要自评"看起来不错"，把改动计划列出来即可。
+```
+
+---
+
+## 4. 修改类 prompt（最容易出 AP-10 的场景）
+
+```
+【任务】把主按钮的背景色改成 var(--c-accent-active)。
+
+【严格范围】
+- 只改 UiButton.vue 里 primary variant 的默认态背景色，**一处**
+- 不要动 hover / active / disabled 态
+- 不要动其他 variant
+- 不要动圆角、间距、字号、阴影
+- **不要改 :root 里的 token 值**
+
+【禁止的做法】
+❌ 在文件末尾追加一段 .ui-button--primary { background: ... } 覆盖
+❌ 加 !important
+❌ 新增一个变量
+
+【正确的做法】
+找到定义 .ui-button--primary 背景色的那一行，直接改那个值。
+
+【完成后】
+1. 贴出 diff（只应有 1 行变化）
+2. 告诉我你在文件里搜到的相关规则有哪几处（确认没有遗漏的重复定义）
+
+【如果发现其他问题】单独列出来，不要顺手改。
+```
+
+> **"贴出 diff" 是这条 prompt 的关键。** 它把"是否只改了该改的"
+> 从主观判断变成了可核对的事实。
+
+---
+
+## 5. 视觉验收 prompt（给独立审查 agent）
+
+**开一个全新的 subagent**，只给它截图和清单，不要告诉它代码是谁写的：
+
+```
+【任务】审查一张界面截图，找出所有视觉问题。
+
+【输入】截图路径：shots/home-1280.png
+
+【方法】
+对照 docs/design/qa-checklist.md 的 8 组检查项，**按顺序**逐条过。
+前 3 组（对齐/灰度/控件一致性）是重点。
+
+【输出要求】
+对每个问题给出三要素：
+1. 问题位置 —— 哪个元素（用截图里能识别的描述）
+2. 具体差距 —— 数值化的，例如"工具栏三个控件高度分别约 28/36/32px"
+3. 建议改法 —— 能直接翻译成一行 CSS 改动
+
+【禁止】
+- 不要评价优点，只找问题
+- 不要写"看起来不够精致"这类无法执行的反馈
+- 不要一次列出 20 条：按严重程度排序，最多 8 条
+
+【最终】给出一个判断：这张图的**最主要**的一个问题是什么？
+```
+
+> 独立 agent 为什么更有效：它的上下文里没有"我这么写是有道理的"这笔账。
+> 它只看图，所以更接近用户的视角。
+
+---
+
+## 6. 好不好对照表
+
+| ❌ 差的 prompt | ✅ 好的 prompt | 差在哪 |
+|---|---|---|
+| "帮我做个好看的后台界面" | 见上面模板 3（含顺序、约束、验收） | 没有约束来源、没有顺序、没有验收标准 |
+| "把界面改好看一点" | "工具栏三个控件高度统一到 --control-h-md" | 形容词 vs 数值 |
+| "优化一下样式" | "只改 X 一处，贴出 diff" | 范围不封顶 = 无限改动授权 |
+| "用 Tailwind 重写" | "用现有 token 和原语，不引入新依赖" | 引入新体系 = 第七种绿 |
+| "顺便看看有没有其他问题" | "发现其他问题请单独列出，**不要**顺手改" | 前者授权了漂移 |
+| "这里改一下，那里也调一下" | 一次一个维度，改完截图确认 | 无法归因 |
+| （无）"你确认一下这样对吗" | "先复述一遍约束，再动手" | 让 AI 先暴露理解偏差 |
+
+---
+
+## 7. 三条最容易被忽略但最有效的技巧
+
+1. **让它先复述约束。**
+   "在写代码前，先复述一遍你从 anti-patterns.md 里读到的禁止事项。"
+   —— 复述出错 = 它没读或理解偏了，此时拦住成本最低。
+
+2. **让它贴 diff。**
+   把"是否越界"从主观判断变成可核对事实。一行 prompt 换来一次真正的范围审查。
+
+3. **明确禁止"顺便优化"。**
+   这是 CSS 膨胀的头号来源。用户项目里那 6 段 `/* refinement */` 追加块、
+   66 条重复声明，绝大多数来自"顺手改一下"。
diff --git a/.agents/skills/frontend-craft/references/reference-sources.md b/.agents/skills/frontend-craft/references/reference-sources.md
new file mode 100644
index 0000000..954cdf8
--- /dev/null
+++ b/.agents/skills/frontend-craft/references/reference-sources.md
@@ -0,0 +1,154 @@
+# reference-sources.md — 参照物：去哪找、怎么用、以及 AI 的边界
+
+> **本文回答**："skill 里怎么写清楚去哪里找截图？"
+>
+> 更重要的：**参照物是这套方法里价值最高的一项**（约占 80% 的效果），
+> 而它的选择**不能由 AI 代劳**。本文说清为什么，以及 AI 到底能帮什么。
+
+---
+
+## 1. 为什么参照物比方法论值钱
+
+文字描述风格 → few-shot 图像 的效力差距是数量级的：
+
+| 说法 | AI 实际接收到的信息量 |
+|---|---|
+| "要简洁、克制、有工具感" | 几乎为零。"简洁"在不同实现里可以差 200px 圆角 |
+| "看这张图，取它的列表密度和分割线用法" | 具体到可直接映射到行高、边框、间距 |
+
+**所以：一个字都别写"高级感"，放一张图。**
+一次给 3~5 张同类产品的截图，胜过 500 字风格描述。
+
+---
+
+## 2. 去哪找参照图
+
+### 2.1 直接截真实产品（**首选**）
+
+对 AI 编码工作台这类产品，最好的参照物就是做得好的同类产品本身。
+用 `capture.mjs` 直接截：
+
+```bash
+node scripts/capture.mjs https://linear.app docs/design/reference --widths 1440 --name linear-home
+```
+
+推荐来源（按本产品调性排序）：
+
+| 产品 | 值得取什么 |
+|---|---|
+| **Linear** | 列表密度、hover 反馈的克制、工具栏控件高度一致性 |
+| **Vercel Dashboard** | 空态设计、表格排版、灰度层级 |
+| **GitHub** | 侧栏树形结构、徽标用法、信息密度 |
+| **Stripe Docs** | 三栏布局、代码块样式、阅读节奏 |
+| **Supabase** | 数据密集型界面、状态色用法 |
+| **Resend** | 极简表单、空态引导 |
+| **Notion** | 折叠交互、图标栏 |
+| **Raycast** | 命令面板密度、键盘优先的焦点态 |
+
+> **优点**：这些界面经过真实用户 8 小时/天的检验，不是概念稿。
+> 它们的每个数值都是被使用打磨过的，直接可抄。
+
+### 2.2 产品截图库
+
+| 站点 | 特点 | 注意 |
+|---|---|---|
+| [Refero](https://refero.design) | 真实产品 UI 截图，可按组件/页面筛 | **最推荐**，都是实现而非概念 |
+| [Mobbin](https://mobbin.com) | 移动 + Web 产品截图库 | 部分需付费 |
+| [SaaS Interface](https://saasinterface.com) | SaaS 界面合集 | 质量参差，需筛 |
+| [Page Flows](https://pageflows.com) | **用户流程录像** | 看流程交互最好用，不是静态图 |
+| [Land-book](https://land-book.com) | 落地页灵感 | 偏营销页，工具界面慎用 |
+| [Godly](https://godly.website) | 网页设计灵感 | 多为概念/实验性，**不要用于工具类产品** |
+
+### 2.3 中文源
+
+| 站点 | 特点 |
+|---|---|
+| [站酷](https://www.zcool.com.cn) | 视觉设计为主，UI 分类下有界面稿 |
+| [UI 中国](https://www.ui.cn) | 国内 UI 设计社区 |
+| 各产品的官方设计规范 | 如 Ant Design / Arco / Semi 的官网 —— **本身就是可抄的参照物** |
+
+### 2.4 ⚠️ Dribbble 类的陷阱
+
+[Dribbble](https://dribbble.com) 上大量是**概念稿（concept）**，不是实现：
+
+- 圆角 24px、字重极细、大量留白、渐变 —— 在 1440px 大图上漂亮，
+  做成真实界面后**信息密度低到不可用**
+- 常忽略 hover/focus/disabled/空态 —— 正是真实产品最需要的部分
+- 配色在真实屏幕上往往对比度不足
+
+**结论**：Dribbble 可以用来找**局部灵感**（一个卡片的样子、
+一个图表的画法），**不要**用它定整体布局和信息密度。
+工具类产品尤其危险。
+
+---
+
+## 3. 怎么用参照物：`direction.md`
+
+在 `docs/design/reference/` 下建一份 `direction.md`，每个参照物两句话：
+
+```markdown
+## linear-inbox.png （取自 linear.app/inbox）
+
+**取**：
+- 列表行高紧凑（约 44px），行间只有 1px 分隔线，不用卡片包裹
+- hover 时只有背景变浅（--c-surface-hover），没有位移和缩放
+- 工具栏所有控件同高，图标 16px，图标与文字间距 8px
+
+**不取**：
+- 深色主题（我们是浅色）
+- 键盘快捷键徽标（我们暂无快捷键体系）
+```
+
+**"不取"这一栏比"取"更重要。** 因为参照图总带着一堆你不想要的特征，
+不显式排除，AI 会把它们一起学过来 —— 包括深色主题这种大改。
+
+---
+
+## 4. AI 在"选参照物"上的边界（重要）
+
+### AI **不能**替你做的
+
+**选定哪张图作为美的标准。**
+
+原因不是能力问题，是**信息问题**：好看与否是**你的品味判断**，
+不在代码里、不在任何可检索的资料里。AI 说"这张更高级"，
+只是在复述训练数据里的流行趋势，不代表它符合你的产品。
+
+如果 AI 替你选了，你会得到一个"符合平均审美"的界面 ——
+而"平均"正是"平庸"的另一种写法。
+
+### AI **能**替你做的
+
+| 能做 | 具体做法 |
+|---|---|
+| 找候选 | 按"密集工具界面 / 浅色 / 中文字体友好 / 有侧栏和列表"筛选，给 5~8 个候选 |
+| 分类 | "这 3 个是高密度方案，那 2 个是留白方案，它们的取舍是 X" |
+| 指出调性冲突 | "这张是营销落地页，圆角和留白都偏大，用它做工具界面会显得松散" |
+| 提取可移植特征 | "这张图的行高是 44px、图标 16px、无卡片包裹 —— 这三条可以直接用" |
+| 对比差距 | 截图和参照图并排，列出 3 条具体差距 |
+| 截图 | `capture.mjs` 对候选 URL 批量截图，铺成一张对比图给你看 |
+
+**所以正确的分工是**：AI 产出**候选集 + 特征分析 + 截图**，
+你在候选集里**做最终选择**。这一步花 5 分钟，但它决定后面所有工作的上限。
+
+---
+
+## 5. 参照物的常见错误
+
+| 错误 | 后果 | 正确做法 |
+|---|---|---|
+| 选营销落地页给工具界面做参照 | 间距过大、信息密度过低，界面显得空 | 参照物必须是**同类型**界面 |
+| 选深色主题参照物 | AI 会连深色一起学 | 在"不取"里显式排除 |
+| 只给 1 张 | AI 会连它的偶然特征一起复制 | 给 3~5 张，取交集 |
+| 只给形容词描述 | 无信息量 | 必须给图 |
+| 参照图和产品调性冲突 | 越努力越偏 | 先写 DESIGN.md 第 1 节的"一句话定位"，再据此筛图 |
+| 参照图不入库 | 下轮会话丢失 | 存 `docs/design/reference/`，路径写进 DESIGN.md |
+
+---
+
+## 6. 一句话总结
+
+> **参照物决定上限，token 和 lint 决定下限。**
+> AI 负责守住下限（这部分它可以自动化），
+> 你负责用参照物定上限（这部分只有你能做）。
+> 两边都做了，才有"统一且优质"；只做前者，得到的是"统一且平庸"。
diff --git a/.agents/skills/frontend-craft/references/screenshot-and-qa.md b/.agents/skills/frontend-craft/references/screenshot-and-qa.md
new file mode 100644
index 0000000..fdba696
--- /dev/null
+++ b/.agents/skills/frontend-craft/references/screenshot-and-qa.md
@@ -0,0 +1,207 @@
+# screenshot-and-qa.md — 截图与验收回路
+
+> **本文回答**："AI 能否为我准备截图？skill 里怎么写清楚去哪里找截图、怎么截图？
+> 有没有相应的 MCP 工具？"
+>
+> 答：**能，而且在当前环境下已经完全实测跑通，零额外依赖。**
+
+---
+
+## 1. 为什么截图是这套方法的核心
+
+前面所有约束（token、lint、清单）都在防止"变烂"。
+只有截图能让界面**变好** —— 因为它是唯一能让 AI 察觉自己在做什么的手段。
+
+**没有截图的循环是这样的**：生成代码 → 看代码 → 觉得合理 → 交付。
+问题：AI 看代码时看到的是 `padding: var(--space-12)`，而用户看到的是
+"这个按钮和旁边那个没对齐"。**代码里没有"对齐"这个信息。**
+
+**有截图的循环**：生成代码 → 截图 → **看图** → 挑出具体问题 → 修 → 再截图。
+只有这条回路能闭合"做 → 看 → 改"。
+
+> 用户的项目里 Hero 区那行 `独立会话仓库上下文模型代号`，
+> 写代码时看起来完全正常（一行文字嘛），截图看才会发现它是信息架构事故。
+> 这类问题**只能通过看图发现**。
+
+---
+
+## 2. 实测可用的截图方案（无依赖）
+
+当前环境已实测：
+
+- Chrome：`C:\Program Files\Google\Chrome\Application\chrome.exe`
+- Edge（备用）：`C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe`
+- 实测命令：
+
+```powershell
+& "C:\Program Files\Google\Chrome\Application\chrome.exe" `
+  --headless=new --disable-gpu --hide-scrollbars --no-sandbox `
+  --window-size=800,300 `
+  --screenshot="A:\path\out.png" `
+  "file:///A:/path/page.html"
+```
+
+**实测结果：675ms 产出 13557 字节 PNG（800x300），图像内容可读。**
+不需要 playwright、不需要 puppeteer、不需要任何 MCP。
+
+### 关键参数
+
+| 参数 | 作用 | 备注 |
+|---|---|---|
+| `--headless=new` | 新版无头模式 | 旧的 `--headless` 渲染差异较大，别用 |
+| `--screenshot=<path>` | 输出路径 | 必须是绝对路径或从 cwd 解析 |
+| `--window-size=W,H` | 视口尺寸 | **无头模式只截视口，不截整页** |
+| `--hide-scrollbars` | 隐藏滚动条 | 否则右侧多一条，干扰判断 |
+| `--virtual-time-budget=5000` | 等待 JS 渲染 | **SPA 必加**，否则截到白屏 |
+| `--force-device-scale-factor=2` | 2x 高清 | 需要看清 1px 细节时用 |
+| `--default-background-color=FFFFFFFF` | 强制白底 | 默认透明底，PNG 里会变黑 |
+
+### 已知限制
+
+- **只截视口**：长页面需要 `--window-size=1280,4000` 这种超高视口，
+  或者分页截。
+- **需要交互才出现的状态**（hover、展开的菜单、对话框）截不到 ——
+  除非做成静态 HTML fixture。见下面第 4 节。
+- **需要登录/真后端的页面**截不到 —— 除非用 mock。
+
+---
+
+## 3. `capture.mjs` 用法
+
+（脚本由阶段一生成，放在 `scripts/capture.mjs`）
+
+**语法：`node capture.mjs <url> <outDir> [选项]`** —— 输出目录是**位置参数**，不是 `--out`。
+
+```bash
+# 基础：默认三个宽度 375 / 768 / 1440
+node scripts/capture.mjs http://localhost:5173 shots
+
+# 指定宽度
+node scripts/capture.mjs http://localhost:5173 shots --widths 375,1280
+
+# 本地静态文件（不需要起服务）
+node scripts/capture.mjs ./page.html shots --widths 1440
+
+# 自定义文件名前缀 → shots/home-375.png, shots/home-1280.png
+node scripts/capture.mjs http://localhost:5173 shots --widths 375,1280 --name home
+
+# 高清，用于看 1px 级细节
+node scripts/capture.mjs http://localhost:5173 shots --scale 2
+
+# 等待 SPA 渲染（虚拟时间预算，毫秒）
+node scripts/capture.mjs http://localhost:5173 shots --budget 5000
+
+# 指定浏览器
+node scripts/capture.mjs http://localhost:5173 shots --chrome "D:\Chrome\chrome.exe"
+```
+
+输出文件名为 `<name>-<width>.png`，默认前缀 `shot`。
+退出码 `0` = 全部成功；`1` = 参数错误 / 未找到浏览器 / 任一张失败。
+
+### 脚本必须遵守的两条工程约束
+
+1. **用 `spawnSync(..., { stdio: 'ignore' })`，不要捕获子进程输出。**
+   在受限沙箱（如本环境）下，管道会抛 `EPERM`。改为
+   **检查输出文件是否存在且非空**来判断成功，而不是读 stdout。
+2. **自动探测浏览器**：按 `CHROME_PATH` 环境变量 → Chrome 默认路径 →
+   Edge 默认路径 的顺序找。找不到就报清晰的错误，不要静默失败。
+
+---
+
+## 4. 截不到的时候怎么办（降级策略）
+
+按优先级：
+
+1. **起本地 dev server**（Vite/Next 都有一条命令），用 `http://localhost:5173`。
+   **这是最好的方式**，因为渲染的是真实组件。
+2. **静态 HTML fixture**：把组件的关键状态手写成一个独立 HTML 文件，
+   直接 `file://` 截图。适合截 hover / 展开 / 错误态 ——
+   因为这些在真实页面里难以复现。**这是最被低估的技巧**：
+   做一个 `fixtures/states.html` 把所有状态平铺出来，一次截完。
+3. **mock 数据 + 强制状态**：在开发模式下加 URL 参数
+   （`?state=empty` / `?state=error` / `?state=loading`），
+   让页面能强制进入各个状态。然后批量截图。
+4. **人工截图**：确实需要登录/复杂交互时，让用户截，然后 AI 用
+   `read_image` 读。**这是完全合法的路径** —— 不要因为不能自动截就跳过验收。
+
+> ⚠️ 无论用哪种方式，**AI 必须真的读那张图再评论**。
+> 声称"我看到界面很整洁"但没有调用读图工具，是编造。
+> 这一点要写进 skill 的行为约束里。
+
+---
+
+## 5. 验收回路的四步
+
+```
+截图 → 看图挑刺 → 改 → 再截图
+ ↑___________________________|
+```
+
+### 第 1 步：截图
+用 `capture.mjs`，至少覆盖：正常态、空态、错误态、375px、1280px。
+
+### 第 2 步：挑刺（关键步骤，不能跳）
+
+对照 `qa-checklist.md`，**按顺序**过 8 组。
+必须输出**具体**的问题，不是印象：
+
+| ❌ 无效反馈 | ✅ 有效反馈 |
+|---|---|
+| "看起来不够精致" | "工具栏三个控件高度分别是 28/36/32px，不齐" |
+| "颜色有点乱" | "同行出现 #1f7667 和亮青 #2ec4b6 两个绿" |
+| "间距不太对" | "卡片间距 16px，但卡片内 padding 24px，比例反了" |
+| "有点空" | "空态只有一行灰字，没有引导操作" |
+
+**判断标准**：这条反馈能不能直接翻译成一行 CSS 改动？
+不能就是无效反馈，重写。
+
+### 第 3 步：改
+**一次只改一个维度。** 同时改对齐+颜色+间距，出问题时无法归因。
+
+### 第 4 步：再截图
+**必须重新截图。** 改完不截图 = 没改完。
+（这一条要写死，因为跳过它的诱惑最大。）
+
+---
+
+## 6. 独立审查者：一个被低估的技巧
+
+让**生成界面的那个 agent 去审自己**，效果有限 —— 它会倾向于认为
+自己写的是对的（同一份上下文里的自我一致性偏差）。
+
+更有效的做法：**开一个全新的 subagent，只给它截图和 qa-checklist，
+不告诉它是谁写的**，让它独立挑刺。
+
+```
+任务：这是一张界面截图（附路径）。请对照 docs/design/qa-checklist.md
+逐条检查，列出所有不合格项。不要评价优点，只找问题。
+对每一条给出：问题位置（哪个元素）、具体数值差距、建议改法。
+```
+
+**为什么有效**：它的上下文里没有"我刚才这么写是有道理的"这笔账。
+它只看图。
+
+成本很低（一次 subagent 调用），但抓到的对齐/一致性问题的数量
+通常显著高于自审。
+
+---
+
+## 7. 有没有现成的 MCP 可以用
+
+当前 DSH 会话**没有**注册任何浏览器/截图类 MCP。已调研的同类方案：
+
+| 方案 | 能做什么 | 代价 |
+|---|---|---|
+| [Playwright MCP](https://apify.com/nexgendata/playwright-mcp-server#1) | 真实浏览器交互、可点击后截图、可读 DOM/无障碍树 | 需要装 playwright + 配 MCP |
+| [chrome-devtools-mcp](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/136da6a3/docs/cli.md?plain=1#L75-L79#1) | 直连 Chrome DevTools 协议，性能追踪 + 截图 | 需要 Node + Chrome |
+| [Playwright 视觉测试实践](https://argos-ci.com/blog/playwright-mcp-visual-testing) | 截图快照基线对比（回归检测） | 适合已有稳定 UI 的项目 |
+
+**建议**：
+- **现在就用零依赖的 `capture.mjs`** —— 它已经实测跑通，覆盖 90% 需求。
+- 需要**交互后截图**（点开菜单再截）或**读 DOM 结构**时，再上
+  Playwright MCP。它比 `capture.mjs` 强的地方就是"能操作"。
+- 视觉回归（防止改 A 页面弄坏 B 页面）是另一个问题，
+  属于 CI 范畴，等界面稳定了再上。
+
+> 不要因为"有更好的工具"而推迟截图。`capture.mjs` 今天就能用，
+> 而"等配好 Playwright 再开始验收"通常意味着永远不开始。
diff --git a/.agents/skills/frontend-craft/references/tokens-baseline.md b/.agents/skills/frontend-craft/references/tokens-baseline.md
new file mode 100644
index 0000000..ae0504b
--- /dev/null
+++ b/.agents/skills/frontend-craft/references/tokens-baseline.md
@@ -0,0 +1,222 @@
+# tokens-baseline.md — Token 数值基准与调参指南
+
+> 数值的**唯一真相源**是项目里的 `src/styles/tokens.css`（由 `templates/tokens.css` 复制而来）。
+> 本文解释**这些数字为什么是这些数字**，以及不同项目类型该怎么调。
+>
+> **核心原则：结构不要动，只调三件事**（正文基准字号、主色、中性色偏色）。
+> 间距档位、圆角档位、语义色数量是**防膨胀结构**，不是审美选择。
+
+---
+
+## 1. 完整数值表
+
+### 间距 —— 2px 网格，13 档（像素命名制）
+
+| 档位 | 值 | 用在哪 |
+|---|---|---|
+| `--space-2` | 2px | 图标与紧邻文字、徽标内边距（发丝级） |
+| `--space-4` | 4px | 同一行内相邻小元素 |
+| `--space-6` | 6px | 紧凑行的内边距 |
+| `--space-8` | 8px | 列表项内边距、按钮组间隙 |
+| `--space-10` | 10px | **最常用档**：紧凑列表行内边距、卡片内边距 |
+| `--space-12` | 12px | 卡片内边距、区块内元素间距 |
+| `--space-14` | 14px | 稍松的行距 |
+| `--space-16` | 16px | 区块之间的标准间距 |
+| `--space-18` | 18px | 介于 16 与 20 之间的过渡 |
+| `--space-20` | 20px | 稍大的分组间距 |
+| `--space-24` | 24px | 区块之间的大间距 |
+| `--space-32` | 32px | 页面级留白 |
+| `--space-48` | 48px | 空状态、主标题周围 |
+
+**为什么用「像素命名制」**：token 名里的数字就是像素值（`--space-10` = 10px）。
+索引命名（`--space-1..N`）有两个代价：迁移时要把每个 px 查表换算成索引；
+将来在中间插一档，后面所有档位的名字集体位移、所有引用都得跟着改。
+像素命名让迁移可以机械进行（按值一次替换即可），插档也不会波及已有引用 ——
+**代价是"档位看起来很多"，所以纪律必须写进约束里**（见本节末尾）。
+
+**为什么密集工具型界面用 2px 网格 + 13 档，而不是 4/8/12/16/24 的稀疏七档**：
+刻度必须跟着**真实用量分布**走，而不是跟着"常见的 4px 网格"走。密集工具型界面
+（控件小、行距紧、信息密度高）的真实间距大量落在 2px 网格上、却不在 4px 网格上 ——
+实测频次形如 10px×45、8px×38、12px×33、14px×23、9px×21、2px×20、5px×20、7px×18。
+若强行套 4/8/12/16/24 七档，占 45 次的 10px 会被顶到 8px、占 23 次的 14px 会被
+顶到 16px，整页布局随之位移 —— 那是用一个尺子去改另一个尺子的活，用户看到的是
+"界面怎么变了"，而不是"界面变整齐了"。
+
+> **不是密集界面就别照搬这 13 档。** 阅读型 / 营销型界面间距大而疏，值本来就集中
+> 在 4px 网格上，用 4/8/12/16/24/32/48 这类稀疏刻度更不容易随手挑值。
+> 判据是"先量出这个 App 的频次表"，不是"哪种刻度更流行"。
+
+**档位多 ≠ 可以随手挑**：13 档是"密集界面真实用量的完整集合"，不是"可选范围"。
+落地时仍然要求：同一份界面里实际出现的不同间距值越少越好（个位数为佳）；
+需要一个新的间距值时，先回答"现有档位为什么不行"，答不上来就用现有档位。
+
+### 字号 —— 7 档，相邻差 ≥2px
+
+| 档位 | 值 | 用途 |
+|---|---|---|
+| `--text-xs` | 11px | 徽标文字、极弱化标注 |
+| `--text-sm` | 12px | 次级说明、时间戳、元信息 |
+| `--text-base` | 13px | **正文基准**（密集界面） |
+| `--text-md` | 15px | 强调正文、小标题 |
+| `--text-lg` | 18px | 区块标题 |
+| `--text-xl` | 24px | 页面标题 |
+| `--text-2xl` | 32px | 主标题 / Hero |
+
+**为什么相邻差 ≥2px**：人眼分辨 12px 和 13px 很吃力（尤其在低密度屏幕上）。
+如果档位之间存在"看不出的差别"，它就不构成层级，只增加噪音。
+> 用户项目里出现过 `10.5px` 和 `10px` 并存 —— 这是最典型的无效档位。
+
+**为什么正文基准是 13px**：密集工具界面（每天盯 8 小时）优先信息密度。
+阅读型/营销型需要 15~16px。
+
+### 圆角 —— 3 档 + 胶囊
+
+| 档位 | 值 | 用于 |
+|---|---|---|
+| `--radius-sm` | 6px | 控件（按钮、输入框、下拉、徽标） |
+| `--radius-md` | 10px | 容器（卡片、面板、弹层） |
+| `--radius-lg` | 16px | 大容器（对话框、全屏面板） |
+| `--radius-full` | 999px | 胶囊（开关、头像、标签） |
+
+**规则**：圆角是**元素尺度的函数**，不是自由参数。
+小元件配大圆角会笨拙，大容器配小圆角会廉价。
+
+### 控件高度 —— 3 档
+
+| 档位 | 值 | 用于 |
+|---|---|---|
+| `--control-h-sm` | 28px | 表格内联操作、紧凑工具栏 |
+| `--control-h-md` | 36px | **默认**：表单、工具栏、主按钮 |
+| `--control-h-lg` | 44px | 主行动按钮、移动端触点 |
+
+**这一组是被最低估的**。同一行里的下拉/输入框/按钮如果高度不同，
+无论单个控件多精致，整行读起来都是"没对齐"。
+用户项目里那行 composer 底栏就是这个病。
+
+### 语义色 —— 只有 3 个，有彩色总数上限 4
+
+| 语义 | 主值 | 浅底 | 对比度要求 |
+|---|---|---|---|
+| `--c-accent`（主色） | 项目自定 | `--c-accent-subtle` | 白字对比 ≥4.5:1 |
+| `--c-success` | `#2f7d5b` | `#eef7f2` | 同上 |
+| `--c-warning` | `#9a6b1f` | `#fdf6e8` | 同上 |
+| `--c-danger` | `#a8453f` | `#fbefee` | 同上 |
+
+**不设 info 蓝**：用 `--c-accent` 承担"信息/提示"。
+每多一个有彩色，界面的统一感就下降一档 —— 4 个是上限。
+
+**浅底规则**：`--c-*-subtle` 只能配对应的深色文字，
+**不要**在浅底上放白字（对比度不足）。
+
+### 阴影 —— 3 档，单一基色
+
+```css
+--shadow-xs: 0 1px 2px  rgba(20, 28, 25, 0.05);
+--shadow-sm: 0 2px 8px  rgba(20, 28, 25, 0.06);
+--shadow-md: 0 8px 24px rgba(20, 28, 25, 0.09);
+```
+
+**唯一基色**（`20,28,25`，一个带绿调的深色）是硬要求。
+混合多个基色（黑、slate、自定义深绿）的阴影并排时会呈现不同偏色，
+整体看起来"脏"，而这个病极难自查。
+
+### 中性色阶 —— 唯一一套灰
+
+| Token | 值 | 用途 |
+|---|---|---|
+| `--c-bg` | `#ffffff` | 页面底 |
+| `--c-bg-subtle` | `#f7f8f8` | 侧栏、代码块底 |
+| `--c-surface` | `#ffffff` | 卡片表面 |
+| `--c-surface-hover` | `#f2f4f3` | 表面 hover |
+| `--c-border` | `#e4e7e6` | 默认边框、分隔线 |
+| `--c-border-strong` | `#d3d8d6` | 强调边框 |
+| `--c-text` | `#1c2321` | 正文、标题 |
+| `--c-text-secondary` | `#5a6561` | 次级说明 |
+| `--c-text-muted` | `#8a938f` | 弱化标注（**不可用于正文**） |
+| `--c-text-inverse` | `#ffffff` | 深底上的文字 |
+
+**对比度速查（on `#ffffff`）**：
+- `--c-text` ≈ 14.9:1 ✓
+- `--c-text-secondary` ≈ 6.4:1 ✓
+- `--c-text-muted` ≈ 3.2:1 ✗ **低于 AA 的 4.5:1** —— 只能用于
+  非关键的弱化标注（如禁用文字、图表轴标签），**不要写正文或 placeholder 的关键说明**
+
+**只允许一套灰**：不要同时用 Tailwind 的 slate 系和自定义灰。
+两套灰的色温不同，并排出现会让整个界面"发脏"，
+但单独看每个值都很正常 —— 所以这是最难自查的问题之一。
+
+---
+
+## 2. 三种项目类型的调整
+
+只需改 3 个地方，其余保持不变。
+
+### A. 密集工具型（IDE、后台、工作台、编辑器）
+
+```css
+--text-base: 13px;   /* 保持 */
+--text-md:   15px;   /* 可降到 14px，但不要再低 */
+```
+
+- 行高用 `--leading-snug` (1.45) 为主，长文段落用 `--leading-normal`
+- 控件默认 `--control-h-sm` (28px) 或 `-md` (36px)
+- 内容最大宽度可放宽到 `1280px` 以上，甚至全宽
+- **中文界面把 `--text-base` 提到 13~14px**：中文字形比拉丁字母饱满，
+  12px 的中文在小屏上偏吃力
+
+### B. 标准 SaaS / 通用管理后台
+
+```css
+--text-base: 14px;
+--text-md:   16px;
+--layout-content-max: 1200px;
+```
+
+- 控件默认 `--control-h-md` (36px)
+- 行高 `--leading-normal` 为主
+
+### C. 阅读 / 营销 / 文档型
+
+```css
+--text-base: 16px;
+--text-md:   18px;
+--text-lg:   20px;
+--text-xl:   28px;
+--text-2xl:  40px;
+--leading-normal: 1.7;
+--layout-content-max: 720px;   /* 阅读舒适区 */
+```
+
+- 控件默认 `--control-h-lg` (44px)
+- 段落最大宽度控制在 `65~75` 个字符
+
+---
+
+## 3. 明确**不要**调的
+
+| 不要动 | 为什么 |
+|---|---|
+| 间距档位集合（13） | 防膨胀结构。它是"该界面真实用量的完整集合"，不是可选范围：加档 = 开始随手挑值 |
+| 圆角档位（3） | 多一档就多一种"这里特殊"的借口 |
+| 语义色数量（3） | 每多一个，统一感下降一档 |
+| 阴影基色（1） | 多基色 = 阴影发脏，且极难自查 |
+| `--c-text-muted` 的用途边界 | 它低于 AA，误用会让界面"看不清" |
+
+---
+
+## 4. 从现有项目迁移的做法
+
+如果项目已经有界面（很可能已经漂移了）：
+
+1. **别推翻重做。** 重做等于把同一类错误再犯一次，还丢掉了已完成的交互。
+2. **先做一次"取色"**：把现有 CSS 里所有颜色/字号/圆角捞出来，
+   按频次排序，找出**事实上在用的那套值**。
+3. **把主色定为现状中最后生效的那个品牌色**（不是新造一个）——
+   这样迁移在视觉上接近中性，不会引起"又换风格了"的反弹。
+4. **按频次归一**：最高频的 12px 归到 `--text-sm`，13px 归到 `--text-base`，
+   15/16px 都归到 `--text-md`。**这一步会立刻减少大量视觉噪音。**
+5. 用 `scripts/audit-css.mjs` 记录迁移前后的漂移分数，作为改进证据。
+
+> 第 4 步的收益最直接：19 种字号 → 7 种，21 种圆角 → 3 种，
+> 界面会**立刻**看起来整齐 —— 因为噪音消失了，而不是因为"变漂亮了"。
+> 这是投入产出比最高的一次改动。
diff --git a/.agents/skills/frontend-craft/scripts/audit-css.mjs b/.agents/skills/frontend-craft/scripts/audit-css.mjs
new file mode 100644
index 0000000..5d7a3dc
--- /dev/null
+++ b/.agents/skills/frontend-craft/scripts/audit-css.mjs
@@ -0,0 +1,1403 @@
+#!/usr/bin/env node
+/**
+ * audit-css.mjs —— CSS「设计系统漂移」审计记分卡（零依赖 · Node 18+ · 跨平台）
+ *
+ * 用途
+ *   扫一个前端项目（或单个 CSS 文件），统计颜色 / 圆角 / 字号 / 变量 / 选择器 /
+ *   !important 的散乱程度，输出一张 ✅ / ❌ 记分卡，判断设计系统是否已经漂移。
+ *
+ * 用法
+ *   node audit-css.mjs <css文件或目录> [--json] [--quiet] [--help]
+ *
+ * 选项
+ *   --json     输出机器可读 JSON（含全部原始数据 + pass/fail），无装饰字符
+ *   --quiet    只输出最后一行总结
+ *   -h, --help 显示本帮助
+ *
+ * 输入
+ *   - 目录：递归收集所有 .css，以及所有 .vue（只取 <style ...>…</style> 块参与分析）
+ *   - 文件：直接分析（.vue 同样只取 style 块）
+ *   - 跳过目录：node_modules / dist / build / .git / coverage / vendor
+ *
+ * 指标
+ *   1. :root 块数量；CSS 变量重复声明（最后一个生效，其余标为死代码）
+ *   2. 十六进制颜色 distinct + 频次 Top15 + 近重复聚类（RGB 欧氏距离 < 12）
+ *   3. rgb()/rgba() distinct + 基色（忽略 alpha）distinct + 基色近重复聚类
+ *   4. border-radius 取值列表 + distinct
+ *   5. font-size 取值列表 + distinct + 频次分布（clamp() 整体视作一个值）
+ *   6. 同一选择器分散在多块（> 1 次）数量 + Top15（提示项，不参与判定）
+ *   7. token 覆盖率 = var(--x) 次数 /（var 次数 + 硬编码颜色数 + 硬编码间距/字号/圆角 px 数）
+ *   8. !important 数量
+ *   9. 规则块总数 / distinct 选择器数
+ *
+ * 评分（任一 FAIL → 进程退出码 1）
+ *   彩色 distinct ≤ 5 · border-radius distinct ≤ 4 · font-size distinct ≤ 7
+ *   近白背景 distinct ≤ 3 · :root 块 = 1 · token 覆盖率 ≥ 90%
+ *   rgb/rgba 基色 distinct ≤ 3 · 冗余声明（同属性重复声明）= 0 · !important = 0
+ *
+ * 提示项（不参与判定，不影响退出码）
+ *   同一选择器分散在多块 —— 归零必须合并块，而合并会把声明搬到文件更靠后处，
+ *   改变它与其它同特异性选择器的先后关系，有渲染风险，因此只提示不判定
+ *
+ * 退出码
+ *   0 全部通过 · 1 有未通过项 / 参数或输入错误
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+
+// ───────────────────────────── 常量与阈值 ─────────────────────────────
+
+const SKIP_DIRS = new Set(['node_modules', 'dist', 'build', '.git', 'coverage', 'vendor']);
+const NEAR_DUP_DISTANCE = 12; // RGB 欧氏距离阈值：小于它视为「近重复颜色」
+const NEAR_WHITE_MIN = 245; // 三通道全部 > 245 视为「近白」
+const NEUTRAL_SAT = 0.12; // HSL 饱和度 < 12% 视为中性色
+const NEUTRAL_CHROMA = 6; // 彩度（max-min）≤ 6 视为「彩度接近 0」→ 中性色
+const VALUE_PREVIEW = 12; // 记分卡值列表最多展示几个
+const DETAIL_PREVIEW = 24; // 详情行最多展示几个
+const TOP_N = 15; // Top 列表长度
+const MAX_LISTED_PX = 24; // JSON 里 px 明细最多列几个
+
+// 评分阈值（改这里即可调整严格度）
+// 注意 duplicateSelectors 与 redundantDeclarations 是两件事：
+//   redundantDeclarations —— 同一 (上下文, 选择器) 下同一个属性被声明了不止一次。
+//     后一条必然覆盖前一条，删掉前一条不改变任何渲染。这是真正的漂移症状，硬门 = 0。
+//   duplicateSelectors（提示，不参与判定）—— 同一选择器分散在多个规则块里，但各块声明的属性互不重叠。
+//     它不是冗余：要归零就得把多个块合并，而合并会把声明搬到文件更靠后的位置，
+//     从而改变它与其它同特异性选择器之间的先后关系 —— 那是有渲染风险的，不能当作硬门。
+const LIMITS = {
+  coloredDistinct: 5,
+  radiusDistinct: 4,
+  fontSizeDistinct: 7,
+  nearWhiteDistinct: 3,
+  rootBlocks: 1,
+  tokenCoverage: 90,
+  rgbBaseDistinct: 3,
+  redundantDeclarations: 0,
+  duplicateSelectors: 0,
+  importantCount: 0,
+};
+
+// ───────────────────────────── 基础文本工具 ─────────────────────────────
+
+/** 跳过一段字符串字面量，返回结束引号之后的偏移 */
+function skipString(src, i) {
+  const n = src.length;
+  const quote = src[i];
+  i++;
+  while (i < n) {
+    const c = src[i];
+    if (c === '\\') {
+      i += 2;
+      continue;
+    }
+    if (c === quote) return i + 1;
+    i++;
+  }
+  return i;
+}
+
+/** 跳过一对配对的括号，返回右括号之后的偏移 */
+function skipBalanced(src, i, open, close) {
+  const n = src.length;
+  let depth = 0;
+  while (i < n) {
+    const c = src[i];
+    if (c === '"' || c === "'") {
+      i = skipString(src, i);
+      continue;
+    }
+    if (c === open) depth++;
+    else if (c === close) {
+      depth--;
+      if (depth === 0) return i + 1;
+    }
+    i++;
+  }
+  return i;
+}
+
+/**
+ * 剥离 /* … *\/ 注释，但保持字符串长度不变（注释字符换成空格、换行保留），
+ * 这样后续所有偏移量都能一对一映射回原文件，行号才不会错位。
+ * 注意：只剥离注释、不动声明，所以 :root 里的变量声明不会丢。
+ */
+function stripComments(src) {
+  const out = src.split('');
+  const n = src.length;
+  let i = 0;
+  while (i < n) {
+    const c = src[i];
+    if (c === '"' || c === "'") {
+      i = skipString(src, i);
+      continue;
+    }
+    if (c === '/' && src[i + 1] === '*') {
+      const end = src.indexOf('*/', i + 2);
+      const stop = end === -1 ? n : end + 2;
+      for (let k = i; k < stop; k++) {
+        if (out[k] !== '\n' && out[k] !== '\r') out[k] = ' ';
+      }
+      i = stop;
+      continue;
+    }
+    i++;
+  }
+  return out.join('');
+}
+
+/**
+ * .vue：把 <style> 之外的字符全部涂成空格（保留换行），
+ * 于是 .vue 也能用同一套解析器，且行号与 .vue 文件一致。
+ */
+function maskVue(raw) {
+  const out = raw.split('');
+  const keep = new Array(raw.length).fill(false);
+  const notes = [];
+  const re = /<style\b([^>]*)>([\s\S]*?)<\/style\s*>/gi;
+  let m;
+  while ((m = re.exec(raw))) {
+    const attrs = m[1] || '';
+    const lower = m[0].toLowerCase();
+    const openEnd = lower.indexOf('>');
+    const closeStart = lower.lastIndexOf('</style');
+    if (openEnd < 0 || closeStart < 0) continue;
+    const contentStart = m.index + openEnd + 1;
+    const contentEnd = m.index + closeStart;
+    for (let k = contentStart; k < contentEnd; k++) keep[k] = true;
+    const lang = (attrs.match(/\blang\s*=\s*["']?([\w-]+)/i) || [])[1];
+    if (lang && /^(scss|sass|less|styl|stylus)$/i.test(lang)) notes.push(lang.toLowerCase());
+  }
+  for (let i = 0; i < raw.length; i++) {
+    if (keep[i]) continue;
+    const c = raw[i];
+    out[i] = c === '\n' || c === '\r' ? c : ' ';
+  }
+  return { src: out.join(''), notes };
+}
+
+/** 把块内嵌套的 { … } 子规则涂成空格（保留长度与换行），只留顶层声明 */
+function maskNestedBlocks(body) {
+  const out = body.split('');
+  const n = body.length;
+  let i = 0;
+  while (i < n) {
+    const c = body[i];
+    if (c === '"' || c === "'") {
+      i = skipString(body, i);
+      continue;
+    }
+    if (c === '(') {
+      i = skipBalanced(body, i, '(', ')');
+      continue;
+    }
+    if (c === '{') {
+      const end = skipBalanced(body, i, '{', '}');
+      for (let k = i; k < end; k++) {
+        if (out[k] !== '\n' && out[k] !== '\r') out[k] = ' ';
+      }
+      i = end;
+      continue;
+    }
+    i++;
+  }
+  return out.join('');
+}
+
+/** 把 var( … ) 整体涂成空格（保留长度）：token 覆盖率里不把回退值当硬编码 */
+function maskVarCalls(value) {
+  const out = value.split('');
+  const re = /\bvar\s*\(/g;
+  let m;
+  while ((m = re.exec(value))) {
+    const open = m.index + m[0].length - 1;
+    const end = skipBalanced(value, open, '(', ')');
+    for (let k = m.index; k < end; k++) out[k] = ' ';
+    re.lastIndex = end;
+  }
+  return out.join('');
+}
+
+// ───────────────────────────── CSS 解析 ─────────────────────────────
+
+// 会「包住其它规则」的条件型 at-rule：递归进去继续找规则
+const CONDITIONAL_AT = /^@(media|supports|layer|container|scope|starting-style|document|-moz-document)\b/i;
+// 带声明体、但不是选择器的 at-rule（声明照收，但不计入选择器统计）
+const DECL_AT = /^@(font-face|page|property|counter-style|viewport|font-feature-values)\b/i;
+
+/**
+ * 极简但健壮的 CSS 规则扫描器。
+ * 返回 [{ selector, bodyStart, bodyEnd, atRule }]，bodyStart/bodyEnd 为声明体在源码中的偏移。
+ * 支持：压缩写法、多空格、注释（已剥离）、@media 嵌套、@keyframes 内层步骤、CSS 嵌套。
+ */
+function parseRules(src) {
+  const rules = [];
+  const n = src.length;
+
+  function readBody(openIdx) {
+    const after = skipBalanced(src, openIdx, '{', '}'); // '}' 之后
+    const closed = src[after - 1] === '}';
+    return { bodyStart: openIdx + 1, bodyEnd: closed ? after - 1 : after, end: after };
+  }
+
+  function walk(start, expectBrace, mode, context = '') {
+    let buf = '';
+    let i = start;
+    while (i < n) {
+      const c = src[i];
+      if (c === '"' || c === "'") {
+        const j = skipString(src, i);
+        buf += src.slice(i, j);
+        i = j;
+        continue;
+      }
+      if (c === '(') {
+        const j = skipBalanced(src, i, '(', ')');
+        buf += src.slice(i, j);
+        i = j;
+        continue;
+      }
+      if (c === ';') {
+        i++;
+        buf = '';
+        continue;
+      }
+      if (c === '}') {
+        i++;
+        if (expectBrace) return i;
+        continue;
+      }
+      if (c === '{') {
+        const prelude = buf.trim();
+        const body = readBody(i);
+        if (prelude.startsWith('@')) {
+          if (/^@keyframes\b/i.test(prelude)) {
+            // 关键帧：内层 0%/from/to 的声明照收，但不作为「选择器」计数
+            walk(body.bodyStart, true, 'keyframes', context);
+          } else if (CONDITIONAL_AT.test(prelude)) {
+            // 条件 at-rule：把 prelude 压进上下文，供「重复选择器」按媒体条件分组
+            walk(body.bodyStart, true, mode, context ? `${context} && ${prelude}` : prelude);
+          } else {
+            // @font-face / @page 等：带声明体，收声明但不算选择器
+            rules.push({ selector: prelude, ...body, atRule: true, context });
+          }
+          i = body.end;
+        } else if (mode === 'keyframes') {
+          rules.push({ selector: prelude, ...body, atRule: true, context });
+          i = body.end;
+        } else {
+          rules.push({ selector: prelude, ...body, atRule: false, context });
+          i = body.end;
+        }
+        buf = '';
+        continue;
+      }
+      buf += c;
+      i++;
+    }
+    return i;
+  }
+
+  walk(0, false, 'normal');
+  return rules;
+}
+
+/** 把声明体切成 [{ start, text }]（识别字符串与括号，忽略其中的分号） */
+function splitDeclParts(text) {
+  const parts = [];
+  const n = text.length;
+  let i = 0;
+  let bufStart = 0;
+  while (i < n) {
+    const c = text[i];
+    if (c === '"' || c === "'") {
+      i = skipString(text, i);
+      continue;
+    }
+    if (c === '(') {
+      i = skipBalanced(text, i, '(', ')');
+      continue;
+    }
+    if (c === ';') {
+      parts.push({ start: bufStart, text: text.slice(bufStart, i) });
+      i++;
+      bufStart = i;
+      continue;
+    }
+    i++;
+  }
+  if (bufStart < n) parts.push({ start: bufStart, text: text.slice(bufStart, n) });
+  return parts.filter((p) => p.text.trim().length > 0);
+}
+
+const PROP_RE = /^(--[\w-]+|-?[a-zA-Z][\w-]*)$/;
+
+/** 逗号分割选择器组（跳过 :is()/:not() 的括号、属性选择器里的逗号与字符串） */
+function splitSelectorList(selector) {
+  const out = [];
+  const n = selector.length;
+  let i = 0;
+  let buf = '';
+  while (i < n) {
+    const c = selector[i];
+    if (c === '"' || c === "'") {
+      const j = skipString(selector, i);
+      buf += selector.slice(i, j);
+      i = j;
+      continue;
+    }
+    if (c === '(' || c === '[') {
+      const close = c === '(' ? ')' : ']';
+      const j = skipBalanced(selector, i, c, close);
+      buf += selector.slice(i, j);
+      i = j;
+      continue;
+    }
+    if (c === ',') {
+      out.push(buf);
+      buf = '';
+      i++;
+      continue;
+    }
+    buf += c;
+    i++;
+  }
+  out.push(buf);
+  return out.map((s) => s.replace(/\s+/g, ' ').trim()).filter(Boolean);
+}
+
+// ───────────────────────────── 颜色工具 ─────────────────────────────
+
+function rgbToHsl(r, g, b) {
+  const R = r / 255;
+  const G = g / 255;
+  const B = b / 255;
+  const max = Math.max(R, G, B);
+  const min = Math.min(R, G, B);
+  const d = max - min;
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (d !== 0) {
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (max === R) h = (G - B) / d + (G < B ? 6 : 0);
+    else if (max === G) h = (B - R) / d + 2;
+    else h = (R - G) / d + 4;
+    h *= 60;
+  }
+  return { h, s, l };
+}
+
+function isNearWhite(r, g, b) {
+  return r > NEAR_WHITE_MIN && g > NEAR_WHITE_MIN && b > NEAR_WHITE_MIN;
+}
+
+/** 中性色判定：HSL 饱和度 < 12% 或彩度（max-min）接近 0 */
+function isNeutral(r, g, b) {
+  const { s } = rgbToHsl(r, g, b);
+  const chroma = Math.max(r, g, b) - Math.min(r, g, b);
+  return s < NEUTRAL_SAT || chroma <= NEUTRAL_CHROMA;
+}
+
+function rgbDistance(a, b) {
+  return Math.sqrt((a.r - b.r) ** 2 + (a.g - b.g) ** 2 + (a.b - b.b) ** 2);
+}
+
+/** 给近重复聚类起个中文色名，例如「7 个几乎一样的绿色」 */
+function hueName(r, g, b) {
+  const { h, s, l } = rgbToHsl(r, g, b);
+  if (l <= 0.12) return '近黑';
+  if (l >= 0.94) return '近白';
+  if (s < NEUTRAL_SAT) return '灰';
+  if (h < 15 || h >= 345) return '红';
+  if (h < 45) return '橙';
+  if (h < 70) return '黄';
+  if (h < 165) return '绿';
+  if (h < 195) return '青';
+  if (h < 255) return '蓝';
+  if (h < 290) return '紫';
+  return '品红';
+}
+
+const HEX_RE = /#([0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{4}|[0-9a-fA-F]{3})(?![0-9a-fA-F])/g;
+const RGB_FN_RE = /\brgba?\s*\(([^()]*)\)/gi;
+
+/** 先抹掉 url(...)（SVG 片段 id 常常形如 #abc，会被误认成颜色） */
+function maskUrls(value) {
+  return value.replace(/\burl\s*\((?:[^()]|\([^()]*\))*\)/gi, (m) => ' '.repeat(m.length));
+}
+
+function canonHex(r, g, b, a) {
+  const base = [r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('');
+  return '#' + base + (a < 255 ? a.toString(16).padStart(2, '0') : '');
+}
+
+/** 扫描一段值里的十六进制颜色 */
+function scanHex(value) {
+  const out = [];
+  HEX_RE.lastIndex = 0;
+  let m;
+  while ((m = HEX_RE.exec(value))) {
+    const h = m[1].toLowerCase();
+    let r, g, b, a;
+    if (h.length === 3 || h.length === 4) {
+      r = parseInt(h[0] + h[0], 16);
+      g = parseInt(h[1] + h[1], 16);
+      b = parseInt(h[2] + h[2], 16);
+      a = h.length === 4 ? parseInt(h[3] + h[3], 16) : 255;
+    } else {
+      r = parseInt(h.slice(0, 2), 16);
+      g = parseInt(h.slice(2, 4), 16);
+      b = parseInt(h.slice(4, 6), 16);
+      a = h.length === 8 ? parseInt(h.slice(6, 8), 16) : 255;
+    }
+    out.push({ raw: '#' + h, canon: canonHex(r, g, b, a), r, g, b, a });
+  }
+  return out;
+}
+
+function parseRgbChannel(token) {
+  const t = String(token).trim();
+  if (!t) return null;
+  if (t.endsWith('%')) {
+    const v = Number.parseFloat(t);
+    return Number.isFinite(v) ? Math.max(0, Math.min(255, Math.round((v * 255) / 100))) : null;
+  }
+  const v = Number.parseFloat(t);
+  if (!Number.isFinite(v)) return null;
+  return Math.max(0, Math.min(255, Math.round(v)));
+}
+
+function parseAlpha(token) {
+  if (token == null || token === '') return 1;
+  const t = String(token).trim();
+  if (t.endsWith('%')) {
+    const v = Number.parseFloat(t);
+    return Number.isFinite(v) ? Math.max(0, Math.min(1, v / 100)) : 1;
+  }
+  const v = Number.parseFloat(t);
+  return Number.isFinite(v) ? Math.max(0, Math.min(1, v)) : 1;
+}
+
+/**
+ * 解析 rgb()/rgba() 参数，同时支持现代与逗号写法：
+ *   rgba(1,2,3,0.5) / rgb(1 2 3 / 50%) / rgb(100% 0% 0%) / rgb(1, 2, 3)
+ */
+function parseRgbArgs(argsStr) {
+  let body = String(argsStr).trim();
+  let slashAlpha = null;
+  const slash = body.indexOf('/');
+  if (slash >= 0) {
+    slashAlpha = body.slice(slash + 1).trim();
+    body = body.slice(0, slash);
+  }
+  let parts = body.includes(',') ? body.split(',') : body.trim().split(/\s+/);
+  parts = parts.map((s) => s.trim()).filter(Boolean);
+  if (parts.length < 3) return null;
+  const rgb = [parseRgbChannel(parts[0]), parseRgbChannel(parts[1]), parseRgbChannel(parts[2])];
+  if (rgb.some((v) => v === null)) return null; // 相对颜色语法等 → 跳过
+  const alphaToken = slashAlpha != null ? slashAlpha : parts.length >= 4 ? parts[3] : null;
+  return { r: rgb[0], g: rgb[1], b: rgb[2], a: parseAlpha(alphaToken) };
+}
+
+/** 扫描一段值里的 rgb()/rgba() */
+function scanRgb(value) {
+  const out = [];
+  RGB_FN_RE.lastIndex = 0;
+  let m;
+  while ((m = RGB_FN_RE.exec(value))) {
+    const parsed = parseRgbArgs(m[1]);
+    if (!parsed) continue;
+    const a = Math.round(parsed.a * 1000) / 1000;
+    out.push({
+      raw: m[0].replace(/\s+/g, ' '),
+      canon: `rgba(${parsed.r},${parsed.g},${parsed.b},${a})`,
+      r: parsed.r,
+      g: parsed.g,
+      b: parsed.b,
+      a,
+    });
+  }
+  return out;
+}
+
+// ───────────────────────────── 文件收集 ─────────────────────────────
+
+/** 递归收集 .css / .vue；跳过 SKIP_DIRS */
+function collectFiles(target) {
+  const found = [];
+  const stack = [target];
+  while (stack.length) {
+    const cur = stack.pop();
+    let st;
+    try {
+      st = fs.statSync(cur);
+    } catch {
+      continue;
+    }
+    if (st.isDirectory()) {
+      let entries = [];
+      try {
+        entries = fs.readdirSync(cur, { withFileTypes: true });
+      } catch {
+        continue;
+      }
+      for (const e of entries) {
+        const full = path.join(cur, e.name);
+        if (e.isDirectory()) {
+          if (SKIP_DIRS.has(e.name)) continue;
+          stack.push(full);
+        } else if (e.isFile()) {
+          const ext = path.extname(e.name).toLowerCase();
+          if (ext === '.css' || ext === '.vue') found.push(full);
+        }
+      }
+    } else if (st.isFile()) {
+      const ext = path.extname(cur).toLowerCase();
+      if (ext === '.css' || ext === '.vue') found.push(cur);
+    }
+  }
+  found.sort();
+  return found;
+}
+
+/** 按路径片段过滤（--ignore）。用于排除 tokens 定义文件这类"字面量本来就合法"的文件。 */
+function filterIgnored(files, patterns) {
+  if (!patterns || patterns.length === 0) return files;
+  const norm = (s) => String(s).split(path.sep).join('/');
+  const pats = patterns.map(norm);
+  return files.filter((f) => {
+    const n = norm(f);
+    return !pats.some((p) => n.includes(p));
+  });
+}
+
+// ───────────────────────────── 单文件分析 ─────────────────────────────
+
+function lineIndex(text) {
+  const starts = [0];
+  for (let i = 0; i < text.length; i++) {
+    if (text[i] === '\n') starts.push(i + 1);
+  }
+  return (offset) => {
+    let lo = 0;
+    let hi = starts.length - 1;
+    while (lo < hi) {
+      const mid = (lo + hi + 1) >> 1;
+      if (starts[mid] <= offset) lo = mid;
+      else hi = mid - 1;
+    }
+    return lo + 1;
+  };
+}
+
+/**
+ * 分析单个文件，返回 { file, lines, rules, decls, selectors, notes }
+ * decls: { prop, value, important, line }
+ */
+function analyzeFile(file) {
+  const raw = fs.readFileSync(file, 'utf8');
+  const isVue = path.extname(file).toLowerCase() === '.vue';
+  const notes = [];
+  let src = raw;
+  if (isVue) {
+    const masked = maskVue(raw);
+    src = masked.src;
+    for (const n of masked.notes) notes.push(`<style lang="${n}">：嵌套语法可能抬高「重复选择器」计数`);
+  }
+  const clean = stripComments(src);
+  const rules = parseRules(clean);
+  const lineOf = lineIndex(raw);
+
+  const decls = [];
+  const selectors = [];
+
+  for (const rule of rules) {
+    const body = clean.slice(rule.bodyStart, rule.bodyEnd);
+    const masked = maskNestedBlocks(body);
+    for (const part of splitDeclParts(masked)) {
+      const text = part.text;
+      const colon = text.indexOf(':');
+      if (colon < 0) continue;
+      const prop = text.slice(0, colon).trim().toLowerCase();
+      if (!PROP_RE.test(prop)) continue;
+      let value = text.slice(colon + 1).trim();
+      if (!value) continue;
+      const importantCount = (value.match(/!\s*important/gi) || []).length;
+      if (importantCount > 0) value = value.replace(/!\s*important/gi, '').trim();
+      const absOffset = rule.bodyStart + part.start + colon + 1;
+      decls.push({
+        prop,
+        value,
+        important: importantCount,
+        line: lineOf(absOffset),
+        file,
+        selector: rule.selector || '',
+        context: rule.context || '',
+        // atRule 的声明体（@keyframes 的 0%/from/to 步骤、@font-face、@page）不是层叠里的选择器：
+        // 两个 @keyframes 各有一个 to { transform } 是完全正常的，互相不覆盖。
+        // 冗余声明检查必须跳过它们，否则「再加一个动画」就会被误报。
+        atRule: !!rule.atRule,
+      });
+    }
+    if (!rule.atRule && rule.selector) {
+      // 带上 at-rule 上下文：同一个选择器在 base 与 @media 里各写一次是合法的响应式覆盖，
+      // 只有「同一上下文内被声明多次」才算重复。
+      for (const sel of splitSelectorList(rule.selector)) {
+        selectors.push({ sel, context: rule.context || '' });
+      }
+    }
+  }
+
+  return {
+    file,
+    // 行数按编辑器口径统计（忽略文件末尾换行带来的空行）
+    lines: raw.replace(/\r\n?/g, '\n').replace(/\n$/, '').split('\n').length,
+    rules,
+    decls,
+    selectors,
+    notes,
+  };
+}
+
+// ───────────────────────────── 指标聚合 ─────────────────────────────
+
+function bump(map, key, init) {
+  const cur = map.get(key);
+  if (cur) cur.count++;
+  else map.set(key, { ...init, count: 1 });
+  return map.get(key);
+}
+
+function topByCount(map, n) {
+  return [...map.entries()]
+    .map(([value, v]) => ({ value, count: v.count }))
+    .sort((a, b) => b.count - a.count || String(a.value).localeCompare(String(b.value)))
+    .slice(0, n);
+}
+
+function cmpCssValue(a, b) {
+  const na = Number.parseFloat(a);
+  const nb = Number.parseFloat(b);
+  const fa = Number.isFinite(na);
+  const fb = Number.isFinite(nb);
+  if (fa && fb) {
+    if (na !== nb) return na - nb;
+    return a.localeCompare(b);
+  }
+  if (fa !== fb) return fa ? -1 : 1;
+  return a.localeCompare(b);
+}
+
+/** 把距离 < 阈值 的颜色聚成组（并查式 BFS），返回成员数 > 1 的组 */
+function clusterColors(items) {
+  const used = new Array(items.length).fill(false);
+  const clusters = [];
+  for (let i = 0; i < items.length; i++) {
+    if (used[i]) continue;
+    used[i] = true;
+    const group = [i];
+    const queue = [i];
+    while (queue.length) {
+      const a = queue.shift();
+      for (let j = 0; j < items.length; j++) {
+        if (used[j]) continue;
+        if (rgbDistance(items[a], items[j]) < NEAR_DUP_DISTANCE) {
+          used[j] = true;
+          group.push(j);
+          queue.push(j);
+        }
+      }
+    }
+    if (group.length > 1) clusters.push(group.map((k) => items[k]));
+  }
+  return clusters.sort((a, b) => b.length - a.length);
+}
+
+const SPACING_PROP_RE = /^(padding|margin|gap|grid-gap)(-.+)?$/;
+const RADIUS_LONGHAND_RE = /^border-.+-radius$/;
+
+function stripVendor(prop) {
+  return prop.replace(/^-[a-z]+-/, '');
+}
+
+/** 间距 / 字号 / 圆角这类「本该 token 化」的属性 */
+function isTokenizableLengthProp(prop) {
+  const p = stripVendor(prop);
+  if (p === 'font-size' || p === 'border-radius') return true;
+  if (SPACING_PROP_RE.test(p)) return true;
+  if (RADIUS_LONGHAND_RE.test(p)) return true;
+  return false;
+}
+
+const PX_RE = /-?\d*\.?\d+px\b/gi;
+
+function computeMetrics(docs, files) {
+  const hexMap = new Map(); // canon → {count, rgb}
+  const rgbMap = new Map(); // rgba(...) → {count, rgb}
+  const rgbBaseMap = new Map(); // r,g,b → {count, rgb}
+  const radiusMap = new Map();
+  const fontSizeMap = new Map();
+  const selectorMap = new Map();
+  const rootFiles = new Set();
+  const varDecls = []; // {name, value, file, line}
+  const hardPx = [];
+
+  let ruleBlocks = 0;
+  let rootBlockCount = 0;
+  let importantCount = 0;
+  let hardColorCount = 0;
+  let varUseCount = 0;
+
+  for (const doc of docs) {
+    for (const rule of doc.rules) {
+      if (!rule.atRule && rule.selector) {
+        ruleBlocks++;
+        if (splitSelectorList(rule.selector).some((s) => s === ':root' || s.endsWith(':root'))) {
+          rootBlockCount++; // 按块计数（同一文件里两个 :root 就是 2）
+          rootFiles.add(doc.file);
+        }
+      }
+    }
+
+    for (const { sel, context } of doc.selectors) {
+      const key = context ? `${context}\u0000${sel}` : sel;
+      bump(selectorMap, key, { value: sel, context: context || '(base)' });
+    }
+
+    for (const d of doc.decls) {
+      importantCount += d.important;
+
+      // :root 变量（任意作用域的 --x 声明都收，用于找重复声明）
+      if (d.prop.startsWith('--')) {
+        varDecls.push({ name: d.prop, value: d.value, file: d.file, line: d.line });
+      }
+
+      // 颜色（含 var() 回退值，反映「文件里出现了多少种颜色」）
+      const colorZone = maskUrls(d.value);
+      for (const c of scanHex(colorZone)) {
+        const cur = bump(hexMap, c.canon, { rgb: { r: c.r, g: c.g, b: c.b } });
+        if (!cur.rgb) cur.rgb = { r: c.r, g: c.g, b: c.b };
+      }
+      for (const c of scanRgb(colorZone)) {
+        bump(rgbMap, c.canon, { rgb: { r: c.r, g: c.g, b: c.b } });
+        bump(rgbBaseMap, `${c.r},${c.g},${c.b}`, { rgb: { r: c.r, g: c.g, b: c.b } });
+      }
+
+      // border-radius / font-size 取值
+      if (stripVendor(d.prop) === 'border-radius') {
+        bump(radiusMap, d.value.replace(/\s+/g, ' '), {});
+      }
+      if (stripVendor(d.prop) === 'font-size') {
+        bump(fontSizeMap, d.value.replace(/\s+/g, ' '), {});
+      }
+
+      // token 覆盖率：var() 用量 + 硬编码颜色 + 硬编码长度 px
+      const varZone = maskUrls(d.value);
+      varUseCount += (varZone.match(/\bvar\s*\(/g) || []).length;
+      const hardZone = maskVarCalls(varZone); // 去掉 var(...) 回退值后的「真·硬编码」区
+      hardColorCount += scanHex(hardZone).length + scanRgb(hardZone).length;
+      if (isTokenizableLengthProp(d.prop)) {
+        const pxs = hardZone.match(PX_RE) || [];
+        for (const px of pxs) {
+          hardPx.push({ prop: d.prop, value: px, file: d.file, line: d.line });
+        }
+      }
+    }
+  }
+
+  // 变量重复声明：同名按文档顺序，最后一个生效，其余为死代码
+  const varByName = new Map();
+  for (const v of varDecls) {
+    if (!varByName.has(v.name)) varByName.set(v.name, []);
+    varByName.get(v.name).push(v);
+  }
+  const duplicateVars = [];
+  for (const [name, list] of varByName) {
+    if (list.length > 1) {
+      duplicateVars.push({
+        name,
+        declarations: list,
+        winner: list[list.length - 1],
+        dead: list.slice(0, -1),
+      });
+    }
+  }
+  duplicateVars.sort((a, b) => b.declarations.length - a.declarations.length || a.name.localeCompare(b.name));
+
+  // 近白 / 彩色（hex 与 rgb 基色合并去重）
+  const baseColors = new Map();
+  for (const [canon, v] of hexMap) {
+    const key = `${v.rgb.r},${v.rgb.g},${v.rgb.b}`;
+    if (!baseColors.has(key)) baseColors.set(key, { ...v.rgb, displays: new Set(), count: 0 });
+    const b = baseColors.get(key);
+    b.displays.add(canon);
+    b.count += v.count;
+  }
+  for (const [key, v] of rgbBaseMap) {
+    if (!baseColors.has(key)) baseColors.set(key, { ...v.rgb, displays: new Set(), count: 0 });
+    const b = baseColors.get(key);
+    b.count += v.count;
+  }
+  const colorList = [...baseColors.values()].map((c) => ({
+    ...c,
+    label: [...c.displays][0] || `rgb(${c.r},${c.g},${c.b})`,
+  }));
+  const nearWhite = colorList.filter((c) => isNearWhite(c.r, c.g, c.b));
+  const colored = colorList.filter((c) => !isNearWhite(c.r, c.g, c.b) && !isNeutral(c.r, c.g, c.b));
+  const nearWhiteSet = new Set(nearWhite.map((c) => `${c.r},${c.g},${c.b}`));
+
+  const hexClusters = clusterColors(
+    [...hexMap.entries()].map(([canon, v]) => ({ label: canon, ...v.rgb })),
+  );
+  const rgbBaseClusters = clusterColors(
+    [...rgbBaseMap.entries()].map(([key, v]) => ({
+      label: `rgb(${key.split(',').join(', ')})`,
+      ...v.rgb,
+    })),
+  );
+
+  // 重复声明的选择器
+  const duplicateList = [...selectorMap.values()]
+    .filter((v) => v.count > 1)
+    .map((v) => ({ value: v.value, count: v.count, context: v.context }))
+    .sort((a, b) => b.count - a.count || a.value.localeCompare(b.value));
+
+  // 被同 (上下文, 选择器) 更靠后的声明覆盖掉的属性声明 —— 真正的冗余。
+  // 一条声明只有在「同一上下文、同一选择器下，后面还声明了同一个属性」时才必然无效：
+  // 同选择器 ⇒ 同特异性，后出现者胜。
+  // 注意选择器列表：`.a, .b { color:red }` 后面接 `.a { color:blue }` 时，
+  // color:red 对 .a 已失效、对 .b 仍然有效 —— 删掉它会改变 .b 的颜色。
+  // 所以只统计「列表中每个选择器都被覆盖」的声明，那才是可以安全删除的集合。
+  const declById = new Map(); // id → {prop, context, selectors}
+  const lastFor = new Map(); // `${context}\0${sel}\0${prop}` → 最后一次声明它的 id
+  let seqId = 0;
+  for (const doc of docs) {
+    for (const d of doc.decls) {
+      if (!d.selector || d.atRule) continue;
+      const sels = splitSelectorList(d.selector);
+      if (!sels.length) continue;
+      const id = seqId++;
+      declById.set(id, { prop: d.prop, context: d.context, selectors: sels });
+      for (const sel of sels) lastFor.set(`${d.context}\u0000${sel}\u0000${d.prop}`, id);
+    }
+  }
+  let redundantDeclarations = 0;
+  for (const [id, info] of declById) {
+    const covered = info.selectors.every(
+      (sel) => lastFor.get(`${info.context}\u0000${sel}\u0000${info.prop}`) !== id,
+    );
+    if (covered) redundantDeclarations++;
+  }
+
+  const denom = varUseCount + hardColorCount + hardPx.length;
+  const tokenCoverage = denom === 0 ? 100 : (varUseCount / denom) * 100;
+
+  const radiusValues = [...radiusMap.entries()].map(([value, v]) => ({ value, count: v.count }));
+  const fontSizeValues = [...fontSizeMap.entries()].map(([value, v]) => ({ value, count: v.count }));
+
+  return {
+    fileCount: files.length,
+    lines: docs.reduce((s, d) => s + d.lines, 0),
+    ruleBlocks,
+    distinctSelectors: selectorMap.size,
+    totalSelectorUses: docs.reduce((s, d) => s + d.selectors.length, 0),
+    redundantDeclarations,
+    rootBlocks: rootBlockCount,
+    rootFiles: [...rootFiles],
+    variables: {
+      total: varByName.size,
+      declarations: varDecls.length,
+      duplicates: duplicateVars,
+    },
+    hexColors: {
+      distinct: hexMap.size,
+      occurrences: [...hexMap.values()].reduce((s, v) => s + v.count, 0),
+      top: topByCount(hexMap, TOP_N),
+      nearDuplicates: hexClusters,
+    },
+    rgbColors: {
+      distinct: rgbMap.size,
+      occurrences: [...rgbMap.values()].reduce((s, v) => s + v.count, 0),
+      baseDistinct: rgbBaseMap.size,
+      top: topByCount(rgbMap, TOP_N),
+      baseNearDuplicates: rgbBaseClusters,
+    },
+    coloredDistinct: colored.length,
+    colored: colored.map((c) => c.label).sort(),
+    nearWhiteDistinct: nearWhite.length,
+    nearWhite: nearWhite.map((c) => c.label).sort(),
+    nearWhiteSet,
+    borderRadius: { distinct: radiusValues.length, values: radiusValues },
+    fontSize: { distinct: fontSizeValues.length, values: fontSizeValues },
+    selectors: {
+      duplicateCount: duplicateList.length,
+      duplicateUses: duplicateList.reduce((s, d) => s + d.count, 0),
+      list: duplicateList,
+      top: duplicateList.slice(0, TOP_N),
+    },
+    tokenCoverage: {
+      percent: Math.round(tokenCoverage * 10) / 10,
+      varUses: varUseCount,
+      hardcodedColors: hardColorCount,
+      hardcodedPx: hardPx.length,
+      pxSamples: hardPx.slice(0, MAX_LISTED_PX),
+    },
+    importantCount,
+    notes: [...new Set(docs.flatMap((d) => d.notes))],
+  };
+}
+
+// ───────────────────────────── 评分 ─────────────────────────────
+
+function buildChecks(m) {
+  const previewList = (arr, n = VALUE_PREVIEW) => {
+    if (arr.length <= n) return arr.join(',');
+    return arr.slice(0, n).join(',') + `…(+${arr.length - n})`;
+  };
+  const radiusSorted = [...m.borderRadius.values].map((v) => v.value).sort(cmpCssValue);
+  const fontSizeSorted = [...m.fontSize.values].map((v) => v.value).sort(cmpCssValue);
+  const dupPreview = m.selectors.top.map((d) => `${d.value}×${d.count}`);
+
+  return [
+    {
+      id: 'coloredDistinct',
+      label: '彩色 distinct',
+      value: m.coloredDistinct,
+      valueText: `distinct=${m.coloredDistinct}`,
+      need: `≤${LIMITS.coloredDistinct}`,
+      needText: `(需 ≤${LIMITS.coloredDistinct})`,
+      pass: m.coloredDistinct <= LIMITS.coloredDistinct,
+      extra: previewList(m.colored),
+    },
+    {
+      id: 'radiusDistinct',
+      label: 'border-radius',
+      value: m.borderRadius.distinct,
+      valueText: `distinct=${m.borderRadius.distinct}`,
+      need: `≤${LIMITS.radiusDistinct}`,
+      needText: `(需 ≤${LIMITS.radiusDistinct})`,
+      pass: m.borderRadius.distinct <= LIMITS.radiusDistinct,
+      extra: previewList(radiusSorted),
+    },
+    {
+      id: 'fontSizeDistinct',
+      label: 'font-size',
+      value: m.fontSize.distinct,
+      valueText: `distinct=${m.fontSize.distinct}`,
+      need: `≤${LIMITS.fontSizeDistinct}`,
+      needText: `(需 ≤${LIMITS.fontSizeDistinct})`,
+      pass: m.fontSize.distinct <= LIMITS.fontSizeDistinct,
+      extra: previewList(fontSizeSorted),
+    },
+    {
+      id: 'nearWhiteDistinct',
+      label: '近白背景 distinct',
+      value: m.nearWhiteDistinct,
+      valueText: `distinct=${m.nearWhiteDistinct}`,
+      need: `≤${LIMITS.nearWhiteDistinct}`,
+      needText: `(需 ≤${LIMITS.nearWhiteDistinct})`,
+      pass: m.nearWhiteDistinct <= LIMITS.nearWhiteDistinct,
+      extra: previewList(m.nearWhite),
+    },
+    {
+      id: 'rootBlocks',
+      label: ':root 块',
+      value: m.rootBlocks,
+      valueText: `count=${m.rootBlocks}`,
+      need: `=${LIMITS.rootBlocks}`,
+      needText: `(需 =${LIMITS.rootBlocks})`,
+      pass: m.rootBlocks === LIMITS.rootBlocks,
+      extra: m.rootFiles.join(','),
+    },
+    {
+      id: 'tokenCoverage',
+      label: 'token 覆盖率',
+      value: m.tokenCoverage.percent,
+      valueText: `${m.tokenCoverage.percent.toFixed(1)}%`,
+      need: `≥${LIMITS.tokenCoverage}%`,
+      needText: `(需 ≥${LIMITS.tokenCoverage}%)`,
+      pass: m.tokenCoverage.percent >= LIMITS.tokenCoverage,
+      extra: `var()=${m.tokenCoverage.varUses} 硬编码色=${m.tokenCoverage.hardcodedColors} 硬编码px=${m.tokenCoverage.hardcodedPx}`,
+    },
+    {
+      id: 'rgbBaseDistinct',
+      label: 'rgb/rgba 基色 distinct',
+      value: m.rgbColors.baseDistinct,
+      valueText: `distinct=${m.rgbColors.baseDistinct}`,
+      need: `≤${LIMITS.rgbBaseDistinct}`,
+      needText: `(需 ≤${LIMITS.rgbBaseDistinct})`,
+      pass: m.rgbColors.baseDistinct <= LIMITS.rgbBaseDistinct,
+      extra: previewList(m.rgbColors.top.map((t) => t.value)),
+    },
+    {
+      id: 'redundantDeclarations',
+      label: '冗余声明（同属性重复声明）',
+      value: m.redundantDeclarations,
+      valueText: `count=${m.redundantDeclarations}`,
+      need: `=${LIMITS.redundantDeclarations}`,
+      needText: `(需 =${LIMITS.redundantDeclarations})`,
+      pass: m.redundantDeclarations === LIMITS.redundantDeclarations,
+      extra: '',
+    },
+    {
+      id: 'duplicateSelectors',
+      label: '同一选择器分散在多块',
+      value: m.selectors.duplicateCount,
+      valueText: `count=${m.selectors.duplicateCount}`,
+      need: '提示',
+      needText: '（提示，不参与判定）',
+      pass: m.selectors.duplicateCount === LIMITS.duplicateSelectors,
+      advisory: true,
+      extra: previewList(dupPreview),
+    },
+    {
+      id: 'importantCount',
+      label: '!important',
+      value: m.importantCount,
+      valueText: `count=${m.importantCount}`,
+      need: `=${LIMITS.importantCount}`,
+      needText: `(需 =${LIMITS.importantCount})`,
+      pass: m.importantCount === LIMITS.importantCount,
+      extra: '',
+    },
+  ];
+}
+
+// ───────────────────────────── 输出 ─────────────────────────────
+
+/** 中文按 2 列宽计算，保证终端对齐 */
+function displayWidth(s) {
+  let w = 0;
+  for (const ch of s) {
+    w += /[\u1100-\u115F\u2E80-\uA4CF\uAC00-\uD7A3\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFF60\uFFE0-\uFFE6]/.test(ch)
+      ? 2
+      : 1;
+  }
+  return w;
+}
+
+function padDisplay(s, width) {
+  return s + ' '.repeat(Math.max(0, width - displayWidth(s)));
+}
+
+function summaryLine(checks) {
+  const failed = checks.filter((c) => !c.pass && !c.advisory);
+  if (failed.length === 0) return '全部通过 — 设计系统一致';
+  return `合计 ${failed.length} 项未通过 — 设计系统已漂移`;
+}
+
+function renderScorecard(target, m, checks) {
+  const labelW = Math.max(...checks.map((c) => displayWidth(c.label)));
+  const valueW = Math.max(...checks.map((c) => displayWidth(c.valueText)));
+  const out = [];
+
+  out.push('CSS 设计系统漂移审计');
+  out.push(`目标  ${target}`);
+  out.push(
+    `范围  ${m.fileCount} 个文件 · ${m.lines} 行 · 规则块 ${m.ruleBlocks} · distinct 选择器 ${m.distinctSelectors}`,
+  );
+  out.push('─'.repeat(64));
+  out.push('[评分]');
+  for (const c of checks) {
+    const mark = c.advisory ? 'ℹ️' : c.pass ? '✅' : '❌';
+    const base = `${mark} ${padDisplay(c.label, labelW)}  ${padDisplay(c.valueText, valueW)}  ${c.needText}`;
+    out.push(c.extra ? `${base}   ${c.extra}` : base);
+  }
+
+  out.push('[详情]');
+
+  // :root / 变量
+  const dupVars = m.variables.duplicates;
+  if (dupVars.length === 0) {
+    out.push(
+      `:root 块 ×${m.rootBlocks} · CSS 变量 ${m.variables.total} 个 / 声明 ${m.variables.declarations} 次（无重复声明）`,
+    );
+  } else {
+    out.push(
+      `:root 块 ×${m.rootBlocks} · CSS 变量 ${m.variables.total} 个 / 声明 ${m.variables.declarations} 次 · 重复声明 ${dupVars.length} 个`,
+    );
+    for (const v of dupVars.slice(0, 8)) {
+      const winner = `${v.winner.value} (${path.basename(v.winner.file)}:${v.winner.line})`;
+      const dead = v.dead.map((d) => `${d.value} (${path.basename(d.file)}:${d.line})`).join(' | ');
+      out.push(`  ❌ ${v.name}  声明 ${v.declarations.length} 次 → 生效 ${winner} · 死代码 ${dead}`);
+    }
+    if (dupVars.length > 8) out.push(`  …(+${dupVars.length - 8} 个重复变量)`);
+    out.push('  （同名字段按文档顺序取最后一个生效；跨作用域覆盖不适用此规则）');
+  }
+
+  // hex
+  if (m.hexColors.distinct > 0) {
+    const top = m.hexColors.top.map((t) => `${t.count}×${t.value}`).join(' · ');
+    out.push(
+      `hex 颜色 distinct=${m.hexColors.distinct} / ${m.hexColors.occurrences} 次 — Top${Math.min(TOP_N, m.hexColors.top.length)}: ${top}`,
+    );
+  } else {
+    out.push('hex 颜色 distinct=0');
+  }
+
+  // 近重复聚类
+  const clusters = [...m.hexColors.nearDuplicates, ...m.rgbColors.baseNearDuplicates];
+  if (clusters.length === 0) {
+    out.push(`近重复颜色聚类（RGB 距离 < ${NEAR_DUP_DISTANCE}）: 无`);
+  } else {
+    out.push(`近重复颜色聚类（RGB 距离 < ${NEAR_DUP_DISTANCE}）${clusters.length} 组:`);
+    for (const g of clusters.slice(0, 8)) {
+      const name = hueName(g[0].r, g[0].g, g[0].b);
+      const list = g.map((c) => c.label).join(' · ');
+      out.push(`  [${name}] ${list}  (${g.length} 个)`);
+    }
+    if (clusters.length > 8) out.push(`  …(+${clusters.length - 8} 组)`);
+  }
+
+  // rgb
+  if (m.rgbColors.distinct > 0) {
+    const top = m.rgbColors.top.map((t) => `${t.count}×${t.value}`).join(' · ');
+    out.push(
+      `rgb/rgba distinct=${m.rgbColors.distinct} / ${m.rgbColors.occurrences} 次 · 基色 distinct=${m.rgbColors.baseDistinct} — Top${Math.min(TOP_N, m.rgbColors.top.length)}: ${top}`,
+    );
+  } else {
+    out.push('rgb/rgba distinct=0 · 基色 distinct=0');
+  }
+
+  // radius
+  const radiusList = [...m.borderRadius.values]
+    .sort((a, b) => cmpCssValue(a.value, b.value))
+    .map((v) => `${v.value}×${v.count}`);
+  out.push(`border-radius distinct=${m.borderRadius.distinct} — ${preview(radiusList, DETAIL_PREVIEW)}`);
+
+  // font-size
+  const fontList = [...m.fontSize.values]
+    .sort((a, b) => cmpCssValue(a.value, b.value))
+    .map((v) => `${v.value}×${v.count}`);
+  out.push(`font-size distinct=${m.fontSize.distinct} — ${preview(fontList, DETAIL_PREVIEW)}`);
+
+  // 选择器
+  out.push(`规则块 ${m.ruleBlocks} · distinct 选择器 ${m.distinctSelectors}`);
+  if (m.selectors.duplicateCount === 0) {
+    out.push('同一选择器分散在多块 0 个（提示项）');
+  } else {
+    const list = m.selectors.top.map((d) => `${d.value}×${d.count}`).join(' · ');
+    out.push(
+      `同一选择器分散在多块 ${m.selectors.duplicateCount} 个 / 共 ${m.selectors.duplicateUses} 次（提示项，不参与判定）— Top${m.selectors.top.length}: ${list}`,
+    );
+  }
+
+  out.push(`!important ${m.importantCount}`);
+  out.push(
+    `token 覆盖率 ${m.tokenCoverage.percent.toFixed(1)}% — var() ${m.tokenCoverage.varUses} 次 · 硬编码颜色 ${m.tokenCoverage.hardcodedColors} 个 · 硬编码间距/字号/圆角 px ${m.tokenCoverage.hardcodedPx} 个`,
+  );
+  for (const note of m.notes) out.push(`注意  ${note}`);
+
+  out.push('─'.repeat(64));
+  out.push(summaryLine(checks));
+  return out.join('\n');
+}
+
+function preview(arr, n) {
+  if (arr.length === 0) return '(无)';
+  if (arr.length <= n) return arr.join(' · ');
+  return arr.slice(0, n).join(' · ') + ` · …(+${arr.length - n})`;
+}
+
+function buildJson(target, files, m, checks) {
+  return {
+    tool: 'audit-css',
+    version: 1,
+    target,
+    files,
+    thresholds: {
+      nearDuplicateDistance: NEAR_DUP_DISTANCE,
+      nearWhiteMin: NEAR_WHITE_MIN,
+      neutralSaturation: NEUTRAL_SAT,
+      neutralChroma: NEUTRAL_CHROMA,
+      limits: LIMITS,
+    },
+    totals: {
+      files: m.fileCount,
+      lines: m.lines,
+      ruleBlocks: m.ruleBlocks,
+      distinctSelectors: m.distinctSelectors,
+      selectorUses: m.totalSelectorUses,
+    },
+    root: {
+      blockCount: m.rootBlocks,
+      files: m.rootFiles,
+      variables: m.variables.total,
+      variableDeclarations: m.variables.declarations,
+      duplicates: m.variables.duplicates,
+    },
+    hexColors: m.hexColors,
+    rgbColors: m.rgbColors,
+    colored: { distinct: m.coloredDistinct, values: m.colored },
+    nearWhite: { distinct: m.nearWhiteDistinct, values: m.nearWhite },
+    borderRadius: m.borderRadius,
+    fontSize: m.fontSize,
+    selectors: m.selectors,
+    tokenCoverage: m.tokenCoverage,
+    importantCount: m.importantCount,
+    notes: m.notes,
+    checks: checks.map((c) => ({
+      id: c.id,
+      label: c.label,
+      value: c.value,
+      need: c.need,
+      pass: c.pass,
+      advisory: !!c.advisory,
+    })),
+    failed: checks.filter((c) => !c.pass && !c.advisory).map((c) => c.id),
+    failedCount: checks.filter((c) => !c.pass && !c.advisory).length,
+    passed: checks.every((c) => c.pass || c.advisory),
+  };
+}
+
+function printHelp() {
+  process.stdout.write(
+    [
+      'audit-css.mjs —— CSS「设计系统漂移」审计记分卡（零依赖 · Node 18+）',
+      '',
+      '用法:',
+      '  node audit-css.mjs <css文件或目录> [--ignore <片段>]... [--json] [--quiet] [--help]',
+      '',
+      '参数:',
+      '  <css文件或目录>  目录会递归收集所有 .css 与 .vue（.vue 只取 <style> 块）；',
+      '                   跳过 node_modules / dist / build / .git / coverage / vendor',
+      '',
+      '选项:',
+      '  --ignore <路径片段>  跳过路径中含该片段的文件（可重复）。也接受 --exclude / --ignore=<片段>',
+      '                       用途：排除 tokens.css 这类「字面量本来就合法」的定义文件',
+      '  --json     输出机器可读 JSON（全部原始数据 + pass/fail），无装饰字符',
+      '  --quiet    只输出总结行',
+      '  -h, --help 显示本帮助',
+      '',
+      '评分项（任一 FAIL → 退出码 1）:',
+      '  彩色 distinct ≤ 5        border-radius distinct ≤ 4      font-size distinct ≤ 7',
+      '  近白背景 distinct ≤ 3    :root 块 = 1                   token 覆盖率 ≥ 90%',
+      '  rgb/rgba 基色 distinct ≤ 3   冗余声明（同属性重复声明）= 0   !important = 0',
+      '',
+      '提示项（不参与判定，不影响退出码）:',
+      '  同一选择器分散在多块 —— 归零需合并块，会改变同特异性选择器之间的先后关系，有渲染风险',
+      '',
+      '示例:',
+      '  node audit-css.mjs .\\ui\\src\\styles\\main.css',
+      '  node audit-css.mjs .\\ui\\src\\styles --ignore tokens.css --json > report.json',
+      '  node audit-css.mjs .\\src\\components --quiet',
+      '',
+      '退出码: 0 全部通过；1 有未通过项 / 参数或输入错误。',
+      '',
+    ].join('\n'),
+  );
+}
+
+// ───────────────────────────── 主流程 ─────────────────────────────
+
+function main() {
+  const argv = process.argv.slice(2);
+  let json = false;
+  let quiet = false;
+  let target = null;
+  const ignores = [];
+
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === '--help' || a === '-h') {
+      printHelp();
+      process.exit(0);
+    }
+    if (a === '--json') {
+      json = true;
+      continue;
+    }
+    if (a === '--quiet' || a === '-q') {
+      quiet = true;
+      continue;
+    }
+    if (a === '--ignore' || a === '--exclude') {
+      const v = argv[++i];
+      if (!v) {
+        process.stderr.write(`❌ ${a} 需要一个路径片段参数\n`);
+        process.exit(1);
+      }
+      ignores.push(v);
+      continue;
+    }
+    if (a.startsWith('--ignore=') || a.startsWith('--exclude=')) {
+      const v = a.slice(a.indexOf('=') + 1);
+      if (!v) {
+        process.stderr.write(`❌ ${a} 缺少值\n`);
+        process.exit(1);
+      }
+      ignores.push(v);
+      continue;
+    }
+    if (a.startsWith('-')) {
+      process.stderr.write(`❌ 未知选项 ${a}（用 --help 查看用法）\n`);
+      process.exit(1);
+    }
+    if (target === null) target = a;
+    else {
+      process.stderr.write(`❌ 只接受一个目标路径，多给了: ${a}\n`);
+      process.exit(1);
+    }
+  }
+
+  if (!target) {
+    process.stderr.write('❌ 缺少目标：需要 <css文件或目录>（用 --help 查看用法）\n');
+    process.exit(1);
+  }
+
+  const abs = path.resolve(target);
+  if (!fs.existsSync(abs)) {
+    process.stderr.write(`❌ 路径不存在: ${abs}\n`);
+    process.exit(1);
+  }
+  const st = fs.statSync(abs);
+  if (!st.isDirectory() && !st.isFile()) {
+    process.stderr.write(`❌ 不是文件也不是目录: ${abs}\n`);
+    process.exit(1);
+  }
+  if (st.isFile()) {
+    const ext = path.extname(abs).toLowerCase();
+    if (ext !== '.css' && ext !== '.vue') {
+      process.stderr.write(`❌ 只支持 .css / .vue 文件，收到: ${path.basename(abs)}\n`);
+      process.exit(1);
+    }
+  }
+
+  const allFiles = collectFiles(abs);
+  const files = filterIgnored(allFiles, ignores);
+  if (files.length === 0) {
+    process.stderr.write(
+      ignores.length
+        ? `❌ 忽略规则过滤后没有剩余文件: ${abs}（忽略: ${ignores.join(', ')}）\n`
+        : `❌ 未找到任何 .css / .vue 文件: ${abs}\n`,
+    );
+    process.exit(1);
+  }
+
+  const docs = [];
+  for (const f of files) {
+    try {
+      docs.push(analyzeFile(f));
+    } catch (err) {
+      process.stderr.write(`❌ 读取失败 ${f}: ${err && err.message ? err.message : err}\n`);
+      process.exit(1);
+    }
+  }
+
+  const metrics = computeMetrics(docs, files);
+  const checks = buildChecks(metrics);
+  const failed = checks.filter((c) => !c.pass && !c.advisory);
+
+  if (json) {
+    process.stdout.write(JSON.stringify(buildJson(abs, files, metrics, checks), null, 2) + '\n');
+  } else if (quiet) {
+    process.stdout.write(summaryLine(checks) + '\n');
+  } else {
+    process.stdout.write(renderScorecard(abs, metrics, checks) + '\n');
+  }
+
+  process.exit(failed.length === 0 ? 0 : 1);
+}
+
+main();
diff --git a/.agents/skills/frontend-craft/scripts/capture.mjs b/.agents/skills/frontend-craft/scripts/capture.mjs
new file mode 100644
index 0000000..407cbad
--- /dev/null
+++ b/.agents/skills/frontend-craft/scripts/capture.mjs
@@ -0,0 +1,454 @@
+#!/usr/bin/env node
+/**
+ * capture.mjs —— 无头浏览器多宽度截图（零依赖 · Node 18+ · 跨平台）
+ *
+ * 用途
+ *   把一个 URL（或本地 HTML 文件）在多个视口宽度下各截一张 PNG，
+ *   供 AI 或人做响应式视觉验收。
+ *
+ * 用法
+ *   node capture.mjs <url> <outDir> [选项]
+ *
+ * 选项
+ *   --widths 375,768,1440   逗号分隔的视口宽度列表（默认 375,768,1440）
+ *   --height 900            视口高度，px（默认 900）
+ *   --budget 1500           --virtual-time-budget，毫秒（默认 1500）
+ *   --scale 1               --force-device-scale-factor（默认 1）
+ *   --name shot             输出文件名前缀 → shot-<width>.png（默认 shot）
+ *   --chrome <path>         指定浏览器可执行文件（优先级最高）
+ *   --help                  显示本帮助
+ *
+ * 示例
+ *   node capture.mjs "file:///A:/proj/index.html" A:\proj\shots --widths 375,1440
+ *   node capture.mjs https://example.com .\shots --height 1200 --scale 2 --name home
+ *   node capture.mjs .\local\page.html .\shots            REM 本地路径自动转 file:///
+ *   $env:CHROME_PATH = "D:\Chrome\chrome.exe"; node capture.mjs https://example.com .\shots
+ *
+ * 浏览器探测顺序
+ *   1) --chrome <path>   2) 环境变量 CHROME_PATH   3) 自动探测：
+ *   Windows : %ProgramFiles%\Google\Chrome\Application\chrome.exe
+ *             %ProgramFiles(x86)%\Google\Chrome\Application\chrome.exe
+ *             %LOCALAPPDATA%\Google\Chrome\Application\chrome.exe
+ *             %ProgramFiles%\Microsoft\Edge\Application\msedge.exe
+ *             %ProgramFiles(x86)%\Microsoft\Edge\Application\msedge.exe
+ *   macOS   : /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
+ *   Linux   : PATH 中的 google-chrome / chromium / chromium-browser
+ *
+ * 设计与约束（重要）
+ *   - 子进程一律用 spawnSync 且 stdio: 'ignore'：绝不管道 stdout/stderr。
+ *     某些受限沙箱下管道会抛 EPERM，因此脚本完全不读取浏览器输出。
+ *   - 成功与否只看输出 PNG 是否存在且字节数 > 0（先删除旧文件再截图，避免误判）。
+ *   - 额外加了 --user-data-dir=<临时目录>：避免与本机已运行的 Chrome/Edge 争用
+ *     默认用户配置导致 headless 进程直接退出、截不出图。
+ *
+ * 退出码
+ *   0 全部成功 · 1 参数错误 / 找不到浏览器 / 截图失败
+ */
+
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { spawnSync } from 'node:child_process';
+
+const DEFAULT_WIDTHS = [375, 768, 1440];
+const CHROME_TIMEOUT_MS = 120000; // 单张截图最长等待
+
+// ───────────────────────────── 小工具 ─────────────────────────────
+
+/** 打印错误并退出 1 */
+function die(msg) {
+  process.stderr.write(`\n❌ ${msg}\n`);
+  process.exit(1);
+}
+
+/** 数字参数校验 */
+function toPositiveInt(raw, flag) {
+  const n = Number.parseInt(String(raw).trim(), 10);
+  if (!Number.isFinite(n) || n <= 0) {
+    die(`${flag} 需要一个正整数，收到: ${JSON.stringify(raw)}`);
+  }
+  return n;
+}
+
+/** 数字参数校验（允许小数，如 --scale 1.5） */
+function toPositiveNumber(raw, flag) {
+  const n = Number.parseFloat(String(raw).trim());
+  if (!Number.isFinite(n) || n <= 0) {
+    die(`${flag} 需要一个正数，收到: ${JSON.stringify(raw)}`);
+  }
+  return n;
+}
+
+/**
+ * 本地绝对路径 → file:/// URL。
+ * Windows: A:\x\y.html → file:///A:/x/y.html（保留盘符冒号，空格转 %20）
+ */
+function toFileUrl(absPath) {
+  let p = absPath.replace(/\\/g, '/');
+  if (!p.startsWith('/')) p = '/' + p; // A:/x → /A:/x，于是 file:// + /A:/x = file:///A:/x
+  // 只编码真正需要编码的字符；保留 : / 等 URL 合法字符，保证 file:///A:/x 形态
+  const safe = /[A-Za-z0-9\-._~!$&'()*+,;=:@/]/;
+  p = Array.from(p)
+    .map((ch) => (safe.test(ch) ? ch : encodeURIComponent(ch)))
+    .join('');
+  return 'file://' + p;
+}
+
+/**
+ * 解析位置参数里的 URL：
+ *   - 已有 scheme（http/https/file/...）→ 原样使用
+ *   - 本地路径（绝对 / 相对 / UNC / 盘符）→ 转 file:/// 并校验文件存在
+ */
+function normalizeTarget(input) {
+  const raw = String(input).trim();
+  if (!raw) die('缺少 <url> 参数');
+  if (/^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//.test(raw)) {
+    return { url: raw, local: /^file:\/\//i.test(raw) };
+  }
+  const abs = path.resolve(raw);
+  if (!fs.existsSync(abs)) {
+    die(`本地文件不存在: ${abs}`);
+  }
+  return { url: toFileUrl(abs), local: true, localPath: abs };
+}
+
+// ───────────────────────── 浏览器可执行文件探测 ─────────────────────────
+
+/** Windows 候选路径（严格按约定顺序） */
+function windowsCandidates() {
+  const list = [];
+  const pf = process.env['ProgramFiles'];
+  const pf86 = process.env['ProgramFiles(x86)'];
+  const localApp = process.env['LOCALAPPDATA'];
+  if (pf) list.push(path.join(pf, 'Google', 'Chrome', 'Application', 'chrome.exe'));
+  if (pf86) list.push(path.join(pf86, 'Google', 'Chrome', 'Application', 'chrome.exe'));
+  if (localApp) list.push(path.join(localApp, 'Google', 'Chrome', 'Application', 'chrome.exe'));
+  if (pf) list.push(path.join(pf, 'Microsoft', 'Edge', 'Application', 'msedge.exe'));
+  if (pf86) list.push(path.join(pf86, 'Microsoft', 'Edge', 'Application', 'msedge.exe'));
+  return list;
+}
+
+/** macOS 候选路径 */
+function macCandidates() {
+  return [
+    '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    '/Applications/Chromium.app/Contents/MacOS/Chromium',
+    '/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge',
+  ];
+}
+
+/** Linux：在 PATH 里查找命令名 */
+function linuxCandidates() {
+  const names = ['google-chrome', 'chromium', 'chromium-browser', 'google-chrome-stable'];
+  const dirs = (process.env.PATH || '').split(path.delimiter).filter(Boolean);
+  const out = [];
+  for (const name of names) {
+    for (const dir of dirs) out.push(path.join(dir, name));
+  }
+  return out;
+}
+
+/** 按平台列出候选；返回 {candidates, findInPath:boolean} */
+function candidatesForPlatform() {
+  if (process.platform === 'win32') return { candidates: windowsCandidates(), pathSearch: false };
+  if (process.platform === 'darwin') return { candidates: macCandidates(), pathSearch: false };
+  return { candidates: linuxCandidates(), pathSearch: true };
+}
+
+/** 候选是否为「可执行的普通文件」 */
+function isUsable(candidate, pathSearch) {
+  try {
+    const st = fs.statSync(candidate);
+    if (!st.isFile()) return false;
+  } catch {
+    return false;
+  }
+  if (pathSearch) {
+    try {
+      fs.accessSync(candidate, fs.constants.X_OK);
+    } catch {
+      return false;
+    }
+  }
+  return true;
+}
+
+/** 解析出浏览器路径；失败时报错并列出所有尝试过的路径 */
+function resolveChrome(explicit) {
+  // 1) --chrome 优先级最高，指定了就必须可用
+  if (explicit) {
+    const abs = path.resolve(explicit);
+    if (!isUsable(abs, process.platform !== 'win32' && process.platform !== 'darwin')) {
+      die(`--chrome 指定的浏览器不可用: ${abs}\n   请检查路径是否正确、是否为文件。`);
+    }
+    return abs;
+  }
+
+  // 2) 环境变量 CHROME_PATH：无效时给出警告并继续自动探测
+  const tried = [];
+  const fromEnv = process.env.CHROME_PATH;
+  if (fromEnv) {
+    const abs = path.resolve(fromEnv);
+    if (isUsable(abs, false)) return abs;
+    tried.push(`CHROME_PATH=${fromEnv}（不可用，已忽略）`);
+    process.stderr.write(`⚠️  环境变量 CHROME_PATH 指向的文件不可用，继续自动探测: ${abs}\n`);
+  }
+
+  // 3) 自动探测
+  const { candidates, pathSearch } = candidatesForPlatform();
+  for (const c of candidates) {
+    tried.push(c);
+    if (isUsable(c, pathSearch)) return c;
+  }
+
+  die(
+    [
+      '未找到可用的浏览器（Chrome / Edge / Chromium）。',
+      '已尝试以下位置：',
+      ...tried.map((t) => `  - ${t}`),
+      '',
+      '解决办法（任选其一）：',
+      '  - 用 --chrome "<浏览器路径>" 显式指定',
+      '  - 设置环境变量 CHROME_PATH=<浏览器路径>',
+      '  - 安装 Google Chrome 或 Microsoft Edge',
+    ].join('\n'),
+  );
+}
+
+// ───────────────────────────── 截图 ─────────────────────────────
+
+/**
+ * 用 spawnSync 跑一次 headless 截图。
+ * 注意：stdio 一律 'ignore'，不捕获任何子进程输出（受限沙箱下管道会 EPERM）。
+ */
+function captureOne({ chrome, url, outFile, width, height, budget, scale, profileDir }) {
+  // 先删掉旧文件：否则「文件存在」无法证明这次真的截成功了
+  try {
+    if (fs.existsSync(outFile)) fs.rmSync(outFile);
+  } catch {
+    /* 删不掉就让后面的校验兜底 */
+  }
+
+  const args = [
+    '--headless=new',
+    '--disable-gpu',
+    '--hide-scrollbars',
+    '--no-sandbox',
+    `--force-device-scale-factor=${scale}`,
+    `--virtual-time-budget=${budget}`,
+    `--window-size=${width},${height}`,
+    `--user-data-dir=${profileDir}`,
+    `--screenshot=${outFile}`,
+    url,
+  ];
+
+  const res = spawnSync(chrome, args, {
+    stdio: 'ignore', // 关键：绝不管道化子进程 stdio
+    timeout: CHROME_TIMEOUT_MS,
+    windowsHide: true,
+  });
+
+  // 只看输出文件：存在且字节数 > 0 即成功
+  let bytes = 0;
+  try {
+    const st = fs.statSync(outFile);
+    if (st.isFile()) bytes = st.size;
+  } catch {
+    bytes = 0;
+  }
+
+  if (bytes > 0) return { ok: true, bytes };
+
+  const why = [];
+  if (res.error) why.push(`spawn error: ${res.error.message}`);
+  if (res.signal) why.push(`被信号终止: ${res.signal}`);
+  if (typeof res.status === 'number') why.push(`退出码: ${res.status}`);
+  return {
+    ok: false,
+    bytes: 0,
+    reason: why.join(' / ') || '未知原因',
+  };
+}
+
+// ───────────────────────────── 帮助 ─────────────────────────────
+
+function printHelp() {
+  process.stdout.write(
+    [
+      'capture.mjs —— 无头浏览器多宽度截图（零依赖 · Node 18+）',
+      '',
+      '用法:',
+      '  node capture.mjs <url> <outDir> [--widths 375,768,1440] [--height 900]',
+      '                    [--budget 1500] [--scale 1] [--name shot] [--chrome <path>] [--help]',
+      '',
+      '参数:',
+      '  <url>                   http:// | https:// | file:// 开头的 URL，或本地 HTML 文件路径',
+      '                          （本地相对/绝对路径会自动转成 file:/// 形式）',
+      '  <outDir>                输出目录，不存在则递归创建',
+      '',
+      '选项:',
+      '  --widths <列表>         逗号分隔的宽度，每个宽度截一张（默认 375,768,1440）',
+      '  --height <px>           视口高度（默认 900）',
+      '  --budget <ms>           --virtual-time-budget，等待页面渲染的虚拟时间（默认 1500）',
+      '  --scale <n>             --force-device-scale-factor（默认 1；2 = 高清二倍图）',
+      '  --name <前缀>           文件名前缀，输出 <前缀>-<width>.png（默认 shot）',
+      '  --chrome <path>         浏览器可执行文件，优先于 CHROME_PATH 与自动探测',
+      '  -h, --help              显示本帮助',
+      '',
+      '示例:',
+      '  node capture.mjs "file:///A:/proj/index.html" A:\\proj\\shots --widths 375,1440',
+      '  node capture.mjs https://example.com .\\shots --height 1200 --scale 2 --name home',
+      '  node capture.mjs .\\page.html .\\shots --chrome "D:\\Chrome\\chrome.exe"',
+      '  $env:CHROME_PATH = "D:\\Chrome\\chrome.exe"; node capture.mjs https://example.com .\\shots',
+      '',
+      '说明:',
+      '  浏览器探测顺序: --chrome > 环境变量 CHROME_PATH > 自动探测（Chrome / Edge / Chromium）。',
+      '  子进程以 stdio: "ignore" 启动，完全不读取浏览器 stdout/stderr（受限沙箱下管道会 EPERM）；',
+      '  成功与否只看输出 PNG 是否存在且字节数 > 0。',
+      '  退出码: 0 全部成功；1 参数错误 / 未找到浏览器 / 任一张截图失败。',
+      '',
+    ].join('\n'),
+  );
+}
+
+// ───────────────────────────── 主流程 ─────────────────────────────
+
+function parseArgs(argv) {
+  const opts = {
+    widths: DEFAULT_WIDTHS,
+    height: 900,
+    budget: 1500,
+    scale: 1,
+    name: 'shot',
+    chrome: null,
+    help: false,
+  };
+  const positional = [];
+
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === '--help' || a === '-h') {
+      opts.help = true;
+      continue;
+    }
+    if (a.startsWith('--')) {
+      let key;
+      let val;
+      const eq = a.indexOf('=');
+      if (eq > 2) {
+        key = a.slice(2, eq);
+        val = a.slice(eq + 1);
+      } else {
+        key = a.slice(2);
+        val = argv[i + 1];
+        if (val === undefined || (val.startsWith('--') && val !== '--')) {
+          die(`选项 --${key} 缺少取值`);
+        }
+        i++;
+      }
+      switch (key) {
+        case 'widths':
+          opts.widths = String(val)
+            .split(',')
+            .map((s) => s.trim())
+            .filter(Boolean)
+            .map((s) => toPositiveInt(s, '--widths'));
+          if (opts.widths.length === 0) die('--widths 至少需要一个宽度');
+          break;
+        case 'height':
+          opts.height = toPositiveInt(val, '--height');
+          break;
+        case 'budget':
+          opts.budget = toPositiveInt(val, '--budget');
+          break;
+        case 'scale':
+          opts.scale = toPositiveNumber(val, '--scale');
+          break;
+        case 'name':
+          opts.name = String(val).trim();
+          if (!opts.name) die('--name 不能为空');
+          break;
+        case 'chrome':
+          opts.chrome = String(val).trim();
+          if (!opts.chrome) die('--chrome 不能为空');
+          break;
+        default:
+          die(`未知选项 --${key}（用 --help 查看用法）`);
+      }
+      continue;
+    }
+    positional.push(a);
+  }
+
+  if (!opts.help && positional.length < 2) {
+    die('参数不足：需要 <url> 和 <outDir>（用 --help 查看用法）');
+  }
+  opts.positional = positional;
+  return opts;
+}
+
+function main() {
+  const opts = parseArgs(process.argv.slice(2));
+  if (opts.help) {
+    printHelp();
+    process.exit(0);
+  }
+
+  const [rawUrl, rawOutDir] = opts.positional;
+  const target = normalizeTarget(rawUrl);
+
+  const outDir = path.resolve(rawOutDir);
+  fs.mkdirSync(outDir, { recursive: true }); // 递归创建输出目录
+
+  const chrome = resolveChrome(opts.chrome);
+  const safeName = opts.name.replace(/[\\/:*?"<>|]+/g, '_'); // 防文件名里混入路径分隔符
+  const profileDir = path.join(os.tmpdir(), `dsh-capture-${process.pid}`);
+
+  process.stdout.write(
+    [
+      `浏览器  ${chrome}`,
+      `目标    ${target.url}`,
+      `输出    ${outDir}`,
+      `参数    widths=${opts.widths.join(',')} height=${opts.height} budget=${opts.budget} scale=${opts.scale}`,
+      '',
+    ].join('\n'),
+  );
+
+  const started = Date.now();
+  const results = [];
+
+  for (const width of opts.widths) {
+    const outFile = path.join(outDir, `${safeName}-${width}.png`);
+    const r = captureOne({
+      chrome,
+      url: target.url,
+      outFile,
+      width,
+      height: opts.height,
+      budget: opts.budget,
+      scale: opts.scale,
+      profileDir,
+    });
+    if (r.ok) {
+      const kb = (r.bytes / 1024).toFixed(1);
+      process.stdout.write(`✅ ${String(width).padStart(4)}  ${outFile}  ${r.bytes} B (${kb} KB)\n`);
+      results.push({ width, file: outFile, bytes: r.bytes, ok: true });
+    } else {
+      process.stderr.write(`❌ ${String(width).padStart(4)}  截图失败 → ${outFile}\n      原因: ${r.reason}\n`);
+      results.push({ width, file: outFile, bytes: 0, ok: false, reason: r.reason });
+    }
+  }
+
+  const totalMs = Date.now() - started;
+  const okCount = results.filter((r) => r.ok).length;
+
+  if (okCount !== results.length) {
+    process.stderr.write(`\n完成: ${okCount}/${results.length} 张成功 · 总耗时 ${totalMs} ms\n`);
+    process.exit(1);
+  }
+
+  process.stdout.write(`\n完成: ${okCount}/${results.length} 张成功 · 总耗时 ${totalMs} ms\n`);
+  process.exit(0);
+}
+
+main();
diff --git a/.agents/skills/frontend-craft/templates/DESIGN.md b/.agents/skills/frontend-craft/templates/DESIGN.md
new file mode 100644
index 0000000..6958ddc
--- /dev/null
+++ b/.agents/skills/frontend-craft/templates/DESIGN.md
@@ -0,0 +1,126 @@
+# DESIGN.md — 视觉契约
+
+> 这份文件是本项目**视觉决策的唯一真相源**。
+> 任何生成界面的工作开始前必须先读它；任何视觉改动完成后必须回来更新它。
+> 如果代码和这份文件冲突，以这份文件为准，并修代码。
+>
+> 为什么需要它：AI 每次开新会话都从零开始。规范活在人的脑子里 = 每个新会话
+> 都要重新解释一遍，而且每次解释得都不一样。落盘一次，永久继承。
+
+**最后更新**：YYYY-MM-DD ｜ **版本**：v1
+
+---
+
+## 1. 一句话定位
+
+> 这是什么产品、给谁用、什么调性。
+
+示例：
+> 面向开发者的 AI 编码工作台。调性：**克制、密实、工具感**，不是消费级产品的活泼感。
+> 用户每天盯 8 小时，所以信息密度优先于呼吸感。
+
+**调性决定一切后续取舍**。写不出这句话，就不要开始做界面。
+
+---
+
+## 2. 参照物（Reference）
+
+**参照物是这份文件里最重要的一节。** 形容词没有信息量，"高级感"三个字
+无法转化成任何一行代码；一张图可以。
+
+| 参照图 | 取它的什么 | 不取它的什么 |
+|---|---|---|
+| `reference/linear-inbox.png` | 列表密度、分割线用法、hover 反馈克制 | 深色主题、渐变 |
+| `reference/notion-sidebar.png` | 侧栏层级、折叠交互 | 大圆角、插画风格 |
+
+### 参照物的使用方式（强制）
+
+1. 生成任何一个界面之前，**先读参照图**，再写代码。
+2. 生成之后，**截图对比**，回答："和参照图的差距在哪？"
+3. 如果参照图不在 `reference/` 里 —— 停下来，先补，不要凭记忆开始。
+
+> 参照图放哪：`docs/design/reference/`，用 `capture.mjs` 截，或手动截图。
+> 命名：`<产品>-<界面>.png`。3~5 张足够，宁少勿滥。
+
+---
+
+## 3. 设计 Token
+
+**不要在这里重复数值** —— 数值只有一个来源：`src/styles/tokens.css`。
+
+这里只记录**本项目的取舍**，例如：
+
+- 正文基准字号：13px（密集工具界面），不跟随系统
+- 只使用一个主色，语义色只有 success / warning / danger 三个
+- 圆角：控件 6px、容器 10px、弹层 16px
+- 深色模式：**暂不实现**（结构已预留，见 tokens.css 注释）
+
+---
+
+## 4. 布局骨架
+
+```
+┌────────────┬──────────────────────────────────────┐
+│            │  Header (--layout-header)            │
+│  Sidebar   ├──────────────────────────────────────┤
+│  (--layout-│                                      │
+│   sidebar) │  Content (max --layout-content-max)  │
+│            │                                      │
+└────────────┴──────────────────────────────────────┘
+```
+
+- 断点：`sm 640` / `md 768` / `lg 1024` / `xl 1280`
+- 栅格：内容区最大宽度 `--layout-content-max`，居中
+- 侧栏折叠阈值：`<1024px` 自动折叠为图标栏
+- **布局改动必须在"灰块阶段"完成**，不要等页面填满再调
+
+---
+
+## 5. 组件白名单
+
+**规则：业务代码只能使用下列原语。缺什么先补进白名单，不要就地手写样式。**
+
+| 原语 | 位置 | 用在哪 | 不要用在哪 |
+|---|---|---|---|
+| `UiButton` | `components/ui/UiButton.vue` | 所有可点击动作 | 导航（用链接） |
+| `UiInput` | `components/ui/UiInput.vue` | 单行文本输入 | 多行（用 textarea 原语） |
+| `UiSelect` | `components/ui/UiSelect.vue` | 有 ≤10 个固定选项 | 复杂选择（需要搜索时另做） |
+| `UiCard` | `components/ui/UiCard.vue` | 内容分组容器 | 页面级容器 |
+| `UiBadge` | `components/ui/UiBadge.vue` | 只读状态标识 | 可点击标签 |
+| `UiEmptyState` | `components/ui/UiEmptyState.vue` | 无数据的界面 | 加载中（用骨架屏） |
+
+**白名单之外的样式禁令**：业务组件里不得出现 `border-radius`、`box-shadow`、
+字面量颜色、间距字面量。这些只能来自原语或 token。
+
+---
+
+## 6. 页面清单 × 状态矩阵
+
+**每个页面都必须把这张表填满。** 空态 / 加载态 / 错误态不是"以后再补"，
+它们是这个页面的组成部分；漏掉它们，界面就是半成品。
+
+| 页面 | 正常态 | 加载态 | 空态 | 错误态 | 超长内容 | 无权限 |
+|---|---|---|---|---|---|---|
+| 会话列表 | ☐ | ☐ | ☐ | ☐ | ☐ | ☐ |
+| 新建项目对话框 | ☐ | ☐ | — | ☐ | ☐ | — |
+| 工作台首页 | ☐ | ☐ | ☐ | ☐ | ☐ | ☐ |
+
+（`—` = 该状态不适用，必须显式写出理由，不能留空）
+
+---
+
+## 7. 禁止事项
+
+见 `docs/design/anti-patterns.md`。**那份文件是强制阅读的**，且随踩坑持续增补。
+
+---
+
+## 8. 变更流程
+
+1. 想改视觉 → **先改这份文档**
+2. 文档改完 → 改 `tokens.css`（如果需要）
+3. 最后才改页面/组件
+4. 改完跑 `audit-css.mjs` + 截图验收（见 `qa-checklist.md`）
+
+> 反过来做（先改页面、文档不管）就是漂移的开始。
+> 漂移不是一次大错，是 30 次没记录的小改动。
diff --git a/.agents/skills/frontend-craft/templates/anti-patterns.md b/.agents/skills/frontend-craft/templates/anti-patterns.md
new file mode 100644
index 0000000..4608350
--- /dev/null
+++ b/.agents/skills/frontend-craft/templates/anti-patterns.md
@@ -0,0 +1,219 @@
+# anti-patterns.md — 视觉禁飞区
+
+> **强制阅读。** 每次生成或修改界面之前读一遍。
+> 这份清单比"应该怎么做"更有效 —— 因为它列的都是**具体动作**，
+> 而"要有高级感"不是动作，无法执行。
+>
+> 增补规则：每次验收发现新问题时，先往这里加一条，再改代码。
+
+---
+
+## 一、颜色
+
+### AP-01 新增 `:root` 块或新的变量定义处
+
+- **长什么样**：`tokens.css` 里有一个 `:root`，另一个文件（或同文件后半段）又写了一个。
+- **为什么坏**：多个 `:root` 会**静默覆盖**，最终生效的值取决于文件加载顺序 ——
+  这不是设计，是事故。真实案例：某项目 3 个 `:root` 块，`--accent-strong` 被覆盖成
+  新值，但旧值仍作为字面量出现在 3 处，同一语义两种颜色共存。
+- **正确做法**：全项目只有一个 `:root`（在 `tokens.css`）。改值就改那一个。
+- **机器可查**：`audit-css.mjs` 的 `:root` 块数，阈值 1。
+
+### AP-02 写颜色字面量
+
+- **长什么样**：`color: #356b63;` / `background: rgba(47,47,47,0.07);`
+- **为什么坏**：字面量无法被检索、无法被统一修改。每一次写新字面量，
+  都是"重新发明一个值"—— 7 个几乎一样的绿色就是这么来的。
+- **正确做法**：`color: var(--c-text-secondary);`
+- **例外**：仅当颜色是**内容本身**（如用户头像的哈希色、SVG 图表数据色）。
+  必须加注释说明为什么不能用 token。
+- **机器可查**：stylelint `declaration-property-value-disallowed-list`。
+
+### AP-03 为同一个语义造第二个 token
+
+- **长什么样**：已经有 `--c-text-secondary` 了，又加 `--muted`、`--ink-muted`、`--text-dim`。
+- **为什么坏**：三个名字一个意思，用哪个全凭当轮心情 → 漂移。
+- **正确做法**：先 grep 现有 token 名，找语义最接近的复用。真的语义不同才新增，
+  并在 `tokens.css` 注释里写清"和 X 的区别是什么"。
+
+### AP-04 引入第二套灰
+
+- **长什么样**：项目里同时有 Tailwind 的 `#94a3b8/#64748b/#475569` 和自定义的 `#9aa39f/#a0aaa5`。
+- **为什么坏**：两套灰的色温不同，并排出现时**整体看起来发脏**，
+  但单独看每个值都很正常 —— 所以极难自查。
+- **正确做法**：只用 `tokens.css` 里的中性色阶。用了组件库就把它主题变量
+  映射到自己的 token 上，不要两套并存。
+
+### AP-05 混用多个阴影基色
+
+- **长什么样**：`rgba(0,0,0,.05)`、`rgba(38,50,56,.07)`、`rgba(15,23,42,.06)` 混用。
+- **为什么坏**：阴影是最容易露馅的地方 —— 基色不同的阴影在浅色底上
+  呈现不同的偏色，看起来"脏"且不统一。
+- **正确做法**：所有阴影一个基色，只改 alpha。
+
+---
+
+## 二、尺寸与节奏
+
+### AP-06 间距/字号/圆角写裸 px
+
+- **长什么样**：`padding: 13px 19px;` / `font-size: 14px;` / `border-radius: 11px;`
+- **为什么坏**：真实案例 —— 某项目 1313 行 CSS 里只有 **31 次 `var()`**，
+  约 97% 是硬编码；产出 21 种圆角、19 种字号、16 种近白背景。
+  **不是因为某个值错了，而是因为没人负责"不许发明新值"。**
+- **正确做法**：`padding: var(--space-12) var(--space-24);`
+- **例外**：`1px` 边框线宽、`100%`/`50%` 几何值、`1px` 定位微调。
+- **机器可查**：stylelint `declaration-property-unit-disallowed-list`。
+
+### AP-07 发明中间档位
+
+- **长什么样**：已经有 12px 和 13px，又写 `font-size: 12.5px` 或 `10.5px`；
+  圆角已经是 10 和 12，又写 11。
+- **为什么坏**：人眼分辨不出 11 和 12 的差别，但**能**察觉到"这个界面很乱"。
+  中间档只增加噪音，不增加信息。
+- **正确做法**：要么用现有档位，要么承认现有档位错了 —— 改 token，
+  不要在调用点打补丁。
+
+### AP-08 字号分布倒挂
+
+- **长什么样**：12px 用了 32 次，13px（正文基准）只用了 14 次；同时存在 8px 和 9px。
+- **为什么坏**：说明没有正文基准，每次都是"我觉得这里小一点"。
+  标注的是无意义的细节（8px 没人读得清），真正需要层级的正文反而没有体系。
+- **正确做法**：先定正文基准（密集工具界面 13px / 阅读型 15~16px），
+  其余档位相对它分布，且相邻档差 ≥2px。
+
+### AP-09 圆角与元素大小不匹配
+
+- **长什么样**：28px 高的按钮用 `border-radius: 16px`；大卡片用 `4px`。
+- **为什么坏**：圆角应该是"元素尺度的函数"，不是自由参数。
+  小元件配大圆角会显得笨拙，大容器配小圆角会显得廉价。
+- **正确做法**：控件 `--radius-sm`、容器 `--radius-md`、大容器/弹层 `--radius-lg`。
+
+---
+
+## 三、迭代方式（最隐蔽的一类）
+
+### AP-10 追加 `/* refinement */` 覆盖块
+
+- **长什么样**：
+  ```css
+  /* Composer refinement: context, task input, and explicit actions. */
+  .composer { ... }   /* 第三次定义 .composer */
+  ```
+- **为什么坏**：**这是 CSS 膨胀的头号来源，也是这类界面最该禁止的一条。**
+  每次说"改成 X"，AI 就在文件末尾追加一段覆盖样式而不是修改原规则。
+  真实案例：某文件 453 条规则只覆盖 387 个选择器，66 条是重复声明；
+  文件里的注释就是一部迭代史，6 段 refinement 层层覆盖。
+  后果：改一处要读三处，删一段不知道会不会塌，新人无法接手。
+- **正确做法**：**改原规则。** 找到定义该选择器的那一处，直接改。
+  确实需要覆盖时（媒体查询、状态修饰符）必须由选择器本身表达，不是靠顺序。
+- **机器可查**：`audit-css.mjs` 的**冗余声明（同属性重复声明）**数，阈值 0 ——
+  同一选择器下同一个属性被声明多次，后一条必然覆盖前一条，删掉前一条不改渲染。
+  > 「同一选择器分散在多块」已降级为**提示项**，不再是硬门：各块声明的属性互不
+  > 重叠时它并不冗余；要把它归零只能合并块，而合并会把声明搬到文件更靠后处、
+  > 从而改变它与其它同特异性选择器之间的先后关系 —— 有渲染风险，不适合当硬门。
+
+### AP-11 "顺便优化"
+
+- **长什么样**：让它改按钮颜色，它顺手把圆角、间距、另一个组件的字体也调了。
+- **为什么坏**：单次改动不可审查、不可回滚；更重要的是 —— 这些"顺手"的改动
+  没有经过你确认，累积起来就是无人负责的漂移。
+- **正确做法**：提示词里显式写：
+  > 只做我要求的事。发现其他问题请**单独列出来**，不要顺手改。
+  > 每一条改动都要能对应到我要求里的某一句话。
+
+### AP-12 一次改多个维度
+
+- **长什么样**："把界面改好看一点，顺便调下间距和配色。"
+- **为什么坏**：多个维度同时变，出问题时无法定位是哪个维度导致的；
+  也无法判断哪个维度变好了。而且 AI 在多个维度上同时"创作"，
+  每个维度都更容易失控。
+- **正确做法**：一次只改一个维度（对齐 → 间距 → 灰度 → 圆角 → 颜色）。
+  改完截图看一下，再动下一个。
+
+### AP-13 用形容词下需求
+
+- **长什么样**："让它看起来更高级 / 更现代 / 更清爽。"
+- **为什么坏**：形容词没有可执行的落点。AI 会各自解释"高级"，
+  同一句话在两个会话里产出两种完全不同的界面。
+- **正确做法**：给数值或给参照图。
+  - 数值："行高从 1.4 提到 1.6"、"主按钮用 --c-accent"
+  - 参照："看 reference/linear-inbox.png，取它的列表行高和分割线用法"
+
+### AP-14 用同一个长会话连续做界面
+
+- **长什么样**：在同一个 session 里从第一个组件聊到第十个页面。
+- **为什么坏**：AI 会**复制自己早期的输出**（复制偏差）——包括早期的坏决定。
+  越到后面越像前面的，而不是越像规范。
+- **正确做法**：一个界面开一次会话，但每次都带上同一份 `DESIGN.md`。
+  规范活在仓库里，不活在对话历史里。
+
+---
+
+## 四、交互状态
+
+### AP-15 只有正常态
+
+- **长什么样**：页面只有"有数据"的样子。空列表是一片白，请求失败是控制台报错。
+- **为什么坏**：空态和错态占用户实际看到的时间**不低**（新用户第一次打开就是空态）。
+  只做正常态的界面，对真实用户而言是半成品。
+- **正确做法**：每个页面的状态矩阵（正常/加载/空/错误/超长内容/无权限）全部实现。
+  **先做空态和错态，再做正常态** —— 顺序反了就永远补不上。
+
+### AP-16 缺失焦点态 / 禁用态 / hover 态
+
+- **长什么样**：输入框 tab 进去看不出来；禁用按钮和可用按钮长得一样。
+- **为什么坏**：键盘用户无法定位；禁用态不可辨识会让人反复点击。
+- **正确做法**：每个交互原语必须覆盖 `default / hover / focus-visible / disabled`。
+  焦点态用 `outline`，**禁止 `outline: none` 而没有替代方案**。
+
+### AP-17 同行控件视觉重量不一致
+
+- **长什么样**：一行里下拉框 32px 高、输入框 36px 高、按钮 28px 高；
+  或者一个是实心一个是描边一个是纯文本，却代表同一级操作。
+- **为什么坏**：这是"看起来不专业"最直接的原因，且单看每个控件都很正常。
+- **正确做法**：同行控件高度取自同一档 `--control-h-*`；
+  同一层级的操作用同一 variant。**先把这行的控件高度对齐，再谈美观。**
+
+### AP-18 把控件状态当正文写进页面
+
+- **长什么样**：Hero 大标题下面写一行 `独立会话仓库上下文模型代号`。
+- **为什么坏**：模型名是下拉框的**状态**，不是文案。它既重复了 composer 里已有的信息，
+  又因为混在正文里而语义不明（读者不知道这串字符是什么）。
+  这是**信息架构错误**，不是样式错误 —— 调字号救不了它。
+- **正确做法**：状态归属它所属的控件。确实要在正文里提及时，
+  用完整的自然语言句子，并放在它服务的那句话旁边。
+
+### AP-19 一个界面多个主色互相打架
+
+- **长什么样**：logo 深绿、主按钮深绿、状态徽标亮青、发送按钮中性灰。
+- **为什么坏**：眼睛找不到"哪个是品牌色"。主色的作用是建立识别，
+  分裂成两三个之后就不再是主色了。
+- **正确做法**：一个主色。需要区分的状态用语义色（success/warning/danger），
+  不要另造一个品牌色。
+
+---
+
+## 五、可维护性
+
+### AP-20 组件直接发请求
+
+- **长什么样**：`onMounted(async () => { const r = await fetch('/api/...') })`
+- **为什么坏**：接口一改要改 N 个组件；无法统一处理错误/鉴权/加载态；
+  无法在没有后端时开发界面。
+- **正确做法**：唯一网络出口（`api/client.ts`），组件只调 typed 函数。
+  契约层先行 + mock，见 `references/bootstrap.md`。
+
+### AP-21 `!important`
+
+- **长什么样**：`color: var(--c-text) !important;`
+- **为什么坏**：几乎总是 AP-10 的后遗症 —— 因为重复规则打架，只好用 `!important` 压。
+  一旦开始，就再也停不下来。
+- **正确做法**：修根因（删掉重复的旧规则），不要加 `!important`。
+
+### AP-22 内联 `style="..."`
+
+- **为什么坏**：绕过了所有 token 和审查；无法被 lint 覆盖。
+- **正确做法**：用 class 或原语组件的 props。
+- **例外**：真正动态计算的值（如进度条宽度 `style="width: 42%"`），
+  且必须只涉及几何量，不涉及颜色/字体。
diff --git a/.agents/skills/frontend-craft/templates/qa-checklist.md b/.agents/skills/frontend-craft/templates/qa-checklist.md
new file mode 100644
index 0000000..e9e564b
--- /dev/null
+++ b/.agents/skills/frontend-craft/templates/qa-checklist.md
@@ -0,0 +1,146 @@
+# qa-checklist.md — 视觉验收清单
+
+> **用法**：截图 → 对着这张清单逐条回答 → 发现问题 → 改 → 再截图。
+> 每条都必须能用"看截图"回答。答不上来的条目说明截图拍得不对，不是清单有问题。
+>
+> 检查顺序**不能变**。前 3 组是结构问题，结构不对时调颜色毫无意义 ——
+> 在第 1 组就失败的情况下修第 5 组，是纯粹的浪费时间。
+
+---
+
+## 0. 截图准备（先做这个，否则后面全是猜）
+
+- [ ] 截了**正常态**（有数据）
+- [ ] 截了**空态**（无数据）—— 新用户看到的就是这个
+- [ ] 截了**加载态**（pending / 骨架屏）
+- [ ] 截了**错误态**（请求失败）
+- [ ] 截了**超长内容**（长标题、长列表、长 URL 不溢出）
+- [ ] 截了**窄宽度**（375px）和**常规宽度**（1280px+）
+- [ ] 截图能看清细节（≥1x 缩放，不是缩略图）
+- [ ] 截图时**隐藏了滚动条与光标**，避免干扰判断
+
+> 截图命令：`node scripts/capture.mjs <url-or-file> shots --widths 375,1280`
+> 没有截图就等于没有验收。**"我觉得应该没问题"不是验收。**
+
+---
+
+## 1. 对齐与栅格（最优先 —— 错了后面都白搭）
+
+- [ ] 页面上**所有元素**的左边缘，只落在**少数几条垂直线**上？（2~4 条）
+- [ ] 相邻区块的间距，看起来是**同一个值**吗？（不是"差不多"）
+- [ ] 侧栏/内容/页边距的边界在整个页面上下**一致**吗？
+- [ ] 有没有元素比同级元素**多缩进或少缩进** 2~6px？（这是最常见的肉眼可辨错位）
+- [ ] 卡片内部的 padding，和卡片之间的 gap，数值是**同一套**吗？
+- [ ] 图标和它旁边的文字**垂直居中对齐**吗？
+- [ ] 表单的 label 和它的输入框左边缘对齐吗？
+
+> **判据**：闭上眼睛再睁开，视线扫过页面 —— 有没有哪里"跳"一下？
+> 有就是对齐问题，不是颜色问题。
+
+---
+
+## 2. 层级与灰度（信息层级是否可读）
+
+- [ ] 文字灰度**不超过 4 档**？（数一下：正文 / 次级 / 弱化 / 强调）
+- [ ] 有没有两种灰**肉眼几乎分不出**却同时存在？（#6b6b6b 和 #6b7780 这种）
+- [ ] 页面看起来会不会**"发脏"**？发脏通常是两套灰色混用。
+- [ ] 标题和正文字号的差距，是**一眼能看出层级**的吗？
+- [ ] 有没有 10px 以下的文字？没有内容重要到需要 8px 才能表达。
+- [ ] 次级信息（说明、时间戳、元数据）是不是**真的比正文弱**，
+      而不只是"小一号"？
+
+> **判据**：眯起眼睛看截图（或把截图缩小到 25%）。
+> 层级还在吗？还在 = 层级是对的；糊成一片 = 只有字号差别，没有视觉层级。
+
+---
+
+## 3. 控件一致性（"看起来专业"的核心）
+
+- [ ] 同一行里的按钮/输入框/下拉框，**高度完全相同**吗？（逐个量）
+- [ ] 所有同类控件的**圆角**是同一个值吗？
+- [ ] 所有输入框（input/textarea/select）的**边框色和内边距**一致吗？
+- [ ] 代表同一级操作的按钮，用的是**同一个 variant** 吗？
+- [ ] 主操作按钮在页面上是否**唯一且显眼**？
+- [ ] 按钮里的文字和图标之间的间距一致吗？
+- [ ] 有没有两个控件视觉重量相同、但语义层级不同？（会让人不知道点哪个）
+
+> **判据**：把所有按钮裁下来排成一行，它们看起来像**同一个设计系统的产物**吗？
+> 有一个不像，就是它的问题。
+
+---
+
+## 4. 间隔节奏
+
+- [ ] 所有间距都来自 `--space-*` 这套值吗？（数一下有几个不同的间距值）
+- [ ] 不同间距值的总数**≤7** 吗？
+- [ ] 相关元素之间的间距，**小于**不相关元素之间的间距吗？
+      （接近性原则 —— 反了会让分组关系读错）
+- [ ] 区块之间的留白，会不会某一个特别大、显得像漏了内容？
+- [ ] 页面顶部的留白和底部的留白，量级是否合理？
+
+---
+
+## 5. 颜色
+
+- [ ] 有彩色（非灰）总数**≤4** 吗？（主色 + success + warning + danger）
+- [ ] 主色在全页只出现**一处**作为品牌识别，而不是三四个地方各一个绿吗？
+- [ ] 有没有**孤立的颜色**（只用了一次、来历不明）？
+- [ ] 语义色用得对吗？成功的事是绿的，危险的事是红的？
+- [ ] 浅色底上的深色文字，和深色底上的浅色文字，**对比度都够**吗？
+- [ ] 有没有用颜色**单独**传达信息？（色盲用户看不到 —— 需要配图标或文字）
+
+> 对比度速查（WCAG AA，正文 4.5:1）：
+> `#1c2321` on `#ffffff` ≈ 14.9:1 ✓ ｜ `#5a6561` on `#ffffff` ≈ 6.4:1 ✓
+> `#8a938f` on `#ffffff` ≈ 3.2:1 ✗ **不要用它写正文**，只用于弱化标注
+> 校验工具：浏览器 DevTools 的对比度提示，或任意 contrast checker。
+
+---
+
+## 6. 交互状态（对照检查，不是看截图就能发现的）
+
+- [ ] 每个可点击元素的 **hover** 态有变化吗？
+- [ ] 用 Tab 键走一遍：**每一个**可聚焦元素都有可见焦点环吗？
+- [ ] 有没有 `outline: none` 而没有替代焦点样式？
+- [ ] 禁用态和可用态**一眼可分**吗？
+- [ ] 加载中时，可点击元素是否被禁用（防重复提交）？
+- [ ] 操作成功/失败后有反馈吗（toast / 内联错误）？
+
+---
+
+## 7. 文本健壮性
+
+- [ ] 把标题换成 3 倍长度的文字，布局会**崩**吗？
+- [ ] 长英文单词/URL 会溢出容器吗？（需要 `overflow-wrap: anywhere`）
+- [ ] 长列表滚动时，表头/工具栏是否保持可用（sticky）？
+- [ ] 数字列是等宽对齐的吗？（否则列表看起来参差）
+- [ ] 中文和英文混排时，间距看起来自然吗？
+
+---
+
+## 8. 和参照物对比（最后一关，也是最能提升的一关）
+
+- [ ] 把截图和 `docs/design/reference/` 里的参照图**并排**打开
+- [ ] 列出 **3 个具体差距**（不是"感觉不如它好看"，而是"它的列表行高更大"这种）
+- [ ] 这 3 个差距里，有没有属于前面 1~7 组已经检查过的？
+      （有 → 前面的检查漏了，回去补）
+- [ ] 剩下的差距里，挑**一个**改，再截图对比。
+
+> **不要一次改三个差距。** 一次一个，改完对比，确认变好了再下一个。
+> 同时改多个 = 无法归因 = 明天又漂回去。
+
+---
+
+## 验收失败怎么办
+
+| 失败组 | 优先修什么 | 不要做什么 |
+|---|---|---|
+| 1 对齐 | 统一间距值和左边缘 | 不要先调颜色 |
+| 2 灰度 | 删掉多余的灰，收敛到 4 档 | 不要加新颜色来"区分" |
+| 3 控件 | 统一高度和圆角 | 不要给单个控件做特例 |
+| 4 间隔 | 归到 `--space-*` | 不要手工试数值 |
+| 5 颜色 | 删掉孤立色 | 不要保留"因为这个页面特殊" |
+| 6 状态 | 补全 hover/focus/disabled | 不要用 `!important` 压 |
+| 7 文本 | 加 `overflow-wrap` / `min-width: 0` | 不要写死宽度 |
+| 8 参照 | 一次改一个差距 | 不要同时改三个 |
+
+**任何一次修完，回到第 0 步重新截图。** 没有重新截图 = 没有修完。
diff --git a/.agents/skills/frontend-craft/templates/stylelint.config.mjs b/.agents/skills/frontend-craft/templates/stylelint.config.mjs
new file mode 100644
index 0000000..a21bbeb
--- /dev/null
+++ b/.agents/skills/frontend-craft/templates/stylelint.config.mjs
@@ -0,0 +1,177 @@
+/**
+ * stylelint.config.mjs — 设计系统硬约束
+ * ----------------------------------------------------------------------------
+ * 放在项目根目录。这是四层约束里的**第三层（可执行检查）**。
+ *
+ * 它为什么比 SKILL.md 里的文字规则强：文字规则被违反时，没有任何事情发生；
+ * 这里被违反时，命令**报错并返回非零退出码** —— 可以挂到 CI 或 pre-commit 上。
+ * 一句话规则弱于一个会失败的构建。
+ *
+ * 安装：
+ *   npm i -D stylelint stylelint-config-standard postcss-html
+ * 运行：
+ *   npx stylelint "src/**\/*.{css,vue}"
+ * package.json：
+ *   "lint:css":     "stylelint \"src/components/ui/**\/*.vue\" \"src/components/layout/**\/*.vue\""
+ *   "lint:css:all": "stylelint \"src/**\/*.{css,vue}\""
+ *
+ * ⚠️ 迁移期策略：`lint:css` 只卡**新代码**（ui/ 与 layout/），legacy 的
+ * `src/styles/main.css` 用 `npm run audit` 跟踪收敛进度，不进这个硬门 ——
+ * 否则一开就是 600+ 条报错，人会习惯性忽略输出，等于没开。
+ * 阶段二把 main.css 收敛完后，把 `lint:css` 的 glob 换成 `src/**\/*.{css,vue}`。
+ *
+ * ⚠️ 落地策略：**先只开 error**，把现有违规清完。一次性开满会让人
+ * 习惯性忽略输出 —— 那就等于没开。建议首批只保留第 1、2、4、6 组。
+ */
+export default {
+  extends: ['stylelint-config-standard'],
+
+  rules: {
+    /* ======================================================================
+     * 1. 禁止颜色字面量（AP-02 / AP-04）
+     * ----------------------------------------------------------------------
+     * 只允许 var() 与透明/继承类关键字。
+     * 内容色（图表数据、用户头像哈希色）用行内豁免：
+     *   background: #ff0000; // stylelint-disable-line -- 图表数据色
+     * ==================================================================== */
+    'declaration-property-value-disallowed-list': {
+      '/^.*$/': [
+        '/#[0-9a-fA-F]{3,8}\\b/',
+        '/\\brgba?\\s*\\(/',
+        '/\\bhsla?\\s*\\(/',
+      ],
+      // 无障碍：焦点环是键盘用户唯一的导航手段，不要删掉（AP-16）
+      'outline': ['none'],
+      'outline-style': ['none'],
+      // 魔法 z-index：必须是 var(--z-*)（AP-06 的近亲）
+      'z-index': ['/^\\d+$/'],
+    },
+
+    /* ======================================================================
+     * 2. 禁止设计维度写裸 px（AP-06 / AP-07 / AP-09）
+     * ----------------------------------------------------------------------
+     * 这些属性只允许 var()、0、%（var 无单位，所以不会被误伤）。
+     * 注意：**不包括** border-width —— 1px 边框是合法例外。
+     * ==================================================================== */
+    'declaration-property-unit-disallowed-list': {
+      'padding': ['px', 'rem', 'em'],
+      'padding-top': ['px', 'rem', 'em'],
+      'padding-right': ['px', 'rem', 'em'],
+      'padding-bottom': ['px', 'rem', 'em'],
+      'padding-left': ['px', 'rem', 'em'],
+      'margin': ['px', 'rem', 'em'],
+      'margin-top': ['px', 'rem', 'em'],
+      'margin-right': ['px', 'rem', 'em'],
+      'margin-bottom': ['px', 'rem', 'em'],
+      'margin-left': ['px', 'rem', 'em'],
+      'gap': ['px', 'rem', 'em'],
+      'row-gap': ['px', 'rem', 'em'],
+      'column-gap': ['px', 'rem', 'em'],
+      'font-size': ['px', 'rem', 'em'],
+      'border-radius': ['px', 'rem', 'em'],
+      'box-shadow': ['px'], // 阴影里允许 0，允许 var()
+    },
+
+    /* ======================================================================
+     * 3. 禁止 !important（AP-21）
+     * ==================================================================== */
+    'declaration-no-important': true,
+
+    /* ======================================================================
+     * 4. 重复选择器（AP-10 的机器检测 —— 最该开的一条）
+     * ----------------------------------------------------------------------
+     * 先分清两个指标，它们的地位不同：
+     *   硬门 =「冗余声明（同属性重复声明）」= 0 —— 同一上下文、同一选择器下
+     *     同一个属性被声明多次，后一条必然覆盖前一条，删掉前一条不改渲染。
+     *     这一条由 `scripts/audit-css.mjs` 度量（redundantDeclarations）。
+     *   提示项 =「同一选择器分散在多块」—— 各块声明的属性互不重叠时它并不冗余；
+     *     要把它归零只能合并块，而合并会把声明搬到文件更靠后处、改变它与其它
+     *     同特异性选择器之间的先后关系 —— 有渲染风险，不能当硬门。
+     *
+     * 下面这条规则检测的是"同一个选择器在同一个文件里被定义了两次"，
+     * 正是 "refinement 追加块" 的指纹：
+     *   .composer { ... }        <- 第一次
+     *   ...
+     *   .composer { ... }        <- 第四次的覆盖
+     * 它是**早期信号**：见到这个指纹就去看那个选择器下有没有同属性被重复声明
+     * （那才是硬门要清掉的东西），而不是为了把计数清零去合并块。
+     * ==================================================================== */
+    'no-duplicate-selectors': true,
+    'no-descending-specificity': true,
+    'no-duplicate-at-import-rules': true,
+    'block-no-empty': true,
+
+    /* ======================================================================
+     * 5. 禁止魔法数值
+     * ----------------------------------------------------------------------
+     * z-index 必须走 --z-*，否则会长出 9999 这类值。
+     * （这条已合并进规则 1 的对象里，见文件末尾说明）
+     * ==================================================================== */
+
+    /* ======================================================================
+     * 6. 选择器纪律（AP-20 的间接约束）
+     * ----------------------------------------------------------------------
+     * 深层嵌套 = 无法安全修改 = 只能追加覆盖 = 回到 AP-10。
+     * 不需要 !important 的 CSS，几乎总是选择器层级合理的 CSS。
+     * ==================================================================== */
+    'selector-max-id': 0,
+    'selector-max-compound-selectors': 4,
+    'selector-max-specificity': '0,4,0',
+    'max-nesting-depth': 3,
+
+    /* ======================================================================
+     * 7. 格式（沿用 standard，按实际需要放宽）
+     * ----------------------------------------------------------------------
+     * 下面几条都是「跑起来才发现」的：standard 的默认值与真实组件写法冲突，
+     * 而冲突的一方是 standard 错了。装好之后**务必真的跑一次**
+     * `npx stylelint "src/**\/*.vue"`，否则这些冲突不会暴露 ——
+     * 一份从没被执行过的配置，和没有配置是一样的。
+     * ==================================================================== */
+    'comment-empty-line-before': null,
+    'custom-property-empty-line-before': null,
+
+    // BEM：放行 ui-button / ui-button__icon / ui-button--sm。
+    // standard 默认只认 kebab-case，会把整套 BEM 判成 86 个错误。
+    // 这条正则只拦真正想拦的东西：camelCase 与 PascalCase 的漂移。
+    'selector-class-pattern': '^[a-z][a-z0-9]*(?:[-_]{1,2}[a-z0-9]+)*$',
+
+    // 降级为 warning：这条规则确实能抓到真实缺陷，但它与
+    // 「状态必须显式排序（default → hover → focus → active → disabled）」
+    // 的约定直接冲突 —— 按状态顺序写就必然违反它。保留为提示，不阻塞构建。
+    'no-descending-specificity': [true, { severity: 'warning' }],
+
+    // currentColor 是规范里的标准拼写，放行 lowercase 检查
+    'value-keyword-case': ['lower', { ignoreKeywords: ['currentColor'] }],
+
+    // 原生 select 的外观复位必须带 -webkit- 前缀才能在 Safari 生效
+    'property-no-vendor-prefix': [true, { ignoreProperties: ['-webkit-appearance'] }],
+  },
+
+  ignoreFiles: [
+    'node_modules/**',
+    'dist/**',
+    '**/*.min.css',
+    // token 文件本身当然要写颜色和 px —— 它就是唯一真相源（AP-01）
+    'src/styles/tokens.css',
+  ],
+
+  overrides: [
+    {
+      files: ['**/*.vue'],
+      customSyntax: 'postcss-html',
+    },
+  ],
+};
+
+/* ============================================================================
+ * stylelint 原生覆盖不到、必须靠 scripts/audit-css.mjs 的两项检查：
+ *   - `:root` 块数量（AP-01）—— stylelint 没有"跨块计数"能力
+ *   - 颜色近重复聚类（AP-02 的深层形态）—— 需要计算色距，不是模式匹配
+ *   - 近白背景数量、字号档位分布（AP-07 / AP-08）
+ * 这四项是 audit 脚本存在的理由。
+ *
+ * 校验本配置本身是否可用：
+ *   npx stylelint --print-config src/styles/main.css > /dev/null
+ * 如果报 "Unknown rule"，说明该 rule 在当前 stylelint 大版本里不存在，
+ * 删掉它 —— 不要留着一个从没被执行过的规则假装有约束。
+ * ==========================================================================*/
diff --git a/.agents/skills/frontend-craft/templates/tokens.css b/.agents/skills/frontend-craft/templates/tokens.css
new file mode 100644
index 0000000..e62c1cc
--- /dev/null
+++ b/.agents/skills/frontend-craft/templates/tokens.css
@@ -0,0 +1,245 @@
+/* ============================================================================
+ * tokens.css — 设计系统唯一真相源
+ * ----------------------------------------------------------------------------
+ * 这是整套前端视觉的**唯一**变量定义处。
+ *
+ * 三条不可违反的规则：
+ *   1. 全项目只允许存在这一个 :root 块。任何其他文件都不许再定义 CSS 变量。
+ *   2. 页面和组件里禁止出现字面量颜色（#xxx / rgb()）用于 UI 语义。
+ *   3. 间距、字号、圆角、控件高度禁止写裸 px —— 只能用这里的变量。
+ *      （唯一例外：1px 边框线宽、100%/50% 这类几何值）
+ *
+ * 为什么这三条是铁律：
+ *   一个失守的配色体系长这样 —— 7 个几乎一样的绿色、21 种圆角、19 种字号、
+ *   24 种 rgba、3 个互相覆盖的 :root 块。它不是因为某个值选错了，
+ *   而是因为**每一轮迭代都在重新发明一个值**。这份文件的存在就是为了
+ *   让"发明新值"这个动作变得不可能。
+ *
+ * 改这个文件的方式：改值可以，加减档位要慎重。
+ *   一旦某档位被页面引用，删掉它会静默降级成默认值 —— 所以只增不删，
+ *   废弃的档位先注释掉并写清弃用日期。
+ * ==========================================================================*/
+
+:root {
+  /* --------------------------------------------------------------------------
+   * 1. 中性色阶 —— 全项目唯一的灰
+   * --------------------------------------------------------------------------
+   * 带一点点绿灰偏色，是为了和绿色主色共存时不显脏。
+   * 注意：不要再引入第二套灰（比如 Tailwind 的 slate/zinc 系）。
+   * 两套灰混用是"界面看起来发脏"的头号原因。
+   */
+  --c-bg:            #ffffff;  /* 页面底色 */
+  --c-bg-subtle:     #f7f8f8;  /* 次级底色：侧栏、代码块 */
+  --c-surface:       #ffffff;  /* 卡片、面板表面 */
+  --c-surface-hover: #f2f4f3;  /* 表面 hover */
+
+  --c-border:        #e4e7e6;  /* 默认边框、分隔线 */
+  --c-border-strong: #d3d8d6;  /* 需要强调的边框 */
+
+  --c-text:          #1c2321;  /* 正文、标题 */
+  /* 三档灰都必须过 WCAG AA（在白底上 ≥4.5:1）。改这三个值时请真的量一次对比度，
+     不要凭"看起来够灰"就定 —— 原来的 #8a938f 只有 3.2:1。 */
+  --c-text-secondary:#525d59;  /* 次级说明、标签 —— 6.8:1 */
+  --c-text-muted:    #656e6a;  /* 弱化文字、placeholder —— 5.2:1；不要用它写正文 */
+  --c-text-inverse:  #ffffff;  /* 深色底上的文字 */
+
+  /* --------------------------------------------------------------------------
+   * 2. 主色 —— 全项目只有一个
+   * --------------------------------------------------------------------------
+   * 规则：一个产品只允许有一个"品牌色"。
+   *   如果你发现自己在加第二个（比如 logo 一个绿、按钮一个青），
+   *   那不是设计，那是漂移。要么统一，要么把其中一个降级为语义色。
+   */
+  --c-accent:        #1f7667;  /* 主色：主按钮、选中态、链接 */
+  --c-accent-hover:  #1a655a;
+  --c-accent-active: #155349;
+  --c-accent-subtle: #eef5f3;  /* 主色浅底 —— 只能配 --c-accent 文字，不要配白字 */
+
+  /* --------------------------------------------------------------------------
+   * 3. 语义色 —— 只有三个，不许扩展
+   * --------------------------------------------------------------------------
+   * 不要为"信息/提示"再加一个蓝色 info：用 --c-accent 承担。
+   * 有彩色总数（accent + success + warning + danger）= 4，这是上限。
+   */
+  --c-success:        #2f7d5b;
+  --c-success-subtle: #eef7f2;
+  --c-warning:        #8f6119;  /* 在 --c-warning-subtle 上也要 ≥4.5:1 */
+  --c-warning-subtle: #fdf6e8;
+  --c-danger:         #a8453f;
+  --c-danger-subtle:  #fbefee;
+
+  /* 遮罩层：对话框/抽屉背后压暗页面用。
+   * 必须保留透明度 —— 换成不透明色会让背后内容整个消失。
+   * 三处遮罩（侧栏、项目对话框、通用对话框）各有各的 alpha 值，
+   * 统一到这一个 token 上。 */
+  --c-overlay:        rgba(20, 28, 25, 0.42);
+
+  /* --------------------------------------------------------------------------
+   * 4. 间距 —— 2px 网格，共 13 档
+   * --------------------------------------------------------------------------
+   * 规则：任何 margin / padding / gap / grid-gap 只能取下面这些值之一，
+   * 一律写成 var(--space-*)，不允许再出现 px 字面量（audit 脚本会数）。
+   *
+   * 为什么是 2px 网格而不是常见的 4px 网格：**密集工具型界面**（控件小、
+   * 行距紧、信息密度高）的真实用量大量落在 2px 网格上但不在 4px 网格上 ——
+   * 实测的间距频次分布形如 10px×45、8px×38、12px×33、14px×23、9px×21、
+   * 2px×20、5px×20、7px×18。强行用 4/8/12/16/24 这种稀疏七档，会把占 45 次
+   * 的 10px 顶到 8px、占 23 次的 14px 顶到 16px，整页布局跟着位移 ——
+   * 那等于用一个尺子去改另一个尺子的活。
+   * 反过来：阅读型 / 营销型界面间距大而疏，值本来就集中在 4px 网格上，
+   * 用稀疏刻度反而更不容易随手挑值。
+   *
+   * **token 名里的数字就是像素值**（--space-10 = 10px）。这样迁移可以机械进行
+   * （旧刻度按值一次正则替换即可），也不会因为将来插入一档而让后面所有档位
+   * 集体改名。
+   */
+  --space-2:  2px;   /* 发丝级：图标与文字之间、徽标内边距 */
+  --space-4:  4px;   /* 极紧：同一行内相邻小元素 */
+  --space-6:  6px;   /* 紧凑行的内边距 */
+  --space-8:  8px;   /* 默认小间距：列表项内边距、按钮组间隙 */
+  --space-10: 10px;  /* 最常用档：紧凑列表行内边距、卡片内边距 */
+  --space-12: 12px;  /* 卡片内边距、区块内元素间距 */
+  --space-14: 14px;  /* 稍松的行距 */
+  --space-16: 16px;  /* 区块之间的标准间距 */
+  --space-18: 18px;
+  --space-20: 20px;
+  --space-24: 24px;  /* 区块之间的大间距 */
+  --space-32: 32px;  /* 页面级留白 */
+  --space-48: 48px;  /* 空状态、主标题周围 */
+
+  /* --------------------------------------------------------------------------
+   * 5. 字号 —— 只有 7 档，档位之间必须有肉眼可辨的差距
+   * --------------------------------------------------------------------------
+   * 规则：除了下面这 7 个值，不要出现任何其他 font-size ——
+   * 包括 10.5 / 14 / 15 / 17 / 18 / 19 / 22 / 24 这些中间值，
+   * 以及 clamp(...)、em、rem 形式的字号。
+   * 人眼分不清 11 和 12 的层级差别，但**能**分辨出"整个界面有 19 种字号"。
+   *
+   * **这 7 个值不是凭空定的，是按本 App 真实用量分布推导的**（迁移时统计
+   * 全部 font-size 声明的频次：10px×20、11px×23、12px×32、13px×14、16px×7
+   * …）。前三位正好是 10 / 11 / 12，占全部声明的一半以上，所以它们被原样
+   * 保留成三档 —— 这样收敛 19 种字号时，改动面最小、界面几乎不变。
+   *
+   * 通用原则：**先量出这个 App 的频次表，再把最高频的三个值固定为
+   * xs/sm/base**，剩下的向上归并。不要照搬别处的预设档位；不要因为
+   * "看起来该是 13px" 就把这个 App 里用得最多的 12px 顶掉。
+   *
+   * 档位之间至少差 1px（10→11→12），再往上必须拉开（12→13→16→20→32），
+   * 因为人对小字号的 1px 差异敏感、对大字号的 1px 差异不敏感。
+   */
+  --text-xs:   10px;  /* 徽标、极弱化辅助信息、计数、快捷键提示 */
+  --text-sm:   11px;  /* 次级说明、元信息、状态文字 */
+  --text-base: 12px;  /* 正文基准（密集界面用量最大的档） */
+  --text-md:   13px;  /* 强调正文、列表标题、控件内文字 */
+  --text-lg:   16px;  /* 区块标题、输入区正文 */
+  --text-xl:   20px;  /* 页面标题、对话框标题 */
+  --text-2xl:  32px;  /* 主标题 / Hero */
+
+  --leading-tight:  1.25;  /* 大字号标题 */
+  --leading-snug:   1.45;  /* 短文本、控件内文字 */
+  --leading-normal: 1.6;   /* 长段落 */
+
+  /* --------------------------------------------------------------------------
+   * 6. 圆角 —— 只有 3 档 + 胶囊
+   * --------------------------------------------------------------------------
+   * 规则：禁止 7/8/9/11/12/13/14/15/17/18/22 这些值。
+   * 没人分得清 11px 和 12px，但 21 种圆角叠在一起读出来就是"随手写的"。
+   * 档位与元素大小的对应关系是固定的：
+   *   sm → 控件（按钮、输入框、下拉、徽标容器）
+   *   md → 容器（卡片、面板、弹层）
+   *   lg → 大容器（对话框、全屏面板）
+   */
+  --radius-sm:   6px;
+  --radius-md:   10px;
+  --radius-lg:   16px;
+  --radius-full: 999px;
+
+  /* --------------------------------------------------------------------------
+   * 7. 控件高度 —— 保证同行控件视觉重量同源
+   * --------------------------------------------------------------------------
+   * 这一组是"看起来专业"最容易被低估的一项。
+   * 同一行里的下拉框、输入框、按钮，高度必须完全相同 —— 否则无论
+   * 单个控件多精致，整行读起来都是"没对齐"。
+   */
+  --control-h-sm: 28px;
+  --control-h-md: 36px;
+  --control-h-lg: 44px;
+
+  /* --------------------------------------------------------------------------
+   * 8. 阴影 —— 只有 3 档，且只用一个基色
+   * --------------------------------------------------------------------------
+   * 规则：所有阴影必须用同一个 rgb 基色，只改 alpha。
+   * 混合多个基色（黑、slate、自定义深绿各一个）会让阴影看起来发脏。
+   */
+  --shadow-xs: 0 1px 2px  rgba(20, 28, 25, 0.05);
+  --shadow-sm: 0 2px 8px  rgba(20, 28, 25, 0.06);
+  --shadow-md: 0 8px 24px rgba(20, 28, 25, 0.09);
+
+  /* --------------------------------------------------------------------------
+   * 9. 动效
+   * -------------------------------------------------------------------------- */
+  --ease:      cubic-bezier(0.2, 0.7, 0.3, 1);
+  --dur-fast:  120ms;
+  --dur-base:  180ms;
+
+  /* --------------------------------------------------------------------------
+   * 10. 层级 —— 不要写 z-index: 9999
+   * -------------------------------------------------------------------------- */
+  --z-base:     0;
+  --z-sticky:   10;
+  --z-dropdown: 100;
+  --z-overlay:  1000;
+  --z-modal:    1100;
+  --z-toast:    1200;
+
+  /* --------------------------------------------------------------------------
+   * 11. 结构尺寸
+   * -------------------------------------------------------------------------- */
+  --layout-sidebar: 292px;
+  --layout-sidebar-collapsed: 76px;
+  --layout-header:  52px;
+  --layout-content-max: 960px;
+}
+
+/* ============================================================================
+ * 主题预留（深色模式）
+ * ----------------------------------------------------------------------------
+ * 结构已经留好：所有颜色都走变量，所以换主题只需要重写颜色那一段。
+ * **但下面的值必须真的设计过并校验对比度再用** —— 不要把浅色值机械反转，
+ * 那样必然产出对比度不足和发灰的界面。
+ * 最小校验要求：正文文字与背景对比度 ≥ 4.5:1，次要文字 ≥ 4.5:1。
+ *
+ * 需要重写的只有颜色类 token，间距/字号/圆角/阴影结构完全复用。
+ * ==========================================================================*/
+/*
+[data-theme="dark"] {
+  --c-bg:            #141817;
+  --c-bg-subtle:     #1b201f;
+  --c-surface:       #1f2524;
+  --c-surface-hover: #262d2b;
+
+  --c-border:        #2f3735;
+  --c-border-strong: #414b48;
+
+  --c-text:          #e8ecea;
+  --c-text-secondary:#a8b3af;
+  --c-text-muted:    #7d8884;
+  --c-text-inverse:  #141817;
+
+  --c-accent:        #4aa392;   // 深底上要提亮，否则对比度不够
+  --c-accent-hover:  #5cb4a2;
+  --c-accent-active: #72c4b3;
+  --c-accent-subtle: #16302b;
+
+  --c-success:        #56a87f;
+  --c-success-subtle: #14291f;
+  --c-warning:        #c99a4a;
+  --c-warning-subtle: #2b2113;
+  --c-danger:         #c96a63;
+  --c-danger-subtle:  #2c1917;
+
+  --shadow-xs: 0 1px 2px  rgba(0, 0, 0, 0.30);
+  --shadow-sm: 0 2px 8px  rgba(0, 0, 0, 0.35);
+  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
+}
+*/
diff --git a/.agents/skills/frontend-craft/templates/vue/UiBadge.vue b/.agents/skills/frontend-craft/templates/vue/UiBadge.vue
new file mode 100644
index 0000000..6b29d91
--- /dev/null
+++ b/.agents/skills/frontend-craft/templates/vue/UiBadge.vue
@@ -0,0 +1,67 @@
+<!-- 状态徽标：浅底 + 深字五种色调、两种尺寸，纯展示不承担按钮语义。 -->
+<script setup>
+defineProps({
+  /** 'neutral' | 'accent' | 'success' | 'warning' | 'danger' */
+  tone: { type: String, default: 'neutral' },
+  /** 'sm' | 'md' */
+  size: { type: String, default: 'sm' },
+})
+</script>
+
+<template>
+  <span class="ui-badge" :class="[`ui-badge--${tone}`, `ui-badge--${size}`]">
+    <slot />
+  </span>
+</template>
+
+<style scoped>
+.ui-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding-block: var(--space-4);
+  padding-inline: var(--space-8);
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  line-height: var(--leading-tight);
+  white-space: nowrap;
+}
+
+/* ---------- 尺寸 ---------- */
+.ui-badge--sm {
+  padding-inline: var(--space-8);
+  font-size: var(--text-xs);
+}
+
+.ui-badge--md {
+  padding-inline: var(--space-12);
+  font-size: var(--text-sm);
+}
+
+/* ---------- 色调：一律「浅底 + 深字」，不用实心 accent + 反白 ---------- */
+.ui-badge--neutral {
+  color: var(--c-text-secondary);
+  background-color: var(--c-bg-subtle);
+}
+
+.ui-badge--accent {
+  color: var(--c-accent);
+  background-color: var(--c-accent-subtle);
+}
+
+.ui-badge--success {
+  color: var(--c-success);
+  background-color: var(--c-success-subtle);
+}
+
+.ui-badge--warning {
+  color: var(--c-warning);
+  background-color: var(--c-warning-subtle);
+}
+
+.ui-badge--danger {
+  color: var(--c-danger);
+  background-color: var(--c-danger-subtle);
+}
+</style>
diff --git a/.agents/skills/frontend-craft/templates/vue/UiButton.vue b/.agents/skills/frontend-craft/templates/vue/UiButton.vue
new file mode 100644
index 0000000..f75c98f
--- /dev/null
+++ b/.agents/skills/frontend-craft/templates/vue/UiButton.vue
@@ -0,0 +1,204 @@
+<!-- 通用按钮：四种语义变体 × 三种尺寸，支持加载态、块级布局与禁用。 -->
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  /** 'primary' | 'secondary' | 'ghost' | 'danger' */
+  variant: { type: String, default: 'primary' },
+  /** 'sm' | 'md' | 'lg' */
+  size: { type: String, default: 'md' },
+  disabled: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  block: { type: Boolean, default: false },
+  type: { type: String, default: 'button' },
+})
+
+// 加载中即视为禁用，避免重复提交
+const isDisabled = computed(() => props.disabled || props.loading)
+</script>
+
+<template>
+  <button
+    class="ui-btn"
+    :class="[`ui-btn--${variant}`, `ui-btn--${size}`, { 'is-block': block }]"
+    :type="type"
+    :disabled="isDisabled"
+    :aria-busy="loading ? 'true' : undefined"
+  >
+    <span v-if="loading" class="ui-btn__spinner" aria-hidden="true"></span>
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.ui-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-8);
+  box-sizing: border-box;
+  height: var(--control-h-md);
+  padding-inline: var(--space-16);
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--radius-sm);
+  font-family: inherit;
+  font-size: var(--text-base);
+  font-weight: 500;
+  line-height: var(--leading-tight);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color var(--dur-fast) var(--ease),
+    border-color var(--dur-fast) var(--ease),
+    color var(--dur-fast) var(--ease);
+}
+
+/* 焦点必须始终可见：不使用 outline: none */
+.ui-btn:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 2px;
+}
+
+.ui-btn:disabled {
+  cursor: not-allowed;
+}
+
+/* ---------- 尺寸 ---------- */
+.ui-btn--sm {
+  height: var(--control-h-sm);
+  padding-inline: var(--space-12);
+  font-size: var(--text-sm);
+}
+
+.ui-btn--md {
+  height: var(--control-h-md);
+  padding-inline: var(--space-16);
+  font-size: var(--text-base);
+}
+
+.ui-btn--lg {
+  height: var(--control-h-lg);
+  padding-inline: var(--space-24);
+  font-size: var(--text-md);
+}
+
+.is-block {
+  display: flex;
+  width: 100%;
+}
+
+/* ---------- primary ---------- */
+.ui-btn--primary {
+  color: var(--c-text-inverse);
+  background-color: var(--c-accent);
+  border-color: var(--c-accent);
+}
+
+.ui-btn--primary:not(:disabled):hover {
+  background-color: var(--c-accent-hover);
+  border-color: var(--c-accent-hover);
+}
+
+.ui-btn--primary:not(:disabled):active {
+  background-color: var(--c-accent-active);
+  border-color: var(--c-accent-active);
+}
+
+.ui-btn--primary:disabled {
+  color: var(--c-text-muted);
+  background-color: var(--c-accent-subtle);
+  border-color: transparent;
+}
+
+/* ---------- secondary ---------- */
+.ui-btn--secondary {
+  color: var(--c-text);
+  background-color: var(--c-surface);
+  border-color: var(--c-border);
+}
+
+.ui-btn--secondary:not(:disabled):hover {
+  background-color: var(--c-surface-hover);
+  border-color: var(--c-border-strong);
+}
+
+.ui-btn--secondary:not(:disabled):active {
+  background-color: var(--c-bg-subtle);
+  border-color: var(--c-border-strong);
+}
+
+.ui-btn--secondary:disabled {
+  color: var(--c-text-muted);
+  background-color: var(--c-bg-subtle);
+  border-color: var(--c-border);
+}
+
+/* ---------- ghost ---------- */
+.ui-btn--ghost {
+  color: var(--c-text-secondary);
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.ui-btn--ghost:not(:disabled):hover {
+  color: var(--c-text);
+  background-color: var(--c-surface-hover);
+}
+
+.ui-btn--ghost:not(:disabled):active {
+  color: var(--c-text);
+  background-color: var(--c-bg-subtle);
+}
+
+.ui-btn--ghost:disabled {
+  color: var(--c-text-muted);
+  background-color: transparent;
+}
+
+/* ---------- danger ---------- */
+/* 令牌集没有 --c-danger-hover / --c-danger-active，故用「浅底 → 实心 → 浅底」
+   构成 hover / active 的可见差异，而不是自己发明颜色。 */
+.ui-btn--danger {
+  color: var(--c-danger);
+  background-color: var(--c-danger-subtle);
+  border-color: var(--c-danger);
+}
+
+.ui-btn--danger:not(:disabled):hover {
+  color: var(--c-text-inverse);
+  background-color: var(--c-danger);
+  border-color: var(--c-danger);
+}
+
+.ui-btn--danger:not(:disabled):active {
+  color: var(--c-danger);
+  background-color: var(--c-danger-subtle);
+  border-color: var(--c-danger);
+}
+
+.ui-btn--danger:disabled {
+  color: var(--c-text-muted);
+  background-color: var(--c-bg-subtle);
+  border-color: var(--c-border);
+}
+
+/* ---------- 加载指示器（纯 CSS，跟随 currentColor） ---------- */
+.ui-btn__spinner {
+  flex: none;
+  width: 1em;
+  height: 1em;
+  border: 0.125em solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: ui-btn-spin calc(var(--dur-base) * 3) linear infinite;
+}
+
+@keyframes ui-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/.agents/skills/frontend-craft/templates/vue/UiCard.vue b/.agents/skills/frontend-craft/templates/vue/UiCard.vue
new file mode 100644
index 0000000..f8f570a
--- /dev/null
+++ b/.agents/skills/frontend-craft/templates/vue/UiCard.vue
@@ -0,0 +1,78 @@
+<!-- 卡片容器：统一的表面/边框/圆角/阴影，可选页头页脚分隔线与三档内边距。 -->
+<script setup>
+defineProps({
+  /** 'none' | 'sm' | 'md' */
+  padding: { type: String, default: 'md' },
+})
+</script>
+
+<template>
+  <section class="ui-card" :class="`ui-card--pad-${padding}`">
+    <header v-if="$slots.header" class="ui-card__header">
+      <slot name="header" />
+    </header>
+
+    <div class="ui-card__body">
+      <slot />
+    </div>
+
+    <footer v-if="$slots.footer" class="ui-card__footer">
+      <slot name="footer" />
+    </footer>
+  </section>
+</template>
+
+<style scoped>
+.ui-card {
+  color: var(--c-text);
+  background-color: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-xs);
+  line-height: var(--leading-normal);
+}
+
+.ui-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-12);
+  font-size: var(--text-md);
+  font-weight: 600;
+  line-height: var(--leading-snug);
+  border-bottom: 1px solid var(--c-border);
+}
+
+.ui-card__body {
+  font-size: var(--text-base);
+}
+
+.ui-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-12);
+  font-size: var(--text-base);
+  color: var(--c-text-secondary);
+  border-top: 1px solid var(--c-border);
+}
+
+/* ---------- 内边距三档：none → 0，sm → --space-12，md → --space-16 ---------- */
+.ui-card--pad-none > .ui-card__header,
+.ui-card--pad-none > .ui-card__body,
+.ui-card--pad-none > .ui-card__footer {
+  padding: 0;
+}
+
+.ui-card--pad-sm > .ui-card__header,
+.ui-card--pad-sm > .ui-card__body,
+.ui-card--pad-sm > .ui-card__footer {
+  padding: var(--space-12);
+}
+
+.ui-card--pad-md > .ui-card__header,
+.ui-card--pad-md > .ui-card__body,
+.ui-card--pad-md > .ui-card__footer {
+  padding: var(--space-16);
+}
+</style>
diff --git a/.agents/skills/frontend-craft/templates/vue/UiEmptyState.vue b/.agents/skills/frontend-craft/templates/vue/UiEmptyState.vue
new file mode 100644
index 0000000..626bffe
--- /dev/null
+++ b/.agents/skills/frontend-craft/templates/vue/UiEmptyState.vue
@@ -0,0 +1,89 @@
+<!-- 空状态占位：让「没有数据时的界面」有一致的、体面的默认形态。 -->
+<script setup>
+defineProps({
+  title: { type: String, required: true },
+  description: { type: String, default: '' },
+})
+</script>
+
+<template>
+  <div class="ui-empty">
+    <div class="ui-empty__icon">
+      <slot name="icon">
+        <span class="ui-empty__placeholder" aria-hidden="true">
+          <span class="ui-empty__placeholder-dot"></span>
+        </span>
+      </slot>
+    </div>
+
+    <p class="ui-empty__title">{{ title }}</p>
+    <p v-if="description" class="ui-empty__description">{{ description }}</p>
+
+    <div v-if="$slots.actions" class="ui-empty__actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ui-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-12);
+  padding-block: var(--space-32);
+  padding-inline: var(--space-16);
+  text-align: center;
+}
+
+.ui-empty__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--c-text-muted);
+}
+
+/* 默认圆形占位（未提供 icon 插槽时） */
+.ui-empty__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-48);
+  height: var(--space-48);
+  border-radius: 50%;
+  background-color: var(--c-bg-subtle);
+  color: var(--c-text-muted);
+}
+
+.ui-empty__placeholder-dot {
+  width: var(--space-8);
+  height: var(--space-8);
+  border-radius: 50%;
+  background-color: currentColor;
+}
+
+.ui-empty__title {
+  margin: 0;
+  font-size: var(--text-md);
+  font-weight: 600;
+  line-height: var(--leading-snug);
+  color: var(--c-text);
+}
+
+.ui-empty__description {
+  margin: 0;
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: var(--c-text-secondary);
+}
+
+.ui-empty__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-8);
+  margin-block-start: var(--space-8);
+}
+</style>
diff --git a/.agents/skills/frontend-craft/templates/vue/UiInput.vue b/.agents/skills/frontend-craft/templates/vue/UiInput.vue
new file mode 100644
index 0000000..328e6b9
--- /dev/null
+++ b/.agents/skills/frontend-craft/templates/vue/UiInput.vue
@@ -0,0 +1,167 @@
+<!-- 文本输入框：统一的高度/圆角/边框，支持尺寸、禁用、错误态与前缀/后缀插槽。 -->
+<script setup>
+defineOptions({ inheritAttrs: false })
+
+defineProps({
+  modelValue: { type: [String, Number], default: '' },
+  placeholder: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  invalid: { type: Boolean, default: false },
+  /** 'sm' | 'md' */
+  size: { type: String, default: 'md' },
+  type: { type: String, default: 'text' },
+  /** 透传 id，供外部 <label for> 关联 */
+  id: { type: String, default: undefined },
+})
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
+
+function handleInput(event) {
+  emit('update:modelValue', event.target.value)
+}
+</script>
+
+<template>
+  <div class="ui-input" :class="[`ui-input--${size}`, { 'is-disabled': disabled }]">
+    <span v-if="$slots.prefix" class="ui-input__affix ui-input__affix--start">
+      <slot name="prefix" />
+    </span>
+
+    <input
+      v-bind="$attrs"
+      class="ui-input__field"
+      :class="{
+        'is-invalid': invalid,
+        'has-affix-start': Boolean($slots.prefix),
+        'has-affix-end': Boolean($slots.suffix),
+      }"
+      :id="id"
+      :type="type"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :aria-invalid="invalid ? 'true' : undefined"
+      @input="handleInput"
+      @focus="emit('focus', $event)"
+      @blur="emit('blur', $event)"
+    />
+
+    <span v-if="$slots.suffix" class="ui-input__affix ui-input__affix--end">
+      <slot name="suffix" />
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.ui-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+/* 边框与焦点环都放在 input 自身，避免出现「外层壳 + 内层焦点环」的双重描边 */
+.ui-input__field {
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--control-h-md);
+  padding-inline: var(--space-12);
+  color: var(--c-text);
+  background-color: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-sm);
+  font-family: inherit;
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  transition:
+    background-color var(--dur-fast) var(--ease),
+    border-color var(--dur-fast) var(--ease);
+}
+
+.ui-input__field::placeholder {
+  color: var(--c-text-muted);
+}
+
+.ui-input__field:not(:disabled):hover {
+  border-color: var(--c-border-strong);
+}
+
+.ui-input__field:focus {
+  border-color: var(--c-accent);
+}
+
+/* 焦点必须始终可见：不使用 outline: none */
+.ui-input__field:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 2px;
+}
+
+.ui-input__field.is-invalid {
+  border-color: var(--c-danger);
+}
+
+.ui-input__field.is-invalid:focus {
+  border-color: var(--c-danger);
+}
+
+.ui-input__field.is-invalid:focus-visible {
+  outline-color: var(--c-danger);
+}
+
+.ui-input__field:disabled {
+  color: var(--c-text-muted);
+  background-color: var(--c-bg-subtle);
+  border-color: var(--c-border);
+  cursor: not-allowed;
+}
+
+/* ---------- 尺寸（与 UiSelect 完全同源） ---------- */
+.ui-input--sm .ui-input__field {
+  height: var(--control-h-sm);
+  font-size: var(--text-sm);
+}
+
+.ui-input--md .ui-input__field {
+  height: var(--control-h-md);
+  font-size: var(--text-base);
+}
+
+/* ---------- 前后缀插槽 ---------- */
+.ui-input__affix {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+  color: var(--c-text-muted);
+  pointer-events: none;
+}
+
+/* 容器不拦截点击（点击图标也能聚焦输入框），交互式子元素再恢复点击 */
+.ui-input__affix > * {
+  pointer-events: auto;
+}
+
+.ui-input__affix--start {
+  inset-inline-start: var(--space-12);
+}
+
+.ui-input__affix--end {
+  inset-inline-end: var(--space-12);
+}
+
+.ui-input__field.has-affix-start {
+  padding-inline-start: calc(var(--space-12) + 1em + var(--space-8));
+}
+
+.ui-input__field.has-affix-end {
+  padding-inline-end: calc(var(--space-12) + 1em + var(--space-8));
+}
+
+.ui-input.is-disabled .ui-input__affix {
+  opacity: 0.6;
+}
+</style>
diff --git a/.agents/skills/frontend-craft/templates/vue/UiSelect.vue b/.agents/skills/frontend-craft/templates/vue/UiSelect.vue
new file mode 100644
index 0000000..6dd3dc9
--- /dev/null
+++ b/.agents/skills/frontend-craft/templates/vue/UiSelect.vue
@@ -0,0 +1,157 @@
+<!-- 原生 select 封装：与 UiInput 同源的高度/圆角/边框，自绘箭头，兼容字符串数组选项。 -->
+<script setup>
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  modelValue: { type: [String, Number], default: '' },
+  /** [{ value, label }] 或 ['a', 'b'] 均可 */
+  options: { type: Array, default: () => [] },
+  disabled: { type: Boolean, default: false },
+  /** 'sm' | 'md' */
+  size: { type: String, default: 'md' },
+  /** 透传 id，供外部 <label for> 关联 */
+  id: { type: String, default: undefined },
+  placeholder: { type: String, default: '' },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+// 对字符串数组 / 缺字段的对象做容错归一化
+const normalizedOptions = computed(() =>
+  (props.options || []).map((option) => {
+    if (option !== null && typeof option === 'object') {
+      const value = 'value' in option ? option.value : option.label
+      const label = 'label' in option ? option.label : value
+      return { value, label: label === null || label === undefined ? '' : String(label) }
+    }
+    return { value: option, label: option === null || option === undefined ? '' : String(option) }
+  }),
+)
+
+const isPlaceholder = computed(
+  () => props.placeholder !== '' && (props.modelValue === '' || props.modelValue === null || props.modelValue === undefined),
+)
+
+// 原生 select 只回传字符串：数值型 value 由调用方自行转换
+function handleChange(event) {
+  emit('update:modelValue', event.target.value)
+}
+</script>
+
+<template>
+  <div
+    class="ui-select"
+    :class="[`ui-select--${size}`, { 'is-disabled': disabled, 'is-placeholder': isPlaceholder }]"
+  >
+    <select
+      v-bind="$attrs"
+      class="ui-select__field"
+      :id="id"
+      :value="modelValue"
+      :disabled="disabled"
+      @change="handleChange"
+    >
+      <!-- 占位项用空 value + disabled：可展示提示，但不会被当成一个真实可选值提交 -->
+      <option v-if="placeholder" value="" disabled>{{ placeholder }}</option>
+      <option v-for="option in normalizedOptions" :key="String(option.value)" :value="option.value">
+        {{ option.label }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<style scoped>
+.ui-select {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+/* 与 UiInput 完全一致：同源高度 / 圆角 / 边框，保证同一行控件视觉重量相同 */
+.ui-select__field {
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--control-h-md);
+  padding-inline: var(--space-12) calc(var(--space-12) + 1em);
+  color: var(--c-text);
+  background-color: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-sm);
+  font-family: inherit;
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+  transition:
+    background-color var(--dur-fast) var(--ease),
+    border-color var(--dur-fast) var(--ease);
+}
+
+/* 展开列表里的文字保持正常颜色，不被占位态灰字影响 */
+.ui-select__field option {
+  color: var(--c-text);
+  background-color: var(--c-surface);
+}
+
+.ui-select__field:not(:disabled):hover {
+  border-color: var(--c-border-strong);
+}
+
+.ui-select__field:focus {
+  border-color: var(--c-accent);
+}
+
+/* 焦点必须始终可见：不使用 outline: none */
+.ui-select__field:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 2px;
+}
+
+.ui-select__field:disabled {
+  color: var(--c-text-muted);
+  background-color: var(--c-bg-subtle);
+  border-color: var(--c-border);
+  cursor: not-allowed;
+}
+
+.ui-select.is-placeholder .ui-select__field {
+  color: var(--c-text-muted);
+}
+
+.ui-select.is-disabled .ui-select__field {
+  color: var(--c-text-muted);
+}
+
+/* ---------- 尺寸（与 UiInput 完全同源） ---------- */
+.ui-select--sm .ui-select__field {
+  height: var(--control-h-sm);
+  font-size: var(--text-sm);
+}
+
+.ui-select--md .ui-select__field {
+  height: var(--control-h-md);
+  font-size: var(--text-base);
+}
+
+/* ---------- 自绘下拉箭头（颜色跟随 --c-text-muted） ---------- */
+.ui-select::after {
+  content: '';
+  position: absolute;
+  inset-inline-end: var(--space-12);
+  top: 50%;
+  width: 0.4em;
+  height: 0.4em;
+  border-right: 1px solid var(--c-text-muted);
+  border-bottom: 1px solid var(--c-text-muted);
+  transform: translateY(-70%) rotate(45deg);
+  pointer-events: none;
+}
+
+.ui-select.is-disabled::after {
+  opacity: 0.6;
+}
+</style>
diff --git a/.gitignore b/.gitignore
index 7caa647..3ea7897 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,6 +25,14 @@ __pycache__/
 *.egg-info/
 ui/node_modules/
 ui/dist/
+ui/shots/
+# 一次性脚本与截图落点：迁移过程中用完即弃，不进仓库。
+# 需要留证的产物放 docs/design/baseline/，不靠 tmp/。
+tmp/
+# 参照物截图（Cursor / Linear / GitHub / Vercel / Notion / Raycast 的产品截图）。
+# 是别人的版权素材、体积 1.8 MB、重跑 capture.mjs 就能再取一份；
+# 项目自己的设计证据都在 docs/design/baseline/。
+docs/design/reference/
 ui/.tanstack/tmp/
 ui/tsconfig.tsbuildinfo
 ui/.output/
diff --git a/docs/design/DESIGN.md b/docs/design/DESIGN.md
new file mode 100644
index 0000000..4d16860
--- /dev/null
+++ b/docs/design/DESIGN.md
@@ -0,0 +1,1371 @@
+# DESIGN.md — CODING 工作台视觉契约
+
+> 本文件是**约束**，不是描述。代码与它冲突时，改代码。
+> Token 的**值**在 `ui/src/styles/tokens.css`，本文件不重复。
+
+## 1. 定位
+
+一个**长时间使用的开发工作台**：中性、密实、层级分明。详见 `direction.md`。
+
+## 2. 参照物
+
+**Cursor（主）+ Linear（辅）**，逐张的「取 / 不取」写在 `direction.md`。
+截图在 `reference/candidates/`。改动前先看那两张图。
+
+## 3. Token 与契约（唯一真相源）
+
+| 层面 | 唯一真相源 | 强制手段 |
+|---|---|---|
+| 视觉值（颜色 / 间距 / 字号 / 圆角 / 阴影 / 层级） | `ui/src/styles/tokens.css` | `npm run audit`（漂移记分卡）+ `npm run lint:css` |
+| 数据形状（接口返回什么） | `ui/src/api/types.js`（JSDoc `@typedef`） | 以**真实响应**为准，形状变了**先改这里** |
+| 网络出口 | `ui/src/api/client.js`（axios）、`ui/src/api/sse.js`（流式） | 组件**永远不直接 fetch** |
+
+**任何字面量颜色、字号、间距、圆角都是 bug。** 执行命令：
+
+```
+npm run lint:css      # 新代码（components/ui、components/layout）0 error —— 硬门
+npm run lint:css:all  # 全部文件，含 legacy；迁移期仅作参考
+npm run audit         # 设计系统漂移记分卡（legacy 的收敛进度看这个）
+npm run shots         # 截图三个宽度（需先 npm run dev）
+```
+
+> **迁移期策略**：`lint:css` 只卡**新代码**。legacy 的 `main.css` 曾经是一地违规，
+> 一次性开满会让人习惯性忽略输出 —— 那等于没开。
+> **阶段二收敛后 `npm run audit` 已全绿**；但 `lint:css:all` 仍会报几百条格式类问题
+> （它管的是写法风格，`audit` 管的才是设计系统漂移），所以 glob 暂不扩大。
+
+### 记分卡的两个指标不要混淆
+
+| 指标 | 判定 | 含义 |
+|---|---|---|
+| **冗余声明**（同属性重复声明） | **硬门 = 0** | 该声明被更靠后、同上下文、同选择器的声明完全覆盖 → 删掉不改渲染 |
+| 同一选择器分散在多块 | 提示（ℹ️） | 同一个选择器出现在多个块里，但属性**并未**重叠。要归零必须合并块，而合并会把声明搬到文件更靠后处、改变它与其它同特异性选择器之间的先后关系 → **有渲染风险，不能当硬门** |
+
+## 4. 布局骨架
+
+单页应用，无路由。一个 CSS Grid 两列：
+
+```
+grid-template-columns: var(--layout-sidebar) minmax(0, 1fr)
+```
+
+```
+┌──────────────────┬──────────────────────────────────────────────┐
+│ Sidebar          │ Header   (var(--layout-header) = 52px)        │
+│ var(--layout-    │  ┌ thread title (可编辑)   ┌ status badge     │
+│ sidebar)=272px   │  └ 仓库全名 (次)           └ branch (次)      │
+│                  ├──────────────────────────────────────────────┤
+│ ┌ logo    [◀] ┐  │                                              │
+│ │ 新聊天   ⌘K │  │ Content  max-width: var(--layout-content-max)│
+│ │ 新建项目    │  │           = 960px，居中，上下留白             │
+│ ├─────────────┤  │                                              │
+│ │ 项目     [4]│  │   空态 → Hero 垂直居中：                      │
+│ │  ▾ 分组     │  │     mark / eyebrow / h1 / desc               │
+│ │    · 会话   │  │                                              │
+│ │    · 会话   │  │   会话态 → 消息列表，向上滚动                  │
+│ │ 展开其余 12 │  │                                              │
+│ ├─────────────┤  ├──────────────────────────────────────────────┤
+│ │ 工作区已就绪│  │ Composer (sticky bottom，卡片式)              │
+└──┴─────────────┴──┴──────────────────────────────────────────────┘
+```
+
+### 断点：**只允许这 3 个**
+
+| 断点 | 语义 | 侧栏行为 |
+|---|---|---|
+| `max-width: 860px` | 平板 | 侧栏改为浮层 + backdrop |
+| `max-width: 720px` | 窄屏 | composer 底栏折行 |
+| `max-width: 560px` | 手机 | 单列，字号不下调 |
+
+> **已收敛**：阶段二把 `600px` 那个只出现 1 次的漂移断点并进了 `560px`。
+> 现在除 `@media (hover: none)` 外只有上表 3 个宽度，各有 3 个块；
+> 合并前后 375 / 768 / 1440 三个宽度的截图**逐像素一致**。
+
+## 5. 组件白名单
+
+**页面只能使用下表中的组件与 class。新增 class 需要先改本表。**（阶段三后生效）
+
+| 用途 | 组件 | 来源 |
+|---|---|---|
+| 按钮 | `UiButton` (primary / secondary / ghost / danger) | `@/components/ui/UiButton.vue` |
+| 输入框 | `UiInput` | `@/components/ui/UiInput.vue` |
+| 多行输入 | `UiTextarea`（`bare` 无框形态 + `autoResize`） | `@/components/ui/UiTextarea.vue` |
+| 下拉 | `UiSelect`（`bare` 无框形态 + `prefix`/`suffix` 插槽） | `@/components/ui/UiSelect.vue` |
+| 卡片/容器 | `UiCard` | `@/components/ui/UiCard.vue` |
+| 状态标记 | `UiBadge` (neutral / accent / success / warning / danger) | `@/components/ui/UiBadge.vue` |
+| 空态 | `UiEmptyState` | `@/components/ui/UiEmptyState.vue` |
+
+**业务组件**（保留，但内部必须只使用上面的白名单 + token）：
+
+| 组件 | 文件 | 职责 |
+|---|---|---|
+| 侧栏 | `SessionSidebar.vue` | 项目分组树、新建、收起 |
+| 工作区 | `AgentWorkspace.vue` | Header + 内容区 + composer 编排 |
+| 输入区 | `ChatComposer.vue` | 模型/推理/仓库 + 发送 |
+| 消息 | `ChatMessage.vue` | 单条消息渲染 |
+| 消息操作 | `MessageActions.vue` | 复制/重试等 |
+| 运行轨迹 | `RunActivityCard.vue` | 折叠的运行详情 |
+| 运行指示 | `ActiveTaskStrip.vue` | 正在跑的任务条 |
+| 待办 | `TodoPlan.vue` | 计划清单 |
+| 提案 | `ProposalCard.vue` | 计划确认 |
+| 人工介入 | `HumanInterventionCard.vue` | 需要用户输入 |
+| 新建项目 | `CreateProjectDialog.vue` | 弹窗 |
+| 删除项目 | `ConfirmProjectDeleteDialog.vue` | 弹窗 |
+
+**禁止**：在页面里写裸 `<button>` / `<input>` / `<select>` / `<textarea>`（除 `UiButton` 等原语内部）。
+
+**尚未移除的例外**（都是已知、有原因、有后续动作的，不是漏掉）见 §10 末尾的"已知例外"表。
+阶段三第四笔之后，`ChatComposer` 的 `<select>` 与 `<textarea>` 都已收回原语，只剩一个只读展示不算控件。
+
+### 状态预览夹具
+
+弹窗、错误态、超长文本这类**不在默认视口里**的状态，靠 `npm run shots` 截不到。
+做法是在 `ui/preview/` 下放一个只用于开发的夹具页，把组件的多个形态并排挂载，
+再用 `capture.mjs` 一张截图看全：
+
+```
+node ui/scripts/capture.mjs http://127.0.0.1:3000/preview/dialogs.html shots --widths 1560 --height 700 --name dialogs
+```
+
+夹具只进 dev server（Vite 默认只把 `index.html` 作为构建入口），不会进产物。
+
+**要验窄屏排布时用 iframe 造视口**：media query 认的是**视口宽度**不是容器宽度，
+所以把组件塞进一个窄 `div` 不会触发断点。正确做法是外层页面用固定宽度的 `<iframe>`
+把同一个组件挂几遍（`ui/preview/composer.html` → `composer-frame.html` 就是这个套路）：
+
+```
+node ui/scripts/capture.mjs http://127.0.0.1:3000/preview/composer.html shots --widths 1760 --height 300 --name breakpoints
+```
+
+这条在默认截图里验不了 —— 主界面在窄屏下侧栏是覆盖式抽屉，会把 composer 整个盖住。
+
+**要验键盘焦点时必须真的聚焦再读计算样式**：静态截图里看不到 `:focus-visible`。
+`ui/preview/focus.html` 逐个聚焦受影响的控件并读 `getComputedStyle`，把结果渲成一张表。
+详见 §11 末尾。
+
+**要验「默认数据里根本不出现的状态」时，把每种状态人工种出来**：
+`proposal` / `intervention` / `todo` / `error` 这几种消息块**只在特定数据下出现**，
+现有会话里一个都没有 —— 既点不出来也截不到。`ui/preview/messages.html`（16 格）与
+`ui/preview/states.html`（6 格）就是干这个的：每个格子用独立 `createPinia()` + `$patch()`
+种状态，并把 `store.bootstrap` / `store.refreshActiveRuns` 换成空函数（**不覆盖就会真打接口并起轮询**）。
+
+```bash
+# 整张矩阵
+node ui/scripts/capture.mjs "http://127.0.0.1:3000/preview/messages.html" tmp/msg --widths 1560 --height 2600 --budget 9000 --name before
+# 某一格的 1:1 —— 要单格大图就用它，不要在整张合成图上裁（§15 记了三次失败）
+node ui/scripts/capture.mjs "http://127.0.0.1:3000/preview/messages.html?cell=8" tmp/msg --widths 900 --height 620 --budget 6000 --name c8
+```
+
+> **夹具的查询参数只能有一个。** `capture.mjs` 把 URL 交给 shell，`&` 在那里是命令分隔符 ——
+> `?a=1&b=2` 会报 `'b' is not recognized as an internal or external command`，加引号也救不了。
+> 所以夹具一律设计成只接受一个参数（`?cell=N` 或 `?only=N`）。
+
+## 6. 页面 × 状态矩阵
+
+**每个格子都必须真的设计过，而且必须能真的渲染出来看。**
+✅ = 已设计过并亲眼看过截图；⬜ = 空缺（写下来才算数，不要在心里记）。
+矩阵不是文档练习：**本表第一次被真正渲染时，就抓到了 §14 里那个「Hero 五个类名全无 CSS」的缺陷** —— 那两处是终端用户最可能抱怨、却最难被开发者看到的地方。
+
+| 区域 | 空态 | 加载态 | 正常态 | 错误态 | 边界态 |
+|---|---|---|---|---|---|
+| 侧栏 · 项目列表 | ✅ 无项目引导（虚线框 + 「项目会出现在这里」+ 实心主 CTA） | ✅ spinner + 「正在加载项目…」（**不能与空态同一个样子**） | ✅ 分组树 + 展开/收起 | ✅ 实线警告卡 + 「重新加载」按钮（**不再冒充空态**，见 §18） | ✅ 「展开显示其余 N 个会话」+ 超长项目名/仓库名省略号 |
+| 主区 · 内容 | ✅ Hero 三变体（无会话 / 普通聊天 / 项目会话） | ✅ spinner + `role="status"` + `aria-live="polite"` | ✅ 消息列表 | ✅ 错误横幅（**与消息共存，不互相取代**） | ✅ 极长消息：URL 正常折行、宽代码块在气泡内横向滚动、宽表格不破版（见 §18） |
+| 主区 · Header | ✅ 新会话标题 | — | ✅ 双击就地编辑标题 | — | ✅ 无空格 120 字符标题：`text-overflow=ellipsis`，实测「被裁=是」，状态徽章不被挤走 |
+| Composer | ✅ 正常可用 | ✅ 禁用 + spinner | ✅ 正常 | ✅ 草稿保存失败提示 | ✅ 锁定态（`locked` 提示 + 人工介入；`disabled` 换成「停止运行」）；只读仓库名省略号 |
+| 运行轨迹 | ✅ 折叠 | ✅ 进行中 | ✅ 已完成 | ✅ 失败 | ✅ 超长 todo 文本在卡片内折行（见 §18） |
+| 弹窗 | — | ✅ 提交中禁用 | ✅ 正常 | ✅ 校验失败 | ✅ 超长输入：输入框内部横向滚动，弹窗不破版 |
+
+> **顺序铁律**：先做空态与错态，再做正常态。理由见 skill 的 `references/build.md`。
+> ⬜ 已全部清零。它们不是靠"看了一遍觉得没问题"填上的 —— 每一格都是先用
+> `ui/preview/edges.html`（§18）把极端输入真的渲染出来、由探测器给出判定，再动手改的。
+
+### 怎么把任何一格渲染出来
+
+真实应用只在特定数据下才进得了某个状态（Hero 尤其：**账号下只要还有一个会话就再也回不去**，手工点不出来）。所以每一格都靠夹具种状态：
+
+```powershell
+# 整张矩阵（**7 格**纵向拼版，scale 0.62）
+node ui/scripts/capture.mjs "http://127.0.0.1:3000/preview/states.html" tmp/st --widths 920 --height 4200 --budget 9000 --name states
+# 单格 1:1（cell 0..6：无会话 / 普通聊天空态 / 项目会话空态 / 加载态 / 错误态 / 正常态 / 活跃任务条）
+node ui/scripts/capture.mjs "http://127.0.0.1:3000/preview/states.html?cell=0" tmp/st --widths 1472 --height 940 --budget 6000 --name s1
+```
+
+> **拼版图的 `--height` 要用「格数 × 单格高」算出来**（每格 `900 × 0.62 ≈ 558` + 标签 ≈ 586px），
+> 不能目测给一个数 —— `--height 2900` 时第 ⑥ 格其实一直被裁掉，而没人会发现（见 §16）。
+
+`ui/preview/states.js` 里每格独立 `createPinia()` + `setActivePinia()` + `$patch()`，并把 `store.bootstrap` / `store.refreshActiveRuns` 换成空函数 —— **不换掉就会真打接口并起一个 3 秒轮询**。
+
+> **★ 夹具的查询参数只能有一个 ★**：`ui/scripts/capture.mjs` 会把 URL 交给 shell，`&` 在那里是命令分隔符 —— `?only=0&scale=1` 会报 `'scale' is not recognized as an internal or external command`（双引号、单引号都不管用）。要加参数就往夹具里加**单参数**分支。
+
+现有夹具清单（`ui/preview/`）：
+
+| 夹具 | 用来验什么 | 命令要点 |
+|---|---|---|
+| `composer.html` | 底栏在各断点下的排布 | 用固定宽度 `<iframe>` 造真实视口（media query 认视口不认容器） |
+| `composer-footer.html` | 底栏的**交互层级**：只有模型选择器是控件，仓库是纯文字。四种数据（长名 / 短名 / 无仓库 / `chatOnly`） | `--widths 900 --height 400 --scale 2`。**≥721px 才验得了截断**（窄屏 `max-width: none` 是故意的） |
+| `focus.html` | `:focus-visible` 可见性 | 逐元素 `focus()` 后读 `getComputedStyle`，**必须在 `blur()` 之前读**；环画在祖先上的要趁聚焦时往上找 `boxShadow` |
+| `sidebar.html` | 侧栏控件体征 + 键盘可达性 | 表里是**聚焦态**的值（`probe()` 先 `focus()` 再读） |
+| `states.html` | 页面 × 状态矩阵（本节） | `?cell=N` 取单格 1:1 |
+| `edges.html` | 页面 × 状态矩阵的**边界态那一列** + 自动横向溢出探测（见 §18） | `?cell=N`（0..6）。它自己会跑探测器并把判定画进截图 |
+| `messages.html` | `ChatMessage` 能渲染的**每一种 chunk kind 与状态**（16 格） | `?cell=N` 取单格 1:1。**`proposal` / `intervention` / `todo` / `error` 在真实数据里一个都没有**，只能靠它 |
+| `active-tasks.html` | 活跃任务条（只在有运行中任务时出现，默认数据里永远看不到） | `--scale 3` 放大看点击区；挂两遍含空数组 |
+
+## 7. 禁止事项
+
+见 `anti-patterns.md`。最常见的三条：
+1. 新增 `:root` 块（只允许 `tokens.css` 里那一个）
+2. 硬编码颜色 / 字号 / 间距 / 圆角字面量
+3. 「顺手优化」未经要求的样式
+
+## 8. 变更流程
+
+```
+改视觉前  → 先改本文件（或 direction.md / tokens.css）
+          → 再改代码
+          → npm run lint:css && npm run audit
+          → npm run shots 截图，与 docs/design/baseline/ 里的基线对比
+          → 若本次改动应当是"零视觉变化"，核 SHA256 是否逐像素一致
+```
+
+**反过来做（先改代码再补文档）视为违规。** 这是这个项目 CSS 膨胀到 1313 行的根本原因。
+
+### `baseline/` 里两组基线的分工
+
+| 文件 | 含义 | 是否刷新 |
+|---|---|---|
+| `before-{375,768,1440}.png` | **阶段二的入口状态**（改造前） | **永不刷新**，它是整件事的对照原点 |
+| `after-{375,768,1440}.png` | **最近一次验收通过的整屏截图** | 每完成一笔、看完图确认变化都是预期的之后刷新 |
+| `phase3-*-*.png` | 单笔改动的证据（矩阵、1:1 特写、状态拼版） | 只增不改，过期了也不删 |
+
+**`after-*` 必须跟着刷新**，否则 `npm run shots` 会从"这一笔有没有意外改动"变成
+"和三个月前的某一次比"，变成一个恒亮的警报 —— 恒亮的警报等于没有警报。
+刷新时机是**看完截图、确认差异都能解释之后**，不是截图那一刻。
+
+刷新命令（`ui/shots/` 是 `npm run shots` 的落点，已 gitignore）：
+
+```bash
+cp ui/shots/shot-375.png  docs/design/baseline/after-375.png
+cp ui/shots/shot-768.png  docs/design/baseline/after-768.png
+cp ui/shots/shot-1440.png docs/design/baseline/after-1440.png
+```
+
+### 阶段划分（不许跳步）
+
+| 阶段 | 内容 | 视觉变化 | 功能风险 |
+|---|---|---|---|
+| **一 · 地基** | token / 契约 / 参照物 / 可执行检查 / 截图基线 | **必须为零** | 无 |
+| **二 · 收敛** | 只把 `main.css` 的值归一到 token，**类名与结构不动** | 应该有，且是"变清楚" | 极低 |
+| **三 · 迁移** | 换用原语组件、补齐状态矩阵、拆组件 | 大 | 高（逐页截图验证） |
+
+**阶段二之前不要碰 `.vue` 的模板结构；阶段三之前不要改类名。**
+
+---
+
+## 9. 阶段二收敛记录（已完成）
+
+原始记分卡存档在 `baseline/audit-before.json` 与 `baseline/audit-after.json`。
+
+| 指标 | 前 | 后 | 阈值 |
+|---|---|---|---|
+| 彩色 distinct | 167 | **0** | ≤5 |
+| 近白背景 distinct | 17 | **0** | ≤3 |
+| border-radius 档位 | 20 | **4** | ≤4 |
+| font-size 档位 | 19 | **7** | ≤7 |
+| `:root` 块 | 3 | **1** | =1 |
+| token 覆盖率 | 3.4% | **99.6%** | ≥90% |
+| rgb/rgba 基色 distinct | 19 | **0** | ≤3 |
+| 冗余声明 | 27 | **0** | =0 |
+| `!important` | 2 | **0** | =0 |
+| 同一选择器分散在多块 | 109 | 81 | 提示 |
+
+`main.css` 1313 → **1171** 行。截图对比：`baseline/before-1440.png` → `baseline/after-1440.png`。
+
+> 目标不是"变个样"，而是**"好像没换，但清楚多了"**。若某次改动让你觉得"变了个样"，方向就错了。
+
+---
+
+## 10. 阶段三迁移记录（进行中）
+
+**做法**：每迁移一个组件，先补**特征测试**（只断言行为、id、role、文案，不断言样式类名），
+再换原语，然后跑测试 —— 测试不改就绿，就是"功能不变"的证据。
+最后删掉被原语取代的 legacy CSS 规则，并截图核对。
+
+| 组件 | 原语替换 | 新增测试 | 状态 |
+|---|---|---|---|
+| `CreateProjectDialog.vue` | `UiInput` ×2 · `UiSelect` ×1 · `UiButton` ×2 | `CreateProjectDialog.test.js`（7 条） | ✅ 完成 |
+| `ConfirmProjectDeleteDialog.vue` | `UiInput` ×1 · `UiButton` ×2 | 已由 `SessionSidebar.test.js` 覆盖（2 条） | ✅ 完成 |
+| `ChatComposer.vue` | `UiButton` ×3（取消 / 停止运行 / 发送） | `ChatComposer.test.js`（10 条） | ✅ 完成 |
+| `ChatComposer.vue` | `UiTextarea` ×1（bare + autoResize）· `UiSelect` ×1（bare + size=sm） | 同上（原语形态变化由截图验证） | ✅ 完成 |
+| `SessionSidebar.vue` | `UiButton` ×9（含新的 `icon` / `align="start"` 两个 prop）+ 行结构重写 | `SessionSidebar.test.js`（11 条） | ✅ 完成（见 §13） |
+| `SessionSidebar.vue` | 项目列表的**三种空**分开：加载失败卡 + 重新加载 · 加载中占位 · 真空态 CTA | `SessionSidebar.test.js`（11 → 14 条） | ✅ 完成（见 §18） |
+| `stores/agent.js` | `bootstrap()` 由 `Promise.all` 改为 `Promise.allSettled` + 新增 `projectsError` / `retryProjects()` | `agent.test.js`（3 → 8 条） | ✅ 完成（见 §18） |
+| `AgentWorkspace.vue` | `UiButton` ×2（Hero 的两个 CTA）+ 加载态重写 + 补上 5 个类名缺失的全部 CSS | `AgentWorkspace.test.js`（10 条，**此前零测试**） | ✅ 完成（见 §14） |
+| `AgentWorkspace.vue` | 拆成 `WorkspaceHeader` / `WorkspaceConversation` / `WorkspaceWelcome` + `useSidebarPreferences` / `useProjectDialogs`；**454 → 206 行** | `AgentWorkspace.test.js` 的 10 条**一行未改即通过**；新增 `useSidebarPreferences.test.js` 6 条、`useProjectDialogs.test.js` 8 条 | ✅ 完成（见 §19） |
+| `MessageActions.vue` | `UiButton` ×1（ghost / sm / icon） | 无（行为未变，由截图验证） | ✅ 完成（见 §15） |
+| `ProposalCard.vue` | `UiButton` ×3（primary / secondary / ghost） | 无（同上；修掉了假禁用与无 hover） | ✅ 完成（见 §15） |
+| `HumanInterventionCard.vue` | `UiButton` ×3 + `UiTextarea` ×1 | 无（同上） | ✅ 完成（见 §15） |
+| `TodoPlan.vue` | 无（头部文案中文化） | 无 | ✅ 完成（见 §15） |
+| `RunActivityCard.vue` | 只补了 `.run-activity-toggle:focus-visible`（**有意不套原语**） | 无 | 🔶 部分完成（见 §15） |
+| `ActiveTaskStrip.vue` | `UiButton` ×1（ghost / sm / icon）+ hover 与字号补齐 + style 块规范化 | `ActiveTaskStrip.test.js`（10 条，**此前零测试**） | ✅ 完成（见 §16） |
+| `ChatComposer.vue` | 只读仓库展示去边框／去底色 + `<label>`→`<span>` + 清掉 4 条死规则 | 无（行为未变，由 `composer-footer.html` 夹具验证） | ✅ 完成（见 §17） |
+
+**删掉的 legacy 规则**（阶段三第一笔）：`.dialog-input`、`.dialog-input:focus`、
+`.project-dialog-v2 .dialog-input`、`.dialog-actions button`、`.button-primary`、
+`.button-secondary`、`.button-danger` 及其 hover/disabled。
+
+> 附带修掉一个真实缺陷：`.dialog-input:focus` 原先写的是
+> `box-shadow: 0 0 0 3px var(--c-danger-subtle)` —— **红色系的焦点环**。
+> 阶段二把它的字面量收敛成了 token，所以记分卡看不出问题（它确实是合法 token），
+> 但语义是错的（danger 颜色被当成 focus 颜色用）。
+> 换成原语后由 `UiInput` 统一提供 accent 焦点环，这个错误自然消失。
+> **教训：记分卡管不了"用错语义"，只有人看图能发现。**
+
+**删掉的 legacy 规则（阶段三第二笔 · ChatComposer）**：`.send-button` / `.stop-button`
+的全部外观规则（分布在 `main.css` 的 6 个追加层里），以及
+`.send-button:not(:disabled){color;background}`、`:hover/:focus-visible`、`:disabled`。
+底栏里只留下一条纯排布规则 `.composer-action { flex: 0 0 auto }`（外加两个断点里的
+`order` / `width` / `margin-left`）。
+
+> **同一批里又揪出两个记分卡看不见的真实缺陷：**
+> 1. `.send-button:not(:disabled) { background: var(--c-text) }` —— 发送按钮**可点时的底色是近黑的 `#1c2321`**，
+>    而 `:hover` 因为特异性更高落到 `.send-button:hover:not(:disabled){background: var(--c-accent-active)}`，
+>    **一悬停就从近黑跳到深绿**，两个毫不相干的颜色之间硬切。切到 `UiButton variant="primary"` 后
+>    静息态与悬停态同属一条绿色梯度。
+> 2. `.send-button:not(:disabled):hover, …:focus-visible { outline: none }` —— **键盘焦点没有可见指示**。
+>    原语的 `:focus-visible` 焦点环是内建的，换过来即修复。
+>
+> 这两个都属于"值全合法、记分卡全绿、但语义是错的"。**结论：记分卡保证不漂移，不保证正确；
+> 每迁移一个组件都要真的看图、真的用键盘走一遍。**
+
+**已知例外（写在白名单里，不是遗漏）**：
+
+| 位置 | 未迁移的裸控件 | 原因 |
+|---|---|---|
+| `ChatMessage.vue:37` | `.code-copy-action`（在 markdown-it `fence` 渲染器返回的 HTML 字符串里） | 经 `v-html` 注入，**永远不可能换成 Vue 组件** —— 硬例外。 |
+| `ChatMessage.vue` | `.message-expand-button` | **disclosure，不是动作按钮**：几何由一行文字 + 旋转箭头决定，套不上 28/36/44 的定高档位。已改为把状态补齐。 |
+| `RunActivityCard.vue` | `.run-activity-toggle` | 同上（一行内含旋转箭头 + 摘要 + 贴右端状态胶囊）。已补 `:focus-visible`。 |
+| `ActiveTaskStrip.vue` | `.active-task-select` | 整块是 chip 内容，外面再包一层按钮会双重边框。 |
+| `WorkspaceConversation.vue` | `.new-content-button` | 悬浮在消息流右下角的**浮标**（"↓ 3 条新内容"），不是表单动作；它的定位与出现时机由 `useSmartScroll` 决定，套原语只会把那一套布局规则拆散。 |
+| `AgentWorkspace.vue` | `.sidebar-backdrop` | **不可见**的全屏遮罩（窄屏点它关侧栏）。它没有外观，`UiButton` 的边框/底色/高度全都用不上，而且它必须铺满视口 —— 套了反而要一条条覆盖回去。 |
+| `SessionSidebar.vue` | `.thread-item` / `.rail-session` / `.rail-action` | **列表行**，不是按钮组：宽度撑满、高度由内容决定、选中态与状态点自己一套。 |
+| `SessionSidebar.vue` | `.thread-delete` | 行内删除键，**绝对定位在行右端**（见 §13 的兄弟节点结构）；它要精确叠在行上，不能有自己的尺寸档。 |
+| `SessionSidebar.vue` | 项目菜单的 `role="menuitem"` 两项 | 菜单项，`role` 与样式都由菜单容器统一管；`UiButton` 不带 `menuitem` 语义。 |
+
+> 这张表的判据是**「套上原语之后要不要一条条覆盖回去」**：要覆盖的越多，说明它本来就不是
+> 设计系统里的那种东西。上面前四条是形态不合，后五条是语义不合（浮标 / 遮罩 / 行 / 菜单项）。
+
+> **§17 已处理掉那条信息架构问题。** 原文记的是：模型选择器与仓库展示是**同一视觉形态**
+> （都是带边框的小胶囊），但一个是真控件、另一个只读，视觉上两者一样重，用户会去点那个点不动的。
+> 已于阶段三第九笔修掉 —— 只读项去掉了边框与底色，并把 `.repo-provider-select` 等
+> 四条死规则一并清除。
+
+---
+
+## 11. 阶段三第三笔 · 键盘焦点可见性（已完成）
+
+**问题**：`ui/src/styles/main.css` 里有 **15 处 `outline: none` / `outline: 0`**，其中 8 处写成了
+`:hover, :focus-visible` 合写并且直接 `outline: none` —— 等于**把这些控件的键盘焦点环整个关掉了**。
+`ui/stylelint.config.mjs` 早就把 `outline:none` 列为禁止，但 `main.css` 是 legacy、不在
+`npm run lint:css` 的门内（只卡 `src/components/ui/**` 与 `layout/**`），所以从来没被拦住。
+
+**三类处理**：
+
+| 类 | 条数 | 情况 | 处理 |
+|---|---|---|---|
+| A | 8 | `:hover, :focus-visible` 合写 + `outline: none`，焦点完全不可见 | **拆成两条**：`:hover` 保留原视觉并继续抑制鼠标态的环形；`:focus-visible` 复制同样的视觉 + `outline: 2px solid var(--c-accent); outline-offset: 2px` |
+| B | 3 | `.repo-field input` / `.composer textarea` / `.project-rename-input`，已有 `box-shadow` 替代环 | 保留 `outline`，**加注释说明为什么可以留** |
+| C | 4 | `.workspace-title-input` / `.repo-provider-select` / `.repo-control-input input` / `.model-picker select`，焦点只改 `border-color`，太弱 | 给它们的 `:focus` / `:focus-within` **补 `box-shadow: 0 0 0 3px var(--c-accent-subtle)`**，与 `UiInput`、弹窗保持同一种环 |
+
+A 类涉及的 8 个控件：`.sidebar-toggle`、`.new-button`、`.thread-delete`、`.message-copy-button`、
+`.code-copy-action`、`.new-content-button`、`.quick-prompt`、`.rail-session`。
+
+**为什么必须拆开而不是在原规则里补 outline**：`:hover` 和 `:focus-visible` 合写时，
+鼠标悬停会连带出现焦点环 —— 那是错的。两者特异性相同（0,2,0），所以拆开后把
+`:focus-visible` 放在后面，键盘聚焦且鼠标恰好也悬停时仍然以焦点环为准。
+
+> **附带修掉一个真实缺陷：消息操作区键盘完全够不到。**
+> `.message-actions` 原本是 `opacity: 0; visibility: hidden`，靠 `.message:hover` 才显示。
+> 但 **`visibility: hidden` 的元素无法获得焦点**，于是 `.message:focus-within`（本来就是为键盘
+> 准备的补救）永远不可能触发 —— 鸡生蛋问题，**键盘用户永远够不到「复制」按钮**。
+> 改成 `opacity: 0; pointer-events: none`（显示时 `pointer-events: auto`）：看不见也点不到，
+> 但仍然可以 Tab 进去，一旦进去 `:focus-within` 就把操作区显示出来。
+
+**验收**：`npm test` 25 passed · `npm run audit` 全部通过（冗余声明 0）· `npm run lint:css` 0 errors ·
+`npm run build` ✓ 1.01s · `npm run shots` 3/3，与改动前的字节数完全一致
+（39514 / 61696 / 77453）—— **焦点环只在键盘聚焦时出现，默认视口不变**。
+
+**焦点可见性怎么验**（静态截图看不到 `:focus-visible`，必须真的聚焦再读计算样式）：
+夹具 `ui/preview/focus.html` + `focus.js` 会逐个聚焦受影响的控件，读 `getComputedStyle` 的
+`outline*` 与 `box-shadow`（**必须在 `blur()` 之前读，`getComputedStyle` 返回的是实时对象**），
+焦点环画在祖先容器上的（`:focus-within`）要趁元素仍聚焦时往上找一圈，最后把结果渲成一张表：
+
+```
+node ui/scripts/capture.mjs http://127.0.0.1:3000/preview/focus.html shots --widths 1180 --height 900 --name focus
+```
+
+结果存档：`docs/design/baseline/phase3-focus-visible-1180.png` —— **15 / 15 通过**。
+
+> **又一次印证同一条教训**：把 `:hover, :focus-visible` 拆开之后，`audit` 的「冗余声明」
+> 从 0 跳到 2 —— `.thread-delete:hover` 里的 `color`/`background` 早就被更靠后的
+> `.thread-delete:hover { color; background }` 覆盖了，只是因为同一规则里还挂着
+> `:focus-visible`（它没被覆盖）而查不出来。**收窄共享选择器列表是一种有效的死代码探测手段**，
+> 与上一笔 `.new-button` 的情况完全同型。
+
+---
+
+## 12. 阶段三第四笔 · 收回 composer 的两个"已知例外"（已完成）
+
+**为什么原语不够用**：composer 的两个控件都不是"独立的带框控件"，而是
+**"整张卡片就是输入区"** 的形态 —— 焦点环画在外层容器上，控件自身不能带边框。
+原来的 `UiTextarea`/`UiSelect` 只会画带框的形态，所以这两个控件一度被记为"已知例外"。
+这一笔不是"绕过例外"，而是**把原语补到能表达这个形态**。
+
+**新增 `ui/src/components/ui/UiTextarea.vue`**
+
+| 能力 | 说明 |
+|---|---|
+| `bare` | 去掉边框、背景与内边距，把"框"交给外层容器，焦点由容器用 `:focus-within` 表达 |
+| `autoResize` | 随内容增高。**先 `height='auto'` 再读 `scrollHeight`**，否则高度只能单向增长 |
+| `minHeight` / `maxHeight` | 增高的上下限（px），由调用方给 —— 这是产品决策，不是设计 token |
+| `rows` / `resize` / `invalid` / `size` | 与 `UiInput` 同源 |
+
+**`UiSelect` 增加 `bare` 与 `prefix` / `suffix` 插槽**：`bare` 去掉边框、背景与内边距，
+并**关掉自绘箭头**（改由 `suffix` 插槽自己放一个）；插槽做法与 `UiInput` 的前后缀完全同源，
+连 `has-affix-start/end` 的 padding 计算都对齐。
+
+**迁移结果**：`ChatComposer.vue` 的 `<textarea>` → `UiTextarea bare auto-resize :min-height="70" :max-height="140"`；
+模型选择器 → `UiSelect bare size="sm"` + `#prefix`（orbit 图标）+ `#suffix`（chevron）。
+同时删掉 `main.css` 里 4 层追加的 `.composer textarea` 规则，`.model-picker select` 只剩 `max-width: 145px`。
+
+**★ `outline: none` 的正确写法（与 §11 呼应）★**
+`bare` 形态下必须压掉控件自己的默认焦点环，否则同一个控件上会出现两圈。
+但 `stylelint` 的 `declaration-property-value-disallowed-list` 是硬性禁止 `outline: none`。
+正确的做法不是放宽规则，而是**用行内 disable 注释把例外变成可 grep 的一条**：
+
+```css
+.ui-textarea.is-bare .ui-textarea__field:focus-visible {
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  outline: none;
+}
+```
+
+规则保持硬性，全项目只有这一处例外、且带理由。**注意 disable 注释要写在声明那一行之前** ——
+写在选择器之前只会禁用选择器那一行，声明照样报错（这一版就是这么错的）。
+
+**验收（实跑）**：`npm test` → 25 passed（测试文件一行未改）· `npm run audit` → 全部通过 ·
+`npm run lint:css` → 0 errors / 19 warnings · `npm run build` → ✓ 956ms · `npm run shots` → 3/3。
+
+**肉眼核对的可见差异**（用 `mix-blend-mode: difference` 叠图定位，见 §10 的做法）：
+
+1. 模型选择器的 chevron 与文字**贴得更紧**，胶囊整体略窄 —— 原来是 select 自己的 padding 撑开的，
+   现在由 `suffix` 插槽 + `padding-inline-end: calc(1em + var(--space-4))` 决定。观感更紧凑，判断为改善。
+2. composer 卡片**矮了约 5px**，底栏相对占位文字近了一点 —— 原 `main.css` 给 textarea 的
+   `padding: 4px 0` 与 `line-height: 1.55` 由原语的 `padding: 0` + `--leading-normal` 取代。
+3. 输入文字字号 `--text-md`(13px) → `--text-base`(12px)，即与 `UiInput`/`UiSelect`/`UiButton` 一致。
+   这一条是**有意的收敛**：原先三个控件三种字号（原语 12px、输入区 13px、token 注释里写输入区 16px），
+   现在统一到量最大的那一档。
+
+**没有为原语单独写单元测试，理由说清楚**：`autoResize` 依赖真实的 `scrollHeight`、
+`bare` 是纯视觉形态，两者在 happy-dom 里都测不出真值 —— 硬写只会得到一条永远通过的假测试。
+它们的验收方式是截图，`ChatComposer.test.js` 的 10 条覆盖的是**行为**（v-model、Enter 发送、
+IME 合成、禁用态、插槽点击），那才是会被改坏的契约。
+
+**存档**：`docs/design/baseline/phase3-composer-primitives-1480.png`（1.7× 放大前后对比），
+`after-{375,768,1440}.png` 已刷新为最新状态。
+
+---
+
+## 13. 阶段三第五笔 · 侧栏迁移（已完成）
+
+侧栏是**全项目控件最密集的一屏**（12 类可交互元素），也是"漂移"最集中的地方。
+动手前的第一件事不是改代码，而是**把这 12 类控件的真实体征量出来**——
+夹具 `ui/preview/sidebar.html` + `sidebar.js` 挂载真实组件，逐个 `el.focus()`
+后读 `getComputedStyle` 与 `getBoundingClientRect`，输出尺寸/边框/背景/字号与可达性表：
+
+```
+node ui/scripts/capture.mjs http://127.0.0.1:3000/preview/sidebar.html shots --widths 1320 --height 760 --budget 6000 --name vitals
+```
+
+**量出来的问题（迁移前）**：
+
+| 现象 | 具体 |
+|---|---|
+| 不在尺寸档上 | 两个新建按钮 **40px**，而 `UiButton` 的档位是 28 / 36 / 44 |
+| 圆角漂移 | 两个新建按钮 **10px**，原语是 6px |
+| 同类控件差 1px | 收起态 `.rail-action` 39×36 与 `.rail-session` 40×36 |
+| 字号跌破可读下限 | `.show-more-button` 与空项目里的「新建」只有 **10px** |
+| **非法 HTML** | `.thread-delete` 是 `<span role="button" tabindex="0">`，**嵌在 `<button class="thread-item">` 内部** —— `<button>` 的内容模型禁止交互式后代 |
+
+> 关于最后一条，**实测纠正了一个想当然的判断**：12/12 候选项 `el.focus()` 全部成功
+> （Chrome 允许 button 内带 tabindex 的元素被程序化聚焦），所以这不是"够不到"，
+> 而是"**程序化可聚焦 ≠ 能按 Tab 到达**"，外加结构本身违规。
+> **这正是夹具的价值：它推翻了一个靠读代码得出的结论。**
+
+**给 `UiButton` 补的两个能力**（迁移过程中被逼出来的）：
+
+| prop | 作用 | 为什么必须是 prop |
+|---|---|---|
+| `icon` | 方形图标按钮，宽高相等、去掉横向内边距，并按档覆盖宽度（sm/md/lg 各自等于对应的 `--control-h-*`） | 28px 是最小档，低于它点击区就不够用 |
+| `align="start"` | 块级按钮内容靠左，配合尾随的 `kbd` 用 `margin-left: auto` 推到最右 | **在页面层用单类压不住原语**：Vue scoped style 产出的是 `.ui-btn[data-v-x]`（特异性 0,2,0），全局单类只有 (0,1,0)。**原语的可调项要进 props，不要在外面覆盖。** |
+
+**行结构重写**：`<div class="thread-row">` 包住 `<button class="thread-item">` 与**兄弟节点**
+`<button class="thread-delete">`，删除键用 `position: absolute` 叠在行右端。
+副作用是好事：**不再需要 `@click.stop` / `@keydown.enter.stop.prevent`**，
+`select-thread` 天然不会被误触发；删除键也从 20×20 长到 24×24。
+`active` 类保留在 `.thread-item` 上（既有 `.thread-item.active` 系列规则一条都不用改），
+另在 `.thread-row` 上挂 `is-active` 供行操作使用。
+
+**★ 这里差点漏掉一个回归，是截图比对抓出来的 ★**
+`.thread-delete` 的可见性判据里原本有 `.thread-item.active .thread-delete { opacity: 1 }`。
+删除键搬成兄弟节点后这条**后代选择器不再匹配**，于是**当前选中的会话行上的删除键消失了**——
+代码能跑、测试全绿、记分卡全绿，只有把迁移前后的截图并排看才发现。
+修法：给 `.thread-row` 加 `is-active`，判据改为 `.thread-row.is-active .thread-delete`。
+**教训：结构重写会让"依赖 DOM 层级"的选择器静默失效，这类失效只能靠看图，测试抓不到。**
+
+**同时修掉一个上一笔埋下的真缺陷**：`@media (hover: none)` 里原来写的是
+`.message-actions { opacity: 1; visibility: visible }`，但 §11 已把可点性改成用 `pointer-events` 控制
+—— 触屏上这些按钮**看得见却点不动**。已改为 `.message-actions, .thread-delete { opacity: 1; pointer-events: auto }`
+（顺带让触屏也能看到行删除键，原先它只能靠 hover 浮出）。
+
+**顺带清出的死代码**（在 `ui/src` 全域 grep 命中 0 个文件）：`.new-button` 全家族（6 条）、
+`.new-button-icon`、`.thread-list-inner`、`.collapsed-thread-label`，以及**收起态的一整片**
+`.sidebar.collapsed .thread-item` / `.collapsed-thread-icon` 等 11 条 ——
+收起态渲染的是 `.rail-*`、而 `.thread-list` 带 `v-if="!collapsed"`，**这些规则永远不会生效**。
+`main.css` **1139 → 997 行**。
+
+**页面上保留的规则只剩"原语管不到的东西"**：`.new-chat-button > span:first-child` 的图标色号与字号、
+`.new-chat-button kbd` 快捷键胶囊、三个项目行图标按钮的 `flex: 0 0 auto`（不加会被标题挤瘦）、
+svg 的几何参数、以及各处 `margin` / `justify-self` 排布。
+
+**验收（实跑）**：`npm test` → **4 files / 31 tests passed** · `npm run audit` → 全部通过
+（token 覆盖率 99.6% / `var()`=1054 / 硬编码色 0 / 硬编码 px 4 / 冗余声明 0）·
+`npm run lint:css` → 0 errors / 19 warnings · `npm run build` → ✓ 945ms · `npm run shots` → 3/3。
+
+**一条测试的改法本身是结论**：原测试 `'deletes a thread by click and by keyboard…'` 用
+`trigger('keydown', { key: 'Enter' })` 模拟键盘删除。删除键改成真 `<button>` 之后，
+**Enter 由浏览器原生触发 click**，而 happy-dom 不会合成 —— 这条测试失败是**正确的**。
+新断言改为守结构不变式：`expect(deletes[0].element.tagName).toBe('BUTTON')` 且
+`expect(deletes[0].element.closest('button')).toBe(deletes[0].element)`（证明外面没有别的 button 祖先）。
+
+**有意为之的可见变化**：两个新建按钮 40→36px、圆角 10→6、字重 650→500；
+`.sidebar-toggle` 从有框有底的 30×30 变成 ghost 的 28×28；
+三个项目行图标从 23–25px 变成 28×28 方形（**点击区变大是刻意的**）；
+`.show-more-button` 10→12px、高 27→28；空项目的「创建第一个项目」从无框强调字变成实心 primary 小按钮。
+
+**存档**：`docs/design/baseline/phase3-sidebar-760.png`（左右并排：同一视口各裁左侧 320px，
+左为迁移前、右为迁移后），`after-{375,768,1440}.png` 已刷新。
+
+## 14. 阶段三第六笔 · 补齐 §6 状态矩阵，抓到 Hero 全无样式（已完成）
+
+**起因**：§6 的矩阵此前只是「设想」，格子里的字没有任何人验过。补矩阵意味着**每一格都得真的渲染出来**，
+于是先给零测试的主区 `AgentWorkspace.vue`（447 行）补安全网，再搭 `ui/preview/states.html` 种状态。
+
+### 抓到的主缺陷：主区 Hero 有 5 个类名在全 `ui/src` 里没有任何 CSS
+
+```
+grep 'welcome-primary|welcome-secondary|welcome-actions|welcome-capabilities|welcome-mark' ui/src
+→ 只命中 AgentWorkspace.vue（模板）与新建的 AgentWorkspace.test.js，零条 CSS 规则
+```
+
+后果两条，都在**新用户的第一屏**：
+
+1. 「开始新聊天」/「创建项目」两个 CTA 一直以**浏览器默认按钮**（系统灰底描边）渲染 ——
+   全应用唯一两个原生外观的控件。
+2. 「独立会话 / 纯对话模式 / {模型}」三个能力标签挤成一行**无分隔连续文字**
+   （截图里就是 `独立会话仓库上下文deepseek-flash` —— 这个现象在更早的真实截图里就出现过，当时没解释）。
+
+**为什么之前没人发现**：这一屏只在 `!agent.currentThread` 时出现，
+**账号下只要还有一个会话就再也回不去**。手工点不出来，测试不渲样式，记分卡只量颜色/字号/圆角——
+而这两个缺陷恰好只违反「排布与层级」，不违反其中任何一项。
+**这是「状态矩阵必须能真的渲染」这句话的第一个实证。**
+
+**连带缺陷**：`:last-child` 脆弱。原样式是 `.empty-state p:last-child`，
+但无会话分支里 `<p>` 后面还有 `.welcome-actions`，于是那一屏的段落拿不到 `max-width: 510px`。
+已加 `.empty-copy` 类，判据改为 `.empty-state p:last-child, .empty-copy`。
+
+### 修法
+
+| 位置 | 之前 | 现在 |
+|---|---|---|
+| 两个 CTA | 裸 `<button>`，无样式 | `<UiButton variant="primary">开始新聊天` / `<UiButton variant="secondary">创建项目` |
+| 能力标签 | 三个连续 `<span>`，无样式 | 胶囊（1px `--c-border` 边框 + `--radius-full` + `--text-xs` + `700`），**与既有的 `.empty-state .hero-kicker` 同一套语汇** |
+| 加载态 | `<div class="empty-state">正在加载会话...</div>` 裸文字 | `role="status" aria-live="polite"` + 纯 CSS spinner + 文案 |
+
+新增的 CSS：`.welcome-mark`（居中）/ `.welcome-actions`（居中 + `gap` + `margin-top`）/
+`.welcome-capabilities`（居中 + `wrap`）/ `.welcome-capabilities span`（胶囊）/
+`.loading-state`（纵向居中 + `gap`）/ `.loading-spinner`（`1.5em` 见方、`0.125em` 边框、
+`border-top-color: var(--c-accent)`、`animation: loading-spin calc(var(--dur-base) * 3) linear infinite`）/
+`@keyframes loading-spin` / `@media (prefers-reduced-motion: reduce)` 关掉动画。
+**spinner 的尺寸用 `em` 不用 `px`** —— 与 `UiButton` 内部那个指示器同源，跟随字号缩放。
+
+### 顺带修掉的一处工具缺陷：`audit-css.mjs` 把 `@keyframes` 步骤当成选择器
+
+我加了第二个 `@keyframes`（`loading-spin`）之后，「冗余声明」从 0 变成 1。二分（`tmp/bisect-redun.mjs`）证明元凶就是它。
+
+根因：`ui/scripts/audit-css.mjs:274` 对 `@keyframes` 走 `walk(..., 'keyframes', ...)`，
+内层 `to` / `from` / `0%` 被 push 成 `{ selector: 'to', atRule: true }`（`:286`）；
+但 `:629` 构造 decl 时**丢掉了 `atRule`**，于是 `:872` 的冗余检查把
+`UiButton.vue` 与 `main.css` 里各自的 `to { transform: rotate(360deg) }` 当成同一个选择器的重复声明。
+**事实是错的：不同 `animation-name` 的关键帧互不覆盖。**
+
+修法：`:629` 的 decl 增加 `atRule: !!rule.atRule`；`:872` 改为 `if (!d.selector || d.atRule) continue`。
+修后「规则块 536」与修改前完全一致，证明没有影响别的计数。
+**已同步回 `.agents/skills/frontend-craft/scripts/audit-css.mjs`**（两边 SHA256 均为 `AE757CDE…A51`）——
+否则 skill 里那份会继续对每个「再加一个动画」的人误报。
+
+**二分方法（可复用）**：逐条把新增规则替换成注释、在**完整 `src` 语料**上跑 audit。两个坑：
+①`execFileSync` 在有未通过项时会抛异常，JSON 在 `error.stdout` 里，必须 catch；
+②**只审单个文件没有意义**，冗余判据是跨文件聚合的（把 `main.css` 单独审会得到 0）。
+
+### 验收（实跑）
+
+`npm test` → **5 files / 41 tests passed**（新增 `AgentWorkspace.test.js` 10 条：加载态不闪 Hero、
+两个 CTA 各自的路由、三种 Hero 文案、错误横幅与消息共存、标题就地编辑的三条路径、空白标题不发请求、
+`isComposing` 期间回车不保存、无会话时不可编辑）· `npm run audit` → 全部通过
+（token 覆盖率 99.6% / `var()`=1070 / 硬编码色 0 / 硬编码 px 4 / **冗余声明 0**）·
+`npm run lint:css` → 0 errors / 19 warnings · `npm run build` → ✓ 941ms ·
+`npm run shots` → 3/3（40166 / 61370 / 76814 B）。**截图与 `after-*` 基线不同是预期的** ——
+真实应用此刻正处在 Hero 状态，能力标签的胶囊化直接反映在截图里。
+
+**存档**：`docs/design/baseline/phase3-states-920.png`（6 格纵向拼版：无会话 / 普通聊天空态 /
+项目会话空态 / 加载态 / 错误态 / 正常态）、`phase3-states-empty-1472.png`（第一屏 1:1）。
+
+**新增的工程约束（记在 §6 里）**：`ui/scripts/capture.mjs` 把 URL 交给 shell，
+**`&` 在那里是命令分隔符** —— 夹具的查询参数只能有一个；`?a=1&b=2` 会报
+`'b' is not recognized as an internal or external command`，加引号也救不了。
+
+---
+
+## 15. 阶段三第七笔 · 消息块迁移（已完成）
+
+**范围**：`ChatMessage.vue` 分发的五个子组件里的四个 —— `MessageActions.vue`、`ProposalCard.vue`、
+`HumanInterventionCard.vue`、`TodoPlan.vue`。
+
+### 为什么要先建夹具
+
+`ChatMessage` 能渲染六种 chunk kind，但**现有会话数据里只有 `text` 和 `run_activity`**：
+`proposal` / `intervention` / `todo` / `error` 这四种块**既点不出来也截不到**。
+所以在动模板之前先建了 `ui/preview/messages.html` + `ui/preview/messages.js`，
+把 16 种情况铺开成一张矩阵（用户短消息 / 用户 >7 行 / 助手 Markdown + 代码块 /
+执行记录折叠·运行中·失败 / 清单部分完成·全部完成 / 方案待确认·已批准·已拒绝 /
+人工介入待答复·正在恢复·已答复 / 错误块共存·单独）。
+
+夹具同样支持 `?cell=N` 只渲染第 N 格（1:1、单列）——**这是拿某一格大图的唯一正确方法**，
+见下面「一条失败的尝试」。运行中的用例必须用相对现在的起点
+（`new Date(Date.now() - 74000).toISOString()`），否则「用时」会算出几百天。
+
+```bash
+# 整张矩阵（迁移前后各截一次）
+node ui/scripts/capture.mjs "http://127.0.0.1:3000/preview/messages.html" tmp/msg --widths 1560 --height 2600 --budget 9000 --name before
+# 单格 1:1（0..15）
+node ui/scripts/capture.mjs "http://127.0.0.1:3000/preview/messages.html?cell=8" tmp/msg --widths 900 --height 620 --budget 6000 --name c8
+```
+
+### 迁移前量到的问题
+
+| # | 现象 | 根因 |
+|---|---|---|
+| 1 | 清单头是英文 `2 out of 4 tasks completed` | `TodoPlan.vue` 模板里直接写死英文，在一个 100% 中文的界面里 |
+| 2 | 方案卡「调整方案」与「拒绝实施」两个次要按钮**几乎分辨不出来** | 两者共用 `.proposal-button` 一套外观 |
+| 3 | 方案的三个按钮**禁用态与可点态一模一样**（假禁用） | 模板传了 `:disabled`，但 `.proposal-button` 家族**完全没有 `:disabled` 规则** |
+| 4 | 次要按钮**没有任何 hover 反馈** | `.proposal-button:hover` 把 `border-color` / `background` 设成了与静息态**完全相同**的值 |
+| 5 | 主按钮一悬停**从品牌绿跳到另一个绿** | `.proposal-button-primary:hover` 用的是 `--c-success`，与 `--c-accent` 不是同一条梯度（与早期发送按钮同型） |
+| 6 | 人工介入的选项按钮是**小胶囊**、提交按钮是**琥珀实心** | 各写各的；且 `.intervention-options button:disabled { cursor: default }` 只改光标不改外观 |
+| 7 | `.intervention-options button` / `.intervention-reply button` / `.run-activity-toggle` **没有 `:focus-visible`** | §11 那轮只修了「写成 `outline: none`」的 15 处，这三个是「压根没写过」 |
+| 8 | `.message-expand-button` 的规则**分散在两块**（结构在 `main.css:207-213`，颜色在 `main.css:542-549`） | 追加式修改的遗留 |
+
+### 分类原则（这一笔的核心决策）
+
+**设计系统的按钮是给「动作」的；disclosure 与文内链接是另一种控件。**
+
+据此**刻意不套 `UiButton`** 的三处，改为「把状态补齐 + 补注释说明为什么」：
+
+- `.message-expand-button` —— 气泡里的一行文字 + 旋转箭头；
+- `.run-activity-toggle` —— 一行的容器，内含旋转箭头 + 摘要 + 贴右端状态胶囊，
+  几何**由内容决定**，套不上 28 / 36 / 44 的定高档位；
+- `.active-task-select` —— 整块就是 chip 内容，外面再包一层会双重边框。
+
+**硬例外（永远不可能迁移）**：
+
+- `.code-copy-action` —— 它写在 markdown-it 的 `fence` 渲染器返回的 **HTML 字符串里**
+  （`ChatMessage.vue:37`），经 `v-html` 注入，**永远不可能换成 Vue 组件**；
+- `.repo-control-input` —— 只读的仓库展示。
+
+### 改动
+
+| 文件 | 改动 |
+|---|---|
+| `MessageActions.vue` | `.message-copy-button` → `UiButton variant="ghost" size="sm" icon`（svg 进默认插槽；`UiButton` 未声明 `inheritAttrs: false`，`aria-label` / `title` 正常透传） |
+| `ProposalCard.vue` | 三个按钮 → `primary` / `secondary` / `ghost`，都带 `:disabled` |
+| `HumanInterventionCard.vue` | 选项 → `UiButton variant="secondary" size="sm"`；textarea → `UiTextarea`（`rows=2`）；提交 → `UiButton type="submit" variant="primary"` |
+| `TodoPlan.vue` | 头部改 `已完成 {{ n }} / {{ total }} 项`；`☷` 加 `aria-hidden="true"` |
+
+**提交按钮从琥珀改成品牌绿**：警告色表示「小心」，不表示「确认」。
+在琥珀色的卡片里放一个品牌绿主按钮，比用琥珀色实心按钮更对 —— 卡片本身已经在说「注意」。
+
+`main.css` 1025 → 1017 行，花括号 418/418 平衡。删掉 `.proposal-button` 全家族 5 条、
+`.intervention-options button`（含 `:disabled`）、`.intervention-reply textarea` 与 `button`、
+`.message-copy-button` 的外观三块（只留 `svg { width: 17px; height: 17px }`）、
+`.composer-interaction-hint button`；合并 `.message-expand-button` 的两块；
+新增 `.intervention-input { flex: 1; min-width: 0 }` 与 `.run-activity-toggle:focus-visible`。
+
+### 验收（实跑）
+
+`npm test` → **5 files / 41 tests passed**（测试一行未改）· `npm run audit` → 全部通过
+（token 覆盖率 99.6% / `var()`=1029 / 硬编码色 0 / 硬编码 px 4 / 冗余声明 0；
+**规则块 536 → 523**、「同一选择器分散在多块」64 → 62）· `npm run lint:css` → 0 errors / 19 warnings ·
+`npm run build` → ✓ 985ms · `npm run shots` → 3/3（40166 / 61370 / 76814 B，**与本轮改动前完全一致**）。
+
+> 截图字节完全一致是**预期**的：真实应用此刻在 Hero 态，消息块没有出现在任何一屏里。
+> **这正是这个夹具存在的理由 —— 改动最需要看的那部分，恰恰是默认截图永远拍不到的。**
+
+**存档**：
+`docs/design/baseline/phase3-messages-before-1560.png`（16 格整张，迁移前）、
+`phase3-messages-after-1560.png`（迁移后）、
+`phase3-proposal-900.png`（方案卡 1:1）、`phase3-intervention-900.png`（人工介入卡 1:1）、
+`phase3-todoplan-900.png`（清单卡 1:1）。
+
+### 一条失败的尝试（别再走一遍）
+
+想做「迁移前后并排图」，用 `overflow: hidden` 的窗口从两张 1560 整屏截图里裁同一区域。
+**失败了三次**：各行的 y 偏移靠目测估，估的比实际小约 200px，三次都截到了错误的行；
+中途想用 PowerShell 改那个 HTML 又踩了下面那条 mojibake 教训。
+
+**结论：要某一格的 1:1 图，用夹具的 `?cell=N` 直接渲染，不要在合成图上裁。**
+整张 before / after 各存一份作证据即可。
+
+### ★ 一条必须记住的工程教训（这次真的把文件写坏了）★
+
+```powershell
+# ❌ 会破坏 UTF-8 中文，且写出时带 BOM
+(Get-Content file -Raw) -replace 'a','b' | Set-Content file -Encoding utf8
+```
+
+实测把 `ui/preview/messages-ab.html` 的 `<title>消息块迁移前后</title>` 写成
+`娑堟伅鍧楄縼绉诲墠鍚?/title>`（`?` 处是被吃掉的 `<`），写出时还带上 BOM
+（`s.charCodeAt(0) === 0xFEFF`），**页面整个渲染成空白**。
+
+根因：这台机器上 `pwsh` 工具跑的是 **Windows PowerShell 5.1**，
+`Get-Content -Raw` 默认按 **ANSI / GBK** 解码。
+
+**结论：绝不用 PowerShell 对 UTF-8 文本文件做「读-改-写」，一律用 `edit` / `write` 工具。**
+（此前的几次 `-replace` 之所以没出事，是因为都在流式处理短 ASCII 串。）
+
+> **同族的第三次数错**：`(Get-Content file).Count` 在这个仓库上**也不可信** ——
+> 它给 `docs/design/DESIGN.md` 报 463 行，而用 `read` 工具读是 **716 行**
+> （`[System.IO.File]::ReadAllText` 数出 716 个 LF、0 个 CRLF，与 `read` 一致）。
+> 这已经是第三次遇到「PowerShell 报的行号/行数 ≠ 文件真实行号/行数」
+> （前两次分别是差 ±4 与差 ±9）。**要行数或行号，只信 `read` / `grep` 工具。**
+
+### 还欠的三件事
+
+1. `ui/src/api/types.js` **缺 `todo` / `error` / `intervention` 三种 chunk kind 的形状** ——
+   `ChatMessage.vue` 实际在分发六种，契约文件只记了三种。契约文件不完整比没有更危险：
+   它会让人以为「没有别的了」。
+2. `.run-activity-toggle` 只补了焦点环，未换原语（按上面的分类原则，这是有意的）。
+3. `.active-task-cancel` / `.active-task-select` 所在的 `ActiveTaskStrip.vue` 尚未处理。
+
+---
+
+## 16. 阶段三第八笔 · 活跃任务条（已完成）
+
+**为什么到现在才做它**：这个组件**只在有正在运行的任务时出现**（`v-if="tasks.length"`），
+而 `activeRuns` 在默认数据里恒为 `[]`。**它从来没出现在任何一张截图里**，
+所以之前七笔都没碰到它 —— 不是漏了，是看不见。
+
+做法照旧：**先建可渲染它的夹具，再写测试，最后才动模板。**
+
+### 先补夹具
+
+给 `ui/preview/states.js` 加了第 ⑦ 格：四个任务，覆盖三种状态
+（`running` / `queued` / `cancelling`）+ 一个超长标题 + 一个边界
+（`thread.status` 说在跑、但本地 `activeRuns` 里没有 runId → 取消键不渲染）。
+
+> 顺带发现：旧的 `phase3-states-920.png` 用的是 `--height 2900`，
+> 而每格高 `900 × 0.62 = 558` 加标签约 586px —— **第 ⑥ 格「正常态」其实一直被裁掉了**，
+> 我却按"6 格纵向拼版"写进了文档。现在改成 `--height 4200`，7 格全部可见。
+> **教训：拼版图的 `--height` 要用「格数 × 单格高」算出来，不能目测给一个数。**
+
+又新建了 `ui/preview/active-tasks.html` + `active-tasks.js` —— **只挂这一个组件**，
+这样能用 `capture.mjs --scale 3` 把它放大三倍看点击区。整屏夹具做不到这件事
+（1440×900 放三倍会超出图片尺寸上限）。这块挂两遍：四个真实任务，和一个空数组
+（**肉眼确认「空数组时整条不渲染」，而不是只信断言**）。
+
+```bash
+node ui/scripts/capture.mjs http://127.0.0.1:3000/preview/active-tasks.html tmp/at --widths 740 --height 260 --scale 3 --budget 5000 --name tasks
+```
+
+### 先写测试（对着旧代码跑，必须全绿）
+
+新建 `ui/src/components/ActiveTaskStrip.test.js`（**10 条，对着未改动的组件跑就全绿**）：
+空数组整条不渲染 · 每个任务一个条目且标题与状态文案都在 · 三种状态各自的文案 ·
+没有 title 退回 repoFullName、都没有就用「新任务」 · `activeId` 决定哪个是 `selected` ·
+点条目发 `select` 带任务 id · 点取消发 `cancel` 带 `{threadId, runId}` ·
+**没有 runId 的条目不渲染取消键** · 取消键有可读的 `aria-label`（不是只有一个 `×`）·
+**取消键在条目内部且它自己不是嵌套在另一个 button 里的 button**。
+
+### 量到的问题
+
+| # | 现象 | 根因 |
+|---|---|---|
+| 1 | 取消键**悬停时零反馈** | 全文没有 `.active-task-cancel:hover` —— 和 `.proposal-button:hover` 同型 |
+| 2 | 整条是按钮，**悬停也没有反馈** | 没有 `.active-task-item:hover` |
+| 3 | `×` **紧贴在状态文字上**，点击区只有大约 10px 宽 | `.active-task-cancel { padding-left: var(--space-4) }`，除此之外没有任何内边距 |
+| 4 | 状态文字靠**浏览器默认**的 `<small>` 尺寸 | `.active-task-select small` 只写了 `color`；这份样式表里其它每一处 `small` 都写了字号 |
+| 5 | 这个组件是全项目唯一带 scoped `<style>` 的，却**过不了自己的 stylelint** | 规则之间没有空行（10 个 `rule-empty-line-before`）+ 声明顺序倒置 |
+
+### 改动
+
+- 取消键 → `UiButton variant="ghost" size="sm" icon`：拿到 **28×28 点击区**、原语自带的
+  hover（`color: var(--c-text)` + `background: var(--c-surface-hover)`）与 `:focus-visible` 焦点环。
+  只覆盖焦点环偏移：原语默认 `outline-offset: 2px`，而按钮已经贴到条目的圆角边框上，
+  `+2px` 会画到边框外，收成 `-2px`。
+- `.active-task-item:hover { border-color: var(--c-border-strong) }` —— **只改边框色不铺底色**，
+  因为铺底色会和里面 ghost 按钮自带的 hover 底色撞成一片，看不出取消键自己被指到了。
+- `.active-task-item` 加 `padding-right: var(--space-2)`，让 28px 的按钮不贴着圆角边框。
+- `.active-task-select small { font-size: var(--text-xs) }` —— 显式给字号。
+  **靠 UA 默认值等于没有设计。**
+- style 块按原语那一套重排（规则之间空行、状态按 default → hover → focus → selected 排序）。
+
+### 验收（实跑）
+
+`npx vitest run src/components/ActiveTaskStrip.test.js` → **10 passed**（迁移前后都全绿 = 行为未变）·
+`npm test` → **6 files / 51 tests passed** · `npm run audit` → 全部通过
+（`var()` 1029 → 1031，其余不变）· `npx stylelint "src/components/*.vue"` → **0 problems**
+（迁移前 11 problems）· `npm run build` → ✓ 1.00s ·
+`npm run shots` → 3/3，字节 **40166 / 61370 / 76814，与改动前逐字节相同**（预期 —— 没有活跃任务）。
+
+**存档**：`docs/design/baseline/phase3-active-tasks-740.png`（1:1 挂载 + `--scale 3`，
+含「四个任务」与「空数组不渲染」两块）、`phase3-states-920.png`（重截为 7 格 / 4200px）。
+
+---
+
+## 17. 阶段三第九笔 · 只读的仓库展示不该长得像控件（已完成）
+
+**这是组件迁移全部做完之后剩下三条里最该先做的一条**，因为它在**每一屏**都出现：
+底栏右半部分那个「仓库」胶囊。
+
+### 缺陷：两个并排的胶囊，一个真能点，一个点了没反应
+
+```
+.model-picker        { border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); height: 30px }   ← 真的 <select>
+.repo-control-input  { border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); min-height: 30px } ← 只读文字
+```
+
+**同形不同能**。用户看到两个一模一样的胶囊并排，自然会去点右边那个，然后什么都不会发生。
+这与最初诊断里「底栏三种交互层级视觉重量相同」是同一个病的残留。
+
+### 顺带清出的死代码：那个位置本来是一个真的输入框
+
+`.repo-provider-select`（含 `:focus`）、`.repo-control-input:focus-within`、
+`.repo-control-input input`、`.repo-control-input input::placeholder` —— 四条规则全部
+**在 `ui/src` 全域 grep 命中 0 次**。它们是「仓库曾经可编辑」那一版的遗留：
+后来改成只读展示，模板换了、样式没删。**模板改成只读的那一刻，这四条就死了**，
+但因为渲染出来"看起来正常"，一直没人发现。
+
+### 改动
+
+- **`.repo-control-input` 去掉边框与底色**。只读的事实不该长得像控件。
+  底栏于是变成「**一个带框的控件（模型选择器）+ 两组纯文字（推理 / 仓库）**」，
+  交互层级一眼可辨。`.repo-provider-label` 与 `.repo-fixed-name` 一起降到
+  `--c-text-muted` / `--c-text-secondary`，即"上下文"那一档。
+- **`<label>` → `<span>`**。它本来是 `<label>`，因为里面曾经有一个真 `<input>`；
+  现在里面只有文字，**一个不指向任何控件的 `<label>` 是错语义**。改成 `<span>`。
+- **加 `tabindex="0"`**：长仓库名会被 ellipsis 截断，鼠标能靠 `title` 看到全名，
+  键盘用户却聚焦不到一个普通 `<span>`。加一个 tab 停靠点让 `title` 对键盘也可达。
+- 删掉上面那四条死规则。
+- **`.repo-fixed-name` 补 `min-width: 0`** —— 见下。
+
+### ★ 新夹具当场抓到的第二个缺陷：那个 ellipsis 从来没有生效过 ★
+
+`overflow: hidden; text-overflow: ellipsis; white-space: nowrap` 三件套写得都对，
+但**父级的 `max-width` 从来没约束住它**：`.repo-fixed-name` 是 flex 子项，
+flex 子项的 `min-width` 默认是 `auto`（= 不得小于内容宽度），
+于是长仓库名把父级顶破、自己溢出去，**ellipsis 永远不触发**。
+`min-width: 0` 一行修好。**这是"三件套齐全但就是不生效"的经典成因，
+只有拿一个超长字符串去渲染才会暴露** —— 真实数据里的仓库名都很短，
+所以这个缺陷在改前改后都不影响任何一张真实截图。
+
+### 新夹具：`ui/preview/composer-footer.html` + `.js`
+
+整屏截图里底栏只有几十像素高，看不清那两个胶囊到底像不像。这个夹具单独挂
+`ChatComposer`，给了 620px 的宿主和**四种数据**（长仓库名 / 短仓库名 / 没有仓库 /
+`chatOnly`），配合 `--scale 2` 就能把底栏放大到能直接下判断。
+
+```bash
+node ui/scripts/capture.mjs http://127.0.0.1:3000/preview/composer-footer.html tmp/rc --widths 900 --height 400 --scale 2 --budget 7000 --name footer
+```
+
+> `--widths 700` 时截不到截断效果，因为 `@media (max-width: 720px)` 里
+> `.repo-control-input { max-width: none; flex: 1 }` 会生效（窄屏下仓库行占满整行，
+> **不该截断**，这是对的）。要验截断必须用 ≥ 721px 的视口。
+
+### 验收（实跑）
+
+`npm test` → **6 files / 51 tests passed**（测试一行未改）· `npm run audit` → 全部通过
+（规则块 523 → 520、`var()` 1031 → 1009、token 覆盖率 99.6% / 硬编码色 0 / 硬编码 px 4 /
+冗余声明 0）· `npm run lint:css` → 0 errors / 19 warnings · `npm run build` → ✓ 1.06s ·
+`npm run shots` → 3/3，字节 **40113 / 61029 / 76581**（与上一笔的 40166 / 61370 / 76814 不同 ——
+预期，底栏变了）。`after-{375,768,1440}.png` 已刷新。
+
+**存档**：`docs/design/baseline/phase3-repo-readonly-900.png`（1:1 夹具 + `--scale 2`，
+四种数据同屏）。
+
+---
+
+## 18. 阶段三第十笔 · 补齐边界态，并抓到「加载失败冒充空态」（已完成）
+
+这一笔把 §6 的**边界态那一列**从「写了个词」变成「真的渲染过、量过」。做法不是逐格肉眼
+看一遍，而是**新建一张带自动探测器的夹具** `ui/preview/edges.html` ——
+它把六种极端输入渲染出来，每格跑一次几何探测，并把判定结果画在截图下方。
+`⬜` 就是这样被清零的。
+
+### 新夹具：`ui/preview/edges.html` + `.js`
+
+六格极端输入（全是真实数据里几乎不会出现、手工点不出来的）：
+
+| 格 | 输入 | 期望 |
+|---|---|---|
+| ① | 300 字符不换行 URL + 200 字符宽代码行 + 宽表格，同一条助手消息 | 气泡内自己滚，视口不被撑破 |
+| ② | 无空格的 120 字符会话标题 | 省略号，状态徽章不被挤走 |
+| ③ | 60 字项目名 + 80 字会话名 + 超长仓库名 | 各自省略号 |
+| ④ | 超长 todo 文本与日志行 | 卡片内折行 |
+| ⑤ | 仓库地址塞 260 字符（**该输入没有 `maxlength`**） | 输入框内部滚动，弹窗不破版 |
+| ⑥ | 项目列表加载失败 | 有出路，且不冒充空态 |
+| ⑦ | 项目列表加载中 | 不冒充空态 |
+
+```bash
+node ui/scripts/capture.mjs "http://127.0.0.1:3000/preview/edges.html" tmp/ed --widths 1500 --height 8400 --budget 12000 --name edges
+node ui/scripts/capture.mjs "http://127.0.0.1:3000/preview/edges.html?cell=3" tmp/ed --widths 1500 --height 1250 --budget 7000 --name e3
+```
+
+**探测器问三个问题**（每个都配了排除规则，否则报告里全是假阳性）：
+
+1. **有没有元素越出 1440 视口**。排除「被祖先 `overflow-x` 裁掉的」——
+   `pre { overflow-x: auto }` 里的 `<code>` 天然比视口宽，但用户看不到任何越界。
+   只保留最内层的违规元素。
+2. **有没有文字越出自己那张卡片**（只看叶子文本节点）。这条是必需的：外面的滚动容器
+   一兜，第 1 条就报不出来了，可用户看到的是**一行字从卡片边框穿出去、在别处被切断**。
+3. **有没有 `text-overflow: ellipsis` 写在 flex/grid 容器上**。
+   `text-overflow` 只对块级/行内块容器及其行内内容生效；一旦元素是 flex/grid 容器，
+   它的文本变成匿名 flex/grid 项，**省略号永远不会出现**，外观上是「被硬生生切断」。
+   这是纯静态判据，不需要长内容也能查。
+
+### 抓到的三个真缺陷
+
+**A. 「项目列表加载失败」与「你还没有项目」在界面上完全一样。**
+根因在 `ui/src/stores/agent.js` 的 `bootstrap()`：它用 `Promise.all` 并发取五个接口，
+**任意一个 reject → 五个赋值全部跳过** → `this.projects` 保持 `[]` →
+侧栏渲染的是「项目会出现在这里 / 创建项目并绑定仓库 / **创建第一个项目**」。
+用户看到的是一句假话，而且他会去点那个必然也失败的按钮。主区虽然有一条错误的横幅，
+但侧栏这块"权威指引"完全盖过了它。
+
+改法三件：
+- `bootstrap()` 换成 `Promise.allSettled`，**各自成败各自落地**，其中一个挂掉不再
+  把已经拿到的四份数据一起丢掉。主区横幅仍然只显示第一条失败（行为不变）。
+- 新增 `projectsError` 状态。它与 `error` 分开：`error` 是「刚才那件事失败了」，
+  `projectsError` 回答的是结构性是非题「**到底有没有成功拿到项目列表**」。
+- 新增 `retryProjects()` 动作，以及侧栏的**实线警告卡 + 「重新加载」按钮** ——
+  与空态的虚线框刻意长得不一样（虚线读作"这里以后会有东西"，实线读作"这里出问题了"），
+  并且那句「这不代表你还没有项目」直接写给用户看。
+
+**B. 「还在读」是第三种空。** `projects` 为空还有一种成因：请求还没回来。
+原来这三种共用同一个空态，于是首屏会先闪一下「创建第一个项目」再跳走。
+新增 `projectsLoading` prop 与 `.project-loading`（虚线框 + spinner + 「正在加载项目…」），
+与主区的「正在加载会话…」同一套语汇。
+
+**C. 省略号写在了 flex 容器上，从来没用过。**
+`main.css` 的 `.project-heading-main small { display: flex; … text-overflow: ellipsis }`
+—— `small` 是 flex 行（左边 provider 角标、右边仓库名），**省略号静默失效**，
+长仓库名被硬切。修法是把仓库名包一层 `<span class="repo-name">`，省略号落在它身上。
+这个缺陷在默认数据下**看得见**（侧栏那三个项目的仓库名都超宽），修前是
+`clumsyspc/test_coding_r`、修后是 `clumsyspc/test_codi…` —— 也就是`after-*` 基线
+这一笔变化的原因。
+
+**另修一处同型的**：`.todo-card li` 是 flex 行，装文字的那个 `<span>` 是 flex 项，
+flex 项的 `min-width` 默认是 `auto`（不得小于内容宽度），于是一段不含空格的长串
+（超长路径、超长标识符）会直接顶出卡片边框。补 `min-width: 0; overflow-wrap: anywhere`
+后折行正常。**注意这份样式表里 `overflow-wrap: anywhere` 已经用了 4 处
+（`.plain-text` / `.markdown-body` / 两条运行轨迹），`.todo-card li` 只是漏了** ——
+同一类防护要么成体系，要么就会漏。
+
+### 验收（实跑）
+
+`npm test` → **6 files / 59 tests passed**（51 → 59：agent store +5、SessionSidebar +2、
+加载态 +1）· `npm run audit` → 全部通过（规则块 530、distinct 选择器 517、
+`var()` 1038、token 覆盖率 99.6% / 硬编码色 0 / 硬编码 px 4 / 冗余声明 0 / `!important` 0）·
+`npm run lint:css` → 0 errors / 19 warnings · `npm run build` → ✓ 1.02s ·
+`npm run shots` → 3/3，字节 **39961 / 60846 / 76400**（与上一笔的 40113 / 61029 / 76581 不同 ——
+预期，就是缺陷 C 导致的仓库名省略号）。`after-{375,768,1440}.png` 已刷新。
+
+**新增测试**（锁的是契约，不是实现）：
+- `ui/src/stores/agent.test.js` 新增 5 条 —— 项目列表挂掉时其余四个接口的数据仍然落地 ·
+  项目列表成功而别的接口失败时项目不被清空 · 全部成功时 `projectsError` 是空字符串
+  （**「读到了、只是没有」必须与「没读到」区分得开**）· `retryProjects` 成功后清错并填数据 ·
+  再次失败时保留错误文案。
+- `ui/src/components/SessionSidebar.test.js` 新增 3 条 —— 加载失败时是重试卡而不是空态 CTA
+  且点按钮发 `retry-projects` · 还在读时是 loading 占位而不是空态 CTA ·
+  真正为空时仍是空态 CTA 且不发 `retry-projects`。
+
+**存档**：`docs/design/baseline/phase3-edges-1500.png`（七格整张 + 每格判定表）、
+`phase3-edges-message-1500.png`、`phase3-edges-sidebar-1500.png`、
+`phase3-edges-todo-1500.png`、`phase3-edges-loadfail-1500.png`、
+`phase3-edges-loading-1500.png`。
+
+---
+
+## 19. 阶段三第十一笔 · 拆 `AgentWorkspace.vue`（已完成）
+
+阶段三里最后一个结构性动作。**顺序是先补测试再拆** —— 这个文件此前**零测试**，
+直接拆等于没有安全网。所以上一笔先给它写了 10 条 `AgentWorkspace.test.js`
+（断言的是 DOM 与文案，不是内部实现），这一笔拆完那 10 条**一行没改就通过**。
+
+### 拆出来的五个单元
+
+| 新文件 | 行数 | 为什么是它 |
+|---|---|---|
+| `ui/src/components/WorkspaceHeader.vue` | 136 | 标题改名有自己的一套状态（编辑中/保存中/保存失败），而且它同时是**状态胶囊文案**的唯一去处 |
+| `ui/src/components/WorkspaceConversation.vue` | 165 | 消息区、未读按钮、输入框三者**共享同一个滚动上下文**（`useSmartScroll` 的未读数只在"不贴底"时累加），拆开任何一半状态都要穿过组件边界 |
+| `ui/src/components/WorkspaceWelcome.vue` | 37 | 空态三条分支，且**只在没有会话时出现**——手工点不出来，必须能单独渲染 |
+| `ui/src/composables/useSidebarPreferences.js` | 49 | 侧栏两项本地偏好；抽出来的理由是它有**两个会静默炸掉整个组件的坑**（见下） |
+| `ui/src/composables/useProjectDialogs.js` | 77 | 项目增删改两个弹窗；两条**错误通道的分工**值得有个家（见下） |
+
+`AgentWorkspace.vue` 因此从 **454 行降到 206 行**，剩下的只有三件事：
+摆位置、接事件、管跨区域的那一点状态（标题保存态、弹窗开关）。
+
+### 拆的时候定的两条分工
+
+**一、受控组件 vs 自己管异步。** `WorkspaceHeader` 只持有"正在编辑"，改名要打接口，
+异步与"保存失败"归父级 —— 因为 `titleSaving` / `titleError` 要显示在 Header 上，
+数据却在父级。父级通过 `@rename` 接事件、通过 `:saving` / `:error-message` 传回来。
+这**与 `SessionSidebar` 的项目改名不同**：那里组件自己管编辑态也自己发请求，
+因为侧栏的项目改名没有"保存中/保存失败"两个可见状态要渲染。
+**同一个仓库里两种分工并存是有意的**，判据是"失败要不要在控件旁边显示出来"。
+
+**二、两条错误通道不能合并。** 新建/重命名失败写 `agent.error`（主区横幅），
+删除失败写 `projectDeleteError`（留在确认框里）。原因很实在：确认框一关，
+主区横幅会被下一次操作清空，用户就**再也看不到删除为什么失败**了。
+这条分工此前没有任何测试，现在 `useProjectDialogs.test.js` 里有一条专门锁它
+（断言删除失败时 `agent.error` 仍是空字符串、且确认框还开着）。
+
+### 顺带修掉的两处
+
+- **`localStorage` 抛异常**。它在隐私模式/配额满时是**抛异常**，不是返回 `null`。
+  原来的读写各包了一层 `try`，但两处都在组件里，拆的时候差点漏掉。
+  现在 `useSidebarPreferences.test.js` 里有两条直接让 `Storage.prototype.getItem` /
+  `setItem` 抛 `SecurityError` / `QuotaExceededError`，断言组件不会挂。
+- **存进去的是字符串数组，读回来可能是任意 JSON**（手改过、旧版本格式）。
+  原来没有 `Array.isArray` 校验 —— 一个对象会被当成"折叠项目列表"用。
+  现在补了校验，也有测试。
+
+另外把"编辑到一半切会话"用 `:key="agent.currentThreadId"` 处理掉了：强制重挂
+`WorkspaceHeader`，输入框不会跨会话留着。这比让子组件 `defineExpose` 一个
+`resetDraft()` 再让父级去调它干净。
+
+### 验收（实跑）
+
+- `npm test` → **8 files / 73 tests passed**（59 → 73：新增 `useSidebarPreferences` 6 条 /
+  `useProjectDialogs` 8 条；`AgentWorkspace.test.js` 的 10 条**一行未改**）
+- `npm run audit` → 全部通过（范围 24 个文件 · 3732 行 · 规则块 530 · distinct 选择器 517 ·
+  `var()` 1038 · 覆盖率 99.6% / 硬编码色 0 / 硬编码 px 4 / 冗余声明 0）
+- `npm run lint:css` → 0 errors / 19 warnings
+- `npm run build` → ✓ 1.04s
+- `npm run shots` → 3/3，字节 **39961 / 60846 / 76400** —— 与改动前 **逐字节完全相同**。
+  **这是一次纯搬家，最强的证据就是这个数字没动。**
+
+状态矩阵夹具（`preview/states.html`，七格）重截后七格全部正常；
+`phase3-states-920.png` 已刷新 —— 它比上一版少了约 3.6 KB，差的是**上一笔**
+（§18）给侧栏加的"正在加载项目…"虚线占位，与本次拆分无关。
+**注意它与 `phase3-*` 其他图的性质不同**：那些是"某一笔改动的存证"（append-only），
+这一张是 §6 的**现役参照图**，所以随迭代刷新。
+
+---
+
+## 20. 视觉改版第一步 · 暖色调 + 近黑主色（已完成）
+
+> 这一节起不再是"零视觉变化"的迁移，而是**有意的改版**。
+> §1–§19 的每笔验收标准是"截图逐字节相同"；从这里开始标准换成
+> "每个状态都重新看过、且对比度真的量过"。
+
+### 起因
+
+用户在看完阶段三之后说"感觉界面也没啥变化"。归因是对的：前 19 节动的是**结构与约束**，
+主色、布局骨架、字体一个字没动 —— 那是刻意的（"零视觉变化"是当时的验收标准），
+但它的代价是**把整个重构的视觉上限压低了**。
+
+### 定调
+
+用户选定：**米白底 + 近黑主色**（m03558）。
+
+### 改了什么
+
+**`ui/src/styles/tokens.css` 第 1 节（中性色阶）→ 暖灰。**
+色相偏橙黄（约 35°），饱和度极低 —— 暖体现在灰里，不在主色里。
+只把主色改暖而灰还是冷灰，结果是一块发暖的东西贴在发青的底上，读起来是脏。
+
+| token | 旧 | 新 | 说明 |
+|---|---|---|---|
+| `--c-bg` | `#ffffff` | `#faf7f2` | 米白 |
+| `--c-bg-subtle` | `#f7f8f8` | `#f1ebe2` | 用户气泡、代码块、状态胶囊底 |
+| `--c-surface` | `#ffffff` | `#ffffff` | **刻意保持纯白** |
+| `--c-surface-hover` | `#f2f4f3` | `#f4efe7` | |
+| `--c-border` | `#e4e7e6` | `#e6dfd4` | |
+| `--c-border-strong` | `#d3d8d6` | `#d3c8b9` | |
+| `--c-text` | `#1c2321` | `#1f1b16` | 暖黑 |
+| `--c-text-secondary` | `#525d59` | `#574f47` | |
+| `--c-text-muted` | `#656e6a` | `#6b6259` | |
+| `--c-text-inverse` | `#ffffff` | `#faf7f2` | 反白用米白，避免在暖底上发灰 |
+
+**`--c-surface` 保持纯白是关键**：它与 `--c-bg` 的 4% 明度差就是"卡片浮在页面上"的
+全部来源。把两者调成同一个值，所有卡片会立刻失去边界感。
+
+**第 2 节（主色）→ 近黑。** `--c-accent: #1f7667` → `#231e18`，
+hover `#1a655a` → `#3b342b`，active `#155349` → `#4e4539`，subtle `#eef5f3` → `#efe9df`。
+
+两条决策写进了注释：
+
+- **为什么是近黑而不是彩色**：暖米白底上放彩色主色，两者会互相拉低 ——
+  冷色在暖底上发脏，暖色在暖底上糊成一片。近黑没有色相，不参与这场打架。
+- **hover/active 是变亮而不是变暗**（与常见的彩色主色相反）：近黑几乎没有变暗的
+  余地，`#231e18` 再暗就跟正文分不开了。做成"越交互越亮"的单向梯度，反馈反而更清楚。
+- **代价（已知且有意）**：主色不再是品牌识别的载体。绿色彻底退出，
+  logo 里的绿成了全应用唯一的彩色。
+
+**第 3 节（语义色）→ 暖化降饱和。** `--c-success` `#2f7d5b` → `#3d6b4c`、
+`--c-warning` `#8f6119` → `#8a5a1c`、`--c-danger` `#a8453f` → `#a4483c`，浅底同步暖化。
+饱和的绿/红铺在暖米白上会往外跳，看起来像贴上去的。
+
+**遮罩与阴影的基色跟着暖灰走**：`rgba(20, 28, 25, …)` → `rgba(31, 26, 21, …)` /
+`rgba(38, 30, 22, …)`。冷黑阴影落在米白上会发青。
+
+**`ui/src/styles/main.css`：把 `--c-surface` 换成 `--c-bg` 的四处**
+（`body, .app-shell, .workspace, .message-list` 那一块、`.workspace`、`.workspace-header`、
+`.sidebar`）—— 不改这几处，米白根本不会出现，因为它们是最后生效的那一层。
+
+### 对比度：真的量过
+
+新建 `tmp/contrast.mjs`（WCAG 计算器，19 组配对，未通过则 exit 1），**19/19 全部通过**：
+
+| 配对 | 对比度 |
+|---|---|
+| 正文 / 页面底 · 次级底 · 卡片 | 16.02 / 14.45 / 17.12 |
+| 次级说明 / 三种底（取最差） | 6.78 |
+| 弱化文字 / 三种底（取最差） | 5.04 |
+| 反白 / 主色实心按钮 | 15.47 |
+| 成功色 / 成功浅底 | 5.33 |
+| 警告色 / 警告浅底 | 5.31 |
+| 危险色 / 危险浅底 | 5.09 |
+
+### ★ 换主色逼出来的一个语义问题：`--c-success-subtle` 被当成"浅底"用了 14 处 ★
+
+改完主色之后全应用到处是淡绿块。根因不是配色，是**语义**：
+`--c-success-subtle` 一直在兼任两个角色 ——
+"真正的成功语义"和"随便一个浅色底"。旧主色是绿的，所以用淡绿当浅底看不出来；
+主色一变近黑，这个借用立刻暴露。
+
+按下面三条重新归属（`tmp/warm-fix.mjs`，17 条替换，每条断言恰好匹配 1 次，写出前断言花括号平衡）：
+
+| 角色 | token | 落到哪些地方 |
+|---|---|---|
+| 选中 / 强调的浅底 | `--c-accent-subtle` | `.thread-item.active`、`.rail-session.active`、`.new-content-button`、`.dialog-icon`、`.bound-repository-mark` |
+| 普通的次级浅底 | `--c-bg-subtle` | `.markdown-body code`、`.run-activity-toggle:hover`、`.run-activity-status`、`.quick-prompt:hover`、`.proposal-status`（待确认）、`.composer-interaction-hint` |
+| 只留给真正的成功 | `--c-success-subtle` | `.status-pill.finished/.completed` 的**小圆点**、`.todo-icon`、`.repo-status.ready`、`.proposal-status-approved` |
+
+**「已完成」状态胶囊本身改成中性**（底 `--c-bg-subtle`、字 `--c-text-secondary`），
+只留那个小圆点是绿的：消息区里一屏能出现四五个「已完成」，全绿等于没有重点。
+
+另外两处：`.model-picker-orbit` 的 `✳` 从 `--c-success` 改成 `--c-text-muted`（它是装饰，
+不是状态）；`.thread-item` 给绝对定位的删除键多留了 4px（`--space-32 + --space-4` →
+`--space-32 + --space-8`），原来视觉间距只有 1px。
+
+---
+
+## 21. 视觉改版第二步 · 面包屑 / 消息头时间 / 工具胶囊 / 消息列对齐（已完成）
+
+### 面包屑
+
+**改前的症状**：Header 副标题是 `` `${项目名} · ${repoFullName}` ``，而真实数据里
+**项目名与仓库名经常完全相同**（项目基本就是按仓库建的），于是渲染出
+`clumsyspc/test_coding_repo · clumsyspc/test_coding_repo` —— 同一句话写两遍。
+
+**改法**：拆成两级面包屑 `[文件夹图标] <项目名> / <会话标题>`，仓库单独作为下面的徽标。
+
+- `AgentWorkspace.vue` 拆出两个 computed：`crumb`（项目名 / `'普通聊天'` / `''`）
+  与 `repoLabel`（仓库全名 / `'未连接仓库'` / `''`）。
+- `WorkspaceHeader.vue` 新增 `crumb` prop，并新增
+  `const showRepo = computed(() => !!props.repoLabel && props.repoLabel !== props.crumb)`
+  —— **两者相同时整个隐掉徽标**。这不是边界情况，是常态。
+- 两级分量必须不同：`crumb` 用 `--c-text-muted` / 550，标题用 `--c-text` / 650
+  并升到 `--text-lg`（原来 13px，与输入态的 `--workspace-title-input` 不一致）。
+- 项目名**不指向任何页面**（这个应用还没有"项目页"这个路由），所以它是标签不是链接。
+- `AgentWorkspace.test.js` 的两条 `toContain('普通聊天 · 未连接仓库')` /
+  `toContain('开发工作台 · example/app')` 改成**拆开断言两段文本** ——
+  锁住"信息都在"，不锁中间用什么分隔符。
+
+### 消息头时间
+
+`ChatMessage.vue` 的助手/用户消息头加了 `<time class="message-time">`（`HH:MM`）。
+
+**为什么是绝对时刻而不是相对时间**（"3 分钟前"）：相对时间需要一个每分钟重算的计时器，
+而这个列表可能很长；而且它只在"刚刚"那一段比绝对时间好读，几小时、跨天之后反而更难对齐。
+`hourCycle: 'h23'` 是为了避免 12 小时制在中文环境里出现"下午 2:32"这种比时间本身还长的标签。
+`.message-time` 用最弱的灰 + 最轻的字重 —— 它是"扫读时可有可无、需要时能找到"的信息，
+不能和名字抢重心。
+
+### 工具胶囊
+
+**改前的症状**：`.run-activity` 是一条**占满整行的卡片**（`--c-surface` 底 + 边框 +
+1200px 宽）。于是"这次运行了 4 秒"这件事占了和一条消息一样大的版面 ——
+**形态远大于信息量**。四个运行轨迹叠起来，消息区基本被空条占满。
+
+**改法**：`.run-activity-toggle` 从 `display: flex; width: 100%` 改成
+`display: inline-flex` + `border-radius: var(--radius-full)` —— **一个贴着内容的胶囊**。
+展开的内容落到胶囊下面单独成块（`.run-activity-content { margin-top; border; radius-md }`），
+所以圆角不会跟着撑开。
+
+胶囊内部用 `::before { content: '·' }` 分节，**而不是给状态再套一个胶囊**：
+嵌套胶囊会让一行出现三级圆角，读起来很碎。状态色只保留在失败/等待介入时（改成彩色文字，
+不再是一整块彩色底）。图标从 18px 缩到 14px，字重从 700 降到 600。
+
+### 消息列与输入框同宽同列
+
+**改前的症状**：`.message-list` 的左右内边距是固定的 48px，而 `.composer` 是
+`width: min(900px, calc(100% - 72px))` 居中。在 1440 宽下消息列从 385 开始、
+输入框从 415 开始 —— **差 30px**。说不清哪里不对，但就是不正。
+这是 `qa-checklist.md` 第 1 项「对齐栅格」的典型失败。
+
+**改法**：两边都从 `--layout-content-max`（960px，之前定义了但**从来没人用**）反推：
+
+```css
+.composer      { width: min(var(--layout-content-max), calc(100% - 96px)); }
+.message-list  { padding-inline: max(var(--space-48), calc((100% - var(--layout-content-max)) / 2)); }
+```
+
+两个公式在宽屏与窄屏下等价（消息列宽度 = `100% - 2 × max(48, (100% - 960) / 2)`
+恰好等于 `min(960, 100% - 96)`），改 token 一处两边同时跟着走。
+**顺带让 `--layout-content-max` 有了第一个真实消费者。**
+
+### 验收（实跑）
+
+- `npm test` → **8 files / 73 tests passed**（测试只改了 `AgentWorkspace.test.js` 的两条断言）
+- `npm run audit` → 全部通过（规则块 530 → **535** · distinct 选择器 517 → **523** ·
+  `var()` 1038 → **1051** · 覆盖率 99.6% / 硬编码色 0 / 硬编码 px **4** / 冗余声明 0 / `!important` 0）
+- `npm run lint:css` → 0 errors / 19 warnings
+- `npm run build` → ✓ 953ms
+- `npm run shots` → 3/3，字节 **18287 / 28687 / 71528**（这一笔本来就是改视觉，与基线必然不同）
+- `tmp/contrast.mjs` → 19/19 通过
+
+### 存档
+
+- `phase3-warm-states-920.png`（260927 B）—— 七格状态矩阵的暖色版，**与
+  `phase3-states-920.png`（250463 B）是同一份夹具、同一份数据**，可以直接并排比对
+- `phase3-warm-empty-1472.png`（50612 B）· `phase3-warm-breadcrumb-1472.png`（53733 B）
+- `after-{375,768,1440}.png` 已刷新
+
+### 仍未做的（用户明确说第三步不做）
+
+侧栏导航段重构（项目/会话两层的分组与主次）· 悬浮提问卡 · 项目名与仓库名在侧栏里
+仍然是同一串文字显示两遍（Header 修了，侧栏没修）。
+
+---
+
+## 22. 视觉改版第二步补完 · 相对时间 + 可折叠「深度思考」（已完成）
+
+§21 遗漏了 objective 里明确列出的两项，这一节补齐。两项都不是调样式，
+是**行为**，所以都配了单元测试。
+
+### 相对时间（`ui/src/composables/useRelativeTime.js`，新增）
+
+§21 做成了绝对时刻 `18:07`，理由是"相对时间要一个定时器"。**那个理由是错的** ——
+它把"实现成本"当成了"设计取舍"。正确做法是解决那个成本：
+
+- **模块级共享一个 `now` ref + 一个 30 秒 interval**（不是每条消息一个）。
+  消费者按引用计数，最后一个卸载时停表。一屏 200 条消息仍然只有一个定时器。
+- 30 秒而不是 1 秒：这个标签最细只显示到"分钟"，
+  30 秒是"数字最多晚 30 秒跳变"与"几乎不耗电"之间的取舍。
+  不做定时器的话，一个开着不管的标签页会让十分钟前的消息永远显示"刚刚"。
+
+**粒度**：`刚刚` → `N 分钟前` → 超过一小时退回 `HH:MM` → 跨天加 `昨天`
+→ 同年内 `M 月 D 日 HH:MM` → 跨年 `YYYY 年 M 月 D 日`。
+
+为什么不一路相对下去：`3 天前` 这个粒度在看历史会话时是**有害的**。
+用户想知道的是"这次对话发生在什么时候"，而"3 天前"不如"3 月 1 日 09:00"有用。
+相对时间真正好用的窗口只有"刚刚"那一段。
+
+**`title` 补回精确时刻**：相对时间的代价是丢掉准确值，悬停给出完整时间戳，
+"扫读快"和"查得到"两件事就都成立了。
+
+**★ 顺手抓到一个真 bug ★**：`new Date(null)` 不是 `Invalid Date`，是 `1970-01-01`。
+原来的守卫只查了 `Number.isNaN`，所以**缺时间戳的消息会显示成「1970 年 1 月 1 日」**。
+已显式挡掉 `null / undefined / ''`。测试里有一条专门盯它。
+
+时钟漂移也处理了：后端比本机快几秒是常态，`diff` 为负时压成"刚刚"，
+不显示"负 1 分钟前"。
+
+### 可折叠「深度思考」（`RunActivityCard.vue`）
+
+**改前的症状**：`timelineEvents` 的过滤条件是 `kind !== 'todo'`，所以
+`kind === 'think'`（模型的推理）和 `kind === 'other'`（工具调用/步骤）
+被混在**同一条平铺列表**里，视觉上完全没有区别 ——
+而那恰恰是最长、最需要折叠的一类内容。
+
+**改法**：把 `think` 从 `timelineEvents` 里拿掉，单独成一层次级折叠。
+
+- `timelineEvents = events.filter(e => e.kind !== 'todo' && e.kind !== 'think')`
+- `thinkEvents = events.filter(e => e.kind === 'think')`
+- 默认收起（推理经常比整条运行轨迹还长），标题上直接给段数
+  `深度思考 2 段` —— 不让人点开才知道有多少
+- **不落盘持久化**：运行轨迹的展开状态要记住，因为它决定"这里有没有内容"；
+  深度思考记不记无所谓，每次回到这条消息重新看一遍反而更符合预期
+
+**为什么不挂在助手消息头下面**（objective 把它和"名字 + 时间"列在一起）：
+`think` 事件属于某一次 run，而 run 的事件是**按需拉取**的
+（只有展开运行轨迹时才 `loadRunActivity`）。挂到消息头意味着每条助手消息
+一挂载就要为它所有的 run 各发一次请求。放在运行轨迹里面，数据在哪就长在哪。
+
+**空态判定也要跟着改**：`!latestTodos.length && !timelineEvents.length && !thinkEvents.length`
+—— 漏掉最后一项的话，一条"只有推理、没有工具调用"的运行会被说成"暂无可展示的执行过程"，
+而它明明有内容。测试里有一条专门盯它。
+
+**两个视觉决定**：
+- **不用 `font-style: italic`**：中文没有真斜体，浏览器靠切变字形伪造，
+  读起来是歪的。这一层的"旁白感"交给**浅底 + 左侧竖线**表达。
+- **右边不给圆角**：`border-radius: 0 var(--radius-sm) var(--radius-sm) 0` 这种简写
+  会被 audit 当成**一个新的取值**，直接把 `border-radius distinct` 从 4 顶到 5（上限 4）。
+  这已经是同一个坑第二次踩（第一次是 `UiTextarea` 的 `border-radius: 0`）——
+  `0` 也是取值。凡是简写里带 `0`，先想一下能不能干脆不要圆角。
+
+### 夹具
+
+`ui/preview/messages.js` 之前给 `runActivityEvents` 传的是 `{}`，
+所以执行记录永远显示"暂无可展示的执行过程"，**深度思考这一层根本渲染不出来**。
+已补上真实的 think / other 事件，并新增一格「深度思考展开」——
+夹具里没有点击能力，靠挂载后一次 `setTimeout(0)` 点名 `click()` 补上。
+
+### 验收（实跑）
+
+- `npm test` → **9 files / 91 tests passed**（73 → 91：`useRelativeTime.test.js` 10 条 +
+  `RunActivityCard.test.js` 8 条。**后者是新增的安全网** —— RunActivityCard 此前零测试，
+  而"think 不能混进时间线"这条不变式一旦被破坏，界面看起来仍然正常，截图看不出来）
+- `npm run audit` → 全部通过（规则块 535 → **547** · distinct 选择器 523 → **535** ·
+  `var()` 1051 → **1076** · `border-radius distinct=4` · 覆盖率 99.6% / 硬编码色 0 / px 4）
+- `npm run lint:css` → 0 errors / 19 warnings
+- `npm run build` → ✓ 974ms
+- `npm run shots` → 3/3，字节 18287 / 28687 / **72980**（1440 变大是因为消息头多了一段相对时间）
+
+### 存档
+
+- `phase3-warm-think-1000.png`（117068 B）—— 「深度思考」展开态的 2× 放大
+- `phase3-warm-messages-1240.png`（404798 B）—— 消息块矩阵全量（16 格）
+- `after-{375,768,1440}.png` 已刷新
+
+### 这一节之后，objective 里剩下的
+
+**没有了。** 第一步（暖色调 + 近黑主色 + 对比度校验）与第二步
+（面包屑 / 名字 + 相对时间 + 可折叠深度思考 / 工具调用内联胶囊）全部落地并验收。
+第三步（侧栏导航段重构、悬浮提问卡）按用户要求不做。
+
+
+
+
+
diff --git a/docs/design/anti-patterns.md b/docs/design/anti-patterns.md
new file mode 100644
index 0000000..49d01fa
--- /dev/null
+++ b/docs/design/anti-patterns.md
@@ -0,0 +1,168 @@
+# 反模式清单（本项目版）
+
+> 每一条都锚定 `main.css` 里**真实存在的**违规，数字来自 `baseline/audit-before.json`。
+> 通用版 22 条在 skill 的 `templates/anti-patterns.md`；这里是**这个项目**的负面清单。
+
+---
+
+## AP-01 新增第二个 `:root` 块 🔴
+
+**现状**：`main.css` 有 **3 个** `:root` 块（约 `:3`、`:561`、`:1117`），互相静默覆盖。
+
+```css
+:root { --accent-strong: #245f59; }   /* 死代码 */
+:root { --accent-strong: #1f7667; }   /* 生效 */
+```
+
+**为什么坏**：读代码时你看到的是第一个，浏览器用的是最后一个。**同一语义出现两种颜色**，且没有任何提示。
+**正确做法**：全项目只有一个 `:root`，在 `tokens.css`。
+**机器可查**：`audit-css.mjs` → `:root 块 = 1`
+
+---
+
+## AP-02 硬编码颜色 🔴
+
+**现状**：`var()` 只出现 **31 次**，而硬编码颜色字面量 **488 处**、硬编码 px **539 处** → **token 覆盖率 2.9%**。
+
+**为什么坏**：token 写在 `:root` 里但没人用，等于没有。改主色要动 488 个地方。
+**正确做法**：所有颜色/字号/间距/圆角引用 `var(--…)`。
+**机器可查**：`audit-css.mjs` → `token 覆盖率 ≥ 90%`；stylelint → `declaration-property-value-disallowed-list`
+
+---
+
+## AP-03 「再微调一下」的追加覆盖块 🔴
+
+**现状**：文件里有 6 段追加式注释，就是迭代史本身：
+
+```
+/* Composer refinement: context, task input, and explicit actions. */
+/* Codex-inspired neutral workspace and compact composer. */
+/* Session header: show conversation context instead of repeating the product brand. */
+/* Collapsed sidebar: a clean icon rail without truncated session titles. */
+/* Editable session title and explicit branch context. */
+/* Refined workspace navigation and conversation composer. */
+```
+
+**503 个规则块只覆盖 408 个选择器 → 108 个选择器被重复声明**，靠「后写覆盖先写」生效。重复最多：`.composer-footer` ×4。
+
+**为什么坏**：每次迭代不是**修改**而是**追加并覆盖**。文件只增不减，同一个选择器散落在多个位置，改一处不敢删另一处。
+**正确做法**：修改已有规则，不新建同名覆盖块。
+**机器可查**：`audit-css.mjs` → `重复声明选择器 = 0`；stylelint → `no-duplicate-selectors`
+
+---
+
+## AP-04 近似色爆炸 🟠
+
+**现状**：**294 种 hex / 457 次**，聚类出 **17 组近重复**：
+
+| 聚类 | 颜色数 | 例子 |
+|---|---|---|
+| 近白 | **105** | `#f4f5f3` `#edf4f2` `#f7f8f6` `#e8edeb` … |
+| 灰 | 83 | `#9aa39f` `#a0aaa5` `#a0a4aa` `#738079` … |
+| 蓝 | 27 | Tailwind 的 `#94a3b8` `#64748b` 混着自定义灰 |
+| 青 | 10 | `#356b63` `#2f6d64` `#286f5f` `#347b67` `#246b5d` `#1f7667` |
+| 红 | 10 | — |
+
+**为什么坏**：105 个「差不多的白」在屏幕上不是 105 个颜色，而是**一片浑浊**。眼睛找不到节奏。
+**正确做法**：近白只留 3 档（`--c-bg` / `--c-bg-subtle` / `--c-surface`），绿只留 1 个主色族。
+**机器可查**：`audit-css.mjs` → `彩色 distinct ≤ 5`、`近白背景 ≤ 3`
+
+---
+
+## AP-05 `rgb(...)` 与 `rgba(...)` 各造一套基色 🟠
+
+**现状**：24 种 rgba，**19 种不同基色**。其中包括同一深绿的两个不同写法：
+
+```css
+rgb(27 40 34 / 13%)     /* 这一轮发明的 */
+rgb(31 45 39 / 13%)     /* 下一轮又发明了一个 */
+```
+
+**为什么坏**：这是「每一轮重新发明值」最赤裸的证据——连同一个颜色都懒得复用。
+**正确做法**：阴影/边框基色统一为 `rgba(20, 28, 25, ·)`，只调透明度。
+**机器可查**：`audit-css.mjs` → `rgb/rgba 基色 distinct ≤ 3`
+
+---
+
+## AP-06 圆角与字号失控 🟠
+
+**现状**：
+- **20 种圆角**：4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,22,999,50%,0，还有 `16px 16px 4px 16px`
+- **19 种字号**，且**分布倒挂**：`12px`×32 次、`11px`×23、`10px`×20、`13px`×14 …… 还有 `10.5px`、`8px`、`9px`
+
+**为什么坏**：2px 的圆角差肉眼分不出，但会让边界看起来**发毛**。10.5px 这种值说明是「看着调」而不是「选一个数」。
+**正确做法**：圆角 4 档（6/10/16/999），字号 7 档（11/12/13/15/18/24/32）。
+**机器可查**：`audit-css.mjs` → `border-radius ≤ 4`、`font-size ≤ 7`
+
+---
+
+## AP-07 断点漂移 🟡
+
+**现状**：**4 种宽度**（560 / 600 / 720 / 860），11 个 `@media` 块。其中 `600px` 只出现 **1 次**——明显是随手写的。
+
+**为什么坏**：5px 的断点差意味着两套规则在 590px 屏幕上同时命中，行为不可预测。
+**正确做法**：只用 860 / 720 / 560 三个（见 `DESIGN.md` 第 4 节）。
+**机器可查**：`audit-css.mjs`（待补断点项）
+
+---
+
+## AP-08 组件内私有 `<style>` 泄漏第四种配色 🟡
+
+**现状**：`.vue` 的 `<style>` 块基本为空，只有 `ActiveTaskStrip.vue` 有 938 字符，里面出现：
+
+```css
+#6366f1   /* Tailwind indigo-500 */
+#e5e7eb   /* Tailwind gray-200 */
+```
+
+**为什么坏**：主样式在 `main.css` 用自定义绿，组件里偷偷用了 Tailwind 的靛蓝——**没人会发现，直到它出现在屏幕上**。
+**正确做法**：组件内只能用 token；跨组件的样式放在 `main.css`。
+**机器可查**：stylelint 扫 `**/*.vue`
+
+---
+
+## AP-09 `!important` 🟡
+
+**现状**：2 处。
+
+**为什么坏**：它是「我不知道为什么这条规则不生效」的投降声明。有了第一个就有第二个。
+**正确做法**：查清优先级冲突的根因，通常是 AP-03（选择器被重复声明）。
+**机器可查**：stylelint → `declaration-no-important`
+
+---
+
+## AP-10 把控件状态当正文写 🔴
+
+**现状**：Hero 里那行（见 `baseline/before-1440.png`）：
+
+```
+独立会话仓库上下文deepseek-flash
+```
+
+**为什么坏**：三层问题——
+1. **信息架构错**：模型名是**控件状态**，不是文案；而且 composer 里已经有一个模型下拉在显示同样的值
+2. **缺失分隔**：`上下文` `deepseek-flash` 直接粘在一起，像是渲染 bug
+3. **层级错**：它是三行里唯一没有视觉角色的元素
+
+**正确做法**：控件状态留在控件里。Hero 只留 mark / eyebrow / h1 / desc 四层。
+**机器可查**：截图人工核对（见 `qa-checklist.md`）
+
+---
+
+## AP-11 「顺便优化」🟡
+
+**现状**：这是 `main.css` 涨到 1313 行的**机制**——每一轮 AI 迭代都顺手改了没被要求的东西，于是产生了 AP-03 的追加覆盖块。
+
+**为什么坏**：它让「这次改了什么」不可知，也让回滚不可能。
+**正确做法**：提示词里明确写「发现其他问题请单独列出，**不要顺手改**」。
+**机器可查**：`git diff` 范围是否超出要求
+
+---
+
+## AP-12 在页面里写裸控件 🟡
+
+**现状**：目前 `<button>` / `<input>` 直接写在业务组件里，各自带样式。
+
+**为什么坏**：同一个「按钮」在 composer、侧栏、弹窗里有三套实现和三套 hover 行为。
+**正确做法**：用 `DESIGN.md` 第 5 节的白名单组件。
+**机器可查**：阶段三加 lint 规则
diff --git a/docs/design/baseline/after-1440.png b/docs/design/baseline/after-1440.png
new file mode 100644
index 0000000..2a10609
Binary files /dev/null and b/docs/design/baseline/after-1440.png differ
diff --git a/docs/design/baseline/after-375.png b/docs/design/baseline/after-375.png
new file mode 100644
index 0000000..e55eda5
Binary files /dev/null and b/docs/design/baseline/after-375.png differ
diff --git a/docs/design/baseline/after-768.png b/docs/design/baseline/after-768.png
new file mode 100644
index 0000000..b1cce3a
Binary files /dev/null and b/docs/design/baseline/after-768.png differ
diff --git a/docs/design/baseline/audit-after.json b/docs/design/baseline/audit-after.json
new file mode 100644
index 0000000..ab51b27
--- /dev/null
+++ b/docs/design/baseline/audit-after.json
@@ -0,0 +1 @@
+{   "tool": "audit-css",   "version": 1,   "target": "A:\\gyx_cv\\coding_agent\\ui\\src",   "files": [     "A:\\gyx_cv\\coding_agent\\ui\\src\\App.vue",     "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ActiveTaskStrip.vue",     "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\AgentWorkspace.vue",     "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ChatComposer.vue",     "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ChatMessage.vue",     "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ConfirmProjectDeleteDialog.vue",     "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\CreateProjectDialog.vue",     "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\HumanInterventionCard.vue",     "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\MessageActions.vue",     "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ProposalCard.vue",     "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\RunActivityCard.vue",     "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\SessionSidebar.vue",     "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\TodoPlan.vue",     "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ui\\UiBadge.vue",     "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ui\\UiButton.vue",     "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ui\\UiCard.vue",     "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ui\\UiEmptyState.vue",     "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ui\\UiInput.vue",     "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ui\\UiSelect.vue",     "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css"   ],   "thresholds": {     "nearDuplicateDistance": 12,     "nearWhiteMin": 245,     "neutralSaturation": 0.12,     "neutralChroma": 6,     "limits": {       "coloredDistinct": 5,       "radiusDistinct": 4,       "fontSizeDistinct": 7,       "nearWhiteDistinct": 3,       "rootBlocks": 1,       "tokenCoverage": 90,       "rgbBaseDistinct": 3,       "redundantDeclarations": 0,       "duplicateSelectors": 0,       "importantCount": 0     }   },   "totals": {     "files": 20,     "lines": 3401,     "ruleBlocks": 565,     "distinctSelectors": 544,     "selectorUses": 652   },   "root": {     "blockCount": 1,     "files": [       "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css"     ],     "variables": 0,     "variableDeclarations": 0,     "duplicates": []   },   "hexColors": {     "distinct": 0,     "occurrences": 0,     "top": [],     "nearDuplicates": []   },   "rgbColors": {     "distinct": 0,     "occurrences": 0,     "baseDistinct": 0,     "top": [],     "baseNearDuplicates": []   },   "colored": {     "distinct": 0,     "values": []   },   "nearWhite": {     "distinct": 0,     "values": []   },   "borderRadius": {     "distinct": 4,     "values": [       {         "value": "var(--radius-md)",         "count": 24       },       {         "value": "var(--radius-full)",         "count": 19       },       {         "value": "var(--radius-sm)",         "count": 37       },       {         "value": "var(--radius-lg)",         "count": 6       }     ]   },   "fontSize": {     "distinct": 7,     "values": [       {         "value": "var(--text-base)",         "count": 37       },       {         "value": "var(--text-lg)",         "count": 12       },       {         "value": "var(--text-xs)",         "count": 26       },       {         "value": "var(--text-sm)",         "count": 25       },       {         "value": "var(--text-md)",         "count": 22       },       {         "value": "var(--text-xl)",         "count": 11       },       {         "value": "var(--text-2xl)",         "count": 1       }     ]   },   "selectors": {     "duplicateCount": 81,     "duplicateUses": 189,     "list": [       {         "value": ".stop-button",         "count": 6,         "context": "(base)"       },       {         "value": ".send-button",         "count": 5,         "context": "(base)"       },       {         "value": ".brand",         "count": 4,         "context": "(base)"       },       {         "value": ".composer textarea",         "count": 4,         "context": "(base)"       },       {         "value": ".composer-meta",         "count": 4,         "context": "(base)"       },       {         "value": ".composer",         "count": 3,         "context": "(base)"       },       {         "value": ".composer-footer",         "count": 3,         "context": "(base)"       },       {         "value": ".empty-state h2",         "count": 3,         "context": "(base)"       },       {         "value": ".meta-chip",         "count": 3,         "context": "(base)"       },       {         "value": ".new-button",         "count": 3,         "context": "(base)"       },       {         "value": ".project-add-thread",         "count": 3,         "context": "(base)"       },       {         "value": ".project-menu-trigger",         "count": 3,         "context": "(base)"       },       {         "value": ".repo-status",         "count": 3,         "context": "(base)"       },       {         "value": ".sidebar-toggle",         "count": 3,         "context": "(base)"       },       {         "value": ".sidebar-toggle:hover",         "count": 3,         "context": "(base)"       },       {         "value": ".sidebar-topbar",         "count": 3,         "context": "(base)"       },       {         "value": ".thread-delete",         "count": 3,         "context": "(base)"       },       {         "value": ".workspace",         "count": 3,         "context": "(base)"       },       {         "value": ".workspace-header h1",         "count": 3,         "context": "(base)"       },       {         "value": ".active-task-cancel",         "count": 2,         "context": "(base)"       },       {         "value": ".app-shell",         "count": 2,         "context": "(base)"       },       {         "value": ".assistant-message-body",         "count": 2,         "context": "(base)"       },       {         "value": ".assistant-message-content",         "count": 2,         "context": "(base)"       },       {         "value": ".branch-label",         "count": 2,         "context": "(base)"       },       {         "value": ".brand img",         "count": 2,         "context": "(base)"       },       {         "value": ".brand-name",         "count": 2,         "context": "(base)"       },       {         "value": ".code-window-actions",         "count": 2,         "context": "(base)"       },       {         "value": ".code-window-language",         "count": 2,         "context": "(base)"       },       {         "value": ".composer",         "count": 2,         "context": "@media (max-width: 860px)"       },       {         "value": ".composer-context-label",         "count": 2,         "context": "(base)"       },       {         "value": ".composer-footer",         "count": 2,         "context": "@media (max-width: 560px)"       },       {         "value": ".empty-state",         "count": 2,         "context": "(base)"       },       {         "value": ".empty-state p:last-child",         "count": 2,         "context": "(base)"       },       {         "value": ".message-expand-button",         "count": 2,         "context": "(base)"       },       {         "value": ".message-expand-button:focus-visible",         "count": 2,         "context": "(base)"       },       {         "value": ".message-list",         "count": 2,         "context": "(base)"       },       {         "value": ".new-button:focus-visible",         "count": 2,         "context": "(base)"       },       {         "value": ".new-button:hover",         "count": 2,         "context": "(base)"       },       {         "value": ".new-chat-button",         "count": 2,         "context": "(base)"       },       {         "value": ".new-project-button",         "count": 2,         "context": "(base)"       },       {         "value": ".project-disclosure",         "count": 2,         "context": "(base)"       },       {         "value": ".project-empty",         "count": 2,         "context": "(base)"       },       {         "value": ".project-group",         "count": 2,         "context": "(base)"       },       {         "value": ".project-heading",         "count": 2,         "context": "(base)"       },       {         "value": ".project-heading-main",         "count": 2,         "context": "(base)"       },       {         "value": ".project-thread-item",         "count": 2,         "context": "(base)"       },       {         "value": ".repo-control",         "count": 2,         "context": "(base)"       },       {         "value": ".repo-control-input",         "count": 2,         "context": "(base)"       },       {         "value": ".repo-control-label",         "count": 2,         "context": "(base)"       },       {         "value": ".repo-field",         "count": 2,         "context": "(base)"       },       {         "value": ".repo-field input",         "count": 2,         "context": "(base)"       },       {         "value": ".repo-provider-label",         "count": 2,         "context": "(base)"       },       {         "value": ".repo-status-dot",         "count": 2,         "context": "(base)"       },       {         "value": ".send-button:disabled",         "count": 2,         "context": "(base)"       },       {         "value": ".send-button:not(:disabled):focus-visible",         "count": 2,         "context": "(base)"       },       {         "value": ".send-button:not(:disabled):hover",         "count": 2,         "context": "(base)"       },       {         "value": ".sidebar",         "count": 2,         "context": "(base)"       },       {         "value": ".sidebar-section-label",         "count": 2,         "context": "(base)"       },       {         "value": ".sidebar-toggle:focus-visible",         "count": 2,         "context": "(base)"       },       {         "value": ".sidebar.collapsed .sidebar-toggle",         "count": 2,         "context": "(base)"       },       {         "value": ".status-dot",         "count": 2,         "context": "(base)"       },       {         "value": ".status-pill",         "count": 2,         "context": "(base)"       },       {         "value": ".thread-delete:focus-visible",         "count": 2,         "context": "(base)"       },       {         "value": ".thread-delete:hover",         "count": 2,         "context": "(base)"       },       {         "value": ".thread-item",         "count": 2,         "context": "(base)"       },       {         "value": ".thread-item small",         "count": 2,         "context": "(base)"       },       {         "value": ".thread-item:hover",         "count": 2,         "context": "(base)"       },       {         "value": ".thread-item:hover .thread-delete",         "count": 2,         "context": "(base)"       },       {         "value": ".thread-item.active",         "count": 2,         "context": "(base)"       },       {         "value": ".thread-list",         "count": 2,         "context": "(base)"       },       {         "value": ".thread-title",         "count": 2,         "context": "(base)"       },       {         "value": ".title-save-error",         "count": 2,         "context": "(base)"       },       {         "value": ".title-save-state",         "count": 2,         "context": "(base)"       },       {         "value": ".user-avatar",         "count": 2,         "context": "(base)"       },       {         "value": ".user-bubble",         "count": 2,         "context": "(base)"       },       {         "value": ".user-message-content",         "count": 2,         "context": "(base)"       },       {         "value": ".workspace-header",         "count": 2,         "context": "(base)"       },       {         "value": ".workspace-heading",         "count": 2,         "context": "(base)"       },       {         "value": ".workspace-status",         "count": 2,         "context": "(base)"       },       {         "value": "body",         "count": 2,         "context": "(base)"       },       {         "value": "button",         "count": 2,         "context": "(base)"       }     ],     "top": [       {         "value": ".stop-button",         "count": 6,         "context": "(base)"       },       {         "value": ".send-button",         "count": 5,         "context": "(base)"       },       {         "value": ".brand",         "count": 4,         "context": "(base)"       },       {         "value": ".composer textarea",         "count": 4,         "context": "(base)"       },       {         "value": ".composer-meta",         "count": 4,         "context": "(base)"       },       {         "value": ".composer",         "count": 3,         "context": "(base)"       },       {         "value": ".composer-footer",         "count": 3,         "context": "(base)"       },       {         "value": ".empty-state h2",         "count": 3,         "context": "(base)"       },       {         "value": ".meta-chip",         "count": 3,         "context": "(base)"       },       {         "value": ".new-button",         "count": 3,         "context": "(base)"       },       {         "value": ".project-add-thread",         "count": 3,         "context": "(base)"       },       {         "value": ".project-menu-trigger",         "count": 3,         "context": "(base)"       },       {         "value": ".repo-status",         "count": 3,         "context": "(base)"       },       {         "value": ".sidebar-toggle",         "count": 3,         "context": "(base)"       },       {         "value": ".sidebar-toggle:hover",         "count": 3,         "context": "(base)"       }     ]   },   "tokenCoverage": {     "percent": 99.6,     "varUses": 1120,     "hardcodedColors": 0,     "hardcodedPx": 4,     "pxSamples": [       {         "prop": "padding-left",         "value": "56px",         "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",         "line": 155       },       {         "prop": "padding-left",         "value": "260px",         "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",         "line": 155       },       {         "prop": "padding-right",         "value": "32px",         "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",         "line": 157       },       {         "prop": "padding-right",         "value": "120px",         "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",         "line": 157       }     ]   },   "importantCount": 0,   "notes": [],   "checks": [     {       "id": "coloredDistinct",       "label": "彩色 distinct",       "value": 0,       "need": "≤5",       "pass": true,       "advisory": false     },     {       "id": "radiusDistinct",       "label": "border-radius",       "value": 4,       "need": "≤4",       "pass": true,       "advisory": false     },     {       "id": "fontSizeDistinct",       "label": "font-size",       "value": 7,       "need": "≤7",       "pass": true,       "advisory": false     },     {       "id": "nearWhiteDistinct",       "label": "近白背景 distinct",       "value": 0,       "need": "≤3",       "pass": true,       "advisory": false     },     {       "id": "rootBlocks",       "label": ":root 块",       "value": 1,       "need": "=1",       "pass": true,       "advisory": false     },     {       "id": "tokenCoverage",       "label": "token 覆盖率",       "value": 99.6,       "need": "≥90%",       "pass": true,       "advisory": false     },     {       "id": "rgbBaseDistinct",       "label": "rgb/rgba 基色 distinct",       "value": 0,       "need": "≤3",       "pass": true,       "advisory": false     },     {       "id": "redundantDeclarations",       "label": "冗余声明（同属性重复声明）",       "value": 0,       "need": "=0",       "pass": true,       "advisory": false     },     {       "id": "duplicateSelectors",       "label": "同一选择器分散在多块",       "value": 81,       "need": "提示",       "pass": false,       "advisory": true     },     {       "id": "importantCount",       "label": "!important",       "value": 0,       "need": "=0",       "pass": true,       "advisory": false     }   ],   "failed": [],   "failedCount": 0,   "passed": true }
\ No newline at end of file
diff --git a/docs/design/baseline/audit-before.json b/docs/design/baseline/audit-before.json
new file mode 100644
index 0000000..377d754
--- /dev/null
+++ b/docs/design/baseline/audit-before.json
@@ -0,0 +1,3226 @@
+{
+  "tool": "audit-css",
+  "version": 1,
+  "target": "A:\\gyx_cv\\coding_agent\\ui\\src",
+  "files": [
+    "A:\\gyx_cv\\coding_agent\\ui\\src\\App.vue",
+    "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ActiveTaskStrip.vue",
+    "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\AgentWorkspace.vue",
+    "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ChatComposer.vue",
+    "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ChatMessage.vue",
+    "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ConfirmProjectDeleteDialog.vue",
+    "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\CreateProjectDialog.vue",
+    "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\HumanInterventionCard.vue",
+    "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\MessageActions.vue",
+    "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ProposalCard.vue",
+    "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\RunActivityCard.vue",
+    "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\SessionSidebar.vue",
+    "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\TodoPlan.vue",
+    "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css"
+  ],
+  "thresholds": {
+    "nearDuplicateDistance": 12,
+    "nearWhiteMin": 245,
+    "neutralSaturation": 0.12,
+    "neutralChroma": 6,
+    "limits": {
+      "coloredDistinct": 5,
+      "radiusDistinct": 4,
+      "fontSizeDistinct": 7,
+      "nearWhiteDistinct": 3,
+      "rootBlocks": 1,
+      "tokenCoverage": 90,
+      "rgbBaseDistinct": 3,
+      "duplicateSelectors": 0,
+      "importantCount": 0
+    }
+  },
+  "totals": {
+    "files": 14,
+    "lines": 2722,
+    "ruleBlocks": 512,
+    "distinctSelectors": 417,
+    "selectorUses": 599
+  },
+  "root": {
+    "blockCount": 3,
+    "files": [
+      "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css"
+    ],
+    "variables": 18,
+    "variableDeclarations": 27,
+    "duplicates": [
+      {
+        "name": "--surface-soft",
+        "declarations": [
+          {
+            "name": "--surface-soft",
+            "value": "#f7f8f6",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 14
+          },
+          {
+            "name": "--surface-soft",
+            "value": "#f7f7f8",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 564
+          },
+          {
+            "name": "--surface-soft",
+            "value": "#f6f8f7",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 1122
+          }
+        ],
+        "winner": {
+          "name": "--surface-soft",
+          "value": "#f6f8f7",
+          "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+          "line": 1122
+        },
+        "dead": [
+          {
+            "name": "--surface-soft",
+            "value": "#f7f8f6",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 14
+          },
+          {
+            "name": "--surface-soft",
+            "value": "#f7f7f8",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 564
+          }
+        ]
+      },
+      {
+        "name": "--accent-strong",
+        "declarations": [
+          {
+            "name": "--accent-strong",
+            "value": "#245f59",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 9
+          },
+          {
+            "name": "--accent-strong",
+            "value": "#1f7667",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 1123
+          }
+        ],
+        "winner": {
+          "name": "--accent-strong",
+          "value": "#1f7667",
+          "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+          "line": 1123
+        },
+        "dead": [
+          {
+            "name": "--accent-strong",
+            "value": "#245f59",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 9
+          }
+        ]
+      },
+      {
+        "name": "--border",
+        "declarations": [
+          {
+            "name": "--border",
+            "value": "#e1e5e3",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 11
+          },
+          {
+            "name": "--border",
+            "value": "#e7e7e7",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 561
+          }
+        ],
+        "winner": {
+          "name": "--border",
+          "value": "#e7e7e7",
+          "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+          "line": 561
+        },
+        "dead": [
+          {
+            "name": "--border",
+            "value": "#e1e5e3",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 11
+          }
+        ]
+      },
+      {
+        "name": "--muted",
+        "declarations": [
+          {
+            "name": "--muted",
+            "value": "#6b7780",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 12
+          },
+          {
+            "name": "--muted",
+            "value": "#6b6b6b",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 562
+          }
+        ],
+        "winner": {
+          "name": "--muted",
+          "value": "#6b6b6b",
+          "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+          "line": 562
+        },
+        "dead": [
+          {
+            "name": "--muted",
+            "value": "#6b7780",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 12
+          }
+        ]
+      },
+      {
+        "name": "--sidebar-closed",
+        "declarations": [
+          {
+            "name": "--sidebar-closed",
+            "value": "72px",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 6
+          },
+          {
+            "name": "--sidebar-closed",
+            "value": "76px",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 1118
+          }
+        ],
+        "winner": {
+          "name": "--sidebar-closed",
+          "value": "76px",
+          "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+          "line": 1118
+        },
+        "dead": [
+          {
+            "name": "--sidebar-closed",
+            "value": "72px",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 6
+          }
+        ]
+      },
+      {
+        "name": "--sidebar-open",
+        "declarations": [
+          {
+            "name": "--sidebar-open",
+            "value": "272px",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 5
+          },
+          {
+            "name": "--sidebar-open",
+            "value": "292px",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 1117
+          }
+        ],
+        "winner": {
+          "name": "--sidebar-open",
+          "value": "292px",
+          "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+          "line": 1117
+        },
+        "dead": [
+          {
+            "name": "--sidebar-open",
+            "value": "272px",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 5
+          }
+        ]
+      },
+      {
+        "name": "--sidebar-width",
+        "declarations": [
+          {
+            "name": "--sidebar-width",
+            "value": "var(--sidebar-open)",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 7
+          },
+          {
+            "name": "--sidebar-width",
+            "value": "var(--sidebar-closed)",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 38
+          }
+        ],
+        "winner": {
+          "name": "--sidebar-width",
+          "value": "var(--sidebar-closed)",
+          "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+          "line": 38
+        },
+        "dead": [
+          {
+            "name": "--sidebar-width",
+            "value": "var(--sidebar-open)",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 7
+          }
+        ]
+      },
+      {
+        "name": "--surface",
+        "declarations": [
+          {
+            "name": "--surface",
+            "value": "#ffffff",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 13
+          },
+          {
+            "name": "--surface",
+            "value": "#ffffff",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 563
+          }
+        ],
+        "winner": {
+          "name": "--surface",
+          "value": "#ffffff",
+          "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+          "line": 563
+        },
+        "dead": [
+          {
+            "name": "--surface",
+            "value": "#ffffff",
+            "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+            "line": 13
+          }
+        ]
+      }
+    ]
+  },
+  "hexColors": {
+    "distinct": 297,
+    "occurrences": 462,
+    "top": [
+      {
+        "value": "#ffffff",
+        "count": 42
+      },
+      {
+        "value": "#2f2f2f",
+        "count": 12
+      },
+      {
+        "value": "#263238",
+        "count": 11
+      },
+      {
+        "value": "#e1e1e1",
+        "count": 7
+      },
+      {
+        "value": "#eeeeef",
+        "count": 5
+      },
+      {
+        "value": "#356b63",
+        "count": 4
+      },
+      {
+        "value": "#475569",
+        "count": 4
+      },
+      {
+        "value": "#94a3b8",
+        "count": 4
+      },
+      {
+        "value": "#9aa39f",
+        "count": 4
+      },
+      {
+        "value": "#edf4f2",
+        "count": 4
+      },
+      {
+        "value": "#f4f5f3",
+        "count": 4
+      },
+      {
+        "value": "#fbfcfb",
+        "count": 4
+      },
+      {
+        "value": "#245f59",
+        "count": 3
+      },
+      {
+        "value": "#286f5f",
+        "count": 3
+      },
+      {
+        "value": "#3f3f3f",
+        "count": 3
+      }
+    ],
+    "nearDuplicates": [
+      [
+        {
+          "label": "#e5e7eb",
+          "r": 229,
+          "g": 231,
+          "b": 235
+        },
+        {
+          "label": "#e1e5e3",
+          "r": 225,
+          "g": 229,
+          "b": 227
+        },
+        {
+          "label": "#dfe5e2",
+          "r": 223,
+          "g": 229,
+          "b": 226
+        },
+        {
+          "label": "#e2eeeb",
+          "r": 226,
+          "g": 238,
+          "b": 235
+        },
+        {
+          "label": "#ecefeb",
+          "r": 236,
+          "g": 239,
+          "b": 235
+        },
+        {
+          "label": "#e1e5ea",
+          "r": 225,
+          "g": 229,
+          "b": 234
+        },
+        {
+          "label": "#e8ebef",
+          "r": 232,
+          "g": 235,
+          "b": 239
+        },
+        {
+          "label": "#e0ebe7",
+          "r": 224,
+          "g": 235,
+          "b": 231
+        },
+        {
+          "label": "#e8f1ed",
+          "r": 232,
+          "g": 241,
+          "b": 237
+        },
+        {
+          "label": "#e3ece8",
+          "r": 227,
+          "g": 236,
+          "b": 232
+        },
+        {
+          "label": "#dfe6e2",
+          "r": 223,
+          "g": 230,
+          "b": 226
+        },
+        {
+          "label": "#e0e7e3",
+          "r": 224,
+          "g": 231,
+          "b": 227
+        },
+        {
+          "label": "#e7e7e7",
+          "r": 231,
+          "g": 231,
+          "b": 231
+        },
+        {
+          "label": "#e0e8e4",
+          "r": 224,
+          "g": 232,
+          "b": 228
+        },
+        {
+          "label": "#e4e4e4",
+          "r": 228,
+          "g": 228,
+          "b": 228
+        },
+        {
+          "label": "#dce8e4",
+          "r": 220,
+          "g": 232,
+          "b": 228
+        },
+        {
+          "label": "#e7eeeb",
+          "r": 231,
+          "g": 238,
+          "b": 235
+        },
+        {
+          "label": "#eceeef",
+          "r": 236,
+          "g": 238,
+          "b": 239
+        },
+        {
+          "label": "#e9eeeb",
+          "r": 233,
+          "g": 238,
+          "b": 235
+        },
+        {
+          "label": "#e9edeb",
+          "r": 233,
+          "g": 237,
+          "b": 235
+        },
+        {
+          "label": "#e2e8e5",
+          "r": 226,
+          "g": 232,
+          "b": 229
+        },
+        {
+          "label": "#e6ebe8",
+          "r": 230,
+          "g": 235,
+          "b": 232
+        },
+        {
+          "label": "#e8edeb",
+          "r": 232,
+          "g": 237,
+          "b": 235
+        },
+        {
+          "label": "#e3e9e6",
+          "r": 227,
+          "g": 233,
+          "b": 230
+        },
+        {
+          "label": "#e7ece9",
+          "r": 231,
+          "g": 236,
+          "b": 233
+        },
+        {
+          "label": "#e9efec",
+          "r": 233,
+          "g": 239,
+          "b": 236
+        },
+        {
+          "label": "#e4f1eb",
+          "r": 228,
+          "g": 241,
+          "b": 235
+        },
+        {
+          "label": "#e5ebe8",
+          "r": 229,
+          "g": 235,
+          "b": 232
+        },
+        {
+          "label": "#eaf1ed",
+          "r": 234,
+          "g": 241,
+          "b": 237
+        },
+        {
+          "label": "#e4e9e6",
+          "r": 228,
+          "g": 233,
+          "b": 230
+        },
+        {
+          "label": "#e6f2ec",
+          "r": 230,
+          "g": 242,
+          "b": 236
+        },
+        {
+          "label": "#e8eeeb",
+          "r": 232,
+          "g": 238,
+          "b": 235
+        },
+        {
+          "label": "#e1ece6",
+          "r": 225,
+          "g": 236,
+          "b": 230
+        },
+        {
+          "label": "#dfe7e2",
+          "r": 223,
+          "g": 231,
+          "b": 226
+        },
+        {
+          "label": "#e1e8e4",
+          "r": 225,
+          "g": 232,
+          "b": 228
+        },
+        {
+          "label": "#d6e5e0",
+          "r": 214,
+          "g": 229,
+          "b": 224
+        },
+        {
+          "label": "#dbe6e2",
+          "r": 219,
+          "g": 230,
+          "b": 226
+        },
+        {
+          "label": "#dce7e2",
+          "r": 220,
+          "g": 231,
+          "b": 226
+        },
+        {
+          "label": "#dfe4e1",
+          "r": 223,
+          "g": 228,
+          "b": 225
+        },
+        {
+          "label": "#e1e1e1",
+          "r": 225,
+          "g": 225,
+          "b": 225
+        },
+        {
+          "label": "#dedede",
+          "r": 222,
+          "g": 222,
+          "b": 222
+        },
+        {
+          "label": "#e0e0e0",
+          "r": 224,
+          "g": 224,
+          "b": 224
+        },
+        {
+          "label": "#dce5e0",
+          "r": 220,
+          "g": 229,
+          "b": 224
+        },
+        {
+          "label": "#d9e2dd",
+          "r": 217,
+          "g": 226,
+          "b": 221
+        },
+        {
+          "label": "#d7e6e0",
+          "r": 215,
+          "g": 230,
+          "b": 224
+        },
+        {
+          "label": "#dce8e1",
+          "r": 220,
+          "g": 232,
+          "b": 225
+        },
+        {
+          "label": "#d5e6e1",
+          "r": 213,
+          "g": 230,
+          "b": 225
+        },
+        {
+          "label": "#d9dfdc",
+          "r": 217,
+          "g": 223,
+          "b": 220
+        },
+        {
+          "label": "#d6e0dc",
+          "r": 214,
+          "g": 224,
+          "b": 220
+        },
+        {
+          "label": "#eaf2ef",
+          "r": 234,
+          "g": 242,
+          "b": 239
+        },
+        {
+          "label": "#e4f3e9",
+          "r": 228,
+          "g": 243,
+          "b": 233
+        },
+        {
+          "label": "#edf0ee",
+          "r": 237,
+          "g": 240,
+          "b": 238
+        },
+        {
+          "label": "#edf4f2",
+          "r": 237,
+          "g": 244,
+          "b": 242
+        },
+        {
+          "label": "#f0f1f2",
+          "r": 240,
+          "g": 241,
+          "b": 242
+        },
+        {
+          "label": "#edf3f1",
+          "r": 237,
+          "g": 243,
+          "b": 241
+        },
+        {
+          "label": "#f0f6f3",
+          "r": 240,
+          "g": 246,
+          "b": 243
+        },
+        {
+          "label": "#edf6f3",
+          "r": 237,
+          "g": 246,
+          "b": 243
+        },
+        {
+          "label": "#eeeeef",
+          "r": 238,
+          "g": 238,
+          "b": 239
+        },
+        {
+          "label": "#f1f1f2",
+          "r": 241,
+          "g": 241,
+          "b": 242
+        },
+        {
+          "label": "#f6eae8",
+          "r": 246,
+          "g": 234,
+          "b": 232
+        },
+        {
+          "label": "#edf1ef",
+          "r": 237,
+          "g": 241,
+          "b": 239
+        },
+        {
+          "label": "#edf2ef",
+          "r": 237,
+          "g": 242,
+          "b": 239
+        },
+        {
+          "label": "#eef2f0",
+          "r": 238,
+          "g": 242,
+          "b": 240
+        },
+        {
+          "label": "#eff5f2",
+          "r": 239,
+          "g": 245,
+          "b": 242
+        },
+        {
+          "label": "#e8eef8",
+          "r": 232,
+          "g": 238,
+          "b": 248
+        },
+        {
+          "label": "#f0f7f3",
+          "r": 240,
+          "g": 247,
+          "b": 243
+        },
+        {
+          "label": "#f4f5f3",
+          "r": 244,
+          "g": 245,
+          "b": 243
+        },
+        {
+          "label": "#f3f6f4",
+          "r": 243,
+          "g": 246,
+          "b": 244
+        },
+        {
+          "label": "#f1f7f4",
+          "r": 241,
+          "g": 247,
+          "b": 244
+        },
+        {
+          "label": "#cfe0db",
+          "r": 207,
+          "g": 224,
+          "b": 219
+        },
+        {
+          "label": "#cfdfd8",
+          "r": 207,
+          "g": 223,
+          "b": 216
+        },
+        {
+          "label": "#f1f8f4",
+          "r": 241,
+          "g": 248,
+          "b": 244
+        },
+        {
+          "label": "#f7f8f6",
+          "r": 247,
+          "g": 248,
+          "b": 246
+        },
+        {
+          "label": "#f5f6f7",
+          "r": 245,
+          "g": 246,
+          "b": 247
+        },
+        {
+          "label": "#f5f8f7",
+          "r": 245,
+          "g": 248,
+          "b": 247
+        },
+        {
+          "label": "#f6f8f7",
+          "r": 246,
+          "g": 248,
+          "b": 247
+        },
+        {
+          "label": "#f7f8f8",
+          "r": 247,
+          "g": 248,
+          "b": 248
+        },
+        {
+          "label": "#fbf3f2",
+          "r": 251,
+          "g": 243,
+          "b": 242
+        },
+        {
+          "label": "#f7f7f8",
+          "r": 247,
+          "g": 247,
+          "b": 248
+        },
+        {
+          "label": "#f8faf8",
+          "r": 248,
+          "g": 250,
+          "b": 248
+        },
+        {
+          "label": "#f8faf9",
+          "r": 248,
+          "g": 250,
+          "b": 249
+        },
+        {
+          "label": "#f8fbf9",
+          "r": 248,
+          "g": 251,
+          "b": 249
+        },
+        {
+          "label": "#f7faf8",
+          "r": 247,
+          "g": 250,
+          "b": 248
+        },
+        {
+          "label": "#f8f9f8",
+          "r": 248,
+          "g": 249,
+          "b": 248
+        },
+        {
+          "label": "#fef2f2",
+          "r": 254,
+          "g": 242,
+          "b": 242
+        },
+        {
+          "label": "#fafbf9",
+          "r": 250,
+          "g": 251,
+          "b": 249
+        },
+        {
+          "label": "#fafafa",
+          "r": 250,
+          "g": 250,
+          "b": 250
+        },
+        {
+          "label": "#fff3f2",
+          "r": 255,
+          "g": 243,
+          "b": 242
+        },
+        {
+          "label": "#fbfcfa",
+          "r": 251,
+          "g": 252,
+          "b": 250
+        },
+        {
+          "label": "#fafcfb",
+          "r": 250,
+          "g": 252,
+          "b": 251
+        },
+        {
+          "label": "#c9e1d5",
+          "r": 201,
+          "g": 225,
+          "b": 213
+        },
+        {
+          "label": "#c5ddd7",
+          "r": 197,
+          "g": 221,
+          "b": 215
+        },
+        {
+          "label": "#cbd8d2",
+          "r": 203,
+          "g": 216,
+          "b": 210
+        },
+        {
+          "label": "#c8d9d1",
+          "r": 200,
+          "g": 217,
+          "b": 209
+        },
+        {
+          "label": "#fbfdfc",
+          "r": 251,
+          "g": 253,
+          "b": 252
+        },
+        {
+          "label": "#fffaf0",
+          "r": 255,
+          "g": 250,
+          "b": 240
+        },
+        {
+          "label": "#fbfcfb",
+          "r": 251,
+          "g": 252,
+          "b": 251
+        },
+        {
+          "label": "#fbf5e9",
+          "r": 251,
+          "g": 245,
+          "b": 233
+        },
+        {
+          "label": "#fff0ef",
+          "r": 255,
+          "g": 240,
+          "b": 239
+        },
+        {
+          "label": "#fff0ee",
+          "r": 255,
+          "g": 240,
+          "b": 238
+        },
+        {
+          "label": "#ffffff",
+          "r": 255,
+          "g": 255,
+          "b": 255
+        },
+        {
+          "label": "#c1dcd6",
+          "r": 193,
+          "g": 220,
+          "b": 214
+        },
+        {
+          "label": "#cdd4d1",
+          "r": 205,
+          "g": 212,
+          "b": 209
+        },
+        {
+          "label": "#d0d0d0",
+          "r": 208,
+          "g": 208,
+          "b": 208
+        },
+        {
+          "label": "#cfcfcf",
+          "r": 207,
+          "g": 207,
+          "b": 207
+        },
+        {
+          "label": "#fff6e5",
+          "r": 255,
+          "g": 246,
+          "b": 229
+        }
+      ],
+      [
+        {
+          "label": "#737373",
+          "r": 115,
+          "g": 115,
+          "b": 115
+        },
+        {
+          "label": "#777777",
+          "r": 119,
+          "g": 119,
+          "b": 119
+        },
+        {
+          "label": "#737982",
+          "r": 115,
+          "g": 121,
+          "b": 130
+        },
+        {
+          "label": "#74817c",
+          "r": 116,
+          "g": 129,
+          "b": 124
+        },
+        {
+          "label": "#71807b",
+          "r": 113,
+          "g": 128,
+          "b": 123
+        },
+        {
+          "label": "#718079",
+          "r": 113,
+          "g": 128,
+          "b": 121
+        },
+        {
+          "label": "#738079",
+          "r": 115,
+          "g": 128,
+          "b": 121
+        },
+        {
+          "label": "#718078",
+          "r": 113,
+          "g": 128,
+          "b": 120
+        },
+        {
+          "label": "#728079",
+          "r": 114,
+          "g": 128,
+          "b": 121
+        },
+        {
+          "label": "#6b7780",
+          "r": 107,
+          "g": 119,
+          "b": 128
+        },
+        {
+          "label": "#79847f",
+          "r": 121,
+          "g": 132,
+          "b": 127
+        },
+        {
+          "label": "#7b8582",
+          "r": 123,
+          "g": 133,
+          "b": 130
+        },
+        {
+          "label": "#78857e",
+          "r": 120,
+          "g": 133,
+          "b": 126
+        },
+        {
+          "label": "#687b75",
+          "r": 104,
+          "g": 123,
+          "b": 117
+        },
+        {
+          "label": "#68877d",
+          "r": 104,
+          "g": 135,
+          "b": 125
+        },
+        {
+          "label": "#678477",
+          "r": 103,
+          "g": 132,
+          "b": 119
+        },
+        {
+          "label": "#7b8a84",
+          "r": 123,
+          "g": 138,
+          "b": 132
+        },
+        {
+          "label": "#7c8884",
+          "r": 124,
+          "g": 136,
+          "b": 132
+        },
+        {
+          "label": "#66756f",
+          "r": 102,
+          "g": 117,
+          "b": 111
+        },
+        {
+          "label": "#687873",
+          "r": 104,
+          "g": 120,
+          "b": 115
+        },
+        {
+          "label": "#67756f",
+          "r": 103,
+          "g": 117,
+          "b": 111
+        },
+        {
+          "label": "#68766f",
+          "r": 104,
+          "g": 118,
+          "b": 111
+        },
+        {
+          "label": "#638176",
+          "r": 99,
+          "g": 129,
+          "b": 118
+        },
+        {
+          "label": "#838e89",
+          "r": 131,
+          "g": 142,
+          "b": 137
+        },
+        {
+          "label": "#64736d",
+          "r": 100,
+          "g": 115,
+          "b": 109
+        },
+        {
+          "label": "#60706b",
+          "r": 96,
+          "g": 112,
+          "b": 107
+        },
+        {
+          "label": "#6b6b6b",
+          "r": 107,
+          "g": 107,
+          "b": 107
+        },
+        {
+          "label": "#89938f",
+          "r": 137,
+          "g": 147,
+          "b": 143
+        },
+        {
+          "label": "#8a8a8a",
+          "r": 138,
+          "g": 138,
+          "b": 138
+        },
+        {
+          "label": "#89958f",
+          "r": 137,
+          "g": 149,
+          "b": 143
+        },
+        {
+          "label": "#88948e",
+          "r": 136,
+          "g": 148,
+          "b": 142
+        },
+        {
+          "label": "#59716d",
+          "r": 89,
+          "g": 113,
+          "b": 109
+        },
+        {
+          "label": "#666666",
+          "r": 102,
+          "g": 102,
+          "b": 102
+        },
+        {
+          "label": "#8b9691",
+          "r": 139,
+          "g": 150,
+          "b": 145
+        },
+        {
+          "label": "#8d9792",
+          "r": 141,
+          "g": 151,
+          "b": 146
+        },
+        {
+          "label": "#8d9893",
+          "r": 141,
+          "g": 152,
+          "b": 147
+        },
+        {
+          "label": "#8a9590",
+          "r": 138,
+          "g": 149,
+          "b": 144
+        },
+        {
+          "label": "#909a95",
+          "r": 144,
+          "g": 154,
+          "b": 149
+        },
+        {
+          "label": "#8b9690",
+          "r": 139,
+          "g": 150,
+          "b": 144
+        },
+        {
+          "label": "#527267",
+          "r": 82,
+          "g": 114,
+          "b": 103
+        },
+        {
+          "label": "#56786d",
+          "r": 86,
+          "g": 120,
+          "b": 109
+        },
+        {
+          "label": "#5f6368",
+          "r": 95,
+          "g": 99,
+          "b": 104
+        },
+        {
+          "label": "#89969b",
+          "r": 137,
+          "g": 150,
+          "b": 155
+        },
+        {
+          "label": "#92979e",
+          "r": 146,
+          "g": 151,
+          "b": 158
+        },
+        {
+          "label": "#999999",
+          "r": 153,
+          "g": 153,
+          "b": 153
+        },
+        {
+          "label": "#94a19a",
+          "r": 148,
+          "g": 161,
+          "b": 154
+        },
+        {
+          "label": "#53725f",
+          "r": 83,
+          "g": 114,
+          "b": 95
+        },
+        {
+          "label": "#5f5f5f",
+          "r": 95,
+          "g": 95,
+          "b": 95
+        },
+        {
+          "label": "#59655f",
+          "r": 89,
+          "g": 101,
+          "b": 95
+        },
+        {
+          "label": "#596761",
+          "r": 89,
+          "g": 103,
+          "b": 97
+        },
+        {
+          "label": "#58665f",
+          "r": 88,
+          "g": 102,
+          "b": 95
+        },
+        {
+          "label": "#98a19d",
+          "r": 152,
+          "g": 161,
+          "b": 157
+        },
+        {
+          "label": "#9aa39f",
+          "r": 154,
+          "g": 163,
+          "b": 159
+        },
+        {
+          "label": "#9e9e9e",
+          "r": 158,
+          "g": 158,
+          "b": 158
+        },
+        {
+          "label": "#98a29d",
+          "r": 152,
+          "g": 162,
+          "b": 157
+        },
+        {
+          "label": "#55635f",
+          "r": 85,
+          "g": 99,
+          "b": 95
+        },
+        {
+          "label": "#57665e",
+          "r": 87,
+          "g": 102,
+          "b": 94
+        },
+        {
+          "label": "#52615b",
+          "r": 82,
+          "g": 97,
+          "b": 91
+        },
+        {
+          "label": "#52645f",
+          "r": 82,
+          "g": 100,
+          "b": 95
+        },
+        {
+          "label": "#51645b",
+          "r": 81,
+          "g": 100,
+          "b": 91
+        },
+        {
+          "label": "#52625b",
+          "r": 82,
+          "g": 98,
+          "b": 91
+        },
+        {
+          "label": "#526159",
+          "r": 82,
+          "g": 97,
+          "b": 89
+        },
+        {
+          "label": "#53615a",
+          "r": 83,
+          "g": 97,
+          "b": 90
+        },
+        {
+          "label": "#a1a1a1",
+          "r": 161,
+          "g": 161,
+          "b": 161
+        },
+        {
+          "label": "#a3a3a3",
+          "r": 163,
+          "g": 163,
+          "b": 163
+        },
+        {
+          "label": "#a0aaa5",
+          "r": 160,
+          "g": 170,
+          "b": 165
+        },
+        {
+          "label": "#4d5b56",
+          "r": 77,
+          "g": 91,
+          "b": 86
+        },
+        {
+          "label": "#a0a4aa",
+          "r": 160,
+          "g": 164,
+          "b": 170
+        },
+        {
+          "label": "#a1aaa6",
+          "r": 161,
+          "g": 170,
+          "b": 166
+        },
+        {
+          "label": "#a2aba7",
+          "r": 162,
+          "g": 171,
+          "b": 167
+        },
+        {
+          "label": "#a6b0ab",
+          "r": 166,
+          "g": 176,
+          "b": 171
+        },
+        {
+          "label": "#46574f",
+          "r": 70,
+          "g": 87,
+          "b": 79
+        },
+        {
+          "label": "#4a5a52",
+          "r": 74,
+          "g": 90,
+          "b": 82
+        },
+        {
+          "label": "#ababab",
+          "r": 171,
+          "g": 171,
+          "b": 171
+        },
+        {
+          "label": "#adb6b1",
+          "r": 173,
+          "g": 182,
+          "b": 177
+        },
+        {
+          "label": "#abb5b0",
+          "r": 171,
+          "g": 181,
+          "b": 176
+        },
+        {
+          "label": "#40534d",
+          "r": 64,
+          "g": 83,
+          "b": 77
+        },
+        {
+          "label": "#42564f",
+          "r": 66,
+          "g": 86,
+          "b": 79
+        },
+        {
+          "label": "#40524b",
+          "r": 64,
+          "g": 82,
+          "b": 75
+        },
+        {
+          "label": "#45524d",
+          "r": 69,
+          "g": 82,
+          "b": 77
+        },
+        {
+          "label": "#46544e",
+          "r": 70,
+          "g": 84,
+          "b": 78
+        },
+        {
+          "label": "#aab8b3",
+          "r": 170,
+          "g": 184,
+          "b": 179
+        },
+        {
+          "label": "#adb7b2",
+          "r": 173,
+          "g": 183,
+          "b": 178
+        },
+        {
+          "label": "#4a4a4a",
+          "r": 74,
+          "g": 74,
+          "b": 74
+        }
+      ],
+      [
+        {
+          "label": "#263238",
+          "r": 38,
+          "g": 50,
+          "b": 56
+        },
+        {
+          "label": "#273238",
+          "r": 39,
+          "g": 50,
+          "b": 56
+        },
+        {
+          "label": "#293241",
+          "r": 41,
+          "g": 50,
+          "b": 65
+        },
+        {
+          "label": "#293a35",
+          "r": 41,
+          "g": 58,
+          "b": 53
+        },
+        {
+          "label": "#263b34",
+          "r": 38,
+          "g": 59,
+          "b": 52
+        },
+        {
+          "label": "#26322f",
+          "r": 38,
+          "g": 50,
+          "b": 47
+        },
+        {
+          "label": "#273b36",
+          "r": 39,
+          "g": 59,
+          "b": 54
+        },
+        {
+          "label": "#293a34",
+          "r": 41,
+          "g": 58,
+          "b": 52
+        },
+        {
+          "label": "#27332e",
+          "r": 39,
+          "g": 51,
+          "b": 46
+        },
+        {
+          "label": "#293631",
+          "r": 41,
+          "g": 54,
+          "b": 49
+        },
+        {
+          "label": "#283631",
+          "r": 40,
+          "g": 54,
+          "b": 49
+        },
+        {
+          "label": "#28332f",
+          "r": 40,
+          "g": 51,
+          "b": 47
+        },
+        {
+          "label": "#2c4039",
+          "r": 44,
+          "g": 64,
+          "b": 57
+        },
+        {
+          "label": "#2f2f2f",
+          "r": 47,
+          "g": 47,
+          "b": 47
+        },
+        {
+          "label": "#1c2f2a",
+          "r": 28,
+          "g": 47,
+          "b": 42
+        },
+        {
+          "label": "#343434",
+          "r": 52,
+          "g": 52,
+          "b": 52
+        },
+        {
+          "label": "#35413d",
+          "r": 53,
+          "g": 65,
+          "b": 61
+        },
+        {
+          "label": "#33403b",
+          "r": 51,
+          "g": 64,
+          "b": 59
+        },
+        {
+          "label": "#36433e",
+          "r": 54,
+          "g": 67,
+          "b": 62
+        },
+        {
+          "label": "#33423a",
+          "r": 51,
+          "g": 66,
+          "b": 58
+        },
+        {
+          "label": "#202927",
+          "r": 32,
+          "g": 41,
+          "b": 39
+        },
+        {
+          "label": "#202b27",
+          "r": 32,
+          "g": 43,
+          "b": 39
+        },
+        {
+          "label": "#3f3f3f",
+          "r": 63,
+          "g": 63,
+          "b": 63
+        },
+        {
+          "label": "#3c4843",
+          "r": 60,
+          "g": 72,
+          "b": 67
+        },
+        {
+          "label": "#252525",
+          "r": 37,
+          "g": 37,
+          "b": 37
+        },
+        {
+          "label": "#35424a",
+          "r": 53,
+          "g": 66,
+          "b": 74
+        },
+        {
+          "label": "#344054",
+          "r": 52,
+          "g": 64,
+          "b": 84
+        }
+      ],
+      [
+        {
+          "label": "#356b63",
+          "r": 53,
+          "g": 107,
+          "b": 99
+        },
+        {
+          "label": "#2f6d64",
+          "r": 47,
+          "g": 109,
+          "b": 100
+        },
+        {
+          "label": "#2d7667",
+          "r": 45,
+          "g": 118,
+          "b": 103
+        },
+        {
+          "label": "#286f5f",
+          "r": 40,
+          "g": 111,
+          "b": 95
+        },
+        {
+          "label": "#347b67",
+          "r": 52,
+          "g": 123,
+          "b": 103
+        },
+        {
+          "label": "#277663",
+          "r": 39,
+          "g": 118,
+          "b": 99
+        },
+        {
+          "label": "#347967",
+          "r": 52,
+          "g": 121,
+          "b": 103
+        },
+        {
+          "label": "#246b5d",
+          "r": 36,
+          "g": 107,
+          "b": 93
+        },
+        {
+          "label": "#397967",
+          "r": 57,
+          "g": 121,
+          "b": 103
+        },
+        {
+          "label": "#1f7667",
+          "r": 31,
+          "g": 118,
+          "b": 103
+        }
+      ],
+      [
+        {
+          "label": "#ad514d",
+          "r": 173,
+          "g": 81,
+          "b": 77
+        },
+        {
+          "label": "#b44f4b",
+          "r": 180,
+          "g": 79,
+          "b": 75
+        },
+        {
+          "label": "#a55353",
+          "r": 165,
+          "g": 83,
+          "b": 83
+        },
+        {
+          "label": "#a34f4c",
+          "r": 163,
+          "g": 79,
+          "b": 76
+        },
+        {
+          "label": "#a64f4c",
+          "r": 166,
+          "g": 79,
+          "b": 76
+        },
+        {
+          "label": "#9d5656",
+          "r": 157,
+          "g": 86,
+          "b": 86
+        },
+        {
+          "label": "#a14e4b",
+          "r": 161,
+          "g": 78,
+          "b": 75
+        },
+        {
+          "label": "#a54848",
+          "r": 165,
+          "g": 72,
+          "b": 72
+        },
+        {
+          "label": "#a54949",
+          "r": 165,
+          "g": 73,
+          "b": 73
+        },
+        {
+          "label": "#a24a48",
+          "r": 162,
+          "g": 74,
+          "b": 72
+        }
+      ],
+      [
+        {
+          "label": "#ead5aa",
+          "r": 234,
+          "g": 213,
+          "b": 170
+        },
+        {
+          "label": "#eadbb4",
+          "r": 234,
+          "g": 219,
+          "b": 180
+        },
+        {
+          "label": "#e7d8ad",
+          "r": 231,
+          "g": 216,
+          "b": 173
+        },
+        {
+          "label": "#e4d7b6",
+          "r": 228,
+          "g": 215,
+          "b": 182
+        },
+        {
+          "label": "#ddd2b4",
+          "r": 221,
+          "g": 210,
+          "b": 180
+        }
+      ],
+      [
+        {
+          "label": "#4b9a84",
+          "r": 75,
+          "g": 154,
+          "b": 132
+        },
+        {
+          "label": "#4d9380",
+          "r": 77,
+          "g": 147,
+          "b": 128
+        },
+        {
+          "label": "#54a087",
+          "r": 84,
+          "g": 160,
+          "b": 135
+        },
+        {
+          "label": "#52927e",
+          "r": 82,
+          "g": 146,
+          "b": 126
+        },
+        {
+          "label": "#57a487",
+          "r": 87,
+          "g": 164,
+          "b": 135
+        }
+      ],
+      [
+        {
+          "label": "#245f59",
+          "r": 36,
+          "g": 95,
+          "b": 89
+        },
+        {
+          "label": "#2f5f55",
+          "r": 47,
+          "g": 95,
+          "b": 85
+        },
+        {
+          "label": "#286451",
+          "r": 40,
+          "g": 100,
+          "b": 81
+        },
+        {
+          "label": "#205d50",
+          "r": 32,
+          "g": 93,
+          "b": 80
+        }
+      ],
+      [
+        {
+          "label": "#b85c5c",
+          "r": 184,
+          "g": 92,
+          "b": 92
+        },
+        {
+          "label": "#bc5657",
+          "r": 188,
+          "g": 86,
+          "b": 87
+        }
+      ],
+      [
+        {
+          "label": "#347257",
+          "r": 52,
+          "g": 114,
+          "b": 87
+        },
+        {
+          "label": "#317353",
+          "r": 49,
+          "g": 115,
+          "b": 83
+        }
+      ],
+      [
+        {
+          "label": "#b8d4cd",
+          "r": 184,
+          "g": 212,
+          "b": 205
+        },
+        {
+          "label": "#bfd4ca",
+          "r": 191,
+          "g": 212,
+          "b": 202
+        }
+      ],
+      [
+        {
+          "label": "#90b2a6",
+          "r": 144,
+          "g": 178,
+          "b": 166
+        },
+        {
+          "label": "#8caaa0",
+          "r": 140,
+          "g": 170,
+          "b": 160
+        }
+      ],
+      [
+        {
+          "label": "#725b2b",
+          "r": 114,
+          "g": 91,
+          "b": 43
+        },
+        {
+          "label": "#75602f",
+          "r": 117,
+          "g": 96,
+          "b": 47
+        }
+      ],
+      [
+        {
+          "label": "#66532b",
+          "r": 102,
+          "g": 83,
+          "b": 43
+        },
+        {
+          "label": "#685832",
+          "r": 104,
+          "g": 88,
+          "b": 50
+        }
+      ]
+    ]
+  },
+  "rgbColors": {
+    "distinct": 29,
+    "occurrences": 31,
+    "baseDistinct": 19,
+    "top": [
+      {
+        "value": "rgba(0,0,0,0.05)",
+        "count": 2
+      },
+      {
+        "value": "rgba(38,50,56,0.07)",
+        "count": 2
+      },
+      {
+        "value": "rgba(0,0,0,0.06)",
+        "count": 1
+      },
+      {
+        "value": "rgba(15,23,42,0.06)",
+        "count": 1
+      },
+      {
+        "value": "rgba(15,23,42,0.12)",
+        "count": 1
+      },
+      {
+        "value": "rgba(15,23,42,0.28)",
+        "count": 1
+      },
+      {
+        "value": "rgba(17,36,32,0.2)",
+        "count": 1
+      },
+      {
+        "value": "rgba(18,36,29,0.24)",
+        "count": 1
+      },
+      {
+        "value": "rgba(180,83,79,0.08)",
+        "count": 1
+      },
+      {
+        "value": "rgba(19,31,34,0.38)",
+        "count": 1
+      },
+      {
+        "value": "rgba(21,32,28,0.42)",
+        "count": 1
+      },
+      {
+        "value": "rgba(247,252,250,0.97)",
+        "count": 1
+      },
+      {
+        "value": "rgba(255,255,255,0.7)",
+        "count": 1
+      },
+      {
+        "value": "rgba(255,255,255,0.95)",
+        "count": 1
+      },
+      {
+        "value": "rgba(255,255,255,0.97)",
+        "count": 1
+      }
+    ],
+    "baseNearDuplicates": [
+      [
+        {
+          "label": "rgb(19, 31, 34)",
+          "r": 19,
+          "g": 31,
+          "b": 34
+        },
+        {
+          "label": "rgb(17, 36, 32)",
+          "r": 17,
+          "g": 36,
+          "b": 32
+        },
+        {
+          "label": "rgb(21, 32, 28)",
+          "r": 21,
+          "g": 32,
+          "b": 28
+        },
+        {
+          "label": "rgb(18, 36, 29)",
+          "r": 18,
+          "g": 36,
+          "b": 29
+        },
+        {
+          "label": "rgb(27, 40, 34)",
+          "r": 27,
+          "g": 40,
+          "b": 34
+        },
+        {
+          "label": "rgb(31, 45, 39)",
+          "r": 31,
+          "g": 45,
+          "b": 39
+        },
+        {
+          "label": "rgb(26, 44, 35)",
+          "r": 26,
+          "g": 44,
+          "b": 35
+        }
+      ],
+      [
+        {
+          "label": "rgb(255, 255, 255)",
+          "r": 255,
+          "g": 255,
+          "b": 255
+        },
+        {
+          "label": "rgb(247, 252, 250)",
+          "r": 247,
+          "g": 252,
+          "b": 250
+        }
+      ],
+      [
+        {
+          "label": "rgb(44, 126, 103)",
+          "r": 44,
+          "g": 126,
+          "b": 103
+        },
+        {
+          "label": "rgb(54, 126, 101)",
+          "r": 54,
+          "g": 126,
+          "b": 101
+        }
+      ]
+    ]
+  },
+  "colored": {
+    "distinct": 167,
+    "values": [
+      "#172033",
+      "#1c2f2a",
+      "#1f7667",
+      "#202927",
+      "#202b27",
+      "#205d50",
+      "#245f59",
+      "#246b5d",
+      "#26322f",
+      "#263238",
+      "#263b34",
+      "#273238",
+      "#27332e",
+      "#273b36",
+      "#277663",
+      "#28332f",
+      "#283631",
+      "#286451",
+      "#286f5f",
+      "#293241",
+      "#293631",
+      "#293a34",
+      "#293a35",
+      "#2c4039",
+      "#2d7667",
+      "#2f5f55",
+      "#2f6d64",
+      "#2f7d74",
+      "#317353",
+      "#33423a",
+      "#344054",
+      "#347257",
+      "#347967",
+      "#347b67",
+      "#35424a",
+      "#356b63",
+      "#397967",
+      "#3d5e57",
+      "#3d8968",
+      "#3f3a2e",
+      "#40524b",
+      "#40534d",
+      "#416b5d",
+      "#42564f",
+      "#43545d",
+      "#438f79",
+      "#475569",
+      "#4b9a84",
+      "#4d9380",
+      "#527267",
+      "#52927e",
+      "#53725f",
+      "#54a087",
+      "#56786d",
+      "#57a487",
+      "#6366f1",
+      "#638176",
+      "#64748b",
+      "#66532b",
+      "#678477",
+      "#685832",
+      "#68877d",
+      "#69a18b",
+      "#725b2b",
+      "#75602f",
+      "#81734f",
+      "#86652d",
+      "#8caaa0",
+      "#8f403e",
+      "#8f4e4e",
+      "#90b2a6",
+      "#93635d",
+      "#946d24",
+      "#94a3b8",
+      "#991b1b",
+      "#99b9ad",
+      "#9d5656",
+      "#a14e4b",
+      "#a1813a",
+      "#a24a48",
+      "#a34f4c",
+      "#a54848",
+      "#a54949",
+      "#a55353",
+      "#a64f4c",
+      "#a8ccc4",
+      "#ad514d",
+      "#b44f4b",
+      "#b85c5c",
+      "#b8873d",
+      "#b8d4cd",
+      "#bc5657",
+      "#bfd4ca",
+      "#c1dcd6",
+      "#c28d89",
+      "#c5ddd7",
+      "#c8d9d1",
+      "#c9e1d5",
+      "#cbd5e1",
+      "#cbd8d2",
+      "#cfdfd8",
+      "#cfe0db",
+      "#d5e6e1",
+      "#d6e0dc",
+      "#d6e5e0",
+      "#d7e6e0",
+      "#d97706",
+      "#d9e2dd",
+      "#dbe6e2",
+      "#dce5e0",
+      "#dce7e2",
+      "#dce8e1",
+      "#dce8e4",
+      "#ddd2b4",
+      "#dfe6e2",
+      "#dfe7e2",
+      "#e0e7e3",
+      "#e0e8e4",
+      "#e0ebe7",
+      "#e1e5ea",
+      "#e1e8e4",
+      "#e1ece6",
+      "#e2eeeb",
+      "#e3ece8",
+      "#e4d7b6",
+      "#e4f1eb",
+      "#e4f3e9",
+      "#e6f2ec",
+      "#e7caca",
+      "#e7d8ad",
+      "#e7eeeb",
+      "#e8ebef",
+      "#e8eef8",
+      "#e8f1ed",
+      "#ead5aa",
+      "#eadbb4",
+      "#eaf1ed",
+      "#eaf2ef",
+      "#edf4f2",
+      "#edf6f3",
+      "#f0f7f3",
+      "#f1f8f4",
+      "#f6eae8",
+      "#f7eedc",
+      "#fbf3f2",
+      "#fbf5e9",
+      "#fecaca",
+      "#fee2e2",
+      "#fef2f2",
+      "#fff0ee",
+      "#fff0ef",
+      "#fff3f2",
+      "#fff6e5",
+      "#fffaf0",
+      "rgb(15,23,42)",
+      "rgb(17,36,32)",
+      "rgb(18,36,29)",
+      "rgb(180,83,79)",
+      "rgb(19,31,34)",
+      "rgb(21,32,28)",
+      "rgb(26,44,35)",
+      "rgb(27,40,34)",
+      "rgb(30,55,48)",
+      "rgb(31,45,39)",
+      "rgb(44,126,103)",
+      "rgb(54,126,101)",
+      "rgb(64,123,110)"
+    ]
+  },
+  "nearWhite": {
+    "distinct": 17,
+    "values": [
+      "#f6f8f7",
+      "#f7f7f8",
+      "#f7f8f6",
+      "#f7f8f8",
+      "#f7faf8",
+      "#f8f9f8",
+      "#f8faf8",
+      "#f8faf9",
+      "#f8fbf9",
+      "#fafafa",
+      "#fafbf9",
+      "#fafcfb",
+      "#fbfcfa",
+      "#fbfcfb",
+      "#fbfdfc",
+      "#ffffff",
+      "rgb(247,252,250)"
+    ]
+  },
+  "borderRadius": {
+    "distinct": 20,
+    "values": [
+      {
+        "value": "9px",
+        "count": 5
+      },
+      {
+        "value": "8px",
+        "count": 19
+      },
+      {
+        "value": "10px",
+        "count": 11
+      },
+      {
+        "value": "6px",
+        "count": 7
+      },
+      {
+        "value": "50%",
+        "count": 6
+      },
+      {
+        "value": "999px",
+        "count": 9
+      },
+      {
+        "value": "7px",
+        "count": 6
+      },
+      {
+        "value": "16px 16px 4px 16px",
+        "count": 1
+      },
+      {
+        "value": "4px",
+        "count": 1
+      },
+      {
+        "value": "22px",
+        "count": 1
+      },
+      {
+        "value": "12px",
+        "count": 3
+      },
+      {
+        "value": "16px",
+        "count": 2
+      },
+      {
+        "value": "14px",
+        "count": 1
+      },
+      {
+        "value": "0",
+        "count": 1
+      },
+      {
+        "value": "15px",
+        "count": 1
+      },
+      {
+        "value": "13px",
+        "count": 1
+      },
+      {
+        "value": "5px",
+        "count": 4
+      },
+      {
+        "value": "11px",
+        "count": 3
+      },
+      {
+        "value": "17px",
+        "count": 1
+      },
+      {
+        "value": "18px",
+        "count": 1
+      }
+    ]
+  },
+  "fontSize": {
+    "distinct": 19,
+    "values": [
+      {
+        "value": "12px",
+        "count": 33
+      },
+      {
+        "value": "17px",
+        "count": 4
+      },
+      {
+        "value": "24px",
+        "count": 1
+      },
+      {
+        "value": "20px",
+        "count": 7
+      },
+      {
+        "value": "11px",
+        "count": 23
+      },
+      {
+        "value": "10px",
+        "count": 20
+      },
+      {
+        "value": "18px",
+        "count": 3
+      },
+      {
+        "value": "13px",
+        "count": 14
+      },
+      {
+        "value": "clamp(24px, 3vw, 34px)",
+        "count": 1
+      },
+      {
+        "value": "14px",
+        "count": 6
+      },
+      {
+        "value": "0.9em",
+        "count": 1
+      },
+      {
+        "value": "15px",
+        "count": 2
+      },
+      {
+        "value": "16px",
+        "count": 7
+      },
+      {
+        "value": "22px",
+        "count": 1
+      },
+      {
+        "value": "19px",
+        "count": 1
+      },
+      {
+        "value": "10.5px",
+        "count": 1
+      },
+      {
+        "value": "8px",
+        "count": 1
+      },
+      {
+        "value": "9px",
+        "count": 2
+      },
+      {
+        "value": "clamp(26px, 3vw, 36px)",
+        "count": 1
+      }
+    ]
+  },
+  "selectors": {
+    "duplicateCount": 109,
+    "duplicateUses": 291,
+    "list": [
+      {
+        "value": ".stop-button",
+        "count": 10
+      },
+      {
+        "value": ".send-button",
+        "count": 9
+      },
+      {
+        "value": ".composer-footer",
+        "count": 8
+      },
+      {
+        "value": ".composer",
+        "count": 6
+      },
+      {
+        "value": ".workspace-header",
+        "count": 6
+      },
+      {
+        "value": ".composer-meta",
+        "count": 5
+      },
+      {
+        "value": ".sidebar",
+        "count": 5
+      },
+      {
+        "value": ".brand",
+        "count": 4
+      },
+      {
+        "value": ".composer textarea",
+        "count": 4
+      },
+      {
+        "value": ".repo-control",
+        "count": 4
+      },
+      {
+        "value": ".repo-control-input",
+        "count": 4
+      },
+      {
+        "value": ".workspace-header h1",
+        "count": 4
+      },
+      {
+        "value": ".workspace-status",
+        "count": 4
+      },
+      {
+        "value": ":root",
+        "count": 3
+      },
+      {
+        "value": ".app-shell",
+        "count": 3
+      },
+      {
+        "value": ".assistant-message-content",
+        "count": 3
+      },
+      {
+        "value": ".empty-state h2",
+        "count": 3
+      },
+      {
+        "value": ".message-expand-button:focus-visible",
+        "count": 3
+      },
+      {
+        "value": ".message-list",
+        "count": 3
+      },
+      {
+        "value": ".meta-chip",
+        "count": 3
+      },
+      {
+        "value": ".meta-label",
+        "count": 3
+      },
+      {
+        "value": ".new-button",
+        "count": 3
+      },
+      {
+        "value": ".project-add-thread",
+        "count": 3
+      },
+      {
+        "value": ".project-heading-main small",
+        "count": 3
+      },
+      {
+        "value": ".project-heading-main strong",
+        "count": 3
+      },
+      {
+        "value": ".project-menu-trigger",
+        "count": 3
+      },
+      {
+        "value": ".repo-field",
+        "count": 3
+      },
+      {
+        "value": ".repo-hint",
+        "count": 3
+      },
+      {
+        "value": ".repo-status",
+        "count": 3
+      },
+      {
+        "value": ".send-button:disabled",
+        "count": 3
+      },
+      {
+        "value": ".sidebar-toggle",
+        "count": 3
+      },
+      {
+        "value": ".sidebar-toggle:hover",
+        "count": 3
+      },
+      {
+        "value": ".sidebar-topbar",
+        "count": 3
+      },
+      {
+        "value": ".sidebar.collapsed .sidebar-toggle",
+        "count": 3
+      },
+      {
+        "value": ".thread-delete",
+        "count": 3
+      },
+      {
+        "value": ".thread-item:hover",
+        "count": 3
+      },
+      {
+        "value": ".thread-item.active",
+        "count": 3
+      },
+      {
+        "value": ".thread-title",
+        "count": 3
+      },
+      {
+        "value": ".workspace",
+        "count": 3
+      },
+      {
+        "value": ".active-task-cancel",
+        "count": 2
+      },
+      {
+        "value": ".app-shell.sidebar-collapsed .composer",
+        "count": 2
+      },
+      {
+        "value": ".assistant-message-body",
+        "count": 2
+      },
+      {
+        "value": ".branch-label",
+        "count": 2
+      },
+      {
+        "value": ".brand img",
+        "count": 2
+      },
+      {
+        "value": ".brand-name",
+        "count": 2
+      },
+      {
+        "value": ".code-window-actions",
+        "count": 2
+      },
+      {
+        "value": ".code-window-language",
+        "count": 2
+      },
+      {
+        "value": ".composer textarea::placeholder",
+        "count": 2
+      },
+      {
+        "value": ".composer-chat-context",
+        "count": 2
+      },
+      {
+        "value": ".composer-context-label",
+        "count": 2
+      },
+      {
+        "value": ".composer-context-label strong",
+        "count": 2
+      },
+      {
+        "value": ".empty-state",
+        "count": 2
+      },
+      {
+        "value": ".empty-state p:last-child",
+        "count": 2
+      },
+      {
+        "value": ".keyboard-hint",
+        "count": 2
+      },
+      {
+        "value": ".markdown-body h1",
+        "count": 2
+      },
+      {
+        "value": ".markdown-body h2",
+        "count": 2
+      },
+      {
+        "value": ".markdown-body h3",
+        "count": 2
+      },
+      {
+        "value": ".message-actions",
+        "count": 2
+      },
+      {
+        "value": ".message-assistant",
+        "count": 2
+      },
+      {
+        "value": ".message-expand-button",
+        "count": 2
+      },
+      {
+        "value": ".message-expand-button:hover",
+        "count": 2
+      },
+      {
+        "value": ".message-user",
+        "count": 2
+      },
+      {
+        "value": ".new-button:focus-visible",
+        "count": 2
+      },
+      {
+        "value": ".new-button:hover",
+        "count": 2
+      },
+      {
+        "value": ".new-chat-button",
+        "count": 2
+      },
+      {
+        "value": ".new-content-button",
+        "count": 2
+      },
+      {
+        "value": ".new-project-button",
+        "count": 2
+      },
+      {
+        "value": ".project-add-thread:disabled",
+        "count": 2
+      },
+      {
+        "value": ".project-disclosure",
+        "count": 2
+      },
+      {
+        "value": ".project-empty",
+        "count": 2
+      },
+      {
+        "value": ".project-group",
+        "count": 2
+      },
+      {
+        "value": ".project-heading",
+        "count": 2
+      },
+      {
+        "value": ".project-heading-main",
+        "count": 2
+      },
+      {
+        "value": ".project-thread-item",
+        "count": 2
+      },
+      {
+        "value": ".proposal-actions",
+        "count": 2
+      },
+      {
+        "value": ".proposal-card-content",
+        "count": 2
+      },
+      {
+        "value": ".proposal-card-header",
+        "count": 2
+      },
+      {
+        "value": ".repo-control-label",
+        "count": 2
+      },
+      {
+        "value": ".repo-field input",
+        "count": 2
+      },
+      {
+        "value": ".repo-fixed-name",
+        "count": 2
+      },
+      {
+        "value": ".repo-provider-label",
+        "count": 2
+      },
+      {
+        "value": ".repo-status-dot",
+        "count": 2
+      },
+      {
+        "value": ".send-button:not(:disabled)",
+        "count": 2
+      },
+      {
+        "value": ".send-button:not(:disabled):focus-visible",
+        "count": 2
+      },
+      {
+        "value": ".send-button:not(:disabled):hover",
+        "count": 2
+      },
+      {
+        "value": ".sidebar-section-label",
+        "count": 2
+      },
+      {
+        "value": ".sidebar-toggle:focus-visible",
+        "count": 2
+      },
+      {
+        "value": ".sidebar.collapsed",
+        "count": 2
+      },
+      {
+        "value": ".sidebar.collapsed .brand img",
+        "count": 2
+      },
+      {
+        "value": ".sidebar.collapsed .sidebar-topbar",
+        "count": 2
+      },
+      {
+        "value": ".status-dot",
+        "count": 2
+      },
+      {
+        "value": ".status-pill",
+        "count": 2
+      },
+      {
+        "value": ".thread-content",
+        "count": 2
+      },
+      {
+        "value": ".thread-delete:focus-visible",
+        "count": 2
+      },
+      {
+        "value": ".thread-delete:hover",
+        "count": 2
+      },
+      {
+        "value": ".thread-item",
+        "count": 2
+      },
+      {
+        "value": ".thread-item small",
+        "count": 2
+      },
+      {
+        "value": ".thread-item:hover .thread-delete",
+        "count": 2
+      },
+      {
+        "value": ".thread-list",
+        "count": 2
+      },
+      {
+        "value": ".title-save-error",
+        "count": 2
+      },
+      {
+        "value": ".title-save-state",
+        "count": 2
+      },
+      {
+        "value": ".user-avatar",
+        "count": 2
+      },
+      {
+        "value": ".user-bubble",
+        "count": 2
+      },
+      {
+        "value": ".user-message-content",
+        "count": 2
+      },
+      {
+        "value": ".workspace-heading",
+        "count": 2
+      },
+      {
+        "value": ".workspace-repo",
+        "count": 2
+      },
+      {
+        "value": ".workspace-title-input",
+        "count": 2
+      },
+      {
+        "value": "body",
+        "count": 2
+      },
+      {
+        "value": "button",
+        "count": 2
+      }
+    ],
+    "top": [
+      {
+        "value": ".stop-button",
+        "count": 10
+      },
+      {
+        "value": ".send-button",
+        "count": 9
+      },
+      {
+        "value": ".composer-footer",
+        "count": 8
+      },
+      {
+        "value": ".composer",
+        "count": 6
+      },
+      {
+        "value": ".workspace-header",
+        "count": 6
+      },
+      {
+        "value": ".composer-meta",
+        "count": 5
+      },
+      {
+        "value": ".sidebar",
+        "count": 5
+      },
+      {
+        "value": ".brand",
+        "count": 4
+      },
+      {
+        "value": ".composer textarea",
+        "count": 4
+      },
+      {
+        "value": ".repo-control",
+        "count": 4
+      },
+      {
+        "value": ".repo-control-input",
+        "count": 4
+      },
+      {
+        "value": ".workspace-header h1",
+        "count": 4
+      },
+      {
+        "value": ".workspace-status",
+        "count": 4
+      },
+      {
+        "value": ":root",
+        "count": 3
+      },
+      {
+        "value": ".app-shell",
+        "count": 3
+      }
+    ]
+  },
+  "tokenCoverage": {
+    "percent": 3.4,
+    "varUses": 36,
+    "hardcodedColors": 488,
+    "hardcodedPx": 550,
+    "pxSamples": [
+      {
+        "prop": "gap",
+        "value": "12px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ActiveTaskStrip.vue",
+        "line": 40
+      },
+      {
+        "prop": "padding",
+        "value": "9px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ActiveTaskStrip.vue",
+        "line": 40
+      },
+      {
+        "prop": "padding",
+        "value": "22px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ActiveTaskStrip.vue",
+        "line": 40
+      },
+      {
+        "prop": "font-size",
+        "value": "12px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ActiveTaskStrip.vue",
+        "line": 41
+      },
+      {
+        "prop": "gap",
+        "value": "8px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ActiveTaskStrip.vue",
+        "line": 42
+      },
+      {
+        "prop": "border-radius",
+        "value": "9px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ActiveTaskStrip.vue",
+        "line": 43
+      },
+      {
+        "prop": "gap",
+        "value": "7px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ActiveTaskStrip.vue",
+        "line": 45
+      },
+      {
+        "prop": "padding",
+        "value": "6px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ActiveTaskStrip.vue",
+        "line": 45
+      },
+      {
+        "prop": "padding",
+        "value": "8px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ActiveTaskStrip.vue",
+        "line": 45
+      },
+      {
+        "prop": "padding-left",
+        "value": "4px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ActiveTaskStrip.vue",
+        "line": 48
+      },
+      {
+        "prop": "font-size",
+        "value": "17px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\components\\ActiveTaskStrip.vue",
+        "line": 48
+      },
+      {
+        "prop": "padding",
+        "value": "16px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+        "line": 50
+      },
+      {
+        "prop": "padding",
+        "value": "12px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+        "line": 50
+      },
+      {
+        "prop": "padding",
+        "value": "16px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+        "line": 54
+      },
+      {
+        "prop": "padding",
+        "value": "10px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+        "line": 54
+      },
+      {
+        "prop": "gap",
+        "value": "8px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+        "line": 58
+      },
+      {
+        "prop": "margin-bottom",
+        "value": "18px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+        "line": 58
+      },
+      {
+        "prop": "gap",
+        "value": "10px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+        "line": 60
+      },
+      {
+        "prop": "border-radius",
+        "value": "8px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+        "line": 68
+      },
+      {
+        "prop": "font-size",
+        "value": "24px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+        "line": 68
+      },
+      {
+        "prop": "gap",
+        "value": "8px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+        "line": 72
+      },
+      {
+        "prop": "border-radius",
+        "value": "10px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+        "line": 72
+      },
+      {
+        "prop": "padding",
+        "value": "10px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+        "line": 72
+      },
+      {
+        "prop": "padding",
+        "value": "14px",
+        "file": "A:\\gyx_cv\\coding_agent\\ui\\src\\styles\\main.css",
+        "line": 72
+      }
+    ]
+  },
+  "importantCount": 2,
+  "notes": [],
+  "checks": [
+    {
+      "id": "coloredDistinct",
+      "label": "彩色 distinct",
+      "value": 167,
+      "need": "≤5",
+      "pass": false
+    },
+    {
+      "id": "radiusDistinct",
+      "label": "border-radius",
+      "value": 20,
+      "need": "≤4",
+      "pass": false
+    },
+    {
+      "id": "fontSizeDistinct",
+      "label": "font-size",
+      "value": 19,
+      "need": "≤7",
+      "pass": false
+    },
+    {
+      "id": "nearWhiteDistinct",
+      "label": "近白背景 distinct",
+      "value": 17,
+      "need": "≤3",
+      "pass": false
+    },
+    {
+      "id": "rootBlocks",
+      "label": ":root 块",
+      "value": 3,
+      "need": "=1",
+      "pass": false
+    },
+    {
+      "id": "tokenCoverage",
+      "label": "token 覆盖率",
+      "value": 3.4,
+      "need": "≥90%",
+      "pass": false
+    },
+    {
+      "id": "rgbBaseDistinct",
+      "label": "rgb/rgba 基色 distinct",
+      "value": 19,
+      "need": "≤3",
+      "pass": false
+    },
+    {
+      "id": "duplicateSelectors",
+      "label": "重复声明选择器",
+      "value": 109,
+      "need": "=0",
+      "pass": false
+    },
+    {
+      "id": "importantCount",
+      "label": "!important",
+      "value": 2,
+      "need": "=0",
+      "pass": false
+    }
+  ],
+  "failed": [
+    "coloredDistinct",
+    "radiusDistinct",
+    "fontSizeDistinct",
+    "nearWhiteDistinct",
+    "rootBlocks",
+    "tokenCoverage",
+    "rgbBaseDistinct",
+    "duplicateSelectors",
+    "importantCount"
+  ],
+  "failedCount": 9,
+  "passed": false
+}
diff --git a/docs/design/baseline/before-1440.png b/docs/design/baseline/before-1440.png
new file mode 100644
index 0000000..e76583f
Binary files /dev/null and b/docs/design/baseline/before-1440.png differ
diff --git a/docs/design/baseline/before-375.png b/docs/design/baseline/before-375.png
new file mode 100644
index 0000000..b7130d6
Binary files /dev/null and b/docs/design/baseline/before-375.png differ
diff --git a/docs/design/baseline/before-768.png b/docs/design/baseline/before-768.png
new file mode 100644
index 0000000..5b5a2b7
Binary files /dev/null and b/docs/design/baseline/before-768.png differ
diff --git a/docs/design/baseline/phase3-active-tasks-740.png b/docs/design/baseline/phase3-active-tasks-740.png
new file mode 100644
index 0000000..3a9b153
Binary files /dev/null and b/docs/design/baseline/phase3-active-tasks-740.png differ
diff --git a/docs/design/baseline/phase3-composer-breakpoints-1760.png b/docs/design/baseline/phase3-composer-breakpoints-1760.png
new file mode 100644
index 0000000..34311c1
Binary files /dev/null and b/docs/design/baseline/phase3-composer-breakpoints-1760.png differ
diff --git a/docs/design/baseline/phase3-composer-compare-950.png b/docs/design/baseline/phase3-composer-compare-950.png
new file mode 100644
index 0000000..c62289e
Binary files /dev/null and b/docs/design/baseline/phase3-composer-compare-950.png differ
diff --git a/docs/design/baseline/phase3-composer-primitives-1480.png b/docs/design/baseline/phase3-composer-primitives-1480.png
new file mode 100644
index 0000000..b8b2ae4
Binary files /dev/null and b/docs/design/baseline/phase3-composer-primitives-1480.png differ
diff --git a/docs/design/baseline/phase3-dialogs-1560.png b/docs/design/baseline/phase3-dialogs-1560.png
new file mode 100644
index 0000000..83c9a41
Binary files /dev/null and b/docs/design/baseline/phase3-dialogs-1560.png differ
diff --git a/docs/design/baseline/phase3-edges-1500.png b/docs/design/baseline/phase3-edges-1500.png
new file mode 100644
index 0000000..734cb70
Binary files /dev/null and b/docs/design/baseline/phase3-edges-1500.png differ
diff --git a/docs/design/baseline/phase3-edges-loadfail-1500.png b/docs/design/baseline/phase3-edges-loadfail-1500.png
new file mode 100644
index 0000000..1cf08f5
Binary files /dev/null and b/docs/design/baseline/phase3-edges-loadfail-1500.png differ
diff --git a/docs/design/baseline/phase3-edges-loading-1500.png b/docs/design/baseline/phase3-edges-loading-1500.png
new file mode 100644
index 0000000..21373c8
Binary files /dev/null and b/docs/design/baseline/phase3-edges-loading-1500.png differ
diff --git a/docs/design/baseline/phase3-edges-message-1500.png b/docs/design/baseline/phase3-edges-message-1500.png
new file mode 100644
index 0000000..6a800ef
Binary files /dev/null and b/docs/design/baseline/phase3-edges-message-1500.png differ
diff --git a/docs/design/baseline/phase3-edges-sidebar-1500.png b/docs/design/baseline/phase3-edges-sidebar-1500.png
new file mode 100644
index 0000000..fb7e750
Binary files /dev/null and b/docs/design/baseline/phase3-edges-sidebar-1500.png differ
diff --git a/docs/design/baseline/phase3-edges-todo-1500.png b/docs/design/baseline/phase3-edges-todo-1500.png
new file mode 100644
index 0000000..541f0be
Binary files /dev/null and b/docs/design/baseline/phase3-edges-todo-1500.png differ
diff --git a/docs/design/baseline/phase3-focus-visible-1180.png b/docs/design/baseline/phase3-focus-visible-1180.png
new file mode 100644
index 0000000..2910b4a
Binary files /dev/null and b/docs/design/baseline/phase3-focus-visible-1180.png differ
diff --git a/docs/design/baseline/phase3-intervention-900.png b/docs/design/baseline/phase3-intervention-900.png
new file mode 100644
index 0000000..2d93b30
Binary files /dev/null and b/docs/design/baseline/phase3-intervention-900.png differ
diff --git a/docs/design/baseline/phase3-messages-after-1560.png b/docs/design/baseline/phase3-messages-after-1560.png
new file mode 100644
index 0000000..db23774
Binary files /dev/null and b/docs/design/baseline/phase3-messages-after-1560.png differ
diff --git a/docs/design/baseline/phase3-messages-before-1560.png b/docs/design/baseline/phase3-messages-before-1560.png
new file mode 100644
index 0000000..9e0ff86
Binary files /dev/null and b/docs/design/baseline/phase3-messages-before-1560.png differ
diff --git a/docs/design/baseline/phase3-proposal-900.png b/docs/design/baseline/phase3-proposal-900.png
new file mode 100644
index 0000000..3964b11
Binary files /dev/null and b/docs/design/baseline/phase3-proposal-900.png differ
diff --git a/docs/design/baseline/phase3-repo-readonly-900.png b/docs/design/baseline/phase3-repo-readonly-900.png
new file mode 100644
index 0000000..3050667
Binary files /dev/null and b/docs/design/baseline/phase3-repo-readonly-900.png differ
diff --git a/docs/design/baseline/phase3-sidebar-760.png b/docs/design/baseline/phase3-sidebar-760.png
new file mode 100644
index 0000000..049748a
Binary files /dev/null and b/docs/design/baseline/phase3-sidebar-760.png differ
diff --git a/docs/design/baseline/phase3-states-920.png b/docs/design/baseline/phase3-states-920.png
new file mode 100644
index 0000000..b765a5b
Binary files /dev/null and b/docs/design/baseline/phase3-states-920.png differ
diff --git a/docs/design/baseline/phase3-states-empty-1472.png b/docs/design/baseline/phase3-states-empty-1472.png
new file mode 100644
index 0000000..11e1a2f
Binary files /dev/null and b/docs/design/baseline/phase3-states-empty-1472.png differ
diff --git a/docs/design/baseline/phase3-todoplan-900.png b/docs/design/baseline/phase3-todoplan-900.png
new file mode 100644
index 0000000..b21f29d
Binary files /dev/null and b/docs/design/baseline/phase3-todoplan-900.png differ
diff --git a/docs/design/baseline/phase3-warm-breadcrumb-1472.png b/docs/design/baseline/phase3-warm-breadcrumb-1472.png
new file mode 100644
index 0000000..78a4d20
Binary files /dev/null and b/docs/design/baseline/phase3-warm-breadcrumb-1472.png differ
diff --git a/docs/design/baseline/phase3-warm-empty-1472.png b/docs/design/baseline/phase3-warm-empty-1472.png
new file mode 100644
index 0000000..02ae570
Binary files /dev/null and b/docs/design/baseline/phase3-warm-empty-1472.png differ
diff --git a/docs/design/baseline/phase3-warm-messages-1240.png b/docs/design/baseline/phase3-warm-messages-1240.png
new file mode 100644
index 0000000..153c27d
Binary files /dev/null and b/docs/design/baseline/phase3-warm-messages-1240.png differ
diff --git a/docs/design/baseline/phase3-warm-states-920.png b/docs/design/baseline/phase3-warm-states-920.png
new file mode 100644
index 0000000..d1db6d1
Binary files /dev/null and b/docs/design/baseline/phase3-warm-states-920.png differ
diff --git a/docs/design/baseline/phase3-warm-think-1000.png b/docs/design/baseline/phase3-warm-think-1000.png
new file mode 100644
index 0000000..ae47f01
Binary files /dev/null and b/docs/design/baseline/phase3-warm-think-1000.png differ
diff --git a/docs/design/direction.md b/docs/design/direction.md
new file mode 100644
index 0000000..4c19869
--- /dev/null
+++ b/docs/design/direction.md
@@ -0,0 +1,68 @@
+# 视觉方向（参照物冻结）
+
+> 本文件是**冻结过的决定**，不是讨论稿。改它需要走「先改文档再改代码」的流程。
+> 冻结日期：本次重构阶段一
+
+## 1. 一句话定位
+
+一个**长时间使用的开发工作台**：信息密度高、需要一眼分清"哪里是导航、哪里是内容、哪里是操作"，安静、克制、不需要用户去适应它。
+
+关键词：**中性、密实、层级分明**。不是"漂亮"，是"耐用"。
+
+## 2. 参照物
+
+对照截图见 `reference/candidates/`。**主参照决定整体调性，辅参照只取指定特征。**
+
+### 主参照：Cursor（`reference/candidates/cursor-1440.png`）
+
+同类产品的成熟形态——三栏（任务列表 / 对话 / 文档）+ 待办清单，与我们的产品形态几乎同构。
+
+**要它的什么：**
+- 三栏之间的**分工与对比关系**：侧栏最弱、对话居中、内容最强
+- 待办清单的视觉形式：复选框 + 单行文本 + 右侧元信息（时间/耗时）
+- **中性灰承担 95% 的界面，彩色只用于状态**（它整屏只有 Build 按钮一处强色）
+- 输入区用**细边框**而不是重阴影与内容区做区分
+- 运行轨迹/时间这类元信息用小字号、弱色，贴着主内容而不是另外起一行
+
+**不要它的什么：**
+- 桌面应用的窗口装饰（标题栏、红绿灯按钮、窗口阴影）—— 我们是网页
+- 右侧的代码编辑器区域 —— 我们暂不做编辑器
+- 促销横幅、cookie 弹窗等非产品元素
+- 它偏冷的背景底（我们用 `--c-bg-subtle` 的更中性的 `#f7f8f8`）
+
+### 辅参照：Linear（`reference/candidates/linear-1440.png`）
+
+**只取这三样：**
+1. **灰阶层级**：背景 / 侧栏 / 内容 / 浮层 四层必须一眼分得开
+2. **1px 细边框代替阴影** —— 阴影只留给真正浮起的元素（下拉、弹窗）
+3. **状态徽标的克制**：小、圆角胶囊、低饱和底色
+
+**明确不取：**
+- 深色主题 —— 我们保持浅色
+- 它的品牌紫/蓝强调色 —— 我们沿用 `#1f7667`（见 DESIGN.md 说明为什么）
+- 它列表的行高与字号 —— 它比我们要更紧凑，我们的正文用 13px 而不是 12px
+
+### 明确不参照
+
+- **Dribbble / Behance 概念稿**：圆角 24px、无 hover 态、无空态、对比度普遍不足。只能取局部灵感，不能作为界面参照。
+- **任何营销落地页**：它们是"看一眼就走"的页面，我们是"一天开八小时"的工具。密度要求相反。
+
+## 3. 目标调性（可核对）
+
+| 维度 | 目标 | 反面 |
+|---|---|---|
+| 灰阶 | 4 层以内（bg / subtle / border / text 各司其职） | 十几种"差不多的白" |
+| 彩色 | ≤5 种，且**只用于状态与主操作** | 彩色做装饰 |
+| 边框 | 1px，颜色浅 | 到处都是阴影 |
+| 圆角 | 3 档：6 / 10 / 16 | 21 种圆角 |
+| 字号 | 7 档：11/12/13/15/18/24/32 | 19 种字号且分布倒挂 |
+| 节奏 | 所有间距来自 `--space-1..7` | 随手写 7px / 9px / 13px |
+| 动效 | 只用于状态变化，120–180ms | 装饰性动画 |
+
+## 4. 与现状的关系
+
+**这是收敛，不是推翻重做。** 主色 `#1f7667` 不是新选的——它是现有 `main.css` 三个 `:root` 块里**最后生效**的 `--accent-strong` 值。迁移到这套 token 后，界面的**调性不变、噪音大幅减少**。
+
+改完之后应该出现的感受是："**好像没换，但清楚多了**"，而不是"又换了一套配色"。
+
+如果改完你觉得"变了个样"，说明方向错了，回来看这一节。
diff --git a/docs/design/qa-checklist.md b/docs/design/qa-checklist.md
new file mode 100644
index 0000000..e9e564b
--- /dev/null
+++ b/docs/design/qa-checklist.md
@@ -0,0 +1,146 @@
+# qa-checklist.md — 视觉验收清单
+
+> **用法**：截图 → 对着这张清单逐条回答 → 发现问题 → 改 → 再截图。
+> 每条都必须能用"看截图"回答。答不上来的条目说明截图拍得不对，不是清单有问题。
+>
+> 检查顺序**不能变**。前 3 组是结构问题，结构不对时调颜色毫无意义 ——
+> 在第 1 组就失败的情况下修第 5 组，是纯粹的浪费时间。
+
+---
+
+## 0. 截图准备（先做这个，否则后面全是猜）
+
+- [ ] 截了**正常态**（有数据）
+- [ ] 截了**空态**（无数据）—— 新用户看到的就是这个
+- [ ] 截了**加载态**（pending / 骨架屏）
+- [ ] 截了**错误态**（请求失败）
+- [ ] 截了**超长内容**（长标题、长列表、长 URL 不溢出）
+- [ ] 截了**窄宽度**（375px）和**常规宽度**（1280px+）
+- [ ] 截图能看清细节（≥1x 缩放，不是缩略图）
+- [ ] 截图时**隐藏了滚动条与光标**，避免干扰判断
+
+> 截图命令：`node scripts/capture.mjs <url-or-file> shots --widths 375,1280`
+> 没有截图就等于没有验收。**"我觉得应该没问题"不是验收。**
+
+---
+
+## 1. 对齐与栅格（最优先 —— 错了后面都白搭）
+
+- [ ] 页面上**所有元素**的左边缘，只落在**少数几条垂直线**上？（2~4 条）
+- [ ] 相邻区块的间距，看起来是**同一个值**吗？（不是"差不多"）
+- [ ] 侧栏/内容/页边距的边界在整个页面上下**一致**吗？
+- [ ] 有没有元素比同级元素**多缩进或少缩进** 2~6px？（这是最常见的肉眼可辨错位）
+- [ ] 卡片内部的 padding，和卡片之间的 gap，数值是**同一套**吗？
+- [ ] 图标和它旁边的文字**垂直居中对齐**吗？
+- [ ] 表单的 label 和它的输入框左边缘对齐吗？
+
+> **判据**：闭上眼睛再睁开，视线扫过页面 —— 有没有哪里"跳"一下？
+> 有就是对齐问题，不是颜色问题。
+
+---
+
+## 2. 层级与灰度（信息层级是否可读）
+
+- [ ] 文字灰度**不超过 4 档**？（数一下：正文 / 次级 / 弱化 / 强调）
+- [ ] 有没有两种灰**肉眼几乎分不出**却同时存在？（#6b6b6b 和 #6b7780 这种）
+- [ ] 页面看起来会不会**"发脏"**？发脏通常是两套灰色混用。
+- [ ] 标题和正文字号的差距，是**一眼能看出层级**的吗？
+- [ ] 有没有 10px 以下的文字？没有内容重要到需要 8px 才能表达。
+- [ ] 次级信息（说明、时间戳、元数据）是不是**真的比正文弱**，
+      而不只是"小一号"？
+
+> **判据**：眯起眼睛看截图（或把截图缩小到 25%）。
+> 层级还在吗？还在 = 层级是对的；糊成一片 = 只有字号差别，没有视觉层级。
+
+---
+
+## 3. 控件一致性（"看起来专业"的核心）
+
+- [ ] 同一行里的按钮/输入框/下拉框，**高度完全相同**吗？（逐个量）
+- [ ] 所有同类控件的**圆角**是同一个值吗？
+- [ ] 所有输入框（input/textarea/select）的**边框色和内边距**一致吗？
+- [ ] 代表同一级操作的按钮，用的是**同一个 variant** 吗？
+- [ ] 主操作按钮在页面上是否**唯一且显眼**？
+- [ ] 按钮里的文字和图标之间的间距一致吗？
+- [ ] 有没有两个控件视觉重量相同、但语义层级不同？（会让人不知道点哪个）
+
+> **判据**：把所有按钮裁下来排成一行，它们看起来像**同一个设计系统的产物**吗？
+> 有一个不像，就是它的问题。
+
+---
+
+## 4. 间隔节奏
+
+- [ ] 所有间距都来自 `--space-*` 这套值吗？（数一下有几个不同的间距值）
+- [ ] 不同间距值的总数**≤7** 吗？
+- [ ] 相关元素之间的间距，**小于**不相关元素之间的间距吗？
+      （接近性原则 —— 反了会让分组关系读错）
+- [ ] 区块之间的留白，会不会某一个特别大、显得像漏了内容？
+- [ ] 页面顶部的留白和底部的留白，量级是否合理？
+
+---
+
+## 5. 颜色
+
+- [ ] 有彩色（非灰）总数**≤4** 吗？（主色 + success + warning + danger）
+- [ ] 主色在全页只出现**一处**作为品牌识别，而不是三四个地方各一个绿吗？
+- [ ] 有没有**孤立的颜色**（只用了一次、来历不明）？
+- [ ] 语义色用得对吗？成功的事是绿的，危险的事是红的？
+- [ ] 浅色底上的深色文字，和深色底上的浅色文字，**对比度都够**吗？
+- [ ] 有没有用颜色**单独**传达信息？（色盲用户看不到 —— 需要配图标或文字）
+
+> 对比度速查（WCAG AA，正文 4.5:1）：
+> `#1c2321` on `#ffffff` ≈ 14.9:1 ✓ ｜ `#5a6561` on `#ffffff` ≈ 6.4:1 ✓
+> `#8a938f` on `#ffffff` ≈ 3.2:1 ✗ **不要用它写正文**，只用于弱化标注
+> 校验工具：浏览器 DevTools 的对比度提示，或任意 contrast checker。
+
+---
+
+## 6. 交互状态（对照检查，不是看截图就能发现的）
+
+- [ ] 每个可点击元素的 **hover** 态有变化吗？
+- [ ] 用 Tab 键走一遍：**每一个**可聚焦元素都有可见焦点环吗？
+- [ ] 有没有 `outline: none` 而没有替代焦点样式？
+- [ ] 禁用态和可用态**一眼可分**吗？
+- [ ] 加载中时，可点击元素是否被禁用（防重复提交）？
+- [ ] 操作成功/失败后有反馈吗（toast / 内联错误）？
+
+---
+
+## 7. 文本健壮性
+
+- [ ] 把标题换成 3 倍长度的文字，布局会**崩**吗？
+- [ ] 长英文单词/URL 会溢出容器吗？（需要 `overflow-wrap: anywhere`）
+- [ ] 长列表滚动时，表头/工具栏是否保持可用（sticky）？
+- [ ] 数字列是等宽对齐的吗？（否则列表看起来参差）
+- [ ] 中文和英文混排时，间距看起来自然吗？
+
+---
+
+## 8. 和参照物对比（最后一关，也是最能提升的一关）
+
+- [ ] 把截图和 `docs/design/reference/` 里的参照图**并排**打开
+- [ ] 列出 **3 个具体差距**（不是"感觉不如它好看"，而是"它的列表行高更大"这种）
+- [ ] 这 3 个差距里，有没有属于前面 1~7 组已经检查过的？
+      （有 → 前面的检查漏了，回去补）
+- [ ] 剩下的差距里，挑**一个**改，再截图对比。
+
+> **不要一次改三个差距。** 一次一个，改完对比，确认变好了再下一个。
+> 同时改多个 = 无法归因 = 明天又漂回去。
+
+---
+
+## 验收失败怎么办
+
+| 失败组 | 优先修什么 | 不要做什么 |
+|---|---|---|
+| 1 对齐 | 统一间距值和左边缘 | 不要先调颜色 |
+| 2 灰度 | 删掉多余的灰，收敛到 4 档 | 不要加新颜色来"区分" |
+| 3 控件 | 统一高度和圆角 | 不要给单个控件做特例 |
+| 4 间隔 | 归到 `--space-*` | 不要手工试数值 |
+| 5 颜色 | 删掉孤立色 | 不要保留"因为这个页面特殊" |
+| 6 状态 | 补全 hover/focus/disabled | 不要用 `!important` 压 |
+| 7 文本 | 加 `overflow-wrap` / `min-width: 0` | 不要写死宽度 |
+| 8 参照 | 一次改一个差距 | 不要同时改三个 |
+
+**任何一次修完，回到第 0 步重新截图。** 没有重新截图 = 没有修完。
diff --git a/ui/package-lock.json b/ui/package-lock.json
new file mode 100644
index 0000000..5477c2e
--- /dev/null
+++ b/ui/package-lock.json
@@ -0,0 +1,4149 @@
+{
+  "name": "coding-ui",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "coding-ui",
+      "version": "0.1.0",
+      "dependencies": {
+        "@vitejs/plugin-vue": "^6.0.0",
+        "axios": "^1.7.9",
+        "dompurify": "^3.2.4",
+        "markdown-it": "^14.1.0",
+        "pinia": "^3.0.1",
+        "vite": "^7.0.0",
+        "vue": "^3.5.13"
+      },
+      "devDependencies": {
+        "@vue/test-utils": "^2.5.1",
+        "happy-dom": "^20.14.5",
+        "postcss-html": "^2.0.0",
+        "stylelint": "^17.15.0",
+        "stylelint-config-standard": "^40.0.0",
+        "vitest": "^5.0.2"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.29.8.tgz",
+      "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.8"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.29.8.tgz",
+      "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@cacheable/memory": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/@cacheable/memory/-/memory-2.2.0.tgz",
+      "integrity": "sha512-CTLKqLItRCEixEAewD3/j9DB3/o96gpTPD4eJ1v+DGOlxZRZncRQkGYqqnAGCscYd6RNeXfGeiuCphsPtqyIfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cacheable/utils": "^2.5.0",
+        "@keyv/bigmap": "^1.3.1",
+        "hookified": "^1.15.1",
+        "keyv": "^5.6.0"
+      }
+    },
+    "node_modules/@cacheable/utils": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/@cacheable/utils/-/utils-2.5.0.tgz",
+      "integrity": "sha512-buipgOVDkkPXNR5+xBpDw7Zk2n1EvU7qBJCNUcL7rhQ//kfpOXPAvQ511Os0vpLYJ1pZnvudNytkQt2hst3wqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hashery": "^1.5.1",
+        "keyv": "^5.6.0"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-calc/-/css-calc-3.4.1.tgz",
+      "integrity": "sha512-EtC7SoN1j6J4E4DCwg5QgbO5TGxgxIA1RXqe+W+qUM+BUcezx9wT+/tiQ/WO2yCX4i5X+Cuf9ciJ22aP4UEwWw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.1",
+        "@csstools/css-tokenizer": "^4.0.2"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.1.tgz",
+      "integrity": "sha512-ShL8BqPfbKJrJiKFH0xBbN0i7Nrh9HXYRuF+pzyj93R/BL2YAsUxJeqANErzqM+0JGl7vjHp+3OIgd/DL69YIA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.2"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.14.tgz",
+      "integrity": "sha512-HpbVXyrofRXpHpgkNIjU/3EWR4WJvOkO3emNK/L6X/mTJU7bGUI3AkkpoTNXznQLp0KRjLHELTGeKI5dIkI9JQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "peerDependencies": {
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-tokenizer/-/css-tokenizer-4.0.2.tgz",
+      "integrity": "sha512-OoKoR0f76dCY666JlcbhmVTs2drYj1GUXZTYTcbUgJjh9Nv41aFfZ21bPQTERm5+L5cBDo466NltB2lplS5GBw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/media-query-list-parser": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/@csstools/media-query-list-parser/-/media-query-list-parser-5.0.1.tgz",
+      "integrity": "sha512-DR5NpEOOxDOhmMWPJlhYAV9gTmV4XpfYjtE+aXSCurkxS65KzNogI4wqzRIoujieQcmFkeRtK1nRIF8ImUZTDg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.1",
+        "@csstools/css-tokenizer": "^4.0.2"
+      }
+    },
+    "node_modules/@csstools/selector-resolve-nested": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/@csstools/selector-resolve-nested/-/selector-resolve-nested-4.0.2.tgz",
+      "integrity": "sha512-JpjNBJFA+4OnAHKRK4AMp8xrYyLhI9XapOeBlP2PhRU/IylSw+1ep3BFNTksBJnrTS3KT6kqKNVfpzLLwZUW5Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^7.1.1"
+      }
+    },
+    "node_modules/@csstools/selector-specificity": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/@csstools/selector-specificity/-/selector-specificity-6.0.0.tgz",
+      "integrity": "sha512-4sSgl78OtOXEX/2d++8A83zHNTgwCJMaR24FvsYL7Uf/VS8HZk9PTwR51elTbGqMuwH3szLvvOXEaVnqn0Z3zA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^7.1.1"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz",
+      "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.28.1.tgz",
+      "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz",
+      "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.28.1.tgz",
+      "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz",
+      "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz",
+      "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz",
+      "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz",
+      "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz",
+      "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz",
+      "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==",
+      "cpu": [
+        "loong64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz",
+      "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==",
+      "cpu": [
+        "mips64el"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz",
+      "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz",
+      "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz",
+      "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz",
+      "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz",
+      "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz",
+      "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz",
+      "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz",
+      "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz",
+      "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
+      "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@keyv/bigmap": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmmirror.com/@keyv/bigmap/-/bigmap-1.3.1.tgz",
+      "integrity": "sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hashery": "^1.4.0",
+        "hookified": "^1.15.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "keyv": "^5.6.0"
+      }
+    },
+    "node_modules/@keyv/serialize": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/@keyv/serialize/-/serialize-1.1.1.tgz",
+      "integrity": "sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@napi-rs/lzma-linux-x64-gnu": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/@napi-rs/lzma-linux-x64-gnu/-/lzma-linux-x64-gnu-1.5.1.tgz",
+      "integrity": "sha512-oTXEIha4SsuXdTA4Iyskj0kpdx2yVXdhd75c2v3xGrHFfVMsbhTPZU/nMPL4sWKo4pBHm3aucLaqGlF696dTyQ==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^22.20 || ^24.12 || >=25"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmmirror.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@one-ini/wasm": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmmirror.com/@one-ini/wasm/-/wasm-0.2.1.tgz",
+      "integrity": "sha512-TUqERXGNTifZ9y2g3wPxQrw3HpHv/02DsW3D90T9x0hhonrL1ZqpSmNrU2XkoIq0fP1N6gZfVQzy2Fw1ZvGBNg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.4.tgz",
+      "integrity": "sha512-RrPokAb7dmbxFoeO3TloqHyOjgye8RkBhSqmp4aJMIex4c9r46ZstPnleDQOq1t46VOVjwIuwNogIqbodV1Vvg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.62.4.tgz",
+      "integrity": "sha512-JKuJc+pnpks2pjy7L/N3v/cAkZxYlnmuZoD840ldbMI5KDbC4iO9NKwPKYdjYFCMAIIlBzYSFHxIJVYzRo2/8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.62.4.tgz",
+      "integrity": "sha512-krw5uS2STmvJ02x0uTXHbqQNuz+9eZ1iw+qXk9dmW2gvV4jV7O2hEoOnuhFrpOPiel1mBFtqbxYZZtC46hXLOw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.62.4.tgz",
+      "integrity": "sha512-wsTxtgApb4PrOsNJIm0FZ1h3WvCC+k9uxLJ4ad75hgoS4NiRes2SoJFlDAyMwiUY8IssDqGcHbXuN0sx1tfF1A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.62.4.tgz",
+      "integrity": "sha512-GUOnQlyZe3yAXhWOtOMsn5Qkrv5E5mZXa0thbARWi5Ei2szlVXJFQhddZ4HbAzh8q92w5twp+CQvs/eFanz9YQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.62.4.tgz",
+      "integrity": "sha512-/Y7f3QuxjzPKsjA/rfEDa3+0vXqyjmJ50Ln8dPpCmWkKTrUoWHG1cWhTqaAMLob2m2nESWuC7yGrREz019Ztqg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.62.4.tgz",
+      "integrity": "sha512-81wiiX3v7aqy+T+bT61TJ78yJjRquqFFTTbAPt08imfQQzkPIW8t6aJbkTagtCCrXMNc9D66+geqlK7ydLPNqA==",
+      "cpu": [
+        "arm"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.62.4.tgz",
+      "integrity": "sha512-9kmDIvNZqdoHOBZgNtpTBeLWYO/LVipM3H/j62P8848/l/VPEQL6N3uxU9pvP1oZAsXyC2MEnFP3ovRjo7WYNQ==",
+      "cpu": [
+        "arm"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.62.4.tgz",
+      "integrity": "sha512-CcnXHWnXg69g+DX5VWL3FHts3qMRN2uVEHX+BZvGLdd07/gXkn3ePjYtO1LDJvxkGKVHMclKBRa1QUTH+6toYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.62.4.tgz",
+      "integrity": "sha512-iFOibiHnTRuhrWLlRsOQFdZJJIa7S8OwkneJr4ocALP16u5yk6lWLINFwhHaEqBFMsKDUZofLkGos7+CPzGB3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.62.4.tgz",
+      "integrity": "sha512-XnWYMI7euHlb5a871xPja+Gm7DRCFU+FGRrtS2sMq9N8FvqtpagUy6gD4YOemC5MRk9xbh8+jYMEJbigFQwsgA==",
+      "cpu": [
+        "loong64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.62.4.tgz",
+      "integrity": "sha512-qGDAlO0U8xedCcsdRm9oaoQY8DAx/QT7uIxJWhCdx0ceIWX783UC9QSYkdpzAe29wNiVfp24+bZdQmn49o45SQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.62.4.tgz",
+      "integrity": "sha512-ru4H6ezD7ysA5EiEK6qkkaEb4modH8CTej6kUy/gQi20u3kB3G7Zn8snXXkeJSCOFKG/rbPPtM/+9Wgas1961w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.62.4.tgz",
+      "integrity": "sha512-2W4MO5WQVJnbJaZdvDb9rhBDuFU1nKIepPFpJUBsTh2k1YY2g+ODViaWuyOAjQ5cOP7NvrvLzt3wvHOoiAvc7w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.62.4.tgz",
+      "integrity": "sha512-+fxjfuoAmVMCYV5QyjoIpu0cp5DOiOTeqYFk1AVaxGr+/ravWLX89XfQmptsoWcaVy/TGf2hexzbUOrCQIL1CQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.62.4.tgz",
+      "integrity": "sha512-jTn8JfHGL4djjFxPuM06LmNUJDsst2jeVlsd9OmIH6zc5sC9K6rIuO4YajXatLUpBmBKl6b35ro1QZocLi+tcA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.62.4.tgz",
+      "integrity": "sha512-oCJCJL4pXsoDcP2QZ+JVlPTIRc6266zsIaeJJsWImmF7HO0W8nb6HuSgZlMWxJwaPf8ehbSw8yo0EUw925hKsA==",
+      "cpu": [
+        "s390x"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.62.4.tgz",
+      "integrity": "sha512-W69hukhZ3KKNRCaMIEzKvcFye42hh0FE1+YoYaf5+Ikacuftoco6yO/xouz0hc5d5W/s3yBro5jRiuEE/Q5vUw==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.62.4.tgz",
+      "integrity": "sha512-qiXbGG2jkjXhzXpsFZSR2Xpb8DN/UaxYsbb/STbuR/6fpaDgRmmaq1B/LmtF2wQFOFOSsK2jdE0RZ3a0zHn4QA==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.62.4.tgz",
+      "integrity": "sha512-nWeM//hxv8mIo6jD7Hu4o48DVmV9pbV6gsKaWU+4NFyqHoPKwrkRiZGLKUhOBk8qNmDmpwFtPKg80Bo/Tn4xiQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.62.4.tgz",
+      "integrity": "sha512-s62SQ/vgsRSvMwDkOEfTqfgASF0f26ZNaQuTA6Aok5lrikf89yI2W0gFHvZb2Jpgc6N8JnOKZgCK2iciO3CsxQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.62.4.tgz",
+      "integrity": "sha512-J6wGf8TVGbXJq+HH+ttTvrcfNKPbuZecV6KT1B8I18BC5IURUh5kl4Yl5OEP5eFIUoI5BWxCsyYMhFsDx8kekw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.62.4.tgz",
+      "integrity": "sha512-zmfrQd/0wu6oJs8Vq8KwY/YtsKSsLtKe/HwAP4Wqy8LhWjeT55fHRAkOhYQ12wI3ayS4Tt12d5CDRD7N96SAYQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.62.4.tgz",
+      "integrity": "sha512-qPzHqdj9rfUD+w79dtE07zi/kFwKyCJqplp5K5ygeLTp7jLpAoc16OAH39HSmRC9UpozaecsleI8uAdEj6v2yw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.62.4.tgz",
+      "integrity": "sha512-zD6NdeWEByGE9QF9vCrlJ5YQB4oq9q91kPZS37Jwj5hOkvR1lTBSpsKhKDw4IJtbQ35LsTS1HD9DZYGKIshU1Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@sindresorhus/merge-streams": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz",
+      "integrity": "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmmirror.com/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "26.6.3",
+      "resolved": "https://registry.npmmirror.com/@types/node/-/node-26.6.3.tgz",
+      "integrity": "sha512-dsqMQQoeTLqu9wynDD00q573mNzso3IdQOAfHRJqLCcmCFPoGo9A1bDpUcv/9tnKpErQWv9uKeGfl37EIS02Yg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~8.9.0"
+      }
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmmirror.com/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/@types/whatwg-mimetype": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz",
+      "integrity": "sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "6.0.8",
+      "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-6.0.8.tgz",
+      "integrity": "sha512-0ZjgOg7oO6farnNGup7yvoM/YXZV84OZxHAwtflItNa/6zzQyVb5LNxyea3FEKEX2XlagIKzrlH7wwxkKgtiew==",
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/@vitest/mocker/-/mocker-5.0.2.tgz",
+      "integrity": "sha512-Z5FS00Q1SJHkB35xATsmWGdQ5WA1/0MV3CDjqyv7GavHv1OfOj145MNfHOlHk7QLes21dKFDHr8EO2zvL+9WGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "0.3.31",
+        "@vitest/spy": "5.0.2",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^1.2.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/mocker/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/@vitest/mocker/node_modules/magic-string": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-1.4.2.tgz",
+      "integrity": "sha512-vG+rjFRj1PqdIBozIxAGMjPlOhaVe+GXpbttY/iSK7rGcJRMlwNJO7dcUwmUqkymsFLJiNGI06t4D7Fr7yRC9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.6.0"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/@vitest/spy/-/spy-5.0.2.tgz",
+      "integrity": "sha512-Ijc7T1nT9efNb5LxvjaBrEqw3f/QwUv5EE0nKqZxgqsaV/FxAAZ8baGylA8X/Z2oS4Lp+K74Jr6dTJsDKxJDeg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.5.41.tgz",
+      "integrity": "sha512-q0Xtv/F9w2YO/7htQhtiL+Ev2WCJbe5N2hc+XfgyKkEKqWpSxknmT8QOuGdEKNdjPq0c3F7rNpFkTo3Kfrm7pg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@vue/shared": "3.5.41",
+        "entities": "^7.0.1",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmmirror.com/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.5.41.tgz",
+      "integrity": "sha512-oKacVfNglLvGjnS6BXOlGL7EyG2h8X03pqXCjzotRZUaXGjbrTJUnVAQjrCqUnS+lyu31nwQjZY/d817GmCnfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.41",
+        "@vue/shared": "3.5.41"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.5.41.tgz",
+      "integrity": "sha512-XJhip7R2wy6vX3knCxdZN4KracFaZUef58s1KYewqluedHIJaPIVfXoYT7MF1F8nCvv6k8bWWxDC8opMkg1VTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@vue/compiler-core": "3.5.41",
+        "@vue/compiler-dom": "3.5.41",
+        "@vue/compiler-ssr": "3.5.41",
+        "@vue/shared": "3.5.41",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.21",
+        "postcss": "^8.5.19",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.5.41.tgz",
+      "integrity": "sha512-U3v5OejKEGqOI0Wy0+Sz7hGuIFZHA4LSXzrNM3IMIeDyJEBBfTpX26n3SDgToRpP2bLc9FfI2j/kSgcJ8Emq5A==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.41",
+        "@vue/shared": "3.5.41"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "7.7.10",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-7.7.10.tgz",
+      "integrity": "sha512-KxtEpUOOpFz/qOGRrAwA36QF7DqIA+FXgCYit9mk9wjbaZt0sXOFz81ElOZtKA4HbWHUdwNjZHBFsFFyp5BZiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.10"
+      }
+    },
+    "node_modules/@vue/devtools-kit": {
+      "version": "7.7.10",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-kit/-/devtools-kit-7.7.10.tgz",
+      "integrity": "sha512-3WNi2Kq4tbpVbmhml7RiphmAt0279oh3fKNeWMQIrltfX8Q91b4i5PL8DtyNKdwmcsGrV4fg+erwWOmD05CLIw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.10",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "7.7.10",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-shared/-/devtools-shared-7.7.10.tgz",
+      "integrity": "sha512-wOPslzB8vTvpxwdaOcR2qAbwmuSP0L+rhpoC6Cf56V3Jip+HWb7PQQXOUPgBNQARpXsbQX/+mvi8kKucmBGRwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.41.tgz",
+      "integrity": "sha512-rznsqKM0np0x18EjzF8x88MpEhdNsffbvFbckLL5+oUKz1BxAImEmO7J1ArRYSyo6aQaVoBDp7jEkT91OOxydA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.41"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.5.41.tgz",
+      "integrity": "sha512-Vcry58hiAKwGen9Z1jUZE0feFsNArPCMOImYI8el48A9Idf6DuQYD0U05zZIF2Iad1hGhPSvcbBbAOhNr55fhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.41",
+        "@vue/shared": "3.5.41"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.5.41.tgz",
+      "integrity": "sha512-3vVBahVBS9+U6cmXBLyb8nE6/yYo4J/CGI9eVFs3KiMc0YHuudwKyShTD65jtJy/L9PUUxNAFu4cj4LiJ0UFbw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.41",
+        "@vue/runtime-core": "3.5.41",
+        "@vue/shared": "3.5.41",
+        "csstype": "^3.2.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.5.41.tgz",
+      "integrity": "sha512-n6hx/pNFfbD6SuyeuMVkvqox8bwf/ET9JlA/kAz/imw8sw++wkqKe2mHX5KutjPpbKE4Z56yTHszoOjGMI9igQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.41",
+        "@vue/runtime-dom": "3.5.41",
+        "@vue/shared": "3.5.41"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.5.41.tgz",
+      "integrity": "sha512-IOnwSCma8j+9xJT6b8H0dEYidC80NsYmNMlZxRsukYcSoGaDBohog5hDxzeUXdFeGWFA++vWvxqOmrr96VlqMA==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/test-utils": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@vue/test-utils/-/test-utils-2.5.1.tgz",
+      "integrity": "sha512-V/4a99odJ7hapr0bRt35XxljGk8hefq31gSOnlKTcEq2fUeoj2qb+FcpJYfQu4qfYhW9Ug+O2+CZ3QmZ7gXDzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-beautify": "^2.0.0",
+        "vue-component-type-helpers": "^3.0.0"
+      },
+      "peerDependencies": {
+        "@vue/compiler-dom": "3.x",
+        "@vue/server-renderer": "3.x",
+        "vue": "3.x"
+      },
+      "peerDependenciesMeta": {
+        "@vue/server-renderer": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/abbrev": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/abbrev/-/abbrev-5.0.0.tgz",
+      "integrity": "sha512-/XrFJgzQQQHpti1raDJC6m4ws6aNktmjBlhk8Fdlk7LwCEuDoieEJJY9OFHjfiFJFFRM2tK+Ky/IsfbbmlMu1w==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.20.0.tgz",
+      "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-6.4.0.tgz",
+      "integrity": "sha512-KzTVk2tCWAHtYrvvvaP8bJKJq2pVinhLcGEQdtLIYPbmNGNyYe8QwNaTUYQp2J7/vIsUKt5QCqAfUkYyG9DkOw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/astral-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/astral-regex/-/astral-regex-2.0.0.tgz",
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.19.0.tgz",
+      "integrity": "sha512-ht/iuYZXEjFxLH/Hkezgd7m6JKlHHXEUSneaDz8uZe1Gj5QZtCnpyDsckvAiEnT89OEbCLmnte4R4sn7P0EKFw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.16.0",
+        "form-data": "^4.0.6",
+        "https-proxy-agent": "^5.0.1",
+        "proxy-from-env": "^2.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/birpc": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmmirror.com/birpc/-/birpc-2.9.0.tgz",
+      "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "5.0.12",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-5.0.12.tgz",
+      "integrity": "sha512-YovQ3rzhaLMIrDjNDMkNS01tea93qhEhG5xy8f6+R0l+dw3Ki+5sCoIoI942iuLZTHWogWktgwVDhU09iNEimQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/buffer-image-size": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmmirror.com/buffer-image-size/-/buffer-image-size-0.6.4.tgz",
+      "integrity": "sha512-nEh+kZOPY1w+gcCMobZ6ETUp9WfibndnosbpwB1iJk/8Gt5ZF2bhS6+B6bPYz424KtwsR6Rflc3tCz1/ghX2dQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/cacheable": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/cacheable/-/cacheable-2.5.0.tgz",
+      "integrity": "sha512-60cyAOytib/OzBw1JNSoSV/boK1AtHryDIjvVBk7XbN4ugfkM3+Sry7fEjNgPMGgOjuaZPAp8ruZ0Cxafwyq9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cacheable/memory": "^2.2.0",
+        "@cacheable/utils": "^2.5.0",
+        "hookified": "^1.15.0",
+        "keyv": "^5.6.0",
+        "qified": "^0.10.1"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmmirror.com/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/colord": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmmirror.com/colord/-/colord-2.10.0.tgz",
+      "integrity": "sha512-AidJptpBJmjTclAp9BkLwJi0T93fo5epJnbaZslpg6QVzpHjAiveF55mE9AcUJiGMqRHgMDY8soMsQtuNYMHfw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "14.0.3",
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-14.0.3.tgz",
+      "integrity": "sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmmirror.com/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
+    "node_modules/copy-anything": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-4.0.5.tgz",
+      "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==",
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/cosmiconfig": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-9.0.2.tgz",
+      "integrity": "sha512-gtTZxTDau1wL7Y7zifc2dd8jHSK/k6BTx/2Xp/BpdlAdnlYWFVt7qhJqgwi7637yRwRQ3qL4ZidbB4I8tA5VOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/css-functions-list": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmmirror.com/css-functions-list/-/css-functions-list-3.3.3.tgz",
+      "integrity": "sha512-8HFEBPKhOpJPEPu70wJJetjKta86Gw9+CCyCnB3sui2qQfOvRyqBy4IKLKKAwdMpWb2lHXWk9Wb4Z6AmaUT1Pg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmmirror.com/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmmirror.com/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/dompurify": {
+      "version": "3.4.13",
+      "resolved": "https://registry.npmmirror.com/dompurify/-/dompurify-3.4.13.tgz",
+      "integrity": "sha512-2vmYIoqjze2d+kakP8S/nS5shfsl587kzwEjcGlTdiksUVgFHnFCsLYDVj/JNqJVOQZGSYBTmuycv0PodwmnMQ==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmmirror.com/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/editorconfig": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/editorconfig/-/editorconfig-3.0.2.tgz",
+      "integrity": "sha512-T0ix8GhtxyKVfUFEcvdNDt3YGqlwkFHbD4/5bgFUDgFmxhI/cSRAeJ87/Sz//Cq8Eam6JX/e23RkoFO71P7aAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@one-ini/wasm": "0.2.1",
+        "commander": "^14.0.3",
+        "minimatch": "~10.2.4",
+        "semver": "^7.7.4"
+      },
+      "bin": {
+        "editorconfig": "bin/editorconfig"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmmirror.com/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-2.3.2.tgz",
+      "integrity": "sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.28.1.tgz",
+      "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.28.1",
+        "@esbuild/android-arm": "0.28.1",
+        "@esbuild/android-arm64": "0.28.1",
+        "@esbuild/android-x64": "0.28.1",
+        "@esbuild/darwin-arm64": "0.28.1",
+        "@esbuild/darwin-x64": "0.28.1",
+        "@esbuild/freebsd-arm64": "0.28.1",
+        "@esbuild/freebsd-x64": "0.28.1",
+        "@esbuild/linux-arm": "0.28.1",
+        "@esbuild/linux-arm64": "0.28.1",
+        "@esbuild/linux-ia32": "0.28.1",
+        "@esbuild/linux-loong64": "0.28.1",
+        "@esbuild/linux-mips64el": "0.28.1",
+        "@esbuild/linux-ppc64": "0.28.1",
+        "@esbuild/linux-riscv64": "0.28.1",
+        "@esbuild/linux-s390x": "0.28.1",
+        "@esbuild/linux-x64": "0.28.1",
+        "@esbuild/netbsd-arm64": "0.28.1",
+        "@esbuild/netbsd-x64": "0.28.1",
+        "@esbuild/openbsd-arm64": "0.28.1",
+        "@esbuild/openbsd-x64": "0.28.1",
+        "@esbuild/openharmony-arm64": "0.28.1",
+        "@esbuild/sunos-x64": "0.28.1",
+        "@esbuild/win32-arm64": "0.28.1",
+        "@esbuild/win32-ia32": "0.28.1",
+        "@esbuild/win32-x64": "0.28.1"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/expect-type": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/expect-type/-/expect-type-1.4.0.tgz",
+      "integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-uri": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmmirror.com/fast-uri/-/fast-uri-3.1.8.tgz",
+      "integrity": "sha512-GZMtZUTNRpOVIECoXwLNZS5xUGE+mVNbTB8h/7Rwh2TFWcBQiPzTgyZi05BF9UMZKkLJv8XBRJTlU7zg8+ZfMg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmmirror.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.9.1"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.3",
+      "resolved": "https://registry.npmmirror.com/fastq/-/fastq-1.20.3.tgz",
+      "integrity": "sha512-XKv5nnLs6nLF71NgiKJLIZFLkPyIEuOselLG7ujZnGrRfQK8HpvY+WqKhAJUAdLomwVHErVS4LfxFlPq0/FTAw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmmirror.com/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "11.1.5",
+      "resolved": "https://registry.npmmirror.com/file-entry-cache/-/file-entry-cache-11.1.5.tgz",
+      "integrity": "sha512-+PFTHITI08JIGhnNpGNI8T8inUpgZfk3GNEqfT9R2zZV2iFXg3CvqzSl/uEhs7TSGujYRELEANyDvS8Fj7+S7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^6.1.23"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "6.1.23",
+      "resolved": "https://registry.npmmirror.com/flat-cache/-/flat-cache-6.1.23.tgz",
+      "integrity": "sha512-f++BY9pTk+983xK1FLzlLpmM0i0z+jHmx3QESGkURMXujQZz1k5wzwX6hjnQ8goaD0B+sYnDK1yZ6MTyZfUaqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cacheable": "^2.5.0",
+        "flatted": "^3.4.2",
+        "hookified": "^1.15.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmmirror.com/flatted/-/flatted-3.4.4.tgz",
+      "integrity": "sha512-5+ybhBZANEJxaH3X5evAFatUxLfEHSr7n6kYJ+1Qd0mUqr4eu9gIf6GDbWHf8RJijHrjjO8G+la14SlL2SeS1Q==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.6.tgz",
+      "integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.4",
+        "mime-types": "^2.1.35"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-east-asian-width": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmmirror.com/get-east-asian-width/-/get-east-asian-width-1.7.0.tgz",
+      "integrity": "sha512-XjH1AECxf0giL2V1aU8vKyRR2ppRUb5c0EvT7zuJTokQ74bNo52zOtghqdWIqrhUD79fo3x0WfKZdOqxF6LG1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/glob": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmmirror.com/glob/-/glob-13.0.6.tgz",
+      "integrity": "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "minimatch": "^10.2.2",
+        "minipass": "^7.1.3",
+        "path-scurry": "^2.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/global-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/global-modules/-/global-modules-2.0.0.tgz",
+      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "global-prefix": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/global-prefix/-/global-prefix-3.0.0.tgz",
+      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.5",
+        "kind-of": "^6.0.2",
+        "which": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/globby": {
+      "version": "16.2.4",
+      "resolved": "https://registry.npmmirror.com/globby/-/globby-16.2.4.tgz",
+      "integrity": "sha512-c8B/VNLmxRcmqqenRA9t+9IyOjf9+V6lTxPaUJLqOCONdQkWZ0ETYgX0qbtJqPsgCNusT9MZ5Jeidw8Eb9tn2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/merge-streams": "^4.0.0",
+        "fast-glob": "^3.3.3",
+        "ignore": "^7.0.5",
+        "is-path-inside": "^4.0.0",
+        "micromatch": "^4.0.8",
+        "slash": "^5.1.0",
+        "unicorn-magic": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globjoin": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmmirror.com/globjoin/-/globjoin-0.1.4.tgz",
+      "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/happy-dom": {
+      "version": "20.14.5",
+      "resolved": "https://registry.npmmirror.com/happy-dom/-/happy-dom-20.14.5.tgz",
+      "integrity": "sha512-x/RzkpWO40bTjIoT30iQtt64FLLmH/iRcUCN2X//bLx7H3ifkdfPXyqsro/OYtqzIAhiLMMA7mmiOR9C3NOKjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": ">=20.0.0",
+        "@types/whatwg-mimetype": "^3.0.2",
+        "@types/ws": "^8.18.1",
+        "buffer-image-size": "^0.6.4",
+        "entities": "^7.0.1",
+        "whatwg-mimetype": "^3.0.0",
+        "ws": "^8.21.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/happy-dom/node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmmirror.com/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-5.0.1.tgz",
+      "integrity": "sha512-CsNUt5x9LUdx6hnk/E2SZLsDyvfqANZSUq4+D3D8RzDJ2M+HDTIkF60ibS1vHaK55vzgiZw1bEPFG9yH7l33wA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hashery": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/hashery/-/hashery-1.5.1.tgz",
+      "integrity": "sha512-iZyKG96/JwPz1N55vj2Ie2vXbhu440zfUfJvSwEqEbeLluk7NnapfGqa7LH0mOsnDxTF85Mx8/dyR6HfqcbmbQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hookified": "^1.15.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "license": "MIT"
+    },
+    "node_modules/hookified": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmmirror.com/hookified/-/hookified-1.15.1.tgz",
+      "integrity": "sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/html-tags": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/html-tags/-/html-tags-5.1.0.tgz",
+      "integrity": "sha512-n6l5uca7/y5joxZ3LUePhzmBFUJ+U2YWzhMa8XUTecSeSlQiZdF5XAd/Q3/WUl0VsXgUwWi8I7CNIwdI5WN1SQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-9.1.0.tgz",
+      "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "entities": "^4.5.0"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "7.0.10",
+      "resolved": "https://registry.npmmirror.com/ignore/-/ignore-7.0.10.tgz",
+      "integrity": "sha512-HpbUakT7xp5miBUywCHf36ZEuAJNklBJDDsGpUIjMzOSmM8ELSfA9Sa/QDPeNeqeoN31u+UTCkL4klCOVvRm4Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-meta-resolve": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz",
+      "integrity": "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmmirror.com/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmmirror.com/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/is-path-inside/-/is-path-inside-4.0.0.tgz",
+      "integrity": "sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-what": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmmirror.com/is-what/-/is-what-5.5.0.tgz",
+      "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/js-beautify": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/js-beautify/-/js-beautify-2.0.3.tgz",
+      "integrity": "sha512-cyFbh3tkPhknnTD/0bLf0T0yy2ZIbqL05mttzbt4y1Zfr7NxqXQZ62dkBLKs3oHH/lpjmDRAnciJiSUyOy8XwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "config-chain": "^1.1.13",
+        "editorconfig": "^3.0.2",
+        "glob": "^13.0.6",
+        "js-cookie": "^3.0.8",
+        "nopt": "^10.0.1"
+      },
+      "bin": {
+        "css-beautify": "js/bin/css-beautify.js",
+        "html-beautify": "js/bin/html-beautify.js",
+        "js-beautify": "js/bin/js-beautify.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/js-cookie": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.8.tgz",
+      "integrity": "sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmmirror.com/js-yaml/-/js-yaml-4.3.2.tgz",
+      "integrity": "sha512-SFNOvSJ+Dgf/9An904Yx+CgSlIPCkIpao4qo51lpee25TIRejdH3rhR4EZMGoNx3/TP3O+wzWuiTFl4sqbltzA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/keyv": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmmirror.com/keyv/-/keyv-5.6.0.tgz",
+      "integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@keyv/serialize": "^1.1.1"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/linkify-it": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/linkify-it/-/linkify-it-5.0.2.tgz",
+      "integrity": "sha512-ONTm2jCMAVZjgQa/Fy1kScXsuOoF5NPTsoFBdE1KVIZ2vAh/r9+Bqo+0jINCBYnavTPQZz38QzFTme79ENoN3Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/markdown-it"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
+    "node_modules/lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmmirror.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lru-cache": {
+      "version": "11.5.3",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-11.5.3.tgz",
+      "integrity": "sha512-U4N8FgzmWxc8k1VH8Kr6lQg18U7Fjvby6wXHVRX/ZZ7IwWbRMgrRbP0Wrb5q5NVinryp4SQampHKdvtecItxUg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/markdown-it": {
+      "version": "14.3.0",
+      "resolved": "https://registry.npmmirror.com/markdown-it/-/markdown-it-14.3.0.tgz",
+      "integrity": "sha512-RCEsPjR+sr0x+AuYp601tKTkgFG4YEPLCzHST3cQ/fhlJkqAkz1L2/Qbp1j9qw5SBwQHFBoW8+hoN5xssOF0Tw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/markdown-it"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.5.0",
+        "linkify-it": "^5.0.2",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mathml-tag-names": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/mathml-tag-names/-/mathml-tag-names-4.0.0.tgz",
+      "integrity": "sha512-aa6AU2Pcx0VP/XWnh8IGL0SYSgQHDT6Ucror2j2mXeFAlN3ahaNs8EZtG1YiticMkSLj3Gt6VPFfZogt7G5iFQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/mdurl": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/mdurl/-/mdurl-2.1.0.tgz",
+      "integrity": "sha512-1+HBaOx0zi/dQWht8rNv9MYf9qqpqL/kxI0hXImU6Y547zM6Sni8BQibt7ifgMcYtQg41ao3Ivd6cnSM86inpg==",
+      "license": "MIT"
+    },
+    "node_modules/meow": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmmirror.com/meow/-/meow-14.1.0.tgz",
+      "integrity": "sha512-EDYo6VlmtnumlcBCbh1gLJ//9jvM/ndXHfVXIFrZVr6fGcwTUyCTFNTLCKuY3ffbK8L/+3Mzqnd58RojiZqHVw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmmirror.com/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "10.2.6",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-10.2.6.tgz",
+      "integrity": "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.8"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmmirror.com/minipass/-/minipass-7.1.3.tgz",
+      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.18",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/nopt": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmmirror.com/nopt/-/nopt-10.0.1.tgz",
+      "integrity": "sha512-df3sBr/6ax9hSGuC3CspvLlbnX8cP5L5nZwXF8cGN8l0zSWR6BvzmQ6jPUKjvo6+/xdpkNvEcucBNUdBeeV13g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^5.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/obug": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/obug/-/obug-2.2.1.tgz",
+      "integrity": "sha512-XrsrhT5sybtKI6wakr2SPOlGZWWYbUXZ7a0jT8/QOeAPau+1X/bSegNe5YR75oJmEZQbKningirmGOEJCIk61Q==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/path-scurry": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/path-scurry/-/path-scurry-2.0.2.tgz",
+      "integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^11.0.0",
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.7.tgz",
+      "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pinia": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-3.0.4.tgz",
+      "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.5.0",
+        "vue": "^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.26",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.26.tgz",
+      "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.17",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-html": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/postcss-html/-/postcss-html-2.0.0.tgz",
+      "integrity": "sha512-f2Rvw5FCollEfVj3wfN7JdQb7n2rNIthW+epw2EByio7M6P7RH0BTj8a/ODHrUXd0cmO7ychb6YniymV93182Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "htmlparser2": "^9.1.0",
+        "js-tokens": "^9.0.0",
+        "postcss-safe-parser": "^7.0.1"
+      },
+      "engines": {
+        "node": "^22.12 || >=24"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.0"
+      }
+    },
+    "node_modules/postcss-html/node_modules/js-tokens": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-9.0.1.tgz",
+      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/postcss-safe-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-safe-parser/-/postcss-safe-parser-7.1.0.tgz",
+      "integrity": "sha512-1WzZxRLaAFwEh6Do+zyGpjWV3nGJNxxhuh7Ubu/q1ICImMgZJnLwhoaEpRbG4pJppp2Y1ncL9ffA2f+LhrefQg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-7.1.6.tgz",
+      "integrity": "sha512-7qASPzhKF2l2KLboRZux8CCTRMdGiV08vWmyKzPz22qZ7ZjQBOeY7rNzNoCLSUiftJ7HUq0GERHmxw/t0dCdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/proxy-from-env": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qified": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmmirror.com/qified/-/qified-0.10.1.tgz",
+      "integrity": "sha512-+Owyggi9IxT1ePKGafcI87ubSmxol6smwJ+RAHDQlx9+9cPwFWDiKFFCPuWhr9ignlGpZ9vDQLw67N4dcTVFEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hookified": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/qified/node_modules/hookified": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/hookified/-/hookified-2.2.0.tgz",
+      "integrity": "sha512-p/LgFzRN5FeoD3DLS6bkUapeye6E4SI6yJs6KetENd18S+FBthqYq2amJUWpt5z0EQwwHemidjY5OqJGEKm5uA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
+    "node_modules/rollup": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.62.4.tgz",
+      "integrity": "sha512-RXOqwaPsBGjMNMa4sQjDjHieHEZDFoj/Rdr46l2MU5DfEs16wHJPC2RPTPHWhNl+M3aI472LLqFkFKut4SblOg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.9"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@napi-rs/lzma-linux-x64-gnu": "1.5.1",
+        "@rollup/rollup-android-arm-eabi": "4.62.4",
+        "@rollup/rollup-android-arm64": "4.62.4",
+        "@rollup/rollup-darwin-arm64": "4.62.4",
+        "@rollup/rollup-darwin-x64": "4.62.4",
+        "@rollup/rollup-freebsd-arm64": "4.62.4",
+        "@rollup/rollup-freebsd-x64": "4.62.4",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.62.4",
+        "@rollup/rollup-linux-arm-musleabihf": "4.62.4",
+        "@rollup/rollup-linux-arm64-gnu": "4.62.4",
+        "@rollup/rollup-linux-arm64-musl": "4.62.4",
+        "@rollup/rollup-linux-loong64-gnu": "4.62.4",
+        "@rollup/rollup-linux-loong64-musl": "4.62.4",
+        "@rollup/rollup-linux-ppc64-gnu": "4.62.4",
+        "@rollup/rollup-linux-ppc64-musl": "4.62.4",
+        "@rollup/rollup-linux-riscv64-gnu": "4.62.4",
+        "@rollup/rollup-linux-riscv64-musl": "4.62.4",
+        "@rollup/rollup-linux-s390x-gnu": "4.62.4",
+        "@rollup/rollup-linux-x64-gnu": "4.62.4",
+        "@rollup/rollup-linux-x64-musl": "4.62.4",
+        "@rollup/rollup-openbsd-x64": "4.62.4",
+        "@rollup/rollup-openharmony-arm64": "4.62.4",
+        "@rollup/rollup-win32-arm64-msvc": "4.62.4",
+        "@rollup/rollup-win32-ia32-msvc": "4.62.4",
+        "@rollup/rollup-win32-x64-gnu": "4.62.4",
+        "@rollup/rollup-win32-x64-msvc": "4.62.4",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/slash": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/slash/-/slash-5.1.0.tgz",
+      "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/slice-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/slice-ansi/-/slice-ansi-4.0.0.tgz",
+      "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmmirror.com/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/std-env": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/std-env/-/std-env-4.2.0.tgz",
+      "integrity": "sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string-width": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-8.3.0.tgz",
+      "integrity": "sha512-ZbmZM0JCihQN91dWnxoipT2KOEyHqEyfRXUyjuRhW8b/xnqPDoq4gWEVApTVa9db2wN8mmoikgFBbjh71+cGeQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.5.0",
+        "strip-ansi": "^7.1.2"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/stylelint": {
+      "version": "17.15.0",
+      "resolved": "https://registry.npmmirror.com/stylelint/-/stylelint-17.15.0.tgz",
+      "integrity": "sha512-mWIkesYQvQjf4Kvdeu9ns0IL8/K/wtjaGxPqsPd6DlLZvaQxGysJsocxUDrBcyHQ5VleAk4uSMat4yMrVED7PA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^3.3.0",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-syntax-patches-for-csstree": "^1.1.9",
+        "@csstools/css-tokenizer": "^4.0.0",
+        "@csstools/media-query-list-parser": "^5.0.0",
+        "@csstools/selector-resolve-nested": "^4.0.1",
+        "@csstools/selector-specificity": "^6.0.0",
+        "colord": "^2.10.0",
+        "cosmiconfig": "^9.0.2",
+        "css-functions-list": "^3.3.3",
+        "css-tree": "^3.2.1",
+        "debug": "^4.4.3",
+        "fast-glob": "^3.3.3",
+        "fastest-levenshtein": "^1.0.16",
+        "file-entry-cache": "^11.1.5",
+        "global-modules": "^2.0.0",
+        "globby": "^16.2.4",
+        "globjoin": "^0.1.4",
+        "html-tags": "^5.1.0",
+        "ignore": "^7.0.6",
+        "import-meta-resolve": "^4.2.0",
+        "mathml-tag-names": "^4.0.0",
+        "meow": "^14.1.0",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.5.26",
+        "postcss-safe-parser": "^7.0.1",
+        "postcss-selector-parser": "^7.1.5",
+        "postcss-value-parser": "^4.2.0",
+        "string-width": "^8.2.2",
+        "supports-hyperlinks": "^4.5.0",
+        "svg-tags": "^1.0.0",
+        "table": "^6.9.0",
+        "write-file-atomic": "^7.0.1"
+      },
+      "bin": {
+        "stylelint": "bin/stylelint.mjs"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/stylelint-config-recommended": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmmirror.com/stylelint-config-recommended/-/stylelint-config-recommended-18.0.0.tgz",
+      "integrity": "sha512-mxgT2XY6YZ3HWWe3Di8umG6aBmWmHTblTgu/f10rqFXnyWxjKWwNdjSWkgkwCtxIKnqjSJzvFmPT5yabVIRxZg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^17.0.0"
+      }
+    },
+    "node_modules/stylelint-config-standard": {
+      "version": "40.0.0",
+      "resolved": "https://registry.npmmirror.com/stylelint-config-standard/-/stylelint-config-standard-40.0.0.tgz",
+      "integrity": "sha512-EznGJxOUhtWck2r6dJpbgAdPATIzvpLdK9+i5qPd4Lx70es66TkBPljSg4wN3Qnc6c4h2n+WbUrUynQ3fanjHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "stylelint-config-recommended": "^18.0.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^17.0.0"
+      }
+    },
+    "node_modules/superjson": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmmirror.com/superjson/-/superjson-2.2.6.tgz",
+      "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==",
+      "license": "MIT",
+      "dependencies": {
+        "copy-anything": "^4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-10.2.2.tgz",
+      "integrity": "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/supports-hyperlinks": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/supports-hyperlinks/-/supports-hyperlinks-4.5.0.tgz",
+      "integrity": "sha512-ZW2OvfeCXrNTbLakPUzjQG922EeGCOteFSVoek5DKStTh898wf7zgtuFlzQN8HfZCxC3Eh02yJVrRW51hADf+w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^5.0.1",
+        "supports-color": "^10.2.2"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-hyperlinks?sponsor=1"
+      }
+    },
+    "node_modules/svg-tags": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/svg-tags/-/svg-tags-1.0.0.tgz",
+      "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
+      "dev": true
+    },
+    "node_modules/table": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmmirror.com/table/-/table-6.9.0.tgz",
+      "integrity": "sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "ajv": "^8.0.1",
+        "lodash.truncate": "^4.4.2",
+        "slice-ansi": "^4.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/table/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/table/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/table/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tinybench": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmmirror.com/tinybench/-/tinybench-6.2.0.tgz",
+      "integrity": "sha512-78U2TlB2CnVenajOFzf3BKSm0J6oz5L0NV7g32LCPccvYc0lbWvys4d3uUUCS2B1N8PAf2+aekR8i1KbC3HO7Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/tinyexec": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmmirror.com/tinyexec/-/tinyexec-1.3.1.tgz",
+      "integrity": "sha512-GCvB3aoys96IuDFBMcTB46JOR6mdMtAToqwiW8JlWhsoh1mhHi/xn9ss/Dg7N555GiJyEt2qzoG/NHCwM6h1EA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "license": "MIT"
+    },
+    "node_modules/undici-types": {
+      "version": "8.9.0",
+      "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-8.9.0.tgz",
+      "integrity": "sha512-KTDyRTYX8sWmKXAikPHHSyc63CRPETMctyjKFupcC6OBLXT3xsN0e9aF7m+mIXutFWpUXuedtowG7iLOzp0kQg==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/unicorn-magic": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmmirror.com/unicorn-magic/-/unicorn-magic-0.4.1.tgz",
+      "integrity": "sha512-lzlXPoVB0Uy/FvTaUgX39RbixYiSKoc3JSoSf01+0c2B6FR3qdYIPN7Qjo/AV7n6sqLCk0509cT3LRj1oSZ1+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vite": {
+      "version": "7.3.6",
+      "resolved": "https://registry.npmmirror.com/vite/-/vite-7.3.6.tgz",
+      "integrity": "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==",
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "lightningcss": "^1.21.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitest": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/vitest/-/vitest-5.0.2.tgz",
+      "integrity": "sha512-7MQrx9pDv5aHiUcovIb/70Ys3tgtkUVgCtledvKdCmEO+/1Dicq5ZqoSxOW034m03oqC+oHOKui2dM6qtMLoJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/chai": "^5.2.2",
+        "@vitest/mocker": "5.0.2",
+        "chai": "^6.2.2",
+        "es-module-lexer": "^2.3.2",
+        "expect-type": "^1.4.0",
+        "magic-string": "^1.2.3",
+        "obug": "^2.1.4",
+        "picomatch": "^4.0.7",
+        "std-env": "^4.2.0",
+        "tinybench": "^6.1.4",
+        "tinyexec": "^1.3.0",
+        "tinyglobby": "^0.2.17",
+        "why-is-node-running": "^3.2.1"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^22.12.0 || ^24.0.0 || >=26.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "5.0.2",
+        "@vitest/browser-preview": "5.0.2",
+        "@vitest/browser-webdriverio": "^5.0.0-beta.5 || >=5.0.0",
+        "@vitest/coverage-istanbul": "5.0.2",
+        "@vitest/coverage-v8": "5.0.2",
+        "@vitest/ui": "5.0.2",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "vite": "^6.4.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/coverage-istanbul": {
+          "optional": true
+        },
+        "@vitest/coverage-v8": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "vite": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/vitest/node_modules/magic-string": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-1.4.2.tgz",
+      "integrity": "sha512-vG+rjFRj1PqdIBozIxAGMjPlOhaVe+GXpbttY/iSK7rGcJRMlwNJO7dcUwmUqkymsFLJiNGI06t4D7Fr7yRC9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.6.0"
+      }
+    },
+    "node_modules/vue": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.5.41.tgz",
+      "integrity": "sha512-2laE0p+aK+/AOPG/XL/WepOs/GlK755LJ1XECi9kDUrz1FKNw8rb2Xzlw9JS1rqEV55nb0ttsKxVlTCcd+R5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.41",
+        "@vue/compiler-sfc": "3.5.41",
+        "@vue/runtime-dom": "3.5.41",
+        "@vue/server-renderer": "3.5.41",
+        "@vue/shared": "3.5.41"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-component-type-helpers": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmmirror.com/vue-component-type-helpers/-/vue-component-type-helpers-3.3.11.tgz",
+      "integrity": "sha512-LwcxzeliO9fkQcpJG0PoX8X5kmAhKmH9wkpDLxNabwzkQ9Zeib2YVHwFV4pcWmMLfXVfjr/dSV+DaJ3cIPgSNA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmmirror.com/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/why-is-node-running": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmmirror.com/why-is-node-running/-/why-is-node-running-3.2.2.tgz",
+      "integrity": "sha512-NKUzAelcoCXhXL4dJzKIwXeR8iEVqsA0Lq6Vnd0UXvgaKbzVo4ZTHROF2Jidrv+SgxOQ03fMinnNhzZATxOD3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=20.11"
+      }
+    },
+    "node_modules/write-file-atomic": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmmirror.com/write-file-atomic/-/write-file-atomic-7.0.1.tgz",
+      "integrity": "sha512-OTIk8iR8/aCRWBqvxrzxR0hgxWpnYBblY1S5hDWBQfk/VFmJwzmJgQFN3WsoUKHISv2eAwe+PpbUzyL1CKTLXg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.22.0",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.22.0.tgz",
+      "integrity": "sha512-Ydggc987+RO0AnWtZ/7Wq9FtNvcrL1b/RO0ud9mWjUPgDrsAAwQSF51sm2hm1XofbU/4jkpGEsLFsZZxU+1DOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/ui/package.json b/ui/package.json
index 8bfc307..c72f961 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -8,7 +8,14 @@
     "build": "vite build",
     "test": "vitest run",
     "test:watch": "vitest",
-    "preview": "vite preview --host 127.0.0.1 --port 3000"
+    "preview": "vite preview --host 127.0.0.1 --port 3000",
+    "audit": "node scripts/audit-css.mjs src --ignore tokens.css",
+    "audit:json": "node scripts/audit-css.mjs src --ignore tokens.css --json",
+    "shots": "node scripts/capture.mjs http://127.0.0.1:3000 shots --widths 375,768,1440 --name shot",
+    "lint:css": "stylelint \"src/components/ui/**/*.vue\" \"src/components/layout/**/*.vue\"",
+    "lint:css:all": "stylelint \"src/**/*.{css,vue}\"",
+    "check:contrast": "node scripts/check-contrast.mjs",
+    "verify": "npm run lint:css && npm run audit && npm run check:contrast && npm test && npm run build"
   },
   "dependencies": {
     "@vitejs/plugin-vue": "^6.0.0",
@@ -22,6 +29,9 @@
   "devDependencies": {
     "@vue/test-utils": "^2.5.1",
     "happy-dom": "^20.14.5",
+    "postcss-html": "^2.0.0",
+    "stylelint": "^17.15.0",
+    "stylelint-config-standard": "^40.0.0",
     "vitest": "^5.0.2"
   }
 }
diff --git a/ui/preview/active-tasks.html b/ui/preview/active-tasks.html
new file mode 100644
index 0000000..ae21267
--- /dev/null
+++ b/ui/preview/active-tasks.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>ActiveTaskStrip · 1:1</title>
+    <style>
+      /* 只挂活跃任务条本身，不套整个应用 —— 这样可以用 --scale 3 把它放大三倍看细节。
+         整屏夹具（states.html）做不到：放大整屏会超出图片尺寸上限。 */
+      body { margin: 0; padding: 20px; background: var(--c-bg-subtle); }
+      #app { width: 700px; }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/preview/active-tasks.js"></script>
+  </body>
+</html>
diff --git a/ui/preview/active-tasks.js b/ui/preview/active-tasks.js
new file mode 100644
index 0000000..6eb3cfc
--- /dev/null
+++ b/ui/preview/active-tasks.js
@@ -0,0 +1,55 @@
+// ActiveTaskStrip 的 1:1 放大夹具。
+//
+// 为什么单独建这一个：这个组件在外层 <nav> 上没有 v-if 之外的任何依赖，
+// 可以脱离整个应用单独挂载，于是能用 capture.mjs 的 --scale 3 放三倍看点击区与间距。
+// 整屏夹具做不到这件事（1440×900 放三倍会超出图片尺寸上限）。
+//
+// 挂两遍：一遍是四个真实任务（覆盖 running / queued / cancelling 与超长标题），
+// 一遍是空数组 —— 用来确认「没有任务时整条不渲染」不是靠猜测。
+//
+// 用法：
+//   node scripts/capture.mjs http://127.0.0.1:3000/preview/active-tasks.html tmp/at --widths 740 --height 260 --scale 3 --budget 5000 --name tasks
+import { createApp, h } from 'vue'
+
+import '/src/styles/tokens.css'
+import '/src/styles/main.css'
+import ActiveTaskStrip from '/src/components/ActiveTaskStrip.vue'
+
+const CHAT = {
+  projectId: null,
+  chatOnly: true,
+  repo: '',
+  provider: 'github',
+  branch: '',
+  baseBranch: '',
+  model: 'deepseek-flash',
+  effort: 'default',
+  createdAt: 1,
+  updatedAt: 1,
+  draftContent: '',
+  messages: [],
+  changedFiles: [],
+}
+
+const TASKS = [
+  { ...CHAT, id: 't-run1', title: '实现并验证 FastAPI Task API', repoFullName: 'example/api', status: 'running', runId: 'r1' },
+  { ...CHAT, id: 't-run2', title: '重构首页 Hero 区', repoFullName: 'example/site', status: 'queued', runId: 'r2' },
+  { ...CHAT, id: 't-run3', title: '把配色收敛到 token', repoFullName: 'example/web', status: 'cancelling', runId: 'r3' },
+  // 刻意不给 runId：thread.status 说在跑，但本地没有 run → 取消键不渲染。
+  { ...CHAT, id: 't-run4', title: '一个非常长的任务标题用来验证省略号到底有没有生效', repoFullName: 'example/long', status: 'running', runId: null },
+]
+
+function Row({ label, tasks, activeId }) {
+  return h('section', { style: 'margin-bottom:22px' }, [
+    h('p', { style: 'margin:0 0 6px;font-size:11px;letter-spacing:.06em;color:var(--c-text-muted)' }, label),
+    h(ActiveTaskStrip, { tasks, activeId }),
+  ])
+}
+
+createApp({
+  render: () =>
+    h('div', [
+      h(Row, { label: '① 四个任务 · 三种状态 · 第二个不选中', tasks: TASKS, activeId: 't-run2' }),
+      h(Row, { label: '② 空数组 —— 整条应当不渲染（下面什么都不该出现）', tasks: [], activeId: null }),
+    ]),
+}).mount('#app')
diff --git a/ui/preview/composer-footer.html b/ui/preview/composer-footer.html
new file mode 100644
index 0000000..0b95a86
--- /dev/null
+++ b/ui/preview/composer-footer.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>ChatComposer 底栏 · 只读仓库展示</title>
+    <style>
+      body { margin: 0; padding: 16px; background: var(--c-bg-subtle); font-family: system-ui, sans-serif; }
+      h2 { margin: 0 0 6px; font-size: 13px; }
+      .case { margin-bottom: 18px; }
+      .case p { margin: 0 0 6px; color: var(--c-text-muted); font-size: 11px; }
+      /* 单独挂 ChatComposer：它本身是 <footer class="composer">，需要父级给宽度 */
+      .host { width: 620px; }
+      .host .composer { width: 100%; }
+    </style>
+  </head>
+  <body>
+    <div class="case">
+      <h2>① 有仓库（长名，会触发 ellipsis）</h2>
+      <p>期望：只有模型选择器有边框；「仓库 GitHub …」是纯文字，不该看起来能点。</p>
+      <div class="host" id="case-long"></div>
+    </div>
+    <div class="case">
+      <h2>② 有仓库（短名）</h2>
+      <div class="host" id="case-short"></div>
+    </div>
+    <div class="case">
+      <h2>③ 没有仓库（未新建项目）</h2>
+      <div class="host" id="case-none"></div>
+    </div>
+    <div class="case">
+      <h2>④ 普通聊天（chatOnly，不显示仓库那一组）</h2>
+      <div class="host" id="case-chat"></div>
+    </div>
+    <script type="module" src="/preview/composer-footer.js"></script>
+  </body>
+</html>
diff --git a/ui/preview/composer-footer.js b/ui/preview/composer-footer.js
new file mode 100644
index 0000000..4f50e3d
--- /dev/null
+++ b/ui/preview/composer-footer.js
@@ -0,0 +1,42 @@
+import { createApp, h, ref } from 'vue'
+
+import ChatComposer from '../src/components/ChatComposer.vue'
+import '../src/styles/tokens.css'
+import '../src/styles/main.css'
+
+/*
+ * 只用于开发期检视：把 ChatComposer 单独挂出来，1:1 看底栏。
+ *
+ * 为什么需要它：底栏里「模型选择器」和「仓库」曾经是同一个形态（1px 边框 +
+ * radius-sm + --c-surface 底 + 30px 高），一个能点一个点不动。整屏截图里这一行
+ * 只有几十像素高，看不清两者到底像不像；这个夹具给了 620px 宽的宿主和 4 种数据，
+ * 配合 capture.mjs --scale 2 就能把底栏放大到能直接判断。
+ */
+const CASES = [
+  { id: 'case-long', repo: 'Guo-Yixin/test-coding-repo-with-a-very-long-name' },
+  { id: 'case-short', repo: 'example/app' },
+  { id: 'case-none', repo: '' },
+  { id: 'case-chat', repo: '', chatOnly: true },
+]
+
+for (const item of CASES) {
+  const draft = ref('')
+  const model = ref('deepseek-flash')
+  createApp({
+    render: () =>
+      h(ChatComposer, {
+        draft: draft.value,
+        model: model.value,
+        models: [
+          { id: 'deepseek-flash', label: 'deepseek-flash' },
+          { id: 'deepseek-v4-pro', label: 'deepseek-v4-pro' },
+        ],
+        effort: 'default',
+        repo: item.repo,
+        provider: 'github',
+        chatOnly: Boolean(item.chatOnly),
+        'onUpdate:draft': (v) => (draft.value = v),
+        'onUpdate:model': (v) => (model.value = v),
+      }),
+  }).mount(`#${item.id}`)
+}
diff --git a/ui/preview/composer-frame.html b/ui/preview/composer-frame.html
new file mode 100644
index 0000000..898e82a
--- /dev/null
+++ b/ui/preview/composer-frame.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>ChatComposer 单组件视口</title>
+    <style>
+      /* 底栏本身没有宽度约束，这里给它一个能看到断点行为的画布。 */
+      body { margin: 0; padding: 12px; background: var(--c-bg); font-family: Inter, "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/preview/composer-frame.js"></script>
+  </body>
+</html>
diff --git a/ui/preview/composer-frame.js b/ui/preview/composer-frame.js
new file mode 100644
index 0000000..aef478d
--- /dev/null
+++ b/ui/preview/composer-frame.js
@@ -0,0 +1,27 @@
+import { createApp, h, ref } from 'vue'
+
+import ChatComposer from '../src/components/ChatComposer.vue'
+import '../src/styles/tokens.css'
+import '../src/styles/main.css'
+
+// 只用于开发期检视：把 ChatComposer 单独挂到一个干净的 iframe 视口里，
+// 这样 media query 会按 iframe 的宽度生效，从而能截到窄屏下的底栏排布。
+const draft = ref('')
+const model = ref('deepseek-flash')
+
+createApp({
+  render: () =>
+    h(ChatComposer, {
+      draft: draft.value,
+      model: model.value,
+      models: [
+        { id: 'deepseek-flash', label: 'deepseek-flash' },
+        { id: 'deepseek-v4-pro', label: 'deepseek-v4-pro' },
+      ],
+      effort: 'default',
+      repo: 'Guo-Yixin/test-coding-repo',
+      provider: 'github',
+      'onUpdate:draft': (v) => (draft.value = v),
+      'onUpdate:model': (v) => (model.value = v),
+    }),
+}).mount('#app')
diff --git a/ui/preview/composer.html b/ui/preview/composer.html
new file mode 100644
index 0000000..0064b1f
--- /dev/null
+++ b/ui/preview/composer.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>ChatComposer 各断点排布</title>
+    <style>
+      /* media query 认的是视口宽度，所以这里用 iframe 造出几个真实的窄视口。 */
+      body {
+        margin: 0;
+        padding: 16px;
+        color: #1c2321;
+        background: #ffffff;
+        font-family: Inter, "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
+      }
+      h1 { margin: 0 0 14px; font-size: 15px; color: #5a6561; font-weight: 600; }
+      .row { display: flex; gap: 14px; align-items: flex-start; }
+      .cell { flex: 0 0 auto; }
+      .cap { margin-bottom: 6px; font-size: 12px; font-weight: 600; color: #5a6561; }
+      iframe { display: block; border: 1px solid #e4e7e6; border-radius: 8px; }
+    </style>
+  </head>
+  <body>
+    <h1>ChatComposer 在各断点下的底栏排布（iframe 宽度 = 视口宽度）</h1>
+    <div class="row">
+      <div class="cell">
+        <div class="cap">375px</div>
+        <iframe src="/preview/composer-frame.html" width="375" height="230"></iframe>
+      </div>
+      <div class="cell">
+        <div class="cap">560px</div>
+        <iframe src="/preview/composer-frame.html" width="560" height="230"></iframe>
+      </div>
+      <div class="cell">
+        <div class="cap">720px</div>
+        <iframe src="/preview/composer-frame.html" width="720" height="230"></iframe>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/ui/preview/dialogs.html b/ui/preview/dialogs.html
new file mode 100644
index 0000000..2365b65
--- /dev/null
+++ b/ui/preview/dialogs.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>弹窗状态预览</title>
+    <style>
+      /* 预览专用：把 fixed 遮罩改成流式排布，以便一张截图同时看到多个弹窗形态。
+         用 body 前缀提高特异性，才压得住后加载的 main.css。 */
+      body { margin: 0; background: var(--c-bg-subtle); }
+      body .grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 20px; padding: 20px; }
+      body .dialog-backdrop { position: static; inset: auto; padding: 0; background: transparent; backdrop-filter: none; }
+      body .surface-dialog { width: 100%; }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/preview/dialogs.js"></script>
+  </body>
+</html>
diff --git a/ui/preview/dialogs.js b/ui/preview/dialogs.js
new file mode 100644
index 0000000..d2aa53c
--- /dev/null
+++ b/ui/preview/dialogs.js
@@ -0,0 +1,25 @@
+// 状态预览夹具：在同一页里挂载组件的各个状态/形态，用 capture.mjs 一张截图看全。
+// 用法：node scripts/capture.mjs http://127.0.0.1:3000/preview/dialogs.html shots --widths 1560 --height 700 --name dialogs
+import { createApp, h } from 'vue'
+
+import '/src/styles/tokens.css'
+import '/src/styles/main.css'
+import CreateProjectDialog from '/src/components/CreateProjectDialog.vue'
+import ConfirmProjectDeleteDialog from '/src/components/ConfirmProjectDeleteDialog.vue'
+
+const project = {
+  id: 'project-1',
+  name: '产品官网重构',
+  provider: 'github',
+  repo: 'https://github.com/example/app.git',
+  repoFullName: 'example/app',
+  conversations: [{ id: 't1' }, { id: 't2' }, { id: 't3' }],
+}
+
+createApp({
+  render: () => h('div', { class: 'grid' }, [
+    h(CreateProjectDialog),                        // 新建：空态
+    h(CreateProjectDialog, { project }),           // 重命名：已有仓库绑定
+    h(ConfirmProjectDeleteDialog, { project }),    // 删除：确认按钮禁用态
+  ]),
+}).mount('#app')
diff --git a/ui/preview/edges.html b/ui/preview/edges.html
new file mode 100644
index 0000000..8294b9d
--- /dev/null
+++ b/ui/preview/edges.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>边界态矩阵预览</title>
+    <style>
+      /* 预览专用：把整屏应用塞进固定尺寸的盒子里逐格展示，并对每格跑一次横向溢出探测。
+         探测只问一个问题：「有没有元素跑到 1440 视口之外」。有 → 真实用户会看到内容被切掉，
+         或者整页出现横向滚动条。 .box 是 overflow: hidden 的，跑出去的部分就是会被切掉的部分。 */
+      body { margin: 0; padding: 16px; background: #e9ece9; font: 13px/1.5 system-ui, sans-serif; }
+      :root { --box-w: 1440px; --box-h: 900px; }
+      .sheet { display: flex; flex-direction: column; gap: 20px; }
+      .cell { width: var(--box-w); }
+      .cell > h3 { margin: 0 0 4px; font-size: 14px; color: #222; }
+      .cell > .note { margin: 0 0 6px; font-size: 12px; color: #666; }
+      .box { width: var(--box-w); height: var(--box-h); overflow: hidden; border: 1px solid #c9d0cb; background: #fff; }
+      .panel { width: 1440px; height: 900px; }
+      body .app-shell { height: 900px; }
+
+      .report { margin: 6px 0 0; width: 100%; border-collapse: collapse; font: 12px/1.5 ui-monospace, Consolas, monospace; }
+      .report th, .report td { border: 1px solid #cdd5d0; padding: 3px 7px; text-align: left; vertical-align: top; }
+      .report th { background: #dfe5e1; font-weight: 700; }
+      .report tr.ok td { background: #eef7f1; }
+      .report tr.bad td { background: #fdeee9; }
+      .report .verdict { font-weight: 700; white-space: nowrap; }
+      .report tr.bad .verdict { color: #a33; }
+      .report tr.ok .verdict { color: #1f7667; }
+      .summary { margin: 4px 0 0; font: 700 12px/1.6 ui-monospace, Consolas, monospace; }
+    </style>
+  </head>
+  <body>
+    <div class="sheet" id="sheet"></div>
+    <script type="module" src="/preview/edges.js"></script>
+  </body>
+</html>
diff --git a/ui/preview/edges.js b/ui/preview/edges.js
new file mode 100644
index 0000000..41dfd90
--- /dev/null
+++ b/ui/preview/edges.js
@@ -0,0 +1,410 @@
+// 边界态矩阵预览 + 横向溢出自动探测。
+//
+// 为什么必须有这张夹具：DESIGN.md §6 的「边界态」那一列，全都是**正常数据下不会出现**的输入 ——
+// 超长标题、超长仓库名、200 字符宽的代码行、300 字符不换行的 URL。手工点不出来，只能种数据渲染。
+//
+// 它比状态矩阵多做一件事：**每格跑一次横向溢出探测**，把「有没有元素跑到 1440 视口之外」
+// 变成一句可读的结论放进截图里。因为「内容被切掉」和「整页出现横向滚动条」这两种症状，
+// 在缩小的拼版图上是看不出来的 —— 必须量。
+//
+// 用法：
+//   node scripts/capture.mjs http://127.0.0.1:3000/preview/edges.html tmp/ed --widths 1500 --height 6500 --budget 9000 --name edges
+//   node scripts/capture.mjs "http://127.0.0.1:3000/preview/edges.html?cell=0" tmp/ed --widths 1500 --height 1150 --budget 6000 --name e0
+//
+// 与 states.js 一样：每格独立 Pinia，bootstrap / refreshActiveRuns 换成空实现，否则会真打接口。
+import { createApp, nextTick } from 'vue'
+import { createPinia, setActivePinia } from 'pinia'
+
+import '/src/styles/tokens.css'
+import '/src/styles/main.css'
+import AgentWorkspace from '/src/components/AgentWorkspace.vue'
+import { useAgentStore } from '/src/stores/agent'
+
+const CHAT_THREAD = {
+  id: 't-chat', projectId: null, chatOnly: true, title: '会话标题',
+  repo: '', repoFullName: '', provider: 'github', branch: '', baseBranch: '',
+  model: 'deepseek-flash', effort: 'default', status: 'idle',
+  createdAt: 1, updatedAt: 1, draftContent: '', messages: [], changedFiles: [],
+}
+
+const msg = (id, author, chunks) => ({ id, author, timestamp: 1, chunks })
+
+const LOADING = [
+  { title: '① 极长消息 · 不换行 URL / 超宽代码行 / 超宽表格', note: '三个都塞进同一条助手消息里，一次看全。期望：气泡内自己横向滚动，视口不被撑破。' },
+  { title: '② 超长标题 · 无空格的 120 字符', note: '标题里没有空格，浏览器没有任何可断行的地方。期望：省略号，且不撑破 Header。' },
+  { title: '③ 侧栏 · 超长项目名与会话名', note: '60 字项目名 + 80 字会话标题，都不含空格。' },
+  { title: '④ 运行轨迹 · 超长日志行', note: 'todo 文本与 event detail 都是不含空格的超长串。' },
+  { title: '⑤ 弹窗 · 超长输入', note: '仓库地址没有 maxlength，塞一个 260 字符的 URL；项目名用满 maxlength=80。' },
+  { title: '⑥ 加载失败 · 侧栏与主区', note: 'projects 加载抛错、threads 加载抛错。这格不是几何问题，是「有没有出路」的问题。' },
+]
+
+// 不含空格的长串：不给浏览器任何断行机会，能用来看截断/滚动是否真的生效。
+const LONG_WORD = 'SuperCalifragilisticExpialidociousAndThenSomeMoreLettersToMakeItDefinitelyTooLong'
+const LONG_PATH = 'src/components/deeply/nested/directory/structure/with/a/very/long/file/name/that/keeps/going/and/going/and/going/and/going/and/going/and/going/Component.vue'
+const LONG_URL = 'https://github.com/' + 'very-long-organization-name/'.repeat(4) + 'repository-with-an-absurdly-long-name/blob/main/' + LONG_PATH
+const WIDE_CODE = `const result = await audit.run('${LONG_PATH}', { ignore: ['tokens.css'], report: 'json' }) // ${LONG_WORD}`
+const WIDE_TABLE_HEAD = '| 区域 | 空态 | 加载态 | 正常态 | 错误态 | 边界态 |'
+const WIDE_TABLE_DIV = '|---|---|---|---|---|---|'
+
+const LONG_URL_MESSAGE = {
+  kind: 'text',
+  text: [
+    '这是一个不换行的超长 URL，用来验横向溢出：',
+    LONG_URL,
+    '',
+    '下面是一个 200 字符宽的代码行：',
+    '```js',
+    WIDE_CODE,
+    '```',
+    '',
+    '下面是一个宽表格：',
+    WIDE_TABLE_HEAD,
+    WIDE_TABLE_DIV,
+    '| 侧栏 · 项目列表 | ✅ 无项目引导 | ⬜ 无骨架屏 | ✅ 分组树 | ⬜ 加载失败无重试 | ✅ 展开显示其余 N 个 |',
+    '| 主区 · 内容 | ✅ Hero 三变体 | ✅ spinner | ✅ 消息列表 | ✅ 错误横幅 | ⬜ 极长消息溢出 |',
+  ].join('\n'),
+}
+
+const LONG_TITLE = '这是一个完全不包含任何空格的一百二十个字符长的会话标题用来验证省略号与头部布局在极端输入下到底会发生什么情况请仔细观察右侧的标题区域是否被撑破或者把状态徽章挤走'
+
+const EDGES = [
+  {
+    title: LOADING[0].title, note: LOADING[0].note,
+    state: { currentThread: CHAT_THREAD, messages: [msg('m1', 'agent', [LONG_URL_MESSAGE])] },
+  },
+  {
+    title: LOADING[1].title, note: LOADING[1].note,
+    state: { currentThread: { ...CHAT_THREAD, title: LONG_TITLE }, messages: [] },
+  },
+  {
+    title: LOADING[2].title, note: LOADING[2].note,
+    state: {
+      currentThread: null,
+      projects: [{
+        id: 'p1',
+        name: LONG_WORD + ' ' + LONG_WORD,
+        provider: 'github',
+        repo: 'https://github.com/example/app.git',
+        repoFullName: LONG_WORD + '/' + LONG_WORD,
+        legacy: false,
+        conversations: [
+          { id: 't1', title: LONG_TITLE, status: 'idle', updatedAt: 5 },
+          { id: 't2', title: LONG_WORD, status: 'running', updatedAt: 4 },
+          { id: 't3', title: '短标题', status: 'idle', updatedAt: 3 },
+        ],
+      }],
+    },
+  },
+  {
+    title: LOADING[3].title, note: LOADING[3].note,
+    state: {
+      currentThread: CHAT_THREAD,
+      messages: [msg('m1', 'agent', [
+        { kind: 'todo', todos: [
+          { content: '把 ' + LONG_PATH + ' 里的字面量收敛到 token', status: 'completed' },
+          { content: LONG_WORD + LONG_WORD, status: 'in_progress' },
+          { content: '重跑 audit 并核对分数', status: 'pending' },
+        ] },
+        { kind: 'run_activity', activity: { run_id: 'r1', status: 'completed', started_at: new Date(Date.now() - 74000).toISOString(), finished_at: new Date().toISOString(), error: '' } },
+      ])],
+    },
+  },
+  {
+    // 弹窗不是挂在 AgentWorkspace 里的，这格单独处理（见下面 mountDialog）。
+    title: LOADING[4].title, note: LOADING[4].note, dialog: true,
+    state: {},
+  },
+  {
+    title: LOADING[5].title, note: LOADING[5].note,
+    state: {
+      currentThread: null,
+      projects: [],
+      // 关键：`projectsError` 有值才走「没读到」那一屏；没有它就等于「你确实没有项目」。
+      projectsError: '加载项目列表失败：HTTP 503',
+      error: '加载项目列表失败：HTTP 503',
+    },
+  },
+  {
+    title: '⑦ 侧栏加载中 · 三种「空」的第三种',
+    note: 'projects 同样为空，但这次是「还在读」。期望：spinner + 正在加载项目…，而不是「创建第一个项目」。',
+    state: { currentThread: null, projects: [], projectsLoading: true, loading: true },
+  },
+]
+
+// —— 探测 ———————————————————————————————————————————————————————————————
+//
+// 只问一个问题：有没有元素的边界跑到 .panel 的 1440×900 之外（横向）。
+// 纵向不算：主区本来就是可滚动的，内容比 900 高是正常的。
+//
+// 两条必须的排除规则，否则报告里全是假阳性：
+//   1. **被祖先裁剪的不算**。`pre { overflow-x: auto }` 里的 `<code>` 天然比视口宽，
+//      但它是被 `pre` 裁掉并可滚动的 —— 用户看不到任何越界。只有一路上到 panel
+//      都没有 `overflow-x: visible` 以外的祖先时，才算真的漏出来。
+//   2. **只保留最内层**。一个子元素跑出去，它的所有祖先也会被判违规。
+function clippedByAncestor(el, panel) {
+  let node = el.parentElement
+  while (node && node !== panel) {
+    if (getComputedStyle(node).overflowX !== 'visible') return true
+    node = node.parentElement
+  }
+  return false
+}
+
+function probe(panel) {
+  const hostRect = panel.getBoundingClientRect()
+  const scale = hostRect.width / 1440 || 1
+  const all = []
+  for (const el of panel.querySelectorAll('*')) {
+    const r = el.getBoundingClientRect()
+    if (r.width === 0 && r.height === 0) continue
+    const overRight = (r.right - hostRect.right) / scale
+    const overLeft = (hostRect.left - r.left) / scale
+    if (overRight <= 1 && overLeft <= 1) continue
+    if (clippedByAncestor(el, panel)) continue
+    all.push({ el, overRight, overLeft })
+  }
+  const inner = all.filter(({ el }) => !all.some((other) => other.el !== el && el.contains(other.el)))
+  return inner.map(({ el, overRight, overLeft }) => ({
+    tag: el.tagName.toLowerCase(),
+    cls: typeof el.className === 'string' && el.className ? '.' + el.className.trim().split(/\s+/).slice(0, 2).join('.') : '',
+    text: (el.textContent || '').trim().slice(0, 34),
+    over: Math.max(overRight, overLeft),
+    side: overRight > overLeft ? '右' : '左',
+  }))
+}
+
+// 第二条判据：**文字越过了自己所在的那张卡片**。
+//
+// 第一条判据（越界视口）会被外面的滚动容器兜住 —— 上层的 `overflow: hidden` 一裁，
+// 「越界视口」就不报了，可用户看到的是**一行文字从卡片边框里穿出去、然后在别处被切断**。
+// 所以还要问第二个问题：这段文字有没有跑出它最近的那个「有边框或有底色」的祖先？
+//
+// 只看叶子文本节点，避免整棵树互相包含造成噪声。
+function visualContainer(el, panel) {
+  let node = el.parentElement
+  while (node && node !== panel) {
+    const cs = getComputedStyle(node)
+    const bg = cs.backgroundColor
+    const hasBg = bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent'
+    const bw = ['borderLeftWidth', 'borderRightWidth', 'borderTopWidth', 'borderBottomWidth']
+      .reduce((sum, k) => sum + (parseFloat(cs[k]) || 0), 0)
+    if (hasBg || bw > 0) return { node, cs }
+    node = node.parentElement
+  }
+  return null
+}
+
+function escapesContainer(panel) {
+  const hostRect = panel.getBoundingClientRect()
+  const scale = hostRect.width / 1440 || 1
+  const bad = []
+  for (const el of panel.querySelectorAll('*')) {
+    if (el.childElementCount !== 0) continue
+    if (!(el.textContent || '').trim()) continue
+    // <option> 不是被正常排版出来的盒子（它由 select 自己绘制），拿它的 rect 去比必然误报。
+    if (['OPTION', 'OPTGROUP', 'SELECT'].includes(el.tagName)) continue
+    const own = getComputedStyle(el)
+    if (own.position === 'absolute' || own.position === 'fixed') continue
+    const container = visualContainer(el, panel)
+    if (!container) continue
+    const cr = container.node.getBoundingClientRect()
+    const c = container.cs
+    // 容器的 padding box = 边框盒减去四边边框宽度
+    const box = {
+      left: cr.left + (parseFloat(c.borderLeftWidth) || 0),
+      right: cr.right - (parseFloat(c.borderRightWidth) || 0),
+    }
+    const r = el.getBoundingClientRect()
+    const overRight = (r.right - box.right) / scale
+    const overLeft = (box.left - r.left) / scale
+    if (overRight <= 1 && overLeft <= 1) continue
+    bad.push({
+      ok: false,
+      verdict: '文字越过卡片',
+      where: `${el.tagName.toLowerCase()}${typeof el.className === 'string' && el.className ? '.' + el.className.trim().split(/\s+/)[0] : ''} 越出 ${container.node.tagName.toLowerCase()}${typeof container.node.className === 'string' && container.node.className ? '.' + container.node.className.trim().split(/\s+/)[0] : ''}`,
+      detail: `${overRight > overLeft ? '右侧' : '左侧'}越出 ${Math.max(overRight, overLeft).toFixed(0)}px（未换行）· ${(el.textContent || '').trim().slice(0, 24)}`,
+    })
+  }
+  return bad
+}
+
+function describe(v) {
+  return `${v.tag}${v.cls}`
+}
+
+function renderReport(cell, violations, extra = []) {
+  const table = document.createElement('table')
+  table.className = 'report'
+  table.innerHTML = '<thead><tr><th>判定</th><th>元素</th><th>越界</th><th>内容开头</th></tr></thead>'
+  const tbody = document.createElement('tbody')
+  for (const v of violations) {
+    const tr = document.createElement('tr')
+    tr.className = 'bad'
+    tr.innerHTML = `<td class="verdict">✗ 越界 ${v.over.toFixed(0)}px（${v.side}）</td><td>${describe(v)}</td><td>${v.over.toFixed(0)}px</td><td>${v.text.replace(/</g, '&lt;')}</td>`
+    tbody.appendChild(tr)
+  }
+  for (const e of extra) {
+    const tr = document.createElement('tr')
+    tr.className = e.ok ? 'ok' : 'bad'
+    tr.innerHTML = `<td class="verdict">${e.ok ? '✓' : '✗'} ${e.verdict}</td><td>${e.where}</td><td>—</td><td>${e.detail}</td>`
+    tbody.appendChild(tr)
+  }
+  if (!violations.length && !extra.length) {
+    const tr = document.createElement('tr')
+    tr.className = 'ok'
+    tr.innerHTML = '<td class="verdict">✓ 没有元素越界</td><td>—</td><td>—</td><td>1440 视口内一切内容都被正确约束</td>'
+    tbody.appendChild(tr)
+  }
+  table.appendChild(tbody)
+  cell.appendChild(table)
+
+  const bad = violations.length + extra.filter((e) => !e.ok).length
+  const line = document.createElement('p')
+  line.className = 'summary'
+  line.textContent = bad ? `本格结论：${bad} 项越界` : '本格结论：无横向越界'
+  cell.appendChild(line)
+}
+
+// —— 额外探针（几何说不清、但必须回答的问题）———————————————————————————————
+function extraProbes(panel) {
+  const out = []
+
+  // 标题是否真的省略号了
+  const h1 = panel.querySelector('.workspace-header h1')
+  if (h1) {
+    const cs = getComputedStyle(h1)
+    const clipped = h1.scrollWidth > h1.clientWidth + 1
+    out.push({
+      ok: cs.textOverflow === 'ellipsis' || !clipped,
+      verdict: '超长标题',
+      where: '.workspace-header h1',
+      detail: `text-overflow=${cs.textOverflow} · overflow=${cs.overflowX} · 被裁=${clipped ? '是' : '否'}`,
+    })
+  }
+
+  // 侧栏项目名 / 会话名
+  for (const [sel, label] of [['.project-heading-main strong', '侧栏项目名'], ['.thread-title', '侧栏会话名'], ['.project-heading-main small', '侧栏仓库名']]) {
+    const el = panel.querySelector(sel)
+    if (!el) continue
+    const cs = getComputedStyle(el)
+    const clipped = el.scrollWidth > el.clientWidth + 1
+    out.push({
+      ok: cs.textOverflow === 'ellipsis' || !clipped,
+      verdict: label,
+      where: sel,
+      detail: `text-overflow=${cs.textOverflow} · display=${cs.display} · overflow=${cs.overflowX} · 被裁=${clipped ? '是' : '否'}`,
+    })
+  }
+
+  // 代码块是不是在气泡内自己滚
+  const pre = panel.querySelector('.message-body pre, pre')
+  if (pre) {
+    const cs = getComputedStyle(pre)
+    out.push({
+      ok: cs.overflowX === 'auto' || cs.overflowX === 'scroll',
+      verdict: '代码块横向滚动',
+      where: 'pre',
+      detail: `overflow-x=${cs.overflowX} · scrollWidth=${pre.scrollWidth} / clientWidth=${pre.clientWidth}`,
+    })
+  }
+  return out
+}
+
+// 全应用范围的结构性检查：**写了 text-overflow: ellipsis 却用不到的**。
+//
+// `text-overflow` 只对「块级/行内块容器及其行内内容」生效。一旦元素是 flex / grid 容器，
+// 它的文本会变成匿名 flex/grid 项，省略号**永远不会出现** —— 外观上表现为
+// 「文字被硬生生切断、没有任何提示」。这类错误在代码里看不出来（三件套写得很齐全），
+// 只有在长内容真的渲染出来时才暴露，所以值得单独做成一条静态判据。
+function ellipsisOnFlexContainer(panel) {
+  const bad = []
+  for (const el of panel.querySelectorAll('*')) {
+    const cs = getComputedStyle(el)
+    if (cs.textOverflow !== 'ellipsis') continue
+    if (!['flex', 'inline-flex', 'grid', 'inline-grid'].includes(cs.display)) continue
+    if (el.scrollWidth <= el.clientWidth + 1) continue // 内容没超，暂时看不出问题
+    bad.push({
+      ok: false,
+      verdict: '省略号用不到',
+      where: `${el.tagName.toLowerCase()}${typeof el.className === 'string' && el.className ? '.' + el.className.trim().split(/\s+/)[0] : ''}`,
+      detail: `display=${cs.display} 容器的 text-overflow 不生效 · 被硬切 · ${el.scrollWidth} / ${el.clientWidth}`,
+    })
+  }
+  return bad
+}
+
+// —— 渲染 ———————————————————————————————————————————————————————————————
+const params = new URLSearchParams(location.search)
+const only = params.has('cell') ? Number(params.get('cell')) : null
+const sheet = document.getElementById('sheet')
+
+const CHROME = document.createElement('div')
+const results = []
+
+async function mountWorkspace(cell, panel, state) {
+  const pinia = createPinia()
+  setActivePinia(pinia)
+  const store = useAgentStore()
+  store.$patch({
+    options: { models: [{ id: 'deepseek-flash', label: 'deepseek-flash' }], providers: [{ id: 'github', label: 'GitHub' }] },
+    selectedModel: 'deepseek-flash',
+    ...state,
+  })
+  store.bootstrap = async () => {}
+  store.refreshActiveRuns = async () => {}
+  const app = createApp(AgentWorkspace)
+  app.use(pinia)
+  app.mount(panel)
+  return app
+}
+
+async function mountDialog(panel) {
+  const { default: CreateProjectDialog } = await import('/src/components/CreateProjectDialog.vue')
+  const app = createApp(CreateProjectDialog, { project: null })
+  app.mount(panel)
+  return app
+}
+
+for (const [index, edge] of EDGES.entries()) {
+  if (only !== null && index !== only) continue
+  const cell = document.createElement('div')
+  cell.className = 'cell'
+  const h3 = document.createElement('h3')
+  h3.textContent = edge.title
+  const note = document.createElement('p')
+  note.className = 'note'
+  note.textContent = edge.note
+  const box = document.createElement('div')
+  box.className = 'box'
+  const panel = document.createElement('div')
+  panel.className = 'panel'
+  box.appendChild(panel)
+  cell.append(h3, note, box)
+  sheet.appendChild(cell)
+
+  if (edge.dialog) {
+    // 弹窗自带 .dialog-backdrop（position: fixed），塞进 1440×900 的盒子里正好等价于一屏。
+    await mountDialog(panel)
+    // 往两个输入框里灌超长内容
+    await nextTick()
+    const nameInput = panel.querySelector('#project-name')
+    const repoInput = panel.querySelector('#project-repo')
+    if (nameInput) nameInput.value = LONG_WORD.repeat(2).slice(0, 80)
+    if (repoInput) repoInput.value = 'https://github.com/' + LONG_WORD + '/' + LONG_WORD + '.git'
+    await nextTick()
+  } else {
+    await mountWorkspace(cell, panel, edge.state)
+    await nextTick()
+  }
+  await nextTick()
+
+  const violations = probe(panel)
+  const extra = [...extraProbes(panel), ...ellipsisOnFlexContainer(panel), ...escapesContainer(panel)]
+  renderReport(cell, violations, extra)
+  results.push({ index, title: edge.title, violations, extra })
+}
+
+globalThis.__EDGE_REPORT__ = results
+document.title = results.some((r) => r.violations.length || r.extra.some((e) => !e.ok))
+  ? `边界态 · ${results.filter((r) => r.violations.length || r.extra.some((e) => !e.ok)).length} 格有越界`
+  : '边界态 · 全部通过'
diff --git a/ui/preview/focus.html b/ui/preview/focus.html
new file mode 100644
index 0000000..785b75d
--- /dev/null
+++ b/ui/preview/focus.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>焦点可见性检查</title>
+    <style>
+      body { margin: 0; padding: 20px; background: #fff; font-family: Inter, "Microsoft YaHei", "PingFang SC", Arial, sans-serif; color: #1c2321; }
+      h1 { margin: 0 0 4px; font-size: 17px; }
+      p { margin: 0 0 16px; color: #5a6561; font-size: 13px; }
+      #cases { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 18px; }
+      .case { padding: 4px; }
+      table { border-collapse: collapse; font-size: 12px; width: 100%; }
+      td { border-bottom: 1px solid #e4e7e6; padding: 5px 8px; vertical-align: top; }
+      td:nth-child(2) { font-family: Consolas, monospace; white-space: nowrap; }
+      tr.bad td { background: #fbefee; }
+      tr.ok td:first-child { color: #2f7d5b; }
+    </style>
+  </head>
+  <body>
+    <h1>焦点可见性检查</h1>
+    <p id="summary">…</p>
+    <div id="cases"></div>
+    <table><tbody id="table"></tbody></table>
+    <script type="module" src="/preview/focus.js"></script>
+  </body>
+</html>
diff --git a/ui/preview/focus.js b/ui/preview/focus.js
new file mode 100644
index 0000000..c825495
--- /dev/null
+++ b/ui/preview/focus.js
@@ -0,0 +1,141 @@
+// 开发期检查：逐个把受影响的控件聚焦，读它的「计算样式」，
+// 把结果渲染成一张表 —— 这样一张截图就能证明焦点环到底有没有出现。
+// 静态截图看不到 :focus-visible，所以必须真的聚焦再读计算值。
+import '../src/styles/tokens.css'
+import '../src/styles/main.css'
+
+/** 每个条目：控件 class、外层包装 HTML（有些规则依赖祖先）、显示名 */
+const CASES = [
+  { name: '.sidebar-toggle', cls: 'sidebar-toggle', html: '<button class="sidebar-toggle">‹</button>' },
+  { name: '.new-button', cls: 'new-button', html: '<button class="new-button"><span class="new-button-icon">+</span>新建项目</button>' },
+  {
+    name: '.thread-delete',
+    cls: 'thread-delete',
+    html: '<div class="thread-item"><span>会话标题</span><button class="thread-delete">×</button></div>',
+  },
+  {
+    name: '.message-copy-button',
+    cls: 'message-copy-button',
+    html: '<div class="message"><div class="message-actions"><button class="message-copy-button">⧉</button><span class="message-copy-feedback">复制</span></div></div>',
+  },
+  {
+    name: '.code-copy-action',
+    cls: 'code-copy-action',
+    html: '<div class="code-window"><header class="code-window-header"><span class="code-window-language">js</span><div class="code-window-actions"><button class="code-window-action code-copy-action">⧉</button></div></header></div>',
+  },
+  {
+    name: '.new-content-button',
+    cls: 'new-content-button',
+    html: '<div style="position:relative;height:60px"><button class="new-content-button"><span>↓</span>有新内容</button></div>',
+  },
+  { name: '.quick-prompt', cls: 'quick-prompt', html: '<button class="quick-prompt">总结这个仓库</button>' },
+  {
+    name: '.rail-session',
+    cls: 'rail-session',
+    html: '<div class="rail"><button class="rail-session">会话</button></div>',
+  },
+  { name: '.repo-field input', cls: 'repo-field', html: '<label class="repo-field"><span>仓库</span><input value="owner/repo" /></label>', pick: 'input' },
+  {
+    name: '.repo-provider-select',
+    cls: 'repo-provider-select',
+    html: '<select class="repo-provider-select"><option>GitHub</option></select>',
+  },
+  {
+    name: '.repo-control-input input',
+    cls: 'repo-control-input',
+    html: '<div class="repo-control-input"><input value="owner/repo" /></div>',
+    pick: 'input',
+  },
+  {
+    name: '.workspace-title-input',
+    cls: 'workspace-title-input',
+    html: '<input class="workspace-title-input" value="会话标题" />',
+  },
+  {
+    name: '.model-picker select',
+    cls: 'model-picker',
+    html: '<div class="model-picker"><select><option>deepseek-flash</option></select></div>',
+    pick: 'select',
+  },
+  { name: '.composer textarea', cls: 'composer', html: '<div class="composer"><textarea>草稿</textarea></div>', pick: 'textarea' },
+  {
+    name: '.project-rename-input',
+    cls: 'project-rename-input',
+    html: '<input class="project-rename-input" value="项目名" />',
+  },
+]
+
+const host = document.getElementById('cases')
+const table = document.getElementById('table')
+const rows = []
+
+for (const c of CASES) {
+  const wrap = document.createElement('div')
+  wrap.className = 'case'
+  wrap.innerHTML = c.html
+  host.append(wrap)
+
+  const el = wrap.querySelector(c.pick || `.${c.cls}`)
+  if (!el) {
+    rows.push({ name: c.name, ok: false, detail: '元素没找到' })
+    continue
+  }
+
+  el.focus()
+  // 注意：getComputedStyle 返回的是实时对象，必须在 blur 之前把值读出来。
+  const cs = getComputedStyle(el)
+  const focused = document.activeElement === el
+  const width = cs.outlineWidth
+  const style = cs.outlineStyle
+  const color = cs.outlineColor
+  const shadow = cs.boxShadow
+
+  const hasOutline = style !== 'none' && parseFloat(width) > 0
+  const hasShadowRing = /rgb/.test(shadow) && shadow !== 'none'
+
+  // 有些控件的焦点环画在祖先容器上（:focus-within 的 box-shadow），
+  // 所以必须趁元素还聚焦时往上找一圈。
+  let ringOwner = ''
+  let ringValue = ''
+  if (!hasOutline && !hasShadowRing) {
+    for (let p = el.parentElement; p && p !== document.body; p = p.parentElement) {
+      const pcs = getComputedStyle(p)
+      if (/rgb/.test(pcs.boxShadow) && pcs.boxShadow !== 'none') {
+        ringOwner = p.className
+        ringValue = pcs.boxShadow
+        break
+      }
+    }
+  }
+  el.blur()
+
+  const hasFocusStyle = hasOutline || hasShadowRing || Boolean(ringOwner)
+
+  rows.push({
+    name: c.name,
+    ok: hasFocusStyle,
+    focusable: focused,
+    detail: hasOutline
+      ? `outline: ${width} ${style} ${color}`
+      : hasShadowRing
+        ? `box-shadow: ${shadow.slice(0, 56)}`
+        : ringOwner
+          ? `容器焦点环 .${ringOwner}: ${ringValue.slice(0, 44)}`
+          : focused
+            ? `没有可见焦点样式（outline: ${style} ${width} / shadow: ${shadow.slice(0, 24)}）`
+            : '元素无法获得焦点 —— 可能是祖先 visibility: hidden',
+  })
+}
+
+table.innerHTML = rows
+  .map(
+    (r) =>
+      `<tr class="${r.ok ? 'ok' : 'bad'}">` +
+      `<td>${r.ok ? '✅' : '❌'}</td>` +
+      `<td>${r.name}</td>` +
+      `<td>${r.detail}</td></tr>`,
+  )
+  .join('')
+
+document.getElementById('summary').textContent =
+  `${rows.filter((r) => r.ok).length} / ${rows.length} 个控件在聚焦时有可见指示`
diff --git a/ui/preview/messages.html b/ui/preview/messages.html
new file mode 100644
index 0000000..e45bda6
--- /dev/null
+++ b/ui/preview/messages.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>消息块状态预览</title>
+    <style>
+      /* 预览专用排布。用 body 前缀提高特异性，才压得住后加载的 main.css。 */
+      body { margin: 0; background: var(--c-bg-subtle); }
+      body .grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); align-items: start; gap: 18px; padding: 18px; }
+      body .cell { border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); padding: 14px; overflow: hidden; }
+      body .cell-label { margin: 0 0 10px; color: var(--c-text-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; }
+      /* 消息本来占满主区宽度，这里收进格子 */
+      body .message { width: 100%; margin-bottom: 0; }
+      body .message-assistant { padding-right: 0; }
+      body .message-user { padding-left: 80px; }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/preview/messages.js"></script>
+  </body>
+</html>
diff --git a/ui/preview/messages.js b/ui/preview/messages.js
new file mode 100644
index 0000000..aaf83b9
--- /dev/null
+++ b/ui/preview/messages.js
@@ -0,0 +1,109 @@
+// 消息块状态预览夹具：把 ChatMessage 能渲染的每一种 chunk kind 与每一种状态铺开。
+//
+// 为什么需要它：proposal / intervention / todo / error 这几种块**只在特定数据下出现**，
+// 现有会话数据里一个都没有，所以既点不出来也截不到。而 ChatMessage.vue 是"块分发中心"——
+// 它按 chunk.kind 分支渲染五个子组件，任何一个子组件的状态都可能没被看过。
+//
+// 用法：
+//   node scripts/capture.mjs http://127.0.0.1:3000/preview/messages.html shots --widths 1560 --height 2400 --budget 8000 --name messages
+import { createApp, h } from 'vue'
+
+import '/src/styles/tokens.css'
+import '/src/styles/main.css'
+import ChatMessage from '/src/components/ChatMessage.vue'
+
+const T = 1756742400000 // 固定时间戳，避免截图随时间变化
+
+function user(text) {
+  return { id: 'u', author: 'user', timestamp: T, chunks: [{ kind: 'text', text }] }
+}
+function agent(chunks) {
+  return { id: 'a', author: 'agent', timestamp: T, chunks }
+}
+
+const LONG_USER = Array.from({ length: 11 }, (_, i) => `第 ${i + 1} 行：这是一条很长的用户消息，用来触发「显示更多」。`).join('\n')
+
+const MARKDOWN = [
+  '## 改造要点',
+  '',
+  '把 `main.css` 里的字面量收敛到 token，**类名一个不动**。',
+  '',
+  '- 字号 19 档 → 7 档',
+  '- 圆角 20 档 → 4 档',
+  '',
+  '```js',
+  "const audit = await run('ui/src', { ignore: ['tokens.css'] })",
+  'console.log(audit.checks.filter((c) => !c.pass))',
+  '```',
+].join('\n')
+
+// 运行中的用例必须用"相对现在"的起点，否则「用时」会算出几百天，看着像 bug 其实是夹具的锅。
+const RUNNING_START = new Date(Date.now() - 74000).toISOString()
+const FAILED_END = new Date(T + 12000).toISOString()
+
+const TODOS = [
+  { content: '读取现有 main.css 并建立字面量分布', status: 'completed' },
+  { content: '把 19 种字号归到 7 档', status: 'completed' },
+  { content: '收敛圆角与近白背景', status: 'in_progress' },
+  { content: '重跑 audit 并核对分数', status: 'pending' },
+]
+
+// 运行轨迹的事件。`kind: 'think'` 是模型推理（会被收进「深度思考」那一层），
+// `other` 是工具/步骤（留在平铺时间线里）。夹具必须给真实事件 ——
+// 传空数组时执行记录永远是「暂无可展示的执行过程」，深度思考那一层根本不会出现。
+const THINK_EVENTS = [
+  { id: 't-1', kind: 'think', title: '先确认圆角到底散在哪些地方 —— 如果本来就只有三四种，收敛的意义不大，得先看分布再决定要不要动。', status: 'completed', detail: {} },
+  { id: 't-2', kind: 'think', title: '19 种字号里多半是同一档的近似值（12.5 / 12.8 / 13），所以应该按频次归一，而不是取平均。', status: 'completed', detail: {} },
+]
+const OTHER_EVENTS = [
+  { id: 'e-1', kind: 'other', title: '读取 ui/src/styles/main.css', status: 'completed', detail: { text: '1313 行 · 规则块 503 · distinct 选择器 408' } },
+  { id: 'e-2', kind: 'other', title: '运行 audit 建立基线', status: 'completed', detail: {} },
+  { id: 'e-3', kind: 'other', title: '替换 42 处颜色字面量', status: 'in_progress', detail: {} },
+]
+const RUN_EVENTS = {
+  'r-done': [...THINK_EVENTS, ...OTHER_EVENTS],
+  'r-run': [...THINK_EVENTS, ...OTHER_EVENTS],
+  'r-fail': [...THINK_EVENTS, ...OTHER_EVENTS],
+}
+
+const CASES = [
+  ['用户消息 · 短', user('把这个页面的圆角统一一下。')],
+  ['用户消息 · 超过 7 行（出现「显示更多」）', user(LONG_USER)],
+  ['助手消息 · Markdown + 代码块', agent([{ kind: 'text', text: MARKDOWN }])],
+  ['执行记录 · 折叠（已完成）', agent([{ kind: 'run_activity', activity: { run_id: 'r-done', status: 'completed', started_at: new Date(T).toISOString(), finished_at: new Date(T + 74000).toISOString() } }])],
+  ['执行记录 · 运行中（默认展开 + 计时）', agent([{ kind: 'run_activity', activity: { run_id: 'r-run', status: 'running', started_at: RUNNING_START, finished_at: null } }])],
+  ['执行记录 · 失败（默认展开）', agent([{ kind: 'run_activity', activity: { run_id: 'r-fail', status: 'failed', started_at: new Date(T).toISOString(), finished_at: FAILED_END, error: '上游超时' } }])],
+  ['执行记录 · 深度思考展开（点名展开，夹具里没有点击，靠挂载后补一次）', agent([{ kind: 'run_activity', activity: { run_id: 'r-run', status: 'running', started_at: RUNNING_START, finished_at: null } }])],
+  ['清单 · 部分完成（4 项）', agent([{ kind: 'todo', todos: TODOS }])],
+  ['清单 · 全部完成', agent([{ kind: 'todo', todos: TODOS.map((t) => ({ ...t, status: 'completed' })) }])],
+  ['方案 · 待确认（三个动作按钮）', agent([{ kind: 'proposal', status: 'pending', plan_id: 'p-1', version: 2, plan_text: MARKDOWN, source_prompt: '重构前端' }])],
+  ['方案 · 已批准', agent([{ kind: 'proposal', status: 'approved', plan_id: 'p-2', version: 1, plan_text: '按计划实施。' }])],
+  ['方案 · 已拒绝', agent([{ kind: 'proposal', status: 'rejected', plan_id: 'p-3', version: 1, plan_text: '范围过大，先不做。' }])],
+  ['人工介入 · 待答复（选项 + 输入框）', agent([{ kind: 'intervention', intervention_id: 'i-1', status: 'pending', reason: '需要确认删除范围', question: '要一并删除关联的会话记录吗？', options: ['仅删除项目', '连同会话一起删除'] }])],
+  ['人工介入 · 正在恢复', agent([{ kind: 'intervention', intervention_id: 'i-2', status: 'resuming', reason: '需要确认删除范围', question: '要一并删除关联的会话记录吗？' }])],
+  ['人工介入 · 已答复', agent([{ kind: 'intervention', intervention_id: 'i-3', status: 'answered', reason: '需要确认删除范围', question: '要一并删除关联的会话记录吗？' }])],
+  ['错误块 · 与正文共存', agent([{ kind: 'text', text: '输出到这里中断了。' }, { kind: 'error', text: '请求失败：HTTP 502 Bad Gateway' }])],
+  ['错误块 · 单独出现', agent([{ kind: 'error', text: '请求失败：HTTP 500' }])],
+]
+
+// `?cell=N` 只渲染第 N 个用例（1:1、单列），用于把某一格截成大图。
+// 注意只能带一个查询参数：capture.mjs 会把 URL 交给 shell，`&` 在那里是命令分隔符。
+const cellParam = new URLSearchParams(window.location.search).get('cell')
+const shown = cellParam === null ? CASES : [CASES[Number(cellParam)]].filter(Boolean)
+if (cellParam !== null) document.documentElement.style.setProperty('--cols', '1')
+
+createApp({
+  render: () => h('div', { class: 'grid' }, shown.map(([label, message]) => h('div', { class: 'cell' }, [
+    h('p', { class: 'cell-label' }, label),
+    h(ChatMessage, { message, disabled: false, runActivityEvents: RUN_EVENTS, runActivityLoading: {} }),
+  ]))),
+}).mount('#app')
+
+// 「深度思考」默认收起，而截图没法点。挂载后给点名要看的那一格补一次点击。
+// 用 setTimeout(0) 是因为 capture.mjs 会先等 budget 再截，晚一帧没有任何风险。
+window.setTimeout(() => {
+  document.querySelectorAll('.cell').forEach((cell) => {
+    if (!cell.querySelector('.cell-label')?.textContent.includes('深度思考展开')) return
+    cell.querySelector('.think-toggle')?.click()
+  })
+}, 0)
diff --git a/ui/preview/sidebar.html b/ui/preview/sidebar.html
new file mode 100644
index 0000000..038180a
--- /dev/null
+++ b/ui/preview/sidebar.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>侧栏状态预览 + 键盘可达性检查</title>
+    <style>
+      /* 预览专用：把侧栏的 fixed/absolute 定位改成流式，并排展示展开态与收起态。
+         用 body 前缀提高特异性，才压得住后加载的 main.css。 */
+      body { margin: 0; background: var(--c-bg-subtle); font: 13px/1.5 system-ui, sans-serif; }
+      body .grid { display: grid; grid-template-columns: 340px 96px 1fr; align-items: start; gap: 20px; padding: 20px; }
+      body .sidebar { position: static; height: 640px; }
+      body .sidebar.collapsed { width: 76px; }
+      #report { padding: 0 20px 24px; }
+      #report h2 { margin: 0 0 8px; font-size: 15px; }
+      #report table { border-collapse: collapse; width: 100%; font-size: 12px; }
+      #report th, #report td { border-bottom: 1px solid var(--c-border); padding: 5px 8px; text-align: left; vertical-align: top; }
+      #report tr.bad { background: #fdf1f1; }
+      #report code { font-family: ui-monospace, Consolas, monospace; }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div id="expanded"></div>
+      <div id="collapsed"></div>
+      <div id="report"></div>
+    </div>
+    <script type="module" src="/preview/sidebar.js"></script>
+  </body>
+</html>
diff --git a/ui/preview/sidebar.js b/ui/preview/sidebar.js
new file mode 100644
index 0000000..c15dccf
--- /dev/null
+++ b/ui/preview/sidebar.js
@@ -0,0 +1,145 @@
+// 侧栏状态预览 + 键盘可达性检查。
+//
+// 为什么需要这张夹具：侧栏里大多数「控件」是 div/span，能不能被键盘够到无法靠读代码确定
+// （浏览器对 <button> 内部的可聚焦内容、role=button 的 span 处理并不一致），
+// 必须在真实浏览器里 el.focus() 之后看 document.activeElement 才算数。
+//
+// 用法：node scripts/capture.mjs http://127.0.0.1:3000/preview/sidebar.html shots --widths 1320 --height 760 --budget 6000 --name vitals
+//
+// 注意：probe() 会先 el.focus() 再读计算样式，所以表里的背景/边框是**聚焦态**的值。
+// 这是刻意的 —— 这张表要回答的是"聚焦时看得见吗"，顺带量的尺寸/圆角/字号不受聚焦影响。
+import { createApp, h } from 'vue'
+
+import '/src/styles/tokens.css'
+import '/src/styles/main.css'
+import SessionSidebar from '/src/components/SessionSidebar.vue'
+
+const projects = [
+  {
+    id: 'p1',
+    name: '产品官网重构',
+    provider: 'github',
+    repo: 'https://github.com/example/site.git',
+    repoFullName: 'example/site',
+    legacy: false,
+    conversations: [
+      { id: 't1', title: '重构首页 Hero 区', status: 'finished', updatedAt: 5 },
+      { id: 't2', title: '把配色收敛到 token', status: 'running', updatedAt: 4 },
+      { id: 't3', title: '修掉移动端抽屉遮挡', status: 'idle', updatedAt: 3 },
+      { id: 't4', title: '第四个会话（触发展开）', status: 'error', updatedAt: 2 },
+    ],
+  },
+  {
+    id: 'p2',
+    name: 'gitee 测试仓库',
+    provider: 'gitee',
+    repo: 'https://gitee.com/example/test.git',
+    repoFullName: 'example/test',
+    legacy: true,
+    conversations: [{ id: 't5', title: '只做并发验证', status: 'idle', updatedAt: 1 }],
+  },
+  {
+    id: 'p3',
+    name: '空项目（无会话）',
+    provider: 'github',
+    repo: 'https://github.com/example/empty.git',
+    repoFullName: 'example/empty',
+    legacy: false,
+    conversations: [],
+  },
+]
+
+const standaloneThreads = [
+  { id: 's1', title: '普通聊天：解释一下 SSE', status: 'finished', updatedAt: 6 },
+]
+
+const shared = {
+  projects,
+  standaloneThreads,
+  activeId: 't2',
+  collapsedProjectIds: [],
+}
+
+createApp({ render: () => h(SessionSidebar, shared) }).mount('#expanded')
+createApp({ render: () => h(SessionSidebar, { ...shared, collapsed: true }) }).mount('#collapsed')
+
+// ---------- 键盘可达性检查 ----------
+// 判据：一个「看起来可以操作」的东西，如果不能通过 el.focus() 成为 activeElement，
+// 键盘用户就永远够不到它。
+const CANDIDATES = [
+  ['.sidebar-toggle', '折叠/展开侧栏'],
+  ['.new-chat-button', '新聊天'],
+  ['.new-project-button', '新建项目'],
+  ['.rail-action', '收起态：图标按钮'],
+  ['.thread-item', '会话行'],
+  ['.thread-delete', '删除会话'],
+  ['.project-disclosure', '折叠项目'],
+  ['.project-add-thread', '在项目内新建会话'],
+  ['.project-menu-trigger', '项目菜单'],
+  ['.show-more-button', '展开更多会话'],
+  ['.project-no-conversations button', '空项目里的新建'],
+  ['.rail-session', '收起态：会话快捷入口'],
+]
+
+function probe(selector) {
+  const el = document.querySelector(selector)
+  if (!el) return { status: 'skip', detail: '当前形态下不存在' }
+
+  const tag = el.tagName.toLowerCase()
+  const role = el.getAttribute('role')
+  const before = document.activeElement
+  el.focus()
+  const focusable = document.activeElement === el
+  if (before && before !== document.body) before.blur?.()
+
+  // <button> 内部不允许再放可交互内容（HTML 规范），浏览器对内层元素的可聚焦性处理不一致
+  const interactiveAncestor = el.closest('button, a[href]')
+  const nested = interactiveAncestor && interactiveAncestor !== el && el.matches('[role="button"], button, a[href]')
+
+  // 量一遍视觉体征：用来判断它到底是「按钮」还是「图标」还是「列表行」。
+  // 这三个的迁移路径完全不同，靠肉眼在截图里分不准确。
+  const cs = getComputedStyle(el)
+  const r = el.getBoundingClientRect()
+  const cs0 = getComputedStyle(el, '::before')
+
+  return {
+    status: focusable ? 'ok' : 'bad',
+    tag,
+    role: role || '',
+    nested: Boolean(nested),
+    ancestor: nested ? `${interactiveAncestor.tagName.toLowerCase()}.${interactiveAncestor.className.split(' ')[0]}` : '',
+    detail: focusable
+      ? '可聚焦'
+      : `无法聚焦（activeElement 仍是 ${document.activeElement?.tagName.toLowerCase() || 'null'}）`,
+    size: `${Math.round(r.width)}×${Math.round(r.height)}`,
+    box: `${cs.borderTopWidth} ${cs.borderStyle} / ${cs.borderTopLeftRadius}`,
+    bg: cs.backgroundColor,
+    font: cs.fontSize,
+    before: cs0.content && cs0.content !== 'none' ? '有伪元素' : '',
+  }
+}
+
+const rows = CANDIDATES.map(([selector, label]) => [selector, label, probe(selector)])
+const bad = rows.filter(([, , r]) => r.status === 'bad')
+
+document.querySelector('#report').innerHTML = `
+  <h2>侧栏控件体征 · ${rows.length - bad.length} / ${rows.length} 可聚焦${
+    bad.length ? ` —— <span style="color:#b85c5c">${bad.length} 个够不到</span>` : ''
+  }</h2>
+  <table>
+    <thead><tr><th>选择器</th><th>元素 / role</th><th>尺寸</th><th>边框 / 圆角</th><th>背景</th><th>字号</th><th>结果</th><th>嵌套</th></tr></thead>
+    <tbody>
+      ${rows.map(([selector, label, r]) => `
+        <tr class="${r.status === 'bad' || r.nested ? 'bad' : ''}">
+          <td><code>${selector}</code><br /><span style="color:#6b6b6b">${label}</span></td>
+          <td>&lt;${r.tag || '—'}&gt; ${r.role ? `role=${r.role}` : ''}</td>
+          <td>${r.size || '—'}</td>
+          <td>${r.box || '—'}</td>
+          <td>${r.bg || '—'}</td>
+          <td>${r.font || '—'}</td>
+          <td>${r.status === 'skip' ? '—' : (r.status === 'ok' ? '✅ ' : '❌ ') + r.detail}</td>
+          <td>${r.nested ? `⚠️ 在 <code>${r.ancestor}</code> 内` : '否'}</td>
+        </tr>`).join('')}
+    </tbody>
+  </table>
+`
diff --git a/ui/preview/states.html b/ui/preview/states.html
new file mode 100644
index 0000000..f65374e
--- /dev/null
+++ b/ui/preview/states.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>主区状态矩阵预览</title>
+    <style>
+      /* 预览专用：把整屏应用塞进固定尺寸的盒子里逐格展示。
+         AgentWorkspace 用 height: 100vh 撑满视口，所以必须显式覆盖高度，
+         否则每个面板都会撑到整个预览页那么高。 */
+      body { margin: 0; padding: 16px; background: #e9ece9; font: 13px/1.5 system-ui, sans-serif; }
+      :root { --box-w: 893px; --box-h: 558px; }
+      .sheet { display: flex; flex-direction: column; gap: 14px; }
+      .cell { width: var(--box-w); }
+      .cell > h3 { margin: 0 0 6px; font-size: 13px; color: #333; }
+      .box { width: var(--box-w); height: var(--box-h); overflow: hidden; border: 1px solid #c9d0cb; background: #fff; }
+      .panel { width: 1440px; height: 900px; transform: scale(var(--scale, 0.62)); transform-origin: top left; }
+      body .app-shell { height: 900px; }
+    </style>
+  </head>
+  <body>
+    <div class="sheet" id="sheet"></div>
+    <script type="module" src="/preview/states.js"></script>
+  </body>
+</html>
diff --git a/ui/preview/states.js b/ui/preview/states.js
new file mode 100644
index 0000000..80618b9
--- /dev/null
+++ b/ui/preview/states.js
@@ -0,0 +1,154 @@
+// 主区状态矩阵预览。
+//
+// 为什么必须有这张夹具：主区的空态（Hero）三变体、加载态、错误态里，有一部分在真实应用里
+// **够不到** —— 只要账号下还有任何会话，`agent.currentThread` 就不为空，"无会话 Hero"那一屏
+// 永远不会再出现。而它恰好是新用户的第一个屏幕。靠手工点不出来，只能种状态渲染。
+//
+// 用法：
+//   node scripts/capture.mjs http://127.0.0.1:3000/preview/states.html shots --widths 920 --height 2900 --budget 8000 --name states
+//
+// 每个面板用独立的 Pinia 实例，互不干扰；bootstrap / refreshActiveRuns 换成空实现，
+// 否则夹具会去打真实接口并启动 3 秒轮询。
+import { createApp } from 'vue'
+import { createPinia, setActivePinia } from 'pinia'
+
+import '/src/styles/tokens.css'
+import '/src/styles/main.css'
+import AgentWorkspace from '/src/components/AgentWorkspace.vue'
+import { useAgentStore } from '/src/stores/agent'
+
+const CHAT_THREAD = {
+  id: 't-chat',
+  projectId: null,
+  chatOnly: true,
+  title: '会话标题',
+  repo: '',
+  repoFullName: '',
+  provider: 'github',
+  branch: '',
+  baseBranch: '',
+  model: 'deepseek-flash',
+  effort: 'default',
+  status: 'idle',
+  createdAt: 1,
+  updatedAt: 1,
+  draftContent: '',
+  messages: [],
+  changedFiles: [],
+}
+
+const PROJECT_THREAD = { ...CHAT_THREAD, id: 't-proj', projectId: 'p1', chatOnly: false, repoFullName: 'example/app', title: '准备好继续构建' }
+
+const PROJECT = {
+  id: 'p1',
+  name: '开发工作台',
+  provider: 'github',
+  repo: 'https://github.com/example/app.git',
+  repoFullName: 'example/app',
+  legacy: false,
+  conversations: [{ id: 't-proj', title: '标题', status: 'idle', updatedAt: 1 }],
+}
+
+// 活跃任务条的候选。字段要与 `stores/agent.js` 的 `activeTasks` getter 对得上：
+// 它把 `threads` 里 status ∈ queued/running/cancelling（或本地 activeRuns 有条目）的挑出来，
+// 再用 `activeRuns[id]` 覆盖 status 与 runId。
+const RUNNING_TASKS = [
+  { ...CHAT_THREAD, id: 't-run1', projectId: 'p1', chatOnly: false, title: '实现并验证 FastAPI Task API', repoFullName: 'example/api', status: 'running' },
+  { ...CHAT_THREAD, id: 't-run2', projectId: 'p2', chatOnly: false, title: '重构首页 Hero 区', repoFullName: 'example/site', status: 'queued' },
+  { ...CHAT_THREAD, id: 't-run3', projectId: 'p3', chatOnly: false, title: '把配色收敛到 token', repoFullName: 'example/web', status: 'cancelling' },
+  { ...CHAT_THREAD, id: 't-run4', projectId: 'p4', chatOnly: false, title: '一个非常长的任务标题用来验证省略号到底有没有生效', repoFullName: 'example/long', status: 'running' },
+]
+
+const STATES = [
+  { title: '① 无会话（新用户第一屏）', state: { currentThread: null } },
+  { title: '② 普通聊天空态', state: { currentThread: CHAT_THREAD } },
+  { title: '③ 项目会话空态', state: { currentThread: PROJECT_THREAD, projects: [PROJECT] } },
+  {
+    title: '④ 加载态',
+    state: { currentThread: CHAT_THREAD, loading: true },
+  },
+  {
+    title: '⑤ 错误态（有消息时）',
+    state: {
+      currentThread: CHAT_THREAD,
+      error: '创建聊天失败：HTTP 500',
+      messages: [
+        { id: 'm1', author: 'user', timestamp: 1, chunks: [{ kind: 'text', text: '帮我看看这个仓库的结构' }] },
+      ],
+    },
+  },
+  {
+    title: '⑥ 正常态（有消息）',
+    state: {
+      currentThread: CHAT_THREAD,
+      messages: [
+        { id: 'm1', author: 'user', timestamp: 1, chunks: [{ kind: 'text', text: '帮我看看这个仓库的结构' }] },
+        {
+          id: 'm2',
+          author: 'agent',
+          timestamp: 2,
+          chunks: [{ kind: 'text', text: '仓库分成前端与后端两块，前端在 `ui/`，后端是 FastAPI 服务。需要我先看哪一块？' }],
+        },
+      ],
+    },
+  },
+  {
+    // 活跃任务条只在有正在运行的任务时出现 —— 默认截图里永远拍不到。
+    // 四个任务刻意覆盖三种状态 + 一个超长标题 + 一个"服务端说在跑但本地没有 runId"的边界。
+    title: '⑦ 活跃任务条（4 个任务 · 三种状态）',
+    state: {
+      currentThread: RUNNING_TASKS[0],
+      threads: RUNNING_TASKS,
+      activeRuns: {
+        't-run1': { status: 'running', runId: 'r1' },
+        't-run2': { status: 'queued', runId: 'r2' },
+        't-run3': { status: 'cancelling', runId: 'r3' },
+        // t-run4 刻意不在 activeRuns 里：thread.status 说在跑，但本地没有 runId →
+        // 取消按钮不渲染。这是服务端状态与本地状态不一致时的真实边界。
+      },
+    },
+  },
+]
+
+// 支持 ?cell=<序号> 只放大看一格（1 倍、单格）；不加参数就是整张矩阵（0.62 倍）。
+// 刻意只用**一个**查询参数：capture.mjs 会把 URL 交给 shell，`&` 在那里是命令分隔符，
+// 写成 `?only=0&scale=1` 会被 cmd 拆开并报 "'scale' is not recognized"。
+const params = new URLSearchParams(location.search)
+const only = params.has('cell') ? Number(params.get('cell')) : null
+const scale = only === null ? 0.62 : 1
+
+const sheet = document.getElementById('sheet')
+sheet.style.setProperty('--scale', String(scale))
+document.documentElement.style.setProperty('--box-w', `${Math.round(1440 * scale)}px`)
+document.documentElement.style.setProperty('--box-h', `${Math.round(900 * scale)}px`)
+
+for (const [index, { title, state }] of STATES.entries()) {
+  if (only !== null && index !== only) continue
+  const cell = document.createElement('div')
+  cell.className = 'cell'
+  const heading = document.createElement('h3')
+  heading.textContent = title
+  const box = document.createElement('div')
+  box.className = 'box'
+  const panel = document.createElement('div')
+  panel.className = 'panel'
+  box.appendChild(panel)
+  cell.append(heading, box)
+  sheet.appendChild(cell)
+
+  const pinia = createPinia()
+  setActivePinia(pinia)
+  const store = useAgentStore()
+  store.$patch({
+    options: { models: [{ id: 'deepseek-flash', label: 'deepseek-flash' }], providers: [{ id: 'github', label: 'GitHub' }] },
+    selectedModel: 'deepseek-flash',
+    ...state,
+  })
+  // 夹具不碰网络，也不启动轮询。
+  store.bootstrap = async () => {}
+  store.refreshActiveRuns = async () => {}
+
+  const app = createApp(AgentWorkspace)
+  app.use(pinia)
+  app.mount(panel)
+}
diff --git a/ui/scripts/audit-css.mjs b/ui/scripts/audit-css.mjs
new file mode 100644
index 0000000..5d7a3dc
--- /dev/null
+++ b/ui/scripts/audit-css.mjs
@@ -0,0 +1,1403 @@
+#!/usr/bin/env node
+/**
+ * audit-css.mjs —— CSS「设计系统漂移」审计记分卡（零依赖 · Node 18+ · 跨平台）
+ *
+ * 用途
+ *   扫一个前端项目（或单个 CSS 文件），统计颜色 / 圆角 / 字号 / 变量 / 选择器 /
+ *   !important 的散乱程度，输出一张 ✅ / ❌ 记分卡，判断设计系统是否已经漂移。
+ *
+ * 用法
+ *   node audit-css.mjs <css文件或目录> [--json] [--quiet] [--help]
+ *
+ * 选项
+ *   --json     输出机器可读 JSON（含全部原始数据 + pass/fail），无装饰字符
+ *   --quiet    只输出最后一行总结
+ *   -h, --help 显示本帮助
+ *
+ * 输入
+ *   - 目录：递归收集所有 .css，以及所有 .vue（只取 <style ...>…</style> 块参与分析）
+ *   - 文件：直接分析（.vue 同样只取 style 块）
+ *   - 跳过目录：node_modules / dist / build / .git / coverage / vendor
+ *
+ * 指标
+ *   1. :root 块数量；CSS 变量重复声明（最后一个生效，其余标为死代码）
+ *   2. 十六进制颜色 distinct + 频次 Top15 + 近重复聚类（RGB 欧氏距离 < 12）
+ *   3. rgb()/rgba() distinct + 基色（忽略 alpha）distinct + 基色近重复聚类
+ *   4. border-radius 取值列表 + distinct
+ *   5. font-size 取值列表 + distinct + 频次分布（clamp() 整体视作一个值）
+ *   6. 同一选择器分散在多块（> 1 次）数量 + Top15（提示项，不参与判定）
+ *   7. token 覆盖率 = var(--x) 次数 /（var 次数 + 硬编码颜色数 + 硬编码间距/字号/圆角 px 数）
+ *   8. !important 数量
+ *   9. 规则块总数 / distinct 选择器数
+ *
+ * 评分（任一 FAIL → 进程退出码 1）
+ *   彩色 distinct ≤ 5 · border-radius distinct ≤ 4 · font-size distinct ≤ 7
+ *   近白背景 distinct ≤ 3 · :root 块 = 1 · token 覆盖率 ≥ 90%
+ *   rgb/rgba 基色 distinct ≤ 3 · 冗余声明（同属性重复声明）= 0 · !important = 0
+ *
+ * 提示项（不参与判定，不影响退出码）
+ *   同一选择器分散在多块 —— 归零必须合并块，而合并会把声明搬到文件更靠后处，
+ *   改变它与其它同特异性选择器的先后关系，有渲染风险，因此只提示不判定
+ *
+ * 退出码
+ *   0 全部通过 · 1 有未通过项 / 参数或输入错误
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+
+// ───────────────────────────── 常量与阈值 ─────────────────────────────
+
+const SKIP_DIRS = new Set(['node_modules', 'dist', 'build', '.git', 'coverage', 'vendor']);
+const NEAR_DUP_DISTANCE = 12; // RGB 欧氏距离阈值：小于它视为「近重复颜色」
+const NEAR_WHITE_MIN = 245; // 三通道全部 > 245 视为「近白」
+const NEUTRAL_SAT = 0.12; // HSL 饱和度 < 12% 视为中性色
+const NEUTRAL_CHROMA = 6; // 彩度（max-min）≤ 6 视为「彩度接近 0」→ 中性色
+const VALUE_PREVIEW = 12; // 记分卡值列表最多展示几个
+const DETAIL_PREVIEW = 24; // 详情行最多展示几个
+const TOP_N = 15; // Top 列表长度
+const MAX_LISTED_PX = 24; // JSON 里 px 明细最多列几个
+
+// 评分阈值（改这里即可调整严格度）
+// 注意 duplicateSelectors 与 redundantDeclarations 是两件事：
+//   redundantDeclarations —— 同一 (上下文, 选择器) 下同一个属性被声明了不止一次。
+//     后一条必然覆盖前一条，删掉前一条不改变任何渲染。这是真正的漂移症状，硬门 = 0。
+//   duplicateSelectors（提示，不参与判定）—— 同一选择器分散在多个规则块里，但各块声明的属性互不重叠。
+//     它不是冗余：要归零就得把多个块合并，而合并会把声明搬到文件更靠后的位置，
+//     从而改变它与其它同特异性选择器之间的先后关系 —— 那是有渲染风险的，不能当作硬门。
+const LIMITS = {
+  coloredDistinct: 5,
+  radiusDistinct: 4,
+  fontSizeDistinct: 7,
+  nearWhiteDistinct: 3,
+  rootBlocks: 1,
+  tokenCoverage: 90,
+  rgbBaseDistinct: 3,
+  redundantDeclarations: 0,
+  duplicateSelectors: 0,
+  importantCount: 0,
+};
+
+// ───────────────────────────── 基础文本工具 ─────────────────────────────
+
+/** 跳过一段字符串字面量，返回结束引号之后的偏移 */
+function skipString(src, i) {
+  const n = src.length;
+  const quote = src[i];
+  i++;
+  while (i < n) {
+    const c = src[i];
+    if (c === '\\') {
+      i += 2;
+      continue;
+    }
+    if (c === quote) return i + 1;
+    i++;
+  }
+  return i;
+}
+
+/** 跳过一对配对的括号，返回右括号之后的偏移 */
+function skipBalanced(src, i, open, close) {
+  const n = src.length;
+  let depth = 0;
+  while (i < n) {
+    const c = src[i];
+    if (c === '"' || c === "'") {
+      i = skipString(src, i);
+      continue;
+    }
+    if (c === open) depth++;
+    else if (c === close) {
+      depth--;
+      if (depth === 0) return i + 1;
+    }
+    i++;
+  }
+  return i;
+}
+
+/**
+ * 剥离 /* … *\/ 注释，但保持字符串长度不变（注释字符换成空格、换行保留），
+ * 这样后续所有偏移量都能一对一映射回原文件，行号才不会错位。
+ * 注意：只剥离注释、不动声明，所以 :root 里的变量声明不会丢。
+ */
+function stripComments(src) {
+  const out = src.split('');
+  const n = src.length;
+  let i = 0;
+  while (i < n) {
+    const c = src[i];
+    if (c === '"' || c === "'") {
+      i = skipString(src, i);
+      continue;
+    }
+    if (c === '/' && src[i + 1] === '*') {
+      const end = src.indexOf('*/', i + 2);
+      const stop = end === -1 ? n : end + 2;
+      for (let k = i; k < stop; k++) {
+        if (out[k] !== '\n' && out[k] !== '\r') out[k] = ' ';
+      }
+      i = stop;
+      continue;
+    }
+    i++;
+  }
+  return out.join('');
+}
+
+/**
+ * .vue：把 <style> 之外的字符全部涂成空格（保留换行），
+ * 于是 .vue 也能用同一套解析器，且行号与 .vue 文件一致。
+ */
+function maskVue(raw) {
+  const out = raw.split('');
+  const keep = new Array(raw.length).fill(false);
+  const notes = [];
+  const re = /<style\b([^>]*)>([\s\S]*?)<\/style\s*>/gi;
+  let m;
+  while ((m = re.exec(raw))) {
+    const attrs = m[1] || '';
+    const lower = m[0].toLowerCase();
+    const openEnd = lower.indexOf('>');
+    const closeStart = lower.lastIndexOf('</style');
+    if (openEnd < 0 || closeStart < 0) continue;
+    const contentStart = m.index + openEnd + 1;
+    const contentEnd = m.index + closeStart;
+    for (let k = contentStart; k < contentEnd; k++) keep[k] = true;
+    const lang = (attrs.match(/\blang\s*=\s*["']?([\w-]+)/i) || [])[1];
+    if (lang && /^(scss|sass|less|styl|stylus)$/i.test(lang)) notes.push(lang.toLowerCase());
+  }
+  for (let i = 0; i < raw.length; i++) {
+    if (keep[i]) continue;
+    const c = raw[i];
+    out[i] = c === '\n' || c === '\r' ? c : ' ';
+  }
+  return { src: out.join(''), notes };
+}
+
+/** 把块内嵌套的 { … } 子规则涂成空格（保留长度与换行），只留顶层声明 */
+function maskNestedBlocks(body) {
+  const out = body.split('');
+  const n = body.length;
+  let i = 0;
+  while (i < n) {
+    const c = body[i];
+    if (c === '"' || c === "'") {
+      i = skipString(body, i);
+      continue;
+    }
+    if (c === '(') {
+      i = skipBalanced(body, i, '(', ')');
+      continue;
+    }
+    if (c === '{') {
+      const end = skipBalanced(body, i, '{', '}');
+      for (let k = i; k < end; k++) {
+        if (out[k] !== '\n' && out[k] !== '\r') out[k] = ' ';
+      }
+      i = end;
+      continue;
+    }
+    i++;
+  }
+  return out.join('');
+}
+
+/** 把 var( … ) 整体涂成空格（保留长度）：token 覆盖率里不把回退值当硬编码 */
+function maskVarCalls(value) {
+  const out = value.split('');
+  const re = /\bvar\s*\(/g;
+  let m;
+  while ((m = re.exec(value))) {
+    const open = m.index + m[0].length - 1;
+    const end = skipBalanced(value, open, '(', ')');
+    for (let k = m.index; k < end; k++) out[k] = ' ';
+    re.lastIndex = end;
+  }
+  return out.join('');
+}
+
+// ───────────────────────────── CSS 解析 ─────────────────────────────
+
+// 会「包住其它规则」的条件型 at-rule：递归进去继续找规则
+const CONDITIONAL_AT = /^@(media|supports|layer|container|scope|starting-style|document|-moz-document)\b/i;
+// 带声明体、但不是选择器的 at-rule（声明照收，但不计入选择器统计）
+const DECL_AT = /^@(font-face|page|property|counter-style|viewport|font-feature-values)\b/i;
+
+/**
+ * 极简但健壮的 CSS 规则扫描器。
+ * 返回 [{ selector, bodyStart, bodyEnd, atRule }]，bodyStart/bodyEnd 为声明体在源码中的偏移。
+ * 支持：压缩写法、多空格、注释（已剥离）、@media 嵌套、@keyframes 内层步骤、CSS 嵌套。
+ */
+function parseRules(src) {
+  const rules = [];
+  const n = src.length;
+
+  function readBody(openIdx) {
+    const after = skipBalanced(src, openIdx, '{', '}'); // '}' 之后
+    const closed = src[after - 1] === '}';
+    return { bodyStart: openIdx + 1, bodyEnd: closed ? after - 1 : after, end: after };
+  }
+
+  function walk(start, expectBrace, mode, context = '') {
+    let buf = '';
+    let i = start;
+    while (i < n) {
+      const c = src[i];
+      if (c === '"' || c === "'") {
+        const j = skipString(src, i);
+        buf += src.slice(i, j);
+        i = j;
+        continue;
+      }
+      if (c === '(') {
+        const j = skipBalanced(src, i, '(', ')');
+        buf += src.slice(i, j);
+        i = j;
+        continue;
+      }
+      if (c === ';') {
+        i++;
+        buf = '';
+        continue;
+      }
+      if (c === '}') {
+        i++;
+        if (expectBrace) return i;
+        continue;
+      }
+      if (c === '{') {
+        const prelude = buf.trim();
+        const body = readBody(i);
+        if (prelude.startsWith('@')) {
+          if (/^@keyframes\b/i.test(prelude)) {
+            // 关键帧：内层 0%/from/to 的声明照收，但不作为「选择器」计数
+            walk(body.bodyStart, true, 'keyframes', context);
+          } else if (CONDITIONAL_AT.test(prelude)) {
+            // 条件 at-rule：把 prelude 压进上下文，供「重复选择器」按媒体条件分组
+            walk(body.bodyStart, true, mode, context ? `${context} && ${prelude}` : prelude);
+          } else {
+            // @font-face / @page 等：带声明体，收声明但不算选择器
+            rules.push({ selector: prelude, ...body, atRule: true, context });
+          }
+          i = body.end;
+        } else if (mode === 'keyframes') {
+          rules.push({ selector: prelude, ...body, atRule: true, context });
+          i = body.end;
+        } else {
+          rules.push({ selector: prelude, ...body, atRule: false, context });
+          i = body.end;
+        }
+        buf = '';
+        continue;
+      }
+      buf += c;
+      i++;
+    }
+    return i;
+  }
+
+  walk(0, false, 'normal');
+  return rules;
+}
+
+/** 把声明体切成 [{ start, text }]（识别字符串与括号，忽略其中的分号） */
+function splitDeclParts(text) {
+  const parts = [];
+  const n = text.length;
+  let i = 0;
+  let bufStart = 0;
+  while (i < n) {
+    const c = text[i];
+    if (c === '"' || c === "'") {
+      i = skipString(text, i);
+      continue;
+    }
+    if (c === '(') {
+      i = skipBalanced(text, i, '(', ')');
+      continue;
+    }
+    if (c === ';') {
+      parts.push({ start: bufStart, text: text.slice(bufStart, i) });
+      i++;
+      bufStart = i;
+      continue;
+    }
+    i++;
+  }
+  if (bufStart < n) parts.push({ start: bufStart, text: text.slice(bufStart, n) });
+  return parts.filter((p) => p.text.trim().length > 0);
+}
+
+const PROP_RE = /^(--[\w-]+|-?[a-zA-Z][\w-]*)$/;
+
+/** 逗号分割选择器组（跳过 :is()/:not() 的括号、属性选择器里的逗号与字符串） */
+function splitSelectorList(selector) {
+  const out = [];
+  const n = selector.length;
+  let i = 0;
+  let buf = '';
+  while (i < n) {
+    const c = selector[i];
+    if (c === '"' || c === "'") {
+      const j = skipString(selector, i);
+      buf += selector.slice(i, j);
+      i = j;
+      continue;
+    }
+    if (c === '(' || c === '[') {
+      const close = c === '(' ? ')' : ']';
+      const j = skipBalanced(selector, i, c, close);
+      buf += selector.slice(i, j);
+      i = j;
+      continue;
+    }
+    if (c === ',') {
+      out.push(buf);
+      buf = '';
+      i++;
+      continue;
+    }
+    buf += c;
+    i++;
+  }
+  out.push(buf);
+  return out.map((s) => s.replace(/\s+/g, ' ').trim()).filter(Boolean);
+}
+
+// ───────────────────────────── 颜色工具 ─────────────────────────────
+
+function rgbToHsl(r, g, b) {
+  const R = r / 255;
+  const G = g / 255;
+  const B = b / 255;
+  const max = Math.max(R, G, B);
+  const min = Math.min(R, G, B);
+  const d = max - min;
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (d !== 0) {
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (max === R) h = (G - B) / d + (G < B ? 6 : 0);
+    else if (max === G) h = (B - R) / d + 2;
+    else h = (R - G) / d + 4;
+    h *= 60;
+  }
+  return { h, s, l };
+}
+
+function isNearWhite(r, g, b) {
+  return r > NEAR_WHITE_MIN && g > NEAR_WHITE_MIN && b > NEAR_WHITE_MIN;
+}
+
+/** 中性色判定：HSL 饱和度 < 12% 或彩度（max-min）接近 0 */
+function isNeutral(r, g, b) {
+  const { s } = rgbToHsl(r, g, b);
+  const chroma = Math.max(r, g, b) - Math.min(r, g, b);
+  return s < NEUTRAL_SAT || chroma <= NEUTRAL_CHROMA;
+}
+
+function rgbDistance(a, b) {
+  return Math.sqrt((a.r - b.r) ** 2 + (a.g - b.g) ** 2 + (a.b - b.b) ** 2);
+}
+
+/** 给近重复聚类起个中文色名，例如「7 个几乎一样的绿色」 */
+function hueName(r, g, b) {
+  const { h, s, l } = rgbToHsl(r, g, b);
+  if (l <= 0.12) return '近黑';
+  if (l >= 0.94) return '近白';
+  if (s < NEUTRAL_SAT) return '灰';
+  if (h < 15 || h >= 345) return '红';
+  if (h < 45) return '橙';
+  if (h < 70) return '黄';
+  if (h < 165) return '绿';
+  if (h < 195) return '青';
+  if (h < 255) return '蓝';
+  if (h < 290) return '紫';
+  return '品红';
+}
+
+const HEX_RE = /#([0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{4}|[0-9a-fA-F]{3})(?![0-9a-fA-F])/g;
+const RGB_FN_RE = /\brgba?\s*\(([^()]*)\)/gi;
+
+/** 先抹掉 url(...)（SVG 片段 id 常常形如 #abc，会被误认成颜色） */
+function maskUrls(value) {
+  return value.replace(/\burl\s*\((?:[^()]|\([^()]*\))*\)/gi, (m) => ' '.repeat(m.length));
+}
+
+function canonHex(r, g, b, a) {
+  const base = [r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('');
+  return '#' + base + (a < 255 ? a.toString(16).padStart(2, '0') : '');
+}
+
+/** 扫描一段值里的十六进制颜色 */
+function scanHex(value) {
+  const out = [];
+  HEX_RE.lastIndex = 0;
+  let m;
+  while ((m = HEX_RE.exec(value))) {
+    const h = m[1].toLowerCase();
+    let r, g, b, a;
+    if (h.length === 3 || h.length === 4) {
+      r = parseInt(h[0] + h[0], 16);
+      g = parseInt(h[1] + h[1], 16);
+      b = parseInt(h[2] + h[2], 16);
+      a = h.length === 4 ? parseInt(h[3] + h[3], 16) : 255;
+    } else {
+      r = parseInt(h.slice(0, 2), 16);
+      g = parseInt(h.slice(2, 4), 16);
+      b = parseInt(h.slice(4, 6), 16);
+      a = h.length === 8 ? parseInt(h.slice(6, 8), 16) : 255;
+    }
+    out.push({ raw: '#' + h, canon: canonHex(r, g, b, a), r, g, b, a });
+  }
+  return out;
+}
+
+function parseRgbChannel(token) {
+  const t = String(token).trim();
+  if (!t) return null;
+  if (t.endsWith('%')) {
+    const v = Number.parseFloat(t);
+    return Number.isFinite(v) ? Math.max(0, Math.min(255, Math.round((v * 255) / 100))) : null;
+  }
+  const v = Number.parseFloat(t);
+  if (!Number.isFinite(v)) return null;
+  return Math.max(0, Math.min(255, Math.round(v)));
+}
+
+function parseAlpha(token) {
+  if (token == null || token === '') return 1;
+  const t = String(token).trim();
+  if (t.endsWith('%')) {
+    const v = Number.parseFloat(t);
+    return Number.isFinite(v) ? Math.max(0, Math.min(1, v / 100)) : 1;
+  }
+  const v = Number.parseFloat(t);
+  return Number.isFinite(v) ? Math.max(0, Math.min(1, v)) : 1;
+}
+
+/**
+ * 解析 rgb()/rgba() 参数，同时支持现代与逗号写法：
+ *   rgba(1,2,3,0.5) / rgb(1 2 3 / 50%) / rgb(100% 0% 0%) / rgb(1, 2, 3)
+ */
+function parseRgbArgs(argsStr) {
+  let body = String(argsStr).trim();
+  let slashAlpha = null;
+  const slash = body.indexOf('/');
+  if (slash >= 0) {
+    slashAlpha = body.slice(slash + 1).trim();
+    body = body.slice(0, slash);
+  }
+  let parts = body.includes(',') ? body.split(',') : body.trim().split(/\s+/);
+  parts = parts.map((s) => s.trim()).filter(Boolean);
+  if (parts.length < 3) return null;
+  const rgb = [parseRgbChannel(parts[0]), parseRgbChannel(parts[1]), parseRgbChannel(parts[2])];
+  if (rgb.some((v) => v === null)) return null; // 相对颜色语法等 → 跳过
+  const alphaToken = slashAlpha != null ? slashAlpha : parts.length >= 4 ? parts[3] : null;
+  return { r: rgb[0], g: rgb[1], b: rgb[2], a: parseAlpha(alphaToken) };
+}
+
+/** 扫描一段值里的 rgb()/rgba() */
+function scanRgb(value) {
+  const out = [];
+  RGB_FN_RE.lastIndex = 0;
+  let m;
+  while ((m = RGB_FN_RE.exec(value))) {
+    const parsed = parseRgbArgs(m[1]);
+    if (!parsed) continue;
+    const a = Math.round(parsed.a * 1000) / 1000;
+    out.push({
+      raw: m[0].replace(/\s+/g, ' '),
+      canon: `rgba(${parsed.r},${parsed.g},${parsed.b},${a})`,
+      r: parsed.r,
+      g: parsed.g,
+      b: parsed.b,
+      a,
+    });
+  }
+  return out;
+}
+
+// ───────────────────────────── 文件收集 ─────────────────────────────
+
+/** 递归收集 .css / .vue；跳过 SKIP_DIRS */
+function collectFiles(target) {
+  const found = [];
+  const stack = [target];
+  while (stack.length) {
+    const cur = stack.pop();
+    let st;
+    try {
+      st = fs.statSync(cur);
+    } catch {
+      continue;
+    }
+    if (st.isDirectory()) {
+      let entries = [];
+      try {
+        entries = fs.readdirSync(cur, { withFileTypes: true });
+      } catch {
+        continue;
+      }
+      for (const e of entries) {
+        const full = path.join(cur, e.name);
+        if (e.isDirectory()) {
+          if (SKIP_DIRS.has(e.name)) continue;
+          stack.push(full);
+        } else if (e.isFile()) {
+          const ext = path.extname(e.name).toLowerCase();
+          if (ext === '.css' || ext === '.vue') found.push(full);
+        }
+      }
+    } else if (st.isFile()) {
+      const ext = path.extname(cur).toLowerCase();
+      if (ext === '.css' || ext === '.vue') found.push(cur);
+    }
+  }
+  found.sort();
+  return found;
+}
+
+/** 按路径片段过滤（--ignore）。用于排除 tokens 定义文件这类"字面量本来就合法"的文件。 */
+function filterIgnored(files, patterns) {
+  if (!patterns || patterns.length === 0) return files;
+  const norm = (s) => String(s).split(path.sep).join('/');
+  const pats = patterns.map(norm);
+  return files.filter((f) => {
+    const n = norm(f);
+    return !pats.some((p) => n.includes(p));
+  });
+}
+
+// ───────────────────────────── 单文件分析 ─────────────────────────────
+
+function lineIndex(text) {
+  const starts = [0];
+  for (let i = 0; i < text.length; i++) {
+    if (text[i] === '\n') starts.push(i + 1);
+  }
+  return (offset) => {
+    let lo = 0;
+    let hi = starts.length - 1;
+    while (lo < hi) {
+      const mid = (lo + hi + 1) >> 1;
+      if (starts[mid] <= offset) lo = mid;
+      else hi = mid - 1;
+    }
+    return lo + 1;
+  };
+}
+
+/**
+ * 分析单个文件，返回 { file, lines, rules, decls, selectors, notes }
+ * decls: { prop, value, important, line }
+ */
+function analyzeFile(file) {
+  const raw = fs.readFileSync(file, 'utf8');
+  const isVue = path.extname(file).toLowerCase() === '.vue';
+  const notes = [];
+  let src = raw;
+  if (isVue) {
+    const masked = maskVue(raw);
+    src = masked.src;
+    for (const n of masked.notes) notes.push(`<style lang="${n}">：嵌套语法可能抬高「重复选择器」计数`);
+  }
+  const clean = stripComments(src);
+  const rules = parseRules(clean);
+  const lineOf = lineIndex(raw);
+
+  const decls = [];
+  const selectors = [];
+
+  for (const rule of rules) {
+    const body = clean.slice(rule.bodyStart, rule.bodyEnd);
+    const masked = maskNestedBlocks(body);
+    for (const part of splitDeclParts(masked)) {
+      const text = part.text;
+      const colon = text.indexOf(':');
+      if (colon < 0) continue;
+      const prop = text.slice(0, colon).trim().toLowerCase();
+      if (!PROP_RE.test(prop)) continue;
+      let value = text.slice(colon + 1).trim();
+      if (!value) continue;
+      const importantCount = (value.match(/!\s*important/gi) || []).length;
+      if (importantCount > 0) value = value.replace(/!\s*important/gi, '').trim();
+      const absOffset = rule.bodyStart + part.start + colon + 1;
+      decls.push({
+        prop,
+        value,
+        important: importantCount,
+        line: lineOf(absOffset),
+        file,
+        selector: rule.selector || '',
+        context: rule.context || '',
+        // atRule 的声明体（@keyframes 的 0%/from/to 步骤、@font-face、@page）不是层叠里的选择器：
+        // 两个 @keyframes 各有一个 to { transform } 是完全正常的，互相不覆盖。
+        // 冗余声明检查必须跳过它们，否则「再加一个动画」就会被误报。
+        atRule: !!rule.atRule,
+      });
+    }
+    if (!rule.atRule && rule.selector) {
+      // 带上 at-rule 上下文：同一个选择器在 base 与 @media 里各写一次是合法的响应式覆盖，
+      // 只有「同一上下文内被声明多次」才算重复。
+      for (const sel of splitSelectorList(rule.selector)) {
+        selectors.push({ sel, context: rule.context || '' });
+      }
+    }
+  }
+
+  return {
+    file,
+    // 行数按编辑器口径统计（忽略文件末尾换行带来的空行）
+    lines: raw.replace(/\r\n?/g, '\n').replace(/\n$/, '').split('\n').length,
+    rules,
+    decls,
+    selectors,
+    notes,
+  };
+}
+
+// ───────────────────────────── 指标聚合 ─────────────────────────────
+
+function bump(map, key, init) {
+  const cur = map.get(key);
+  if (cur) cur.count++;
+  else map.set(key, { ...init, count: 1 });
+  return map.get(key);
+}
+
+function topByCount(map, n) {
+  return [...map.entries()]
+    .map(([value, v]) => ({ value, count: v.count }))
+    .sort((a, b) => b.count - a.count || String(a.value).localeCompare(String(b.value)))
+    .slice(0, n);
+}
+
+function cmpCssValue(a, b) {
+  const na = Number.parseFloat(a);
+  const nb = Number.parseFloat(b);
+  const fa = Number.isFinite(na);
+  const fb = Number.isFinite(nb);
+  if (fa && fb) {
+    if (na !== nb) return na - nb;
+    return a.localeCompare(b);
+  }
+  if (fa !== fb) return fa ? -1 : 1;
+  return a.localeCompare(b);
+}
+
+/** 把距离 < 阈值 的颜色聚成组（并查式 BFS），返回成员数 > 1 的组 */
+function clusterColors(items) {
+  const used = new Array(items.length).fill(false);
+  const clusters = [];
+  for (let i = 0; i < items.length; i++) {
+    if (used[i]) continue;
+    used[i] = true;
+    const group = [i];
+    const queue = [i];
+    while (queue.length) {
+      const a = queue.shift();
+      for (let j = 0; j < items.length; j++) {
+        if (used[j]) continue;
+        if (rgbDistance(items[a], items[j]) < NEAR_DUP_DISTANCE) {
+          used[j] = true;
+          group.push(j);
+          queue.push(j);
+        }
+      }
+    }
+    if (group.length > 1) clusters.push(group.map((k) => items[k]));
+  }
+  return clusters.sort((a, b) => b.length - a.length);
+}
+
+const SPACING_PROP_RE = /^(padding|margin|gap|grid-gap)(-.+)?$/;
+const RADIUS_LONGHAND_RE = /^border-.+-radius$/;
+
+function stripVendor(prop) {
+  return prop.replace(/^-[a-z]+-/, '');
+}
+
+/** 间距 / 字号 / 圆角这类「本该 token 化」的属性 */
+function isTokenizableLengthProp(prop) {
+  const p = stripVendor(prop);
+  if (p === 'font-size' || p === 'border-radius') return true;
+  if (SPACING_PROP_RE.test(p)) return true;
+  if (RADIUS_LONGHAND_RE.test(p)) return true;
+  return false;
+}
+
+const PX_RE = /-?\d*\.?\d+px\b/gi;
+
+function computeMetrics(docs, files) {
+  const hexMap = new Map(); // canon → {count, rgb}
+  const rgbMap = new Map(); // rgba(...) → {count, rgb}
+  const rgbBaseMap = new Map(); // r,g,b → {count, rgb}
+  const radiusMap = new Map();
+  const fontSizeMap = new Map();
+  const selectorMap = new Map();
+  const rootFiles = new Set();
+  const varDecls = []; // {name, value, file, line}
+  const hardPx = [];
+
+  let ruleBlocks = 0;
+  let rootBlockCount = 0;
+  let importantCount = 0;
+  let hardColorCount = 0;
+  let varUseCount = 0;
+
+  for (const doc of docs) {
+    for (const rule of doc.rules) {
+      if (!rule.atRule && rule.selector) {
+        ruleBlocks++;
+        if (splitSelectorList(rule.selector).some((s) => s === ':root' || s.endsWith(':root'))) {
+          rootBlockCount++; // 按块计数（同一文件里两个 :root 就是 2）
+          rootFiles.add(doc.file);
+        }
+      }
+    }
+
+    for (const { sel, context } of doc.selectors) {
+      const key = context ? `${context}\u0000${sel}` : sel;
+      bump(selectorMap, key, { value: sel, context: context || '(base)' });
+    }
+
+    for (const d of doc.decls) {
+      importantCount += d.important;
+
+      // :root 变量（任意作用域的 --x 声明都收，用于找重复声明）
+      if (d.prop.startsWith('--')) {
+        varDecls.push({ name: d.prop, value: d.value, file: d.file, line: d.line });
+      }
+
+      // 颜色（含 var() 回退值，反映「文件里出现了多少种颜色」）
+      const colorZone = maskUrls(d.value);
+      for (const c of scanHex(colorZone)) {
+        const cur = bump(hexMap, c.canon, { rgb: { r: c.r, g: c.g, b: c.b } });
+        if (!cur.rgb) cur.rgb = { r: c.r, g: c.g, b: c.b };
+      }
+      for (const c of scanRgb(colorZone)) {
+        bump(rgbMap, c.canon, { rgb: { r: c.r, g: c.g, b: c.b } });
+        bump(rgbBaseMap, `${c.r},${c.g},${c.b}`, { rgb: { r: c.r, g: c.g, b: c.b } });
+      }
+
+      // border-radius / font-size 取值
+      if (stripVendor(d.prop) === 'border-radius') {
+        bump(radiusMap, d.value.replace(/\s+/g, ' '), {});
+      }
+      if (stripVendor(d.prop) === 'font-size') {
+        bump(fontSizeMap, d.value.replace(/\s+/g, ' '), {});
+      }
+
+      // token 覆盖率：var() 用量 + 硬编码颜色 + 硬编码长度 px
+      const varZone = maskUrls(d.value);
+      varUseCount += (varZone.match(/\bvar\s*\(/g) || []).length;
+      const hardZone = maskVarCalls(varZone); // 去掉 var(...) 回退值后的「真·硬编码」区
+      hardColorCount += scanHex(hardZone).length + scanRgb(hardZone).length;
+      if (isTokenizableLengthProp(d.prop)) {
+        const pxs = hardZone.match(PX_RE) || [];
+        for (const px of pxs) {
+          hardPx.push({ prop: d.prop, value: px, file: d.file, line: d.line });
+        }
+      }
+    }
+  }
+
+  // 变量重复声明：同名按文档顺序，最后一个生效，其余为死代码
+  const varByName = new Map();
+  for (const v of varDecls) {
+    if (!varByName.has(v.name)) varByName.set(v.name, []);
+    varByName.get(v.name).push(v);
+  }
+  const duplicateVars = [];
+  for (const [name, list] of varByName) {
+    if (list.length > 1) {
+      duplicateVars.push({
+        name,
+        declarations: list,
+        winner: list[list.length - 1],
+        dead: list.slice(0, -1),
+      });
+    }
+  }
+  duplicateVars.sort((a, b) => b.declarations.length - a.declarations.length || a.name.localeCompare(b.name));
+
+  // 近白 / 彩色（hex 与 rgb 基色合并去重）
+  const baseColors = new Map();
+  for (const [canon, v] of hexMap) {
+    const key = `${v.rgb.r},${v.rgb.g},${v.rgb.b}`;
+    if (!baseColors.has(key)) baseColors.set(key, { ...v.rgb, displays: new Set(), count: 0 });
+    const b = baseColors.get(key);
+    b.displays.add(canon);
+    b.count += v.count;
+  }
+  for (const [key, v] of rgbBaseMap) {
+    if (!baseColors.has(key)) baseColors.set(key, { ...v.rgb, displays: new Set(), count: 0 });
+    const b = baseColors.get(key);
+    b.count += v.count;
+  }
+  const colorList = [...baseColors.values()].map((c) => ({
+    ...c,
+    label: [...c.displays][0] || `rgb(${c.r},${c.g},${c.b})`,
+  }));
+  const nearWhite = colorList.filter((c) => isNearWhite(c.r, c.g, c.b));
+  const colored = colorList.filter((c) => !isNearWhite(c.r, c.g, c.b) && !isNeutral(c.r, c.g, c.b));
+  const nearWhiteSet = new Set(nearWhite.map((c) => `${c.r},${c.g},${c.b}`));
+
+  const hexClusters = clusterColors(
+    [...hexMap.entries()].map(([canon, v]) => ({ label: canon, ...v.rgb })),
+  );
+  const rgbBaseClusters = clusterColors(
+    [...rgbBaseMap.entries()].map(([key, v]) => ({
+      label: `rgb(${key.split(',').join(', ')})`,
+      ...v.rgb,
+    })),
+  );
+
+  // 重复声明的选择器
+  const duplicateList = [...selectorMap.values()]
+    .filter((v) => v.count > 1)
+    .map((v) => ({ value: v.value, count: v.count, context: v.context }))
+    .sort((a, b) => b.count - a.count || a.value.localeCompare(b.value));
+
+  // 被同 (上下文, 选择器) 更靠后的声明覆盖掉的属性声明 —— 真正的冗余。
+  // 一条声明只有在「同一上下文、同一选择器下，后面还声明了同一个属性」时才必然无效：
+  // 同选择器 ⇒ 同特异性，后出现者胜。
+  // 注意选择器列表：`.a, .b { color:red }` 后面接 `.a { color:blue }` 时，
+  // color:red 对 .a 已失效、对 .b 仍然有效 —— 删掉它会改变 .b 的颜色。
+  // 所以只统计「列表中每个选择器都被覆盖」的声明，那才是可以安全删除的集合。
+  const declById = new Map(); // id → {prop, context, selectors}
+  const lastFor = new Map(); // `${context}\0${sel}\0${prop}` → 最后一次声明它的 id
+  let seqId = 0;
+  for (const doc of docs) {
+    for (const d of doc.decls) {
+      if (!d.selector || d.atRule) continue;
+      const sels = splitSelectorList(d.selector);
+      if (!sels.length) continue;
+      const id = seqId++;
+      declById.set(id, { prop: d.prop, context: d.context, selectors: sels });
+      for (const sel of sels) lastFor.set(`${d.context}\u0000${sel}\u0000${d.prop}`, id);
+    }
+  }
+  let redundantDeclarations = 0;
+  for (const [id, info] of declById) {
+    const covered = info.selectors.every(
+      (sel) => lastFor.get(`${info.context}\u0000${sel}\u0000${info.prop}`) !== id,
+    );
+    if (covered) redundantDeclarations++;
+  }
+
+  const denom = varUseCount + hardColorCount + hardPx.length;
+  const tokenCoverage = denom === 0 ? 100 : (varUseCount / denom) * 100;
+
+  const radiusValues = [...radiusMap.entries()].map(([value, v]) => ({ value, count: v.count }));
+  const fontSizeValues = [...fontSizeMap.entries()].map(([value, v]) => ({ value, count: v.count }));
+
+  return {
+    fileCount: files.length,
+    lines: docs.reduce((s, d) => s + d.lines, 0),
+    ruleBlocks,
+    distinctSelectors: selectorMap.size,
+    totalSelectorUses: docs.reduce((s, d) => s + d.selectors.length, 0),
+    redundantDeclarations,
+    rootBlocks: rootBlockCount,
+    rootFiles: [...rootFiles],
+    variables: {
+      total: varByName.size,
+      declarations: varDecls.length,
+      duplicates: duplicateVars,
+    },
+    hexColors: {
+      distinct: hexMap.size,
+      occurrences: [...hexMap.values()].reduce((s, v) => s + v.count, 0),
+      top: topByCount(hexMap, TOP_N),
+      nearDuplicates: hexClusters,
+    },
+    rgbColors: {
+      distinct: rgbMap.size,
+      occurrences: [...rgbMap.values()].reduce((s, v) => s + v.count, 0),
+      baseDistinct: rgbBaseMap.size,
+      top: topByCount(rgbMap, TOP_N),
+      baseNearDuplicates: rgbBaseClusters,
+    },
+    coloredDistinct: colored.length,
+    colored: colored.map((c) => c.label).sort(),
+    nearWhiteDistinct: nearWhite.length,
+    nearWhite: nearWhite.map((c) => c.label).sort(),
+    nearWhiteSet,
+    borderRadius: { distinct: radiusValues.length, values: radiusValues },
+    fontSize: { distinct: fontSizeValues.length, values: fontSizeValues },
+    selectors: {
+      duplicateCount: duplicateList.length,
+      duplicateUses: duplicateList.reduce((s, d) => s + d.count, 0),
+      list: duplicateList,
+      top: duplicateList.slice(0, TOP_N),
+    },
+    tokenCoverage: {
+      percent: Math.round(tokenCoverage * 10) / 10,
+      varUses: varUseCount,
+      hardcodedColors: hardColorCount,
+      hardcodedPx: hardPx.length,
+      pxSamples: hardPx.slice(0, MAX_LISTED_PX),
+    },
+    importantCount,
+    notes: [...new Set(docs.flatMap((d) => d.notes))],
+  };
+}
+
+// ───────────────────────────── 评分 ─────────────────────────────
+
+function buildChecks(m) {
+  const previewList = (arr, n = VALUE_PREVIEW) => {
+    if (arr.length <= n) return arr.join(',');
+    return arr.slice(0, n).join(',') + `…(+${arr.length - n})`;
+  };
+  const radiusSorted = [...m.borderRadius.values].map((v) => v.value).sort(cmpCssValue);
+  const fontSizeSorted = [...m.fontSize.values].map((v) => v.value).sort(cmpCssValue);
+  const dupPreview = m.selectors.top.map((d) => `${d.value}×${d.count}`);
+
+  return [
+    {
+      id: 'coloredDistinct',
+      label: '彩色 distinct',
+      value: m.coloredDistinct,
+      valueText: `distinct=${m.coloredDistinct}`,
+      need: `≤${LIMITS.coloredDistinct}`,
+      needText: `(需 ≤${LIMITS.coloredDistinct})`,
+      pass: m.coloredDistinct <= LIMITS.coloredDistinct,
+      extra: previewList(m.colored),
+    },
+    {
+      id: 'radiusDistinct',
+      label: 'border-radius',
+      value: m.borderRadius.distinct,
+      valueText: `distinct=${m.borderRadius.distinct}`,
+      need: `≤${LIMITS.radiusDistinct}`,
+      needText: `(需 ≤${LIMITS.radiusDistinct})`,
+      pass: m.borderRadius.distinct <= LIMITS.radiusDistinct,
+      extra: previewList(radiusSorted),
+    },
+    {
+      id: 'fontSizeDistinct',
+      label: 'font-size',
+      value: m.fontSize.distinct,
+      valueText: `distinct=${m.fontSize.distinct}`,
+      need: `≤${LIMITS.fontSizeDistinct}`,
+      needText: `(需 ≤${LIMITS.fontSizeDistinct})`,
+      pass: m.fontSize.distinct <= LIMITS.fontSizeDistinct,
+      extra: previewList(fontSizeSorted),
+    },
+    {
+      id: 'nearWhiteDistinct',
+      label: '近白背景 distinct',
+      value: m.nearWhiteDistinct,
+      valueText: `distinct=${m.nearWhiteDistinct}`,
+      need: `≤${LIMITS.nearWhiteDistinct}`,
+      needText: `(需 ≤${LIMITS.nearWhiteDistinct})`,
+      pass: m.nearWhiteDistinct <= LIMITS.nearWhiteDistinct,
+      extra: previewList(m.nearWhite),
+    },
+    {
+      id: 'rootBlocks',
+      label: ':root 块',
+      value: m.rootBlocks,
+      valueText: `count=${m.rootBlocks}`,
+      need: `=${LIMITS.rootBlocks}`,
+      needText: `(需 =${LIMITS.rootBlocks})`,
+      pass: m.rootBlocks === LIMITS.rootBlocks,
+      extra: m.rootFiles.join(','),
+    },
+    {
+      id: 'tokenCoverage',
+      label: 'token 覆盖率',
+      value: m.tokenCoverage.percent,
+      valueText: `${m.tokenCoverage.percent.toFixed(1)}%`,
+      need: `≥${LIMITS.tokenCoverage}%`,
+      needText: `(需 ≥${LIMITS.tokenCoverage}%)`,
+      pass: m.tokenCoverage.percent >= LIMITS.tokenCoverage,
+      extra: `var()=${m.tokenCoverage.varUses} 硬编码色=${m.tokenCoverage.hardcodedColors} 硬编码px=${m.tokenCoverage.hardcodedPx}`,
+    },
+    {
+      id: 'rgbBaseDistinct',
+      label: 'rgb/rgba 基色 distinct',
+      value: m.rgbColors.baseDistinct,
+      valueText: `distinct=${m.rgbColors.baseDistinct}`,
+      need: `≤${LIMITS.rgbBaseDistinct}`,
+      needText: `(需 ≤${LIMITS.rgbBaseDistinct})`,
+      pass: m.rgbColors.baseDistinct <= LIMITS.rgbBaseDistinct,
+      extra: previewList(m.rgbColors.top.map((t) => t.value)),
+    },
+    {
+      id: 'redundantDeclarations',
+      label: '冗余声明（同属性重复声明）',
+      value: m.redundantDeclarations,
+      valueText: `count=${m.redundantDeclarations}`,
+      need: `=${LIMITS.redundantDeclarations}`,
+      needText: `(需 =${LIMITS.redundantDeclarations})`,
+      pass: m.redundantDeclarations === LIMITS.redundantDeclarations,
+      extra: '',
+    },
+    {
+      id: 'duplicateSelectors',
+      label: '同一选择器分散在多块',
+      value: m.selectors.duplicateCount,
+      valueText: `count=${m.selectors.duplicateCount}`,
+      need: '提示',
+      needText: '（提示，不参与判定）',
+      pass: m.selectors.duplicateCount === LIMITS.duplicateSelectors,
+      advisory: true,
+      extra: previewList(dupPreview),
+    },
+    {
+      id: 'importantCount',
+      label: '!important',
+      value: m.importantCount,
+      valueText: `count=${m.importantCount}`,
+      need: `=${LIMITS.importantCount}`,
+      needText: `(需 =${LIMITS.importantCount})`,
+      pass: m.importantCount === LIMITS.importantCount,
+      extra: '',
+    },
+  ];
+}
+
+// ───────────────────────────── 输出 ─────────────────────────────
+
+/** 中文按 2 列宽计算，保证终端对齐 */
+function displayWidth(s) {
+  let w = 0;
+  for (const ch of s) {
+    w += /[\u1100-\u115F\u2E80-\uA4CF\uAC00-\uD7A3\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFF60\uFFE0-\uFFE6]/.test(ch)
+      ? 2
+      : 1;
+  }
+  return w;
+}
+
+function padDisplay(s, width) {
+  return s + ' '.repeat(Math.max(0, width - displayWidth(s)));
+}
+
+function summaryLine(checks) {
+  const failed = checks.filter((c) => !c.pass && !c.advisory);
+  if (failed.length === 0) return '全部通过 — 设计系统一致';
+  return `合计 ${failed.length} 项未通过 — 设计系统已漂移`;
+}
+
+function renderScorecard(target, m, checks) {
+  const labelW = Math.max(...checks.map((c) => displayWidth(c.label)));
+  const valueW = Math.max(...checks.map((c) => displayWidth(c.valueText)));
+  const out = [];
+
+  out.push('CSS 设计系统漂移审计');
+  out.push(`目标  ${target}`);
+  out.push(
+    `范围  ${m.fileCount} 个文件 · ${m.lines} 行 · 规则块 ${m.ruleBlocks} · distinct 选择器 ${m.distinctSelectors}`,
+  );
+  out.push('─'.repeat(64));
+  out.push('[评分]');
+  for (const c of checks) {
+    const mark = c.advisory ? 'ℹ️' : c.pass ? '✅' : '❌';
+    const base = `${mark} ${padDisplay(c.label, labelW)}  ${padDisplay(c.valueText, valueW)}  ${c.needText}`;
+    out.push(c.extra ? `${base}   ${c.extra}` : base);
+  }
+
+  out.push('[详情]');
+
+  // :root / 变量
+  const dupVars = m.variables.duplicates;
+  if (dupVars.length === 0) {
+    out.push(
+      `:root 块 ×${m.rootBlocks} · CSS 变量 ${m.variables.total} 个 / 声明 ${m.variables.declarations} 次（无重复声明）`,
+    );
+  } else {
+    out.push(
+      `:root 块 ×${m.rootBlocks} · CSS 变量 ${m.variables.total} 个 / 声明 ${m.variables.declarations} 次 · 重复声明 ${dupVars.length} 个`,
+    );
+    for (const v of dupVars.slice(0, 8)) {
+      const winner = `${v.winner.value} (${path.basename(v.winner.file)}:${v.winner.line})`;
+      const dead = v.dead.map((d) => `${d.value} (${path.basename(d.file)}:${d.line})`).join(' | ');
+      out.push(`  ❌ ${v.name}  声明 ${v.declarations.length} 次 → 生效 ${winner} · 死代码 ${dead}`);
+    }
+    if (dupVars.length > 8) out.push(`  …(+${dupVars.length - 8} 个重复变量)`);
+    out.push('  （同名字段按文档顺序取最后一个生效；跨作用域覆盖不适用此规则）');
+  }
+
+  // hex
+  if (m.hexColors.distinct > 0) {
+    const top = m.hexColors.top.map((t) => `${t.count}×${t.value}`).join(' · ');
+    out.push(
+      `hex 颜色 distinct=${m.hexColors.distinct} / ${m.hexColors.occurrences} 次 — Top${Math.min(TOP_N, m.hexColors.top.length)}: ${top}`,
+    );
+  } else {
+    out.push('hex 颜色 distinct=0');
+  }
+
+  // 近重复聚类
+  const clusters = [...m.hexColors.nearDuplicates, ...m.rgbColors.baseNearDuplicates];
+  if (clusters.length === 0) {
+    out.push(`近重复颜色聚类（RGB 距离 < ${NEAR_DUP_DISTANCE}）: 无`);
+  } else {
+    out.push(`近重复颜色聚类（RGB 距离 < ${NEAR_DUP_DISTANCE}）${clusters.length} 组:`);
+    for (const g of clusters.slice(0, 8)) {
+      const name = hueName(g[0].r, g[0].g, g[0].b);
+      const list = g.map((c) => c.label).join(' · ');
+      out.push(`  [${name}] ${list}  (${g.length} 个)`);
+    }
+    if (clusters.length > 8) out.push(`  …(+${clusters.length - 8} 组)`);
+  }
+
+  // rgb
+  if (m.rgbColors.distinct > 0) {
+    const top = m.rgbColors.top.map((t) => `${t.count}×${t.value}`).join(' · ');
+    out.push(
+      `rgb/rgba distinct=${m.rgbColors.distinct} / ${m.rgbColors.occurrences} 次 · 基色 distinct=${m.rgbColors.baseDistinct} — Top${Math.min(TOP_N, m.rgbColors.top.length)}: ${top}`,
+    );
+  } else {
+    out.push('rgb/rgba distinct=0 · 基色 distinct=0');
+  }
+
+  // radius
+  const radiusList = [...m.borderRadius.values]
+    .sort((a, b) => cmpCssValue(a.value, b.value))
+    .map((v) => `${v.value}×${v.count}`);
+  out.push(`border-radius distinct=${m.borderRadius.distinct} — ${preview(radiusList, DETAIL_PREVIEW)}`);
+
+  // font-size
+  const fontList = [...m.fontSize.values]
+    .sort((a, b) => cmpCssValue(a.value, b.value))
+    .map((v) => `${v.value}×${v.count}`);
+  out.push(`font-size distinct=${m.fontSize.distinct} — ${preview(fontList, DETAIL_PREVIEW)}`);
+
+  // 选择器
+  out.push(`规则块 ${m.ruleBlocks} · distinct 选择器 ${m.distinctSelectors}`);
+  if (m.selectors.duplicateCount === 0) {
+    out.push('同一选择器分散在多块 0 个（提示项）');
+  } else {
+    const list = m.selectors.top.map((d) => `${d.value}×${d.count}`).join(' · ');
+    out.push(
+      `同一选择器分散在多块 ${m.selectors.duplicateCount} 个 / 共 ${m.selectors.duplicateUses} 次（提示项，不参与判定）— Top${m.selectors.top.length}: ${list}`,
+    );
+  }
+
+  out.push(`!important ${m.importantCount}`);
+  out.push(
+    `token 覆盖率 ${m.tokenCoverage.percent.toFixed(1)}% — var() ${m.tokenCoverage.varUses} 次 · 硬编码颜色 ${m.tokenCoverage.hardcodedColors} 个 · 硬编码间距/字号/圆角 px ${m.tokenCoverage.hardcodedPx} 个`,
+  );
+  for (const note of m.notes) out.push(`注意  ${note}`);
+
+  out.push('─'.repeat(64));
+  out.push(summaryLine(checks));
+  return out.join('\n');
+}
+
+function preview(arr, n) {
+  if (arr.length === 0) return '(无)';
+  if (arr.length <= n) return arr.join(' · ');
+  return arr.slice(0, n).join(' · ') + ` · …(+${arr.length - n})`;
+}
+
+function buildJson(target, files, m, checks) {
+  return {
+    tool: 'audit-css',
+    version: 1,
+    target,
+    files,
+    thresholds: {
+      nearDuplicateDistance: NEAR_DUP_DISTANCE,
+      nearWhiteMin: NEAR_WHITE_MIN,
+      neutralSaturation: NEUTRAL_SAT,
+      neutralChroma: NEUTRAL_CHROMA,
+      limits: LIMITS,
+    },
+    totals: {
+      files: m.fileCount,
+      lines: m.lines,
+      ruleBlocks: m.ruleBlocks,
+      distinctSelectors: m.distinctSelectors,
+      selectorUses: m.totalSelectorUses,
+    },
+    root: {
+      blockCount: m.rootBlocks,
+      files: m.rootFiles,
+      variables: m.variables.total,
+      variableDeclarations: m.variables.declarations,
+      duplicates: m.variables.duplicates,
+    },
+    hexColors: m.hexColors,
+    rgbColors: m.rgbColors,
+    colored: { distinct: m.coloredDistinct, values: m.colored },
+    nearWhite: { distinct: m.nearWhiteDistinct, values: m.nearWhite },
+    borderRadius: m.borderRadius,
+    fontSize: m.fontSize,
+    selectors: m.selectors,
+    tokenCoverage: m.tokenCoverage,
+    importantCount: m.importantCount,
+    notes: m.notes,
+    checks: checks.map((c) => ({
+      id: c.id,
+      label: c.label,
+      value: c.value,
+      need: c.need,
+      pass: c.pass,
+      advisory: !!c.advisory,
+    })),
+    failed: checks.filter((c) => !c.pass && !c.advisory).map((c) => c.id),
+    failedCount: checks.filter((c) => !c.pass && !c.advisory).length,
+    passed: checks.every((c) => c.pass || c.advisory),
+  };
+}
+
+function printHelp() {
+  process.stdout.write(
+    [
+      'audit-css.mjs —— CSS「设计系统漂移」审计记分卡（零依赖 · Node 18+）',
+      '',
+      '用法:',
+      '  node audit-css.mjs <css文件或目录> [--ignore <片段>]... [--json] [--quiet] [--help]',
+      '',
+      '参数:',
+      '  <css文件或目录>  目录会递归收集所有 .css 与 .vue（.vue 只取 <style> 块）；',
+      '                   跳过 node_modules / dist / build / .git / coverage / vendor',
+      '',
+      '选项:',
+      '  --ignore <路径片段>  跳过路径中含该片段的文件（可重复）。也接受 --exclude / --ignore=<片段>',
+      '                       用途：排除 tokens.css 这类「字面量本来就合法」的定义文件',
+      '  --json     输出机器可读 JSON（全部原始数据 + pass/fail），无装饰字符',
+      '  --quiet    只输出总结行',
+      '  -h, --help 显示本帮助',
+      '',
+      '评分项（任一 FAIL → 退出码 1）:',
+      '  彩色 distinct ≤ 5        border-radius distinct ≤ 4      font-size distinct ≤ 7',
+      '  近白背景 distinct ≤ 3    :root 块 = 1                   token 覆盖率 ≥ 90%',
+      '  rgb/rgba 基色 distinct ≤ 3   冗余声明（同属性重复声明）= 0   !important = 0',
+      '',
+      '提示项（不参与判定，不影响退出码）:',
+      '  同一选择器分散在多块 —— 归零需合并块，会改变同特异性选择器之间的先后关系，有渲染风险',
+      '',
+      '示例:',
+      '  node audit-css.mjs .\\ui\\src\\styles\\main.css',
+      '  node audit-css.mjs .\\ui\\src\\styles --ignore tokens.css --json > report.json',
+      '  node audit-css.mjs .\\src\\components --quiet',
+      '',
+      '退出码: 0 全部通过；1 有未通过项 / 参数或输入错误。',
+      '',
+    ].join('\n'),
+  );
+}
+
+// ───────────────────────────── 主流程 ─────────────────────────────
+
+function main() {
+  const argv = process.argv.slice(2);
+  let json = false;
+  let quiet = false;
+  let target = null;
+  const ignores = [];
+
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === '--help' || a === '-h') {
+      printHelp();
+      process.exit(0);
+    }
+    if (a === '--json') {
+      json = true;
+      continue;
+    }
+    if (a === '--quiet' || a === '-q') {
+      quiet = true;
+      continue;
+    }
+    if (a === '--ignore' || a === '--exclude') {
+      const v = argv[++i];
+      if (!v) {
+        process.stderr.write(`❌ ${a} 需要一个路径片段参数\n`);
+        process.exit(1);
+      }
+      ignores.push(v);
+      continue;
+    }
+    if (a.startsWith('--ignore=') || a.startsWith('--exclude=')) {
+      const v = a.slice(a.indexOf('=') + 1);
+      if (!v) {
+        process.stderr.write(`❌ ${a} 缺少值\n`);
+        process.exit(1);
+      }
+      ignores.push(v);
+      continue;
+    }
+    if (a.startsWith('-')) {
+      process.stderr.write(`❌ 未知选项 ${a}（用 --help 查看用法）\n`);
+      process.exit(1);
+    }
+    if (target === null) target = a;
+    else {
+      process.stderr.write(`❌ 只接受一个目标路径，多给了: ${a}\n`);
+      process.exit(1);
+    }
+  }
+
+  if (!target) {
+    process.stderr.write('❌ 缺少目标：需要 <css文件或目录>（用 --help 查看用法）\n');
+    process.exit(1);
+  }
+
+  const abs = path.resolve(target);
+  if (!fs.existsSync(abs)) {
+    process.stderr.write(`❌ 路径不存在: ${abs}\n`);
+    process.exit(1);
+  }
+  const st = fs.statSync(abs);
+  if (!st.isDirectory() && !st.isFile()) {
+    process.stderr.write(`❌ 不是文件也不是目录: ${abs}\n`);
+    process.exit(1);
+  }
+  if (st.isFile()) {
+    const ext = path.extname(abs).toLowerCase();
+    if (ext !== '.css' && ext !== '.vue') {
+      process.stderr.write(`❌ 只支持 .css / .vue 文件，收到: ${path.basename(abs)}\n`);
+      process.exit(1);
+    }
+  }
+
+  const allFiles = collectFiles(abs);
+  const files = filterIgnored(allFiles, ignores);
+  if (files.length === 0) {
+    process.stderr.write(
+      ignores.length
+        ? `❌ 忽略规则过滤后没有剩余文件: ${abs}（忽略: ${ignores.join(', ')}）\n`
+        : `❌ 未找到任何 .css / .vue 文件: ${abs}\n`,
+    );
+    process.exit(1);
+  }
+
+  const docs = [];
+  for (const f of files) {
+    try {
+      docs.push(analyzeFile(f));
+    } catch (err) {
+      process.stderr.write(`❌ 读取失败 ${f}: ${err && err.message ? err.message : err}\n`);
+      process.exit(1);
+    }
+  }
+
+  const metrics = computeMetrics(docs, files);
+  const checks = buildChecks(metrics);
+  const failed = checks.filter((c) => !c.pass && !c.advisory);
+
+  if (json) {
+    process.stdout.write(JSON.stringify(buildJson(abs, files, metrics, checks), null, 2) + '\n');
+  } else if (quiet) {
+    process.stdout.write(summaryLine(checks) + '\n');
+  } else {
+    process.stdout.write(renderScorecard(abs, metrics, checks) + '\n');
+  }
+
+  process.exit(failed.length === 0 ? 0 : 1);
+}
+
+main();
diff --git a/ui/scripts/capture.mjs b/ui/scripts/capture.mjs
new file mode 100644
index 0000000..407cbad
--- /dev/null
+++ b/ui/scripts/capture.mjs
@@ -0,0 +1,454 @@
+#!/usr/bin/env node
+/**
+ * capture.mjs —— 无头浏览器多宽度截图（零依赖 · Node 18+ · 跨平台）
+ *
+ * 用途
+ *   把一个 URL（或本地 HTML 文件）在多个视口宽度下各截一张 PNG，
+ *   供 AI 或人做响应式视觉验收。
+ *
+ * 用法
+ *   node capture.mjs <url> <outDir> [选项]
+ *
+ * 选项
+ *   --widths 375,768,1440   逗号分隔的视口宽度列表（默认 375,768,1440）
+ *   --height 900            视口高度，px（默认 900）
+ *   --budget 1500           --virtual-time-budget，毫秒（默认 1500）
+ *   --scale 1               --force-device-scale-factor（默认 1）
+ *   --name shot             输出文件名前缀 → shot-<width>.png（默认 shot）
+ *   --chrome <path>         指定浏览器可执行文件（优先级最高）
+ *   --help                  显示本帮助
+ *
+ * 示例
+ *   node capture.mjs "file:///A:/proj/index.html" A:\proj\shots --widths 375,1440
+ *   node capture.mjs https://example.com .\shots --height 1200 --scale 2 --name home
+ *   node capture.mjs .\local\page.html .\shots            REM 本地路径自动转 file:///
+ *   $env:CHROME_PATH = "D:\Chrome\chrome.exe"; node capture.mjs https://example.com .\shots
+ *
+ * 浏览器探测顺序
+ *   1) --chrome <path>   2) 环境变量 CHROME_PATH   3) 自动探测：
+ *   Windows : %ProgramFiles%\Google\Chrome\Application\chrome.exe
+ *             %ProgramFiles(x86)%\Google\Chrome\Application\chrome.exe
+ *             %LOCALAPPDATA%\Google\Chrome\Application\chrome.exe
+ *             %ProgramFiles%\Microsoft\Edge\Application\msedge.exe
+ *             %ProgramFiles(x86)%\Microsoft\Edge\Application\msedge.exe
+ *   macOS   : /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
+ *   Linux   : PATH 中的 google-chrome / chromium / chromium-browser
+ *
+ * 设计与约束（重要）
+ *   - 子进程一律用 spawnSync 且 stdio: 'ignore'：绝不管道 stdout/stderr。
+ *     某些受限沙箱下管道会抛 EPERM，因此脚本完全不读取浏览器输出。
+ *   - 成功与否只看输出 PNG 是否存在且字节数 > 0（先删除旧文件再截图，避免误判）。
+ *   - 额外加了 --user-data-dir=<临时目录>：避免与本机已运行的 Chrome/Edge 争用
+ *     默认用户配置导致 headless 进程直接退出、截不出图。
+ *
+ * 退出码
+ *   0 全部成功 · 1 参数错误 / 找不到浏览器 / 截图失败
+ */
+
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { spawnSync } from 'node:child_process';
+
+const DEFAULT_WIDTHS = [375, 768, 1440];
+const CHROME_TIMEOUT_MS = 120000; // 单张截图最长等待
+
+// ───────────────────────────── 小工具 ─────────────────────────────
+
+/** 打印错误并退出 1 */
+function die(msg) {
+  process.stderr.write(`\n❌ ${msg}\n`);
+  process.exit(1);
+}
+
+/** 数字参数校验 */
+function toPositiveInt(raw, flag) {
+  const n = Number.parseInt(String(raw).trim(), 10);
+  if (!Number.isFinite(n) || n <= 0) {
+    die(`${flag} 需要一个正整数，收到: ${JSON.stringify(raw)}`);
+  }
+  return n;
+}
+
+/** 数字参数校验（允许小数，如 --scale 1.5） */
+function toPositiveNumber(raw, flag) {
+  const n = Number.parseFloat(String(raw).trim());
+  if (!Number.isFinite(n) || n <= 0) {
+    die(`${flag} 需要一个正数，收到: ${JSON.stringify(raw)}`);
+  }
+  return n;
+}
+
+/**
+ * 本地绝对路径 → file:/// URL。
+ * Windows: A:\x\y.html → file:///A:/x/y.html（保留盘符冒号，空格转 %20）
+ */
+function toFileUrl(absPath) {
+  let p = absPath.replace(/\\/g, '/');
+  if (!p.startsWith('/')) p = '/' + p; // A:/x → /A:/x，于是 file:// + /A:/x = file:///A:/x
+  // 只编码真正需要编码的字符；保留 : / 等 URL 合法字符，保证 file:///A:/x 形态
+  const safe = /[A-Za-z0-9\-._~!$&'()*+,;=:@/]/;
+  p = Array.from(p)
+    .map((ch) => (safe.test(ch) ? ch : encodeURIComponent(ch)))
+    .join('');
+  return 'file://' + p;
+}
+
+/**
+ * 解析位置参数里的 URL：
+ *   - 已有 scheme（http/https/file/...）→ 原样使用
+ *   - 本地路径（绝对 / 相对 / UNC / 盘符）→ 转 file:/// 并校验文件存在
+ */
+function normalizeTarget(input) {
+  const raw = String(input).trim();
+  if (!raw) die('缺少 <url> 参数');
+  if (/^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//.test(raw)) {
+    return { url: raw, local: /^file:\/\//i.test(raw) };
+  }
+  const abs = path.resolve(raw);
+  if (!fs.existsSync(abs)) {
+    die(`本地文件不存在: ${abs}`);
+  }
+  return { url: toFileUrl(abs), local: true, localPath: abs };
+}
+
+// ───────────────────────── 浏览器可执行文件探测 ─────────────────────────
+
+/** Windows 候选路径（严格按约定顺序） */
+function windowsCandidates() {
+  const list = [];
+  const pf = process.env['ProgramFiles'];
+  const pf86 = process.env['ProgramFiles(x86)'];
+  const localApp = process.env['LOCALAPPDATA'];
+  if (pf) list.push(path.join(pf, 'Google', 'Chrome', 'Application', 'chrome.exe'));
+  if (pf86) list.push(path.join(pf86, 'Google', 'Chrome', 'Application', 'chrome.exe'));
+  if (localApp) list.push(path.join(localApp, 'Google', 'Chrome', 'Application', 'chrome.exe'));
+  if (pf) list.push(path.join(pf, 'Microsoft', 'Edge', 'Application', 'msedge.exe'));
+  if (pf86) list.push(path.join(pf86, 'Microsoft', 'Edge', 'Application', 'msedge.exe'));
+  return list;
+}
+
+/** macOS 候选路径 */
+function macCandidates() {
+  return [
+    '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    '/Applications/Chromium.app/Contents/MacOS/Chromium',
+    '/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge',
+  ];
+}
+
+/** Linux：在 PATH 里查找命令名 */
+function linuxCandidates() {
+  const names = ['google-chrome', 'chromium', 'chromium-browser', 'google-chrome-stable'];
+  const dirs = (process.env.PATH || '').split(path.delimiter).filter(Boolean);
+  const out = [];
+  for (const name of names) {
+    for (const dir of dirs) out.push(path.join(dir, name));
+  }
+  return out;
+}
+
+/** 按平台列出候选；返回 {candidates, findInPath:boolean} */
+function candidatesForPlatform() {
+  if (process.platform === 'win32') return { candidates: windowsCandidates(), pathSearch: false };
+  if (process.platform === 'darwin') return { candidates: macCandidates(), pathSearch: false };
+  return { candidates: linuxCandidates(), pathSearch: true };
+}
+
+/** 候选是否为「可执行的普通文件」 */
+function isUsable(candidate, pathSearch) {
+  try {
+    const st = fs.statSync(candidate);
+    if (!st.isFile()) return false;
+  } catch {
+    return false;
+  }
+  if (pathSearch) {
+    try {
+      fs.accessSync(candidate, fs.constants.X_OK);
+    } catch {
+      return false;
+    }
+  }
+  return true;
+}
+
+/** 解析出浏览器路径；失败时报错并列出所有尝试过的路径 */
+function resolveChrome(explicit) {
+  // 1) --chrome 优先级最高，指定了就必须可用
+  if (explicit) {
+    const abs = path.resolve(explicit);
+    if (!isUsable(abs, process.platform !== 'win32' && process.platform !== 'darwin')) {
+      die(`--chrome 指定的浏览器不可用: ${abs}\n   请检查路径是否正确、是否为文件。`);
+    }
+    return abs;
+  }
+
+  // 2) 环境变量 CHROME_PATH：无效时给出警告并继续自动探测
+  const tried = [];
+  const fromEnv = process.env.CHROME_PATH;
+  if (fromEnv) {
+    const abs = path.resolve(fromEnv);
+    if (isUsable(abs, false)) return abs;
+    tried.push(`CHROME_PATH=${fromEnv}（不可用，已忽略）`);
+    process.stderr.write(`⚠️  环境变量 CHROME_PATH 指向的文件不可用，继续自动探测: ${abs}\n`);
+  }
+
+  // 3) 自动探测
+  const { candidates, pathSearch } = candidatesForPlatform();
+  for (const c of candidates) {
+    tried.push(c);
+    if (isUsable(c, pathSearch)) return c;
+  }
+
+  die(
+    [
+      '未找到可用的浏览器（Chrome / Edge / Chromium）。',
+      '已尝试以下位置：',
+      ...tried.map((t) => `  - ${t}`),
+      '',
+      '解决办法（任选其一）：',
+      '  - 用 --chrome "<浏览器路径>" 显式指定',
+      '  - 设置环境变量 CHROME_PATH=<浏览器路径>',
+      '  - 安装 Google Chrome 或 Microsoft Edge',
+    ].join('\n'),
+  );
+}
+
+// ───────────────────────────── 截图 ─────────────────────────────
+
+/**
+ * 用 spawnSync 跑一次 headless 截图。
+ * 注意：stdio 一律 'ignore'，不捕获任何子进程输出（受限沙箱下管道会 EPERM）。
+ */
+function captureOne({ chrome, url, outFile, width, height, budget, scale, profileDir }) {
+  // 先删掉旧文件：否则「文件存在」无法证明这次真的截成功了
+  try {
+    if (fs.existsSync(outFile)) fs.rmSync(outFile);
+  } catch {
+    /* 删不掉就让后面的校验兜底 */
+  }
+
+  const args = [
+    '--headless=new',
+    '--disable-gpu',
+    '--hide-scrollbars',
+    '--no-sandbox',
+    `--force-device-scale-factor=${scale}`,
+    `--virtual-time-budget=${budget}`,
+    `--window-size=${width},${height}`,
+    `--user-data-dir=${profileDir}`,
+    `--screenshot=${outFile}`,
+    url,
+  ];
+
+  const res = spawnSync(chrome, args, {
+    stdio: 'ignore', // 关键：绝不管道化子进程 stdio
+    timeout: CHROME_TIMEOUT_MS,
+    windowsHide: true,
+  });
+
+  // 只看输出文件：存在且字节数 > 0 即成功
+  let bytes = 0;
+  try {
+    const st = fs.statSync(outFile);
+    if (st.isFile()) bytes = st.size;
+  } catch {
+    bytes = 0;
+  }
+
+  if (bytes > 0) return { ok: true, bytes };
+
+  const why = [];
+  if (res.error) why.push(`spawn error: ${res.error.message}`);
+  if (res.signal) why.push(`被信号终止: ${res.signal}`);
+  if (typeof res.status === 'number') why.push(`退出码: ${res.status}`);
+  return {
+    ok: false,
+    bytes: 0,
+    reason: why.join(' / ') || '未知原因',
+  };
+}
+
+// ───────────────────────────── 帮助 ─────────────────────────────
+
+function printHelp() {
+  process.stdout.write(
+    [
+      'capture.mjs —— 无头浏览器多宽度截图（零依赖 · Node 18+）',
+      '',
+      '用法:',
+      '  node capture.mjs <url> <outDir> [--widths 375,768,1440] [--height 900]',
+      '                    [--budget 1500] [--scale 1] [--name shot] [--chrome <path>] [--help]',
+      '',
+      '参数:',
+      '  <url>                   http:// | https:// | file:// 开头的 URL，或本地 HTML 文件路径',
+      '                          （本地相对/绝对路径会自动转成 file:/// 形式）',
+      '  <outDir>                输出目录，不存在则递归创建',
+      '',
+      '选项:',
+      '  --widths <列表>         逗号分隔的宽度，每个宽度截一张（默认 375,768,1440）',
+      '  --height <px>           视口高度（默认 900）',
+      '  --budget <ms>           --virtual-time-budget，等待页面渲染的虚拟时间（默认 1500）',
+      '  --scale <n>             --force-device-scale-factor（默认 1；2 = 高清二倍图）',
+      '  --name <前缀>           文件名前缀，输出 <前缀>-<width>.png（默认 shot）',
+      '  --chrome <path>         浏览器可执行文件，优先于 CHROME_PATH 与自动探测',
+      '  -h, --help              显示本帮助',
+      '',
+      '示例:',
+      '  node capture.mjs "file:///A:/proj/index.html" A:\\proj\\shots --widths 375,1440',
+      '  node capture.mjs https://example.com .\\shots --height 1200 --scale 2 --name home',
+      '  node capture.mjs .\\page.html .\\shots --chrome "D:\\Chrome\\chrome.exe"',
+      '  $env:CHROME_PATH = "D:\\Chrome\\chrome.exe"; node capture.mjs https://example.com .\\shots',
+      '',
+      '说明:',
+      '  浏览器探测顺序: --chrome > 环境变量 CHROME_PATH > 自动探测（Chrome / Edge / Chromium）。',
+      '  子进程以 stdio: "ignore" 启动，完全不读取浏览器 stdout/stderr（受限沙箱下管道会 EPERM）；',
+      '  成功与否只看输出 PNG 是否存在且字节数 > 0。',
+      '  退出码: 0 全部成功；1 参数错误 / 未找到浏览器 / 任一张截图失败。',
+      '',
+    ].join('\n'),
+  );
+}
+
+// ───────────────────────────── 主流程 ─────────────────────────────
+
+function parseArgs(argv) {
+  const opts = {
+    widths: DEFAULT_WIDTHS,
+    height: 900,
+    budget: 1500,
+    scale: 1,
+    name: 'shot',
+    chrome: null,
+    help: false,
+  };
+  const positional = [];
+
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === '--help' || a === '-h') {
+      opts.help = true;
+      continue;
+    }
+    if (a.startsWith('--')) {
+      let key;
+      let val;
+      const eq = a.indexOf('=');
+      if (eq > 2) {
+        key = a.slice(2, eq);
+        val = a.slice(eq + 1);
+      } else {
+        key = a.slice(2);
+        val = argv[i + 1];
+        if (val === undefined || (val.startsWith('--') && val !== '--')) {
+          die(`选项 --${key} 缺少取值`);
+        }
+        i++;
+      }
+      switch (key) {
+        case 'widths':
+          opts.widths = String(val)
+            .split(',')
+            .map((s) => s.trim())
+            .filter(Boolean)
+            .map((s) => toPositiveInt(s, '--widths'));
+          if (opts.widths.length === 0) die('--widths 至少需要一个宽度');
+          break;
+        case 'height':
+          opts.height = toPositiveInt(val, '--height');
+          break;
+        case 'budget':
+          opts.budget = toPositiveInt(val, '--budget');
+          break;
+        case 'scale':
+          opts.scale = toPositiveNumber(val, '--scale');
+          break;
+        case 'name':
+          opts.name = String(val).trim();
+          if (!opts.name) die('--name 不能为空');
+          break;
+        case 'chrome':
+          opts.chrome = String(val).trim();
+          if (!opts.chrome) die('--chrome 不能为空');
+          break;
+        default:
+          die(`未知选项 --${key}（用 --help 查看用法）`);
+      }
+      continue;
+    }
+    positional.push(a);
+  }
+
+  if (!opts.help && positional.length < 2) {
+    die('参数不足：需要 <url> 和 <outDir>（用 --help 查看用法）');
+  }
+  opts.positional = positional;
+  return opts;
+}
+
+function main() {
+  const opts = parseArgs(process.argv.slice(2));
+  if (opts.help) {
+    printHelp();
+    process.exit(0);
+  }
+
+  const [rawUrl, rawOutDir] = opts.positional;
+  const target = normalizeTarget(rawUrl);
+
+  const outDir = path.resolve(rawOutDir);
+  fs.mkdirSync(outDir, { recursive: true }); // 递归创建输出目录
+
+  const chrome = resolveChrome(opts.chrome);
+  const safeName = opts.name.replace(/[\\/:*?"<>|]+/g, '_'); // 防文件名里混入路径分隔符
+  const profileDir = path.join(os.tmpdir(), `dsh-capture-${process.pid}`);
+
+  process.stdout.write(
+    [
+      `浏览器  ${chrome}`,
+      `目标    ${target.url}`,
+      `输出    ${outDir}`,
+      `参数    widths=${opts.widths.join(',')} height=${opts.height} budget=${opts.budget} scale=${opts.scale}`,
+      '',
+    ].join('\n'),
+  );
+
+  const started = Date.now();
+  const results = [];
+
+  for (const width of opts.widths) {
+    const outFile = path.join(outDir, `${safeName}-${width}.png`);
+    const r = captureOne({
+      chrome,
+      url: target.url,
+      outFile,
+      width,
+      height: opts.height,
+      budget: opts.budget,
+      scale: opts.scale,
+      profileDir,
+    });
+    if (r.ok) {
+      const kb = (r.bytes / 1024).toFixed(1);
+      process.stdout.write(`✅ ${String(width).padStart(4)}  ${outFile}  ${r.bytes} B (${kb} KB)\n`);
+      results.push({ width, file: outFile, bytes: r.bytes, ok: true });
+    } else {
+      process.stderr.write(`❌ ${String(width).padStart(4)}  截图失败 → ${outFile}\n      原因: ${r.reason}\n`);
+      results.push({ width, file: outFile, bytes: 0, ok: false, reason: r.reason });
+    }
+  }
+
+  const totalMs = Date.now() - started;
+  const okCount = results.filter((r) => r.ok).length;
+
+  if (okCount !== results.length) {
+    process.stderr.write(`\n完成: ${okCount}/${results.length} 张成功 · 总耗时 ${totalMs} ms\n`);
+    process.exit(1);
+  }
+
+  process.stdout.write(`\n完成: ${okCount}/${results.length} 张成功 · 总耗时 ${totalMs} ms\n`);
+  process.exit(0);
+}
+
+main();
diff --git a/ui/scripts/check-contrast.mjs b/ui/scripts/check-contrast.mjs
new file mode 100644
index 0000000..d783923
--- /dev/null
+++ b/ui/scripts/check-contrast.mjs
@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+// 对比度检查：把 tokens.css 里真实用到的「前景 × 背景」组合量一遍 WCAG 对比度。
+//
+//   node scripts/check-contrast.mjs           人类可读表格；有不合格项则 exit 1
+//   node scripts/check-contrast.mjs --json    机器可读
+//
+// 为什么需要它：对比度是「看着够不够灰」这种主观判断最容易搞错的地方。
+// token 文件里躺着几个 3.2:1 的浅灰文字，肉眼完全看不出来 —— 只有算一遍才知道。
+import fs from 'node:fs';
+import path from 'node:path';
+
+const TOKENS = process.argv.includes('--json') ? null : path.resolve('src/styles/tokens.css');
+const FILE = TOKENS || path.resolve('src/styles/tokens.css');
+const MIN_TEXT = 4.5;   // WCAG AA 正文
+const MIN_LARGE = 3.0;  // WCAG AA 大字 / 非文本（边框、图标）
+
+function parseTokens(file) {
+  const src = fs.readFileSync(file, 'utf8');
+  const out = new Map();
+  // 只看未被注释掉的声明：先把注释整段挖掉
+  const bare = src.replace(/\/\*[\s\S]*?\*\//g, '');
+  for (const m of bare.matchAll(/(--[a-z0-9-]+)\s*:\s*([^;]+);/gi)) {
+    const v = m[2].trim();
+    if (/^#[0-9a-f]{3,8}$/i.test(v)) out.set(m[1], v);
+  }
+  return out;
+}
+
+function lum(hex) {
+  let h = hex.replace('#', '');
+  if (h.length === 3) h = h.split('').map((c) => c + c).join('');
+  const ch = [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16) / 255);
+  const lin = ch.map((c) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
+  return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2];
+}
+
+function ratio(fg, bg) {
+  const a = lum(fg), b = lum(bg);
+  const [hi, lo] = a > b ? [a, b] : [b, a];
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+// 真实存在的组合：前景 token → 它会落在哪些背景 token 上
+const PAIRS = [
+  ['--c-text', ['--c-bg', '--c-bg-subtle', '--c-surface', '--c-surface-hover', '--c-accent-subtle', '--c-success-subtle', '--c-warning-subtle', '--c-danger-subtle']],
+  ['--c-text-secondary', ['--c-bg', '--c-bg-subtle', '--c-surface', '--c-surface-hover', '--c-accent-subtle', '--c-success-subtle', '--c-warning-subtle', '--c-danger-subtle']],
+  ['--c-text-muted', ['--c-bg', '--c-bg-subtle', '--c-surface', '--c-surface-hover']],
+  ['--c-text-inverse', ['--c-accent', '--c-accent-hover', '--c-accent-active', '--c-success', '--c-warning', '--c-danger', '--c-text']],
+  ['--c-accent', ['--c-bg', '--c-bg-subtle', '--c-surface', '--c-accent-subtle']],
+  ['--c-success', ['--c-bg', '--c-surface', '--c-success-subtle']],
+  ['--c-warning', ['--c-bg', '--c-surface', '--c-warning-subtle']],
+  ['--c-danger', ['--c-bg', '--c-surface', '--c-danger-subtle']],
+];
+
+const T = parseTokens(FILE);
+const rows = [];
+const fails = [];
+const missing = new Set();
+
+for (const [fgName, bgs] of PAIRS) {
+  const fg = T.get(fgName);
+  if (!fg) { missing.add(fgName); continue; }
+  for (const bgName of bgs) {
+    const bg = T.get(bgName);
+    if (!bg) { missing.add(bgName); continue; }
+    const r = ratio(fg, bg);
+    const ok = r >= MIN_TEXT;
+    rows.push({ fg: fgName, bg: bgName, ratio: Math.round(r * 100) / 100, ok });
+    if (!ok) fails.push(`${fgName} (${fg}) on ${bgName} (${bg}) = ${r.toFixed(2)}:1  < ${MIN_TEXT}`);
+  }
+}
+
+if (missing.size) {
+  console.error('❌ tokens.css 缺少以下 token（检查清单已过期）：' + [...missing].join(', '));
+  process.exit(1);
+}
+
+if (process.argv.includes('--json')) {
+  console.log(JSON.stringify({ min: MIN_TEXT, rows, fails }, null, 2));
+} else {
+  const w = Math.max(...rows.map((r) => r.fg.length));
+  let lastFg = '';
+  for (const r of rows) {
+    if (r.fg !== lastFg) { console.log(`\n${r.fg}`); lastFg = r.fg; }
+    console.log(`  ${r.ok ? '✅' : '❌'} ${r.ratio.toFixed(2).padStart(5)}:1  on ${r.bg}`);
+  }
+  console.log(`\n共 ${rows.length} 组，${fails.length} 组不达标（门槛 ${MIN_TEXT}:1）`);
+  for (const f of fails) console.log('  ❌ ' + f);
+}
+
+process.exit(fails.length ? 1 : 0);
diff --git a/ui/src/api/types.js b/ui/src/api/types.js
new file mode 100644
index 0000000..5a04446
--- /dev/null
+++ b/ui/src/api/types.js
@@ -0,0 +1,254 @@
+/**
+ * 契约层 —— 后端返回数据的形状（唯一真相源）。
+ *
+ * 本项目用 JavaScript 而非 TypeScript，所以契约用 JSDoc `@typedef` 表达：
+ * 编辑器能补全、能报错，但不需要引入 TS 工具链。
+ *
+ * 引用方式：`/** @type {import('./types.js').Thread} *\/`
+ *
+ * ⚠️ 三条规则
+ * 1. **本文件的形状必须以真实响应为准**，不许凭印象写。当前形状全部由
+ *    `http://127.0.0.1:2024/dashboard/api` 的真实响应实测得到（见文件末尾「取证记录」）。
+ * 2. 组件**永远不直接 fetch**。所有网络访问走 `client.js`（axios）或 `sse.js`（流式）。
+ * 3. 后端改了形状，**先改本文件**，再改用到它的组件 —— 顺序反了就等于没有契约。
+ *
+ * @module api/types
+ */
+
+// ───────────────────────── 基础 ─────────────────────────
+
+/**
+ * 当前登录用户。`GET /me`
+ * @typedef {object} Me
+ * @property {string} login
+ * @property {string|null} email
+ * @property {string|null} avatar_url
+ * @property {boolean} is_admin
+ * @property {boolean} slack_oauth_enabled
+ */
+
+/**
+ * 一个可选模型。`GET /options` → `models[]`
+ * @typedef {object} ModelOption
+ * @property {string} id            例如 "deepseek-flash"
+ * @property {string} label
+ * @property {string[]} efforts     例如 ["default"]
+ * @property {string} default_effort
+ * @property {boolean} supports_images
+ */
+
+/**
+ * 一个可选仓库托管方。`GET /options` → `providers[]`
+ * @typedef {object} ProviderOption
+ * @property {string} id            例如 "github"
+ * @property {string} label         例如 "GitHub"
+ * @property {string} url_placeholder
+ */
+
+/**
+ * 全局可选项与默认值。`GET /options`
+ * @typedef {object} Options
+ * @property {string} default_repo
+ * @property {string} default_provider
+ * @property {ProviderOption[]} providers
+ * @property {string} repo_placeholder
+ * @property {ModelOption[]} models
+ * @property {string} default_agent_model
+ * @property {string} default_agent_reasoning_effort
+ * @property {string} default_agent_subagent_model
+ * @property {string} default_agent_subagent_reasoning_effort
+ */
+
+// ───────────────────────── 消息 ─────────────────────────
+
+/**
+ * 消息块：纯文本。
+ * @typedef {object} TextChunk
+ * @property {'text'} kind
+ * @property {string} text
+ */
+
+/**
+ * 消息块：一次运行的元信息（运行轨迹折叠条的标题行）。
+ * 注意这里**只有元信息**，详细事件要用 `activity.run_id` 再去
+ * `GET /threads/{threadId}/runs/{runId}/events` 取。
+ * @typedef {object} RunActivityChunk
+ * @property {'run_activity'} kind
+ * @property {RunActivity} activity
+ */
+
+/**
+ * @typedef {object} RunActivity
+ * @property {string} run_id
+ * @property {'queued'|'running'|'completed'|'failed'|'cancelled'} status
+ * @property {string} started_at   ISO 8601（带 +08:00 偏移）
+ * @property {string|null} finished_at
+ * @property {string|null} error
+ */
+
+/**
+ * 消息块：一份等待用户批准/已批准的技术方案。
+ * @typedef {object} ProposalChunk
+ * @property {'proposal'} kind
+ * @property {'pending'|'approved'|'rejected'|'superseded'} status
+ * @property {string} plan_id
+ * @property {number} version
+ * @property {string} plan_text     Markdown
+ * @property {string} source_prompt 触发这份方案的原始输入
+ */
+
+/**
+ * 清单里的一项。
+ * @typedef {object} TodoItem
+ * @property {'pending'|'in_progress'|'completed'} status
+ * @property {string} content
+ */
+
+/**
+ * 消息块：计划清单。
+ * @typedef {object} TodoChunk
+ * @property {'todo'} kind
+ * @property {TodoItem[]} todos
+ */
+
+/**
+ * 消息块：一次错误的正文（渲染成 `.error-banner`，与其它块**共存**而不是取而代之）。
+ * @typedef {object} ErrorChunk
+ * @property {'error'} kind
+ * @property {string} text
+ */
+
+/**
+ * 消息块：需要人来拍板的一次介入。
+ * `status` 为 `pending` 时卡片渲染成表单；`resuming` 时只显示「正在恢复处理中」。
+ * @typedef {object} InterventionChunk
+ * @property {'intervention'} kind
+ * @property {string} intervention_id
+ * @property {'pending'|'resuming'|'resolved'} status
+ * @property {string} reason
+ * @property {string} question
+ * @property {string[]} [options]   可选的快捷选项；为空时只显示自由输入
+ */
+
+/**
+ * 消息块联合类型。**渲染时按 `kind` 分支，不要用 `if (chunk.text)` 猜。**
+ * @typedef {TextChunk | RunActivityChunk | TodoChunk | ProposalChunk | InterventionChunk | ErrorChunk} MessageChunk
+ */
+
+/**
+ * 一条消息。
+ * @typedef {object} Message
+ * @property {string} id
+ * @property {'user'|'agent'} author   注意是 `author` 不是 `role`
+ * @property {string} timestamp        ISO 8601
+ * @property {MessageChunk[]} chunks
+ */
+
+// ───────────────────────── 运行轨迹 ─────────────────────────
+
+/**
+ * 一条运行事件。`GET /threads/{threadId}/runs/{runId}/events` → `events[]`
+ * @typedef {object} RunEvent
+ * @property {string} id
+ * @property {'think'|'other'|'todo'} kind
+ * @property {string} title
+ * @property {'pending'|'running'|'completed'|'failed'} status
+ * @property {string} created_at  ISO 8601
+ * @property {object} detail      形状随 kind 变化（观测到的是 `{}`）
+ */
+
+/**
+ * 运行事件的响应外壳。
+ * @typedef {object} RunEventsResponse
+ * @property {string} run_id
+ * @property {RunEvent[]} events
+ */
+
+// ───────────────────────── 会话与项目 ─────────────────────────
+
+/**
+ * 一个会话。`GET /threads` → 数组元素（消息内联，响应可能达数百 KB）
+ * @typedef {object} Thread
+ * @property {string} id
+ * @property {string} projectId
+ * @property {boolean} chatOnly
+ * @property {string} title
+ * @property {string} repo
+ * @property {string} repoFullName   可能为空字符串（不是 null）
+ * @property {string} provider
+ * @property {string|null} branch
+ * @property {string} baseBranch
+ * @property {string} model
+ * @property {string|null} effort
+ * @property {string} source
+ * @property {'idle'|'running'|'finished'|'error'} status
+ * @property {number} createdAt       毫秒时间戳（不是 ISO 字符串）
+ * @property {number} updatedAt       毫秒时间戳
+ * @property {string} draftContent
+ * @property {Message[]} messages
+ * @property {object|null} pendingIntervention
+ * @property {object|null} pr
+ * @property {object|null} latestPlan
+ * @property {object|null} diffStats
+ * @property {string[]} changedFiles
+ */
+
+/**
+ * 一个项目（含其会话）。`GET /projects` → 数组元素
+ * @typedef {object} Project
+ * @property {string} id
+ * @property {string} name
+ * @property {string|null} provider
+ * @property {string|null} repo
+ * @property {string} repoFullName
+ * @property {boolean} legacy         true = 「历史会话」这类无仓库的兜底分组
+ * @property {Thread[]} conversations
+ */
+
+// ───────────────────────── 流式（SSE） ─────────────────────────
+
+/**
+ * `sse.js` 解析后交给 `onEvent` 的事件。
+ * @typedef {object} StreamEvent
+ * @property {string} event   SSE `event:` 名（服务端也可能改用 body 里的 `event` 字段）
+ * @property {object} data    JSON 解析后的负载
+ * @property {string|null} id SSE `id:` 名
+ */
+
+/**
+ * 三个流式出口（都在 `sse.js` 里）：
+ * - `POST /threads/stream-message`（新会话）
+ * - `POST /threads/{threadId}/stream-message`（已有会话）
+ * - `GET  /threads/{threadId}/runs/{runId}/stream?after=<n>`（断线重连 / 续看运行）
+ *
+ * 四态要求（DESIGN.md 第 6 节）：pending / streaming / done / error 都必须在
+ * 有真后端之前就定死，否则接流式时页面会缺状态。
+ */
+
+// ───────────────────────── 取证记录 ─────────────────────────
+
+/**
+ * 实测于 `http://127.0.0.1:2024/dashboard/api`（Postgres 后端，24 个会话 / 201 条消息 / 71 个 run）：
+ *
+ * | 端点 | HTTP | 大小 | 说明 |
+ * |---|---|---|---|
+ * | `GET /me` | 200 | 93 B | |
+ * | `GET /options` | 200 | 775 B | |
+ * | `GET /projects` | 200 | 6399 B | 4 个项目 |
+ * | `GET /threads` | 200 | 410459 B | 24 个会话，messages 内联 |
+ * | `GET /runs/active` | 200 | 2 B | `[]` |
+ * | `GET /threads/{t}/runs/{r}/events` | 200 | 61–? B | `{run_id, events}`，多数 run 的 events 为空 |
+ *
+ * 观测到 `author` 只有 `user` / `agent` 两种；`RunEvent.kind` 只有
+ * `think` / `other` / `todo` 三种。
+ *
+ * **`chunks[].kind` 实测只见到 `text` / `run_activity` / `proposal` 三种，但代码里一共处理六种。**
+ * 另外三种（`todo` / `error` / `intervention`）的形状是从 `ChatMessage.vue` 与它分发的子组件
+ * 的字段用法反推出来的，**不是从真实响应里取到的** —— 现有 24 个会话 / 201 条消息里一个都没有。
+ * 它们的渲染路径由 `ui/preview/messages.html` 人工种出状态来验证（见 `docs/design/DESIGN.md` §15）。
+ *
+ * **未观测到实际值**（当前数据里恒为 null，形状以 `stores/agent.js` 的用法为准，
+ * 接入相关 UI 前必须再取一次真实样本）：`Thread.pendingIntervention`、`Thread.pr`、
+ * `Thread.latestPlan`、`Thread.diffStats`。
+ */
+export {}
diff --git a/ui/src/components/ActiveTaskStrip.test.js b/ui/src/components/ActiveTaskStrip.test.js
new file mode 100644
index 0000000..2c53f06
--- /dev/null
+++ b/ui/src/components/ActiveTaskStrip.test.js
@@ -0,0 +1,106 @@
+// ActiveTaskStrip 的特征测试。
+//
+// 只断言行为、结构不变式与文案，**不锁样式类名以外的外观**（类名只用来定位元素）。
+// 这个组件此前零测试，而它只在有正在运行的任务时出现 —— 默认截图永远拍不到它，
+// 所以这里的断言是它唯一的自动安全网。
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import ActiveTaskStrip from './ActiveTaskStrip.vue'
+
+function task(overrides = {}) {
+  return {
+    id: 't1',
+    title: '实现并验证 FastAPI Task API',
+    repoFullName: 'example/api',
+    status: 'running',
+    runId: 'r1',
+    ...overrides,
+  }
+}
+
+describe('ActiveTaskStrip', () => {
+  it('没有任务时整条不渲染', () => {
+    const wrapper = mount(ActiveTaskStrip, { props: { tasks: [] } })
+    expect(wrapper.find('.active-task-strip').exists()).toBe(false)
+  })
+
+  it('每个任务一个条目，标题与状态文案都在', () => {
+    const wrapper = mount(ActiveTaskStrip, {
+      props: {
+        tasks: [task(), task({ id: 't2', title: '重构首页 Hero 区', status: 'queued', runId: 'r2' })],
+      },
+    })
+    const items = wrapper.findAll('.active-task-item')
+    expect(items).toHaveLength(2)
+    expect(items[0].text()).toContain('实现并验证 FastAPI Task API')
+    expect(items[0].text()).toContain('运行中')
+    expect(items[1].text()).toContain('排队中')
+  })
+
+  it('三种状态各自的文案', () => {
+    const wrapper = mount(ActiveTaskStrip, {
+      props: {
+        tasks: [
+          task({ id: 'a', status: 'queued' }),
+          task({ id: 'b', status: 'cancelling' }),
+          task({ id: 'c', status: 'running' }),
+        ],
+      },
+    })
+    const texts = wrapper.findAll('.active-task-item').map((item) => item.text())
+    expect(texts[0]).toContain('排队中')
+    expect(texts[1]).toContain('正在取消')
+    expect(texts[2]).toContain('运行中')
+  })
+
+  it('没有 title 时退回仓库名，两个都没有就用「新任务」', () => {
+    const wrapper = mount(ActiveTaskStrip, {
+      props: { tasks: [task({ id: 'a', title: '', repoFullName: 'example/api' }), task({ id: 'b', title: '', repoFullName: '' })] },
+    })
+    const items = wrapper.findAll('.active-task-item')
+    expect(items[0].text()).toContain('example/api')
+    expect(items[1].text()).toContain('新任务')
+  })
+
+  it('activeId 决定哪一个被标记为 selected', () => {
+    const wrapper = mount(ActiveTaskStrip, {
+      props: { tasks: [task({ id: 't1' }), task({ id: 't2', runId: 'r2' })], activeId: 't2' },
+    })
+    const items = wrapper.findAll('.active-task-item')
+    expect(items[0].classes()).not.toContain('selected')
+    expect(items[1].classes()).toContain('selected')
+  })
+
+  it('点条目发 select，带的是任务 id', async () => {
+    const wrapper = mount(ActiveTaskStrip, { props: { tasks: [task({ id: 't9' })] } })
+    await wrapper.find('.active-task-select').trigger('click')
+    expect(wrapper.emitted('select')).toEqual([['t9']])
+  })
+
+  it('点取消发 cancel，带 threadId 与 runId', async () => {
+    const wrapper = mount(ActiveTaskStrip, { props: { tasks: [task({ id: 't9', runId: 'r9' })] } })
+    await wrapper.find('.active-task-cancel').trigger('click')
+    expect(wrapper.emitted('cancel')).toEqual([[{ threadId: 't9', runId: 'r9' }]])
+  })
+
+  it('没有 runId 的条目不渲染取消键（服务端说在跑但本地无 run）', () => {
+    const wrapper = mount(ActiveTaskStrip, { props: { tasks: [task({ id: 't1', runId: null })] } })
+    expect(wrapper.find('.active-task-select').exists()).toBe(true)
+    expect(wrapper.find('.active-task-cancel').exists()).toBe(false)
+  })
+
+  it('取消键有可读的 aria-label，不是只有一个 ×', () => {
+    const wrapper = mount(ActiveTaskStrip, { props: { tasks: [task({ title: '重构首页' })] } })
+    const cancel = wrapper.find('.active-task-cancel')
+    expect(cancel.attributes('aria-label')).toBe('取消重构首页')
+    expect(cancel.attributes('title')).toBe('取消任务')
+  })
+
+  it('取消键在条目内部，且它自己不是嵌套在另一个 button 里的 button', () => {
+    const wrapper = mount(ActiveTaskStrip, { props: { tasks: [task()] } })
+    const cancel = wrapper.find('.active-task-cancel')
+    expect(cancel.element.tagName).toBe('BUTTON')
+    expect(cancel.element.closest('button')).toBe(cancel.element)
+  })
+})
diff --git a/ui/src/components/ActiveTaskStrip.vue b/ui/src/components/ActiveTaskStrip.vue
index ef5172b..a4616a3 100644
--- a/ui/src/components/ActiveTaskStrip.vue
+++ b/ui/src/components/ActiveTaskStrip.vue
@@ -1,4 +1,6 @@
 <script setup>
+import UiButton from './ui/UiButton.vue'
+
 defineProps({
   tasks: { type: Array, default: () => [] },
   activeId: { type: String, default: null },
@@ -23,27 +25,117 @@ function label(status) {
           <span class="active-task-title">{{ task.title || task.repoFullName || '新任务' }}</span>
           <small>{{ label(task.status) }}</small>
         </button>
-        <button
+        <!--
+          没有 runId 就**不渲染**取消键，而不是渲染一个禁用的键：
+          本地拿不到 run 就没有可取消的对象，这个条目此刻真的没有这个动作。
+        -->
+        <UiButton
           v-if="task.runId"
           class="active-task-cancel"
+          variant="ghost"
+          size="sm"
+          icon
           type="button"
           :aria-label="`取消${task.title || '任务'}`"
           title="取消任务"
           @click="emit('cancel', { threadId: task.id, runId: task.runId })"
-        >×</button>
+        >×</UiButton>
       </div>
     </div>
   </nav>
 </template>
 
 <style scoped>
-.active-task-strip { display: flex; align-items: center; gap: 12px; padding: 9px 22px; border-bottom: 1px solid var(--border-color, #e5e7eb); overflow: hidden; }
-.active-task-heading { flex: none; color: var(--muted-color, #737373); font-size: 12px; }
-.active-task-list { display: flex; gap: 8px; overflow-x: auto; }
-.active-task-item { display: flex; align-items: center; border: 1px solid var(--border-color, #e5e7eb); border-radius: 9px; }
-.active-task-item.selected { border-color: var(--accent-color, #6366f1); }
-.active-task-select, .active-task-cancel { display: flex; align-items: center; gap: 7px; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 6px 8px; white-space: nowrap; }
-.active-task-select small { color: var(--muted-color, #737373); }
-.active-task-title { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
-.active-task-cancel { padding-left: 4px; font-size: 17px; }
+/*
+ * 这个组件原先写的是 var(--border-color, #e5e7eb) / var(--muted-color, #737373)
+ * / var(--accent-color, #6366f1) —— 三个变量在 tokens.css 里**根本不存在**，
+ * 所以实际渲染出来的一直是 fallback：Tailwind 的 gray-200 / neutral-500 /
+ * indigo-500。这是全项目最后残留的外来配色，也是"AI 默认值"最典型的形态：
+ * 写了一个看起来像设计系统的变量名，却没人核对它是否存在。
+ * 现在全部换成真实 token。
+ *
+ * 这是全项目唯一带 scoped <style> 的组件。写法沿用原语那一套（规则之间空行、
+ * 状态按 default → hover → focus → selected 排序），这样它也过得了 npm run lint:css:all。
+ */
+.active-task-strip {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+  padding: var(--space-10) var(--space-24);
+  border-bottom: 1px solid var(--c-border);
+  overflow: hidden;
+}
+
+.active-task-heading {
+  flex: none;
+  color: var(--c-text-muted);
+  font-size: var(--text-base);
+}
+
+.active-task-list {
+  display: flex;
+  gap: var(--space-8);
+  overflow-x: auto;
+}
+
+.active-task-item {
+  display: flex;
+  align-items: center;
+  padding-right: var(--space-2);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-md);
+}
+
+/* 整条是按钮，所以悬停要有反馈。只改边框色，不铺底色 —— 铺底色会和里面
+   UiButton(ghost) 自带的 hover 底色撞成一片，看不出取消键自己被指到了。 */
+.active-task-item:hover {
+  border-color: var(--c-border-strong);
+}
+
+.active-task-item.selected {
+  border-color: var(--c-accent);
+}
+
+.active-task-select {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  padding: var(--space-6) var(--space-8);
+  border: 0;
+  background: transparent;
+  color: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.active-task-select:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: -1px;
+}
+
+.active-task-select small {
+  /* 显式给字号：`<small>` 的浏览器默认是 `font-size: smaller`（13px 下约 10.8px），
+     而这份样式表里其它每一处 `small` 都写了字号。靠 UA 默认值等于没有设计。 */
+  color: var(--c-text-muted);
+  font-size: var(--text-xs);
+}
+
+.active-task-title {
+  max-width: 190px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.active-task-cancel {
+  font-size: var(--text-md);
+}
+
+/*
+ * 取消键用 UiButton(ghost/sm/icon) 拿到 28×28 点击区与 hover 反馈。
+ * 这里只覆盖焦点环的偏移：原语默认 outline-offset: 2px，而按钮已经贴到条目的
+ * 圆角边框上，+2px 会画到边框外面；收成 -2px 让环落在按钮内部。
+ */
+.active-task-cancel:focus-visible {
+  outline-offset: -2px;
+}
 </style>
diff --git a/ui/src/components/AgentWorkspace.test.js b/ui/src/components/AgentWorkspace.test.js
new file mode 100644
index 0000000..e348db9
--- /dev/null
+++ b/ui/src/components/AgentWorkspace.test.js
@@ -0,0 +1,183 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import AgentWorkspace from './AgentWorkspace.vue'
+import { useAgentStore } from '../stores/agent'
+
+// 这一组测试是主区状态矩阵的安全网：迁移前 AgentWorkspace.vue 有 447 行、零测试，
+// 「保持功能不变」在当时是无法验证的。
+// 断言一律只碰行为、文案、role、aria —— 不锁外观类名，否则换原语就会假失败。
+
+const thread = (overrides = {}) => ({
+  id: 'thread-1',
+  projectId: null,
+  chatOnly: true,
+  title: '会话标题',
+  repo: '',
+  repoFullName: '',
+  provider: 'github',
+  branch: '',
+  baseBranch: '',
+  model: 'deepseek-flash',
+  effort: 'default',
+  status: 'idle',
+  createdAt: 1,
+  updatedAt: 1,
+  draftContent: '',
+  messages: [],
+  changedFiles: [],
+  ...overrides,
+})
+
+let agent
+let wrapper
+
+function seed(overrides = {}) {
+  agent.$patch(overrides)
+}
+
+async function mountWorkspace() {
+  wrapper = mount(AgentWorkspace)
+  await wrapper.vm.$nextTick()
+  return wrapper
+}
+
+beforeEach(() => {
+  setActivePinia(createPinia())
+  agent = useAgentStore()
+  // 挂载会触发真实网络请求与 3 秒轮询，这里全部换成空实现。
+  vi.spyOn(agent, 'bootstrap').mockResolvedValue(undefined)
+  vi.spyOn(agent, 'refreshActiveRuns').mockResolvedValue(undefined)
+})
+
+afterEach(() => {
+  wrapper?.unmount()
+  wrapper = null
+  vi.restoreAllMocks()
+  localStorage.clear()
+})
+
+describe('AgentWorkspace 主区状态', () => {
+  it('加载中显示加载态，而不是空态引导', async () => {
+    seed({ loading: true })
+    await mountWorkspace()
+
+    expect(wrapper.text()).toContain('正在加载会话')
+    // 关键：加载中不能同时出现 Hero，否则会先闪一下「开始新聊天」再跳走
+    expect(wrapper.find('.welcome-actions').exists()).toBe(false)
+  })
+
+  it('无会话时显示 Hero 与两个入口，且点击各自触发对应动作', async () => {
+    await mountWorkspace()
+    const createChat = vi.spyOn(agent, 'createChatThread').mockResolvedValue(undefined)
+
+    expect(wrapper.text()).toContain('让想法，开始成为产品')
+    const actions = wrapper.findAll('.welcome-actions button')
+    expect(actions).toHaveLength(2)
+
+    await actions[0].trigger('click')
+    expect(createChat).toHaveBeenCalledTimes(1)
+
+    await actions[1].trigger('click')
+    // 第二个入口是「创建项目」，开弹窗
+    expect(wrapper.findComponent({ name: 'CreateProjectDialog' }).exists()).toBe(true)
+  })
+
+  it('普通聊天会话的空态文案与不绑仓库时不同', async () => {
+    seed({ currentThread: thread({ chatOnly: true, title: '' }) })
+    await mountWorkspace()
+    expect(wrapper.text()).toContain('从一个好问题开始')
+    // 面包屑的第一级与仓库徽标是两段独立文本，断言也拆开 —— 锁住"信息都在"，
+    // 不锁中间用什么分隔符（拼成一个字符串的写法已经被改掉了）。
+    expect(wrapper.text()).toContain('普通聊天')
+    expect(wrapper.text()).toContain('未连接仓库')
+  })
+
+  it('项目会话的空态把项目名写进标题', async () => {
+    seed({
+      currentThread: thread({ chatOnly: false, projectId: 'p1', repoFullName: 'example/app' }),
+      projects: [{ id: 'p1', name: '开发工作台', repoFullName: 'example/app', conversations: [] }],
+    })
+    await mountWorkspace()
+    expect(wrapper.text()).toContain('准备好继续构建开发工作台')
+    expect(wrapper.text()).toContain('开发工作台')
+    expect(wrapper.text()).toContain('example/app')
+  })
+
+  it('有消息时渲染消息列表且不再出现 Hero', async () => {
+    seed({
+      currentThread: thread(),
+      messages: [
+        { id: 'm1', author: 'user', timestamp: 1, chunks: [{ kind: 'text', text: '你好' }] },
+        { id: 'm2', author: 'agent', timestamp: 2, chunks: [{ kind: 'text', text: '收到' }] },
+      ],
+    })
+    await mountWorkspace()
+
+    expect(wrapper.findAll('.message')).toHaveLength(2)
+    expect(wrapper.find('.welcome-actions').exists()).toBe(false)
+  })
+
+  it('错误态显示横幅，且与消息列表共存而不是互相取代', async () => {
+    seed({
+      currentThread: thread(),
+      messages: [{ id: 'm1', author: 'user', timestamp: 1, chunks: [{ kind: 'text', text: '你好' }] }],
+      error: '创建聊天失败',
+    })
+    await mountWorkspace()
+
+    const banner = wrapper.find('.error-banner')
+    expect(banner.exists()).toBe(true)
+    expect(banner.text()).toBe('创建聊天失败')
+    expect(wrapper.findAll('.message')).toHaveLength(1)
+  })
+
+  it('标题双击进入编辑，Enter 保存，Escape 取消且不调接口', async () => {
+    seed({ currentThread: thread({ title: '原标题' }) })
+    await mountWorkspace()
+    const rename = vi.spyOn(agent, 'renameThread').mockResolvedValue(undefined)
+
+    await wrapper.get('.workspace-header h1').trigger('dblclick')
+    const input = wrapper.get('.workspace-title-input')
+    expect(input.element.value).toBe('原标题')
+
+    await input.setValue('新标题')
+    await input.trigger('keydown', { key: 'Escape' })
+    expect(rename).not.toHaveBeenCalled()
+    expect(wrapper.find('.workspace-title-input').exists()).toBe(false)
+
+    await wrapper.get('.workspace-header h1').trigger('dblclick')
+    await wrapper.get('.workspace-title-input').setValue('新标题')
+    await wrapper.get('.workspace-title-input').trigger('keydown', { key: 'Enter' })
+    expect(rename).toHaveBeenCalledWith('thread-1', '新标题')
+  })
+
+  it('标题为空或未改动时不发请求', async () => {
+    seed({ currentThread: thread({ title: '原标题' }) })
+    await mountWorkspace()
+    const rename = vi.spyOn(agent, 'renameThread').mockResolvedValue(undefined)
+
+    await wrapper.get('.workspace-header h1').trigger('dblclick')
+    await wrapper.get('.workspace-title-input').setValue('   ')
+    await wrapper.get('.workspace-title-input').trigger('keydown', { key: 'Enter' })
+    expect(rename).not.toHaveBeenCalled()
+  })
+
+  it('输入法合成期间的回车不触发保存', async () => {
+    seed({ currentThread: thread({ title: '原标题' }) })
+    await mountWorkspace()
+    const rename = vi.spyOn(agent, 'renameThread').mockResolvedValue(undefined)
+
+    await wrapper.get('.workspace-header h1').trigger('dblclick')
+    await wrapper.get('.workspace-title-input').setValue('新标题')
+    await wrapper.get('.workspace-title-input').trigger('keydown', { key: 'Enter', isComposing: true })
+    expect(rename).not.toHaveBeenCalled()
+  })
+
+  it('没有会话时标题不可编辑（双击无效）', async () => {
+    await mountWorkspace()
+    await wrapper.get('.workspace-header h1').trigger('dblclick')
+    expect(wrapper.find('.workspace-title-input').exists()).toBe(false)
+  })
+})
diff --git a/ui/src/components/AgentWorkspace.vue b/ui/src/components/AgentWorkspace.vue
index b3f8867..8d82410 100644
--- a/ui/src/components/AgentWorkspace.vue
+++ b/ui/src/components/AgentWorkspace.vue
@@ -1,47 +1,55 @@
 <script setup>
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-
-import ChatComposer from './ChatComposer.vue'
-import ChatMessage from './ChatMessage.vue'
+/**
+ * 主区布局：侧栏 + Header + 活跃任务条 + 会话流 + 两个项目弹窗。
+ *
+ * 这个文件现在只做三件事：**摆位置、接事件、管跨区域的那一点状态**
+ * （会话标题的保存中/保存失败、项目的增删改弹窗）。其余的都搬到了
+ * `WorkspaceHeader.vue` / `WorkspaceConversation.vue` / `WorkspaceWelcome.vue`
+ * 与 `composables/useSidebarPreferences.js` / `composables/useProjectDialogs.js`。
+ *
+ * 它自己不再持有会话级或消息级状态 —— 那是上一版 454 行里最难读的部分：
+ * 标题编辑、方案审批、人工介入、滚动、项目 CRUD 全挤在一个作用域里。
+ */
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+
+import WorkspaceHeader from './WorkspaceHeader.vue'
+import WorkspaceConversation from './WorkspaceConversation.vue'
 import ActiveTaskStrip from './ActiveTaskStrip.vue'
 import SessionSidebar from './SessionSidebar.vue'
 import CreateProjectDialog from './CreateProjectDialog.vue'
 import ConfirmProjectDeleteDialog from './ConfirmProjectDeleteDialog.vue'
-import { useSmartScroll } from '../composables/useSmartScroll'
+import { useProjectDialogs } from '../composables/useProjectDialogs'
+import { useSidebarPreferences } from '../composables/useSidebarPreferences'
 import { useAgentStore } from '../stores/agent'
 
 const agent = useAgentStore()
-const messageList = ref(null)
-const sidebarCollapsed = ref(false)
-const showProjectDialog = ref(false)
-const creatingProject = ref(false)
-const projectBeingEdited = ref(null)
-const projectPendingDelete = ref(null)
-const deletingProject = ref(false)
-const projectDeleteError = ref('')
-const collapsedProjectIds = ref([])
-const SIDEBAR_STORAGE_KEY = 'coding.sidebar.collapsed'
-const PROJECT_COLLAPSE_STORAGE_KEY = 'coding.sidebar.collapsed-projects'
-const isTitleEditing = ref(false)
-const titleDraft = ref('')
-const titleInput = ref(null)
 const titleSaving = ref(false)
 const titleError = ref('')
 let activeRunRefreshTimer = null
-const revisionPlan = ref(null)
-const pendingIntervention = computed(() => {
-  if (agent.currentThread && Object.hasOwn(agent.currentThread, 'pendingIntervention')) {
-    return agent.currentThread.pendingIntervention
-  }
-  for (const message of agent.messages) {
-    const active = (message.chunks || []).find((chunk) => (
-      chunk.kind === 'intervention' && ['pending', 'resuming'].includes(chunk.status)
-    ))
-    if (active) return active
-  }
-  return null
-})
 
+// 侧栏的两项本地偏好（整体收起 / 哪些项目折叠）连读写一起抽到了 composable 里。
+const {
+  collapsed: sidebarCollapsed,
+  collapsedProjectIds,
+  toggleCollapsed: toggleSidebar,
+  toggleProject,
+} = useSidebarPreferences()
+
+const {
+  showProjectDialog,
+  creatingProject,
+  projectBeingEdited,
+  projectPendingDelete,
+  deletingProject,
+  projectDeleteError,
+  openProjectDialog,
+  closeProjectDialog,
+  saveProject,
+  askDeleteProject,
+  confirmDeleteProject,
+} = useProjectDialogs()
+
+/** 会话还没有标题时，用第一条用户消息推导一个 —— 比"新会话"更有辨识度。 */
 const derivedSessionTitle = computed(() => {
   const firstUserMessage = agent.messages.find((message) => message.author === 'user')
   const content = (firstUserMessage?.chunks || [])
@@ -63,205 +71,67 @@ const branchLabel = computed(() => {
   if (!branch) return `基线 ${base}`
   return branch === base ? branch : `${branch} → ${base}`
 })
-const {
-  hasUnreadContent,
-  unreadContentCount,
-  onScroll,
-  notifyContentChanged,
-  resetToLatest,
-  scrollToLatest,
-} = useSmartScroll(messageList)
-
-function toggleSidebar() {
-  sidebarCollapsed.value = !sidebarCollapsed.value
-}
-
-function onWorkspaceShortcut(event) {
-  if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== 'k') return
-  event.preventDefault()
-  createChatThread()
-}
-
-function openProjectDialog(project = null) {
-  projectBeingEdited.value = project
-  agent.error = ''
-  showProjectDialog.value = true
-}
-
-async function saveProject({ id, name, provider, repo }) {
-  creatingProject.value = true
-  agent.error = ''
-  try {
-    if (id) await agent.renameProject(id, name)
-    else await agent.createProject(name, provider, repo)
-    showProjectDialog.value = false
-    projectBeingEdited.value = null
-  } catch (error) {
-    agent.error = error.message || (id ? '重命名项目失败' : '创建项目失败')
-  } finally {
-    creatingProject.value = false
-  }
-}
-
-async function createChatThread() {
-  try { await agent.createChatThread() }
-  catch (error) { agent.error = error.message || '创建聊天失败' }
-}
-
-function toggleProject(projectId) {
-  const next = new Set(collapsedProjectIds.value)
-  next.has(projectId) ? next.delete(projectId) : next.add(projectId)
-  collapsedProjectIds.value = [...next]
-}
-
-async function confirmDeleteProject() {
-  if (!projectPendingDelete.value) return
-  deletingProject.value = true
-  projectDeleteError.value = ''
-  try {
-    await agent.deleteProject(projectPendingDelete.value.id)
-    projectPendingDelete.value = null
-  } catch (error) {
-    projectDeleteError.value = error.message || '删除项目失败'
-  } finally {
-    deletingProject.value = false
-  }
-}
-
-async function createProjectThread(projectId) {
-  try { await agent.createThread(projectId) }
-  catch (error) { agent.error = error.message || '创建会话失败' }
-}
-
-function startTitleEdit() {
-  if (!agent.currentThread?.id || titleSaving.value) return
-  titleError.value = ''
-  titleDraft.value = sessionTitle.value
-  isTitleEditing.value = true
-  nextTick(() => {
-    titleInput.value?.focus()
-    titleInput.value?.select()
-  })
-}
-
-function cancelTitleEdit() {
-  isTitleEditing.value = false
-  titleDraft.value = sessionTitle.value
-  titleError.value = ''
-}
+/**
+ * Header 现在是两级面包屑：`<项目名> / <会话标题>`，仓库单独作为下面的徽标。
+ *
+ * 拆成两段而不是拼成一个字符串，是因为真实数据里项目名与仓库名**经常完全相同**
+ * （项目基本就是按仓库建的），拼起来会得到
+ * `clumsyspc/test_coding_repo · clumsyspc/test_coding_repo` —— 同一句话写两遍。
+ * 拆开之后 `WorkspaceHeader` 能在两者相同时把徽标整个隐掉。
+ */
+const crumb = computed(() => {
+  if (agent.currentThread?.chatOnly) return '普通聊天'
+  return agent.currentProject?.name || ''
+})
+const repoLabel = computed(() => {
+  if (agent.currentThread?.chatOnly) return '未连接仓库'
+  return agent.currentThread?.repoFullName || agent.currentThread?.repo || ''
+})
 
-async function saveTitle() {
-  if (!isTitleEditing.value) return
+/**
+ * Header 只负责"正在编辑"，保存这一步归这里 —— 它要打接口，还要有
+ * 保存中/保存失败两个可见状态。空标题与未改动的判断已在 Header 里挡掉。
+ */
+async function renameTitle(nextTitle) {
   const threadId = agent.currentThread?.id
-  const nextTitle = titleDraft.value.trim()
-  const previousTitle = sessionTitle.value
-  isTitleEditing.value = false
-
-  if (!threadId || !nextTitle || nextTitle === previousTitle) {
-    titleDraft.value = previousTitle
-    return
-  }
-
+  if (!threadId) return
   titleSaving.value = true
   titleError.value = ''
   try {
     await agent.renameThread(threadId, nextTitle)
   } catch (error) {
     titleError.value = error.message || '标题保存失败'
-    titleDraft.value = previousTitle
   } finally {
     titleSaving.value = false
   }
 }
 
-function onTitleKeydown(event) {
-  if (event.isComposing) return
-  if (event.key === 'Escape') {
-    event.preventDefault()
-    cancelTitleEdit()
-    return
-  }
-  if (event.key === 'Enter') {
-    event.preventDefault()
-    saveTitle()
-  }
-}
-
-function statusLabel(status, streaming) {
-  if (streaming || status === 'running') return '正在运行'
-  if (status === 'queued') return '排队中'
-  if (status === 'cancelling') return '正在取消'
-  if (status === 'awaiting_approval') return '等待你介入'
-  if (status === 'cancelled') return '已取消'
-  if (status === 'interrupted') return '运行中断'
-  if (status === 'error' || status === 'failed') return '运行失败'
-  if (status === 'finished' || status === 'completed') return '已完成'
-  return '等待任务'
+async function createProjectThread(projectId) {
+  try { await agent.createThread(projectId) }
+  catch (error) { agent.error = error.message || '创建会话失败' }
 }
 
-watch(
-  () => agent.messages.map((message) => {
-    const length = message.chunks?.map((chunk) => {
-      if (chunk.kind === 'todo') return JSON.stringify(chunk.todos || [])
-      return chunk.text || ''
-    }).join('').length || 0
-    return `${message.id}:${length}`
-  }).join('|'),
-  async () => {
-    await nextTick()
-    notifyContentChanged()
-  },
-)
-
-watch(
-  () => agent.currentThreadId,
-  async () => {
-    revisionPlan.value = null
-    isTitleEditing.value = false
-    titleError.value = ''
-    await nextTick()
-    resetToLatest()
-  },
-)
-
-function submitMessage(content) {
-  if (pendingIntervention.value) return
-  scrollToLatest()
-  if (revisionPlan.value) {
-    const plan = revisionPlan.value
-    revisionPlan.value = null
-    agent.submit(content, { interaction_action: 'revise_plan', plan_id: plan.plan_id })
-    return
-  }
-  agent.submit(content)
+function onWorkspaceShortcut(event) {
+  if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== 'k') return
+  event.preventDefault()
+  createChatThread()
 }
 
-function handlePlanAction({ action, proposal }) {
-  if (action === 'revise') {
-    revisionPlan.value = proposal
-    return
-  }
-  const decision = action === 'approve' ? 'approve_plan' : 'reject_plan'
-  const prompt = action === 'approve' ? '确认并实施该方案' : '拒绝实施该方案'
-  agent.submit(prompt, { interaction_action: decision, plan_id: proposal.plan_id })
+async function createChatThread() {
+  try { await agent.createChatThread() }
+  catch (error) { agent.error = error.message || '创建聊天失败' }
 }
 
-function handleInterventionResponse({ intervention_id, response }) {
-  agent.submit(response, { interaction_action: 'resume_intervention', intervention_id })
+function renameProjectFromSidebar({ id, name }) {
+  agent.renameProject(id, name).catch((error) => { agent.error = error.message })
 }
 
-function handleRunActivityExpand({ run_id }) {
-  agent.loadRunActivity(run_id)
-}
+// 切走就清掉，否则下次回到这个会话时还挂着上一个会话的"保存失败"。
+watch(() => agent.currentThreadId, () => {
+  titleError.value = ''
+})
 
 onMounted(() => {
-  try {
-    sidebarCollapsed.value = window.localStorage.getItem(SIDEBAR_STORAGE_KEY) === 'true'
-    const savedCollapsedProjects = JSON.parse(window.localStorage.getItem(PROJECT_COLLAPSE_STORAGE_KEY) || '[]')
-    if (Array.isArray(savedCollapsedProjects)) collapsedProjectIds.value = savedCollapsedProjects
-  } catch {
-    // 本地存储不可用时保持默认展开状态。
-  }
   // Keep the empty workspace neutral: users may begin with a repository-free chat.
   agent.bootstrap()
   window.addEventListener('keydown', onWorkspaceShortcut)
@@ -272,18 +142,6 @@ onUnmounted(() => {
   window.removeEventListener('keydown', onWorkspaceShortcut)
   if (activeRunRefreshTimer) window.clearInterval(activeRunRefreshTimer)
 })
-
-watch(sidebarCollapsed, (value) => {
-  try {
-    window.localStorage.setItem(SIDEBAR_STORAGE_KEY, String(value))
-  } catch {
-    // 本地存储不可用时不影响侧栏交互。
-  }
-})
-
-watch(collapsedProjectIds, (value) => {
-  try { window.localStorage.setItem(PROJECT_COLLAPSE_STORAGE_KEY, JSON.stringify(value)) } catch { /* optional preference */ }
-})
 </script>
 
 <template>
@@ -295,13 +153,16 @@ watch(collapsedProjectIds, (value) => {
       :disabled="false"
       :collapsed="sidebarCollapsed"
       :collapsed-project-ids="collapsedProjectIds"
+      :projects-error="agent.projectsError"
+      :projects-loading="agent.loading && !agent.projects.length"
+      @retry-projects="agent.retryProjects()"
       @new-chat="createChatThread"
       @new-project="openProjectDialog()"
       @new-thread="createProjectThread"
       @select-thread="agent.selectThread"
       @delete-thread="agent.deleteThread"
-      @rename-project="agent.renameProject($event.id, $event.name).catch(error => agent.error = error.message)"
-      @delete-project="projectPendingDelete = $event; projectDeleteError = ''"
+      @rename-project="renameProjectFromSidebar"
+      @delete-project="askDeleteProject"
       @toggle-project="toggleProject"
       @toggle-collapse="toggleSidebar"
     />
@@ -314,53 +175,23 @@ watch(collapsedProjectIds, (value) => {
     ></button>
 
     <section class="workspace">
-      <header class="workspace-header">
-        <div class="workspace-heading">
-          <span class="conversation-icon" aria-hidden="true">
-            <svg viewBox="0 0 24 24" focusable="false">
-              <path d="M3.5 6.5h6l1.8 2H20.5v9.25a1.75 1.75 0 0 1-1.75 1.75H5.25a1.75 1.75 0 0 1-1.75-1.75V6.5Z" />
-              <path d="M3.5 6.5V5.75A1.75 1.75 0 0 1 5.25 4h4.1l1.8 2h7.6A1.75 1.75 0 0 1 20.5 7.75V8.5" />
-            </svg>
-          </span>
-          <div>
-            <div class="workspace-title-row">
-              <input
-                v-if="isTitleEditing"
-                ref="titleInput"
-                v-model="titleDraft"
-                class="workspace-title-input"
-                type="text"
-                maxlength="80"
-                aria-label="会话标题"
-                @blur="saveTitle"
-                @keydown="onTitleKeydown"
-              />
-              <h1
-                v-else
-                :title="agent.currentThread?.id ? '双击编辑会话名称' : sessionTitle"
-                @dblclick="startTitleEdit"
-              >
-                {{ sessionTitle }}
-              </h1>
-              <span v-if="titleSaving" class="title-save-state" aria-live="polite">保存中</span>
-              <span v-else-if="titleError" class="title-save-error" :title="titleError">保存失败</span>
-            </div>
-            <p class="workspace-repo" :class="{ 'workspace-repo-chat': agent.currentThread?.chatOnly }">
-              {{ agent.currentThread?.chatOnly ? '普通聊天 · 未连接仓库' : agent.currentProject?.name ? `${agent.currentProject.name} · ${agent.currentThread?.repoFullName || agent.currentThread?.repo}` : agent.currentThread?.repoFullName || agent.currentThread?.repo || '选择一个项目，或新建普通聊天' }}
-            </p>
-          </div>
-        </div>
-        <div class="workspace-status">
-          <span class="status-pill" :class="agent.currentThread?.status || 'idle'">
-            <span class="status-pill-dot"></span>
-            {{ statusLabel(agent.currentThread?.status, agent.streaming) }}
-          </span>
-          <span v-if="agent.currentThread && !agent.currentThread.chatOnly" class="branch-label" :title="agent.currentThread.branch ? '当前工作分支 → 基线分支' : '尚未记录实际工作分支'">
-            {{ branchLabel }}
-          </span>
-          <a v-if="agent.currentThread?.pr?.url" :href="agent.currentThread.pr.url" target="_blank" rel="noreferrer">查看 PR</a>
-        </div>
-      </header>
+      <!-- key 绑线程 id：切换会话时强制重挂，编辑到一半的标题输入框不会跨会话留着。 -->
+      <WorkspaceHeader
+        :key="agent.currentThreadId || 'no-thread'"
+        :title="sessionTitle"
+        :repo-label="repoLabel"
+        :crumb="crumb"
+        :chat-only="!!agent.currentThread?.chatOnly"
+        :editable="!!agent.currentThread?.id"
+        :status="agent.currentThread?.status || ''"
+        :streaming="agent.streaming"
+        :branch-label="branchLabel"
+        :show-branch="!!agent.currentThread && !agent.currentThread.chatOnly"
+        :pr-url="agent.currentThread?.pr?.url || ''"
+        :saving="titleSaving"
+        :error-message="titleError"
+        @rename="renameTitle"
+      />
 
       <ActiveTaskStrip
         :tasks="agent.activeTasks"
@@ -369,69 +200,14 @@ watch(collapsedProjectIds, (value) => {
         @cancel="agent.cancelRun($event.threadId, $event.runId)"
       />
 
-      <div ref="messageList" class="message-list" @scroll="onScroll">
-        <div v-if="agent.loading" class="empty-state">正在加载会话...</div>
-        <div v-else-if="!agent.messages.length" class="empty-state">
-          <div class="welcome-mark"><img class="empty-mark" src="/coding-mark.svg" alt="" /><span></span></div>
-          <p class="eyebrow">CODING · 开发工作台</p>
-          <h2>{{ agent.currentThread?.chatOnly ? '从一个好问题开始' : agent.currentProject ? `准备好继续构建${agent.currentProject.name}` : '让想法，开始成为产品' }}</h2>
-          <p>{{ agent.currentThread?.chatOnly ? '这是一个不连接仓库的独立聊天，可用于讨论方案、梳理思路与技术问答。' : agent.currentProject ? '描述你希望完成的工作，CODING 将围绕项目仓库分析、规划并推进任务。' : '开启一段自由对话，或创建一个绑定仓库的项目工作空间。' }}</p>
-          <div v-if="!agent.currentThread" class="welcome-actions">
-            <button type="button" class="welcome-primary" @click="createChatThread">开始新聊天</button>
-            <button type="button" class="welcome-secondary" @click="openProjectDialog()">创建项目</button>
-          </div>
-          <div v-else class="welcome-capabilities"><span>独立会话</span><span>{{ agent.currentThread.chatOnly ? '纯对话模式' : '仓库上下文' }}</span><span>{{ agent.selectedModel }}</span></div>
-        </div>
-
-        <ChatMessage
-          v-for="message in agent.messages"
-          :key="message.id"
-          :message="message"
-          :disabled="agent.streaming"
-          :run-activity-events="agent.runActivityEvents"
-          :run-activity-loading="agent.runActivityLoading"
-          @plan-action="handlePlanAction"
-          @intervention-response="handleInterventionResponse"
-          @run-activity-expand="handleRunActivityExpand"
-        />
-
-        <div v-if="agent.error" class="error-banner">{{ agent.error }}</div>
-      </div>
+      <WorkspaceConversation @new-project="openProjectDialog()" />
 
-      <button
-        v-if="hasUnreadContent"
-        class="new-content-button"
-        type="button"
-        @click="scrollToLatest('smooth')"
-      >
-        <span aria-hidden="true">↓</span>
-        {{ unreadContentCount >= 99 ? '99+ 条新内容' : `${unreadContentCount} 条新内容` }}
-      </button>
-
-      <ChatComposer
-        :draft="agent.currentDraft"
-        @update:draft="agent.setDraft(agent.currentThreadId, $event)"
-        :repo="agent.currentThread?.repoFullName || agent.currentThread?.repo || ''"
-        :provider="agent.currentThread?.provider || 'github'"
-        :chat-only="!agent.currentThread || !!agent.currentThread.chatOnly"
-        :disabled="agent.streaming"
-        :locked="!!pendingIntervention"
-        :locked-hint="pendingIntervention ? '此会话正在等待人工介入答复，请在上方确认卡片中提交答复后继续。' : ''"
-        :model="agent.selectedModel"
-        :models="agent.modelOptions"
-        :effort="agent.selectedEffort"
-        :interaction-hint="revisionPlan ? `正在调整方案 V${revisionPlan.version || 1}` : ''"
-        @send="submitMessage"
-        @update:model="agent.setSelectedModel"
-        @cancel-interaction="revisionPlan = null"
-        @stop="agent.stopStream"
-      />
       <CreateProjectDialog
         v-if="showProjectDialog"
         :project="projectBeingEdited"
         :busy="creatingProject"
         :error-message="creatingProject ? '' : agent.error"
-        @close="showProjectDialog = false"
+        @close="closeProjectDialog"
         @save="saveProject"
       />
       <ConfirmProjectDeleteDialog
diff --git a/ui/src/components/ChatComposer.test.js b/ui/src/components/ChatComposer.test.js
new file mode 100644
index 0000000..f2c32bc
--- /dev/null
+++ b/ui/src/components/ChatComposer.test.js
@@ -0,0 +1,98 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import ChatComposer from './ChatComposer.vue'
+
+// 只断言行为与无障碍锚点，不断言样式类名 —— 换成原语组件后这些断言无需改动。
+function sendButton(wrapper) {
+  return wrapper.get('.ui-btn--primary')
+}
+
+describe('ChatComposer', () => {
+  it('exposes configured model choices and emits model changes', async () => {
+    const wrapper = mount(ChatComposer, {
+      props: {
+        model: 'deepseek-flash',
+        models: [
+          { id: 'deepseek-flash', label: 'DeepSeek Flash' },
+          { id: 'deepseek-v4-pro', label: 'DeepSeek V4 Pro' },
+        ],
+      },
+    })
+    const selector = wrapper.get('select[aria-label="选择模型"]')
+    expect(selector.findAll('option')).toHaveLength(2)
+    await selector.setValue('deepseek-v4-pro')
+    expect(wrapper.emitted('update:model')?.[0]).toEqual(['deepseek-v4-pro'])
+  })
+
+  it('uses repository-free chat copy and sends text', async () => {
+    const wrapper = mount(ChatComposer, { props: { chatOnly: true, draft: '你好' } })
+    expect(wrapper.text()).toContain('普通聊天')
+    expect(wrapper.get('textarea').attributes('placeholder')).toContain('技术难题')
+    await sendButton(wrapper).trigger('click')
+    expect(wrapper.emitted('send')?.[0]).toEqual(['你好'])
+  })
+
+  it('keeps send disabled until the draft has non-whitespace content', async () => {
+    const wrapper = mount(ChatComposer, { props: { draft: '   ' } })
+    expect(sendButton(wrapper).element.disabled).toBe(true)
+    await wrapper.setProps({ draft: '写一个 FastAPI 接口' })
+    expect(sendButton(wrapper).element.disabled).toBe(false)
+  })
+
+  it('keeps send disabled while locked, and blocks the emit', async () => {
+    const wrapper = mount(ChatComposer, { props: { draft: '写一个接口', locked: true } })
+    expect(sendButton(wrapper).element.disabled).toBe(true)
+    await sendButton(wrapper).trigger('click')
+    expect(wrapper.emitted('send')).toBeUndefined()
+  })
+
+  it('trims the payload before sending', async () => {
+    const wrapper = mount(ChatComposer, { props: { draft: '  写一个接口  ' } })
+    await sendButton(wrapper).trigger('click')
+    expect(wrapper.emitted('send')?.[0]).toEqual(['写一个接口'])
+  })
+
+  it('sends on Enter and keeps Shift+Enter for a newline', async () => {
+    const wrapper = mount(ChatComposer, { props: { draft: '第一行' } })
+    await wrapper.get('textarea').trigger('keydown', { key: 'Enter', shiftKey: true })
+    expect(wrapper.emitted('send')).toBeUndefined()
+    await wrapper.get('textarea').trigger('keydown', { key: 'Enter' })
+    expect(wrapper.emitted('send')?.[0]).toEqual(['第一行'])
+  })
+
+  it('ignores Enter while an IME composition is in flight', async () => {
+    const wrapper = mount(ChatComposer, { props: { draft: '中文输入' } })
+    await wrapper.get('textarea').trigger('keydown', { key: 'Enter', isComposing: true })
+    expect(wrapper.emitted('send')).toBeUndefined()
+  })
+
+  it('swaps send for stop while a run is active, and locks the textarea', async () => {
+    const wrapper = mount(ChatComposer, { props: { draft: '继续', disabled: true } })
+    expect(wrapper.find('.ui-btn--primary').exists()).toBe(false)
+    expect(wrapper.get('textarea').element.disabled).toBe(true)
+    const stop = wrapper.get('.ui-btn--danger')
+    expect(stop.text()).toContain('停止运行')
+    await stop.trigger('click')
+    expect(wrapper.emitted('stop')).toHaveLength(1)
+  })
+
+  it('shows the locked hint on the placeholder and disables the textarea', async () => {
+    const wrapper = mount(ChatComposer, {
+      props: { locked: true, lockedHint: '等待人工介入答复' },
+    })
+    expect(wrapper.get('[role="status"]').text()).toBe('等待人工介入答复')
+    expect(wrapper.get('textarea').element.disabled).toBe(true)
+    expect(wrapper.get('textarea').attributes('placeholder')).toContain('人工介入卡片')
+  })
+
+  it('offers an explicit cancel for a pending interaction', async () => {
+    const wrapper = mount(ChatComposer, {
+      props: { interactionHint: '请确认方案调整', draft: '调整后的方案' },
+    })
+    expect(wrapper.text()).toContain('请确认方案调整')
+    expect(wrapper.get('textarea').attributes('placeholder')).toContain('如何调整方案')
+    await wrapper.get('button[aria-label="取消方案调整"]').trigger('click')
+    expect(wrapper.emitted('cancel-interaction')).toHaveLength(1)
+  })
+})
diff --git a/ui/src/components/ChatComposer.vue b/ui/src/components/ChatComposer.vue
index f9bd493..da1ebf0 100644
--- a/ui/src/components/ChatComposer.vue
+++ b/ui/src/components/ChatComposer.vue
@@ -1,5 +1,9 @@
 <script setup>
-import { computed, nextTick, shallowRef } from 'vue'
+import { computed } from 'vue'
+
+import UiButton from './ui/UiButton.vue'
+import UiSelect from './ui/UiSelect.vue'
+import UiTextarea from './ui/UiTextarea.vue'
 
 const props = defineProps({
   disabled: {
@@ -40,7 +44,6 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['send', 'stop', 'cancel-interaction', 'update:draft', 'update:model'])
-const inputRef = shallowRef(null)
 const draft = computed({ get: () => props.draft, set: (value) => emit('update:draft', value) })
 
 const effortLabel = computed(() => props.effort || 'default')
@@ -48,17 +51,9 @@ const canSend = computed(() => !props.disabled && !props.locked && Boolean(draft
 
 const providerLabel = computed(() => props.provider === 'gitee' ? 'Gitee' : 'GitHub')
 
-function resizeTextarea() {
-  const element = inputRef.value
-  if (!element) return
-  element.style.height = 'auto'
-  element.style.height = `${Math.min(Math.max(element.scrollHeight, 60), 140)}px`
-}
-
 function send() {
   const content = draft.value.trim()
   if (!content || props.disabled || props.locked) return
-  nextTick(resizeTextarea)
   emit('send', content)
 }
 
@@ -70,14 +65,9 @@ function onKeydown(event) {
   }
 }
 
-function onDraftInput() {
-  resizeTextarea()
-}
-
 function stop() {
   emit('stop')
 }
-
 </script>
 
 <template>
@@ -85,46 +75,73 @@ function stop() {
     <div v-if="lockedHint" class="composer-locked-hint" role="status">{{ lockedHint }}</div>
     <div v-if="interactionHint" class="composer-interaction-hint">
       <span>{{ interactionHint }}</span>
-      <button type="button" aria-label="取消方案调整" @click="emit('cancel-interaction')">取消</button>
+      <UiButton variant="ghost" size="sm" aria-label="取消方案调整" @click="emit('cancel-interaction')">取消</UiButton>
     </div>
-    <textarea
-      ref="inputRef"
+    <UiTextarea
       v-model="draft"
+      bare
+      auto-resize
+      :min-height="60"
+      :max-height="140"
       :disabled="disabled || locked"
       :placeholder="locked ? '请先在人工介入卡片中答复…' : interactionHint ? '描述你希望如何调整方案…' : chatOnly ? '写下你的问题、想法，或想一起推敲的技术难题…' : '描述你希望 CODING 在仓库中完成的工作…'"
       aria-label="任务指令"
-      @input="onDraftInput"
       @keydown="onKeydown"
     />
 
     <div class="composer-footer">
       <div class="composer-meta">
         <label class="model-picker" aria-label="选择模型">
-          <span class="model-picker-orbit" aria-hidden="true">✳</span>
-          <select :value="model" :disabled="disabled || models.length < 2" aria-label="选择模型" @change="emit('update:model', $event.target.value)">
-            <option v-for="option in models" :key="option.id" :value="option.id">{{ option.label }}</option>
-          </select>
-          <span class="model-picker-chevron" aria-hidden="true">⌄</span>
+          <UiSelect
+            bare
+            size="sm"
+            :model-value="model"
+            :options="models.map((option) => ({ value: option.id, label: option.label }))"
+            :disabled="disabled || models.length < 2"
+            aria-label="选择模型"
+            @update:model-value="emit('update:model', $event)"
+          >
+            <template #prefix><span class="model-picker-orbit" aria-hidden="true">✳</span></template>
+            <template #suffix><span class="model-picker-chevron" aria-hidden="true">⌄</span></template>
+          </UiSelect>
         </label>
         <span class="meta-chip reasoning-meta"><span class="meta-label">推理</span>{{ effortLabel }}</span>
       </div>
       <div v-if="chatOnly" class="composer-chat-context"><span class="chat-context-dot"></span>普通聊天</div>
-      <label v-else class="repo-control">
+      <!--
+        这里本来是 <label>，因为它以前包着一个真的 <input>。现在里面只有文字，
+        没有表单控件 —— 一个不指向任何控件的 <label> 是错语义，所以换成 <span>。
+        tabindex="0" 是为了让被 ellipsis 截断的长仓库名能用键盘聚焦、从而看到 title。
+      -->
+      <span v-else class="repo-control">
         <span class="repo-control-label">仓库</span>
-        <span class="repo-control-input repo-control-fixed" :title="repo">
+        <span class="repo-control-input repo-control-fixed" tabindex="0" :title="repo">
           <span class="sr-only">{{ providerLabel }} 仓库地址</span>
           <span class="repo-provider-label">{{ providerLabel }}</span>
           <span class="repo-fixed-name">{{ repo || '请先新建项目并选择仓库' }}</span>
         </span>
-      </label>
-      <button v-if="disabled" class="stop-button" type="button" @click="stop">
+      </span>
+      <UiButton
+        v-if="disabled"
+        class="composer-action"
+        variant="danger"
+        size="md"
+        @click="stop"
+      >
         <span aria-hidden="true">■</span>
         停止运行
-      </button>
-      <button v-else class="send-button" type="button" :disabled="!canSend" @click="send">
+      </UiButton>
+      <UiButton
+        v-else
+        class="composer-action"
+        variant="primary"
+        size="md"
+        :disabled="!canSend"
+        @click="send"
+      >
         发送
         <span aria-hidden="true">→</span>
-      </button>
+      </UiButton>
     </div>
   </footer>
 </template>
diff --git a/ui/src/components/ChatMessage.vue b/ui/src/components/ChatMessage.vue
index 9d31c6b..a17dde8 100644
--- a/ui/src/components/ChatMessage.vue
+++ b/ui/src/components/ChatMessage.vue
@@ -8,6 +8,7 @@ import TodoPlan from './TodoPlan.vue'
 import RunActivityCard from './RunActivityCard.vue'
 import ProposalCard from './ProposalCard.vue'
 import HumanInterventionCard from './HumanInterventionCard.vue'
+import { formatFullTime, formatRelativeTime, useNow } from '../composables/useRelativeTime.js'
 
 const props = defineProps({
   message: {
@@ -22,6 +23,19 @@ const emit = defineEmits(['plan-action', 'intervention-response', 'run-activity-
 
 const userExpanded = shallowRef(false)
 
+/**
+ * 消息头的时间。
+ *
+ * 近期用相对时间（"刚刚" / "12 分钟前"），超过一小时退回绝对时刻，
+ * 跨天再往前缀"昨天"、月和日。规则和理由在 `useRelativeTime.js` 里。
+ *
+ * 这里额外挂一个 `title` 给出精确到分钟的完整时刻 —— 相对时间的代价是丢掉准确值，
+ * 悬停补回来，这样"扫读快"和"查得到"两件事都成立。
+ */
+const now = useNow()
+const timeLabel = computed(() => formatRelativeTime(props.message?.timestamp, now.value))
+const timeTitle = computed(() => formatFullTime(props.message?.timestamp))
+
 const markdown = new MarkdownIt({
   html: false,
   linkify: true,
@@ -105,6 +119,7 @@ function handleCodeClick(event) {
           </svg>
         </span>
         <span>USER</span>
+        <time v-if="timeLabel" class="message-time" :title="timeTitle">{{ timeLabel }}</time>
       </div>
       <div class="user-bubble">
         <div class="plain-text">{{ visibleUserText }}</div>
@@ -130,6 +145,7 @@ function handleCodeClick(event) {
       <div class="message-meta">
         <img class="message-avatar" src="/coding-mark.svg" alt="CODING" />
         <span>CODING</span>
+        <time v-if="timeLabel" class="message-time" :title="timeTitle">{{ timeLabel }}</time>
       </div>
       <div class="assistant-message-body" @click="handleCodeClick">
         <div
diff --git a/ui/src/components/ConfirmProjectDeleteDialog.vue b/ui/src/components/ConfirmProjectDeleteDialog.vue
index f5a2a98..4da2c90 100644
--- a/ui/src/components/ConfirmProjectDeleteDialog.vue
+++ b/ui/src/components/ConfirmProjectDeleteDialog.vue
@@ -1,6 +1,9 @@
 <script setup>
 import { ref } from 'vue'
 
+import UiButton from './ui/UiButton.vue'
+import UiInput from './ui/UiInput.vue'
+
 const props = defineProps({
   project: { type: Object, required: true },
   busy: { type: Boolean, default: false },
@@ -23,11 +26,11 @@ function confirm() {
       <h2 id="delete-project-title">删除“{{ project.name }}”？</h2>
       <p id="delete-project-description" class="delete-description">此操作会永久删除该项目及其 <strong>{{ project.conversations?.length || 0 }} 个会话</strong>，包括聊天记录、运行记录和草稿。仓库代码不会被删除。</p>
       <label class="field-label" for="confirm-project-name">输入项目名称以确认</label>
-      <input id="confirm-project-name" v-model="confirmation" class="dialog-input" autocomplete="off" autofocus :placeholder="project.name" @keydown.enter.prevent="confirm" />
+      <UiInput id="confirm-project-name" v-model="confirmation" autocomplete="off" autofocus :placeholder="project.name" @keydown.enter.prevent="confirm" />
       <p v-if="errorMessage" class="dialog-error" role="alert">{{ errorMessage }}</p>
       <div class="dialog-actions">
-        <button class="button-secondary" type="button" :disabled="busy" @click="emit('close')">保留项目</button>
-        <button class="button-danger" type="button" :disabled="busy || confirmation.trim() !== project.name" @click="confirm">{{ busy ? '正在删除…' : '删除项目及所有会话' }}</button>
+        <UiButton variant="secondary" type="button" :disabled="busy" @click="emit('close')">保留项目</UiButton>
+        <UiButton variant="danger" type="button" :disabled="busy || confirmation.trim() !== project.name" @click="confirm">{{ busy ? '正在删除…' : '删除项目及所有会话' }}</UiButton>
       </div>
     </section>
   </div>
diff --git a/ui/src/components/CreateProjectDialog.test.js b/ui/src/components/CreateProjectDialog.test.js
new file mode 100644
index 0000000..47bd6b4
--- /dev/null
+++ b/ui/src/components/CreateProjectDialog.test.js
@@ -0,0 +1,100 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import CreateProjectDialog from './CreateProjectDialog.vue'
+
+const editingProject = {
+  id: 'project-1',
+  name: '开发工作台',
+  provider: 'github',
+  repo: 'https://github.com/example/app.git',
+  repoFullName: 'example/app',
+}
+
+// 只断言行为与无障碍锚点（id / role / 文案），不断言样式类名，
+// 这样把裸控件换成原语组件时这些测试无需改动 —— 它们就是「功能不变」的证据。
+describe('CreateProjectDialog', () => {
+  it('creates a project from name, provider and repo (trimmed)', async () => {
+    const wrapper = mount(CreateProjectDialog)
+
+    expect(wrapper.get('#project-name').element.value).toBe('')
+    expect(wrapper.get('#project-provider').findAll('option').map((option) => option.element.value))
+      .toEqual(['github', 'gitee'])
+
+    await wrapper.get('#project-name').setValue('  产品官网重构  ')
+    await wrapper.get('#project-provider').setValue('gitee')
+    await wrapper.get('#project-repo').setValue('  https://gitee.com/owner/repo  ')
+    await wrapper.get('form').trigger('submit')
+
+    expect(wrapper.emitted('save')?.[0]).toEqual([{
+      name: '产品官网重构',
+      provider: 'gitee',
+      repo: 'https://gitee.com/owner/repo',
+    }])
+  })
+
+  it('blocks submit and reports the first missing field', async () => {
+    const wrapper = mount(CreateProjectDialog)
+
+    await wrapper.get('form').trigger('submit')
+    expect(wrapper.get('[role="alert"]').text()).toBe('请填写项目名称')
+    expect(wrapper.emitted('save')).toBeUndefined()
+
+    await wrapper.get('#project-name').setValue('产品官网重构')
+    await wrapper.get('form').trigger('submit')
+    expect(wrapper.get('[role="alert"]').text()).toBe('请填写仓库地址')
+    expect(wrapper.emitted('save')).toBeUndefined()
+  })
+
+  it('switches the repo placeholder with the provider', async () => {
+    const wrapper = mount(CreateProjectDialog)
+
+    expect(wrapper.get('#project-repo').attributes('placeholder')).toBe('https://github.com/owner/repo')
+    await wrapper.get('#project-provider').setValue('gitee')
+    expect(wrapper.get('#project-repo').attributes('placeholder')).toBe('https://gitee.com/owner/repo')
+  })
+
+  it('renames an existing project without exposing the repo fields', async () => {
+    const wrapper = mount(CreateProjectDialog, { props: { project: editingProject } })
+
+    expect(wrapper.find('#project-repo').exists()).toBe(false)
+    expect(wrapper.find('#project-provider').exists()).toBe(false)
+    expect(wrapper.get('#project-name').element.value).toBe('开发工作台')
+    expect(wrapper.text()).toContain('重命名项目')
+    expect(wrapper.text()).toContain('example/app')
+
+    await wrapper.get('#project-name').setValue('新名字')
+    await wrapper.get('form').trigger('submit')
+
+    expect(wrapper.emitted('save')?.[0]).toEqual([{ id: 'project-1', name: '新名字' }])
+  })
+
+  it('resets the fields when the edited project changes', async () => {
+    const wrapper = mount(CreateProjectDialog, { props: { project: editingProject } })
+
+    await wrapper.setProps({ project: { ...editingProject, id: 'project-2', name: '另一个项目' } })
+
+    expect(wrapper.get('#project-name').element.value).toBe('另一个项目')
+  })
+
+  it('closes on Escape and on backdrop click, but never while busy', async () => {
+    const wrapper = mount(CreateProjectDialog)
+
+    await wrapper.get('.dialog-backdrop').trigger('keydown', { key: 'Escape' })
+    expect(wrapper.emitted('close')).toHaveLength(1)
+
+    await wrapper.get('.dialog-backdrop').trigger('click')
+    expect(wrapper.emitted('close')).toHaveLength(2)
+
+    await wrapper.setProps({ busy: true })
+    await wrapper.get('.dialog-backdrop').trigger('keydown', { key: 'Escape' })
+    await wrapper.get('.dialog-backdrop').trigger('click')
+    expect(wrapper.emitted('close')).toHaveLength(2)
+  })
+
+  it('surfaces the save error raised by the parent', async () => {
+    const wrapper = mount(CreateProjectDialog, { props: { errorMessage: '仓库地址已存在' } })
+
+    expect(wrapper.get('[role="alert"]').text()).toBe('仓库地址已存在')
+  })
+})
diff --git a/ui/src/components/CreateProjectDialog.vue b/ui/src/components/CreateProjectDialog.vue
index 12951b4..cba30b3 100644
--- a/ui/src/components/CreateProjectDialog.vue
+++ b/ui/src/components/CreateProjectDialog.vue
@@ -1,6 +1,10 @@
 <script setup>
 import { computed, ref, watch } from 'vue'
 
+import UiButton from './ui/UiButton.vue'
+import UiInput from './ui/UiInput.vue'
+import UiSelect from './ui/UiSelect.vue'
+
 const props = defineProps({
   project: { type: Object, default: null },
   busy: { type: Boolean, default: false },
@@ -8,6 +12,11 @@ const props = defineProps({
 })
 const emit = defineEmits(['close', 'save'])
 
+const PROVIDERS = [
+  { value: 'github', label: 'GitHub' },
+  { value: 'gitee', label: 'Gitee' },
+]
+
 const name = ref(props.project?.name || '')
 const provider = ref(props.project?.provider || 'github')
 const repo = ref('')
@@ -48,24 +57,21 @@ function onKeydown(event) {
       </div>
 
       <label class="field-label" for="project-name">项目名称</label>
-      <input id="project-name" v-model="name" class="dialog-input" maxlength="80" autofocus placeholder="例如：产品官网重构" />
+      <UiInput id="project-name" v-model="name" maxlength="80" autofocus placeholder="例如：产品官网重构" />
 
       <template v-if="!editing">
         <label class="field-label" for="project-provider">代码托管平台</label>
-        <select id="project-provider" v-model="provider" class="dialog-input">
-          <option value="github">GitHub</option>
-          <option value="gitee">Gitee</option>
-        </select>
+        <UiSelect id="project-provider" v-model="provider" :options="PROVIDERS" />
         <label class="field-label" for="project-repo">仓库地址</label>
-        <input id="project-repo" v-model="repo" class="dialog-input" :placeholder="repoPlaceholder" />
+        <UiInput id="project-repo" v-model="repo" :placeholder="repoPlaceholder" />
         <p class="dialog-hint">项目创建后，仓库地址将固定应用于项目中的所有会话。</p>
       </template>
       <div v-else class="bound-repository"><span class="bound-repository-mark">{{ project.provider === 'gitee' ? 'G' : 'GH' }}</span><span><strong>{{ project.provider === 'gitee' ? 'Gitee' : 'GitHub' }}</strong><small>{{ project.repoFullName || project.repo }}</small></span><span class="lock-mark" aria-label="仓库固定">⌑</span></div>
 
       <p v-if="error || errorMessage" class="dialog-error" role="alert">{{ error || errorMessage }}</p>
       <div class="dialog-actions">
-        <button class="button-secondary" type="button" :disabled="busy" @click="emit('close')">取消</button>
-        <button class="button-primary" type="submit" :disabled="busy">{{ busy ? '正在保存…' : editing ? '保存名称' : '创建项目' }}</button>
+        <UiButton variant="secondary" type="button" :disabled="busy" @click="emit('close')">取消</UiButton>
+        <UiButton variant="primary" type="submit" :disabled="busy">{{ busy ? '正在保存…' : editing ? '保存名称' : '创建项目' }}</UiButton>
       </div>
     </form>
   </div>
diff --git a/ui/src/components/HumanInterventionCard.vue b/ui/src/components/HumanInterventionCard.vue
index 4a3d56b..c470a7f 100644
--- a/ui/src/components/HumanInterventionCard.vue
+++ b/ui/src/components/HumanInterventionCard.vue
@@ -1,6 +1,9 @@
 <script setup>
 import { computed, ref } from 'vue'
 
+import UiButton from './ui/UiButton.vue'
+import UiTextarea from './ui/UiTextarea.vue'
+
 const props = defineProps({
   intervention: { type: Object, required: true },
   disabled: { type: Boolean, default: false },
@@ -29,18 +32,26 @@ function submit() {
     </header>
     <h4>{{ intervention.question }}</h4>
     <div v-if="intervention.options?.length" class="intervention-options">
-      <button
+      <UiButton
         v-for="option in intervention.options"
         :key="option"
-        type="button"
+        variant="secondary"
+        size="sm"
         :disabled="!canRespond"
         @click="response = option"
-      >{{ option }}</button>
+      >{{ option }}</UiButton>
     </div>
     <p v-if="props.intervention.status === 'resuming'" class="intervention-complete">答复已收到，正在从原任务断点继续。</p>
     <form v-else-if="pending" class="intervention-reply" @submit.prevent="submit">
-      <textarea v-model="response" :disabled="!canRespond" rows="2" placeholder="输入你的决定或补充说明…" aria-label="人工介入答复" />
-      <button type="submit" :disabled="!response.trim() || !canRespond">答复并继续</button>
+      <UiTextarea
+        v-model="response"
+        class="intervention-input"
+        :disabled="!canRespond"
+        :rows="2"
+        placeholder="输入你的决定或补充说明…"
+        aria-label="人工介入答复"
+      />
+      <UiButton type="submit" variant="primary" :disabled="!response.trim() || !canRespond">答复并继续</UiButton>
     </form>
     <p v-else class="intervention-complete">已收到答复，Agent 已继续处理。</p>
   </section>
diff --git a/ui/src/components/MessageActions.vue b/ui/src/components/MessageActions.vue
index eae756e..48119ca 100644
--- a/ui/src/components/MessageActions.vue
+++ b/ui/src/components/MessageActions.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { computed, onUnmounted, shallowRef } from 'vue'
 
+import UiButton from './ui/UiButton.vue'
+
 const props = defineProps({
   text: { type: String, required: true },
   timestamp: { type: [String, Number], default: null },
@@ -40,9 +42,11 @@ async function copyMessage() {
 
 <template>
   <div class="message-actions">
-    <button
+    <UiButton
       class="message-copy-button"
-      type="button"
+      variant="ghost"
+      size="sm"
+      icon
       :aria-label="copyError ? '复制失败' : copied ? '已复制消息' : '复制消息'"
       :title="copyError ? '复制失败' : copied ? '已复制' : '复制消息'"
       @click="copyMessage"
@@ -52,7 +56,7 @@ async function copyMessage() {
         <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" stroke="currentColor" stroke-width="1.7" />
       </svg>
       <span v-else aria-hidden="true">{{ copyError ? '!' : '✓' }}</span>
-    </button>
+    </UiButton>
     <span class="message-copy-feedback" aria-live="polite">
       {{ copyError ? '复制失败' : copied ? '已复制' : '' }}
     </span>
diff --git a/ui/src/components/ProposalCard.vue b/ui/src/components/ProposalCard.vue
index 31877ff..c638ab2 100644
--- a/ui/src/components/ProposalCard.vue
+++ b/ui/src/components/ProposalCard.vue
@@ -3,6 +3,8 @@ import { computed } from 'vue'
 import MarkdownIt from 'markdown-it'
 import DOMPurify from 'dompurify'
 
+import UiButton from './ui/UiButton.vue'
+
 const props = defineProps({
   proposal: { type: Object, required: true },
   disabled: { type: Boolean, default: false },
@@ -27,13 +29,15 @@ const statusLabel = computed(() => ({
     </header>
     <div class="proposal-card-content markdown-body" v-html="body"></div>
     <footer v-if="proposal.status === 'pending'" class="proposal-actions">
-      <button class="proposal-button proposal-button-primary" type="button" :disabled="disabled" @click="emit('action', 'approve')">
+      <UiButton variant="primary" :disabled="disabled" @click="emit('action', 'approve')">
         确认并实施
-      </button>
-      <button class="proposal-button" type="button" :disabled="disabled" @click="emit('action', 'revise')">调整方案</button>
-      <button class="proposal-button proposal-button-muted" type="button" :disabled="disabled" @click="emit('action', 'reject')">
+      </UiButton>
+      <UiButton variant="secondary" :disabled="disabled" @click="emit('action', 'revise')">
+        调整方案
+      </UiButton>
+      <UiButton variant="ghost" :disabled="disabled" @click="emit('action', 'reject')">
         拒绝实施
-      </button>
+      </UiButton>
     </footer>
   </section>
 </template>
diff --git a/ui/src/components/RunActivityCard.test.js b/ui/src/components/RunActivityCard.test.js
new file mode 100644
index 0000000..352b6e0
--- /dev/null
+++ b/ui/src/components/RunActivityCard.test.js
@@ -0,0 +1,103 @@
+// RunActivityCard 的特征测试。
+//
+// 重点是「深度思考」这一层：`kind === 'think'` 的事件必须**从平铺时间线里消失**，
+// 只出现在它自己的折叠块里。这条不变式很容易被以后某次"顺手简化一下 filter"破坏 ——
+// 破坏之后界面看起来仍然正常（内容还在），只是模型的推理和工具调用又混回一条列表里，
+// 而那种退化不会被任何截图看出来。
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import RunActivityCard from './RunActivityCard.vue'
+
+function activity(overrides = {}) {
+  return {
+    run_id: 'r1',
+    status: 'running',
+    started_at: new Date(Date.now() - 5000).toISOString(),
+    finished_at: null,
+    ...overrides,
+  }
+}
+
+const THINK = [
+  { id: 't1', kind: 'think', title: '先看分布再决定要不要动', status: 'completed', detail: {} },
+  { id: 't2', kind: 'think', title: '按频次归一而不是取平均', status: 'completed', detail: {} },
+]
+const OTHER = [
+  { id: 'e1', kind: 'other', title: '读取 main.css', status: 'completed', detail: { text: '1313 行' } },
+  { id: 'e2', kind: 'other', title: '运行 audit', status: 'in_progress', detail: {} },
+]
+const TODO = [{ id: 'd1', kind: 'todo', title: '清单快照', status: 'completed', detail: { todos: [{ content: '第一步', status: 'completed' }] } }]
+
+function mountCard(events) {
+  return mount(RunActivityCard, { props: { activity: activity(), events } })
+}
+
+describe('RunActivityCard · 深度思考', () => {
+  it('没有 think 事件时整块不渲染', () => {
+    const wrapper = mountCard(OTHER)
+    expect(wrapper.find('.think-block').exists()).toBe(false)
+  })
+
+  it('think 事件只进折叠块，不进平铺时间线', () => {
+    const wrapper = mountCard([...THINK, ...OTHER])
+
+    expect(wrapper.find('.think-block').exists()).toBe(true)
+    expect(wrapper.find('.think-toggle').attributes('aria-expanded')).toBe('false')
+
+    const timelineText = wrapper.find('.run-activity-timeline').text()
+    for (const event of THINK) expect(timelineText).not.toContain(event.title)
+    for (const event of OTHER) expect(timelineText).toContain(event.title)
+  })
+
+  it('收起时不渲染内容，点击后展开', async () => {
+    const wrapper = mountCard([...THINK, ...OTHER])
+    expect(wrapper.find('.think-list').exists()).toBe(false)
+
+    await wrapper.find('.think-toggle').trigger('click')
+
+    expect(wrapper.find('.think-toggle').attributes('aria-expanded')).toBe('true')
+    const thinkText = wrapper.find('.think-list').text()
+    for (const event of THINK) expect(thinkText).toContain(event.title)
+    for (const event of OTHER) expect(thinkText).not.toContain(event.title)
+  })
+
+  it('块上给出段数，而不是让人点开才知道有多少', () => {
+    const wrapper = mountCard([...THINK, ...OTHER])
+    expect(wrapper.find('.think-count').text()).toBe('2 段')
+  })
+
+  it('todo 事件既不进深度思考也不进时间线', () => {
+    const wrapper = mountCard([...TODO, ...THINK, ...OTHER])
+    expect(wrapper.find('.think-list').exists()).toBe(false)
+    const timelineText = wrapper.find('.run-activity-timeline').text()
+    expect(timelineText).not.toContain('清单快照')
+    expect(wrapper.find('.run-activity-event').exists()).toBe(true)
+  })
+
+  it('只有 think 事件时不显示「暂无可展示的执行过程」', () => {
+    const wrapper = mountCard(THINK)
+    // 空态判定必须把 think 也算进来，否则一条只有推理的运行会被说成"没有过程"。
+    expect(wrapper.find('.run-activity-empty').exists()).toBe(false)
+    expect(wrapper.find('.think-block').exists()).toBe(true)
+  })
+
+  it('确实没有任何事件时才落到空态', () => {
+    const wrapper = mountCard([])
+    expect(wrapper.find('.run-activity-empty').exists()).toBe(true)
+    expect(wrapper.find('.think-block').exists()).toBe(false)
+  })
+})
+
+describe('RunActivityCard · 展开状态', () => {
+  it('completed 默认收起，running 默认展开', () => {
+    const done = mount(RunActivityCard, {
+      props: { activity: activity({ status: 'completed', finished_at: new Date().toISOString() }), events: OTHER },
+    })
+    expect(done.find('.run-activity-empty').exists()).toBe(false)
+    expect(done.find('.run-activity-content').exists()).toBe(false)
+
+    const running = mountCard(OTHER)
+    expect(running.find('.run-activity-content').exists()).toBe(true)
+  })
+})
diff --git a/ui/src/components/RunActivityCard.vue b/ui/src/components/RunActivityCard.vue
index 124d4bd..3023ffc 100644
--- a/ui/src/components/RunActivityCard.vue
+++ b/ui/src/components/RunActivityCard.vue
@@ -35,7 +35,27 @@ const latestTodos = computed(() => {
   }
   return []
 })
-const timelineEvents = computed(() => props.events.filter((event) => event.kind !== 'todo'))
+const timelineEvents = computed(() => props.events.filter((event) => event.kind !== 'todo' && event.kind !== 'think'))
+
+/**
+ * 「深度思考」。
+ *
+ * `kind === 'think'` 的事件是模型自己的推理过程，和工具调用（`kind === 'other'`）
+ * 混在一条平铺列表里时读不出区别 —— 而它恰恰是最长、最需要折叠的那一类。
+ * 所以单独抽出来做成一层子折叠：默认收起（它经常比整个运行轨迹还长），
+ * 展开后按原顺序铺开。
+ *
+ * 不落盘持久化：这是一个"顺手看一眼"的控制，不是面板。
+ * 运行轨迹的展开状态要记住是因为它决定"这里有没有内容"；
+ * 深度思考记不记无所谓，每次回到这条消息重新看一遍反而更符合预期。
+ */
+const thinkEvents = computed(() => props.events.filter((event) => event.kind === 'think'))
+const thinkExpanded = shallowRef(false)
+
+function toggleThink() {
+  thinkExpanded.value = !thinkExpanded.value
+}
+
 const durationMs = computed(() => {
   const start = Date.parse(props.activity.started_at || '')
   if (!Number.isFinite(start)) return null
@@ -117,6 +137,29 @@ onUnmounted(() => {
     <div v-if="expanded" class="run-activity-content">
       <p v-if="loading" class="run-activity-loading">正在恢复执行记录…</p>
       <template v-else>
+        <div v-if="thinkEvents.length" class="think-block">
+          <button
+            type="button"
+            class="think-toggle"
+            :aria-expanded="thinkExpanded"
+            @click="toggleThink"
+          >
+            <span class="think-toggle-icon" aria-hidden="true">
+              <svg viewBox="0 0 20 20" :class="{ expanded: thinkExpanded }" focusable="false">
+                <path d="m5.5 7.5 4.5 4.5 4.5-4.5" />
+              </svg>
+            </span>
+            <span class="think-heading">深度思考</span>
+            <span class="think-count">{{ thinkEvents.length }} 段</span>
+          </button>
+          <ol v-if="thinkExpanded" class="think-list">
+            <li v-for="event in thinkEvents" :key="event.id" class="think-item">
+              <span class="think-title">{{ event.title }}</span>
+              <p v-if="event.detail?.text" class="think-text">{{ event.detail.text }}</p>
+            </li>
+          </ol>
+        </div>
+
         <TodoPlan v-if="latestTodos.length" :todos="latestTodos" />
         <ol v-if="timelineEvents.length" class="run-activity-timeline">
           <li v-for="event in timelineEvents" :key="event.id" class="run-activity-event">
@@ -125,7 +168,7 @@ onUnmounted(() => {
             <p v-if="event.detail?.text" class="run-activity-event-text">{{ event.detail.text }}</p>
           </li>
         </ol>
-        <p v-if="!latestTodos.length && !timelineEvents.length" class="run-activity-empty">
+        <p v-if="!latestTodos.length && !timelineEvents.length && !thinkEvents.length" class="run-activity-empty">
           暂无可展示的执行过程。
         </p>
       </template>
diff --git a/ui/src/components/SessionSidebar.test.js b/ui/src/components/SessionSidebar.test.js
index 56d1d54..1d33d65 100644
--- a/ui/src/components/SessionSidebar.test.js
+++ b/ui/src/components/SessionSidebar.test.js
@@ -3,7 +3,6 @@ import { afterEach, describe, expect, it } from 'vitest'
 
 import SessionSidebar from './SessionSidebar.vue'
 import ConfirmProjectDeleteDialog from './ConfirmProjectDeleteDialog.vue'
-import ChatComposer from './ChatComposer.vue'
 
 const project = {
   id: 'project-1',
@@ -22,6 +21,41 @@ const project = {
 afterEach(() => localStorage.clear())
 
 describe('SessionSidebar', () => {
+  // 「没读到项目列表」与「你还没有项目」必须长得不一样、也必须有出路。
+  it('shows a retry card instead of the empty state when the project list failed to load', async () => {
+    const wrapper = mount(SessionSidebar, {
+      props: { projects: [], projectsError: '加载项目列表失败：HTTP 503' },
+    })
+
+    expect(wrapper.find('.project-error').exists()).toBe(true)
+    // 空态引导不能同时出现 —— 否则用户会去点一个必然失败的「创建第一个项目」
+    expect(wrapper.find('.project-empty').exists()).toBe(false)
+    expect(wrapper.get('.project-error').text()).toContain('加载项目列表失败：HTTP 503')
+    expect(wrapper.get('.project-error').attributes('role')).toBe('alert')
+
+    await wrapper.get('.project-error button').trigger('click')
+    expect(wrapper.emitted('retry-projects')).toHaveLength(1)
+  })
+
+  it('shows a loading placeholder (not the empty-state CTA) while the list is still loading', async () => {
+    const wrapper = mount(SessionSidebar, { props: { projects: [], projectsLoading: true } })
+
+    expect(wrapper.find('.project-loading').exists()).toBe(true)
+    expect(wrapper.find('.project-empty').exists()).toBe(false)
+    expect(wrapper.find('.project-error').exists()).toBe(false)
+    expect(wrapper.get('.project-loading').attributes('role')).toBe('status')
+  })
+
+  it('keeps showing the empty-state CTA when the list loaded and is genuinely empty', async () => {
+    const wrapper = mount(SessionSidebar, { props: { projects: [], projectsError: '' } })
+
+    expect(wrapper.find('.project-error').exists()).toBe(false)
+    expect(wrapper.find('.project-empty').exists()).toBe(true)
+    await wrapper.get('.project-empty button').trigger('click')
+    expect(wrapper.emitted('new-project')).toHaveLength(1)
+    expect(wrapper.emitted('retry-projects')).toBeUndefined()
+  })
+
   it('shows three recent conversations and expands the rest', async () => {
     const wrapper = mount(SessionSidebar, { props: { projects: [project] } })
     expect(wrapper.findAll('.project-thread-item')).toHaveLength(3)
@@ -55,6 +89,78 @@ describe('SessionSidebar', () => {
     await shortcut.trigger('click')
     expect(wrapper.emitted('select-thread')?.at(-1)).toEqual(['thread-1'])
   })
+
+  // 下面这些是迁移到 UiButton 之前的特征测试：
+  // 只断言行为、aria 与文案，不断言外观类名，这样换原语后测试不改也应当全绿。
+  it('emits the top-level create actions', async () => {
+    const wrapper = mount(SessionSidebar, { props: { projects: [project] } })
+    await wrapper.get('.new-chat-button').trigger('click')
+    await wrapper.get('.new-project-button').trigger('click')
+    await wrapper.get('[aria-label="折叠侧栏"]').trigger('click')
+    expect(wrapper.emitted('new-chat')).toHaveLength(1)
+    expect(wrapper.emitted('new-project')).toHaveLength(1)
+    expect(wrapper.emitted('toggle-collapse')).toHaveLength(1)
+  })
+
+  it('keeps the create actions reachable from the collapsed rail', async () => {
+    const wrapper = mount(SessionSidebar, { props: { projects: [project], collapsed: true } })
+    await wrapper.get('[aria-label="新聊天"]').trigger('click')
+    await wrapper.get('[aria-label="新建项目"]').trigger('click')
+    expect(wrapper.emitted('new-chat')).toHaveLength(1)
+    expect(wrapper.emitted('new-project')).toHaveLength(1)
+  })
+
+  it('deletes a thread by click without selecting it, from a real unnested button', async () => {
+    const wrapper = mount(SessionSidebar, { props: { projects: [project] } })
+    const deletes = wrapper.findAll('[aria-label="删除会话"]')
+    expect(deletes).toHaveLength(3)
+
+    // 行操作必须是真的 <button>，而且不能嵌在另一个 <button> 里。
+    // 嵌套写法下内层既进不了 Tab 序，键盘事件还会被外层吞掉 —— 这正是迁移前的状态，
+    // 那时靠手写 keydown.enter 兜底，现在是浏览器原生行为，测试要守住的是结构本身。
+    expect(deletes[0].element.tagName).toBe('BUTTON')
+    expect(deletes[0].element.closest('button')).toBe(deletes[0].element)
+
+    await deletes[0].trigger('click')
+    expect(wrapper.emitted('delete-thread')?.[0]).toEqual(['thread-1'])
+    // 点删除不能顺带切换会话
+    expect(wrapper.emitted('select-thread')).toBeUndefined()
+
+    await deletes[1].trigger('click')
+    expect(wrapper.emitted('delete-thread')?.[1]).toEqual(['thread-2'])
+    expect(wrapper.emitted('select-thread')).toBeUndefined()
+  })
+
+  it('disables the project-scoped create action for a legacy project without a repo', () => {
+    const legacy = { ...project, id: 'project-legacy', name: '历史项目', legacy: true, repo: '' }
+    const wrapper = mount(SessionSidebar, { props: { projects: [legacy] } })
+    expect(wrapper.get('[aria-label="在 历史项目 新建会话"]').element.disabled).toBe(true)
+  })
+
+  it('opens the project menu and routes rename and delete from it', async () => {
+    const wrapper = mount(SessionSidebar, { props: { projects: [project] } })
+    await wrapper.get('[aria-label="开发工作台 项目菜单"]').trigger('click')
+    const menu = wrapper.get('[role="menu"]')
+    expect(menu.findAll('[role="menuitem"]')).toHaveLength(2)
+
+    await menu.findAll('[role="menuitem"]')[0].trigger('click')
+    expect(wrapper.find('.project-rename-input').exists()).toBe(true)
+
+    await wrapper.get('[aria-label="开发工作台 项目菜单"]').trigger('click')
+    await wrapper.get('[role="menu"]').findAll('[role="menuitem"]')[1].trigger('click')
+    expect(wrapper.emitted('delete-project')?.[0]?.[0].id).toBe('project-1')
+  })
+
+  it('offers a create action inside an empty project and in the empty project list', async () => {
+    const empty = { ...project, id: 'project-empty', name: '空项目', conversations: [] }
+    const wrapper = mount(SessionSidebar, { props: { projects: [empty] } })
+    await wrapper.get('.project-no-conversations button').trigger('click')
+    expect(wrapper.emitted('new-thread')?.[0]).toEqual(['project-empty'])
+
+    const none = mount(SessionSidebar, { props: { projects: [] } })
+    await none.get('.project-empty button').trigger('click')
+    expect(none.emitted('new-project')).toHaveLength(1)
+  })
 })
 
 describe('ConfirmProjectDeleteDialog', () => {
@@ -63,12 +169,12 @@ describe('ConfirmProjectDeleteDialog', () => {
       props: { project: { ...project, conversations: project.conversations.slice(0, 2) } },
     })
     expect(wrapper.text()).toContain('2 个会话')
-    expect(wrapper.get('.button-danger').element.disabled).toBe(true)
+    expect(wrapper.get('.ui-btn--danger').element.disabled).toBe(true)
     await wrapper.get('#confirm-project-name').setValue('另一个项目')
-    expect(wrapper.get('.button-danger').element.disabled).toBe(true)
+    expect(wrapper.get('.ui-btn--danger').element.disabled).toBe(true)
     await wrapper.get('#confirm-project-name').setValue(project.name)
-    expect(wrapper.get('.button-danger').element.disabled).toBe(false)
-    await wrapper.get('.button-danger').trigger('click')
+    expect(wrapper.get('.ui-btn--danger').element.disabled).toBe(false)
+    await wrapper.get('.ui-btn--danger').trigger('click')
     expect(wrapper.emitted('confirm')).toHaveLength(1)
   })
 
@@ -81,29 +187,3 @@ describe('ConfirmProjectDeleteDialog', () => {
     expect(wrapper.emitted('close')).toHaveLength(1)
   })
 })
-
-describe('ChatComposer', () => {
-  it('exposes configured model choices and emits model changes', async () => {
-    const wrapper = mount(ChatComposer, {
-      props: {
-        model: 'deepseek-flash',
-        models: [
-          { id: 'deepseek-flash', label: 'DeepSeek Flash' },
-          { id: 'deepseek-v4-pro', label: 'DeepSeek V4 Pro' },
-        ],
-      },
-    })
-    const selector = wrapper.get('select[aria-label="选择模型"]')
-    expect(selector.findAll('option')).toHaveLength(2)
-    await selector.setValue('deepseek-v4-pro')
-    expect(wrapper.emitted('update:model')?.[0]).toEqual(['deepseek-v4-pro'])
-  })
-
-  it('uses repository-free chat copy and sends text', async () => {
-    const wrapper = mount(ChatComposer, { props: { chatOnly: true, draft: '你好' } })
-    expect(wrapper.text()).toContain('普通聊天')
-    expect(wrapper.get('textarea').attributes('placeholder')).toContain('技术难题')
-    await wrapper.get('.send-button').trigger('click')
-    expect(wrapper.emitted('send')?.[0]).toEqual(['你好'])
-  })
-})
diff --git a/ui/src/components/SessionSidebar.vue b/ui/src/components/SessionSidebar.vue
index 4c0d9f4..69856dd 100644
--- a/ui/src/components/SessionSidebar.vue
+++ b/ui/src/components/SessionSidebar.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { computed, nextTick, ref, watch } from 'vue'
 
+import UiButton from './ui/UiButton.vue'
+
 const props = defineProps({
   projects: { type: Array, default: () => [] },
   standaloneThreads: { type: Array, default: () => [] },
@@ -8,11 +10,17 @@ const props = defineProps({
   disabled: { type: Boolean, default: false },
   collapsed: { type: Boolean, default: false },
   collapsedProjectIds: { type: Array, default: () => [] },
+  // 「项目列表没读到」——与「一个项目都没有」是两件事，界面上必须分开。
+  // 传空字符串表示读到了（哪怕是空数组）。
+  projectsError: { type: String, default: '' },
+  // 「还在读」也是第三种情况：这时 `projects` 同样是空的，
+  // 不能让它冒充「你还没有项目」，否则首屏会先闪一下「创建第一个项目」再跳走。
+  projectsLoading: { type: Boolean, default: false },
 })
 
 const emit = defineEmits([
   'new-chat', 'new-project', 'new-thread', 'select-thread', 'delete-thread',
-  'rename-project', 'delete-project', 'toggle-project', 'toggle-collapse',
+  'rename-project', 'delete-project', 'toggle-project', 'toggle-collapse', 'retry-projects',
 ])
 
 const editingProjectId = ref(null)
@@ -99,14 +107,14 @@ try {
         <img src="/coding-mark.svg" alt="CODING" />
         <span v-if="!collapsed" class="brand-name">CODING</span>
       </div>
-      <button class="sidebar-toggle" type="button" :aria-label="collapsed ? '展开侧栏' : '折叠侧栏'" @click="emit('toggle-collapse')">
+      <UiButton class="sidebar-toggle" variant="ghost" size="sm" icon :aria-label="collapsed ? '展开侧栏' : '折叠侧栏'" @click="emit('toggle-collapse')">
         <svg viewBox="0 0 20 20" aria-hidden="true"><path :d="collapsed ? 'm7 4 6 6-6 6' : 'm13 4-6 6 6 6'" /></svg>
-      </button>
+      </UiButton>
     </div>
 
     <div v-if="!collapsed" class="sidebar-create-actions">
-      <button class="new-chat-button" type="button" :disabled="disabled" @click="emit('new-chat')"><span aria-hidden="true">↗</span><span>新聊天</span><kbd>{{ commandModifier }} K</kbd></button>
-      <button class="new-project-button" type="button" :disabled="disabled" @click="emit('new-project')"><span aria-hidden="true">＋</span><span>新建项目</span></button>
+      <UiButton class="new-chat-button" variant="secondary" size="md" block align="start" :disabled="disabled" @click="emit('new-chat')"><span aria-hidden="true">↗</span><span>新聊天</span><kbd>{{ commandModifier }} K</kbd></UiButton>
+      <UiButton class="new-project-button" variant="primary" size="md" block align="start" :disabled="disabled" @click="emit('new-project')"><span aria-hidden="true">＋</span><span>新建项目</span></UiButton>
     </div>
     <div v-else class="sidebar-create-actions collapsed-create-actions">
       <button class="rail-action" type="button" title="新聊天" aria-label="新聊天" @click="emit('new-chat')"><span aria-hidden="true">↗</span></button>
@@ -116,45 +124,60 @@ try {
     <nav v-if="!collapsed" class="thread-list" aria-label="聊天和项目">
       <div v-if="standaloneThreads.length" class="sidebar-list-section">
         <div class="sidebar-section-label"><span>最近聊天</span><span class="section-count">{{ standaloneThreads.length }}</span></div>
-        <button v-for="thread in standaloneThreads" :key="thread.id" type="button" class="thread-item standalone-thread-item" :class="{ active: thread.id === activeId }" @click="emit('select-thread', thread.id)">
-          <span class="status-dot" :class="thread.status"></span>
-          <span class="thread-content"><span class="thread-title">{{ thread.title || '新聊天' }}</span><small>普通聊天</small></span>
-          <span class="thread-delete" role="button" tabindex="0" aria-label="删除聊天" @click.stop="emit('delete-thread', thread.id)" @keydown.enter.stop.prevent="emit('delete-thread', thread.id)">×</span>
-        </button>
+        <div v-for="thread in standaloneThreads" :key="thread.id" class="thread-row" :class="{ 'is-active': thread.id === activeId }">
+          <button type="button" class="thread-item standalone-thread-item" :class="{ active: thread.id === activeId }" :title="thread.title || '新聊天'" @click="emit('select-thread', thread.id)">
+            <span class="status-dot" :class="thread.status"></span>
+            <span class="thread-content"><span class="thread-title">{{ thread.title || '新聊天' }}</span><small>普通聊天</small></span>
+          </button>
+          <button type="button" class="thread-delete" aria-label="删除聊天" @click="emit('delete-thread', thread.id)">×</button>
+        </div>
       </div>
 
       <div class="sidebar-list-section project-list-section">
         <div class="sidebar-section-label"><span>项目</span><span class="section-count">{{ projects.length }}</span></div>
         <section v-for="project in projects" :key="project.id" class="project-group" :class="{ 'project-is-collapsed': collapsedProjectIds.includes(project.id) }">
           <div class="project-heading">
-            <button class="project-disclosure" type="button" :aria-label="`${collapsedProjectIds.includes(project.id) ? '展开' : '折叠'}项目 ${project.name}`" :aria-expanded="!collapsedProjectIds.includes(project.id)" @click="emit('toggle-project', project.id)">
+            <UiButton class="project-disclosure" variant="ghost" size="sm" icon :aria-label="`${collapsedProjectIds.includes(project.id) ? '展开' : '折叠'}项目 ${project.name}`" :aria-expanded="!collapsedProjectIds.includes(project.id)" @click="emit('toggle-project', project.id)">
               <svg viewBox="0 0 16 16" aria-hidden="true"><path d="m5 6 3 3 3-3" /></svg>
-            </button>
+            </UiButton>
             <span class="project-heading-main">
               <input v-if="editingProjectId === project.id" v-model="projectNameDraft" class="project-rename-input" maxlength="80" :aria-label="`项目 ${project.name} 新名称`" @blur="saveRename(project)" @keydown="onRenameKeydown($event, project)" />
               <strong v-else :title="`${project.name}（双击重命名）`" @dblclick.stop="beginRename(project)">{{ project.name }}</strong>
-              <small :title="project.repoFullName || project.repo"><span class="provider-mark" :class="project.provider">{{ project.provider === 'gitee' ? 'G' : 'GH' }}</span>{{ project.repoFullName || project.repo || '历史仓库未记录' }}</small>
+              <small :title="project.repoFullName || project.repo"><span class="provider-mark" :class="project.provider">{{ project.provider === 'gitee' ? 'G' : 'GH' }}</span><span class="repo-name">{{ project.repoFullName || project.repo || '历史仓库未记录' }}</span></small>
             </span>
-            <button class="project-add-thread" type="button" :disabled="disabled || project.legacy && !project.repo" :aria-label="`在 ${project.name} 新建会话`" title="在此项目中新建会话" @click="emit('new-thread', project.id)">＋</button>
-            <button class="project-menu-trigger" type="button" :aria-label="`${project.name} 项目菜单`" :aria-expanded="openMenuId === project.id" @click="openProjectMenu($event, project)">···</button>
+            <UiButton class="project-add-thread" variant="ghost" size="sm" icon :disabled="disabled || project.legacy && !project.repo" :aria-label="`在 ${project.name} 新建会话`" title="在此项目中新建会话" @click="emit('new-thread', project.id)">＋</UiButton>
+            <UiButton class="project-menu-trigger" variant="ghost" size="sm" icon :aria-label="`${project.name} 项目菜单`" :aria-expanded="openMenuId === project.id" @click="openProjectMenu($event, project)">···</UiButton>
             <div v-if="openMenuId === project.id" class="project-context-menu" role="menu">
               <button type="button" role="menuitem" @click="beginRename(project)"><span>✎</span>重命名项目</button>
               <button type="button" role="menuitem" class="context-danger" @click="openMenuId = null; emit('delete-project', project)"><span>⌫</span>删除项目</button>
             </div>
           </div>
           <div v-show="!collapsedProjectIds.includes(project.id)" class="project-conversations">
-            <button v-for="thread in visibleConversations(project)" :key="thread.id" type="button" class="thread-item project-thread-item" :class="{ active: thread.id === activeId }" :title="thread.title || '新会话'" @click="emit('select-thread', thread.id)">
-              <span class="status-dot" :class="thread.status"></span>
-              <span class="thread-content"><span class="thread-title">{{ thread.title || '新会话' }}</span></span>
-              <span class="thread-delete" role="button" tabindex="0" aria-label="删除会话" @click.stop="emit('delete-thread', thread.id)" @keydown.enter.stop.prevent="emit('delete-thread', thread.id)">×</span>
-            </button>
-            <button v-if="(project.conversations || []).length > 3" class="show-more-button" type="button" @click="toggleRecent(project.id)">
+            <div v-for="thread in visibleConversations(project)" :key="thread.id" class="thread-row" :class="{ 'is-active': thread.id === activeId }">
+              <button type="button" class="thread-item project-thread-item" :class="{ active: thread.id === activeId }" :title="thread.title || '新会话'" @click="emit('select-thread', thread.id)">
+                <span class="status-dot" :class="thread.status"></span>
+                <span class="thread-content"><span class="thread-title">{{ thread.title || '新会话' }}</span></span>
+              </button>
+              <button type="button" class="thread-delete" aria-label="删除会话" @click="emit('delete-thread', thread.id)">×</button>
+            </div>
+            <UiButton v-if="(project.conversations || []).length > 3" class="show-more-button" variant="ghost" size="sm" @click="toggleRecent(project.id)">
               {{ expandedProjectIds.has(project.id) ? '收起' : `展开显示其余 ${(project.conversations || []).length - 3} 个会话` }}
-            </button>
-            <div v-if="!project.conversations?.length" class="project-no-conversations">尚无会话 <button type="button" @click="emit('new-thread', project.id)">新建</button></div>
+            </UiButton>
+            <div v-if="!project.conversations?.length" class="project-no-conversations">尚无会话 <UiButton variant="ghost" size="sm" @click="emit('new-thread', project.id)">新建</UiButton></div>
           </div>
         </section>
-        <div v-if="!projects.length" class="project-empty"><span class="empty-folder">⌂</span><strong>项目会出现在这里</strong><small>创建项目并绑定仓库，开始持续开发。</small><button type="button" @click="emit('new-project')">创建第一个项目</button></div>
+        <div v-if="!projects.length && projectsError" class="project-error" role="alert">
+          <span class="error-mark" aria-hidden="true">!</span>
+          <strong>项目列表没能加载</strong>
+          <small>{{ projectsError }}</small>
+          <p class="project-error-hint">这不代表你还没有项目。重试一次，或先继续用普通聊天。</p>
+          <UiButton variant="secondary" size="sm" @click="emit('retry-projects')">重新加载</UiButton>
+        </div>
+        <div v-else-if="!projects.length && projectsLoading" class="project-loading" role="status" aria-live="polite">
+          <span class="loading-spinner" aria-hidden="true"></span>
+          <small>正在加载项目…</small>
+        </div>
+        <div v-else-if="!projects.length" class="project-empty"><span class="empty-folder">⌂</span><strong>项目会出现在这里</strong><small>创建项目并绑定仓库，开始持续开发。</small><UiButton variant="primary" size="sm" @click="emit('new-project')">创建第一个项目</UiButton></div>
       </div>
     </nav>
 
diff --git a/ui/src/components/TodoPlan.vue b/ui/src/components/TodoPlan.vue
index 50f491e..3b8cbdf 100644
--- a/ui/src/components/TodoPlan.vue
+++ b/ui/src/components/TodoPlan.vue
@@ -16,8 +16,8 @@ function icon(status) {
 <template>
   <section class="todo-card">
     <header>
-      <span>☷</span>
-      <strong>{{ todos.filter((item) => item.status === 'completed').length }} out of {{ todos.length }} tasks completed</strong>
+      <span aria-hidden="true">☷</span>
+      <strong>已完成 {{ todos.filter((item) => item.status === 'completed').length }} / {{ todos.length }} 项</strong>
     </header>
     <ol>
       <li
diff --git a/ui/src/components/WorkspaceConversation.vue b/ui/src/components/WorkspaceConversation.vue
new file mode 100644
index 0000000..b7da8d3
--- /dev/null
+++ b/ui/src/components/WorkspaceConversation.vue
@@ -0,0 +1,171 @@
+<script setup>
+/**
+ * 主区的会话流：加载态 / 空态 / 消息列表 / 错误横幅 /「N 条新内容」/ 输入框，
+ * 加上围着它转的那一套交互流程（方案审批、人工介入答复、运行轨迹展开）。
+ *
+ * 为什么这一整块要独立成组件：它的核心是 `useSmartScroll` 那套「用户是不是
+ * 贴着底部」的判断，而**未读计数只在用户不贴底时才累加** —— 也就是说
+ * 消息区、未读按钮、输入框三者共享同一个滚动上下文，拆开任何一半都会让
+ * 状态穿过组件边界。它天然是一个整体。
+ *
+ * 项目级动作（新建项目）不在这里，往上抛给 `AgentWorkspace.vue`。
+ */
+import { computed, nextTick, ref, watch } from 'vue'
+
+import ChatComposer from './ChatComposer.vue'
+import ChatMessage from './ChatMessage.vue'
+import WorkspaceWelcome from './WorkspaceWelcome.vue'
+import { useSmartScroll } from '../composables/useSmartScroll'
+import { useAgentStore } from '../stores/agent'
+
+const emit = defineEmits(['new-project'])
+
+const agent = useAgentStore()
+const messageList = ref(null)
+/** 正在"调整方案"的目标；非空时输入框会提示，且下一条消息带上 revise_plan。 */
+const revisionPlan = ref(null)
+
+const pendingIntervention = computed(() => {
+  if (agent.currentThread && Object.hasOwn(agent.currentThread, 'pendingIntervention')) {
+    return agent.currentThread.pendingIntervention
+  }
+  for (const message of agent.messages) {
+    const active = (message.chunks || []).find((chunk) => (
+      chunk.kind === 'intervention' && ['pending', 'resuming'].includes(chunk.status)
+    ))
+    if (active) return active
+  }
+  return null
+})
+
+const {
+  hasUnreadContent,
+  unreadContentCount,
+  onScroll,
+  notifyContentChanged,
+  resetToLatest,
+  scrollToLatest,
+} = useSmartScroll(messageList)
+
+async function createChatThread() {
+  try { await agent.createChatThread() }
+  catch (error) { agent.error = error.message || '创建聊天失败' }
+}
+
+function submitMessage(content) {
+  // 等待人工介入时输入框已经锁住，这里是第二道防线。
+  if (pendingIntervention.value) return
+  scrollToLatest()
+  if (revisionPlan.value) {
+    const plan = revisionPlan.value
+    revisionPlan.value = null
+    agent.submit(content, { interaction_action: 'revise_plan', plan_id: plan.plan_id })
+    return
+  }
+  agent.submit(content)
+}
+
+function handlePlanAction({ action, proposal }) {
+  if (action === 'revise') {
+    // 不立刻发请求：把下一条用户输入当作修订意见一起提交。
+    revisionPlan.value = proposal
+    return
+  }
+  const decision = action === 'approve' ? 'approve_plan' : 'reject_plan'
+  const prompt = action === 'approve' ? '确认并实施该方案' : '拒绝实施该方案'
+  agent.submit(prompt, { interaction_action: decision, plan_id: proposal.plan_id })
+}
+
+function handleInterventionResponse({ intervention_id, response }) {
+  agent.submit(response, { interaction_action: 'resume_intervention', intervention_id })
+}
+
+function handleRunActivityExpand({ run_id }) {
+  agent.loadRunActivity(run_id)
+}
+
+// 消息变长了才需要重算"现在离底部多远"。只比 id 不够 —— 流式输出时 id 不变。
+watch(
+  () => agent.messages.map((message) => {
+    const length = message.chunks?.map((chunk) => {
+      if (chunk.kind === 'todo') return JSON.stringify(chunk.todos || [])
+      return chunk.text || ''
+    }).join('').length || 0
+    return `${message.id}:${length}`
+  }).join('|'),
+  async () => {
+    await nextTick()
+    notifyContentChanged()
+  },
+)
+
+watch(
+  () => agent.currentThreadId,
+  async () => {
+    revisionPlan.value = null
+    await nextTick()
+    resetToLatest()
+  },
+)
+</script>
+
+<template>
+  <div ref="messageList" class="message-list" @scroll="onScroll">
+    <div v-if="agent.loading" class="empty-state loading-state" role="status" aria-live="polite">
+      <span class="loading-spinner" aria-hidden="true"></span>
+      <p class="empty-copy">正在加载会话…</p>
+    </div>
+    <WorkspaceWelcome
+      v-else-if="!agent.messages.length"
+      :chat-only="!!agent.currentThread?.chatOnly"
+      :project-name="agent.currentProject?.name || ''"
+      :has-thread="!!agent.currentThread"
+      :model="agent.selectedModel"
+      @new-chat="createChatThread"
+      @new-project="emit('new-project')"
+    />
+
+    <ChatMessage
+      v-for="message in agent.messages"
+      :key="message.id"
+      :message="message"
+      :disabled="agent.streaming"
+      :run-activity-events="agent.runActivityEvents"
+      :run-activity-loading="agent.runActivityLoading"
+      @plan-action="handlePlanAction"
+      @intervention-response="handleInterventionResponse"
+      @run-activity-expand="handleRunActivityExpand"
+    />
+
+    <div v-if="agent.error" class="error-banner">{{ agent.error }}</div>
+  </div>
+
+  <button
+    v-if="hasUnreadContent"
+    class="new-content-button"
+    type="button"
+    @click="scrollToLatest('smooth')"
+  >
+    <span aria-hidden="true">↓</span>
+    {{ unreadContentCount >= 99 ? '99+ 条新内容' : `${unreadContentCount} 条新内容` }}
+  </button>
+
+  <ChatComposer
+    :draft="agent.currentDraft"
+    @update:draft="agent.setDraft(agent.currentThreadId, $event)"
+    :repo="agent.currentThread?.repoFullName || agent.currentThread?.repo || ''"
+    :provider="agent.currentThread?.provider || 'github'"
+    :chat-only="!agent.currentThread || !!agent.currentThread.chatOnly"
+    :disabled="agent.streaming"
+    :locked="!!pendingIntervention"
+    :locked-hint="pendingIntervention ? '此会话正在等待人工介入答复，请在上方确认卡片中提交答复后继续。' : ''"
+    :model="agent.selectedModel"
+    :models="agent.modelOptions"
+    :effort="agent.selectedEffort"
+    :interaction-hint="revisionPlan ? `正在调整方案 V${revisionPlan.version || 1}` : ''"
+    @send="submitMessage"
+    @update:model="agent.setSelectedModel"
+    @cancel-interaction="revisionPlan = null"
+    @stop="agent.stopStream"
+  />
+</template>
diff --git a/ui/src/components/WorkspaceHeader.vue b/ui/src/components/WorkspaceHeader.vue
new file mode 100644
index 0000000..405da4f
--- /dev/null
+++ b/ui/src/components/WorkspaceHeader.vue
@@ -0,0 +1,160 @@
+<script setup>
+/**
+ * 主区 Header：文件夹图标 + 会话标题（可双击改名）+ 仓库/项目副标题 + 右侧状态胶囊。
+ *
+ * 刻意做成"受控组件"：改名要打接口，异步与错误归父级管（`AgentWorkspace.vue`），
+ * 这里只持有"正在编辑"这一点纯 UI 状态，并 emit `rename`。
+ * 与 `SessionSidebar.vue` 的 rename 分工会不同 —— 那里组件自己管编辑态也自己发请求，
+ * 因为侧栏的项目改名没有保存中/保存失败这两个可见状态要渲染。
+ *
+ * 本组件**必须保持原有 DOM 结构与类名**：`ui/src/styles/main.css` 按类名命中，
+ * `AgentWorkspace.test.js` 按 `.workspace-header h1` / `.workspace-title-input` 断言。
+ */
+import { computed, nextTick, ref } from 'vue'
+
+const props = defineProps({
+  /** 已经算好的标题（后端 title 或从前几条消息推导出来的） */
+  title: { type: String, default: '' },
+  /**
+   * 面包屑的第一级：项目名，或「普通聊天」。空字符串表示还没有上下文，
+   * 这时面包屑只显示标题本身。
+   */
+  crumb: { type: String, default: '' },
+  /** 第二行徽标：仓库全名，或「未连接仓库」。空字符串表示不显示徽标。 */
+  repoLabel: { type: String, default: '' },
+  chatOnly: { type: Boolean, default: false },
+  /** 有会话 id 才允许改名 */
+  editable: { type: Boolean, default: false },
+  status: { type: String, default: '' },
+  streaming: { type: Boolean, default: false },
+  branchLabel: { type: String, default: '' },
+  /** 是否显示分支标签（普通聊天不显示） */
+  showBranch: { type: Boolean, default: false },
+  prUrl: { type: String, default: '' },
+  saving: { type: Boolean, default: false },
+  errorMessage: { type: String, default: '' },
+})
+
+const emit = defineEmits(['rename'])
+
+/**
+ * 仓库徽标在两种情况下不显示：
+ *   1. 没有仓库（空字符串）；
+ *   2. **仓库名和面包屑的项目名一模一样** —— 这不是边界情况，是常态：
+ *      项目基本都是按仓库建的，两个字符串相同。并排显示等于同一句话写两遍。
+ *      这种情况下去掉徽标，面包屑那一行已经把信息说完了。
+ */
+const showRepo = computed(() => !!props.repoLabel && props.repoLabel !== props.crumb)
+
+const isEditing = ref(false)
+const draft = ref('')
+const inputRef = ref(null)
+
+/** 状态胶囊文案。这里而不是 store 里，因为它纯粹是显示措辞。 */
+function statusText() {
+  if (props.streaming || props.status === 'running') return '正在运行'
+  if (props.status === 'queued') return '排队中'
+  if (props.status === 'cancelling') return '正在取消'
+  if (props.status === 'awaiting_approval') return '等待你介入'
+  if (props.status === 'cancelled') return '已取消'
+  if (props.status === 'interrupted') return '运行中断'
+  if (props.status === 'error' || props.status === 'failed') return '运行失败'
+  if (props.status === 'finished' || props.status === 'completed') return '已完成'
+  return '等待任务'
+}
+
+function startEdit() {
+  if (!props.editable || props.saving) return
+  draft.value = props.title
+  isEditing.value = true
+  nextTick(() => {
+    inputRef.value?.focus()
+    inputRef.value?.select()
+  })
+}
+
+function cancelEdit() {
+  isEditing.value = false
+  draft.value = props.title
+}
+
+function commit() {
+  if (!isEditing.value) return
+  const nextTitle = draft.value.trim()
+  const previousTitle = props.title
+  isEditing.value = false
+
+  // 空标题或没改动就什么都不做 —— 不发请求、不报错。
+  if (!nextTitle || nextTitle === previousTitle) {
+    draft.value = previousTitle
+    return
+  }
+  emit('rename', nextTitle)
+}
+
+function onKeydown(event) {
+  // 中文输入法组合期间的回车是"选字"，不是"提交"。
+  if (event.isComposing) return
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    cancelEdit()
+    return
+  }
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    commit()
+  }
+}
+</script>
+
+<template>
+  <header class="workspace-header">
+    <div class="workspace-heading">
+      <span class="conversation-icon" aria-hidden="true">
+        <svg viewBox="0 0 24 24" focusable="false">
+          <path d="M3.5 6.5h6l1.8 2H20.5v9.25a1.75 1.75 0 0 1-1.75 1.75H5.25a1.75 1.75 0 0 1-1.75-1.75V6.5Z" />
+          <path d="M3.5 6.5V5.75A1.75 1.75 0 0 1 5.25 4h4.1l1.8 2h7.6A1.75 1.75 0 0 1 20.5 7.75V8.5" />
+        </svg>
+      </span>
+      <div class="workspace-heading-body">
+        <div class="workspace-title-row">
+          <template v-if="crumb">
+            <span class="crumb-root" :title="crumb">{{ crumb }}</span>
+            <span class="crumb-sep" aria-hidden="true">/</span>
+          </template>
+          <input
+            v-if="isEditing"
+            ref="inputRef"
+            v-model="draft"
+            class="workspace-title-input"
+            type="text"
+            maxlength="80"
+            aria-label="会话标题"
+            @blur="commit"
+            @keydown="onKeydown"
+          />
+          <h1
+            v-else
+            :title="editable ? '双击编辑会话名称' : title"
+            @dblclick="startEdit"
+          >
+            {{ title }}
+          </h1>
+          <span v-if="saving" class="title-save-state" aria-live="polite">保存中</span>
+          <span v-else-if="errorMessage" class="title-save-error" :title="errorMessage">保存失败</span>
+        </div>
+        <p v-if="showRepo" class="workspace-repo" :class="{ 'workspace-repo-chat': chatOnly }" :title="repoLabel">{{ repoLabel }}</p>
+      </div>
+    </div>
+    <div class="workspace-status">
+      <span class="status-pill" :class="status || 'idle'">
+        <span class="status-pill-dot"></span>
+        {{ statusText() }}
+      </span>
+      <span v-if="showBranch" class="branch-label" :title="branchLabel.includes('→') ? '当前工作分支 → 基线分支' : '尚未记录实际工作分支'">
+        {{ branchLabel }}
+      </span>
+      <a v-if="prUrl" :href="prUrl" target="_blank" rel="noreferrer">查看 PR</a>
+    </div>
+  </header>
+</template>
diff --git a/ui/src/components/WorkspaceWelcome.vue b/ui/src/components/WorkspaceWelcome.vue
new file mode 100644
index 0000000..0683d4d
--- /dev/null
+++ b/ui/src/components/WorkspaceWelcome.vue
@@ -0,0 +1,41 @@
+<script setup>
+/**
+ * 主区空态（三条文案分支，靠是否有会话 / 是否普通聊天 / 是否有项目区分）。
+ *
+ * 这个组件存在的理由不只是"行数"：它是**新用户看到的第一屏**，而且只在
+ * `!agent.currentThread` 时才会出现那两个 CTA —— 只要账号下有任何一条会话，
+ * 这一屏就再也回不去，手工点不出来，所以它必须能被单独渲染出来验
+ * （见 `docs/design/DESIGN.md` §14：这里曾经有五个类名完全没有 CSS）。
+ *
+ * DOM 结构与类名必须保持不变：`AgentWorkspace.test.js` 断言
+ * `.welcome-actions button` 恰好两个、`.empty-state` 的文案。
+ */
+import UiButton from './ui/UiButton.vue'
+
+defineProps({
+  /** 普通聊天：不连接仓库 */
+  chatOnly: { type: Boolean, default: false },
+  /** 当前项目名；为空表示没有绑定项目 */
+  projectName: { type: String, default: '' },
+  /** 是否已经有会话（有则显示能力标签而不是两个 CTA） */
+  hasThread: { type: Boolean, default: false },
+  /** 当前选中的模型，作为能力标签之一 */
+  model: { type: String, default: '' },
+})
+
+defineEmits(['new-chat', 'new-project'])
+</script>
+
+<template>
+  <div class="empty-state">
+    <div class="welcome-mark"><img class="empty-mark" src="/coding-mark.svg" alt="" /><span></span></div>
+    <p class="eyebrow">CODING · 开发工作台</p>
+    <h2>{{ chatOnly ? '从一个好问题开始' : projectName ? `准备好继续构建${projectName}` : '让想法，开始成为产品' }}</h2>
+    <p class="empty-copy">{{ chatOnly ? '这是一个不连接仓库的独立聊天，可用于讨论方案、梳理思路与技术问答。' : projectName ? '描述你希望完成的工作，CODING 将围绕项目仓库分析、规划并推进任务。' : '开启一段自由对话，或创建一个绑定仓库的项目工作空间。' }}</p>
+    <div v-if="!hasThread" class="welcome-actions">
+      <UiButton variant="primary" @click="$emit('new-chat')">开始新聊天</UiButton>
+      <UiButton variant="secondary" @click="$emit('new-project')">创建项目</UiButton>
+    </div>
+    <div v-else class="welcome-capabilities"><span>独立会话</span><span>{{ chatOnly ? '纯对话模式' : '仓库上下文' }}</span><span>{{ model }}</span></div>
+  </div>
+</template>
diff --git a/ui/src/components/ui/UiBadge.vue b/ui/src/components/ui/UiBadge.vue
new file mode 100644
index 0000000..6b29d91
--- /dev/null
+++ b/ui/src/components/ui/UiBadge.vue
@@ -0,0 +1,67 @@
+<!-- 状态徽标：浅底 + 深字五种色调、两种尺寸，纯展示不承担按钮语义。 -->
+<script setup>
+defineProps({
+  /** 'neutral' | 'accent' | 'success' | 'warning' | 'danger' */
+  tone: { type: String, default: 'neutral' },
+  /** 'sm' | 'md' */
+  size: { type: String, default: 'sm' },
+})
+</script>
+
+<template>
+  <span class="ui-badge" :class="[`ui-badge--${tone}`, `ui-badge--${size}`]">
+    <slot />
+  </span>
+</template>
+
+<style scoped>
+.ui-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding-block: var(--space-4);
+  padding-inline: var(--space-8);
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  line-height: var(--leading-tight);
+  white-space: nowrap;
+}
+
+/* ---------- 尺寸 ---------- */
+.ui-badge--sm {
+  padding-inline: var(--space-8);
+  font-size: var(--text-xs);
+}
+
+.ui-badge--md {
+  padding-inline: var(--space-12);
+  font-size: var(--text-sm);
+}
+
+/* ---------- 色调：一律「浅底 + 深字」，不用实心 accent + 反白 ---------- */
+.ui-badge--neutral {
+  color: var(--c-text-secondary);
+  background-color: var(--c-bg-subtle);
+}
+
+.ui-badge--accent {
+  color: var(--c-accent);
+  background-color: var(--c-accent-subtle);
+}
+
+.ui-badge--success {
+  color: var(--c-success);
+  background-color: var(--c-success-subtle);
+}
+
+.ui-badge--warning {
+  color: var(--c-warning);
+  background-color: var(--c-warning-subtle);
+}
+
+.ui-badge--danger {
+  color: var(--c-danger);
+  background-color: var(--c-danger-subtle);
+}
+</style>
diff --git a/ui/src/components/ui/UiButton.vue b/ui/src/components/ui/UiButton.vue
new file mode 100644
index 0000000..092f59f
--- /dev/null
+++ b/ui/src/components/ui/UiButton.vue
@@ -0,0 +1,228 @@
+<!-- 通用按钮：四种语义变体 × 三种尺寸，支持加载态、块级布局与禁用。 -->
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  /** 'primary' | 'secondary' | 'ghost' | 'danger' */
+  variant: { type: String, default: 'primary' },
+  /** 'sm' | 'md' | 'lg' */
+  size: { type: String, default: 'md' },
+  disabled: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  block: { type: Boolean, default: false },
+  /** 方形图标按钮：宽高相等、去掉横向内边距，保证点击区不小于 28px */
+  icon: { type: Boolean, default: false },
+  /** 'center' | 'start' —— 块级按钮里内容靠左时用 start（配合 margin-left:auto 的尾随元素） */
+  align: { type: String, default: 'center' },
+  type: { type: String, default: 'button' },
+})
+
+// 加载中即视为禁用，避免重复提交
+const isDisabled = computed(() => props.disabled || props.loading)
+</script>
+
+<template>
+  <button
+    class="ui-btn"
+    :class="[`ui-btn--${variant}`, `ui-btn--${size}`, { 'is-block': block, 'is-icon': icon, 'is-align-start': align === 'start' }]"
+    :type="type"
+    :disabled="isDisabled"
+    :aria-busy="loading ? 'true' : undefined"
+  >
+    <span v-if="loading" class="ui-btn__spinner" aria-hidden="true"></span>
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.ui-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-8);
+  box-sizing: border-box;
+  height: var(--control-h-md);
+  padding-inline: var(--space-16);
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--radius-sm);
+  font-family: inherit;
+  font-size: var(--text-base);
+  font-weight: 500;
+  line-height: var(--leading-tight);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color var(--dur-fast) var(--ease),
+    border-color var(--dur-fast) var(--ease),
+    color var(--dur-fast) var(--ease);
+}
+
+/* 焦点必须始终可见：不使用 outline: none */
+.ui-btn:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 2px;
+}
+
+.ui-btn:disabled {
+  cursor: not-allowed;
+}
+
+/* ---------- 尺寸 ---------- */
+.ui-btn--sm {
+  height: var(--control-h-sm);
+  padding-inline: var(--space-12);
+  font-size: var(--text-sm);
+}
+
+.ui-btn--md {
+  height: var(--control-h-md);
+  padding-inline: var(--space-16);
+  font-size: var(--text-base);
+}
+
+.ui-btn--lg {
+  height: var(--control-h-lg);
+  padding-inline: var(--space-24);
+  font-size: var(--text-md);
+}
+
+.is-block {
+  display: flex;
+  width: 100%;
+}
+
+/* 方形图标按钮：宽高相等。宽度必须按档位覆盖，否则会被基础档的 height 常量带偏。
+   最小档 28px —— 低于它点击区就不够用了。 */
+.is-icon {
+  flex: none;
+  width: var(--control-h-md);
+  padding-inline: 0;
+}
+
+.ui-btn--sm.is-icon {
+  width: var(--control-h-sm);
+}
+
+.ui-btn--lg.is-icon {
+  width: var(--control-h-lg);
+}
+
+.is-align-start {
+  justify-content: flex-start;
+}
+
+/* ---------- primary ---------- */
+.ui-btn--primary {
+  color: var(--c-text-inverse);
+  background-color: var(--c-accent);
+  border-color: var(--c-accent);
+}
+
+.ui-btn--primary:not(:disabled):hover {
+  background-color: var(--c-accent-hover);
+  border-color: var(--c-accent-hover);
+}
+
+.ui-btn--primary:not(:disabled):active {
+  background-color: var(--c-accent-active);
+  border-color: var(--c-accent-active);
+}
+
+.ui-btn--primary:disabled {
+  color: var(--c-text-muted);
+  background-color: var(--c-accent-subtle);
+  border-color: transparent;
+}
+
+/* ---------- secondary ---------- */
+.ui-btn--secondary {
+  color: var(--c-text);
+  background-color: var(--c-surface);
+  border-color: var(--c-border);
+}
+
+.ui-btn--secondary:not(:disabled):hover {
+  background-color: var(--c-surface-hover);
+  border-color: var(--c-border-strong);
+}
+
+.ui-btn--secondary:not(:disabled):active {
+  background-color: var(--c-bg-subtle);
+  border-color: var(--c-border-strong);
+}
+
+.ui-btn--secondary:disabled {
+  color: var(--c-text-muted);
+  background-color: var(--c-bg-subtle);
+  border-color: var(--c-border);
+}
+
+/* ---------- ghost ---------- */
+.ui-btn--ghost {
+  color: var(--c-text-secondary);
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.ui-btn--ghost:not(:disabled):hover {
+  color: var(--c-text);
+  background-color: var(--c-surface-hover);
+}
+
+.ui-btn--ghost:not(:disabled):active {
+  color: var(--c-text);
+  background-color: var(--c-bg-subtle);
+}
+
+.ui-btn--ghost:disabled {
+  color: var(--c-text-muted);
+  background-color: transparent;
+}
+
+/* ---------- danger ---------- */
+/* 令牌集没有 --c-danger-hover / --c-danger-active，故用「浅底 → 实心 → 浅底」
+   构成 hover / active 的可见差异，而不是自己发明颜色。 */
+.ui-btn--danger {
+  color: var(--c-danger);
+  background-color: var(--c-danger-subtle);
+  border-color: var(--c-danger);
+}
+
+.ui-btn--danger:not(:disabled):hover {
+  color: var(--c-text-inverse);
+  background-color: var(--c-danger);
+  border-color: var(--c-danger);
+}
+
+.ui-btn--danger:not(:disabled):active {
+  color: var(--c-danger);
+  background-color: var(--c-danger-subtle);
+  border-color: var(--c-danger);
+}
+
+.ui-btn--danger:disabled {
+  color: var(--c-text-muted);
+  background-color: var(--c-bg-subtle);
+  border-color: var(--c-border);
+}
+
+/* ---------- 加载指示器（纯 CSS，跟随 currentColor） ---------- */
+.ui-btn__spinner {
+  flex: none;
+  width: 1em;
+  height: 1em;
+  border: 0.125em solid currentColor;
+  border-top-color: transparent;
+  border-radius: var(--radius-full);
+  animation: ui-btn-spin calc(var(--dur-base) * 3) linear infinite;
+}
+
+@keyframes ui-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/ui/src/components/ui/UiCard.vue b/ui/src/components/ui/UiCard.vue
new file mode 100644
index 0000000..f8f570a
--- /dev/null
+++ b/ui/src/components/ui/UiCard.vue
@@ -0,0 +1,78 @@
+<!-- 卡片容器：统一的表面/边框/圆角/阴影，可选页头页脚分隔线与三档内边距。 -->
+<script setup>
+defineProps({
+  /** 'none' | 'sm' | 'md' */
+  padding: { type: String, default: 'md' },
+})
+</script>
+
+<template>
+  <section class="ui-card" :class="`ui-card--pad-${padding}`">
+    <header v-if="$slots.header" class="ui-card__header">
+      <slot name="header" />
+    </header>
+
+    <div class="ui-card__body">
+      <slot />
+    </div>
+
+    <footer v-if="$slots.footer" class="ui-card__footer">
+      <slot name="footer" />
+    </footer>
+  </section>
+</template>
+
+<style scoped>
+.ui-card {
+  color: var(--c-text);
+  background-color: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-xs);
+  line-height: var(--leading-normal);
+}
+
+.ui-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-12);
+  font-size: var(--text-md);
+  font-weight: 600;
+  line-height: var(--leading-snug);
+  border-bottom: 1px solid var(--c-border);
+}
+
+.ui-card__body {
+  font-size: var(--text-base);
+}
+
+.ui-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-12);
+  font-size: var(--text-base);
+  color: var(--c-text-secondary);
+  border-top: 1px solid var(--c-border);
+}
+
+/* ---------- 内边距三档：none → 0，sm → --space-12，md → --space-16 ---------- */
+.ui-card--pad-none > .ui-card__header,
+.ui-card--pad-none > .ui-card__body,
+.ui-card--pad-none > .ui-card__footer {
+  padding: 0;
+}
+
+.ui-card--pad-sm > .ui-card__header,
+.ui-card--pad-sm > .ui-card__body,
+.ui-card--pad-sm > .ui-card__footer {
+  padding: var(--space-12);
+}
+
+.ui-card--pad-md > .ui-card__header,
+.ui-card--pad-md > .ui-card__body,
+.ui-card--pad-md > .ui-card__footer {
+  padding: var(--space-16);
+}
+</style>
diff --git a/ui/src/components/ui/UiEmptyState.vue b/ui/src/components/ui/UiEmptyState.vue
new file mode 100644
index 0000000..c3b9c4d
--- /dev/null
+++ b/ui/src/components/ui/UiEmptyState.vue
@@ -0,0 +1,89 @@
+<!-- 空状态占位：让「没有数据时的界面」有一致的、体面的默认形态。 -->
+<script setup>
+defineProps({
+  title: { type: String, required: true },
+  description: { type: String, default: '' },
+})
+</script>
+
+<template>
+  <div class="ui-empty">
+    <div class="ui-empty__icon">
+      <slot name="icon">
+        <span class="ui-empty__placeholder" aria-hidden="true">
+          <span class="ui-empty__placeholder-dot"></span>
+        </span>
+      </slot>
+    </div>
+
+    <p class="ui-empty__title">{{ title }}</p>
+    <p v-if="description" class="ui-empty__description">{{ description }}</p>
+
+    <div v-if="$slots.actions" class="ui-empty__actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ui-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-12);
+  padding-block: var(--space-32);
+  padding-inline: var(--space-16);
+  text-align: center;
+}
+
+.ui-empty__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--c-text-muted);
+}
+
+/* 默认圆形占位（未提供 icon 插槽时） */
+.ui-empty__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-48);
+  height: var(--space-48);
+  border-radius: var(--radius-full);
+  background-color: var(--c-bg-subtle);
+  color: var(--c-text-muted);
+}
+
+.ui-empty__placeholder-dot {
+  width: var(--space-8);
+  height: var(--space-8);
+  border-radius: var(--radius-full);
+  background-color: currentColor;
+}
+
+.ui-empty__title {
+  margin: 0;
+  font-size: var(--text-md);
+  font-weight: 600;
+  line-height: var(--leading-snug);
+  color: var(--c-text);
+}
+
+.ui-empty__description {
+  margin: 0;
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: var(--c-text-secondary);
+}
+
+.ui-empty__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-8);
+  margin-block-start: var(--space-8);
+}
+</style>
diff --git a/ui/src/components/ui/UiInput.vue b/ui/src/components/ui/UiInput.vue
new file mode 100644
index 0000000..328e6b9
--- /dev/null
+++ b/ui/src/components/ui/UiInput.vue
@@ -0,0 +1,167 @@
+<!-- 文本输入框：统一的高度/圆角/边框，支持尺寸、禁用、错误态与前缀/后缀插槽。 -->
+<script setup>
+defineOptions({ inheritAttrs: false })
+
+defineProps({
+  modelValue: { type: [String, Number], default: '' },
+  placeholder: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  invalid: { type: Boolean, default: false },
+  /** 'sm' | 'md' */
+  size: { type: String, default: 'md' },
+  type: { type: String, default: 'text' },
+  /** 透传 id，供外部 <label for> 关联 */
+  id: { type: String, default: undefined },
+})
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
+
+function handleInput(event) {
+  emit('update:modelValue', event.target.value)
+}
+</script>
+
+<template>
+  <div class="ui-input" :class="[`ui-input--${size}`, { 'is-disabled': disabled }]">
+    <span v-if="$slots.prefix" class="ui-input__affix ui-input__affix--start">
+      <slot name="prefix" />
+    </span>
+
+    <input
+      v-bind="$attrs"
+      class="ui-input__field"
+      :class="{
+        'is-invalid': invalid,
+        'has-affix-start': Boolean($slots.prefix),
+        'has-affix-end': Boolean($slots.suffix),
+      }"
+      :id="id"
+      :type="type"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :aria-invalid="invalid ? 'true' : undefined"
+      @input="handleInput"
+      @focus="emit('focus', $event)"
+      @blur="emit('blur', $event)"
+    />
+
+    <span v-if="$slots.suffix" class="ui-input__affix ui-input__affix--end">
+      <slot name="suffix" />
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.ui-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+/* 边框与焦点环都放在 input 自身，避免出现「外层壳 + 内层焦点环」的双重描边 */
+.ui-input__field {
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--control-h-md);
+  padding-inline: var(--space-12);
+  color: var(--c-text);
+  background-color: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-sm);
+  font-family: inherit;
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  transition:
+    background-color var(--dur-fast) var(--ease),
+    border-color var(--dur-fast) var(--ease);
+}
+
+.ui-input__field::placeholder {
+  color: var(--c-text-muted);
+}
+
+.ui-input__field:not(:disabled):hover {
+  border-color: var(--c-border-strong);
+}
+
+.ui-input__field:focus {
+  border-color: var(--c-accent);
+}
+
+/* 焦点必须始终可见：不使用 outline: none */
+.ui-input__field:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 2px;
+}
+
+.ui-input__field.is-invalid {
+  border-color: var(--c-danger);
+}
+
+.ui-input__field.is-invalid:focus {
+  border-color: var(--c-danger);
+}
+
+.ui-input__field.is-invalid:focus-visible {
+  outline-color: var(--c-danger);
+}
+
+.ui-input__field:disabled {
+  color: var(--c-text-muted);
+  background-color: var(--c-bg-subtle);
+  border-color: var(--c-border);
+  cursor: not-allowed;
+}
+
+/* ---------- 尺寸（与 UiSelect 完全同源） ---------- */
+.ui-input--sm .ui-input__field {
+  height: var(--control-h-sm);
+  font-size: var(--text-sm);
+}
+
+.ui-input--md .ui-input__field {
+  height: var(--control-h-md);
+  font-size: var(--text-base);
+}
+
+/* ---------- 前后缀插槽 ---------- */
+.ui-input__affix {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+  color: var(--c-text-muted);
+  pointer-events: none;
+}
+
+/* 容器不拦截点击（点击图标也能聚焦输入框），交互式子元素再恢复点击 */
+.ui-input__affix > * {
+  pointer-events: auto;
+}
+
+.ui-input__affix--start {
+  inset-inline-start: var(--space-12);
+}
+
+.ui-input__affix--end {
+  inset-inline-end: var(--space-12);
+}
+
+.ui-input__field.has-affix-start {
+  padding-inline-start: calc(var(--space-12) + 1em + var(--space-8));
+}
+
+.ui-input__field.has-affix-end {
+  padding-inline-end: calc(var(--space-12) + 1em + var(--space-8));
+}
+
+.ui-input.is-disabled .ui-input__affix {
+  opacity: 0.6;
+}
+</style>
diff --git a/ui/src/components/ui/UiSelect.vue b/ui/src/components/ui/UiSelect.vue
new file mode 100644
index 0000000..6ba058c
--- /dev/null
+++ b/ui/src/components/ui/UiSelect.vue
@@ -0,0 +1,231 @@
+<!-- 原生 select 封装：与 UiInput 同源的高度/圆角/边框，自绘箭头，兼容字符串数组选项。 -->
+<script setup>
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  modelValue: { type: [String, Number], default: '' },
+  /** [{ value, label }] 或 ['a', 'b'] 均可 */
+  options: { type: Array, default: () => [] },
+  disabled: { type: Boolean, default: false },
+  /** 'sm' | 'md' */
+  size: { type: String, default: 'md' },
+  /** 透传 id，供外部 <label for> 关联 */
+  id: { type: String, default: undefined },
+  placeholder: { type: String, default: '' },
+  /** 无框形态：边框、背景与内边距交给外层容器，自绘箭头也关闭（改用 suffix 插槽自行提供） */
+  bare: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+// 对字符串数组 / 缺字段的对象做容错归一化
+const normalizedOptions = computed(() =>
+  (props.options || []).map((option) => {
+    if (option !== null && typeof option === 'object') {
+      const value = 'value' in option ? option.value : option.label
+      const label = 'label' in option ? option.label : value
+      return { value, label: label === null || label === undefined ? '' : String(label) }
+    }
+    return { value: option, label: option === null || option === undefined ? '' : String(option) }
+  }),
+)
+
+const isPlaceholder = computed(
+  () => props.placeholder !== '' && (props.modelValue === '' || props.modelValue === null || props.modelValue === undefined),
+)
+
+// 原生 select 只回传字符串：数值型 value 由调用方自行转换
+function handleChange(event) {
+  emit('update:modelValue', event.target.value)
+}
+</script>
+
+<template>
+  <div
+    class="ui-select"
+    :class="[`ui-select--${size}`, { 'is-disabled': disabled, 'is-placeholder': isPlaceholder, 'is-bare': bare }]"
+  >
+    <span v-if="$slots.prefix" class="ui-select__affix ui-select__affix--start">
+      <slot name="prefix" />
+    </span>
+
+    <select
+      v-bind="$attrs"
+      class="ui-select__field"
+      :class="{ 'has-affix-start': Boolean($slots.prefix), 'has-affix-end': Boolean($slots.suffix) }"
+      :id="id"
+      :value="modelValue"
+      :disabled="disabled"
+      @change="handleChange"
+    >
+      <!-- 占位项用空 value + disabled：可展示提示，但不会被当成一个真实可选值提交 -->
+      <option v-if="placeholder" value="" disabled>{{ placeholder }}</option>
+      <option v-for="option in normalizedOptions" :key="String(option.value)" :value="option.value">
+        {{ option.label }}
+      </option>
+    </select>
+
+    <span v-if="$slots.suffix" class="ui-select__affix ui-select__affix--end">
+      <slot name="suffix" />
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.ui-select {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+/* 与 UiInput 完全一致：同源高度 / 圆角 / 边框，保证同一行控件视觉重量相同 */
+.ui-select__field {
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--control-h-md);
+  padding-inline: var(--space-12) calc(var(--space-12) + 1em);
+  color: var(--c-text);
+  background-color: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-sm);
+  font-family: inherit;
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+  transition:
+    background-color var(--dur-fast) var(--ease),
+    border-color var(--dur-fast) var(--ease);
+}
+
+/* 展开列表里的文字保持正常颜色，不被占位态灰字影响 */
+.ui-select__field option {
+  color: var(--c-text);
+  background-color: var(--c-surface);
+}
+
+.ui-select__field:not(:disabled):hover {
+  border-color: var(--c-border-strong);
+}
+
+.ui-select__field:focus {
+  border-color: var(--c-accent);
+}
+
+/* 焦点必须始终可见：不使用 outline: none */
+.ui-select__field:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 2px;
+}
+
+.ui-select__field:disabled {
+  color: var(--c-text-muted);
+  background-color: var(--c-bg-subtle);
+  border-color: var(--c-border);
+  cursor: not-allowed;
+}
+
+.ui-select.is-placeholder .ui-select__field {
+  color: var(--c-text-muted);
+}
+
+.ui-select.is-disabled .ui-select__field {
+  color: var(--c-text-muted);
+}
+
+/* ---------- 尺寸（与 UiInput 完全同源） ---------- */
+.ui-select--sm .ui-select__field {
+  height: var(--control-h-sm);
+  font-size: var(--text-sm);
+}
+
+.ui-select--md .ui-select__field {
+  height: var(--control-h-md);
+  font-size: var(--text-base);
+}
+
+/* ---------- 自绘下拉箭头（颜色跟随 --c-text-muted） ---------- */
+.ui-select::after {
+  content: '';
+  position: absolute;
+  inset-inline-end: var(--space-12);
+  top: 50%;
+  width: 0.4em;
+  height: 0.4em;
+  border-right: 1px solid var(--c-text-muted);
+  border-bottom: 1px solid var(--c-text-muted);
+  transform: translateY(-70%) rotate(45deg);
+  pointer-events: none;
+}
+
+.ui-select.is-disabled::after {
+  opacity: 0.6;
+}
+
+/* ---------- 无框形态 ----------
+   去掉边框、背景与内边距，并把自绘箭头关掉（用 suffix 插槽自己放一个）。
+   焦点环由外层容器用 :focus-within 提供 —— 见 ChatComposer 的 .model-picker。 */
+.ui-select.is-bare .ui-select__field {
+  height: auto;
+  padding: 0;
+  color: var(--c-text-secondary);
+  background-color: transparent;
+  border: 0;
+}
+
+.ui-select.is-bare .ui-select__field:hover {
+  border-color: transparent;
+}
+
+.ui-select.is-bare::after {
+  content: none;
+}
+
+/* ---------- 前后缀插槽（与 UiInput 同源的做法） ---------- */
+.ui-select__affix {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--c-text-muted);
+  pointer-events: none;
+}
+
+.ui-select__affix--start {
+  inset-inline-start: var(--space-12);
+}
+
+.ui-select__affix--end {
+  inset-inline-end: var(--space-12);
+}
+
+.ui-select.is-bare .ui-select__affix--start {
+  inset-inline-start: 0;
+}
+
+.ui-select.is-bare .ui-select__affix--end {
+  inset-inline-end: 0;
+}
+
+.ui-select__field.has-affix-start {
+  padding-inline-start: calc(var(--space-12) + 1em + var(--space-8));
+}
+
+.ui-select__field.has-affix-end {
+  padding-inline-end: calc(var(--space-12) + 1em + var(--space-8));
+}
+
+.ui-select.is-bare .ui-select__field.has-affix-start {
+  padding-inline-start: calc(1em + var(--space-4));
+}
+
+.ui-select.is-bare .ui-select__field.has-affix-end {
+  padding-inline-end: calc(1em + var(--space-4));
+}
+</style>
diff --git a/ui/src/components/ui/UiTextarea.vue b/ui/src/components/ui/UiTextarea.vue
new file mode 100644
index 0000000..69ae1d8
--- /dev/null
+++ b/ui/src/components/ui/UiTextarea.vue
@@ -0,0 +1,168 @@
+<!-- 多行文本域：与 UiInput / UiSelect 同源的高度、圆角、边框与焦点环。
+
+     两种形态：
+     - 默认（有框）：自己带边框与焦点环，用于表单。
+     - bare（无框）：去掉边框与背景，把「框」交给外层容器，由容器用 :focus-within 表达焦点。
+       用于 composer 这种「整张卡片就是输入区」的场景。bare 形态下仍然不使用 outline: none，
+       焦点环由容器提供 —— 见 ChatComposer 的 .composer:focus-within。 -->
+<script setup>
+import { nextTick, onMounted, ref, watch } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  modelValue: { type: [String, Number], default: '' },
+  placeholder: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  invalid: { type: Boolean, default: false },
+  /** 'sm' | 'md' */
+  size: { type: String, default: 'md' },
+  rows: { type: Number, default: 3 },
+  /** 无框形态：边框与背景交给外层容器，焦点也由容器表达 */
+  bare: { type: Boolean, default: false },
+  /** 随内容自动增高。为 true 时 minHeight / maxHeight 生效 */
+  autoResize: { type: Boolean, default: false },
+  /** 自动增高的下限（px）。null 表示用 CSS 默认值 */
+  minHeight: { type: Number, default: null },
+  /** 自动增高的上限（px）。null 表示不设上限 */
+  maxHeight: { type: Number, default: null },
+  /** 透传 id，供外部 <label for> 关联 */
+  id: { type: String, default: undefined },
+})
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
+
+const fieldRef = ref(null)
+
+/** 先清成 auto 再读 scrollHeight，否则高度只能单向增长 */
+function syncHeight() {
+  const element = fieldRef.value
+  if (!element || !props.autoResize) return
+  element.style.height = 'auto'
+  const min = props.minHeight ?? element.scrollHeight
+  const max = props.maxHeight ?? element.scrollHeight
+  element.style.height = `${Math.min(Math.max(element.scrollHeight, min), max)}px`
+}
+
+// 外部改 draft（例如发送后清空）也要跟着回缩
+watch(() => props.modelValue, () => nextTick(syncHeight))
+onMounted(syncHeight)
+
+function handleInput(event) {
+  emit('update:modelValue', event.target.value)
+  syncHeight()
+}
+
+defineExpose({ syncHeight })
+</script>
+
+<template>
+  <div class="ui-textarea" :class="[`ui-textarea--${size}`, { 'is-bare': bare, 'is-disabled': disabled }]">
+    <textarea
+      ref="fieldRef"
+      v-bind="$attrs"
+      class="ui-textarea__field"
+      :class="{ 'is-invalid': invalid }"
+      :id="id"
+      :value="modelValue"
+      :rows="bare ? 1 : rows"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :aria-invalid="invalid ? 'true' : undefined"
+      :style="autoResize && maxHeight !== null ? { maxHeight: `${maxHeight}px` } : undefined"
+      @input="handleInput"
+      @focus="emit('focus', $event)"
+      @blur="emit('blur', $event)"
+    />
+  </div>
+</template>
+
+<style scoped>
+.ui-textarea {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+
+/* 边框与焦点环都放在 textarea 自身，避免「外层壳 + 内层焦点环」的双重描边 */
+.ui-textarea__field {
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--space-8) var(--space-12);
+  color: var(--c-text);
+  background-color: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-sm);
+  font-family: inherit;
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  resize: vertical;
+  transition:
+    background-color var(--dur-fast) var(--ease),
+    border-color var(--dur-fast) var(--ease);
+}
+
+.ui-textarea__field::placeholder {
+  color: var(--c-text-muted);
+}
+
+.ui-textarea__field:not(:disabled):hover {
+  border-color: var(--c-border-strong);
+}
+
+.ui-textarea__field:focus {
+  border-color: var(--c-accent);
+}
+
+/* 焦点必须始终可见：不使用 outline: none */
+.ui-textarea__field:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 2px;
+}
+
+.ui-textarea__field.is-invalid {
+  border-color: var(--c-danger);
+}
+
+.ui-textarea__field.is-invalid:focus-visible {
+  outline-color: var(--c-danger);
+}
+
+.ui-textarea__field:disabled {
+  color: var(--c-text-muted);
+  background-color: var(--c-bg-subtle);
+  border-color: var(--c-border);
+  cursor: not-allowed;
+}
+
+/* ---------- 尺寸（与 UiInput / UiSelect 完全同源） ---------- */
+.ui-textarea--sm .ui-textarea__field {
+  font-size: var(--text-sm);
+}
+
+.ui-textarea--md .ui-textarea__field {
+  font-size: var(--text-base);
+}
+
+/* ---------- 无框形态 ----------
+   这里去掉的是边框与背景，不是焦点。 */
+.ui-textarea.is-bare .ui-textarea__field {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+  resize: none;
+}
+
+.ui-textarea.is-bare .ui-textarea__field:hover {
+  border-color: transparent;
+}
+
+/* bare 形态下焦点环由外层容器提供（composer 的 .composer:focus-within）。
+   必须压掉 textarea 自己的默认环，否则同一个控件上会出现两圈。
+   这是全项目唯一被允许写 outline: none 的地方 —— 用 disable 注释让它可被 grep 到，
+   规则本身保持硬性，例外只有这一处、且带理由。 */
+.ui-textarea.is-bare .ui-textarea__field:focus-visible {
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  outline: none;
+}
+</style>
diff --git a/ui/src/composables/useProjectDialogs.js b/ui/src/composables/useProjectDialogs.js
new file mode 100644
index 0000000..2eae07b
--- /dev/null
+++ b/ui/src/composables/useProjectDialogs.js
@@ -0,0 +1,82 @@
+import { ref } from 'vue'
+
+import { useAgentStore } from '../stores/agent'
+
+/**
+ * 「新建 / 重命名 / 删除项目」这两个弹窗的全部状态与动作。
+ *
+ * 它是一个真正的功能单元，而不是一组散落的 ref：两个弹窗共用一个
+ * `agent.error` 通道（新建失败显示在弹窗里，重命名失败显示在主区横幅），
+ * 而删除走的是自己独立的 `projectDeleteError` —— 因为删除确认框关掉之后
+ * 主区横幅会被下一次操作清空，用户就看不到失败原因了。这层区别值得有个家。
+ */
+export function useProjectDialogs() {
+  const agent = useAgentStore()
+
+  // 新建 / 重命名共用同一个弹窗，`projectBeingEdited` 为 null 时是"新建"。
+  const showProjectDialog = ref(false)
+  const creatingProject = ref(false)
+  const projectBeingEdited = ref(null)
+
+  const projectPendingDelete = ref(null)
+  const deletingProject = ref(false)
+  const projectDeleteError = ref('')
+
+  function openProjectDialog(project = null) {
+    projectBeingEdited.value = project
+    agent.error = ''
+    showProjectDialog.value = true
+  }
+
+  function closeProjectDialog() {
+    showProjectDialog.value = false
+    projectBeingEdited.value = null
+  }
+
+  async function saveProject({ id, name, provider, repo }) {
+    creatingProject.value = true
+    agent.error = ''
+    try {
+      if (id) await agent.renameProject(id, name)
+      else await agent.createProject(name, provider, repo)
+      closeProjectDialog()
+    } catch (error) {
+      agent.error = error.message || (id ? '重命名项目失败' : '创建项目失败')
+    } finally {
+      creatingProject.value = false
+    }
+  }
+
+  function askDeleteProject(project) {
+    projectPendingDelete.value = project
+    projectDeleteError.value = ''
+  }
+
+  async function confirmDeleteProject() {
+    if (!projectPendingDelete.value) return
+    deletingProject.value = true
+    projectDeleteError.value = ''
+    try {
+      await agent.deleteProject(projectPendingDelete.value.id)
+      projectPendingDelete.value = null
+    } catch (error) {
+      projectDeleteError.value = error.message || '删除项目失败'
+    } finally {
+      deletingProject.value = false
+    }
+  }
+
+  return {
+    showProjectDialog,
+    creatingProject,
+    projectBeingEdited,
+    projectPendingDelete,
+    deletingProject,
+    projectDeleteError,
+    openProjectDialog,
+    closeProjectDialog,
+    saveProject,
+    askDeleteProject,
+    confirmDeleteProject,
+  }
+}
diff --git a/ui/src/composables/useProjectDialogs.test.js b/ui/src/composables/useProjectDialogs.test.js
new file mode 100644
index 0000000..97fba9f
--- /dev/null
+++ b/ui/src/composables/useProjectDialogs.test.js
@@ -0,0 +1,121 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useAgentStore } from '../stores/agent'
+import { useProjectDialogs } from './useProjectDialogs'
+
+/**
+ * 锁的是**两条错误通道的分工**，这是把这段代码抽出来时唯一的真决定：
+ * - 新建 / 重命名失败 → `agent.error`（会显示在主区横幅上）
+ * - 删除失败 → `projectDeleteError`（留在确认框里）
+ *
+ * 为什么删除要单独一条：确认框一关，主区横幅会被下一次操作清空，
+ * 用户就再也看不到失败原因了。
+ */
+describe('useProjectDialogs', () => {
+  let agent
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    agent = useAgentStore()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('默认没有任何弹窗打开', () => {
+    const dialogs = useProjectDialogs()
+    expect(dialogs.showProjectDialog.value).toBe(false)
+    expect(dialogs.projectBeingEdited.value).toBe(null)
+    expect(dialogs.projectPendingDelete.value).toBe(null)
+  })
+
+  it('openProjectDialog 不带参是"新建"，带项目是"重命名"，并清掉上一次的错误', () => {
+    const dialogs = useProjectDialogs()
+    agent.error = '上一次失败了'
+
+    dialogs.openProjectDialog()
+    expect(dialogs.showProjectDialog.value).toBe(true)
+    expect(dialogs.projectBeingEdited.value).toBe(null)
+    expect(agent.error).toBe('')
+
+    dialogs.openProjectDialog({ id: 'p1', name: '旧名' })
+    expect(dialogs.projectBeingEdited.value).toEqual({ id: 'p1', name: '旧名' })
+  })
+
+  it('saveProject 不带 id 走创建，带 id 走重命名，成功后关窗', async () => {
+    const create = vi.spyOn(agent, 'createProject').mockResolvedValue(undefined)
+    const rename = vi.spyOn(agent, 'renameProject').mockResolvedValue(undefined)
+    const dialogs = useProjectDialogs()
+
+    await dialogs.saveProject({ name: '新项目', provider: 'github', repo: 'o/r' })
+    expect(create).toHaveBeenCalledWith('新项目', 'github', 'o/r')
+    expect(rename).not.toHaveBeenCalled()
+    expect(dialogs.showProjectDialog.value).toBe(false)
+
+    dialogs.openProjectDialog({ id: 'p1', name: '旧名' })
+    await dialogs.saveProject({ id: 'p1', name: '改名' })
+    expect(rename).toHaveBeenCalledWith('p1', '改名')
+    expect(dialogs.showProjectDialog.value).toBe(false)
+  })
+
+  it('saveProject 失败时留在弹窗里并把原因写到 agent.error', async () => {
+    vi.spyOn(agent, 'createProject').mockRejectedValue(new Error('仓库不存在'))
+    const dialogs = useProjectDialogs()
+
+    // 注意：`saveProject` 自己不会开窗，它假定窗已经开着（由 openProjectDialog 开）。
+    dialogs.openProjectDialog()
+    await dialogs.saveProject({ name: '新项目', provider: 'github', repo: 'o/r' })
+
+    expect(agent.error).toBe('仓库不存在')
+    expect(dialogs.showProjectDialog.value).toBe(true)
+    expect(dialogs.creatingProject.value).toBe(false)
+  })
+
+  it('重命名失败时的兜底文案与创建不同', async () => {
+    vi.spyOn(agent, 'renameProject').mockRejectedValue(new Error(''))
+    const dialogs = useProjectDialogs()
+
+    await dialogs.saveProject({ id: 'p1', name: '改名' })
+
+    expect(agent.error).toBe('重命名项目失败')
+  })
+
+  it('删除的失败原因留在 projectDeleteError，不污染 agent.error', async () => {
+    vi.spyOn(agent, 'deleteProject').mockRejectedValue(new Error('还有 3 个会话'))
+    const dialogs = useProjectDialogs()
+
+    dialogs.askDeleteProject({ id: 'p1', name: '开发工作台' })
+    expect(dialogs.projectPendingDelete.value.id).toBe('p1')
+
+    await dialogs.confirmDeleteProject()
+
+    expect(dialogs.projectDeleteError.value).toBe('还有 3 个会话')
+    expect(agent.error).toBe('')
+    // 弹窗还必须开着，否则用户看不到失败原因。
+    expect(dialogs.projectPendingDelete.value.id).toBe('p1')
+    expect(dialogs.deletingProject.value).toBe(false)
+  })
+
+  it('删除成功后关掉确认框并清空错误', async () => {
+    const remove = vi.spyOn(agent, 'deleteProject').mockResolvedValue(undefined)
+    const dialogs = useProjectDialogs()
+
+    dialogs.askDeleteProject({ id: 'p1', name: '开发工作台' })
+    await dialogs.confirmDeleteProject()
+
+    expect(remove).toHaveBeenCalledWith('p1')
+    expect(dialogs.projectPendingDelete.value).toBe(null)
+    expect(dialogs.projectDeleteError.value).toBe('')
+  })
+
+  it('没有待删项目时 confirmDeleteProject 什么都不做', async () => {
+    const remove = vi.spyOn(agent, 'deleteProject').mockResolvedValue(undefined)
+    const dialogs = useProjectDialogs()
+
+    await dialogs.confirmDeleteProject()
+
+    expect(remove).not.toHaveBeenCalled()
+  })
+})
diff --git a/ui/src/composables/useRelativeTime.js b/ui/src/composables/useRelativeTime.js
new file mode 100644
index 0000000..71d498a
--- /dev/null
+++ b/ui/src/composables/useRelativeTime.js
@@ -0,0 +1,107 @@
+import { getCurrentInstance, onUnmounted, ref } from 'vue'
+
+/**
+ * 应用级共享的"现在"。
+ *
+ * 消息头上的相对时间（"3 分钟前"）如果不重算，就会永远停在渲染那一刻 ——
+ * 一个开着不管的标签页里，十分钟前的消息会一直显示"刚刚"。
+ * 所以需要一个定时器把它推进。但**每个消息各起一个定时器是灾难**
+ * （一屏 200 条消息就是 200 个 interval），所以做成模块级共享：
+ * 全部消费者用同一个 ref、同一个 interval，最后一个消费者卸载时停表。
+ *
+ * 30 秒一次而不是 1 秒一次：这个标签最细只显示到"分钟"，
+ * 30 秒是"分钟数最多晚 30 秒跳变"与"几乎不耗电"之间的取舍。
+ */
+const TICK_MS = 30_000
+
+const now = ref(Date.now())
+let consumers = 0
+let timer = null
+
+function start() {
+  if (timer !== null) return
+  timer = window.setInterval(() => {
+    now.value = Date.now()
+  }, TICK_MS)
+}
+
+function stop() {
+  if (timer === null) return
+  window.clearInterval(timer)
+  timer = null
+}
+
+export function useNow() {
+  consumers += 1
+  now.value = Date.now()
+  start()
+
+  // 允许在组件外调用（测试里直接调纯函数时不该炸）。
+  if (getCurrentInstance()) {
+    onUnmounted(() => {
+      consumers = Math.max(0, consumers - 1)
+      if (consumers === 0) stop()
+    })
+  }
+
+  return now
+}
+
+const MINUTE = 60_000
+const HOUR = 60 * MINUTE
+
+const timeFormatter = new Intl.DateTimeFormat('zh-CN', {
+  hour: '2-digit',
+  minute: '2-digit',
+  hourCycle: 'h23',
+})
+
+const fullFormatter = new Intl.DateTimeFormat('zh-CN', {
+  dateStyle: 'medium',
+  timeStyle: 'short',
+})
+
+function startOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()
+}
+
+/**
+ * 近期用相对时间、超过一小时退回绝对时间。
+ *
+ * 为什么不一路相对下去：`1 天前` 这样的粒度在看历史会话时是有害的 ——
+ * 用户想知道的是"这次对话发生在什么时候"，而"3 天前"不如"3 月 14 日 10:20"
+ * 有用。相对时间真正好用的窗口只有"刚刚"那一段。
+ *
+ * 为什么不用"昨天/今天"开头而直接给 HH:MM：今天的时间戳不需要说"今天"，
+ * 页面上的消息按时间正序排，读者本来就在"今天"的语境里。
+ */
+export function formatRelativeTime(value, reference = Date.now()) {
+  // `new Date(null)` 不是 Invalid Date，是 1970-01-01 —— 不显式挡掉，
+  // 缺时间戳的消息会显示成"1970 年 1 月 1 日"。
+  if (value === null || value === undefined || value === '') return ''
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+
+  const diff = reference - date.getTime()
+  // 服务端时钟略快于本机时 diff 会是负数。不显示"负 3 分钟前"，压成"刚刚"。
+  if (diff < MINUTE) return '刚刚'
+  if (diff < HOUR) return `${Math.floor(diff / MINUTE)} 分钟前`
+
+  const clock = timeFormatter.format(date)
+  const dayDelta = Math.round((startOfDay(new Date(reference)) - startOfDay(date)) / 86_400_000)
+
+  if (dayDelta <= 0) return clock
+  if (dayDelta === 1) return `昨天 ${clock}`
+  if (date.getFullYear() === new Date(reference).getFullYear()) {
+    return `${date.getMonth() + 1} 月 ${date.getDate()} 日 ${clock}`
+  }
+  return `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
+}
+
+/** 悬停时给出的精确时刻 —— 相对时间的代价是丢掉了准确值，用 `title` 补回来。 */
+export function formatFullTime(value) {
+  if (value === null || value === undefined || value === '') return ''
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  return fullFormatter.format(date)
+}
diff --git a/ui/src/composables/useRelativeTime.test.js b/ui/src/composables/useRelativeTime.test.js
new file mode 100644
index 0000000..6f16bf9
--- /dev/null
+++ b/ui/src/composables/useRelativeTime.test.js
@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest'
+
+import { formatFullTime, formatRelativeTime } from './useRelativeTime.js'
+
+/**
+ * 全部用固定参考时刻，不依赖 `Date.now()` —— 否则这些断言会在某一天的某个钟点
+ * 突然失败（"2 小时前"在 00:30 跑会跨天，结果从 HH:MM 变成"昨天 HH:MM"）。
+ */
+const REF = new Date(2026, 2, 14, 10, 20, 0).getTime() // 2026-03-14 10:20 本地时间
+
+describe('formatRelativeTime', () => {
+  it('returns an empty label for a missing or invalid timestamp', () => {
+    expect(formatRelativeTime(undefined, REF)).toBe('')
+    expect(formatRelativeTime(null, REF)).toBe('')
+    expect(formatRelativeTime('', REF)).toBe('')
+    expect(formatRelativeTime('not-a-date', REF)).toBe('')
+  })
+
+  it('collapses anything under a minute to 刚刚', () => {
+    expect(formatRelativeTime(REF, REF)).toBe('刚刚')
+    expect(formatRelativeTime(REF - 30_000, REF)).toBe('刚刚')
+    expect(formatRelativeTime(REF - 59_999, REF)).toBe('刚刚')
+  })
+
+  it('counts minutes within the first hour', () => {
+    expect(formatRelativeTime(REF - 60_000, REF)).toBe('1 分钟前')
+    expect(formatRelativeTime(REF - 5 * 60_000, REF)).toBe('5 分钟前')
+    expect(formatRelativeTime(REF - 59 * 60_000, REF)).toBe('59 分钟前')
+  })
+
+  it('falls back to a clock time once the message is over an hour old', () => {
+    // 相对粒度到"小时前"就开始失去意义，读者想知道的是"几点"。
+    expect(formatRelativeTime(REF - 61 * 60_000, REF)).toBe('09:19')
+    expect(formatRelativeTime(REF - 2 * 3600_000, REF)).toBe('08:20')
+  })
+
+  it('prefixes 昨天 for the previous calendar day', () => {
+    expect(formatRelativeTime(new Date(2026, 2, 13, 22, 5).getTime(), REF)).toBe('昨天 22:05')
+    // 跨天但只差 13 小时 —— 判定按日历天，不按小时数。
+    expect(formatRelativeTime(new Date(2026, 2, 13, 23, 55).getTime(), REF)).toBe('昨天 23:55')
+  })
+
+  it('uses month and day for earlier days in the same year', () => {
+    expect(formatRelativeTime(new Date(2026, 2, 1, 9, 0).getTime(), REF)).toBe('3 月 1 日 09:00')
+    expect(formatRelativeTime(new Date(2026, 0, 2, 18, 30).getTime(), REF)).toBe('1 月 2 日 18:30')
+  })
+
+  it('adds the year for anything older', () => {
+    expect(formatRelativeTime(new Date(2025, 11, 31, 23, 59).getTime(), REF)).toBe('2025 年 12 月 31 日')
+  })
+
+  it('never renders a negative offset when the server clock runs ahead', () => {
+    // 后端比本机快几秒是常态，不能因此显示"-1 分钟前"。
+    expect(formatRelativeTime(REF + 60_000, REF)).toBe('刚刚')
+    expect(formatRelativeTime(REF + 10 * 60_000, REF)).toBe('刚刚')
+  })
+})
+
+describe('formatFullTime', () => {
+  it('gives an absolute stamp for the title attribute', () => {
+    const label = formatFullTime(new Date(2026, 2, 14, 10, 20).getTime())
+    expect(label).toContain('2026')
+    expect(label).toContain('10:20')
+  })
+
+  it('returns an empty label for an invalid timestamp', () => {
+    expect(formatFullTime('nope')).toBe('')
+    expect(formatFullTime(undefined)).toBe('')
+  })
+})
diff --git a/ui/src/composables/useSidebarPreferences.js b/ui/src/composables/useSidebarPreferences.js
new file mode 100644
index 0000000..3c3d53a
--- /dev/null
+++ b/ui/src/composables/useSidebarPreferences.js
@@ -0,0 +1,58 @@
+import { ref, watch } from 'vue'
+
+const SIDEBAR_STORAGE_KEY = 'coding.sidebar.collapsed'
+const PROJECT_COLLAPSE_STORAGE_KEY = 'coding.sidebar.collapsed-projects'
+
+/**
+ * 侧栏的两项本地偏好：整体收起、以及哪些项目被折叠。
+ *
+ * 抽出来的理由不是行数，而是**它有两处容易写错的地方**：
+ * 1. `localStorage` 在隐私模式/禁用 cookie 时会**抛异常**（不是返回 null），
+ *    读写都必须包起来，否则整个组件挂不上；
+ * 2. 存的是一个字符串数组，反序列化可能拿到任意 JSON（手改过、旧版本格式），
+ *    必须 `Array.isArray` 校验后再用。
+ *
+ * 读取放在 setup 里而不是 `onMounted`：这样首帧就是用户上次的状态，不会先闪一下展开态。
+ */
+export function useSidebarPreferences() {
+  const collapsed = ref(false)
+  const collapsedProjectIds = ref([])
+
+  try {
+    collapsed.value = window.localStorage.getItem(SIDEBAR_STORAGE_KEY) === 'true'
+    const saved = JSON.parse(window.localStorage.getItem(PROJECT_COLLAPSE_STORAGE_KEY) || '[]')
+    if (Array.isArray(saved)) collapsedProjectIds.value = saved
+  } catch {
+    // 本地存储不可用时保持默认展开状态。
+  }
+
+  function toggleCollapsed() {
+    collapsed.value = !collapsed.value
+  }
+
+  function toggleProject(projectId) {
+    const next = new Set(collapsedProjectIds.value)
+    // 用新数组而不是原地 push：`watch` 默认不深入监听，原地改动不会触发写回。
+    if (next.has(projectId)) next.delete(projectId)
+    else next.add(projectId)
+    collapsedProjectIds.value = [...next]
+  }
+
+  watch(collapsed, (value) => {
+    try {
+      window.localStorage.setItem(SIDEBAR_STORAGE_KEY, String(value))
+    } catch {
+      // 写不进去不影响交互。
+    }
+  })
+
+  watch(collapsedProjectIds, (value) => {
+    try {
+      window.localStorage.setItem(PROJECT_COLLAPSE_STORAGE_KEY, JSON.stringify(value))
+    } catch {
+      // 同上。
+    }
+  })
+
+  return { collapsed, collapsedProjectIds, toggleCollapsed, toggleProject }
+}
diff --git a/ui/src/composables/useSidebarPreferences.test.js b/ui/src/composables/useSidebarPreferences.test.js
new file mode 100644
index 0000000..facf00d
--- /dev/null
+++ b/ui/src/composables/useSidebarPreferences.test.js
@@ -0,0 +1,92 @@
+import { effectScope, nextTick } from 'vue'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useSidebarPreferences } from './useSidebarPreferences'
+
+/**
+ * 这个 composable 抽出来的理由就是它有**两个会静默炸掉整个组件**的坑，
+ * 所以测试锁的正是这两条，而不是"能读能写"：
+ * 1. localStorage 在隐私模式/配额满时是**抛异常**，不是返回 null；
+ * 2. 存进去的是字符串数组，读回来可能是任意 JSON（手改过、旧版本格式）。
+ */
+describe('useSidebarPreferences', () => {
+  let scope
+
+  beforeEach(() => {
+    window.localStorage.clear()
+    scope = effectScope()
+  })
+
+  afterEach(() => {
+    scope.stop()
+    vi.restoreAllMocks()
+    window.localStorage.clear()
+  })
+
+  function setup() {
+    return scope.run(() => useSidebarPreferences())
+  }
+
+  it('没有存过任何东西时默认展开、没有折叠的项目', () => {
+    const { collapsed, collapsedProjectIds } = setup()
+    expect(collapsed.value).toBe(false)
+    expect(collapsedProjectIds.value).toEqual([])
+  })
+
+  it('读回上次存下的收起状态与折叠项目', () => {
+    window.localStorage.setItem('coding.sidebar.collapsed', 'true')
+    window.localStorage.setItem('coding.sidebar.collapsed-projects', '["p1","p2"]')
+
+    const { collapsed, collapsedProjectIds } = setup()
+    expect(collapsed.value).toBe(true)
+    expect(collapsedProjectIds.value).toEqual(['p1', 'p2'])
+  })
+
+  it('localStorage 读取时抛异常不让组件挂掉，退化成默认展开', () => {
+    vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
+      throw new Error('SecurityError: localStorage 被禁用')
+    })
+
+    const { collapsed, collapsedProjectIds } = setup()
+    expect(collapsed.value).toBe(false)
+    expect(collapsedProjectIds.value).toEqual([])
+  })
+
+  it('存的项目列表不是数组时忽略它，而不是把字符串当数组用', () => {
+    window.localStorage.setItem('coding.sidebar.collapsed-projects', '{"p1":true}')
+    const { collapsedProjectIds } = setup()
+    expect(collapsedProjectIds.value).toEqual([])
+  })
+
+  it('localStorage 写入时抛异常不影响交互（状态照样变）', async () => {
+    vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+      throw new Error('QuotaExceededError')
+    })
+
+    const { collapsed, collapsedProjectIds, toggleCollapsed, toggleProject } = setup()
+    expect(() => toggleCollapsed()).not.toThrow()
+    expect(() => toggleProject('p1')).not.toThrow()
+
+    await nextTick()
+    expect(collapsed.value).toBe(true)
+    expect(collapsedProjectIds.value).toEqual(['p1'])
+  })
+
+  it('改写时会落盘，且 toggleProject 是来回切换而不是只加不减', async () => {
+    const { collapsed, collapsedProjectIds, toggleCollapsed, toggleProject } = setup()
+
+    toggleCollapsed()
+    toggleProject('p1')
+    await nextTick()
+    expect(window.localStorage.getItem('coding.sidebar.collapsed')).toBe('true')
+    expect(JSON.parse(window.localStorage.getItem('coding.sidebar.collapsed-projects'))).toEqual(['p1'])
+
+    toggleProject('p1')
+    await nextTick()
+    expect(collapsedProjectIds.value).toEqual([])
+
+    toggleCollapsed()
+    await nextTick()
+    expect(window.localStorage.getItem('coding.sidebar.collapsed')).toBe('false')
+  })
+})
diff --git a/ui/src/main.js b/ui/src/main.js
index 813591a..cf9cafb 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
 import App from './App.vue'
+import './styles/tokens.css'
 import './styles/main.css'
 
 createApp(App).use(createPinia()).mount('#app')
diff --git a/ui/src/stores/agent.js b/ui/src/stores/agent.js
index 447532e..d378e5d 100644
--- a/ui/src/stores/agent.js
+++ b/ui/src/stores/agent.js
@@ -91,6 +91,11 @@ export const useAgentStore = defineStore('agent', {
     selectedEffort: 'default',
     loading: false,
     error: '',
+    // 与 `error` 分开：`error` 是给主区顶部横幅用的「刚才那件事失败了」，
+    // 而 `projectsError` 回答的是一个结构性是非题 —— **侧栏到底有没有成功拿到项目列表**。
+    // 没有它的话，加载失败与「你确实一个项目都没有」在界面上完全一样，
+    // 于是失败时应用会热情地引导用户去「创建第一个项目」（见 DESIGN.md §18）。
+    projectsError: '',
     runActivityEvents: {},
     runActivityLoading: {},
   }),
@@ -144,26 +149,50 @@ export const useAgentStore = defineStore('agent', {
     async bootstrap() {
       this.loading = true
       this.error = ''
-      try {
-        const [user, options, threads, projects, activeRuns] = await Promise.all([
-          dashboardApi.me(), dashboardApi.options(), dashboardApi.listThreads(), dashboardApi.listProjects(), dashboardApi.listActiveRuns(),
-        ])
-        this.user = user
-        this.options = options
-        this.threads = threads
-        this.projects = projects
+      // 用 allSettled 而不是 all：五个接口是彼此独立的，其中一个挂掉不该把
+      // 已经拿到的四份数据一起丢掉。原来的 `Promise.all` 会让任意一个失败 →
+      // `this.projects` 保持 `[]` → 侧栏显示「项目会出现在这里」，
+      // 用户看到的是「你没有项目」而不是「没读到项目」。
+      const [user, options, threads, projects, activeRuns] = await Promise.allSettled([
+        dashboardApi.me(), dashboardApi.options(), dashboardApi.listThreads(), dashboardApi.listProjects(), dashboardApi.listActiveRuns(),
+      ])
+      if (user.status === 'fulfilled') this.user = user.value
+      if (options.status === 'fulfilled') {
+        this.options = options.value
         const savedModel = window.localStorage.getItem('coding.selected-model')
-        const validModels = (options.models || []).map((item) => item.id)
+        const validModels = (options.value.models || []).map((item) => item.id)
         this.selectedModel = validModels.includes(savedModel)
           ? savedModel
-          : options.default_agent_model || options.models?.[0]?.id || ''
-        this.selectedEffort = options.default_agent_reasoning_effort || 'default'
-        if (!this.currentThread && threads.length) await this.selectThread(threads[0].id)
-        for (const run of activeRuns) this.resumeRun(run)
+          : options.value.default_agent_model || options.value.models?.[0]?.id || ''
+        this.selectedEffort = options.value.default_agent_reasoning_effort || 'default'
+      }
+      if (threads.status === 'fulfilled') this.threads = threads.value
+      if (projects.status === 'fulfilled') {
+        this.projects = projects.value
+        this.projectsError = ''
+      } else {
+        this.projectsError = projects.reason?.message || '项目列表加载失败'
+      }
+      if (activeRuns.status === 'fulfilled') {
+        for (const run of activeRuns.value) this.resumeRun(run)
+      }
+      // 主区横幅保持原样：仍然只显示**第一条**失败信息，不变成五条。
+      const [firstFailure] = [user, options, threads, projects, activeRuns].filter((item) => item.status === 'rejected')
+      this.error = firstFailure ? (firstFailure.reason?.message || '初始化前端失败') : ''
+      this.loading = false
+      if (this.error) return
+      if (!this.currentThread && this.threads.length) await this.selectThread(this.threads[0].id)
+    },
+    // 侧栏「重新加载」按钮的落点。刻意只重取项目列表 ——
+    // 用户点这个按钮的唯一动机就是「项目没出来」。
+    async retryProjects() {
+      try {
+        this.projects = await dashboardApi.listProjects()
+        this.projectsError = ''
+        // 项目回来了，主区那条「加载项目列表失败」的横幅也该消失。
+        if (this.error) this.error = ''
       } catch (error) {
-        this.error = error.message || '初始化前端失败'
-      } finally {
-        this.loading = false
+        this.projectsError = error.message || '项目列表加载失败'
       }
     },
     async refreshThreads() {
diff --git a/ui/src/stores/agent.test.js b/ui/src/stores/agent.test.js
index 9e3f39e..131d7e8 100644
--- a/ui/src/stores/agent.test.js
+++ b/ui/src/stores/agent.test.js
@@ -7,6 +7,10 @@ vi.mock('../api/client', () => ({
     saveDraft: vi.fn(),
     listThreads: vi.fn(),
     listProjects: vi.fn(),
+    me: vi.fn(),
+    options: vi.fn(),
+    listActiveRuns: vi.fn(),
+    getThread: vi.fn(),
   },
 }))
 vi.mock('../api/sse', () => ({
@@ -24,6 +28,9 @@ beforeEach(() => {
   dashboardApi.saveDraft.mockResolvedValue({ content: '', revision: 1 })
   dashboardApi.listThreads.mockResolvedValue([])
   dashboardApi.listProjects.mockResolvedValue([])
+  dashboardApi.me.mockResolvedValue({ login: 'coding' })
+  dashboardApi.options.mockResolvedValue({ models: [{ id: 'deepseek-flash' }], default_agent_model: 'deepseek-flash' })
+  dashboardApi.listActiveRuns.mockResolvedValue([])
   streamAgentMessage.mockResolvedValue(undefined)
 })
 
@@ -73,3 +80,67 @@ describe('repository-free first chat', () => {
     expect(streamAgentMessage).not.toHaveBeenCalled()
   })
 })
+
+// 这四条锁的是「一个接口失败不该伪装成『你没有数据』」这条契约。
+// 原来 bootstrap 用 Promise.all：任意一个 reject → 五个赋值全部跳过 →
+// `projects` 保持 `[]` → 侧栏把「没读到项目」渲染成「你还没有项目」。
+describe('bootstrap 的局部失败', () => {
+  it('项目列表挂掉时，其余四个接口的数据仍然落地', async () => {
+    const agent = useAgentStore()
+    dashboardApi.listProjects.mockRejectedValue(new Error('加载项目列表失败：HTTP 503'))
+
+    await agent.bootstrap()
+
+    expect(agent.projects).toEqual([])
+    expect(agent.projectsError).toBe('加载项目列表失败：HTTP 503')
+    // 关键断言：另外四个接口的结果没有被一起丢掉
+    expect(agent.user).toEqual({ login: 'coding' })
+    expect(agent.selectedModel).toBe('deepseek-flash')
+    expect(agent.error).toBe('加载项目列表失败：HTTP 503')
+    expect(agent.loading).toBe(false)
+  })
+
+  it('项目列表成功而别的接口失败时，项目不会被清空', async () => {
+    const agent = useAgentStore()
+    dashboardApi.options.mockRejectedValue(new Error('options 挂了'))
+    dashboardApi.listProjects.mockResolvedValue([{ id: 'p1', name: '工作台', conversations: [] }])
+
+    await agent.bootstrap()
+
+    expect(agent.projects).toHaveLength(1)
+    expect(agent.projectsError).toBe('')
+    // 主区横幅仍然只报第一条失败，没有变成五条
+    expect(agent.error).toBe('options 挂了')
+  })
+
+  it('全部成功时 projectsError 是空字符串（读到了、只是没有）', async () => {
+    const agent = useAgentStore()
+    await agent.bootstrap()
+    expect(agent.projectsError).toBe('')
+    expect(agent.error).toBe('')
+  })
+
+  it('retryProjects 成功后清掉错误并填上项目', async () => {
+    const agent = useAgentStore()
+    dashboardApi.listProjects.mockRejectedValueOnce(new Error('HTTP 503'))
+    await agent.bootstrap()
+    expect(agent.projectsError).toBe('HTTP 503')
+
+    dashboardApi.listProjects.mockResolvedValueOnce([{ id: 'p1', name: '工作台', conversations: [] }])
+    await agent.retryProjects()
+
+    expect(agent.projects).toHaveLength(1)
+    expect(agent.projectsError).toBe('')
+    expect(agent.error).toBe('')
+  })
+
+  it('retryProjects 再次失败时保留错误文案，不会静默成功', async () => {
+    const agent = useAgentStore()
+    await agent.bootstrap()
+    dashboardApi.listProjects.mockRejectedValueOnce(new Error('还是 503'))
+
+    await agent.retryProjects()
+
+    expect(agent.projectsError).toBe('还是 503')
+  })
+})
diff --git a/ui/src/styles/main.css b/ui/src/styles/main.css
index 952fc1e..89ecf89 100644
--- a/ui/src/styles/main.css
+++ b/ui/src/styles/main.css
@@ -1,41 +1,32 @@
+/* ============================================================================
+ * 应用级变量
+ * ----------------------------------------------------------------------------
+ * 设计值与调色板的唯一来源是 ./tokens.css（在 main.js 里先于本文件引入）。
+ * 这里只声明这个 App 独有的结构常量：侧栏宽度与它的折叠覆盖。
+ * 不要在这里新增颜色、字号、圆角、间距的字面量。
+ * ========================================================================== */
 :root {
+  /* 这里只放 App 独有的东西（字体栈）。颜色 / 字号 / 圆角 / 间距 / 尺寸一律取自 tokens.css。 */
   font-family: Inter, "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
-  color: #263238;
-  background: #f4f5f3;
-  --sidebar-open: 272px;
-  --sidebar-closed: 72px;
-  --sidebar-width: var(--sidebar-open);
-  --accent: #2f7d74;
-  --accent-strong: #245f59;
-  --accent-soft: #edf4f2;
-  --border: #e1e5e3;
-  --muted: #6b7780;
-  --surface: #ffffff;
-  --surface-soft: #f7f8f6;
-  --danger: #b85c5c;
-  --success: #3d8968;
-  --warning: #b8873d;
-  --shadow: 0 12px 28px rgba(38, 50, 56, 0.07);
 }
 
 * { box-sizing: border-box; }
 
-body { margin: 0; background: #f4f5f3; }
+body { margin: 0; }
 
 button, input, textarea { font: inherit; }
 button, a { -webkit-tap-highlight-color: transparent; }
 
 .app-shell {
   display: grid;
-  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
+  grid-template-columns: var(--layout-sidebar) minmax(0, 1fr);
   height: 100vh;
   overflow: hidden;
   transition: grid-template-columns 0.2s ease;
-  background: #f4f5f3;
 }
 
 .app-shell.sidebar-collapsed {
-  --sidebar-width: var(--sidebar-closed);
+  grid-template-columns: var(--layout-sidebar-collapsed) minmax(0, 1fr);
 }
 
 .sidebar {
@@ -45,135 +36,140 @@ button, a { -webkit-tap-highlight-color: transparent; }
   min-width: 0;
   min-height: 0;
   overflow: hidden;
-  border-right: 1px solid var(--border);
-  background: #fbfcfa;
-  padding: 16px 12px;
+  border-right: 1px solid var(--c-border);
   transition: width 0.2s ease, padding 0.2s ease, transform 0.2s ease;
 }
 
-.sidebar.collapsed { padding: 16px 10px; }
-
 .sidebar-topbar, .brand { display: flex; align-items: center; }
 
-.sidebar-topbar { justify-content: space-between; gap: 8px; min-height: 40px; margin-bottom: 18px; }
+.sidebar-topbar { justify-content: space-between; gap: var(--space-8); margin-bottom: var(--space-18); }
 
-.brand { min-width: 0; gap: 10px; color: #263238; font-weight: 800; letter-spacing: 0.14em; }
+.brand { font-weight: 800; letter-spacing: 0.14em; }
 
-.brand img { width: 30px; height: 30px; flex: 0 0 auto; }
+.brand img { flex: 0 0 auto; }
 
 .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-.sidebar-toggle, .thread-delete { display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; }
-
-.sidebar-toggle { width: 30px; height: 30px; border-radius: 8px; color: #64748b; background: transparent; font-size: 24px; line-height: 1; }
+.sidebar-section-label { flex: 0 0 auto; text-transform: uppercase; }
 
-.sidebar-toggle:hover, .sidebar-toggle:focus-visible { background: #edf4f2; color: var(--accent); outline: none; }
+.thread-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
 
-.new-button, .send-button, .stop-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; cursor: pointer; padding: 10px 14px; }
+.project-list { gap: var(--space-14); }
+.project-group { min-width: 0; }
+.project-heading { padding: var(--space-6) var(--space-6) var(--space-2) var(--space-8); }
+.project-heading-main { flex-direction: column; }
+.project-add-thread { line-height: 18px; }
+.project-thread-item { margin-left: var(--space-2); width: calc(100% - 2px); }
+.project-empty { font-size: var(--text-base); line-height: 1.5; }
 
-.new-button { width: 100%; justify-content: flex-start; margin-bottom: 16px; border: 1px solid #dfe5e2; color: #263238; background: #f3f6f4; font-weight: 700; }
+/* 行与行操作必须是兄弟节点：<button> 的内容模型禁止交互式后代，而嵌套写法
+   在部分浏览器里会让内层按钮既进不了 Tab 序、又会被外层按钮吞掉键盘事件。 */
+.thread-row { position: relative; display: flex; }
 
-.collapsed .new-button { justify-content: center; padding-inline: 8px; }
+.thread-item { display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: center; width: 100%; border: 1px solid transparent; border-radius: var(--radius-md); padding: var(--space-10) var(--space-8); padding-right: calc(var(--space-32) + var(--space-8)); color: var(--c-text-secondary); background: transparent; text-align: left; cursor: pointer; }
 
-.new-button:hover, .new-button:focus-visible { border-color: #c1dcd6; background: #eaf2ef; outline: none; }
+.thread-title, .thread-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-.new-button:disabled, .send-button:disabled { cursor: not-allowed; opacity: 0.55; }
+.thread-item small { margin-top: var(--space-4); color: var(--c-text-muted); font-size: var(--text-sm); }
 
-.new-button-icon { font-size: 20px; line-height: 1; }
+/* 行操作：静息时完全退到背景里，悬停或键盘聚焦才浮出危险色。
+   focus-within 那一支是关键 —— 没有它，键盘用户根本看不到这个按钮存在。 */
+.thread-delete { position: absolute; top: 50%; right: var(--space-8); display: inline-flex; width: 24px; height: 24px; transform: translateY(-50%); align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm); color: var(--c-text-muted); background: transparent; font-size: var(--text-lg); cursor: pointer; opacity: 0; }
 
-.sidebar-section-label { flex: 0 0 auto; margin: 0 8px 8px; color: #89938f; font-size: 11px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; }
+.thread-row:hover .thread-delete, .thread-row:focus-within .thread-delete, .thread-row.is-active .thread-delete, .thread-delete:focus-visible { opacity: 1; }
 
-.thread-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 2px 12px 0; scrollbar-gutter: stable; }
+.thread-delete:hover { color: var(--c-danger); background: var(--c-surface); }
 
-.thread-list-inner { display: flex; flex-direction: column; gap: 4px; }
-.project-list { gap: 14px; }
-.project-group { min-width: 0; }
-.project-heading { display: flex; align-items: flex-start; gap: 6px; padding: 5px 5px 2px 8px; }
-.project-heading-main { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
-.project-heading-main strong, .project-heading-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.project-heading-main strong { color: #43545d; font-size: 12px; }
-.project-heading-main small { color: #89969b; font-size: 10px; }
-.project-add-thread { border: 0; background: transparent; color: #59716d; cursor: pointer; font-size: 18px; line-height: 18px; }
-.project-add-thread:disabled { opacity: .4; cursor: not-allowed; }
-.project-thread-item { margin-left: 2px; width: calc(100% - 2px); }
-.project-empty { padding: 12px 8px; color: #89969b; font-size: 12px; line-height: 1.5; }
+.thread-delete:focus-visible { color: var(--c-danger); background: var(--c-surface); outline: 2px solid var(--c-accent); outline-offset: 2px; }
 
-.thread-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) 26px; align-items: center; gap: 9px; width: 100%; border: 1px solid transparent; border-radius: 10px; padding: 10px 8px; color: #475569; background: transparent; text-align: left; cursor: pointer; }
+.status-dot, .status-pill-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--c-border-strong); }
 
-.collapsed .thread-item { grid-template-columns: 10px 1fr; justify-items: center; padding-inline: 8px; }
+.status-dot.running, .status-pill.running .status-pill-dot { background: var(--c-warning); box-shadow: 0 0 0 4px var(--c-warning-subtle); }
+.status-dot.queued { background: var(--c-text-secondary); }
+.status-dot.cancelling { background: var(--c-warning); }
 
-.thread-item.active, .thread-item:hover { border-color: #d5e6e1; background: #edf4f2; color: #263238; }
+.status-dot.finished, .status-dot.completed, .status-pill.finished .status-pill-dot, .status-pill.completed .status-pill-dot { background: var(--c-success); }
 
-.thread-content { min-width: 0; }
+.status-dot.error, .status-dot.failed, .status-pill.error .status-pill-dot, .status-pill.failed .status-pill-dot { background: var(--c-danger); }
+.status-dot.cancelled, .status-dot.interrupted { background: var(--c-text-muted); }
 
-.thread-title, .thread-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.workspace { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; }
 
-.thread-title { font-size: 13px; font-weight: 650; }
+.workspace-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-20); min-height: 74px; border-bottom: 1px solid var(--c-border); padding: var(--space-14) var(--space-32); }
 
-.thread-item small { margin-top: 3px; color: var(--muted); font-size: 11px; }
+.workspace-heading, .workspace-status, .status-pill { display: flex; align-items: center; }
 
-.collapsed-thread-label { width: 28px; height: 28px; border-radius: 8px; color: #356b63; background: #e2eeeb; font-size: 12px; font-weight: 800; line-height: 28px; text-align: center; }
+.workspace-heading { min-width: 0; gap: var(--space-12); }
 
-.thread-delete { width: 24px; height: 24px; border-radius: 6px; color: #94a3b8; background: transparent; font-size: 18px; opacity: 0; }
+.workspace-mark { width: 34px; height: 34px; }
 
-.thread-item:hover .thread-delete, .thread-item.active .thread-delete, .thread-delete:focus-visible { opacity: 1; }
+.workspace-header h1 { margin: 0; }
 
-.thread-delete:hover, .thread-delete:focus-visible { color: var(--danger); background: #fee2e2; outline: none; }
+/* 仓库徽标：它标识上下文，不指向任何地方，所以是胶囊不是链接。 */
+.workspace-repo { display: inline-block; max-width: min(46vw, 420px); margin: var(--space-6) 0 0; overflow: hidden; border: 1px solid var(--c-border); border-radius: var(--radius-full); padding: var(--space-2) var(--space-8); color: var(--c-text-muted); background: var(--c-surface); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
 
-.status-dot, .status-pill-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
+.workspace-status { flex-wrap: wrap; justify-content: flex-end; gap: var(--space-10); color: var(--c-text-muted); font-size: var(--text-base); }
 
-.status-dot.running, .status-pill.running .status-pill-dot { background: var(--warning); box-shadow: 0 0 0 4px #f7eedc; }
-.status-dot.queued { background: #64748b; }
-.status-dot.cancelling { background: #d97706; }
+.status-pill { gap: var(--space-8); border: 1px solid var(--c-border); border-radius: var(--radius-full); padding: var(--space-6) var(--space-10); color: var(--c-text-secondary); background: var(--c-bg-subtle); }
 
-.status-dot.finished, .status-dot.completed, .status-pill.finished .status-pill-dot, .status-pill.completed .status-pill-dot { background: var(--success); }
+.status-pill.running { border-color: var(--c-border-strong); color: var(--c-warning); background: var(--c-warning-subtle); }
 
-.status-dot.error, .status-dot.failed, .status-pill.error .status-pill-dot, .status-pill.failed .status-pill-dot { background: var(--danger); }
-.status-dot.cancelled, .status-dot.interrupted { background: #94a3b8; }
+.status-pill.finished, .status-pill.completed { border-color: var(--c-border); color: var(--c-text-secondary); background: var(--c-bg-subtle); }
 
-.workspace { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; background: #f4f5f3; }
+.status-pill.error, .status-pill.failed { border-color: var(--c-border); color: var(--c-danger); background: var(--c-danger-subtle); }
 
-.workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; border-bottom: 1px solid var(--border); padding: 14px 30px; background: rgba(255, 255, 255, 0.97); }
+.branch-label { color: var(--c-text-secondary); }
 
-.workspace-heading, .workspace-status, .status-pill { display: flex; align-items: center; }
+.workspace-status a { color: var(--c-accent); text-decoration: none; }
 
-.workspace-heading { min-width: 0; gap: 12px; }
-
-.workspace-mark { width: 34px; height: 34px; }
-
-.workspace-header h1 { margin: 0; color: #263238; font-size: 17px; letter-spacing: 0.04em; }
+.workspace-status a:hover { text-decoration: underline; }
 
-.workspace-repo { max-width: 46vw; margin: 5px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+/* 消息列与输入框必须同宽同列 —— 它们上下相邻，宽度不同会形成一道看不见的错位：
+   每条消息的左边缘和输入框的左边缘差十几像素，说不清哪里不对但就是不正。
+   两边都从 `--layout-content-max` 反推：
+     输入框直接写这个宽度；
+     消息列靠左右内边距把它挤出来 —— `max(48px, (100% - 内容宽) / 2)`。
+   两种写法在宽屏与窄屏下等价，改 token 一处两边同时跟着走。 */
+.message-list { position: relative; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-block: var(--space-32) var(--space-24); padding-inline: max(var(--space-48), calc((100% - var(--layout-content-max)) / 2)); scrollbar-gutter: stable; }
 
-.workspace-status { flex-wrap: wrap; justify-content: flex-end; gap: 10px; color: var(--muted); font-size: 12px; }
+.empty-state { margin: 15vh auto 0; text-align: center; color: var(--c-text-muted); }
 
-.status-pill { gap: 7px; border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; color: #475569; background: var(--surface-soft); }
+.empty-mark { width: 54px; height: 54px; margin-bottom: var(--space-18); }
 
-.status-pill.running { border-color: #ead5aa; color: #86652d; background: #fbf5e9; }
+.eyebrow { margin: 0 0 var(--space-8); color: var(--c-accent); font-size: var(--text-base); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
 
-.status-pill.finished, .status-pill.completed { border-color: #c9e1d5; color: #347257; background: #f1f8f4; }
+.empty-state h2 { margin: 0 0 var(--space-10); }
 
-.status-pill.error, .status-pill.failed { border-color: #fecaca; color: #991b1b; background: #fef2f2; }
+.empty-state p:last-child, .empty-copy { font-size: var(--text-md); }
 
-.branch-label { color: #475569; }
+/* Hero 的入口按钮组与能力标签。
+   这两组类名此前**完全没有样式** —— 模板里唯一一批没有任何规则命中的类，
+   两个 CTA（「开始新聊天」「创建项目」）一直以浏览器默认按钮渲染，
+   能力标签「独立会话 / 纯对话模式 / {模型}」则挤成一行无分隔的文字。
+   它们在新用户的第一个屏幕上，而只要账号下还有任何会话就再也回不到这一屏。 */
+.welcome-mark { display: flex; justify-content: center; }
 
-.workspace-status a { color: var(--accent); text-decoration: none; }
+.welcome-actions { display: flex; justify-content: center; gap: var(--space-10); margin-top: var(--space-20); }
 
-.workspace-status a:hover { text-decoration: underline; }
+.welcome-capabilities { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); margin-top: var(--space-16); }
 
-.message-list { position: relative; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 34px 40px 24px; scrollbar-gutter: stable; }
+.welcome-capabilities span { border: 1px solid var(--c-border); border-radius: var(--radius-full); padding: var(--space-4) var(--space-10); color: var(--c-text-secondary); background: var(--c-surface); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; }
 
-.empty-state { max-width: 640px; margin: 15vh auto 0; text-align: center; color: var(--muted); }
+/* 加载态：裸文字读起来像「界面卡住了」，换成指示器 + 文案。
+   尺寸用 em 而不是 px，跟随 currentColor 与字号，和 UiButton 内部那个指示器同源。 */
+.loading-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-14); }
 
-.empty-mark { width: 54px; height: 54px; margin-bottom: 18px; }
+.loading-spinner { flex: none; width: 1.5em; height: 1.5em; border: 0.125em solid var(--c-border-strong); border-top-color: var(--c-accent); border-radius: var(--radius-full); animation: loading-spin calc(var(--dur-base) * 3) linear infinite; }
 
-.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
-
-.empty-state h2 { margin: 0 0 10px; color: #263238; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.04em; }
+@keyframes loading-spin {
+  to { transform: rotate(360deg); }
+}
 
-.empty-state p:last-child { margin: 0; font-size: 14px; }
+@media (prefers-reduced-motion: reduce) {
+  .loading-spinner { animation: none; }
+}
 
-.message { width: min(1240px, 100%); margin: 0 auto 28px; }
+.message { width: min(1240px, 100%); margin: 0 auto var(--space-32); }
 
 .message-user { display: flex; justify-content: flex-end; padding-left: clamp(56px, 18vw, 260px); }
 
@@ -185,173 +181,218 @@ button, a { -webkit-tap-highlight-color: transparent; }
 
 .assistant-message-content { max-width: 1080px; }
 
-.message-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: #64748b; font-size: 12px; font-weight: 750; letter-spacing: 0.02em; }
+.message-meta { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-10); color: var(--c-text-secondary); font-size: var(--text-base); font-weight: 750; letter-spacing: 0.02em; }
 
 .message-meta-user { justify-content: flex-end; }
 
-.message-avatar { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 7px; }
+/* 消息头的时间：弱于名字两档。
+   它是"扫读时可有可无、需要时能找到"的信息，所以用最弱的灰、最轻的字重，
+   不能和名字抢重心 —— 否则每一屏消息头都变成两个并列的强调元素。 */
+.message-time { color: var(--c-text-muted); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; }
+
+.message-avatar { width: 24px; height: 24px; flex: 0 0 auto; border-radius: var(--radius-sm); }
 
-.user-avatar { display: inline-flex; align-items: center; justify-content: center; color: #f7f8f8; background: #273238; }
+.user-avatar { display: inline-flex; align-items: center; justify-content: center; }
 
 .user-avatar svg { width: 17px; height: 17px; }
 
-.assistant-message-body { border-left: 2px solid #d6e5e0; padding-left: 18px; }
+.assistant-message-body { border-left: 2px solid var(--c-border); padding-left: var(--space-18); }
 
-.user-bubble { max-width: min(82%, 860px); border: 1px solid #d9dfdc; border-radius: 16px 16px 4px 16px; color: #35424a; background: #ecefeb; padding: 12px 16px; line-height: 1.7; white-space: pre-wrap; box-shadow: 0 8px 20px rgba(38, 50, 56, 0.05); }
+.user-bubble { max-width: min(82%, 860px); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--space-12) var(--space-16); line-height: 1.7; white-space: pre-wrap; box-shadow: var(--shadow-sm); }
 
-.message-actions { display: flex; min-height: 28px; align-items: center; gap: 8px; padding: 2px 4px; color: #a0a4aa; font-size: 12px; opacity: 0; visibility: hidden; transition: opacity 0.14s ease, visibility 0.14s ease; }
-.message:hover .message-actions, .message:focus-within .message-actions { opacity: 1; visibility: visible; }
+.message-actions { display: flex; min-height: 28px; align-items: center; gap: var(--space-8); padding: var(--space-2) var(--space-4); color: var(--c-text-muted); font-size: var(--text-base); opacity: 0; pointer-events: none; transition: opacity 0.14s ease; }
+/* 这里不能用 visibility: hidden —— 它会让容器里的按钮无法获得焦点，
+   于是 .message:focus-within 永远不会触发，键盘用户永远够不到「复制」。
+   用 opacity + pointer-events 藏起来：既看不见也点不到，但仍然可以 Tab 进来。 */
+.message:hover .message-actions, .message:focus-within .message-actions { opacity: 1; pointer-events: auto; }
 .message-user .message-actions { justify-content: flex-end; }
-.message-action-time { color: #a0a4aa; font-variant-numeric: tabular-nums; }
-.message-copy-button { display: inline-flex; width: 25px; height: 25px; align-items: center; justify-content: center; border: 0; border-radius: 6px; padding: 4px; color: #a0a4aa; background: transparent; cursor: pointer; }
+.message-action-time { color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
+/* 已换成 UiButton（ghost / sm / icon）——外观、hover、焦点环都由原语负责，
+   这里只保留原语管不到的「插槽内容尺寸」。 */
 .message-copy-button svg { width: 17px; height: 17px; }
-.message-copy-button:hover, .message-copy-button:focus-visible { color: #737982; background: #f0f1f2; outline: none; }
-.message-copy-feedback { min-width: 34px; color: #92979e; }
+.message-copy-feedback { min-width: 34px; color: var(--c-text-secondary); }
 
 .plain-text { overflow-wrap: anywhere; }
 
-.message-expand-button { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; border: 0; padding: 0; color: #687b75; background: transparent; font: inherit; font-size: 13px; line-height: 1.25; cursor: pointer; }
+/* 文内展开链接：不是"动作按钮"，所以刻意不套 UiButton——
+   它的形态是正文里的一行文字 + 旋转箭头，套上定高的按钮会把气泡撑歪。
+   代价是状态要自己写全：hover / focus-visible 都在这里。
+   （原先这个选择器分散在两块里，颜色那块在 500 行之外。） */
+.message-expand-button { display: inline-flex; align-items: center; gap: var(--space-8); margin-top: var(--space-10); border: 0; padding: 0; color: var(--c-text-secondary); background: transparent; font: inherit; font-size: var(--text-md); line-height: 1.25; cursor: pointer; }
 
-.message-expand-button:hover, .message-expand-button:focus-visible { color: #2f5f55; }
+.message-expand-button:hover { color: var(--c-text); }
 
-.message-expand-button:focus-visible { outline: 2px solid rgba(64, 123, 110, 0.35); outline-offset: 3px; border-radius: 4px; }
+.message-expand-button:focus-visible { color: var(--c-text); outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: var(--radius-sm); }
 
-.message-expand-chevron { display: inline-block; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.16s ease; }
+.message-expand-chevron { display: inline-block; width: 7px; height: 7px; margin-top: calc(var(--space-4) * -1); border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.16s ease; }
 
-.message-expand-chevron.expanded { margin-top: 3px; transform: rotate(225deg); }
+.message-expand-chevron.expanded { margin-top: var(--space-4); transform: rotate(225deg); }
 
 .markdown-body { line-height: 1.85; overflow-wrap: anywhere; }
 
-.markdown-body p { margin: 0 0 12px; }
-
-.markdown-body ul, .markdown-body ol { margin: 8px 0 12px; padding-left: 24px; }
+.markdown-body p { margin: 0 0 var(--space-12); }
 
-.markdown-body li + li { margin-top: 4px; }
+.markdown-body ul, .markdown-body ol { margin: var(--space-8) 0 var(--space-12); padding-left: var(--space-24); }
 
-.markdown-body h1, .markdown-body h2, .markdown-body h3 { color: #263238; }
+.markdown-body li + li { margin-top: var(--space-4); }
 
-.markdown-body a { color: var(--accent); }
+.markdown-body a { color: var(--c-accent); }
 
-.markdown-body code { border-radius: 6px; color: #3d5e57; background: #edf3f1; padding: 2px 6px; font-family: Consolas, "Courier New", monospace; font-size: 0.9em; }
+.markdown-body code { border-radius: var(--radius-sm); color: var(--c-text); background: var(--c-bg-subtle); padding: var(--space-2) var(--space-6); font-family: Consolas, "Courier New", monospace; font-size: var(--text-xs); }
 
-.code-window { overflow: hidden; margin: 18px 0; border: 1px solid #e1e5ea; border-radius: 22px; background: #f5f6f7; box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06); }
+.code-window { overflow: hidden; margin: var(--space-18) 0; border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-bg-subtle); box-shadow: var(--shadow-sm); }
 
-.code-window-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 0 18px 0 24px; color: #172033; }
+.code-window-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: 48px; padding: 0 var(--space-18) 0 var(--space-24); color: var(--c-text); }
 
 .code-window-language, .code-window-actions { display: inline-flex; align-items: center; }
 
-.code-window-language { gap: 12px; font-size: 15px; font-weight: 650; }
+.code-window-language { gap: var(--space-12); font-size: var(--text-lg); font-weight: 650; }
 
-.code-window-icon { color: #344054; font-family: Consolas, "Courier New", monospace; font-size: 16px; font-weight: 800; letter-spacing: -0.12em; }
+.code-window-icon { color: var(--c-text); font-family: Consolas, "Courier New", monospace; font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.12em; }
 
-.code-window-actions { gap: 14px; color: #344054; }
+.code-window-actions { gap: var(--space-14); color: var(--c-text); }
 
-.code-window-action { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 6px; color: inherit; background: transparent; font-size: 20px; line-height: 1; }
+.code-window-action { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: var(--radius-sm); color: inherit; background: transparent; font-size: var(--text-xl); line-height: 1; }
 
-.code-copy-action { cursor: pointer; font-size: 22px; }
+.code-copy-action { cursor: pointer; font-size: var(--text-xl); }
 
-.code-copy-action:hover, .code-copy-action:focus-visible { color: var(--accent); background: #e8eef8; outline: none; }
+.code-copy-action:hover { color: var(--c-accent); background: var(--c-bg-subtle); outline: none; }
 
-.code-window pre { overflow: auto; margin: 0; border-top: 1px solid #e8ebef; color: #293241; background: transparent; padding: 10px 24px 22px; }
+.code-copy-action:focus-visible { color: var(--c-accent); background: var(--c-bg-subtle); outline: 2px solid var(--c-accent); outline-offset: 2px; }
 
-.code-window pre code { color: inherit; background: transparent; padding: 0; font-size: 14px; line-height: 1.7; tab-size: 2; }
+.code-window pre { overflow: auto; margin: 0; border-top: 1px solid var(--c-border); color: var(--c-text); background: transparent; padding: var(--space-10) var(--space-24) var(--space-24); }
 
-.markdown-body table { width: 100%; border-collapse: collapse; margin: 12px 0; }
+.code-window pre code { color: inherit; background: transparent; padding: 0; font-size: var(--text-md); line-height: 1.7; tab-size: 2; }
 
-.markdown-body th, .markdown-body td { border-bottom: 1px solid var(--border); padding: 8px; text-align: left; }
+.markdown-body table { width: 100%; border-collapse: collapse; margin: var(--space-12) 0; }
 
-.todo-card { overflow: hidden; border: 1px solid #d6e5e0; border-radius: 12px; background: #f8faf8; }
+.markdown-body th, .markdown-body td { border-bottom: 1px solid var(--c-border); padding: var(--space-8); text-align: left; }
 
-.todo-card header { display: flex; gap: 10px; border-bottom: 1px solid #e0ebe7; padding: 10px 14px; color: #356b63; }
+.todo-card { overflow: hidden; border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); }
 
-.todo-card ol { list-style: none; margin: 0; padding: 10px 14px 12px; }
+.todo-card header { display: flex; gap: var(--space-10); border-bottom: 1px solid var(--c-border); padding: var(--space-10) var(--space-14); color: var(--c-accent); }
 
-.todo-card li { display: flex; gap: 9px; padding: 4px 0; color: #475569; }
+.todo-card ol { list-style: none; margin: 0; padding: var(--space-10) var(--space-14) var(--space-12); }
 
-.todo-card li.completed { color: #94a3b8; text-decoration: line-through; }
+.todo-card li { display: flex; gap: var(--space-10); padding: var(--space-4) 0; color: var(--c-text-secondary); }
+/* 长任务文本必须能在卡片内折行。`li` 是 flex 行，装文字的那个 `<span>` 是 flex 项，
+   而 flex 项的 `min-width` 默认是 `auto`（= 不得小于内容宽度）—— 不归零的话，
+   一段不含空格的长串（超长路径、超长标识符）会直接顶出卡片边框，
+   在别处被裁掉，而卡片里看不到任何提示。 */
+.todo-card li > span { min-width: 0; overflow-wrap: anywhere; }
 
-.todo-card li.in_progress { color: #356b63; font-weight: 700; }
+.todo-card li.completed { color: var(--c-text-muted); text-decoration: line-through; }
 
-.todo-icon { width: 18px; color: var(--success); }
+.todo-card li.in_progress { color: var(--c-accent); font-weight: 700; }
 
-.run-activity { margin: 14px 0; overflow: hidden; border: 1px solid #dbe6e2; border-radius: 12px; background: #f8faf9; }
-.run-activity-toggle { display: flex; width: 100%; align-items: center; gap: 10px; border: 0; padding: 11px 14px; background: transparent; color: #40534d; text-align: left; cursor: pointer; }
-.run-activity-toggle:hover { background: #f0f6f3; }
-.run-activity-toggle-icon { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; align-items: center; justify-content: center; color: #438f79; }
-.run-activity-toggle-icon svg { display: block; width: 16px; height: 16px; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transform: rotate(-90deg); transition: transform 0.16s ease; }
-.run-activity-toggle-icon svg.expanded { transform: rotate(0deg); }
-.run-activity-heading { color: #356b63; font-weight: 700; }
-.run-activity-summary { color: #66756f; font-size: 13px; }
-.run-activity-status { margin-left: auto; border-radius: 999px; padding: 3px 9px; background: #e8f1ed; color: #527267; font-size: 11px; white-space: nowrap; }
-.run-activity-failed .run-activity-status { background: #fff0ef; color: #ad514d; }
-.run-activity-awaiting_approval .run-activity-status { background: #fff6e5; color: #946d24; }
-.run-activity-incomplete .run-activity-status { background: #fff6e5; color: #946d24; }
-.run-activity-content { border-top: 1px solid #e3ece8; padding: 12px 14px; }
-.run-activity-content .todo-card { margin: 0 0 12px; }
-.run-activity-timeline { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
-.run-activity-event { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; align-items: baseline; color: #52615b; font-size: 13px; }
-.run-activity-event-title { overflow-wrap: anywhere; }
-.run-activity-event-status { color: #7b8a84; font-size: 11px; }
-.run-activity-event-text { grid-column: 1 / -1; margin: 2px 0 0; border-left: 2px solid #dce7e2; padding-left: 10px; color: #64736d; white-space: pre-wrap; overflow-wrap: anywhere; }
-.run-activity-loading, .run-activity-empty { margin: 0; color: #74817c; font-size: 13px; }
+.todo-icon { width: 18px; color: var(--c-success); }
 
-.error-banner { max-width: 880px; margin: 12px auto; border: 1px solid #e7caca; border-radius: 10px; color: #8f4e4e; background: #fbf3f2; padding: 10px 12px; }
+/* 工具调用胶囊。
+   它原来是一条占满整行的卡片（`background: --c-surface` + 边框 + 1200px 宽），
+   于是"运行了 4 秒"这件事占了和一条消息一样大的版面 —— 形态远大于信息量。
+   改成一个贴着内容的胶囊：几何由内容决定，宽度不再假装成有边界的容器。
+   展开时内容单独成块落到胶囊下面，所以圆角不会跟着撑开。 */
+.run-activity { margin: var(--space-10) 0; }
+.run-activity-toggle { display: inline-flex; max-width: 100%; align-items: center; gap: var(--space-8); border: 1px solid var(--c-border); border-radius: var(--radius-full); padding: var(--space-6) var(--space-12); background: var(--c-surface); color: var(--c-text-secondary); text-align: left; cursor: pointer; }
+/* 整行 disclosure 的焦点环 —— 此前完全没有，键盘用户在这块整个区域里看不到自己停在哪。
+这个控件刻意不套 UiButton：它是「一行里含旋转箭头 + 摘要 + 贴右端的状态胶囊」，
+几何由内容决定，套不上按钮的定高档位（sm 28 / md 36 / lg 44）。 */
+.run-activity-toggle:hover { border-color: var(--c-border-strong); background: var(--c-bg-subtle); }
 
-.new-content-button { position: absolute; z-index: 2; right: 28px; bottom: 116px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #c5ddd7; border-radius: 999px; cursor: pointer; padding: 9px 14px; color: #2f6d64; background: rgba(247, 252, 250, 0.97); box-shadow: 0 10px 24px rgba(38, 50, 56, 0.12); font-size: 12px; font-weight: 750; }
-
-.new-content-button:hover, .new-content-button:focus-visible { border-color: var(--accent); color: #245f59; background: #edf6f3; outline: none; }
+.run-activity-toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
+.run-activity-toggle-icon { display: inline-flex; width: 14px; height: 14px; flex: 0 0 14px; align-items: center; justify-content: center; color: var(--c-text-muted); }
+.run-activity-toggle-icon svg { display: block; width: 13px; height: 13px; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transform: rotate(-90deg); transition: transform 0.16s ease; }
+.run-activity-toggle-icon svg.expanded { transform: rotate(0deg); }
+.run-activity-heading { color: var(--c-text); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
+.run-activity-summary { overflow: hidden; color: var(--c-text-muted); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
+/* 胶囊内部用 `·` 分节，而不是给状态再套一个胶囊。
+   嵌套胶囊（胶囊里的胶囊）会让一行出现三级圆角，读起来很碎。 */
+.run-activity-summary::before, .run-activity-status::before { margin-right: var(--space-8); color: var(--c-border-strong); content: '·'; }
+.run-activity-status { color: var(--c-text-muted); font-size: var(--text-sm); white-space: nowrap; }
+.run-activity-failed .run-activity-status { color: var(--c-danger); }
+.run-activity-awaiting_approval .run-activity-status { color: var(--c-warning); }
+.run-activity-incomplete .run-activity-status { color: var(--c-warning); }
+.run-activity-content { margin-top: var(--space-10); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--space-12) var(--space-14); background: var(--c-surface); }
+.run-activity-content .todo-card { margin: 0 0 var(--space-12); }
+/* 深度思考：运行轨迹里的一层子折叠。它经常比整条轨迹还长，所以默认收起，
+   并且用"左侧留白 + 弱化字号"表达它是模型的内心独白，不是已经发生的事。 */
+.think-block { margin-bottom: var(--space-16); }
+.think-toggle { display: inline-flex; max-width: 100%; align-items: center; gap: var(--space-6); border: 0; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); color: var(--c-text-secondary); background: transparent; font-size: var(--text-md); font-weight: 600; cursor: pointer; }
+.think-toggle:hover { color: var(--c-text); background: var(--c-bg-subtle); }
+.think-toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
+.think-toggle-icon { display: inline-flex; flex: none; }
+.think-toggle-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast) var(--ease-out); }
+.think-toggle-icon svg.expanded { transform: rotate(180deg); }
+.think-count { color: var(--c-text-muted); font-size: var(--text-sm); font-weight: 500; }
+/* 整块给一层浅底 + 一条左侧竖线，把它读成"插在里面的旁白"而不是时间线的一节。
+   不给文字加 italic：中文没有真斜体，浏览器靠切变字形伪造，读起来是歪的。
+   不给右边圆角：`0 var(--radius-sm) var(--radius-sm) 0` 这种简写会被 audit 算成
+   一个新取值，直接把 border-radius distinct 顶到 5（上限 4）。方角配上竖线反而更像旁白。 */
+.think-list { display: grid; gap: var(--space-8); margin: var(--space-8) 0 0; border-left: 2px solid var(--c-border-strong); padding: var(--space-10) var(--space-12); background: var(--c-bg-subtle); list-style: none; }
+.think-item { color: var(--c-text-secondary); font-size: var(--text-md); }
+.think-title { overflow-wrap: anywhere; }
+.think-text { margin: var(--space-2) 0 0; color: var(--c-text-muted); font-size: var(--text-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
+.run-activity-timeline { display: grid; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
+.run-activity-event { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4) var(--space-12); align-items: baseline; color: var(--c-text-secondary); font-size: var(--text-md); }
+.run-activity-event-title { overflow-wrap: anywhere; }
+.run-activity-event-status { color: var(--c-text-secondary); font-size: var(--text-sm); }
+.run-activity-event-text { grid-column: 1 / -1; margin: var(--space-2) 0 0; border-left: 2px solid var(--c-border); padding-left: var(--space-10); color: var(--c-text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
+.run-activity-loading, .run-activity-empty { margin: 0; color: var(--c-text-secondary); font-size: var(--text-md); }
 
-.new-content-button span { font-size: 16px; line-height: 1; }
+.error-banner { max-width: 880px; margin: var(--space-12) auto; border: 1px solid var(--c-border-strong); border-radius: var(--radius-md); color: var(--c-danger); background: var(--c-danger-subtle); padding: var(--space-10) var(--space-12); }
 
-.composer { width: min(960px, calc(100% - 80px)); margin: 0 auto 22px; border: 1px solid #dfe4e1; border-radius: 16px; background: rgba(255, 255, 255, 0.98); box-shadow: 0 12px 28px rgba(38, 50, 56, 0.07); padding: 14px 16px; }
+.new-content-button { position: absolute; z-index: 2; right: 28px; bottom: 116px; display: inline-flex; align-items: center; gap: var(--space-8); border: 1px solid var(--c-border-strong); border-radius: var(--radius-full); cursor: pointer; padding: var(--space-10) var(--space-14); color: var(--c-accent); background: var(--c-accent-subtle); box-shadow: var(--shadow-md); font-size: var(--text-base); font-weight: 750; }
 
-.repo-field { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
+.new-content-button:hover { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-subtle); outline: none; }
 
-.repo-field input { min-width: 0; border: 1px solid var(--border); border-radius: 8px; outline: none; padding: 8px 10px; color: #35424a; background: var(--surface-soft); }
+.new-content-button:focus-visible { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-subtle); outline: 2px solid var(--c-accent); outline-offset: 2px; }
 
-.repo-field input:focus { border-color: #a8ccc4; box-shadow: 0 0 0 3px rgba(47, 125, 116, 0.12); }
+.new-content-button span { font-size: var(--text-lg); line-height: 1; }
 
-.repo-hint { margin: 6px 0 8px 100px; color: #94a3b8; font-size: 11px; }
+.composer { margin: 0 auto var(--space-24); border: 1px solid var(--c-border); }
 
-.composer textarea { width: 100%; min-height: 82px; max-height: 180px; resize: vertical; border: 0; outline: none; color: #263238; background: transparent; line-height: 1.65; }
+.repo-field { grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: var(--space-10); color: var(--c-text-muted); font-size: var(--text-base); }
 
-.composer-footer { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
+/* outline 由下一条 :focus 的 box-shadow 焦点环替代 */
+.repo-field input { border: 1px solid var(--c-border); border-radius: var(--radius-sm); outline: none; padding: var(--space-8) var(--space-10); color: var(--c-text); background: var(--c-bg-subtle); }
 
-.send-button, .stop-button { color: #fff; background: #263238; }
+.repo-field input:focus { border-color: var(--c-border-strong); box-shadow: 0 0 0 3px var(--c-accent-subtle); }
 
-.send-button:hover, .stop-button:hover { background: var(--accent-strong); }
+/* composer 的 textarea 已交给 UiTextarea（bare 形态）：
+   宽度、边框、背景、内边距、placeholder 颜色与 max-height 都由原语负责，
+   outline 由 .composer:focus-within 的 box-shadow 焦点环替代。 */
 
-.stop-button { background: #9d5656; }
+.composer-footer { display: flex; justify-content: space-between; color: var(--c-text-muted); font-size: var(--text-base); }
 
 ::-webkit-scrollbar { width: 10px; height: 10px; }
 
 ::-webkit-scrollbar-track { background: transparent; }
 
-::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: #cdd4d1; background-clip: padding-box; }
+::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: var(--radius-full); background: var(--c-surface-hover); background-clip: padding-box; }
 
-::-webkit-scrollbar-thumb:hover { background: #aab8b3; background-clip: padding-box; }
+::-webkit-scrollbar-thumb:hover { background: var(--c-border-strong); background-clip: padding-box; }
 
 .sidebar-backdrop { display: none; }
 
 @media (max-width: 860px) {
   .app-shell { grid-template-columns: 1fr; }
-  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(var(--sidebar-open), 86vw); box-shadow: 12px 0 30px rgba(15, 23, 42, 0.12); transform: translateX(-105%); }
+  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(var(--layout-sidebar), 86vw); box-shadow: var(--shadow-md); transform: translateX(-105%); }
   .app-shell:not(.sidebar-collapsed) .sidebar { transform: translateX(0); }
-  .app-shell:not(.sidebar-collapsed) .sidebar-backdrop { position: fixed; z-index: 3; inset: 0; display: block; border: 0; background: rgba(15, 23, 42, 0.28); }
-  .workspace-header { padding: 12px 18px; }
-  .workspace-status { gap: 6px; }
-  .message-list { padding: 24px 18px 18px; }
+  .app-shell:not(.sidebar-collapsed) .sidebar-backdrop { position: fixed; z-index: 3; inset: 0; display: block; border: 0; background: var(--c-overlay); }
+  .workspace-header { padding: var(--space-12) var(--space-18); }
+  .workspace-status { gap: var(--space-6); }
+  .message-list { padding: var(--space-24) var(--space-18) var(--space-18); }
   .message-user, .message-assistant { padding-left: 0; padding-right: 0; }
   .assistant-message-content { max-width: 100%; }
   .new-content-button { right: 18px; bottom: 104px; }
-  .composer { width: calc(100% - 28px); margin-bottom: 14px; }
+  .composer { margin-bottom: var(--space-14); }
 }
 
 @media (max-width: 560px) {
   .workspace-header { align-items: flex-start; }
   .workspace-status { flex-direction: column; align-items: flex-end; }
   .workspace-repo { max-width: 52vw; }
-  .repo-field { grid-template-columns: 1fr; gap: 5px; }
+  .repo-field { grid-template-columns: 1fr; gap: var(--space-6); }
   .repo-hint { margin-left: 0; }
 }
 
@@ -361,7 +402,7 @@ button, a { -webkit-tap-highlight-color: transparent; }
   width: 1px;
   height: 1px;
   padding: 0;
-  margin: -1px;
+  margin: calc(var(--space-2) * -1);
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
@@ -372,8 +413,8 @@ button, a { -webkit-tap-highlight-color: transparent; }
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 10px;
+  gap: var(--space-12);
+  margin-bottom: var(--space-10);
 }
 
 .composer-context-label,
@@ -385,14 +426,14 @@ button, a { -webkit-tap-highlight-color: transparent; }
 }
 
 .composer-context-label {
-  gap: 9px;
-  color: #263238;
+  gap: var(--space-10);
+  color: var(--c-text);
 }
 
 .composer-context-label small {
   display: block;
-  color: #89938f;
-  font-size: 10px;
+  color: var(--c-text-secondary);
+  font-size: var(--text-xs);
   font-weight: 750;
   letter-spacing: 0.09em;
   line-height: 1.1;
@@ -401,8 +442,8 @@ button, a { -webkit-tap-highlight-color: transparent; }
 
 .composer-context-label strong {
   display: block;
-  margin-top: 3px;
-  font-size: 13px;
+  margin-top: var(--space-4);
+  font-size: var(--text-md);
   font-weight: 750;
 }
 
@@ -412,47 +453,41 @@ button, a { -webkit-tap-highlight-color: transparent; }
   justify-content: center;
   width: 28px;
   height: 28px;
-  border: 1px solid #cfe0db;
-  border-radius: 8px;
-  color: #2f7d74;
-  background: #edf4f2;
-  font-size: 13px;
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--radius-sm);
+  color: var(--c-accent);
+  background: var(--c-accent-subtle);
+  font-size: var(--text-md);
   font-weight: 800;
 }
 
 .repo-status {
-  gap: 7px;
-  border: 1px solid #dfe6e2;
-  border-radius: 999px;
-  padding: 5px 9px;
-  color: #79847f;
-  background: #f7f8f6;
-  font-size: 11px;
+  gap: var(--space-8);
+  border-radius: var(--radius-full);
+  font-size: var(--text-sm);
   font-weight: 700;
 }
 
 .repo-status-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: #adb7b2;
+  border-radius: var(--radius-full);
+  background: var(--c-border-strong);
 }
 
 .repo-status.ready {
-  border-color: #c9e1d5;
-  color: #347257;
-  background: #f1f8f4;
+  border-color: var(--c-border-strong);
+  color: var(--c-success);
+  background: var(--c-success-subtle);
 }
 
-.repo-status.ready .repo-status-dot { background: #3d8968; }
+.repo-status.ready .repo-status-dot { background: var(--c-success); }
 
 .repo-status.warning {
-  border-color: #ead5aa;
-  color: #86652d;
-  background: #fbf5e9;
+  border-color: var(--c-border-strong);
+  color: var(--c-warning);
+  background: var(--c-warning-subtle);
 }
 
-.repo-status.warning .repo-status-dot { background: #b8873d; }
+.repo-status.warning .repo-status-dot { background: var(--c-warning); }
 
 .repo-field {
   display: block;
@@ -464,125 +499,66 @@ button, a { -webkit-tap-highlight-color: transparent; }
 }
 
 .repo-hint {
-  margin: 6px 0 10px;
-  color: #9aa39f;
-  font-size: 11px;
-}
-
-.composer textarea {
-  min-height: 96px;
-  max-height: 220px;
-  overflow-y: auto;
-  padding: 8px 0;
+  margin: var(--space-6) 0 var(--space-10);
+  color: var(--c-text-muted);
+  font-size: var(--text-sm);
 }
 
 .quick-prompts {
   display: flex;
   flex-wrap: wrap;
-  gap: 7px;
-  margin: 2px 0 12px;
+  gap: var(--space-8);
+  margin: var(--space-2) 0 var(--space-12);
 }
 
 .quick-prompt {
-  border: 1px solid #e0e7e3;
-  border-radius: 999px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-full);
   cursor: pointer;
-  padding: 5px 10px;
-  color: #60706b;
-  background: #fafbf9;
-  font-size: 11px;
+  padding: var(--space-6) var(--space-10);
+  color: var(--c-text-secondary);
+  background: var(--c-surface);
+  font-size: var(--text-sm);
 }
 
-.quick-prompt:hover,
-.quick-prompt:focus-visible {
-  border-color: #b8d4cd;
-  color: #2f6d64;
-  background: #edf6f3;
-  outline: none;
+.quick-prompt:hover {
+  border-color: var(--c-border-strong);
+  color: var(--c-accent);
+  background: var(--c-bg-subtle);
 }
 
-.composer-footer {
-  align-items: flex-end;
-  gap: 12px;
+.quick-prompt:focus-visible {
+  border-color: var(--c-border-strong);
+  color: var(--c-accent);
+  background: var(--c-bg-subtle);
+  outline: 2px solid var(--c-accent); outline-offset: 2px;
 }
 
 .composer-meta {
   min-width: 0;
-  flex-wrap: wrap;
-  gap: 8px;
 }
 
 .meta-chip {
-  gap: 5px;
-  color: #55635f;
-  font-size: 11px;
-}
-
-.meta-label {
-  color: #9aa39f;
+  gap: var(--space-6);
+  font-size: var(--text-sm);
 }
 
 .keyboard-hint {
-  color: #9aa39f;
-  font-size: 11px;
-}
-
-.send-button,
-.stop-button {
-  min-width: 92px;
-  padding: 10px 15px;
-  font-weight: 750;
-}
-
-.send-button:not(:disabled) { background: #263238; }
-
-.send-button:not(:disabled):hover,
-.send-button:not(:disabled):focus-visible {
-  background: #245f59;
-  outline: none;
-}
-
-.send-button:disabled {
-  color: #a1aaa6;
-  background: #e1e5e3;
+  color: var(--c-text-muted);
+  font-size: var(--text-sm);
 }
 
 @media (max-width: 560px) {
-  .composer-context-label strong { font-size: 12px; }
+  .composer-context-label strong { font-size: var(--text-base); }
   .keyboard-hint { width: 100%; }
-  .composer-footer { align-items: stretch; flex-direction: column; }
-  .send-button, .stop-button { width: 100%; }
-}
-
-/* Codex-inspired neutral workspace and compact composer. */
-:root {
-  color: #2f2f2f;
-  background: #ffffff;
-  --border: #e7e7e7;
-  --muted: #6b6b6b;
-  --surface: #ffffff;
-  --surface-soft: #f7f7f8;
-  --workspace-chrome: #f7f7f8;
+  .composer-footer { flex-direction: column; }
 }
 
 body,
 .app-shell,
 .workspace,
 .message-list {
-  background: #ffffff;
-}
-
-.sidebar,
-.workspace-header {
-  background: var(--workspace-chrome);
-}
-
-.sidebar {
-  border-right-color: #e7e7e7;
-}
-
-.workspace-header {
-  border-bottom-color: #e7e7e7;
+  background: var(--c-bg);
 }
 
 .brand,
@@ -591,177 +567,92 @@ body,
 .markdown-body h1,
 .markdown-body h2,
 .markdown-body h3 {
-  color: #2f2f2f;
+  color: var(--c-text);
 }
 
 .thread-item.active,
-.thread-item:hover {
-  border-color: #e1e1e1;
-  background: #eeeeef;
-  color: #2f2f2f;
-}
-
-.new-button {
-  border-color: #e1e1e1;
-  color: #2f2f2f;
-  background: #ffffff;
-}
-
-.new-button:hover,
-.new-button:focus-visible {
-  border-color: #d0d0d0;
-  background: #eeeeef;
-}
-
-.sidebar-toggle:hover,
-.sidebar-toggle:focus-visible {
-  color: #2f2f2f;
-  background: #eeeeef;
+.thread-row:hover .thread-item {
+  border-color: var(--c-border);
+  color: var(--c-text);
 }
 
 .assistant-message-body {
-  border-left-color: #e1e1e1;
+  border-left-color: var(--c-border);
 }
 
 .user-bubble {
-  border-color: #e1e1e1;
-  color: #2f2f2f;
-  background: #f1f1f2;
+  border-color: var(--c-border);
+  color: var(--c-text);
+  background: var(--c-bg-subtle);
 }
 
 .user-avatar {
-  color: #ffffff;
-  background: #252525;
-}
-
-.message-expand-button {
-  color: #666666;
-}
-
-.message-expand-button:hover,
-.message-expand-button:focus-visible {
-  color: #2f2f2f;
+  color: var(--c-text-inverse);
+  background: var(--c-text);
 }
 
 .composer {
-  width: min(960px, calc(100% - 80px));
-  padding: 10px 16px;
-  border-color: #dedede;
-  border-radius: 14px;
-  background: #ffffff;
-  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
-}
-
-.composer textarea {
-  min-height: 60px;
-  max-height: 140px;
-  resize: none;
-  padding: 4px 0;
-  color: #2f2f2f;
-  line-height: 1.55;
-}
-
-.composer textarea::placeholder {
-  color: #a1a1a1;
+  background: var(--c-surface);
 }
 
 .composer-footer {
   min-height: 38px;
   align-items: center;
-  gap: 14px;
 }
 
 .composer-meta {
   flex: 0 0 auto;
   flex-wrap: nowrap;
-  gap: 10px;
 }
 
 .meta-chip {
-  color: #5f5f5f;
+  color: var(--c-text-secondary);
   white-space: nowrap;
 }
 
-.meta-label {
-  color: #999999;
-}
-
 .repo-control {
-  display: flex;
   flex: 1 1 360px;
-  align-items: center;
   justify-content: center;
-  min-width: 0;
-  gap: 8px;
 }
 
 .repo-control-label {
   flex: 0 0 auto;
-  color: #777777;
-  font-size: 12px;
   font-weight: 650;
 }
 
-.repo-provider-select {
-  flex: 0 0 auto;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  outline: 0;
-  padding: 6px 8px;
-  color: #3f3f3f;
-  background: #fafafa;
-  font-size: 12px;
-}
-
-.repo-provider-select:focus {
-  border-color: #b8b8b8;
-  background: #ffffff;
-}
-
+/*
+ * 只读的仓库展示。
+ *
+ * 它曾经是一个**可编辑的输入框**，后来改成只读展示，但外观没跟着改：
+ * 与右上角的「模型」选择器（.model-picker）是**同一个形态** —— 同样是
+ * 1px 边框 + radius-sm + --c-surface 底 + 30px 高。两个并排的胶囊，一个真能点、
+ * 一个点了没反应，用户会去点那个点不动的。
+ *
+ * 现在把边框与底色都去掉：**只读的事实不该长得像控件**。
+ * （同理，`.repo-control-input:focus-within`、`.repo-control-input input`、
+ * `.repo-control-input input::placeholder` 与 `.repo-provider-select` 这四条
+ * 都是那个可编辑版本留下的死代码，已一并删除。）
+ */
 .repo-control-input {
   display: flex;
   flex: 0 1 260px;
   align-items: center;
   min-width: 100px;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  background: #fafafa;
-  transition: border-color 0.15s ease, background 0.15s ease;
 }
 
-.repo-control-input:focus-within {
-  border-color: #b8b8b8;
-  background: #ffffff;
-}
-
-.repo-control-input input {
-  width: 100%;
-  min-width: 0;
-  border: 0;
-  outline: 0;
-  padding: 6px 8px;
-  color: #3f3f3f;
-  background: transparent;
-  font-size: 12px;
-}
-
-.repo-control-input input::placeholder {
-  color: #ababab;
-}
-.repo-control-fixed { display: flex; align-items: center; gap: 8px; padding: 0 10px; min-width: 0; max-width: 340px; }
-.repo-provider-label { flex: 0 0 auto; color: #52645f; font-size: 12px; }
-.repo-fixed-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #687873; font-size: 12px; }
-.project-dialog-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgb(19 31 34 / 38%); }
-.project-dialog { display: grid; gap: 14px; width: min(440px, 100%); padding: 24px; border: 1px solid #e0e8e4; border-radius: 16px; background: #fff; box-shadow: 0 18px 60px rgb(17 36 32 / 20%); }
-.project-dialog h2 { margin: 0; font-size: 20px; }
-.project-dialog p { margin: -8px 0 2px; color: #71807b; font-size: 13px; }
-.project-dialog label { display: grid; gap: 6px; color: #4d5b56; font-size: 13px; }
-.project-dialog input, .project-dialog select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #dce5e0; border-radius: 8px; background: #fff; color: #293a35; }
-.project-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
-.project-dialog-actions button { border: 1px solid #d9e2dd; border-radius: 8px; padding: 9px 14px; cursor: pointer; background: white; }
-.project-dialog-actions button[type="submit"] { background: #246b5d; color: #fff; border-color: #246b5d; }
+.repo-control-fixed { display: flex; align-items: center; gap: var(--space-8); padding: 0 var(--space-10); min-width: 0; max-width: 340px; }
+.repo-provider-label { flex: 0 0 auto; }
+.project-dialog-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: var(--space-20); background: var(--c-overlay); }
+.project-dialog { display: grid; gap: var(--space-14); width: min(440px, 100%); padding: var(--space-24); border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); box-shadow: var(--shadow-md); }
+.project-dialog h2 { margin: 0; font-size: var(--text-xl); }
+.project-dialog p { margin: calc(var(--space-8) * -1) 0 var(--space-2); color: var(--c-text-secondary); font-size: var(--text-md); }
+.project-dialog label { display: grid; gap: var(--space-6); color: var(--c-text-secondary); font-size: var(--text-md); }
+.project-dialog input, .project-dialog select { width: 100%; min-height: 40px; padding: var(--space-8) var(--space-10); border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-text); }
+.project-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-8); margin-top: var(--space-4); }
+.project-dialog-actions button { border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: var(--space-10) var(--space-14); cursor: pointer; background: white; }
+.project-dialog-actions button[type="submit"] { background: var(--c-accent-hover); color: var(--c-text-inverse); border-color: var(--c-accent); }
 .project-dialog-actions button:disabled { opacity: .6; cursor: wait; }
-.project-dialog-error { color: #b44f4b; font-size: 13px; }
+.project-dialog-error { color: var(--c-danger); font-size: var(--text-md); }
 
 .repo-status {
   display: inline-flex;
@@ -771,7 +662,6 @@ body,
   width: 18px;
   height: 20px;
   border: 0;
-  border-radius: 0;
   padding: 0;
   color: inherit;
   background: transparent;
@@ -782,28 +672,9 @@ body,
   height: 7px;
 }
 
-.send-button,
-.stop-button {
+/* 发送/停止按钮的尺寸与状态一律来自 UiButton；这里只保留它在底栏里的排布。 */
+.composer-action {
   flex: 0 0 auto;
-  min-width: 78px;
-  border-radius: 8px;
-  padding: 8px 13px;
-  font-size: 12px;
-}
-
-.send-button:not(:disabled) {
-  color: #ffffff;
-  background: #2f2f2f;
-}
-
-.send-button:not(:disabled):hover,
-.send-button:not(:disabled):focus-visible {
-  background: #171717;
-}
-
-.send-button:disabled {
-  color: #a3a3a3;
-  background: #e4e4e4;
 }
 
 @media (max-width: 720px) {
@@ -825,69 +696,58 @@ body,
     justify-content: flex-start;
   }
 
-  .send-button,
-  .stop-button {
+  .composer-action {
     order: 3;
   }
 }
 
 .proposal-card {
-  margin: 18px 0;
+  margin: var(--space-18) 0;
   overflow: hidden;
-  border: 1px solid #dce8e4;
-  border-radius: 15px;
-  background: linear-gradient(145deg, #fbfdfc, #f5f8f7);
-  box-shadow: 0 8px 28px rgba(30, 55, 48, 0.06);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-lg);
+  background: linear-gradient(145deg, var(--c-surface), var(--c-bg-subtle));
+  box-shadow: var(--shadow-sm);
 }
 
 .proposal-card-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 16px;
-  padding: 18px 20px 12px;
-  border-bottom: 1px solid #e7eeeb;
-}
-
-.proposal-eyebrow { color: #68877d; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
-.proposal-card-header h3 { margin: 4px 0 0; color: #263b34; font-size: 17px; }
-.proposal-status { flex: 0 0 auto; border-radius: 999px; padding: 5px 10px; color: #56786d; background: #eaf2ef; font-size: 11px; }
-.proposal-status-approved { color: #317353; background: #e4f3e9; }
-.proposal-status-rejected { color: #93635d; background: #f6eae8; }
-.proposal-status-superseded { color: #777; background: #eceeef; }
-.proposal-card-content { max-height: min(52vh, 540px); overflow: auto; padding: 14px 20px; color: #3c4843; font-size: 13px; }
-.proposal-actions { display: flex; flex-wrap: wrap; gap: 9px; padding: 13px 20px 17px; border-top: 1px solid #e7eeeb; }
-.proposal-button { border: 1px solid #d6e0dc; border-radius: 8px; padding: 8px 12px; color: #42564f; background: #fff; cursor: pointer; font: inherit; font-size: 12px; }
-.proposal-button:hover { border-color: #90b2a6; background: #f8fbf9; }
-.proposal-button-primary { border-color: #347b67; color: #fff; background: #347b67; }
-.proposal-button-primary:hover { border-color: #286451; background: #286451; }
-.proposal-button-muted { color: #7b6663; }
-.composer-interaction-hint { display: flex; align-items: center; justify-content: space-between; margin: 0 0 9px; border: 1px solid #d7e6e0; border-radius: 8px; padding: 7px 10px; color: #416b5d; background: #f1f7f4; font-size: 12px; }
-.composer-interaction-hint button { border: 0; color: inherit; background: transparent; cursor: pointer; }
-.composer-locked-hint { margin: 0 0 9px; border: 1px solid #eadbb4; border-radius: 8px; padding: 8px 10px; color: #725b2b; background: #fffaf0; font-size: 12px; }
-
-.intervention-card { margin: 18px 0; border: 1px solid #e7d8ad; border-radius: 13px; padding: 16px; background: #fffaf0; }
-.intervention-card-header { display: flex; align-items: center; gap: 10px; color: #66532b; }
-.intervention-icon { display: grid; flex: 0 0 auto; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #fff; background: #a1813a; font-weight: 700; }
-.intervention-card-header p { margin: 3px 0 0; color: #81734f; font-size: 12px; }
-.intervention-card h4 { margin: 14px 0 10px; color: #3f3a2e; font-size: 14px; }
-.intervention-options { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
-.intervention-options button { border: 1px solid #e4d7b6; border-radius: 999px; padding: 5px 10px; color: #685832; background: #fff; cursor: pointer; font-size: 12px; }
-.intervention-options button:disabled { cursor: default; }
-.intervention-reply { display: flex; align-items: flex-end; gap: 9px; }
-.intervention-reply textarea { flex: 1; min-width: 0; resize: vertical; border: 1px solid #ddd2b4; border-radius: 8px; padding: 9px 10px; color: #343434; background: #fff; font: inherit; font-size: 12px; }
-.intervention-reply button { flex: 0 0 auto; border: 0; border-radius: 8px; padding: 9px 12px; color: #fff; background: #75602f; cursor: pointer; font: inherit; font-size: 12px; }
-.intervention-reply button:disabled { cursor: not-allowed; opacity: .5; }
-.intervention-complete { margin: 12px 0 0; color: #53725f; font-size: 12px; }
-.intervention-card-resolved { border-color: #dce8e1; background: #f7faf8; }
-
-@media (max-width: 600px) {
-  .proposal-card-header { padding: 15px 14px 10px; }
-  .proposal-card-content { padding: 12px 14px; }
-  .proposal-actions { padding: 11px 14px 14px; }
-}
+  gap: var(--space-16);
+  padding: var(--space-18) var(--space-20) var(--space-12);
+  border-bottom: 1px solid var(--c-border);
+}
+
+.proposal-eyebrow { color: var(--c-text-secondary); font-size: var(--text-sm); font-weight: 700; letter-spacing: .06em; }
+.proposal-card-header h3 { margin: var(--space-4) 0 0; color: var(--c-text); font-size: var(--text-lg); }
+.proposal-status { flex: 0 0 auto; border-radius: var(--radius-full); padding: var(--space-6) var(--space-10); color: var(--c-text-secondary); background: var(--c-bg-subtle); font-size: var(--text-sm); }
+.proposal-status-approved { color: var(--c-success); background: var(--c-success-subtle); }
+.proposal-status-rejected { color: var(--c-danger); background: var(--c-danger-subtle); }
+.proposal-status-superseded { color: var(--c-text-secondary); background: var(--c-bg-subtle); }
+.proposal-card-content { max-height: min(52vh, 540px); overflow: auto; padding: var(--space-14) var(--space-20); color: var(--c-text); font-size: var(--text-md); }
+.proposal-actions { display: flex; flex-wrap: wrap; gap: var(--space-10); padding: var(--space-14) var(--space-20) var(--space-18); border-top: 1px solid var(--c-border); }
+.composer-interaction-hint { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--space-10); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: var(--space-8) var(--space-10); color: var(--c-text-secondary); background: var(--c-bg-subtle); font-size: var(--text-base); }
+.composer-locked-hint { margin: 0 0 var(--space-10); border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); padding: var(--space-8) var(--space-10); color: var(--c-warning); background: var(--c-warning-subtle); font-size: var(--text-base); }
+
+.intervention-card { margin: var(--space-18) 0; border: 1px solid var(--c-border-strong); border-radius: var(--radius-md); padding: var(--space-16); background: var(--c-warning-subtle); }
+.intervention-card-header { display: flex; align-items: center; gap: var(--space-10); color: var(--c-warning); }
+.intervention-icon { display: grid; flex: 0 0 auto; width: 28px; height: 28px; place-items: center; border-radius: var(--radius-full); color: var(--c-text-inverse); background: var(--c-warning); font-weight: 700; }
+.intervention-card-header p { margin: var(--space-4) 0 0; color: var(--c-warning); font-size: var(--text-base); }
+.intervention-card h4 { margin: var(--space-14) 0 var(--space-10); color: var(--c-text); font-size: var(--text-md); }
+.intervention-options { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-10); }
+/* 选项与提交按钮已换成 UiButton（secondary/sm 与 primary/md），输入框换成 UiTextarea。
+   原规则里的 :disabled 只改 cursor、外观完全不变 —— 参数传了但看不出来，属于假禁用。 */
+.intervention-reply { display: flex; align-items: flex-end; gap: var(--space-10); }
+.intervention-input { flex: 1; min-width: 0; }
+.intervention-complete { margin: var(--space-12) 0 0; color: var(--c-text-secondary); font-size: var(--text-base); }
+.intervention-card-resolved { border-color: var(--c-border); background: var(--c-surface); }
 
 @media (max-width: 560px) {
+  .proposal-card-header { padding: var(--space-16) var(--space-14) var(--space-10); }
+  .proposal-card-content { padding: var(--space-12) var(--space-14); }
+  .proposal-actions { padding: var(--space-12) var(--space-14) var(--space-14); }
+
   .composer-footer {
     align-items: stretch;
   }
@@ -896,8 +756,7 @@ body,
     flex-basis: 0;
   }
 
-  .send-button,
-  .stop-button {
+  .composer-action {
     width: 100%;
   }
 }
@@ -910,7 +769,7 @@ body,
   justify-content: center;
   width: 24px;
   height: 24px;
-  color: #4a4a4a;
+  color: var(--c-text);
 }
 
 .conversation-icon svg {
@@ -926,8 +785,8 @@ body,
 .workspace-header h1 {
   max-width: min(58vw, 760px);
   overflow: hidden;
-  color: #2f2f2f;
-  font-size: 16px;
+  color: var(--c-text);
+  font-size: var(--text-lg);
   font-weight: 650;
   letter-spacing: 0;
   text-overflow: ellipsis;
@@ -940,159 +799,81 @@ body,
   }
 }
 
-/* Collapsed sidebar: a clean icon rail without truncated session titles. */
-.sidebar.collapsed .sidebar-topbar {
-  gap: 4px;
-}
-
-.sidebar.collapsed .brand img {
-  width: 26px;
-  height: 26px;
-}
-
-.sidebar.collapsed .sidebar-toggle {
-  width: 22px;
-  height: 28px;
-  border: 1px solid #e1e1e1;
-  border-radius: 7px;
-  color: #5f6368;
-  background: #ffffff;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
-  font-size: 20px;
-}
-
-.sidebar.collapsed .sidebar-toggle:hover,
-.sidebar.collapsed .sidebar-toggle:focus-visible {
-  border-color: #cfcfcf;
-  color: #2f2f2f;
-  background: #eeeeef;
-}
-
-.sidebar.collapsed .new-button {
-  height: 42px;
-  margin-bottom: 12px;
-  border-color: #e1e1e1;
-  border-radius: 10px;
-  background: #ffffff;
-}
-
-.sidebar.collapsed .thread-list-inner {
-  gap: 7px;
-}
-
-.sidebar.collapsed .thread-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 42px;
-  border-color: transparent;
-  border-radius: 10px;
-  padding: 6px;
-}
-
-.sidebar.collapsed .thread-item.active {
-  border-color: #dedede;
-  background: #ffffff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-
-.sidebar.collapsed .thread-item:hover {
-  border-color: #e1e1e1;
-  background: #eeeeef;
-}
-
-.sidebar.collapsed .thread-item .status-dot {
-  position: absolute;
-  top: 7px;
-  right: 7px;
-  width: 7px;
-  height: 7px;
-  box-shadow: 0 0 0 2px #f7f7f8;
-}
-
-.sidebar.collapsed .thread-item.active .status-dot {
-  box-shadow: 0 0 0 2px #ffffff;
-}
-
-.collapsed-thread-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  color: #777777;
-}
-
-.collapsed-thread-icon svg {
-  width: 21px;
-  height: 21px;
-  fill: none;
-  stroke: currentColor;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 1.45;
-}
-
-.sidebar.collapsed .thread-item.active .collapsed-thread-icon,
-.sidebar.collapsed .thread-item:hover .collapsed-thread-icon {
-  color: #3f3f3f;
-}
-
-@media (max-width: 860px) {
-  .sidebar.collapsed .sidebar-toggle {
-    width: 26px;
-  }
-}
-
 /* Editable session title and explicit branch context. */
 .workspace-title-row {
   display: flex;
   align-items: center;
   min-width: 0;
-  gap: 8px;
+  gap: var(--space-8);
 }
 
 .workspace-title-row h1 {
   cursor: text;
+  flex: 0 1 auto;
+  min-width: 0;
 }
 
 .workspace-title-row h1:hover {
   text-decoration: underline;
-  text-decoration-color: #cfcfcf;
+  text-decoration-color: var(--c-text-muted);
   text-underline-offset: 4px;
 }
 
+/* 面包屑：`项目 / 会话标题`。
+   两级的分量必须不同 —— 第一级弱（--c-text-muted、550），第二级强（--c-text、650）。
+   两级一样重就不再是面包屑，只是两个句子拼在一起。
+   项目名不指向任何页面（这个应用还没有"项目页"这个路由），所以它是标签不是链接。 */
+.workspace-heading-body {
+  min-width: 0;
+}
+
+.crumb-root {
+  flex: 0 1 auto;
+  overflow: hidden;
+  color: var(--c-text-muted);
+  font-size: var(--text-md);
+  font-weight: 550;
+  letter-spacing: -.01em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crumb-sep {
+  flex: 0 0 auto;
+  color: var(--c-border-strong);
+  font-size: var(--text-md);
+}
+
 .workspace-title-input {
   width: min(58vw, 760px);
   min-width: 220px;
-  border: 1px solid #cfcfcf;
-  border-radius: 7px;
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--radius-sm);
   outline: 0;
-  padding: 5px 8px;
-  color: #2f2f2f;
-  background: #ffffff;
-  font-size: 16px;
+  padding: var(--space-6) var(--space-8);
+  color: var(--c-text);
+  background: var(--c-surface);
+  font-size: var(--text-lg);
   font-weight: 650;
   line-height: 1.2;
-  box-shadow: 0 0 0 3px rgba(47, 47, 47, 0.07);
+  box-shadow: 0 0 0 3px var(--c-border);
 }
 
 .workspace-title-input:focus {
-  border-color: #9e9e9e;
+  border-color: var(--c-border-strong);
+  box-shadow: 0 0 0 3px var(--c-accent-subtle);
 }
 
 .title-save-state,
 .title-save-error {
   flex: 0 0 auto;
-  font-size: 11px;
+  font-size: var(--text-sm);
   white-space: nowrap;
 }
 
-.title-save-state { color: #8a8a8a; }
+.title-save-state { color: var(--c-text-secondary); }
 
-.title-save-error { color: #a55353; }
+.title-save-error { color: var(--c-danger); }
 
 .branch-label {
   white-space: nowrap;
@@ -1106,208 +887,194 @@ body,
 }
 
 @media (hover: none) {
-  .message-actions {
+  /* 触屏没有 hover 可用：靠悬停才浮出的东西必须常驻，并且要恢复可点。
+     原来只写了 visibility: visible，而 .message-actions 现在用 pointer-events
+     控制可点性，漏掉它会让这些按钮看得见却点不动。 */
+  .message-actions,
+  .thread-delete {
     opacity: 1;
-    visibility: visible;
+    pointer-events: auto;
   }
 }
 
-/* Refined workspace navigation and conversation composer. */
-:root {
-  --sidebar-open: 292px;
-  --sidebar-closed: 76px;
-  --ink-strong: #202927;
-  --ink-muted: #7b8582;
-  --line-soft: #e9eeeb;
-  --surface-soft: #f6f8f7;
-  --accent-strong: #1f7667;
-}
-
 .sidebar {
   gap: 0;
-  padding: 18px 12px 12px;
-  border-right-color: #e9edeb;
-  background: #f8f9f8;
-}
-
-.sidebar-topbar { min-height: 42px; margin: 0 3px 14px; }
-.brand { gap: 10px; min-width: 0; }
-.brand img { width: 34px; height: 34px; border-radius: 10px; }
-.brand-name { color: #26322f; font-size: 15px; font-weight: 800; letter-spacing: .16em; }
-.sidebar-toggle { width: 30px; height: 30px; border: 1px solid transparent; color: #7c8884; }
-.sidebar-toggle:hover { border-color: #e2e8e5; background: #fff; }
-
-.sidebar-create-actions { display: grid; gap: 7px; margin: 0 2px 16px; }
-.new-chat-button,
-.new-project-button {
-  display: flex;
-  min-height: 40px;
-  align-items: center;
-  gap: 10px;
-  border-radius: 10px;
-  padding: 0 11px;
-  font-size: 13px;
-  font-weight: 650;
-  text-align: left;
-  cursor: pointer;
-}
-.new-chat-button { border: 1px solid #e6ebe8; color: #35413d; background: #fff; }
-.new-chat-button:hover { border-color: #cbd8d2; background: #fbfdfc; }
-.new-chat-button > span:first-child { color: var(--accent-strong); font-size: 18px; }
-.new-chat-button kbd { margin-left: auto; border: 1px solid #e8edeb; border-radius: 5px; padding: 2px 5px; color: #9aa39f; font: 10px inherit; }
-.new-project-button { border: 1px solid transparent; color: #fff; background: #273b36; }
-.new-project-button:hover { background: #1c2f2a; }
-.new-project-button > span:first-child { font-size: 19px; font-weight: 400; }
-.new-chat-button:disabled, .new-project-button:disabled { opacity: .55; cursor: not-allowed; }
-
-.thread-list { gap: 16px; padding: 0 1px 12px; }
-.sidebar-list-section { gap: 4px; }
-.sidebar-section-label { display: flex; align-items: center; justify-content: space-between; margin: 2px 7px 5px; color: #8b9691; font-size: 10px; font-weight: 750; letter-spacing: .11em; }
-.section-count { display: inline-grid; min-width: 20px; height: 18px; place-items: center; border-radius: 6px; color: #8d9792; background: #edf1ef; font-size: 10px; letter-spacing: 0; }
-.project-list-section { gap: 7px; }
-.project-group { position: relative; border: 1px solid transparent; border-radius: 11px; padding: 3px; transition: border-color .16s ease, background .16s ease; }
-.project-group:hover { border-color: #e8edeb; background: rgb(255 255 255 / 70%); }
-.project-heading { position: relative; display: flex; min-width: 0; align-items: center; gap: 2px; min-height: 42px; }
-.project-disclosure, .project-add-thread, .project-menu-trigger { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; border: 0; color: #8d9893; background: transparent; cursor: pointer; }
-.project-disclosure { width: 25px; height: 30px; border-radius: 7px; }
-.project-disclosure:hover, .project-add-thread:hover, .project-menu-trigger:hover { color: #40524b; background: #edf2ef; }
-.project-disclosure svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
+  padding: var(--space-18) var(--space-12) var(--space-12);
+  border-right-color: var(--c-border);
+  background: var(--c-bg);
+}
+
+.sidebar-topbar { min-height: 42px; margin: 0 var(--space-4) var(--space-14); }
+.brand { gap: var(--space-10); min-width: 0; }
+.brand img { width: 34px; height: 34px; border-radius: var(--radius-md); }
+.brand-name { color: var(--c-text); font-size: var(--text-lg); font-weight: 800; letter-spacing: .16em; }
+/* 原语只给盒子，图标本身多大由页面决定 */
+.sidebar-toggle svg,
+.project-disclosure svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+.sidebar-toggle svg { width: 18px; height: 18px; }
+
+.sidebar-create-actions { display: grid; gap: var(--space-8); margin: 0 var(--space-2) var(--space-16); }
+/* 已换成 UiButton（secondary / primary），外观交给原语；
+   这里只剩原语不该管的内容细节：图标色号与右侧快捷键提示。 */
+.new-chat-button > span:first-child { color: var(--c-accent); font-size: var(--text-xl); }
+.new-chat-button kbd { margin-left: auto; border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-6); color: var(--c-text-muted); font-size: var(--text-xs); }
+.new-project-button > span:first-child { font-size: var(--text-xl); font-weight: 400; }
+
+.thread-list { gap: var(--space-16); padding: 0 var(--space-2) var(--space-12); }
+.sidebar-list-section { gap: var(--space-4); }
+.sidebar-section-label { display: flex; align-items: center; justify-content: space-between; margin: var(--space-2) var(--space-8) var(--space-6); color: var(--c-text-secondary); font-size: var(--text-xs); font-weight: 750; letter-spacing: .11em; }
+.section-count { display: inline-grid; min-width: 20px; height: 18px; place-items: center; border-radius: var(--radius-sm); color: var(--c-text-secondary); background: var(--c-bg-subtle); font-size: var(--text-xs); letter-spacing: 0; }
+.project-list-section { gap: var(--space-8); }
+.project-group { position: relative; border: 1px solid transparent; border-radius: var(--radius-md); padding: var(--space-4); transition: border-color .16s ease, background .16s ease; }
+.project-group:hover { border-color: var(--c-border); background: var(--c-surface); }
+.project-heading { position: relative; display: flex; min-width: 0; align-items: center; gap: var(--space-2); min-height: 42px; }
+/* 已换成 UiButton（ghost / sm / icon）；只保留 flex: 0 0 auto，
+   否则项目行里这三个方按钮会被标题挤瘦。 */
+.project-disclosure,
+.project-add-thread,
+.project-menu-trigger { flex: 0 0 auto; }
+.project-disclosure svg { width: 15px; height: 15px; transition: transform .16s ease; }
 .project-is-collapsed .project-disclosure svg { transform: rotate(-90deg); }
-.project-heading-main { display: grid; min-width: 0; flex: 1; gap: 2px; padding: 2px 4px; }
-.project-heading-main strong { overflow: hidden; color: #33403b; font-size: 13px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
-.project-heading-main small { display: flex; min-width: 0; align-items: center; gap: 5px; overflow: hidden; color: #8b9691; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
-.provider-mark { display: inline-grid; flex: 0 0 auto; min-width: 18px; height: 16px; place-items: center; border: 1px solid #e3e9e6; border-radius: 5px; color: #67756f; background: #fff; font-size: 8px; font-weight: 800; }
-.provider-mark.gitee { color: #bc5657; }
-.project-rename-input { width: 100%; min-width: 0; border: 1px solid #99b9ad; border-radius: 6px; outline: 0; padding: 4px 6px; color: #293a34; background: #fff; font: inherit; font-size: 12px; box-shadow: 0 0 0 3px rgb(44 126 103 / 9%); }
-.project-add-thread, .project-menu-trigger { width: 25px; height: 27px; border-radius: 7px; font-size: 16px; }
-.project-menu-trigger { width: 23px; font-size: 14px; }
-.project-add-thread:disabled { opacity: .4; cursor: not-allowed; }
-.project-context-menu { position: absolute; z-index: 10; top: 35px; right: 2px; display: grid; width: 172px; gap: 3px; border: 1px solid #e7ece9; border-radius: 10px; padding: 5px; background: #fff; box-shadow: 0 12px 28px rgb(31 45 39 / 13%); }
-.project-context-menu button { display: flex; align-items: center; gap: 9px; min-height: 34px; border: 0; border-radius: 7px; padding: 0 9px; color: #45524d; background: transparent; font-size: 12px; text-align: left; cursor: pointer; }
-.project-context-menu button:hover { background: #f3f6f4; }
-.project-context-menu .context-danger { color: #a54848; }
-.project-context-menu .context-danger:hover { background: #fff3f2; }
-.project-conversations { display: grid; gap: 2px; padding: 1px 0 2px 23px; }
-.project-thread-item, .standalone-thread-item { min-height: 34px; border-radius: 8px; padding: 0 7px; }
-.thread-item { gap: 8px; }
-.thread-item:hover { background: #eef2f0; }
-.thread-item.active { background: #e9efec; box-shadow: inset 2px 0 #4b9a84; }
-.thread-content { display: grid; min-width: 0; gap: 1px; }
-.thread-title { overflow: hidden; color: #59655f; font-size: 12px; font-weight: 520; text-overflow: ellipsis; white-space: nowrap; }
-.thread-item.active .thread-title { color: #2c4039; font-weight: 650; }
-.thread-content small { overflow: hidden; color: #98a19d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
+.project-heading-main { display: grid; min-width: 0; flex: 1; gap: var(--space-2); padding: var(--space-2) var(--space-4); }
+.project-heading-main strong { overflow: hidden; color: var(--c-text); font-size: var(--text-md); font-weight: 720; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
+.project-heading-main small { display: flex; min-width: 0; align-items: center; gap: var(--space-6); overflow: hidden; color: var(--c-text-secondary); font-size: var(--text-xs); white-space: nowrap; }
+/* text-overflow 对 flex 容器不生效 —— 它只能作用在块级容器及其行内内容上。
+   所以省略号必须落在真正包着那段文字的**子元素**上（`.repo-name`），
+   写在 <small> 上会被静默忽略，表现为「仓库名被硬生生切断、没有任何提示」。 */
+.project-heading-main small .repo-name { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
+.provider-mark { display: inline-grid; flex: 0 0 auto; min-width: 18px; height: 16px; place-items: center; border: 1px solid var(--c-border); border-radius: var(--radius-sm); color: var(--c-text-secondary); background: var(--c-surface); font-size: var(--text-xs); font-weight: 800; }
+.provider-mark.gitee { color: var(--c-danger); }
+.project-rename-input { width: 100%; min-width: 0; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); outline: 0; padding: var(--space-4) var(--space-6); color: var(--c-text); background: var(--c-surface); font: inherit; font-size: var(--text-base); box-shadow: 0 0 0 3px var(--c-accent-subtle); }
+.project-context-menu { position: absolute; z-index: 10; top: 35px; right: 2px; display: grid; width: 172px; gap: var(--space-4); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--space-6); background: var(--c-surface); box-shadow: var(--shadow-md); }
+.project-context-menu button { display: flex; align-items: center; gap: var(--space-10); min-height: 34px; border: 0; border-radius: var(--radius-sm); padding: 0 var(--space-10); color: var(--c-text); background: transparent; font-size: var(--text-base); text-align: left; cursor: pointer; }
+.project-context-menu button:hover { background: var(--c-bg-subtle); }
+.project-context-menu .context-danger { color: var(--c-danger); }
+.project-context-menu .context-danger:hover { background: var(--c-danger-subtle); }
+.project-conversations { display: grid; gap: var(--space-2); padding: var(--space-2) 0 var(--space-2) var(--space-24); }
+.project-thread-item, .standalone-thread-item { min-height: 34px; border-radius: var(--radius-sm); padding: 0 var(--space-8); }
+.thread-item { gap: var(--space-8); }
+.thread-row:hover .thread-item { background: var(--c-bg-subtle); }
+.thread-item.active { background: var(--c-accent-subtle); box-shadow: inset 2px 0 var(--c-accent); }
+.thread-content { display: grid; min-width: 0; gap: var(--space-2); }
+.thread-title { overflow: hidden; color: var(--c-text-secondary); font-size: var(--text-base); font-weight: 520; text-overflow: ellipsis; white-space: nowrap; }
+.thread-item.active .thread-title { color: var(--c-text); font-weight: 650; }
+.thread-content small { overflow: hidden; color: var(--c-text-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
 .status-dot { width: 7px; height: 7px; box-shadow: none; }
-.thread-delete { width: 20px; height: 20px; border-radius: 5px; color: #a0aaa5; font-size: 16px; opacity: 0; }
-.thread-item:hover .thread-delete, .thread-item:focus-within .thread-delete { opacity: 1; }
-.thread-delete:hover { color: #a54949; background: #fff; }
-.show-more-button { justify-self: start; margin: 2px 0 1px 12px; border: 0; border-radius: 6px; padding: 5px 7px; color: #718079; background: transparent; font-size: 10px; cursor: pointer; }
-.show-more-button:hover { color: #2d7667; background: #eff5f2; }
-.project-no-conversations { padding: 5px 7px; color: #a0aaa5; font-size: 10px; }
-.project-no-conversations button { margin-left: 5px; border: 0; color: #397967; background: transparent; font: inherit; cursor: pointer; }
-.project-empty { display: grid; justify-items: start; gap: 6px; margin: 10px 4px; border: 1px dashed #dce5e0; border-radius: 12px; padding: 13px; color: #68766f; background: #fbfcfb; }
-.project-empty .empty-folder { color: #8caaa0; font-size: 20px; }
-.project-empty strong { color: #46544e; font-size: 11px; }
-.project-empty small { color: #89958f; font-size: 10px; line-height: 1.55; }
-.project-empty button { margin-top: 3px; border: 0; color: #277663; background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
-.sidebar-bottom { min-height: 30px; margin: 7px 4px 0; border-top: 1px solid #e9eeeb; padding: 10px 3px 2px; color: #98a29d; font-size: 10px; }
-.sidebar-bottom-dot { width: 6px; height: 6px; border-radius: 50%; background: #57a487; box-shadow: 0 0 0 3px #e4f1eb; }
-.sidebar-bottom-version { margin-left: auto; color: #adb6b1; font-size: 9px; }
-
-.sidebar.collapsed { align-items: center; padding: 14px 9px; }
-.sidebar.collapsed .sidebar-topbar { width: 100%; flex-direction: column; gap: 10px; margin: 0 0 11px; }
+/* 已换成 UiButton（ghost / sm）；字号从 10px 提到 12px —— 10px 已经低于可读下限 */
+.show-more-button { justify-self: start; margin: var(--space-2) 0 var(--space-2) var(--space-12); }
+.project-no-conversations { padding: var(--space-6) var(--space-8); color: var(--c-text-muted); font-size: var(--text-xs); }
+.project-no-conversations button { margin-left: var(--space-6); }
+.project-empty { display: grid; justify-items: start; gap: var(--space-6); margin: var(--space-10) var(--space-4); border: 1px dashed var(--c-border); border-radius: var(--radius-md); padding: var(--space-14); color: var(--c-text-secondary); background: var(--c-surface); }
+.project-empty .empty-folder { color: var(--c-text-muted); font-size: var(--text-xl); }
+.project-empty strong { color: var(--c-text); font-size: var(--text-sm); }
+.project-empty small { color: var(--c-text-secondary); font-size: var(--text-xs); line-height: 1.55; }
+.project-empty button { margin-top: var(--space-4); }
+/* 与上方 `.project-empty` 刻意长得不一样：那不是「空」，那是「没读到」。
+   虚线框读作「这里以后会有东西」，实线 + 警告色读作「这里出问题了」。 */
+.project-error { display: grid; justify-items: start; gap: var(--space-6); margin: var(--space-10) var(--space-4); border: 1px solid var(--c-border-strong); border-radius: var(--radius-md); padding: var(--space-14); color: var(--c-text-secondary); background: var(--c-danger-subtle); }
+.project-error .error-mark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--radius-full); color: var(--c-text-inverse); background: var(--c-danger); font-size: var(--text-xs); font-weight: 800; }
+.project-error strong { color: var(--c-text); font-size: var(--text-sm); }
+.project-error small { color: var(--c-text-secondary); font-size: var(--text-xs); line-height: 1.55; overflow-wrap: anywhere; }
+.project-error-hint { margin: 0; color: var(--c-text-muted); font-size: var(--text-xs); line-height: 1.55; }
+.project-error button { margin-top: var(--space-4); }
+/* 第三种状态：「还在读」。与空态用同一套虚线框语汇（它确实还空着），
+   但内容换成 spinner + 文案，避免首屏先闪一下「创建第一个项目」。 */
+.project-loading { display: grid; justify-items: center; gap: var(--space-10); margin: var(--space-10) var(--space-4); border: 1px dashed var(--c-border); border-radius: var(--radius-md); padding: var(--space-20) var(--space-14); color: var(--c-text-muted); background: var(--c-surface); }
+.project-loading small { font-size: var(--text-xs); }
+.sidebar-bottom { min-height: 30px; margin: var(--space-8) var(--space-4) 0; border-top: 1px solid var(--c-border); padding: var(--space-10) var(--space-4) var(--space-2); color: var(--c-text-muted); font-size: var(--text-xs); }
+.sidebar-bottom-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--c-success); box-shadow: 0 0 0 3px var(--c-accent-subtle); }
+.sidebar-bottom-version { margin-left: auto; color: var(--c-text-muted); font-size: var(--text-xs); }
+
+.sidebar.collapsed { align-items: center; padding: var(--space-14) var(--space-10); }
+.sidebar.collapsed .sidebar-topbar { width: 100%; flex-direction: column; gap: var(--space-10); margin: 0 0 var(--space-12); }
 .sidebar.collapsed .brand img { width: 36px; height: 36px; }
-.sidebar.collapsed .sidebar-toggle { width: 32px; height: 30px; }
-.collapsed-create-actions { width: 100%; justify-items: center; gap: 5px; margin: 0 0 10px; }
-.rail-action { width: 39px; height: 36px; border: 1px solid transparent; border-radius: 10px; color: #596761; background: transparent; font-size: 17px; cursor: pointer; }
-.rail-action:hover { border-color: #e5ebe8; background: #fff; }
-.collapsed-session-rail { display: flex; width: 100%; flex: 1; flex-direction: column; align-items: center; gap: 7px; overflow: auto; padding: 8px 0; }
-.rail-session { position: relative; display: grid; flex: 0 0 auto; width: 40px; height: 36px; place-items: center; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; }
-.rail-session:hover, .rail-session:focus-visible { border-color: #e3e9e6; background: #fff; outline: none; }
-.rail-session.active { border-color: #cfdfd8; background: #eaf1ed; }
-.rail-session-mark { width: 17px; height: 17px; border: 1.5px solid #a6b0ab; border-radius: 5px; background: #fff; }
-.rail-session.active .rail-session-mark { border-color: #4d9380; box-shadow: inset 0 0 0 4px #fff; background: #4d9380; }
-.rail-session::after { position: absolute; z-index: 15; top: 50%; left: calc(100% + 9px); width: max-content; max-width: 270px; transform: translateY(-50%) translateX(-3px); border: 1px solid #e4e9e6; border-radius: 9px; padding: 9px 11px; color: #36433e; background: #fff; box-shadow: 0 8px 25px rgb(27 40 34 / 13%); content: attr(data-tooltip); font-size: 11px; line-height: 1.5; white-space: pre-line; opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; }
+.collapsed-create-actions { width: 100%; justify-items: center; gap: var(--space-6); margin: 0 0 var(--space-10); }
+/* 收起态轨道里的两类条目共用一套盒子：原先 39px 与 40px 只差 1px，
+   是典型的同类控件漂移。 */
+.rail-action,
+.rail-session { position: relative; display: grid; flex: 0 0 auto; width: 40px; height: 36px; place-items: center; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--c-text-secondary); background: transparent; font-size: var(--text-lg); cursor: pointer; }
+
+.rail-action:hover,
+.rail-session:hover { border-color: var(--c-border); background: var(--c-surface); outline: none; }
+
+.rail-action:focus-visible,
+.rail-session:focus-visible { border-color: var(--c-border); background: var(--c-surface); outline: 2px solid var(--c-accent); outline-offset: 2px; }
+
+.collapsed-session-rail { display: flex; width: 100%; flex: 1; flex-direction: column; align-items: center; gap: var(--space-8); overflow: auto; padding: var(--space-8) 0; }
+.rail-session.active { border-color: var(--c-border-strong); background: var(--c-accent-subtle); }
+.rail-session-mark { width: 17px; height: 17px; border: 1.5px solid var(--c-border-strong); border-radius: var(--radius-sm); background: var(--c-surface); }
+.rail-session.active .rail-session-mark { border-color: var(--c-accent); box-shadow: inset 0 0 0 4px var(--c-surface); background: var(--c-accent); }
+.rail-session::after { position: absolute; z-index: 15; top: 50%; left: calc(100% + 9px); width: max-content; max-width: 270px; transform: translateY(-50%) translateX(-3px); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--space-10) var(--space-12); color: var(--c-text); background: var(--c-surface); box-shadow: var(--shadow-sm); content: attr(data-tooltip); font-size: var(--text-sm); line-height: 1.5; white-space: pre-line; opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; }
 .rail-session:hover::after, .rail-session:focus-visible::after { transform: translateY(-50%) translateX(0); opacity: 1; }
-.rail-empty { display: grid; width: 36px; height: 36px; place-items: center; color: #abb5b0; }
+.rail-empty { display: grid; width: 36px; height: 36px; place-items: center; color: var(--c-text-muted); }
 
-.workspace { background: #fff; }
-.workspace-header { border-bottom-color: #edf0ee; background: rgb(255 255 255 / 95%); }
-.workspace-heading h1 { color: #27332e; font-size: 14px; letter-spacing: -.01em; }
-.workspace-heading p { color: #8a9590; font-size: 11px; }
+.workspace { background: var(--c-bg); }
+.workspace-header { border-bottom-color: var(--c-border); background: var(--c-bg); }
+.workspace-heading h1 { color: var(--c-text); font-size: var(--text-lg); letter-spacing: -.01em; }
+.workspace-heading p { color: var(--c-text-secondary); font-size: var(--text-sm); }
 .empty-state { max-width: 680px; margin-top: 0; }
-.empty-state h2 { color: #202b27; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.045em; }
-.empty-state p:last-child { max-width: 510px; margin: 0 auto; color: #838e89; line-height: 1.8; }
-.empty-state .hero-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 15px; border: 1px solid #e9efec; border-radius: 999px; padding: 6px 10px; color: #638176; background: #fafcfb; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
-.empty-state .hero-kicker::before { width: 6px; height: 6px; border-radius: 50%; background: #54a087; content: ''; box-shadow: 0 0 0 3px #e6f2ec; }
-
-.composer { width: min(900px, calc(100% - 72px)); border-color: #e3e9e6; border-radius: 17px; padding: 15px 17px 12px; box-shadow: 0 12px 35px rgb(26 44 35 / 7%), 0 2px 6px rgb(26 44 35 / 3%); }
-.composer:focus-within { border-color: #c8d9d1; box-shadow: 0 12px 35px rgb(26 44 35 / 8%), 0 0 0 3px rgb(54 126 101 / 6%); }
-.composer textarea { min-height: 70px; color: #293631; font-size: 14px; }
-.composer textarea::placeholder { color: #a2aba7; }
-.composer-footer { gap: 10px; padding-top: 10px; }
-.composer-meta { gap: 10px; }
-.model-picker { display: inline-flex; height: 30px; align-items: center; gap: 7px; border: 1px solid #e8eeeb; border-radius: 8px; padding: 0 8px; color: #51645b; background: #fbfcfb; }
-.model-picker:focus-within { border-color: #bfd4ca; }
-.model-picker-orbit { color: #52927e; font-size: 13px; }
-.model-picker select { max-width: 145px; border: 0; outline: 0; color: #52625b; background: transparent; font-size: 11px; cursor: pointer; }
-.model-picker-chevron { color: #94a19a; font-size: 12px; pointer-events: none; }
-.reasoning-meta { color: #738079; font-size: 10px; }
-.meta-label { margin-right: 5px; color: #a1aaa6; }
-.repo-control { display: inline-flex; min-width: 0; align-items: center; gap: 8px; }
-.repo-control-label { color: #909a95; font-size: 10px; }
-.repo-control-input { max-width: min(320px, 28vw); min-height: 30px; border-color: #e8eeeb; border-radius: 8px; background: #fbfcfb; }
-.repo-provider-label { color: #718078; font-size: 10px; }
-.repo-fixed-name { overflow: hidden; color: #46574f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
-.composer-chat-context { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: #728079; font-size: 10px; }
-.chat-context-dot { width: 6px; height: 6px; border-radius: 50%; background: #69a18b; }
-.send-button { min-width: 84px; height: 34px; border-radius: 9px; background: #286f5f; font-size: 11px; }
-.send-button:hover:not(:disabled) { background: #205d50; }
-.stop-button { min-height: 34px; border-radius: 9px; font-size: 11px; }
-
-.dialog-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: rgb(21 32 28 / 42%); backdrop-filter: blur(4px); }
-.surface-dialog { width: min(480px, 100%); border: 1px solid #e5ebe8; border-radius: 18px; padding: 25px; background: #fff; box-shadow: 0 28px 80px rgb(18 36 29 / 24%); }
-.project-dialog-v2 { display: grid; gap: 9px; }
-.dialog-icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #e1ece6; border-radius: 11px; color: #347967; background: #f0f7f3; font-size: 16px; }
-.dialog-heading { display: grid; gap: 5px; margin-bottom: 4px; }
-.dialog-heading .dialog-kicker { margin: 0; color: #678477; }
-.dialog-heading h2 { margin: 0; color: #283631; font-size: 20px; letter-spacing: -.025em; }
-.dialog-heading > p:last-child { margin: 0; color: #78857e; font-size: 11px; line-height: 1.65; }
-.project-dialog-v2 .field-label { margin: 3px 0 -3px; }
-.project-dialog-v2 .dialog-input { height: 40px; }
-.dialog-hint { margin: -3px 0 1px; color: #88948e; font-size: 10px; }
-.bound-repository { display: flex; align-items: center; gap: 10px; border: 1px solid #e7ece9; border-radius: 10px; padding: 10px; background: #fafcfb; }
-.bound-repository-mark { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: #57665e; background: #edf2ef; font-size: 9px; font-weight: 800; }
-.bound-repository > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
-.bound-repository strong { color: #526159; font-size: 10px; }
-.bound-repository small { overflow: hidden; color: #8b9690; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
-.bound-repository .lock-mark { margin-left: auto; color: #a0aaa5; }
-.button-primary { border-color: #286f5f !important; color: #fff; background: #286f5f; }
-.button-primary:hover:not(:disabled) { background: #205d50; }
-.delete-dialog { display: grid; gap: 12px; }
-.danger-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: #a34f4c; background: #fff0ee; font-weight: 800; }
-.dialog-kicker { margin: 0; color: #a14e4b; font-size: 10px; font-weight: 750; letter-spacing: .08em; }
-.delete-dialog h2 { margin: 0; color: #28332f; font-size: 20px; letter-spacing: -.02em; }
-.delete-description { margin: 0; color: #738079; font-size: 12px; line-height: 1.8; }
-.delete-description strong { color: #4a5a52; font-weight: 700; }
-.field-label { margin: 3px 0 -6px; color: #53615a; font-size: 11px; font-weight: 650; }
-.dialog-input { width: 100%; height: 40px; border: 1px solid #dfe7e2; border-radius: 9px; outline: 0; padding: 0 11px; color: #33423a; background: #fbfcfb; font-size: 12px; }
-.dialog-input:focus { border-color: #c28d89; box-shadow: 0 0 0 3px rgb(180 83 79 / 8%); }
-.dialog-error { margin: 0; color: #a24a48; font-size: 11px; }
-.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
-.dialog-actions button { min-height: 36px; border: 1px solid #e1e8e4; border-radius: 8px; padding: 0 11px; font-size: 11px; font-weight: 650; cursor: pointer; }
-.button-secondary { color: #58665f; background: #fff; }
-.button-secondary:hover { background: #f6f8f7; }
-.button-danger { border-color: #a64f4c !important; color: #fff; background: #a64f4c; }
-.button-danger:hover:not(:disabled) { background: #8f403e; }
-.button-danger:disabled, .button-secondary:disabled { opacity: .48; cursor: not-allowed; }
-
-.app-shell.sidebar-collapsed .composer { width: min(900px, calc(100% - 76px)); }
+.empty-state h2 { color: var(--c-text); font-size: var(--text-2xl); letter-spacing: -.045em; }
+.empty-state p:last-child, .empty-copy { max-width: 510px; margin: 0 auto; color: var(--c-text-secondary); line-height: 1.8; }
+
+.empty-state .hero-kicker { display: inline-flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-16); border: 1px solid var(--c-border); border-radius: var(--radius-full); padding: var(--space-6) var(--space-10); color: var(--c-text-secondary); background: var(--c-surface); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; }
+.empty-state .hero-kicker::before { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--c-success); content: ''; box-shadow: 0 0 0 3px var(--c-accent-subtle); }
+
+.composer { width: min(var(--layout-content-max), calc(100% - 96px)); border-color: var(--c-border); border-radius: var(--radius-lg); padding: var(--space-16) var(--space-18) var(--space-12); box-shadow: var(--shadow-md); }
+.composer:focus-within { border-color: var(--c-border-strong); box-shadow: var(--shadow-md), 0 0 0 3px var(--c-accent-subtle); }
+.composer-footer { gap: var(--space-10); padding-top: var(--space-10); }
+.composer-meta { gap: var(--space-10); }
+.model-picker { display: inline-flex; height: 30px; align-items: center; gap: var(--space-8); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 0 var(--space-8); color: var(--c-text-secondary); background: var(--c-surface); }
+.model-picker:focus-within { border-color: var(--c-border-strong); box-shadow: 0 0 0 3px var(--c-accent-subtle); }
+.model-picker-orbit { color: var(--c-text-muted); font-size: var(--text-md); }
+/* select 的外观已交给 UiSelect（bare + size="sm"）；这里只剩这一个实例的宽度上限 */
+.model-picker select { max-width: 145px; }
+.model-picker-chevron { color: var(--c-text-muted); font-size: var(--text-base); pointer-events: none; }
+.reasoning-meta { color: var(--c-text-secondary); font-size: var(--text-xs); }
+.meta-label { margin-right: var(--space-6); color: var(--c-text-muted); }
+.repo-control { display: inline-flex; min-width: 0; align-items: center; gap: var(--space-8); }
+.repo-control-label { color: var(--c-text-secondary); font-size: var(--text-xs); }
+/* 只读展示：没有边框、没有底色 —— 见上面 .repo-control-input 的注释 */
+.repo-control-input { max-width: min(320px, 28vw); min-height: 30px; }
+.repo-provider-label { color: var(--c-text-muted); font-size: var(--text-xs); }
+/* min-width: 0 不是可有可无的：flex 子项的 min-width 默认是 auto，
+   即「不得小于内容宽度」，于是父级的 max-width 会被内容顶破、
+   overflow: hidden + text-overflow: ellipsis 永远不会触发。 */
+.repo-fixed-name { overflow: hidden; min-width: 0; color: var(--c-text-secondary); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
+.composer-chat-context { display: inline-flex; align-items: center; gap: var(--space-6); margin-left: auto; color: var(--c-text-secondary); font-size: var(--text-xs); }
+.chat-context-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--c-success); }
+.dialog-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--space-20); background: var(--c-overlay); backdrop-filter: blur(4px); }
+.surface-dialog { width: min(480px, 100%); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--space-24); background: var(--c-surface); box-shadow: var(--shadow-md); }
+.project-dialog-v2 { display: grid; gap: var(--space-10); }
+.dialog-icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--c-border); border-radius: var(--radius-md); color: var(--c-accent); background: var(--c-accent-subtle); font-size: var(--text-lg); }
+.dialog-heading { display: grid; gap: var(--space-6); margin-bottom: var(--space-4); }
+.dialog-heading .dialog-kicker { margin: 0; color: var(--c-text-secondary); }
+.dialog-heading h2 { margin: 0; color: var(--c-text); font-size: var(--text-xl); letter-spacing: -.025em; }
+.dialog-heading > p:last-child { margin: 0; color: var(--c-text-secondary); font-size: var(--text-sm); line-height: 1.65; }
+.project-dialog-v2 .field-label { margin: var(--space-4) 0 calc(var(--space-4) * -1); }
+.dialog-hint { margin: calc(var(--space-4) * -1) 0 var(--space-2); color: var(--c-text-secondary); font-size: var(--text-xs); }
+.bound-repository { display: flex; align-items: center; gap: var(--space-10); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--space-10); background: var(--c-surface); }
+.bound-repository-mark { display: grid; width: 28px; height: 28px; place-items: center; border-radius: var(--radius-sm); color: var(--c-text-secondary); background: var(--c-accent-subtle); font-size: var(--text-xs); font-weight: 800; }
+.bound-repository > span:nth-child(2) { display: grid; min-width: 0; gap: var(--space-2); }
+.bound-repository strong { color: var(--c-text-secondary); font-size: var(--text-xs); }
+.bound-repository small { overflow: hidden; color: var(--c-text-secondary); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
+.bound-repository .lock-mark { margin-left: auto; color: var(--c-text-muted); }
+.delete-dialog { display: grid; gap: var(--space-12); }
+.danger-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: var(--radius-md); color: var(--c-danger); background: var(--c-danger-subtle); font-weight: 800; }
+.dialog-kicker { margin: 0; color: var(--c-danger); font-size: var(--text-xs); font-weight: 750; letter-spacing: .08em; }
+.delete-dialog h2 { margin: 0; color: var(--c-text); font-size: var(--text-xl); letter-spacing: -.02em; }
+.delete-description { margin: 0; color: var(--c-text-secondary); font-size: var(--text-base); line-height: 1.8; }
+.delete-description strong { color: var(--c-text-secondary); font-weight: 700; }
+.field-label { margin: var(--space-4) 0 calc(var(--space-6) * -1); color: var(--c-text-secondary); font-size: var(--text-sm); font-weight: 650; }
+.dialog-error { margin: 0; color: var(--c-danger); font-size: var(--text-sm); }
+.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-8); margin-top: var(--space-4); }
+
+.app-shell.sidebar-collapsed .composer { width: min(900px, calc(100% - var(--layout-sidebar-collapsed))); }
 @media (max-width: 860px) {
-  .sidebar:not(.collapsed) { padding: 15px 12px; }
+  .sidebar:not(.collapsed) { padding: var(--space-16) var(--space-12); }
   .app-shell.sidebar-collapsed .composer, .composer { width: calc(100% - 28px); }
   .composer-footer { flex-wrap: wrap; justify-content: flex-start; }
   .repo-control { order: 3; width: 100%; }
   .repo-control-input { max-width: none; flex: 1; }
   .composer-chat-context { margin-left: auto; }
-  .send-button, .stop-button { margin-left: auto; }
+  .composer-action { margin-left: auto; }
 }
diff --git a/ui/src/styles/tokens.css b/ui/src/styles/tokens.css
new file mode 100644
index 0000000..b2bfcff
--- /dev/null
+++ b/ui/src/styles/tokens.css
@@ -0,0 +1,272 @@
+/* ============================================================================
+ * tokens.css — 设计系统唯一真相源
+ * ----------------------------------------------------------------------------
+ * 这是整套前端视觉的**唯一**变量定义处。
+ *
+ * 三条不可违反的规则：
+ *   1. 全项目只允许存在这一个 :root 块。任何其他文件都不许再定义 CSS 变量。
+ *   2. 页面和组件里禁止出现字面量颜色（#xxx / rgb()）用于 UI 语义。
+ *   3. 间距、字号、圆角、控件高度禁止写裸 px —— 只能用这里的变量。
+ *      （唯一例外：1px 边框线宽、100%/50% 这类几何值）
+ *
+ * 为什么这三条是铁律：
+ *   一个失守的配色体系长这样 —— 7 个几乎一样的绿色、21 种圆角、19 种字号、
+ *   24 种 rgba、3 个互相覆盖的 :root 块。它不是因为某个值选错了，
+ *   而是因为**每一轮迭代都在重新发明一个值**。这份文件的存在就是为了
+ *   让"发明新值"这个动作变得不可能。
+ *
+ * 改这个文件的方式：改值可以，加减档位要慎重。
+ *   一旦某档位被页面引用，删掉它会静默降级成默认值 —— 所以只增不删，
+ *   废弃的档位先注释掉并写清弃用日期。
+ * ==========================================================================*/
+
+:root {
+  /* --------------------------------------------------------------------------
+   * 1. 中性色阶 —— 全项目唯一的灰（暖灰）
+   * --------------------------------------------------------------------------
+   * 色相偏橙黄（约 35°），饱和度极低 —— "暖"体现在灰里，不在主色里。
+   * 只把主色改暖而灰还是冷灰，结果是一块发暖的东西贴在发青的底上，读起来是脏。
+   *
+   * 注意：不要再引入第二套灰（比如 Tailwind 的 stone/warm-gray 系）。
+   * 两套灰混用是"界面看起来发脏"的头号原因。
+   *
+   * **--c-surface 刻意保持纯白而 --c-bg 是米白** —— 这个 4% 的明度差就是
+   * "卡片浮在页面上"的全部来源，配上边框一起用。把两者调成同一个值，
+   * 所有卡片会立刻失去边界感。
+   */
+  --c-bg:            #faf7f2;  /* 页面底色（米白）：应用外壳、主区、侧栏 */
+  --c-bg-subtle:     #f1ebe2;  /* 次级底色：用户气泡、代码块、状态胶囊底 */
+  --c-surface:       #ffffff;  /* 卡片、面板、弹窗、输入框表面 */
+  --c-surface-hover: #f4efe7;  /* 表面 hover */
+
+  --c-border:        #e6dfd4;  /* 默认边框、分隔线 */
+  --c-border-strong: #d3c8b9;  /* 需要强调的边框 */
+
+  --c-text:          #1f1b16;  /* 正文、标题（暖黑，不是纯黑） */
+  /* 三档灰都必须过 WCAG AA（在 --c-bg / --c-bg-subtle / --c-surface 三种底上
+     都 ≥4.5:1）。改这三个值时请真的量一次对比度，不要凭"看起来够灰"就定 ——
+     原来的 #8a938f 只有 3.2:1。
+     括号里是用 `tmp/contrast.mjs` 实测的值，三种底取最差的那个。 */
+  --c-text-secondary:#574f47;  /* 次级说明、标签 —— 最差 6.78:1 */
+  --c-text-muted:    #6b6259;  /* 弱化文字、placeholder —— 最差 5.04:1；不要用它写正文 */
+  --c-text-inverse:  #faf7f2;  /* 深色底上的文字（用米白而不是纯白，避免在暖底上发灰） */
+
+  /* --------------------------------------------------------------------------
+   * 2. 主色 —— 近黑
+   * --------------------------------------------------------------------------
+   * 规则：一个产品只允许有一个"品牌色"。
+   *   如果你发现自己在加第二个（比如 logo 一个黑、按钮一个绿），
+   *   那不是设计，那是漂移。要么统一，要么把其中一个降级为语义色。
+   *
+   * **为什么是近黑而不是彩色**：暖米白底上放彩色主色，两者会互相拉低 ——
+   * 冷色在暖底上发脏，暖色在暖底上糊成一片。近黑没有色相，不参与这场打架，
+   * 也把"哪里是交互"这件事交给明度而不是色相来判断。
+   *
+   * **hover / active 是变亮而不是变暗**（与常见的彩色主色相反）：
+   * 近黑几乎没有变暗的余地，#231e18 再暗就跟正文分不开了。所以做成
+   * "越交互越亮"的一条单向梯度，反馈反而更清楚。
+   *
+   * 代价必须知道：主色不再是"品牌识别"的载体。绿色彻底退出，
+   * logo 里的绿因此成了全应用唯一的彩色 —— 这一点是有意的。
+   */
+  --c-accent:        #231e18;  /* 主色：主按钮、选中态、链接、焦点环 */
+  --c-accent-hover:  #3b342b;
+  --c-accent-active: #4e4539;
+  --c-accent-subtle: #efe9df;  /* 主色浅底 —— 只能配 --c-accent 文字，不要配白字 */
+
+  /* --------------------------------------------------------------------------
+   * 3. 语义色 —— 只有三个，不许扩展
+   * --------------------------------------------------------------------------
+   * 不要为"信息/提示"再加一个蓝色 info：用 --c-accent 承担。
+   * 有彩色总数（success + warning + danger）= 3，这是上限。
+   * （主色改成近黑之后，全应用的有彩色就只剩这三个 + logo。）
+   *
+   * 三个都往暖里挪并降了饱和度：饱和的绿/红铺在暖米白上会往外跳，
+   * 看起来像贴上去的。深色版与浅色底版必须成对改，只改一个会让
+   * `色/浅底` 的对比度掉到 4.5 以下。
+   */
+  --c-success:        #3d6b4c;
+  --c-success-subtle: #eaf0e9;
+  --c-warning:        #8a5a1c;  /* 在 --c-warning-subtle 上也要 ≥4.5:1 —— 实测 5.31:1 */
+  --c-warning-subtle: #fbf2e3;
+  --c-danger:         #a4483c;  /* 在 --c-danger-subtle 上实测 5.09:1 */
+  --c-danger-subtle:  #f9ece8;
+
+  /* 遮罩层：对话框/抽屉背后压暗页面用。
+   * 必须保留透明度 —— 换成不透明色会让背后内容整个消失。
+   * 三处遮罩（侧栏、项目对话框、通用对话框）各有各的 alpha 值，
+   * 统一到这一个 token 上。 */
+  --c-overlay:        rgba(31, 26, 21, 0.42);
+
+  /* --------------------------------------------------------------------------
+   * 4. 间距 —— 2px 网格，共 13 档
+   * --------------------------------------------------------------------------
+   * 规则：任何 margin / padding / gap / grid-gap 只能取下面这些值之一，
+   * 一律写成 var(--space-*)，不允许再出现 px 字面量（`npm run audit` 会数）。
+   *
+   * 为什么是 2px 网格而不是常见的 4px 网格：这是一个**密集的开发者工具**，
+   * 迁移前实测的用量分布是 10px×45、8px×38、12px×33、14px×23、9px×21、
+   * 2px×20、5px×20、7px×18 —— 大量真实间距落在 2px 网格上但不在 4px 网格上。
+   * 强行用 4/8/12/16/24 七档，会把占 45 次的 10px 顶到 8px、占 23 次的 14px
+   * 顶到 16px，整页布局跟着位移，等于用一个尺子去改另一个尺子的活。
+   *
+   * **token 名里的数字就是像素值**（--space-10 = 10px）。这样迁移可以机械进行，
+   * 也不会因为将来插入一档而让后面所有档位集体改名。
+   */
+  --space-2:  2px;   /* 发丝级：图标与文字之间、徽标内边距 */
+  --space-4:  4px;   /* 极紧：同一行内相邻小元素 */
+  --space-6:  6px;   /* 紧凑行的内边距 */
+  --space-8:  8px;   /* 默认小间距：列表项内边距、按钮组间隙 */
+  --space-10: 10px;  /* 本项目最常用档：侧栏行内边距、卡片内边距 */
+  --space-12: 12px;  /* 卡片内边距、区块内元素间距 */
+  --space-14: 14px;  /* 稍松的行距 */
+  --space-16: 16px;  /* 区块之间的标准间距 */
+  --space-18: 18px;
+  --space-20: 20px;
+  --space-24: 24px;  /* 区块之间的大间距 */
+  --space-32: 32px;  /* 页面级留白 */
+  --space-48: 48px;  /* 空状态、主标题周围 */
+
+  /* --------------------------------------------------------------------------
+   * 5. 字号 —— 只有 7 档，档位之间必须有肉眼可辨的差距
+   * --------------------------------------------------------------------------
+   * 规则：除了下面这 7 个值，不要出现任何其他 font-size ——
+   * 包括 10.5 / 14 / 15 / 17 / 18 / 19 / 22 / 24 这些中间值，
+   * 以及 clamp(...)、em、rem 形式的字号。
+   * 人眼分不清 11 和 12 的层级差别，但**能**分辨出"整个界面有 19 种字号"。
+   *
+   * **这 7 个值不是凭空定的，是按本 App 真实用量分布推导的**（迁移时统计
+   * 全部 font-size 声明的频次：10px×20、11px×23、12px×32、13px×14、16px×7
+   * …）。前三位正好是 10 / 11 / 12，占全部声明的一半以上，所以它们被原样
+   * 保留成三档 —— 这样收敛 19 种字号时，改动面最小、界面几乎不变。
+   *
+   * 通用原则：**先量出这个 App 的频次表，再把最高频的三个值固定为
+   * xs/sm/base**，剩下的向上归并。不要照搬别处的预设档位；不要因为
+   * "看起来该是 13px" 就把这个 App 里用得最多的 12px 顶掉。
+   *
+   * 档位之间至少差 1px（10→11→12），再往上必须拉开（12→13→16→20→32），
+   * 因为人对小字号的 1px 差异敏感、对大字号的 1px 差异不敏感。
+   */
+  --text-xs:   10px;  /* 徽标、极弱化辅助信息、计数、快捷键提示 */
+  --text-sm:   11px;  /* 次级说明、元信息、状态文字 */
+  --text-base: 12px;  /* 正文基准（本项目用量最大的档） */
+  --text-md:   13px;  /* 强调正文、列表标题、控件内文字 */
+  --text-lg:   16px;  /* 区块标题、输入区正文 */
+  --text-xl:   20px;  /* 页面标题、对话框标题 */
+  --text-2xl:  32px;  /* 主标题 / Hero */
+
+  --leading-tight:  1.25;  /* 大字号标题 */
+  --leading-snug:   1.45;  /* 短文本、控件内文字 */
+  --leading-normal: 1.6;   /* 长段落 */
+
+  /* --------------------------------------------------------------------------
+   * 6. 圆角 —— 只有 3 档 + 胶囊
+   * --------------------------------------------------------------------------
+   * 规则：禁止 7/8/9/11/12/13/14/15/17/18/22 这些值。
+   * 没人分得清 11px 和 12px，但 21 种圆角叠在一起读出来就是"随手写的"。
+   * 档位与元素大小的对应关系是固定的：
+   *   sm → 控件（按钮、输入框、下拉、徽标容器）
+   *   md → 容器（卡片、面板、弹层）
+   *   lg → 大容器（对话框、全屏面板）
+   */
+  --radius-sm:   6px;
+  --radius-md:   10px;
+  --radius-lg:   16px;
+  --radius-full: 999px;
+
+  /* --------------------------------------------------------------------------
+   * 7. 控件高度 —— 保证同行控件视觉重量同源
+   * --------------------------------------------------------------------------
+   * 这一组是"看起来专业"最容易被低估的一项。
+   * 同一行里的下拉框、输入框、按钮，高度必须完全相同 —— 否则无论
+   * 单个控件多精致，整行读起来都是"没对齐"。
+   */
+  --control-h-sm: 28px;
+  --control-h-md: 36px;
+  --control-h-lg: 44px;
+
+  /* --------------------------------------------------------------------------
+   * 8. 阴影 —— 只有 3 档，且只用一个基色
+   * --------------------------------------------------------------------------
+   * 规则：所有阴影必须用同一个 rgb 基色，只改 alpha。
+   * 混合多个基色（黑、slate、自定义深绿各一个）会让阴影看起来发脏。
+   * 基色跟着暖灰走（rgba(38, 30, 22, …)）而不是纯黑 —— 冷黑阴影落在米白上
+   * 会发青，和暖底打架。
+   */
+  --shadow-xs: 0 1px 2px  rgba(38, 30, 22, 0.05);
+  --shadow-sm: 0 2px 8px  rgba(38, 30, 22, 0.06);
+  --shadow-md: 0 8px 24px rgba(38, 30, 22, 0.10);
+
+  /* --------------------------------------------------------------------------
+   * 9. 动效
+   * -------------------------------------------------------------------------- */
+  --ease:      cubic-bezier(0.2, 0.7, 0.3, 1);
+  --dur-fast:  120ms;
+  --dur-base:  180ms;
+
+  /* --------------------------------------------------------------------------
+   * 10. 层级 —— 不要写 z-index: 9999
+   * -------------------------------------------------------------------------- */
+  --z-base:     0;
+  --z-sticky:   10;
+  --z-dropdown: 100;
+  --z-overlay:  1000;
+  --z-modal:    1100;
+  --z-toast:    1200;
+
+  /* --------------------------------------------------------------------------
+   * 11. 结构尺寸
+   * -------------------------------------------------------------------------- */
+  --layout-sidebar: 292px;
+  --layout-sidebar-collapsed: 76px;
+  --layout-header:  52px;
+  --layout-content-max: 960px;
+}
+
+/* ============================================================================
+ * 主题预留（深色模式）
+ * ----------------------------------------------------------------------------
+ * 结构已经留好：所有颜色都走变量，所以换主题只需要重写颜色那一段。
+ * **但下面的值必须真的设计过并校验对比度再用** —— 不要把浅色值机械反转，
+ * 那样必然产出对比度不足和发灰的界面。
+ * 最小校验要求：正文文字与背景对比度 ≥ 4.5:1，次要文字 ≥ 4.5:1。
+ *
+ * 需要重写的只有颜色类 token，间距/字号/圆角/阴影结构完全复用。
+ *
+ * ⚠️ 下面这段是**暖色调改版之前**写的，主色还是旧的青色系（`#4aa392`），
+ * 与现在的米白 + 近黑是两套语言。真要开深色模式时**不要直接解注释** ——
+ * 得按新的近黑主色重新设计一遍深色对应值，并跑一遍 `tmp/contrast.mjs` 那样的校验。
+ * 详见 DESIGN.md §20。
+ * ==========================================================================*/
+/*
+[data-theme="dark"] {
+  --c-bg:            #141817;
+  --c-bg-subtle:     #1b201f;
+  --c-surface:       #1f2524;
+  --c-surface-hover: #262d2b;
+
+  --c-border:        #2f3735;
+  --c-border-strong: #414b48;
+
+  --c-text:          #e8ecea;
+  --c-text-secondary:#a8b3af;
+  --c-text-muted:    #7d8884;
+  --c-text-inverse:  #141817;
+
+  --c-accent:        #4aa392;   // 深底上要提亮，否则对比度不够
+  --c-accent-hover:  #5cb4a2;
+  --c-accent-active: #72c4b3;
+  --c-accent-subtle: #16302b;
+
+  --c-success:        #56a87f;
+  --c-success-subtle: #14291f;
+  --c-warning:        #c99a4a;
+  --c-warning-subtle: #2b2113;
+  --c-danger:         #c96a63;
+  --c-danger-subtle:  #2c1917;
+
+  --shadow-xs: 0 1px 2px  rgba(0, 0, 0, 0.30);
+  --shadow-sm: 0 2px 8px  rgba(0, 0, 0, 0.35);
+  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
+}
+*/
diff --git a/ui/stylelint.config.mjs b/ui/stylelint.config.mjs
new file mode 100644
index 0000000..4b52be5
--- /dev/null
+++ b/ui/stylelint.config.mjs
@@ -0,0 +1,168 @@
+/**
+ * stylelint.config.mjs — 设计系统硬约束
+ * ----------------------------------------------------------------------------
+ * 放在项目根目录。这是四层约束里的**第三层（可执行检查）**。
+ *
+ * 它为什么比 SKILL.md 里的文字规则强：文字规则被违反时，没有任何事情发生；
+ * 这里被违反时，命令**报错并返回非零退出码** —— 可以挂到 CI 或 pre-commit 上。
+ * 一句话规则弱于一个会失败的构建。
+ *
+ * 安装：
+ *   npm i -D stylelint stylelint-config-standard postcss-html
+ * 运行：
+ *   npx stylelint "src/**\/*.{css,vue}"
+ * package.json：
+ *   "lint:css":     "stylelint \"src/components/ui/**\/*.vue\" \"src/components/layout/**\/*.vue\""
+ *   "lint:css:all": "stylelint \"src/**\/*.{css,vue}\""
+ *
+ * ⚠️ 迁移期策略：`lint:css` 只卡**新代码**（ui/ 与 layout/），legacy 的
+ * `src/styles/main.css` 用 `npm run audit` 跟踪收敛进度，不进这个硬门 ——
+ * 否则一开就是 600+ 条报错，人会习惯性忽略输出，等于没开。
+ * 阶段二把 main.css 收敛完后，把 `lint:css` 的 glob 换成 `src/**\/*.{css,vue}`。
+ *
+ * ⚠️ 落地策略：**先只开 error**，把现有违规清完。一次性开满会让人
+ * 习惯性忽略输出 —— 那就等于没开。建议首批只保留第 1、2、4、6 组。
+ */
+export default {
+  extends: ['stylelint-config-standard'],
+
+  rules: {
+    /* ======================================================================
+     * 1. 禁止颜色字面量（AP-02 / AP-04）
+     * ----------------------------------------------------------------------
+     * 只允许 var() 与透明/继承类关键字。
+     * 内容色（图表数据、用户头像哈希色）用行内豁免：
+     *   background: #ff0000; // stylelint-disable-line -- 图表数据色
+     * ==================================================================== */
+    'declaration-property-value-disallowed-list': {
+      '/^.*$/': [
+        '/#[0-9a-fA-F]{3,8}\\b/',
+        '/\\brgba?\\s*\\(/',
+        '/\\bhsla?\\s*\\(/',
+      ],
+      // 无障碍：焦点环是键盘用户唯一的导航手段，不要删掉（AP-16）
+      'outline': ['none'],
+      'outline-style': ['none'],
+      // 魔法 z-index：必须是 var(--z-*)（AP-06 的近亲）
+      'z-index': ['/^\\d+$/'],
+    },
+
+    /* ======================================================================
+     * 2. 禁止设计维度写裸 px（AP-06 / AP-07 / AP-09）
+     * ----------------------------------------------------------------------
+     * 这些属性只允许 var()、0、%（var 无单位，所以不会被误伤）。
+     * 注意：**不包括** border-width —— 1px 边框是合法例外。
+     * ==================================================================== */
+    'declaration-property-unit-disallowed-list': {
+      'padding': ['px', 'rem', 'em'],
+      'padding-top': ['px', 'rem', 'em'],
+      'padding-right': ['px', 'rem', 'em'],
+      'padding-bottom': ['px', 'rem', 'em'],
+      'padding-left': ['px', 'rem', 'em'],
+      'margin': ['px', 'rem', 'em'],
+      'margin-top': ['px', 'rem', 'em'],
+      'margin-right': ['px', 'rem', 'em'],
+      'margin-bottom': ['px', 'rem', 'em'],
+      'margin-left': ['px', 'rem', 'em'],
+      'gap': ['px', 'rem', 'em'],
+      'row-gap': ['px', 'rem', 'em'],
+      'column-gap': ['px', 'rem', 'em'],
+      'font-size': ['px', 'rem', 'em'],
+      'border-radius': ['px', 'rem', 'em'],
+      'box-shadow': ['px'], // 阴影里允许 0，允许 var()
+    },
+
+    /* ======================================================================
+     * 3. 禁止 !important（AP-21）
+     * ==================================================================== */
+    'declaration-no-important': true,
+
+    /* ======================================================================
+     * 4. 禁止重复选择器（AP-10 的机器检测 —— 本项目最该开的一条）
+     * ----------------------------------------------------------------------
+     * 它检测的是"同一个选择器在同一个文件里被定义了两次"。
+     * 这正是 "refinement 追加块" 的指纹：
+     *   .composer { ... }        <- 第一次
+     *   ...
+     *   .composer { ... }        <- 第四次的覆盖
+     * 阈值 0：任何重复都报错。
+     * ==================================================================== */
+    'no-duplicate-selectors': true,
+    'no-descending-specificity': true,
+    'no-duplicate-at-import-rules': true,
+    'block-no-empty': true,
+
+    /* ======================================================================
+     * 5. 禁止魔法数值
+     * ----------------------------------------------------------------------
+     * z-index 必须走 --z-*，否则会长出 9999 这类值。
+     * （这条已合并进规则 1 的对象里，见文件末尾说明）
+     * ==================================================================== */
+
+    /* ======================================================================
+     * 6. 选择器纪律（AP-20 的间接约束）
+     * ----------------------------------------------------------------------
+     * 深层嵌套 = 无法安全修改 = 只能追加覆盖 = 回到 AP-10。
+     * 不需要 !important 的 CSS，几乎总是选择器层级合理的 CSS。
+     * ==================================================================== */
+    'selector-max-id': 0,
+    'selector-max-compound-selectors': 4,
+    'selector-max-specificity': '0,4,0',
+    'max-nesting-depth': 3,
+
+    /* ======================================================================
+     * 7. 格式（沿用 standard，按实际需要放宽）
+     * ----------------------------------------------------------------------
+     * 下面几条都是「跑起来才发现」的：standard 的默认值与真实组件写法冲突，
+     * 而冲突的一方是 standard 错了。装好之后**务必真的跑一次**
+     * `npx stylelint "src/**\/*.vue"`，否则这些冲突不会暴露 ——
+     * 一份从没被执行过的配置，和没有配置是一样的。
+     * ==================================================================== */
+    'comment-empty-line-before': null,
+    'custom-property-empty-line-before': null,
+
+    // BEM：放行 ui-button / ui-button__icon / ui-button--sm。
+    // standard 默认只认 kebab-case，会把整套 BEM 判成 86 个错误。
+    // 这条正则只拦真正想拦的东西：camelCase 与 PascalCase 的漂移。
+    'selector-class-pattern': '^[a-z][a-z0-9]*(?:[-_]{1,2}[a-z0-9]+)*$',
+
+    // 降级为 warning：这条规则确实能抓到真实缺陷，但它与本项目
+    // 「状态必须显式排序（default → hover → focus → active → disabled）」
+    // 的约定直接冲突 —— 按状态顺序写就必然违反它。保留为提示，不阻塞构建。
+    'no-descending-specificity': [true, { severity: 'warning' }],
+
+    // currentColor 是规范里的标准拼写，放行 lowercase 检查
+    'value-keyword-case': ['lower', { ignoreKeywords: ['currentColor'] }],
+
+    // 原生 select 的外观复位必须带 -webkit- 前缀才能在 Safari 生效
+    'property-no-vendor-prefix': [true, { ignoreProperties: ['-webkit-appearance'] }],
+  },
+
+  ignoreFiles: [
+    'node_modules/**',
+    'dist/**',
+    '**/*.min.css',
+    // token 文件本身当然要写颜色和 px —— 它就是唯一真相源（AP-01）
+    'src/styles/tokens.css',
+  ],
+
+  overrides: [
+    {
+      files: ['**/*.vue'],
+      customSyntax: 'postcss-html',
+    },
+  ],
+};
+
+/* ============================================================================
+ * stylelint 原生覆盖不到、必须靠 scripts/audit-css.mjs 的两项检查：
+ *   - `:root` 块数量（AP-01）—— stylelint 没有"跨块计数"能力
+ *   - 颜色近重复聚类（AP-02 的深层形态）—— 需要计算色距，不是模式匹配
+ *   - 近白背景数量、字号档位分布（AP-07 / AP-08）
+ * 这四项是 audit 脚本存在的理由。
+ *
+ * 校验本配置本身是否可用：
+ *   npx stylelint --print-config src/styles/main.css > /dev/null
+ * 如果报 "Unknown rule"，说明该 rule 在当前 stylelint 大版本里不存在，
+ * 删掉它 —— 不要留着一个从没被执行过的规则假装有约束。
+ * ==========================================================================*/
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 97cbb85..a5721c3 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -2,6 +2,15 @@
 # yarn lockfile v1
 
 
+"@babel/code-frame@^7.0.0":
+  version "7.29.7"
+  resolved "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.29.7.tgz"
+  integrity sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.29.7"
+    js-tokens "^4.0.0"
+    picocolors "^1.1.1"
+
 "@babel/helper-string-parser@^7.29.7":
   version "7.29.7"
   resolved "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz"
@@ -27,6 +36,59 @@
     "@babel/helper-string-parser" "^7.29.7"
     "@babel/helper-validator-identifier" "^7.29.7"
 
+"@cacheable/memory@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.npmmirror.com/@cacheable/memory/-/memory-2.2.0.tgz"
+  integrity sha512-CTLKqLItRCEixEAewD3/j9DB3/o96gpTPD4eJ1v+DGOlxZRZncRQkGYqqnAGCscYd6RNeXfGeiuCphsPtqyIfQ==
+  dependencies:
+    "@cacheable/utils" "^2.5.0"
+    "@keyv/bigmap" "^1.3.1"
+    hookified "^1.15.1"
+    keyv "^5.6.0"
+
+"@cacheable/utils@^2.5.0":
+  version "2.5.0"
+  resolved "https://registry.npmmirror.com/@cacheable/utils/-/utils-2.5.0.tgz"
+  integrity sha512-buipgOVDkkPXNR5+xBpDw7Zk2n1EvU7qBJCNUcL7rhQ//kfpOXPAvQ511Os0vpLYJ1pZnvudNytkQt2hst3wqA==
+  dependencies:
+    hashery "^1.5.1"
+    keyv "^5.6.0"
+
+"@csstools/css-calc@^3.3.0":
+  version "3.4.1"
+  resolved "https://registry.npmmirror.com/@csstools/css-calc/-/css-calc-3.4.1.tgz"
+  integrity sha512-EtC7SoN1j6J4E4DCwg5QgbO5TGxgxIA1RXqe+W+qUM+BUcezx9wT+/tiQ/WO2yCX4i5X+Cuf9ciJ22aP4UEwWw==
+
+"@csstools/css-parser-algorithms@^4.0.0", "@csstools/css-parser-algorithms@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.npmmirror.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.1.tgz"
+  integrity sha512-ShL8BqPfbKJrJiKFH0xBbN0i7Nrh9HXYRuF+pzyj93R/BL2YAsUxJeqANErzqM+0JGl7vjHp+3OIgd/DL69YIA==
+
+"@csstools/css-syntax-patches-for-csstree@^1.1.9":
+  version "1.1.14"
+  resolved "https://registry.npmmirror.com/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.14.tgz"
+  integrity sha512-HpbVXyrofRXpHpgkNIjU/3EWR4WJvOkO3emNK/L6X/mTJU7bGUI3AkkpoTNXznQLp0KRjLHELTGeKI5dIkI9JQ==
+
+"@csstools/css-tokenizer@^4.0.0", "@csstools/css-tokenizer@^4.0.2":
+  version "4.0.2"
+  resolved "https://registry.npmmirror.com/@csstools/css-tokenizer/-/css-tokenizer-4.0.2.tgz"
+  integrity sha512-OoKoR0f76dCY666JlcbhmVTs2drYj1GUXZTYTcbUgJjh9Nv41aFfZ21bPQTERm5+L5cBDo466NltB2lplS5GBw==
+
+"@csstools/media-query-list-parser@^5.0.0":
+  version "5.0.1"
+  resolved "https://registry.npmmirror.com/@csstools/media-query-list-parser/-/media-query-list-parser-5.0.1.tgz"
+  integrity sha512-DR5NpEOOxDOhmMWPJlhYAV9gTmV4XpfYjtE+aXSCurkxS65KzNogI4wqzRIoujieQcmFkeRtK1nRIF8ImUZTDg==
+
+"@csstools/selector-resolve-nested@^4.0.1":
+  version "4.0.2"
+  resolved "https://registry.npmmirror.com/@csstools/selector-resolve-nested/-/selector-resolve-nested-4.0.2.tgz"
+  integrity sha512-JpjNBJFA+4OnAHKRK4AMp8xrYyLhI9XapOeBlP2PhRU/IylSw+1ep3BFNTksBJnrTS3KT6kqKNVfpzLLwZUW5Q==
+
+"@csstools/selector-specificity@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.npmmirror.com/@csstools/selector-specificity/-/selector-specificity-6.0.0.tgz"
+  integrity sha512-4sSgl78OtOXEX/2d++8A83zHNTgwCJMaR24FvsYL7Uf/VS8HZk9PTwR51elTbGqMuwH3szLvvOXEaVnqn0Z3zA==
+
 "@esbuild/win32-x64@0.28.1":
   version "0.28.1"
   resolved "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz"
@@ -50,6 +112,40 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@keyv/bigmap@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.npmmirror.com/@keyv/bigmap/-/bigmap-1.3.1.tgz"
+  integrity sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ==
+  dependencies:
+    hashery "^1.4.0"
+    hookified "^1.15.0"
+
+"@keyv/serialize@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.npmmirror.com/@keyv/serialize/-/serialize-1.1.1.tgz"
+  integrity sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.npmmirror.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3":
+  version "1.2.8"
+  resolved "https://registry.npmmirror.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
 "@one-ini/wasm@0.2.1":
   version "0.2.1"
   resolved "https://registry.npmmirror.com/@one-ini/wasm/-/wasm-0.2.1.tgz"
@@ -70,6 +166,11 @@
   resolved "https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.62.4.tgz"
   integrity sha512-zD6NdeWEByGE9QF9vCrlJ5YQB4oq9q91kPZS37Jwj5hOkvR1lTBSpsKhKDw4IJtbQ35LsTS1HD9DZYGKIshU1Q==
 
+"@sindresorhus/merge-streams@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz"
+  integrity sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==
+
 "@types/chai@^5.2.2":
   version "5.2.3"
   resolved "https://registry.npmmirror.com/@types/chai/-/chai-5.2.3.tgz"
@@ -262,6 +363,33 @@ agent-base@6:
   dependencies:
     debug "4"
 
+ajv@^8.0.1:
+  version "8.20.0"
+  resolved "https://registry.npmmirror.com/ajv/-/ajv-8.20.0.tgz"
+  integrity sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    fast-uri "^3.0.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-regex@^6.2.2:
+  version "6.4.0"
+  resolved "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-6.4.0.tgz"
+  integrity sha512-KzTVk2tCWAHtYrvvvaP8bJKJq2pVinhLcGEQdtLIYPbmNGNyYe8QwNaTUYQp2J7/vIsUKt5QCqAfUkYyG9DkOw==
+
+ansi-styles@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
 argparse@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmmirror.com/argparse/-/argparse-2.0.1.tgz"
@@ -272,6 +400,11 @@ assertion-error@^2.0.1:
   resolved "https://registry.npmmirror.com/assertion-error/-/assertion-error-2.0.1.tgz"
   integrity sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==
 
+astral-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/astral-regex/-/astral-regex-2.0.0.tgz"
+  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz"
@@ -304,6 +437,13 @@ brace-expansion@^5.0.8:
   dependencies:
     balanced-match "^4.0.2"
 
+braces@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmmirror.com/braces/-/braces-3.0.3.tgz"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
 buffer-image-size@^0.6.4:
   version "0.6.4"
   resolved "https://registry.npmmirror.com/buffer-image-size/-/buffer-image-size-0.6.4.tgz"
@@ -311,6 +451,17 @@ buffer-image-size@^0.6.4:
   dependencies:
     "@types/node" "*"
 
+cacheable@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.npmmirror.com/cacheable/-/cacheable-2.5.0.tgz"
+  integrity sha512-60cyAOytib/OzBw1JNSoSV/boK1AtHryDIjvVBk7XbN4ugfkM3+Sry7fEjNgPMGgOjuaZPAp8ruZ0Cxafwyq9g==
+  dependencies:
+    "@cacheable/memory" "^2.2.0"
+    "@cacheable/utils" "^2.5.0"
+    hookified "^1.15.0"
+    keyv "^5.6.0"
+    qified "^0.10.1"
+
 call-bind-apply-helpers@^1.0.1, call-bind-apply-helpers@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz"
@@ -319,11 +470,33 @@ call-bind-apply-helpers@^1.0.1, call-bind-apply-helpers@^1.0.2:
     es-errors "^1.3.0"
     function-bind "^1.1.2"
 
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmmirror.com/callsites/-/callsites-3.1.0.tgz"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
 chai@^6.2.2:
   version "6.2.2"
   resolved "https://registry.npmmirror.com/chai/-/chai-6.2.2.tgz"
   integrity sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==
 
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+colord@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.npmmirror.com/colord/-/colord-2.10.0.tgz"
+  integrity sha512-AidJptpBJmjTclAp9BkLwJi0T93fo5epJnbaZslpg6QVzpHjAiveF55mE9AcUJiGMqRHgMDY8soMsQtuNYMHfw==
+
 combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz"
@@ -351,12 +524,40 @@ copy-anything@^4:
   dependencies:
     is-what "^5.2.0"
 
+cosmiconfig@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-9.0.2.tgz"
+  integrity sha512-gtTZxTDau1wL7Y7zifc2dd8jHSK/k6BTx/2Xp/BpdlAdnlYWFVt7qhJqgwi7637yRwRQ3qL4ZidbB4I8tA5VOg==
+  dependencies:
+    env-paths "^2.2.1"
+    import-fresh "^3.3.0"
+    js-yaml "^4.1.0"
+    parse-json "^5.2.0"
+
+css-functions-list@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.npmmirror.com/css-functions-list/-/css-functions-list-3.3.3.tgz"
+  integrity sha512-8HFEBPKhOpJPEPu70wJJetjKta86Gw9+CCyCnB3sui2qQfOvRyqBy4IKLKKAwdMpWb2lHXWk9Wb4Z6AmaUT1Pg==
+
+css-tree@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.npmmirror.com/css-tree/-/css-tree-3.2.1.tgz"
+  integrity sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==
+  dependencies:
+    mdn-data "2.27.1"
+    source-map-js "^1.2.1"
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
 csstype@^3.2.3:
   version "3.2.3"
   resolved "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz"
   integrity sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==
 
-debug@4:
+debug@^4.4.3, debug@4:
   version "4.4.3"
   resolved "https://registry.npmmirror.com/debug/-/debug-4.4.3.tgz"
   integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==
@@ -368,6 +569,27 @@ delayed-stream@~1.0.0:
   resolved "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-2.0.0.tgz"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
+domelementtype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
+domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.npmmirror.com/domhandler/-/domhandler-5.0.3.tgz"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
 dompurify@^3.2.4:
   version "3.4.13"
   resolved "https://registry.npmmirror.com/dompurify/-/dompurify-3.4.13.tgz"
@@ -375,6 +597,15 @@ dompurify@^3.2.4:
   optionalDependencies:
     "@types/trusted-types" "^2.0.7"
 
+domutils@^3.1.0:
+  version "3.2.2"
+  resolved "https://registry.npmmirror.com/domutils/-/domutils-3.2.2.tgz"
+  integrity sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
 dunder-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz"
@@ -394,7 +625,12 @@ editorconfig@^3.0.2:
     minimatch "~10.2.4"
     semver "^7.7.4"
 
-entities@^4.5.0:
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
+entities@^4.2.0, entities@^4.5.0:
   version "4.5.0"
   resolved "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
@@ -404,6 +640,18 @@ entities@^7.0.1:
   resolved "https://registry.npmmirror.com/entities/-/entities-7.0.1.tgz"
   integrity sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==
 
+env-paths@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.npmmirror.com/env-paths/-/env-paths-2.2.1.tgz"
+  integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
+
+error-ex@^1.3.1:
+  version "1.3.4"
+  resolved "https://registry.npmmirror.com/error-ex/-/error-ex-1.3.4.tgz"
+  integrity sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==
+  dependencies:
+    is-arrayish "^0.2.1"
+
 es-define-property@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz"
@@ -485,11 +733,72 @@ expect-type@^1.4.0:
   resolved "https://registry.npmmirror.com/expect-type/-/expect-type-1.4.0.tgz"
   integrity sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==
 
+fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-glob@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.3.tgz"
+  integrity sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.8"
+
+fast-uri@^3.0.1:
+  version "3.1.8"
+  resolved "https://registry.npmmirror.com/fast-uri/-/fast-uri-3.1.8.tgz"
+  integrity sha512-GZMtZUTNRpOVIECoXwLNZS5xUGE+mVNbTB8h/7Rwh2TFWcBQiPzTgyZi05BF9UMZKkLJv8XBRJTlU7zg8+ZfMg==
+
+fastest-levenshtein@^1.0.16:
+  version "1.0.16"
+  resolved "https://registry.npmmirror.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz"
+  integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
+
+fastq@^1.6.0:
+  version "1.20.3"
+  resolved "https://registry.npmmirror.com/fastq/-/fastq-1.20.3.tgz"
+  integrity sha512-XKv5nnLs6nLF71NgiKJLIZFLkPyIEuOselLG7ujZnGrRfQK8HpvY+WqKhAJUAdLomwVHErVS4LfxFlPq0/FTAw==
+  dependencies:
+    reusify "^1.0.4"
+
 fdir@^6.5.0:
   version "6.5.0"
   resolved "https://registry.npmmirror.com/fdir/-/fdir-6.5.0.tgz"
   integrity sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==
 
+file-entry-cache@^11.1.5:
+  version "11.1.5"
+  resolved "https://registry.npmmirror.com/file-entry-cache/-/file-entry-cache-11.1.5.tgz"
+  integrity sha512-+PFTHITI08JIGhnNpGNI8T8inUpgZfk3GNEqfT9R2zZV2iFXg3CvqzSl/uEhs7TSGujYRELEANyDvS8Fj7+S7Q==
+  dependencies:
+    flat-cache "^6.1.23"
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+flat-cache@^6.1.23:
+  version "6.1.23"
+  resolved "https://registry.npmmirror.com/flat-cache/-/flat-cache-6.1.23.tgz"
+  integrity sha512-f++BY9pTk+983xK1FLzlLpmM0i0z+jHmx3QESGkURMXujQZz1k5wzwX6hjnQ8goaD0B+sYnDK1yZ6MTyZfUaqA==
+  dependencies:
+    cacheable "^2.5.0"
+    flatted "^3.4.2"
+    hookified "^1.15.0"
+
+flatted@^3.4.2:
+  version "3.4.4"
+  resolved "https://registry.npmmirror.com/flatted/-/flatted-3.4.4.tgz"
+  integrity sha512-5+ybhBZANEJxaH3X5evAFatUxLfEHSr7n6kYJ+1Qd0mUqr4eu9gIf6GDbWHf8RJijHrjjO8G+la14SlL2SeS1Q==
+
 follow-redirects@^1.16.0:
   version "1.16.0"
   resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.16.0.tgz"
@@ -511,6 +820,11 @@ function-bind@^1.1.2:
   resolved "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz"
   integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
+get-east-asian-width@^1.5.0:
+  version "1.7.0"
+  resolved "https://registry.npmmirror.com/get-east-asian-width/-/get-east-asian-width-1.7.0.tgz"
+  integrity sha512-XjH1AECxf0giL2V1aU8vKyRR2ppRUb5c0EvT7zuJTokQ74bNo52zOtghqdWIqrhUD79fo3x0WfKZdOqxF6LG1Q==
+
 get-intrinsic@^1.2.6:
   version "1.3.0"
   resolved "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz"
@@ -535,6 +849,13 @@ get-proto@^1.0.1:
     dunder-proto "^1.0.1"
     es-object-atoms "^1.0.0"
 
+glob-parent@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob@^13.0.6:
   version "13.0.6"
   resolved "https://registry.npmmirror.com/glob/-/glob-13.0.6.tgz"
@@ -544,6 +865,40 @@ glob@^13.0.6:
     minipass "^7.1.3"
     path-scurry "^2.0.2"
 
+global-modules@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/global-modules/-/global-modules-2.0.0.tgz"
+  integrity sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==
+  dependencies:
+    global-prefix "^3.0.0"
+
+global-prefix@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/global-prefix/-/global-prefix-3.0.0.tgz"
+  integrity sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==
+  dependencies:
+    ini "^1.3.5"
+    kind-of "^6.0.2"
+    which "^1.3.1"
+
+globby@^16.2.4:
+  version "16.2.4"
+  resolved "https://registry.npmmirror.com/globby/-/globby-16.2.4.tgz"
+  integrity sha512-c8B/VNLmxRcmqqenRA9t+9IyOjf9+V6lTxPaUJLqOCONdQkWZ0ETYgX0qbtJqPsgCNusT9MZ5Jeidw8Eb9tn2g==
+  dependencies:
+    "@sindresorhus/merge-streams" "^4.0.0"
+    fast-glob "^3.3.3"
+    ignore "^7.0.5"
+    is-path-inside "^4.0.0"
+    micromatch "^4.0.8"
+    slash "^5.1.0"
+    unicorn-magic "^0.4.0"
+
+globjoin@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.npmmirror.com/globjoin/-/globjoin-0.1.4.tgz"
+  integrity sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==
+
 gopd@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz"
@@ -562,6 +917,11 @@ happy-dom@*, happy-dom@^20.14.5:
     whatwg-mimetype "^3.0.0"
     ws "^8.21.0"
 
+has-flag@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmmirror.com/has-flag/-/has-flag-5.0.1.tgz"
+  integrity sha512-CsNUt5x9LUdx6hnk/E2SZLsDyvfqANZSUq4+D3D8RzDJ2M+HDTIkF60ibS1vHaK55vzgiZw1bEPFG9yH7l33wA==
+
 has-symbols@^1.0.3, has-symbols@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz"
@@ -574,6 +934,13 @@ has-tostringtag@^1.0.2:
   dependencies:
     has-symbols "^1.0.3"
 
+hashery@^1.4.0, hashery@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.npmmirror.com/hashery/-/hashery-1.5.1.tgz"
+  integrity sha512-iZyKG96/JwPz1N55vj2Ie2vXbhu440zfUfJvSwEqEbeLluk7NnapfGqa7LH0mOsnDxTF85Mx8/dyR6HfqcbmbQ==
+  dependencies:
+    hookified "^1.15.0"
+
 hasown@^2.0.2, hasown@^2.0.4:
   version "2.0.4"
   resolved "https://registry.npmmirror.com/hasown/-/hasown-2.0.4.tgz"
@@ -586,6 +953,31 @@ hookable@^5.5.3:
   resolved "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz"
   integrity sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==
 
+hookified@^1.15.0, hookified@^1.15.1:
+  version "1.15.1"
+  resolved "https://registry.npmmirror.com/hookified/-/hookified-1.15.1.tgz"
+  integrity sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg==
+
+hookified@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.npmmirror.com/hookified/-/hookified-2.2.0.tgz"
+  integrity sha512-p/LgFzRN5FeoD3DLS6bkUapeye6E4SI6yJs6KetENd18S+FBthqYq2amJUWpt5z0EQwwHemidjY5OqJGEKm5uA==
+
+html-tags@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npmmirror.com/html-tags/-/html-tags-5.1.0.tgz"
+  integrity sha512-n6l5uca7/y5joxZ3LUePhzmBFUJ+U2YWzhMa8XUTecSeSlQiZdF5XAd/Q3/WUl0VsXgUwWi8I7CNIwdI5WN1SQ==
+
+htmlparser2@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-9.1.0.tgz"
+  integrity sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.1.0"
+    entities "^4.5.0"
+
 https-proxy-agent@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmmirror.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz"
@@ -594,16 +986,71 @@ https-proxy-agent@^5.0.1:
     agent-base "6"
     debug "4"
 
-ini@^1.3.4:
+ignore@^7.0.5, ignore@^7.0.6:
+  version "7.0.10"
+  resolved "https://registry.npmmirror.com/ignore/-/ignore-7.0.10.tgz"
+  integrity sha512-HpbUakT7xp5miBUywCHf36ZEuAJNklBJDDsGpUIjMzOSmM8ELSfA9Sa/QDPeNeqeoN31u+UTCkL4klCOVvRm4Q==
+
+import-fresh@^3.3.0:
+  version "3.3.1"
+  resolved "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.1.tgz"
+  integrity sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+import-meta-resolve@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmmirror.com/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz"
+  integrity sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==
+
+ini@^1.3.4, ini@^1.3.5:
   version "1.3.8"
   resolved "https://registry.npmmirror.com/ini/-/ini-1.3.8.tgz"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.npmmirror.com/is-arrayish/-/is-arrayish-0.2.1.tgz"
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
+is-glob@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-path-inside@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/is-path-inside/-/is-path-inside-4.0.0.tgz"
+  integrity sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==
+
 is-what@^5.2.0:
   version "5.5.0"
   resolved "https://registry.npmmirror.com/is-what/-/is-what-5.5.0.tgz"
   integrity sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==
 
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
 js-beautify@^2.0.0:
   version "2.0.3"
   resolved "https://registry.npmmirror.com/js-beautify/-/js-beautify-2.0.3.tgz"
@@ -620,6 +1067,50 @@ js-cookie@^3.0.8:
   resolved "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.8.tgz"
   integrity sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw==
 
+js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+js-tokens@^9.0.0:
+  version "9.0.1"
+  resolved "https://registry.npmmirror.com/js-tokens/-/js-tokens-9.0.1.tgz"
+  integrity sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==
+
+js-yaml@^4.1.0:
+  version "4.3.2"
+  resolved "https://registry.npmmirror.com/js-yaml/-/js-yaml-4.3.2.tgz"
+  integrity sha512-SFNOvSJ+Dgf/9An904Yx+CgSlIPCkIpao4qo51lpee25TIRejdH3rhR4EZMGoNx3/TP3O+wzWuiTFl4sqbltzA==
+  dependencies:
+    argparse "^2.0.1"
+
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.npmmirror.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+json-schema-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
+keyv@^5.6.0:
+  version "5.6.0"
+  resolved "https://registry.npmmirror.com/keyv/-/keyv-5.6.0.tgz"
+  integrity sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==
+  dependencies:
+    "@keyv/serialize" "^1.1.1"
+
+kind-of@^6.0.2:
+  version "6.0.3"
+  resolved "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
 linkify-it@^5.0.2:
   version "5.0.2"
   resolved "https://registry.npmmirror.com/linkify-it/-/linkify-it-5.0.2.tgz"
@@ -627,6 +1118,11 @@ linkify-it@^5.0.2:
   dependencies:
     uc.micro "^2.0.0"
 
+lodash.truncate@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.npmmirror.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz"
+  integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==
+
 lru-cache@^11.0.0:
   version "11.5.3"
   resolved "https://registry.npmmirror.com/lru-cache/-/lru-cache-11.5.3.tgz"
@@ -663,11 +1159,39 @@ math-intrinsics@^1.1.0:
   resolved "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz"
   integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
 
+mathml-tag-names@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/mathml-tag-names/-/mathml-tag-names-4.0.0.tgz"
+  integrity sha512-aa6AU2Pcx0VP/XWnh8IGL0SYSgQHDT6Ucror2j2mXeFAlN3ahaNs8EZtG1YiticMkSLj3Gt6VPFfZogt7G5iFQ==
+
+mdn-data@2.27.1:
+  version "2.27.1"
+  resolved "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.27.1.tgz"
+  integrity sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==
+
 mdurl@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npmmirror.com/mdurl/-/mdurl-2.1.0.tgz"
   integrity sha512-1+HBaOx0zi/dQWht8rNv9MYf9qqpqL/kxI0hXImU6Y547zM6Sni8BQibt7ifgMcYtQg41ao3Ivd6cnSM86inpg==
 
+meow@^14.1.0:
+  version "14.1.0"
+  resolved "https://registry.npmmirror.com/meow/-/meow-14.1.0.tgz"
+  integrity sha512-EDYo6VlmtnumlcBCbh1gLJ//9jvM/ndXHfVXIFrZVr6fGcwTUyCTFNTLCKuY3ffbK8L/+3Mzqnd58RojiZqHVw==
+
+merge2@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+micromatch@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.npmmirror.com/micromatch/-/micromatch-4.0.8.tgz"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
 mime-db@1.52.0:
   version "1.52.0"
   resolved "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz"
@@ -714,11 +1238,33 @@ nopt@^10.0.1:
   dependencies:
     abbrev "^5.0.0"
 
+normalize-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
 obug@^2.1.4:
   version "2.2.1"
   resolved "https://registry.npmmirror.com/obug/-/obug-2.2.1.tgz"
   integrity sha512-XrsrhT5sybtKI6wakr2SPOlGZWWYbUXZ7a0jT8/QOeAPau+1X/bSegNe5YR75oJmEZQbKningirmGOEJCIk61Q==
 
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
+parse-json@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.npmmirror.com/parse-json/-/parse-json-5.2.0.tgz"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
 path-scurry@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmmirror.com/path-scurry/-/path-scurry-2.0.2.tgz"
@@ -737,6 +1283,11 @@ picocolors@^1.1.1:
   resolved "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz"
   integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
 
+picomatch@^2.3.1:
+  version "2.3.2"
+  resolved "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.2.tgz"
+  integrity sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==
+
 "picomatch@^3 || ^4", picomatch@^4.0.3, picomatch@^4.0.4, picomatch@^4.0.7:
   version "4.0.7"
   resolved "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.7.tgz"
@@ -749,7 +1300,34 @@ pinia@^3.0.1:
   dependencies:
     "@vue/devtools-api" "^7.7.7"
 
-postcss@^8.5.19, postcss@^8.5.6:
+postcss-html@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/postcss-html/-/postcss-html-2.0.0.tgz"
+  integrity sha512-f2Rvw5FCollEfVj3wfN7JdQb7n2rNIthW+epw2EByio7M6P7RH0BTj8a/ODHrUXd0cmO7ychb6YniymV93182Q==
+  dependencies:
+    htmlparser2 "^9.1.0"
+    js-tokens "^9.0.0"
+    postcss-safe-parser "^7.0.1"
+
+postcss-safe-parser@^7.0.1:
+  version "7.1.0"
+  resolved "https://registry.npmmirror.com/postcss-safe-parser/-/postcss-safe-parser-7.1.0.tgz"
+  integrity sha512-1WzZxRLaAFwEh6Do+zyGpjWV3nGJNxxhuh7Ubu/q1ICImMgZJnLwhoaEpRbG4pJppp2Y1ncL9ffA2f+LhrefQg==
+
+postcss-selector-parser@^7.1.1, postcss-selector-parser@^7.1.5:
+  version "7.1.6"
+  resolved "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-7.1.6.tgz"
+  integrity sha512-7qASPzhKF2l2KLboRZux8CCTRMdGiV08vWmyKzPz22qZ7ZjQBOeY7rNzNoCLSUiftJ7HUq0GERHmxw/t0dCdMw==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmmirror.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
+postcss@^8.4.31, postcss@^8.5.0, postcss@^8.5.19, postcss@^8.5.26, postcss@^8.5.6:
   version "8.5.26"
   resolved "https://registry.npmmirror.com/postcss/-/postcss-8.5.26.tgz"
   integrity sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==
@@ -773,6 +1351,33 @@ punycode.js@^2.3.1:
   resolved "https://registry.npmmirror.com/punycode.js/-/punycode.js-2.3.1.tgz"
   integrity sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==
 
+qified@^0.10.1:
+  version "0.10.1"
+  resolved "https://registry.npmmirror.com/qified/-/qified-0.10.1.tgz"
+  integrity sha512-+Owyggi9IxT1ePKGafcI87ubSmxol6smwJ+RAHDQlx9+9cPwFWDiKFFCPuWhr9ignlGpZ9vDQLw67N4dcTVFEA==
+  dependencies:
+    hookified "^2.1.1"
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+require-from-string@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmmirror.com/require-from-string/-/require-from-string-2.0.2.tgz"
+  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+reusify@^1.0.4:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/reusify/-/reusify-1.1.0.tgz"
+  integrity sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==
+
 rfdc@^1.4.1:
   version "1.4.1"
   resolved "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz"
@@ -813,11 +1418,37 @@ rollup@^4.43.0:
     "@rollup/rollup-win32-x64-msvc" "4.62.4"
     fsevents "~2.3.2"
 
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.npmmirror.com/run-parallel/-/run-parallel-1.2.0.tgz"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
 semver@^7.7.4:
   version "7.8.5"
   resolved "https://registry.npmmirror.com/semver/-/semver-7.8.5.tgz"
   integrity sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==
 
+signal-exit@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.npmmirror.com/signal-exit/-/signal-exit-4.1.0.tgz"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
+slash@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npmmirror.com/slash/-/slash-5.1.0.tgz"
+  integrity sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==
+
+slice-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/slice-ansi/-/slice-ansi-4.0.0.tgz"
+  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
 source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz"
@@ -833,6 +1464,90 @@ std-env@^4.2.0:
   resolved "https://registry.npmmirror.com/std-env/-/std-env-4.2.0.tgz"
   integrity sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==
 
+string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^8.2.2:
+  version "8.3.0"
+  resolved "https://registry.npmmirror.com/string-width/-/string-width-8.3.0.tgz"
+  integrity sha512-ZbmZM0JCihQN91dWnxoipT2KOEyHqEyfRXUyjuRhW8b/xnqPDoq4gWEVApTVa9db2wN8mmoikgFBbjh71+cGeQ==
+  dependencies:
+    get-east-asian-width "^1.5.0"
+    strip-ansi "^7.1.2"
+
+strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^7.1.2:
+  version "7.2.0"
+  resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.2.0.tgz"
+  integrity sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==
+  dependencies:
+    ansi-regex "^6.2.2"
+
+stylelint-config-recommended@^18.0.0:
+  version "18.0.0"
+  resolved "https://registry.npmmirror.com/stylelint-config-recommended/-/stylelint-config-recommended-18.0.0.tgz"
+  integrity sha512-mxgT2XY6YZ3HWWe3Di8umG6aBmWmHTblTgu/f10rqFXnyWxjKWwNdjSWkgkwCtxIKnqjSJzvFmPT5yabVIRxZg==
+
+stylelint-config-standard@^40.0.0:
+  version "40.0.0"
+  resolved "https://registry.npmmirror.com/stylelint-config-standard/-/stylelint-config-standard-40.0.0.tgz"
+  integrity sha512-EznGJxOUhtWck2r6dJpbgAdPATIzvpLdK9+i5qPd4Lx70es66TkBPljSg4wN3Qnc6c4h2n+WbUrUynQ3fanjHw==
+  dependencies:
+    stylelint-config-recommended "^18.0.0"
+
+stylelint@^17.0.0, stylelint@^17.15.0:
+  version "17.15.0"
+  resolved "https://registry.npmmirror.com/stylelint/-/stylelint-17.15.0.tgz"
+  integrity sha512-mWIkesYQvQjf4Kvdeu9ns0IL8/K/wtjaGxPqsPd6DlLZvaQxGysJsocxUDrBcyHQ5VleAk4uSMat4yMrVED7PA==
+  dependencies:
+    "@csstools/css-calc" "^3.3.0"
+    "@csstools/css-parser-algorithms" "^4.0.0"
+    "@csstools/css-syntax-patches-for-csstree" "^1.1.9"
+    "@csstools/css-tokenizer" "^4.0.0"
+    "@csstools/media-query-list-parser" "^5.0.0"
+    "@csstools/selector-resolve-nested" "^4.0.1"
+    "@csstools/selector-specificity" "^6.0.0"
+    colord "^2.10.0"
+    cosmiconfig "^9.0.2"
+    css-functions-list "^3.3.3"
+    css-tree "^3.2.1"
+    debug "^4.4.3"
+    fast-glob "^3.3.3"
+    fastest-levenshtein "^1.0.16"
+    file-entry-cache "^11.1.5"
+    global-modules "^2.0.0"
+    globby "^16.2.4"
+    globjoin "^0.1.4"
+    html-tags "^5.1.0"
+    ignore "^7.0.6"
+    import-meta-resolve "^4.2.0"
+    mathml-tag-names "^4.0.0"
+    meow "^14.1.0"
+    micromatch "^4.0.8"
+    normalize-path "^3.0.0"
+    picocolors "^1.1.1"
+    postcss "^8.5.26"
+    postcss-safe-parser "^7.0.1"
+    postcss-selector-parser "^7.1.5"
+    postcss-value-parser "^4.2.0"
+    string-width "^8.2.2"
+    supports-hyperlinks "^4.5.0"
+    svg-tags "^1.0.0"
+    table "^6.9.0"
+    write-file-atomic "^7.0.1"
+
 superjson@^2.2.2:
   version "2.2.6"
   resolved "https://registry.npmmirror.com/superjson/-/superjson-2.2.6.tgz"
@@ -840,6 +1555,35 @@ superjson@^2.2.2:
   dependencies:
     copy-anything "^4"
 
+supports-color@^10.2.2:
+  version "10.2.2"
+  resolved "https://registry.npmmirror.com/supports-color/-/supports-color-10.2.2.tgz"
+  integrity sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==
+
+supports-hyperlinks@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.npmmirror.com/supports-hyperlinks/-/supports-hyperlinks-4.5.0.tgz"
+  integrity sha512-ZW2OvfeCXrNTbLakPUzjQG922EeGCOteFSVoek5DKStTh898wf7zgtuFlzQN8HfZCxC3Eh02yJVrRW51hADf+w==
+  dependencies:
+    has-flag "^5.0.1"
+    supports-color "^10.2.2"
+
+svg-tags@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/svg-tags/-/svg-tags-1.0.0.tgz"
+  integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==
+
+table@^6.9.0:
+  version "6.9.0"
+  resolved "https://registry.npmmirror.com/table/-/table-6.9.0.tgz"
+  integrity sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==
+  dependencies:
+    ajv "^8.0.1"
+    lodash.truncate "^4.4.2"
+    slice-ansi "^4.0.0"
+    string-width "^4.2.3"
+    strip-ansi "^6.0.1"
+
 tinybench@^6.1.4:
   version "6.2.0"
   resolved "https://registry.npmmirror.com/tinybench/-/tinybench-6.2.0.tgz"
@@ -858,6 +1602,13 @@ tinyglobby@^0.2.15, tinyglobby@^0.2.17:
     fdir "^6.5.0"
     picomatch "^4.0.4"
 
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
 uc.micro@^2.0.0, uc.micro@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmmirror.com/uc.micro/-/uc.micro-2.1.0.tgz"
@@ -868,6 +1619,16 @@ undici-types@~8.9.0:
   resolved "https://registry.npmmirror.com/undici-types/-/undici-types-8.9.0.tgz"
   integrity sha512-KTDyRTYX8sWmKXAikPHHSyc63CRPETMctyjKFupcC6OBLXT3xsN0e9aF7m+mIXutFWpUXuedtowG7iLOzp0kQg==
 
+unicorn-magic@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.npmmirror.com/unicorn-magic/-/unicorn-magic-0.4.1.tgz"
+  integrity sha512-lzlXPoVB0Uy/FvTaUgX39RbixYiSKoc3JSoSf01+0c2B6FR3qdYIPN7Qjo/AV7n6sqLCk0509cT3LRj1oSZ1+A==
+
+util-deprecate@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz"
+  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+
 "vite@^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0", "vite@^6.0.0 || ^7.0.0 || ^8.0.0", "vite@^6.4.0 || ^7.0.0 || ^8.0.0", vite@^7.0.0:
   version "7.3.6"
   resolved "https://registry.npmmirror.com/vite/-/vite-7.3.6.tgz"
@@ -922,11 +1683,25 @@ whatwg-mimetype@^3.0.0:
   resolved "https://registry.npmmirror.com/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz"
   integrity sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==
 
+which@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.npmmirror.com/which/-/which-1.3.1.tgz"
+  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
+  dependencies:
+    isexe "^2.0.0"
+
 why-is-node-running@^3.2.1:
   version "3.2.2"
   resolved "https://registry.npmmirror.com/why-is-node-running/-/why-is-node-running-3.2.2.tgz"
   integrity sha512-NKUzAelcoCXhXL4dJzKIwXeR8iEVqsA0Lq6Vnd0UXvgaKbzVo4ZTHROF2Jidrv+SgxOQ03fMinnNhzZATxOD3A==
 
+write-file-atomic@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.npmmirror.com/write-file-atomic/-/write-file-atomic-7.0.1.tgz"
+  integrity sha512-OTIk8iR8/aCRWBqvxrzxR0hgxWpnYBblY1S5hDWBQfk/VFmJwzmJgQFN3WsoUKHISv2eAwe+PpbUzyL1CKTLXg==
+  dependencies:
+    signal-exit "^4.0.1"
+
 ws@^8.21.0:
   version "8.22.0"
   resolved "https://registry.npmmirror.com/ws/-/ws-8.22.0.tgz"