spectoflow 0.12.0

package/templates/dashboard/public/styles.css

@@ -0,0 +1,426 @@
+/* spectoflow control plane. Direction: an engineering control room — calm, dense, precise.
+   One signature: the amber "signal" for what is live/active. Mono carries ids and statuses. */
+:root {
+  --bg: #10151b; --surface: #171e26; --surface-2: #1e2732; --line: #2a3641;
+  --ink: #e9edf2; --muted: #94a2af; --faint: #63727e;
+  --signal: #e6a54b; --cool: #5fb2cc;
+  --s-todo: #7d8f97; --s-in_progress: #e6a54b; --s-to_validate: #5fb2cc;
+  --s-to_analyze: #ab8cd9; --s-done: #5fb67e; --s-blocked: #db7268;
+  --radius: 14px; --shadow: 0 10px 30px rgba(0,0,0,.38);
+  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
+[data-theme="light"] { --bg:#f6f3ee; --surface:#fffdfa; --surface-2:#efe9e0; --line:#ddd4c6; --ink:#211b12; --muted:#6b6255; --faint:#948a7b; --signal:#c17d20; --cool:#2c7f99; --s-todo:#6b7680; --s-in_progress:#c17d20; --s-to_validate:#2c7f99; --s-to_analyze:#8a6bb0; --s-done:#3f8f5c; --s-blocked:#c14c3f; }
+* { box-sizing: border-box; }
+html,body { margin:0; height:100%; }
+body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
+@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } }
+
+/* topbar — dense engineering-control-room header: brand+meter (left) / icon tabs (centre) / status+run (right) */
+.topbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:18px; min-height:60px; padding:8px 18px; border-bottom:1px solid var(--line);
+  background:color-mix(in srgb,var(--surface) 92%,transparent); position:sticky; top:0; z-index:6; backdrop-filter:blur(8px); }
+.brand { justify-self:start; display:flex; align-items:center; gap:11px; font-weight:600; min-width:0; }
+.brand-mark { width:16px; height:16px; border-radius:4px; background:conic-gradient(from 210deg,var(--signal),var(--cool),var(--signal)); box-shadow:0 0 0 1px var(--line) inset; flex-shrink:0; }
+.brand-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
+.brand-line { display:flex; align-items:center; gap:7px; min-width:0; }
+.brand-name { font-weight:700; } .brand-sep{ color:var(--faint); } .brand-project{ color:var(--muted); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.brand-sub { font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); }
+.progress-meter { width:76px; height:5px; border-radius:999px; background:var(--surface-2); overflow:hidden; flex-shrink:0; margin-left:4px; }
+.progress-meter-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--cool),var(--signal)); border-radius:999px; transition:width .5s ease; }
+.tabs { justify-self:center; display:flex; gap:2px; }
+.tab { display:flex; align-items:center; gap:6px; font:inherit; font-size:12.5px; padding:7px 11px; border:0; background:transparent; color:var(--muted); cursor:pointer; border-radius:7px; white-space:nowrap; }
+.tab-ico { width:16px; height:16px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
+.tab-ico svg { width:100%; height:100%; display:block; }
+.tab:hover { color:var(--ink); background:var(--surface-2); }
+.tab.is-active { color:var(--ink); background:var(--surface-2); box-shadow:inset 0 -2px 0 var(--signal); }
+.top-right { justify-self:end; display:flex; align-items:center; gap:9px; }
+.meta-chip,.mode-chip { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border:1px solid var(--line); border-radius:999px; color:var(--muted); }
+.mode-chip { color:var(--signal); border-color:color-mix(in srgb,var(--signal) 40%,var(--line)); }
+.sync { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
+.sync-dot { width:7px; height:7px; border-radius:50%; background:var(--s-done); animation:pulse 2.4s ease-out infinite; }
+.sync.saving .sync-dot { background:var(--signal); }
+.sync.offline .sync-dot { background:var(--s-blocked); animation:none; }
+@keyframes pulse { 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--s-done) 55%,transparent);} 70%{ box-shadow:0 0 0 6px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }
+.run-btn { display:flex; align-items:center; gap:6px; padding:6px 12px 6px 10px; }
+.theme-toggle { width:30px; height:30px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); cursor:pointer; display:grid; place-items:center; flex-shrink:0; }
+.theme-ico { width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 32% 32%,var(--ink) 0 48%,transparent 49%),conic-gradient(var(--muted) 0 50%,transparent 0); }
+@media (max-width:900px){ .brand-sub,.progress-meter { display:none; } }
+
+/* panels */
+.stage { min-height:calc(100% - 52px); }
+.panel { display:none; } .panel.is-active { display:block; }
+.panel[data-panel="board"].is-active { display:grid; grid-template-columns:1fr 300px; min-height:calc(100% - 52px); }
+.panel-title { font-size:16px; font-weight:700; letter-spacing:-.01em; margin:0 0 2px; display:flex; align-items:center; gap:8px; }
+.panel-sub { color:var(--muted); font-size:12.5px; margin:0 0 16px; }
+.count { font-family:var(--mono); font-size:10px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:1px 6px; }
+
+/* main column + right sidebar */
+.main { min-width:0; display:flex; flex-direction:column; }
+.side { border-left:1px solid var(--line); padding:18px 16px; display:flex; flex-direction:column; gap:22px; }
+.rail-title { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); margin:0 0 8px; font-weight:700; display:flex; gap:8px; align-items:center; }
+.flatlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; font-size:12.5px; }
+.flatlist li { background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:6px 9px; color:var(--muted); }
+.flatlist li b { color:var(--ink); font-weight:600; }
+.flatlist .empty { border-style:dashed; font-style:italic; color:var(--faint); }
+.run-live { border-left:2px solid var(--signal)!important; }
+
+/* Journal (read-only feed of runtime.messages, scrolls independently) */
+.journal { max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:7px; padding-right:2px; }
+.journal-row { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:7px 9px; }
+.journal-head { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--cool); margin-bottom:3px; }
+.journal-text { color:var(--ink); font-size:12.5px; line-height:1.4; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; }
+.journal-row.j-you { border-left:2px solid var(--signal); }
+.journal-row.j-you .journal-head { color:var(--signal); }
+.journal-row.k-status .journal-head { color:var(--s-done); }
+.journal-row.k-status { border-color:color-mix(in srgb,var(--s-done) 35%,var(--line)); }
+.journal-row.k-question .journal-head { color:var(--signal); }
+.journal-row.k-handoff .journal-head { color:var(--s-to_analyze); }
+
+/* overview: KPI cards + status donut + workflow strip + phase bars */
+.overview { padding:22px 24px 6px; display:flex; flex-direction:column; gap:14px; }
+.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
+.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; display:flex; flex-direction:column; gap:8px; transition:box-shadow .15s; }
+.kpi:hover { box-shadow:var(--shadow); }
+.kpi-label { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:700; }
+.kpi-body { display:flex; align-items:center; }
+.kpi-num { font-family:var(--mono); font-size:30px; font-weight:700; line-height:1; color:var(--ink); }
+.kpi-num.is-text { font-size:17px; text-transform:capitalize; }
+.kpi-sub { font-size:11.5px; color:var(--muted); }
+
+.ring-wrap { position:relative; display:inline-flex; align-items:center; justify-content:center; }
+.ring-wrap .ring-label { position:absolute; font-family:var(--mono); font-size:13px; font-weight:700; color:var(--ink); }
+.ring-svg circle { transition:stroke-dashoffset .5s ease; }
+
+.ocard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
+.ocard-title { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:700; margin:0 0 12px; }
+
+.overview-top { display:grid; grid-template-columns:minmax(280px,1fr) minmax(320px,1.4fr); gap:14px; align-items:start; }
+@media (max-width:900px){ .overview-top { grid-template-columns:1fr; } }
+
+.area-wrap { width:100%; overflow-x:auto; }
+.area-wrap .area-svg { width:100%; height:auto; display:block; }
+.area-grid { stroke-opacity:.5; }
+.area-ylabel,.area-xlabel { font-family:var(--mono); font-size:9px; }
+.area-value { font-family:var(--mono); font-size:9px; font-weight:700; }
+.area-dot { transition:r .15s ease; }
+.area-hit { cursor:crosshair; }
+
+.donut-row { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
+.donut-wrap { position:relative; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
+.donut-svg circle { transition:stroke-dasharray .5s ease; }
+.donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
+.donut-total { font-family:var(--mono); font-size:22px; font-weight:700; color:var(--ink); }
+.donut-sub { font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; }
+.legend { display:flex; flex-direction:column; gap:7px; min-width:150px; flex:1; }
+.legend-item { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
+.legend-swatch { width:9px; height:9px; border-radius:3px; flex-shrink:0; }
+.legend-label { flex:1; }
+.legend-count { font-family:var(--mono); color:var(--ink); font-weight:600; }
+
+.wf-strip { display:flex; flex-wrap:wrap; align-items:center; gap:0; }
+.wf-mini { display:flex; align-items:center; gap:6px; padding:6px 11px; border:1px solid var(--line); border-radius:999px; background:var(--surface-2); font-size:11.5px; font-weight:600; white-space:nowrap; }
+.wf-mini .dot { width:6px; height:6px; border-radius:50%; background:var(--s-done); }
+.wf-mini.off { opacity:.42; border-style:dashed; }
+.wf-mini.off .dot { background:var(--faint); }
+.wf-strip .wf-arrow { width:22px; }
+
+.bars { display:flex; flex-direction:column; gap:12px; }
+.bar-row { display:flex; flex-direction:column; gap:5px; }
+.bar-head { display:flex; align-items:baseline; gap:8px; font-size:12.5px; }
+.bar-head .bar-label { font-weight:600; color:var(--ink); }
+.bar-head .bar-sub { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--muted); }
+.bar-track { height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
+.bar-fill { height:100%; background:linear-gradient(90deg,var(--cool),var(--signal)); border-radius:999px; transition:width .5s ease; }
+
+/* filters (status chips + search) */
+.filters { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:0 24px 14px; }
+.chip-list { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
+.fchip { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; padding:5px 11px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer; transition:all .15s; }
+.fchip:hover { color:var(--ink); border-color:var(--cool); }
+.fchip.active { color:#10151b; border-color:transparent; font-weight:700; background:var(--muted); }
+.fchip[data-status="all"].active { background:var(--signal); }
+.fchip[data-status="todo"].active { background:var(--s-todo); }
+.fchip[data-status="in_progress"].active { background:var(--s-in_progress); }
+.fchip[data-status="to_validate"].active { background:var(--s-to_validate); }
+.fchip[data-status="to_analyze"].active { background:var(--s-to_analyze); }
+.fchip[data-status="done"].active { background:var(--s-done); }
+.fchip[data-status="blocked"].active { background:var(--s-blocked); }
+.search { font:inherit; font-size:12.5px; padding:6px 13px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); min-width:210px; margin-left:auto; }
+.search:focus { outline:2px solid var(--cool); outline-offset:1px; }
+.search::placeholder { color:var(--faint); }
+@media (max-width:520px){ .search { margin-left:0; min-width:0; width:100%; } }
+
+/* board */
+.board { padding:22px 24px 60px; overflow-y:auto; }
+.phase { margin-bottom:26px; }
+.phase-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; padding:9px 12px; border:1px solid var(--line); border-radius:11px; background:var(--surface); cursor:pointer; user-select:none; transition:border-color .15s,background .15s; }
+.phase-head:hover { border-color:color-mix(in srgb,var(--cool) 45%,var(--line)); background:var(--surface-2); }
+.phase-head:focus-visible { outline:2px solid var(--cool); outline-offset:2px; }
+/* raw shape points right; expanded (default, no .is-collapsed) rotates it down — the
+   conventional direction — and collapsed rotates it back to its raw right-pointing state */
+.chevron { width:0; height:0; flex-shrink:0; border-style:solid; border-width:5px 0 5px 7px; border-color:transparent transparent transparent var(--muted); transition:transform .18s ease; transform:rotate(90deg); }
+.phase.is-collapsed .chevron { transform:rotate(0deg); }
+.phase-title { font-size:14.5px; font-weight:700; }
+.phase-src { font-family:var(--mono); font-size:10px; color:var(--faint); }
+.phase-bar { width:84px; height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden; flex-shrink:0; }
+[data-theme="light"] .phase-bar { background:var(--line); }
+.phase-bar-fill { height:100%; background:linear-gradient(90deg,var(--cool),var(--signal)); border-radius:999px; transition:width .4s ease; }
+.phase-stat { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--faint); flex-shrink:0; }
+.phase .tasks { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; overflow:hidden; max-height:4000px; opacity:1; transition:max-height .25s ease,opacity .2s ease,margin-top .2s ease; margin-top:12px; }
+.phase.is-collapsed .tasks { max-height:0; opacity:0; margin-top:0; pointer-events:none; }
+.task { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:13px 14px; cursor:pointer; transition:border-color .15s,transform .15s,box-shadow .15s; display:flex; flex-direction:column; gap:9px; }
+.task:hover { border-color:color-mix(in srgb,var(--cool) 55%,var(--line)); transform:translateY(-1px); box-shadow:var(--shadow); }
+.task:focus-visible { outline:2px solid var(--cool); outline-offset:2px; }
+.task.is-in_progress { border-left:2px solid var(--signal); }
+.task-top { display:flex; align-items:center; gap:8px; }
+.task-id { font-family:var(--mono); font-size:11px; color:var(--muted); background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:1px 6px; }
+.lvl { font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); border:1px solid var(--line); border-radius:4px; padding:1px 4px; }
+.chip { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; padding:2px 7px; border-radius:999px; margin-left:auto; color:#10151b; font-weight:600; }
+.chip.s-todo{background:var(--s-todo)} .chip.s-in_progress{background:var(--s-in_progress)} .chip.s-to_validate{background:var(--s-to_validate)} .chip.s-to_analyze{background:var(--s-to_analyze)} .chip.s-done{background:var(--s-done)} .chip.s-blocked{background:var(--s-blocked)}
+.task-title { font-size:14px; font-weight:600; line-height:1.35; }
+.task-tags { display:flex; flex-wrap:wrap; gap:5px; }
+.task-tags .tag { font-family:var(--mono); font-size:10px; color:var(--cool); border:1px solid color-mix(in srgb,var(--cool) 35%,var(--line)); border-radius:5px; padding:1px 6px; }
+.task-foot { display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--muted); margin-top:auto; }
+.owner { font-family:var(--mono); }
+.cmt-count { font-family:var(--mono); font-size:11px; color:var(--muted); }
+.tflag { font-family:var(--mono); font-size:10px; padding:1px 5px; border-radius:4px; margin-left:auto; }
+.tflag.pass { color:var(--s-done); border:1px solid color-mix(in srgb,var(--s-done) 45%,var(--line)); }
+.tflag.fail { color:var(--s-blocked); border:1px solid color-mix(in srgb,var(--s-blocked) 45%,var(--line)); }
+
+/* Requests tab (tasks awaiting review: to_validate / to_analyze) */
+.requests-wrap { padding:26px 28px 60px; max-width:900px; }
+.requests-list { display:flex; flex-direction:column; gap:7px; }
+.request-row { cursor:pointer; display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:13px; transition:border-color .15s; }
+.request-row:hover,.request-row:focus-visible { border-color:color-mix(in srgb,var(--signal) 40%,var(--line)); }
+.request-id { font-family:var(--mono); font-size:11px; color:var(--faint); flex-shrink:0; }
+.request-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
+.request-file { font-family:var(--mono); font-size:10.5px; color:var(--faint); flex-shrink:0; }
+
+/* placeholder panels (none left as of the Chat tab — kept for any future WIP panel) */
+.placeholder-wrap { padding:26px 28px 60px; max-width:1000px; }
+.placeholder-empty { margin-top:8px; padding:40px; border:1px dashed var(--line); border-radius:var(--radius); text-align:center; color:var(--faint); font-style:italic; }
+
+/* Backlog tab — flat, sortable, filterable table of every task */
+.backlog-wrap { padding:26px 28px 60px; max-width:1200px; }
+.backlog-wrap .filters { padding:0 0 14px; }
+.table-scroll { width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
+.backlog-table { width:100%; min-width:720px; border-collapse:collapse; font-size:12.5px; }
+.backlog-table thead th { position:sticky; top:0; z-index:1; background:var(--surface-2); text-align:left; padding:9px 12px; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); white-space:nowrap; cursor:pointer; user-select:none; border-bottom:1px solid var(--line); }
+.backlog-table thead th:hover { color:var(--ink); }
+.backlog-table thead th.is-sorted { color:var(--ink); }
+.backlog-table thead th[data-dir="asc"]::after { content:'\25B2'; margin-left:5px; font-size:9px; }
+.backlog-table thead th[data-dir="desc"]::after { content:'\25BC'; margin-left:5px; font-size:9px; }
+.backlog-table tbody tr.backlog-row { cursor:pointer; border-bottom:1px solid var(--line); transition:background .12s; }
+.backlog-table tbody tr.backlog-row:last-child { border-bottom:0; }
+.backlog-table tbody tr.backlog-row:hover,.backlog-table tbody tr.backlog-row:focus-visible { background:var(--surface-2); outline:none; }
+.backlog-table td { padding:8px 12px; color:var(--ink); vertical-align:middle; }
+.bl-id { font-family:var(--mono); font-size:11px; color:var(--muted); white-space:nowrap; }
+.bl-title { min-width:200px; max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.bl-phase,.bl-owner { color:var(--muted); white-space:nowrap; }
+.bl-level { color:var(--muted); white-space:nowrap; text-transform:capitalize; }
+.bl-comments { font-family:var(--mono); font-size:11px; color:var(--muted); white-space:nowrap; }
+.backlog-table .chip { margin-left:0; }
+.backlog-empty-row td { padding:40px; text-align:center; color:var(--faint); font-style:italic; border:0; }
+@media (max-width:640px){ .backlog-wrap { padding:18px 14px 40px; } }
+
+/* Info tab (project overview — config, runners, counts, specs, active workflow) */
+.info-wrap { padding:26px 28px 60px; max-width:1000px; }
+.info-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px; }
+.info-section { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
+.info-section-head { display:flex; align-items:center; gap:8px; margin:0 0 12px; }
+.info-section-ico { width:16px; height:16px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; color:var(--cool); }
+.info-section-ico svg { width:100%; height:100%; display:block; }
+.info-section-title { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:700; }
+.info-section:nth-child(3) { grid-column:1 / -1; }
+@media (max-width:760px){ .info-grid { grid-template-columns:1fr; } .info-section:nth-child(3) { grid-column:auto; } }
+
+.info-rows { display:flex; flex-direction:column; gap:2px; }
+.info-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
+.info-row:last-child { border-bottom:0; }
+.info-row-label { color:var(--muted); }
+.info-row-value { color:var(--ink); font-weight:600; text-align:right; }
+.info-rows-mono .info-row-value { font-family:var(--mono); font-size:11.5px; font-weight:500; overflow-wrap:anywhere; }
+.info-rows-mono .info-row-label { font-family:var(--mono); font-size:11.5px; color:var(--cool); flex-shrink:0; }
+
+.stat-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; }
+.stat-tile { background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:11px 12px; display:flex; flex-direction:column; gap:2px; }
+.stat-tile-val { font-family:var(--mono); font-size:20px; font-weight:700; color:var(--ink); line-height:1.1; }
+.stat-tile-label { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:700; }
+.stat-tile-sub { font-size:11px; color:var(--muted); }
+
+.info-wf-list { display:flex; flex-direction:column; gap:6px; }
+.info-wf-row { display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:12.5px; }
+.info-wf-name { font-weight:600; color:var(--ink); }
+.info-wf-meta { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--muted); text-align:right; }
+
+/* workflow diagram */
+.wf-wrap,.team-wrap { padding:26px 28px 60px; max-width:1000px; }
+.wf-diagram { display:flex; flex-wrap:wrap; align-items:center; gap:0; margin-top:8px; }
+.wf-step { display:flex; align-items:center; }
+.wf-node { display:flex; align-items:center; gap:8px; padding:11px 15px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); cursor:pointer; transition:border-color .18s,transform .15s,box-shadow .15s; user-select:none; }
+.wf-node:hover { border-color:var(--cool); transform:translateY(-1px); box-shadow:var(--shadow); }
+.wf-node .dot { width:8px; height:8px; border-radius:50%; background:var(--s-done); flex-shrink:0; }
+.wf-node.off { opacity:.42; border-style:dashed; background:transparent; }
+.wf-node.off .dot { background:var(--faint); }
+.wf-node .nm { font-size:13px; font-weight:600; }
+.wf-node .opt { font-family:var(--mono); font-size:9px; color:var(--faint); text-transform:uppercase; border:1px solid var(--line); border-radius:4px; padding:1px 4px; }
+.wf-arrow { width:34px; height:2px; position:relative; background:var(--line); margin:0 2px; overflow:hidden; }
+.wf-arrow::after { content:""; position:absolute; inset:0; width:40%; background:linear-gradient(90deg,transparent,var(--signal),transparent); animation:flow 2.2s linear infinite; }
+.wf-arrow.off::after { display:none; }
+@keyframes flow { from{ transform:translateX(-100%);} to{ transform:translateX(250%);} }
+
+/* cards (agents / skills) — same surface/radius/shadow tokens as .task/.kpi/.ocard */
+.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
+.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px; cursor:pointer; transition:border-color .15s,transform .15s,box-shadow .15s; }
+.card:hover { border-color:color-mix(in srgb,var(--cool) 55%,var(--line)); transform:translateY(-1px); box-shadow:var(--shadow); }
+.card:focus-visible { outline:2px solid var(--cool); outline-offset:2px; }
+.card .ct { font-size:14px; font-weight:700; }
+.card .cc { display:inline-block; font-family:var(--mono); font-size:10px; color:var(--cool); text-transform:uppercase; letter-spacing:.06em; margin-top:6px; border:1px solid color-mix(in srgb,var(--cool) 40%,var(--line)); border-radius:999px; padding:2px 8px; }
+.card .cd { font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.45; }
+.card .cu { margin-top:8px; display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
+.card .cu b { font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); font-weight:700; margin-right:1px; }
+.card .cu span { font-family:var(--mono); font-size:10px; color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:1px 6px; }
+.card .io { margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--muted); }
+
+/* drawer */
+.drawer { position:fixed; inset:0; z-index:20; pointer-events:none; }
+.drawer[aria-hidden="false"] { pointer-events:auto; }
+.drawer-scrim { position:absolute; inset:0; background:#0007; opacity:0; transition:opacity .2s; }
+.drawer[aria-hidden="false"] .drawer-scrim { opacity:1; }
+.drawer-panel { position:absolute; top:0; right:0; height:100%; width:min(440px,92vw); background:var(--surface); border-left:1px solid var(--line); padding:22px 22px 40px; overflow-y:auto; transform:translateX(100%); transition:transform .22s ease; box-shadow:var(--shadow); }
+.drawer[aria-hidden="false"] .drawer-panel { transform:translateX(0); }
+.drawer-close { position:absolute; top:14px; right:14px; width:30px; height:30px; border:1px solid var(--line); background:var(--surface-2); color:var(--muted); border-radius:8px; font-size:18px; cursor:pointer; }
+.d-id { font-family:var(--mono); font-size:12px; color:var(--muted); } .d-title { font-size:19px; font-weight:700; margin:6px 0 14px; }
+.d-section { margin-top:18px; } .d-label { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-weight:700; margin-bottom:7px; }
+.d-text { font-size:13.5px; } .status-row { display:flex; flex-wrap:wrap; gap:6px; }
+
+/* file-body drawer (agents/skills full markdown, rendered by mdLite in app.js) */
+.md-body { font-size:13px; line-height:1.55; color:var(--ink); }
+.md-body h1,.md-body h2,.md-body h3 { margin:14px 0 6px; line-height:1.3; }
+.md-body h1:first-child,.md-body h2:first-child,.md-body h3:first-child { margin-top:0; }
+.md-body h1 { font-size:17px; font-weight:700; }
+.md-body h2 { font-size:15px; font-weight:700; }
+.md-body h3 { font-size:12px; font-weight:700; color:var(--cool); text-transform:uppercase; letter-spacing:.05em; }
+.md-body p { margin:0 0 10px; }
+.md-body ul { margin:0 0 10px; padding-left:20px; }
+.md-body li { margin:2px 0; }
+.md-body code { font-family:var(--mono); font-size:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:1px 5px; }
+.md-body pre { background:#05080b; border:1px solid var(--line); border-radius:8px; padding:10px 12px; overflow-x:auto; margin:0 0 10px; }
+[data-theme="light"] .md-body pre { background:var(--surface-2); }
+.md-body pre code { background:none; border:0; padding:0; font-size:12px; color:#cdd9de; }
+[data-theme="light"] .md-body pre code { color:var(--ink); }
+.md-body strong { font-weight:700; }
+.status-btn { font-family:var(--mono); font-size:11px; padding:4px 9px; border:1px solid var(--line); border-radius:999px; background:var(--surface-2); color:var(--muted); cursor:pointer; }
+.status-btn.active { color:#10151b; border-color:transparent; font-weight:600; }
+.comments { display:flex; flex-direction:column; gap:8px; }
+.comment { background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13px; }
+.c-box { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
+.c-box textarea { width:100%; min-height:60px; resize:vertical; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font:inherit; }
+.c-actions { display:flex; gap:8px; }
+.btn { font:inherit; font-size:13px; padding:7px 12px; border-radius:8px; cursor:pointer; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); }
+.btn.primary { background:var(--signal); color:#241705; border-color:transparent; font-weight:600; }
+.empty { color:var(--faint); font-style:italic; font-size:12.5px; }
+:focus-visible { outline:2px solid var(--cool); outline-offset:2px; }
+@media (max-width:900px){
+  .panel[data-panel="board"].is-active { grid-template-columns:1fr; }
+  .side { border-left:0; border-top:1px solid var(--line); flex-direction:row; flex-wrap:wrap; gap:16px 28px; }
+  .side .rail-block { min-width:200px; flex:1; }
+  .kpi-row { grid-template-columns:repeat(2,1fr); }
+}
+@media (max-width:520px){
+  .kpi-row { grid-template-columns:1fr; }
+  .donut-row { flex-direction:column; align-items:flex-start; }
+}
+@media (max-width:760px){ .tabs .tab{ padding:7px 8px;} .tab-label{ display:none; } }
+
+/* chat widget (floating agent runner) — same surface/radius/shadow tokens as the card system.
+   Bubble/log styles below (.msg, .bubble, .chat-idle, .approval…) are shared, unscoped classes
+   so the Chat tab's #chatTabLog renders identically via the same renderChatLog(container). */
+.chat-fab { position:fixed; right:20px; bottom:20px; z-index:18; width:54px; height:54px; border-radius:50%; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); font-size:23px; cursor:pointer; box-shadow:var(--shadow); display:grid; place-items:center; transition:transform .15s,border-color .15s; }
+.chat-fab:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--signal) 50%,var(--line)); }
+.chat-fab.is-open { box-shadow:inset 0 0 0 2px var(--signal); }
+.chat { position:fixed; right:20px; bottom:88px; z-index:18; width:min(420px,94vw); height:min(600px,78vh); background:var(--surface); border:1px solid var(--line); border-radius:calc(var(--radius) + 2px); box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; transform-origin:bottom right; transition:opacity .16s,transform .16s; }
+.chat[aria-hidden="true"] { opacity:0; transform:scale(.96) translateY(8px); pointer-events:none; }
+.chat-head { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 75%,transparent),transparent); }
+.chat-head-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
+.chat-title { font-weight:700; font-size:15px; }
+.chat-sub { font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.04em; }
+.chat-agent { margin-left:auto; flex-shrink:0; font:inherit; font-size:12px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:5px 8px; }
+.chat-close { width:28px; height:28px; flex-shrink:0; border:1px solid var(--line); background:var(--surface-2); color:var(--muted); border-radius:8px; font-size:17px; cursor:pointer; transition:border-color .15s,color .15s; }
+.chat-close:hover { border-color:color-mix(in srgb,var(--s-blocked) 45%,var(--line)); color:var(--ink); }
+.chat-log { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:11px; }
+.chat-idle { color:var(--faint); font-style:italic; font-size:12.5px; }
+.msg { display:flex; } .msg.you { justify-content:flex-end; }
+.msg.you .bubble { background:var(--signal); color:#241705; border-radius:12px 12px 3px 12px; padding:8px 11px; font-size:13px; max-width:82%; font-weight:500; }
+.msg.agent { margin:0; align-self:flex-start; max-width:92%; background:#05080b; border:1px solid var(--line); border-radius:12px 12px 12px 3px; padding:10px 12px; font-family:var(--mono); font-size:12px; line-height:1.5; color:#cdd9de; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; }
+[data-theme="light"] .msg.agent { background:#10151b; }
+.msg.agentmsg { flex-direction:column; align-items:flex-start; gap:3px; max-width:88%; }
+.msg-role { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--cool); }
+.msg.agentmsg .bubble { background:var(--surface-2); border:1px solid var(--line); border-radius:12px 12px 12px 3px; padding:8px 11px; font-size:13px; color:var(--ink); }
+.msg.agentmsg.k-status .msg-role { color:var(--s-done); }
+.msg.agentmsg.k-status .bubble { border-color:color-mix(in srgb,var(--s-done) 35%,var(--line)); }
+.msg.agentmsg.k-question .msg-role { color:var(--signal); }
+.msg.agentmsg.k-handoff .msg-role { color:var(--s-to_analyze); }
+.chat-input { display:flex; gap:8px; padding:12px 14px 4px; }
+.chat-ta { flex:1; min-height:40px; max-height:120px; resize:vertical; font:inherit; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:9px; padding:9px 11px; transition:border-color .15s; }
+.chat-ta:focus { outline:2px solid var(--cool); outline-offset:1px; }
+.chat-send { align-self:stretch; }
+.chat-warn { font-size:10.5px; color:var(--signal); margin:6px 12px 10px; }
+.approval { display:flex; flex-direction:column; gap:8px; padding:10px 12px; background:var(--surface-2); border:1px solid color-mix(in srgb,var(--signal) 40%,var(--line)); border-radius:var(--radius); box-shadow:var(--shadow); }
+.approval .c-actions { display:flex; gap:8px; }
+#orchBtn,#tabOrchBtn { background:var(--cool); color:#04202a; border-color:transparent; font-weight:600; }
+.btn { transition:border-color .15s,transform .1s; }
+.btn:hover { border-color:color-mix(in srgb,var(--cool) 45%,var(--line)); }
+.btn:active { transform:translateY(1px); }
+.btn.primary:hover { border-color:transparent; filter:brightness(1.06); }
+
+/* Chat tab — full-height, full-width surface sharing renderChatLog/doRun/doOrchestrate/approve
+   with the floating widget (same .msg/.bubble/.chat-idle/.approval classes, unscoped above). */
+.panel[data-panel="chat"].is-active { display:flex; flex-direction:column; }
+.chat-tab-wrap { flex:1; min-height:0; display:flex; flex-direction:column; padding:22px 28px 26px; max-width:1040px; width:100%; margin:0 auto; }
+.chat-tab-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; }
+.chat-tab-head .panel-title { margin:0; }
+.chat-tab-head .panel-sub { margin:2px 0 0; }
+.chat-tab-head .chat-agent { margin-left:auto; flex-shrink:0; }
+.chat-tab-log { flex:1; min-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
+.chat-tab-input { display:flex; gap:10px; margin-top:14px; }
+.chat-tab-input .chat-ta { flex:1; min-height:56px; max-height:180px; }
+.chat-tab-actions { display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
+.chat-tab-wrap .chat-warn { margin:8px 0 0; }
+@media (max-width:640px){ .chat-tab-input { flex-direction:column; } .chat-tab-actions { flex-direction:row; } }
+
+/* ---- chart & panel motion --------------------------------------------- */
+/* cards/panels rise in on render */
+@keyframes rise { from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
+.kpi,.ocard,.card { animation:rise .4s cubic-bezier(.2,.8,.2,1) both; }
+.kpi-row .kpi:nth-child(1){ animation-delay:.02s; } .kpi-row .kpi:nth-child(2){ animation-delay:.06s; }
+.kpi-row .kpi:nth-child(3){ animation-delay:.1s; } .kpi-row .kpi:nth-child(4){ animation-delay:.14s; }
+
+/* area curve draws itself — pathLength="1" makes stroke-dash* fraction-based */
+@keyframes draw { to{ stroke-dashoffset:0; } }
+.area-line { stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.1s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--i,0)*.12s); }
+.area-fill { opacity:0; animation:fadein .6s ease forwards; animation-delay:calc(.4s + var(--i,0)*.12s); }
+.area-dot,.area-value { opacity:0; animation:fadein .3s ease forwards; animation-delay:calc(1s + var(--i,0)*.12s); }
+@keyframes fadein { to{ opacity:1; } }
+
+/* donut arcs pop in, staggered by --i */
+@keyframes pop { from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:scale(1); } }
+.seg-anim { transform-origin:center; transform-box:fill-box; opacity:0; animation:pop .45s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--i,0)*.08s); }
+
+/* phase bars grow + the count-up badge is driven from JS (countUp in app.js) */
+.bar-fill { animation:grow .6s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i,0)*.07s); }
+@keyframes grow { from{ width:0; } }
+
+/* gradient ring (stroke="url(#grad)") fades/scales in */
+.ring-svg circle:last-of-type { transform-origin:center; animation:pop .5s cubic-bezier(.2,.8,.2,1) both; }
+
+@media (prefers-reduced-motion: reduce){
+  *{ animation:none!important; transition:none!important; }
+  .area-line{ stroke-dashoffset:0!important; }
+  .area-fill,.area-dot,.area-value,.seg-anim{ opacity:1!important; }
+}
+
+/* chart tooltip layer — theme-aware, follows the cursor over [data-tip] hit targets */
+.tooltip { position:fixed; z-index:30; pointer-events:none; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:11.5px; line-height:1.4; color:var(--ink); box-shadow:var(--shadow); max-width:220px; }
+.tooltip[hidden] { display:none; }
+.tooltip b { color:var(--ink); }

package/templates/dashboard/runner.js

@@ -0,0 +1,77 @@
+'use strict';
+/*
+ * Agent run pipeline — spawns the configured agent headless and turns its output into the
+ * group-chat message log. The user prompt is logged as a message; the agent identifies itself by
+ * printing sentinel lines (::spectoflow role=… kind=… msg=…) which become structured messages;
+ * any other output streams raw as run-line events. `emit` publishes SSE events to the dashboard.
+ *
+ * Kept separate from server.js so the pipeline is unit-testable without an HTTP server.
+ */
+const { spawn } = require('child_process');
+const store = require('../lib/store');
+
+function runStart(root, run) {
+  const rt = store.readRuntime(root); rt.agents = rt.agents || []; rt.agents.push(run); store.writeRuntime(root, rt);
+}
+function runEnd(root, id, code) {
+  const rt = store.readRuntime(root); const a = (rt.agents || []).find((x) => x.id === id);
+  if (a) { a.status = code === 0 ? 'done' : 'failed'; a.endedAt = new Date().toISOString(); }
+  store.writeRuntime(root, rt);
+}
+// Buffer a stream into whole lines; flush() emits any trailing partial line at close.
+function makeFeeder(onLine) {
+  let buf = '';
+  return {
+    feed(chunk) { buf += chunk.toString(); let i; while ((i = buf.indexOf('\n')) >= 0) { onLine(buf.slice(0, i)); buf = buf.slice(i + 1); } },
+    flush() { if (buf) { onLine(buf); buf = ''; } },
+  };
+}
+
+// Start an agent run. Returns { runId, child } or { error } if no runner is configured.
+function startRun(root, { prompt, agent }, emit) {
+  const cfg = store.readConfig(root);
+  const which = agent || cfg.agent || 'claude';
+  const cmdStr = cfg.runners && cfg.runners[which];
+  if (!cmdStr) return { error: `No runner configured for "${which}".` };
+  const parts = cmdStr.split(/\s+/).filter(Boolean);
+  const runId = 'r' + Date.now().toString(36);
+  const p = String(prompt).trim();
+
+  const um = store.appendMessage(root, { role: 'user', kind: 'message', text: p, agent: which, runId });
+  emit({ type: 'message', message: um });
+
+  const run = { id: runId, tool: which, prompt: p, status: 'running', startedAt: new Date().toISOString() };
+  runStart(root, run); emit({ type: 'run-start', run }); emit({ type: 'change' });
+
+  let child;
+  try { child = spawn(parts[0], [...parts.slice(1), p], { cwd: root, env: process.env }); }
+  catch (e) {
+    runEnd(root, runId, 1);
+    emit({ type: 'run-line', runId, chunk: 'spawn error: ' + e.message + '\n' });
+    emit({ type: 'run-end', runId, code: 1 }); emit({ type: 'change' });
+    return { runId };
+  }
+  // End the child's stdin immediately: a child that reads stdin (or a Windows pipe that
+  // otherwise keeps 'close' from firing) can't stall the run waiting on input that never comes.
+  try { child.stdin && child.stdin.end(); } catch {}
+
+  const onLine = (line) => {
+    const m = store.parseAgentLine(line);
+    if (m) { const full = store.appendMessage(root, { ...m, agent: which, runId }); emit({ type: 'message', message: full }); }
+    else emit({ type: 'run-line', runId, chunk: line + '\n' });
+  };
+  const out = makeFeeder(onLine), err = makeFeeder(onLine);
+  child.stdout && child.stdout.on('data', (d) => out.feed(d));
+  child.stderr && child.stderr.on('data', (d) => err.feed(d));
+  child.on('error', (e) => emit({ type: 'run-line', runId, chunk: 'error: ' + e.message + '\n' }));
+  child.on('close', (code) => {
+    out.flush(); err.flush();
+    runEnd(root, runId, code);
+    const sm = store.appendMessage(root, { role: which, kind: 'status', text: `finished (exit ${code})`, agent: which, runId });
+    emit({ type: 'message', message: sm });
+    emit({ type: 'run-end', runId, code }); emit({ type: 'change' });
+  });
+  return { runId, child };
+}
+
+module.exports = { startRun };

package/templates/dashboard/server.js

@@ -0,0 +1,115 @@
+'use strict';
+/*
+ * spectoflow dashboard — ZERO-DEPENDENCY server, real-time (SSE + fs.watch).
+ * v0.4 adds an agent launcher: POST /api/run spawns the configured agent headless in the project
+ * root (with project memory: CLAUDE.md → AGENTS.md), streams its output over SSE, and records the
+ * run in .spectoflow/runtime.json. As the agent edits plans/*.md, the board refreshes live.
+ */
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const store = require('../lib/store');
+const { startRun } = require('./runner');
+const orchestrator = require('./orchestrator');
+
+const PORT = process.env.SPECTOFLOW_PORT ? Number(process.env.SPECTOFLOW_PORT) : 4319;
+const PUBLIC = path.join(__dirname, 'public');
+const ROOT = process.env.SPECTOFLOW_ROOT || path.resolve(__dirname, '..', '..');
+const MIME = { '.html':'text/html; charset=utf-8', '.css':'text/css; charset=utf-8', '.js':'application/javascript; charset=utf-8' };
+const clients = new Set();
+
+function project(){ return store.readProject(ROOT); }
+function sendJSON(res,code,obj){ res.writeHead(code,{'Content-Type':'application/json; charset=utf-8'}); res.end(JSON.stringify(obj)); }
+function body(req){ return new Promise(r=>{ let b=''; req.on('data',c=>b+=c); req.on('end',()=>{ try{r(JSON.parse(b||'{}'));}catch{r({});} }); }); }
+function emit(obj){ const line='data: '+JSON.stringify(obj)+'\n\n'; for(const res of clients) res.write(line); }
+function findPlanFileForTask(id){ for(const pl of store.readPlans(ROOT)) for(const ph of pl.phases) if(ph.tasks.find(t=>t.id===id)) return pl.file; return null; }
+
+function watch(dir){ try{ fs.watch(dir,{recursive:false},()=>emit({type:'change'})); }catch(_){} }
+['plans','specs','.spectoflow'].forEach(d=>{ const p=path.join(ROOT,d); if(fs.existsSync(p)) watch(p); });
+
+// A process restart loses any in-flight orchestration; without this, a stale 'running' or
+// 'awaiting_approval' status wedges the /api/orchestrate 409 guard forever. Not a real
+// resume — just clears the wedge so a fresh orchestration can start.
+try { orchestrator.reconcileOnBoot(ROOT); } catch {}
+
+const server = http.createServer(async (req,res)=>{
+  const u=new URL(req.url,`http://localhost:${PORT}`); const p=u.pathname;
+  try{
+    if(p==='/api/project') return sendJSON(res,200,project());
+
+    // ---- read-only agent/skill file viewer (scoped to .spectoflow/{agents,skills}/**) ----
+    if (p === '/api/agentfile' && req.method === 'GET') {
+      const rel = new URL(req.url, 'http://x').searchParams.get('path') || '';
+      const base = path.join(ROOT, '.spectoflow');
+      const abs = path.resolve(base, rel);
+      const okDir = abs.startsWith(path.join(base, 'agents') + path.sep) || abs.startsWith(path.join(base, 'skills') + path.sep);
+      if (!okDir || !abs.endsWith('.md') || !fs.existsSync(abs) || fs.statSync(abs).isDirectory())
+        return sendJSON(res, 400, { error: 'not an agent/skill file' });
+      return sendJSON(res, 200, { content: fs.readFileSync(abs, 'utf8') });
+    }
+
+    if(p==='/api/events'){
+      res.writeHead(200,{'Content-Type':'text/event-stream','Cache-Control':'no-cache',Connection:'keep-alive'});
+      res.write('data: '+JSON.stringify({type:'hello'})+'\n\n');
+      clients.add(res); req.on('close',()=>clients.delete(res)); return;
+    }
+
+    if(p.startsWith('/api/task/')&&req.method==='PATCH'){
+      const id=decodeURIComponent(p.split('/')[3]||''); const patch=await body(req);
+      const file=findPlanFileForTask(id); if(!file) return sendJSON(res,404,{error:`Task ${id} not found.`});
+      store.updateTaskLine(ROOT,file,id,patch); emit({type:'change'}); return sendJSON(res,200,{ok:true});
+    }
+    if(/^\/api\/task\/[^/]+\/comment$/.test(p)&&req.method==='POST'){
+      const id=decodeURIComponent(p.split('/')[3]||''); const {text,action}=await body(req);
+      if(!text||!String(text).trim()) return sendJSON(res,400,{error:'Empty comment.'});
+      const file=findPlanFileForTask(id); if(!file) return sendJSON(res,404,{error:`Task ${id} not found.`});
+      store.addTaskComment(ROOT,file,id,String(text).trim(),'me');
+      if(action==='analyze') store.updateTaskLine(ROOT,file,id,{status:'to_analyze'});
+      emit({type:'change'}); return sendJSON(res,200,{ok:true});
+    }
+    if(p==='/api/workflow/toggle'&&req.method==='POST'){
+      const {name}=await body(req); const wf=path.join(ROOT,'.spectoflow','workflow.md');
+      const lines=fs.readFileSync(wf,'utf8').split('\n');
+      for(let i=0;i<lines.length;i++){ const m=lines[i].match(/^(\s*- \[)( |x|X)(\]\s+)(.*)$/);
+        if(m&&m[4].replace(/\s*\(optional\)\s*$/i,'').trim()===name) lines[i]=m[1]+(m[2].trim()?' ':'x')+m[3]+m[4]; }
+      fs.writeFileSync(wf,lines.join('\n')); emit({type:'change'}); return sendJSON(res,200,{ok:true});
+    }
+
+    // ---- agent launcher (pipeline lives in runner.js; posts to the group-chat log) ----
+    if(p==='/api/run'&&req.method==='POST'){
+      const {prompt,agent}=await body(req);
+      if(!prompt||!String(prompt).trim()) return sendJSON(res,400,{error:'Empty request.'});
+      const r=startRun(ROOT,{prompt,agent},emit);
+      if(r.error) return sendJSON(res,400,{error:r.error});
+      return sendJSON(res,200,{runId:r.runId});
+    }
+
+    // ---- orchestrator ----
+    if (p === '/api/orchestrate' && req.method === 'POST') {
+      const { request } = await body(req);
+      if (!request || !String(request).trim()) return sendJSON(res, 400, { error: 'Empty request.' });
+      const active = store.readRuntime(ROOT).orchestration;
+      if (active && ['running', 'awaiting_approval'].includes(active.status))
+        return sendJSON(res, 409, { error: 'An orchestration is already active.' });
+      const mode = store.readConfig(ROOT).mode || 'semi';
+      // fire and forget; state + messages stream over SSE
+      orchestrator.runOrchestration({ root: ROOT, request: String(request).trim(), mode,
+        runStep: orchestrator.defaultRunStep, confirm: orchestrator.defaultConfirm }, emit)
+        .catch((e) => emit({ type: 'message', message: { role: 'orchestrator', kind: 'status', text: 'orchestration error: ' + e.message } }));
+      const o = store.readRuntime(ROOT).orchestration;
+      return sendJSON(res, 200, { orchestrationId: o && o.id });
+    }
+    if (p === '/api/orchestrate/approve' && req.method === 'POST') {
+      const { decision, note } = await body(req);
+      const ok = orchestrator.submitDecision(decision, note);
+      return sendJSON(res, ok ? 200 : 409, ok ? { ok: true } : { error: 'No pending approval.' });
+    }
+
+    let file=p==='/'?'/index.html':p;
+    const full=path.join(PUBLIC,path.normalize(file).replace(/^(\.\.[/\\])+/,''));
+    if(!full.startsWith(PUBLIC)){ res.writeHead(403); return res.end('Forbidden'); }
+    fs.readFile(full,(err,data)=>{ if(err){res.writeHead(404); return res.end('Not found');}
+      res.writeHead(200,{'Content-Type':MIME[path.extname(full)]||'application/octet-stream'}); res.end(data); });
+  }catch(e){ sendJSON(res,500,{error:String(e&&e.message||e)}); }
+});
+server.listen(PORT,()=>{ console.log(`spectoflow · dashboard → http://localhost:${PORT}`); console.log(`project root: ${ROOT}`); });