diff --git a/workers/admin-panel/.impeccable/critique/2026-09-05T12-06-17Z__workers-admin-panel-web-src-views-history-view-tsx.md b/workers/admin-panel/.impeccable/critique/2026-09-05T12-06-17Z__workers-admin-panel-web-src-views-history-view-tsx.md
new file mode 100644
index 0000000..4272eb0
--- /dev/null
+++ b/workers/admin-panel/.impeccable/critique/2026-09-05T12-06-17Z__workers-admin-panel-web-src-views-history-view-tsx.md
@@ -0,0 +1,182 @@
+---
+target: 前端发布历史 diff 功能
+total_score: 15
+max_score: 40
+na_heuristics: 
+p0_count: 2
+p1_count: 3
+timestamp: 2026-09-05T12-06-17Z
+slug: workers-admin-panel-web-src-views-history-view-tsx
+---
+Method: dual-agent（A 设计评审 · B 检测器 + 浏览器取证，两个隔离子代理并行；A 先完成，检测结果后进综合）
+
+评审对象：jouska 管理面板「发布历史 + 版本对比（diff）」
+主文件：`web/src/views/history-view.tsx`、`web/src/components/revision-diff.tsx`、`web/src/components/rollback-dialog.tsx`（服务端判定在 `src/diff.ts`）
+Mode: **Operate**（操作者要完成任务：看懂两版之间改了什么、必要时退回去）
+
+## Design Health Score
+
+| # | 启发式 | 分 | 关键问题 |
+|---|---|---|---|
+| 1 | 系统状态可见 | 1 | 点满两版后视口零变化：diff 标题在折线下 51px（6 条 revision）／6.8 屏之外（50 条），页面不滚、不播报 |
+| 2 | 贴近真实世界 | 2 | 「原值／新值」是相对词，而哪一侧是原值由点击顺序决定；标题用双向 `↔` |
+| 3 | 用户控制与自由 | 2 | 选错一张不能只换那一张；Esc 全页无作用；同一对 diff 失败后**无法重试**（effect 依赖 `[from,to]` 不变） |
+| 4 | 一致性与标准 | 2 | 回滚弹窗与发布弹窗同源（优秀）；但同页三套报错语法、三套「你不能做」答法，且与 `audit-view` 的四处成例都不一样 |
+| 5 | 防错 | 1 | 方向可静默反转的 diff = 决策错误生成器；键盘按回滚会**静默执行另一个动作** |
+| 6 | 识别优于回忆 | 1 | 读懂一行要同时记 7–8 件事，其中 3 件不在屏幕上 |
+| 7 | 灵活与高效 | 1 | 零快捷键、无「与线上比」、无复制、无分页；50 条时主路径含 6.8 屏手动滚动 |
+| 8 | 美观与极简 | 2 | 视觉权重反了：`新增` 是全系统最重的 primary 实底，`删除` 只有 10% 淡染；时间轴竖线 10% 白且被 `gap-3` 切断 |
+| 9 | 帮助识别／诊断／恢复 | 1 | 「有一侧没有快照」不说哪一侧（服务端 `detail` 里说了，客户端扔了）；无重试；未知码裸奔 |
+| 10 | 帮助与文档 | 2 | 文案好的地方非常好，但 diff 内零解释；唯一那句解释挂在 `pointer-events:none` 的禁用按钮 `title` 上，鼠标永远碰不到 |
+| **合计** | | **15/40** | **Poor —— 主体验需要大修** |
+
+十条全部适用（Operate 面板），未使用 n/a。
+
+分数低不是因为装饰层差，恰恰相反：**四个最重的缺陷全在主任务路径上**，而样式纪律是干净的。
+
+## Design Specificity 判定
+
+**列表是长出来的，diff 卡是搬过来的。**
+
+时间轴那一侧带着 jouska 的性格，而且是别的产品抄不走的那种：`live` 圆点换主色、`回滚自 #43` 把 rollback 出处写在卡上、`无快照` + 断档说明行承认记录的边界。这三样只在「一次发布 = 一次 KV 写 + 一份快照 + 一条审计」这个具体机制下才有意义。
+
+diff 卡则是任何 config 后台都能原样搬走的形态，判据不是「像 git diff」，而是**它对 jouska 的领域一无所知**：
+
+- 面板自己有 `src/danger.ts`（12+ 条危险字段带 level）和 `lib/types.ts` 的 `DANGER_REASONS`（每条配一句中文后果）。`routes.<id>.access.keys` 就在里面，配着「粘错了真 key 的主人从此被挡在门外」。发布弹窗遇到它会铺 `danger-surface` 并要求亲手勾一次；diff 里它是第 8 行灰字，和 `timeoutMs: 30000 → 10000` 一模一样。同一个字段、同一个产品、两种立场。
+- `移序 第 5 位 → 第 1 位` 拿的是 badge 里最轻的 `outline`，还被排到最后 —— 而「顺序即优先级、首个匹配胜出」是 `shadow.ts` 存在的全部理由。
+- 路由 id 从不解析成 host/path，虽然 `matchSummary()` 就在旁边、路由页天天在用。
+
+现成材料没用上的地方：服务端 `diffRoutes` 本来就是按 `id` 归并的，前端把这个结构拍平成按动词分组；`src/api/revisions.ts` 的注释写着 diff 端点方向自由是 "exactly what the rollback dialog needs" —— 门留了，回滚弹窗没走。
+
+**确定性扫描（Assessment B）**
+
+CLI `detect.mjs --json` 扫这三个文件：**0 条发现，退出码 0**。这个「干净」是被反证过的，不是扫描器没开火：`--no-config --no-design-system` 绕过立档豁免仍是 0；同一扫描器扫整个 `web/src` 出 4 条 `design-system-font-size`（`App.tsx` 的 10px、`ui/button.tsx` 与 `ui/toggle.tsx` 的 0.8rem）；人造探针文件命中 4 条、退出码 2。
+
+浏览器内注入检测器：8 组发现，逐条判定后**真实归属这个功能的是 0 条**：
+
+| 规则 | 数量 | 判定 |
+|---|---|---|
+| `nested-cards` | 7 | **误报，机制可证**：`isCardLikeDOM` 的 `hasBorder` 靠正则 `/\bborder\b/` 匹配类名，命中的是 `CardHeader` 里的 variant 选择器 `[.border-b]:pb-…`，不是画出来的边框。历史页没有一处真的把 Card 套进 Card |
+| `flat-type-hierarchy` | 1 | **误报，DESIGN.md 明文立档**：「封顶 16px、层级靠字重与灰度」「无大标题规则」。扫描器要的 ≥1.25 级差与这条规则直接冲突，规则赢 |
+| `layout-transition` | 1 | 真实但不归这三个文件：`transition-all` 来自官方 registry 基座件（button/badge/toggle/tabs/accordion/switch） |
+| `text-overflow` | 1 | 真实但不归历史页：顶栏账号名 `max-w-16 truncate` |
+| `text-occlusion` | 7 | 覆盖层自检伪影（被遮的是覆盖层自己的标签） |
+
+**结论值得单独说一句：检测器全绿，而这一屏最重的四个问题一个都不在它的射程内。** 键盘路径、结果送达、diff 方向、危险语义 —— 没有一条是能用正则扫出来的。
+
+**覆盖层**：注入成功（`detect.js` 加载、DOM 出现 15 个 `.impeccable-*` 元素、`window.impeccableDetect` 就位），但它跑在无头浏览器里且已关闭 —— **没有留给你看的常驻覆盖层**，上表就是它报的全部内容。为 critique 起的 vite（:5301）与 live-server（:8400）都已停，`pgrep` 自查无残留，仓库 `git status` 干净。
+
+## Overall Impression
+
+**账本记得很老实，读账的那一半没做完。**
+
+时间轴这一半是这个仓库里质量最高的东西之一：它承认自己不知道的事（无快照、断档、路由数未知），而且分三种说法分别解释，没有拿一个 `—` 糊过去。回滚弹窗更是把「回滚就是一次发布」这个后端事实落成了前端形态，一个字都没重新发明。
+
+diff 这一半停在了「把服务端给的字段摆出来」。它正确、诚实、密度也合适 —— 但真正在做 diff 的是人不是工具：你得自己记住哪一版是原值，自己知道 `allowPrivateUpstream` 是危险方向，自己把散在 6 行里的 `api-gw` 拼回一条路由，自己滚 6.8 屏去找结果。
+
+**最大的一个机会**：这一屏真正的主角是 diff，不是列表。把它翻过来 —— 进页面就默认对比「正在服务的那一版」与它前一版，diff 在首屏，列表退成换参照物的选择器 —— 凌晨三点值班的人零点击就拿到答案，「任选两版」变成高级路径。现在是 6500px 的列表当主角。
+
+## What's Working
+
+1. **三种「记录不完整」各说各的话。** 无快照说「早于历史功能，只留下审计记录 —— 能看，不能对比或回滚」；断档说「改动已上线、面板记录没写成，历史无法补记」；路由数未知就说未知。同类产品的做法是藏起来或给个假按钮。这里选了只说实话，而且没把三件事混成一句。
+2. **回滚复用发布的两段式闸门。** 骨架、`confirming && confirmed` 的合取、`danger-surface` 底色、在途锁关闭全部同源，结尾 toast 还补一句「线上约 3 分钟内全面生效」。操作者在两处看到同一张脸，不需要学第二套规则 —— 峰终定律靠这个救回来了。
+3. **卡上那行说明的选材是对的。** `12 条路由 · 把 api-gw 的上游切到新集群…（事故 INC-2291 的临时缓解）` —— 规模 + 意图放同一行，正是事后追查要的两样东西。（呈现有问题，见 P2，但选的东西对。）
+
+## Priority Issues
+
+### [P0] 结果渲染在视口之外，而且没有任何东西把人送过去
+**实测**：6 条 revision 时 diff 标题 `top=1001px`，视口 950px，点击前后 `scrollY` 全程 **0**，`scroll-behavior: auto`，无 `scrollIntoView`；文档从 1064px 直接翻倍到 2036px，**跳版发生在屏外**。50 条 revision（正好是快照滚动保留上限，所以成熟部署永久处在这个状态）时标题在 **6497px = 6.8 屏之下**；390 宽下 **8505px = 10.1 屏之下**。点满两版后视口里唯一的变化是那张卡多一枚 `已选 #46` badge、外加「对比」按钮的文字消失了。
+**为什么要紧**：主任务的完成信号不可见。失败态同样在折线之下 51px —— 用户点完第二张卡，连「对比不了」都看不到。加载态是一行 spinner，到达态是 956px 内容，DESIGN.md「加载完不跳版」在这一屏被以最大幅度违反。
+**修法**（按代价升序）：(a) diff 卡移到列表**之前**，选中两版后插在头卡下方 —— 一处 JSX 换位，顺带解决「看完差异要回头找卡」；(b) 保留位置但选满两版时 `scrollIntoView({block:'start'})` **并**给 diff 卡加 `aria-live="polite"`，让键盘与读屏也收到通知；(c) diff 卡 sticky 在顶栏之下，复用路由编辑器动作栏的 `--panel-header-height` 语法。首选 (a)+(b)。
+**建议命令**：`/impeccable layout`
+
+### [P0] 「回滚」按钮键盘按不动，而且静默变成了另一个动作
+**实测两处取证**：聚焦 #45 的「回滚」→ 按 Enter → **弹窗不开**，改成这张卡被选进对比（`aria-pressed=true`）；按空格 → 又取消选中；鼠标点同一个按钮 → 弹窗「回滚到 revision 45」正常打开。事件取证：`capture@card key=Enter target=BUTTON defaultPrevented=false` → `bubble@window … defaultPrevented=true`。
+**根因**：`history-view.tsx:97-102` 的 `onKeyDown` 挂在 `Card` 上，内层原生 `<button>` 的 keydown 冒泡上来被它接住，`preventDefault()` 掐掉了浏览器给按钮合成 click 的默认动作，然后 `onToggleSelect()` 照跑。`onClick` 那侧有 `stopPropagation()`，keydown 这侧没有。
+**为什么要紧**：PRODUCT.md 把键盘可达写成硬要求，这是选 Base UI 的直接理由。破坏性动作对纯键盘用户**完全不可达**（WCAG 2.1.1），而且不是报错而是**做了别的事** —— 最坏的一类失败。「对比」按钮之所以看着正常，纯属卡片处理器恰好干了同一件事，是巧合不是设计。
+**修法**：卡片不该同时是按钮。把选择改成 CardHeader 里一个真正的 `Checkbox`（或一个显式 toggle 按钮），`Card` 退回普通容器 —— 一并修掉下面那条可访问名问题。若要保留整卡可点，最小修补是两个内层按钮加 `onKeyDown={(e) => e.stopPropagation()}`，并把卡片 handler 改成只在 `event.target === event.currentTarget` 时响应。
+**建议命令**：`/impeccable harden`
+
+### [P1] diff 的方向由点击顺序决定，屏幕上无从恢复
+**实测**：先点 #47（顶部、live、就是它坏的）再点 #46 → 标题 `对比 #47 ↔ #46`，`from=47`。于是「原值」= 较**新**那一版，「新值」= 较旧那一版。**自上而下点 —— 唯一自然的动作 —— 得到的 diff 语义是反的**，而 `↔` 是双向箭头，主动否认存在方向。
+**更隐蔽两处**：① `toggleSelect` 里取消第一个会把第二个提到 `a` 槽，方向静默翻转；② 挤出规则实测是 `[47,46]` → 点 #45 得 `[47,45]` → 点 #44 得 `[47,44]`，**第一次选的被钉死、第二槽轮换**，而代码注释写的是「挤掉最早的那个」—— 与行为相反。两张选中卡视觉完全相同，没有任何东西区分「锚」与「轮换槽」。
+**为什么要紧**：事故排查里一个反向的 diff 不是不便，是错误决策生成器 —— 会把「已经修好」读成「刚被改坏」。
+**修法**：方向钉死成时间序（`from = min(revision)`），标签从相对词换成绝对指称（`#46 的值` / `#47 的值`），标题 `#46 → #47`；两张选中卡加 `A（原）`/`B（新）` 标记让挤出规则可见。要保留「任选两版」也至少把 `↔` 换成 `→`。
+**建议命令**：`/impeccable clarify`
+
+### [P1] 产品自己的危险词汇在 diff 里缺席
+`access.keys`、`allowPrivateUpstream`、`upstreamHeaders`、`requestHeaders.set`… 全在 `src/danger.ts` 与 `lib/types.ts` 的 `DANGER_REASONS` 里带着 level 和中文后果。在 diff 里它们与 `timeoutMs` 同权重、同灰度、无 level、无 reason、无跳转。DESIGN.md「危险有底色规则」原文要求同一语义在不同页面同底色，并点名了预览页与发布弹窗 —— diff 是第三处，没跟上。`revision-diff.tsx` 甚至没 import `DANGER_REASONS`，而隔壁 `rollback-dialog.tsx` import 了。
+**修法**：`DiffEntry.path` 去掉 `routes.<id>.` 前缀后与 `DANGER_REASONS` 做后缀匹配，命中的行铺 `danger-surface` + 附那句中文 reason；更干净是服务端在 `DiffEntry` 上带 `risk?: FieldRisk`（判定仍只有 `dangerFlags` 一份，前端仍只渲染）。顺手把危险条数提到标题：`对比 #46 → #47 · 13 项差异，其中 2 项危险`。
+**建议命令**：`/impeccable colorize`
+
+### [P1] 卡片 `role="button"` 的可访问名是整张卡，且包住了两个按钮；diff 到达无播报
+**实测**：#47 卡的可访问名 **118 字**（选中后 122 字），字面是 `#47正在服务4分钟前 · 2026/09/05 … · ops@example.com对比回滚12 条路由 · 把 api-gw 的上游切到新集群…` —— `ops@example.com对比回滚12 条路由` 连成一串念出来。ARIA 规定 `role="button"` 的后代是 presentational，遵守这条的 AT 会把两个内层按钮整个抹掉；Tab 序实测是「卡 → 卡内两按钮 → 下一张卡」，每条 revision 吃 2–3 个 Tab 位。
+**附带三条**：① 选中后「对比」按钮 `textContent=""`、无 `aria-label`、无 `title`，**可访问名为空**（WCAG 4.1.2），宽度从 66px 掉到 36px；② 全页 live region 只有发布栏那一个，diff 开始加载／到达／失败**全程静默**，`diffCardAttrs` 实测为空；③ 全页只有两个 heading，都是 diff 内部的 `<h4>`（`路由`、`表级默认值`），没有 h1/h2/h3，「发布历史」是 `card-title` div —— 按标题导航会走进两个孤立的 h4。
+**修法**：结构同上（Checkbox）。不动结构的话至少给卡片显式 `aria-label`、把选中态按钮标签换成「取消对比」而不是空串（`history-view.test.tsx` 里那个 `/对比|取消/` 正则说明这本来就是原意，现在的测试是靠空名字才通过的）、diff 卡加 `aria-live="polite"`、页面标题升成真 heading。
+**建议命令**：`/impeccable audit`
+
+### [P2] 值不可核对，长值不可展开
+`MAX_VALUE_CHARS = 120` 之后只留一个裸省略号，被截断的恰好是哈希和 body rewrite 规则 —— 「必须逐字符核对」的那两类值。`messages.ts` 里备好的 `t.history.diff.truncated`（「（过长已截断）」）**从未被引用**，同为死键的还有 `diff.failed`、`diff.valueLabel`。窄屏 `break-all` 把 64 位哈希在任意位置断行（`break-all` 是继承属性，传进了没写它的内层 `code`），而 DESIGN.md 的规则是「窄屏不断行 —— 等宽值换行会读错」，处方 `-mx-4 overflow-x-auto px-4` 在 `audit-view` 实现了、这里没有。两行几乎相同的 JSON 之间**没有任何值内高亮**。（好消息：B 实测窄屏横向溢出为 **0**，`document.scrollingElement.scrollWidth === clientWidth === 390` —— 这是折行换来的，不是布局崩了。）
+**修法**：值区改横滚不换行；超限值折叠成 `<details>` 或给「看全文」按钮；`title` 挂全文；两侧做 token 级差异标记（哪怕只标出第一处分歧）。截断提示用已经写好的那句话。
+**建议命令**：`/impeccable harden`
+
+### [P2] 三套报错语法、同一对 diff 无法重试、未知码裸奔
+列表失败 = `<Alert>` 无 `variant` + 一个空的 `<AlertDescription />` + 无重试；diff 失败 = 裸红字 + 无重试；回滚失败 = toast。对照 `audit-view` 是 `Alert variant="destructive"` + 重试按钮。更实际的一条：diff effect 依赖 `[from, to]`，**同一对失败后不会再发请求**，唯一的出路是取消选择再重选。未知错误码直出机器码（实测屏幕上唯一的红字就是 `internal_error` / `not_a_known_code`），而服务端 409 里那句 `detail`（`revision 46 has no snapshot — it predates the history feature or was pruned`，明确说了哪一侧、为什么）被客户端整个丢掉，界面只说「有一侧」。
+**修法**：三处收敛到 `audit-view` 的成例（destructive Alert + 重试）；重试改成显式按钮而不是靠 effect 依赖；未知码套 `t.history.diff.failed`；读 `ApiError.body.detail` 把「哪一侧」说出来。
+**建议命令**：`/impeccable clarify`
+
+## Persona Red Flags
+
+**Alex（急躁老手，要 60 秒内拿到答案）**
+- 全页零快捷键，而同一个 app 的 `route-editor/index.tsx` 已经立了 Cmd/Ctrl+S 的先例。最常见的意图「对比最上面两版」没有一键路径。
+- **Esc 什么都不做**：整页只有一个 keydown handler，只认 Enter/空格。清除选择要么滚 6500px 去点 ghost 的「清除对比」，要么把两张卡再点一遍。
+- 无批量、无范围对比、无「live vs #N」、无复制；值被截断，框选复制拿到的是 `…`。
+- 50 张卡里哪两张被选中了？选中卡的「对比」按钮变成 36px 图标 —— 在一列 66px 按钮里靠宽度差认，还得滚回去看。
+
+**Sam（键盘 + 屏幕阅读器）**
+- **回滚不可达**（上面的 P0，实测）。
+- 卡片 118 字可访问名，内含两个按钮的标签；选中态按钮可访问名为空。
+- 全页无 live region 覆盖 diff；加载骨架既无 `aria-hidden` 也无外层 `aria-busy`（`audit-view` 的骨架容器有 `aria-hidden`），三个脉动空 div 进了阅读顺序。
+- `<ol>` 里塞了 GapRow 这个纯文字 `<li>` —— 列表项数在撒谎（7 项 = 6 卡 + 1 说明行）。
+- `#40`（无快照）卡 `tabindex=null`、`aria-pressed=null`，却仍带 `role="button"`：一个不可聚焦、按不动、却被念成按钮的元素。
+- **viewer 的「回滚」被整个移除且不给理由。** DESIGN.md「disabled 可见规则」原文点名了观察者场景，发布栏遵守了（disabled + `title`）。同一屏对「你不能做这件事」给了三种互相矛盾的答法：live → disabled+title；无快照 → 移除+散文；viewer → 移除+沉默。
+- 好消息：焦点环实测**可见**（卡片吃全局 `:focus-visible`，`solid 2px` offset 2px），`matches(':focus-visible')` 为 true。
+
+**Riley（边界测试者）**
+- **50 条**：列表 6308px、文档 6580px（桌面）／9544px（390），1200 个 DOM 节点，无分页、无虚拟滚动、无总数、无「还有更早的」、无日期吸顶。
+- **超长内容**：50 字符的 actor 已经把元信息行推到 1440px 右缘、在 390px 折成三行（时间戳被断在两行）。服务端允许 500 字符 note，`RevisionCard` 没有任何 `line-clamp` —— 一条 revision 能比视口还高。
+- **非 ASCII**：`MAX_VALUE_CHARS` 数的是 UTF-16 code unit，CJK 值与 ASCII 哈希拿一样的预算；`slice(0,120)` 可以把非 BMP 字符切在代理对中间。
+- **刷新中途**：`load()` 没有 cancelled 守卫（diff 那个 effect 有），连点两次「刷新」由慢的那个响应胜出。
+- **两版都无快照**：UI 走不到（无快照卡没有「对比」按钮），所以 `snapshot_unavailable` 只在列表加载后快照被 prune 的窗口里可达 —— 而那时它拒绝说是哪一侧。
+- **禁用的「回滚」**：`pointer-events:none` 使真实命中区 1×1，粗指针下伪元素也一起被废，`title="线上正在服务的就是这一版的内容，不用回。"` **鼠标永远碰不到** —— 「为什么这一版不能回滚」唯一的解释是不可达的。
+
+**凌晨三点值班中的运维（项目特有 persona）**
+他只有两个问题：上一次改了什么、能不能立刻退回去。
+- 问题一应该零点击，实际两次点击 + 6500px 滚动 —— 而答案所需的两份快照就在进页面时最上面两张卡上。
+- 他拿到的 diff 可能是反的，屏幕上没有任何元素能让他发现。
+- 能结束这次事故的那一行（`allowPrivateUpstream: false → true`、`access.keys` 多了一条）是 `text-muted-foreground text-xs`，与超时改动同款。`DANGER_REASONS` 里为 `access.keys` 写的那句话正是为这一刻写的。
+- 问题二：读完 diff，两个被对比版本的「回滚」按钮在 6500px 之上，diff 卡只给了「清除对比」。
+- 他最终到达的回滚弹窗只讲机制（不是倒带、草稿会重置），一句不讲内容 —— 你即将把线上换成什么。给的是「闸门设计得好」的安心，不是「我知道我在做什么」的安心。
+- 时间戳：绝对时间非等宽、非 `tabular-nums`，前面还挂着变宽的相对时间（`4分钟前`/`昨天`/`上周`），整列确切时间参差不齐 —— 「这一版几点上的线」是逐卡阅读，不是一眼。
+
+## Minor Observations
+
+- **两处死类**：选中态的 `border-primary` 与 hover 态的 `hover:border-ring` 都不画东西 —— `Card` 只有 `ring-1`、没有任何 border 宽度工具类，而 Tailwind preflight 是 `border: 0 solid`。后果是**整卡可点却没有任何 hover 反馈**（只有 `cursor-pointer`），选中态实际只靠 `ring-2 ring-primary/30`。
+- `#47` 的 CardTitle 与 diff 卡标题都是 `font-mono text-base`（16px），而 DESIGN.md 的 mono 档位是 12px。
+- 分组标题用了 `uppercase tracking-wide` —— `uppercase` 对 CJK 是空操作，这套排版是给拉丁文写的。
+- 时间轴轨道 `bg-border w-px grow` 是 10% 白，且每段只活在自己的 `li` 里、被 `ol` 的 `gap-3` 切断 —— 实际是一条虚线近似，读得出来的只有 live 圆点的 `ring-4`。删掉竖线大概没人会发现。
+- `/api/revisions` 返回 `liveRevision`，`api.listRevisions` 把它丢了 —— 「live 不在可见列表里」时时间轴没有「你在这」的锚，也没有兜底句子。
+- diff 卡底部那个 `<Separator />` 是 flex column 的最后一个孩子，在最后一行下面画一条线，分隔的是内容与卡片 padding。分隔符要分隔两样东西，这里只有一样。
+- 无快照卡渲染了一个空 `<CardAction>`，无害，但 CardHeader 白白切成两列。
+- 回滚在途的按钮文案复用 `t.publishBar.publishing`（「发布中…」）—— 语义正确（回滚就是一次发布），但没读过产品文档的人会以为按错了。
+- 「两版内容完全一致」在这个产品里其实很常见（回滚天生制造内容相同的一对，`#46` 就是「回滚自 #43」），文案把它当成了巧合，没解释成因。
+- **对比度**：默认 dark 主题全部通过（`原值/新值` 6.94、`#47` 标题 17.18、`已选 #47` 14.5、无快照说明行 6.94）。light 主题下两条低于 4.5:1 —— diff 的 `删除` badge **3.97**、`#47` 禁用「回滚」**3.71**（禁用件受 WCAG 1.4.3 豁免，但它与上面那条摸不到的 `title` 叠在一起，等于既看不清也摸不到）。`原值/新值` 在 light 下是 4.74，只比门槛高 0.24。
+- `version` 因 `isDefaultsPath` 只特判 `defaults`，被归进「路由」组 —— version 不是路由。
+
+## Questions to Consider
+
+1. **如果方向根本不该由点击顺序决定，`from`/`to` 为什么是用户可控的？** 时间轴天生有序，「原值」永远该是较早那一版。钉死方向的代价只是失掉「反着比」这个没人要过的能力 —— 而服务端那句 "direction is free" 本来是为回滚弹窗写的，回滚弹窗根本没用它。
+2. **这一屏真正的主角是 diff 还是列表？** 什么理由让 6500px 的列表当主角、让结果排在它后面？
+3. **危险词汇一次 path 后缀匹配就能用上，不做的理由是什么？** 如果理由是「diff 只渲染服务端给的东西、不做第二套判定」—— 那服务端为什么不在 `DiffEntry` 上带一个 `risk` 字段？这个理由现在挡住的不是重复实现，是信息传递。
+4. **「整张卡可点」换来更大的命中区，代价是嵌套控件、118 字可访问名、键盘回滚失效。** 换成 CardHeader 里一个真 Checkbox，失去的只是「点空白处也能选」。这个便利值这些代价吗？
+5. **被截断的哈希，操作者到底该去哪里核对？** 答「去审计页看原文」，diff 就是索引不是终点，界面该照索引重排；答「就在这里核对」，它就需要值内高亮、可展开、可复制。现在两头都不是 —— 选哪一条决定这个组件接下来还要不要长别的东西。
diff --git a/workers/admin-panel/src/diff.test.ts b/workers/admin-panel/src/diff.test.ts
index 183d539..ace8f9c 100644
--- a/workers/admin-panel/src/diff.test.ts
+++ b/workers/admin-panel/src/diff.test.ts
@@ -28,6 +28,98 @@ describe('diffDocuments', () => {
       { routes: [{ id: 'a', timeoutMs: 8000 }] },
     );
     expect(entries).toHaveLength(1);
-    expect(entries[0]).toMatchObject({ kind: 'changed', path: 'routes.a.timeoutMs' });
+    expect(entries[0]).toMatchObject({
+      kind: 'changed',
+      path: 'routes.a.timeoutMs',
+      routeId: 'a',
+      field: 'timeoutMs',
+    });
+    expect(entries[0]?.risk).toBeUndefined();
+  });
+
+  it('names the owning route even when the id contains dots', () => {
+    const entries = diffDocuments(
+      { routes: [{ id: 'foo.bar', timeoutMs: 1000 }] },
+      { routes: [{ id: 'foo.bar', timeoutMs: 2000 }] },
+    );
+    // `routes.foo.bar.timeoutMs` is unparseable without the id list; the entry
+    // carries both halves so no reader has to guess where the id ends.
+    expect(entries[0]).toMatchObject({ routeId: 'foo.bar', field: 'timeoutMs' });
+  });
+
+  it('stamps the danger classification the publish gate would give the `to` side', () => {
+    const flipped = diffDocuments(
+      { routes: [{ id: 'a', allowPrivateUpstream: false }] },
+      { routes: [{ id: 'a', allowPrivateUpstream: true }] },
+    );
+    expect(flipped[0]?.risk).toMatchObject({ path: 'allowPrivateUpstream', level: 'high' });
+
+    // `allowPrivateUpstream` is a presence rule, so the row stays flagged even
+    // turning it back off: on a history surface "somebody touched this switch"
+    // is the thing worth seeing, and the publish dialog says the same.
+    const restored = diffDocuments(
+      { routes: [{ id: 'a', allowPrivateUpstream: true }] },
+      { routes: [{ id: 'a', allowPrivateUpstream: false }] },
+    );
+    expect(restored[0]?.risk).toMatchObject({ path: 'allowPrivateUpstream' });
+
+    // A guarded rule only fires on the state that qualifies, so the safe
+    // direction leaves the row plain — again matching the publish gate.
+    const disarmed = diffDocuments(
+      { routes: [{ id: 'a', mirror: { includeBody: true } }] },
+      { routes: [{ id: 'a', mirror: { includeBody: false } }] },
+    );
+    expect(disarmed[0]?.risk).toBeUndefined();
+  });
+
+  it('lets a nested field inherit the risk its ancestor names', () => {
+    const entries = diffDocuments(
+      { routes: [{ id: 'a', bodyRewrite: { inject: { head: '<b>' } } }] },
+      { routes: [{ id: 'a', bodyRewrite: { inject: { head: '<script>' } } }] },
+    );
+    expect(entries[0]).toMatchObject({ field: 'bodyRewrite.inject.head' });
+    expect(entries[0]?.risk).toMatchObject({ path: 'bodyRewrite.inject' });
+  });
+
+  it('counts the dangerous switches an added route arrives with', () => {
+    const entries = diffDocuments(
+      { routes: [] },
+      {
+        routes: [
+          {
+            id: 'a',
+            allowPrivateUpstream: true,
+            upstreamHeaders: { authorization: 'x' },
+            timeoutMs: 1000,
+          },
+        ],
+      },
+    );
+    expect(entries[0]).toMatchObject({ kind: 'added', routeId: 'a', riskCount: 2 });
+    // The high-level rule is the one worth naming on a single row.
+    expect(entries[0]?.risk).toMatchObject({ level: 'high' });
+  });
+
+  it('classifies defaults with the same rules — they fill the same fields', () => {
+    const entries = diffDocuments(
+      { defaults: { allowPrivateUpstream: false }, routes: [{ id: 'a' }] },
+      { defaults: { allowPrivateUpstream: true }, routes: [{ id: 'a' }] },
+    );
+    expect(entries[0]).toMatchObject({
+      path: 'defaults.allowPrivateUpstream',
+      field: 'allowPrivateUpstream',
+    });
+    expect(entries[0]?.routeId).toBeUndefined();
+    expect(entries[0]?.risk).toMatchObject({ level: 'high' });
+  });
+
+  it('leaves `version` unowned — it is not a route and not a default', () => {
+    const entries = diffDocuments(
+      { version: 1, routes: [{ id: 'a' }] },
+      { version: 2, routes: [{ id: 'a' }] },
+    );
+    expect(entries[0]).toMatchObject({ path: 'version', kind: 'changed' });
+    expect(entries[0]?.routeId).toBeUndefined();
+    expect(entries[0]?.field).toBeUndefined();
   });
 });
diff --git a/workers/admin-panel/src/diff.ts b/workers/admin-panel/src/diff.ts
index 3630b1b..20c8600 100644
--- a/workers/admin-panel/src/diff.ts
+++ b/workers/admin-panel/src/diff.ts
@@ -10,7 +10,15 @@
  * arrays are compared whole, except route arrays, which match by `id` so a
  * route that moved reports as `moved` rather than as a rewrite of every later
  * element.
+ *
+ * Every entry that belongs to a route or to `defaults` is stamped with its
+ * owner (`routeId`), its in-definition `field`, and — when the `to` state trips
+ * a rule — the `dangerFlags` classification. The panel's danger vocabulary is
+ * therefore delivered with the diff instead of re-derived from path strings in
+ * the browser: one classifier, one answer, and it is the classifier the publish
+ * gate already runs.
  */
+import { dangerFlags, type FieldRisk } from './danger.js';
 import { canonicalize } from './fingerprint.js';
 
 export interface DiffEntry {
@@ -25,6 +33,30 @@ export interface DiffEntry {
   /** 0-based positions for `moved` entries. */
   readonly fromPosition?: number;
   readonly toPosition?: number;
+  /**
+   * Owning route id, resolved here rather than parsed from `path`: a route id
+   * may contain dots, so `routes.foo.bar` is ambiguous to every reader except
+   * the one holding the id list. Absent for `defaults` and `version`.
+   */
+  readonly routeId?: string;
+  /**
+   * Path inside the route definition (or inside `defaults`) — the same shape
+   * `dangerFlags` classifies. Absent for whole-route and top-level entries.
+   */
+  readonly field?: string;
+  /**
+   * Danger classification of the `to` state, from the same `dangerFlags` the
+   * publish gate runs. Sent with the diff so the history view never has to
+   * re-derive "is this field dangerous" — one classifier, one answer.
+   *
+   * The rule's own shape decides what that answer means: presence rules
+   * (`allowPrivateUpstream`) flag a field the publish touched at all, guarded
+   * rules (`mirror.includeBody`) only flag the state that qualifies. Both are
+   * what the publish dialog would have said about the same document.
+   */
+  readonly risk?: FieldRisk;
+  /** For an added route: how many dangerous switches the new definition carries. */
+  readonly riskCount?: number;
 }
 
 /**
@@ -43,6 +75,65 @@ const routeIdOf = (route: unknown): string | undefined =>
     ? ((route as Record<string, unknown>)['id'] as string)
     : undefined;
 
+/**
+ * Danger rules that fire on one side's definition, keyed by field path.
+ *
+ * `cors.origins (absent)` is reported by `dangerFlags` under a path that names
+ * its own absence; the diff keys by the field the operator sees, so the suffix
+ * is stripped here and nowhere else.
+ */
+const riskIndex = (definition: unknown): ReadonlyMap<string, FieldRisk> => {
+  const index = new Map<string, FieldRisk>();
+  if (typeof definition !== 'object' || definition === null || Array.isArray(definition)) {
+    return index;
+  }
+  for (const risk of dangerFlags(definition as Record<string, unknown>)) {
+    index.set(risk.path.replace(' (absent)', ''), risk);
+  }
+  return index;
+};
+
+/** The risk a field inherits: itself, or the closest ancestor a rule names. */
+const riskFor = (index: ReadonlyMap<string, FieldRisk>, field: string): FieldRisk | undefined => {
+  let probe = field;
+  for (;;) {
+    const hit = index.get(probe);
+    if (hit !== undefined) {
+      return hit;
+    }
+    const cut = probe.lastIndexOf('.');
+    if (cut < 0) {
+      return undefined;
+    }
+    probe = probe.slice(0, cut);
+  }
+};
+
+/**
+ * Stamps ownership and risk onto entries a generic walker produced.
+ *
+ * `prefix` is the path the walker was seeded with, so `field` is what remains
+ * after it — never a re-parse of the id, which may itself contain dots.
+ */
+const attribute = (
+  entries: readonly DiffEntry[],
+  prefix: string,
+  index: ReadonlyMap<string, FieldRisk>,
+  routeId?: string,
+): DiffEntry[] =>
+  entries.map((entry) => {
+    const field = entry.path.startsWith(`${prefix}.`)
+      ? entry.path.slice(prefix.length + 1)
+      : undefined;
+    const risk = field === undefined ? undefined : riskFor(index, field);
+    return {
+      ...entry,
+      ...(routeId === undefined ? {} : { routeId }),
+      ...(field === undefined ? {} : { field }),
+      ...(risk === undefined ? {} : { risk }),
+    };
+  });
+
 /** Recursively compares two JSON values; leaf differences yield `changed`. */
 const diffValue = (path: string, from: unknown, to: unknown, out: DiffEntry[]): void => {
   if (sameValue(from, to)) {
@@ -72,7 +163,9 @@ const diffValue = (path: string, from: unknown, to: unknown, out: DiffEntry[]):
   }
 };
 
-/** Diff for the table-wide defaults block; plain recursive key comparison. */
+/** Diff for the table-wide defaults block; plain recursive key comparison.
+ *  Defaults are definition-shaped and fill per-field gaps, so a dangerous
+ *  switch is exactly as dangerous here as inside a route — same classifier. */
 const diffDefaults = (from: unknown, to: unknown, out: DiffEntry[]): void => {
   const f =
     typeof from === 'object' && from !== null && !Array.isArray(from)
@@ -90,13 +183,15 @@ const diffDefaults = (from: unknown, to: unknown, out: DiffEntry[]): void => {
     out.push({ path: 'defaults', kind: 'changed', from, to });
     return;
   }
-  diffValue('defaults', f, tt, out);
+  const local: DiffEntry[] = [];
+  diffValue('defaults', f, tt, local);
+  out.push(...attribute(local, 'defaults', riskIndex(tt)));
 };
 
 /** Diffs the routes array by `id`, the merge key the proxy itself resolves by.
- *  (A route id may itself contain dots — `routes.foo.bar` is route `foo.bar`'s
- *  subtree, not a nested path under route `foo`; clients match on the id after
- *  the first segment, the same way the compiler keyed the document.) */
+ *  Each entry carries its `routeId` and in-route `field` explicitly, because a
+ *  route id may itself contain dots — `routes.foo.bar` is unparseable without
+ *  the id list, and only this function holds it. */
 const diffRoutes = (
   fromRoutes: readonly unknown[],
   toRoutes: readonly unknown[],
@@ -120,7 +215,13 @@ const diffRoutes = (
   for (const [id, entry] of fromById) {
     const target = toById.get(id);
     if (target === undefined) {
-      out.push({ path: `routes.${id}`, kind: 'removed', from: entry.route, to: undefined });
+      out.push({
+        path: `routes.${id}`,
+        kind: 'removed',
+        from: entry.route,
+        to: undefined,
+        routeId: id,
+      });
       continue;
     }
     if (sameValue(entry.route, target.route)) {
@@ -132,6 +233,7 @@ const diffRoutes = (
           kind: 'moved',
           fromPosition: entry.position,
           toPosition: target.position,
+          routeId: id,
         });
       }
       continue;
@@ -139,19 +241,33 @@ const diffRoutes = (
     // Content changed and it may also have moved. diffValue reports the field
     // changes; the moved entry is emitted alongside so "this route was also
     // re-ordered" is never lost behind the field diff.
-    diffValue(`routes.${id}`, entry.route, target.route, out);
+    const local: DiffEntry[] = [];
+    diffValue(`routes.${id}`, entry.route, target.route, local);
+    out.push(...attribute(local, `routes.${id}`, riskIndex(target.route), id));
     if (entry.position !== target.position) {
       out.push({
         path: `routes.${id}`,
         kind: 'moved',
         fromPosition: entry.position,
         toPosition: target.position,
+        routeId: id,
       });
     }
   }
   for (const [id, entry] of toById) {
     if (!fromById.has(id)) {
-      out.push({ path: `routes.${id}`, kind: 'added', from: undefined, to: entry.route });
+      // A whole new route: its dangerous switches are the operator's business
+      // even though no single field row exists to hang them on.
+      const risks = [...riskIndex(entry.route).values()];
+      const worst = risks.find((risk) => risk.level === 'high') ?? risks[0];
+      out.push({
+        path: `routes.${id}`,
+        kind: 'added',
+        from: undefined,
+        to: entry.route,
+        routeId: id,
+        ...(worst === undefined ? {} : { risk: worst, riskCount: risks.length }),
+      });
     }
   }
 };
diff --git a/workers/admin-panel/src/history.test.ts b/workers/admin-panel/src/history.test.ts
index 211b1c8..40689b8 100644
--- a/workers/admin-panel/src/history.test.ts
+++ b/workers/admin-panel/src/history.test.ts
@@ -181,22 +181,33 @@ describe('revision history and rollback', () => {
     expect(res.status).toBe(200);
     const body = await res.json();
     const changed = body.entries.filter((e: any) => e.kind === 'changed');
-    expect(changed).toContainEqual({
-      path: 'routes.alpha.upstream',
-      kind: 'changed',
-      from: 'a.internal.example.com',
-      to: 'a2.internal.example.com',
-    });
-    expect(body.entries.filter((e: any) => e.kind === 'added')).toContainEqual({
-      path: 'routes.beta',
-      kind: 'added',
-      to: {
-        id: 'beta',
-        match: { host: 'b.example.com', path: '/' },
-        upstream: 'b.internal.example.com',
-        timeoutMs: 5000,
-      },
-    });
+    // Ownership travels with the entry: the client never parses `path`, because
+    // a route id may itself contain dots.
+    expect(changed).toContainEqual(
+      expect.objectContaining({
+        path: 'routes.alpha.upstream',
+        kind: 'changed',
+        from: 'a.internal.example.com',
+        to: 'a2.internal.example.com',
+        routeId: 'alpha',
+        field: 'upstream',
+      }),
+    );
+    expect(body.entries.filter((e: any) => e.kind === 'added')).toContainEqual(
+      expect.objectContaining({
+        path: 'routes.beta',
+        kind: 'added',
+        routeId: 'beta',
+        to: {
+          id: 'beta',
+          match: { host: 'b.example.com', path: '/' },
+          upstream: 'b.internal.example.com',
+          timeoutMs: 5000,
+        },
+      }),
+    );
+    // Nothing here trips a danger rule, so no entry carries a classification.
+    expect(body.entries.every((e: any) => e.risk === undefined)).toBe(true);
 
     // Reverse direction is free — the rollback dialog asks exactly this.
     const back = await get('/api/revisions/diff?from=3&to=1', auth);
diff --git a/workers/admin-panel/web/src/components/publish-dialog.tsx b/workers/admin-panel/web/src/components/publish-dialog.tsx
index 759f03b..0aeb4f6 100644
--- a/workers/admin-panel/web/src/components/publish-dialog.tsx
+++ b/workers/admin-panel/web/src/components/publish-dialog.tsx
@@ -16,7 +16,7 @@ import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import { ApiError, NetworkError, api, type PreviewResult } from '@/lib/api';
 import { t } from '@/lib/messages';
-import { DANGER_REASONS, LIMITS, type FieldRisk } from '@/lib/types';
+import { LIMITS, dangerReason, type FieldRisk } from '@/lib/types';
 
 /**
  * 发布弹窗 —— 整个面板里唯一一处真正改变线上流量的按钮。
@@ -37,9 +37,6 @@ interface PublishDialogProps {
   readonly onPublished: (revision: number) => void;
 }
 
-/** 服务端的 reason 是英文；DANGER_REASONS 是面板自己的说法，优先用它。 */
-const reasonOf = (risk: FieldRisk): string => DANGER_REASONS[risk.path] ?? risk.reason;
-
 /**
  * 409 响应体里的 dangers 是未知形状（来自服务端，且版本可能不同）。这里只做
  * 轻量守卫，不合格的条目丢掉 —— 宁可少列一行也不把 undefined 渲染出来。
@@ -179,7 +176,7 @@ export const PublishDialog = ({ open, onOpenChange, preview, onPublished }: Publ
                     <code className="font-mono text-xs">
                       {routeId}.{risk.path}
                     </code>
-                    <span className="text-muted-foreground text-xs">{reasonOf(risk)}</span>
+                    <span className="text-muted-foreground text-xs">{dangerReason(risk)}</span>
                   </li>
                 )),
               )}
diff --git a/workers/admin-panel/web/src/components/revision-diff.tsx b/workers/admin-panel/web/src/components/revision-diff.tsx
index afb5f0e..cdab54a 100644
--- a/workers/admin-panel/web/src/components/revision-diff.tsx
+++ b/workers/admin-panel/web/src/components/revision-diff.tsx
@@ -1,32 +1,98 @@
-import { ArrowDownUpIcon, MinusIcon, PencilIcon, PlusIcon } from 'lucide-react';
+import * as React from 'react';
+import { ArrowDownUpIcon, MinusIcon, PencilIcon, PlusIcon, TriangleAlertIcon } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
-import { Separator } from '@/components/ui/separator';
 import { Spinner } from '@/components/ui/spinner';
 import { t } from '@/lib/messages';
+import { dangerReason } from '@/lib/types';
 import type { DiffEntry } from '@/lib/api';
 
 /**
- * 服务端 diff 的渲染。判定全在服务端（api/revisions.ts 的 diffDocuments），
- * 这里只负责把字段摆出来 —— 不在浏览器里重新比较两份 JSON，否则面板自己
- * 就成了第二套真相。
+ * 服务端 diff 的渲染。判定全在服务端（`src/diff.ts` 的 `diffDocuments`），这里
+ * 只负责摆出来 —— 不在浏览器里重新比较两份 JSON，也不重新判断哪个字段危险，
+ * 否则面板自己就成了第二套真相。
+ *
+ * 摆法按**路由**分组而不是按动词分组：操作者问的是「api-gw 怎么了」，而一条
+ * 路由的六个字段改动散在「新增/删除/修改/移序」四个块里回答不了这个问题。
+ * 归属由服务端的 `routeId` 给定 —— 路由 id 本身可以含点，`routes.foo.bar` 在
+ * 浏览器里切不开。
  */
 
 /** 值一律走紧凑 JSON：diff 的两侧是快照里的原值，形状随字段而异。 */
 const MAX_VALUE_CHARS = 120;
 
-const formatValue = (value: unknown): string => {
+interface FormattedValue {
+  readonly text: string;
+  readonly full: string;
+  readonly truncated: boolean;
+  readonly absent: boolean;
+}
+
+/**
+ * 按 code point 截断，不按 UTF-16 code unit —— `slice` 会把星形字符切在代理对
+ * 中间，剩下半个字符。全文永远留着：被截断的往往正是哈希与改写规则，那是必须
+ * 逐字符核对的东西。
+ */
+const formatValue = (value: unknown): FormattedValue => {
   if (value === undefined) {
-    return '∅';
+    return {
+      text: t.history.diff.absent,
+      full: t.history.diff.absent,
+      truncated: false,
+      absent: true,
+    };
   }
-  const text = JSON.stringify(value) ?? String(value);
-  return text.length > MAX_VALUE_CHARS ? `${text.slice(0, MAX_VALUE_CHARS)}…` : text;
+  const full = JSON.stringify(value) ?? String(value);
+  const points = Array.from(full);
+  return points.length > MAX_VALUE_CHARS
+    ? { text: points.slice(0, MAX_VALUE_CHARS).join(''), full, truncated: true, absent: false }
+    : { text: full, full, truncated: false, absent: false };
 };
 
-/** path 的首段决定归属：defaults.* 是表级默认值，其余（routes.*、version）都算表结构。 */
-const isDefaultsPath = (path: string): boolean => path.startsWith('defaults');
+/**
+ * 一侧的值。等宽、不换行、横向可滚 —— 换行会让 64 位哈希在任意位置断开，而
+ * 这些值存在的意义就是被逐字符核对（DESIGN.md：等宽值换行会读错）。
+ */
+const ValueLine = ({ label, value }: { readonly label: string; readonly value: unknown }) => {
+  const formatted = formatValue(value);
+  return (
+    <div className="flex flex-col gap-0.5">
+      <div className="flex items-baseline gap-1.5">
+        <span className="text-muted-foreground shrink-0 text-xs">{label}</span>
+        <div className="min-w-0 flex-1 overflow-x-auto">
+          <code
+            className={
+              formatted.absent
+                ? 'text-muted-foreground text-xs whitespace-pre'
+                : 'text-foreground font-mono text-xs whitespace-pre'
+            }
+            title={formatted.absent ? undefined : formatted.full}
+          >
+            {formatted.text}
+          </code>
+        </div>
+      </div>
+      {formatted.truncated && (
+        <details className="bg-muted/40 rounded-md border">
+          <summary className="text-muted-foreground cursor-pointer px-2 py-1 text-xs">
+            {t.history.diff.showFull}
+            <span className="ml-1">{t.history.diff.truncated}</span>
+          </summary>
+          <pre className="overflow-x-auto px-2 pb-2 font-mono text-xs whitespace-pre">
+            {formatted.full}
+          </pre>
+        </details>
+      )}
+    </div>
+  );
+};
 
+/**
+ * 动词标记。`删除` 是唯一带色相的一档，因为删掉一条路由是这里最能改变生产
+ * 行为的事；其余三种靠图标与字区分。（从前 `新增` 用 primary 实底，等于把
+ * 全系统最重的视觉给了破坏性最小的动作。）
+ */
 const KIND_META = {
-  added: { label: t.history.diff.groups.added, icon: PlusIcon, variant: 'default' as const },
+  added: { label: t.history.diff.groups.added, icon: PlusIcon, variant: 'secondary' as const },
   removed: {
     label: t.history.diff.groups.removed,
     icon: MinusIcon,
@@ -40,17 +106,63 @@ const KIND_META = {
   moved: { label: t.history.diff.groups.moved, icon: ArrowDownUpIcon, variant: 'outline' as const },
 } as const;
 
-const DiffRow = ({ entry }: { readonly entry: DiffEntry }) => {
-  const meta = KIND_META[entry.kind];
+const KindBadge = ({ kind }: { readonly kind: DiffEntry['kind'] }) => {
+  const meta = KIND_META[kind];
   const Icon = meta.icon;
   return (
-    <li className="flex flex-col gap-0.5 py-1.5">
+    <Badge variant={meta.variant} className="gap-1">
+      <Icon aria-hidden />
+      {meta.label}
+    </Badge>
+  );
+};
+
+/** 危险说明：底色 + 那句写给人看的后果，与发布弹窗里的危险清单同一张脸。 */
+const DangerNote = ({ entry }: { readonly entry: DiffEntry }) => {
+  if (entry.risk === undefined) {
+    return null;
+  }
+  return (
+    <p className="text-destructive flex items-start gap-1.5 text-xs">
+      <TriangleAlertIcon className="mt-0.5 size-3 shrink-0" aria-hidden />
+      <span>
+        {entry.riskCount !== undefined && entry.riskCount > 1 && (
+          <span className="font-medium">{t.history.diff.addedDangerCount(entry.riskCount)} · </span>
+        )}
+        {dangerReason(entry.risk)}
+      </span>
+    </p>
+  );
+};
+
+/** 一行字段级改动。两侧用绝对指称（`#45 的值`），因为方向永远是时间序。 */
+const DiffRow = ({
+  entry,
+  older,
+  newer,
+}: {
+  readonly entry: DiffEntry;
+  readonly older: number;
+  readonly newer: number;
+}) => {
+  const dangerous = entry.risk !== undefined;
+  return (
+    <li
+      className={
+        dangerous
+          ? 'danger-surface flex flex-col gap-1 rounded-lg border p-2'
+          : 'flex flex-col gap-1 px-2 py-1.5'
+      }
+    >
       <div className="flex flex-wrap items-center gap-2">
-        <Badge variant={meta.variant} className="gap-1">
-          <Icon aria-hidden />
-          {meta.label}
-        </Badge>
-        <code className="font-mono text-xs break-all">{entry.path}</code>
+        <KindBadge kind={entry.kind} />
+        {/* 整条路由的行不写 path —— 块标题已经是那个 id，再抄一遍只是噪声。 */}
+        {entry.field !== undefined && (
+          <code className="font-mono text-xs break-all">{entry.field}</code>
+        )}
+        {entry.field === undefined && entry.routeId === undefined && (
+          <code className="font-mono text-xs break-all">{entry.path}</code>
+        )}
         {entry.kind === 'moved' &&
           entry.fromPosition !== undefined &&
           entry.toPosition !== undefined && (
@@ -59,18 +171,20 @@ const DiffRow = ({ entry }: { readonly entry: DiffEntry }) => {
             </span>
           )}
       </div>
-      {entry.kind === 'moved' ? null : (
-        <div className="text-muted-foreground grid gap-0.5 pl-1 text-xs">
+      <DangerNote entry={entry} />
+      {entry.field === undefined && entry.routeId !== undefined && entry.kind === 'added' && (
+        <p className="text-muted-foreground text-xs">{t.history.diff.routeAdded}</p>
+      )}
+      {entry.field === undefined && entry.routeId !== undefined && entry.kind === 'removed' && (
+        <p className="text-muted-foreground text-xs">{t.history.diff.routeRemoved}</p>
+      )}
+      {entry.kind !== 'moved' && (
+        <div className="grid gap-0.5 pl-1">
           {entry.kind !== 'added' && (
-            <span className="break-all">
-              {t.history.diff.fromLabel}：
-              <code className="font-mono">{formatValue(entry.from)}</code>
-            </span>
+            <ValueLine label={t.history.diff.valueOf(older)} value={entry.from} />
           )}
           {entry.kind !== 'removed' && (
-            <span className="break-all">
-              {t.history.diff.toLabel}：<code className="font-mono">{formatValue(entry.to)}</code>
-            </span>
+            <ValueLine label={t.history.diff.valueOf(newer)} value={entry.to} />
           )}
         </div>
       )}
@@ -78,37 +192,141 @@ const DiffRow = ({ entry }: { readonly entry: DiffEntry }) => {
   );
 };
 
-const DiffSection = ({
-  title,
-  entries,
-}: {
-  readonly title: string;
+/** 一条路由的全部改动，破坏性最大的在先。 */
+const KIND_RANK: Readonly<Record<DiffEntry['kind'], number>> = {
+  removed: 0,
+  added: 1,
+  changed: 2,
+  moved: 3,
+};
+
+interface Block {
+  readonly key: string;
+  readonly label: string;
+  readonly mono: boolean;
   readonly entries: readonly DiffEntry[];
-}) => {
-  if (entries.length === 0) {
-    return null;
-  }
-  // 组内按新增→删除→修改→移序摆，扫读时破坏性最大的在先。
-  const order: readonly DiffEntry['kind'][] = ['removed', 'added', 'changed', 'moved'];
-  const sorted = entries.toSorted((a, b) => order.indexOf(a.kind) - order.indexOf(b.kind));
-  return (
-    <section className="flex flex-col gap-1">
-      <h4 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">{title}</h4>
-      <ul className="divide-y">
-        {sorted.map((entry) => (
-          <DiffRow key={`${entry.kind}.${entry.path}`} entry={entry} />
-        ))}
-      </ul>
-    </section>
+  readonly danger: number;
+}
+
+const sortRows = (entries: readonly DiffEntry[]): DiffEntry[] =>
+  entries.toSorted(
+    (a, b) =>
+      // 危险在先，与块之间的排序同一条判据；然后按破坏性，最后按字段名。
+      Number(b.risk !== undefined) - Number(a.risk !== undefined) ||
+      KIND_RANK[a.kind] - KIND_RANK[b.kind] ||
+      (a.field ?? '').localeCompare(b.field ?? ''),
   );
+
+/** 按 owner 切块。归属只认服务端给的 `routeId`，不解析 path。 */
+const blocksOf = (
+  entries: readonly DiffEntry[],
+): { routes: Block[]; defaults: Block | null; other: Block | null } => {
+  const byRoute = new Map<string, DiffEntry[]>();
+  const defaults: DiffEntry[] = [];
+  const other: DiffEntry[] = [];
+  for (const entry of entries) {
+    if (entry.routeId !== undefined) {
+      const bucket = byRoute.get(entry.routeId) ?? [];
+      bucket.push(entry);
+      byRoute.set(entry.routeId, bucket);
+    } else if (entry.path === 'defaults' || entry.path.startsWith('defaults.')) {
+      defaults.push(entry);
+    } else {
+      other.push(entry);
+    }
+  }
+  const toBlock = (
+    key: string,
+    label: string,
+    mono: boolean,
+    rows: readonly DiffEntry[],
+  ): Block => ({
+    key,
+    label,
+    mono,
+    entries: sortRows(rows),
+    danger: rows.filter((entry) => entry.risk !== undefined).length,
+  });
+  const routes = [...byRoute.entries()]
+    .map(([id, rows]) => toBlock(`route:${id}`, id, true, rows))
+    // 有危险开关的路由排在最前：扫读时最该先看的就是它。其余按破坏性、再按 id。
+    .toSorted(
+      (a, b) =>
+        Number(b.danger > 0) - Number(a.danger > 0) ||
+        KIND_RANK[a.entries[0].kind] - KIND_RANK[b.entries[0].kind] ||
+        a.label.localeCompare(b.label),
+    );
+  return {
+    routes,
+    defaults:
+      defaults.length > 0
+        ? toBlock('defaults', t.history.diff.defaultsTitle, false, defaults)
+        : null,
+    other: other.length > 0 ? toBlock('other', t.history.diff.otherTitle, false, other) : null,
+  };
 };
 
+const BlockView = ({
+  block,
+  older,
+  newer,
+  heading,
+}: {
+  readonly block: Block;
+  readonly older: number;
+  readonly newer: number;
+  readonly heading: boolean;
+}) => (
+  <div className="flex flex-col gap-1">
+    {heading && (
+      <div className="flex flex-wrap items-center gap-2">
+        <h4 className={block.mono ? 'font-mono text-xs font-medium' : 'text-xs font-medium'}>
+          {block.label}
+        </h4>
+        {block.danger > 0 && (
+          <Badge variant="destructive">
+            <TriangleAlertIcon aria-hidden />
+            {t.history.diff.dangerBadge(block.danger)}
+          </Badge>
+        )}
+      </div>
+    )}
+    <ul className="divide-y">
+      {block.entries.map((entry) => (
+        <DiffRow key={`${entry.kind}.${entry.path}`} entry={entry} older={older} newer={newer} />
+      ))}
+    </ul>
+  </div>
+);
+
+const Section = ({
+  title,
+  hint,
+  children,
+}: {
+  readonly title: string;
+  readonly hint?: string;
+  readonly children: React.ReactNode;
+}) => (
+  <section className="flex flex-col gap-2">
+    <div className="flex flex-col gap-0.5">
+      <h3 className="text-muted-foreground text-xs font-medium">{title}</h3>
+      {hint !== undefined && <p className="text-muted-foreground text-xs">{hint}</p>}
+    </div>
+    {children}
+  </section>
+);
+
 export const RevisionDiff = ({
   entries,
   loading,
+  older,
+  newer,
 }: {
   readonly entries: readonly DiffEntry[] | null;
   readonly loading: boolean;
+  readonly older: number;
+  readonly newer: number;
 }) => {
   if (loading) {
     return (
@@ -124,13 +342,32 @@ export const RevisionDiff = ({
   if (entries.length === 0) {
     return <p className="text-muted-foreground text-sm">{t.history.diff.empty}</p>;
   }
-  const defaults = entries.filter((entry) => isDefaultsPath(entry.path));
-  const rest = entries.filter((entry) => !isDefaultsPath(entry.path));
+  const { routes, defaults, other } = blocksOf(entries);
+  const moved = entries.some((entry) => entry.kind === 'moved');
   return (
-    <div className="flex flex-col gap-4">
-      <DiffSection title={t.history.diff.routesTitle} entries={rest} />
-      <DiffSection title={t.history.diff.defaultsTitle} entries={defaults} />
-      {(defaults.length > 0 || rest.length > 0) && <Separator />}
+    <div className="flex flex-col gap-5">
+      {routes.length > 0 && (
+        <Section
+          title={t.history.diff.routesTitle}
+          hint={moved ? t.history.diff.positionHint : undefined}
+        >
+          <div className="flex flex-col gap-4">
+            {routes.map((block) => (
+              <BlockView key={block.key} block={block} older={older} newer={newer} heading />
+            ))}
+          </div>
+        </Section>
+      )}
+      {defaults !== null && (
+        <Section title={t.history.diff.defaultsTitle}>
+          <BlockView block={defaults} older={older} newer={newer} heading={false} />
+        </Section>
+      )}
+      {other !== null && (
+        <Section title={t.history.diff.otherTitle}>
+          <BlockView block={other} older={older} newer={newer} heading={false} />
+        </Section>
+      )}
     </div>
   );
 };
diff --git a/workers/admin-panel/web/src/components/rollback-dialog.tsx b/workers/admin-panel/web/src/components/rollback-dialog.tsx
index fbdcdf6..c044970 100644
--- a/workers/admin-panel/web/src/components/rollback-dialog.tsx
+++ b/workers/admin-panel/web/src/components/rollback-dialog.tsx
@@ -16,7 +16,7 @@ import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import { ApiError, NetworkError, api, type RevisionEntry } from '@/lib/api';
 import { t } from '@/lib/messages';
-import { DANGER_REASONS, LIMITS, type FieldRisk } from '@/lib/types';
+import { LIMITS, dangerReason, type FieldRisk } from '@/lib/types';
 
 /**
  * 回滚弹窗 —— 与发布弹窗同一套闸门，因为回滚就是一次发布。
@@ -37,9 +37,6 @@ interface RollbackDialogProps {
   readonly onRolledBack: (revision: number) => void;
 }
 
-/** 服务端的 reason 是英文；DANGER_REASONS 是面板自己的说法，优先用它。 */
-const reasonOf = (risk: FieldRisk): string => DANGER_REASONS[risk.path] ?? risk.reason;
-
 /** 409 响应体里的 dangers 是未知形状（来自服务端）；轻量守卫，宁缺勿崩。 */
 const asDangers = (raw: unknown): Record<string, readonly FieldRisk[]> => {
   if (typeof raw !== 'object' || raw === null) {
@@ -185,7 +182,7 @@ export const RollbackDialog = ({
                     <code className="font-mono text-xs">
                       {routeId}.{risk.path}
                     </code>
-                    <span className="text-muted-foreground text-xs">{reasonOf(risk)}</span>
+                    <span className="text-muted-foreground text-xs">{dangerReason(risk)}</span>
                   </li>
                 )),
               )}
diff --git a/workers/admin-panel/web/src/lib/api.ts b/workers/admin-panel/web/src/lib/api.ts
index eadfcbb..9f03ce5 100644
--- a/workers/admin-panel/web/src/lib/api.ts
+++ b/workers/admin-panel/web/src/lib/api.ts
@@ -234,9 +234,17 @@ export const api = {
 
   /* ---------- 发布历史与回滚 ---------- */
 
-  listRevisions: async (): Promise<RevisionEntry[]> => {
+  /**
+   * 发布历史。`liveRevision` 是服务端说的「现在服务流量的是哪一版」，一并带
+   * 回来 —— 滚动保留 50 版之后线上那一版可能已经不在列表里，那时候时间轴需要
+   * 一句话交代「你在这」，而不是让人以为记录丢了。
+   */
+  listRevisions: async (): Promise<RevisionList> => {
     const data = await request('GET', '/api/revisions');
-    return Array.isArray(data.entries) ? asRevisions(data.entries) : [];
+    return {
+      entries: Array.isArray(data.entries) ? asRevisions(data.entries) : [],
+      liveRevision: typeof data.liveRevision === 'number' ? data.liveRevision : null,
+    };
   },
 
   diffRevisions: async (from: number, to: number): Promise<DiffEntry[]> => {
@@ -385,6 +393,10 @@ export interface RevisionEntry {
 /**
  * 服务端 diff 的一个字段。from/to 是快照里的原值（可能不是字符串），moved 的
  * 两侧是 0 起始的数组下标。值一律由调用方按需格式化，这里不做形状假设。
+ *
+ * `routeId` / `field` / `risk` 由服务端算好带下来：路由 id 本身可以含点，
+ * `routes.foo.bar` 在浏览器里无法切开；危险判定也只能有一份（服务端的
+ * `dangerFlags`，发布闸门用的就是它）。
  */
 export interface DiffEntry {
   readonly path: string;
@@ -393,6 +405,16 @@ export interface DiffEntry {
   readonly to?: unknown;
   readonly fromPosition?: number;
   readonly toPosition?: number;
+  readonly routeId?: string;
+  readonly field?: string;
+  readonly risk?: FieldRisk;
+  readonly riskCount?: number;
+}
+
+/** 历史列表连同「线上是哪一版」。 */
+export interface RevisionList {
+  readonly entries: readonly RevisionEntry[];
+  readonly liveRevision: number | null;
 }
 
 const asRevisions = (raw: readonly unknown[]): RevisionEntry[] => {
@@ -419,6 +441,22 @@ const asRevisions = (raw: readonly unknown[]): RevisionEntry[] => {
   return entries;
 };
 
+/** 服务端的风险条目形状未知（跨版本），轻量守卫；宁缺勿崩。 */
+const asRisk = (raw: unknown): FieldRisk | undefined => {
+  if (typeof raw !== 'object' || raw === null) {
+    return undefined;
+  }
+  const record = raw as Record<string, unknown>;
+  if (typeof record.path !== 'string' || typeof record.reason !== 'string') {
+    return undefined;
+  }
+  return {
+    path: record.path,
+    level: record.level === 'high' ? 'high' : 'medium',
+    reason: record.reason,
+  };
+};
+
 const asDiffEntries = (raw: readonly unknown[]): DiffEntry[] => {
   const entries: DiffEntry[] = [];
   for (const item of raw) {
@@ -430,6 +468,7 @@ const asDiffEntries = (raw: readonly unknown[]): DiffEntry[] => {
       continue;
     }
     const kind = record.kind;
+    const risk = asRisk(record.risk);
     entries.push({
       path: record.path,
       kind:
@@ -440,6 +479,10 @@ const asDiffEntries = (raw: readonly unknown[]): DiffEntry[] => {
       ...(record.to === undefined ? {} : { to: record.to }),
       ...(typeof record.fromPosition === 'number' ? { fromPosition: record.fromPosition } : {}),
       ...(typeof record.toPosition === 'number' ? { toPosition: record.toPosition } : {}),
+      ...(typeof record.routeId === 'string' ? { routeId: record.routeId } : {}),
+      ...(typeof record.field === 'string' ? { field: record.field } : {}),
+      ...(risk === undefined ? {} : { risk }),
+      ...(typeof record.riskCount === 'number' ? { riskCount: record.riskCount } : {}),
     });
   }
   return entries;
diff --git a/workers/admin-panel/web/src/lib/messages.ts b/workers/admin-panel/web/src/lib/messages.ts
index 3e8fe63..449baf2 100644
--- a/workers/admin-panel/web/src/lib/messages.ts
+++ b/workers/admin-panel/web/src/lib/messages.ts
@@ -775,8 +775,12 @@ export const t = {
    */
   history: {
     title: '发布历史',
-    description: '每一次发布都是一个 revision。选两张卡对比改动，或把任意一版重新发布。',
+    description: '每一次发布都是一个 revision。勾两个 revision 对比改动，或把任意一版重新发布。',
     refresh: '刷新',
+    total: (count: number) => `保留了最近 ${count} 次发布`,
+    showOlder: (count: number) => `显示更早的（还有 ${count} 条）`,
+    liveNotListed: (revision: number) =>
+      `正在服务流量的是 revision ${revision} —— 它已经滚出了保留窗口，所以下面的时间轴里没有它。`,
     liveBadge: '正在服务',
     rolledBackFrom: (revision: number) => `回滚自 #${revision}`,
     routes: (count: number) => `${count} 条路由`,
@@ -792,12 +796,22 @@ export const t = {
     loadFailed: (message: string) => `历史加载失败：${message}`,
 
     diff: {
-      select: '对比',
+      selectLabel: (revision: number) => `把 revision ${revision} 选进对比`,
       selected: (revision: number) => `已选 #${revision}`,
-      title: (a: number, b: number) => `对比 #${a} ↔ #${b}`,
+      olderSide: '原始版本',
+      newerSide: '较新版本',
+      pickedOne: (revision: number) => `已选 #${revision} —— 再勾一个 revision 就开始对比。`,
+      evictHint: '再勾一个会替换先勾的那个。',
+      title: (older: number, newer: number) => `对比 #${older} → #${newer}`,
+      /** 方向永远是时间序，所以两侧用绝对指称，不用「原值 / 新值」这种相对词。 */
+      valueOf: (revision: number) => `#${revision} 的值`,
+      summary: (count: number) => `${count} 项差异`,
+      summaryDanger: (count: number) => `其中 ${count} 项危险`,
+      /** 路由块上的徽章：与摘要句用不同措辞，同一屏不要出现两句一样的话。 */
+      dangerBadge: (count: number) => `${count} 项危险`,
       clear: '清除对比',
       loading: '正在对比…',
-      empty: '两版内容完全一致。',
+      empty: '两版内容完全一致。（回滚天生会造出内容相同的一对。）',
       failed: (message: string) => `对比失败：${message}`,
       groups: {
         added: '新增',
@@ -807,11 +821,15 @@ export const t = {
       } as Record<string, string>,
       defaultsTitle: '表级默认值',
       routesTitle: '路由',
-      fromLabel: '原值',
-      toLabel: '新值',
-      valueLabel: (value: string) => `改为 ${value}`,
+      otherTitle: '文档本身',
+      routeAdded: '整条路由是新增的',
+      routeRemoved: '整条路由被删掉了',
+      addedDangerCount: (count: number) => `这条新路由带着 ${count} 个危险开关`,
       positionLabel: (from: number, to: number) =>
         `第 ${String(from + 1)} 位 → 第 ${String(to + 1)} 位`,
+      positionHint: '顺序即优先级，第一个匹配到的路由胜出。',
+      absent: '（没有这个字段）',
+      showFull: '看全文',
       truncated: '（过长已截断）',
       unavailable: '有一侧没有快照，对比不了。',
       corrupt: '有一侧快照损坏，对比不了。',
diff --git a/workers/admin-panel/web/src/lib/types.ts b/workers/admin-panel/web/src/lib/types.ts
index 17d8ea7..4ab31aa 100644
--- a/workers/admin-panel/web/src/lib/types.ts
+++ b/workers/admin-panel/web/src/lib/types.ts
@@ -371,6 +371,10 @@ export const DANGER_REASONS: Record<string, string> = {
     '没有列出 origin 会反射任何调用方的 origin，等于让别的站点通过这个代理读取带凭据的响应。',
   'bodyRewrite.contentTypes': '列表写宽了会把非文本响应改写成乱码。',
   'bodyRewrite.fallbackCharset': '用错的字符集解码会把响应体弄坏；猜错比不改写更糟。',
+  'bodyRewrite.inject':
+    '注入的标记会一字不改地送到每个访客眼前，而上游那条本来可能拦住它的 CSP 在发出去之前已经被摘掉了。',
+  'bodyRewrite.replace':
+    '按字面替换发出去的字节：页面里出现的 `from` 会被换成 `to` 写的任何东西，包括访客浏览器会执行的标记。',
   'ip.allow': 'allow 列表写错一个字符，就会放进本想排除的地址。',
   'ip.deny': 'deny 列表写错一个字符，就会挡掉正常的调用方。',
   'access.keys':
@@ -382,13 +386,31 @@ export const DANGER_REASONS: Record<string, string> = {
     '这些规则在代理改写之后跑，所以能把 Location 指回上游、能加回一条让改写后页面加载不了自己资源的 CSP、也能加回让客户端从自己缓存里取未改写正文的校验头。',
   'cache.contentTypes':
     '默认只缓存静态资源。把文档类型加进来，一个没带 cookie、也没标 private 的个性化页面就会被发给下一个访客。',
+  'cache.key.headers':
+    '这些头的每个不同取值都各占一份缓存。折进 user-agent 这类高基数头，等于给每个访客单开一份缓存，命中率归零。',
   'requestPolicy.allowedMethods':
     '列表写漏一个方法，用它的调用方全部收到 405 —— 拒绝是显式的，不会悄悄放行去别处。',
   'forwardAuth.url': '写 `http://` 意味着 cookie 和 authorization 以明文发往鉴权端点。',
   'forwardAuth.failOpen':
     '打开后鉴权端点挂了所有请求直接放行 —— 可用性高于准入，故障会变成全场免票。',
+  respond:
+    '这条路由在边缘直接作答，什么都不转发。忘了撤的维护页、或者匹配写宽了，都会让真实流量下线，而上游一无所知。',
+  'respond.redirect.allowExternal':
+    '跳转目标可以是任何 host。一个被改坏的值就把这条路由变成开放重定向，送去谁也没审过的地方。',
+  'mirror.methods':
+    '镜像会把请求在另一个目标上再跑一遍。非幂等的方法意味着一次访客动作变成两封邮件、两笔扣款、两条记录。',
+  'mirror.includeBody':
+    '请求体会被复制到镜像目标：它带着的东西（凭据、个人信息）从此也到了第二个主机，而缓冲它的内存算在 isolate 头上。',
 };
 
+/**
+ * 一条风险说给人听的说法。服务端的 `reason` 是英文，`DANGER_REASONS` 是面板
+ * 自己的语言，优先用后者 —— 但服务端可能认得面板还没收录的新字段，所以英文
+ * 原话是兜底而不是被丢掉。回滚弹窗与发布历史的 diff 说的是同一件事，因此这
+ * 个映射只能有一份。
+ */
+export const dangerReason = (risk: FieldRisk): string => DANGER_REASONS[risk.path] ?? risk.reason;
+
 /**
  * 请求方向的保留头：写或删都会被 schema 拒绝。
  *
diff --git a/workers/admin-panel/web/src/views/history-view.test.tsx b/workers/admin-panel/web/src/views/history-view.test.tsx
index b10a569..bd88c45 100644
--- a/workers/admin-panel/web/src/views/history-view.test.tsx
+++ b/workers/admin-panel/web/src/views/history-view.test.tsx
@@ -8,6 +8,11 @@ import { ApiError, api, type RevisionEntry } from '@/lib/api';
  * 历史页的焊接点：viewer 不得看到可用的回滚按钮（服务端有闸门，但「不摆假
  * 按钮」是前端的本分）；无快照的卡不可选、不可回滚；两段式确认把 confirm
  * 一路传到底。
+ *
+ * 另外三条是回归测试，各自钉住一个曾经真实存在的缺陷：
+ * - 「回滚」必须能用键盘打开（从前卡片的 onKeyDown 把 Enter 吃掉，变成勾选）；
+ * - diff 方向必须是时间序，不看勾选顺序（从前自上而下勾会得到反向 diff）；
+ * - 同一对 revision 失败之后必须能重试（从前 effect 依赖不变，重试无门）。
  */
 
 const entry = (overrides: Partial<RevisionEntry>): RevisionEntry => ({
@@ -27,9 +32,12 @@ const seeded = (): RevisionEntry[] => [
   entry({ revision: 1, note: 'first' }),
 ];
 
+const pick = (revision: number): HTMLElement =>
+  screen.getByRole('checkbox', { name: `把 revision ${String(revision)} 选进对比` });
+
 describe('HistoryView 发布历史', () => {
   beforeEach(() => {
-    vi.spyOn(api, 'listRevisions').mockResolvedValue(seeded());
+    vi.spyOn(api, 'listRevisions').mockResolvedValue({ entries: seeded(), liveRevision: 2 });
   });
 
   afterEach(() => {
@@ -49,27 +57,103 @@ describe('HistoryView 发布历史', () => {
   });
 
   it('无快照的卡没有动作按钮，也不能选进对比', async () => {
-    vi.mocked(api.listRevisions).mockResolvedValue([
-      entry({ revision: 1, snapshot: 'none', routeCount: null }),
-    ]);
+    vi.mocked(api.listRevisions).mockResolvedValue({
+      entries: [entry({ revision: 1, snapshot: 'none', routeCount: null })],
+      liveRevision: null,
+    });
     render(<HistoryView isAdmin onConfigChanged={() => {}} />);
     await waitFor(() => expect(screen.getByText('无快照')).toBeInTheDocument());
     expect(screen.queryByRole('button', { name: '回滚' })).toBeNull();
-    expect(screen.queryByRole('button', { name: '对比' })).toBeNull();
+    expect(screen.queryByRole('checkbox')).toBeNull();
   });
 
-  it('选两张卡触发 diff，diff 结果按服务端给的条目渲染', async () => {
+  it('勾两个 revision 触发 diff，方向按时间序而不是勾选顺序', async () => {
     const user = userEvent.setup();
     vi.spyOn(api, 'diffRevisions').mockResolvedValue([
-      { path: 'routes.alpha.upstream', kind: 'changed', from: 'a', to: 'b' },
+      {
+        path: 'routes.alpha.upstream',
+        kind: 'changed',
+        from: 'a',
+        to: 'b',
+        routeId: 'alpha',
+        field: 'upstream',
+      },
     ]);
     render(<HistoryView isAdmin onConfigChanged={() => {}} />);
-    await waitFor(() => expect(screen.getAllByRole('button', { name: '对比' })).toHaveLength(2));
+    await waitFor(() => expect(pick(2)).toBeInTheDocument());
 
-    await user.click(screen.getAllByRole('button', { name: '对比' })[1]);
-    await user.click(screen.getAllByRole('button', { name: /对比|取消/ })[0]);
+    // 自上而下勾：先较新的 #2，再较旧的 #1。from 仍必须是 1。
+    await user.click(pick(2));
+    expect(screen.getByText('已选 #2 —— 再勾一个 revision 就开始对比。')).toBeInTheDocument();
+    await user.click(pick(1));
     await waitFor(() => expect(api.diffRevisions).toHaveBeenCalledWith(1, 2));
-    expect(await screen.findByText(/routes\.alpha\.upstream/)).toBeInTheDocument();
+
+    expect(await screen.findByText('对比 #1 → #2')).toBeInTheDocument();
+    // 路由为分组标题，行里只留字段名。
+    expect(screen.getByText('alpha')).toBeInTheDocument();
+    expect(screen.getByText('upstream')).toBeInTheDocument();
+    // 两侧用绝对指称，不用「原值 / 新值」。
+    expect(screen.getByText('#1 的值')).toBeInTheDocument();
+    expect(screen.getByText('#2 的值')).toBeInTheDocument();
+  });
+
+  it('危险字段带上服务端的判定与面板自己的中文后果', async () => {
+    const user = userEvent.setup();
+    vi.spyOn(api, 'diffRevisions').mockResolvedValue([
+      {
+        path: 'routes.alpha.allowPrivateUpstream',
+        kind: 'changed',
+        from: false,
+        to: true,
+        routeId: 'alpha',
+        field: 'allowPrivateUpstream',
+        risk: { path: 'allowPrivateUpstream', level: 'high', reason: 'english fallback' },
+      },
+    ]);
+    render(<HistoryView isAdmin onConfigChanged={() => {}} />);
+    await waitFor(() => expect(pick(2)).toBeInTheDocument());
+    await user.click(pick(2));
+    await user.click(pick(1));
+
+    expect(await screen.findByText(/放行 loopback、内网和云元数据地址/)).toBeInTheDocument();
+    expect(screen.getByText(/其中 1 项危险/)).toBeInTheDocument();
+  });
+
+  it('对比失败给出服务端的 detail，并且同一对能重试', async () => {
+    const user = userEvent.setup();
+    vi.spyOn(api, 'diffRevisions').mockRejectedValueOnce(
+      new ApiError('snapshot_unavailable', 409, { detail: 'revision 1 has no snapshot' }),
+    );
+    vi.mocked(api.diffRevisions).mockResolvedValueOnce([]);
+    render(<HistoryView isAdmin onConfigChanged={() => {}} />);
+    await waitFor(() => expect(pick(2)).toBeInTheDocument());
+    await user.click(pick(2));
+    await user.click(pick(1));
+
+    expect(await screen.findByText('有一侧没有快照，对比不了。')).toBeInTheDocument();
+    expect(screen.getByText('revision 1 has no snapshot')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: '重试' }));
+    await waitFor(() => expect(api.diffRevisions).toHaveBeenCalledTimes(2));
+    expect(await screen.findByText(/两版内容完全一致/)).toBeInTheDocument();
+  });
+
+  it('回滚可以用键盘打开 —— Enter 不会被卡片吃成勾选', async () => {
+    const user = userEvent.setup();
+    render(<HistoryView isAdmin onConfigChanged={() => {}} />);
+    await waitFor(() => expect(screen.getAllByRole('button', { name: '回滚' })).toHaveLength(2));
+
+    // [0] 是 live 那一版（禁用），[1] 是 #1。
+    const rollback = screen.getAllByRole('button', { name: '回滚' })[1];
+    rollback.focus();
+    await user.keyboard('{Enter}');
+
+    expect(await screen.findByRole('button', { name: '确认回滚' })).toBeInTheDocument();
+    // 而且它没有顺手把这张卡勾进对比。弹窗开着时背景被 Base UI 标了
+    // aria-hidden，所以这一句要 hidden: true 才查得到。
+    expect(
+      screen.getByRole('checkbox', { name: '把 revision 1 选进对比', hidden: true }),
+    ).toHaveAttribute('aria-checked', 'false');
   });
 
   it('回滚走两段式：先 409 拿危险清单，勾选确认后 confirm 为 true 重提', async () => {
@@ -95,9 +179,10 @@ describe('HistoryView 发布历史', () => {
     await waitFor(() => expect(api.rollback).toHaveBeenCalledWith(1, undefined, true));
   });
 
-  it('加载失败显示错误文案，viewer 的 403 也不例外', async () => {
+  it('加载失败显示错误文案与重试按钮，viewer 的 403 也不例外', async () => {
     vi.mocked(api.listRevisions).mockRejectedValue(new ApiError('forbidden', 403, {}));
     render(<HistoryView isAdmin={false} onConfigChanged={() => {}} />);
     expect(await screen.findByText(/历史加载失败/)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: '重试' })).toBeInTheDocument();
   });
 });
diff --git a/workers/admin-panel/web/src/views/history-view.tsx b/workers/admin-panel/web/src/views/history-view.tsx
index e6e43b5..7a34390 100644
--- a/workers/admin-panel/web/src/views/history-view.tsx
+++ b/workers/admin-panel/web/src/views/history-view.tsx
@@ -11,6 +11,7 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
 import {
   Empty,
   EmptyDescription,
@@ -27,24 +28,40 @@ import { timeAgo, timeExact } from '@/lib/format';
 import { t } from '@/lib/messages';
 
 /**
- * 发布历史：视觉化时间轴。
+ * 发布历史：视觉化时间轴 + 两版对比。
  *
- * 每一次发布是一张卡，竖向轨道从新到旧。这个视图自己拉数据（与审计页同一模式：
- * 历史是服务端的事实，不接草稿状态），对比与回滚在卡上就地展开。
+ * 三个形态上的决定，每一个都是为了回答值班的人那两个问题（上次改了什么、能不能
+ * 退回去）：
  *
- * 无快照的条目（早于历史功能的发布）照样上墙，但对比/回滚不出按钮、只说明原因
- * —— 只说实话，不做假按钮。revision 编号断档时插入一句说明：那次发布改动
- * 已上线、面板记录没写成，历史无法补记。
+ * 1. **对比区在时间轴之前**。结果排在 50 张卡之后等于没有结果 —— 勾完两个
+ *    revision，视口里必须立刻有东西变。
+ * 2. **方向永远是时间序**，不看勾选顺序：`from` 取较小的 revision，两侧因此可以
+ *    用绝对指称（「#45 的值」）而不是「原值 / 新值」这种会读反的相对词。
+ * 3. **勾选用真的 Checkbox**，卡片不是按钮。整卡可点换来的是嵌套交互控件、上百
+ *    字的可访问名，以及键盘上按不动的「回滚」—— 那个代价太大。
+ *
+ * 这个视图自己拉数据（与审计页同一模式：历史是服务端的事实，不接草稿状态）。
+ * 无快照的条目照样上墙，但不可勾选、不可回滚，只说明原因 —— 只说实话，不做假
+ * 按钮。revision 编号断档时插入一句说明。
  */
 
-/** 已勾选待对比的 revision；最多两个，够了 —— diff 本来就是两侧的事。 */
-type Selection = readonly [number | null, number | null];
+/** 一屏先给多少张卡。滚动保留 50 版，一次全铺开等于让人滚过整部历史找结果。 */
+const PAGE_SIZE = 20;
+
+/** 已勾选的 revision，按勾选顺序，最多两个 —— diff 本来就是两侧的事。 */
+type Selection = readonly number[];
 
 type LoadFailure =
   | { readonly kind: 'network' }
   | { readonly kind: 'session' }
   | { readonly kind: 'message'; readonly text: string };
 
+/** 对比失败：`text` 是面板的说法，`detail` 是服务端多说的那一句（哪一侧、为什么）。 */
+interface DiffFailure {
+  readonly text: string;
+  readonly detail?: string;
+}
+
 const failureText = (failure: LoadFailure): string => {
   switch (failure.kind) {
     case 'network':
@@ -56,21 +73,32 @@ const failureText = (failure: LoadFailure): string => {
   }
 };
 
-/** 时间轴卡：一张 revision。无快照的卡整张不可点，说明行写明原因。 */
+/** 服务端 409 的 `detail` 说了是哪一侧没快照；只取字符串，不猜形状。 */
+const detailOf = (error: unknown): string | undefined => {
+  if (!(error instanceof ApiError)) {
+    return undefined;
+  }
+  const detail = (error.body as Record<string, unknown>).detail;
+  return typeof detail === 'string' ? detail : undefined;
+};
+
+/** 时间轴卡：一张 revision。无快照的卡不可勾选，说明行写明原因。 */
 const RevisionCard = ({
   entry,
-  selected,
+  role,
   isAdmin,
   onToggleSelect,
   onRollback,
 }: {
   readonly entry: RevisionEntry;
-  readonly selected: boolean;
+  /** 这张卡在当前对比里的位置：未选中 / 只选了它 / 原始侧 / 较新侧。 */
+  readonly role: 'none' | 'only' | 'older' | 'newer';
   readonly isAdmin: boolean;
   readonly onToggleSelect: () => void;
   readonly onRollback: () => void;
 }) => {
   const hasSnapshot = entry.snapshot === 'full';
+  const selected = role !== 'none';
   return (
     <li className="relative flex gap-3">
       {/* 轨道：竖线 + 圆点。圆点是整条时间轴的视觉锚，正在服务的版本换主色。 */}
@@ -85,32 +113,22 @@ const RevisionCard = ({
         <span className="bg-border w-px grow" />
       </div>
 
-      <Card
-        role="button"
-        tabIndex={hasSnapshot ? 0 : undefined}
-        aria-pressed={hasSnapshot ? selected : undefined}
-        onClick={() => {
-          if (hasSnapshot) {
-            onToggleSelect();
-          }
-        }}
-        onKeyDown={(event) => {
-          if (hasSnapshot && (event.key === 'Enter' || event.key === ' ')) {
-            event.preventDefault();
-            onToggleSelect();
-          }
-        }}
-        className={
-          selected
-            ? 'border-primary w-full cursor-pointer ring-2 ring-primary/30'
-            : hasSnapshot
-              ? 'hover:border-ring w-full cursor-pointer'
-              : 'w-full'
-        }
-      >
+      <Card className={selected ? 'w-full ring-2 ring-primary/40' : 'w-full'}>
         <CardHeader>
           <div className="flex flex-wrap items-center gap-2">
-            <CardTitle className="font-mono">#{entry.revision}</CardTitle>
+            {hasSnapshot ? (
+              <Checkbox
+                checked={selected}
+                onCheckedChange={onToggleSelect}
+                aria-label={t.history.diff.selectLabel(entry.revision)}
+              />
+            ) : (
+              // 占位让所有卡的 revision 号对齐一列；无快照的卡本来就选不了。
+              <span className="size-4 shrink-0" aria-hidden />
+            )}
+            <CardTitle className="font-mono" role="heading" aria-level={3}>
+              #{entry.revision}
+            </CardTitle>
             {entry.live && (
               <Badge>
                 <TimerIcon aria-hidden />
@@ -121,53 +139,42 @@ const RevisionCard = ({
               <Badge variant="secondary">{t.history.rolledBackFrom(entry.rollbackOf)}</Badge>
             )}
             {!hasSnapshot && <Badge variant="outline">{t.history.snapshotNone}</Badge>}
-            {selected && (
+            {role === 'only' && (
               <Badge variant="secondary">{t.history.diff.selected(entry.revision)}</Badge>
             )}
+            {role === 'older' && <Badge variant="secondary">{t.history.diff.olderSide}</Badge>}
+            {role === 'newer' && <Badge variant="secondary">{t.history.diff.newerSide}</Badge>}
           </div>
-          <CardDescription>
-            {timeAgo(entry.at)} · {timeExact(entry.at)} · {entry.actor}
+          <CardDescription className="flex flex-wrap items-baseline gap-x-1.5">
+            <span>{timeAgo(entry.at)}</span>
+            <span aria-hidden>·</span>
+            {/* 确切时间是要被逐字符核对的数据：等宽 + 等宽数字，整列才对得齐。 */}
+            <span className="font-mono tabular-nums">{timeExact(entry.at)}</span>
+            <span aria-hidden>·</span>
+            <span className="font-mono break-all">{entry.actor}</span>
           </CardDescription>
-          <CardAction className="flex items-center gap-1.5">
-            {hasSnapshot && (
-              <>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    onToggleSelect();
-                  }}
-                >
-                  <GitCompareIcon aria-hidden />
-                  {selected ? '' : t.history.diff.select}
-                </Button>
-                {isAdmin && (
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    disabled={entry.live}
-                    title={entry.live ? t.history.rollback.errors.already_live : undefined}
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      onRollback();
-                    }}
-                  >
-                    <RotateCcwIcon aria-hidden />
-                    {t.history.rollback.action}
-                  </Button>
-                )}
-              </>
-            )}
-          </CardAction>
+          {isAdmin && hasSnapshot && (
+            <CardAction>
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={entry.live}
+                title={entry.live ? t.history.rollback.errors.already_live : undefined}
+                onClick={onRollback}
+              >
+                <RotateCcwIcon aria-hidden />
+                {t.history.rollback.action}
+              </Button>
+            </CardAction>
+          )}
         </CardHeader>
         <CardContent className="flex flex-col gap-1">
-          <p className="text-muted-foreground text-sm">
+          <p className="text-muted-foreground text-xs">
             {entry.routeCount === null
               ? t.history.routesUnknown
               : t.history.routes(entry.routeCount)}
-            {entry.note !== null && <span className="text-foreground"> · {entry.note}</span>}
           </p>
+          {entry.note !== null && <p className="text-foreground text-sm">{entry.note}</p>}
           {!hasSnapshot && (
             <p className="text-muted-foreground text-xs">{t.history.snapshotNoneReason}</p>
           )}
@@ -194,20 +201,27 @@ export interface HistoryViewProps {
 }
 
 export const HistoryView = ({ isAdmin, onConfigChanged }: HistoryViewProps) => {
-  const [entries, setEntries] = React.useState<RevisionEntry[] | null>(null);
+  const [entries, setEntries] = React.useState<readonly RevisionEntry[] | null>(null);
+  const [liveRevision, setLiveRevision] = React.useState<number | null>(null);
   const [failure, setFailure] = React.useState<LoadFailure | null>(null);
   const [loading, setLoading] = React.useState(true);
-  /** 勾选待对比的 revision，最多两个；勾齐两个就拉 diff。 */
-  const [selection, setSelection] = React.useState<Selection>([null, null]);
+  const [shown, setShown] = React.useState(PAGE_SIZE);
+  /** 勾选的 revision，按勾选顺序，最多两个。 */
+  const [selection, setSelection] = React.useState<Selection>([]);
   const [diffEntries, setDiffEntries] = React.useState<readonly DiffEntry[] | null>(null);
   const [diffLoading, setDiffLoading] = React.useState(false);
-  const [diffFailure, setDiffFailure] = React.useState<string | null>(null);
+  const [diffFailure, setDiffFailure] = React.useState<DiffFailure | null>(null);
+  /** 重试计数：同一对 revision 失败之后必须能再问一次，否则只能取消重勾。 */
+  const [diffAttempt, setDiffAttempt] = React.useState(0);
   const [rollbackTarget, setRollbackTarget] = React.useState<RevisionEntry | null>(null);
+  const compareRef = React.useRef<HTMLDivElement | null>(null);
 
   const load = React.useCallback(async () => {
     setLoading(true);
     try {
-      setEntries(await api.listRevisions());
+      const list = await api.listRevisions();
+      setEntries(list.entries);
+      setLiveRevision(list.liveRevision);
       setFailure(null);
     } catch (error) {
       if (error instanceof NetworkError) {
@@ -229,9 +243,20 @@ export const HistoryView = ({ isAdmin, onConfigChanged }: HistoryViewProps) => {
     void load();
   }, [load]);
 
-  const [from, to] = selection;
+  /**
+   * 方向永远是时间序：`from` 取较小的 revision。勾选顺序只决定「再勾一个替换
+   * 谁」，不决定 diff 读法 —— 自上而下勾（列表从新到旧）不该得到一个反向的 diff。
+   */
+  const pair = React.useMemo(() => {
+    if (selection.length < 2) {
+      return null;
+    }
+    const [a, b] = selection;
+    return { older: Math.min(a, b), newer: Math.max(a, b) };
+  }, [selection]);
+
   React.useEffect(() => {
-    if (from === null || to === null) {
+    if (pair === null) {
       setDiffEntries(null);
       setDiffFailure(null);
       return;
@@ -240,7 +265,7 @@ export const HistoryView = ({ isAdmin, onConfigChanged }: HistoryViewProps) => {
     setDiffLoading(true);
     setDiffFailure(null);
     api
-      .diffRevisions(from, to)
+      .diffRevisions(pair.older, pair.newer)
       .then((result) => {
         if (!cancelled) {
           setDiffEntries(result);
@@ -250,15 +275,18 @@ export const HistoryView = ({ isAdmin, onConfigChanged }: HistoryViewProps) => {
         if (cancelled) {
           return;
         }
-        if (error instanceof ApiError && error.code === 'snapshot_unavailable') {
-          setDiffFailure(t.history.diff.unavailable);
-        } else if (error instanceof ApiError && error.code === 'snapshot_corrupt') {
-          setDiffFailure(t.history.diff.corrupt);
-        } else if (error instanceof NetworkError) {
-          setDiffFailure(t.common.networkError);
-        } else {
-          setDiffFailure(error instanceof ApiError ? error.code : t.common.unknownError);
-        }
+        const detail = detailOf(error);
+        const known =
+          error instanceof ApiError && error.code === 'snapshot_unavailable'
+            ? t.history.diff.unavailable
+            : error instanceof ApiError && error.code === 'snapshot_corrupt'
+              ? t.history.diff.corrupt
+              : error instanceof NetworkError
+                ? t.common.networkError
+                : t.history.diff.failed(
+                    error instanceof ApiError ? error.code : t.common.unknownError,
+                  );
+        setDiffFailure({ text: known, ...(detail === undefined ? {} : { detail }) });
       })
       .finally(() => {
         if (!cancelled) {
@@ -268,35 +296,89 @@ export const HistoryView = ({ isAdmin, onConfigChanged }: HistoryViewProps) => {
     return () => {
       cancelled = true;
     };
-  }, [from, to]);
+  }, [pair, diffAttempt]);
+
+  /* 勾满两个就把对比区带进视口 —— 它在列表之前，人可能正停在第 30 张卡上。
+     `nearest` 已经在视野里就不动，不会把人从他正在看的地方弹开。
+     可选调用是给 jsdom 的：那里没有 scrollIntoView，而这不是测试该崩的理由。 */
+  const complete = pair !== null;
+  React.useEffect(() => {
+    if (complete) {
+      compareRef.current?.scrollIntoView?.({ block: 'nearest' });
+    }
+  }, [complete]);
 
   const toggleSelect = (revision: number): void => {
-    setSelection(([a, b]) => {
-      // 点已选中的取消它；否则挤掉最早的那个，保持「最多两个」。
-      if (a === revision) {
-        return [b, null];
+    setSelection((current) => {
+      if (current.includes(revision)) {
+        return current.filter((value) => value !== revision);
       }
-      if (b === revision) {
-        return [a, null];
-      }
-      return a === null ? [revision, b] : [a, revision];
+      // 先进先出：再勾一个替换先勾的那个。可预测，且与界面上那句提示一致。
+      const next = [...current, revision];
+      return next.length > 2 ? next.slice(next.length - 2) : next;
     });
   };
 
+  const roleOf = (revision: number): 'none' | 'only' | 'older' | 'newer' => {
+    if (pair !== null) {
+      return pair.older === revision ? 'older' : pair.newer === revision ? 'newer' : 'none';
+    }
+    return selection[0] === revision ? 'only' : 'none';
+  };
+
   const onRolledBack = (): void => {
     setRollbackTarget(null);
-    setSelection([null, null]);
+    setSelection([]);
+    setShown(PAGE_SIZE);
     void load();
     onConfigChanged();
   };
 
+  const dangerCount = diffEntries?.filter((entry) => entry.risk !== undefined).length ?? 0;
+
+  /**
+   * 对比区的状态句，只说一次。
+   *
+   * 它同时是可见文案和 live region：容器常驻（读屏才播报得到新内容），句子是
+   * 这一句的唯一副本 —— 再抄一份 sr-only 的等于让读屏把同一句听两遍。
+   */
+  const statusText = ((): string => {
+    if (pair === null) {
+      return selection.length === 1 ? t.history.diff.pickedOne(selection[0]) : '';
+    }
+    if (diffLoading) {
+      return t.history.diff.loading;
+    }
+    if (diffFailure !== null) {
+      // 失败由那张 Alert 自己播报（`role="alert"` 是刚挂载也读得到的那种活区），
+      // 状态行不再抄一遍 —— 同一句话在屏幕上出现两次比不出现更糟。
+      return '';
+    }
+    if (diffEntries === null) {
+      return '';
+    }
+    // 「两版完全一致」由卡里那句话解释成因，状态行只报计数 —— 一句话不出现两次。
+    return t.history.diff.summary(diffEntries.length);
+  })();
+
+  /** 危险从句单独拆出来染色：全系统唯一的色相，在这里赚到了位置。 */
+  const statusDanger =
+    pair !== null && !diffLoading && diffFailure === null && dangerCount > 0
+      ? t.history.diff.summaryDanger(dangerCount)
+      : '';
+
+  const visible = entries?.slice(0, shown) ?? [];
+  const remaining = (entries?.length ?? 0) - visible.length;
+
   return (
     <div className="flex flex-col gap-4">
       <Card>
         <CardHeader>
           <div className="flex items-center gap-2">
             <HistoryIcon aria-hidden />
-            <CardTitle>{t.history.title}</CardTitle>
+            <CardTitle role="heading" aria-level={2}>
+              {t.history.title}
+            </CardTitle>
           </div>
           <CardDescription>{t.history.description}</CardDescription>
           <CardAction>
@@ -306,17 +388,91 @@ export const HistoryView = ({ isAdmin, onConfigChanged }: HistoryViewProps) => {
             </Button>
           </CardAction>
         </CardHeader>
+        {entries !== null && entries.length > 0 && (
+          <CardContent className="flex flex-col gap-1">
+            <p className="text-muted-foreground text-xs">{t.history.total(entries.length)}</p>
+            {liveRevision !== null && !entries.some((entry) => entry.live) && (
+              <p className="text-muted-foreground text-xs">
+                {t.history.liveNotListed(liveRevision)}
+              </p>
+            )}
+          </CardContent>
+        )}
       </Card>
 
       {failure !== null && (
-        <Alert>
+        <Alert variant="destructive" role="alert">
           <AlertTitle>{failureText(failure)}</AlertTitle>
-          <AlertDescription />
+          <AlertDescription>
+            <Button variant="outline" size="sm" onClick={() => void load()}>
+              {t.common.retry}
+            </Button>
+          </AlertDescription>
         </Alert>
       )}
 
+      {/* 对比区在时间轴之前：勾完两个 revision，结果就在眼前，不在 6 屏之外。 */}
+      <div ref={compareRef} className="flex flex-col gap-4">
+        {/* 常驻的状态行 —— 容器不卸载，读屏才收得到「勾了一个」「13 项差异」。 */}
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <p
+            role="status"
+            aria-live="polite"
+            className="text-muted-foreground flex items-center gap-2 text-sm"
+          >
+            {statusText !== '' && <GitCompareIcon className="size-4 shrink-0" aria-hidden />}
+            {statusText}
+            {statusDanger !== '' && (
+              <span className="text-destructive font-medium">· {statusDanger}</span>
+            )}
+          </p>
+          {selection.length > 0 && (
+            <Button variant="ghost" size="sm" onClick={() => setSelection([])}>
+              {t.history.diff.clear}
+            </Button>
+          )}
+        </div>
+
+        {pair !== null && (
+          <Card>
+            <CardHeader>
+              <CardTitle className="font-mono" role="heading" aria-level={2}>
+                {t.history.diff.title(pair.older, pair.newer)}
+              </CardTitle>
+              <CardDescription>{t.history.diff.evictHint}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {diffFailure !== null ? (
+                <Alert variant="destructive" role="alert">
+                  <AlertTitle>{diffFailure.text}</AlertTitle>
+                  <AlertDescription className="flex flex-col items-start gap-2">
+                    {diffFailure.detail !== undefined && (
+                      <span className="font-mono text-xs break-all">{diffFailure.detail}</span>
+                    )}
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setDiffAttempt((attempt) => attempt + 1)}
+                    >
+                      {t.common.retry}
+                    </Button>
+                  </AlertDescription>
+                </Alert>
+              ) : (
+                <RevisionDiff
+                  entries={diffEntries}
+                  loading={diffLoading}
+                  older={pair.older}
+                  newer={pair.newer}
+                />
+              )}
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
       {loading && entries === null ? (
-        <div className="flex flex-col gap-3 pl-6">
+        <div className="flex flex-col gap-3 pl-6" aria-hidden>
           <Skeleton className="h-28 w-full" />
           <Skeleton className="h-28 w-full" />
           <Skeleton className="h-28 w-full" />
@@ -324,7 +480,7 @@ export const HistoryView = ({ isAdmin, onConfigChanged }: HistoryViewProps) => {
       ) : entries !== null && entries.length === 0 ? (
         <Empty>
           <EmptyHeader>
-            <EmptyMedia>
+            <EmptyMedia variant="icon">
               <HistoryIcon aria-hidden />
             </EmptyMedia>
             <EmptyTitle>{t.history.empty.title}</EmptyTitle>
@@ -334,14 +490,14 @@ export const HistoryView = ({ isAdmin, onConfigChanged }: HistoryViewProps) => {
       ) : entries !== null ? (
         <div className="flex flex-col gap-4">
           <ol className="flex flex-col gap-3">
-            {entries.map((entry, index) => (
+            {visible.map((entry, index) => (
               <React.Fragment key={entry.revision}>
-                {index > 0 && entry.revision < entries[index - 1].revision - 1 && (
-                  <GapRow before={entry.revision} after={entries[index - 1].revision} />
+                {index > 0 && entry.revision < visible[index - 1].revision - 1 && (
+                  <GapRow before={entry.revision} after={visible[index - 1].revision} />
                 )}
                 <RevisionCard
                   entry={entry}
-                  selected={entry.revision === from || entry.revision === to}
+                  role={roleOf(entry.revision)}
                   isAdmin={isAdmin}
                   onToggleSelect={() => toggleSelect(entry.revision)}
                   onRollback={() => setRollbackTarget(entry)}
@@ -349,27 +505,15 @@ export const HistoryView = ({ isAdmin, onConfigChanged }: HistoryViewProps) => {
               </React.Fragment>
             ))}
           </ol>
-
-          {from !== null && to !== null && (
-            <Card>
-              <CardHeader>
-                <CardTitle className="font-mono text-base">
-                  {t.history.diff.title(from, to)}
-                </CardTitle>
-                <CardAction>
-                  <Button variant="ghost" size="sm" onClick={() => setSelection([null, null])}>
-                    {t.history.diff.clear}
-                  </Button>
-                </CardAction>
-              </CardHeader>
-              <CardContent>
-                {diffFailure !== null ? (
-                  <p className="text-destructive text-sm">{diffFailure}</p>
-                ) : (
-                  <RevisionDiff entries={diffEntries} loading={diffLoading} />
-                )}
-              </CardContent>
-            </Card>
+          {remaining > 0 && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="self-center"
+              onClick={() => setShown((current) => current + PAGE_SIZE)}
+            >
+              {t.history.showOlder(remaining)}
+            </Button>
           )}
         </div>
       ) : null}
diff --git a/workers/admin-panel/web/src/views/preview-view.tsx b/workers/admin-panel/web/src/views/preview-view.tsx
index 0fd0767..a1b4069 100644
--- a/workers/admin-panel/web/src/views/preview-view.tsx
+++ b/workers/admin-panel/web/src/views/preview-view.tsx
@@ -22,7 +22,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { Spinner } from '@/components/ui/spinner';
 import type { PreviewResult } from '@/lib/api';
 import { t } from '@/lib/messages';
-import { DANGER_REASONS, type FieldRisk, type Issue } from '@/lib/types';
+import { dangerReason, type FieldRisk, type Issue } from '@/lib/types';
 
 /**
  * 发布预览。
@@ -53,9 +53,6 @@ interface PreviewViewProps {
   readonly onGoRoutes: () => void;
 }
 
-/** 服务端的 reason 是英文；DANGER_REASONS 是面板自己的说法（types.ts 注明了这一点），优先用它。 */
-const reasonOf = (risk: FieldRisk): string => DANGER_REASONS[risk.path] ?? risk.reason;
-
 /**
  * 一条校验问题的定位。
  *
@@ -170,7 +167,7 @@ const DangerCard = ({
               {risk.level === 'high' ? t.preview.dangerHigh : t.preview.dangerMedium}
             </Badge>
           </div>
-          <p className="text-muted-foreground text-xs">{reasonOf(risk)}</p>
+          <p className="text-muted-foreground text-xs">{dangerReason(risk)}</p>
         </li>
       ))}
     </ul>