@minonl/dia 0.0.13 → 0.0.14

package/dist/cli.js

@@ -4776,12 +4776,29 @@ function build(opts = {}) {
 // src/graph-tui.ts
 var ORDER = ["doing", "blocked", "review", "todo", "awaiting_acceptance", "accepted", "done", "dropped", "rejected", "escalated"];
 var color = (s, code, on) => on ? `\x1B[${code}m${s}\x1B[0m` : s;
+var clip2 = (s, n) => {
+  const one = String(s || "").replace(/\s+/g, " ").trim();
+  return one.length > n ? `${one.slice(0, n - 1)}…` : one;
+};
+var shortId = (id) => id ? id.replace(/^ses_/, "").slice(-8) : "";
 function render2(g, opts = {}) {
   const on = opts.color ?? false;
-  const tasks = g.nodes.filter((n) => n.kind === "task");
-  const taskById = new Map(tasks.map((t) => [t.id, t]));
+  const width = Math.max(32, opts.width ?? 96);
+  const tasksAll = g.nodes.filter((n) => n.kind === "task");
+  const tasks = tasksAll.filter((t) => (!opts.status || t.status === opts.status) && (!opts.owner || t.owner === opts.owner));
+  const taskById = new Map(tasksAll.map((t) => [t.id, t]));
   const edgesFrom = (id, kind) => g.edges.filter((e) => e.from === id && e.kind === kind);
   const lines = [];
+  const counts = new Map;
+  for (const t of tasksAll)
+    counts.set(t.status || "todo", (counts.get(t.status || "todo") || 0) + 1);
+  const countText = [...ORDER.filter((s) => counts.has(s)), ...[...counts.keys()].filter((s) => !ORDER.includes(s))].map((s) => `${s}=${counts.get(s)}`).join(" ");
+  const claims = g.edges.filter((e) => e.kind === "claims");
+  const filter = [opts.status ? `status=${opts.status}` : "", opts.owner ? `owner=${opts.owner}` : ""].filter(Boolean).join(" ");
+  lines.push(color(`dia graph  tasks=${tasksAll.length}  ${countText}  claims=${claims.length}${filter ? `  filter: ${filter}` : ""}`, "1", on));
+  if (opts.now)
+    lines.push(color(`updated ${opts.now.toLocaleTimeString()}`, "2", on));
+  lines.push("");
   const groups = new Map;
   for (const t of tasks) {
     const st = t.status || "todo";
@@ -4790,34 +4807,41 @@ function render2(g, opts = {}) {
   for (const st of [...ORDER.filter((s) => groups.has(s)), ...[...groups.keys()].filter((s) => !ORDER.includes(s))]) {
     lines.push(color(`[${st}]`, "1;36", on));
     for (const t of groups.get(st).sort((a, b) => a.label.localeCompare(b.label))) {
-      lines.push(`  ${color(t.label, "1", on)}  ${color(t.id.replace(/^task:/, ""), "2", on)}${t.owner ? `  owner=${t.owner}` : ""}`);
+      const owner = t.owner ? `  @${shortId(t.owner)}` : "";
+      const deps = edgesFrom(t.id, "depends_on").length;
+      lines.push(`  ${color("●", "32", on)} ${color(clip2(t.label, width - 24), "1", on)}  ${color(shortId(t.id.replace(/^task:/, "")), "2", on)}${owner}${deps ? `  deps=${deps}` : ""}`);
       for (const e of edgesFrom(t.id, "depends_on")) {
         const dep = taskById.get(e.to);
-        lines.push(`    ${color("↳ depends", "34", on)} ${dep?.label || e.to}${dep ? ` [${dep.status}]` : ""}`);
+        lines.push(`    ${color("↳ depends", "34", on)} ${clip2(dep?.label || e.to, width - 20)}${dep ? ` [${dep.status}]` : ""}`);
       }
       for (const e of edgesFrom(t.id, "touches"))
-        lines.push(`    ${color("↳ touches", "35", on)} ${e.to.replace(/^path:/, "")}`);
-      if (t.blocked_by?.length)
-        lines.push(`    ${color(`⚠ blocked_by ${t.blocked_by.join(", ")}`, "31", on)}`);
+        lines.push(`    ${color("↳ touches", "35", on)} ${clip2(e.to.replace(/^path:/, ""), width - 20)}`);
+      if (t.blocked_by?.length) {
+        const names = t.blocked_by.map((id) => taskById.get(`task:${id}`)?.label || id);
+        lines.push(`    ${color(`⚠ blocked_by ${names.map((x) => clip2(x, 40)).join(", ")}`, "31", on)}`);
+      }
     }
     lines.push("");
   }
   if (!tasks.length)
-    lines.push("(no tasks)");
-  const claimEdges = g.edges.filter((e) => e.kind === "claims");
-  if (claimEdges.length) {
+    lines.push(opts.status || opts.owner ? "(no matching tasks)" : "(no tasks)");
+  if (claims.length) {
     lines.push(color("claims", "1;36", on));
-    for (const e of claimEdges)
-      lines.push(`  ${e.from.replace(/^session:/, "")} → ${e.to.replace(/^path:/, "")}`);
+    for (const e of claims) {
+      const holder = e.from.replace(/^session:/, "");
+      if (opts.owner && holder !== opts.owner)
+        continue;
+      lines.push(`  ${shortId(holder)} → ${clip2(e.to.replace(/^path:/, ""), width - 16)}`);
+    }
     lines.push("");
   }
   for (const c of g.cycles)
-    lines.push(color(`⚠ cycle: ${c.join(" -> ")}`, "31", on));
+    lines.push(color(`⚠ cycle: ${c.map((x) => x.replace(/^task:/, "")).join(" -> ")}`, "31", on));
   return lines.join(`
 `);
 }
 function watch(build, opts = {}) {
-  const paint = () => process.stdout.write("\x1B[2J\x1B[H" + render2(build(), { color: opts.color ?? process.stdout.isTTY }) + `
+  const paint = () => process.stdout.write("\x1B[2J\x1B[H" + render2(build(), { ...opts, now: new Date }) + `
 `);
   paint();
   const timer = setInterval(() => {
@@ -8565,7 +8589,7 @@ usage:
   dia agents list|register|unregister|discover
   dia msg deliver <agent> <id> [--transport tmux|acp]
   dia task add|list|link|status|done [--owner S] [--depends a,b] [--touches p1,p2]
-  dia graph [--json] [--task t-...] [--tui [--watch] [--no-color]]
+  dia graph [--json] [--task t-...] [--tui [--watch] [--status S] [--owner S] [--width N] [--no-color]]
   dia claim <path> [--reason R] [--ttl 4h] [--session S] | dia claims [--all] [--mine] [--gc [--days 7]] | dia unclaim <path|id> [--force]
   dia team run <id> --mock | --acp|--dsh --workspace DIR
   dia team gate|accept|reject|next
@@ -8959,10 +8983,17 @@ async function taskCli(argv) {
 async function graphCli(argv) {
   const asJson = has(argv, "--json");
   if (has(argv, "--tui") || has(argv, "--watch")) {
-    const paint = (g) => out(render2(g, { color: !!process.stdout.isTTY && !has(argv, "--no-color") }));
+    const width = Number(flag(argv, "--width") || 0);
+    const tuiOpts = {
+      color: !!process.stdout.isTTY && !has(argv, "--no-color"),
+      status: flag(argv, "--status"),
+      owner: flag(argv, "--owner"),
+      width: width > 0 ? width : undefined
+    };
+    const paint = (g) => out(render2(g, tuiOpts));
     try {
       if (has(argv, "--watch"))
-        return await watch(() => build({ task: flag(argv, "--task") }), { color: !!process.stdout.isTTY && !has(argv, "--no-color") });
+        return await watch(() => build({ task: flag(argv, "--task") }), tuiOpts);
       const g = build({ task: flag(argv, "--task") });
       paint(g);
       return g.cycles.length ? 3 : 0;

package/docs/design/graph-web-mockup.html

@@ -0,0 +1,220 @@
+<!doctype html>
+<html lang="zh">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>dia graph · 视觉设计稿</title>
+<style>
+  :root{
+    --bg:#f6f7f9; --panel:#fff; --ink:#111827; --muted:#6b7280; --line:#e5e7eb;
+    --blue:#2563eb; --violet:#7c3aed; --cyan:#0891b2; --green:#16a34a; --red:#dc2626; --amber:#d97706;
+    --shadow:0 1px 2px rgba(17,24,39,.06),0 8px 24px rgba(17,24,39,.06);
+  }
+  @media (prefers-color-scheme: dark){
+    :root{ --bg:#0f1115; --panel:#171a21; --ink:#e5e7eb; --muted:#9ca3af; --line:#2a2f3a;
+      --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.25); }
+  }
+  *{box-sizing:border-box}
+  body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
+  header{display:flex;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid var(--line);background:var(--panel)}
+  header h1{font-size:17px;margin:0;letter-spacing:.2px}
+  header .sub{color:var(--muted);font-size:12px}
+  header .spacer{flex:1}
+  .pill{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--muted);background:var(--bg)}
+  main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;padding:18px;max-width:1480px;margin:0 auto}
+  .panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
+  .toolbar{display:flex;gap:8px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
+  .seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
+  .seg button{border:0;background:transparent;color:var(--muted);padding:6px 10px;font:inherit;font-size:12px;cursor:pointer}
+  .seg button.on{background:var(--blue);color:#fff}
+  .toolbar .hint{margin-left:auto;color:var(--muted);font-size:12px}
+  .canvas{position:relative;height:640px;overflow:auto;padding:10px}
+  svg.edges{position:absolute;inset:0;pointer-events:none}
+  svg.edges line{stroke:#94a3b8;stroke-width:1.2;opacity:.8}
+  svg.edges line.depends_on{stroke:var(--blue)}
+  svg.edges line.touches{stroke:var(--violet);stroke-dasharray:3 4}
+  svg.edges line.claims{stroke:var(--cyan);stroke-dasharray:5 4}
+  .node{position:absolute;width:206px;border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:10px;background:var(--panel);padding:9px 11px;box-shadow:var(--shadow);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
+  .node:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(17,24,39,.12)}
+  .node.task.doing{border-left-color:var(--blue)}
+  .node.task.blocked{border-left-color:var(--red)}
+  .node.task.review{border-left-color:var(--amber)}
+  .node.task.done,.node.task.accepted{border-left-color:var(--green)}
+  .node.path{border-left-color:var(--violet)}
+  .node.session{border-left-color:var(--cyan)}
+  .node b{display:block;font-size:13px;line-height:1.35;margin-bottom:3px}
+  .node .meta{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .badge{display:inline-block;font-size:10px;padding:1px 6px;border-radius:999px;border:1px solid var(--line);color:var(--muted);margin-top:4px}
+  .col-label{position:absolute;top:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
+  aside{display:flex;flex-direction:column;gap:14px}
+  .side-title{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}
+  .side-title h2{font-size:13px;margin:0}
+  .side-title span{font-size:11px;color:var(--muted)}
+  .list{padding:6px 14px 12px}
+  .item{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:12px}
+  .item:last-child{border-bottom:0}
+  .item .k{color:var(--muted)}
+  .dot{display:inline-block;width:7px;height:7px;border-radius:99px;background:var(--muted);margin-right:6px;vertical-align:1px}
+  .dot.blue{background:var(--blue)} .dot.red{background:var(--red)} .dot.green{background:var(--green)} .dot.amber{background:var(--amber)}
+  .legend{padding:10px 14px 14px;color:var(--muted);font-size:12px;display:grid;gap:6px}
+  .legend i{display:inline-block;width:18px;height:2px;margin-right:8px;vertical-align:3px}
+  .attention{padding:8px 14px 14px}
+  .attention .row{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px dashed var(--line);font-size:12px}
+  .attention .row:last-child{border-bottom:0}
+  .tag{font-size:10px;border-radius:6px;padding:1px 6px;background:rgba(220,38,38,.12);color:var(--red);white-space:nowrap}
+  .tag.amber{background:rgba(217,119,6,.12);color:var(--amber)}
+  .detail{padding:14px;display:none}
+  .detail.show{display:block}
+  .detail h3{font-size:14px;margin:0 0 6px}
+  .detail p{margin:0 0 8px;color:var(--muted);font-size:12px}
+  .kv{display:grid;grid-template-columns:80px 1fr;gap:4px 10px;font-size:12px}
+  .kv .k{color:var(--muted)}
+  footer{padding:0 22px 22px;color:var(--muted);font-size:11px}
+  @media (max-width:980px){ main{grid-template-columns:1fr} .canvas{height:560px} }
+</style>
+</head>
+<body>
+<header>
+  <h1>dia graph</h1>
+  <span class="sub">只读依赖图 · 视觉设计稿 v0.1</span>
+  <span class="pill">静态 mockup · 无网络</span>
+  <span class="spacer"></span>
+  <span class="pill">updated 18:42</span>
+</header>
+
+<main>
+  <section class="panel">
+    <div class="toolbar">
+      <div class="seg" id="filter">
+        <button class="on" data-f="all">全部</button>
+        <button data-f="doing">进行中</button>
+        <button data-f="blocked">阻塞</button>
+        <button data-f="review">待评审</button>
+      </div>
+      <div class="seg" id="density">
+        <button class="on" data-d="comfortable">舒适</button>
+        <button data-d="compact">紧凑</button>
+      </div>
+      <span class="hint">点击节点查看详情 · 边：依赖 / 触碰 / claim</span>
+    </div>
+    <div class="canvas" id="canvas">
+      <svg class="edges" id="edges" width="1200" height="640"></svg>
+      <div class="col-label" style="left:18px">sessions</div>
+      <div class="col-label" style="left:250px">todo</div>
+      <div class="col-label" style="left:470px">doing</div>
+      <div class="col-label" style="left:690px">review</div>
+      <div class="col-label" style="left:910px">paths</div>
+    </div>
+  </section>
+
+  <aside>
+    <div class="panel">
+      <div class="side-title"><h2>概览</h2><span>live data</span></div>
+      <div class="list">
+        <div class="item"><span class="k"><i class="dot blue"></i>任务</span><b>7</b></div>
+        <div class="item"><span class="k"><i class="dot red"></i>阻塞</span><b>1</b></div>
+        <div class="item"><span class="k"><i class="dot amber"></i>待评审</span><b>1</b></div>
+        <div class="item"><span class="k"><i class="dot green"></i>完成</span><b>2</b></div>
+        <div class="item"><span class="k">claims</span><b>3</b></div>
+      </div>
+    </div>
+
+    <div class="panel">
+      <div class="side-title"><h2>需要人</h2><span>attention</span></div>
+      <div class="attention">
+        <div class="row"><span class="tag">阻塞</span><div><b>install.sh 迁移</b><br><span class="k">等待数据根切换完成</span></div></div>
+        <div class="row"><span class="tag amber">claim</span><div><b>src/collab.ts</b><br><span class="k">session-a 持有中</span></div></div>
+        <div class="row"><span class="tag amber">评审</span><div><b>graph TUI</b><br><span class="k">等待独立 verifier</span></div></div>
+      </div>
+    </div>
+
+    <div class="panel">
+      <div class="side-title"><h2>图例</h2><span>legend</span></div>
+      <div class="legend">
+        <div><i style="background:var(--blue)"></i>depends_on（任务依赖）</div>
+        <div><i style="background:var(--violet)"></i>touches（触碰路径）</div>
+        <div><i style="background:var(--cyan)"></i>claims（会话声明）</div>
+      </div>
+    </div>
+
+    <div class="panel detail" id="detail">
+      <div class="side-title"><h2>节点详情</h2><button onclick="document.getElementById('detail').classList.remove('show')" style="border:0;background:transparent;color:var(--muted);cursor:pointer">关闭</button></div>
+      <div class="detail" style="display:block" id="detail-body"></div>
+    </div>
+  </aside>
+</main>
+<footer>视觉稿：布局 / 信息层级 / 边语义。真实实现需先解除「框架无网络模块」限制并单独评审。</footer>
+
+<script>
+const nodes = [
+  {id:'session:ses_a', kind:'session', label:'session-a', x:20, y:60},
+  {id:'session:ses_b', kind:'session', label:'session-b', x:20, y:200},
+  {id:'task:t-1', kind:'task', status:'todo', label:'数据根迁移', x:240, y:40, owner:'ses_a'},
+  {id:'task:t-2', kind:'task', status:'doing', label:'install.sh 拆分', x:460, y:40, owner:'ses_a'},
+  {id:'task:t-3', kind:'task', status:'blocked', label:'launchd 安装脚本', x:680, y:40, owner:'ses_b'},
+  {id:'task:t-4', kind:'task', status:'review', label:'graph TUI', x:680, y:190, owner:'ses_b'},
+  {id:'task:t-5', kind:'task', status:'done', label:'dia msg M0', x:240, y:190},
+  {id:'task:t-6', kind:'task', status:'accepted', label:'claim 机制', x:240, y:320},
+  {id:'task:t-7', kind:'task', status:'doing', label:'handoff + claim', x:460, y:320, owner:'ses_a'},
+  {id:'path:install.sh', kind:'path', label:'install.sh', x:900, y:40},
+  {id:'path:src/collab.ts', kind:'path', label:'src/collab.ts', x:900, y:180},
+  {id:'path:docs/msg.md', kind:'path', label:'docs/msg.md', x:900, y:320}
+];
+const edges = [
+  {from:'task:t-2', to:'task:t-1', kind:'depends_on'},
+  {from:'task:t-3', to:'task:t-2', kind:'depends_on'},
+  {from:'task:t-7', to:'task:t-6', kind:'depends_on'},
+  {from:'task:t-2', to:'path:install.sh', kind:'touches'},
+  {from:'task:t-4', to:'path:src/collab.ts', kind:'touches'},
+  {from:'task:t-7', to:'path:src/collab.ts', kind:'touches'},
+  {from:'session:ses_a', to:'path:src/collab.ts', kind:'claims'},
+  {from:'session:ses_b', to:'path:install.sh', kind:'claims'}
+];
+const canvas = document.getElementById('canvas');
+const svg = document.getElementById('edges');
+const byId = new Map(nodes.map(n=>[n.id,n]));
+function card(n){
+  const el=document.createElement('div');
+  el.className='node '+n.kind+(n.status?' '+n.status:'');
+  el.style.left=n.x+'px'; el.style.top=n.y+'px'; el.dataset.id=n.id;
+  const meta = n.kind==='task' ? (n.owner?'@'+n.owner:'unassigned') : n.id.split(':')[0];
+  el.innerHTML='<b>'+esc(n.label)+'</b><div class="meta">'+esc(n.id)+'</div>'+
+    (n.status?'<span class="badge">'+esc(n.status)+'</span>':'')+
+    '<div class="meta" style="margin-top:4px">'+esc(meta)+'</div>';
+  el.onclick=()=>show(n);
+  return el;
+}
+function esc(s){return String(s??'').replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]))}
+function draw(){
+  [...canvas.querySelectorAll('.node')].forEach(e=>e.remove());
+  nodes.forEach(n=>canvas.appendChild(card(n)));
+  const maxX=Math.max(...nodes.map(n=>n.x))+240, maxY=Math.max(...nodes.map(n=>n.y))+120;
+  svg.setAttribute('width',maxX); svg.setAttribute('height',maxY);
+  svg.innerHTML=edges.map(e=>{
+    const a=byId.get(e.from), b=byId.get(e.to); if(!a||!b) return '';
+    return '<line class="'+e.kind+'" x1="'+(a.x+103)+'" y1="'+(a.y+30)+'" x2="'+(b.x+103)+'" y2="'+(b.y+30)+'" />';
+  }).join('');
+}
+function show(n){
+  const d=document.getElementById('detail'), body=document.getElementById('detail-body');
+  const out=edges.filter(e=>e.from===n.id||e.to===n.id).map(e=>{
+    const other=e.from===n.id?e.to:e.from;
+    return '<div class="item"><span class="k">'+e.kind+'</span><span>'+esc(other)+'</span></div>';
+  }).join('') || '<p class="muted">无边</p>';
+  body.innerHTML='<h3>'+esc(n.label)+'</h3><p>'+esc(n.id)+'</p><div class="kv"><div class="k">kind</div><div>'+esc(n.kind)+'</div><div class="k">status</div><div>'+esc(n.status||'-')+'</div><div class="k">owner</div><div>'+esc(n.owner||'-')+'</div></div><h3 style="margin-top:14px">关联</h3>'+out;
+  d.classList.add('show');
+}
+document.querySelectorAll('#filter button').forEach(b=>b.onclick=()=>{
+  document.querySelectorAll('#filter button').forEach(x=>x.classList.remove('on')); b.classList.add('on');
+  const f=b.dataset.f;
+  nodes.forEach(n=>{ if(n.kind==='task'){ const el=document.querySelector('[data-id="'+n.id+'"]'); if(el) el.style.display=(f==='all'||n.status===f)?'':'none'; }});
+});
+document.querySelectorAll('#density button').forEach(b=>b.onclick=()=>{
+  document.querySelectorAll('#density button').forEach(x=>x.classList.remove('on')); b.classList.add('on');
+  const compact=b.dataset.d==='compact';
+  document.querySelectorAll('.node').forEach(el=>{el.style.padding=compact?'5px 8px':'9px 11px';el.style.width=compact?'180px':'206px';});
+});
+draw();
+</script>
+</body>
+</html>

package/docs/design/graph-web.md

@@ -0,0 +1,61 @@
+# dia graph Web 视觉设计稿（v0.1）
+
+> 静态 mockup：[`graph-web-mockup.html`](graph-web-mockup.html)（直接用浏览器打开，无网络/无依赖）
+> 数据契约：`dia graph --json`（schema 1）；本稿只做视觉与信息层级，不是实现。
+
+## 1. 布局
+
+```
+┌ header: dia graph · 只读 · 更新时间 ──────────────────────────┐
+├ 工具栏：状态过滤 | 密度 | 提示                               │
+├ 主画布（卡片 + SVG 边）                    ┌ 右侧 320px ────┐
+│  sessions | todo | doing | review | paths │ 概览 / 需要人   │
+│                                           │ 图例 / 节点详情 │
+└ footer: 数据来源 / 约束 ───────────────────┴────────────────┘
+```
+
+- 主画布按状态分列：session → todo → doing → review → path；边的方向从左到右。
+- 右侧固定 320px：概览计数、attention（阻塞/claim/待评审）、图例、节点详情。
+- 节点卡片颜色只表达 **kind + status**，不用于装饰。
+
+## 2. 信息层级
+
+| 层 | 内容 | 设计 |
+|---|---|---|
+| 第一层 | task 标题 + status | 加粗 13px；状态色只出现在左边框和 badge |
+| 第二层 | task id / owner | 11px muted；owner 显示短 id（`@a1b2c3d4`） |
+| 第三层 | 依赖/触碰/claim | SVG 边 + 右侧详情；不在卡片里堆文字 |
+| attention | 阻塞 / claim 冲突 / 待评审 | 右上角固定区，不藏在 hover 里 |
+
+## 3. 交互
+
+- 点击节点 → 右侧详情：kind/status/owner + 关联边列表；
+- 顶部过滤：all / doing / blocked / review（客户端过滤，不改数据）；
+- 密度切换：comfortable / compact；
+- 刷新：MVP 静态导出；live 版用 `dia graph --json` 轮询（2s），不做 WebSocket；
+- 不做：编辑、拖拽改依赖、写 claim（只读）。
+
+## 4. 与现有数据契约的映射
+
+| UI | `dia graph --json` |
+|---|---|
+| 卡片 | `nodes[]`：task/session/path |
+| 依赖边 | `edges[kind=depends_on]` |
+| 触碰边 | `edges[kind=touches]` |
+| claim 边 | `edges[kind=claims]` |
+| 阻塞提示 | task 节点 `blocked_by[]`（派生，不是边） |
+| 环 | `cycles[]`，顶部红条提示 |
+
+## 5. 实现约束（重要）
+
+仓库的 `tests/static.test.ts` 禁止框架 import `node:http` / `fetch` / 网络模块。因此：
+
+1. **本稿只是静态 HTML**，不进入 `src/`，不启服务；
+2. 若将来要做真实 Web：
+   - 方案 A：`dia graph --export-html` 生成静态文件（推荐，不需要网络）；
+   - 方案 B：独立可选包 `@dia/graph-web`（明确例外 + 只绑 loopback + 单独评审），不改核心框架规则。
+
+## 6. 后续
+
+- 先确认视觉稿的列布局/信息密度/右侧 attention 位置；
+- 确认后先做 `--export-html` 静态导出（零网络、零 daemon），再评估 live 轮询。

package/docs/index.md

@@ -88,3 +88,9 @@ Agent 入口：[`llms.txt`](https://github.com/minonl/dia/blob/main/llms.txt)（
 |---|---|
 | [框架启动方案（bootstrap）](history/framework-bootstrap.md) | 已归档（2026-11-03）：本文的启动/分发方案（release tarball + agentctl + framework.lock）未采用； |
 
+## 其他
+
+| 文档 | 一句话 |
+|---|---|
+| [dia graph Web 视觉设计稿（v0.1）](design/graph-web.md) | 静态 mockup：graph-web-mockup.html（直接用浏览器打开，无网络/无依赖） |
+

package/docs/worktree.md

@@ -11,27 +11,29 @@ dia wt adopt <repo> --apply    # 写入配置 + 三个守卫钩子
 dia wt adopt --all --apply     # 批量：仓根下所有主 checkout（跳过 *-worktree--*）
 ```
 
-写入内容（幂等）：
+写入内容（幂等，**不改仓内文件、不写全局配置**）：
 
-| 项 | 位置 |
-|---|---|
-| 策略 | `<git-common-dir>/dia/config.json`（`defaultBranch` / `template` / `hooksPath` / `hooksPrevious` / `hooksChain`） |
-| 钩子 | `<git-common-dir>/dia/hooks/{pre-commit,pre-push,post-checkout}` |
-| `core.hooksPath` | 指向上面目录，**必须是绝对路径**（相对路径在 worktree 会静默失效） |
+| 仓类型 | 做法 | 记录 |
+|---|---|---|
+| 普通仓 | 钩子写 `<git-common-dir>/dia/hooks/`，并把**仓库本地** `core.hooksPath` 指过去（绝对路径） | `hooksManager=local` |
+| **simple-git-hooks 仓** | 不碰 `.git/hooks`、不改 `package.json`；守卫写进 `SIMPLE_GIT_HOOKS_RC` 指向的脚本（钩子会 source 它） | `hooksManager=simple-git-hooks` |
+| 已有其它 hooksPath（husky / `.githooks`） | **不抢占**，只报告（建议改用 simple-git-hooks） | `hooksManager=external` |
+
+> 判定：`package.json` 里有 `simple-git-hooks`（配置或 devDependency）→ RC 模式；否则看 `core.hooksPath` 是否已被别人占用。
 
 守卫行为：
 
 | 钩子 | 规则 |
 |---|---|
 | `pre-commit` | 主 checkout 上、分支属于 protected（默认分支 + main/master/develop/dev）→ 拒绝 |
-| `pre-push` | 主 checkout 上**任何 push**（含 tag / feature 分支）→ 拒绝；推 `main/master/develop/dev` → 拒绝 |
+| `pre-push` | 主 checkout 上**任何 push**（含 tag / feature 分支）→ 拒绝；推 `main/master/develop/dev` → 拒绝；并对推送内容做敏感信息扫描 |
 | `post-checkout` | 主 checkout 切到非默认分支 → 黄色提示（不阻断） |
 
-**钩子链**：`hooksChain`（首次 adopt 前的 hooksPath，如 `.husky` / `.githooks`）→ `<common>/hooks` → 默认放行。
-所以 husky / simple-git-hooks / lefthook 的钩子不会被吞。
+**钩子链**：本地钩子先跑守卫，再执行 `<common>/hooks/<name>`（simple-git-hooks 等管理器生成处）；`pre-push` 的 stdin 原样转发。
+`SIMPLE_GIT_HOOKS_RC` 由 adopt 写入 `~/.zshenv`（带 `# dia-wt:` 标记），脚本内容固定为 `dia wt guard <hook>`。
 
-> ⚠️ `simple-git-hooks` 的 `postinstall` 会重写 `core.hooksPath` 下的钩子。install 后若守卫被覆盖：
-> `dia wt doctor --fix`（或重跑 `dia wt adopt --apply`）。
+> ⚠️ husky / `.githooks` 仓：本地 `core.hooksPath` 会覆盖一切，守卫不生效（doctor WARN）。
+> 迁移办法：把钩子迁到 simple-git-hooks（`postinstall: simple-git-hooks` + `simple-git-hooks` 配置），再 `dia wt adopt --apply`。
 
 ## 2. 巡检
 
@@ -53,6 +55,8 @@ dia wt doctor --all --fix   # 无损修复：重装三个钩子 + 校正 hooksPa
 | D06 | 无 prunable / locked |
 | D07 | 同一分支不被多个 worktree 占用 |
 | D11 | 默认分支可解析（config > origin/HEAD（校验仍存在）> main > master） |
+| D20 | 全局 `core.hooksPath` 不得指向 dia 旧钩子目录（防外溢；有则 FAIL + 清理命令） |
+| D21 | 仓库本地 `core.hooksPath` 与模式一致：local=dia 目录；external=只 WARN |
 
 挂成日巡检（mac launchd / linux cron 由 `dia job` 统一）：
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@minonl/dia",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "type": "module",
   "description": "dia (嗲) — lightweight agent framework: knowledge index, audit, session ingest",
   "bin": {