();
+ for (let col = 0; col <= maxLayer; col++) {
+ const ids = byLayer.get(col) ?? [];
+ const colH = ids.length * NH + Math.max(0, ids.length - 1) * RGAP;
+ const startY = (totalH - colH) / 2;
+ ids.forEach((id, i) => pos.set(id, { x: PAD + col * (NW + CGAP), y: startY + i * (NH + RGAP) }));
+ }
+
+ const edges = slices.flatMap(sl => sl.depends.flatMap(dep => {
+ if (!pos.has(dep) || !pos.has(sl.id)) return [];
+ const f = pos.get(dep)!, t = pos.get(sl.id)!;
+ const x1 = f.x + NW, y1 = f.y + NH / 2;
+ const x2 = t.x, y2 = t.y + NH / 2;
+ const mx = (x1 + x2) / 2;
+ const crit = critSL.has(sl.id) && critSL.has(dep);
+ return [``];
+ }));
+
+ const nodes = slices.map(sl => {
+ const p = pos.get(sl.id);
+ if (!p) return '';
+ const crit = critSL.has(sl.id);
+ const sc = sl.done ? 'n-done' : sl.active ? 'n-active' : 'n-pending';
+ return `
+
+ ${esc(truncStr(sl.id, 18))}
+ ${esc(truncStr(sl.title, 18))}
+ ${esc(sl.id)}: ${esc(sl.title)}
+ `;
+ });
+
+ const legend = `
+ done
+ active
+ pending
+
`;
+
+ return `
+
+
${esc(ms.id)}: ${esc(ms.title)}
+ ${legend}
+
+
+
+
No metrics data yet.
');
+ const t = data.totals;
+
+ const grid = [
+ kvi('Total cost', formatCost(t.cost)),
+ kvi('Total tokens', formatTokenCount(t.tokens.total)),
+ kvi('Input', formatTokenCount(t.tokens.input)),
+ kvi('Output', formatTokenCount(t.tokens.output)),
+ kvi('Cache read', formatTokenCount(t.tokens.cacheRead)),
+ kvi('Cache write', formatTokenCount(t.tokens.cacheWrite)),
+ kvi('Duration', formatDuration(t.duration)),
+ kvi('Units', String(t.units)),
+ kvi('Tool calls', String(t.toolCalls)),
+ kvi('Truncations', String(t.totalTruncationSections)),
+ ].join('');
+
+ const tokenBreakdown = buildTokenBreakdown(t.tokens);
+
+ const phaseRow = data.byPhase.length > 0 ? `
+
+ ${buildBarChart('Cost by phase', data.byPhase.map(p => ({
+ label: p.phase, value: p.cost, display: formatCost(p.cost), sub: `${p.units} units`,
+ })))}
+ ${buildBarChart('Tokens by phase', data.byPhase.map(p => ({
+ label: p.phase, value: p.tokens.total, display: formatTokenCount(p.tokens.total), sub: formatCost(p.cost),
+ })))}
+
` : '';
+
+ const sliceModelRow = (data.bySlice.length > 0 || data.byModel.length > 0) ? `
+
+ ${data.bySlice.length > 0 ? buildBarChart('Cost by slice', data.bySlice.map(s => ({
+ label: s.sliceId, value: s.cost, display: formatCost(s.cost),
+ sub: `${s.units} units`,
+ }))) : ''}
+ ${data.byModel.length > 0 ? buildBarChart('Cost by model', data.byModel.map(m => ({
+ label: shortModel(m.model), value: m.cost, display: formatCost(m.cost),
+ sub: `${m.units} units`,
+ }))) : ''}
+
` : '';
+
+ return section('metrics', 'Metrics', `
+ ${grid}
+ ${tokenBreakdown}
+ ${phaseRow}
+ ${sliceModelRow}
+ `);
+}
+
+function buildTokenBreakdown(tokens: { input: number; output: number; cacheRead: number; cacheWrite: number; total: number }): string {
+ if (tokens.total === 0) return '';
+ const segs = [
+ { label: 'Input', value: tokens.input, cls: 'seg-1' },
+ { label: 'Output', value: tokens.output, cls: 'seg-2' },
+ { label: 'Cache read', value: tokens.cacheRead, cls: 'seg-3' },
+ { label: 'Cache write', value: tokens.cacheWrite, cls: 'seg-4' },
+ ].filter(s => s.value > 0);
+
+ const bars = segs.map(s => {
+ const pct = (s.value / tokens.total) * 100;
+ return ``;
+ }).join('');
+
+ const legend = segs.map(s => {
+ const pct = ((s.value / tokens.total) * 100).toFixed(1);
+ return `${s.label}: ${formatTokenCount(s.value)} (${pct}%)`;
+ }).join('');
+
+ return `
+
+
Token breakdown
+
${bars}
+
${legend}
+
+
${esc(truncStr(e.label, 22))}
+
+
${esc(e.display)}
+
${esc(e.sub)}
` : ''}`;
+ }).join('');
+ return `${esc(title)}
${rows}`;
+}
+
+// ─── Section: Timeline ────────────────────────────────────────────────────────
+
+function buildTimelineSection(data: VisualizerData): string {
+ if (data.units.length === 0) return section('timeline', 'Timeline', 'No units executed yet.
');
+
+ const sorted = [...data.units].sort((a, b) => a.startedAt - b.startedAt);
+ const maxCost = Math.max(...sorted.map(u => u.cost), 0.01);
+
+ const rows = sorted.map((u, i) => {
+ const dur = u.finishedAt > 0 ? formatDuration(u.finishedAt - u.startedAt) : 'running';
+ // Cost heatmap: subtle red background for expensive rows
+ const intensity = Math.min(u.cost / maxCost, 1);
+ const heatStyle = intensity > 0.15 ? ` style="background:rgba(239,68,68,${(intensity * 0.15).toFixed(3)})"` : '';
+ return `
+
+ ${i + 1} |
+ ${esc(u.type)} |
+ ${esc(u.id)} |
+ ${esc(shortModel(u.model))} |
+ ${formatDateShort(new Date(u.startedAt).toISOString())} |
+ ${dur} |
+ ${formatCost(u.cost)} |
+ ${formatTokenCount(u.tokens.total)} |
+ ${u.toolCalls} |
+ ${u.tier ?? ''} |
+ ${u.modelDowngraded ? 'routed' : ''} |
+ ${(u.truncationSections ?? 0) > 0 ? u.truncationSections : ''} |
+ ${u.continueHereFired ? 'yes' : ''} |
+ `;
+ }).join('');
+
+ return section('timeline', 'Timeline', `
+ `);
+}
+
+// ─── Section: Changelog ───────────────────────────────────────────────────────
+
+function buildChangelogSection(data: VisualizerData): string {
+ if (data.changelog.entries.length === 0) return section('changelog', 'Changelog', 'No completed slices yet.
');
+
+ const entries = data.changelog.entries.map(e => {
+ const filesHtml = e.filesModified.length > 0 ? `
+
+ ${e.filesModified.length} file${e.filesModified.length !== 1 ? 's' : ''} modified
+
+ ${e.filesModified.map(f => `${esc(f.path)}${f.description ? ` — ${esc(f.description)}` : ''}
+ ` : '';
+
+ const ver = data.sliceVerifications.find(v => v.sliceId === e.sliceId);
+ const decisionsHtml = ver?.keyDecisions?.length ? `
+ Decisions
+
${ver.keyDecisions.map(d => `- ${esc(d)}
`).join('')}
+
` : '';
+
+ return `
+
+
+ ${e.oneLiner ? `
${esc(e.oneLiner)}
` : ''}
+ ${decisionsHtml}
+ ${filesHtml}
+
No KNOWLEDGE.md found.
');
+ const total = k.rules.length + k.patterns.length + k.lessons.length;
+ if (total === 0) return section('knowledge', 'Knowledge', 'KNOWLEDGE.md exists but no entries parsed.
');
+
+ const rulesHtml = k.rules.length > 0 ? `
+ Rules ${k.rules.length}
+
+ | ID | Scope | Rule |
|---|
+ ${k.rules.map(r => `| ${esc(r.id)} | ${esc(r.scope)} | ${esc(r.content)} |
`).join('')}
+
` : '';
+
+ const patternsHtml = k.patterns.length > 0 ? `
+ Patterns ${k.patterns.length}
+
+ | ID | Pattern |
|---|
+ ${k.patterns.map(p => `| ${esc(p.id)} | ${esc(p.content)} |
`).join('')}
+
` : '';
+
+ const lessonsHtml = k.lessons.length > 0 ? `
+ Lessons ${k.lessons.length}
+
+ | ID | Lesson |
|---|
+ ${k.lessons.map(l => `| ${esc(l.id)} | ${esc(l.content)} |
`).join('')}
+
` : '';
+
+ return section('knowledge', `Knowledge ${total}`, `${rulesHtml}${patternsHtml}${lessonsHtml}`);
+}
+
+// ─── Section: Captures ────────────────────────────────────────────────────────
+
+function buildCapturesSection(data: VisualizerData): string {
+ const c = data.captures;
+ if (c.totalCount === 0) return section('captures', 'Captures', 'No captures recorded.
');
+
+ const badge = c.pendingCount > 0
+ ? `${c.pendingCount} pending`
+ : `all triaged`;
+
+ const rows = c.entries.map(e => `
+
+ | ${formatDateShort(new Date(e.timestamp).toISOString())} |
+ ${esc(e.status)} |
+ ${e.classification ?? ''} |
+ ${e.resolution ?? ''} |
+ ${esc(e.text)} |
+ ${e.rationale ?? ''} |
+ ${e.resolvedAt ? formatDateShort(e.resolvedAt) : ''} |
+ ${e.executed !== undefined ? (e.executed ? 'yes' : 'no') : ''} |
+
`).join('');
+
+ return section('captures', `Captures ${badge}`, `
+ `);
+}
+
+// ─── Section: Stats ───────────────────────────────────────────────────────────
+
+function buildStatsSection(data: VisualizerData): string {
+ const s = data.stats;
+
+ const missingHtml = s.missingCount > 0 ? `
+ Missing changelogs ${s.missingCount}
+
+ | Milestone | Slice | Title |
|---|
+
+ ${s.missingSlices.map(sl => `| ${esc(sl.milestoneId)} | ${esc(sl.sliceId)} | ${esc(sl.title)} |
`).join('')}
+ ${s.missingCount > s.missingSlices.length
+ ? `| and ${s.missingCount - s.missingSlices.length} more |
`
+ : ''}
+
+
` : '';
+
+ const updatedHtml = s.updatedCount > 0 ? `
+ Recently completed ${s.updatedCount}
+
+ | Milestone | Slice | Title | Completed |
|---|
+ ${s.updatedSlices.map(sl => `
+ | ${esc(sl.milestoneId)} | ${esc(sl.sliceId)} | ${esc(sl.title)} | ${sl.completedAt ? formatDateShort(sl.completedAt) : ''} |
`).join('')}
+
+
` : '';
+
+ if (!missingHtml && !updatedHtml) {
+ return section('stats', 'Artifacts', 'All artifacts accounted for.
');
+ }
+
+ return section('stats', 'Artifacts', `${missingHtml}${updatedHtml}`);
+}
+
+// ─── Section: Discussion ──────────────────────────────────────────────────────
+
+function buildDiscussionSection(data: VisualizerData): string {
+ if (data.discussion.length === 0) return section('discussion', 'Planning', 'No milestones.
');
+
+ const rows = data.discussion.map(d => `
+
+ | ${esc(d.milestoneId)} |
+ ${esc(d.title)} |
+ ${d.state} |
+ ${d.hasContext ? 'yes' : ''} |
+ ${d.hasDraft ? 'draft' : ''} |
+ ${d.lastUpdated ? formatDateShort(d.lastUpdated) : ''} |
+
`).join('');
+
+ return section('discussion', 'Planning', `
+
+ | ID | Milestone | State | Context | Draft | Updated |
|---|
+ ${rows}
+
`);
+}
+
+// ─── Primitives ────────────────────────────────────────────────────────────────
+
+function section(id: string, title: string, body: string): string {
+ return `\n`;
+}
+
+function kvi(label: string, value: string): string {
+ return `${esc(value)}${esc(label)}
`;
+}
+
+function hRow(label: string, value: string, status?: 'ok' | 'caution' | 'warn'): string {
+ const cls = status ? ` class="h-${status}"` : '';
+ return `${esc(label)} | ${esc(value)} | `;
+}
+
+function shortModel(m: string) { return m.replace(/^claude-/, '').replace(/^anthropic\//, ''); }
+function truncStr(s: string, n: number) { return s.length > n ? s.slice(0, n - 1) + '\u2026' : s; }
+
+function formatDateLong(iso: string): string {
+ try {
+ const d = new Date(iso);
+ return d.toLocaleString('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit', timeZoneName: 'short' });
+ } catch { return iso; }
+}
+
+function formatDateShort(iso: string): string {
+ try {
+ const d = new Date(iso);
+ return d.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit' });
+ } catch { return iso; }
+}
+
+function esc(s: string | undefined | null): string {
+ if (s == null) return '';
+ return String(s).replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"').replace(/'/g, ''');
+}
+
+// ─── CSS ───────────────────────────────────────────────────────────────────────
+// Linear-inspired: restrained palette, one accent, no emoji, no gradients.
+
+const CSS = `
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+:root{
+ --bg-0:#0f1115;--bg-1:#16181d;--bg-2:#1e2028;--bg-3:#272a33;
+ --border-1:#2b2e38;--border-2:#3b3f4c;
+ --text-0:#ededef;--text-1:#a1a1aa;--text-2:#71717a;
+ --accent:#5e6ad2;--accent-subtle:rgba(94,106,210,.12);
+ --ok:#22c55e;--ok-subtle:rgba(34,197,94,.12);--warn:#ef4444;--caution:#eab308;
+ /* Chart palette — 6 hues for bar charts */
+ --c0:#5e6ad2;--c1:#e5796d;--c2:#14b8a6;--c3:#a78bfa;--c4:#f59e0b;--c5:#10b981;
+ /* Token breakdown — 4 distinct hues */
+ --tk-input:#5e6ad2;--tk-output:#e5796d;--tk-cache-r:#2dd4bf;--tk-cache-w:#64748b;
+ --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
+ --mono:'JetBrains Mono','Fira Code',ui-monospace,SFMono-Regular,monospace;
+}
+html{scroll-behavior:smooth;font-size:13px}
+body{background:var(--bg-0);color:var(--text-0);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased}
+a{color:var(--accent);text-decoration:none}
+a:hover{text-decoration:underline}
+code{font-family:var(--mono);font-size:12px;background:var(--bg-3);padding:1px 5px;border-radius:3px}
+.mono{font-family:var(--mono);font-size:12px}
+.muted{color:var(--text-2)}
+.accent{color:var(--accent)}
+.sep{color:var(--border-2);margin:0 4px}
+.empty{color:var(--text-2);padding:8px 0;font-size:13px}
+.indent{padding-left:12px}
+.num{font-variant-numeric:tabular-nums;text-align:right}
+
+/* Status dots — geometric, no emoji */
+.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;vertical-align:middle}
+.dot-sm{width:6px;height:6px}
+.dot-complete{background:var(--ok);opacity:.6}
+.dot-active{background:var(--accent)}
+.dot-pending{background:transparent;border:1.5px solid var(--border-2)}
+
+/* Header */
+header{background:var(--bg-1);border-bottom:1px solid var(--border-1);padding:12px 32px;position:sticky;top:0;z-index:200}
+.header-inner{display:flex;align-items:center;gap:16px;max-width:1280px;margin:0 auto}
+.branding{display:flex;align-items:baseline;gap:6px;flex-shrink:0}
+.logo{font-size:18px;font-weight:800;letter-spacing:-.5px;color:var(--text-0)}
+.version{font-size:10px;color:var(--text-2);font-family:var(--mono)}
+.header-meta{flex:1;min-width:0}
+.header-meta h1{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.header-path{font-size:11px;color:var(--text-2);font-family:var(--mono);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.header-right{text-align:right;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
+.generated{font-size:11px;color:var(--text-2)}
+.back-link{font-size:12px;color:var(--text-1)}
+.back-link:hover{color:var(--accent)}
+
+/* TOC nav */
+.toc{background:var(--bg-1);border-bottom:1px solid var(--border-1);overflow-x:auto}
+.toc ul{display:flex;list-style:none;max-width:1280px;margin:0 auto;padding:0 32px}
+.toc a{display:inline-block;padding:8px 12px;color:var(--text-2);font-size:12px;font-weight:500;border-bottom:2px solid transparent;transition:color .12s,border-color .12s;white-space:nowrap;text-decoration:none}
+.toc a:hover{color:var(--text-0);border-bottom-color:var(--border-2)}
+.toc a.active{color:var(--text-0);border-bottom-color:var(--accent)}
+
+/* Layout */
+main{max-width:1280px;margin:0 auto;padding:32px;display:flex;flex-direction:column;gap:48px}
+section{scroll-margin-top:82px}
+section>h2{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-1);margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border-1);display:flex;align-items:center;gap:8px}
+h3{font-size:13px;font-weight:600;color:var(--text-1);margin:20px 0 8px}
+.count{font-size:11px;font-weight:500;color:var(--text-2);background:var(--bg-3);border-radius:3px;padding:1px 6px}
+.count-warn{color:var(--caution)}
+
+/* KV grid (stats/metrics) */
+.kv-grid{display:flex;flex-wrap:wrap;gap:1px;background:var(--border-1);border:1px solid var(--border-1);border-radius:4px;overflow:hidden;margin-bottom:16px}
+.kv{background:var(--bg-1);padding:10px 16px;display:flex;flex-direction:column;gap:2px;min-width:110px;flex:1}
+.kv-val{font-size:18px;font-weight:600;color:var(--text-0);font-variant-numeric:tabular-nums}
+.kv-lbl{font-size:10px;color:var(--text-2);text-transform:uppercase;letter-spacing:.4px}
+
+/* Progress bar */
+.progress-wrap{display:flex;align-items:center;gap:10px;margin-bottom:12px}
+.progress-track{flex:1;height:4px;background:var(--bg-3);border-radius:2px;overflow:hidden}
+.progress-fill{height:100%;background:var(--accent);border-radius:2px}
+.progress-label{font-size:12px;font-weight:600;color:var(--text-1);min-width:40px;text-align:right}
+.active-info{font-size:12px;color:var(--text-1);margin-bottom:4px}
+.activity-line{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-1);padding:6px 0}
+
+/* Tables */
+.tbl{width:100%;border-collapse:collapse;font-size:12px}
+.tbl th{color:var(--text-2);font-weight:500;padding:6px 12px;text-align:left;border-bottom:1px solid var(--border-1);font-size:11px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
+.tbl td{padding:6px 12px;border-bottom:1px solid var(--border-1);vertical-align:top}
+.tbl tr:last-child td{border-bottom:none}
+.tbl tbody tr:hover td{background:var(--accent-subtle)}
+.tbl-kv td:first-child{color:var(--text-2);width:180px}
+.table-scroll{overflow-x:auto;border:1px solid var(--border-1);border-radius:4px}
+.table-scroll .tbl{border:none}
+
+/* Health */
+.h-ok td:first-child{color:var(--text-1)}
+.h-caution td{color:var(--caution)}
+.h-warn td{color:var(--warn)}
+
+/* Labels */
+.label{font-size:10px;font-weight:500;color:var(--accent);text-transform:uppercase;letter-spacing:.4px}
+.risk{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;flex-shrink:0}
+.risk-low{color:var(--text-2)}
+.risk-medium{color:var(--caution)}
+.risk-high{color:var(--warn)}
+.risk-unknown{color:var(--text-2)}
+
+/* Tags */
+.tag-row{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
+.tag{font-size:11px;font-family:var(--mono);color:var(--text-2);background:var(--bg-3);border-radius:3px;padding:1px 6px}
+
+/* Verification */
+.verif{font-size:12px;color:var(--text-1);padding:4px 0;margin-bottom:6px}
+.verif-blocker{color:var(--warn)}
+
+/* Detail blocks */
+.detail-block{font-size:12px;color:var(--text-2);margin-bottom:6px}
+.detail-label{font-weight:600;color:var(--text-1);display:block;margin-bottom:2px}
+.detail-block ul{padding-left:16px;margin-top:2px}
+.detail-block li{margin-bottom:1px}
+
+/* Progress tree */
+.ms-block{border:1px solid var(--border-1);border-radius:4px;overflow:hidden;margin-bottom:8px}
+.ms-summary{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;list-style:none;background:var(--bg-1);user-select:none;font-size:13px}
+.ms-summary:hover{background:var(--bg-2)}
+.ms-summary::-webkit-details-marker{display:none}
+.ms-id{font-weight:600}
+.ms-title{flex:1;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ms-body{padding:6px 12px 8px 24px;display:flex;flex-direction:column;gap:4px}
+
+.sl-block{border:1px solid var(--border-1);border-radius:3px;overflow:hidden}
+.sl-summary{display:flex;align-items:center;gap:6px;padding:6px 10px;cursor:pointer;list-style:none;background:var(--bg-2);font-size:12px;user-select:none}
+.sl-summary:hover{background:var(--bg-3)}
+.sl-summary::-webkit-details-marker{display:none}
+.sl-crit{border-left:2px solid var(--accent)}
+.sl-deps::before{content:'\\2190 ';color:var(--border-2)}
+.sl-detail{padding:8px 12px;background:var(--bg-0);border-top:1px solid var(--border-1)}
+
+.task-list{list-style:none;padding:4px 0 0;display:flex;flex-direction:column;gap:2px}
+.task-row{display:flex;align-items:center;gap:6px;font-size:12px;padding:3px 6px;border-radius:2px}
+
+/* Dep graph */
+.dep-block{margin-bottom:28px}
+.dep-legend{display:flex;gap:14px;font-size:12px;color:var(--text-2);margin-bottom:8px;align-items:center}
+.dep-legend span{display:flex;align-items:center;gap:4px}
+.dep-wrap{overflow-x:auto;background:var(--bg-1);border:1px solid var(--border-1);border-radius:4px;padding:16px}
+.dep-svg{display:block}
+.edge{fill:none;stroke:var(--border-2);stroke-width:1.5}
+.edge-crit{stroke:var(--accent);stroke-width:2}
+.node rect{fill:var(--bg-2);stroke:var(--border-2);stroke-width:1}
+.n-done rect{fill:var(--ok-subtle);stroke:rgba(34,197,94,.4)}
+.n-active rect{fill:var(--accent-subtle);stroke:var(--accent)}
+.n-crit rect{stroke:var(--accent)!important;stroke-width:1.5!important}
+.n-id{font-family:var(--mono);font-size:10px;fill:var(--text-1);font-weight:600;text-anchor:middle}
+.n-title{font-size:9px;fill:var(--text-2);text-anchor:middle}
+.n-active .n-id{fill:var(--accent)}
+
+/* Metrics */
+.token-block{background:var(--bg-1);border:1px solid var(--border-1);border-radius:4px;padding:14px;margin-bottom:16px}
+.token-bar{display:flex;height:16px;border-radius:2px;overflow:hidden;gap:1px;margin-bottom:8px}
+.tseg{height:100%;min-width:2px}
+.seg-1{background:var(--tk-input)}
+.seg-2{background:var(--tk-output)}
+.seg-3{background:var(--tk-cache-r)}
+.seg-4{background:var(--tk-cache-w)}
+.token-legend{display:flex;flex-wrap:wrap;gap:12px}
+.leg-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-2)}
+.leg-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
+.chart-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
+@media(max-width:860px){.chart-row{grid-template-columns:1fr}}
+.chart-block{background:var(--bg-1);border:1px solid var(--border-1);border-radius:4px;padding:14px}
+.bar-row{display:grid;grid-template-columns:120px 1fr 68px;align-items:center;gap:6px;margin-bottom:2px}
+.bar-lbl{font-size:12px;color:var(--text-2);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.bar-track{height:14px;background:var(--bg-3);border-radius:2px;overflow:hidden}
+.bar-fill{height:100%;border-radius:2px;background:var(--c0)}
+.bar-c0{background:var(--c0)}.bar-c1{background:var(--c1)}.bar-c2{background:var(--c2)}
+.bar-c3{background:var(--c3)}.bar-c4{background:var(--c4)}.bar-c5{background:var(--c5)}
+.bar-val{font-size:11px;font-variant-numeric:tabular-nums;color:var(--text-1)}
+.bar-sub{font-size:10px;color:var(--text-2);padding-left:128px;margin-bottom:6px}
+
+/* Changelog */
+.cl-entry{border-bottom:1px solid var(--border-1);padding:12px 0}
+.cl-entry:last-child{border-bottom:none}
+.cl-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
+.cl-title{flex:1;font-weight:500}
+.cl-date{margin-left:auto;white-space:nowrap}
+.cl-liner{font-size:13px;color:var(--text-1);margin-bottom:6px}
+.files-detail summary{font-size:12px;cursor:pointer}
+.file-list{list-style:none;padding-left:10px;margin-top:4px;display:flex;flex-direction:column;gap:2px}
+.file-list li{font-size:12px;color:var(--text-1)}
+
+/* Footer */
+footer{border-top:1px solid var(--border-1);padding:20px 32px;margin-top:40px}
+.footer-inner{display:flex;align-items:center;gap:6px;justify-content:center;font-size:11px;color:var(--text-2)}
+
+/* Print */
+@media print{
+ header,nav.toc{position:static}
+ body{background:#fff;color:#1a1a1a}
+ :root{--bg-0:#fff;--bg-1:#fafafa;--bg-2:#f5f5f5;--bg-3:#ebebeb;--border-1:#e5e5e5;--border-2:#d4d4d4;--text-0:#1a1a1a;--text-1:#525252;--text-2:#a3a3a3;--accent:#4f46e5;--ok:#16a34a;--ok-subtle:rgba(22,163,74,.08);--c0:#4f46e5;--c1:#dc2626;--c2:#0d9488;--c3:#7c3aed;--c4:#d97706;--c5:#059669;--tk-input:#4f46e5;--tk-output:#dc2626;--tk-cache-r:#0d9488;--tk-cache-w:#64748b}
+ section{page-break-inside:avoid}
+ .table-scroll{overflow:visible}
+}
+`;
+
+// ─── JS ────────────────────────────────────────────────────────────────────────
+
+const JS = `
+(function(){
+ const sections=document.querySelectorAll('section[id]');
+ const links=document.querySelectorAll('.toc a');
+ if(!sections.length||!links.length)return;
+ const obs=new IntersectionObserver(entries=>{
+ for(const e of entries){
+ if(!e.isIntersecting)continue;
+ for(const l of links)l.classList.remove('active');
+ const a=document.querySelector('.toc a[href="#'+e.target.id+'"]');
+ if(a)a.classList.add('active');
+ }
+ },{rootMargin:'-10% 0px -80% 0px',threshold:0});
+ for(const s of sections)obs.observe(s);
+})();
+`;
diff --git a/src/resources/extensions/gsd/export.ts b/src/resources/extensions/gsd/export.ts
index 7a5202bd2..f4a23c080 100644
--- a/src/resources/extensions/gsd/export.ts
+++ b/src/resources/extensions/gsd/export.ts
@@ -93,9 +93,57 @@ export function writeExportFile(
}
/**
- * Export session/milestone data to JSON or markdown.
+ * Export session/milestone data to JSON, markdown, or HTML.
*/
export async function handleExport(args: string, ctx: ExtensionCommandContext, basePath: string): Promise {
+ // HTML report — delegates to the full visualizer-data pipeline
+ if (args.includes("--html")) {
+ try {
+ const { loadVisualizerData } = await import("./visualizer-data.js");
+ const { generateHtmlReport } = await import("./export-html.js");
+ const { writeReportSnapshot, reportsDir } = await import("./reports.js");
+ const { basename: bn } = await import("node:path");
+ const data = await loadVisualizerData(basePath);
+ const projName = basename(basePath);
+ const gsdVersion = process.env.GSD_VERSION ?? "0.0.0";
+ const doneSlices = data.milestones.reduce((s, m) => s + m.slices.filter(sl => sl.done).length, 0);
+ const totalSlices = data.milestones.reduce((s, m) => s + m.slices.length, 0);
+ const outPath = writeReportSnapshot({
+ basePath,
+ html: generateHtmlReport(data, {
+ projectName: projName,
+ projectPath: basePath,
+ gsdVersion,
+ indexRelPath: "index.html",
+ }),
+ milestoneId: data.milestones.find(m => m.status === "active")?.id ?? "manual",
+ milestoneTitle: data.milestones.find(m => m.status === "active")?.title ?? "",
+ kind: "manual",
+ projectName: projName,
+ projectPath: basePath,
+ gsdVersion,
+ totalCost: data.totals?.cost ?? 0,
+ totalTokens: data.totals?.tokens.total ?? 0,
+ totalDuration: data.totals?.duration ?? 0,
+ doneSlices,
+ totalSlices,
+ doneMilestones: data.milestones.filter(m => m.status === "complete").length,
+ totalMilestones: data.milestones.length,
+ phase: data.phase,
+ });
+ ctx.ui.notify(
+ `HTML report saved: .gsd/reports/${bn(outPath)}\nBrowse all reports: .gsd/reports/index.html`,
+ "success",
+ );
+ } catch (err) {
+ ctx.ui.notify(
+ `HTML export failed: ${err instanceof Error ? err.message : String(err)}`,
+ "error",
+ );
+ }
+ return;
+ }
+
const format = args.includes("--json") ? "json" : "markdown";
const ledger = getLedger();
diff --git a/src/resources/extensions/gsd/preferences.ts b/src/resources/extensions/gsd/preferences.ts
index aa050186b..762318493 100644
--- a/src/resources/extensions/gsd/preferences.ts
+++ b/src/resources/extensions/gsd/preferences.ts
@@ -75,6 +75,7 @@ const KNOWN_PREFERENCE_KEYS = new Set([
"token_profile",
"phases",
"auto_visualize",
+ "auto_report",
"parallel",
"verification_commands",
"verification_auto_fix",
@@ -175,6 +176,8 @@ export interface GSDPreferences {
token_profile?: TokenProfile;
phases?: PhaseSkipPreferences;
auto_visualize?: boolean;
+ /** Generate HTML report snapshot after each milestone completion. Default: true. Set false to disable. */
+ auto_report?: boolean;
parallel?: import("./types.js").ParallelConfig;
verification_commands?: string[];
verification_auto_fix?: boolean;
diff --git a/src/resources/extensions/gsd/reports.ts b/src/resources/extensions/gsd/reports.ts
new file mode 100644
index 000000000..c31d73bff
--- /dev/null
+++ b/src/resources/extensions/gsd/reports.ts
@@ -0,0 +1,510 @@
+/**
+ * GSD Reports Registry
+ *
+ * Manages .gsd/reports/ — the persistent progression log of HTML snapshots.
+ *
+ * Layout:
+ * .gsd/reports/
+ * reports.json lightweight metadata index (never re-parses HTML)
+ * index.html auto-regenerated on every new snapshot
+ * M001-20260101T120000.html per-milestone snapshot
+ * final-20260201T090000.html full-project final snapshot
+ *
+ * Auto-triggered: after each milestone completion (when auto_report: true).
+ * Manual: /gsd export --html
+ */
+
+import { writeFileSync, readFileSync, mkdirSync, existsSync } from 'node:fs';
+import { join, basename } from 'node:path';
+import { gsdRoot } from './paths.js';
+import { formatCost, formatTokenCount } from './metrics.js';
+import { formatDuration } from './history.js';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface ReportEntry {
+ /** Filename relative to the reports/ dir, e.g. "M001-20260101T120000.html" */
+ filename: string;
+ /** ISO timestamp when this report was generated */
+ generatedAt: string;
+ /** Milestone ID this snapshot covers, or "final" for a full-project snapshot */
+ milestoneId: string | 'final';
+ /** Milestone title at snapshot time */
+ milestoneTitle: string;
+ /** Human-readable label shown in the index */
+ label: string;
+ /** Snapshot kind */
+ kind: 'milestone' | 'manual' | 'final';
+ // Metrics at snapshot time — for the index progression view
+ totalCost: number;
+ totalTokens: number;
+ totalDuration: number;
+ doneSlices: number;
+ totalSlices: number;
+ doneMilestones: number;
+ totalMilestones: number;
+ phase: string;
+}
+
+export interface ReportsIndex {
+ version: 1;
+ projectName: string;
+ projectPath: string;
+ gsdVersion: string;
+ entries: ReportEntry[];
+}
+
+// ─── Paths ────────────────────────────────────────────────────────────────────
+
+export function reportsDir(basePath: string): string {
+ return join(gsdRoot(basePath), 'reports');
+}
+
+function reportsIndexPath(basePath: string): string {
+ return join(reportsDir(basePath), 'reports.json');
+}
+
+function reportsHtmlIndexPath(basePath: string): string {
+ return join(reportsDir(basePath), 'index.html');
+}
+
+// ─── Registry ─────────────────────────────────────────────────────────────────
+
+export function loadReportsIndex(basePath: string): ReportsIndex | null {
+ const p = reportsIndexPath(basePath);
+ if (!existsSync(p)) return null;
+ try {
+ return JSON.parse(readFileSync(p, 'utf-8')) as ReportsIndex;
+ } catch {
+ return null;
+ }
+}
+
+function saveReportsIndex(basePath: string, index: ReportsIndex): void {
+ const dir = reportsDir(basePath);
+ mkdirSync(dir, { recursive: true });
+ writeFileSync(reportsIndexPath(basePath), JSON.stringify(index, null, 2) + '\n', 'utf-8');
+}
+
+// ─── Write a report snapshot ──────────────────────────────────────────────────
+
+export interface WriteReportSnapshotArgs {
+ basePath: string;
+ html: string;
+ milestoneId: string | 'final';
+ milestoneTitle: string;
+ kind: 'milestone' | 'manual' | 'final';
+ projectName: string;
+ projectPath: string;
+ gsdVersion: string;
+ // metrics
+ totalCost: number;
+ totalTokens: number;
+ totalDuration: number;
+ doneSlices: number;
+ totalSlices: number;
+ doneMilestones: number;
+ totalMilestones: number;
+ phase: string;
+}
+
+/**
+ * Write a report snapshot to .gsd/reports/, update reports.json, regenerate index.html.
+ * Returns the path of the written report file.
+ */
+export function writeReportSnapshot(args: WriteReportSnapshotArgs): string {
+ const dir = reportsDir(args.basePath);
+ mkdirSync(dir, { recursive: true });
+
+ const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
+ const prefix = args.milestoneId === 'final' ? 'final' : args.milestoneId;
+ const filename = `${prefix}-${timestamp}.html`;
+ const filePath = join(dir, filename);
+
+ writeFileSync(filePath, args.html, 'utf-8');
+
+ // Load or init registry
+ const existing = loadReportsIndex(args.basePath);
+ const index: ReportsIndex = existing ?? {
+ version: 1,
+ projectName: args.projectName,
+ projectPath: args.projectPath,
+ gsdVersion: args.gsdVersion,
+ entries: [],
+ };
+
+ // Keep metadata fresh
+ index.projectName = args.projectName;
+ index.projectPath = args.projectPath;
+ index.gsdVersion = args.gsdVersion;
+
+ const label = args.milestoneId === 'final'
+ ? 'Final Report'
+ : `${args.milestoneId}: ${args.milestoneTitle}`;
+
+ const entry: ReportEntry = {
+ filename,
+ generatedAt: new Date().toISOString(),
+ milestoneId: args.milestoneId,
+ milestoneTitle: args.milestoneTitle,
+ label,
+ kind: args.kind,
+ totalCost: args.totalCost,
+ totalTokens: args.totalTokens,
+ totalDuration: args.totalDuration,
+ doneSlices: args.doneSlices,
+ totalSlices: args.totalSlices,
+ doneMilestones: args.doneMilestones,
+ totalMilestones: args.totalMilestones,
+ phase: args.phase,
+ };
+
+ index.entries.push(entry);
+ saveReportsIndex(args.basePath, index);
+ regenerateHtmlIndex(args.basePath, index);
+
+ return filePath;
+}
+
+// ─── HTML Index Generator ─────────────────────────────────────────────────────
+
+export function regenerateHtmlIndex(basePath: string, index: ReportsIndex): void {
+ const html = buildIndexHtml(index);
+ writeFileSync(reportsHtmlIndexPath(basePath), html, 'utf-8');
+}
+
+function buildIndexHtml(index: ReportsIndex): string {
+ const { projectName, projectPath, gsdVersion, entries } = index;
+ const generated = new Date().toISOString();
+
+ // Sort oldest → newest for the progression timeline
+ const sorted = [...entries].sort(
+ (a, b) => new Date(a.generatedAt).getTime() - new Date(b.generatedAt).getTime()
+ );
+
+ const latestEntry = sorted[sorted.length - 1];
+ const overallPct = latestEntry
+ ? (latestEntry.totalSlices > 0
+ ? Math.round((latestEntry.doneSlices / latestEntry.totalSlices) * 100)
+ : 0)
+ : 0;
+
+ // TOC: group by milestone
+ const milestoneGroups = new Map();
+ for (const e of sorted) {
+ const key = e.milestoneId;
+ const arr = milestoneGroups.get(key) ?? [];
+ arr.push(e);
+ milestoneGroups.set(key, arr);
+ }
+
+ const tocHtml = [...milestoneGroups.entries()].map(([mid, group]) => {
+ const links = group.map(e =>
+ `${formatDateShort(e.generatedAt)} ${e.kind}`
+ ).join('');
+ return `
+
+
${esc(mid === 'final' ? 'Final' : mid)}
+
+
${parts.map(p => `${esc(p)}`).join('')}
`;
+ }
+ }
+
+ return `
+
+
+ ${esc(e.label)}
+ ${e.kind}
+
+ ${formatDateShort(e.generatedAt)}
+
+
+ ${esc(formatCost(e.totalCost))}
+ ${esc(formatTokenCount(e.totalTokens))}
+ ${esc(formatDuration(e.totalDuration))}
+ ${e.doneSlices}/${e.totalSlices} slices
+
+ ${deltaHtml}
+ ${isLatest ? 'Latest
' : ''}
+ `;
+ }).join('');
+
+ // Cost progression mini-chart (inline SVG sparkline)
+ const sparklineSvg = sorted.length > 1 ? buildCostSparkline(sorted) : '';
+
+ // Summary of latest state
+ const summaryHtml = latestEntry ? `
+
+
${formatCost(latestEntry.totalCost)}Total Cost
+
${formatTokenCount(latestEntry.totalTokens)}Total Tokens
+
${formatDuration(latestEntry.totalDuration)}Duration
+
${latestEntry.doneSlices}/${latestEntry.totalSlices}Slices
+
${latestEntry.doneMilestones}/${latestEntry.totalMilestones}Milestones
+
${entries.length}Reports
+
+
+
${overallPct}% complete
+
No reports generated yet.
';
+
+ return `
+
+
+
+
+GSD Reports — ${esc(projectName)}
+
+
+
+
+
+
+
+
+
+
+
+
+ Project Overview
+ ${summaryHtml}
+ ${sparklineSvg ? `Cost Progression
${sparklineSvg}` : ''}
+
+
+
+ Progression ${entries.length}
+ ${sorted.length > 0
+ ? `${cardHtml}
`
+ : 'No reports generated yet. Run /gsd export --html or enable auto_report: true.
'}
+
+
+
+
+
+ ${entries.map((e, i) => {
+ const x = (PAD + i * xStep) / W * 100;
+ return `${esc(e.milestoneId === 'final' ? 'final' : e.milestoneId)}`;
+ }).join('')}
+
+