gsd-pi 2.28.0 → 2.29.0-dev.2ccf3fb

package/dist/resources/extensions/gsd/errors.ts

@@ -10,8 +10,6 @@
 
 export const GSD_STALE_STATE = "GSD_STALE_STATE";
 export const GSD_LOCK_HELD = "GSD_LOCK_HELD";
-export const GSD_DISPATCH_FAILED = "GSD_DISPATCH_FAILED";
-export const GSD_TIMEOUT = "GSD_TIMEOUT";
 export const GSD_ARTIFACT_MISSING = "GSD_ARTIFACT_MISSING";
 export const GSD_GIT_ERROR = "GSD_GIT_ERROR";
 export const GSD_MERGE_CONFLICT = "GSD_MERGE_CONFLICT";

package/dist/resources/extensions/gsd/export-html.ts

@@ -25,8 +25,9 @@ import type {
   VisualizerMilestone,
   VisualizerSlice,
 } from './visualizer-data.js';
-import { formatDuration } from './history.js';
+import { formatDateShort, formatDuration } from '../shared/format-utils.js';
 import { formatCost, formatTokenCount } from './metrics.js';
+import type { UnitMetrics } from './metrics.js';
 
 // ─── Public API ────────────────────────────────────────────────────────────────
 
@@ -46,6 +47,7 @@ export function generateHtmlReport(
 
   const sections = [
     buildSummarySection(data, opts, generated),
+    buildBlockersSection(data),
     buildProgressSection(data),
     buildTimelineSection(data),
     buildDepGraphSection(data),
@@ -94,6 +96,7 @@ export function generateHtmlReport(
 <nav class="toc" aria-label="Report sections">
   <ul>
     <li><a href="#summary">Summary</a></li>
+    <li><a href="#blockers">Blockers</a></li>
     <li><a href="#progress">Progress</a></li>
     <li><a href="#timeline">Timeline</a></li>
     <li><a href="#depgraph">Dependencies</a></li>
@@ -128,7 +131,7 @@ ${sections.join('\n')}
 
 function buildSummarySection(
   data: VisualizerData,
-  _opts: HtmlReportOptions,
+  opts: HtmlReportOptions,
   _generated: string,
 ): string {
   const t = data.totals;
@@ -150,6 +153,12 @@ function buildSummarySection(
     t ? kvi('Units', String(t.units)) : '',
     data.remainingSliceCount > 0 ? kvi('Remaining', String(data.remainingSliceCount)) : '',
     act ? kvi('Rate', `${act.completionRate.toFixed(1)}/hr`) : '',
+    t && doneSlices > 0 ? kvi('Cost/slice', formatCost(t.cost / doneSlices)) : '',
+    t && t.toolCalls > 0 ? kvi('Tokens/tool', formatTokenCount(t.tokens.total / t.toolCalls)) : '',
+    t && (t.tokens.input + t.tokens.cacheRead) > 0
+      ? kvi('Cache hit', ((t.tokens.cacheRead / (t.tokens.input + t.tokens.cacheRead)) * 100).toFixed(1) + '%')
+      : '',
+    opts.milestoneId ? kvi('Scope', opts.milestoneId) : '',
   ].filter(Boolean).join('');
 
   const activeInfo = activeMilestone ? (() => {
@@ -168,7 +177,11 @@ function buildSummarySection(
       <span class="muted">${formatDuration(act.elapsed)} elapsed</span>
     </div>` : '';
 
+  const execSummary = buildExecutiveSummary(data, opts);
+  const etaLine = buildEtaLine(data);
+
   return section('summary', 'Summary', `
+    ${execSummary}
     <div class="kv-grid">${kv}</div>
     <div class="progress-wrap">
       <div class="progress-track"><div class="progress-fill" style="width:${pct}%"></div></div>
@@ -176,9 +189,68 @@ function buildSummarySection(
     </div>
     ${activeInfo}
     ${activityHtml}
+    ${etaLine}
   `);
 }
 
+function buildExecutiveSummary(data: VisualizerData, opts: HtmlReportOptions): string {
+  const totalSlices = data.milestones.reduce((s, m) => s + m.slices.length, 0);
+  const doneSlices = data.milestones.reduce((s, m) => s + m.slices.filter(sl => sl.done).length, 0);
+  const pct = totalSlices > 0 ? Math.round((doneSlices / totalSlices) * 100) : 0;
+  const spent = data.totals?.cost ?? 0;
+  const activeMilestone = data.milestones.find(m => m.status === 'active');
+  const activeSlice = activeMilestone?.slices.find(s => s.active);
+  const currentExec = activeMilestone && activeSlice
+    ? ` Currently executing ${esc(activeMilestone.id)}/${esc(activeSlice.id)}.`
+    : '';
+  const budgetCtx = data.health.budgetCeiling
+    ? ` Budget: ${formatCost(spent)} of ${formatCost(data.health.budgetCeiling)} ceiling (${((spent / data.health.budgetCeiling) * 100).toFixed(0)}% used).`
+    : '';
+  return `<p class="exec-summary">${esc(opts.projectName)} is ${pct}% complete across ${data.milestones.length} milestones. ${formatCost(spent)} spent.${currentExec}${budgetCtx}</p>`;
+}
+
+function buildEtaLine(data: VisualizerData): string {
+  const act = data.agentActivity;
+  if (!act || act.completionRate <= 0 || data.remainingSliceCount <= 0) return '';
+  const hoursRemaining = data.remainingSliceCount / act.completionRate;
+  const formatted = formatDuration(hoursRemaining * 3_600_000);
+  return `<div class="eta-line">ETA: ~${formatted} remaining (${data.remainingSliceCount} slices at ${act.completionRate.toFixed(1)}/hr)</div>`;
+}
+
+// ─── Section: Blockers ────────────────────────────────────────────────────────
+
+function buildBlockersSection(data: VisualizerData): string {
+  const blockers = data.sliceVerifications.filter(v => v.blockerDiscovered === true);
+  const highRisk: { msId: string; slId: string }[] = [];
+  for (const ms of data.milestones) {
+    for (const sl of ms.slices) {
+      if (!sl.done && sl.risk?.toLowerCase() === 'high') {
+        highRisk.push({ msId: ms.id, slId: sl.id });
+      }
+    }
+  }
+
+  if (blockers.length === 0 && highRisk.length === 0) {
+    return section('blockers', 'Blockers', '<p class="empty">No blockers or high-risk items found.</p>');
+  }
+
+  const blockerCards = blockers.map(v => `
+    <div class="blocker-card">
+      <div class="blocker-id">${esc(v.milestoneId)}/${esc(v.sliceId)}</div>
+      <div class="blocker-text">${esc(v.verificationResult ?? 'Blocker discovered')}</div>
+    </div>`).join('');
+
+  const riskCards = highRisk
+    .filter(hr => !blockers.some(b => b.milestoneId === hr.msId && b.sliceId === hr.slId))
+    .map(hr => `
+    <div class="blocker-card">
+      <div class="blocker-id">${esc(hr.msId)}/${esc(hr.slId)}</div>
+      <div class="blocker-text">High risk — incomplete</div>
+    </div>`).join('');
+
+  return section('blockers', 'Blockers', `${blockerCards}${riskCards}`);
+}
+
 // ─── Section: Health ──────────────────────────────────────────────────────────
 
 function buildHealthSection(data: VisualizerData): string {
@@ -248,7 +320,7 @@ function buildProgressSection(data: VisualizerData): string {
       : '<p class="empty indent">No slices in roadmap yet.</p>';
 
     return `
-      <details class="ms-block" ${ms.status !== 'pending' ? 'open' : ''}>
+      <details class="ms-block" ${ms.status !== 'pending' && ms.status !== 'parked' ? 'open' : ''}>
         <summary class="ms-summary ms-${ms.status}">
           <span class="dot dot-${ms.status}"></span>
           <span class="mono ms-id">${esc(ms.id)}</span>
@@ -422,6 +494,7 @@ function buildMilestoneDepSVG(ms: VisualizerMilestone, data: VisualizerData): st
     <span><span class="dot dot-complete dot-sm"></span> done</span>
     <span><span class="dot dot-active dot-sm"></span> active</span>
     <span><span class="dot dot-pending dot-sm"></span> pending</span>
+    <span><span class="dot dot-parked dot-sm"></span> parked</span>
   </div>`;
 
   return `
@@ -486,16 +559,171 @@ function buildMetricsSection(data: VisualizerData): string {
         label: shortModel(m.model), value: m.cost, display: formatCost(m.cost),
         sub: `${m.units} units`,
       }))) : ''}
+      ${data.bySlice.length > 0 ? buildBarChart('Duration by slice', data.bySlice.map(s => ({
+        label: s.sliceId, value: s.duration, display: formatDuration(s.duration),
+        sub: formatCost(s.cost),
+      }))) : ''}
     </div>` : '';
 
+  const costOverTime = buildCostOverTimeChart(data.units);
+  const budgetBurndown = buildBudgetBurndown(data);
+  const gantt = buildSliceGantt(data);
+
   return section('metrics', 'Metrics', `
     <div class="kv-grid">${grid}</div>
+    ${budgetBurndown}
     ${tokenBreakdown}
+    ${costOverTime}
     ${phaseRow}
     ${sliceModelRow}
+    ${gantt}
   `);
 }
 
+function buildCostOverTimeChart(units: UnitMetrics[]): string {
+  if (units.length < 2) return '';
+  const sorted = [...units].sort((a, b) => a.startedAt - b.startedAt);
+  const cumulative: number[] = [];
+  let running = 0;
+  for (const u of sorted) {
+    running += u.cost;
+    cumulative.push(running);
+  }
+
+  const padL = 50, padR = 30, padT = 20, padB = 30;
+  const w = 600, h = 200;
+  const plotW = w - padL - padR;
+  const plotH = h - padT - padB;
+  const maxCost = cumulative[cumulative.length - 1] || 1;
+  const n = cumulative.length;
+
+  const points = cumulative.map((c, i) => {
+    const x = padL + (i / (n - 1)) * plotW;
+    const y = padT + plotH - (c / maxCost) * plotH;
+    return { x, y };
+  });
+
+  const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
+  const areaPath = `${linePath} L${points[points.length - 1].x.toFixed(1)},${(padT + plotH).toFixed(1)} L${points[0].x.toFixed(1)},${(padT + plotH).toFixed(1)} Z`;
+
+  const gridLines: string[] = [];
+  for (let i = 0; i <= 4; i++) {
+    const y = padT + (plotH / 4) * i;
+    const val = formatCost(maxCost * (1 - i / 4));
+    gridLines.push(`<line x1="${padL}" y1="${y}" x2="${w - padR}" y2="${y}" class="cost-grid"/>`);
+    gridLines.push(`<text x="${padL - 4}" y="${y + 3}" class="cost-axis" text-anchor="end">${val}</text>`);
+  }
+
+  return `
+    <div class="token-block">
+      <h3>Cost over time</h3>
+      <svg class="cost-svg" viewBox="0 0 ${w} ${h}" width="${w}" height="${h}">
+        ${gridLines.join('')}
+        <path d="${areaPath}" class="cost-area"/>
+        <path d="${linePath}" class="cost-line"/>
+        <text x="${padL}" y="${h - 4}" class="cost-axis">#1</text>
+        <text x="${w - padR}" y="${h - 4}" class="cost-axis" text-anchor="end">#${n}</text>
+      </svg>
+    </div>`;
+}
+
+function buildBudgetBurndown(data: VisualizerData): string {
+  if (!data.health.budgetCeiling) return '';
+  const ceiling = data.health.budgetCeiling;
+  const spent = data.totals?.cost ?? 0;
+  const totalSlices = data.milestones.reduce((s, m) => s + m.slices.length, 0);
+  const doneSlices = data.milestones.reduce((s, m) => s + m.slices.filter(sl => sl.done).length, 0);
+  const avgCostPerSlice = doneSlices > 0 ? spent / doneSlices : 0;
+  const projected = avgCostPerSlice > 0 ? avgCostPerSlice * data.remainingSliceCount + spent : spent;
+  const maxVal = Math.max(ceiling, projected, spent);
+
+  const spentPct = (spent / maxVal) * 100;
+  const projectedRemPct = Math.max(0, ((projected - spent) / maxVal) * 100);
+  const overshoot = projected > ceiling ? ((projected - ceiling) / maxVal) * 100 : 0;
+  const projectedClean = projectedRemPct - overshoot;
+
+  const legend = [
+    `<span><span class="burndown-dot" style="background:var(--accent)"></span> Spent: ${formatCost(spent)}</span>`,
+    `<span><span class="burndown-dot" style="background:var(--caution)"></span> Projected remaining: ${formatCost(Math.max(0, projected - spent))}</span>`,
+    `<span><span class="burndown-dot" style="background:var(--border-2)"></span> Ceiling: ${formatCost(ceiling)}</span>`,
+    overshoot > 0 ? `<span><span class="burndown-dot" style="background:var(--warn)"></span> Overshoot: ${formatCost(projected - ceiling)}</span>` : '',
+  ].filter(Boolean).join('');
+
+  return `
+    <div class="burndown-wrap">
+      <h3>Budget burndown</h3>
+      <div class="burndown-bar">
+        <div class="burndown-spent" style="width:${spentPct.toFixed(1)}%"></div>
+        ${projectedClean > 0 ? `<div class="burndown-projected" style="width:${projectedClean.toFixed(1)}%"></div>` : ''}
+        ${overshoot > 0 ? `<div class="burndown-overshoot" style="width:${overshoot.toFixed(1)}%"></div>` : ''}
+      </div>
+      <div class="burndown-legend">${legend}</div>
+    </div>`;
+}
+
+function buildSliceGantt(data: VisualizerData): string {
+  const sliceTimings = new Map<string, { min: number; max: number }>();
+  for (const u of data.units) {
+    const parts = u.id.split('/');
+    const sliceKey = parts.length >= 2 ? `${parts[0]}/${parts[1]}` : u.id;
+    if (u.startedAt <= 0) continue;
+    const existing = sliceTimings.get(sliceKey);
+    const end = u.finishedAt > 0 ? u.finishedAt : Date.now();
+    if (existing) {
+      existing.min = Math.min(existing.min, u.startedAt);
+      existing.max = Math.max(existing.max, end);
+    } else {
+      sliceTimings.set(sliceKey, { min: u.startedAt, max: end });
+    }
+  }
+
+  if (sliceTimings.size < 2) return '';
+
+  const sliceEntries = [...sliceTimings.entries()].sort((a, b) => a[1].min - b[1].min);
+  const globalMin = Math.min(...sliceEntries.map(e => e[1].min));
+  const globalMax = Math.max(...sliceEntries.map(e => e[1].max));
+  const range = globalMax - globalMin || 1;
+
+  const sliceCount = sliceEntries.length;
+  const barH = 18, rowH = 30, padL = 140, padR = 20, padT = 30, padB = 30;
+  const plotW = 700 - padL - padR;
+  const svgH = sliceCount * rowH + padT + padB;
+
+  // Build a lookup of slice status
+  const sliceStatusMap = new Map<string, string>();
+  for (const ms of data.milestones) {
+    for (const sl of ms.slices) {
+      const key = `${ms.id}/${sl.id}`;
+      sliceStatusMap.set(key, sl.done ? 'done' : sl.active ? 'active' : 'pending');
+    }
+  }
+
+  const bars = sliceEntries.map(([sliceId, timing], i) => {
+    const x = padL + ((timing.min - globalMin) / range) * plotW;
+    const w = Math.max(2, ((timing.max - timing.min) / range) * plotW);
+    const y = padT + i * rowH + (rowH - barH) / 2;
+    const status = sliceStatusMap.get(sliceId) ?? 'pending';
+    return `<text x="${padL - 6}" y="${y + barH / 2 + 4}" class="gantt-label" text-anchor="end">${esc(truncStr(sliceId, 18))}</text>
+      <rect x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${w.toFixed(1)}" height="${barH}" rx="2" class="gantt-bar-${status}"><title>${esc(sliceId)}: ${formatDuration(timing.max - timing.min)}</title></rect>`;
+  }).join('\n');
+
+  // Time axis labels
+  const axisLabels = [0, 0.25, 0.5, 0.75, 1].map(frac => {
+    const t = globalMin + frac * range;
+    const x = padL + frac * plotW;
+    return `<text x="${x.toFixed(1)}" y="${svgH - 8}" class="gantt-axis" text-anchor="middle">${formatDateShort(new Date(t).toISOString())}</text>`;
+  }).join('');
+
+  return `
+    <div class="gantt-wrap">
+      <h3>Slice timeline</h3>
+      <svg class="gantt-svg" viewBox="0 0 700 ${svgH}" width="700" height="${svgH}">
+        ${bars}
+        ${axisLabels}
+      </svg>
+    </div>`;
+}
+
 function buildTokenBreakdown(tokens: { input: number; output: number; cacheRead: number; cacheWrite: number; total: number }): string {
   if (tokens.total === 0) return '';
   const segs = [
@@ -767,12 +995,6 @@ function formatDateLong(iso: string): string {
   } 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 '';
@@ -816,6 +1038,7 @@ code{font-family:var(--mono);font-size:12px;background:var(--bg-3);padding:1px 5
 .dot-complete{background:var(--ok);opacity:.6}
 .dot-active{background:var(--accent)}
 .dot-pending{background:transparent;border:1.5px solid var(--border-2)}
+.dot-parked{background:var(--warn);opacity:.5}
 
 /* Header */
 header{background:var(--bg-1);border-bottom:1px solid var(--border-1);padding:12px 32px;position:sticky;top:0;z-index:200}
@@ -944,8 +1167,7 @@ h3{font-size:13px;font-weight:600;color:var(--text-1);margin:20px 0 8px}
 .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-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:16px}
 .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}
@@ -971,6 +1193,80 @@ h3{font-size:13px;font-weight:600;color:var(--text-1);margin:20px 0 8px}
 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)}
 
+/* Executive summary & ETA */
+.exec-summary{font-size:13px;color:var(--text-1);margin-bottom:12px;line-height:1.7}
+.eta-line{font-size:12px;color:var(--accent);margin-top:4px}
+
+/* Cost over time chart */
+.cost-svg{display:block;margin:8px 0;background:var(--bg-1);border:1px solid var(--border-1);border-radius:4px}
+.cost-line{fill:none;stroke:var(--accent);stroke-width:2}
+.cost-area{fill:var(--accent-subtle);stroke:none}
+.cost-axis{fill:var(--text-2);font-family:var(--mono);font-size:10px}
+.cost-grid{stroke:var(--border-1);stroke-width:1;stroke-dasharray:4,4}
+
+/* Budget burndown */
+.burndown-wrap{background:var(--bg-1);border:1px solid var(--border-1);border-radius:4px;padding:14px;margin-bottom:16px}
+.burndown-bar{display:flex;height:20px;border-radius:3px;overflow:hidden;gap:1px;margin-bottom:8px}
+.burndown-spent{background:var(--accent);height:100%}
+.burndown-projected{background:var(--caution);height:100%;opacity:.6}
+.burndown-overshoot{background:var(--warn);height:100%;opacity:.7}
+.burndown-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--text-2)}
+.burndown-legend span{display:flex;align-items:center;gap:4px}
+.burndown-dot{display:inline-block;width:8px;height:8px;border-radius:2px}
+
+/* Blockers */
+.blocker-card{border-left:3px solid var(--warn);background:var(--bg-1);border-radius:0 4px 4px 0;padding:10px 14px;margin-bottom:8px}
+.blocker-id{font-family:var(--mono);font-size:12px;color:var(--warn);margin-bottom:2px}
+.blocker-text{font-size:12px;color:var(--text-1)}
+.blocker-risk{font-size:11px;color:var(--caution);margin-top:2px}
+
+/* Gantt */
+.gantt-wrap{overflow-x:auto;background:var(--bg-1);border:1px solid var(--border-1);border-radius:4px;padding:16px;margin-top:16px}
+.gantt-svg{display:block}
+.gantt-bar-done{fill:var(--ok);opacity:.7}
+.gantt-bar-active{fill:var(--accent)}
+.gantt-bar-pending{fill:var(--border-2)}
+.gantt-label{fill:var(--text-2);font-family:var(--mono);font-size:10px}
+.gantt-axis{fill:var(--text-2);font-family:var(--mono);font-size:9px}
+
+/* Interactive */
+.tl-filter{display:block;width:100%;padding:6px 10px;margin-bottom:8px;background:var(--bg-2);border:1px solid var(--border-1);border-radius:4px;color:var(--text-0);font-size:12px;font-family:var(--font);outline:none}
+.tl-filter:focus{border-color:var(--accent)}
+.tl-filter::placeholder{color:var(--text-2)}
+.sec-toggle{background:none;border:1px solid var(--border-2);color:var(--text-2);width:20px;height:20px;border-radius:3px;cursor:pointer;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
+.sec-toggle:hover{border-color:var(--text-1);color:var(--text-1)}
+.theme-toggle{background:var(--bg-3);border:1px solid var(--border-2);color:var(--text-1);padding:4px 10px;border-radius:4px;cursor:pointer;font-size:11px;font-family:var(--font)}
+.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
+
+/* Light theme */
+.light-theme{--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;--accent-subtle:rgba(79,70,229,.08);--ok:#16a34a;--ok-subtle:rgba(22,163,74,.08);--warn:#dc2626;--caution:#ca8a04;--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}
+
+/* Responsive */
+@media(max-width:768px){
+  header{padding:10px 16px}
+  .header-inner{flex-wrap:wrap;gap:8px}
+  .header-meta h1{font-size:13px}
+  main{padding:16px}
+  .kv-grid{gap:1px}
+  .kv{min-width:80px;padding:8px 10px}
+  .kv-val{font-size:14px}
+  .chart-row{grid-template-columns:1fr}
+  .toc ul{padding:0 16px}
+  .toc a{padding:6px 8px;font-size:11px}
+  .bar-row{grid-template-columns:80px 1fr 56px}
+  .ms-body{padding-left:12px}
+}
+@media(max-width:480px){
+  .kv{min-width:60px;padding:6px 8px}
+  .kv-val{font-size:12px}
+  .kv-lbl{font-size:9px}
+  .bar-row{grid-template-columns:60px 1fr 48px}
+  .bar-lbl{font-size:10px}
+  .toc ul{flex-wrap:wrap}
+  .header-right{display:none}
+  .gantt-wrap{overflow-x:auto}
+}
+
 /* Print */
 @media print{
   header,nav.toc{position:static}
@@ -998,4 +1294,64 @@ const JS = `
   },{rootMargin:'-10% 0px -80% 0px',threshold:0});
   for(const s of sections)obs.observe(s);
 })();
+(function(){
+  var tl=document.getElementById('timeline');
+  if(!tl)return;
+  var table=tl.querySelector('.tbl');
+  if(!table)return;
+  var input=document.createElement('input');
+  input.className='tl-filter';
+  input.placeholder='Filter timeline\\u2026';
+  input.type='text';
+  table.parentNode.insertBefore(input,table);
+  var rows=table.querySelectorAll('tbody tr');
+  input.addEventListener('input',function(){
+    var q=this.value.toLowerCase();
+    for(var i=0;i<rows.length;i++){
+      rows[i].style.display=rows[i].textContent.toLowerCase().indexOf(q)>-1?'':'none';
+    }
+  });
+})();
+(function(){
+  var saved=JSON.parse(localStorage.getItem('gsd-collapsed')||'{}');
+  document.querySelectorAll('section[id]').forEach(function(sec){
+    var h2=sec.querySelector('h2');
+    if(!h2)return;
+    var btn=document.createElement('button');
+    btn.className='sec-toggle';
+    btn.textContent=saved[sec.id]?'+':'-';
+    btn.setAttribute('aria-label','Toggle section');
+    h2.prepend(btn);
+    if(saved[sec.id])toggleSection(sec,true);
+    btn.addEventListener('click',function(e){
+      e.preventDefault();
+      var collapsed=btn.textContent==='-';
+      toggleSection(sec,collapsed);
+      btn.textContent=collapsed?'+':'-';
+      saved[sec.id]=collapsed;
+      localStorage.setItem('gsd-collapsed',JSON.stringify(saved));
+    });
+  });
+  function toggleSection(sec,hide){
+    var children=sec.children;
+    for(var i=0;i<children.length;i++){
+      if(children[i].tagName!=='H2')children[i].style.display=hide?'none':'';
+    }
+  }
+})();
+(function(){
+  var hr=document.querySelector('.header-right');
+  if(!hr)return;
+  var btn=document.createElement('button');
+  btn.className='theme-toggle';
+  btn.textContent=localStorage.getItem('gsd-theme')==='light'?'Dark':'Light';
+  if(localStorage.getItem('gsd-theme')==='light')document.documentElement.classList.add('light-theme');
+  btn.addEventListener('click',function(){
+    document.documentElement.classList.toggle('light-theme');
+    var isLight=document.documentElement.classList.contains('light-theme');
+    btn.textContent=isLight?'Dark':'Light';
+    localStorage.setItem('gsd-theme',isLight?'light':'dark');
+  });
+  hr.prepend(btn);
+})();
 `;

package/dist/resources/extensions/gsd/export.ts

@@ -4,13 +4,36 @@
 import type { ExtensionCommandContext } from "@gsd/pi-coding-agent";
 import { writeFileSync, mkdirSync } from "node:fs";
 import { join, basename } from "node:path";
+import { exec } from "node:child_process";
 import {
   getLedger, getProjectTotals, aggregateByPhase, aggregateBySlice,
   aggregateByModel, formatCost, formatTokenCount, loadLedgerFromDisk,
 } from "./metrics.js";
 import type { UnitMetrics } from "./metrics.js";
 import { gsdRoot } from "./paths.js";
-import { formatDuration } from "./history.js";
+import { formatDuration, fileLink } from "../shared/mod.js";
+
+/**
+ * Open a file in the user's default browser.
+ * Uses platform-specific commands: `open` (macOS), `xdg-open` (Linux), `start` (Windows).
+ * Non-blocking, non-fatal — failures are silently ignored.
+ */
+export function openInBrowser(filePath: string): void {
+  const cmd =
+    process.platform === "darwin" ? "open" :
+    process.platform === "win32" ? "start" :
+    "xdg-open";
+
+  // On Windows, `start` needs an empty title argument when the path has spaces
+  const args = process.platform === "win32"
+    ? `"" "${filePath}"`
+    : `"${filePath}"`;
+
+  exec(`${cmd} ${args}`, (err) => {
+    // Non-fatal — if the browser can't be opened, the file path is still shown
+    if (err) void err;
+  });
+}
 
 /**
  * Write an export file directly, without requiring an ExtensionCommandContext.
@@ -167,10 +190,12 @@ export async function handleExport(args: string, ctx: ExtensionCommandContext, b
           paths.push(bn(outPath));
         }
 
+        const indexPath = join(gsdRoot(basePath), "reports", "index.html");
         ctx.ui.notify(
-          `Generated ${paths.length} report snapshot${paths.length !== 1 ? "s" : ""}:\n${paths.map(p => `  ${p}`).join("\n")}\nBrowse all reports: .gsd/reports/index.html`,
+          `Generated ${paths.length} report snapshot${paths.length !== 1 ? "s" : ""}:\n${paths.map(p => `  ${p}`).join("\n")}\nOpening reports index in browser...`,
           "success",
         );
+        openInBrowser(indexPath);
       } else {
         // Single report for the active milestone (existing behavior)
         const doneSlices = data.milestones.reduce((s, m) => s + m.slices.filter(sl => sl.done).length, 0);
@@ -194,9 +219,10 @@ export async function handleExport(args: string, ctx: ExtensionCommandContext, b
           phase: data.phase,
         });
         ctx.ui.notify(
-          `HTML report saved: .gsd/reports/${bn(outPath)}\nBrowse all reports: .gsd/reports/index.html`,
+          `HTML report saved: .gsd/reports/${bn(outPath)}\nOpening in browser...`,
           "success",
         );
+        openInBrowser(outPath);
       }
     } catch (err) {
       ctx.ui.notify(
@@ -241,7 +267,7 @@ export async function handleExport(args: string, ctx: ExtensionCommandContext, b
     };
     const outPath = join(exportDir, `export-${timestamp}.json`);
     writeFileSync(outPath, JSON.stringify(report, null, 2) + "\n", "utf-8");
-    ctx.ui.notify(`Exported to ${outPath}`, "success");
+    ctx.ui.notify(`Exported to ${fileLink(outPath)}`, "success");
   } else {
     const totals = getProjectTotals(units);
     const phases = aggregateByPhase(units);
@@ -285,6 +311,6 @@ export async function handleExport(args: string, ctx: ExtensionCommandContext, b
 
     const outPath = join(exportDir, `export-${timestamp}.md`);
     writeFileSync(outPath, md, "utf-8");
-    ctx.ui.notify(`Exported to ${outPath}`, "success");
+    ctx.ui.notify(`Exported to ${fileLink(outPath)}`, "success");
   }
 }