frontend-project-context 1.0.0

package/src/project-context/dashboard-renderer.mjs

@@ -0,0 +1,637 @@
+import { createHash } from "node:crypto";
+import { canonicalJson } from "./canonical-json.mjs";
+
+const STATUS_LABELS = new Map([
+  ["approved", ["已批准", "Approved"]],
+  ["attention", ["需关注", "Attention"]],
+  ["blocked", ["已阻断", "Blocked"]],
+  ["changed", ["已变化", "Changed"]],
+  ["clean", ["通过", "Clean"]],
+  ["conflict", ["所有权冲突", "Conflict"]],
+  ["deprecated", ["已废弃", "Deprecated"]],
+  ["diverged", ["已偏离", "Diverged"]],
+  ["external", ["外部引用", "External"]],
+  ["healthy", ["正常", "Healthy"]],
+  ["manual", ["人工决定", "Manual"]],
+  ["missing", ["缺失", "Missing"]],
+  ["proposed", ["待批准", "Proposed"]],
+  ["stale", ["已过期", "Stale"]],
+  ["unchanged", ["正常", "Unchanged"]],
+  ["unreadable", ["不可读", "Unreadable"]],
+]);
+
+const VIEW_LABELS = [
+  ["overview", "总览", "Overview"],
+  ["knowledge", "知识", "Knowledge"],
+  ["sources", "来源", "Sources"],
+  ["scopes", "范围", "Scopes"],
+  ["projections", "投影", "Projections"],
+  ["findings", "问题", "Findings"],
+];
+
+const KIND_LABELS = new Map([
+  ["fact", ["事实", "Fact"]],
+  ["policy", ["规则", "Policy"]],
+  ["reference", ["参考", "Reference"]],
+  ["validation-description", ["验证说明", "Validation"]],
+]);
+
+const FINDING_LABELS = new Map([
+  ["contract-conflict", ["合同知识存在冲突", "Contract knowledge conflicts"]],
+  ["item-approval-pending", ["知识项等待批准", "Knowledge item awaiting approval"]],
+  ["projection-diverged", ["投影内容与合同不一致", "Projection diverged from Contract"]],
+  ["projection-item-missing", ["投影引用的知识项不存在", "Projection item is missing"]],
+  ["projection-missing", ["受管投影文件缺失", "Managed projection is missing"]],
+  ["projection-ownership-conflict", ["投影所有权冲突", "Projection ownership conflict"]],
+  ["projection-path-invalid", ["投影路径无效", "Projection path is invalid"]],
+  ["projection-renderer-stale", ["投影渲染器版本过期", "Projection renderer is stale"]],
+  ["projection-stale", ["投影需要重新发布", "Projection needs republishing"]],
+  ["projection-unreadable", ["受管投影无法读取", "Managed projection is unreadable"]],
+  ["scope-override-cycle", ["Scope override 存在循环", "Scope override cycle"]],
+  ["scope-override-invalid", ["Scope override 无效", "Invalid scope override"]],
+  ["source-changed", ["依据来源发生变化", "Source changed"]],
+  ["source-lock-mismatch", ["来源 checkpoint 不一致", "Source checkpoint mismatch"]],
+  ["source-lock-missing", ["来源 checkpoint 缺失", "Source checkpoint missing"]],
+  ["source-lock-deprecated", ["已废弃来源仍有 checkpoint", "Deprecated source still has a checkpoint"]],
+  ["source-lock-orphan", ["来源 checkpoint 没有对应来源", "Orphan source checkpoint"]],
+  ["source-reference-deprecated", ["当前知识引用已废弃来源", "Current knowledge references a deprecated source"]],
+  ["source-missing", ["依据来源缺失", "Source is missing"]],
+  ["source-unreadable", ["依据来源无法读取", "Source is unreadable"]],
+  ["verification-failed", ["知识验证失败", "Knowledge verification failed"]],
+  ["verification-kind-unsupported", ["知识验证类型不受支持", "Unsupported verification kind"]],
+  ["verification-source-incompatible", ["知识验证来源不兼容", "Incompatible verification source"]],
+  ["verification-source-missing", ["知识验证来源缺失", "Verification source is missing"]],
+]);
+
+const CSS = String.raw`
+:root {
+  color-scheme: light dark;
+  --bg: #f3f5f4;
+  --surface: #ffffff;
+  --surface-muted: #f0f2f1;
+  --surface-strong: #e5e9e7;
+  --text: #18201c;
+  --muted: #4d5a54;
+  --subtle: #64716a;
+  --border: #d0d7d3;
+  --border-strong: #a7b2ac;
+  --accent: #087657;
+  --accent-soft: #e1f1eb;
+  --accent-text: #075940;
+  --danger: #a02e38;
+  --danger-soft: #f7e7e9;
+  --warning: #765000;
+  --warning-soft: #f6edcf;
+  --focus: #006bc7;
+  --radius: 6px;
+  --shadow: 0 1px 2px rgb(16 24 20 / 6%);
+  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #101512;
+    --surface: #171d1a;
+    --surface-muted: #1f2723;
+    --surface-strong: #29332e;
+    --text: #edf2ef;
+    --muted: #b9c3bd;
+    --subtle: #9aa69f;
+    --border: #37413c;
+    --border-strong: #5a6760;
+    --accent: #61c9a6;
+    --accent-soft: #17382e;
+    --accent-text: #9ce2ca;
+    --danger: #ff9ca5;
+    --danger-soft: #43262a;
+    --warning: #efc66b;
+    --warning-soft: #40361e;
+    --focus: #78bfff;
+    --shadow: none;
+  }
+}
+* { box-sizing: border-box; }
+html { background: var(--bg); }
+html[lang="zh-CN"] [lang="en"], html[lang="en"] [lang="zh-CN"] { display: none !important; }
+body { margin: 0; min-width: 0; color: var(--text); background: var(--bg); font: 14px/1.55 var(--sans); }
+button, input, select { font: inherit; }
+button, select { cursor: pointer; }
+button { touch-action: manipulation; }
+button:active { background: var(--surface-strong); }
+button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
+  outline: 3px solid var(--focus);
+  outline-offset: 2px;
+}
+[hidden] { display: none !important; }
+.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; border-radius: var(--radius); color: #fff; background: #075ea8; font-weight: 700; transform: translateY(-160%); }
+.skip-link:focus { transform: translateY(0); }
+.app { min-height: 100dvh; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
+.sidebar { position: sticky; top: 0; height: 100dvh; padding: 24px 16px; border-right: 1px solid var(--border); background: var(--surface); }
+.brand { padding: 0 8px 22px; border-bottom: 1px solid var(--border); }
+.brand-mark { display: flex; align-items: center; gap: 10px; }
+.brand-glyph { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--accent); border-radius: 5px; color: var(--accent-text); font: 700 12px/1 var(--mono); }
+.brand strong { display: block; font-size: 14px; letter-spacing: -.01em; }
+.brand span { display: block; margin-top: 2px; color: var(--subtle); font: 11px/1.4 var(--mono); }
+.nav { display: grid; gap: 2px; margin-top: 16px; }
+.nav button { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px 9px 12px; border: 0; border-left: 3px solid transparent; border-radius: 3px; color: var(--muted); background: transparent; text-align: left; }
+.nav button:hover { color: var(--text); background: var(--surface-muted); }
+.nav button[aria-selected="true"] { color: var(--accent-text); border-left-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
+.nav-label { display: grid; gap: 1px; }
+.nav-label strong { font-size: 13px; line-height: 1.2; }
+.nav-count { min-width: 24px; color: var(--subtle); font: 11px/1 var(--mono); text-align: right; }
+.nav button[aria-selected="true"] .nav-count { color: inherit; }
+.sidebar-note { position: absolute; right: 24px; bottom: 24px; left: 24px; color: var(--subtle); font: 11px/1.5 var(--mono); }
+.main { min-width: 0; max-width: 1480px; padding: 24px clamp(20px, 3vw, 48px) 64px; }
+.masthead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); align-items: start; gap: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
+.masthead-tools { display: grid; gap: 8px; }
+.locale-switch { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: end; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); }
+.locale-switch button { min-height: 36px; padding: 6px 12px; border: 0; border-radius: 3px; color: var(--muted); background: transparent; }
+.locale-switch button[aria-pressed="true"] { color: var(--accent-text); background: var(--surface); box-shadow: var(--shadow); font-weight: 700; }
+.eyebrow { margin: 0 0 5px; color: var(--accent-text); font: 700 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
+.masthead h1 { margin: 0; font-size: clamp(24px, 3vw, 36px); line-height: 1.15; letter-spacing: -.035em; }
+.masthead p:not(.eyebrow) { margin: 7px 0 0; color: var(--muted); }
+.digest { padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--subtle); background: var(--surface); box-shadow: var(--shadow); font: 11px/1.55 var(--mono); overflow-wrap: anywhere; }
+.digest strong { display: block; margin-bottom: 3px; color: var(--text); font-family: var(--sans); font-size: 12px; }
+.panel { margin-top: 28px; }
+.section-head { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1fr); gap: 28px; align-items: end; margin-bottom: 16px; }
+.section-head h2 { margin: 0; font-size: 22px; line-height: 1.25; letter-spacing: -.02em; }
+.section-head p { max-width: 72ch; margin: 0; color: var(--muted); }
+.health-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 20px 22px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius) var(--radius) 0 0; background: var(--surface); }
+.health-banner h2 { margin: 3px 0 0; font-size: clamp(22px, 3vw, 30px); line-height: 1.2; letter-spacing: -.025em; }
+.health-banner p { max-width: 70ch; margin: 6px 0 0; color: var(--muted); }
+.health-code { color: var(--subtle); font: 12px/1.5 var(--mono); text-align: right; }
+.health-banner > div:last-child { display: grid; justify-items: end; gap: 8px; }
+.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-top: 0; background: var(--surface); box-shadow: var(--shadow); }
+.metric { min-width: 0; padding: 14px 18px; border-right: 1px solid var(--border); }
+.metric:last-child { border-right: 0; }
+.metric span { display: block; color: var(--subtle); font-size: 12px; }
+.metric strong { display: block; margin-top: 2px; font: 650 22px/1.25 var(--mono); font-variant-numeric: tabular-nums; }
+.metric small { display: block; margin-top: 2px; color: var(--muted); }
+.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
+.flow-step { position: relative; min-width: 0; padding: 16px 18px; border-right: 1px solid var(--border); }
+.flow-step:last-child { border-right: 0; }
+.flow-step:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 50%; right: -5px; width: 8px; height: 8px; border-top: 1px solid var(--border-strong); border-right: 1px solid var(--border-strong); background: var(--surface); transform: translateY(-50%) rotate(45deg); }
+.flow-step small { display: block; color: var(--subtle); font: 11px/1.4 var(--mono); }
+.flow-step strong { display: block; margin-top: 4px; font-size: 14px; }
+.flow-step span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
+.split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 20px; margin-top: 24px; }
+.block { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
+.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-muted); }
+.block-head h3 { margin: 0; font-size: 14px; }
+.block-head span { color: var(--subtle); font: 11px/1.4 var(--mono); }
+.knowledge-strip { display: grid; }
+.knowledge-strip article { display: grid; grid-template-columns: minmax(150px, .45fr) minmax(0, 1fr); gap: 16px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
+.knowledge-strip article:last-child { border-bottom: 0; }
+.knowledge-strip h4 { margin: 0; font-size: 13px; line-height: 1.45; }
+.knowledge-strip p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
+.policy-list article { grid-template-columns: 1fr; gap: 3px; }
+.notice { padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--warning); border-radius: var(--radius); background: var(--warning-soft); color: var(--muted); }
+.notice strong { color: var(--text); }
+.notice-spaced { margin-top: 16px; }
+.toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(140px, auto)); gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; background: var(--surface-muted); }
+.field { display: grid; gap: 5px; }
+.field label { color: var(--muted); font-size: 11px; font-weight: 700; }
+.field input, .field select { width: 100%; min-height: 44px; padding: 9px 10px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--text); background: var(--surface); }
+.result-line { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-top: 0; color: var(--muted); background: var(--surface); font-size: 12px; }
+.result-line span { font-variant-numeric: tabular-nums; }
+.records { overflow: clip; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
+.toolbar + .result-line + .records { border-radius: 0 0 var(--radius) var(--radius); border-top: 0; }
+.record { min-width: 0; border-bottom: 1px solid var(--border); background: var(--surface); }
+.record:last-child { border-bottom: 0; }
+article.record { padding: 15px 16px 14px; }
+.record[data-status="deprecated"] { background: var(--surface-muted); opacity: .82; }
+.record-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
+.record h3, .record h4 { margin: 0; overflow-wrap: anywhere; }
+.record h3 { font-size: 14px; line-height: 1.45; }
+.original-label { display: block; margin-bottom: 3px; color: var(--subtle); font: 10px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
+.translation-missing { display: block; margin-top: 4px; color: var(--warning); font: 11px/1.4 var(--sans); }
+.record .id { margin-top: 3px; color: var(--subtle); font: 12px/1.4 var(--mono); overflow-wrap: anywhere; }
+.value { max-height: 280px; margin: 12px 0 0; padding: 12px; overflow: auto; border: 1px solid var(--border); border-radius: 4px; color: var(--text); background: var(--surface-muted); font: 12px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
+.structured-value { margin-top: 12px; padding: 0 12px 12px; border-left: 2px solid var(--border-strong); background: var(--surface-muted); }
+.structured-value > summary { min-height: 44px; padding: 10px 0; color: var(--muted); font-size: 12px; font-weight: 700; }
+.value-tree { margin: 0; padding-left: 20px; }
+dl.value-tree { display: grid; grid-template-columns: minmax(110px, .35fr) minmax(0, 1fr); gap: 5px 12px; padding: 0; }
+.value-tree dt { font: 12px/1.5 var(--mono); }
+.value-tree dd { margin: 0; }
+.raw-value { margin-top: 8px; }
+.raw-value > summary { min-height: 44px; padding: 10px 0; color: var(--accent-text); font-weight: 700; }
+.status { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 28px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-muted); color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
+.status svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
+.status-clean, .status-approved, .status-unchanged, .status-healthy { color: var(--accent-text); background: var(--accent-soft); }
+.status-attention, .status-proposed, .status-stale, .status-manual, .status-external { color: var(--warning); background: var(--warning-soft); }
+.status-blocked, .status-changed, .status-missing, .status-unreadable, .status-diverged { color: var(--danger); background: var(--danger-soft); }
+.status-conflict { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
+details.audit { margin-top: 12px; border-top: 1px solid var(--border); }
+details.audit > summary { min-height: 44px; padding: 11px 0 0; color: var(--accent-text); font-weight: 700; }
+.audit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; padding-top: 10px; }
+dl { margin: 0; }
+dt { color: var(--subtle); font-size: 12px; }
+dd { margin: 2px 0 10px; overflow-wrap: anywhere; }
+code, .mono { font-family: var(--mono); }
+.tokens { display: flex; flex-wrap: wrap; gap: 6px; }
+.token { padding: 3px 7px; border: 1px solid var(--border); border-radius: 3px; color: var(--muted); background: var(--surface-muted); font: 12px/1.45 var(--mono); overflow-wrap: anywhere; }
+.digest-pair { font-family: var(--mono); overflow-wrap: anywhere; }
+.digest-pair small { display: block; margin-top: 3px; color: var(--subtle); }
+details.source, details.scope, details.projection, details.finding { overflow: clip; }
+details.source > summary, details.scope > summary, details.projection > summary, details.finding > summary { min-height: 56px; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(130px, .6fr) auto; align-items: center; gap: 12px; padding: 11px 14px; list-style-position: inside; cursor: pointer; }
+details.source > summary:hover, details.scope > summary:hover, details.projection > summary:hover, details.finding > summary:hover { background: var(--surface-muted); }
+details.source[open] > summary, details.scope[open] > summary, details.projection[open] > summary, details.finding[open] > summary { border-bottom: 1px solid var(--border); background: var(--surface-muted); }
+.detail-body { padding: 16px; }
+.relation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
+.relation-grid section { min-width: 0; padding: 12px; border-left: 2px solid var(--border-strong); background: var(--surface-muted); }
+.relation-grid h4 { margin-bottom: 8px; }
+.empty { padding: 40px 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--muted); text-align: center; background: var(--surface); }
+.empty strong { display: block; color: var(--text); font-size: 16px; }
+.empty p { max-width: 55ch; margin: 7px auto 0; }
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
+.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
+@media (max-width: 1023px) {
+  .app { display: block; }
+  .sidebar { z-index: 20; position: sticky; height: auto; padding: 8px 16px; border-right: 0; border-bottom: 1px solid var(--border); }
+  .brand { display: none; }
+  .nav { grid-template-columns: repeat(6, minmax(80px, 1fr)); margin: 0; }
+  .nav button { justify-content: center; border-left: 0; border-bottom: 3px solid transparent; text-align: center; }
+  .nav-label { justify-items: center; }
+  .nav button[aria-selected="true"] { border-bottom-color: var(--accent); }
+  .nav-count, .sidebar-note { display: none; }
+  .main { padding-top: 18px; }
+  .split { grid-template-columns: 1fr; }
+}
+@media (max-width: 767px) {
+  body { font-size: 16px; }
+  .sidebar { position: static; }
+  .nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .masthead, .section-head { grid-template-columns: 1fr; gap: 12px; }
+  .locale-switch { justify-self: start; }
+  .digest { margin-top: 0; }
+  .health-banner { grid-template-columns: 1fr; }
+  .health-code { text-align: left; }
+  .health-banner > div:last-child { justify-items: start; }
+  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .metric:nth-child(2) { border-right: 0; }
+  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
+  .flow { grid-template-columns: 1fr; }
+  .flow-step { border-right: 0; border-bottom: 1px solid var(--border); }
+  .flow-step:last-child { border-bottom: 0; }
+  .flow-step:not(:last-child)::after { top: auto; right: 20px; bottom: -5px; transform: rotate(135deg); }
+  .knowledge-strip article { grid-template-columns: 1fr; gap: 4px; }
+  .toolbar { grid-template-columns: 1fr; }
+  .audit-grid, .relation-grid { grid-template-columns: 1fr; }
+  details.source > summary, details.scope > summary, details.projection > summary, details.finding > summary { grid-template-columns: 1fr; align-items: start; }
+}
+`;
+
+const SCRIPT = String.raw`
+(() => {
+  const localeButtons = Array.from(document.querySelectorAll('#locale-switch button'));
+  const setLocale = (locale) => {
+    document.documentElement.lang = locale;
+    localeButtons.forEach((button) => button.setAttribute('aria-pressed', String(button.value === locale)));
+    document.querySelectorAll('[data-placeholder-zh][data-placeholder-en]').forEach((control) => {
+      control.placeholder = locale === 'zh-CN' ? control.dataset.placeholderZh : control.dataset.placeholderEn;
+    });
+    document.querySelectorAll('[data-label-zh][data-label-en]').forEach((option) => {
+      option.textContent = locale === 'zh-CN' ? option.dataset.labelZh : option.dataset.labelEn;
+    });
+  };
+  localeButtons.forEach((button) => button.addEventListener('click', () => setLocale(button.value)));
+
+  const tabs = Array.from(document.querySelectorAll('[role="tab"]'));
+  const panels = Array.from(document.querySelectorAll('[role="tabpanel"]'));
+  const activate = (panelId, moveFocus = false) => {
+    tabs.forEach((tab) => {
+      const selected = tab.getAttribute('aria-controls') === panelId;
+      tab.setAttribute('aria-selected', String(selected));
+      tab.tabIndex = selected ? 0 : -1;
+      if (selected && moveFocus) tab.focus();
+    });
+    panels.forEach((panel) => { panel.hidden = panel.id !== panelId; });
+  };
+  tabs.forEach((tab, index) => {
+    tab.addEventListener('click', () => activate(tab.getAttribute('aria-controls')));
+    tab.addEventListener('keydown', (event) => {
+      const previous = event.key === 'ArrowLeft' || event.key === 'ArrowUp';
+      const next = event.key === 'ArrowRight' || event.key === 'ArrowDown';
+      const edge = event.key === 'Home' || event.key === 'End';
+      if (!previous && !next && !edge) return;
+      event.preventDefault();
+      const targetIndex = event.key === 'Home' ? 0 : event.key === 'End'
+        ? tabs.length - 1
+        : (index + (previous ? -1 : 1) + tabs.length) % tabs.length;
+      const target = tabs[targetIndex];
+      activate(target.getAttribute('aria-controls'), true);
+    });
+  });
+
+  const query = document.querySelector('#knowledge-query');
+  const status = document.querySelector('#knowledge-status');
+  const kind = document.querySelector('#knowledge-kind');
+  const scope = document.querySelector('#knowledge-scope');
+  const records = Array.from(document.querySelectorAll('.knowledge-record'));
+  const searchText = new Map(records.map((record) => [record, record.textContent.toLowerCase()]));
+  const count = document.querySelector('#knowledge-result-count');
+  const applyFilters = () => {
+    const needle = query.value.trim().toLowerCase();
+    let visible = 0;
+    records.forEach((record) => {
+      const match = (!needle || searchText.get(record).includes(needle)) &&
+        (!status.value || record.dataset.status === status.value) &&
+        (!kind.value || record.dataset.kind === kind.value) &&
+        (!scope.value || record.dataset.scope === scope.value);
+      record.hidden = !match;
+      if (match) visible += 1;
+    });
+    count.textContent = String(visible);
+  };
+  [query, status, kind, scope].forEach((control) => control.addEventListener('input', applyFilters));
+  query.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape' || !query.value) return;
+    query.value = '';
+    applyFilters();
+  });
+})();
+`;
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+function bi(zh, en) {
+  return `<span lang="zh-CN">${escapeHtml(zh)}</span><span lang="en">${escapeHtml(en)}</span>`;
+}
+
+function localizedOption(value, zh, en) {
+  return `<option value="${escapeHtml(value)}" data-label-zh="${escapeHtml(zh)}" data-label-en="${escapeHtml(en)}">${escapeHtml(zh)}</option>`;
+}
+
+function localizedStatement(statement) {
+  const match = /^\[zh-CN\] ([^\n]+)\n\[en\] ([\s\S]+)$/u.exec(statement);
+  if (match) return bi(match[1], match[2]);
+  return `${escapeHtml(statement)}<small class="translation-missing" lang="zh-CN">暂无中文译文</small>`;
+}
+
+function kindLabel(kind) {
+  const labels = KIND_LABELS.get(kind);
+  return labels ? bi(...labels) : escapeHtml(kind);
+}
+
+function contentHash(value) {
+  return createHash("sha256").update(value).digest("base64");
+}
+
+function shortDigest(value) {
+  if (!value) return "不可用 / Unavailable";
+  return `${value.slice(0, 15)}…${value.slice(-8)}`;
+}
+
+function iconSvg(status) {
+  if (["clean", "approved", "unchanged", "healthy"].includes(status)) {
+    return '<svg viewBox="0 0 20 20" aria-hidden="true"><use href="#status-ok"></use></svg>';
+  }
+  if (status === "conflict") {
+    return '<svg viewBox="0 0 20 20" aria-hidden="true"><use href="#status-conflict"></use></svg>';
+  }
+  if (["blocked", "changed", "missing", "unreadable", "diverged"].includes(status)) {
+    return '<svg viewBox="0 0 20 20" aria-hidden="true"><use href="#status-error"></use></svg>';
+  }
+  return '<svg viewBox="0 0 20 20" aria-hidden="true"><use href="#status-attention"></use></svg>';
+}
+
+function statusBadge(status) {
+  const labels = STATUS_LABELS.get(status) ?? [status, status];
+  return `<span class="status status-${escapeHtml(status)}">${iconSvg(status)}${bi(...labels)}</span>`;
+}
+
+function tokenList(values, empty = ["无", "None"]) {
+  if (!values || values.length === 0) return `<span class="token">${Array.isArray(empty) ? bi(...empty) : escapeHtml(empty)}</span>`;
+  return `<span class="tokens">${values.map((value) => `<span class="token">${escapeHtml(value)}</span>`).join("")}</span>`;
+}
+
+function auditField(term, value, options = {}) {
+  return `<div><dt>${options.htmlTerm ? term : escapeHtml(term)}</dt><dd${options.mono ? ' class="mono"' : ""}>${value}</dd></div>`;
+}
+
+function renderValueTree(value) {
+  if (Array.isArray(value)) {
+    if (value.length === 0) return '<span class="mono">[]</span>';
+    return `<ol class="value-tree">${value.map((entry) => `<li>${renderValueTree(entry)}</li>`).join("")}</ol>`;
+  }
+  if (value && typeof value === "object") {
+    const entries = Object.keys(value).sort().map((key) => `<dt>${escapeHtml(key)}</dt><dd>${renderValueTree(value[key])}</dd>`).join("");
+    return entries ? `<dl class="value-tree">${entries}</dl>` : '<span class="mono">{}</span>';
+  }
+  return `<span class="mono">${escapeHtml(canonicalJson(value))}</span>`;
+}
+
+function renderOverview(model) {
+  const approved = model.items.filter((item) => item.status === "approved").slice(0, 4);
+  const policies = model.items.filter((item) => item.status === "approved" && item.kind === "policy").slice(0, 5);
+  const projectionText = model.summary.projections.configured === 0
+    ? bi("未配置", "Not configured")
+    : bi(`${model.summary.projections.healthy}/${model.summary.projections.configured} 正常`, `${model.summary.projections.healthy}/${model.summary.projections.configured} healthy`);
+  const healthLabels = STATUS_LABELS.get(model.health.status) ?? [model.health.status, model.health.status];
+  return `
+    <section class="panel" role="tabpanel" id="view-overview" aria-labelledby="tab-overview">
+      <div class="health-banner">
+        <div><p class="eyebrow">${bi("治理快照", "Governance snapshot")}</p><h2>${bi(`合同健康：${healthLabels[0]}`, `Contract health: ${healthLabels[1]}`)}</h2><p>${bi("这是当前 Project Contract 的只读检查结果。状态、来源与投影覆盖分别计算。", "This is a read-only check of the current Project Contract. Health, sources, and projection coverage are evaluated separately.")}</p></div>
+        <div><div class="health-code">${bi(`检查退出码 ${model.health.exitCode} · 问题 ${model.health.findingCount}`, `CHECK EXIT ${model.health.exitCode} · FINDINGS ${model.health.findingCount}`)}</div>${statusBadge(model.health.status)}</div>
+      </div>
+      <span class="sr-only" id="metrics-label">${bi("治理摘要", "Governance summary")}</span><div class="metrics" aria-labelledby="metrics-label">
+        <div class="metric"><span>${bi("依据来源", "Sources")}</span><strong>${model.summary.sources.referenced}/${model.summary.sources.registered}</strong><small>${bi("已引用 / 已登记", "Referenced / Registered")}</small></div>
+        <div class="metric"><span>${bi("已批准知识", "Approved knowledge")}</span><strong>${model.summary.items.approved}</strong><small>${bi(`待批准 ${model.summary.items.proposed}`, `Proposed ${model.summary.items.proposed}`)}</small></div>
+        <div class="metric"><span>${bi("待处理问题", "Findings")}</span><strong>${model.health.findingCount}</strong><small>${bi(`退出码 ${model.health.exitCode}`, `Exit code ${model.health.exitCode}`)}</small></div>
+        <div class="metric"><span>${bi("Agent 投影", "Agent projections")}</span><strong>${model.summary.projections.configured}</strong><small>${projectionText}</small></div>
+      </div>
+      <span class="sr-only" id="flow-label">${bi("治理链路", "Governance flow")}</span><div class="flow" aria-labelledby="flow-label">
+        <div class="flow-step"><small>${bi("输入", "INPUT")}</small><strong>${bi("依据来源", "Sources")}</strong><span>${bi(`${model.summary.sources.registered} 个登记入口`, `${model.summary.sources.registered} registered`)}</span></div>
+        <div class="flow-step"><small>${bi("权威", "AUTHORITY")}</small><strong>${bi("项目合同", "Project Contract")}</strong><span>${bi(`${model.summary.items.approved} 个已批准知识项`, `${model.summary.items.approved} approved items`)}</span></div>
+        <div class="flow-step"><small>${bi("编译", "COMPILATION")}</small><strong>${bi("范围解释", "Scope")}</strong><span>${bi(`${model.scopeViews.length} 个已知路径`, `${model.scopeViews.length} known paths`)}</span></div>
+        <div class="flow-step"><small>${bi("输出", "OUTPUT")}</small><strong>${bi("Agent 投影", "Agent projections")}</strong><span>${projectionText}</span></div>
+      </div>
+      <div class="split">
+        <section class="block"><header class="block-head"><h3>${bi("这个项目已经批准了什么", "Approved knowledge")}</h3><span>${bi(`${model.summary.items.approved} 已批准`, `${model.summary.items.approved} APPROVED`)}</span></header><div class="knowledge-strip">${approved.length ? approved.map((item) => `<article><h4><span class="original-label">${bi("知识解释", "Knowledge statement")}</span>${localizedStatement(item.statement)}</h4><p>${escapeHtml(canonicalJson(item.value))}</p></article>`).join("") : `<div class="notice">${bi("当前没有已批准知识。", "No approved knowledge.")}</div>`}</div></section>
+        <section class="block"><header class="block-head"><h3>${bi("必须遵守", "Policies")}</h3><span>${bi("规则", "POLICY")}</span></header><div class="knowledge-strip policy-list">${policies.length ? policies.map((item) => `<article><h4><span class="original-label">${bi("知识解释", "Knowledge statement")}</span>${localizedStatement(item.statement)}</h4><p class="mono">${escapeHtml(item.id)}</p></article>`).join("") : `<div class="notice">${bi("当前没有已批准规则。", "No approved policies.")}</div>`}</div></section>
+      </div>
+      ${model.summary.projections.configured === 0 ? `<div class="notice notice-spaced"><strong>${bi("尚未配置受管投影。", "Managed projections are not configured.")}</strong><br>${bi("这不影响 Project Contract 健康，投影覆盖与合同健康分别计算。", "This does not affect Contract health; projection coverage is evaluated separately.")}</div>` : ""}
+    </section>`;
+}
+
+function renderItem(item, sourceMap, effectiveScopePaths) {
+  const approval = item.approval
+    ? `${escapeHtml(item.approval.by)}，${escapeHtml(item.approval.at)}${item.approval.rationale ? `<br>${escapeHtml(item.approval.rationale)}` : ""}`
+    : bi("未批准", "Not approved");
+  const canonicalValue = canonicalJson(item.value);
+  return `<article class="record knowledge-record" data-status="${escapeHtml(item.status)}" data-kind="${escapeHtml(item.kind)}" data-scope="${escapeHtml(item.scope.kind)}">
+    <div class="record-head"><div><span class="original-label">${bi("知识解释", "Knowledge statement")}</span><h3>${localizedStatement(item.statement)}</h3><div class="id">${escapeHtml(item.id)} / ${kindLabel(item.kind)} / ${escapeHtml(item.scopeLabel)}</div></div>${statusBadge(item.status)}</div>
+    ${item.status === "proposed" ? `<div class="notice notice-spaced"><strong>${bi("等待人工批准。", "Awaiting human approval.")}</strong><br>${bi("该知识不会进入 Context Bundle。", "This item is excluded from Context Bundles.")}</div>` : ""}
+    <details class="structured-value" open><summary>${bi("结构化值", "Structured value")}</summary>${renderValueTree(item.value)}</details>
+    <details class="raw-value"><summary>${bi("查看规范 JSON", "View canonical JSON")}</summary><pre class="value"><code>${escapeHtml(canonicalValue)}</code></pre></details>
+    <details class="audit"><summary>${bi("查看依据与审计字段", "Provenance and audit")}</summary><dl class="audit-grid">
+      ${item.subject !== item.id ? auditField(bi("主题", "Subject"), escapeHtml(item.subject), { mono: true, htmlTerm: true }) : ""}
+      ${auditField(bi("内容指纹", "Digest"), escapeHtml(item.itemDigest), { mono: true, htmlTerm: true })}
+      ${auditField(bi("依据来源", "Sources"), tokenList(item.sources.map((id) => `${id}: ${sourceMap.get(id)?.locator ?? "unknown"}`)), { htmlTerm: true })}
+      ${auditField(bi("批准记录", "Approval"), approval, { htmlTerm: true })}
+      ${item.overrides.length ? auditField(bi("覆盖关系", "Overrides"), tokenList(item.overrides), { htmlTerm: true }) : ""}
+      ${auditField(bi("生效范围", "Effective scopes"), tokenList(effectiveScopePaths), { htmlTerm: true })}
+      ${item.verification && item.verification.kind !== "none" ? auditField(bi("验证", "Verification"), `<pre class="value"><code>${escapeHtml(canonicalJson(item.verification))}</code></pre>`, { htmlTerm: true }) : ""}
+    </dl></details>
+  </article>`;
+}
+
+function renderKnowledge(model) {
+  const sourceMap = new Map(model.sources.map((source) => [source.id, source]));
+  const effectiveScopes = new Map(model.items.map((item) => [item.id, []]));
+  for (const view of model.scopeViews) {
+    for (const id of view.itemIds) effectiveScopes.get(id)?.push(view.path);
+  }
+  return `<section class="panel" role="tabpanel" id="view-knowledge" aria-labelledby="tab-knowledge" hidden>
+    <header class="section-head"><h2>${bi("项目知识", "Knowledge")}</h2><p>${bi("知识解释和 value 是主要内容，ID、digest 与 provenance 保留在审计详情中。", "Knowledge statements and values are primary; IDs, digests, and provenance remain available in audit details.")}</p></header>
+    <span class="sr-only" id="filters-label">${bi("知识筛选", "Knowledge filters")}</span><div class="toolbar" aria-labelledby="filters-label">
+      <div class="field"><label for="knowledge-query">${bi("搜索已加载快照", "Search snapshot")}</label><input id="knowledge-query" type="search" autocomplete="off" data-placeholder-zh="搜索解释、value 或 ID" data-placeholder-en="Search statement, value, or ID" placeholder="搜索解释、value 或 ID"></div>
+      <div class="field"><label for="knowledge-status">${bi("状态", "Status")}</label><select id="knowledge-status">${localizedOption("", "全部状态", "All statuses")}${localizedOption("proposed", "待批准", "Proposed")}${localizedOption("approved", "已批准", "Approved")}${localizedOption("deprecated", "已废弃", "Deprecated")}</select></div>
+      <div class="field"><label for="knowledge-kind">${bi("类型", "Kind")}</label><select id="knowledge-kind">${localizedOption("", "全部类型", "All kinds")}${[...KIND_LABELS].map(([value, labels]) => localizedOption(value, ...labels)).join("")}</select></div>
+      <div class="field"><label for="knowledge-scope">${bi("范围", "Scope")}</label><select id="knowledge-scope">${localizedOption("", "全部范围", "All scopes")}${localizedOption("project", "项目", "Project")}${localizedOption("path-prefix", "路径前缀", "Path prefix")}${localizedOption("file", "文件", "File")}</select></div>
+    </div>
+    <p class="result-line" aria-live="polite"><span><strong id="knowledge-result-count">${model.items.length}</strong> ${bi("个知识项", "items")}</span><span>${bi("Esc 清空搜索", "Esc clears search")}</span></p>
+    <div class="records">${model.items.map((item) => renderItem(item, sourceMap, effectiveScopes.get(item.id))).join("")}</div>
+  </section>`;
+}
+
+function digestFields(source) {
+  const digestValue = (value) => value
+    ? `<span class="digest-pair">${escapeHtml(shortDigest(value))}<small>${escapeHtml(value)}</small></span>`
+    : bi("不可用", "Unavailable");
+  const values = [source.contractDigest, source.lockedDigest, source.currentDigest].filter(Boolean);
+  if (values.length === 0 && !source.reason) return "";
+  if (values.length >= 2 && new Set(values).size === 1) {
+    return `<dl class="audit-grid">${auditField(bi("已匹配指纹", "Matched digest"), digestValue(values[0]), { htmlTerm: true })}</dl>`;
+  }
+  return `<dl class="audit-grid">
+    ${source.contractDigest ? auditField(bi("合同指纹", "Contract digest"), digestValue(source.contractDigest), { htmlTerm: true }) : ""}
+    ${source.lockedDigest ? auditField(bi("锁定指纹", "Locked digest"), digestValue(source.lockedDigest), { htmlTerm: true }) : ""}
+    ${source.currentDigest ? auditField(bi("当前指纹", "Current digest"), digestValue(source.currentDigest), { htmlTerm: true }) : ""}
+    ${source.reason ? auditField(bi("原因", "Reason"), escapeHtml(source.reason), { mono: true, htmlTerm: true }) : ""}
+  </dl>`;
+}
+
+function renderSource(source) {
+  const affectedCount = new Set([...source.directItemIds, ...source.verificationItemIds, ...source.overrideDependentItemIds]).size;
+  const projectionCount = new Set([...source.directProjectionPaths, ...source.staleProjectionPaths]).size;
+  const relations = [
+    [source.directItemIds, ["直接引用", "Direct references"]],
+    [source.verificationItemIds, ["验证引用", "Verification references"]],
+    [source.overrideDependentItemIds, ["覆盖依赖项", "Override dependents"]],
+    [source.fallbackItemIds, ["回退项", "Fallback items"]],
+    [source.directProjectionPaths, ["直接投影", "Direct projections"]],
+    [source.staleProjectionPaths, ["接受后过期", "Stale after accept"]],
+  ].filter(([values]) => values.length > 0);
+  const deprecation = source.deprecation
+    ? `<dl class="audit-grid">
+      ${auditField(bi("废弃负责人", "Deprecated by"), escapeHtml(source.deprecation.by), { htmlTerm: true })}
+      ${auditField(bi("废弃时间", "Deprecated at"), escapeHtml(source.deprecation.at), { mono: true, htmlTerm: true })}
+      ${auditField(bi("废弃原因", "Deprecation rationale"), escapeHtml(source.deprecation.rationale), { htmlTerm: true })}
+    </dl>`
+    : "";
+  return `<details class="record source"><summary><span><strong>${escapeHtml(source.id)}</strong><br><span class="mono">${escapeHtml(source.locator)}</span></span><span>${bi(`类型 ${source.kind} · 引用 ${source.referenceCount} · 影响 ${affectedCount} · 投影 ${projectionCount}`, `Kind ${source.kind} · References ${source.referenceCount} · Affects ${affectedCount} · Projections ${projectionCount}`)}</span>${statusBadge(source.status)}</summary>
+    <div class="detail-body">${digestFields(source)}${deprecation}${relations.length ? `<div class="relation-grid">${relations.map(([values, labels]) => `<section><h4>${bi(...labels)}</h4>${tokenList(values)}</section>`).join("")}</div>` : ""}</div>
+  </details>`;
+}
+
+function renderSources(model) {
+  return `<section class="panel" role="tabpanel" id="view-sources" aria-labelledby="tab-sources" hidden>
+    <header class="section-head"><h2>${bi("依据来源", "Sources")}</h2><p>${bi("这里只显示 locator、checkpoint 和关系，不读取或展示来源正文与 JSON Pointer 当前值。", "Only locators, checkpoints, and relationships are shown; source bodies and current JSON Pointer values remain private.")}</p></header>
+    <div class="records">${model.sources.map(renderSource).join("")}</div>
+  </section>`;
+}
+
+function renderScope(scope) {
+  const groups = Object.entries(scope.groups).filter(([, ids]) => ids.length > 0);
+  return `<details class="record scope"><summary><strong class="mono">${escapeHtml(scope.path)}</strong><span>${bi(`${scope.itemIds.length} 个生效知识项`, `${scope.itemIds.length} effective items`)}</span>${scope.error ? statusBadge("blocked") : statusBadge("clean")}</summary>
+    <div class="detail-body">${scope.error ? `<div class="notice"><strong>${escapeHtml(scope.error.code)}</strong><br>${escapeHtml(scope.error.message)}</div>` : groups.length ? `<div class="relation-grid">${groups.map(([kind, ids]) => `<section><h4>${kindLabel(kind)}</h4>${tokenList(ids)}</section>`).join("")}</div>` : `<div class="empty"><strong>${bi("没有生效知识", "No effective knowledge")}</strong><p>${bi("该已知路径当前没有已批准知识项。", "This known path has no approved items.")}</p></div>`}
+    ${scope.excludedItems.length ? `<div class="notice notice-spaced"><strong>${bi("被覆盖排除", "Excluded by override")}</strong><br>${tokenList(scope.excludedItems.map((item) => item.id))}</div>` : ""}
+    ${scope.siblingDifferences.length ? `<div class="notice notice-spaced"><strong>${bi("同级路径差异", "Sibling differences")}</strong>${scope.siblingDifferences.map((difference) => `<dl class="audit-grid"><div><dt>${escapeHtml(difference.path)} ${bi("仅当前路径", "Only here")}</dt><dd>${tokenList(difference.onlyHereItemIds)}</dd></div><div><dt>${escapeHtml(difference.path)} ${bi("仅对方路径", "Only there")}</dt><dd>${tokenList(difference.onlyThereItemIds)}</dd></div></dl>`).join("")}</div>` : ""}</div>
+  </details>`;
+}
+
+function renderScopes(model) {
+  return `<section class="panel" role="tabpanel" id="view-scopes" aria-labelledby="tab-scopes" hidden>
+    <header class="section-head"><h2>${bi("范围解释", "Scopes")}</h2><p>${bi("所有结果都由既有 scope compiler 预计算，只提供真实 Contract 中的已知路径。", "Results are precomputed by the existing scope compiler and limited to known Contract paths.")}</p></header>
+    <div class="records">${model.scopeViews.map(renderScope).join("")}</div>
+  </section>`;
+}
+
+function renderProjection(projection) {
+  return `<details class="record projection"><summary><strong class="mono">${escapeHtml(projection.path)}</strong><span>${escapeHtml(projection.target)} · ${bi(`渲染器 ${projection.rendererVersion}`, `Renderer ${projection.rendererVersion}`)}</span>${statusBadge(projection.status)}</summary><div class="detail-body"><dl class="audit-grid">
+    ${auditField(bi("范围路径", "Scope paths"), tokenList(projection.paths), { htmlTerm: true })}
+    ${auditField(bi("知识项 ID", "Item IDs"), tokenList(projection.itemIds), { htmlTerm: true })}
+    ${auditField(bi("问题代码", "Finding codes"), tokenList(projection.findingCodes), { htmlTerm: true })}
+    ${auditField(bi("合同指纹", "Contract digest"), escapeHtml(projection.contractDigest), { mono: true, htmlTerm: true })}
+  </dl></div></details>`;
+}
+
+function renderProjections(model) {
+  const body = model.projections.length
+    ? `<div class="records">${model.projections.map(renderProjection).join("")}</div>`
+    : `<div class="empty"><strong>${bi("未配置", "Not configured")}</strong><p>${bi("当前没有受管 Agent 投影。这不是错误，也不会被计算为 100% 覆盖。", "No managed Agent projections exist. This is not an error and is never shown as 100% coverage.")}</p></div>`;
+  return `<section class="panel" role="tabpanel" id="view-projections" aria-labelledby="tab-projections" hidden><header class="section-head"><h2>${bi("Agent 投影", "Agent projections")}</h2><p>${bi("投影是受管输出，不是第二份真源。看板不会创建、覆盖或重新发布它们。", "Projections are managed outputs, never a second source of truth; this dashboard cannot create, overwrite, or republish them.")}</p></header>${body}</section>`;
+}
+
+function renderFinding(finding) {
+  const labels = FINDING_LABELS.get(finding.code) ?? [finding.code, finding.code];
+  return `<details class="record finding"><summary><span><strong>${bi(...labels)}</strong><br><span class="mono">${escapeHtml(finding.code)}</span></span><span class="mono">${escapeHtml(finding.target)}</span>${statusBadge(finding.severity)}</summary><div class="detail-body"><pre class="value"><code>${escapeHtml(canonicalJson(finding))}</code></pre></div></details>`;
+}
+
+function renderFindings(model) {
+  const body = model.findings.length
+    ? `<div class="records">${model.findings.map(renderFinding).join("")}</div>`
+    : `<div class="empty"><strong>${bi("没有待处理问题", "No findings")}</strong><p>${bi("checker 当前没有报告来源、合同、范围、验证或投影问题。", "The checker reports no source, Contract, scope, verification, or projection findings.")}</p></div>`;
+  return `<section class="panel" role="tabpanel" id="view-findings" aria-labelledby="tab-findings" hidden><header class="section-head"><h2>${bi("待处理问题", "Findings")}</h2><p>${bi("这里完整保留 checker code 和 details，不自动修复、不隐藏 warning。", "Checker codes and details remain intact; nothing is repaired automatically or hidden.")}</p></header>${body}</section>`;
+}
+
+export function renderDashboardHtml(model) {
+  const styleHash = contentHash(CSS);
+  const scriptHash = contentHash(SCRIPT);
+  const csp = `default-src 'none'; style-src 'sha256-${styleHash}'; script-src 'sha256-${scriptHash}'; img-src 'none'; font-src 'none'; connect-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'`;
+  const viewCounts = new Map([
+    ["knowledge", model.items.length],
+    ["sources", model.sources.length],
+    ["scopes", model.scopeViews.length],
+    ["projections", model.projections.length],
+    ["findings", model.findings.length],
+  ]);
+  const tabs = VIEW_LABELS.map(([view, zhLabel, enLabel], index) => `<button id="tab-${view}" role="tab" aria-controls="view-${view}" aria-selected="${index === 0}" tabindex="${index === 0 ? 0 : -1}"><span class="nav-label"><strong lang="zh-CN">${zhLabel}</strong><strong lang="en">${enLabel}</strong></span>${viewCounts.has(view) ? `<span class="nav-count">${viewCounts.get(view)}</span>` : ""}</button>`).join("");
+  return `<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light dark">
+  <meta http-equiv="Content-Security-Policy" content="${csp}">
+  <title>${escapeHtml(model.project.name)} · Project Context</title>
+  <style>${CSS}</style>
+</head>
+<body>
+  <svg class="svg-defs" aria-hidden="true"><defs><g id="status-ok"><circle cx="10" cy="10" r="7"></circle><path d="m6.5 10 2.2 2.2 4.8-5"></path></g><g id="status-conflict"><path d="M10 3 17 16H3Z"></path><path d="M10 7v4M10 14v.1"></path></g><g id="status-error"><circle cx="10" cy="10" r="7"></circle><path d="m7.5 7.5 5 5m0-5-5 5"></path></g><g id="status-attention"><circle cx="10" cy="10" r="7"></circle><path d="M10 6.5v4.5M10 14v.1"></path></g></defs></svg>
+  <a class="skip-link" href="#main-content">${bi("跳到主要内容", "Skip to content")}</a>
+  <div class="app">
+    <aside class="sidebar"><div class="brand"><div class="brand-mark"><span class="brand-glyph" aria-hidden="true">PC</span><div><strong>${bi("项目上下文", "Project Context")}</strong><span>${bi("只读治理", "READ-ONLY GOVERNANCE")}</span></div></div></div><span class="sr-only" id="nav-label">${bi("治理看板视图", "Governance dashboard views")}</span><nav class="nav" role="tablist" aria-labelledby="nav-label">${tabs}</nav><p class="sidebar-note">${bi("本地快照", "LOCAL SNAPSHOT")}<br>${bi("无网络 · 无写入", "NO NETWORK · NO WRITES")}</p></aside>
+    <main class="main" id="main-content" tabindex="-1">
+      <header class="masthead"><div><p class="eyebrow">${bi("项目治理", "Project governance")}</p><h1>${escapeHtml(model.project.name)}</h1><p>${bi("已批准项目知识、来源、范围与投影状态", "Approved project knowledge, sources, scopes, and projection status")}</p></div><div class="masthead-tools"><span class="sr-only" id="locale-label">${bi("显示语言", "Display language")}</span><div class="locale-switch" id="locale-switch" role="group" aria-labelledby="locale-label"><button type="button" value="zh-CN" aria-pressed="true">中文</button><button type="button" value="en" aria-pressed="false">English</button></div><div class="digest"><strong>${bi("快照标识", "Snapshot identity")}</strong>${bi("项目合同", "Contract")} ${escapeHtml(shortDigest(model.digests.contract))}<br><span class="sr-only">${bi("完整内容指纹", "Full digest")}：</span>${escapeHtml(model.digests.contract)}</div></div></header>
+      ${renderOverview(model)}
+      ${renderKnowledge(model)}
+      ${renderSources(model)}
+      ${renderScopes(model)}
+      ${renderProjections(model)}
+      ${renderFindings(model)}
+    </main>
+  </div>
+  <script>${SCRIPT}</script>
+</body>
+</html>
+`;
+}