spectoflow 0.12.0

package/templates/dashboard/public/charts.js

@@ -0,0 +1,192 @@
+'use strict';
+// Pure SVG chart builders — no DOM, no fetch, just strings. Node-testable and
+// browser-usable (UMD, same pattern as stats.js). Callers own colours (design
+// tokens) and drop the returned markup straight into innerHTML.
+(function (root) {
+  // polar(cx,cy,r,deg) -> [x,y] on the circle, 0deg = top (12 o'clock), increasing clockwise.
+  function polar(cx, cy, r, deg) {
+    const rad = (deg * Math.PI) / 180;
+    return [cx + r * Math.sin(rad), cy - r * Math.cos(rad)];
+  }
+
+  const esc = (v) => String(v == null ? '' : v).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  const n2 = (v) => (Math.round(v * 100) / 100).toString();
+
+  // donut(segs, opts) — segs=[{value,color,label}]. One <path> arc per non-zero
+  // segment (zeros skipped), small gap between arcs, staggered draw via --i,
+  // optional centre value/sub label.
+  function donut(segs, opts) {
+    opts = opts || {};
+    segs = segs || [];
+    const size = opts.size || 140;
+    const stroke = opts.stroke || 16;
+    const cx = size / 2, cy = size / 2;
+    const r = (size - stroke) / 2;
+    const gap = opts.gap != null ? opts.gap : 3; // degrees
+    const total = segs.reduce((a, s) => a + (s.value || 0), 0);
+
+    let angle = 0, i = 0, arcs = '';
+    segs.forEach((s) => {
+      const v = s.value || 0;
+      if (!v) return;
+      const sweep = total ? (v / total) * 360 : 0;
+      const halfGap = sweep > gap ? gap / 2 : 0;
+      const start = angle + halfGap;
+      const end = angle + sweep - halfGap;
+      const [x0, y0] = polar(cx, cy, r, start);
+      const [x1, y1] = polar(cx, cy, r, end);
+      const large = end - start > 180 ? 1 : 0;
+      arcs += `<path d="M ${n2(x0)} ${n2(y0)} A ${n2(r)} ${n2(r)} 0 ${large} 1 ${n2(x1)} ${n2(y1)}" fill="none" stroke="${esc(s.color)}" stroke-width="${stroke}" stroke-linecap="round" class="seg-anim" style="--i:${i}"><title>${esc(s.label)}</title></path>`;
+      angle += sweep;
+      i++;
+    });
+
+    const center = opts.center != null
+      ? `<text x="${cx}" y="${total ? cy - 2 : cy}" text-anchor="middle" dominant-baseline="middle" class="donut-total" style="fill:var(--ink)">${esc(opts.center)}</text>`
+      : '';
+    const sub = opts.sub
+      ? `<text x="${cx}" y="${cy + 15}" text-anchor="middle" class="donut-sub" style="fill:var(--faint)">${esc(opts.sub)}</text>`
+      : '';
+
+    return `<svg viewBox="0 0 ${size} ${size}" width="${size}" height="${size}" class="donut-svg">` +
+      `<circle cx="${cx}" cy="${cy}" r="${n2(r)}" fill="none" stroke="var(--line)" stroke-width="${stroke}"/>` +
+      arcs + center + sub +
+      `</svg>`;
+  }
+
+  // area(series, labels, opts) — series=[{name,color,data:[...]}]. A 4-line
+  // horizontal grid + y labels, one smoothed (Catmull-Rom) line + filled area
+  // per series, dots + value labels, transparent per-x hover hit-rects, x labels.
+  function smoothPath(pts) {
+    if (!pts.length) return '';
+    if (pts.length === 1) return `M ${n2(pts[0][0])} ${n2(pts[0][1])}`;
+    let d = `M ${n2(pts[0][0])} ${n2(pts[0][1])}`;
+    for (let i = 0; i < pts.length - 1; i++) {
+      const p0 = pts[i - 1] || pts[i];
+      const p1 = pts[i];
+      const p2 = pts[i + 1];
+      const p3 = pts[i + 2] || p2;
+      const c1x = p1[0] + (p2[0] - p0[0]) / 6;
+      const c1y = p1[1] + (p2[1] - p0[1]) / 6;
+      const c2x = p2[0] - (p3[0] - p1[0]) / 6;
+      const c2y = p2[1] - (p3[1] - p1[1]) / 6;
+      d += ` C ${n2(c1x)} ${n2(c1y)}, ${n2(c2x)} ${n2(c2y)}, ${n2(p2[0])} ${n2(p2[1])}`;
+    }
+    return d;
+  }
+
+  function area(series, labels, opts) {
+    opts = opts || {};
+    series = series || [];
+    labels = labels || [];
+    const width = opts.width || 480;
+    const height = opts.height || 180;
+    const padL = opts.padLeft != null ? opts.padLeft : 32;
+    const padR = opts.padRight != null ? opts.padRight : 10;
+    const padT = opts.padTop != null ? opts.padTop : 10;
+    const padB = opts.padBottom != null ? opts.padBottom : 22;
+    const innerW = Math.max(0, width - padL - padR);
+    const innerH = Math.max(0, height - padT - padB);
+
+    const n = labels.length || series.reduce((a, s) => Math.max(a, (s.data || []).length), 0);
+    const allVals = series.reduce((a, s) => a.concat(s.data || []), []);
+    const dataMax = allVals.length ? Math.max.apply(null, allVals) : 0;
+    const max = opts.max != null ? opts.max : Math.max(1, Math.ceil(dataMax));
+
+    const x = (i) => (n > 1 ? padL + (innerW * i) / (n - 1) : padL + innerW / 2);
+    const y = (v) => padT + innerH - (innerH * v) / max;
+    const baseline = padT + innerH;
+
+    // grid: 4 horizontal lines + y labels
+    const steps = 4;
+    let grid = '';
+    for (let g = 0; g <= steps; g++) {
+      const gy = padT + (innerH * g) / steps;
+      const val = Math.round(max - (max * g) / steps);
+      grid += `<line x1="${n2(padL)}" y1="${n2(gy)}" x2="${n2(padL + innerW)}" y2="${n2(gy)}" class="area-grid" stroke="var(--line)"/>`;
+      grid += `<text x="${n2(padL - 8)}" y="${n2(gy + 3)}" text-anchor="end" class="area-ylabel" style="fill:var(--faint)">${val}</text>`;
+    }
+
+    let xlabels = '';
+    labels.forEach((lb, i) => {
+      xlabels += `<text x="${n2(x(i))}" y="${n2(height - 4)}" text-anchor="middle" class="area-xlabel" style="fill:var(--faint)">${esc(lb)}</text>`;
+    });
+
+    let seriesMarkup = '';
+    series.forEach((s, si) => {
+      const data = s.data || [];
+      const pts = data.map((v, i) => [x(i), y(v)]);
+      const linePath = smoothPath(pts);
+      let fillPath = linePath;
+      if (pts.length) {
+        fillPath += ` L ${n2(pts[pts.length - 1][0])} ${n2(baseline)} L ${n2(pts[0][0])} ${n2(baseline)} Z`;
+      }
+      seriesMarkup += `<path d="${fillPath}" fill="${esc(s.color)}" fill-opacity="0.13" stroke="none" class="area-fill"/>`;
+      seriesMarkup += `<path d="${linePath}" fill="none" stroke="${esc(s.color)}" stroke-width="2" class="area-line" pathLength="1" style="--i:${si}"/>`;
+      pts.forEach((p, i) => {
+        seriesMarkup += `<circle cx="${n2(p[0])}" cy="${n2(p[1])}" r="3" fill="${esc(s.color)}" class="area-dot"/>`;
+        seriesMarkup += `<text x="${n2(p[0])}" y="${n2(p[1] - 8)}" text-anchor="middle" class="area-value" style="fill:var(--ink)">${esc(data[i])}</text>`;
+      });
+    });
+
+    let tips = '';
+    for (let i = 0; i < n; i++) {
+      const cx = x(i);
+      const w = n > 1 ? innerW / (n - 1) : innerW;
+      tips += `<rect x="${n2(cx - w / 2)}" y="${n2(padT)}" width="${n2(w)}" height="${n2(innerH)}" fill="transparent" class="area-hit" data-tip="${esc(labels[i])}"/>`;
+    }
+
+    return `<svg viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" class="area-svg">` +
+      `<g class="area-grid-g">${grid}</g>` +
+      seriesMarkup +
+      `<g class="area-xlabels">${xlabels}</g>` +
+      `<g class="area-tips">${tips}</g>` +
+      `</svg>`;
+  }
+
+  // bars(items, opts) — items=[{label,value,sub,color,suffix}]. Rows with a
+  // track + .bar-fill (width via --w, staggered via --i) and a count-up span.
+  function bars(items, opts) {
+    opts = opts || {};
+    items = items || [];
+    if (!items.length) return `<div class="empty">${esc(opts.empty || 'No phases yet.')}</div>`;
+    let rows = '';
+    items.forEach((it, i) => {
+      const pct = Math.max(0, Math.min(100, it.value || 0));
+      const fillStyle = `width:${n2(pct)}%; --w:${n2(pct)}; --i:${i}` + (it.color ? `; background:${esc(it.color)}` : '');
+      rows += `<div class="bar-row">` +
+        `<div class="bar-head">` +
+          `<span class="bar-label">${esc(it.label)}</span>` +
+          `<span class="bar-sub">${esc(it.sub || '')}</span>` +
+          `<span class="bar-count" data-count="${it.value || 0}">0${esc(it.suffix || '')}</span>` +
+        `</div>` +
+        `<div class="bar-track"><div class="bar-fill" style="${fillStyle}"></div></div>` +
+        `</div>`;
+    });
+    return `<div class="bars">${rows}</div>`;
+  }
+
+  // ring(pct, opts) — a progress ring: track circle + foreground arc via
+  // stroke-dasharray/offset (stroke="url(#grad)" — caller provides the
+  // <linearGradient id="grad"> once), centre pct% text.
+  function ring(pct, opts) {
+    opts = opts || {};
+    pct = Math.max(0, Math.min(100, pct || 0));
+    const size = opts.size || 72;
+    const stroke = opts.stroke || 7;
+    const cx = size / 2, cy = size / 2;
+    const r = (size - stroke) / 2;
+    const c = 2 * Math.PI * r;
+    const offset = c * (1 - pct / 100);
+    return `<svg viewBox="0 0 ${size} ${size}" width="${size}" height="${size}" class="ring-svg">` +
+      `<circle cx="${cx}" cy="${cy}" r="${n2(r)}" fill="none" stroke="var(--line)" stroke-width="${stroke}"/>` +
+      `<circle cx="${cx}" cy="${cy}" r="${n2(r)}" fill="none" stroke="${opts.stroke2 || 'url(#grad)'}" stroke-width="${stroke}" stroke-linecap="round" ` +
+        `stroke-dasharray="${n2(c)}" stroke-dashoffset="${n2(offset)}" transform="rotate(-90 ${cx} ${cy})"/>` +
+      `<text x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="middle" class="ring-label" style="fill:var(--ink)">${pct}%</text>` +
+      `</svg>`;
+  }
+
+  const api = { polar, donut, area, bars, ring };
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+  else root.SpectoCharts = api;
+})(typeof window !== 'undefined' ? window : globalThis);

package/templates/dashboard/public/icons.js

@@ -0,0 +1,28 @@
+'use strict';
+// Small inline-SVG line-icon set for the header nav and quick actions.
+// Line style, 16-18px viewBox units, stroke=currentColor so icons inherit tab/text color.
+(function (root) {
+  const wrap = (inner, extra) => `<svg viewBox="0 0 18 18" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"${extra ? ' ' + extra : ''}>${inner}</svg>`;
+
+  const ICON = {
+    // kanban columns
+    board: wrap('<rect x="2" y="3" width="4" height="12" rx="1"/><rect x="7" y="3" width="4" height="8" rx="1"/><rect x="12" y="3" width="4" height="10" rx="1"/>'),
+    // inbox tray — tasks awaiting a decision
+    requests: wrap('<path d="M2.6 10h3.2l1.4 2h3.6l1.4-2h3.2"/><path d="M2.6 10 3.9 4.6a1 1 0 0 1 1-.8h7.2a1 1 0 0 1 1 .8L14.4 10"/><path d="M2.6 10v3a1 1 0 0 0 1 1h9.8a1 1 0 0 0 1-1v-3"/>'),
+    // stacked list
+    backlog: wrap('<line x1="3" y1="5" x2="15" y2="5"/><line x1="3" y1="9" x2="15" y2="9"/><line x1="3" y1="13" x2="10.5" y2="13"/>'),
+    // connected nodes — pipeline
+    workflow: wrap('<circle cx="3.4" cy="9" r="1.7"/><circle cx="9" cy="9" r="1.7"/><circle cx="14.6" cy="9" r="1.7"/><line x1="5.1" y1="9" x2="7.3" y2="9"/><line x1="10.7" y1="9" x2="12.9" y2="9"/>'),
+    // two people — agents & skills
+    agents: wrap('<circle cx="6.4" cy="6.1" r="2.1"/><path d="M2.6 15c0-2.5 1.7-4 3.8-4s3.8 1.5 3.8 4"/><circle cx="13.1" cy="7.1" r="1.7"/><path d="M10.9 15c.2-2 1.5-3.1 3.1-3.1 1.8 0 3.4 1.3 3.4 3.1"/>'),
+    // speech bubble
+    chat: wrap('<path d="M3 4.4h12a1 1 0 0 1 1 1V11a1 1 0 0 1-1 1H8.2l-3.3 2.6a.4.4 0 0 1-.65-.31V12H3a1 1 0 0 1-1-1V5.4a1 1 0 0 1 1-1z"/>'),
+    // info circle
+    info: wrap('<circle cx="9" cy="9" r="6.4"/><line x1="9" y1="8.3" x2="9" y2="12.2"/><circle cx="9" cy="5.7" r="0.9" fill="currentColor" stroke="none"/>'),
+    // play triangle — run
+    run: wrap('<path d="M5.4 3.6v10.8l9-5.4z" fill="currentColor" stroke="none"/>'),
+  };
+
+  if (typeof module !== 'undefined' && module.exports) module.exports = ICON;
+  else root.ICON = ICON;
+})(typeof window !== 'undefined' ? window : globalThis);

package/templates/dashboard/public/index.html

@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>spectoflow · control</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <header class="topbar">
+    <div class="brand">
+      <span class="brand-mark" aria-hidden="true"></span>
+      <div class="brand-text">
+        <div class="brand-line">
+          <span class="brand-name">spectoflow</span>
+          <span class="brand-sep">/</span>
+          <span class="brand-project" id="projectName">—</span>
+        </div>
+        <div class="brand-sub" id="brandSub">semi · en</div>
+      </div>
+      <div class="progress-meter" id="globalMeter" title="Global progress">
+        <div class="progress-meter-fill" id="globalMeterFill"></div>
+      </div>
+    </div>
+    <nav class="tabs" id="tabs">
+      <button class="tab is-active" data-tab="board"><span class="tab-ico" data-icon="board"></span><span class="tab-label">Board</span></button>
+      <button class="tab" data-tab="requests"><span class="tab-ico" data-icon="requests"></span><span class="tab-label">Requests</span></button>
+      <button class="tab" data-tab="backlog"><span class="tab-ico" data-icon="backlog"></span><span class="tab-label">Backlog</span></button>
+      <button class="tab" data-tab="workflow"><span class="tab-ico" data-icon="workflow"></span><span class="tab-label">Workflow</span></button>
+      <button class="tab" data-tab="team"><span class="tab-ico" data-icon="agents"></span><span class="tab-label">Agents &amp; Skills</span></button>
+      <button class="tab" data-tab="chat"><span class="tab-ico" data-icon="chat"></span><span class="tab-label">Chat</span></button>
+      <button class="tab" data-tab="info"><span class="tab-ico" data-icon="info"></span><span class="tab-label">Info</span></button>
+    </nav>
+    <div class="top-right">
+      <span class="meta-chip" id="agentChip" title="Active agent">claude</span>
+      <span class="meta-chip" id="langChip" title="Output language">en</span>
+      <span class="mode-chip" id="modeChip" title="Autonomy mode">semi</span>
+      <span class="sync" id="sync"><span class="sync-dot"></span><span id="syncLabel">live</span></span>
+      <button class="btn primary run-btn" id="runQuickBtn" title="Open the run chat"><span class="tab-ico" data-icon="run"></span><span>Run</span></button>
+      <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme"><span class="theme-ico"></span></button>
+    </div>
+  </header>
+
+  <main class="stage">
+    <!-- BOARD -->
+    <section class="panel is-active" data-panel="board">
+      <div class="main">
+        <div class="overview" id="overview"></div>
+        <div class="filters" id="filters">
+          <div class="chip-list" id="statusChips">
+            <button class="fchip active" data-status="all">All</button>
+            <button class="fchip" data-status="todo">To do</button>
+            <button class="fchip" data-status="in_progress">In progress</button>
+            <button class="fchip" data-status="to_validate">To validate</button>
+            <button class="fchip" data-status="to_analyze">To analyze</button>
+            <button class="fchip" data-status="done">Done</button>
+            <button class="fchip" data-status="blocked">Blocked</button>
+          </div>
+          <input type="search" id="search" class="search" placeholder="Filter tasks…" autocomplete="off" />
+        </div>
+        <div class="board" id="board"></div>
+      </div>
+      <aside class="side" id="side">
+        <div class="rail-block rail-block-journal">
+          <h2 class="rail-title">Journal <span class="count" id="journalCount">0</span></h2>
+          <div class="journal" id="journal"></div>
+        </div>
+        <div class="rail-block">
+          <h2 class="rail-title">Specs <span class="count" id="specsCount">0</span></h2>
+          <ul class="flatlist" id="specs"></ul>
+        </div>
+        <div class="rail-block">
+          <h2 class="rail-title">Running <span class="count" id="runCount">0</span></h2>
+          <ul class="flatlist" id="running"></ul>
+        </div>
+      </aside>
+    </section>
+
+    <!-- REQUESTS (tasks awaiting review: to_validate / to_analyze) -->
+    <section class="panel" data-panel="requests">
+      <div class="requests-wrap">
+        <h2 class="panel-title">Requests <span class="count" id="requestsCount">0</span></h2>
+        <p class="panel-sub">Tasks awaiting your input — status <em>to validate</em> or <em>to analyze</em>.</p>
+        <ul class="flatlist requests-list" id="requestsList"></ul>
+      </div>
+    </section>
+
+    <!-- BACKLOG (flat, sortable, filterable table of every task) -->
+    <section class="panel" data-panel="backlog">
+      <div class="backlog-wrap">
+        <h2 class="panel-title">Backlog <span class="count" id="backlogCount">0</span></h2>
+        <p class="panel-sub">Every task, across every plan, in one flat table.</p>
+        <div class="filters" id="backlogFilters">
+          <div class="chip-list" id="backlogStatusChips">
+            <button class="fchip active" data-status="all">All</button>
+            <button class="fchip" data-status="todo">To do</button>
+            <button class="fchip" data-status="in_progress">In progress</button>
+            <button class="fchip" data-status="to_validate">To validate</button>
+            <button class="fchip" data-status="to_analyze">To analyze</button>
+            <button class="fchip" data-status="done">Done</button>
+            <button class="fchip" data-status="blocked">Blocked</button>
+          </div>
+          <input type="search" id="backlogSearch" class="search" placeholder="Filter by id or title…" autocomplete="off" />
+        </div>
+        <div class="table-scroll">
+          <table class="backlog-table" id="backlogTable">
+            <thead>
+              <tr>
+                <th data-col="id">ID</th>
+                <th data-col="title">Title</th>
+                <th data-col="phase">Phase</th>
+                <th data-col="status">Status</th>
+                <th data-col="owner">Owner</th>
+                <th data-col="level">Level</th>
+                <th data-col="comments">💬</th>
+              </tr>
+            </thead>
+            <tbody id="backlogBody"></tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+
+    <!-- WORKFLOW -->
+    <section class="panel" data-panel="workflow">
+      <div class="wf-wrap">
+        <h2 class="panel-title">Active workflow</h2>
+        <p class="panel-sub">Click a step to enable or disable it. This edits <code>.spectoflow/workflow.md</code>.</p>
+        <div class="wf-diagram" id="wfDiagram"></div>
+      </div>
+    </section>
+
+    <!-- AGENTS & SKILLS -->
+    <section class="panel" data-panel="team">
+      <div class="team-wrap">
+        <h2 class="panel-title">Agents <span class="count" id="agentsCount">0</span></h2>
+        <p class="panel-sub">Stable team personas — the <em>who</em>.</p>
+        <div class="cards" id="agents"></div>
+        <h2 class="panel-title" style="margin-top:28px">Skills <span class="count" id="skillsCount">0</span></h2>
+        <p class="panel-sub">Evolving procedures — the <em>how</em>.</p>
+        <div class="cards" id="skills"></div>
+      </div>
+    </section>
+
+    <!-- CHAT (full-width chat tab — shares renderChatLog + doRun/doOrchestrate/approve with the floating widget) -->
+    <section class="panel" data-panel="chat">
+      <div class="chat-tab-wrap">
+        <div class="chat-tab-head">
+          <div>
+            <h2 class="panel-title">Chat</h2>
+            <p class="panel-sub">Full conversation with the runner — the same run as the widget, more room to read it.</p>
+          </div>
+          <select id="tabRunAgent" class="chat-agent" title="Agent"></select>
+        </div>
+        <div class="chat-tab-log" id="chatTabLog">
+          <div class="chat-idle">Type a request — the agent runs headless in this project with full memory
+            (<code>CLAUDE.md → AGENTS.md</code>) and updates the board live.</div>
+        </div>
+        <div class="chat-tab-input">
+          <textarea id="tabRunPrompt" class="chat-ta" placeholder="e.g. Add a login feature with email + password"></textarea>
+          <div class="chat-tab-actions">
+            <button id="tabRunBtn" class="btn primary chat-send">Send</button>
+            <button id="tabOrchBtn" class="btn chat-send" title="Walk the enabled workflow">Orchestrate</button>
+          </div>
+        </div>
+        <p class="chat-warn">⚠ Launches a real agent (<code>config.json → runners</code>) that can modify files &amp; run commands.</p>
+      </div>
+    </section>
+
+    <!-- INFO (project overview — filled by renderInfo() in app.js) -->
+    <section class="panel" data-panel="info">
+      <div class="info-wrap">
+        <h2 class="panel-title">Info</h2>
+        <p class="panel-sub">Project overview — configuration, counts, specs and active workflow.</p>
+        <div class="info-grid" id="infoGrid"></div>
+      </div>
+    </section>
+  </main>
+
+  <!-- CHAT WIDGET (floating agent runner; entry point to the group-chat) -->
+  <button class="chat-fab" id="chatFab" aria-label="Open run chat" title="Run an agent">💬</button>
+  <div class="chat" id="chat" aria-hidden="true" role="dialog" aria-label="Run an agent">
+    <div class="chat-head">
+      <div class="chat-head-text">
+        <span class="chat-title">Run an agent</span>
+        <span class="chat-sub">Quick access · full view in the Chat tab</span>
+      </div>
+      <select id="runAgent" class="chat-agent" title="Agent"></select>
+      <button class="chat-close" id="chatClose" aria-label="Close">×</button>
+    </div>
+    <div class="chat-log" id="chatLog">
+      <div class="chat-idle">Type a request — the agent runs headless in this project with full memory
+        (<code>CLAUDE.md → AGENTS.md</code>) and updates the board live.</div>
+    </div>
+    <div class="chat-input">
+      <textarea id="runPrompt" class="chat-ta" placeholder="e.g. Add a login feature with email + password"></textarea>
+      <button id="runBtn" class="btn primary chat-send">Send</button>
+      <button id="orchBtn" class="btn chat-send" title="Walk the enabled workflow">Orchestrate</button>
+    </div>
+    <p class="chat-warn">⚠ Launches a real agent (<code>config.json → runners</code>) that can modify files &amp; run commands.</p>
+  </div>
+
+  <div class="drawer" id="drawer" aria-hidden="true">
+    <div class="drawer-scrim" id="drawerScrim"></div>
+    <div class="drawer-panel" role="dialog"><button class="drawer-close" id="drawerClose">×</button><div id="drawerBody"></div></div>
+  </div>
+
+  <!-- floating chart tooltip layer — positioned on mousemove over [data-tip] hit targets -->
+  <div id="tooltip" class="tooltip" hidden></div>
+
+  <!-- shared gradient used by SpectoCharts.ring's foreground arc (stroke="url(#grad)") -->
+  <svg width="0" height="0" style="position:absolute" aria-hidden="true">
+    <defs>
+      <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stop-color="var(--cool)" />
+        <stop offset="100%" stop-color="var(--signal)" />
+      </linearGradient>
+    </defs>
+  </svg>
+
+  <script src="stats.js"></script>
+  <script src="charts.js"></script>
+  <script src="icons.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>

package/templates/dashboard/public/stats.js

@@ -0,0 +1,32 @@
+'use strict';
+(function (root) {
+  const STATUSES = ['todo', 'in_progress', 'to_validate', 'to_analyze', 'done', 'blocked'];
+  const allTasks = (p) => (p.plans || []).flatMap((pl) => pl.phases.flatMap((ph) => ph.tasks.map((t) => ({ ...t, file: pl.file }))));
+  function stats(p) {
+    p = p || {};
+    const tasks = allTasks(p);
+    const total = tasks.length;
+    const byStatus = Object.fromEntries(STATUSES.map((s) => [s, 0]));
+    tasks.forEach((t) => { if (byStatus[t.status] === undefined) byStatus[t.status] = 0; byStatus[t.status]++; });
+    const done = byStatus.done || 0;
+    const pct = total ? Math.round((done / total) * 100) : 0;
+    const phases = (p.plans || []).flatMap((pl) => pl.phases.map((ph) => {
+      const d = ph.tasks.filter((t) => t.status === 'done').length, tot = ph.tasks.length;
+      return { title: ph.title, file: pl.file, done: d, total: tot, pct: tot ? Math.round((d / tot) * 100) : 0 };
+    }));
+    const toAsk = tasks.filter((t) => t.status === 'to_validate' || t.status === 'to_analyze')
+      .map((t) => ({ id: t.id, title: t.title, status: t.status, file: t.file }));
+    const rt = p.runtime || {};
+    const agents = (rt.agents || []);
+    const last = agents.length ? agents[agents.length - 1] : null;
+    const running = {
+      agents: agents.filter((a) => a.status === 'running').length,
+      lastRun: last ? { tool: last.tool, status: last.status } : null,
+      orchestration: rt.orchestration || null,
+    };
+    return { total, done, pct, byStatus, phases, toAsk, running, statuses: STATUSES };
+  }
+  const api = { stats, STATUSES };
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+  else root.SpectoStats = api;
+})(typeof window !== 'undefined' ? window : globalThis);