smol-symphony 0.1.0 → 0.2.0

package/dist/http.js

@@ -2,10 +2,12 @@
 // watching status. The UI polls `/api/v1/state` so no SSE/WebSocket infrastructure is
 // needed.
 import { createServer } from 'node:http';
-import { mkdir, readdir, readFile, writeFile, stat } from 'node:fs/promises';
+import { readFile } from 'node:fs/promises';
 import path from 'node:path';
-import { sanitizeWorkspaceKey } from './workspace.js';
 import { log } from './logging.js';
+import { writeIssueFile } from './issues.js';
+import { matchRoute, resolvePartialName, extractBearerToken, classifyContentType, checkSteeringCsrf, checkTriageCsrf, extractFormText, extractJsonText, decideCreateIssue, decideTriageTransition, } from './http-handlers.js';
+import { listIssuesFromDisk, readIssueFromDisk, } from './http-disk.js';
 function jsonResponse(res, status, body) {
     const text = JSON.stringify(body);
     res.statusCode = status;
@@ -76,10 +78,12 @@ function isSameOriginRequest(req) {
     return !(req.headers['referer'] && req.headers['referer'].length > 0);
 }
 // HTMX's default response handling does not swap content on 4xx/5xx responses, so
-// returning a 4xx with an HTML partial silently leaves the panel stale. For HTMX
-// callers we therefore return 200 with the attention partial plus a one-line error
-// banner; the operator's textarea text survives via hx-preserve. JSON callers still
-// get the appropriate status code and a structured error.
+// returning a 4xx with an HTML partial silently leaves the region stale. For HTMX
+// callers (currently only steering-reply, which targets the #ticker region) we
+// return 200 with the ticker partial plus an inline error chip; the operator's
+// textarea content sits in the board row (separate hx-preserve cycle) and is
+// unaffected. JSON callers still get the appropriate status code and a structured
+// error.
 async function htmxOrJsonError(res, isHtmx, orch, view, jsonStatus, code, message) {
     if (isHtmx) {
         const p = await gatherPartialInputs(orch, view);
@@ -108,108 +112,6 @@ async function readTextBody(req, maxBytes = 1_000_000) {
         req.on('error', reject);
     });
 }
-// Used by the dashboard form. The local tracker stores issues at:
-//   <tracker.root>/<state>/<identifier>.md
-// with YAML front matter. Identifier sanitization re-uses the workspace key rules so the
-// file name is always safe across the rest of the orchestrator.
-async function writeIssueFile(input) {
-    const ident = sanitizeWorkspaceKey(input.identifier);
-    if (!ident)
-        throw new Error('identifier must contain at least one allowed character');
-    const stateDir = path.join(input.trackerRoot, input.state);
-    await mkdir(stateDir, { recursive: true });
-    const filePath = path.join(stateDir, `${ident}.md`);
-    try {
-        await stat(filePath);
-        throw new Error(`issue ${ident} already exists at ${filePath}`);
-    }
-    catch (err) {
-        if (err.code !== 'ENOENT')
-            throw err;
-    }
-    const now = new Date().toISOString();
-    const fm = {
-        id: ident,
-        identifier: ident,
-        title: input.title,
-        created_at: now,
-        updated_at: now,
-    };
-    if (typeof input.priority === 'number')
-        fm.priority = input.priority;
-    if (input.labels && input.labels.length > 0)
-        fm.labels = input.labels;
-    if (input.blocked_by && input.blocked_by.length > 0)
-        fm.blocked_by = input.blocked_by;
-    const yamlLines = ['---'];
-    for (const [k, v] of Object.entries(fm)) {
-        if (Array.isArray(v)) {
-            yamlLines.push(`${k}: [${v.map((x) => JSON.stringify(x)).join(', ')}]`);
-        }
-        else if (typeof v === 'string') {
-            yamlLines.push(`${k}: ${JSON.stringify(v)}`);
-        }
-        else {
-            yamlLines.push(`${k}: ${String(v)}`);
-        }
-    }
-    yamlLines.push('---', '');
-    const body = (input.description ?? '').trim();
-    const content = yamlLines.join('\n') + (body.length > 0 ? body + '\n' : '');
-    await writeFile(filePath, content, 'utf8');
-    return { path: filePath, identifier: ident, state: input.state };
-}
-// Browse current issues directly from disk so the UI can show items that are neither
-// currently running nor in the retry queue.
-async function listIssuesFromDisk(trackerRoot) {
-    const out = [];
-    let entries;
-    try {
-        entries = await readdir(trackerRoot);
-    }
-    catch {
-        return out;
-    }
-    for (const stateDir of entries) {
-        const dirPath = path.join(trackerRoot, stateDir);
-        let st;
-        try {
-            st = await stat(dirPath);
-        }
-        catch {
-            continue;
-        }
-        if (!st.isDirectory())
-            continue;
-        let files;
-        try {
-            files = await readdir(dirPath);
-        }
-        catch {
-            continue;
-        }
-        for (const f of files) {
-            if (!f.endsWith('.md'))
-                continue;
-            const filePath = path.join(dirPath, f);
-            let text;
-            try {
-                text = await readFile(filePath, 'utf8');
-            }
-            catch {
-                continue;
-            }
-            let title = f.slice(0, -3);
-            const titleMatch = /^---[\s\S]*?\ntitle:\s*(.+)\n[\s\S]*?---/m.exec(text);
-            if (titleMatch) {
-                title = titleMatch[1].trim().replace(/^["'](.*)["']$/, '$1');
-            }
-            out.push({ identifier: f.slice(0, -3), state: stateDir, title });
-        }
-    }
-    out.sort((a, b) => a.identifier.localeCompare(b.identifier));
-    return out;
-}
 async function gatherPartialInputs(orch, view) {
     const trackerRoot = view.trackerRoot ?? '(unset)';
     let diskIssues = [];
@@ -225,15 +127,39 @@ async function gatherPartialInputs(orch, view) {
         workflowName: path.basename(view.workflowPath || 'workflow.md'),
         workflowPath: view.workflowPath || '',
         trackerRoot,
-        activeStates: view.activeStates,
-        terminalStates: view.terminalStates,
+        states: view.states,
         snapshot: orch.snapshot(),
         diskIssues,
     };
 }
+/**
+ * Map a declared state name to its pill colour class. Active states pulse green
+ * (`running`), terminals settle into the muted "done" palette, holdings (Triage)
+ * use the same idle palette they always have. Unknown names — issues sitting in a
+ * directory that's no longer declared in `states:` — fall back to idle so the
+ * dashboard still renders something legible.
+ */
+function pillClassForState(states, stateName) {
+    const lower = stateName.toLowerCase();
+    const match = states.find((s) => s.name.toLowerCase() === lower);
+    if (!match)
+        return 'idle';
+    switch (match.role) {
+        case 'active':
+            return 'running';
+        case 'terminal':
+            return 'done';
+        case 'holding':
+            return 'idle';
+    }
+}
 function trackerStatus(snap) {
     const awaiting = snap.running.some((r) => r.steering_requested);
-    if (awaiting || snap.retrying.length > 0)
+    // Only failure-backoff retries warrant the operator's eyes. A `continuation`
+    // is the calm post-transition resume of a clean handoff (e.g. Review → Todo)
+    // and already holds its slot, so it must not flip the whole dashboard into
+    // "attention" (issue 146).
+    if (awaiting || snap.retrying.some((r) => r.kind === 'failure'))
         return 'attention';
     if (snap.running.length > 0)
         return 'working';
@@ -257,13 +183,20 @@ function formatRuntime(seconds) {
     const rem = m % 60;
     return rem === 0 ? `${h}h` : `${h}h${rem}m`;
 }
-function formatTimeShort(iso) {
+// `hour12: false` pins the 24-hour clock so the dashboard reads e.g. `14:30:05`
+// instead of locale-default AM/PM (`02:30:05 PM`) on 12-hour locales like en-US.
+export function formatTimeShort(iso) {
     if (!iso)
         return '';
     const d = new Date(iso);
     if (Number.isNaN(d.getTime()))
         return '';
-    return d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+    return d.toLocaleTimeString(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false,
+    });
 }
 function truncate(text, max) {
     if (!text)
@@ -279,53 +212,301 @@ function renderHeaderPartial(p) {
     const statusLabel = status === 'attention' ? 'attention' : status === 'working' ? 'working' : 'idle';
     return `<span class="badge badge-${status}" aria-label="tracker state: ${statusLabel}">${statusLabel}</span>`;
 }
+// ─── Top-of-page attention ticker ───────────────────────────────────────
+// A horizontal strip listing what currently needs the operator's eyes: pending
+// steering replies and stuck retries. Each identifier is an anchor link to the
+// row inside the board — the operator scans the ticker, jumps to the column,
+// and replies in place. The steering reply form itself now lives inline on its
+// row in the board, so this ticker stays thin.
 function renderAttentionPartial(p, opts) {
     const awaiting = p.snapshot.running.filter((r) => r.steering_requested);
-    const retrying = p.snapshot.retrying;
+    // Continuations are calm post-transition resumes, not failures — keep them
+    // off the attention ticker so a clean handoff doesn't read as a stuck retry
+    // (issue 146). Only failure-backoff retries surface here.
+    const retrying = p.snapshot.retrying.filter((r) => r.kind === 'failure');
     const errorMessage = opts?.errorMessage?.trim() ?? '';
-    if (awaiting.length === 0 && retrying.length === 0 && !errorMessage)
-        return '';
-    const errorBanner = errorMessage
-        ? `<div class="steering-error" role="alert">${escapeHtml(errorMessage)}</div>`
+    const segments = [];
+    if (awaiting.length > 0) {
+        const links = awaiting
+            .map((r) => `<a href="#row-${escapeHtml(r.issue_identifier)}" class="tick-id">${escapeHtml(r.issue_identifier)}</a>`)
+            .join(' ');
+        segments.push(`<span class="tick tick-await"><span class="tick-label">${awaiting.length} awaiting</span> ${links}</span>`);
+    }
+    if (retrying.length > 0) {
+        const stuck = retrying.filter((r) => r.error).length;
+        const links = retrying
+            .map((r) => `<a href="#row-${escapeHtml(r.issue_identifier)}" class="tick-id">${escapeHtml(r.issue_identifier)}</a>`)
+            .join(' ');
+        const label = stuck > 0
+            ? `${retrying.length} retrying · ${stuck} with error`
+            : `${retrying.length} retrying`;
+        segments.push(`<span class="tick tick-retry"><span class="tick-label">${label}</span> ${links}</span>`);
+    }
+    if (errorMessage) {
+        segments.push(`<span class="tick tick-err" role="alert">${escapeHtml(errorMessage)}</span>`);
+    }
+    return segments.join('');
+}
+// ─── Board (kanban) ─────────────────────────────────────────────────────
+// One column per declared state in workflow declaration order. Each on-disk
+// issue renders as a flat row in its state's column; transient orchestrator
+// state (running / retrying / awaiting steering) is overlaid via a pill, a
+// metadata trail, and — for awaiting — an inline question + reply form. Issues
+// sitting in an undeclared state directory (e.g. after a workflow rename) get
+// trailing columns so they stay visible until reconciled rather than silently
+// dropping out of the dashboard.
+function renderBoardPartial(p) {
+    const runningById = new Map();
+    for (const r of p.snapshot.running)
+        runningById.set(r.issue_identifier, r);
+    const retryingById = new Map();
+    for (const r of p.snapshot.retrying)
+        retryingById.set(r.issue_identifier, r);
+    // Group disk issues by lower-cased state name. LocalMarkdownTracker matches
+    // state directories case-insensitively against the declared `states:` keys
+    // (src/trackers/local.ts §scanAllAt: `declared.has(dirEntry.toLowerCase())`),
+    // so the dashboard must mirror that or a `todo/` directory under declared
+    // `Todo` would be misclassified as an orphan and split off into its own
+    // trailing column. `displayName` keeps the on-disk casing for orphan column
+    // headers (the only place we need to show a non-declared name).
+    const byStateLower = new Map();
+    for (const i of p.diskIssues) {
+        const key = i.state.toLowerCase();
+        const entry = byStateLower.get(key);
+        if (entry)
+            entry.items.push(i);
+        else
+            byStateLower.set(key, { displayName: i.state, items: [i] });
+    }
+    // Terminal columns (Done, Cancelled, …) are deliberately omitted from the
+    // board. The orchestrator's glance test — "is anything stuck, is anything
+    // running" — doesn't read off finished work, and a wall of archived rows
+    // dilutes the active surface. Terminal issues stay reachable through their
+    // /issues/<id> detail page; a dedicated history surface is the natural place
+    // to surface them again once we have something to anchor the row on (a PR
+    // link, a final token total, a closed-at timestamp).
+    const declared = p.states
+        .filter((state) => state.role !== 'terminal')
+        .map((state) => {
+        const items = byStateLower.get(state.name.toLowerCase())?.items ?? [];
+        return renderColumn(state, items, runningById, retryingById);
+    });
+    // Orphan columns: on-disk state directories whose names are not in the
+    // declared `states:` set. These render even when they look "terminal" because
+    // they're an error condition the operator needs to see (a workflow rename
+    // left files behind), not a clean archive.
+    const declaredLower = new Set(p.states.map((s) => s.name.toLowerCase()));
+    const orphans = [];
+    for (const [key, entry] of byStateLower) {
+        if (declaredLower.has(key))
+            continue;
+        orphans.push({ name: entry.displayName, items: entry.items });
+    }
+    orphans.sort((a, b) => a.name.localeCompare(b.name));
+    const orphanColumns = orphans.map((o) => renderColumn({ name: o.name, role: 'terminal' }, o.items, runningById, retryingById, { orphan: true }));
+    return `<div class="kanban">${declared.join('')}${orphanColumns.join('')}</div>`;
+}
+function renderColumn(state, items, runningById, retryingById, opts) {
+    const orphan = opts?.orphan === true;
+    const canAdd = !orphan && state.role !== 'terminal';
+    // Sort within a column so anything needing attention floats to the top:
+    // awaiting → running → retrying → idle. Ties break on identifier for stability.
+    const sorted = items.slice().sort((a, b) => {
+        const rank = (id) => {
+            const run = runningById.get(id);
+            if (run?.steering_requested)
+                return 0;
+            if (run)
+                return 1;
+            const retry = retryingById.get(id);
+            // A continuation reads as "running" (slot held across the handoff), so it
+            // ranks with the running tier; only failure-backoff retries sort below.
+            if (retry?.kind === 'continuation')
+                return 1;
+            if (retry)
+                return 2;
+            return 3;
+        };
+        const ar = rank(a.identifier);
+        const br = rank(b.identifier);
+        if (ar !== br)
+            return ar - br;
+        return a.identifier.localeCompare(b.identifier);
+    });
+    const rowsHtml = sorted
+        .map((i) => renderIssueRow(i, state, runningById.get(i.identifier), retryingById.get(i.identifier), { orphan }))
+        .join('');
+    const addBtn = canAdd
+        ? `<button type="button" class="col-add"
+              data-target-state="${escapeHtml(state.name)}"
+              aria-label="add issue to ${escapeHtml(state.name)}"
+              title="add issue to ${escapeHtml(state.name)}">+</button>`
         : '';
-    const steeringBlocks = awaiting.map((r) => renderSteeringBlock(r)).join('');
-    const retryBlocks = retrying.length > 0 ? renderRetryBlock(retrying) : '';
-    return `<h2 class="attention-title">attention</h2>
-${errorBanner}${steeringBlocks}${retryBlocks}`;
+    const emptyHint = sorted.length === 0 && state.role === 'active' && !orphan
+        ? `<p class="col-empty">drop into <code>${escapeHtml(state.name)}/</code></p>`
+        : '';
+    const orphanBadge = orphan
+        ? `<span class="col-orphan" title="state not declared in workflow.md">undeclared</span>`
+        : '';
+    return `<section class="col col-${escapeHtml(state.role)}${orphan ? ' col-orphan-wrap' : ''}" data-state="${escapeHtml(state.name)}">
+  <header class="col-head">
+    <span class="col-name">${escapeHtml(state.name)}</span>
+    <span class="col-count">${sorted.length}</span>
+    ${orphanBadge}
+    <span class="grow"></span>
+    ${addBtn}
+  </header>
+  <div class="col-body">${rowsHtml}${emptyHint}</div>
+</section>`;
+}
+function rowFlags(state, running, retrying, orphan) {
+    const isAwaiting = !!running?.steering_requested;
+    // A `continuation` retry is the slot-holding resume of a clean handoff (e.g.
+    // Review → Todo): the orchestrator still holds the issue's slot and redispatches
+    // within ~1s, so the card stays "running" across the handoff instead of flashing
+    // a transient pill. Only `failure`-backoff retries are "retrying" (issues
+    // 146/154; the design system's Three-Pill Rule — running/retrying/idle only).
+    const isContinuation = retrying?.kind === 'continuation';
+    return {
+        isAwaiting,
+        isRunning: (!!running || isContinuation) && !isAwaiting,
+        isRetrying: !!retrying && !isContinuation,
+        isHolding: !orphan && state.role === 'holding',
+        orphan,
+    };
+}
+function rowPillHtml(f) {
+    if (f.isAwaiting)
+        return '<span class="pill awaiting">awaiting</span>';
+    if (f.isRunning)
+        return '<span class="pill running">running</span>';
+    if (f.isRetrying)
+        return '<span class="pill retrying">retrying</span>';
+    return '';
+}
+function rowMetaHtml(running, retrying) {
+    if (running) {
+        const tokens = formatTokens(running.tokens.total_tokens || 0);
+        return `<span class="row-meta">turn ${running.turn_count} · ${escapeHtml(tokens)} tok</span>`;
+    }
+    // A `continuation` carries no operator-facing meta: the card reads as "running"
+    // across the handoff (see rowFlags), so the brief slot-holding window stays
+    // silent rather than surfacing an "attempt N · due" trail. Only `failure`
+    // retries show the backoff schedule.
+    if (retrying && retrying.kind !== 'continuation') {
+        const dueAt = formatTimeShort(retrying.due_at) || '—';
+        return `<span class="row-meta">attempt ${retrying.attempt} · due ${escapeHtml(dueAt)}</span>`;
+    }
+    return '';
 }
-function renderSteeringBlock(r) {
+function rowPeekHtml(running, isAwaiting) {
+    if (!running || isAwaiting)
+        return '';
+    const text = truncate(running.last_message ?? running.last_event ?? '', 110);
+    return text ? `<div class="row-peek dim">${escapeHtml(text)}</div>` : '';
+}
+function rowRetryErrHtml(retrying) {
+    if (!retrying?.error)
+        return '';
+    return `<div class="row-err">${escapeHtml(truncate(retrying.error, 200))}</div>`;
+}
+function rowTriageActionsHtml(ident, f) {
+    if (!(f.isHolding && !f.isRunning && !f.isAwaiting && !f.isRetrying))
+        return '';
+    const enc = encodeURIComponent(ident);
+    return `<div class="row-actions">
+    <form class="row-action"
+          hx-post="/api/v1/issues/${enc}/approve"
+          hx-target="#board" hx-swap="morph:innerHTML">
+      <button type="submit" class="ghost-sm" title="approve into the first active state">approve</button>
+    </form>
+    <form class="row-action"
+          hx-post="/api/v1/issues/${enc}/discard"
+          hx-target="#board" hx-swap="morph:innerHTML">
+      <button type="submit" class="ghost-sm danger" title="discard the proposal">discard</button>
+    </form>
+  </div>`;
+}
+function rowClassList(f, retryHasErr) {
+    return [
+        'row',
+        f.isAwaiting ? 'row-await' : '',
+        f.isRunning ? 'row-run' : '',
+        f.isRetrying && retryHasErr ? 'row-retry-stuck' : '',
+        f.orphan ? 'row-orphan' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+}
+function renderIssueRow(i, state, running, retrying, opts) {
+    const f = rowFlags(state, running, retrying, opts?.orphan === true);
+    const escIdent = escapeHtml(i.identifier);
+    const href = `/issues/${encodeURIComponent(i.identifier)}`;
+    const steering = f.isAwaiting ? renderSteeringInline(running) : '';
+    const classes = rowClassList(f, !!retrying?.error);
+    return `<article class="${classes}" id="row-${escIdent}">
+  <div class="row-head">
+    <a class="row-ident" href="${href}" title="open ${escIdent}">${escIdent}</a>
+    ${rowPillHtml(f)}
+    <span class="grow"></span>
+    ${rowMetaHtml(running, retrying)}
+  </div>
+  <a class="row-title" href="${href}">${escapeHtml(i.title)}</a>
+  ${rowPeekHtml(running, f.isAwaiting)}
+  ${rowRetryErrHtml(retrying)}
+  ${rowTriageActionsHtml(i.identifier, f)}
+  ${steering}
+</article>`;
+}
+function steeringSummaryLabel(hasOriginalTask, hasContext) {
+    if (hasOriginalTask && hasContext)
+        return 'original task & agent’s context';
+    if (hasOriginalTask)
+        return 'original task';
+    return 'agent’s context';
+}
+function steeringIssueBlock(title, body) {
+    if (!title && !body)
+        return '';
+    const titleHtml = title ? `<h3 class="issue-title">${escapeHtml(title)}</h3>` : '';
+    const bodyHtml = body ? `<p class="issue-body">${escapeHtml(body)}</p>` : '';
+    return `<div class="steering-task-label">issue</div>
+      ${titleHtml}
+      ${bodyHtml}`;
+}
+function steeringContextBlock(context) {
+    if (!context)
+        return '';
+    return `<div class="steering-task-label">agent’s context</div>
+      <pre class="context">${escapeHtml(context)}</pre>`;
+}
+function steeringExtraPanel(title, body, context) {
+    const hasOriginalTask = title.length > 0 || body.length > 0;
+    if (!hasOriginalTask && !context)
+        return '';
+    const label = steeringSummaryLabel(hasOriginalTask, context.length > 0);
+    return `<details class="steering-task">
+    <summary>${escapeHtml(label)}</summary>
+    <div class="steering-task-body">
+      ${steeringIssueBlock(title, body)}
+      ${steeringContextBlock(context)}
+    </div>
+  </details>`;
+}
+function renderSteeringInline(r) {
     const question = (r.steering_question ?? '').trim() || '(no question text)';
     const context = (r.steering_context ?? '').trim();
     const issueTitle = (r.issue_title ?? '').trim();
     const issueBody = (r.issue_body ?? '').trim();
-    const hasOriginalTask = issueTitle.length > 0 || issueBody.length > 0;
-    const hasAnyExtra = hasOriginalTask || context.length > 0;
-    // The textarea is given a stable id and hx-preserve="true" so the every-2s repoll of
-    // the attention zone doesn't wipe the operator's in-progress reply.
+    // Stable textarea id + hx-preserve so the every-2s board repoll keeps the
+    // operator's draft reply intact across morph swaps.
     const textareaId = `reply-${r.issue_identifier}`;
-    const summaryLabel = hasOriginalTask && context ? 'original task & agent’s context'
-        : hasOriginalTask ? 'original task'
-            : 'agent’s context';
-    return `<article class="steering" data-identifier="${escapeHtml(r.issue_identifier)}">
-  <header class="steering-head">
-    <strong class="ident">${escapeHtml(r.issue_identifier)}</strong>
-    <span class="pill awaiting">awaiting</span>
-    <span class="turn"><span class="dim">turn</span> ${r.turn_count}</span>
-  </header>
-  <p class="question-primary">${escapeHtml(question)}</p>
-  ${hasAnyExtra ? `<details class="steering-task">
-    <summary>${escapeHtml(summaryLabel)}</summary>
-    <div class="steering-task-body">
-      ${hasOriginalTask ? `<div class="steering-task-label">issue</div>
-      ${issueTitle ? `<h3 class="issue-title">${escapeHtml(issueTitle)}</h3>` : ''}
-      ${issueBody ? `<p class="issue-body">${escapeHtml(issueBody)}</p>` : ''}` : ''}
-      ${context ? `<div class="steering-task-label">agent’s context</div>
-      <pre class="context">${escapeHtml(context)}</pre>` : ''}
-    </div>
-  </details>` : ''}
+    return `<div class="steering">
+  <div class="steering-q">${renderMarkdown(question)}</div>
+  ${steeringExtraPanel(issueTitle, issueBody, context)}
   <form class="reply"
         hx-post="/api/v1/issues/${encodeURIComponent(r.issue_identifier)}/steering-reply"
-        hx-target="#attention" hx-swap="morph:innerHTML">
+        hx-target="#ticker" hx-swap="morph:innerHTML">
     <textarea id="${escapeHtml(textareaId)}" name="text" required
               placeholder="your reply…"
               aria-label="reply to ${escapeHtml(r.issue_identifier)}"
@@ -335,96 +516,53 @@ function renderSteeringBlock(r) {
       <button type="submit" class="ghost">send reply</button>
     </div>
   </form>
-</article>`;
-}
-function renderRetryBlock(rows) {
-    const items = rows.map((r) => `<li>
-    <strong class="ident">${escapeHtml(r.issue_identifier)}</strong>
-    <span class="pill retrying">retrying</span>
-    <span class="dim">attempt ${r.attempt}</span>
-    <span class="dim">due ${escapeHtml(formatTimeShort(r.due_at) || '—')}</span>
-    ${r.error ? `<div class="retry-err">${escapeHtml(truncate(r.error, 200))}</div>` : ''}
-  </li>`).join('');
-    return `<ul class="retry-list" aria-label="retry queue">${items}</ul>`;
-}
-function renderSessionsPartial(p) {
-    const rows = p.snapshot.running;
-    if (rows.length === 0) {
-        return `<h2>sessions</h2>
-<p class="empty dim">no sessions running. agents wake when an issue lands in <code>${escapeHtml(p.activeStates[0] ?? 'Todo')}/</code>.</p>`;
-    }
-    const sessionItems = rows.map((r) => renderSessionRow(r)).join('');
-    return `<h2>sessions <span class="count dim">(${rows.length})</span></h2>
-<ul class="sessions">${sessionItems}</ul>`;
-}
-function renderSessionRow(r) {
-    const awaiting = r.steering_requested;
-    const pill = awaiting
-        ? '<span class="pill awaiting">awaiting</span>'
-        : r.marked_done
-            ? '<span class="pill done">done</span>'
-            : '<span class="pill running">running</span>';
-    const tokens = r.tokens.total_tokens || 0;
-    const sessionId = r.session_id ? r.session_id.slice(0, 8) : '—';
-    const lastMsg = truncate(r.last_message ?? r.last_event ?? '', 140);
-    // The session row is two lines max: identifier + pill + turn + tokens + time on top,
-    // last-message on bottom. Session id / state / last-event detail is surfaced via the
-    // row's title attr so it's available on hover without adding a third line of noise.
-    const rowTitle = [
-        `session ${sessionId}`,
-        r.state,
-        r.last_event ?? null,
-        `started ${formatTimeShort(r.started_at) || '—'}`,
-    ]
-        .filter(Boolean)
-        .join(' · ');
-    return `<li class="session" title="${escapeHtml(rowTitle)}">
-  <div class="session-row">
-    <strong class="ident">${escapeHtml(r.issue_identifier)}</strong>
-    ${pill}
-    <span class="turn"><span class="dim">turn</span> ${r.turn_count}</span>
-    <span class="grow"></span>
-    <span class="tokens dim">${formatTokens(tokens)} tok</span>
-  </div>
-  ${lastMsg ? `<div class="session-msg dim">${escapeHtml(lastMsg)}</div>` : ''}
-</li>`;
-}
-function renderDiskPartial(p) {
-    const runIds = new Set(p.snapshot.running.map((r) => r.issue_identifier));
-    const retryIds = new Set(p.snapshot.retrying.map((r) => r.issue_identifier));
-    const active = new Set(p.activeStates);
-    const filtered = p.diskIssues.filter((i) => active.has(i.state) && !runIds.has(i.identifier) && !retryIds.has(i.identifier));
-    if (filtered.length === 0) {
-        return `<h2>on disk</h2>
-<p class="empty dim">tracker is clean. drop a markdown file into <code>${escapeHtml(p.activeStates[0] ?? 'Todo')}/</code> or open <em>new issue</em> below.</p>`;
-    }
-    const items = filtered.map((i) => `<li>
-    <span class="ident">${escapeHtml(i.identifier)}</span>
-    <span class="state dim">${escapeHtml(i.state)}</span>
-    <span class="title">${escapeHtml(i.title)}</span>
-  </li>`).join('');
-    return `<h2>on disk <span class="count dim">(${filtered.length})</span></h2>
-<ul class="disk">${items}</ul>`;
+</div>`;
+}
+// ─── Right-side new-issue panel (the One Card) ─────────────────────────
+// The dashboard's only card-shaped surface (DESIGN.md §5 One-Card Rule). Slides
+// in from the right edge when the operator clicks a column's `+` button; the
+// column the click came from pre-selects the state field. Non-modal: the board
+// stays visible and interactive on the left. Esc closes; backdrop clicks do not
+// (avoid accidental discards of in-progress drafts).
+function renderNewIssuePanel(p) {
+    const targets = p.states.filter((s) => s.role !== 'terminal');
+    const firstActive = p.states.find((s) => s.role === 'active');
+    const defaultState = (firstActive ?? targets[0])?.name ?? '';
+    const options = targets
+        .map((s) => {
+        const sel = s.name === defaultState ? ' selected' : '';
+        return `<option value="${escapeHtml(s.name)}"${sel}>${escapeHtml(s.name)}</option>`;
+    })
+        .join('');
+    return `<aside id="new-panel" class="new-panel" aria-hidden="true" aria-labelledby="np-title">
+  <header class="np-head">
+    <h2 id="np-title">new issue</h2>
+    <button type="button" class="np-close" aria-label="close" title="close (esc)">×</button>
+  </header>
+  <form class="np-form" id="np-form">
+    <label for="np-state">column</label>
+    <select id="np-state" name="state" required>${options}</select>
+    <label for="np-title-input">title</label>
+    <input id="np-title-input" name="title" required autocomplete="off" placeholder="what needs doing?" />
+    <label for="np-description">description</label>
+    <textarea id="np-description" name="description" rows="6" placeholder="optional — context for the agent"></textarea>
+    <div class="np-actions">
+      <span class="np-msg" id="np-msg" role="status" aria-live="polite"></span>
+      <button type="submit" class="np-submit">create</button>
+    </div>
+  </form>
+</aside>`;
 }
 function renderTotalsPartial(p) {
-    const t = p.snapshot.codex_totals;
+    const t = p.snapshot.session_totals;
     if (!t || (t.input_tokens === 0 && t.output_tokens === 0 && t.seconds_running === 0))
         return '';
     return `${formatTokens(t.input_tokens)} in · ${formatTokens(t.output_tokens)} out · ${formatTokens(t.total_tokens)} total · ${formatRuntime(t.seconds_running)} runtime`;
 }
-function renderDashboardHtml(p) {
-    const allStates = Array.from(new Set([...p.activeStates, ...p.terminalStates]));
-    const stateOptions = allStates
-        .map((s) => `<option value="${escapeHtml(s)}">${escapeHtml(s)}</option>`)
-        .join('');
-    const diskCount = p.diskIssues.filter((i) => p.activeStates.includes(i.state)).length;
-    const formOpen = diskCount === 0 && p.snapshot.running.length === 0 && p.snapshot.retrying.length === 0;
-    return `<!doctype html>
-<html lang="en"><head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>symphony · ${escapeHtml(p.workflowName)}</title>
-<style>
+// Dashboard CSS, hoisted to a top-level constant so renderDashboardHtml stays
+// within the imperative-shell max-lines budget. Pure presentation content — no
+// interpolated values — so it lives outside the function.
+const DASHBOARD_CSS = `
 :root {
   color-scheme: dark;
   --inset: #0c0f15; --bench: #0f1115; --raised: #161a22; --chip: #20242c;
@@ -439,30 +577,20 @@ function renderDashboardHtml(p) {
   --err: #ff7676;
 }
 * { box-sizing: border-box; }
-html, body { background: var(--bench); color: var(--base); }
+html, body { background: var(--bench); color: var(--base); margin: 0; }
 body {
   font: 14px/1.45 ui-sans-serif, system-ui, sans-serif;
-  margin: 0; padding: 0;
-  display: flex; flex-direction: column; min-height: 100vh;
-}
-main {
-  width: 100%; max-width: 1080px; margin: 0 auto;
-  padding: 1rem 1.5rem 2rem; flex: 1;
+  min-height: 100vh;
+  display: flex; flex-direction: column;
 }
 code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; color: var(--strong); }
 .dim { color: var(--dim); }
-.grow { flex: 1; }
-h2 {
-  font-size: 1rem; font-weight: 500; margin: 1.6rem 0 0.5rem;
-  padding-bottom: 0.35rem; border-bottom: 1px solid var(--rule-firm);
-  letter-spacing: 0.01em;
-}
-h2:first-child { margin-top: 0.4rem; }
+.grow { flex: 1 1 auto; }
 
 /* ── header strip ─────────────────────────────────────────────────────── */
 #header {
   display: flex; align-items: center; gap: 0.5rem;
-  padding: 0.65rem 1.5rem;
+  padding: 0.65rem 1.25rem;
   background: var(--bench); border-bottom: 1px solid var(--rule-firm);
   font-size: 13px;
   position: sticky; top: 0; z-index: 10;
@@ -496,85 +624,204 @@ h2:first-child { margin-top: 0.4rem; }
 #header .refresh:hover { border-color: var(--muted); }
 #header .refresh:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 
-/* ── pills ────────────────────────────────────────────────────────────── */
+/* ── ticker ──────────────────────────────────────────────────────────── */
+#ticker {
+  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center;
+  padding: 0 1.25rem; background: var(--bench);
+  border-bottom: 1px solid var(--rule-soft);
+  font-size: 13px;
+  transition: padding 200ms cubic-bezier(.22,1,.36,1),
+              border-bottom-color 200ms cubic-bezier(.22,1,.36,1);
+}
+#ticker:empty { padding-top: 0; padding-bottom: 0; border-bottom-color: transparent; }
+#ticker:not(:empty) { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+.tick { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
+.tick-label { color: var(--muted); font-variant-numeric: tabular-nums; }
+.tick-await .tick-label { color: var(--await-fg); }
+.tick-retry .tick-label { color: var(--retry-fg); }
+.tick-err { color: var(--err); }
+.tick-id {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: var(--base); text-decoration: none;
+  border-bottom: 1px solid var(--rule-firm);
+  font-size: 0.92em;
+  padding-bottom: 1px;
+}
+.tick-id:hover, .tick-id:focus-visible { color: #9cc0ff; border-bottom-color: #9cc0ff; outline: none; }
+
+/* ── board ───────────────────────────────────────────────────────────── */
+#board {
+  flex: 1 1 auto; min-height: 0;
+  padding: 1rem 1.25rem 2.5rem;
+  overflow-x: auto;
+}
+.kanban {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(260px, 1fr);
+  gap: 1.5rem;
+  align-items: start;
+  min-width: min-content;
+}
+.col { display: flex; flex-direction: column; min-width: 0; }
+.col-head {
+  display: flex; align-items: baseline; gap: 0.4rem;
+  padding: 0 0 0.35rem;
+  border-bottom: 1px solid var(--rule-firm);
+  margin-bottom: 0.5rem;
+}
+.col-name {
+  color: var(--muted); font-weight: 500; font-size: 14px;
+  letter-spacing: 0.01em;
+}
+.col-holding .col-name { color: var(--retry-fg); }
+.col-terminal .col-name { color: var(--dim); }
+.col-count { color: var(--dim); font-size: 0.82em; font-variant-numeric: tabular-nums; }
+.col-orphan {
+  color: var(--err); font-size: 0.7em; letter-spacing: 0.05em;
+  text-transform: uppercase; margin-left: 0.3rem;
+}
+.col-add {
+  background: transparent; color: var(--muted);
+  border: 1px solid var(--rule-firm); border-radius: 4px;
+  width: 22px; height: 22px;
+  display: inline-flex; align-items: center; justify-content: center;
+  cursor: pointer; font: inherit; line-height: 1; font-size: 16px;
+  transition: color 160ms cubic-bezier(.22,1,.36,1), border-color 160ms cubic-bezier(.22,1,.36,1);
+}
+.col-add:hover { color: var(--strong); border-color: var(--muted); }
+.col-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.col-body { display: flex; flex-direction: column; }
+.col-empty {
+  padding: 0.4rem 0; margin: 0;
+  font-size: 0.9em; color: var(--dim);
+}
+.col-empty code { color: var(--muted); }
+
+/* ── row ─────────────────────────────────────────────────────────────── */
+.row {
+  padding: 0.55rem 0.6rem; margin: 0 -0.6rem;
+  border-bottom: 1px solid var(--rule-soft);
+  display: flex; flex-direction: column; gap: 0.2rem;
+  border-radius: 3px;
+}
+.row:last-child { border-bottom: 0; }
+.row-await { background: rgba(127, 181, 212, 0.07); }
+.row-retry-stuck { background: rgba(240, 192, 96, 0.05); }
+.row-orphan { opacity: 0.7; }
+.row-head {
+  display: flex; align-items: center; gap: 0.5rem;
+  font-variant-numeric: tabular-nums;
+}
+.row-ident {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: var(--strong); text-decoration: none;
+  font-size: 13px;
+}
+.row-ident:hover, .row-ident:focus-visible { color: #9cc0ff; outline: none; }
 .pill {
   display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px;
-  font-size: 0.82em; line-height: 1.4;
+  font-size: 0.78em; line-height: 1.4;
   font-variant-numeric: tabular-nums;
 }
 .pill.running { background: var(--run-bg); color: var(--run-fg); }
 .pill.retrying { background: var(--retry-bg); color: var(--retry-fg); }
-.pill.idle { background: var(--idle-bg); color: var(--idle-fg); }
+/* A "resuming" row is mid clean-handoff (issue 146): calm blue, not the amber
+   retry palette, so it never reads as an error. */
+.pill.resuming { background: var(--await-bg); color: var(--await-fg); }
 .pill.awaiting { background: var(--await-bg); color: var(--await-fg); }
-.pill.done { background: var(--done-bg); color: var(--done-fg); }
-
-/* ── attention zone ───────────────────────────────────────────────────── */
-/* Animated open/close: max-height transitions between 0 (empty) and a generous cap
-   (populated) so the section eases in and out rather than snapping the page up/down
-   when steering arrives or is resolved. */
-#attention {
+.row-meta { color: var(--muted); font-size: 0.82em; }
+.row-title {
   display: block;
-  overflow: hidden;
-  max-height: 0;
-  margin-bottom: 0;
-  transition: max-height 280ms cubic-bezier(.22, 1, .36, 1),
-              margin-bottom 280ms cubic-bezier(.22, 1, .36, 1);
-}
-#attention:not(:empty) {
-  max-height: 1500px;
-  margin-bottom: 0.4rem;
-}
-.attention-title { color: var(--await-fg); border-bottom-color: var(--await-bg); }
-.steering-error {
-  margin: 0.4rem 0; padding: 0.5rem 0.7rem;
-  background: var(--inset); border: 1px solid var(--rule-firm); border-radius: 4px;
-  color: var(--err); font-size: 0.9em; line-height: 1.4;
+  color: var(--base); text-decoration: none;
+  font-size: 14px; line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+.row-title:hover, .row-title:focus-visible { color: var(--strong); outline: none; }
+.row-peek {
+  font-size: 0.85em; line-height: 1.4;
+  overflow-wrap: anywhere;
+  max-height: 2.85em; overflow: hidden;
+}
+.row-err {
+  font-size: 0.85em; line-height: 1.35; color: var(--err);
+  overflow-wrap: anywhere; word-break: break-word;
 }
-/* The steering panel: question-first layout. Selected via /impeccable live (variant 3,
-   question-scale=1.1, density=snug). The agent's prompt sits proud and unscaled, and the
-   original issue + agent context tuck into a disclosure so the panel reads small until
-   the operator wants depth. */
+.row-actions { display: flex; gap: 0.4rem; margin-top: 0.2rem; }
+.row-action { display: inline; margin: 0; padding: 0; }
+.ghost {
+  background: var(--chip); color: var(--base);
+  border: 1px solid var(--rule-firm); border-radius: 4px;
+  padding: 0.35rem 0.85rem; font: inherit; cursor: pointer;
+  transition: border-color 180ms cubic-bezier(.22,1,.36,1);
+}
+.ghost:hover { border-color: var(--muted); }
+.ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ghost-sm {
+  background: transparent; color: var(--muted);
+  border: 1px solid var(--rule-firm); border-radius: 3px;
+  padding: 0.18rem 0.6rem; font: inherit; font-size: 0.82em; cursor: pointer;
+  transition: color 160ms cubic-bezier(.22,1,.36,1), border-color 160ms cubic-bezier(.22,1,.36,1);
+}
+.ghost-sm:hover { color: var(--strong); border-color: var(--muted); }
+.ghost-sm.danger:hover { color: var(--err); border-color: var(--err); }
+.ghost-sm:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+
+/* ── inline steering on awaiting rows ────────────────────────────────── */
 .steering {
-  background: var(--raised); padding: 0.55rem 0.8rem; margin: 0.5rem 0;
-  border-radius: 6px;
+  margin-top: 0.45rem; padding-top: 0.45rem;
+  border-top: 1px dashed var(--rule-firm);
   display: grid; gap: 0.4rem;
 }
-.steering-head {
-  display: flex; align-items: center; gap: 0.6rem;
+.steering-q { color: var(--strong); font-size: 0.95em; line-height: 1.45; }
+.steering-q > :first-child { margin-top: 0; }
+.steering-q > :last-child { margin-bottom: 0; }
+.steering-q p { margin: 0.35em 0; }
+.steering-q h1, .steering-q h2, .steering-q h3,
+.steering-q h4, .steering-q h5, .steering-q h6 {
+  margin: 0.5em 0 0.25em; font-weight: 500; font-size: 1em;
+}
+.steering-q ul, .steering-q ol { margin: 0.3em 0; padding-left: 1.4em; }
+.steering-q li { margin: 0.15em 0; }
+.steering-q code {
+  background: var(--inset); padding: 0.05em 0.35em; border-radius: 3px; font-size: 0.92em;
+}
+.steering-q pre {
+  margin: 0.5em 0; padding: 0.5rem 0.65rem;
+  background: var(--inset); border: 1px solid var(--rule-firm); border-radius: 4px;
+  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: var(--muted); overflow: auto;
 }
-.steering .ident { color: var(--strong); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
-.steering .turn { font-size: 0.88em; }
-.steering .question-primary {
-  margin: 0;
-  font-size: calc(14px * 1.1);
-  line-height: 1.4; color: var(--strong); font-weight: 400;
+.steering-q pre code { background: transparent; padding: 0; font-size: inherit; }
+.steering-q blockquote {
+  margin: 0.35em 0; padding: 0.1em 0.7em;
+  border-left: 2px solid var(--rule-firm); color: var(--muted);
 }
-.steering details.steering-task { font-size: 0.92em; }
-.steering details.steering-task > summary {
+.steering-q a { color: var(--await-fg); }
+.steering-task { font-size: 0.88em; }
+.steering-task > summary {
   cursor: pointer; list-style: none;
-  color: var(--muted); padding: 0.3rem 0; user-select: none;
-  font-size: 0.88em;
+  color: var(--muted); padding: 0.2rem 0; user-select: none;
 }
-.steering details.steering-task > summary::-webkit-details-marker { display: none; }
-.steering details.steering-task > summary::before {
+.steering-task > summary::-webkit-details-marker { display: none; }
+.steering-task > summary::before {
   content: "▸"; padding-right: 0.4rem;
   transition: transform 180ms cubic-bezier(.22,1,.36,1);
   display: inline-block; color: var(--dim);
 }
-.steering details.steering-task[open] > summary::before { transform: rotate(90deg); }
-.steering .steering-task-body {
-  display: grid; gap: 0.45rem;
-  padding: 0.35rem 0 0 0.85rem;
-  border-left: 1px solid var(--rule-soft);
+.steering-task[open] > summary::before { transform: rotate(90deg); }
+.steering-task-body {
+  display: grid; gap: 0.35rem;
+  padding: 0.3rem 0 0 0.75rem;
 }
-.steering .steering-task-label {
-  font-size: 0.72em; color: var(--dim);
-  letter-spacing: 0.09em; text-transform: uppercase;
+.steering-task-label {
+  font-size: 0.7em; color: var(--dim);
+  letter-spacing: 0.08em; text-transform: uppercase;
 }
-.steering .steering-task-body .issue-title {
+.steering-task-body .issue-title {
   margin: 0; font-size: 0.95em; font-weight: 500; color: var(--base);
 }
-.steering .steering-task-body .issue-body {
+.steering-task-body .issue-body {
   margin: 0; color: var(--muted); font-size: 0.92em; line-height: 1.5;
 }
 .steering .context {
@@ -584,142 +831,199 @@ h2:first-child { margin-top: 0.4rem; }
   color: var(--muted); white-space: pre-wrap; word-break: break-word;
   max-height: 12em; overflow: auto;
 }
-.steering form.reply { display: grid; gap: 0.45rem; }
-.steering textarea {
+form.reply { display: grid; gap: 0.4rem; margin: 0; }
+form.reply textarea {
   background: var(--inset); color: var(--strong);
   border: 1px solid var(--rule-firm); border-radius: 4px;
-  padding: 0.5rem 0.65rem;
+  padding: 0.45rem 0.6rem;
   font: 14px/1.5 ui-sans-serif, system-ui, sans-serif;
-  width: 100%; min-height: 64px; resize: vertical;
-}
-.steering textarea:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
-.steering .reply-row { display: flex; align-items: center; gap: 0.75rem; }
-.steering .hint { font-size: 0.82em; }
-.ghost {
-  background: var(--chip); color: var(--base);
-  border: 1px solid var(--rule-firm); border-radius: 4px;
-  padding: 0.35rem 0.85rem; font: inherit; cursor: pointer;
-  transition: border-color 180ms cubic-bezier(.22,1,.36,1);
-}
-.ghost:hover { border-color: var(--muted); }
-.ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
-.ghost:disabled { color: var(--dim); cursor: not-allowed; }
-
-.retry-list { list-style: none; padding: 0; margin: 0.4rem 0 0; }
-.retry-list li {
-  display: grid;
-  grid-template-columns: max-content max-content max-content max-content;
-  gap: 0.55rem; align-items: center;
-  padding: 0.4rem 0; border-bottom: 1px solid var(--rule-soft);
-  font-variant-numeric: tabular-nums;
-}
-.retry-list li:last-child { border-bottom: 0; }
-.retry-list .ident { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
-.retry-list .retry-err {
-  grid-column: 1 / -1; color: var(--err); font-size: 0.88em;
-  padding-top: 0.15rem;
-  word-break: break-word;
-}
-
-/* ── sessions ─────────────────────────────────────────────────────────── */
-.sessions { list-style: none; padding: 0; margin: 0; }
-.sessions li.session {
-  padding: 0.5rem 0; border-bottom: 1px solid var(--rule-soft);
-}
-.sessions li.session:last-child { border-bottom: 0; }
-.session-row {
-  display: flex; align-items: baseline; gap: 0.65rem;
-  font-variant-numeric: tabular-nums;
+  width: 100%; min-height: 60px; resize: vertical;
 }
-.session-row .ident { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--strong); }
-.session-row .turn { font-size: 0.88em; color: var(--muted); }
-.session-row .tokens { font-size: 0.88em; }
-.session-msg {
-  margin-top: 0.2rem; padding-left: 0.05rem;
-  font-size: 0.9em; line-height: 1.45;
-  overflow-wrap: anywhere;
-  max-height: 2.9em; overflow: hidden;
+form.reply textarea:focus-visible {
+  outline: 1px solid var(--accent); outline-offset: 0; border-color: var(--accent);
 }
+form.reply .reply-row { display: flex; align-items: center; gap: 0.75rem; }
+form.reply .hint { font-size: 0.82em; }
 
-/* ── on disk ──────────────────────────────────────────────────────────── */
-.disk { list-style: none; padding: 0; margin: 0; }
-.disk li {
-  display: grid;
-  grid-template-columns: 10rem 5.5rem 1fr;
-  gap: 0.5rem; align-items: baseline;
-  padding: 0.35rem 0; border-bottom: 1px solid var(--rule-soft);
+/* ── totals footer ───────────────────────────────────────────────────── */
+footer.totals {
+  padding: 0.85rem 1.25rem;
+  border-top: 1px solid var(--rule-soft);
+  color: var(--dim); font-size: 0.85em;
   font-variant-numeric: tabular-nums;
+  display: flex; gap: 0.65rem; flex-wrap: wrap;
 }
-.disk li:last-child { border-bottom: 0; }
-.disk .ident { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--strong); }
-.disk .state { font-size: 0.85em; }
-.disk .title { color: var(--base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.count { font-weight: 400; font-size: 0.88em; margin-left: 0.4rem; }
+footer.totals:empty { display: none; }
 
-/* ── new issue (collapsed) ────────────────────────────────────────────── */
-details.new-issue {
-  margin-top: 1.4rem;
-}
-details.new-issue > summary {
-  cursor: pointer; list-style: none; padding: 0.55rem 0;
-  border-bottom: 1px solid var(--rule-firm);
-  font-size: 1rem; font-weight: 500;
-  display: flex; align-items: center; gap: 0.5rem;
-  user-select: none;
+/* ── right-side new-issue panel (the One Card) ───────────────────────── */
+.new-panel {
+  position: fixed; top: 0; right: 0;
+  width: 400px; max-width: 90vw;
+  height: 100vh;
+  background: var(--raised);
+  border-left: 1px solid var(--rule-firm);
+  display: flex; flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 320ms cubic-bezier(.22, 1, .36, 1),
+              visibility 0s linear 320ms;
+  visibility: hidden;
+  z-index: 20;
+}
+.new-panel.open {
+  transform: translateX(0);
+  visibility: visible;
+  transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
+}
+.np-head {
+  display: flex; align-items: center; gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--rule-soft);
+}
+.np-head h2 { margin: 0; font-size: 1rem; font-weight: 500; color: var(--strong); }
+.np-close {
+  margin-left: auto;
+  background: var(--chip); color: var(--muted);
+  border: 1px solid var(--rule-firm); border-radius: 4px;
+  width: 28px; height: 28px;
+  cursor: pointer; font: inherit; font-size: 16px; line-height: 1;
+  transition: color 160ms cubic-bezier(.22,1,.36,1), border-color 160ms cubic-bezier(.22,1,.36,1);
 }
-details.new-issue > summary::-webkit-details-marker { display: none; }
-details.new-issue > summary::before {
-  content: "▸"; color: var(--dim); font-size: 0.85em;
-  transition: transform 180ms cubic-bezier(.22,1,.36,1);
-  display: inline-block;
+.np-close:hover { color: var(--strong); border-color: var(--muted); }
+.np-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.np-form {
+  display: flex; flex-direction: column; gap: 0.35rem;
+  padding: 1rem 1.25rem; flex: 1; overflow: auto;
 }
-details.new-issue[open] > summary::before { transform: rotate(90deg); }
-details.new-issue[open] > summary { border-bottom-color: var(--rule-firm); }
-form.create {
-  display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem;
-  align-items: center; padding: 1rem 0 0; margin-top: 0.4rem;
+.np-form label {
+  color: var(--muted); font-size: 14px; margin-top: 0.5rem;
 }
-form.create label { color: var(--muted); }
-form.create input, form.create select, form.create textarea {
+.np-form label:first-of-type { margin-top: 0; }
+.np-form select, .np-form input, .np-form textarea {
   background: var(--inset); color: var(--strong);
   border: 1px solid var(--rule-firm); border-radius: 4px;
-  padding: 0.4rem 0.6rem; font: inherit; width: 100%;
+  padding: 0.45rem 0.6rem; font: inherit; width: 100%;
 }
-form.create input:focus-visible, form.create select:focus-visible, form.create textarea:focus-visible {
+.np-form textarea { resize: vertical; min-height: 120px; }
+.np-form select:focus-visible,
+.np-form input:focus-visible,
+.np-form textarea:focus-visible {
   outline: 1px solid var(--accent); outline-offset: 0; border-color: var(--accent);
 }
-form.create textarea { min-height: 80px; resize: vertical; }
-form.create .submit-row {
-  grid-column: 2; display: flex; align-items: center; gap: 0.85rem;
+.np-actions {
+  display: flex; align-items: center; gap: 0.75rem;
+  margin-top: 0.9rem;
+}
+.np-msg {
+  flex: 1; color: var(--muted); font-size: 0.88em;
+  min-height: 1.2em; line-height: 1.2;
 }
-form.create button {
+.np-msg.err { color: var(--err); }
+.np-msg.ok { color: var(--run-fg); }
+.np-submit {
   background: var(--accent); color: #f4f6fb; border: 0;
-  padding: 0.5rem 1rem; border-radius: 4px; font: inherit; cursor: pointer;
+  padding: 0.55rem 1.1rem; border-radius: 4px;
+  font: inherit; cursor: pointer;
   transition: filter 180ms cubic-bezier(.22,1,.36,1);
-  flex: 0 0 auto;
 }
-form.create button:hover { filter: brightness(1.08); }
-form.create button:focus-visible { outline: 2px solid var(--strong); outline-offset: 2px; }
-form.create .msg { min-height: 1.2em; color: var(--muted); font-size: 0.9em; line-height: 1.2; }
-form.create .msg.err { color: var(--err); }
-form.create .msg.ok { color: var(--run-fg); }
-
-/* ── totals footer ────────────────────────────────────────────────────── */
-footer.totals {
-  margin-top: 2.5rem; padding-top: 0.85rem;
-  border-top: 1px solid var(--rule-soft);
-  color: var(--dim); font-size: 0.88em;
-  font-variant-numeric: tabular-nums;
-  display: flex; gap: 0.65rem; flex-wrap: wrap;
-}
-footer.totals:empty { display: none; }
-
-.empty { padding: 0.5rem 0; }
+.np-submit:hover { filter: brightness(1.08); }
+.np-submit:focus-visible { outline: 2px solid var(--strong); outline-offset: 2px; }
 
 /* htmx ergonomics */
 .htmx-request .refresh { opacity: 0.6; }
-.htmx-settling .session-msg { opacity: 0.85; }
-</style>
+.htmx-settling .row-peek { opacity: 0.85; }
+`;
+// Dashboard new-issue panel controller. Stored as a top-level constant so the
+// renderDashboardHtml shell stays inside the imperative-shell line budget.
+const DASHBOARD_SCRIPT = `
+(() => {
+  const $ = (id) => document.getElementById(id);
+  const panel = $('new-panel');
+  const stateSelect = $('np-state');
+  const titleInput = $('np-title-input');
+  const descTextarea = $('np-description');
+  const npMsg = $('np-msg');
+  const form = $('np-form');
+
+  const setMsg = (text, cls) => {
+    npMsg.className = 'np-msg' + (cls ? ' ' + cls : '');
+    npMsg.textContent = text;
+  };
+
+  const openPanel = (targetState) => {
+    if (targetState) {
+      for (const opt of stateSelect.options) {
+        if (opt.value === targetState) { stateSelect.value = targetState; break; }
+      }
+    }
+    setMsg('');
+    panel.classList.add('open');
+    panel.setAttribute('aria-hidden', 'false');
+    requestAnimationFrame(() => setTimeout(() => titleInput.focus(), 120));
+  };
+  const closePanel = () => {
+    panel.classList.remove('open');
+    panel.setAttribute('aria-hidden', 'true');
+  };
+
+  document.addEventListener('click', (ev) => {
+    const t = ev.target;
+    if (!(t instanceof Element)) return;
+    const addBtn = t.closest('.col-add');
+    if (addBtn) {
+      openPanel(addBtn.getAttribute('data-target-state') || '');
+      return;
+    }
+    if (t.closest('.np-close')) { closePanel(); return; }
+  });
+
+  document.addEventListener('keydown', (ev) => {
+    if (ev.key === 'Escape' && panel.classList.contains('open')) {
+      ev.preventDefault(); closePanel(); return;
+    }
+    const t = ev.target;
+    if (!(t instanceof HTMLTextAreaElement)) return;
+    if (!t.closest('form.reply')) return;
+    if (ev.key === 'Enter' && !ev.shiftKey && !ev.isComposing) {
+      ev.preventDefault();
+      t.form && t.form.requestSubmit();
+    }
+  });
+
+  form.addEventListener('submit', async (ev) => {
+    ev.preventDefault();
+    setMsg('creating…');
+    const body = {
+      state: stateSelect.value,
+      title: titleInput.value.trim(),
+      description: descTextarea.value,
+    };
+    try {
+      const res = await fetch('/api/v1/issues', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error((data && data.error && data.error.message) || ('HTTP ' + res.status));
+      setMsg('created ' + data.identifier, 'ok');
+      titleInput.value = '';
+      descTextarea.value = '';
+      fetch('/api/v1/refresh', { method: 'POST' }).catch(() => {});
+      document.body.dispatchEvent(new CustomEvent('refreshed', { bubbles: true }));
+      setTimeout(() => { closePanel(); setMsg(''); }, 900);
+    } catch (err) {
+      setMsg(err.message, 'err');
+    }
+  });
+})();
+`;
+function renderDashboardHtml(p) {
+    return `<!doctype html>
+<html lang="en"><head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>symphony · ${escapeHtml(p.workflowName)}</title>
+<style>${DASHBOARD_CSS}</style>
 <script src="https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js"></script>
 <script src="https://unpkg.com/idiomorph@0.7.4/dist/idiomorph-ext.min.js"></script>
 </head><body hx-ext="morph">
@@ -737,103 +1041,415 @@ footer.totals:empty { display: none; }
           aria-label="refresh now" title="poll &amp; reconcile">⟳</button>
 </header>
 
-<main>
-
-<section id="attention"
-         hx-get="/api/v1/partials/attention" hx-trigger="every 2s, refreshed from:body"
-         hx-swap="morph:innerHTML">${renderAttentionPartial(p)}</section>
+<div id="ticker"
+     hx-get="/api/v1/partials/attention" hx-trigger="every 2s, refreshed from:body"
+     hx-swap="morph:innerHTML">${renderAttentionPartial(p)}</div>
 
-<section id="sessions"
-         hx-get="/api/v1/partials/sessions" hx-trigger="every 2s, refreshed from:body"
-         hx-swap="morph:innerHTML">${renderSessionsPartial(p)}</section>
+<main id="board"
+      hx-get="/api/v1/partials/board" hx-trigger="every 2s, refreshed from:body"
+      hx-swap="morph:innerHTML">${renderBoardPartial(p)}</main>
 
-<section id="disk"
-         hx-get="/api/v1/partials/disk" hx-trigger="every 2s, refreshed from:body"
-         hx-swap="morph:innerHTML">${renderDiskPartial(p)}</section>
-
-<details class="new-issue"${formOpen ? ' open' : ''}>
-  <summary>new issue</summary>
-  <form class="create" id="create-form">
-    <label for="identifier">identifier</label>
-    <input id="identifier" name="identifier" required placeholder="ABC-42" autocomplete="off" />
-    <label for="title">title</label>
-    <input id="title" name="title" required autocomplete="off" />
-    <label for="state">state</label>
-    <select id="state" name="state">${stateOptions}</select>
-    <label for="priority">priority</label>
-    <input id="priority" name="priority" type="number" min="0" max="10" placeholder="2" />
-    <label for="labels">labels</label>
-    <input id="labels" name="labels" placeholder="bug, urgent" autocomplete="off" />
-    <label for="description">description</label>
-    <textarea id="description" name="description" placeholder="what needs to be done?"></textarea>
-    <div class="submit-row">
-      <button type="submit">create issue</button>
-      <span class="msg" id="create-msg" role="status" aria-live="polite"></span>
-    </div>
-  </form>
-</details>
+${renderNewIssuePanel(p)}
 
 <footer class="totals"
         hx-get="/api/v1/partials/totals" hx-trigger="every 2s, refreshed from:body"
         hx-swap="morph:innerHTML">${renderTotalsPartial(p)}</footer>
 
-</main>
-
-<script>
-const $ = (id) => document.getElementById(id);
-
-// Enter-to-send on steering textareas. HTMX submits the form; shift+enter still inserts a newline.
-document.addEventListener('keydown', (ev) => {
-  const t = ev.target;
-  if (!(t instanceof HTMLTextAreaElement)) return;
-  if (!t.closest('form.reply')) return;
-  if (ev.key === 'Enter' && !ev.shiftKey && !ev.isComposing) {
-    ev.preventDefault();
-    t.form && t.form.requestSubmit();
-  }
-});
-
-// Create-issue form: stays on fetch+JSON (the create POST takes structured arrays). After
-// success we fire a custom event the polling regions listen to via hx-trigger.
-$('create-form').addEventListener('submit', async (ev) => {
-  ev.preventDefault();
-  const msg = $('create-msg');
-  msg.className = 'msg'; msg.textContent = 'creating…';
-  const labels = $('labels').value.split(',').map((s) => s.trim()).filter(Boolean);
-  const priorityRaw = $('priority').value.trim();
-  const body = {
-    identifier: $('identifier').value.trim(),
-    title: $('title').value.trim(),
-    state: $('state').value,
-    description: $('description').value,
-    labels,
-    priority: priorityRaw === '' ? null : Number(priorityRaw),
-  };
-  try {
-    const res = await fetch('/api/v1/issues', {
-      method: 'POST',
-      headers: { 'content-type': 'application/json' },
-      body: JSON.stringify(body),
-    });
-    const data = await res.json();
-    if (!res.ok) throw new Error((data && data.error && data.error.message) || ('HTTP ' + res.status));
-    msg.className = 'msg ok';
-    msg.textContent = 'created ' + data.identifier;
-    $('create-form').reset();
-    fetch('/api/v1/refresh', { method: 'POST' }).catch(() => {});
-    document.body.dispatchEvent(new CustomEvent('refreshed', { bubbles: true }));
-  } catch (err) {
-    msg.className = 'msg err';
-    msg.textContent = err.message;
-  }
-});
-</script>
+<script>${DASHBOARD_SCRIPT}</script>
 
 </body></html>`;
 }
 function escapeHtml(s) {
     return s.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
 }
+const FENCE_OPEN_RE = /^```([\w-]*)\s*$/;
+const FENCE_CLOSE_RE = /^```\s*$/;
+const HEADER_RE = /^(#{1,6})\s+(.+?)\s*#*\s*$/;
+const UL_RE = /^\s*[-*+]\s+/;
+const UL_ITEM_RE = /^\s*[-*+]\s+(.*)$/;
+const OL_RE = /^\s*\d+\.\s+/;
+const OL_ITEM_RE = /^\s*\d+\.\s+(.*)$/;
+const BLOCKQUOTE_RE = /^\s*>\s?/;
+function matchFencedCode(lines, i) {
+    const fence = FENCE_OPEN_RE.exec(lines[i]);
+    if (!fence)
+        return null;
+    const lang = fence[1] ?? '';
+    const body = [];
+    let j = i + 1;
+    while (j < lines.length && !FENCE_CLOSE_RE.test(lines[j])) {
+        body.push(lines[j]);
+        j++;
+    }
+    if (j < lines.length)
+        j++; // consume closing fence
+    const langAttr = lang ? ` class="language-${escapeHtml(lang)}"` : '';
+    return { html: `<pre><code${langAttr}>${escapeHtml(body.join('\n'))}</code></pre>`, nextI: j };
+}
+function matchHeader(lines, i) {
+    const m = HEADER_RE.exec(lines[i]);
+    if (!m)
+        return null;
+    const level = m[1].length;
+    return { html: `<h${level}>${renderInlineMarkdown(m[2])}</h${level}>`, nextI: i + 1 };
+}
+function matchList(lines, i, marker, item, tag) {
+    if (!marker.test(lines[i]))
+        return null;
+    const items = [];
+    let j = i;
+    while (j < lines.length && marker.test(lines[j])) {
+        items.push(`<li>${renderInlineMarkdown(item.exec(lines[j])[1])}</li>`);
+        j++;
+    }
+    return { html: `<${tag}>${items.join('')}</${tag}>`, nextI: j };
+}
+function matchBlockquote(lines, i) {
+    if (!BLOCKQUOTE_RE.test(lines[i]))
+        return null;
+    const buf = [];
+    let j = i;
+    while (j < lines.length && BLOCKQUOTE_RE.test(lines[j])) {
+        buf.push(lines[j].replace(BLOCKQUOTE_RE, ''));
+        j++;
+    }
+    return { html: `<blockquote>${renderMarkdown(buf.join('\n'))}</blockquote>`, nextI: j };
+}
+function isBlockBoundary(line) {
+    return line.trim() === ''
+        || FENCE_OPEN_RE.test(line)
+        || /^#{1,6}\s+/.test(line)
+        || UL_RE.test(line)
+        || OL_RE.test(line)
+        || BLOCKQUOTE_RE.test(line);
+}
+function matchParagraph(lines, i) {
+    const para = [];
+    let j = i;
+    while (j < lines.length && !isBlockBoundary(lines[j])) {
+        para.push(lines[j]);
+        j++;
+    }
+    return { html: `<p>${renderInlineMarkdown(para.join('\n'))}</p>`, nextI: j };
+}
+export function renderMarkdown(input) {
+    const lines = input.replace(/\r\n?/g, '\n').split('\n');
+    const blocks = [];
+    let i = 0;
+    while (i < lines.length) {
+        if (lines[i].trim() === '') {
+            i++;
+            continue;
+        }
+        const m = matchFencedCode(lines, i)
+            ?? matchHeader(lines, i)
+            ?? matchList(lines, i, UL_RE, UL_ITEM_RE, 'ul')
+            ?? matchList(lines, i, OL_RE, OL_ITEM_RE, 'ol')
+            ?? matchBlockquote(lines, i)
+            ?? matchParagraph(lines, i);
+        blocks.push(m.html);
+        i = m.nextI;
+    }
+    return blocks.join('\n');
+}
+function renderInlineMarkdown(input) {
+    const codes = [];
+    let text = input.replace(/`([^`\n]+)`/g, (_m, code) => {
+        const idx = codes.length;
+        codes.push(`<code>${escapeHtml(code)}</code>`);
+        return `C${idx}`;
+    });
+    text = escapeHtml(text);
+    text = text.replace(/\[([^\]\n]+)\]\(([^)\s]+)\)/g, (m, label, url) => {
+        if (!/^(https?:|mailto:)/i.test(url))
+            return m;
+        return `<a href="${url}" rel="noopener noreferrer">${label}</a>`;
+    });
+    text = text.replace(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>');
+    text = text.replace(/__([^_\n]+)__/g, '<strong>$1</strong>');
+    text = text.replace(/(^|[^*\w])\*([^*\n]+)\*(?!\w)/g, '$1<em>$2</em>');
+    text = text.replace(/(^|[^_\w])_([^_\n]+)_(?!\w)/g, '$1<em>$2</em>');
+    text = text.replace(/\n/g, '<br>');
+    text = text.replace(/C(\d+)/g, (_m, idx) => codes[Number(idx)]);
+    return text;
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Issue-detail page. Linked from the identifier on every "on disk" and triage
+// row. Shows what the on-disk Markdown file says: the front-matter metadata
+// (labels, priority, blocked_by, provenance, timestamps) and the body rendered
+// through the same minimal Markdown engine the steering panel uses. Read-only
+// — actions live on the dashboard, not here. Follows the design system's
+// quiet-workshop rules: flat panels, tabular numerics, no shadows, status pill
+// uses the existing palette.
+// ─────────────────────────────────────────────────────────────────────────────
+function asStringList(v) {
+    if (Array.isArray(v))
+        return v.filter((x) => typeof x === 'string');
+    return [];
+}
+function asString(v) {
+    return typeof v === 'string' && v.length > 0 ? v : null;
+}
+function asNumber(v) {
+    if (typeof v === 'number' && Number.isFinite(v))
+        return v;
+    return null;
+}
+function formatTimestamp(v) {
+    if (typeof v === 'string' && v.length > 0)
+        return v;
+    if (v instanceof Date)
+        return v.toISOString();
+    return null;
+}
+function detailRow(label, value) {
+    return `<div class="meta-row"><dt>${escapeHtml(label)}</dt><dd>${value}</dd></div>`;
+}
+function detailLabelsRow(labels) {
+    if (labels.length === 0)
+        return '';
+    const chips = labels.map((l) => `<span class="label-chip">${escapeHtml(l)}</span>`).join('');
+    return detailRow('labels', `<div class="label-chips">${chips}</div>`);
+}
+function detailBlockedByRow(blockedBy) {
+    if (blockedBy.length === 0)
+        return '';
+    const items = blockedBy
+        .map((b) => `<a class="blocker-link" href="/issues/${encodeURIComponent(b)}">${escapeHtml(b)}</a>`)
+        .join(', ');
+    return detailRow('blocked by', items);
+}
+function detailUrlRow(url) {
+    if (!url)
+        return '';
+    const safe = /^https?:/i.test(url) ? url : '';
+    const value = safe
+        ? `<a href="${escapeHtml(safe)}" rel="noopener noreferrer">${escapeHtml(safe)}</a>`
+        : escapeHtml(url);
+    return detailRow('url', value);
+}
+function detailProposedByRow(proposedBy) {
+    if (!proposedBy)
+        return '';
+    return detailRow('proposed by', `<a class="blocker-link" href="/issues/${encodeURIComponent(proposedBy)}">${escapeHtml(proposedBy)}</a>`);
+}
+function detailTimestampRow(label, ts) {
+    if (!ts)
+        return '';
+    return detailRow(label, `<span class="num">${escapeHtml(ts)}</span>`);
+}
+// Pill colour follows the declared role: active → running, terminal → done,
+// holding → idle. An undeclared state (stale directory, file dropped by hand
+// into a name not in `states:`) falls back to idle so the detail page still
+// renders legibly.
+function buildDetailMetaRows(fm, stateClass, stateName) {
+    const branchName = asString(fm['branch_name']);
+    const priority = asNumber(fm['priority']);
+    const createdAt = formatTimestamp(fm['created_at']);
+    const updatedAt = formatTimestamp(fm['updated_at']);
+    const showUpdated = updatedAt && updatedAt !== createdAt ? updatedAt : null;
+    return [
+        detailRow('state', `<span class="pill ${stateClass}">${escapeHtml(stateName)}</span>`),
+        detailLabelsRow(asStringList(fm['labels'])),
+        priority !== null ? detailRow('priority', `<span class="num">${escapeHtml(String(priority))}</span>`) : '',
+        detailBlockedByRow(asStringList(fm['blocked_by'])),
+        branchName ? detailRow('branch', `<code>${escapeHtml(branchName)}</code>`) : '',
+        detailUrlRow(asString(fm['url'])),
+        detailTimestampRow('created', createdAt),
+        detailTimestampRow('updated', showUpdated),
+        detailProposedByRow(asString(fm['proposed_by'])),
+        detailTimestampRow('proposed at', formatTimestamp(fm['proposed_at'])),
+    ].join('');
+}
+// Issue-detail CSS, hoisted out of renderIssueDetailPage so the function stays
+// within the imperative-shell line budget. Pure presentation content.
+const DETAIL_PAGE_CSS = `
+:root {
+  color-scheme: dark;
+  --inset: #0c0f15; --bench: #0f1115; --raised: #161a22; --chip: #20242c;
+  --rule-soft: #1c2029; --rule-firm: #2a2e36;
+  --dim: #6b7280; --muted: #9aa4b2; --base: #dfe2e7; --strong: #e6ebf2;
+  --accent: #2a6df4;
+  --run-bg: #1f3a26; --run-fg: #58d68d;
+  --idle-bg: #20242c; --idle-fg: #9aa4b2;
+  --done-bg: #1c2a1f; --done-fg: #82c896;
+  --err: #ff7676;
+}
+* { box-sizing: border-box; }
+html, body { background: var(--bench); color: var(--base); }
+body {
+  font: 14px/1.45 ui-sans-serif, system-ui, sans-serif;
+  margin: 0; padding: 0;
+  display: flex; flex-direction: column; min-height: 100vh;
+}
+code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; color: var(--strong); }
+a { color: var(--strong); text-decoration: none; }
+a:hover { color: #9cc0ff; }
+.dim { color: var(--dim); }
+.num { font-variant-numeric: tabular-nums; }
+
+/* header strip mirrors the dashboard so navigation feels continuous */
+#header {
+  display: flex; align-items: center; gap: 0.5rem;
+  padding: 0.65rem 1.5rem;
+  background: var(--bench); border-bottom: 1px solid var(--rule-firm);
+  font-size: 13px;
+  position: sticky; top: 0; z-index: 10;
+}
+#header .brand { font-weight: 600; color: var(--strong); letter-spacing: 0.01em; }
+#header .rule { color: var(--dim); }
+#header .crumb { color: var(--muted); }
+#header .crumb-current { color: var(--base); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+
+main {
+  width: 100%; max-width: 920px; margin: 0 auto;
+  padding: 1rem 1.5rem 2.5rem; flex: 1;
+}
+.back {
+  display: inline-block; padding: 0.2rem 0; margin: 0.2rem 0 0.6rem;
+  font-size: 0.88em; color: var(--muted);
+}
+.back:hover { color: var(--strong); }
+
+.issue-head {
+  display: grid; gap: 0.35rem;
+  padding-bottom: 0.6rem; margin-bottom: 1.1rem;
+  border-bottom: 1px solid var(--rule-firm);
+}
+.issue-head .ident {
+  font: 12.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: var(--dim); letter-spacing: 0.02em;
+}
+.issue-head h1 {
+  margin: 0; font-size: 1.3rem; font-weight: 500; color: var(--strong);
+  line-height: 1.3;
+}
+
+/* pills carry status colour, sized to read as inline metadata not content */
+.pill {
+  display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px;
+  font-size: 0.82em; line-height: 1.4;
+  font-variant-numeric: tabular-nums;
+}
+.pill.running { background: var(--run-bg); color: var(--run-fg); }
+.pill.idle { background: var(--idle-bg); color: var(--idle-fg); }
+.pill.done { background: var(--done-bg); color: var(--done-fg); }
+
+/* metadata definition list: tight two-column grid, label left, value right */
+.issue-meta {
+  margin: 0 0 1.4rem;
+  display: grid; grid-template-columns: 8.5rem 1fr;
+  row-gap: 0.35rem; column-gap: 1rem;
+  font-variant-numeric: tabular-nums;
+}
+.issue-meta .meta-row { display: contents; }
+.issue-meta dt {
+  color: var(--dim); font-size: 0.85em;
+  letter-spacing: 0.05em; text-transform: uppercase;
+  align-self: baseline; padding-top: 0.15rem;
+}
+.issue-meta dd { margin: 0; color: var(--base); }
+.label-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
+.label-chip {
+  display: inline-block; padding: 0.05rem 0.5rem; border-radius: 4px;
+  background: var(--chip); color: var(--muted);
+  font-size: 0.85em; line-height: 1.5;
+}
+.blocker-link {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.92em; color: var(--muted);
+}
+.blocker-link:hover { color: var(--strong); }
+
+h2.section-title {
+  font-size: 1rem; font-weight: 500; margin: 0 0 0.5rem;
+  padding-bottom: 0.35rem; border-bottom: 1px solid var(--rule-firm);
+  letter-spacing: 0.01em;
+}
+
+.issue-body { color: var(--base); font-size: 0.95em; line-height: 1.55; }
+.issue-body > :first-child { margin-top: 0; }
+.issue-body > :last-child { margin-bottom: 0; }
+.issue-body p { margin: 0.6em 0; }
+.issue-body h1, .issue-body h2, .issue-body h3,
+.issue-body h4, .issue-body h5, .issue-body h6 {
+  margin: 1em 0 0.4em; font-weight: 500; color: var(--strong);
+  border: 0; padding: 0;
+}
+.issue-body h1 { font-size: 1.15em; }
+.issue-body h2 { font-size: 1.05em; }
+.issue-body h3 { font-size: 1em; }
+.issue-body ul, .issue-body ol { margin: 0.5em 0; padding-left: 1.5em; }
+.issue-body li { margin: 0.15em 0; }
+.issue-body code {
+  background: var(--inset); padding: 0.05em 0.35em; border-radius: 3px;
+  font-size: 0.92em;
+}
+.issue-body pre {
+  margin: 0.7em 0; padding: 0.6rem 0.75rem;
+  background: var(--inset); border: 1px solid var(--rule-firm); border-radius: 4px;
+  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: var(--muted); overflow: auto;
+}
+.issue-body pre code { background: transparent; padding: 0; font-size: inherit; }
+.issue-body blockquote {
+  margin: 0.5em 0; padding: 0.1em 0.8em;
+  border-left: 2px solid var(--rule-firm); color: var(--muted);
+}
+.issue-body a { color: #9cc0ff; }
+
+.file-path {
+  margin-top: 1.4rem; padding-top: 0.7rem;
+  border-top: 1px solid var(--rule-soft);
+  color: var(--dim); font-size: 0.82em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  word-break: break-all;
+}
+.empty { padding: 0.5rem 0; }
+`;
+function renderIssueDetailPage(issue, view) {
+    const fm = issue.frontMatter;
+    const title = asString(fm['title']) ?? issue.identifier;
+    const stateClass = pillClassForState(view.states, issue.state);
+    const metaRows = buildDetailMetaRows(fm, stateClass, issue.state);
+    const bodyHtml = issue.body.length > 0
+        ? `<div class="issue-body">${renderMarkdown(issue.body)}</div>`
+        : `<p class="empty dim">no description</p>`;
+    const workflowName = path.basename(view.workflowPath || 'workflow.md');
+    return `<!doctype html>
+<html lang="en"><head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(issue.identifier)} · symphony</title>
+<style>${DETAIL_PAGE_CSS}</style>
+</head><body>
+
+<header id="header">
+  <span class="brand">symphony</span>
+  <span class="rule" aria-hidden="true">·</span>
+  <a class="crumb" href="/" title="back to ${escapeHtml(workflowName)}">${escapeHtml(workflowName)}</a>
+  <span class="rule" aria-hidden="true">/</span>
+  <span class="crumb-current">${escapeHtml(issue.identifier)}</span>
+</header>
+
+<main>
+  <a class="back" href="/">← back</a>
+
+  <section class="issue-head">
+    <span class="ident">${escapeHtml(issue.identifier)}</span>
+    <h1>${escapeHtml(title)}</h1>
+  </section>
+
+  <dl class="issue-meta">${metaRows}</dl>
+
+  <h2 class="section-title">description</h2>
+  ${bodyHtml}
+
+  <p class="file-path" title="path on disk">${escapeHtml(issue.filePath)}</p>
+</main>
+
+</body></html>`;
+}
 // Resolves once the server has either bound the requested port or rejected with the bind
 // error so CLI startup can surface EADDRINUSE / EACCES instead of an unhandled rejection.
 // Returns the *actually bound* port (relevant for --port 0, where the kernel picks an
@@ -895,295 +1511,391 @@ async function handleRequest(req, res, orch, opts) {
     // URL parsing inside the handler so a malformed Host header doesn't crash the listener.
     let pathname;
     try {
-        const url = new URL(req.url ?? '/', 'http://symphony.local');
-        pathname = url.pathname;
+        pathname = new URL(req.url ?? '/', 'http://symphony.local').pathname;
     }
     catch {
         return badRequest(res, 'invalid request URL');
     }
     const method = (req.method ?? 'GET').toUpperCase();
     const view = opts.getTrackerView();
-    if (pathname === '/') {
-        if (method !== 'GET')
-            return methodNotAllowed(res);
-        const p = await gatherPartialInputs(orch, view);
-        const html = renderDashboardHtml(p);
-        res.statusCode = 200;
-        res.setHeader('content-type', 'text/html; charset=utf-8');
-        res.end(html);
+    const route = matchRoute(pathname);
+    const handler = ROUTE_HANDLERS[route.kind];
+    await handler({ req, res, orch, opts, view, method, route });
+}
+async function handleDashboard(ctx) {
+    if (ctx.method !== 'GET')
+        return methodNotAllowed(ctx.res);
+    const p = await gatherPartialInputs(ctx.orch, ctx.view);
+    ctx.res.statusCode = 200;
+    ctx.res.setHeader('content-type', 'text/html; charset=utf-8');
+    ctx.res.end(renderDashboardHtml(p));
+}
+// Static preview for impeccable live mode. The file under .impeccable/preview/ is a
+// captured snapshot of the dashboard with polling disabled, used as a variant playground.
+// Read on every request so live-wrap edits land immediately.
+async function handlePreview(ctx) {
+    if (ctx.method !== 'GET')
+        return methodNotAllowed(ctx.res);
+    try {
+        const html = await readFile('.impeccable/preview/dashboard.html', 'utf8');
+        ctx.res.statusCode = 200;
+        ctx.res.setHeader('content-type', 'text/html; charset=utf-8');
+        ctx.res.setHeader('cache-control', 'no-store');
+        ctx.res.end(html);
+    }
+    catch (err) {
+        notFound(ctx.res, 'preview_missing', `preview not available: ${err.message}`);
+    }
+}
+// HTMX partials. Each region polls its own endpoint at 2s; this is what the dashboard
+// <section hx-get=...> elements consume. They return only the inner HTML; the outer
+// wrapper is in the dashboard shell.
+async function handlePartial(ctx) {
+    if (ctx.method !== 'GET')
+        return methodNotAllowed(ctx.res);
+    const name = resolvePartialName(ctx.route.slug);
+    if (!name) {
+        return notFound(ctx.res, 'partial_not_found', `partial ${ctx.route.slug} does not exist`);
+    }
+    const p = await gatherPartialInputs(ctx.orch, ctx.view);
+    const body = name === 'header' ? renderHeaderPartial(p)
+        : name === 'attention' ? renderAttentionPartial(p)
+            : name === 'board' ? renderBoardPartial(p)
+                : renderTotalsPartial(p);
+    ctx.res.statusCode = 200;
+    ctx.res.setHeader('content-type', 'text/html; charset=utf-8');
+    ctx.res.setHeader('cache-control', 'no-store');
+    ctx.res.end(body);
+}
+async function handleState(ctx) {
+    if (ctx.method !== 'GET')
+        return methodNotAllowed(ctx.res);
+    jsonResponse(ctx.res, 200, ctx.orch.snapshot());
+}
+async function handleRefresh(ctx) {
+    if (ctx.method !== 'POST')
+        return methodNotAllowed(ctx.res);
+    const status = ctx.orch.triggerRefresh();
+    jsonResponse(ctx.res, 202, {
+        ...status,
+        requested_at: new Date().toISOString(),
+        operations: ['poll', 'reconcile'],
+    });
+}
+async function handleIssues(ctx) {
+    if (ctx.method === 'GET')
+        return handleListIssues(ctx);
+    if (ctx.method === 'POST')
+        return handleCreateIssue(ctx);
+    methodNotAllowed(ctx.res);
+}
+async function handleListIssues(ctx) {
+    const root = ctx.view.trackerRoot;
+    if (!root)
+        return jsonResponse(ctx.res, 200, { issues: [] });
+    const issues = await listIssuesFromDisk(root);
+    jsonResponse(ctx.res, 200, { issues });
+}
+async function handleCreateIssue(ctx) {
+    const root = ctx.view.trackerRoot;
+    if (!root)
+        return badRequest(ctx.res, 'tracker.root not configured');
+    let body;
+    try {
+        body = await readJsonBody(ctx.req);
+    }
+    catch (err) {
+        return badRequest(ctx.res, err.message);
+    }
+    const decision = decideCreateIssue(body, ctx.view.states);
+    if (!decision.ok) {
+        return jsonResponse(ctx.res, decision.status, {
+            error: { code: decision.code, message: decision.message },
+        });
+    }
+    try {
+        const created = await writeIssueFile({
+            trackerRoot: root,
+            identifier: decision.identifier,
+            title: decision.title,
+            state: decision.state,
+            description: decision.description,
+            priority: decision.priority,
+            labels: decision.labels,
+            blocked_by: decision.blocked_by,
+        });
+        log.info('issue created via http', { identifier: created.identifier, state: created.state });
+        jsonResponse(ctx.res, 201, created);
+    }
+    catch (err) {
+        jsonResponse(ctx.res, 409, {
+            error: { code: 'create_failed', message: err.message },
+        });
+    }
+}
+// MCP JSON-RPC endpoint: agent (inside the smolvm) POSTs JSON-RPC envelopes here. The
+// URL is per-issue (the agent only knows its own /<id>/mcp), backed by a bearer token
+// generated at dispatch. Both layers are belt-and-braces against the no-auth 8787 socket.
+async function handleMcp(ctx) {
+    if (ctx.method !== 'POST')
+        return methodNotAllowed(ctx.res);
+    const mcp = ctx.opts.mcp;
+    if (!mcp)
+        return notFound(ctx.res, 'mcp_disabled', 'mcp endpoint not enabled');
+    const { identifier } = ctx.route;
+    const auth = (ctx.req.headers['authorization'] ?? ctx.req.headers['Authorization']);
+    const token = extractBearerToken(auth);
+    if (!token)
+        return jsonResponse(ctx.res, 401, { error: { code: 'unauthorized', message: 'bearer token required' } });
+    if (!mcp.isActive(identifier, token)) {
+        return jsonResponse(ctx.res, 404, {
+            error: { code: 'not_found', message: 'issue not active or token mismatch' },
+        });
+    }
+    let body;
+    try {
+        body = await readJsonBody(ctx.req);
+    }
+    catch (err) {
+        return badRequest(ctx.res, err.message);
+    }
+    const reply = await mcp.handleJsonRpc(identifier, token, body);
+    if (reply === null) {
+        // JSON-RPC notification (no id) → 204 No Content
+        ctx.res.statusCode = 204;
+        ctx.res.end();
+        return;
+    }
+    jsonResponse(ctx.res, 200, reply);
+}
+// Steering reply: the dashboard (or any operator with access) submits the human's
+// response to a queued request_human_steering call. The orchestrator-side runner is
+// awaiting on the registry; this POST unblocks it.
+//
+// Two callers:
+//  • Dashboard via HTMX (form-encoded body, `HX-Request: true`, same-origin). We accept
+//    only this combination for form bodies and reply with an HTML partial that swaps
+//    into #attention.
+//  • Direct API client (JSON body). Replies with a structured JSON acknowledgement.
+//
+// The form-encoded branch is gated on `HX-Request: true` and a same-origin check so a
+// simple cross-site form POST cannot inject a steering reply: form-encoded is a "simple"
+// CORS request that bypasses preflight, and the steering endpoint is unauthenticated.
+// HTMX errors land at 200 OK with an inline `.steering-error` message because HTMX's
+// default response-handling does not swap on 4xx/5xx; returning 200 keeps the operator's
+// form in sync with reality (their textarea text is preserved by hx-preserve regardless).
+async function handleSteeringReply(ctx) {
+    if (ctx.method !== 'POST')
+        return methodNotAllowed(ctx.res);
+    const mcp = ctx.opts.mcp;
+    if (!mcp)
+        return notFound(ctx.res, 'mcp_disabled', 'steering endpoint not enabled');
+    const { identifier } = ctx.route;
+    const isHtmx = ctx.req.headers['hx-request'] === 'true';
+    const ctype = classifyContentType(ctx.req.headers['content-type']);
+    const csrf = checkSteeringCsrf(ctype, isHtmx, isSameOriginRequest(ctx.req));
+    if (!csrf.ok) {
+        return jsonResponse(ctx.res, csrf.status, {
+            error: { code: csrf.code, message: csrf.message },
+        });
+    }
+    const text = await readSteeringText(ctx, ctype);
+    if (text === null)
+        return;
+    if (!text) {
+        return htmxOrJsonError(ctx.res, isHtmx, ctx.orch, ctx.view, 400, 'bad_request', 'text is required and must be a non-empty string');
+    }
+    if (!mcp.submitSteeringReply(identifier, text)) {
+        return htmxOrJsonError(ctx.res, isHtmx, ctx.orch, ctx.view, 409, 'no_pending_steering', 'no agent is awaiting steering for this issue');
+    }
+    await respondSteeringAccepted(ctx, isHtmx, identifier);
+}
+async function respondSteeringAccepted(ctx, isHtmx, identifier) {
+    if (isHtmx) {
+        const p = await gatherPartialInputs(ctx.orch, ctx.view);
+        ctx.res.statusCode = 200;
+        ctx.res.setHeader('content-type', 'text/html; charset=utf-8');
+        ctx.res.end(renderAttentionPartial(p));
         return;
     }
-    // Static preview for impeccable live mode. The file under .impeccable/preview/ is a
-    // captured snapshot of the dashboard with polling disabled, used as a variant playground.
-    // Read on every request so live-wrap edits land immediately.
-    if (pathname === '/preview' || pathname === '/preview/') {
-        if (method !== 'GET')
-            return methodNotAllowed(res);
+    jsonResponse(ctx.res, 202, { identifier, accepted_at: new Date().toISOString() });
+}
+// Returns null when the body read errored and a response has already been written;
+// otherwise returns the extracted text (empty string if absent/blank, caller treats
+// that as the "no text supplied" case).
+async function readSteeringText(ctx, ctype) {
+    const isHtmx = ctx.req.headers['hx-request'] === 'true';
+    if (ctype.isFormBody) {
         try {
-            const html = await readFile('.impeccable/preview/dashboard.html', 'utf8');
-            res.statusCode = 200;
-            res.setHeader('content-type', 'text/html; charset=utf-8');
-            res.setHeader('cache-control', 'no-store');
-            res.end(html);
+            return extractFormText(await readTextBody(ctx.req));
         }
         catch (err) {
-            return notFound(res, 'preview_missing', `preview not available: ${err.message}`);
+            await htmxOrJsonError(ctx.res, isHtmx, ctx.orch, ctx.view, 400, 'bad_request', err.message);
+            return null;
         }
-        return;
     }
-    // HTMX partials. Each region polls its own endpoint at 2s; this is what the dashboard
-    // <section hx-get=...> elements consume. They return only the inner HTML; the outer
-    // wrapper is in the dashboard shell.
-    if (pathname.startsWith('/api/v1/partials/')) {
-        if (method !== 'GET')
-            return methodNotAllowed(res);
-        const p = await gatherPartialInputs(orch, view);
-        const slug = pathname.slice('/api/v1/partials/'.length);
-        let body = null;
-        if (slug === 'header')
-            body = renderHeaderPartial(p);
-        else if (slug === 'attention')
-            body = renderAttentionPartial(p);
-        else if (slug === 'sessions')
-            body = renderSessionsPartial(p);
-        else if (slug === 'disk')
-            body = renderDiskPartial(p);
-        else if (slug === 'totals')
-            body = renderTotalsPartial(p);
-        if (body === null)
-            return notFound(res, 'partial_not_found', `partial ${slug} does not exist`);
-        res.statusCode = 200;
-        res.setHeader('content-type', 'text/html; charset=utf-8');
-        res.setHeader('cache-control', 'no-store');
-        res.end(body);
-        return;
+    try {
+        return extractJsonText(await readJsonBody(ctx.req));
     }
-    if (pathname === '/api/v1/state') {
-        if (method !== 'GET')
-            return methodNotAllowed(res);
-        return jsonResponse(res, 200, orch.snapshot());
+    catch (err) {
+        badRequest(ctx.res, err.message);
+        return null;
+    }
+}
+// Triage approve / discard. The dashboard renders these as buttons inside the triage
+// section; an operator clicks one and we move the issue file out of Triage/. Approve
+// sends it to the first active state (typically Todo) where the orchestrator will pick
+// it up on the next poll; discard sends it to the first terminal state that looks like a
+// cancellation (case-insensitive "Cancelled" match preferred) so the proposal is
+// archived rather than deleted — operators can still grep for what was proposed and
+// turned down.
+//
+// CSRF posture mirrors the steering-reply endpoint: form-encoded requires HX-Request
+// + same-origin; JSON requires application/json (preflight-triggering). HTMX errors
+// come back as 200 with a partial so the section doesn't go stale.
+async function handleTriage(ctx) {
+    if (ctx.method !== 'POST')
+        return methodNotAllowed(ctx.res);
+    const tracker = ctx.opts.tracker;
+    if (!tracker || !tracker.moveIssueToState) {
+        return notFound(ctx.res, 'tracker_no_state_transitions', 'tracker does not support state transitions');
     }
-    if (pathname === '/api/v1/refresh') {
-        if (method !== 'POST')
-            return methodNotAllowed(res);
-        const status = orch.triggerRefresh();
-        return jsonResponse(res, 202, {
-            ...status,
-            requested_at: new Date().toISOString(),
-            operations: ['poll', 'reconcile'],
+    const root = ctx.view.trackerRoot;
+    if (!root)
+        return badRequest(ctx.res, 'tracker.root not configured');
+    const { identifier, action } = ctx.route;
+    const ctype = classifyContentType(ctx.req.headers['content-type']);
+    const csrf = checkTriageCsrf(ctype, ctx.req.headers['hx-request'] === 'true', isSameOriginRequest(ctx.req));
+    if (!csrf.ok) {
+        return jsonResponse(ctx.res, csrf.status, {
+            error: { code: csrf.code, message: csrf.message },
         });
     }
-    if (pathname === '/api/v1/issues') {
-        if (method === 'GET') {
-            const root = view.trackerRoot;
-            if (!root)
-                return jsonResponse(res, 200, { issues: [] });
-            const issues = await listIssuesFromDisk(root);
-            return jsonResponse(res, 200, { issues });
-        }
-        if (method === 'POST') {
-            const root = view.trackerRoot;
-            if (!root)
-                return badRequest(res, 'tracker.root not configured');
-            let body;
-            try {
-                body = await readJsonBody(req);
-            }
-            catch (err) {
-                return badRequest(res, err.message);
-            }
-            if (!body || typeof body !== 'object' || Array.isArray(body)) {
-                return badRequest(res, 'body must be a JSON object');
-            }
-            const b = body;
-            const identifier = typeof b.identifier === 'string' ? b.identifier.trim() : '';
-            const title = typeof b.title === 'string' ? b.title.trim() : '';
-            const state = typeof b.state === 'string' ? b.state.trim() : '';
-            if (!identifier)
-                return badRequest(res, 'identifier is required');
-            if (!title)
-                return badRequest(res, 'title is required');
-            if (!state)
-                return badRequest(res, 'state is required');
-            // Restrict `state` to one of the configured active/terminal states. Anything else
-            // (or values containing path separators / `..`) is rejected so the request cannot
-            // escape the tracker root via `path.join`.
-            const allowedStates = new Set([...view.activeStates, ...view.terminalStates]);
-            if (!allowedStates.has(state)) {
-                return badRequest(res, `state must be one of: ${[...allowedStates].join(', ') || '<none configured>'}`);
-            }
-            const description = typeof b.description === 'string' ? b.description : undefined;
-            const priority = typeof b.priority === 'number' && Number.isFinite(b.priority) ? b.priority : null;
-            const labels = Array.isArray(b.labels)
-                ? b.labels.filter((x) => typeof x === 'string')
-                : [];
-            const blockedBy = Array.isArray(b.blocked_by)
-                ? b.blocked_by.filter((x) => typeof x === 'string')
-                : [];
+    const transition = decideTriageTransition(action, ctx.view.states);
+    if (!transition.ok) {
+        return jsonResponse(ctx.res, transition.status, {
+            error: { code: transition.code, message: transition.message },
+        });
+    }
+    await runTriageMove(ctx, tracker, root, identifier, action, transition.toState, transition.fromState);
+}
+async function runTriageMove(ctx, tracker, root, identifier, action, toState, fromState) {
+    const isHtmx = ctx.req.headers['hx-request'] === 'true';
+    try {
+        const result = await tracker.moveIssueToState(identifier, toState, { fromRoot: root, fromState });
+        log.info('triage action', { identifier, action, from: result.fromState, to: result.toState });
+        // Nudge the orchestrator to pick the freshly approved issue up immediately instead
+        // of waiting for the next poll tick. Best-effort: triggerRefresh is idempotent.
+        if (action === 'approve') {
             try {
-                const created = await writeIssueFile({
-                    trackerRoot: root,
-                    identifier,
-                    title,
-                    state,
-                    description,
-                    priority,
-                    labels,
-                    blocked_by: blockedBy,
-                });
-                log.info('issue created via http', { identifier: created.identifier, state: created.state });
-                return jsonResponse(res, 201, created);
-            }
-            catch (err) {
-                return jsonResponse(res, 409, {
-                    error: { code: 'create_failed', message: err.message },
-                });
+                ctx.orch.triggerRefresh();
             }
+            catch { /* refresh request is fire-and-forget */ }
         }
-        return methodNotAllowed(res);
+        if (isHtmx)
+            return writeBoardPartial(ctx);
+        jsonResponse(ctx.res, 200, {
+            identifier, action, from_state: result.fromState, to_state: result.toState,
+        });
     }
-    // MCP JSON-RPC endpoint: agent (inside the smolvm) POSTs JSON-RPC envelopes here. The
-    // URL is per-issue (the agent only knows its own /<id>/mcp), backed by a bearer token
-    // generated at dispatch. Both layers are belt-and-braces against the no-auth 8787 socket.
-    const mcpMatch = /^\/api\/v1\/issues\/([^/]+)\/mcp$/.exec(pathname);
-    if (mcpMatch) {
-        if (method !== 'POST')
-            return methodNotAllowed(res);
-        const mcp = opts.mcp;
-        if (!mcp)
-            return notFound(res, 'mcp_disabled', 'mcp endpoint not enabled');
-        const identifier = decodeURIComponent(mcpMatch[1]);
-        const auth = (req.headers['authorization'] ?? req.headers['Authorization']);
-        const token = auth && auth.startsWith('Bearer ') ? auth.slice('Bearer '.length).trim() : '';
-        if (!token) {
-            res.statusCode = 401;
-            res.setHeader('content-type', 'application/json; charset=utf-8');
-            res.end(JSON.stringify({ error: { code: 'unauthorized', message: 'bearer token required' } }));
-            return;
-        }
-        if (!mcp.isActive(identifier, token)) {
-            res.statusCode = 404;
-            res.setHeader('content-type', 'application/json; charset=utf-8');
-            res.end(JSON.stringify({ error: { code: 'not_found', message: 'issue not active or token mismatch' } }));
-            return;
-        }
-        let body;
-        try {
-            body = await readJsonBody(req);
-        }
-        catch (err) {
-            return badRequest(res, err.message);
-        }
-        const reply = await mcp.handleJsonRpc(identifier, token, body);
-        if (reply === null) {
-            // JSON-RPC notification (no id) → 204 No Content
-            res.statusCode = 204;
-            res.end();
-            return;
-        }
-        return jsonResponse(res, 200, reply);
+    catch (err) {
+        const code = err.code ?? 'triage_failed';
+        const status = code === 'local_issue_not_found' ? 404 : 409;
+        if (isHtmx)
+            return writeBoardPartial(ctx);
+        jsonResponse(ctx.res, status, { error: { code, message: err.message } });
     }
-    // Steering reply: the dashboard (or any operator with access) submits the human's
-    // response to a queued request_human_steering call. The orchestrator-side runner is
-    // awaiting on the registry; this POST unblocks it.
-    //
-    // Two callers:
-    //  • Dashboard via HTMX (form-encoded body, `HX-Request: true`, same-origin). We accept
-    //    only this combination for form bodies and reply with an HTML partial that swaps
-    //    into #attention.
-    //  • Direct API client (JSON body). Replies with a structured JSON acknowledgement.
-    //
-    // The form-encoded branch is gated on `HX-Request: true` and a same-origin check so a
-    // simple cross-site form POST cannot inject a steering reply: form-encoded is a "simple"
-    // CORS request that bypasses preflight, and the steering endpoint is unauthenticated.
-    // HTMX errors land at 200 OK with an inline `.steering-error` message because HTMX's
-    // default response-handling does not swap on 4xx/5xx; returning 200 keeps the operator's
-    // form in sync with reality (their textarea text is preserved by hx-preserve regardless).
-    const steeringMatch = /^\/api\/v1\/issues\/([^/]+)\/steering-reply$/.exec(pathname);
-    if (steeringMatch) {
-        if (method !== 'POST')
-            return methodNotAllowed(res);
-        const mcp = opts.mcp;
-        if (!mcp)
-            return notFound(res, 'mcp_disabled', 'steering endpoint not enabled');
-        const identifier = decodeURIComponent(steeringMatch[1]);
-        const isHtmx = req.headers['hx-request'] === 'true';
-        const ctype = (req.headers['content-type'] ?? '').toLowerCase();
-        const baseCtype = ctype.split(';', 1)[0].trim();
-        const isFormBody = baseCtype === 'application/x-www-form-urlencoded';
-        const isJsonBody = baseCtype === 'application/json';
-        // Content-type gates against CSRF: form-urlencoded, text/plain, and multipart/form-data
-        // are "simple" CORS requests and bypass preflight. Only application/json (non-simple,
-        // triggers preflight) is accepted on the JSON path; the form path is additionally
-        // gated on HX-Request + same-origin. Anything else is rejected outright.
-        if (!isFormBody && !isJsonBody) {
-            return jsonResponse(res, 415, {
-                error: {
-                    code: 'unsupported_media_type',
-                    message: 'content-type must be application/json or application/x-www-form-urlencoded',
-                },
-            });
-        }
-        if (isFormBody) {
-            if (!isHtmx || !isSameOriginRequest(req)) {
-                return jsonResponse(res, 403, {
-                    error: {
-                        code: 'forbidden',
-                        message: 'form-encoded steering replies require an HTMX same-origin request',
-                    },
-                });
-            }
-        }
-        let text = '';
-        if (isFormBody) {
-            try {
-                const raw = await readTextBody(req);
-                const params = new URLSearchParams(raw);
-                text = (params.get('text') ?? '').trim();
-            }
-            catch (err) {
-                return htmxOrJsonError(res, isHtmx, orch, view, 400, 'bad_request', err.message);
-            }
-        }
-        else {
-            let body;
-            try {
-                body = await readJsonBody(req);
-            }
-            catch (err) {
-                return badRequest(res, err.message);
-            }
-            text =
-                body && typeof body === 'object' && !Array.isArray(body) && typeof body.text === 'string'
-                    ? body.text.trim()
-                    : '';
-        }
-        if (!text) {
-            return htmxOrJsonError(res, isHtmx, orch, view, 400, 'bad_request', 'text is required and must be a non-empty string');
-        }
-        const ok = mcp.submitSteeringReply(identifier, text);
-        if (!ok) {
-            return htmxOrJsonError(res, isHtmx, orch, view, 409, 'no_pending_steering', 'no agent is awaiting steering for this issue');
-        }
-        if (isHtmx) {
-            const p = await gatherPartialInputs(orch, view);
-            res.statusCode = 200;
-            res.setHeader('content-type', 'text/html; charset=utf-8');
-            res.end(renderAttentionPartial(p));
-            return;
-        }
-        return jsonResponse(res, 202, { identifier, accepted_at: new Date().toISOString() });
+}
+// Re-render the whole board after a triage move. HTMX morph keeps unchanged columns
+// stable; only the row that moved (or "failed" and stayed) redraws.
+async function writeBoardPartial(ctx) {
+    const p = await gatherPartialInputs(ctx.orch, ctx.view);
+    ctx.res.statusCode = 200;
+    ctx.res.setHeader('content-type', 'text/html; charset=utf-8');
+    ctx.res.setHeader('cache-control', 'no-store');
+    ctx.res.end(renderBoardPartial(p));
+}
+// Read-only HTML view of one issue. Linked from the identifier on every "on disk" and
+// triage row; renders front-matter (labels, priority, blockers, provenance) plus the
+// Markdown body so an operator can read the full task without leaving the browser. No
+// editing surface — actions stay on the dashboard. Source of truth is the on-disk .md
+// file, found by walking every state directory under tracker.root for a basename match.
+async function handleDetailHtml(ctx) {
+    if (ctx.method !== 'GET')
+        return methodNotAllowed(ctx.res);
+    const root = ctx.view.trackerRoot;
+    if (!root) {
+        ctx.res.statusCode = 404;
+        ctx.res.setHeader('content-type', 'text/html; charset=utf-8');
+        ctx.res.end(renderIssueNotFoundPage('(tracker root not configured)', ctx.view));
+        return;
     }
-    const m = /^\/api\/v1\/([^/]+)$/.exec(pathname);
-    if (m) {
-        if (method !== 'GET')
-            return methodNotAllowed(res);
-        const identifier = decodeURIComponent(m[1]);
-        const detail = orch.detailByIdentifier(identifier);
-        if (!detail)
-            return notFound(res, 'issue_not_found', `issue ${identifier} is not tracked`);
-        return jsonResponse(res, 200, detail);
+    const { identifier } = ctx.route;
+    const issue = await readIssueFromDisk(root, identifier);
+    if (!issue) {
+        ctx.res.statusCode = 404;
+        ctx.res.setHeader('content-type', 'text/html; charset=utf-8');
+        ctx.res.end(renderIssueNotFoundPage(identifier, ctx.view));
+        return;
     }
-    notFound(res);
+    ctx.res.statusCode = 200;
+    ctx.res.setHeader('content-type', 'text/html; charset=utf-8');
+    ctx.res.setHeader('cache-control', 'no-store');
+    ctx.res.end(renderIssueDetailPage(issue, ctx.view));
+}
+async function handleDetailJson(ctx) {
+    if (ctx.method !== 'GET')
+        return methodNotAllowed(ctx.res);
+    const { identifier } = ctx.route;
+    const detail = ctx.orch.detailByIdentifier(identifier);
+    if (!detail)
+        return notFound(ctx.res, 'issue_not_found', `issue ${identifier} is not tracked`);
+    jsonResponse(ctx.res, 200, detail);
+}
+async function handleNotFoundRoute(ctx) {
+    notFound(ctx.res);
+}
+const ROUTE_HANDLERS = {
+    dashboard: handleDashboard,
+    preview: handlePreview,
+    partial: handlePartial,
+    state: handleState,
+    refresh: handleRefresh,
+    issues: handleIssues,
+    mcp: handleMcp,
+    steering: handleSteeringReply,
+    triage: handleTriage,
+    detail_html: handleDetailHtml,
+    detail_json: handleDetailJson,
+    not_found: handleNotFoundRoute,
+};
+function renderIssueNotFoundPage(identifier, view) {
+    const workflowName = path.basename(view.workflowPath || 'workflow.md');
+    return `<!doctype html>
+<html lang="en"><head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>not found · symphony</title>
+<style>
+:root { color-scheme: dark; }
+html, body {
+  background: #0f1115; color: #dfe2e7;
+  font: 14px/1.45 ui-sans-serif, system-ui, sans-serif;
+  margin: 0; padding: 0;
+}
+main { max-width: 640px; margin: 0 auto; padding: 2.5rem 1.5rem; }
+h1 { font-size: 1.2rem; font-weight: 500; color: #e6ebf2; margin: 0 0 0.6rem; }
+p { color: #9aa4b2; line-height: 1.5; }
+a { color: #9cc0ff; text-decoration: none; }
+a:hover { color: #e6ebf2; }
+code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #e6ebf2; }
+</style>
+</head><body>
+<main>
+  <h1>issue not found</h1>
+  <p>no issue file matches <code>${escapeHtml(identifier)}</code> under the tracker root.</p>
+  <p><a href="/">← back to ${escapeHtml(workflowName)}</a></p>
+</main>
+</body></html>`;
 }
 //# sourceMappingURL=http.js.map