Merge diff-panel-design: style the project-detail diff panel (52 unstyled classes)

docs/PROGRESS_LOG.md

@@ -24,6 +24,28 @@
 
 > 新会话读到的第一块。保持准确,只描述"此刻"。
 
+### 🎨 [x] Project 详情页 diff 面板对齐设计(2026-07-30,worktree `diff-panel-design`)
+
+- **起因**: 用户给了张 project 详情页截图,只说"这里的 ui 还没有对齐设计"。截图里可见的是 `Working / Staged / Working tree ▾ / ✕ Close` 四个原生白按钮和一行裸体 `No changes`。
+- **真实范围比截图大得多**: 写了个脚本把 `public/*.ts` 里所有 class(**含模板字面量**,`el('div', \`df-status df-status-${'$'}{...}\`) 这类)与 `style.css` 的选择器对拍 —— **diff 面板整套 52 个 class 在 style.css 里一条规则都没有**。不只是按钮:`.df-line/.df-added/.df-removed` 也缺,所以 diff 正文既没有等宽字体也**没有任何 +/- 着色**。第一版范围清单漏了模板字面量那批(`df-status-*` 六个、`df-line` 的 kind 类、`tl-icon-*` 五个),发现后**停掉已启动的 workflow、改正 SCOPE 再重跑** —— 否则产出的 CSS 会完全不管 diff 正文,即最重要的那部分。
+- **编排**: 5 轮 workflow / 21 个 agent。第 1 轮是**评委制**:recon → 3 份不同设计取向的 CSS 提案(贴合现有面板 / sunk 数据井 / code-review 可读性)→ 3 个正交视角(token 合规、DOM 正确性、手机可读性)各自给三份打分 → 合成。`code-review` 以 22.5 : 19 : 16 胜出。第 2–5 轮是"对抗复核 → orchestrator 分诊 → 修 → 再复核"。
+- **验证台(关键)**: 光靠 agent 算对比度会跑偏,所以搭了个可截图的台子 —— 临时 `public/_vis.ts` 用 esbuild 打包、stub `fetch` 喂 6 文件 fixture(六种 `FileStatus` + 空态 + 错误态 + 超长行 + 时间轴),html 放 scratchpad、`style.css` 做符号链接,`python3 -m http.server` + chrome-devtools MCP 截图。**这是真实 DOM,不是手写的仿制品**。900px 与 390×844 两档都过了一遍;删除行底色 16% vs 24% 是在浏览器里 A/B 出来的。收工前 `_vis.ts` 和所有 `.vis-*.png` 已删除(`git status` 只剩两个改动文件)。
+- **对抗复核抓到的、光看 CSS 看不出来的**(全部已修):
+  - `.df-viewer` 没写 `font-size`,而 W4 那三个控件都是 `font: inherit` → **Commit / Push 以 UA 默认 16px 渲染**,是整个面板最大的字,390px 下还把 Push 挤到单独一行。
+  - **新增行底色几乎不可见**(1.088:1),删除行却一眼可辨 —— 恰好反了,你要提交的是新增那一半。
+  - `.proj-tl-container` 的高度上限:`overflow-y:auto` 被 `mountTimeline` 每 5s 的 wipe-and-re-append 清掉滚动位置;换 `mask-image` 后 `mask-clip: border-box` **把井自己的底边和圆角一起吃掉**;换 `::after` 渐变后又**无条件触发**,把没被裁掉的行和空态那句话一起蒙掉(3.35:1,比它本来要修的 3.66:1 还差)。
+  - `.df-file > .df-file-header` 没限定作用域,**漏到终端页**:`tabs.ts:492` 的 `.approval-preview` 也调 `renderDiffFile`,自带 padding,叠成双层。
+  - base 对比模式下 `updateTabState` 只加 `df-tab-disabled`、**不摘 `df-tab-active`**,金色 pill 半透明留着 → 工具栏在撒谎;第一次修过头,`--text-faint × opacity .45` 把标签压到 1.64:1,截图确认是两个空白方块。
+- **orchestrator 的三个裁定**(都推翻了复核的建议):
+  1. **时间轴高度上限整个去掉**。四种封顶机制(auto 滚动 / mask / ::after / `:has()` 行数门)每一种都比它省下的高度代价更大;行数门在这里其实**能**测准(`.tl-label` 是 nowrap),但仍然拒绝 —— 它还是个 cap。这条 CSS 出现之前 `.proj-tl-container` 根本没有规则、就是自然生长,`maxEvents = 50` 已经封了顶。注释里写清楚了理由,因为一定会有人想加回来。
+  2. **横向滚动条留在 `.df-lines`(每 hunk 一个),不上提到 `.df-file`** —— `.df-file-header` 按容器宽度排版,一提上去,右滚时文件路径就滑出视野,读代码时丢标签。
+  3. **删除行底色做成派生 token**。第 4 轮把 `color-mix` 换成 `rgba` 字面量,复核当场证明:改 `--warn` 时同一条规则里的竖条和字形跟着变、底色冻住,一行两种色且无任何报错。最终 `--warn-wash: color-mix(in srgb, var(--warn) 24%, transparent)`,已写进 THEME.md。
+- **顺带修的既有缺陷**: `.df-commit-btn` 硬编码 `#1a1712`(THEME.md 规定金底必须 `var(--on-accent)`);`.proj-pr-hidden` 是个没有规则的"隐藏"class;`.proj-dot-stuck` 缺规则(`ClaudeStatus` 有 `stuck`,dot 落回 `--text-faint`,与"没有 hook 信号"同色不可分),补 `--warn`,与 `.tl-icon-stuck` 一致。
+- **一个反复出现的教训**: 这个文件的注释是承重的,而连续三轮里**每一轮修注释的那轮自己又写进了新的假注释** —— 数着的绝对句("就这两处"、"另外五个按钮")和像素推导("content box = viewport − 20",漏了 11px 细滚动条)。最后一轮的规矩改成:**只写定性理由和代码真正用到的那一个阈值,其余像素数字和计数全删**。写不错的注释比今天精确的注释值钱。
+- **验证**: `npm run typecheck` exit 0;`npm test` **2216 单测 + 27 e2e 全绿**(CSS-only 改动,测试不读 style.css,列在这里只为证明没碰别的);esbuild 解析通过;52 个 class 逐一 grep 复核。
+- **诚实的未闭合项**: 全部验证走的是验证台,**没有在真机/真手机上开过这个面板**;`.df-truncated-warning` 需要超大 diff、`.df-status-binary` 需要二进制文件,fixture 造得出来但真实数据没跑过。另:project **网格**页的 `.proj-group-flat / -namespace / -other`(`projects.ts:1476`)同样无规则 —— 不在本次范围(不是详情页),留给下一轮;注意 `proj-group-active` 是个已有的**状态**修饰符,同前缀,若 `group.kind` 哪天出现 `active` 会撞车。
+- **commit**: (见本次提交)
+
 ### 📱 [x] iOS 收尾波 — 6 项整改 + P2 全波 + 两端令牌(2026-07-30,worktree `ios-completion`)
 
 - **起因**: 先做了一次 16-agent 的 iOS 完成度审计(2026-07-29),结论是"代码层面基本完工、交付层面卡在真机门口":43 个计划任务 27 DONE / 11 PARTIAL / 5 MISSING,**从未在任何真机上跑过一次**,且已落后服务端两个月的新功能。用户要求"全部实现",并定了三个范围问题:P2 全 5 项在内、Apple 账号是**免费个人 team**、Android 令牌一起补。

docs/THEME.md

@@ -22,6 +22,7 @@
 | `--accent-2` | `#c9892f` | 深金（渐变 / hover） |
 | `--accent-soft` | `rgba(227,166,74,.15)` | 强调色半透明（选中底、chip、聚焦光晕） |
 | `--on-accent` | `#1a1305` | **金色底上的文字色**（深墨，保证对比度——金底配白字会糊） |
+| `--warn-wash` | `color-mix(in srgb, var(--warn) 24%, transparent)` | `--warn` 的 24% 半透明：diff 删除行底色。**由 `--warn` 派生**，换肤自动跟随，勿改写成 rgba 字面量（`--warn` 见 `:root` 的 Git 面板语义） |
 
 ## 状态色（语义独立，勿与强调色混用）
 
@@ -33,7 +34,7 @@
 | `--amber` | `#f5b14c` | 连接中 connecting |
 | `--red` | `#ff6b6b` | 断开 / 出错 disconnected / error |
 
-> Project 面板里的 session 状态语义（v0.6）：`working = --accent 金` · `waiting = --amber 琥珀(闪)` · `idle = 中性灰 #8b8a86` · `dirty = 暖琥珀`。
+> Project 面板里的 session 状态语义（v0.6）：`working = --accent 金` · `waiting = --amber 琥珀(闪)` · `stuck = --warn` · `idle = 中性灰 #8b8a86` · `dirty = 暖琥珀`。
 
 ## 接入约定（改主题只改这里）