/**
 * SF HTML Report Generator
 *
 * Produces a single self-contained HTML file with:
 *   - Branding header (project name, path, SF version, generated timestamp)
 *   - Project summary & overall progress
 *   - Progress tree (milestones → slices → tasks, with critical path)
 *   - Execution timeline (chronological unit history)
 *   - Slice dependency graph (SVG DAG per milestone)
 *   - Cost & token metrics (bar charts, phase/slice/model/tier breakdowns)
 *   - Health & configuration overview
 *   - Changelog (completed slice summaries + file modifications)
 *   - Knowledge base (rules, patterns, lessons)
 *   - Captures log
 *   - Artifacts & milestone planning / discussion state
 *
 * No external dependencies — all CSS and JS is inlined.
 * Printable to PDF from any browser.
 *
 * Design: Linear-inspired — restrained palette, geometric status, no emoji.
 */
import {
	formatDateShort,
	formatDuration,
} from "@singularity-forge/coding-agent";
import { formatCost, formatTokenCount } from "./metrics.js";
export function generateHtmlReport(data, opts) {
	const generated = new Date().toISOString();
	const sections = [
		buildSummarySection(data, opts, generated),
		buildBlockersSection(data),
		buildProgressSection(data),
		buildTimelineSection(data),
		buildDepGraphSection(data),
		buildMetricsSection(data),
		buildHealthSection(data),
		buildChangelogSection(data),
		buildKnowledgeSection(data),
		buildCapturesSection(data),
		buildStatsSection(data),
		buildDiscussionSection(data),
	];
	const milestoneTag = opts.milestoneId
		? ` <span class="sep">/</span> <span class="mono accent">${esc(opts.milestoneId)}</span>`
		: "";
	const backLink = opts.indexRelPath
		? `<a class="back-link" href="${esc(opts.indexRelPath)}">All Reports</a>`
		: "";
	return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SF Report — ${esc(opts.projectName)}${opts.milestoneId ? ` — ${esc(opts.milestoneId)}` : ""}</title>
<style>${CSS}</style>
</head>
<body>
<header>
  <div class="header-inner">
    <div class="branding">
      <span class="logo">SF</span>
      <span class="version">v${esc(opts.sfVersion)}</span>
    </div>
    <div class="header-meta">
      <h1>${esc(opts.projectName)}${milestoneTag}</h1>
      <span class="header-path">${esc(opts.projectPath)}</span>
    </div>
    <div class="header-right">
      ${backLink}
      <div class="generated">${formatDateLong(generated)}</div>
    </div>
  </div>
</header>
<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>
    <li><a href="#metrics">Metrics</a></li>
    <li><a href="#health">Health</a></li>
    <li><a href="#changelog">Changelog</a></li>
    <li><a href="#knowledge">Knowledge</a></li>
    <li><a href="#captures">Captures</a></li>
    <li><a href="#stats">Artifacts</a></li>
    <li><a href="#discussion">Planning</a></li>
  </ul>
</nav>
<main>
${sections.join("\n")}
</main>
<footer>
  <div class="footer-inner">
    <span>SF v${esc(opts.sfVersion)}</span>
    <span class="sep">/</span>
    <span>${esc(opts.projectName)}</span>
    ${opts.milestoneId ? `<span class="sep">/</span><span class="mono">${esc(opts.milestoneId)}</span>` : ""}
    <span class="sep">/</span>
    <span>${formatDateLong(generated)}</span>
  </div>
</footer>
<script>${JS}</script>
</body>
</html>`;
}
// ─── Section: Summary ─────────────────────────────────────────────────────────
function buildSummarySection(data, opts, _generated) {
	const t = data.totals;
	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 doneMilestones = data.milestones.filter(
		(m) => m.status === "complete",
	).length;
	const activeMilestone = data.milestones.find((m) => m.status === "active");
	const pct =
		totalSlices > 0 ? Math.round((doneSlices / totalSlices) * 100) : 0;
	const act = data.agentActivity;
	const kv = [
		kvi("Milestones", `${doneMilestones}/${data.milestones.length}`),
		kvi("Slices", `${doneSlices}/${totalSlices}`),
		kvi("Phase", data.phase),
		t ? kvi("Cost", formatCost(t.cost)) : "",
		t ? kvi("Tokens", formatTokenCount(t.tokens.total)) : "",
		t ? kvi("Duration", formatDuration(t.duration)) : "",
		t ? kvi("Tool calls", String(t.toolCalls)) : "",
		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
		? (() => {
				const active = activeMilestone.slices.find((s) => s.active);
				if (!active) return "";
				return `<div class="active-info">
      Executing <span class="mono">${esc(activeMilestone.id)}/${esc(active.id)}</span> — ${esc(active.title)}
    </div>`;
			})()
		: "";
	const activityHtml = act?.active
		? `
    <div class="activity-line">
      <span class="dot dot-active"></span>
      <span class="mono">${esc(act.currentUnit?.type ?? "")}</span>
      <span class="mono muted">${esc(act.currentUnit?.id ?? "")}</span>
      <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>
      <span class="progress-label">${pct}%</span>
    </div>
    ${activeInfo}
    ${activityHtml}
    ${etaLine}
  `,
	);
}
function buildExecutiveSummary(data, opts) {
	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) {
	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) {
	const blockers = data.sliceVerifications.filter(
		(v) => v.blockerDiscovered === true,
	);
	const highRisk = [];
	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) {
	const h = data.health;
	const t = data.totals;
	const rows = [];
	rows.push(hRow("Token profile", h.tokenProfile));
	if (h.budgetCeiling !== undefined) {
		const spent = t?.cost ?? 0;
		const pct = (spent / h.budgetCeiling) * 100;
		const status = pct > 90 ? "warn" : pct > 75 ? "caution" : "ok";
		rows.push(
			hRow(
				"Budget ceiling",
				`${formatCost(h.budgetCeiling)} (${formatCost(spent)} spent, ${pct.toFixed(0)}% used)`,
				status,
			),
		);
	}
	rows.push(
		hRow(
			"Truncation rate",
			`${h.truncationRate.toFixed(1)}% per unit (${t?.totalTruncationSections ?? 0} total)`,
			h.truncationRate > 20 ? "warn" : h.truncationRate > 10 ? "caution" : "ok",
		),
	);
	rows.push(
		hRow(
			"Continue-here rate",
			`${h.continueHereRate.toFixed(1)}% per unit (${t?.continueHereFiredCount ?? 0} total)`,
			h.continueHereRate > 15
				? "warn"
				: h.continueHereRate > 8
					? "caution"
					: "ok",
		),
	);
	if (h.tierSavingsLine) rows.push(hRow("Routing savings", h.tierSavingsLine));
	rows.push(hRow("Tool calls", String(h.toolCalls)));
	rows.push(
		hRow(
			"Messages",
			`${h.assistantMessages} assistant / ${h.userMessages} user`,
		),
	);
	const tierRows =
		h.tierBreakdown.length > 0
			? `
    <h3>Tier breakdown</h3>
    <table class="tbl">
      <thead><tr><th>Tier</th><th>Units</th><th>Cost</th><th>Tokens</th></tr></thead>
      <tbody>
        ${h.tierBreakdown
					.map(
						(tb) => `<tr><td class="mono">${esc(tb.tier)}</td>
           <td>${tb.units}</td><td>${formatCost(tb.cost)}</td>
           <td>${formatTokenCount(tb.tokens.total)}</td></tr>`,
					)
					.join("")}
      </tbody>
    </table>`
			: "";
	// Progress score section
	let progressHtml = "";
	if (h.progressScore) {
		const ps = h.progressScore;
		const scoreColor =
			ps.level === "green"
				? "#22c55e"
				: ps.level === "yellow"
					? "#eab308"
					: "#ef4444";
		const signalRows = ps.signals
			.map((s) => {
				const icon =
					s.kind === "positive" ? "✓" : s.kind === "negative" ? "✗" : "·";
				const color =
					s.kind === "positive"
						? "#22c55e"
						: s.kind === "negative"
							? "#ef4444"
							: "#888";
				return `<div style="margin-left:1em;color:${color}">${icon} ${esc(s.label)}</div>`;
			})
			.join("");
		progressHtml = `
      <h3>Progress Score</h3>
      <div style="font-size:1.1em;font-weight:bold;color:${scoreColor}">● ${esc(ps.summary)}</div>
      ${signalRows}`;
	}
	// Doctor history section
	let historyHtml = "";
	const doctorHistory = h.doctorHistory ?? [];
	if (doctorHistory.length > 0) {
		const historyRows = doctorHistory
			.slice(0, 20)
			.map((entry) => {
				const statusIcon = entry.ok ? "✓" : "✗";
				const statusColor = entry.ok ? "#22c55e" : "#ef4444";
				const ts = entry.ts.replace("T", " ").slice(0, 19);
				const scopeTag = entry.scope
					? `<span class="mono" style="color:#888"> [${esc(entry.scope)}]</span>`
					: "";
				const summaryText = entry.summary
					? esc(entry.summary)
					: `${entry.errors} errors, ${entry.warnings} warnings, ${entry.fixes} fixes`;
				const issueDetails = (entry.issues ?? [])
					.slice(0, 3)
					.map((i) => {
						const iColor = i.severity === "error" ? "#ef4444" : "#eab308";
						return `<div style="margin-left:2em;color:${iColor};font-size:0.85em">${i.severity === "error" ? "✗" : "⚠"} ${esc(i.message)} <span class="mono" style="color:#888">${esc(i.unitId)}</span></div>`;
					})
					.join("");
				const fixDetails = (entry.fixDescriptions ?? [])
					.slice(0, 2)
					.map(
						(f) =>
							`<div style="margin-left:2em;color:#22c55e;font-size:0.85em">↳ ${esc(f)}</div>`,
					)
					.join("");
				return `<tr style="color:${statusColor}">
        <td class="mono">${statusIcon}</td>
        <td class="mono">${esc(ts)}${scopeTag}</td>
        <td>${summaryText}</td>
      </tr>
      ${issueDetails || fixDetails ? `<tr><td colspan="3">${issueDetails}${fixDetails}</td></tr>` : ""}`;
			})
			.join("");
		historyHtml = `
      <h3>Doctor Run History</h3>
      <table class="tbl">
        <thead><tr><th></th><th>Time</th><th>Summary</th></tr></thead>
        <tbody>${historyRows}</tbody>
      </table>`;
	}
	return section(
		"health",
		"Health",
		`
    <table class="tbl tbl-kv"><tbody>${rows.join("")}</tbody></table>
    ${tierRows}
    ${progressHtml}
    ${historyHtml}
  `,
	);
}
// ─── Section: Progress ────────────────────────────────────────────────────────
function buildProgressSection(data) {
	if (data.milestones.length === 0) {
		return section(
			"progress",
			"Progress",
			'<p class="empty">No milestones found.</p>',
		);
	}
	const critMS = new Set(data.criticalPath.milestonePath);
	const critSL = new Set(data.criticalPath.slicePath);
	const msHtml = data.milestones
		.map((ms) => {
			const doneCount = ms.slices.filter((s) => s.done).length;
			const onCrit = critMS.has(ms.id);
			const sliceHtml =
				ms.slices.length > 0
					? ms.slices.map((sl) => buildSliceRow(sl, critSL, data)).join("")
					: '<p class="empty indent">No slices in roadmap yet.</p>';
			return `
      <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>
          <span class="ms-title">${esc(ms.title)}</span>
          <span class="muted">${doneCount}/${ms.slices.length}</span>
          ${onCrit ? '<span class="label">critical path</span>' : ""}
          ${ms.dependsOn.length > 0 ? `<span class="muted">needs ${ms.dependsOn.map(esc).join(", ")}</span>` : ""}
        </summary>
        <div class="ms-body">${sliceHtml}</div>
      </details>`;
		})
		.join("");
	return section("progress", "Progress", msHtml);
}
function buildSliceRow(sl, critSL, data) {
	const onCrit = critSL.has(sl.id);
	const ver = data.sliceVerifications.find((v) => v.sliceId === sl.id);
	const slack = data.criticalPath.sliceSlack.get(sl.id);
	const status = sl.done ? "complete" : sl.active ? "active" : "pending";
	const taskHtml =
		sl.tasks.length > 0
			? `
    <ul class="task-list">
      ${sl.tasks
				.map(
					(t) => `
        <li class="task-row">
          <span class="dot dot-${t.done ? "complete" : t.active ? "active" : "pending"} dot-sm"></span>
          <span class="mono muted">${esc(t.id)}</span>
          <span class="${t.done ? "muted" : ""}">${esc(t.title)}</span>
          ${t.estimate ? `<span class="muted">${esc(t.estimate)}</span>` : ""}
        </li>`,
				)
				.join("")}
    </ul>`
			: "";
	const tags = [
		...(ver?.provides ?? []).map(
			(p) => `<span class="tag">provides: ${esc(p)}</span>`,
		),
		...(ver?.requires ?? []).map(
			(r) => `<span class="tag">requires: ${esc(r.provides)}</span>`,
		),
	].join("");
	const keyDecisions = ver?.keyDecisions?.length
		? `<div class="detail-block"><span class="detail-label">Decisions</span><ul>${ver.keyDecisions.map((d) => `<li>${esc(d)}</li>`).join("")}</ul></div>`
		: "";
	const patterns = ver?.patternsEstablished?.length
		? `<div class="detail-block"><span class="detail-label">Patterns</span><ul>${ver.patternsEstablished.map((p) => `<li>${esc(p)}</li>`).join("")}</ul></div>`
		: "";
	const verifBadge = ver?.verificationResult
		? `<div class="verif ${ver.blockerDiscovered ? "verif-blocker" : ""}">
        ${ver.blockerDiscovered ? "Blocker: " : ""}${esc(ver.verificationResult)}
       </div>`
		: "";
	return `
    <details class="sl-block">
      <summary class="sl-summary ${onCrit ? "sl-crit" : ""}">
        <span class="dot dot-${status} dot-sm"></span>
        <span class="mono muted">${esc(sl.id)}</span>
        <span class="${status === "active" ? "accent" : sl.done ? "muted" : ""}">${esc(sl.title)}</span>
        <span class="risk risk-${(sl.risk || "unknown").toLowerCase()}">${esc(sl.risk || "?")}</span>
        ${sl.depends.length > 0 ? `<span class="muted sl-deps">${sl.depends.map(esc).join(", ")}</span>` : ""}
        ${onCrit ? '<span class="label">critical</span>' : ""}
        ${slack !== undefined && slack > 0 ? `<span class="muted">+${slack} slack</span>` : ""}
      </summary>
      <div class="sl-detail">
        ${tags ? `<div class="tag-row">${tags}</div>` : ""}
        ${verifBadge}
        ${keyDecisions}
        ${patterns}
        ${taskHtml}
      </div>
    </details>`;
}
// ─── Section: Dependency Graph ────────────────────────────────────────────────
function buildDepGraphSection(data) {
	const hasSlices = data.milestones.some((ms) => ms.slices.length > 0);
	if (!hasSlices)
		return section(
			"depgraph",
			"Dependencies",
			'<p class="empty">No slices to graph.</p>',
		);
	const hasDeps = data.milestones.some((ms) =>
		ms.slices.some((s) => s.depends.length > 0),
	);
	if (!hasDeps)
		return section(
			"depgraph",
			"Dependencies",
			'<p class="empty">No dependencies defined.</p>',
		);
	const svgs = data.milestones
		.filter((ms) => ms.slices.length > 0)
		.map((ms) => buildMilestoneDepSVG(ms, data))
		.filter(Boolean)
		.join("");
	return section("depgraph", "Dependencies", svgs);
}
function buildMilestoneDepSVG(ms, data) {
	const slices = ms.slices;
	if (slices.length === 0) return "";
	const critSL = new Set(data.criticalPath.slicePath);
	const slMap = new Map(slices.map((s) => [s.id, s]));
	const layerMap = new Map();
	const inDeg = new Map();
	for (const s of slices) inDeg.set(s.id, 0);
	for (const s of slices) {
		for (const dep of s.depends) {
			if (slMap.has(dep)) inDeg.set(s.id, (inDeg.get(s.id) ?? 0) + 1);
		}
	}
	const visited = new Set();
	const q = [];
	for (const [id, d] of inDeg) {
		if (d === 0) {
			q.push(id);
			visited.add(id);
			layerMap.set(id, 0);
		}
	}
	while (q.length > 0) {
		const node = q.shift();
		for (const s of slices) {
			if (!s.depends.includes(node)) continue;
			const newDeg = (inDeg.get(s.id) ?? 1) - 1;
			inDeg.set(s.id, newDeg);
			layerMap.set(
				s.id,
				Math.max(layerMap.get(s.id) ?? 0, (layerMap.get(node) ?? 0) + 1),
			);
			if (newDeg === 0 && !visited.has(s.id)) {
				visited.add(s.id);
				q.push(s.id);
			}
		}
	}
	for (const s of slices) if (!layerMap.has(s.id)) layerMap.set(s.id, 0);
	const maxLayer = Math.max(...[...layerMap.values()]);
	const byLayer = new Map();
	for (const [id, layer] of layerMap) {
		const arr = byLayer.get(layer) ?? [];
		arr.push(id);
		byLayer.set(layer, arr);
	}
	const NW = 130,
		NH = 40,
		CGAP = 56,
		RGAP = 14,
		PAD = 20;
	let maxRows = 0;
	for (let c = 0; c <= maxLayer; c++)
		maxRows = Math.max(maxRows, (byLayer.get(c) ?? []).length);
	const totalH = PAD * 2 + maxRows * NH + Math.max(0, maxRows - 1) * RGAP;
	const totalW = PAD * 2 + (maxLayer + 1) * NW + maxLayer * CGAP;
	const pos = new Map();
	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 [
				`<path d="M${x1},${y1} C${mx},${y1} ${mx},${y2} ${x2},${y2}" class="edge${crit ? " edge-crit" : ""}" marker-end="url(#arr${crit ? "-crit" : ""})"/>`,
			];
		}),
	);
	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 `<g class="node ${sc}${crit ? " n-crit" : ""}" transform="translate(${p.x},${p.y})">
      <rect width="${NW}" height="${NH}" rx="4"/>
      <text x="${NW / 2}" y="16" class="n-id">${esc(truncStr(sl.id, 18))}</text>
      <text x="${NW / 2}" y="30" class="n-title">${esc(truncStr(sl.title, 18))}</text>
      <title>${esc(sl.id)}: ${esc(sl.title)}</title>
    </g>`;
	});
	const legend = `<div class="dep-legend">
    <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 `
    <div class="dep-block">
      <h3>${esc(ms.id)}: ${esc(ms.title)}</h3>
      ${legend}
      <div class="dep-wrap">
        <svg class="dep-svg" viewBox="0 0 ${totalW} ${totalH}" width="${totalW}" height="${totalH}">
          <defs>
            <marker id="arr" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">
              <path d="M0,0 L0,6 L8,3 z" fill="var(--border-2)"/>
            </marker>
            <marker id="arr-crit" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">
              <path d="M0,0 L0,6 L8,3 z" fill="var(--accent)"/>
            </marker>
          </defs>
          ${edges.join("")}
          ${nodes.join("")}
        </svg>
      </div>
    </div>`;
}
// ─── Section: Metrics ─────────────────────────────────────────────────────────
function buildMetricsSection(data) {
	if (!data.totals)
		return section(
			"metrics",
			"Metrics",
			'<p class="empty">No metrics data yet.</p>',
		);
	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
			? `
    <div class="chart-row">
      ${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),
				})),
			)}
    </div>`
			: "";
	const sliceModelRow =
		data.bySlice.length > 0 || data.byModel.length > 0
			? `
    <div class="chart-row">
      ${
				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`,
							})),
						)
					: ""
			}
      ${
				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) {
	if (units.length < 2) return "";
	const sorted = [...units].sort((a, b) => a.startedAt - b.startedAt);
	const cumulative = [];
	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 = [];
	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) {
	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) {
	const sliceTimings = new Map();
	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();
	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) {
	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 `<div class="tseg ${s.cls}" style="width:${pct.toFixed(2)}%" title="${s.label}: ${formatTokenCount(s.value)} (${pct.toFixed(1)}%)"></div>`;
		})
		.join("");
	const legend = segs
		.map((s) => {
			const pct = ((s.value / tokens.total) * 100).toFixed(1);
			return `<span class="leg-item"><span class="leg-dot ${s.cls}"></span>${s.label}: ${formatTokenCount(s.value)} (${pct}%)</span>`;
		})
		.join("");
	return `
    <div class="token-block">
      <h3>Token breakdown</h3>
      <div class="token-bar">${bars}</div>
      <div class="token-legend">${legend}</div>
    </div>`;
}
const CHART_COLORS = 6;
function buildBarChart(title, entries) {
	if (entries.length === 0) return "";
	const max = Math.max(...entries.map((e) => e.value), 1);
	const rows = entries
		.map((e, i) => {
			const pct = (e.value / max) * 100;
			const ci = e.color ?? i;
			return `
      <div class="bar-row">
        <div class="bar-lbl">${esc(truncStr(e.label, 22))}</div>
        <div class="bar-track"><div class="bar-fill bar-c${ci % CHART_COLORS}" style="width:${pct.toFixed(1)}%"></div></div>
        <div class="bar-val">${esc(e.display)}</div>
      </div>
      ${e.sub ? `<div class="bar-sub">${esc(e.sub)}</div>` : ""}`;
		})
		.join("");
	return `<div class="chart-block"><h3>${esc(title)}</h3>${rows}</div>`;
}
// ─── Section: Timeline ────────────────────────────────────────────────────────
function buildTimelineSection(data) {
	if (data.units.length === 0)
		return section(
			"timeline",
			"Timeline",
			'<p class="empty">No units executed yet.</p>',
		);
	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 `
      <tr${heatStyle}>
        <td class="muted">${i + 1}</td>
        <td class="mono">${esc(u.type)}</td>
        <td class="mono muted">${esc(u.id)}</td>
        <td>${esc(shortModel(u.model))}</td>
        <td class="muted">${formatDateShort(new Date(u.startedAt).toISOString())}</td>
        <td>${dur}</td>
        <td class="num">${formatCost(u.cost)}</td>
        <td class="num">${formatTokenCount(u.tokens.total)}</td>
        <td class="num">${u.toolCalls}</td>
        <td class="mono">${u.tier ?? ""}</td>
        <td>${u.modelDowngraded ? "routed" : ""}</td>
        <td class="num">${(u.truncationSections ?? 0) > 0 ? u.truncationSections : ""}</td>
        <td>${u.continueHereFired ? "yes" : ""}</td>
      </tr>`;
		})
		.join("");
	return section(
		"timeline",
		"Timeline",
		`
    <div class="table-scroll">
      <table class="tbl">
        <thead><tr>
          <th>#</th><th>Type</th><th>ID</th><th>Model</th>
          <th>Started</th><th>Duration</th><th>Cost</th>
          <th>Tokens</th><th>Tools</th><th>Tier</th><th>Routed</th><th>Trunc</th><th>CHF</th>
        </tr></thead>
        <tbody>${rows}</tbody>
      </table>
    </div>`,
	);
}
// ─── Section: Changelog ───────────────────────────────────────────────────────
function buildChangelogSection(data) {
	if (data.changelog.entries.length === 0)
		return section(
			"changelog",
			"Changelog",
			'<p class="empty">No completed slices yet.</p>',
		);
	const entries = data.changelog.entries
		.map((e) => {
			const filesHtml =
				e.filesModified.length > 0
					? `
      <details class="files-detail">
        <summary class="muted">${e.filesModified.length} file${e.filesModified.length !== 1 ? "s" : ""} modified</summary>
        <ul class="file-list">
          ${e.filesModified.map((f) => `<li><code>${esc(f.path)}</code>${f.description ? ` — ${esc(f.description)}` : ""}</li>`).join("")}
        </ul>
      </details>`
					: "";
			const ver = data.sliceVerifications.find((v) => v.sliceId === e.sliceId);
			const decisionsHtml = ver?.keyDecisions?.length
				? `
      <div class="detail-block"><span class="detail-label">Decisions</span>
        <ul>${ver.keyDecisions.map((d) => `<li>${esc(d)}</li>`).join("")}</ul>
      </div>`
				: "";
			return `
      <div class="cl-entry">
        <div class="cl-header">
          <span class="mono muted">${esc(e.milestoneId)}/${esc(e.sliceId)}</span>
          <span class="cl-title">${esc(e.title)}</span>
          ${e.completedAt ? `<span class="muted cl-date">${formatDateShort(e.completedAt)}</span>` : ""}
        </div>
        ${e.oneLiner ? `<p class="cl-liner">${esc(e.oneLiner)}</p>` : ""}
        ${decisionsHtml}
        ${filesHtml}
      </div>`;
		})
		.join("");
	return section(
		"changelog",
		`Changelog <span class="count">${data.changelog.entries.length}</span>`,
		entries,
	);
}
// ─── Section: Knowledge ───────────────────────────────────────────────────────
function buildKnowledgeSection(data) {
	const k = data.knowledge;
	if (!k.exists)
		return section(
			"knowledge",
			"Knowledge",
			'<p class="empty">No KNOWLEDGE.md found.</p>',
		);
	const total = k.rules.length + k.patterns.length + k.lessons.length;
	if (total === 0)
		return section(
			"knowledge",
			"Knowledge",
			'<p class="empty">KNOWLEDGE.md exists but no entries parsed.</p>',
		);
	const rulesHtml =
		k.rules.length > 0
			? `
    <h3>Rules <span class="count">${k.rules.length}</span></h3>
    <table class="tbl">
      <thead><tr><th>ID</th><th>Scope</th><th>Rule</th></tr></thead>
      <tbody>${k.rules.map((r) => `<tr><td class="mono">${esc(r.id)}</td><td>${esc(r.scope)}</td><td>${esc(r.content)}</td></tr>`).join("")}</tbody>
    </table>`
			: "";
	const patternsHtml =
		k.patterns.length > 0
			? `
    <h3>Patterns <span class="count">${k.patterns.length}</span></h3>
    <table class="tbl">
      <thead><tr><th>ID</th><th>Pattern</th></tr></thead>
      <tbody>${k.patterns.map((p) => `<tr><td class="mono">${esc(p.id)}</td><td>${esc(p.content)}</td></tr>`).join("")}</tbody>
    </table>`
			: "";
	const lessonsHtml =
		k.lessons.length > 0
			? `
    <h3>Lessons <span class="count">${k.lessons.length}</span></h3>
    <table class="tbl">
      <thead><tr><th>ID</th><th>Lesson</th></tr></thead>
      <tbody>${k.lessons.map((l) => `<tr><td class="mono">${esc(l.id)}</td><td>${esc(l.content)}</td></tr>`).join("")}</tbody>
    </table>`
			: "";
	return section(
		"knowledge",
		`Knowledge <span class="count">${total}</span>`,
		`${rulesHtml}${patternsHtml}${lessonsHtml}`,
	);
}
// ─── Section: Captures ────────────────────────────────────────────────────────
function buildCapturesSection(data) {
	const c = data.captures;
	if (c.totalCount === 0)
		return section(
			"captures",
			"Captures",
			'<p class="empty">No captures recorded.</p>',
		);
	const badge =
		c.pendingCount > 0
			? `<span class="count count-warn">${c.pendingCount} pending</span>`
			: `<span class="count">all triaged</span>`;
	const rows = c.entries
		.map(
			(e) => `
    <tr>
      <td class="muted">${formatDateShort(new Date(e.timestamp).toISOString())}</td>
      <td class="mono">${esc(e.status)}</td>
      <td class="mono">${e.classification ?? ""}</td>
      <td>${e.resolution ?? ""}</td>
      <td>${esc(e.text)}</td>
      <td class="muted">${e.rationale ?? ""}</td>
      <td class="muted">${e.resolvedAt ? formatDateShort(e.resolvedAt) : ""}</td>
      <td>${e.executed !== undefined ? (e.executed ? "yes" : "no") : ""}</td>
    </tr>`,
		)
		.join("");
	return section(
		"captures",
		`Captures ${badge}`,
		`
    <div class="table-scroll">
      <table class="tbl">
        <thead><tr><th>Captured</th><th>Status</th><th>Class</th><th>Resolution</th><th>Text</th><th>Rationale</th><th>Resolved</th><th>Executed</th></tr></thead>
        <tbody>${rows}</tbody>
      </table>
    </div>`,
	);
}
// ─── Section: Stats ───────────────────────────────────────────────────────────
function buildStatsSection(data) {
	const s = data.stats;
	const missingHtml =
		s.missingCount > 0
			? `
    <h3>Missing changelogs <span class="count">${s.missingCount}</span></h3>
    <table class="tbl">
      <thead><tr><th>Milestone</th><th>Slice</th><th>Title</th></tr></thead>
      <tbody>
        ${s.missingSlices.map((sl) => `<tr><td class="mono">${esc(sl.milestoneId)}</td><td class="mono">${esc(sl.sliceId)}</td><td>${esc(sl.title)}</td></tr>`).join("")}
        ${
					s.missingCount > s.missingSlices.length
						? `<tr><td colspan="3" class="muted">and ${s.missingCount - s.missingSlices.length} more</td></tr>`
						: ""
				}
      </tbody>
    </table>`
			: "";
	const updatedHtml =
		s.updatedCount > 0
			? `
    <h3>Recently completed <span class="count">${s.updatedCount}</span></h3>
    <table class="tbl">
      <thead><tr><th>Milestone</th><th>Slice</th><th>Title</th><th>Completed</th></tr></thead>
      <tbody>${s.updatedSlices
				.map(
					(sl) => `
        <tr><td class="mono">${esc(sl.milestoneId)}</td><td class="mono">${esc(sl.sliceId)}</td><td>${esc(sl.title)}</td><td class="muted">${sl.completedAt ? formatDateShort(sl.completedAt) : ""}</td></tr>`,
				)
				.join("")}
      </tbody>
    </table>`
			: "";
	if (!missingHtml && !updatedHtml) {
		return section(
			"stats",
			"Artifacts",
			'<p class="empty">All artifacts accounted for.</p>',
		);
	}
	return section("stats", "Artifacts", `${missingHtml}${updatedHtml}`);
}
// ─── Section: Discussion ──────────────────────────────────────────────────────
function buildDiscussionSection(data) {
	if (data.discussion.length === 0)
		return section(
			"discussion",
			"Planning",
			'<p class="empty">No milestones.</p>',
		);
	const rows = data.discussion
		.map(
			(d) => `
    <tr>
      <td class="mono">${esc(d.milestoneId)}</td>
      <td>${esc(d.title)}</td>
      <td class="mono">${d.state}</td>
      <td>${d.hasContext ? "yes" : ""}</td>
      <td>${d.hasDraft ? "draft" : ""}</td>
      <td class="muted">${d.lastUpdated ? formatDateShort(d.lastUpdated) : ""}</td>
    </tr>`,
		)
		.join("");
	return section(
		"discussion",
		"Planning",
		`
    <table class="tbl">
      <thead><tr><th>ID</th><th>Milestone</th><th>State</th><th>Context</th><th>Draft</th><th>Updated</th></tr></thead>
      <tbody>${rows}</tbody>
    </table>`,
	);
}
// ─── Primitives ────────────────────────────────────────────────────────────────
function section(id, title, body) {
	return `\n<section id="${id}">\n  <h2>${title}</h2>\n  ${body}\n</section>`;
}
function kvi(label, value) {
	return `<div class="kv"><span class="kv-val">${esc(value)}</span><span class="kv-lbl">${esc(label)}</span></div>`;
}
function hRow(label, value, status) {
	const cls = status ? ` class="h-${status}"` : "";
	return `<tr${cls}><td>${esc(label)}</td><td>${esc(value)}</td></tr>`;
}
function shortModel(m) {
	return m.replace(/^claude-/, "").replace(/^anthropic\//, "");
}
function truncStr(s, n) {
	return s.length > n ? s.slice(0, n - 1) + "\u2026" : s;
}
function formatDateLong(iso) {
	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 esc(s) {
	if (s == null) return "";
	return String(s)
		.replace(/&/g, "&amp;")
		.replace(/</g, "&lt;")
		.replace(/>/g, "&gt;")
		.replace(/"/g, "&quot;")
		.replace(/'/g, "&#39;");
}
// ─── 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)}
.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}
.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: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}
.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)}

/* 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}
  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);
})();
(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('sf-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('sf-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('sf-theme')==='light'?'Dark':'Light';
  if(localStorage.getItem('sf-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('sf-theme',isLight?'light':'dark');
  });
  hr.prepend(btn);
})();
`;
