@hanzlaa/rcode 4.1.2 → 4.3.0

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

@@ -0,0 +1,133 @@
+/**
+ * CommandPalette — Cmd+K / Ctrl+K searchable command overlay.
+ *
+ * Reads the allowlisted commands directly from ALLOWED_COMMANDS (orchestrator.js)
+ * and executes selections through runCommandFromUI — no second command list.
+ *
+ * Props:
+ *   open    {boolean} — whether the palette is visible
+ *   onClose {function} — called when the palette should close (Escape, backdrop click)
+ *
+ * Added in sprint 36.1 — DSH-4 command palette.
+ */
+
+import { html, useState, useEffect, useRef, useMemo } from '../preact.js';
+import { ALLOWED_COMMANDS, runCommandFromUI } from '../orchestrator.js';
+import { Icon } from '../icons-client.js';
+
+/**
+ * Build an ordered group list and a flat navigation list from a filtered
+ * commands array. Group order matches first-seen category order.
+ *
+ * @param {Array<{cmd,label,category}>} items
+ * @returns {{ groups: Array<{category, items}>, flat: Array<{cmd,label,category}> }}
+ */
+function groupCommands(items) {
+  const seen = [];
+  const map = {};
+  for (const item of items) {
+    if (!map[item.category]) {
+      map[item.category] = [];
+      seen.push(item.category);
+    }
+    map[item.category].push(item);
+  }
+  const groups = seen.map(cat => ({ category: cat, items: map[cat] }));
+  const flat = groups.flatMap(g => g.items);
+  return { groups, flat };
+}
+
+export function CommandPalette({ open, onClose }) {
+  const [query, setQuery] = useState('');
+  const [activeIdx, setActiveIdx] = useState(0);
+  const inputRef = useRef(null);
+
+  // Focus and reset when opened.
+  useEffect(() => {
+    if (open) {
+      setQuery('');
+      setActiveIdx(0);
+      // Defer by one tick so the element is in the DOM and visible.
+      requestAnimationFrame(() => {
+        if (inputRef.current) inputRef.current.focus();
+      });
+    }
+  }, [open]);
+
+  // Filter commands by query substring (label or cmd).
+  const results = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return ALLOWED_COMMANDS;
+    return ALLOWED_COMMANDS.filter(
+      ({ cmd, label }) =>
+        cmd.toLowerCase().includes(q) || label.toLowerCase().includes(q)
+    );
+  }, [query]);
+
+  const { groups, flat } = useMemo(() => groupCommands(results), [results]);
+
+  function choose(cmd) {
+    runCommandFromUI(cmd);
+    onClose();
+  }
+
+  function handleKeyDown(e) {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActiveIdx(i => Math.min(i + 1, flat.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActiveIdx(i => Math.max(i - 1, 0));
+    } else if (e.key === 'Enter') {
+      if (flat[activeIdx]) choose(flat[activeIdx].cmd);
+    } else if (e.key === 'Escape') {
+      onClose();
+    }
+  }
+
+  if (!open) return null;
+
+  // Running flat index counter across groups so activeIdx maps correctly.
+  let flatIdx = 0;
+
+  return html`
+    <div class="cmd-palette-overlay" onClick=${onClose}>
+      <div class="cmd-palette" onClick=${e => e.stopPropagation()} onKeyDown=${handleKeyDown}>
+
+        <div class="cmd-palette-search">
+          <${Icon} name="search" size=${16} cls="cmd-palette-search-icon" />
+          <input
+            class="cmd-palette-input"
+            ref=${inputRef}
+            value=${query}
+            onInput=${e => { setQuery(e.target.value); setActiveIdx(0); }}
+            placeholder="Search commands…"
+          />
+        </div>
+
+        <div class="cmd-palette-list">
+          ${flat.length === 0
+            ? html`<div class="cmd-palette-empty">No commands match</div>`
+            : groups.map(({ category, items }) => html`
+              <div class="cmd-palette-group" key=${category}>${category}</div>
+              ${items.map(item => {
+                const idx = flatIdx++;
+                return html`
+                  <button
+                    class=${'cmd-palette-item' + (idx === activeIdx ? ' active' : '')}
+                    key=${item.cmd}
+                    onClick=${() => choose(item.cmd)}
+                  >
+                    <span>${item.label}</span>
+                    <span class="cmd-palette-cmd">${item.cmd}</span>
+                  </button>
+                `;
+              })}
+            `)
+          }
+        </div>
+
+      </div>
+    </div>
+  `;
+}

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

@@ -0,0 +1,116 @@
+/**
+ * FileReader — shared markdown reader used by FilesView and MemoryView.
+ *
+ * Renders as a right-side slide-over (backdrop + panel) so it works on top
+ * of any list layout. Fetches /api/file?path=... itself whenever `path`
+ * changes, so callers only manage which file is open. Markdown renders via
+ * the global `marked` CDN lib with the same sanitizer the legacy Files view
+ * used; falls back to escaped <pre> when marked is unavailable.
+ *
+ * Props:
+ *   path    — project-relative file path to fetch (required; null hides)
+ *   title   — display name shown in the header (falls back to basename)
+ *   onClose — called when the user dismisses the reader (backdrop, ×, Esc)
+ */
+
+import { html, useState, useEffect, useCallback } from '../preact.js';
+import { showToast } from './shared.js';
+
+// ---- Markdown helpers (moved from FilesView so both views share one copy) ----
+function stripFrontmatter(md) {
+  if (!md.startsWith('---')) return md;
+  const end = md.indexOf('\n---', 3);
+  return end === -1 ? md : md.slice(end + 4).trimStart();
+}
+
+// Minimal HTML sanitizer for rendered markdown. No DOMPurify dependency on the
+// client, so we strip the dangerous primitives via regex after marked emits
+// HTML: script/iframe/object/embed tags, inline event handlers, and
+// javascript:/data: URLs in href/src. Markdown content comes from the project
+// dir (semi-trusted) but may include attacker-controlled text checked into a
+// repo, so we cannot trust raw HTML passthrough.
+function sanitizeHtml(raw) {
+  return String(raw)
+    .replace(/<\s*(script|iframe|object|embed|link|meta|style)\b[^>]*>[\s\S]*?<\s*\/\s*\1\s*>/gi, '')
+    .replace(/<\s*(script|iframe|object|embed|link|meta|style)\b[^>]*\/?>/gi, '')
+    .replace(/\son[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '')
+    .replace(/(href|src|xlink:href)\s*=\s*(["'])\s*(?:javascript|data|vbscript):[^"']*\2/gi, '$1=$2#blocked$2');
+}
+
+export function renderMd(md) {
+  const clean = stripFrontmatter(md);
+  if (typeof marked === 'undefined') {
+    return '<pre>' + clean.replace(/</g, '&lt;') + '</pre>';
+  }
+  return sanitizeHtml(marked.parse(clean));
+}
+
+export function FileReader({ path, title, onClose }) {
+  const [content, setContent] = useState({ html: null, loading: true, error: null });
+
+  useEffect(() => {
+    if (!path) return;
+    let cancelled = false;
+    setContent({ html: null, loading: true, error: null });
+    fetch('/api/file?path=' + encodeURIComponent(path))
+      .then(async resp => {
+        if (cancelled) return;
+        if (!resp.ok) {
+          const msg = resp.status === 404
+            ? 'File not found: ' + path
+            : 'Failed to load file (HTTP ' + resp.status + ').';
+          setContent({ html: null, loading: false, error: msg });
+          return;
+        }
+        const text = await resp.text();
+        if (!cancelled) setContent({ html: renderMd(text), loading: false, error: null });
+      })
+      .catch(() => {
+        if (!cancelled) setContent({ html: null, loading: false, error: 'Network error.' });
+      });
+    return () => { cancelled = true; };
+  }, [path]);
+
+  useEffect(() => {
+    function onKey(e) {
+      if (e.key === 'Escape' && onClose) onClose();
+    }
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  const copyPath = useCallback(() => {
+    navigator.clipboard.writeText(path).then(() => {
+      showToast('Path copied!');
+    }).catch(() => {});
+  }, [path]);
+
+  if (!path) return null;
+  const name = title || path.split('/').pop();
+
+  return html`
+    <div class="reader-backdrop" onClick=${onClose}></div>
+    <div class="reader-panel" role="dialog" aria-label=${name}>
+      <div class="reader-header">
+        <div class="reader-heading">
+          <div class="reader-title">${name}</div>
+          <div class="reader-path">${path}</div>
+        </div>
+        <div class="reader-actions">
+          <button class="reader-copy" onClick=${copyPath}>Copy path</button>
+          <button class="reader-close" aria-label="Close reader" onClick=${onClose}>×</button>
+        </div>
+      </div>
+      <div class="reader-body">
+        ${content.loading && html`
+          <div class="skeleton reader-skel-line"></div>
+          <div class="skeleton reader-skel-block"></div>
+        `}
+        ${content.error && html`<div class="reader-error">${content.error}</div>`}
+        ${!content.loading && !content.error && content.html != null && html`
+          <div class="md-render" dangerouslySetInnerHTML=${{ __html: content.html }} />
+        `}
+      </div>
+    </div>
+  `;
+}

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

@@ -0,0 +1,94 @@
+/**
+ * FilterChips — interactive filter chip component.
+ *
+ * Renders three groups of toggle chips (status / milestone / date).
+ * Clicking a chip writes the updated filter set into location.hash via
+ * applyFilters() from filter-state.js. The App.js hashchange listener then
+ * re-renders the active view with the new filters prop.
+ *
+ * Props:
+ *   filters        — route filter object { status, milestone, date }
+ *   statusOptions  — Array<{ value, label }>
+ *   milestoneOptions — Array<{ value, label }>
+ *   dateOptions    — Array<{ value, label }>
+ */
+
+import { html } from '../preact.js';
+import { applyFilters } from '../filter-state.js';
+
+/** @returns {string} — current view path segment from location.hash */
+function viewPath() {
+  return location.hash.slice(1).split('?')[0] || 'overview';
+}
+
+/**
+ * A single group of chips for one filter dimension.
+ *
+ * @param {{ label: string, dimension: string, options: Array<{value,label}>, active: string, filters: object }} props
+ */
+function ChipGroup({ dimension, options, active, filters }) {
+  if (!options || options.length === 0) return null;
+
+  function handleClick(value) {
+    const next = Object.assign({}, filters, {
+      [dimension]: active === value ? '' : value,
+    });
+    location.hash = applyFilters(viewPath(), next);
+  }
+
+  return html`
+    <div class="filter-chip-group">
+      ${options.map(opt => {
+        const isActive = opt.value === active;
+        return html`
+          <button
+            key=${opt.value}
+            class=${'filter-chip' + (isActive ? ' active' : '')}
+            onClick=${() => handleClick(opt.value)}
+          >${opt.label}</button>
+        `;
+      })}
+    </div>
+  `;
+}
+
+/**
+ * FilterChips — interactive filter chip row with a clear button.
+ */
+export function FilterChips({ filters, statusOptions, milestoneOptions, dateOptions }) {
+  const f = filters || { status: '', milestone: '', date: '' };
+
+  const hasActive = f.status !== '' || f.milestone !== '' || f.date !== '';
+
+  function handleClear() {
+    location.hash = applyFilters(viewPath(), { status: '', milestone: '', date: '' });
+  }
+
+  return html`
+    <div class="filter-chips">
+      <${ChipGroup}
+        dimension="status"
+        options=${statusOptions}
+        active=${f.status}
+        filters=${f}
+      />
+      <${ChipGroup}
+        dimension="milestone"
+        options=${milestoneOptions}
+        active=${f.milestone}
+        filters=${f}
+      />
+      <${ChipGroup}
+        dimension="date"
+        options=${dateOptions}
+        active=${f.date}
+        filters=${f}
+      />
+      <button
+        class="filter-chip-clear"
+        disabled=${!hasActive}
+        onClick=${hasActive ? handleClear : undefined}
+      >Clear</button>
+    </div>
+  `;
+}

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

@@ -0,0 +1,117 @@
+/**
+ * NotifyCenter — blocked-session notification UI.
+ *
+ * Two components, both driven by store state written by notify.js:
+ *
+ *   BlockedToasts — persistent corner toasts, one per blocked-session alert
+ *     (store.blockedAlerts). Clicking a toast opens that session's terminal
+ *     panel; the ✕ dismisses without opening. Mounted once in App.js.
+ *
+ *   BlockedBell — topbar bell with a count of currently-blocked sessions and
+ *     a dropdown listing them (click an entry → open its terminal). Mounted
+ *     in Topbar.js. Renders nothing special when no session is blocked.
+ *
+ * No inline style= — all styling via .nb-* classes in css.js.
+ */
+
+import { html, useState, useEffect, useRef } from '../preact.js';
+import { useStore } from '../store.js';
+import { openTermPanel } from '../orchestrator.js';
+import { dismissBlockedAlert } from '../notify.js';
+import { Icon } from '../icons-client.js';
+
+// ── Persistent blocked toasts ─────────────────────────────────────────────────
+
+export function BlockedToasts() {
+  const blockedAlerts = useStore(s => s.blockedAlerts);
+  const alerts = blockedAlerts || [];
+  if (alerts.length === 0) return null;
+
+  function open(storyId) {
+    dismissBlockedAlert(storyId);
+    openTermPanel(storyId, storyId);
+  }
+
+  return html`
+    <div class="nb-toasts" role="status" aria-live="polite">
+      ${alerts.map(a => html`
+        <div key=${a.storyId} class="nb-toast"
+          role="button" tabindex="0"
+          title=${'Open terminal for ' + a.storyId}
+          onClick=${() => open(a.storyId)}
+          onKeyDown=${e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(a.storyId); } }}>
+          <span class="nb-toast-dot" aria-hidden="true"></span>
+          <span class="nb-toast-text">
+            Agent waiting for input — ${a.storyId}
+            ${a.cmd ? html`<span class="nb-toast-cmd">${a.cmd}</span>` : null}
+          </span>
+          <button class="nb-toast-dismiss" aria-label="Dismiss"
+            onClick=${e => { e.stopPropagation(); dismissBlockedAlert(a.storyId); }}>
+            <${Icon} name="x" size=${12}/>
+          </button>
+        </div>
+      `)}
+    </div>
+  `;
+}
+
+// ── Topbar bell ───────────────────────────────────────────────────────────────
+
+export function BlockedBell() {
+  const activeSessions = useStore(s => s.activeSessions);
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef(null);
+  const blocked = (activeSessions || []).filter(s => s.status === 'blocked');
+
+  // Close the dropdown on any outside click.
+  useEffect(() => {
+    if (!open) return;
+    function onDocClick(e) {
+      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
+    }
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  }, [open]);
+
+  // Nothing blocked → drop a stale open dropdown.
+  useEffect(() => {
+    if (blocked.length === 0 && open) setOpen(false);
+  }, [blocked.length]);
+
+  function openSession(storyId) {
+    setOpen(false);
+    dismissBlockedAlert(storyId);
+    openTermPanel(storyId, storyId);
+  }
+
+  return html`
+    <div class="nb-bell-wrap" ref=${rootRef}>
+      <button
+        class=${'tb-btn tb-btn--icon nb-bell' + (blocked.length ? ' nb-bell--alert' : '')}
+        type="button"
+        title=${blocked.length
+          ? blocked.length + ' session' + (blocked.length === 1 ? '' : 's') + ' waiting for input'
+          : 'No sessions waiting for input'}
+        aria-label="Blocked session notifications"
+        aria-expanded=${open}
+        onClick=${() => { if (blocked.length) setOpen(o => !o); }}>
+        <${Icon} name="bell" size=${15}/>
+        ${blocked.length ? html`<span class="nb-bell-count">${blocked.length}</span>` : null}
+      </button>
+      ${open && blocked.length ? html`
+        <div class="nb-bell-dropdown" role="menu">
+          <div class="nb-bell-title">Waiting for input</div>
+          ${blocked.map(s => html`
+            <button key=${s.storyId} class="nb-bell-item" role="menuitem"
+              title=${'Open terminal for ' + s.storyId}
+              onClick=${() => openSession(s.storyId)}>
+              <span class="term-status-dot blocked" aria-hidden="true"></span>
+              <span class="nb-bell-item-id">${s.storyId}</span>
+              <span class="nb-bell-item-cmd">${s.cmd || ''}</span>
+            </button>
+          `)}
+        </div>
+      ` : null}
+    </div>
+  `;
+}

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

@@ -15,7 +15,7 @@
 
 import { html, useState, useEffect, useRef, useCallback } from '../preact.js';
 import { useStore, setState } from '../store.js';
-import { orchToken, stopSession, cleanSessions, ORCH_HTTP } from '../orchestrator.js';
+import { orchToken, stopSession, cleanSessions, ORCH_WS } from '../orchestrator.js';
 import { showToast } from './shared.js';
 import { Icon } from '../icons-client.js';
 
@@ -25,7 +25,23 @@ function mkSession(title) {
   return { title: title || 'Session', lines: [], fileOps: [], status: 'starting' };
 }
 
-// ── SSE streams (module-scoped — one EventSource per storyId) ────────────────
+/**
+ * Strip ANSI escape sequences (OSC, CSI, other ESC) and carriage returns so
+ * raw PTY output renders as readable plain-text log lines. The full-fidelity
+ * terminal lives in XtermPanel; this panel is a lightweight log view.
+ */
+function stripAnsi(s) {
+  return String(s)
+    .replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g, '')
+    .replace(/\x1b\[[0-9;?]*[ -\/]*[@-~]/g, '')
+    .replace(/\x1b[@-_]/g, '')
+    .replace(/\r/g, '');
+}
+
+// ── Live streams (module-scoped — one WebSocket per storyId) ─────────────────
+// The orchestrator's data plane is the PTY WebSocket at /ws/<storyId>
+// (wire frames: {t:'o',d} output, {t:'hist',d} scrollback, {t:'s',s} status).
+// The previous SSE endpoint (/api/stream/<id>) no longer exists on the server.
 const _streams = {};
 
 function closeStream(storyId) {
@@ -35,9 +51,11 @@ function closeStream(storyId) {
 // ── Component ─────────────────────────────────────────────────────────────────
 
 export function OrchPanel() {
-  const { orchPanel } = useStore();
+  const { orchPanel, activeSessions } = useStore();
   const open     = !!(orchPanel && orchPanel.open);
   const reqStory = orchPanel && orchPanel.storyId;
+  // Sessions reported by the orchestrator API (4s poll → store.activeSessions).
+  const apiSessions = activeSessions || [];
 
   // sessionsMap: { [storyId]: { title, lines, fileOps, status } }
   const [sessionsMap, setSessionsMap] = useState({});
@@ -72,11 +90,15 @@ export function OrchPanel() {
 
   function connectStream(storyId) {
     const tok = orchToken();
-    const es = new EventSource(
-      ORCH_HTTP + '/api/stream/' + encodeURIComponent(storyId) +
-      '?token=' + encodeURIComponent(tok || '')
+    if (!tok) {
+      showToast('No orchestrator token — restart the dashboard');
+      return;
+    }
+    const ws = new WebSocket(
+      ORCH_WS + '/ws/' + encodeURIComponent(storyId) +
+      '?token=' + encodeURIComponent(tok)
     );
-    _streams[storyId] = es;
+    _streams[storyId] = ws;
 
     function appendLine(storyId, line, cls) {
       setSessionsMap(prev => {
@@ -89,32 +111,24 @@ export function OrchPanel() {
       });
     }
 
+    // Append a multi-line output chunk: the first segment continues the last
+    // streamed line, each newline starts a fresh line element.
     function appendChunk(storyId, chunk) {
       setSessionsMap(prev => {
         const sess = prev[storyId];
         if (!sess) return prev;
-        const lines = sess.lines;
+        const parts = chunk.split('\n');
+        const lines = [...sess.lines];
         const last = lines[lines.length - 1];
         if (last && last.cls === 'kt-stream') {
-          const updated = [...lines];
-          updated[updated.length - 1] = { ...last, text: last.text + chunk };
-          return { ...prev, [storyId]: { ...sess, lines: updated } };
+          lines[lines.length - 1] = { ...last, text: last.text + parts[0] };
+        } else if (parts[0]) {
+          lines.push({ text: parts[0], cls: 'kt-stream' });
         }
-        return {
-          ...prev,
-          [storyId]: { ...sess, lines: [...lines, { text: chunk, cls: 'kt-stream' }] },
-        };
-      });
-    }
-
-    function appendFileOp(storyId, fileOp) {
-      setSessionsMap(prev => {
-        const sess = prev[storyId];
-        if (!sess) return prev;
-        return {
-          ...prev,
-          [storyId]: { ...sess, fileOps: [...sess.fileOps, fileOp] },
-        };
+        for (let i = 1; i < parts.length; i++) {
+          lines.push({ text: parts[i], cls: 'kt-stream' });
+        }
+        return { ...prev, [storyId]: { ...sess, lines } };
       });
     }
 
@@ -126,41 +140,39 @@ export function OrchPanel() {
       });
     }
 
-    es.onmessage = e => {
-      try {
-        const d = JSON.parse(e.data);
-        if (d.chunk)  appendChunk(storyId, d.chunk);
-        if (d.line)   {
-          let cls = 'kt-line';
-          const l = d.line;
-          if (l.startsWith('⚙'))  cls += ' tool';
-          else if (l.startsWith('⚠')) cls += ' warn';
-          else if (l.startsWith('✗')) cls += ' err';
-          else if (l.startsWith('✅')) cls += ' done-line';
-          else if (l.startsWith('▶') || l.startsWith('◉') || l.startsWith('■')) cls += ' meta';
-          appendLine(storyId, l, cls);
-        }
-        if (d.fileOp) appendFileOp(storyId, d.fileOp);
-        if (d.status) {
-          setTabStatus(storyId, d.status);
-          if (d.status === 'done')    appendLine(storyId, '✅ Done', 'kt-line done-line');
-          if (d.status === 'stopped') appendLine(storyId, '■ Stopped', 'kt-line meta');
-          if (d.status !== 'running') { closeStream(storyId); }
-        }
-      } catch { /* ignore parse errors */ }
+    ws.onmessage = e => {
+      let d;
+      try { d = JSON.parse(e.data); } catch { return; }
+      if (!d) return;
+      if (d.t === 'o' || d.t === 'hist') {
+        const text = stripAnsi(d.d);
+        if (text) appendChunk(storyId, text);
+      } else if (d.t === 's') {
+        setTabStatus(storyId, d.s);
+        if (d.s === 'done')    appendLine(storyId, '✅ Done', 'kt-line done-line');
+        if (d.s === 'stopped') appendLine(storyId, '■ Stopped', 'kt-line meta');
+        if (d.s !== 'running' && d.s !== 'starting') closeStream(storyId);
+      }
     };
-    es.onerror = () => {
+    ws.onerror = () => {
       setTabStatus(storyId, 'error');
       closeStream(storyId);
     };
+    ws.onclose = () => {
+      if (_streams[storyId] === ws) delete _streams[storyId];
+    };
   }
 
   const handleClose = useCallback(() => {
     setState({ orchPanel: null });
   }, []);
 
+  // Open (or focus) a session tab and attach its live stream. Used both for
+  // locally-opened tabs and for sessions discovered via the orchestrator API.
   function handleTabClick(storyId) {
+    setSessionsMap(prev => prev[storyId] ? prev : { ...prev, [storyId]: mkSession(storyId) });
     setActiveTab(storyId);
+    if (!_streams[storyId]) connectStream(storyId);
   }
 
   function handleTabClose(e, storyId) {
@@ -197,9 +209,14 @@ export function OrchPanel() {
   }
 
   const tabs = Object.keys(sessionsMap);
+  // Sessions the orchestrator knows about that aren't open as tabs yet —
+  // rendered as clickable entries so the panel reflects the API, not just
+  // locally-opened tabs.
+  const apiOnly = apiSessions.filter(s => s.storyId && !sessionsMap[s.storyId]);
   const activeSess = activeTab ? sessionsMap[activeTab] : null;
   const hasStream = activeTab && !!_streams[activeTab];
-  const runningCount = Object.keys(_streams).length;
+  // 'blocked' = live PTY waiting for input — still a live session.
+  const runningCount = apiSessions.filter(s => s.status === 'running' || s.status === 'blocked').length;
 
   const panelCls = 'orch-panel' + (open ? ' open' : '');
 
@@ -213,9 +230,9 @@ export function OrchPanel() {
         <button class="orch-panel-close" onClick=${handleClose} title="Close" aria-label="Close panel"><${Icon} name="x" size=${14}/></button>
       </div>
 
-      <!-- Tab strip -->
+      <!-- Tab strip — open tabs first, then API-known sessions not yet opened -->
       <div class="orch-tabs">
-        ${tabs.length === 0 ? html`
+        ${tabs.length === 0 && apiOnly.length === 0 ? html`
           <div class="orch-term-empty orch-empty-tab">
             No active sessions
           </div>
@@ -239,6 +256,17 @@ export function OrchPanel() {
             </button>
           `;
         })}
+        ${apiOnly.map(s => html`
+          <button
+            key=${s.storyId}
+            class="orch-tab"
+            onClick=${() => handleTabClick(s.storyId)}
+            title=${'Attach to ' + s.storyId}
+          >
+            <span class=${'tab-status-dot ' + (s.status || 'starting')}></span>
+            <span>${s.storyId.slice(0, 20)}</span>
+          </button>
+        `)}
       </div>
 
       <!-- Terminal body -->