@minonl/dia 0.0.13 → 0.0.15

package/dist/cli.js

@@ -1899,6 +1899,9 @@ function assertInside(base, p) {
   return abs;
 }
 var TREE_SKIP = new Set([".git", "node_modules", ".data"]);
+function copyFilter(base) {
+  return (p) => !relative3(base, p).split(sep4).some((s) => TREE_SKIP.has(s));
+}
 function walkFiles(root) {
   const out = [];
   (function rec(dir) {
@@ -2109,7 +2112,7 @@ function install(from, opts = {}) {
   if (!alreadyInstalled || hashTree(src.dir) !== hashTree(target)) {
     rmSync3(target, { recursive: true, force: true });
     mkdirSync7(target, { recursive: true });
-    cpSync(src.dir, target, { recursive: true, dereference: true, filter: (p) => !p.split(sep4).some((s) => TREE_SKIP.has(s)) });
+    cpSync(src.dir, target, { recursive: true, dereference: true, filter: copyFilter(src.dir) });
   }
   const rendered = renderContent(src.dir, target, m) ?? planned;
   const appliedConfig = apply(m.config ?? []);
@@ -2881,7 +2884,7 @@ function install2(from, opts = {}) {
     const staging = join13(idDir, `.staging-${process.pid}-${Date.now().toString(36)}`);
     rmSync4(staging, { recursive: true, force: true });
     mkdirSync10(staging, { recursive: true });
-    cpSync2(src.dir, staging, { recursive: true, dereference: true, filter: (p) => !p.split(sep5).some((s) => TREE_SKIP.has(s)) });
+    cpSync2(src.dir, staging, { recursive: true, dereference: true, filter: copyFilter(src.dir) });
     const stagingHash = hashTree2(staging);
     let reuseTarget = false;
     if (existsSync11(target)) {
@@ -4776,12 +4779,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 +4810,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 +8592,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 +8986,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,730 @@
+<!doctype html>
+<html lang="zh">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>dia graph · 视觉设计稿 v0.3</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:14px 22px;border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap}
+  header h1{font-size:17px;margin:0;letter-spacing:.2px}
+  header .sub{color:var(--muted);font-size:12px}
+  header .spacer{flex:1}
+  .tabs{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
+  .tabs button{border:0;background:transparent;color:var(--muted);padding:6px 12px;font:inherit;font-size:12px;cursor:pointer}
+  .tabs button.on{background:var(--blue);color:#fff}
+  .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) 320px;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}
+  .seg button:disabled{opacity:.35;cursor:not-allowed}
+  .win-select{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:6px 8px;font:inherit;font-size:12px}
+  .search{position:relative}
+  .search input{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:6px 10px;font:inherit;font-size:12px;width:210px}
+  .search .q-list{position:absolute;left:0;top:34px;z-index:20;width:280px;max-height:250px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);display:none}
+  .search .q-list.open{display:block}
+  .q-item{padding:6px 10px;font-size:12px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
+  .q-item:hover,.q-item.active{background:color-mix(in srgb,var(--blue) 18%,transparent)}
+  .q-item .k{color:var(--muted)}
+  .q-item .q-prio{font-style:normal;font-size:10px;color:var(--muted);margin-left:6px}
+  .q-head{padding:6px 10px;font-size:10px;color:var(--muted);border-bottom:1px solid var(--line)}
+  .q-empty{padding:10px;font-size:12px;color:var(--muted)}
+  .node.hit{outline:2px solid var(--blue);outline-offset:1px}
+  .node.dim{opacity:.22}
+  .focus-chip{display:none;align-items:center;gap:4px;border:1px solid var(--blue);color:var(--blue);border-radius:999px;padding:3px 4px 3px 10px;font-size:11px}
+  .focus-chip.on{display:inline-flex}
+  .focus-chip button{border:0;background:transparent;color:var(--blue);cursor:pointer;font:inherit;font-size:11px;padding:0 6px}
+  .focus-chip .fd{border:0;background:transparent;color:var(--blue);font:inherit;font-size:11px}
+  .toolbar .hint{margin-left:auto;color:var(--muted);font-size:12px}
+  .canvas{position:relative;height:620px;overflow:hidden}
+  .canvas-scroll{position:absolute;inset:0;overflow:auto;padding:10px}
+  .lane-rail{position:absolute;left:0;top:0;bottom:0;width:110px;z-index:6;pointer-events:none;background:linear-gradient(90deg,var(--panel) 86%,transparent)}
+  svg.edges{position:absolute;inset:0;pointer-events:none;overflow:visible}
+  .node{position:absolute;width:190px;border:1px solid var(--line);border-left:1px solid var(--line);border-radius:10px;background:var(--panel);padding:8px 10px;box-shadow:var(--shadow);cursor:pointer}
+  .node.path{border-left-color:var(--violet)}
+  .node.session{border-left-color:var(--cyan)}
+  .node b{display:block;font-size:13px;line-height:1.3;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .node .meta{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .progress{height:4px;border-radius:99px;background:var(--line);margin-top:6px;overflow:hidden}
+  .progress i{display:block;height:100%;background:var(--blue);background-image:linear-gradient(45deg,rgba(255,255,255,.28) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 75%,transparent 75%);background-size:12px 12px;animation:flow 1s linear infinite}
+  .progress i.blocked{background-color:var(--red);animation-play-state:paused;opacity:.65}
+  .progress i.review{background-color:var(--amber)}
+  .progress i.done,.progress i.accepted{background-color:var(--muted);background-image:none;animation:none}
+  .progress i.todo{background-color:var(--muted);background-image:none;animation:none}
+  @keyframes flow{to{background-position:12px 0}}
+  .st{font-weight:500}
+  .st.doing{color:var(--ink)} .st.blocked{color:var(--red)} .st.review{color:var(--amber)}
+  .st.done,.st.accepted{color:var(--muted)} .st.todo{color:var(--muted)}
+  .prio{float:right;font-size:10px;font-weight:600;border-radius:5px;padding:0 6px;color:#fff;margin-left:4px}
+  .prio{background:transparent;border:1px solid var(--line)}
+  .prio.p0{background:var(--red);border-color:var(--red);color:#fff}
+  .prio.p1{border-color:var(--amber);color:var(--amber)}
+  .prio.p2{border-color:var(--line);color:var(--muted)}
+  .pgroup{position:absolute;left:0;pointer-events:none;border-bottom:1px dashed var(--line)}
+  .plane-label{position:absolute;left:20px;width:78px;z-index:6;pointer-events:none;padding:2px 6px 2px 0;background:linear-gradient(90deg,var(--panel) 72%,transparent);transform:translateY(-50%);font-size:13px;font-weight:700;letter-spacing:.1em}
+  .plane-label small{display:block;font-size:9px;font-weight:400;letter-spacing:0;opacity:.7;margin-top:2px}
+  .legend-overlay{position:absolute;right:12px;bottom:12px;z-index:5;background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:10px;padding:8px 10px;box-shadow:var(--shadow);font-size:11px;color:var(--muted);display:grid;gap:5px;min-width:190px}
+  .legend-overlay .row{display:flex;align-items:center;gap:8px;white-space:nowrap}
+  .legend-overlay .sample{width:38px;height:10px;flex:0 0 38px}
+  .legend-overlay b{color:var(--ink);font-weight:600}
+  .canvas.simple .legend-overlay .detail-row{display:none}
+  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)}
+  .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)}
+  .attention .row{cursor:pointer}
+  .quick{display:flex;gap:6px;margin-top:6px}
+  .quick button,.btn{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:7px;padding:3px 8px;font:inherit;font-size:11px;cursor:pointer}
+  .quick button.primary,.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
+  .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .18s;z-index:40}
+  .backdrop.show{opacity:1;pointer-events:auto}
+  .drawer{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:92vw;background:var(--panel);border-left:1px solid var(--line);box-shadow:-12px 0 40px rgba(0,0,0,.25);transform:translateX(100%);transition:transform .2s ease;z-index:50;display:flex;flex-direction:column}
+  .drawer.show{transform:none}
+  .drawer-head{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
+  .drawer-head h3{font-size:15px;margin:0 0 3px}
+  .drawer-head .meta{color:var(--muted);font-size:11px}
+  .drawer-head .close{margin-left:auto;border:0;background:transparent;color:var(--muted);font-size:18px;cursor:pointer}
+  .drawer-tabs{display:flex;gap:6px;padding:10px 16px;border-bottom:1px solid var(--line)}
+  .drawer-tabs button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:7px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer}
+  .drawer-tabs button.on{background:var(--blue);border-color:var(--blue);color:#fff}
+  .drawer-body{padding:14px 16px 24px;overflow:auto}
+  .drawer-body h4{font-size:12px;margin:14px 0 6px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
+  .kv{display:grid;grid-template-columns:70px 1fr;gap:4px 10px;font-size:12px}
+  .kv .k{color:var(--muted)}
+  .iv-seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:12px}
+  .iv-seg button{flex:1;border:0;background:transparent;color:var(--muted);padding:7px 8px;font:inherit;font-size:12px;cursor:pointer}
+  .iv-seg button.on{background:var(--blue);color:#fff}
+  .iv-row{display:grid;gap:6px;margin-bottom:10px}
+  .iv-row label{font-size:11px;color:var(--muted)}
+  .iv-row select,.iv-row textarea{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);padding:8px;font:inherit;font-size:12px}
+  .iv-row textarea{min-height:96px;resize:vertical}
+  .iv-status{color:var(--green);font-size:11px;margin-left:8px}
+  .rel-list .item{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:12px}
+  .rel-list .item:last-child{border-bottom:0}
+  .rel-list .k{color:var(--muted)}
+  .kv{display:grid;grid-template-columns:70px 1fr;gap:4px 10px;font-size:12px}
+  .kv .k{color:var(--muted)}
+  /* timeline */
+  .timeline{padding:14px 16px 18px;overflow:hidden;position:relative}
+  .tl-grid{display:grid;grid-template-columns:190px minmax(0,1fr);gap:8px;align-items:start}
+  .tl-labels{overflow:hidden;position:relative}
+  .tl-label-head{height:34px;display:flex;align-items:flex-end;font-size:11px;color:var(--muted);padding-bottom:6px}
+  .tl-labels-body{will-change:transform}
+  .tl-label-row{height:38px;box-sizing:border-box;padding:6px 8px 4px 0;border-top:1px dashed var(--line);font-size:12px;overflow:hidden}
+  .tl-label-row b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .tl-label-row span{color:var(--muted);font-size:10px}
+  .tl-scroll{overflow:auto;max-height:620px;scrollbar-width:thin}
+  .scroll-hint{position:absolute;right:18px;top:10px;z-index:6;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px 9px;font-size:10px;color:var(--muted);box-shadow:var(--shadow)}
+  .tl-head{display:grid;grid-template-columns:var(--tlw,900px);gap:8px;align-items:end;color:var(--muted);font-size:11px;margin-bottom:8px;position:sticky;top:0;z-index:4;background:var(--panel)}
+  .tl-axis{position:relative;height:34px;width:var(--tlw,900px)}
+  .tl-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap;line-height:1.2}
+  .tl-axis span small{display:block;font-size:9px;opacity:.55}
+  .tl-body{position:relative}
+  .tl-row{display:grid;grid-template-columns:var(--tlw,900px);gap:8px;align-items:start;min-height:38px;border-top:1px dashed var(--line)}
+  .tl-track{position:relative;height:28px;overflow:hidden;width:var(--tlw,900px);margin-top:4px}
+  .tl-bar{position:absolute;top:7px;height:14px;border-radius:5px;background:var(--blue);opacity:.9;cursor:pointer}
+  .tl-bar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:rgba(255,255,255,.45)}
+  .tl-bar.blocked{background:var(--red)} .tl-bar.done,.tl-bar.accepted,.tl-bar.todo{background:var(--muted)}
+  .tl-bar.review{background:var(--amber)}
+  .tl-bar.critical{outline:2px solid var(--amber);outline-offset:2px}
+  .tl-today{position:absolute;top:0;bottom:0;pointer-events:none;z-index:2;border-left:1px dashed var(--red);color:var(--red);font-size:10px;padding-left:4px}
+  .tl-caption{color:var(--muted);font-size:12px;padding:10px 0 2px}
+  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.3</span>
+  <div class="tabs" id="tabs">
+    <button class="on" data-v="graph">关系图</button>
+    <button data-v="time">时间线</button>
+  </div>
+  <span class="spacer"></span>
+  <span class="pill">静态 mockup · 无网络</span>
+  <span class="pill" id="route">#/graph</span>
+  <span class="pill" id="updated">updated 18:42</span>
+</header>
+
+<main>
+  <section class="panel">
+    <div class="toolbar">
+      <div id="graph-tools" style="display:flex;gap:8px;align-items:center">
+        <div class="seg" id="layout">
+          <button class="on" data-l="priority">优先级视图</button>
+          <button data-l="dep">依赖视图</button>
+        </div>
+        <div class="seg" id="mode">
+          <button class="on" data-m="simple">简约</button>
+          <button data-m="detail">详细</button>
+        </div>
+        <div class="search">
+          <input id="q" type="search" placeholder="搜索 ID / 名称 / owner" autocomplete="off">
+          <div class="q-list" id="q-list"></div>
+        </div>
+        <span class="focus-chip" id="focus-chip"><span id="focus-text"></span><select id="focus-fd" class="fd"><option value="1">1 层</option><option value="2" selected>2 层</option><option value="all">全链路</option></select><button id="focus-exit">退出</button></span>
+      </div>
+      <div id="time-tools" style="display:none;gap:8px;align-items:center">
+        <div class="seg" id="zoom">
+          <button data-z="-">－</button>
+          <button data-z="reset">100%</button>
+          <button data-z="+">＋</button>
+        </div>
+      </div>
+      <select class="win-select" id="win" title="按任务开始时间过滤，结束时间不限（两个视图共用）">
+        <option value="7">近 7 天</option>
+        <option value="14">近 14 天</option>
+        <option value="30">近 30 天</option>
+        <option value="0">全部时间</option>
+      </select>
+      <span class="hint" id="hint">按优先级分行（P0 最高）；行内从左到右 = 依赖顺序。简约只看任务和依赖，详细展开具体关联。</span>
+    </div>
+    <div id="view-graph">
+      <div class="canvas" id="canvas">
+        <div class="canvas-scroll" id="canvas-scroll">
+          <svg class="edges" id="edges"></svg>
+        </div>
+        <div class="lane-rail" id="lane-rail"></div>
+        <div class="legend-overlay" id="legend">
+          <div class="row"><svg class="sample" viewBox="0 0 38 10"><defs><marker id="lg-dep" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6" fill="#2563eb"/></marker></defs><line x1="1" y1="5" x2="30" y2="5" stroke="#2563eb" stroke-width="1.6" marker-end="url(#lg-dep)"/></svg><span><b>→ depends_on</b> 单向</span></div>
+          <div class="row detail-row"><svg class="sample" viewBox="0 0 38 10"><defs><marker id="lg-touch" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6" fill="#7c3aed"/></marker></defs><line x1="1" y1="5" x2="30" y2="5" stroke="#7c3aed" stroke-width="1.6" stroke-dasharray="6 4" marker-end="url(#lg-touch)"/></svg><span><b>→ touches</b> 单向</span></div>
+          <div class="row detail-row"><svg class="sample" viewBox="0 0 38 10"><defs><marker id="lg-claim" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6" fill="#0891b2"/></marker></defs><line x1="1" y1="5" x2="30" y2="5" stroke="#0891b2" stroke-width="1.6" stroke-dasharray="2 3" marker-end="url(#lg-claim)"/></svg><span><b>→ claims</b> 单向</span></div>
+          <div class="row detail-row"><svg class="sample" viewBox="0 0 38 10"><defs><marker id="lg-collab" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6" fill="#64748b"/></marker></defs><line x1="3" y1="5" x2="32" y2="5" stroke="#64748b" stroke-width="1.6" stroke-dasharray="1 3" marker-start="url(#lg-collab)" marker-end="url(#lg-collab)"/></svg><span><b>↔ collaborates_with</b> 双向（示例）</span></div>
+        </div>
+      </div>
+    </div>
+    <div id="view-time" style="display:none">
+      <div class="timeline">
+        <div class="scroll-hint">← 左右滚动 →</div>
+        <div class="tl-grid">
+          <div class="tl-labels">
+            <div class="tl-label-head">任务</div>
+            <div class="tl-labels-body" id="tl-labels-body"></div>
+          </div>
+          <div class="tl-scroll" id="tl-scroll">
+            <div class="tl-head"><div class="tl-axis" id="tl-axis"></div></div>
+            <div class="tl-body" id="tl-body"></div>
+          </div>
+        </div>
+        <div class="tl-caption">橙色描边 = 关键路径（数据根迁移 → install.sh 拆分 → launchd）；红色虚线 = 今天。</div>
+      </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" style="background:var(--muted)"></i>任务</span><b id="stat-tasks">100</b></div>
+        <div class="item"><span class="k"><i class="dot" style="background:var(--red)"></i>阻塞</span><b id="stat-blocked">0</b></div>
+        <div class="item"><span class="k"><i class="dot" style="background:var(--amber)"></i>待评审</span><b id="stat-review">0</b></div>
+        <div class="item"><span class="k"><i class="dot" style="background:var(--muted)"></i>完成</span><b id="stat-done">0</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" data-task="t-3"><span class="tag">阻塞</span><div><b>launchd 安装脚本</b><br><span class="k">等待 install.sh 拆分</span><div class="quick"><button class="primary" onclick="event.stopPropagation();openDrawer('t-3','intervene')">介入</button><button onclick="event.stopPropagation();openDrawer('t-3','task')">查看</button></div></div></div>
+        <div class="row" data-task="t-4"><span class="tag amber">claim</span><div><b>src/collab.ts</b><br><span class="k">session-a 持有中</span><div class="quick"><button class="primary" onclick="event.stopPropagation();openDrawer('t-4','intervene')">联系持有者</button></div></div></div>
+        <div class="row" data-task="t-4"><span class="tag amber">评审</span><div><b>graph TUI</b><br><span class="k">等待独立 verifier</span><div class="quick"><button class="primary" onclick="event.stopPropagation();openDrawer('t-4','intervene')">开始评审</button></div></div></div>
+      </div>
+    </div>
+  </aside>
+</main>
+<div class="backdrop" id="backdrop" onclick="closeDrawer()"></div>
+<aside class="drawer" id="drawer" aria-hidden="true">
+  <div class="drawer-head">
+    <div><h3 id="drawer-title">任务详情</h3><div class="meta" id="drawer-sub"></div></div>
+    <button class="close" onclick="closeDrawer()">×</button>
+  </div>
+  <div class="drawer-tabs">
+    <button data-dtab="task" onclick="setDrawerTab('task')">任务</button>
+    <button data-dtab="intervene" onclick="setDrawerTab('intervene')">介入</button>
+  </div>
+  <div class="drawer-body" id="drawer-body"></div>
+</aside>
+<footer>颜色只表达警告/异常：红=阻塞/P0，橙=待评审/P1；其余状态用中性灰 + 单一蓝色进度。关系图按依赖深度分层，时间线独立展示执行情况。</footer>
+
+<script>
+const paths = ['install.sh','src/collab.ts','docs/msg.md','tests/collab.test.ts','kits/dia-msg'];
+const modules = ['collab','graph','claim','release','docs','review','persona','kit'];
+const statusList = ['todo','doing','review','blocked','done','accepted'];
+const tasks = [];
+for (let i=0;i<100;i++){
+  const prio = i<6?'P0':i<24?'P1':i<62?'P2':'P3';
+  const status = statusList[(i*7)%statusList.length];
+  const progress = status==='done'||status==='accepted'?100:status==='todo'?0:(i*13)%95;
+  const startD = -15 + ((i*7)%24);
+  const endD = Math.min(15, startD + 1 + ((i*3)%8));
+  const id = 't-'+String(i+1).padStart(3,'0');
+  const deps = i===0 ? [] : ['t-'+String(i-((i%5)+1)).padStart(3,'0')];
+  tasks.push({id, label:modules[i%modules.length]+' '+String(i+1).padStart(3,'0'), status, prio, progress, start:startD, end:endD, owner:i%3===0?null:(i%2?'ses_a':'ses_b'), deps});
+}
+const pad=n=>'t-'+String(n+1).padStart(3,'0');
+[[6,1],[7,2],[8,3],[24,7],[25,8],[62,25],[63,26]].forEach(([i,j])=>{ if(tasks[i]&&!tasks[i].deps.includes(pad(j))) tasks[i].deps.push(pad(j)); });
+const taskEdges = [];
+tasks.forEach(t=>t.deps.forEach(d=>taskEdges.push({from:t.id,to:d,kind:'depends_on'})));
+for(let i=0;i<20;i++) taskEdges.push({from:tasks[i*5].id,to:paths[i%paths.length],kind:'touches'});
+for(let i=0;i<12;i++) taskEdges.push({from:i%2?'ses_a':'ses_b',to:paths[i%paths.length],kind:'claims'});
+taskEdges.push({from:'t-001',to:'t-002',kind:'collaborates_with'});
+
+const state={view:'graph', layout:'priority', mode:'simple', range:'30d', zoom:28, window:7, q:'', focus:null, fd:2, from:null, to:null};
+const canvas=document.getElementById('canvas'), layer=document.getElementById('canvas-scroll'), rail=document.getElementById('lane-rail'), svg=document.getElementById('edges');
+const esc=s=>String(s??'').replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
+const stIcon={doing:'▶',blocked:'⏸',review:'◐',done:'✓',accepted:'✓',todo:'○'};
+
+function focusSet(id,depth){
+  const by=new Map(tasks.map(t=>[t.id,t]));
+  const max=depth==='all'?Infinity:Math.max(1,Number(depth)||2);
+  const out=new Set([id]); let frontier=[id];
+  for(let step=0; step<max && frontier.length; step++){
+    const next=[];
+    frontier.forEach(cur=>{
+      const t=by.get(cur); if(!t) return;
+      (t.deps||[]).forEach(x=>{ if(by.has(x)&&!out.has(x)){ out.add(x); next.push(x); } });
+      tasks.forEach(o=>{ if((o.deps||[]).includes(cur)&&!out.has(o.id)){ out.add(o.id); next.push(o.id); } });
+    });
+    frontier=next;
+  }
+  return out;
+}
+function visibleTasks(){
+  if(state.focus){ const keep=focusSet(state.focus,state.fd); return tasks.filter(t=>keep.has(t.id)); }
+  return tasks.filter(t=>state.window<=0 || t.start>=-state.window);
+}
+function searchMatches(){
+  const q=(state.q||'').trim().toLowerCase();
+  if(!q) return null;
+  return tasks.filter(t=>t.id.toLowerCase().includes(q)||t.label.toLowerCase().includes(q)||String(t.owner||'').toLowerCase().includes(q));
+}
+function syncStats(){
+  const list=visibleTasks(), st=id=>document.getElementById(id);
+  if(!st('stat-tasks')) return;
+  st('stat-tasks').textContent = list.length===tasks.length ? String(tasks.length) : list.length+' / '+tasks.length;
+  st('stat-blocked').textContent=String(list.filter(t=>t.status==='blocked').length);
+  st('stat-review').textContent=String(list.filter(t=>t.status==='review').length);
+  st('stat-done').textContent=String(list.filter(t=>t.status==='done'||t.status==='accepted').length);
+}
+function updateHint(){
+  const h=document.getElementById('hint'); if(!h||state.view!=='graph') return;
+  const n=visibleTasks().length;
+  if(state.focus){
+    h.textContent='显示 '+n+' 个任务 · '+(state.fd==='all'?'全链路':state.fd+' 层');
+    return;
+  }
+  h.textContent='显示 '+n+' / '+tasks.length+' 个任务 · '+(state.layout==='dep'?'从左到右 = 依赖深度':'按优先级分行（P0 最高）');
+}
+function depths(){
+  const list=visibleTasks();
+  const by=new Map(list.map(t=>[t.id,t])), memo=new Map();
+  const depth=t=>{
+    if(!t) return 0;
+    if(memo.has(t.id)) return memo.get(t.id);
+    memo.set(t.id,0);
+    const d=t.deps.length?Math.max(...t.deps.map(x=>{ const dt=by.get(x); return dt?depth(dt):-1; }))+1:0;
+    memo.set(t.id,d); return d;
+  };
+  list.forEach(depth); return memo;
+}
+function levels(){
+  return [...new Set(visibleTasks().map(t=>t.prio))].sort((a,b)=>{
+    const na=parseInt(String(a).replace(/^P/i,''),10), nb=parseInt(String(b).replace(/^P/i,''),10);
+    return (Number.isFinite(na)?na:99)-(Number.isFinite(nb)?nb:99)||String(a).localeCompare(String(b));
+  });
+}
+function rowsFor(){
+  const list=visibleTasks(), d=depths();
+  const gap=state.mode==='detail'?230:145;
+  const h=state.mode==='detail'?205:110;
+  return levels().map((prio,i)=>{
+    const rowTasks=list.filter(t=>t.prio===prio).sort((a,b)=>(d.get(a.id)-d.get(b.id))||a.label.localeCompare(b.label));
+    return {prio,y:36+i*gap,h,tasks:rowTasks};
+  }).filter(r=>r.tasks.length);
+}
+let cardMetrics={mid:52,h:58}, clickTimer=null;
+function measureCard(){
+  const probe=card(tasks[0],-9999,-9999);
+  probe.style.visibility='hidden';
+  layer.appendChild(probe);
+  const prog=probe.querySelector('.progress');
+  const mid=prog?prog.offsetTop+prog.offsetHeight/2+probe.clientTop:44;
+  const h=probe.offsetHeight||58;
+  probe.remove();
+  return {mid,h};
+}
+function bandCenter(r, bandH){ return r.y-12+bandH/2; }
+function cardTop(r){
+  const bandH=state.mode==='detail'?230:145;
+  const center=bandCenter(r,bandH);
+  // 详细：进度条中心线对齐泳道中心；简约：卡片盒整体垂直居中
+  return state.mode==='detail'?center-cardMetrics.mid:center-cardMetrics.h/2;
+}
+function edgeOffset(){ return state.mode==='detail'?cardMetrics.mid:cardMetrics.h/2; }
+function pos(){
+  const rows=rowsFor(), p=new Map();
+  rows.forEach(r=>r.tasks.forEach((t,i)=>p.set(t.id,{x:170+i*230,y:cardTop(r)})));
+  return {p,rows};
+}
+function card(t,x,y,showPrio=false){
+  const el=document.createElement('div'); el.className='node task '+t.status; el.style.left=x+'px'; el.style.top=y+'px';
+  const rel=taskEdges.filter(e=>e.from===t.id||e.to===t.id).map(e=>{
+    const outgoing=e.from===t.id, other=outgoing?e.to:e.from;
+    const kind=e.kind==='depends_on'?(outgoing?'depends_on':'depended_by'):e.kind;
+    return '<div class="meta" style="margin-top:2px">↳ '+esc(kind)+': '+esc(other)+'</div>';
+  }).slice(0,4).join('');
+  const badge=showPrio?'<span class="prio '+esc(t.prio.toLowerCase())+'">'+esc(t.prio)+'</span>':'';
+  el.innerHTML='<b>'+esc(t.label)+badge+'</b>'+
+    '<div class="meta">'+esc(t.id)+' · <span class="st '+esc(t.status)+'">'+stIcon[t.status]+' '+esc(t.status)+'</span> · '+t.progress+'%</div>'+
+    '<div class="progress"><i class="'+esc(t.status)+'" style="width:'+t.progress+'%"></i></div>'+
+    (state.mode==='detail'?'<div class="meta" style="margin-top:5px">'+(t.owner?'@'+esc(t.owner):'unassigned')+' · dep '+t.deps.length+'</div>'+rel:'');
+  el.dataset.id=t.id;
+  el.onclick=()=>{ clearTimeout(clickTimer); clickTimer=setTimeout(()=>openDrawer(t.id,'task'),180); };
+  el.ondblclick=e=>{ e.preventDefault(); clearTimeout(clickTimer); focusOn(t.id); };
+  return el;
+}
+function edgePath(a,b){
+  const o=edgeOffset(), x1=a.x+190,y1=a.y+o,x2=b.x,y2=b.y+o;
+  if(x2>=x1) return `M${x1} ${y1} H${x1+Math.max(24,(x2-x1)/2)} V${y2} H${x2}`;
+  return `M${x1} ${y1} H${x1-30} V${y2} H${x2}`;
+}
+function drawGraph(){
+  canvas.classList.toggle('simple', state.mode==='simple');
+  if(state.layout==='dep'){ drawDepGraph(); return; }
+  cardMetrics=measureCard();
+  const {p,rows}=pos();
+  [...layer.querySelectorAll('.node,.pgroup')].forEach(e=>e.remove());
+  rail.style.display=''; rail.querySelectorAll('.plane-label').forEach(e=>e.remove());
+  const maxX=Math.max(600, ...rows.map(r=>170+(r.tasks.length-1)*230+190+10));
+  const maxY=rows.length?Math.max(...rows.map(r=>r.y+r.h))+40:600;
+  const bandH=state.mode==='detail'?230:145;
+  rows.forEach((r,i)=>{
+    const g=document.createElement('div'); g.className='pgroup '+r.prio.toLowerCase();
+    g.style.top=(r.y-12)+'px'; g.style.width=maxX+'px'; g.style.height=bandH+'px';
+    const alpha=Math.max(0.02, 0.075-i*0.012);
+    g.style.background='color-mix(in srgb, var(--blue) '+Math.round(alpha*100)+'%, transparent)';
+    layer.appendChild(g);
+    const label=document.createElement('div'); label.className='plane-label '+r.prio.toLowerCase();
+    label.dataset.y=String(r.y-12+bandH/2); label.style.top=(r.y-12+bandH/2-layer.scrollTop)+'px';
+    label.style.color=i===0?'var(--red)':i===1?'var(--amber)':'var(--muted)';
+    label.innerHTML=esc(r.prio)+' · '+r.tasks.length+(i===0?'<small>紧急</small>':i===1?'<small>高</small>':'<small>常规</small>');
+    rail.appendChild(label);
+    r.tasks.forEach((t,j)=>layer.appendChild(card(t,170+j*230,cardTop(r))));
+  });
+  svg.setAttribute('width',maxX); svg.setAttribute('height',maxY);
+  const defs=`<defs>
+    <marker id="ar-dep" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0,0 L7,3.5 L0,7" fill="#2563eb"/></marker>
+    <marker id="ar-collab" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0,0 L7,3.5 L0,7" fill="#64748b"/></marker>
+  </defs>`;
+  const lines=taskEdges.filter(e=>e.kind==='depends_on'||e.kind==='collaborates_with').map(e=>{
+    const a=p.get(e.from), b=p.get(e.to); if(!a||!b) return '';
+    const style=e.kind==='collaborates_with'
+      ? 'stroke="#64748b" stroke-dasharray="1 3" marker-start="url(#ar-collab)" marker-end="url(#ar-collab)"'
+      : 'stroke="#2563eb" marker-end="url(#ar-dep)"';
+    return `<path d="${edgePath(a,b)}" fill="none" stroke-width="1.6" ${style}/>`;
+  }).join('');
+  svg.innerHTML=defs+lines;
+  document.getElementById('updated').textContent='updated '+new Date().toLocaleTimeString();
+  syncStats(); updateHint(); applySearch();
+}
+let drawerTask=null, drawerTab='task', ivChannel='tui';
+function relations(t){
+  return taskEdges.filter(e=>e.from===t.id||e.to===t.id).map(e=>{
+    const outgoing=e.from===t.id, other=outgoing?e.to:e.from;
+    const kind=e.kind==='depends_on'?(outgoing?'depends_on':'depended_by'):e.kind;
+    return '<div class="item"><span class="k">'+esc(kind)+'</span><span>'+esc(other)+'</span></div>';
+  }).join('') || '<p class="k">无边</p>';
+}
+function taskHtml(t){
+  return '<div class="kv"><div class="k">status</div><div>'+esc(t.status)+'</div>'+
+    '<div class="k">priority</div><div>'+esc(t.prio)+'</div>'+
+    '<div class="k">owner</div><div>'+esc(t.owner||'-')+'</div>'+
+    '<div class="k">progress</div><div>'+t.progress+'%</div>'+
+    '<div class="k">deps</div><div>'+esc(t.deps.join(', ')||'-')+'</div></div>'+
+    '<h4>关联</h4><div class="rel-list">'+relations(t)+'</div>';
+}
+function targets(ch){
+  if(ch==='dingtalk') return [['group','乐语助人前端组 · 群聊'],['dm','与 session-a 私聊']];
+  if(ch==='msg') return [['ses_a','session-a'],['ses_b','session-b']];
+  return [['ses_a','session-a · opencode TUI (online)'],['ses_b','session-b · dsh TUI (online)']];
+}
+function interveneHtml(t){
+  const chs=[['tui','TUI 会话'],['dingtalk','钉钉消息链'],['msg','dia msg']];
+  const opts=targets(ivChannel).map(([v,l])=>'<option value="'+v+'">'+esc(l)+'</option>').join('');
+  return '<div class="iv-seg">'+chs.map(([v,l])=>'<button class="'+(ivChannel===v?'on':'')+'" onclick="setChannel(\''+v+'\')">'+l+'</button>').join('')+'</div>'+
+    '<div class="iv-row"><label>目标会话 / 消息链</label><select id="iv-target">'+opts+'</select></div>'+
+    '<div class="iv-row"><label>介入消息</label><textarea id="iv-text" placeholder="例如：这个任务卡在什么点？需要我做什么？"></textarea></div>'+
+    '<div><button class="btn primary" onclick="sendIntervention()">发送介入</button><span class="iv-status" id="iv-status"></span></div>'+
+    '<p class="k" style="margin-top:12px">设计稿：发送仅演示。真实接入分别走 TUI 注入 / 钉钉消息链 / dia msg；同一任务可切换通道。</p>';
+}
+function openDrawer(id, tab){
+  drawerTask=tasks.find(t=>t.id===id); if(!drawerTask) return;
+  drawerTab=tab||'task';
+  document.getElementById('drawer-title').textContent='任务详情';
+  document.getElementById('drawer-sub').textContent=drawerTask.label+' · '+drawerTask.id+' · '+drawerTask.prio+' · '+drawerTask.status;
+  document.getElementById('drawer').classList.add('show');
+  document.getElementById('drawer').setAttribute('aria-hidden','false');
+  document.getElementById('backdrop').classList.add('show');
+  setDrawerTab(drawerTab);
+}
+function setDrawerTab(tab){
+  drawerTab=tab;
+  document.querySelectorAll('[data-dtab]').forEach(b=>b.classList.toggle('on',b.dataset.dtab===tab));
+  const body=document.getElementById('drawer-body');
+  body.innerHTML=tab==='intervene'?interveneHtml(drawerTask):taskHtml(drawerTask);
+}
+function setChannel(ch){ ivChannel=ch; setDrawerTab('intervene'); }
+function sendIntervention(){
+  const text=(document.getElementById('iv-text')||{}).value||'';
+  if(!text.trim()){ document.getElementById('iv-status').textContent='请先输入内容'; return; }
+  document.getElementById('iv-status').textContent='已排队（设计稿）';
+}
+function closeDrawer(){
+  document.getElementById('drawer').classList.remove('show');
+  document.getElementById('drawer').setAttribute('aria-hidden','true');
+  document.getElementById('backdrop').classList.remove('show');
+}
+function dayDate(d){
+  const base=new Date('2026-11-06T00:00:00');
+  const dt=new Date(base.getTime()+d*86400000);
+  return ('0'+(dt.getMonth()+1)).slice(-2)+'-'+('0'+dt.getDate()).slice(-2);
+}
+function isoDate(d){ const base=new Date('2026-11-06T00:00:00'); const dt=new Date(base.getTime()+d*86400000); return dt.toISOString().slice(0,10); }
+function timelineWindow(){
+  if(state.from!==null&&state.to!==null) return {from:state.from,to:state.to};
+  const list=visibleTasks();
+  const w=state.window>0?state.window:14;
+  const from=-w;
+  const maxEnd=list.length?Math.max(...list.map(t=>t.end)):w;
+  return {from,to:Math.max(0,maxEnd)+1};
+}
+function drawTimeline(){
+  const win=timelineWindow(), span=Math.max(1,win.to-win.from);
+  const x=v=>((v-win.from)/span)*100;
+  const chartW=Math.max(640, span*state.zoom);
+  document.getElementById('view-time').style.setProperty('--tlw', chartW+'px');
+  const axis=document.getElementById('tl-axis'); axis.innerHTML='';
+  const step=span<=10?1:span<=18?2:3;
+  for(let d=win.from;d<=win.to;d+=step){
+    const el=document.createElement('span'); el.style.left=x(d)+'%';
+    el.innerHTML=dayDate(d)+'<small>'+(d===0?'今天':(d>0?'+'+d+'d':d+'d'))+'</small>';
+    if(d===win.from) el.style.transform='translateX(0)'; else if(d+step>win.to) el.style.transform='translateX(-100%)';
+    if(d===0)el.style.color='var(--red)'; axis.appendChild(el);
+  }
+  const body=document.getElementById('tl-body'); body.innerHTML=''; const labelsBody=document.getElementById('tl-labels-body'); labelsBody.innerHTML=''; const critical=new Set(['t-1','t-2','t-3']);
+  visibleTasks().slice().sort((a,b)=>a.start-b.start).forEach(t=>{
+    const row=document.createElement('div'); row.className='tl-row';
+    row.innerHTML='<div class="tl-track"></div>';
+    const label=document.createElement('div'); label.className='tl-label-row'; label.innerHTML='<b>'+esc(t.label)+'</b><span>'+esc(t.id)+' · '+esc(t.prio)+' · '+esc(t.status)+'</span>'; labelsBody.appendChild(label);
+    const track=row.querySelector('.tl-track');
+    const bar=document.createElement('div'); bar.className='tl-bar '+t.status+(critical.has(t.id)?' critical':'');
+    bar.style.left=x(t.start)+'%'; bar.style.width=Math.max(1.5,x(t.end)-x(t.start))+'%';
+    bar.title=dayDate(t.start)+' → '+dayDate(t.end)+' ('+t.progress+'%)';
+    bar.innerHTML='<div class="fill" style="width:'+t.progress+'%"></div>'; bar.onclick=()=>openDrawer(t.id,'task'); track.appendChild(bar);
+    if(win.from<=0&&win.to>=0){ const line=document.createElement('div'); line.className='tl-today'; line.style.left=x(0)+'%'; line.style.top='0'; line.style.bottom='0'; line.textContent=''; track.appendChild(line); }
+    body.appendChild(row);
+  });
+  syncStats();
+}
+function drawDepGraph(){
+  cardMetrics=measureCard();
+  const list=visibleTasks(), d=depths(), groups=new Map();
+  list.forEach(t=>{ const k=d.get(t.id)||0; groups.set(k,[...(groups.get(k)||[]),t]); });
+  const p=new Map(); const rows=[];
+  const gap=14;
+  [...groups.keys()].sort((a,b)=>a-b).forEach((depth,ci)=>{
+    const all=groups.get(depth).sort((a,b)=>a.prio.localeCompare(b.prio)||a.label.localeCompare(b.label));
+    rows.push({depth,all,x:30+ci*230});
+  });
+  [...layer.querySelectorAll('.node,.pgroup')].forEach(e=>e.remove());
+  rail.innerHTML=''; rail.style.display='none';
+  let maxY=0;
+  // 先渲染卡片，再按实测高度逐列堆叠，避免详细模式卡片相互重叠
+  rows.forEach(r=>{
+    let y=60;
+    r.all.forEach(t=>{
+      const el=card(t,r.x,y,true);
+      el.style.top=y+'px';
+      layer.appendChild(el);
+      p.set(t.id,{x:r.x,y});
+      y+=el.offsetHeight+gap;
+    });
+    maxY=Math.max(maxY,y);
+  });
+  maxY=Math.max(600,maxY);
+  const maxX=Math.max(600,...rows.map(r=>r.x+200+10));
+  svg.setAttribute('width',maxX); svg.setAttribute('height',maxY+40);
+  const defs=`<defs>
+    <marker id="ar-dep" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0,0 L7,3.5 L0,7" fill="#2563eb"/></marker>
+    <marker id="ar-collab" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0,0 L7,3.5 L0,7" fill="#64748b"/></marker>
+  </defs>`;
+  const lines=taskEdges.filter(e=>e.kind==='depends_on'||e.kind==='collaborates_with').map(e=>{
+    const a=p.get(e.from), b=p.get(e.to); if(!a||!b) return '';
+    const style=e.kind==='collaborates_with'?'stroke="#64748b" stroke-dasharray="1 3" marker-start="url(#ar-collab)" marker-end="url(#ar-collab)"':'stroke="#2563eb" marker-end="url(#ar-dep)"';
+    return `<path d="${edgePath(a,b)}" fill="none" stroke-width="1.6" ${style}/>`;
+  }).join('');
+  svg.innerHTML=defs+lines;
+  document.getElementById('updated').textContent='updated '+new Date().toLocaleTimeString();
+  syncStats(); updateHint(); applySearch();
+}
+function syncLaneLabels(){
+  rail.querySelectorAll('.plane-label').forEach(el=>{
+    el.style.top=(Number(el.dataset.y||0)-layer.scrollTop)+'px';
+  });
+}
+function applySearch(){
+  const ms=searchMatches();
+  layer.querySelectorAll('.node.task').forEach(el=>{
+    el.classList.remove('hit','dim');
+    if(!ms) return;
+    if(ms.some(t=>t.id===el.dataset.id)) el.classList.add('hit'); else el.classList.add('dim');
+  });
+  const box=document.getElementById('q-list');
+  if(box && box.classList.contains('open')) renderSearchList(ms);
+}
+function renderSearchList(ms){
+  const box=document.getElementById('q-list'); if(!box) return;
+  const q=(state.q||'').trim();
+  const browse=!q;
+  const pool=browse?visibleTasks().slice().sort((a,b)=>a.prio.localeCompare(b.prio)||a.start-b.start):ms;
+  if(!pool||!pool.length){
+    box.innerHTML='<div class="q-empty">'+(browse?'当前时间窗内没有任务':'没有匹配的任务')+'</div>';
+    box.classList.add('open'); return;
+  }
+  const head=browse?('<div class="q-head">可见 '+pool.length+' 个 · ↑↓ 选择，Enter 聚焦</div>')
+                   :('<div class="q-head">匹配 '+pool.length+' 个 · ↑↓ 选择，Enter 聚焦</div>');
+  box.innerHTML=head+pool.slice(0,20).map(t=>'<div class="q-item" data-id="'+esc(t.id)+'"><span>'+esc(t.label)+'<i class="q-prio">'+esc(t.prio)+'</i></span><span class="k">'+esc(t.id)+'</span></div>').join('');
+  box.classList.add('open');
+  box.querySelectorAll('.q-item').forEach(el=>el.onclick=()=>focusOn(el.dataset.id));
+}
+function searchListItems(){
+  const box=document.getElementById('q-list');
+  return box?[...box.querySelectorAll('.q-item')]:[];
+}
+function moveSearchCursor(delta){
+  let items=searchListItems();
+  if(!items.length){ renderSearchList(searchMatches()); items=searchListItems(); if(!items.length) return; }
+  let idx=items.findIndex(el=>el.classList.contains('active'));
+  idx=idx<0?0:(idx+delta+items.length)%items.length;
+  items.forEach((el,i)=>el.classList.toggle('active',i===idx));
+  items[idx].scrollIntoView({block:'nearest'});
+}
+function focusOn(id){
+  state.focus=id; state.fd=state.fd||2; state.q='';
+  const qi=document.getElementById('q'); if(qi) qi.value='';
+  go(state.view,state.mode,state.range,state.zoom);
+}
+function readRoute(){
+  const raw=location.hash.replace(/^#\/?/,''); const [path,qs]=raw.split('?');
+  const params=new URLSearchParams(qs||location.search);
+  const range=(params.get('range')||'30d');
+  const zoom=Math.min(84,Math.max(14,parseInt(params.get('zoom')||'28',10)||28));
+  const sx=Number(params.get('sx')||0);
+  const fromRaw=params.get('from'), toRaw=params.get('to');
+  const toOff=v=>v?Math.round((new Date(v+'T00:00:00').getTime()-new Date('2026-11-06T00:00:00').getTime())/86400000):null;
+  const winRaw=params.get('w');
+  const rangeRaw=params.get('range');
+  const win=winRaw!==null?Math.max(0,parseInt(winRaw,10)||0):(rangeRaw?Math.max(0,parseInt(rangeRaw,10)||0):7);
+  const fdRaw=params.get('fd');
+  const fd=fdRaw==='all'?'all':Math.min(9,Math.max(1,parseInt(fdRaw||'2',10)||2));
+  return {view:(path==='timeline'||params.get('view')==='timeline')?'time':'graph', layout:params.get('layout')==='dep'?'dep':'priority', mode:params.get('mode')==='detail'?'detail':'simple', range, zoom, sx, window:win, q:params.get('q')||'', focus:params.get('focus')||null, fd, from:toOff(fromRaw), to:toOff(toRaw), task:params.get('task'), tab:params.get('tab')==='intervene'?'intervene':'task'};
+}
+function routeString(view,mode,range,zoom,from,to){
+  const p=view==='time'?'timeline':'graph'; const qs=new URLSearchParams();
+  if(view==='graph'&&mode==='detail') qs.set('mode','detail');
+  if(view==='graph'&&state.layout==='dep') qs.set('layout','dep');
+  if(view==='graph'){
+    if(state.window!==7) qs.set('w',String(state.window));
+    if(state.q&&state.q.trim()) qs.set('q',state.q.trim());
+    if(state.focus){ qs.set('focus',state.focus); if(state.fd!==2) qs.set('fd',String(state.fd)); }
+  }
+  if(view==='time'){
+    if(from!==null&&to!==null){ qs.set('from',isoDate(from)); qs.set('to',isoDate(to)); }
+    if(state.window!==7) qs.set('w',String(state.window));
+    if(zoom&&zoom!==28) qs.set('zoom',String(zoom));
+  }
+  return '#/'+p+(qs.toString()?'?'+qs.toString():'');
+}
+function applyRoute(){
+  const r=readRoute(); state.view=r.view; state.layout=r.layout; state.mode=r.mode; state.range=r.range; state.zoom=r.zoom; state.sx=r.sx||0; state.window=r.window; state.q=r.q; state.focus=r.focus; state.fd=r.fd; state.from=r.from; state.to=r.to;
+  document.querySelectorAll('#tabs button').forEach(x=>x.classList.toggle('on',x.dataset.v===r.view));
+  document.querySelectorAll('#mode button').forEach(x=>x.classList.toggle('on',x.dataset.m===r.mode));
+  document.querySelectorAll('#layout button').forEach(x=>x.classList.toggle('on',x.dataset.l===r.layout));
+  document.getElementById('view-graph').style.display=r.view==='graph'?'':'none';
+  document.getElementById('view-time').style.display=r.view==='time'?'':'none';
+  document.getElementById('graph-tools').style.display=r.view==='graph'?'flex':'none';
+  document.getElementById('time-tools').style.display=r.view==='time'?'flex':'none';
+  const zbtn=document.querySelector('#zoom button[data-z="reset"]'); if(zbtn) zbtn.textContent=Math.round(r.zoom/28*100)+'%';
+  const dec=document.querySelector('#zoom button[data-z="-"]'), inc=document.querySelector('#zoom button[data-z="+"]'); if(dec) dec.disabled=r.zoom<=14; if(inc) inc.disabled=r.zoom>=84;
+  if(r.view!=='graph') document.getElementById('hint').textContent='时间线：左右滚动查看；－/＋缩放；橙框 = 关键路径';
+  const winSel=document.getElementById('win'); if(winSel) winSel.value=String(r.window);
+  const qIn=document.getElementById('q'); if(qIn && qIn.value!==r.q) qIn.value=r.q;
+  const chip=document.getElementById('focus-chip');
+  if(chip){ chip.classList.toggle('on',!!r.focus); if(r.focus) document.getElementById('focus-text').textContent='聚焦 '+r.focus+' ·'; }
+  const fdEl=document.getElementById('focus-fd'); if(fdEl) fdEl.value=String(r.fd);
+  const rp=document.getElementById('route'); if(rp) rp.textContent=location.hash||routeString(r.view,r.mode,r.range,state.zoom,state.from,state.to);
+  document.title='dia graph · '+(r.view==='time'?'时间线':'关系图');
+  if(r.view==='time'){ drawTimeline(); const sc=document.getElementById('tl-scroll'), lb=document.getElementById('tl-labels-body'); sc.scrollTop=0; lb.style.transform='translateY(0px)'; if(state.sx) sc.scrollLeft=state.sx; } else drawGraph();
+  if(r.task) openDrawer(r.task,r.tab);
+  syncLaneLabels();
+}
+function go(view,mode,range,zoom){ const h=routeString(view,mode,range||state.range,zoom||state.zoom,state.from,state.to); if(location.hash===h) applyRoute(); else location.hash=h; }
+document.querySelectorAll('#tabs button').forEach(b=>b.onclick=()=>go(b.dataset.v==='time'?'time':'graph',state.mode,state.range));
+document.querySelectorAll('#layout button').forEach(b=>b.onclick=()=>{state.layout=b.dataset.l;go(state.view,state.mode,state.range,state.zoom);});
+const winSelEl=document.getElementById('win');
+if(winSelEl) winSelEl.onchange=()=>{ state.window=Number(winSelEl.value); go(state.view,state.mode,state.range,state.zoom); };
+const qInput=document.getElementById('q');
+if(qInput){
+  qInput.oninput=()=>{ state.q=qInput.value; applySearch(); renderSearchList(searchMatches()); };
+  qInput.onkeydown=e=>{
+    if(e.key==='ArrowDown'){ e.preventDefault(); moveSearchCursor(1); }
+    else if(e.key==='ArrowUp'){ e.preventDefault(); moveSearchCursor(-1); }
+    else if(e.key==='Enter'){
+      const items=searchListItems();
+      const active=items.find(el=>el.classList.contains('active'))||items[0];
+      if(active) focusOn(active.dataset.id);
+    } else if(e.key==='Escape'){ state.q=''; qInput.value=''; applySearch(); qInput.blur(); }
+  };
+  qInput.onfocus=()=>{ renderSearchList(searchMatches()); };
+  qInput.onclick=()=>{ renderSearchList(searchMatches()); };
+  qInput.onblur=()=>{ setTimeout(()=>{ const box=document.getElementById('q-list'); if(box) box.classList.remove('open'); },160); };
+}
+const fdSel=document.getElementById('focus-fd');
+if(fdSel) fdSel.onchange=()=>{ state.fd=fdSel.value==='all'?'all':Number(fdSel.value); go(state.view,state.mode,state.range,state.zoom); };
+const fxBtn=document.getElementById('focus-exit');
+if(fxBtn) fxBtn.onclick=()=>{ state.focus=null; go(state.view,state.mode,state.range,state.zoom); };
+document.querySelectorAll('#mode button').forEach(b=>b.onclick=()=>go(state.view,b.dataset.m,state.range,state.zoom));
+document.querySelectorAll('#zoom button').forEach(b=>b.onclick=()=>{ const z=b.dataset.z==='+'?Math.min(84,state.zoom+8):b.dataset.z==='-'?Math.max(14,state.zoom-8):28; go('time',state.mode,state.range,z); });
+layer.addEventListener('scroll',syncLaneLabels,{passive:true});
+const tlScroller=document.getElementById('tl-scroll');
+tlScroller.addEventListener('scroll',()=>{ const lb=document.getElementById('tl-labels-body'); if(lb) lb.style.transform='translateY(-'+tlScroller.scrollTop+'px)'; },{passive:true});
+document.querySelectorAll('.attention .row[data-task]').forEach(r=>r.onclick=()=>openDrawer(r.dataset.task,'intervene'));
+window.addEventListener('hashchange',applyRoute);
+applyRoute();
+if(document.fonts&&document.fonts.ready){ document.fonts.ready.then(()=>{ if(state.view==='graph'){ if(state.layout==='dep') drawDepGraph(); else drawGraph(); } }); }
+</script>
+</body>
+</html>

package/docs/design/graph-web.md

@@ -0,0 +1,160 @@
+# dia graph Web 视觉设计稿（v0.3）
+
+> 静态 mockup：[`graph-web-mockup.html`](graph-web-mockup.html)（浏览器直接打开，无网络/无依赖）
+> 数据契约：`dia graph --json`（schema 1）；时间线所需 start/end 为后续扩展字段。
+
+## 1. 两个视图
+
+顶部 tab：
+
+- **关系图**：回答“谁依赖谁、先后顺序、优先级”；
+- **时间线**：独立甘特图，回答“什么时候做、做到哪、是否延期”。
+
+### 关系图：按依赖深度分层，不按状态分列
+
+- 纵轴 = 优先级，**P0 最高、P1 中间、P2 最下**；每个优先级是一条**通栏泳道色带**，泳道之间用虚线分隔，不再用闭合方框；
+- P0/P1/P2 标签固定在左侧泳道栏、垂直居中；**横向滚动时标签吸住左边缘**（JS 同步 scrollLeft），泳道底色按级别计算（P0 最深，向下递减），可自然扩展 P3/P4；
+- 组内从左到右 = 依赖顺序（按依赖深度排序）；
+- **状态不占布局**：用内联图标/文本 + 进度条表达；
+- `简约`：只显示 task + `depends_on`；
+- `详细`：展开 owner、session、path、touches、claims，并在卡片里列具体关联（`depends_on / depended_by / touches / claims / collaborates_with`）。
+- 图例固定在画布右下角：只显示当前模式会用到的边；`→` 单向、`↔` 双向，线型与图上一致。
+
+### 时间线：独立甘特
+
+- 每行一个 task，横轴为相对今天的天数（`-8d … today … +4d`）；
+- 条长 = start/end，内部填充 = progress；
+- 颜色 = status；橙色描边 = 关键路径；红色虚线 = 今天；
+- 点击条/行可看任务详情。
+
+## 2. 边语义
+
+| 关系 | 方向 | 线型 | 颜色 |
+|---|---|---|---|
+| `depends_on` | 单向 `→` | 实线 | 蓝 |
+| `touches` | 单向 `→` | 虚线 `6 4` | 紫 |
+| `claims` | 单向 `→` | 点线 `2 3` | 青 |
+| `collaborates_with` | 双向 `↔` | 点线 `1 3` + 双箭头 | 灰（视觉示例，未进 M1 契约） |
+
+## 3. 为什么不再按状态列/行
+
+状态列会把“关系”切碎，且 TODO/DONE、REVIEW/BLOCKED 混在一列没有语义。现在：
+
+- 依赖顺序是主结构（拓扑层）；
+- 状态是属性（颜色/进度）；
+- 优先级是行分组（P0/P1/P2 各一行，最高在最上，虚线框圈组）；
+- 时间放在独立时间线，不挤在关系图里。
+
+## 4. 与数据契约的映射
+
+| UI | 数据 |
+|---|---|
+| task 卡片 | `nodes[kind=task]` + status/owner |
+| 依赖边 | `edges[kind=depends_on]` |
+| touches / claims | `edges` 对应 kind |
+| 进度 | 后续 `task.progress`（0-100） |
+| 时间线 | 后续 `task.start/end`（相对/ISO） |
+| 关键路径 | 后续由依赖图最长路径计算 |
+
+## 5. 实现约束
+
+`tests/static.test.ts` 禁止框架 import `node:http` / `fetch` / 网络模块。因此：
+
+1. 本稿是静态 HTML，不进入 `src/`；
+2. 真实实现优先 `dia graph --export-html` 生成静态文件；
+3. live Web 需独立可选包 + 单独评审（loopback only）。
+
+## 6. 后续
+
+- 先确认“依赖深度分层 + 简约/详细 + 时间线”结构；
+- 确认后做 `--export-html`（零网络），再评估 live 轮询。
+
+## 7. URL 路由
+
+静态稿支持 hash 路由（`file://` 直接可用）：
+
+```
+#/graph
+#/graph?mode=simple
+#/graph?mode=detail
+#/timeline
+```
+
+- `view` 也可用 query 形式：`?view=timeline&mode=detail`；
+- 切换 tab / 简约详细会同步更新 hash，便于分享/回链；
+- 真正的独立 path（`/graph`、`/timeline`）需要部署层 rewrite 到同一 HTML，或导出时生成
+  `graph.html` / `timeline.html`；静态文件本身不能凭空提供两个 path。
+
+## 8. 颜色语义（v0.4）
+
+原则：**颜色只表达警告/异常，正常状态去色**。
+
+| 颜色 | 用途 | 不再用于 |
+|---|---|---|
+| 红 | blocked、P0、异常/失败 | 普通任务状态 |
+| 橙 | review、claim 提醒、P1 | 完成态 |
+| 蓝 | 只有“进行中”的进度条 | done/accepted/todo |
+| 灰 | todo / done / accepted / P2 / 中性文本 | 警告/异常 |
+
+- 优先级：P0 红实心；P1 橙描边；P2 灰描边（不抢眼）；
+- 状态文本：只有 blocked / review 带颜色，其余中性；
+- 进度条：doing 蓝色条纹动画；blocked 红色暂停/置灰；review 橙色；done/accepted 灰色静态；
+- 时间线同一套语义；关键路径只用橙色描边。
+
+## 9. 任务抽屉与介入（v0.5）
+
+关系图里的卡片**全部是 task**，不再叫“节点详情”。
+
+- 点击 task 卡片 → 右侧抽屉「任务详情」，两个 tab：
+  - **任务**：status / priority / owner / progress / deps / 关联；
+  - **介入**：通道切换 + 目标会话 + 输入框 + 发送（设计稿只演示）。
+- 「需要人」每行带快速操作：
+  - 阻塞 → `介入` / `查看`
+  - claim → `联系持有者`
+  - 待评审 → `开始评审`
+- 介入通道明确区分：
+  1. **TUI 会话**：选择 opencode / dsh 会话，输入后注入；
+  2. **钉钉消息链**：选择群聊/私聊，输入后走钉钉；
+  3. **dia msg**：选择 session id，走 dia 消息邮箱。
+- 同一任务可以在抽屉里切换通道，方便“会话里没人就发钉钉 / 需要留痕就 dia msg”。
+- 深链：`#/graph?task=t-4&tab=intervene` 可直接打开任务抽屉。
+
+## 10. 规模样例（100 tasks / 30 天）
+
+mockup 数据改为 **100 个任务、时间跨度 30 天**，用来验证真实规模下的布局：
+
+- 关系图有两种布局：**优先级视图**（P0/P1/P2/P3 泳道）和**依赖视图**（按依赖深度从左到右）；
+  两种视图**都不折叠任务**（没有 `+N 个` 聚合，任何卡片都能点开），靠时间窗 + 搜索 + 聚焦控制规模；
+- mock 数据补齐跨优先级依赖，确保两种视图都能看到跨层关系；依赖边只连接当前可见任务；
+- 卡片垂直基准分两种模式：**详细** = 进度条中心线（关系虚线/箭头也锚在进度条中心，同一行连线与进度条同高）；
+  **简约** = 卡片盒整体垂直居中（连线锚在卡片盒中心）；两种模式都和泳道中心线/左侧级别标签对齐；
+- 卡片偏移量按实际渲染测量（含字体加载后重排），不写死魔法数；泳道顶部/右侧空白按实际内容收紧。
+- 时间线：按当前时间窗过滤后纵向滚动；轴显示绝对日期（`MM-DD`）并保留相对天数
+  （`-7d / 今天 / +Nd`）。
+- 泳道标签在**外层固定 rail**，不参与横向滚动；只随纵向 `scrollTop` 同步位置；
+- 泳道标签为全宽色带 + 虚线分隔，P0/P1/P2/P3 由数据动态生成。
+- 依赖视图按实测卡片高度逐列堆叠，`详细` 模式下卡片不会互相重叠；依赖视图没有泳道，左侧不留级别标签遮罩/占位；
+- 关系视图参数：`#/graph?layout=dep`（依赖视图）/ 默认优先级视图；
+- 时间窗参数（两个视图共用）：`#/graph?w=7|14|30|0`（0 = 全部）；时间线 `#/timeline?w=7`；
+  显式区间：`#/timeline?from=2026-10-22&to=2026-11-21`。
+
+## 10.1 规模控制：时间窗 + 搜索 + 聚焦
+
+无折叠后，用三种手段控制一次看多少：
+
+- **时间窗（默认近 7 天，按开始时间，结束时间不限）**：只显示 `start >= 今天 - N` 的任务，
+  长任务即使结束在很久以后也照常显示；时间线轴自动从 `-N` 延伸到最晚的 `end`；
+- **搜索**：聚焦输入框就出下拉（空时列出当前可见任务，按优先级/开始时间排序），输入 ID / 名称 / owner 实时过滤；
+  `↑↓` 选择、`Enter` 聚焦、`Esc` 清空；命中卡片高亮描边、其余置灰，下拉项点击也可聚焦；
+- **聚焦（类 nx graph focus）**：双击卡片或点搜索结果 → 只保留该任务的依赖邻域，
+  芯片可切 `1 层 / 2 层 / 全链路`，「退出」回全量；聚焦状态写进 URL（`focus=t-003&fd=2`）；
+- 被过滤掉的任务不计入概览统计，标题显示 `显示 N / 总数`。
+
+## 11. 时间线滚动与缩放
+
+- 左侧任务列是**独立固定 pane**（不依赖 sticky），横向滚动时始终可见；任务名顶部对齐；
+- 时间区右上角显示「← 左右滚动 →」提示，避免看不出可滚动；
+- 右侧时间轴在 `tl-scroll` 内横向滚动，表头与内容同步；
+- `zoom` = 每天像素宽度（默认 28，范围 **14–84**，即 50%–300%），控制条 `－ / 100% / ＋`，到边界禁用；
+- URL：`#/timeline?w=7&zoom=40`；
+- 任务纵向滚动，时间窗默认近 7 天开始（结束不限），绝对日期 + 相对天数同时显示。

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.3）](design/graph-web.md) | 静态 mockup：graph-web-mockup.html（浏览器直接打开，无网络/无依赖） |
+

package/docs/status.md

@@ -90,6 +90,7 @@
 | D0.21 | worktree 抽取 `packages/wt` | **完成** | 7 处 python→node；`dia wt`；4 套测试原样迁移全绿 |
 | D0.23 | doctor 平台版本自检 | **完成** | `platform:opencode` / `platform:dsh` 报版本（缺宿主 = warn，不判红）；`tests/active-doctor.test.ts` |
 | D0.44 | 配置迁移走 LLM 任务 | **完成** | `docs/migrations/llm-migration.md`：升级只改声明；迁移=任务+判据+回滚；禁止代码里堆版本分支（安全敏感/原子场景例外） |
+| D0.64 | 复制过滤按相对路径判断 | **完成** | 绝对路径匹配 `node_modules` 会误伤 npm 全局安装（kit 整树被过滤 → `E_KIT_EMPTY`）；改 `copyFilter(base)` 用相对路径，persona/kit 共用 |
 | D0.63 | 运行时数据 `.data/` 不进快照、不参与哈希 | **完成** | `TREE_SKIP`（kit/persona 共用）：安装复制与 `hashTree`/verify 都跳过 `.data`，防运行时写入造成 verify 假漂移 |
 | D0.62 | persona 旧版技能软链视为受管 | **完成** | `linkManaged` 同时认 `~/.dia/kits/**` 与 `~/.dia/personas/**`；`persona update` 升级不再需要 `--force` |
 | D0.61 | kit 空内容拒绝 + doctor 只查引用 kit | **完成** | `kit add` 拒绝空清单/空树（E_MANIFEST/E_KIT_EMPTY）；doctor 按 persona lock 的 kits 校验，孤儿不再拖红 |

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.15",
   "type": "module",
   "description": "dia (嗲) — lightweight agent framework: knowledge index, audit, session ingest",
   "bin": {