@hanzlaa/rcode 4.1.2 → 4.3.0

package/server/lib/html/client/components/shared.js

@@ -8,11 +8,14 @@
  */
 
 import { html, useState } from '../preact.js';
-import { pctNum, chip as chipDesc, humanDate, pct } from '../util.js';
+import { pctNum, chip as chipDesc, humanDate, pct, currentPhaseId } from '../util.js';
 import {
-  runAndOpenTerm, isSessionRunning, runningInSprint, runningInPhase,
+  isSessionRunning, runningInSprint, runningInPhase,
 } from '../orchestrator.js';
+import { getState } from '../store.js';
 import { Icon } from '../icons-client.js';
+import { TaskPipeline } from './TaskPipeline.js';
+import { openRunnerPicker } from './RunnerPicker.js';
 
 // ---- Toast helper (shared by CmdHint copy action and any view) ----
 export function showToast(msg) {
@@ -23,6 +26,29 @@ export function showToast(msg) {
   setTimeout(() => el.classList.remove('show'), 2000);
 }
 
+// ---- pressable ----
+/**
+ * Spreadable props that make a clickable non-button element keyboard
+ * accessible: focusable, announced as a button, activated by Enter/Space.
+ * Usage: html`<div class="item item-clickable" ...${pressable(fn)}>…</div>`
+ */
+export function pressable(onActivate) {
+  return {
+    role: 'button',
+    tabindex: 0,
+    onClick: onActivate,
+    onKeyDown: (e) => {
+      // Ignore keydown bubbling up from nested interactive elements
+      // (e.g. a Run button inside a clickable card row).
+      if (e.target !== e.currentTarget) return;
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        onActivate(e);
+      }
+    },
+  };
+}
+
 // ---- Chip ----
 /**
  * Status chip.
@@ -119,7 +145,7 @@ export function CmdHint({ cmd, desc }) {
       });
   }
   return html`
-    <div class="cmd-hint-item" onClick=${handleClick}>
+    <div class="cmd-hint-item" ...${pressable(handleClick)}>
       <span class="cmd-text">${cmd}</span>
       <span class="cmd-desc">${desc}</span>
       <${Icon} name="copy" size=${14} cls="cmd-copy"/>
@@ -145,16 +171,22 @@ export function CmdHints({ hints }) {
 
 // ---- RunBtn ----
 /**
- * Compact run button. Calls runAndOpenTerm from orchestrator.js.
+ * Compact run button. Opens the runner/model picker popover anchored to the
+ * button; the picker launches the session via runAndOpenTerm.
  * @param {{ storyId: string, cmd: string, label: string }} props
  */
 export function RunBtn({ storyId, cmd, label }) {
+  // Plain read (not a subscription) — every parent view already re-renders
+  // on store changes, so the disabled state stays current with the 4s poll.
+  const down = getState().orchOnline === false;
   function handleClick(e) {
     e.stopPropagation();
-    runAndOpenTerm(storyId, cmd, label);
+    openRunnerPicker(e.currentTarget, { kind: 'session', storyId, cmd, title: label });
   }
   return html`
-    <button class="card-run-btn" title=${'Run ' + label} onClick=${handleClick}>
+    <button class="card-run-btn" disabled=${down}
+      title=${down ? 'Orchestrator unreachable' : 'Run ' + label}
+      onClick=${handleClick}>
       ▶ Run
     </button>
   `;
@@ -180,12 +212,14 @@ export function PhaseCard({ phase: p, S }) {
   const sps = p.sprints || [];
   const stories = sps.flatMap(s => s.stories || []);
   const done = stories.filter(t => t.status === 'done' || t.status === 'completed').length;
-  const isCur = String(p.id) === String(S && S.currentPhase);
+  // currentPhase is the contract object (or legacy string) — compare by id.
+  const cpId = currentPhaseId(S && S.currentPhase);
+  const isCur = cpId !== '' && String(p.id) === cpId;
   const running = runningInPhase(p);
   const borderStyle = isCur ? 'border-left-color:var(--accent-amber)' : '';
   return html`
     <div class=${'item item-clickable'} style=${borderStyle}
-      onClick=${() => { location.hash = 'phases/' + p.id; }}>
+      ...${pressable(() => { location.hash = 'phases/' + p.id; })}>
       <div class="item-title">
         ${sps.length ? html`<${RunBtn} storyId=${'phase-' + p.id} cmd=${'/rcode-execute ' + p.id} label=${'Phase ' + p.id}/>` : null}
         Phase ${p.id} — ${p.name}
@@ -232,7 +266,7 @@ export function SprintCard({ sprint: s, S }) {
     : '';
   return html`
     <div class=${'item item-clickable' + (isCur ? ' sprint-current' : '')} style=${borderStyle}
-      onClick=${() => { location.hash = 'sprints/' + s.id; }}>
+      ...${pressable(() => { location.hash = 'sprints/' + s.id; })}>
       <div class="item-title">
         <${RunBtn} storyId=${'sprint-' + s.id} cmd=${'/rcode-execute-sprint ' + s.id} label=${'Sprint ' + s.id}/>
         Sprint ${s.id} — ${s.goal || 'No goal'}
@@ -290,7 +324,8 @@ export function TaskCard({ task: t }) {
   return html`
     <div class="item item-clickable" data-status=${t.status || ''}
       style=${done ? 'opacity:.65' : ''}
-      onClick=${() => setExpanded(e => !e)}>
+      aria-expanded=${expanded}
+      ...${pressable(() => setExpanded(e => !e))}>
       <div class="item-title" style=${done ? 'text-decoration:line-through' : ''}>
         ${t.id && !done ? html`<${RunBtn} storyId=${t.id} cmd=${'/rcode-dev-story ' + t.id} label=${'Story ' + t.id}/>` : null}
         ${done ? '✓ ' : ''}${t.title}
@@ -302,7 +337,8 @@ export function TaskCard({ task: t }) {
         ${t.id ? html`<${Tag}>${t.id}</${Tag}>` : null}
         ${t.sprintId ? html`<${Tag}>Sprint ${t.sprintId}</${Tag}>` : null}
         ${t.phaseId ? html`<${Tag}>Phase ${t.phaseId}</${Tag}>` : null}
-        ${t.id && running ? html`<span class="run-badge">● running</span>` : null}
+        ${t.id && running ? html`<span class="run-badge"><span class="live-dot"></span>running</span>` : null}
+        <${TaskPipeline} task=${t} running=${t.id && running}/>
       </div>
       ${expanded ? html`
         <div class="task-detail">

package/server/lib/html/client/filter-state.js

@@ -0,0 +1,72 @@
+/**
+ * filter-state.js — URL hash query-string filter module.
+ *
+ * This module owns the `?status=&milestone=&date=` filter query portion of
+ * location.hash ONLY. It never touches the `view` or `subId` path segments.
+ *
+ * Hash shape: `#view/subId?status=done&milestone=M3&date=2026-05`
+ *   - The path segment (`view/subId`) is managed by App.js parseHash.
+ *   - The query segment (`status=...`) is managed here.
+ *
+ * Recognised filter keys: `status`, `milestone`, `date`. All others are ignored.
+ */
+
+const FILTER_KEYS = ['status', 'milestone', 'date'];
+
+/**
+ * Parse filter state from a raw hash string.
+ *
+ * @param {string} hash — raw hash string (with or without leading `#`).
+ * @returns {{ status: string, milestone: string, date: string }} — each value
+ *   is a string or `''` when absent. Never throws on malformed input.
+ */
+export function parseFilters(hash) {
+  const result = { status: '', milestone: '', date: '' };
+  try {
+    const raw = typeof hash === 'string' ? hash.replace(/^#/, '') : '';
+    const qIdx = raw.indexOf('?');
+    if (qIdx === -1) return result;
+    const queryStr = raw.slice(qIdx + 1);
+    const params = new URLSearchParams(queryStr);
+    for (const key of FILTER_KEYS) {
+      const val = params.get(key);
+      if (val !== null) result[key] = val;
+    }
+  } catch {
+    // Malformed input — return all-empty object.
+  }
+  return result;
+}
+
+/**
+ * Serialise a filter object into a query string.
+ *
+ * @param {{ status: string, milestone: string, date: string }} filters
+ * @returns {string} — query string WITHOUT a leading `?`. Empty string when no
+ *   active filter. Keys are always appended in fixed order: status, milestone, date.
+ */
+export function serialiseFilters(filters) {
+  const params = new URLSearchParams();
+  for (const key of FILTER_KEYS) {
+    const val = filters?.[key];
+    if (typeof val === 'string' && val !== '') {
+      params.append(key, val);
+    }
+  }
+  return params.toString();
+}
+
+/**
+ * Build a full hash body from a view path and filter object.
+ *
+ * Used by FilterChips (34.2) to update `location.hash` without disturbing
+ * the view path segment.
+ *
+ * @param {string} viewPath — view path segment, e.g. `phases` or `sprints/3`.
+ * @param {{ status: string, milestone: string, date: string }} filters
+ * @returns {string} — hash body: `viewPath` or `viewPath?query`.
+ */
+export function applyFilters(viewPath, filters) {
+  const query = serialiseFilters(filters);
+  return query ? `${viewPath}?${query}` : viewPath;
+}

package/server/lib/html/client/icons-client.js

@@ -34,6 +34,7 @@ export const ICONS = {
   minimize:    '<line x1="5" y1="14" x2="19" y2="14"/>',
   maximize:    '<path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/>',
   clock:       '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
+  history:     '<path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/>',
   eye:         '<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/>',
   filePen:     '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h7"/><polyline points="14 2 14 8 20 8"/><path d="M18.4 12.6a2 2 0 0 1 3 3L17 20l-4 1 1-4z"/>',
   hourglass:   '<path d="M5 22h14M5 2h14M17 22v-4.17a2 2 0 0 0-.59-1.42L12 12l-4.41 4.41A2 2 0 0 0 7 17.83V22M7 2v4.17a2 2 0 0 0 .59 1.42L12 12l4.41-4.41A2 2 0 0 0 17 6.17V2"/>',
@@ -54,6 +55,12 @@ export const ICONS = {
   // Added in sprint 32.3 — App/Topbar theme toggle icons
   moon:            '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>',
   sun:             '<circle cx="12" cy="12" r="4"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.22" y1="4.22" x2="7.05" y2="7.05"/><line x1="16.95" y1="16.95" x2="19.78" y2="19.78"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.22" y1="19.78" x2="7.05" y2="16.95"/><line x1="16.95" y1="7.05" x2="19.78" y2="4.22"/>',
+
+  // Added in sprint 36.1 — command palette search icon
+  search:          '<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>',
+
+  // Blocked-session notifications — topbar bell
+  bell:            '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
 };
 
 /**

package/server/lib/html/client/notify.js

@@ -0,0 +1,75 @@
+/**
+ * notify.js — blocked-session notification tracker.
+ *
+ * Pure logic, no DOM. The 4s session poll (orchestrator.js _poll) calls
+ * trackBlocked(sessions) after each tick. This module diffs the blocked set
+ * against the previous tick and writes store.blockedAlerts — the persistent
+ * clickable toasts rendered by components/NotifyCenter.js.
+ *
+ * Browser Notification API is used ONLY when permission is already granted;
+ * we never call Notification.requestPermission().
+ */
+
+import { getState, setState } from './store.js';
+
+// storyIds that were blocked on the previous poll tick — transition detector.
+let _prevBlocked = new Set();
+
+/** True when the browser Notification API is usable without prompting. */
+function notificationsGranted() {
+  return typeof window !== 'undefined'
+    && 'Notification' in window
+    && window.Notification.permission === 'granted';
+}
+
+/** Fire a system notification for a newly-blocked session (granted-only). */
+function systemNotify(storyId) {
+  if (!notificationsGranted()) return;
+  try {
+    new window.Notification('Agent waiting for input', {
+      body: 'Session ' + storyId + ' is blocked on a question.',
+      tag: 'rcode-blocked-' + storyId, // dedupe: re-fires replace, not stack
+    });
+  } catch { /* notification constructor can throw in some embeds — ignore */ }
+}
+
+/**
+ * Diff the latest session list against the previous tick:
+ *   - session newly blocked  → append a persistent alert + system notification
+ *   - session left blocked   → drop its alert (answered / exited / stopped)
+ * Alerts: [{ storyId, cmd }] in store.blockedAlerts.
+ */
+export function trackBlocked(sessions) {
+  const nowBlocked = new Map();
+  for (const s of sessions || []) {
+    if (s.status === 'blocked') nowBlocked.set(s.storyId, s);
+  }
+
+  const alerts = (getState().blockedAlerts || [])
+    // Drop alerts for sessions that are no longer blocked.
+    .filter(a => nowBlocked.has(a.storyId));
+
+  let changed = alerts.length !== (getState().blockedAlerts || []).length;
+
+  for (const [storyId, s] of nowBlocked) {
+    if (_prevBlocked.has(storyId)) continue;            // already known
+    if (alerts.some(a => a.storyId === storyId)) continue; // already alerted
+    alerts.push({ storyId, cmd: s.cmd || '' });
+    systemNotify(storyId);
+    changed = true;
+  }
+
+  _prevBlocked = new Set(nowBlocked.keys());
+  if (changed) setState({ blockedAlerts: alerts });
+}
+
+/** Dismiss one alert toast without touching the session. */
+export function dismissBlockedAlert(storyId) {
+  const alerts = (getState().blockedAlerts || []).filter(a => a.storyId !== storyId);
+  setState({ blockedAlerts: alerts });
+}
+
+/** Sessions currently blocked (drives the topbar bell). */
+export function blockedSessions() {
+  return (getState().activeSessions || []).filter(s => s.status === 'blocked');
+}

package/server/lib/html/client/orchestrator.js

@@ -12,6 +12,7 @@
 
 import { getState, setState } from './store.js';
 import { showToast } from './components/shared.js';
+import { trackBlocked } from './notify.js';
 
 export const ORCH_HTTP = 'http://localhost:7718';
 export const ORCH_WS   = 'ws://localhost:7718';
@@ -38,17 +39,43 @@ export function refreshOrchToken() {
 
 /**
  * POST /api/run — start a PTY session for storyId.
+ * opts = { runner?, model? } — which agent CLI / model to launch. Omitted →
+ * the server default (claude, no model flag). The server re-validates both.
  * Returns the parsed JSON response (or throws on network error).
  */
-export function runSession(storyId, cmd) {
-  const tok = orchToken();
+export function runSession(storyId, cmd, opts) {
+  const tok  = orchToken();
+  const body = { storyId, cmd };
+  if (opts && opts.runner) {
+    body.runner = opts.runner;
+    if (opts.model) body.model = opts.model;
+  }
   return fetch(ORCH_HTTP + '/api/run', {
     method: 'POST',
     headers: { 'Authorization': 'Bearer ' + tok, 'Content-Type': 'application/json' },
-    body: JSON.stringify({ storyId, cmd }),
+    body: JSON.stringify(body),
   }).then(r => r.json());
 }
 
+/**
+ * GET /api/runners — detected agent CLIs: [{ id, label, available, models }].
+ * The list is fixed for the orchestrator's lifetime (detected once at boot),
+ * so the first successful response is cached; failures are not cached so a
+ * later open retries.
+ */
+let _runnersPromise = null;
+export function fetchRunners() {
+  if (_runnersPromise) return _runnersPromise;
+  const tok = orchToken();
+  _runnersPromise = fetch(ORCH_HTTP + '/api/runners', {
+    headers: { 'Authorization': 'Bearer ' + tok },
+  })
+    .then(r => r.json())
+    .then(d => (d && d.runners) || [])
+    .catch(() => { _runnersPromise = null; return []; });
+  return _runnersPromise;
+}
+
 /**
  * POST /api/stop — stop a running session.
  */
@@ -62,21 +89,95 @@ export function stopSession(storyId) {
 }
 
 /**
- * GET /api/sessions — return the sessions array (or [] on error).
+ * GET /api/sessions — resolve { ok, sessions }. ok=false means the
+ * orchestrator was unreachable (network failure / no token), which the
+ * session poll records as orchOnline so the UI can show a down state.
  */
-export function fetchSessions() {
+function fetchSessionsWithStatus() {
   const tok = orchToken();
-  if (!tok) return Promise.resolve([]);
+  if (!tok) return Promise.resolve({ ok: false, sessions: [] });
   return fetch(ORCH_HTTP + '/api/sessions', {
     headers: { 'Authorization': 'Bearer ' + tok },
   })
+    .then(r => {
+      if (r.status === 401) { refreshOrchToken(); return { ok: true, sessions: [] }; }
+      return r.json().then(d => ({ ok: true, sessions: (d && d.sessions) || [] }));
+    })
+    .catch(() => ({ ok: false, sessions: [] }));
+}
+
+/**
+ * GET /api/sessions — return the sessions array (or [] on error).
+ */
+export function fetchSessions() {
+  return fetchSessionsWithStatus().then(r => r.sessions);
+}
+
+/**
+ * GET /api/history — return the persisted run history array (or [] on error).
+ */
+export function fetchHistory() {
+  const tok = orchToken();
+  if (!tok) return Promise.resolve([]);
+  return fetch(ORCH_HTTP + '/api/history', { headers: { 'Authorization': 'Bearer ' + tok } })
     .then(r => {
       if (r.status === 401) { refreshOrchToken(); return []; }
-      return r.json().then(d => (d && d.sessions) || []);
+      return r.json().then(d => (d && d.history) || []);
     })
     .catch(() => []);
 }
 
+/**
+ * Merge live sessions with persisted history, keyed on storyId.
+ * Live session fields win for most properties; durationMs and endTime are
+ * field-aware: the live record may not have them yet (session still running),
+ * so fall back to the history value if the live field is null/undefined.
+ */
+export function mergeSessionsAndHistory(live, hist) {
+  const byId = new Map();
+  for (const h of hist || []) byId.set(h.storyId, { ...h, source: 'history' });
+  for (const s of live || []) {
+    const h = byId.get(s.storyId) || {};
+    byId.set(s.storyId, {
+      ...h,
+      ...s,
+      source: 'live',
+      durationMs: s.durationMs ?? h.durationMs,
+      endTime:    s.endTime    ?? h.endTime,
+    });
+  }
+  return [...byId.values()];
+}
+
+/** True unless the last session poll found the orchestrator unreachable. */
+export function isOrchOnline() {
+  return getState().orchOnline !== false;
+}
+
+/**
+ * POST /api/reject — record a structured rejection reason for storyId.
+ * phase is optional. Returns the parsed JSON response.
+ */
+export function submitRejection(storyId, reason, phase) {
+  const tok = orchToken();
+  return fetch(ORCH_HTTP + '/api/reject', {
+    method: 'POST',
+    headers: { 'Authorization': 'Bearer ' + tok, 'Content-Type': 'application/json' },
+    body: JSON.stringify({ storyId, reason, phase: phase || null }),
+  }).then(r => r.json());
+}
+
+/**
+ * GET /api/rejections — return the persisted rejections array (or [] on error).
+ */
+export function fetchRejections() {
+  const tok = orchToken();
+  if (!tok) return Promise.resolve([]);
+  return fetch(ORCH_HTTP + '/api/rejections', { headers: { 'Authorization': 'Bearer ' + tok } })
+    .then(r => r.ok ? r.json().then(d => (d && d.rejections) || []) : [])
+    .catch(() => []);
+}
+
 /**
  * POST /api/clean-sessions — remove ended sessions.
  * olderThanDays = 0 removes all ended sessions; > 0 keeps recent ones.
@@ -102,10 +203,13 @@ export function activeSession(storyId) {
   return (activeSessions || []).find(s => s.storyId === storyId) || null;
 }
 
-/** True when storyId has a session with status==='running'. */
+/**
+ * True when storyId has a live session. 'blocked' is a live PTY waiting for
+ * input (server-side classification of running), so it counts as running here.
+ */
 export function isSessionRunning(storyId) {
-  const s = activeSession(storyId);
-  return !!(s && s.status === 'running');
+  const { runningByStory } = getState();
+  return !!(storyId && runningByStory && runningByStory[storyId]);
 }
 
 /** Count running sessions touching this sprint (sprint-level + its stories). */
@@ -122,16 +226,22 @@ export function runningInPhase(p) {
   return n;
 }
 
-/** Total count of sessions with status==='running'. */
+/** Total count of live sessions (running or blocked-on-input). */
 export function runningTotal() {
   const { activeSessions } = getState();
-  return (activeSessions || []).filter(s => s.status === 'running').length;
+  return (activeSessions || []).filter(s => s.status === 'running' || s.status === 'blocked').length;
 }
 
 // ── Session poll ──────────────────────────────────────────────────────────────
 
 let _pollTimer = null;
 
+// Serialized snapshot of the last committed activeSessions. The 4s poll
+// always produces a NEW array identity, which defeats the store's
+// reference-equality change check — so compare content here and only
+// setState when the sessions actually changed.
+let _lastSessionsJson = null;
+
 /**
  * Start polling /api/sessions every 4 s and writing activeSessions into the
  * store. Components react via useStore(). Safe to call multiple times — only
@@ -149,9 +259,23 @@ export function stopSessionsPoll() {
 }
 
 function _poll() {
-  fetchSessions().then(sessions => {
-    setState({ activeSessions: sessions });
-  });
+  Promise.all([fetchSessionsWithStatus(), fetchHistory(), fetchRejections()])
+    .then(([{ ok, sessions }, history, rejections]) => {
+      // Merge any recorded rejection onto its matching session by storyId.
+      const byId = {};
+      for (const r of rejections) byId[r.storyId] = r;
+      const merged = sessions.map(s => byId[s.storyId] ? { ...s, rejection: byId[s.storyId] } : s);
+
+      // Dedupe: skip the setState when neither the session list, the
+      // orchestrator-online flag, nor the history changed — avoids a
+      // full-app re-render per poll tick.
+      const json = JSON.stringify(merged) + '|' + ok + '|' + JSON.stringify(history);
+      if (json === _lastSessionsJson) return;
+      _lastSessionsJson = json;
+      setState({ activeSessions: merged, history, orchOnline: ok });
+      // Detect running→blocked transitions and raise persistent alerts.
+      trackBlocked(merged);
+    });
 }
 
 // ── runAndOpenTerm convenience ────────────────────────────────────────────────
@@ -163,8 +287,9 @@ function _poll() {
  * @param {string} storyId
  * @param {string} cmd
  * @param {string} title
+ * @param {{ runner?: string, model?: string }} [opts] — agent CLI selection
  */
-export function runAndOpenTerm(storyId, cmd, title) {
+export function runAndOpenTerm(storyId, cmd, title, opts) {
   // Open the panel immediately (it shows "connecting" while the session starts).
   setState({
     terminal: {
@@ -177,9 +302,19 @@ export function runAndOpenTerm(storyId, cmd, title) {
   });
 
   const tok = orchToken();
-  if (!tok) return;
+  if (!tok) { showToast('No orchestrator token — restart the dashboard'); return; }
 
-  runSession(storyId, cmd).catch(err => console.error('[orchestrator] session op failed:', err.message));
+  runSession(storyId, cmd, opts)
+    .then(data => {
+      // 409 = already running (terminal reattaches); anything else is surfaced.
+      if (data && data.error && !data.error.includes('already running')) {
+        showToast('Run error: ' + data.error);
+      }
+    })
+    .catch(err => {
+      console.error('[orchestrator] session op failed:', err.message);
+      showToast('Could not reach orchestrator — session not started');
+    });
 }
 
 /**
@@ -205,15 +340,6 @@ export function openOrchPanel(storyId) {
   setState({ orchPanel: { open: true, storyId } });
 }
 
-/**
- * runStory — Kanban "Run" action. Moves card to in_progress visually then
- * delegates to runAndOpenTerm.
- */
-export function runStory(storyId) {
-  if (!storyId) return;
-  runAndOpenTerm(storyId, '/rcode-dev-story ' + storyId, storyId);
-}
-
 /**
  * stopStory — Kanban "Stop" action.
  */
@@ -228,18 +354,18 @@ export function stopStory(storyId) {
  * Update both when adding a new command.
  */
 export const ALLOWED_COMMANDS = [
-  { cmd: '/rcode-init',          label: 'init — initialise project workspace' },
-  { cmd: '/rcode-status',        label: 'status — phase / sprint status' },
-  { cmd: '/rcode-progress',      label: 'progress — milestone progress' },
-  { cmd: '/rcode-help',          label: 'help — command reference' },
-  { cmd: '/rcode-health',        label: 'health — repo health check' },
-  { cmd: '/rcode-next',          label: 'next — suggest next action' },
-  { cmd: '/rcode-show',          label: 'show — show current plan' },
-  { cmd: '/rcode-list-plans',    label: 'list-plans — list all sprint plans' },
-  { cmd: '/rcode-sprint-status', label: 'sprint-status — sprint execution status' },
-  { cmd: '/rcode-config',        label: 'config — show rcode config' },
-  { cmd: '/rcode-diff',          label: 'diff — diff since last checkpoint' },
-  { cmd: '/rcode-stats',         label: 'stats — project statistics' },
+  { cmd: '/rcode-init',          label: 'init — initialise project workspace',    category: 'Project'  },
+  { cmd: '/rcode-config',        label: 'config — show rcode config',             category: 'Project'  },
+  { cmd: '/rcode-status',        label: 'status — phase / sprint status',         category: 'Status'   },
+  { cmd: '/rcode-progress',      label: 'progress — milestone progress',          category: 'Status'   },
+  { cmd: '/rcode-sprint-status', label: 'sprint-status — sprint execution status',category: 'Status'   },
+  { cmd: '/rcode-stats',         label: 'stats — project statistics',             category: 'Status'   },
+  { cmd: '/rcode-show',          label: 'show — show current plan',               category: 'Planning' },
+  { cmd: '/rcode-list-plans',    label: 'list-plans — list all sprint plans',     category: 'Planning' },
+  { cmd: '/rcode-next',          label: 'next — suggest next action',             category: 'Planning' },
+  { cmd: '/rcode-help',          label: 'help — command reference',               category: 'Inspect'  },
+  { cmd: '/rcode-health',        label: 'health — repo health check',             category: 'Inspect'  },
+  { cmd: '/rcode-diff',          label: 'diff — diff since last checkpoint',      category: 'Inspect'  },
 ];
 
 /**
@@ -255,8 +381,9 @@ export const ALLOWED_COMMANDS = [
  *   - network failure                         → showToast('Could not reach orchestrator')
  *
  * @param {string} cmd  Must be one of ALLOWED_COMMANDS[*].cmd.
+ * @param {{ runner?: string, model?: string }} [opts] — agent CLI selection
  */
-export function runCommandFromUI(cmd) {
+export function runCommandFromUI(cmd, opts) {
   if (!cmd) return;
   const slug    = cmd.replace(/^\//, '').replace(/\//g, '-');
   const storyId = 'cmd-' + slug;
@@ -269,7 +396,7 @@ export function runCommandFromUI(cmd) {
   const tok = orchToken();
   if (!tok) { showToast('No orchestrator token — restart the dashboard'); return; }
 
-  runSession(storyId, cmd)
+  runSession(storyId, cmd, opts)
     .then(data => {
       // 409 = already running (not an error — terminal is already attached).
       if (data && data.error && !data.error.includes('already running')) {

package/server/lib/html/client/preact.js

@@ -1,15 +1,20 @@
 /**
  * Preact + htm ESM runtime — single dependency surface.
  *
- * All esm.sh version pins live here. Every other client module imports
- * from this file so version bumps happen in one place.
+ * Vendored locally under vendor/ so the dashboard works offline /
+ * air-gapped / on CI screens with no internet (no esm.sh dependency).
+ * Every other client module imports from this file so version bumps
+ * happen in one place: replace the vendor/ files and update the pins.
  *
- * Pinned versions (current stable as of 2026-05):
- *   preact  10.24.3
- *   htm      3.1.1
+ * Pinned vendored versions:
+ *   preact  10.24.3  (vendor/preact.js, vendor/preact-hooks.js)
+ *   htm      3.1.1   (vendor/htm.js)
+ *
+ * vendor/preact-hooks.js has its bare `from "preact"` import rewritten
+ * to `from "./preact.js"` so it resolves without an import map.
  */
 
-import { h, render, Fragment } from 'https://esm.sh/preact@10.24.3';
+import { h, render, Fragment } from './vendor/preact.js';
 import {
   useState,
   useEffect,
@@ -17,8 +22,8 @@ import {
   useMemo,
   useCallback,
   useReducer,
-} from 'https://esm.sh/preact@10.24.3/hooks';
-import htmLib from 'https://esm.sh/htm@3.1.1';
+} from './vendor/preact-hooks.js';
+import htmLib from './vendor/htm.js';
 
 // htm bound to Preact's h — use as a tagged template literal: html`<div>...</div>`
 export const html = htmLib.bind(h);