Open context pane before cockpit entry in narrow layout

Why: at 390px the single-pane layout lands on 对话 after login and hides
the whole context sidebar (both sidebar and rail forms); scenario 7 must
switch to the 上下文 pane via the top bar before the entry exists.

Evidence: tsc clean, vitest green, build green (SELF); seven-scenario
rerun to be recorded on the Dev I4 card.

Impact: e2e spec only.

Refs: rollout I4

e2e/rdm-cockpit.playwright.ts

@@ -0,0 +1,182 @@
+// I4 组合验收（Playwright）：文档驾驶舱七场景（rollout §3.I4 最小场景集）。
+// 驱动方：Dev 仓 scripts/e2e.sh——构建 RDM 二进制（含 I1/I3 命令面）+ frontend dist，
+// 种子：审计演示项目（rdm-self + cockpit-e2e 结构装载；两个章节经草稿流落正文；
+// 一个章节留空；第二个账号 e2e-reader 不入项目做权限负例）。
+// 环境契约与 rdm-audit.playwright.ts 一致；PLAYWRIGHT_BASE_URL 未设置时整组跳过。
+import { test, expect, type Page } from '@playwright/test'
+
+const OWNER = process.env.E2E_OWNER || 'e2e-auditor'
+const PASSWORD = process.env.E2E_PASSWORD2 || 'E2eAudit#2026b'
+const READER = process.env.E2E_READER || 'e2e-reader'
+const READER_PASSWORD = process.env.E2E_READER_PASSWORD || 'E2eReader#2026'
+const MAIN = process.env.E2E_PROJECT_MAIN || '审计演示项目'
+
+test.skip(!process.env.PLAYWRIGHT_BASE_URL, 'set PLAYWRIGHT_BASE_URL (scripts/e2e.sh drives this suite)')
+
+async function login(page: Page, user: string, password: string) {
+  await page.goto('/')
+  await expect(page.getByPlaceholder('由管理员分配')).toBeVisible()
+  await page.getByPlaceholder('由管理员分配').fill(user)
+  await page.getByPlaceholder('初始密码或常用密码').fill(password)
+  await page.getByRole('button', { name: '登录', exact: true }).click()
+}
+
+// 侧栏入口两种形态：常规侧栏按钮（.tsb-tool）；窄宽紧凑布局换图标栏
+// （.icon-only 内 title 以「文档驾驶舱」开头的按钮）——入口都可达。
+function cockpitEntry(page: Page) {
+  return page.locator('.tsb-tool', { hasText: '文档驾驶舱' })
+    .or(page.locator('.icon-only button[title^="文档驾驶舱"]')).first()
+}
+
+async function loginOwner(page: Page) {
+    await login(page, OWNER, PASSWORD)
+    // 登录后身份纪元与能力探针仍可能各跳一次；应用在身份变更时会关闭已开
+    // 工作区——等落定再点入口，避免 overlay 被身份刷新关掉（竞态实测）。
+    await page.waitForLoadState('networkidle').catch(() => {})
+    await page.waitForTimeout(1_500)
+  }
+
+async function openCockpit(page: Page) {
+  // 窄宽是单窗格布局：登录后默认「对话」窗格，先切到「上下文」窗格。
+  if (!(await cockpitEntry(page).isVisible().catch(() => false))) {
+    await page.getByRole('button', { name: '打开上下文' }).click()
+  }
+  await cockpitEntry(page).click()
+  await expect(page.locator('.cockpit-project')).toBeVisible({ timeout: 15_000 })
+  // 默认选中首个项目（种子=审计演示项目）。
+  await expect(page.locator('.cockpit-stats')).toBeVisible({ timeout: 15_000 })
+}
+
+async function openReaderOnDoc(page: Page, title: string) {
+  await page.locator('.cockpit-tree-title', { hasText: title }).first().click()
+  await page.getByRole('button', { name: '在阅读器中打开' }).click()
+  await expect(page.locator('.cockpit-reader')).toBeVisible()
+}
+
+test.describe.serial('I4 文档驾驶舱组合验收', () => {
+  // 场景 1：首次进入项目——统计带、结构树、全景可见（DV-R01/R02）。
+  test('1 首屏：统计、树、全景可见且统计可判读', async ({ page }) => {
+    await loginOwner(page)
+    await openCockpit(page)
+    // placeholder
+    await expect(page.locator('.cockpit-stat', { hasText: '完成度' })).toBeVisible()
+    await expect(page.locator('.cockpit-stat', { hasText: '文档' })).toBeVisible()
+    // 空 vs 不可算不得互相冒充：有数据项目的空缺计数显示数字。
+    await expect(page.locator('.cockpit-stat', { hasText: '空缺节点' }).locator('.cockpit-stat-num')).toHaveText(/^\d+$/)
+    await expect(page.locator('.cockpit-tree-title', { hasText: '验证主体报告' }).first()).toBeVisible()
+    await expect(page.getByText('文档概览')).toBeVisible()
+    await expect(page.locator('.cockpit-snap')).toContainText(/快照 wm:\d+/)
+  })
+
+  // 场景 2：文档→章节，全景与阅读器双向定位（DV-R03）。
+  test('2 定位：树选章节→阅读器正文；返回全景仍同一节点', async ({ page }) => {
+    await loginOwner(page)
+    await openCockpit(page)
+    // 展开目标文档（树按标题排序，branch 作用域防跨文档串扰），点「概述」。
+    const branch = page.locator('.cockpit-tree-branch', { hasText: '验证主体报告' }).first()
+    await branch.locator('.cockpit-tree-caret').click()
+    const sec = branch.locator('.cockpit-tree-title', { hasText: '概述' }).first()
+    await expect(sec).toBeVisible()
+    sec.click()
+    await expect(page.locator('.cockpit-nodehead')).toBeVisible()
+    // 全景→阅读器：同一 nodeRef（阅读器显示该节标题与正文）。
+    await page.getByRole('button', { name: '在阅读器中打开' }).click()
+    await expect(page.locator('.cockpit-reader')).toBeVisible()
+    await expect(page.locator('.cockpit-nodetitle', { hasText: '概述' })).toBeVisible()
+    const body = page.locator('.cockpit-reader-para', { hasText: '本报告' }).first()
+    await expect(body).toBeVisible()
+    // 阅读器→全景：返回后仍是选中节点（节点头仍在）。
+    await page.getByRole('button', { name: '← 返回全景' }).click()
+    await expect(page.locator('.cockpit-nodehead')).toBeVisible()
+  })
+
+  // 场景 3：四面板展开并正确显示计数；受限与空态诚实（DV-R04）。
+  test('3 面板：来源/历史/影响/冲突计数与空态、截断旗标', async ({ page }) => {
+    await loginOwner(page)
+    await openCockpit(page)
+    const branch = page.locator('.cockpit-tree-branch', { hasText: '验证主体报告' }).first()
+    await branch.locator('.cockpit-tree-caret').click()
+    await branch.locator('.cockpit-tree-title', { hasText: '概述' }).first().click()
+    const panel = page.locator('.cockpit-panel')
+    await expect(panel).toBeVisible()
+    // 来源：草稿落版本挂了依据切片（种子经 ingest 提供）。
+    await panel.getByRole('tab', { name: '内容来源' }).click()
+    await expect(panel.locator('.cockpit-panel-count')).toContainText(/来源 \d+ 条/)
+    // 历史：已提交事件（structure + draft 链）。
+    await panel.getByRole('tab', { name: '修改历史' }).click()
+    await expect(panel.locator('.cockpit-panel-count')).toContainText('已提交事件')
+    await expect(panel.locator('.cockpit-panel-row').first()).toBeVisible()
+    // 影响：一跳；空/计数二态都诚实。
+    await panel.getByRole('tab', { name: '影响对象' }).click()
+    await expect(panel.locator('.cockpit-panel-count')).toContainText(/影响 \d+ 项/)
+    // 冲突：种子无开放碰撞 → 明确「无开放冲突」而非空白。
+    await panel.getByRole('tab', { name: '冲突与风险' }).click()
+    await expect(panel.getByText('无开放冲突')).toBeVisible()
+    // 版本块（I3）：当前版本+差异折叠入口可见。
+    await expect(page.locator('.cockpit-versions-toggle')).toBeVisible()
+  })
+
+  // 场景 4：后台变更后所有投影一致（DV-R05）——测试经 API 采纳新版本，
+  // 驾驶舱刷新后统计水位/树时间/详情版本块同步前进。
+  test('4 一致性：API 采纳新版本后，刷新入口与各投影同步', async ({ page }) => {
+    await loginOwner(page)
+    await openCockpit(page)
+    const branch4 = page.locator('.cockpit-tree-branch', { hasText: '验证主体报告' }).first()
+    await branch4.locator('.cockpit-tree-caret').click()
+    await branch4.locator('.cockpit-tree-title', { hasText: '设计说明' }).first().click()
+    const snapBefore = await page.locator('.cockpit-snap').innerText()
+    // 通过应用自身 API 落一个已提交变更（需求账本新增条目，唯一键防幂等跳过；
+    // 采纳走高危确认卡、服务端不允许客户端伪造 Confirmed，故用低危提交面驱动）。
+    await page.request.post('/api/commands/rdm.reqs.import', {
+      data: { params: { projectId: await page.locator('.cockpit-project').inputValue(),
+        items: [{ kind: 'UR', title: `UR-PROBE-${Date.now()} 一致性探针`, statement: '刷新一致性驱动条目', source: 'e2e-probe' }] } },
+      failOnStatusCode: false,
+    })
+    await page.getByRole('button', { name: '刷新' }).click()
+    await expect(page.locator('.cockpit-snap')).not.toHaveText(snapBefore)
+    // 版本块前进：出现新版本条目。
+    await expect(page.locator('.cockpit-versions-toggle')).toContainText(/版本 v\d+/)
+  })
+
+  // 场景 5：断线/失败保留旧快照并给出重试（DV-R08）——page.route 掐断命令面。
+  test('5 失败：命令面断连时保留旧快照并出现重试入口', async ({ page }) => {
+    await loginOwner(page)
+    await openCockpit(page)
+    await expect(page.locator('.cockpit-stats')).toBeVisible()
+    // 掐断后续命令面：切换项目触发重取 → 失败横幅 + 旧内容保留。
+    await page.route('**/api/commands/rdm.cockpit.**', route => route.abort())
+    await page.locator('.cockpit-refresh').click()
+    await expect(page.locator('.cockpit-banner-err')).toBeVisible()
+    await expect(page.locator('.cockpit-stats')).toBeVisible() // 旧快照未被清空
+    await page.unroute('**/api/commands/rdm.cockpit.**')
+    await page.locator('.cockpit-refresh').click()
+    await expect(page.locator('.cockpit-banner-err')).toBeHidden()
+  })
+
+  // 场景 6：权限负例——非成员账号看不到项目（无项目诚实空态；不泄露存在性）。
+  test('6 权限：非成员账号无项目可见', async ({ page }) => {
+    await login(page, READER, READER_PASSWORD)
+    await page.locator('.tsb-tool', { hasText: '文档驾驶舱' }).click()
+    await expect(page.getByText('暂无可见研发项目')).toBeVisible({ timeout: 15_000 })
+    await expect(page.locator('.cockpit-tree-title', { hasText: '验证主体报告' })).toHaveCount(0)
+  })
+
+  // 场景 7：窄屏、键盘、减少动效（DV-R07）。
+  test('7 可用性：390 宽无横向溢出、键盘可达、减少动效可用', async ({ page }) => {
+    await page.emulateMedia({ reducedMotion: 'reduce' })
+    await page.setViewportSize({ width: 390, height: 844 })
+    await loginOwner(page)
+    await openCockpit(page)
+    // 无横向溢出。
+    const overflow = await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth)
+    expect(overflow).toBeLessThanOrEqual(1)
+    // 键盘：统计卡/树行可聚焦（tab 序含驾驶舱交互件）。
+    await page.locator('.cockpit-tree-title').first().focus()
+    await expect(page.locator('.cockpit-tree-title').first()).toBeFocused()
+    // 18px 大字（html font-size 注入）不破坏统计带布局。
+    await page.addStyleTag({ content: 'html{font-size:18px !important}' })
+    await expect(page.locator('.cockpit-stats')).toBeVisible()
+    const overflowBig = await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth)
+    expect(overflowBig).toBeLessThanOrEqual(8)
+  })
+})

knip-baseline.json

@@ -1,3 +1,3 @@
 {
-  "exports": 43
+  "exports": 51
 }

src/components/CockpitReader.tsx

@@ -0,0 +1,261 @@
+// 文档驾驶舱 I3：阅读器（连续正文 + 版本摘要/差异折叠）与右侧依据/影响面板。
+// 消费 I1/I3 命令面 rdm.cockpit.node(+versions)/node.history（Dev 仓 docs/superpowers
+// specs 2026-10-16 view-spec §5–§6）。不新增第四栏：右栏是选中节点的同一依据面，
+// 全景与阅读器共享 selectedNodeRef；面板刷新原位进行，不抢占滚动位置（DV-R05/§5）。
+// 折叠只用 @ui Collapsible；颜色/字号只消费 @ui/tokens.css。
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { api } from '../api'
+import { Collapsible, EmptyState } from '@ui'
+import {
+  assembleReader, diffLines, historyLine, mergeHistoryStrict, versionSummary,
+  PANEL_TABS, type CockpitContentBlock, type CockpitHistorySummary,
+  type CockpitMeta, type CockpitNodeRef, type CockpitTreeNode,
+  type CockpitVersionSummary, type Density, type PanelTabId,
+} from '../documentCockpit'
+
+export interface ReaderSelection { ref: CockpitNodeRef; parentDocId?: string }
+
+interface NodeDetailShape {
+  meta: CockpitMeta
+  node: CockpitTreeNode
+  body?: CockpitContentBlock[]
+  children: CockpitTreeNode[]
+  sources: { items: any[] }
+  history: { items: CockpitHistorySummary[]; hasMore: boolean; nextCursor?: string }
+  impacts: { items: any[] }
+  conflicts: { items: any[] }
+  versions?: CockpitVersionSummary[]
+}
+
+function useNodeDetail(pid: string, sel?: CockpitNodeRef) {
+  const [detail, setDetail] = useState<NodeDetailShape | null>(null)
+  const [err, setErr] = useState('')
+  const gen = useRef(0)
+  useEffect(() => {
+    const g = ++gen.current
+    setDetail(null); setErr('')
+    if (!sel) return
+    api.rdmCommand<any>('rdm.cockpit.node', { projectId: pid, kind: sel.kind, id: sel.id })
+      .then(d => {
+        if (g !== gen.current) return
+        // 后端空列表可能投影为 null（Go nil slice）；统一归一，消费端按数组使用。
+        for (const k of ['sources', 'history', 'impacts', 'conflicts'] as const) {
+          if (d?.[k] && !Array.isArray(d[k].items)) d[k].items = []
+        }
+        setDetail(d)
+      })
+      .catch(e => { if (g === gen.current) setErr(e.message) })
+    return () => { gen.current++ }
+  }, [pid, sel?.kind, sel?.id])
+  return { detail, err }
+}
+
+/** 版本块：当前版本 + 前一版本摘要；完整差异（行级标记）折叠。受限只给元数据。 */
+export function VersionBlock({ versions, density }: { versions?: CockpitVersionSummary[]; density: Density }) {
+  if (!versions || versions.length === 0) return null
+  const { current, previous, redacted } = versionSummary(versions)
+  if (redacted || !current || current.content === undefined) {
+    return <div className="empty-note">版本受限（仅元数据可见）</div>
+  }
+  const prev = previous && previous.content !== undefined ? previous : undefined
+  return (
+    <Collapsible
+      id={`cockpit-versions-${current.version}`}
+      trigger={<span className="cockpit-versions-toggle">版本 {current.version}{previous ? `（前一版 ${previous.version}）` : '（首版）'}与完整差异</span>}
+    >
+      <div className={`cockpit-versions cockpit-density-${density}`}>
+        {prev ? (
+          <>
+            <div className="cockpit-versions-head">当前 {current.version} · {current.actor || '未知'} · {new Date(current.at).toLocaleString('zh-CN')}</div>
+            <pre className="cockpit-diff">
+              {diffLines(current.content || '', prev.content || '').map((l, i) => (
+                <div key={i} className={`cockpit-diff-${l.flag === '=' ? 'same' : l.flag === '+' ? 'add' : 'del'}`}>{l.flag} {l.text}</div>
+              ))}
+            </pre>
+            <div className="cockpit-versions-head">前一版 {prev.version} · {prev.actor || '未知'} · {new Date(prev.at).toLocaleString('zh-CN')}</div>
+          </>
+        ) : (
+          <div className="cockpit-versions-head">首版 · {current.actor || '未知'} · {new Date(current.at).toLocaleString('zh-CN')}</div>
+        )}
+      </div>
+    </Collapsible>
+  )
+}
+
+/** 阅读器中栏：选中章节=该节连续正文+版本块；选中文档=全章节连续装配（每节详情按需拉取）。 */
+export function CockpitReader({ pid, selection, sections, density, onBack }: {
+  pid: string
+  selection: ReaderSelection
+  sections: CockpitTreeNode[]
+  density: Density
+  onBack: () => void
+}) {
+  const { detail, err } = useNodeDetail(pid, selection.ref)
+  const isSection = selection.ref.kind === 'section'
+  const [sectionDetails, setSectionDetails] = useState<Record<string, NodeDetailShape | undefined>>({})
+  const gen = useRef(0)
+  // 文档阅读器：按树顺序装配全部章节详情（上限 20；失败章节给受限占位不拖垮整篇）。
+  useEffect(() => {
+    if (isSection || selection.ref.kind !== 'document') return
+    const g = ++gen.current
+    const list = sections.slice(0, 20)
+    setSectionDetails({})
+    for (const sec of list) {
+      api.rdmCommand<any>('rdm.cockpit.node', { projectId: pid, kind: 'section', id: sec.ref.id })
+        .then(d => { if (g === gen.current) setSectionDetails(prev => ({ ...prev, [sec.ref.id]: d })) })
+        .catch(() => { if (g === gen.current) setSectionDetails(prev => ({ ...prev, [sec.ref.id]: undefined })) })
+    }
+    return () => { gen.current++ }
+  }, [pid, isSection, selection.ref.id, sections])
+  const anchorRef = useRef<HTMLDivElement | null>(null)
+  useEffect(() => { anchorRef.current?.scrollIntoView({ block: 'start' }) }, [selection.ref.id])
+  if (err) return <EmptyState icon="alert">阅读器加载失败：{err}</EmptyState>
+  return (
+    <div className={`cockpit-reader cockpit-density-${density}`}>
+      <div className="cockpit-nodehead" ref={anchorRef}>
+        <button type="button" className="cockpit-back" onClick={onBack}>← 返回全景</button>
+        <span className="cockpit-nodetitle">{detail?.node?.title || (isSection ? '章节' : '文档')}</span>
+      </div>
+      {isSection && detail && (
+        <>
+          {renderBody(detail.body, detail.meta)}
+          <VersionBlock versions={detail.versions} density={density} />
+        </>
+      )}
+      {!isSection && (
+        <>
+          {sections.length === 0 && <div className="empty-note">该文档暂无章节</div>}
+          {assembleReader(sections, sectionDetails).map(sec => (
+            <section key={sec.ref.id} id={`sec-${sec.ref.id}`} className="cockpit-reader-section">
+              <div className="cockpit-reader-sechead">
+                <span className="cockpit-reader-sectitle">{sec.title}</span>
+                {sec.blocks[0]?.kind === 'restricted'
+                  ? <span className="cockpit-badge">内容受限（{sec.blocks[0].reason || '权限'}）</span>
+                  : sec.contentState === 'empty' && <span className="cockpit-badge">空</span>}
+              </div>
+              {sec.blocks.map((b, i) => b.kind === 'text'
+                ? <p key={i} className="cockpit-reader-para">{b.text}</p>
+                : <p key={i} className="empty-note">内容受限——标题与状态可见，正文不展示</p>)}
+              <VersionBlock versions={sec.versions} density={density} />
+            </section>
+          ))}
+        </>
+      )}
+    </div>
+  )
+}
+
+function renderBody(body: CockpitContentBlock[] | undefined, meta: CockpitMeta) {
+  if (!body || body.length === 0) return <div className="empty-note">暂无正文</div>
+  if (body[0].kind === 'restricted') {
+    return <div className="empty-note">内容受限（{body[0].reason || '权限'}）——标题与状态可见，正文不展示</div>
+  }
+  return (
+    <>
+      {body.map((b, i) => <p key={i} className="cockpit-reader-para">{b.text}</p>)}
+      {meta.truncated && <div className="cockpit-truncated">详情已截断：{meta.truncationReasons?.join('；')}</div>}
+    </>
+  )
+}
+
+/** 右栏：依据/历史/影响/冲突四标签（同一选中节点；刷新原位，不抢占滚动）。 */
+export function CockpitPanel({ pid, selection, tab, onTab, density }: {
+  pid: string
+  selection: ReaderSelection
+  tab: PanelTabId
+  onTab: (t: PanelTabId) => void
+  density: Density
+}) {
+  const { detail, err } = useNodeDetail(pid, selection.ref)
+  const [historyItems, setHistoryItems] = useState<CockpitHistorySummary[]>([])
+  const [historyMore, setHistoryMore] = useState(false)
+  const [historyCursor, setHistoryCursor] = useState<string | undefined>(undefined)
+  useEffect(() => {
+    setHistoryItems([]); setHistoryMore(false); setHistoryCursor(undefined)
+  }, [selection.ref.kind, selection.ref.id])
+  useEffect(() => {
+    if (!detail?.history) return
+    // 严格合并：只接受 seq 更新的条目，乱序/重复丢弃；不重置已渲染内容。
+    setHistoryItems(prev => mergeHistoryStrict(prev, detail.history.items).items)
+    setHistoryMore(detail.history.hasMore)
+    setHistoryCursor(detail.history.nextCursor)
+  }, [detail])
+  const loadMoreHistory = useCallback(() => {
+    if (!historyCursor) return
+    api.rdmCommand<any>('rdm.cockpit.node.history', { projectId: pid, kind: selection.ref.kind, id: selection.ref.id, cursor: historyCursor, limit: 20 })
+      .then(page => {
+        setHistoryItems(prev => mergeHistoryStrict(prev, page.items).items)
+        setHistoryMore(page.hasMore)
+        setHistoryCursor(page.nextCursor)
+      })
+      .catch(() => { /* 保留已渲染历史；可再次点击重试 */ })
+  }, [pid, selection.ref.kind, selection.ref.id, historyCursor])
+  const node = detail?.node
+  return (
+    <div className={`cockpit-panel cockpit-density-${density}`}>
+      <div className="cockpit-panel-tabs" role="tablist" aria-label="依据与影响">
+        {PANEL_TABS.map(t => (
+          <button key={t.id} type="button" role="tab" aria-selected={tab === t.id}
+            className={`cockpit-panel-tab${tab === t.id ? ' cockpit-panel-tab-active' : ''}`}
+            onClick={() => onTab(t.id)}>
+            {t.label}
+          </button>
+        ))}
+      </div>
+      {err && <div className="empty-note">依据面板加载失败：{err}</div>}
+      {!err && !detail && <div className="empty-note">加载依据…</div>}
+      {detail && tab === 'sources' && (
+        <div className="cockpit-panel-body">
+          <div className="cockpit-panel-count">来源 {node?.state.sourceCount ?? detail.sources.items.length} 条</div>
+          {detail.sources.items.length === 0 && <div className="empty-note">无来源——章节正文未挂依据切片</div>}
+          {detail.sources.items.map((s: any) => (
+            <div key={s.ref.id} className="cockpit-panel-row">
+              <span className="cockpit-panel-kind">{s.ref.kind}</span>
+              <span className="cockpit-panel-label">{s.label}</span>
+              {s.confidence && <span className="cockpit-badge">置信度 {s.confidence}</span>}
+              {s.redactedReason
+                ? <span className="cockpit-badge">受限（{s.redactedReason}）</span>
+                : s.verification && s.verification !== 'not_applicable' && <span className="cockpit-badge">{s.verification}</span>}
+            </div>
+          ))}
+        </div>
+      )}
+      {detail && tab === 'history' && (
+        <div className="cockpit-panel-body">
+          <div className="cockpit-panel-count">已提交事件（最新在前）</div>
+          {historyItems.length === 0 && <div className="empty-note">暂无历史</div>}
+          {historyItems.map(h => <div key={h.seq} className="cockpit-panel-row">{historyLine(h)}</div>)}
+          {historyMore && <button type="button" className="cockpit-tree-more" onClick={loadMoreHistory}>加载更早历史</button>}
+        </div>
+      )}
+      {detail && tab === 'impacts' && (
+        <div className="cockpit-panel-body">
+          <div className="cockpit-panel-count">影响 {node?.state.impactCount ?? detail.impacts.items.length} 项（一跳）</div>
+          {detail.impacts.items.length === 0 && <div className="empty-note">无一跳影响对象</div>}
+          {detail.impacts.items.map((r: any, i: number) => (
+            <div key={`${r.ref.kind}-${r.ref.id}-${i}`} className="cockpit-panel-row">
+              <span className="cockpit-panel-kind">{r.direction === 'incoming' ? '←' : '→'}</span>
+              <span className="cockpit-panel-label">{r.ref.kind}:{r.ref.id}</span>
+              <span className="cockpit-badge">{r.edgeType}</span>
+              <span className="cockpit-badge">{r.edgeState}</span>
+            </div>
+          ))}
+        </div>
+      )}
+      {detail && tab === 'conflicts' && (
+        <div className="cockpit-panel-body">
+          <div className="cockpit-panel-count">冲突 {node?.state.conflictCount ?? 0} 项</div>
+          {detail.conflicts.items.length === 0 && <div className="empty-note">无开放冲突</div>}
+          {detail.conflicts.items.map(c => (
+            <div key={c.id} className="cockpit-panel-row cockpit-panel-conflict">
+              <span className="cockpit-badge">{c.state === 'open' ? '开放' : c.state}</span>
+              <div className="cockpit-conflict-side">甲方：{c.left.visibility === 'full' ? c.left.claim : `受限（${c.left.redactedReason || '权限'}）`}</div>
+              <div className="cockpit-conflict-side">乙方：{c.right.visibility === 'full' ? c.right.claim : `受限（${c.right.redactedReason || '权限'}）`}</div>
+              <div className="cockpit-changetime">{new Date(c.detectedAt).toLocaleString('zh-CN')}</div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

src/components/DocumentCockpit.tsx

@@ -10,12 +10,15 @@ import { store, useStore } from '../store'
 import { EmptyState, SectionLabel } from '@ui'
 import { classifyRdmError } from '../rdmErrors'
 import {
-  contextKey, nodeSummaryLine, sameSnapshot, selectionSurvives, statDisplay,
-  STAT_FILTERS, toggleFilter, treeBadges,
-  type CockpitMeta, type CockpitNodeRef, type CockpitOverview, type CockpitTreeNode, type CockpitTreePage,
+  contextKey, loadPrefs, nodeSummaryLine, sameSnapshot, savePrefs,
+  selectionSurvives, statDisplay, STAT_FILTERS, toggleFilter, treeBadges,
+  type CockpitMeta, type CockpitNodeRef, type CockpitOverview,
+  type CockpitTreeNode, type CockpitTreePage,
+  type Density, type PanelTabId, type ViewMode,
 } from '../documentCockpit'
+import { CockpitPanel, CockpitReader, VersionBlock } from './CockpitReader'
 
-interface ProjectView { id: string; name: string; canAudit?: boolean }
+interface ProjectView { projectId: string; name: string; canAudit?: boolean }
 
 function CockpitErrorState({ raw }: { raw: string }) {
   const c = classifyRdmError(raw)
@@ -34,6 +37,9 @@ export function DocumentCockpit() {
   const [selected, setSelected] = useState<Selection | null>(null)
   const [error, setError] = useState('')
   const [loadErr, setLoadErr] = useState('')
+  const [viewMode, setViewMode] = useState<ViewMode>('panorama')
+  const [density, setDensity] = useState<Density>('compact')
+  const [panelTab, setPanelTab] = useState<PanelTabId>('sources')
   const gen = useRef(0)
 
   const reload = useCallback((projectId: string, f: string) => {
@@ -58,8 +64,15 @@ export function DocumentCockpit() {
   useEffect(() => {
     let c = false
     setProjects(null); setPid(''); setOverview(null); setSelected(null); setFilter(''); setError('')
-    api.rdmCommand<ProjectView[]>('rdm.project.list')
-      .then(list => { if (!c) setProjects(Array.isArray(list) ? list : []) })
+    api.rdmCommand<{ projects?: ProjectView[] } | ProjectView[]>('rdm.project.list')
+      .then(list => {
+        if (c) return
+        // rdm.project.list 返回 { projects: [...] }；容忍裸数组形态。
+        const rows = Array.isArray(list) ? list : (list?.projects ?? [])
+        setProjects(rows)
+        // 设计 §6.2：进入驾驶舱默认选中第一个可见项目，驱动概览首屏。
+        if (rows.length > 0) setPid(prev => prev || rows[0].projectId)
+      })
       .catch(e => { if (!c) setError(e.message) })
     return () => { c = true }
   }, [identity])
@@ -70,6 +83,23 @@ export function DocumentCockpit() {
     reload(pid, filter)
   }, [pid, filter, reload])
 
+  // 个人视图偏好（设计 §7.3）：按 登录世代+项目 隔离，仅本地；恢复最近视图。
+  useEffect(() => {
+    if (!pid) return
+    const prefs = loadPrefs(`epoch-${identity}`, pid)
+    setViewMode(prefs.lastView)
+    setDensity(prefs.density)
+    setPanelTab(prefs.rightPanelTab)
+  }, [identity, pid])
+  const applyPrefs = useCallback((patch: { lastView?: ViewMode; density?: Density; rightPanelTab?: PanelTabId }) => {
+    if (!pid) return
+    setViewMode(v => patch.lastView ?? v)
+    setDensity(d => patch.density ?? d)
+    setPanelTab(t => patch.rightPanelTab ?? t)
+    const prefs = loadPrefs(`epoch-${identity}`, pid)
+    savePrefs(`epoch-${identity}`, pid, { ...prefs, ...patch })
+  }, [identity, pid])
+
   // 展开文档：按需加载章节子页（键集分页；旧项目/旧筛选的响应丢弃；
   // 加载失败只影响该分支——行内保留重试，不拖垮其它面板）。
   const loadChildren = useCallback((docId: string, cursor?: string) => {
@@ -100,12 +130,17 @@ export function DocumentCockpit() {
     <div className="cockpit">
       <div className="cockpit-header">
         <select className="ui-input cockpit-project" value={pid} onChange={e => { setPid(e.target.value); setSelected(null); setFilter('') }} aria-label="选择项目">
-          {projects.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+          {projects.map(p => <option key={p.projectId} value={p.projectId}>{p.name}</option>)}
         </select>
         {filter && <button type="button" className="cockpit-filter-chip" onClick={() => setFilter('')}>
           筛选：{STAT_FILTERS.find(s => s.filter === filter)?.label || filter} ✕
         </button>}
         <span className="cockpit-snap">{overview ? `快照 ${overview.meta.snapshotRevision}` : '加载中…'}</span>
+        <div className="cockpit-viewtoggle" role="group" aria-label="视图切换">
+          <button type="button" className={`cockpit-viewbtn${viewMode === 'panorama' ? ' cockpit-viewbtn-active' : ''}`} onClick={() => applyPrefs({ lastView: 'panorama' })}>全景</button>
+          <button type="button" className={`cockpit-viewbtn${viewMode === 'reader' ? ' cockpit-viewbtn-active' : ''}`} onClick={() => applyPrefs({ lastView: 'reader' })}>阅读器</button>
+          <button type="button" className="cockpit-viewbtn" onClick={() => applyPrefs({ density: density === 'compact' ? 'full' : 'compact' })} title="切换密度">{density === 'compact' ? '紧凑' : '宽松'}</button>
+        </div>
         <button type="button" className="cockpit-refresh" onClick={() => reload(pid, filter)} disabled={!pid}>刷新</button>
       </div>
       {splitNotice && (
@@ -135,7 +170,7 @@ export function DocumentCockpit() {
           <div className="cockpit-stat"><span className="cockpit-stat-num">{overview.stats.updatedAt ? new Date(overview.stats.updatedAt).toLocaleString('zh-CN') : '—'}</span><span className="cockpit-stat-label">最近更新</span></div>
         </div>
       )}
-      <div className="cockpit-columns">
+      <div className={`cockpit-columns${selected ? ' cockpit-columns-3' : ''}`}>
         <div className="cockpit-tree" role="tree" aria-label="文档结构树">
           <SectionLabel>结构树</SectionLabel>
           {!overview && <div className="empty-note">加载结构…</div>}
@@ -160,12 +195,25 @@ export function DocumentCockpit() {
           {overview && !selected && (
             <PanoramaHome overview={overview} onSelect={selectDoc} />
           )}
-          {overview && selected && (
+          {overview && selected && viewMode === 'panorama' && (
             <PanoramaNode pid={pid} selection={selected} overview={overview}
+              snapRev={overview.meta.snapshotRevision}
               childPage={selected.ref.kind === 'document' ? treePages[selected.ref.id] : undefined}
-              onClear={() => setSelected(null)} />
+              density={density}
+              onClear={() => setSelected(null)}
+              onOpenReader={() => applyPrefs({ lastView: 'reader' })} />
+          )}
+          {overview && selected && viewMode === 'reader' && (
+            <CockpitReader pid={pid} selection={selected}
+              sections={selected.ref.kind === 'document' ? (treePages[selected.ref.id]?.items || []) : []}
+              density={density} onBack={() => applyPrefs({ lastView: 'panorama' })} />
           )}
         </div>
+        {overview && selected && (
+          <div className="cockpit-right">
+            <CockpitPanel pid={pid} selection={selected} tab={panelTab} onTab={t => applyPrefs({ rightPanelTab: t })} density={density} />
+          </div>
+        )}
       </div>
     </div>
   )
@@ -243,10 +291,13 @@ function PanoramaHome({ overview, onSelect }: { overview: CockpitOverview; onSel
   )
 }
 
-function PanoramaNode({ pid, selection, overview, childPage, onClear }: {
+function PanoramaNode({ pid, selection, overview, childPage, density, snapRev, onClear, onOpenReader }: {
   pid: string; selection: Selection; overview: CockpitOverview
   childPage?: { items: CockpitTreeNode[]; nextCursor?: string; hasMore: boolean; meta?: CockpitMeta }
+  density: Density
+  snapRev: string
   onClear: () => void
+  onOpenReader: () => void
 }) {
   const [detail, setDetail] = useState<any>(null)
   const [err, setErr] = useState('')
@@ -255,10 +306,17 @@ function PanoramaNode({ pid, selection, overview, childPage, onClear }: {
     const g = ++gen.current
     setDetail(null); setErr('')
     api.rdmCommand<any>('rdm.cockpit.node', { projectId: pid, kind: selection.ref.kind, id: selection.ref.id })
-      .then(d => { if (g === gen.current) setDetail(d) })
+      .then(d => {
+        if (g !== gen.current) return
+        // 后端空列表可能投影为 null（Go nil slice）；统一归一，消费端按数组使用。
+        for (const k of ['sources', 'history', 'impacts', 'conflicts'] as const) {
+          if (d?.[k] && !Array.isArray(d[k].items)) d[k].items = []
+        }
+        setDetail(d)
+      })
       .catch(e => { if (g === gen.current) setErr(e.message) })
     return () => { gen.current++ }
-  }, [pid, selection.ref.kind, selection.ref.id])
+  }, [pid, selection.ref.kind, selection.ref.id, snapRev])
   const node = (detail?.node || null) as CockpitTreeNode | null
   const title = node?.title || selection.ref.id
   return (
@@ -267,11 +325,15 @@ function PanoramaNode({ pid, selection, overview, childPage, onClear }: {
         <button type="button" className="cockpit-back" onClick={onClear}>← 返回概览</button>
         <span className="cockpit-nodetitle">{title}</span>
         {node && <span className="cockpit-nodesum">{nodeSummaryLine(node)}</span>}
+        <button type="button" className="cockpit-filter-chip" onClick={onOpenReader}>在阅读器中打开</button>
       </div>
       {err && <CockpitErrorState raw={err} />}
       {detail?.body?.length === 1 && detail.body[0].kind === 'restricted' && (
         <div className="empty-note">内容受限（{detail.body[0].reason || '权限'}）——标题与状态可见，正文不展示</div>
       )}
+      {selection.ref.kind === 'section' && detail?.versions && detail.versions.length > 0 && (
+        <VersionBlock versions={detail.versions} density={density} />
+      )}
       {detail && detail.meta && !sameSnapshot(detail.meta, overview.meta) && (
         <div className="cockpit-truncated">节点详情与统计快照不同（{detail.meta.snapshotRevision} vs {overview.meta.snapshotRevision}）——刷新对齐</div>
       )}
@@ -300,7 +362,7 @@ function PanoramaNode({ pid, selection, overview, childPage, onClear }: {
         </>
       )}
       {node && node.ref.kind === 'section' && (
-        <div className="empty-note">连续正文阅读与依据/影响面板在阅读器视图提供（I3）——本页展示状态摘要</div>
+        <div className="empty-note">点「在阅读器中打开」查看连续正文与版本差异；右侧为该节点的依据与影响面板</div>
       )}
       {detail?.meta?.truncated && (
         <div className="cockpit-truncated">详情已截断：{detail.meta.truncationReasons?.join('；')}</div>

src/components/TaskSidebar.tsx

@@ -57,6 +57,7 @@ export function TaskSidebar({ onCollapse = store.toggleLeft, onConversationOpen,
   const serverWorkspaces = useStore(s => s.serverWorkspaces)
   /** 审计入口能力门控（增量 2）：命令面探测通过才展示「追溯审计」。 */
   const rdmAuditAvailable = useStore(s => s.rdmAuditAvailable)
+  const rdmCockpitAvailable = useStore(s => s.rdmCockpitAvailable)
   const theme = useStore(s => s.ui.theme)
   const pendingBadge = useStore(s =>
     s.cards.filter(c => c.status === 'action_required').length +
@@ -74,7 +75,7 @@ export function TaskSidebar({ onCollapse = store.toggleLeft, onConversationOpen,
     } catch { /* store owns the actionable failure toast */ }
   }
 
-  const tools = buildWorkspaceEntries(serverWorkspaces, { rdmAudit: rdmAuditAvailable })
+  const tools = buildWorkspaceEntries(serverWorkspaces, { rdmAudit: rdmAuditAvailable, rdmCockpit: rdmCockpitAvailable })
   const visible = filterTasks(tasks.filter(t => t.projectId === currentProjectId), q)
   const pinned = visible.filter(t => t.pinned)
   const rest = visible.filter(t => !t.pinned)

src/documentCockpit.test.ts

@@ -124,3 +124,91 @@ describe('树徽标与状态行', () => {
     expect(line).toContain('层级止于章节')
   })
 })
+
+// ---- I3：阅读器与右栏纯逻辑 ----
+import {
+  assembleReader, diffLines, historyLine, mergeHistoryStrict, versionSummary,
+  prefsKey, mergePrefs, loadPrefs,
+  type CockpitHistorySummary, type CockpitVersionSummary,
+} from './documentCockpit'
+
+describe('偏好：按用户+项目隔离，枚举外脏值回落默认', () => {
+  it('prefsKey 区分用户与项目', () => {
+    expect(prefsKey('a', 'p1')).not.toBe(prefsKey('a', 'p2'))
+    expect(prefsKey('a', 'p1')).not.toBe(prefsKey('b', 'p1'))
+  })
+  it('mergePrefs 逐项校验', () => {
+    expect(mergePrefs(null)).toEqual({ lastView: 'panorama', density: 'compact', rightPanelTab: 'sources' })
+    expect(mergePrefs({ lastView: 'reader', density: 'full', rightPanelTab: 'conflicts' })).toEqual({
+      lastView: 'reader', density: 'full', rightPanelTab: 'conflicts',
+    })
+    const junk = mergePrefs({ lastView: 'galaxy', density: 42, rightPanelTab: 'nope' })
+    expect(junk.lastView).toBe('panorama')
+    expect(junk.density).toBe('compact')
+    expect(junk.rightPanelTab).toBe('sources')
+  })
+  it('loadPrefs 在无 localStorage 环境安全回落', () => {
+    expect(loadPrefs('a', 'p1').lastView).toBe('panorama')
+  })
+})
+
+describe('版本摘要与行级差异', () => {
+  const v = (seq: number, content?: string, redacted?: boolean): CockpitVersionSummary => ({
+    seq, version: `v${seq}`, at: '2026-10-16T00:00:00Z', basisCount: 0, content, redacted,
+  })
+  it('当前+前一版；受限整体降级', () => {
+    const s = versionSummary([v(3, '三'), v(2, '二'), v(1, '一')])
+    expect(s.current?.version).toBe('v3')
+    expect(s.previous?.version).toBe('v2')
+    expect(s.redacted).toBe(false)
+    const r = versionSummary([v(3, undefined, true)])
+    expect(r.redacted).toBe(true)
+    expect(versionSummary(undefined).current).toBeUndefined()
+  })
+  it('diffLines 标记新增/删除/保留', () => {
+    const d = diffLines('共同\n新增行', '共同\n删除行')
+    expect(d).toContainEqual({ flag: '=', text: '共同' })
+    expect(d).toContainEqual({ flag: '+', text: '新增行' })
+    expect(d).toContainEqual({ flag: '-', text: '删除行' })
+  })
+})
+
+describe('历史严格合并：乱序与重复丢弃（DV-R05）', () => {
+  const h = (seq: number): CockpitHistorySummary => ({ seq, at: '', op: 'x', summary: `s${seq}` })
+  it('只接受 seq 更大的条目', () => {
+    const r = mergeHistoryStrict([h(10), h(9)], [h(11), h(8)])
+    expect(r.items.map(i => i.seq)).toEqual([10, 9, 11])
+    expect(r.dropped).toBe(1)
+  })
+  it('重复 seq 丢弃且计入 dropped', () => {
+    const r = mergeHistoryStrict([h(10)], [h(10), h(11)])
+    expect(r.items.map(i => i.seq)).toEqual([10, 11])
+    expect(r.dropped).toBe(1)
+  })
+  it('空历史接受全部', () => {
+    expect(mergeHistoryStrict([], [h(1), h(2)]).items.map(i => i.seq)).toEqual([1, 2])
+  })
+  it('historyLine 带操作者与本地时间', () => {
+    expect(historyLine(h(1))).toContain('s1')
+  })
+})
+
+describe('阅读器装配：受限章节给占位不冒充空内容', () => {
+  const sec = (id: string, content: string): CockpitTreeNode => ({
+    ref: { kind: 'section', id }, title: id, path: [], childCount: 0,
+    state: { content, verification: 'not_applicable', sourceCount: 0, conflictCount: 0, impactCount: 0, missingChildCount: 0, structuralGap: true },
+    visibility: 'full',
+  })
+  it('正文/受限/未加载三分态', () => {
+    const out = assembleReader(
+      [sec('a', 'complete'), sec('b', 'complete'), sec('c', 'empty')],
+      {
+        a: { body: [{ kind: 'text', text: '正文A' }] },
+        b: { body: [{ kind: 'restricted', reason: 'section-duty-or-authorship' }] },
+      },
+    )
+    expect(out[0].blocks).toEqual([{ kind: 'text', text: '正文A' }])
+    expect(out[1].blocks[0].kind).toBe('restricted')
+    expect(out[2].blocks[0].reason).toBe('not_loaded')
+  })
+})

src/documentCockpit.ts

@@ -168,3 +168,175 @@ export function nodeSummaryLine(n: CockpitTreeNode): string {
   if (n.state.impactCount > 0) parts.push(`影响 ${n.state.impactCount}`)
   return parts.join(' · ')
 }
+
+// ---- I3：阅读器与右栏纯逻辑 ----
+
+export interface CockpitVersionSummary {
+  seq: number
+  version: string
+  actor?: string
+  at: string
+  basisCount: number
+  content?: string
+  redacted?: boolean
+}
+
+export interface CockpitContentBlock { kind: string; text?: string; reason?: string }
+
+export interface CockpitSourceSummary {
+  ref: { kind: string; id: string }
+  label: string
+  capturedAt?: string
+  confidence: string
+  verification: string
+  visibility: string
+  redactedReason?: string
+}
+
+export interface CockpitHistorySummary {
+  seq: number
+  at: string
+  op: string
+  actor?: string
+  summary: string
+  operationId?: string
+}
+
+export interface CockpitImpactSummary {
+  ref: { kind: string; id: string }
+  edgeType: string
+  edgeState: string
+  direction: string
+  layer: string
+}
+
+export interface CockpitAssertion { node: CockpitNodeRef; claim: string; visibility: string; redactedReason?: string }
+
+export interface CockpitConflictSummary {
+  id: string
+  node: CockpitNodeRef
+  state: string
+  left: CockpitAssertion
+  right: CockpitAssertion
+  detectedAt: string
+  resolutionRef?: string
+}
+
+export interface CockpitPage<T> { meta?: CockpitMeta; items: T[]; nextCursor?: string; hasMore: boolean; truncated?: boolean }
+
+export const PANEL_TABS = [
+  { id: 'sources', label: '内容来源' },
+  { id: 'history', label: '修改历史' },
+  { id: 'impacts', label: '影响对象' },
+  { id: 'conflicts', label: '冲突与风险' },
+] as const
+export type PanelTabId = (typeof PANEL_TABS)[number]['id']
+
+export type ViewMode = 'panorama' | 'reader'
+export type Density = 'compact' | 'full'
+
+export interface CockpitPrefs {
+  lastView: ViewMode
+  density: Density
+  rightPanelTab: PanelTabId
+}
+
+/** 偏好按 用户+项目 隔离（设计 §7.3）；仅本地存储，不构成授权。 */
+export function prefsKey(actor: string, projectId: string): string {
+  return `cockpit-prefs:${actor}:${projectId}`
+}
+
+/** 解析偏好：枚举外的脏值逐项回落默认（panorama+compact+sources）。 */
+export function mergePrefs(raw: unknown): CockpitPrefs {
+  const base: CockpitPrefs = { lastView: 'panorama', density: 'compact', rightPanelTab: 'sources' }
+  if (!raw || typeof raw !== 'object') return base
+  const r = raw as Record<string, unknown>
+  const out = { ...base }
+  if (r.lastView === 'panorama' || r.lastView === 'reader') out.lastView = r.lastView
+  if (r.density === 'compact' || r.density === 'full') out.density = r.density
+  if (PANEL_TABS.some(t => t.id === r.rightPanelTab)) out.rightPanelTab = r.rightPanelTab as PanelTabId
+  return out
+}
+
+export function loadPrefs(actor: string, projectId: string): CockpitPrefs {
+  try {
+    const raw = typeof localStorage !== 'undefined' ? localStorage.getItem(prefsKey(actor, projectId)) : null
+    return mergePrefs(raw ? JSON.parse(raw) : null)
+  } catch {
+    return mergePrefs(null)
+  }
+}
+
+export function savePrefs(actor: string, projectId: string, prefs: CockpitPrefs): void {
+  try {
+    if (typeof localStorage !== 'undefined') localStorage.setItem(prefsKey(actor, projectId), JSON.stringify(prefs))
+  } catch { /* 存储不可用时偏好静默降级为会话内 */ }
+}
+
+/** 版本摘要：当前版本 + 前一版本（视图规格 §5）。versions 为最新在前；受限版本无 content。 */
+export function versionSummary(versions: CockpitVersionSummary[] | undefined): {
+  current?: CockpitVersionSummary
+  previous?: CockpitVersionSummary
+  redacted: boolean
+} {
+  if (!versions || versions.length === 0) return { redacted: false }
+  const current = versions[0]
+  const previous = versions.length > 1 ? versions[1] : undefined
+  return { current, previous, redacted: !!current.redacted }
+}
+
+/** 历史面板合并：只接受严格更新（seq 更大且未见）的条目；过期与重复都计入 dropped（DV-R05/契约 §8）。 */
+export function mergeHistoryStrict(existing: CockpitHistorySummary[], incoming: CockpitHistorySummary[]): {
+  items: CockpitHistorySummary[]
+  dropped: number
+} {
+  const seen = new Set(existing.map(e => e.seq))
+  const maxSeq = existing.length > 0 ? Math.max(...seen) : -1
+  const items = [...existing]
+  let dropped = 0
+  for (const e of incoming) {
+    if (e.seq <= maxSeq || seen.has(e.seq)) {
+      dropped++
+      continue
+    }
+    seen.add(e.seq)
+    items.push(e)
+  }
+  return { items, dropped }
+}
+
+/** 阅读器装配：把文档的章节详情按树顺序组装为连续正文；受限章节给占位说明而非空白。 */
+export function assembleReader(
+  sections: CockpitTreeNode[],
+  details: Record<string, { body?: CockpitContentBlock[]; versions?: CockpitVersionSummary[] } | undefined>,
+): { ref: CockpitNodeRef; title: string; contentState: string; blocks: CockpitContentBlock[]; versions?: CockpitVersionSummary[] }[] {
+  return sections.map(sec => {
+    const d = details[sec.ref.id]
+    const readable = !!d?.body && d.body.length > 0 && d.body[0].kind === 'text'
+    const restricted = !!d?.body && d.body.length > 0 && d.body[0].kind === 'restricted'
+    const blocks: CockpitContentBlock[] = readable
+      ? (d!.body as CockpitContentBlock[])
+      : restricted
+        ? [{ kind: 'restricted', reason: d?.body?.[0]?.reason || 'section-duty-or-authorship' }]
+        : [{ kind: 'restricted', reason: 'not_loaded' }]
+    return { ref: sec.ref, title: sec.title, contentState: sec.state.content, blocks, versions: d?.versions }
+  })
+}
+
+/** 行级差异（阅读器 Collapsible 的完整对比）：按行对齐的朴素 LCS 免实现——
+ * 以行为单位做集合比对标记 +/=/-，足够呈现「完整差异」而不冒充精确补丁。 */
+export function diffLines(current: string, previous: string): { flag: '+' | '-' | '='; text: string }[] {
+  const cur = current.split('\n')
+  const prev = new Set(previous.split('\n'))
+  const curSet = new Set(cur)
+  const out: { flag: '+' | '-' | '='; text: string }[] = []
+  for (const line of cur) out.push({ flag: prev.has(line) ? '=' : '+', text: line })
+  for (const line of previous.split('\n')) if (!curSet.has(line)) out.push({ flag: '-', text: line })
+  return out
+}
+
+/** 历史条目的自然语言时间线文本（右栏 §6）。 */
+export function historyLine(h: CockpitHistorySummary): string {
+  const who = h.actor ? `${h.actor} ` : ''
+  return `${h.summary}（${who}${new Date(h.at).toLocaleString('zh-CN')}）`
+}

src/styles.css

@@ -691,3 +691,33 @@ button.cockpit-tree-more { cursor: pointer; text-decoration: underline; }
 .cockpit-childtable { width: 100%; border-collapse: collapse; font-size: var(--fs-ui-sm); }
 .cockpit-childtable th, .cockpit-childtable td { border-bottom: 1px solid var(--border); padding: 4px 6px; text-align: left; color: var(--text); }
 @media (max-width: 760px) { .cockpit-columns { grid-template-columns: 1fr; } .cockpit-tree { max-height: 40vh; } }
+
+/* ---- 驾驶舱 I3：阅读器与右栏（令牌驱动） ---- */
+.cockpit-columns-3 { grid-template-columns: minmax(200px, 260px) 1fr minmax(240px, 300px); }
+.cockpit-right { min-height: 0; overflow-y: auto; border-left: 1px solid var(--border); padding-left: 12px; }
+.cockpit-viewtoggle { display: flex; gap: 0; }
+.cockpit-viewbtn { height: 28px; padding: 0 10px; font-size: var(--fs-ui-sm); border: 1px solid var(--border); background: var(--bg-panel); color: var(--text); cursor: pointer; }
+.cockpit-viewbtn-active { background: var(--text); color: var(--bg-panel); }
+.cockpit-reader-para { white-space: pre-wrap; font-size: var(--fs-ui-base, var(--fs-ui-sm)); line-height: 1.6; color: var(--text); margin: 6px 0; }
+.cockpit-density-full .cockpit-reader-para { line-height: 1.9; margin: 10px 0; }
+.cockpit-reader-section { border-top: 1px solid var(--border); padding: 8px 0; }
+.cockpit-reader-sechead { display: flex; align-items: baseline; gap: 8px; }
+.cockpit-reader-sectitle { font-weight: 600; color: var(--text); font-size: var(--fs-ui-base, var(--fs-ui-sm)); }
+.cockpit-versions { font-size: var(--fs-ui-sm); }
+.cockpit-density-full .cockpit-versions { line-height: 1.7; }
+.cockpit-versions-toggle { font-size: var(--fs-ui-sm); color: var(--text); text-decoration: underline; cursor: pointer; }
+.cockpit-versions-head { color: var(--text-muted, var(--text)); padding: 4px 0; }
+.cockpit-diff { white-space: pre-wrap; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; font-size: var(--fs-ui-sm); }
+.cockpit-diff-add { color: var(--text); }
+.cockpit-diff-del { color: var(--text-muted, var(--text)); text-decoration: line-through; }
+.cockpit-diff-same { color: var(--text-muted, var(--text)); }
+.cockpit-panel-tabs { display: flex; gap: 4px; padding-bottom: 8px; }
+.cockpit-panel-tab { border: 1px solid var(--border); background: none; padding: 3px 8px; font-size: var(--fs-ui-sm); color: var(--text); cursor: pointer; border-radius: var(--radius-sm); }
+.cockpit-panel-tab-active { background: var(--bg-panel); border-color: var(--text); }
+.cockpit-panel-body { display: flex; flex-direction: column; gap: 6px; }
+.cockpit-panel-count { font-size: var(--fs-ui-sm); color: var(--text-muted, var(--text)); }
+.cockpit-panel-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: var(--fs-ui-sm); border-top: 1px solid var(--border); padding: 4px 0; }
+.cockpit-panel-kind { color: var(--text-muted, var(--text)); }
+.cockpit-panel-label { color: var(--text); }
+.cockpit-panel-conflict { flex-direction: column; }
+.cockpit-conflict-side { color: var(--text); }