coding-agent-harness 1.0.0

package/templates/dashboard/assets/app.js

@@ -0,0 +1,435 @@
+const bundle = window.__HARNESS_DASHBOARD__ || {};
+const state = {
+  page: "overview",
+  lang: "en",
+  theme: localStorage.getItem("harness.theme") || "system",
+  density: localStorage.getItem("harness.density") || "comfortable",
+  selected: null,
+  tab: "plan",
+  renderMode: "rendered",
+};
+
+const pageKeys = ["overview", "ledger", "tasks", "modules", "evidence", "lessons", "adoption", "settings"];
+const taskDocTabs = [
+  ["plan", "task_plan.md"],
+  ["strategy", "execution_strategy.md"],
+  ["roadmap", "visual_roadmap.md"],
+  ["progress", "progress.md"],
+  ["review", "review.md"],
+  ["findings", "findings.md"],
+  ["references", "references/INDEX.md"],
+  ["artifacts", "artifacts/INDEX.md"],
+];
+
+function t(key) {
+  return (window.HarnessI18n?.en || {})[key] || key;
+}
+
+function app() {
+  const systemTheme = window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.dataset.theme = state.theme === "system" ? systemTheme : state.theme;
+  document.documentElement.dataset.density = state.density;
+  document.documentElement.lang = "en";
+  const root = document.getElementById("app");
+  root.innerHTML = `
+    <div class="layout">
+      <aside class="sidebar">
+        <div class="brand">
+          <strong>${escapeHtml(bundle.status?.project?.name || "Harness")}</strong>
+          <span>${escapeHtml(bundle.status?.project?.root || "TARGET:.")}</span>
+        </div>
+        <nav class="nav">${pageKeys.map((page) => navButton(page)).join("")}</nav>
+      </aside>
+      <main class="main">
+        ${topbar()}
+        ${renderPage()}
+      </main>
+    </div>`;
+  bind();
+}
+
+function navButton(page) {
+  return `<button data-page="${page}" class="${state.page === page ? "active" : ""}">${t(page)}</button>`;
+}
+
+function topbar() {
+  return `<div class="topbar">
+    <div>
+      <p class="eyebrow">Coding Agent Harness Dashboard</p>
+      <h1>${escapeHtml(pageTitle())}</h1>
+    </div>
+    <div class="controls">
+      <div class="control">
+        <button data-theme="light" class="${state.theme === "light" ? "active" : ""}">${t("light")}</button>
+        <button data-theme="dark" class="${state.theme === "dark" ? "active" : ""}">${t("dark")}</button>
+        <button data-theme="system" class="${state.theme === "system" ? "active" : ""}">${t("system")}</button>
+      </div>
+      <div class="control">
+        <button data-density="compact" class="${state.density === "compact" ? "active" : ""}">${t("compact")}</button>
+        <button data-density="comfortable" class="${state.density === "comfortable" ? "active" : ""}">${t("comfortable")}</button>
+      </div>
+    </div>
+  </div>`;
+}
+
+function pageTitle() {
+  const project = bundle.status?.project?.name || "project";
+  if (state.page === "overview") return `${project} project cockpit`;
+  return t(state.page);
+}
+
+function renderPage() {
+  if (state.page === "overview") return overview();
+  if (state.page === "ledger") return withDrawer(ledgerTable());
+  if (state.page === "tasks") return withDrawer(taskTable());
+  if (state.page === "modules") return withDrawer(moduleTable());
+  if (state.page === "evidence") return withDrawer(evidenceTable());
+  if (state.page === "lessons") return withDrawer(lessonsTable());
+  if (state.page === "adoption") return adoption();
+  return settings();
+}
+
+function overview() {
+  const status = bundle.status || {};
+  const evidence = evidenceHealth(status.tasks || []);
+  const blockers = status.checkState?.failures || 0;
+  const warnings = status.checkState?.warnings || 0;
+  return `<section class="status-grid">
+    <div class="readiness panel">
+    <span class="state ${status.checkState?.status || "warn"}">${t("readiness")}: ${label(status.checkState?.status || "unknown")}</span>
+      <h2>${nextActionText()}</h2>
+      <p class="muted">Blockers, evidence gaps, and adoption advice are separated.</p>
+    </div>
+    ${metric(t("activeTasks"), status.tasks?.length || 0)}
+    ${metric(t("blockers"), blockers)}
+    ${metric(t("warnings"), warnings)}
+  </section>
+  <section class="page-grid">
+    <div>
+      ${overviewTasks()}
+      ${ledgerSummary()}
+      ${riskPanel()}
+    </div>
+    ${drawer()}
+  </section>`;
+}
+
+function metric(label, value) {
+  return `<div class="metric"><span>${label}</span><strong>${value}</strong></div>`;
+}
+
+function nextActionText() {
+  const failures = bundle.status?.checkState?.failures || 0;
+  if (failures > 0) return "Resolve release blockers first";
+  const advice = bundle.adoption?.warnings?.length || 0;
+  if (advice > 0) return "Proceed, with adoption advice to address";
+  return "No blockers in this snapshot";
+}
+
+function overviewTasks() {
+  const rows = (bundle.status?.tasks || []).slice(0, 6);
+  return tablePanel(t("tasks"), [t("task"), t("state"), t("completion"), t("roadmapSource")], rows.map((task) => [
+    clickable(task.title, "task", task.id),
+    tag(task.state, label(task.state)),
+    progress(task.completion),
+    escapeHtml(label(task.roadmapSource || "unknown")),
+  ]));
+}
+
+function riskPanel() {
+  const warnings = bundle.adoption?.warnings || [];
+  const grouped = groupBy(warnings, (item) => item.category);
+  return `<section class="panel" style="padding:16px;margin-top:16px">
+    <h2>Risks and adoption advice</h2>
+    <div class="risk-list">${Object.entries(grouped).map(([category, items]) => `
+      <div class="risk-item"><strong>${escapeHtml(category)}</strong><p class="muted">${items.length} items</p></div>
+    `).join("") || `<p class="empty">No advice</p>`}</div>
+  </section>`;
+}
+
+function taskTable() {
+  const rows = bundle.status?.tasks || [];
+  return tablePanel(t("tasks"), [t("task"), t("state"), t("completion"), t("evidence"), t("roadmapSource")], rows.map((task) => [
+    clickable(task.title, "task", task.id),
+    tag(task.state, label(task.state)),
+    progress(task.completion),
+    progress(evidenceHealth([task])),
+    escapeHtml(label(task.roadmapSource || "unknown")),
+  ]));
+}
+
+function ledgerSummary() {
+  const tables = (bundle.tables?.tables || []).filter((table) => table.kind === "harness-ledger");
+  if (tables.length === 0) return "";
+  const rows = tables.flatMap((table) => table.rows).slice(0, 5);
+  return `<section class="panel ledger-summary">
+    <div class="panel-head"><h2>${t("ledger")}</h2><span class="muted">${rows.length}</span></div>
+    <div class="risk-list">${rows.map((row) => {
+      const cells = row.cells || {};
+      const title = cells.Task || cells.ID || cells.Item || cells.Title || cells.Module || "Ledger item";
+      const state = cells.State || cells.Status || cells.Review || cells["Review State"] || "";
+      const action = cells["Next Action"] || cells.Action || cells.Owner || cells["Required Action"] || "";
+      return `<div class="risk-item"><strong>${escapeHtml(title)}</strong><p class="muted">${escapeHtml([label(state), action].filter(Boolean).join(" · "))}</p></div>`;
+    }).join("")}</div>
+  </section>`;
+}
+
+function ledgerTable() {
+  const tables = (bundle.tables?.tables || []).filter((table) => table.kind === "harness-ledger");
+  if (tables.length === 0) return emptyTable(t("ledger"), "No Harness Ledger found.");
+  return genericTables(t("ledger"), tables);
+}
+
+function moduleTable() {
+  const tables = (bundle.tables?.tables || []).filter((table) => table.kind === "module-registry");
+  const graph = graphPanel();
+  if (tables.length === 0) return `${graph}${emptyTable(t("modules"), "No Module Registry found.")}`;
+  return `${graph}${genericTables(t("modules"), tables)}`;
+}
+
+function evidenceTable() {
+  const items = evidenceItems();
+  return tablePanel(t("evidence"), [t("origin"), t("task"), t("state"), t("title"), t("affected")], items.map((item) => [
+    escapeHtml(label(item.source)),
+    escapeHtml(item.task || "-"),
+    tag(item.state || "present", label(item.state || "present")),
+    escapeHtml(item.title),
+    escapeHtml(item.affected || ""),
+  ]));
+}
+
+function evidenceItems() {
+  const taskEvidence = (bundle.status?.tasks || []).flatMap((task) => [
+    ...(task.evidence || []).map((item) => ({
+      source: item.type || "task-progress",
+      task: task.title,
+      state: item.status || "present",
+      title: item.summary || item.id,
+      affected: item.path || "",
+    })),
+    ...(task.risks || []).map((item) => ({
+      source: "task-review",
+      task: task.title,
+      state: item.open ? "open" : "closed",
+      title: item.summary || item.id,
+      affected: `${item.severity || ""}${item.blocksRelease ? " · blocks" : ""}`.trim(),
+    })),
+  ]);
+  const qaTables = (bundle.tables?.tables || [])
+    .filter((table) => ["task-review", "regression-ssot", "cadence-ledger"].includes(table.kind))
+    .flatMap((table) => table.rows.slice(0, 12).map((row) => {
+      const cells = row.cells || {};
+      return {
+        source: table.kind,
+        task: cells.Task || cells.Module || cells.ID || "-",
+        state: cells.Status || cells.State || cells.Open || cells.Verdict || "present",
+        title: cells.Finding || cells.Summary || cells.Check || cells.Item || cells.Title || table.source,
+        affected: cells["Evidence Checked"] || cells.Path || cells.Owner || cells["Required Action"] || table.source,
+      };
+    }));
+  return [...taskEvidence, ...qaTables];
+}
+
+function lessonsTable() {
+  const tables = (bundle.tables?.tables || []).filter((table) => table.kind === "lessons-ssot");
+  if (tables.length === 0) return emptyTable(t("lessons"), "No Lessons SSoT found.");
+  return genericTables(t("lessons"), tables);
+}
+
+function adoption() {
+  const advice = bundle.adoption?.warnings || [];
+  return `<section class="page-grid">
+    <div>
+      ${tablePanel(t("adoption"), [t("category"), t("severity"), t("title"), t("affected"), t("requiredAction")], advice.map((item) => [
+        escapeHtml(item.category),
+        tag(item.severity, label(item.severity)),
+        escapeHtml(item.title),
+        escapeHtml(item.affected),
+        escapeHtml(item.requiredAction),
+      ]))}
+      <section class="panel" style="padding:16px;margin-top:16px">
+        <h2>${t("nextAction")}</h2>
+        <ol>${((bundle.adoption?.manualSteps || {})[state.lang] || []).map((step) => `<li>${escapeHtml(step)}</li>`).join("")}</ol>
+      </section>
+    </div>
+    ${drawer()}
+  </section>`;
+}
+
+function settings() {
+  return `<section class="panel" style="padding:18px">
+    <h2>${t("settings")}</h2>
+    <p class="muted">These settings are browser-local and never write back to the project.</p>
+    <p>${t("rendered")} / ${t("source")}: Switch inside the detail drawer.</p>
+  </section>`;
+}
+
+function withDrawer(content) {
+  return `<section class="page-grid"><div>${content}</div>${drawer()}</section>`;
+}
+
+function tablePanel(title, headers, rows) {
+  return `<section class="table-panel">
+    <div class="panel-head"><h2>${escapeHtml(title)}</h2><span class="muted">${rows.length}</span></div>
+    <div class="table-wrap"><table>
+      <thead><tr>${headers.map((header) => `<th>${escapeHtml(header)}</th>`).join("")}</tr></thead>
+      <tbody>${rows.map((row) => `<tr>${row.map((cell) => `<td>${cell}</td>`).join("")}</tr>`).join("")}</tbody>
+    </table></div>
+  </section>`;
+}
+
+function genericTables(title, tables) {
+  return tables.map((table) => tablePanel(`${title} · ${table.source}`, table.columns, table.rows.map((row) => table.columns.map((column) => escapeHtml(row.cells[column] || ""))))).join("");
+}
+
+function graphPanel() {
+  const graph = bundle.graph || { nodes: [], edges: [] };
+  const modules = graph.nodes.filter((node) => node.type === "module");
+  const fallbackTasks = graph.nodes.filter((node) => node.type === "task");
+  const laneNodes = modules.length > 0 ? modules : fallbackTasks;
+  const edges = graph.edges || [];
+  return `<section class="panel graph-panel">
+    <div class="panel-head"><h2>${t("graph")}</h2><span class="muted">${modules.length} modules · ${fallbackTasks.length} tasks · ${edges.length} edges</span></div>
+    <div class="graph-lanes">${laneNodes.slice(0, 12).map((module) => {
+      const owned = edges.filter((edge) => edge.from === module.id).slice(0, 8);
+      return `<div class="lane"><strong>${escapeHtml(module.label)}</strong><span>${label(module.state || "")}</span>${owned.map((edge) => `<small>${escapeHtml(edge.type)} → ${escapeHtml(edge.to.replace(/^step:/, ""))}</small>`).join("")}</div>`;
+    }).join("") || `<p class="empty">No module graph data</p>`}</div>
+  </section>`;
+}
+
+function emptyTable(title, message) {
+  return `<section class="table-panel"><div class="panel-head"><h2>${escapeHtml(title)}</h2></div><p class="empty">${escapeHtml(message)}</p></section>`;
+}
+
+function drawer() {
+  const selection = state.selected;
+  if (!selection) {
+    return `<aside class="drawer"><div class="drawer-head"><h2>${t("detail")}</h2></div><div class="drawer-body empty">${t("noSelection")}</div></aside>`;
+  }
+  const docs = docsForSelection(selection);
+  const active = docs.find((doc) => doc.tab === state.tab) || docs[0];
+  return `<aside class="drawer">
+    <div class="drawer-head"><h2>${escapeHtml(selection.label)}</h2><p class="muted">${escapeHtml(active?.path || "")}</p></div>
+    <div class="drawer-tabs">${docs.map((doc) => `<button data-tab="${doc.tab}" class="${active?.tab === doc.tab ? "active" : ""}">${t(doc.tab)}</button>`).join("")}</div>
+    <div class="drawer-mode"><button data-render-mode="rendered" class="${state.renderMode === "rendered" ? "active" : ""}">${t("rendered")}</button><button data-render-mode="source" class="${state.renderMode === "source" ? "active" : ""}">${t("source")}</button></div>
+    <div class="drawer-body"><article class="markdown">${active ? window.HarnessMarkdown.render(active.content, state.renderMode) : t("noSelection")}</article></div>
+  </aside>`;
+}
+
+function docsForSelection(selection) {
+  if (selection.type !== "task") return [];
+  const task = (bundle.status?.tasks || []).find((item) => item.id === selection.id);
+  if (!task) return [];
+  return taskDocTabs.map(([tab, suffix]) => {
+    const doc = findDocument(`${task.path}/${suffix}`);
+    return doc ? { tab, ...doc } : null;
+  }).filter(Boolean);
+}
+
+function findDocument(pathSuffix) {
+  return (bundle.documents?.documents || []).find((doc) => doc.path.endsWith(pathSuffix));
+}
+
+function clickable(label, type, id) {
+  return `<button class="linklike" data-select-type="${type}" data-select-id="${id}" data-select-label="${escapeAttr(label)}">${escapeHtml(label)}</button>`;
+}
+
+function tag(value, text = value) {
+  const raw = String(value || "unknown");
+  const klass = /fail|blocked|open/i.test(raw) ? "fail" : /warn|advice|planned|missing/i.test(raw) ? "warn" : /pass|done|present|verified/i.test(raw) ? "pass" : "";
+  return `<span class="tag ${klass}">${escapeHtml(text)}</span>`;
+}
+
+function label(value) {
+  const labels = {
+    pass: "pass",
+    warn: "warn",
+    fail: "fail",
+    in_progress: "in progress",
+    planned: "planned",
+    done: "done",
+    blocked: "blocked",
+    missing: "missing",
+    present: "present",
+    closed: "closed",
+    advice: "advice",
+    standalone: "standalone",
+    legacy: "legacy",
+    "task-review": "review",
+    "task-progress": "progress",
+    "regression-ssot": "regression",
+    "cadence-ledger": "cadence",
+    unknown: "unknown",
+  };
+  return labels[value] || value;
+}
+
+function progress(value) {
+  const score = Math.max(0, Math.min(100, Number(value) || 0));
+  return `<span>${score}%</span><div class="bar"><i style="width:${score}%"></i></div>`;
+}
+
+function evidenceHealth(tasks) {
+  const phases = tasks.flatMap((task) => task.phases || []).filter((phase) => phase.state !== "skipped");
+  if (phases.length === 0) return 0;
+  const score = phases.reduce((sum, phase) => {
+    if (["present", "waived"].includes(phase.evidenceStatus)) return sum + 100;
+    if (phase.evidenceStatus === "partial") return sum + 50;
+    return sum;
+  }, 0);
+  return Math.round(score / phases.length);
+}
+
+function groupBy(items, fn) {
+  return items.reduce((acc, item) => {
+    const key = fn(item);
+    acc[key] ||= [];
+    acc[key].push(item);
+    return acc;
+  }, {});
+}
+
+function bind() {
+  document.querySelectorAll("[data-page]").forEach((button) => button.addEventListener("click", () => {
+    state.page = button.dataset.page;
+    state.selected = null;
+    app();
+  }));
+  document.querySelectorAll("[data-theme]").forEach((button) => button.addEventListener("click", () => {
+    state.theme = button.dataset.theme;
+    localStorage.setItem("harness.theme", state.theme);
+    app();
+  }));
+  document.querySelectorAll("[data-density]").forEach((button) => button.addEventListener("click", () => {
+    state.density = button.dataset.density;
+    localStorage.setItem("harness.density", state.density);
+    app();
+  }));
+  document.querySelectorAll("[data-select-type]").forEach((button) => button.addEventListener("click", () => {
+    state.selected = { type: button.dataset.selectType, id: button.dataset.selectId, label: button.dataset.selectLabel };
+    state.tab = "plan";
+    app();
+  }));
+  document.querySelectorAll("[data-tab]").forEach((button) => button.addEventListener("click", () => {
+    state.tab = button.dataset.tab;
+    app();
+  }));
+  document.querySelectorAll("[data-render-mode]").forEach((button) => button.addEventListener("click", () => {
+    state.renderMode = button.dataset.renderMode;
+    app();
+  }));
+}
+
+function escapeHtml(value) {
+  return String(value ?? "")
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}
+
+function escapeAttr(value) {
+  return escapeHtml(value).replaceAll("'", "&#39;");
+}
+
+app();

package/templates/dashboard/assets/i18n.js

@@ -0,0 +1,47 @@
+window.HarnessI18n = {
+  en: {
+    overview: "Overview",
+    ledger: "Ledger",
+    tasks: "Tasks",
+    modules: "Modules",
+    evidence: "Evidence",
+    lessons: "Lessons",
+    adoption: "Adoption",
+    settings: "Settings",
+    system: "System",
+    readiness: "Readiness",
+    blockers: "Blockers",
+    warnings: "Advice",
+    nextAction: "Next action",
+    activeTasks: "Active tasks",
+    evidenceHealth: "Evidence health",
+    detail: "Detail",
+    plan: "Plan",
+    strategy: "Execution strategy",
+    roadmap: "Visual roadmap",
+    progress: "Progress",
+    review: "Review",
+    findings: "Findings",
+    references: "References",
+    artifacts: "Artifacts",
+    source: "Source",
+    rendered: "Rendered",
+    light: "Light",
+    dark: "Dark",
+    compact: "Compact",
+    comfortable: "Comfortable",
+    noSelection: "Select a row to inspect the document snapshot",
+    task: "Task",
+    state: "State",
+    completion: "Completion",
+    roadmapSource: "Roadmap",
+    category: "Category",
+    severity: "Severity",
+    title: "Title",
+    affected: "Affected",
+    requiredAction: "Required action",
+    message: "Detail",
+    graph: "Graph",
+    origin: "Source",
+  },
+};

package/templates/dashboard/assets/markdown-reader.js

@@ -0,0 +1,116 @@
+window.HarnessMarkdown = {
+  render(markdown = "", mode = "rendered") {
+    if (mode === "source") return `<pre><code>${escapeHtml(markdown)}</code></pre>`;
+    return renderBlocks(markdown);
+  },
+};
+
+function renderBlocks(markdown) {
+  const lines = String(markdown || "").split(/\r?\n/);
+  const blocks = [];
+  let index = 0;
+  while (index < lines.length) {
+    const line = lines[index];
+    if (!line.trim()) {
+      index += 1;
+      continue;
+    }
+    if (line.startsWith("```")) {
+      const lang = line.slice(3).trim();
+      const code = [];
+      index += 1;
+      while (index < lines.length && !lines[index].startsWith("```")) {
+        code.push(lines[index]);
+        index += 1;
+      }
+      index += 1;
+      blocks.push(lang === "mermaid" ? window.HarnessMermaid.render(code.join("\n")) : `<pre><code>${escapeHtml(code.join("\n"))}</code></pre>`);
+      continue;
+    }
+    if (/^#{1,3}\s+/.test(line)) {
+      const level = line.match(/^#+/)[0].length;
+      blocks.push(`<h${level}>${inline(line.replace(/^#{1,3}\s+/, ""))}</h${level}>`);
+      index += 1;
+      continue;
+    }
+    if (isTableStart(lines, index)) {
+      const table = [];
+      while (index < lines.length && lines[index].trim().startsWith("|")) {
+        table.push(lines[index]);
+        index += 1;
+      }
+      blocks.push(renderTable(table));
+      continue;
+    }
+    if (/^[-*]\s+/.test(line)) {
+      const items = [];
+      while (index < lines.length && /^[-*]\s+/.test(lines[index])) {
+        items.push(`<li>${inline(lines[index].replace(/^[-*]\s+/, ""))}</li>`);
+        index += 1;
+      }
+      blocks.push(`<ul>${items.join("")}</ul>`);
+      continue;
+    }
+    const paragraph = [];
+    while (index < lines.length && lines[index].trim() && !/^#{1,3}\s+/.test(lines[index]) && !lines[index].startsWith("```") && !isTableStart(lines, index)) {
+      paragraph.push(lines[index]);
+      index += 1;
+    }
+    blocks.push(`<p>${inline(paragraph.join(" "))}</p>`);
+  }
+  return blocks.join("");
+}
+
+function isTableStart(lines, index) {
+  return lines[index]?.trim().startsWith("|") && /^(\s*\|?\s*:?-{3,}:?\s*)+\|?\s*$/.test(lines[index + 1] || "");
+}
+
+function renderTable(lines) {
+  const rows = lines.map(splitMarkdownRow);
+  const header = rows[0] || [];
+  const body = rows.slice(2).filter((row) => row.length === header.length);
+  return `<div class="rendered-table-wrap"><table class="rendered-table">
+    <thead><tr>${header.map((cell) => `<th>${inline(cell)}</th>`).join("")}</tr></thead>
+    <tbody>${body.map((row) => `<tr>${row.map((cell) => `<td>${inline(cell)}</td>`).join("")}</tr>`).join("")}</tbody>
+  </table></div>`;
+}
+
+function splitMarkdownRow(line) {
+  let text = String(line || "").trim();
+  if (text.startsWith("|")) text = text.slice(1);
+  if (text.endsWith("|") && !text.endsWith("\\|")) text = text.slice(0, -1);
+  const cells = [];
+  let current = "";
+  let inCode = false;
+  for (let index = 0; index < text.length; index += 1) {
+    const char = text[index];
+    if (char === "\\" && text[index + 1] === "|") {
+      current += "|";
+      index += 1;
+      continue;
+    }
+    if (char === "`") inCode = !inCode;
+    if (char === "|" && !inCode) {
+      cells.push(current.trim());
+      current = "";
+      continue;
+    }
+    current += char;
+  }
+  cells.push(current.trim());
+  return cells;
+}
+
+function inline(value) {
+  return escapeHtml(value)
+    .replace(/`([^`]+)`/g, "<code>$1</code>")
+    .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+}
+
+function escapeHtml(value) {
+  return String(value ?? "")
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}

package/templates/dashboard/assets/mermaid-renderer.js

@@ -0,0 +1,59 @@
+window.HarnessMermaid = {
+  render(code = "") {
+    const parsed = parseFlowchart(code);
+    if (!parsed) {
+      return `<figure class="mermaid-fallback">
+        <figcaption>Mermaid source</figcaption>
+        <pre>${escapeMermaid(code)}</pre>
+      </figure>`;
+    }
+    return renderSvg(parsed);
+  },
+};
+
+function parseFlowchart(code) {
+  const lines = String(code || "").split(/\r?\n/).map((line) => line.trim()).filter(Boolean);
+  if (!/^flowchart\s+(LR|TB|TD|RL|BT)/i.test(lines[0] || "")) return null;
+  const nodes = new Map();
+  const edges = [];
+  for (const line of lines.slice(1)) {
+    const edgeMatch = line.match(/^([A-Za-z0-9_-]+)(?:\["([^"]+)"\])?\s*-+>\s*([A-Za-z0-9_-]+)(?:\["([^"]+)"\])?/);
+    if (!edgeMatch) continue;
+    const [, from, fromLabel, to, toLabel] = edgeMatch;
+    nodes.set(from, fromLabel || from);
+    nodes.set(to, toLabel || to);
+    edges.push([from, to]);
+  }
+  if (nodes.size === 0) return null;
+  return { nodes: [...nodes.entries()], edges };
+}
+
+function renderSvg({ nodes, edges }) {
+  const width = Math.max(360, nodes.length * 150);
+  const height = 150;
+  const positions = new Map(nodes.map(([id], index) => [id, { x: 70 + index * 140, y: 70 }]));
+  const nodeSvg = nodes.map(([id, label]) => {
+    const pos = positions.get(id);
+    return `<g class="mermaid-node">
+      <rect x="${pos.x - 54}" y="${pos.y - 24}" width="108" height="48" rx="8"></rect>
+      <text x="${pos.x}" y="${pos.y + 4}" text-anchor="middle">${escapeMermaid(label).replaceAll("\\n", " ")}</text>
+    </g>`;
+  }).join("");
+  const edgeSvg = edges.map(([from, to]) => {
+    const a = positions.get(from);
+    const b = positions.get(to);
+    if (!a || !b) return "";
+    return `<path class="mermaid-edge" d="M ${a.x + 54} ${a.y} L ${b.x - 62} ${b.y}"></path><path class="mermaid-arrow" d="M ${b.x - 62} ${b.y} l -7 -5 v 10 z"></path>`;
+  }).join("");
+  return `<figure class="mermaid-rendered">
+    <figcaption>Mermaid</figcaption>
+    <svg viewBox="0 0 ${width} ${height}" role="img" aria-label="Mermaid flowchart">${edgeSvg}${nodeSvg}</svg>
+  </figure>`;
+}
+
+function escapeMermaid(value) {
+  return String(value ?? "")
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}

package/templates/dashboard/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Harness Dashboard</title>
+  <link rel="icon" href="data:,">
+  <link rel="stylesheet" href="./assets/app.css">
+</head>
+<body>
+  <div id="app" class="app-shell" aria-live="polite"></div>
+  <script src="./assets/dashboard-data.js"></script>
+  <script src="./assets/i18n.js"></script>
+  <script src="./assets/markdown-reader.js"></script>
+  <script src="./assets/mermaid-renderer.js"></script>
+  <script src="./assets/app.js"></script>
+</body>
+</html>