synabun 2.0.9 → 2.1.0

package/neural-interface/public/shared/app-frame.js

@@ -0,0 +1,192 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — App frame
+// The inset rounded card the workspace sits in (styles.css "APP FRAME"). Outside it is the chrome: the title bar,
+// the two explorers and a gutter of their tone. Inside it is everything else: the 3D and 2D graphs, every floating
+// window and panel, the terminal, menus, tooltips and popovers. Modals and full-window backdrops still cover the
+// whole window.
+//
+// One source of geometry: the CSS variables of :root (--navbar-height, --explorer-width, --file-explorer-width and
+// --frame-gap, which is 0 on a page without the frame). frameRect() is the rect every clamp uses instead of 0,
+// innerWidth, innerHeight or --navbar-height. The top half of this file is DOM-free (unit-tested).
+// ═══════════════════════════════════════════
+
+/** The class on <html> of a page that draws the frame (html-shell.js). */
+export const FRAMED_CLASS = 'app-framed';
+
+const num = (value) => {
+  const n = Number.parseFloat(value);
+  return Number.isFinite(n) ? n : 0;
+};
+
+/**
+ * The frame's rect in viewport pixels from the window's size and the chrome around it: the navbar's height, the
+ * open explorers' width and the gutter. A frame the window is too small for collapses to a zero-size rect at its
+ * top-left corner instead of turning inside out.
+ */
+export function computeFrameRect({ viewportWidth = 0, viewportHeight = 0, navbarHeight = 0, sidebarWidth = 0, gap = 0 } = {}) {
+  const g = Math.max(0, num(gap));
+  const left = Math.max(0, num(sidebarWidth)) + g;
+  const top = Math.max(0, num(navbarHeight)) + g;
+  const right = Math.max(left, num(viewportWidth) - g);
+  const bottom = Math.max(top, num(viewportHeight) - g);
+  return { left, top, right, bottom, width: right - left, height: bottom - top, gap: g };
+}
+
+/** The area a menu, tooltip or popover for a point is kept in: `frame` when the point is inside it, else null (the
+ *  window: the bar and the explorers are outside the frame, and what opens from them stays by them). */
+export function boundsForPoint(frame, x, y) {
+  if (!frame || !Number.isFinite(x) || !Number.isFinite(y)) return null;
+  return x >= frame.left && x <= frame.right && y >= frame.top && y <= frame.bottom ? frame : null;
+}
+
+/** A rect `margin` pixels inside another (never inverted). */
+export function insetRect(rect, margin = 0) {
+  const m = Math.max(0, num(margin));
+  const left = rect.left + m, top = rect.top + m;
+  const right = Math.max(left, rect.right - m), bottom = Math.max(top, rect.bottom - m);
+  return { ...rect, left, top, right, bottom, width: right - left, height: bottom - top };
+}
+
+/**
+ * Where a box of `width` × `height` at (x, y) goes to stay inside `bounds`. A box larger than the bounds keeps its
+ * top-left corner inside them (its header stays reachable), the same rule the old window clamps followed.
+ */
+export function clampBox(x, y, width, height, bounds) {
+  return {
+    x: Math.max(bounds.left, Math.min(num(x), bounds.right - Math.max(0, num(width)))),
+    y: Math.max(bounds.top, Math.min(num(y), bounds.bottom - Math.max(0, num(height)))),
+  };
+}
+
+/**
+ * Where a box goes that must keep only `keep` pixels on screen (the floating terminals): its left edge may run
+ * past the frame's left side and its right side past the frame's right, but its top never above the frame's top
+ * (the header stays reachable).
+ */
+export function clampBoxLoose(x, y, width, height, bounds, keep = 80) {
+  const k = Math.max(0, num(keep));
+  return {
+    x: Math.max(bounds.left + k - Math.max(0, num(width)), Math.min(num(x), bounds.right - k)),
+    y: Math.max(bounds.top, Math.min(num(y), bounds.bottom - k)),
+  };
+}
+
+// ── Page side ──
+
+let _cacheKey = '';
+let _cacheRect = null;
+
+const isFramed = (el) => !!el?.classList?.contains?.(FRAMED_CLASS);
+
+function inlineKey(el, win) {
+  const s = el.style;
+  return [
+    isFramed(el) ? 1 : 0,
+    s.getPropertyValue('--navbar-height'),
+    s.getPropertyValue('--explorer-width'),
+    s.getPropertyValue('--file-explorer-width'),
+    s.getPropertyValue('--frame-gap'),
+    win.innerWidth,
+    win.innerHeight,
+  ].join('|');
+}
+
+/**
+ * The frame's rect now, in viewport pixels. Cheap to call per pointer event: the computed style is read only when
+ * the window's size or one of the inline variables it depends on changed since the last call. A page without the
+ * frame (a detached session window, onboarding) has no bar or explorers around its content: the whole window.
+ */
+export function frameRect(win = typeof window !== 'undefined' ? window : null) {
+  const whole = () => computeFrameRect({ viewportWidth: win?.innerWidth || 0, viewportHeight: win?.innerHeight || 0 });
+  const el = win?.document?.documentElement;
+  if (!el || !isFramed(el) || typeof win.getComputedStyle !== 'function') return whole();
+  try {
+    const key = inlineKey(el, win);
+    if (key === _cacheKey && _cacheRect) return _cacheRect;
+    const cs = win.getComputedStyle(el);
+    const navbar = cs.getPropertyValue('--navbar-height');
+    _cacheRect = computeFrameRect({
+      viewportWidth: win.innerWidth,
+      viewportHeight: win.innerHeight,
+      navbarHeight: navbar.trim() ? num(navbar) : 48,
+      sidebarWidth: num(cs.getPropertyValue('--explorer-width')) + num(cs.getPropertyValue('--file-explorer-width')),
+      gap: num(cs.getPropertyValue('--frame-gap')),
+    });
+    _cacheKey = key;
+    return _cacheRect;
+  } catch {
+    return whole();
+  }
+}
+
+/** Keep a box inside the frame (inset by `margin`): `{ x, y }` for its top-left corner. */
+export function clampToFrame(x, y, width, height, margin = 0) {
+  return clampBox(x, y, width, height, insetRect(frameRect(), margin));
+}
+
+/** The area a window of `width` × `height` is kept in: the frame when it fits there, else the whole window less
+ *  8px (a modal taller than the frame still shows whole, as it did before the frame). */
+export function windowArea(width, height, rect = frameRect()) {
+  if (width <= rect.width && height <= rect.height) return rect;
+  const vw = typeof window !== 'undefined' ? window.innerWidth : rect.right;
+  const vh = typeof window !== 'undefined' ? window.innerHeight : rect.bottom;
+  return insetRect(computeFrameRect({ viewportWidth: vw, viewportHeight: vh }), 8);
+}
+
+/** Where a window of `width` × `height` opens by default: centred in the frame, inside it (windowArea). */
+export function centeredInFrame(width, height, rect = frameRect()) {
+  const area = windowArea(width, height, rect);
+  const at = clampBox(area.left + (area.width - width) / 2, area.top + (area.height - height) / 2, width, height, area);
+  return { left: Math.round(at.x), top: Math.round(at.y) };
+}
+
+/** The area kept for something opened at a point: the frame when the point is in it, else the whole window. */
+export function placementArea(x, y) {
+  const f = frameRect();
+  return boundsForPoint(f, x, y) || computeFrameRect({ viewportWidth: window.innerWidth, viewportHeight: window.innerHeight });
+}
+
+const _listeners = new Set();
+let _watching = false;
+let _lastNotified = '';
+let _notifyRaf = 0;
+
+function notify() {
+  _notifyRaf = 0;
+  const rect = frameRect();
+  const key = `${rect.left}|${rect.top}|${rect.right}|${rect.bottom}`;
+  if (key === _lastNotified) return;
+  _lastNotified = key;
+  for (const fn of [..._listeners]) {
+    try { fn(rect); } catch (err) { console.error('[app-frame] listener failed', err); }
+  }
+}
+
+function schedule() {
+  if (_notifyRaf) return;
+  _notifyRaf = typeof requestAnimationFrame === 'function' ? requestAnimationFrame(notify) : setTimeout(notify, 16);
+}
+
+function watch() {
+  if (_watching || typeof window === 'undefined' || !window.document?.documentElement) return;
+  _watching = true;
+  const r = frameRect();
+  _lastNotified = `${r.left}|${r.top}|${r.right}|${r.bottom}`;
+  window.addEventListener?.('resize', schedule);
+  // An explorer opening or closing, the navbar's measured height and the frame's own class all land on <html>'s
+  // inline style or class list. Writes the frame does not depend on (--terminal-height, --right-panel-width…) are
+  // filtered out by the rect comparison in notify().
+  if (typeof MutationObserver === 'function') {
+    new MutationObserver(schedule).observe(window.document.documentElement, { attributes: true, attributeFilter: ['style', 'class'] });
+  }
+}
+
+/**
+ * Call `fn(rect)` once per frame in which the frame's rect changed (window resize, an explorer opening or closing,
+ * the navbar's height). Returns the unsubscribe function.
+ */
+export function onFrameChange(fn) {
+  _listeners.add(fn);
+  watch();
+  return () => _listeners.delete(fn);
+}

package/neural-interface/public/shared/assistant/asst-agents-dock.js

@@ -11,16 +11,33 @@
 // mount, then sync:sidepanel:run-* and sync:assistant:* bus events. A run
 // removed here (or in another window: sync:assistant:run-removed) never comes
 // back from a late event.
+// The head is always on screen while there are runs: beside the summary, one
+// mini scene per working agent (asst-scenes.js; up to three, then "+N"), all
+// moving at once. Open, each working agent's row has a lane: its mini scene
+// and current step. A mini scene or a lane brings that run's card into view
+// in the transcript (hooks.onReveal). hooks.onRunChange hears every change
+// to a run, whatever its source, so the transcript's card follows the tray.
+// "Stop all" asks twice (asst-stop.js createConfirmGate): the first press
+// turns it into "Stop N agents?", a second press within a few seconds stops
+// every run of the session at once. It sits right under the transcript's
+// last card, so one stray click or key there must not end the session's work.
 
 import { on } from '../state.js';
 import { getProviderMeta } from '../provider-icons.js';
 import { listAssistantRuns } from './asst-api.js';
 import { buildRunCard, tickRunCard, updateRunCard } from './asst-render.js';
+import { awaitsAnswer, compactActivity, isLivePhase, phaseLine, sceneFor, sceneSvg, stageLabel, stagePhase, stepLine } from './asst-scenes.js';
+import { injectSceneStyles } from './asst-scene-styles.js';
+import { plural } from './asst-tool-kinds.js';
 import { isRemovableRun, isRunIdle, isTerminalRunStatus, mergeRunDescriptor, runFromPayload, runNeedsAttention, sortRuns } from './asst-state.js';
+import { createConfirmGate } from './asst-stop.js';
 
 const TICK_MS = 5000;
 const SHOW_ALL_LIMIT = 40;
 const RECENT_WINDOW_MS = 6 * 60 * 60 * 1000;
+const MINI_LIMIT = 3; // mini scenes in the head, then "+N"
+const SCENE_DWELL_MS = 2500; // a scene the activity picked stays at least this long
+const WORKING_PHASES = new Set(['queued', 'starting', 'working']); // live and not waiting on you (asst-scenes.js stagePhase)
 
 function el(tag, className, text) {
   const node = document.createElement(tag);
@@ -35,12 +52,14 @@ function esc(value) {
 
 /**
  * createAgentsDock(hostEl, hooks)
- * hooks: { t, sessionId, onFocus(runId), onStop(runId), onRead(runId), onEscalate(runId, target), onStopAll(),
- *          onRemove(runId), onClearFinished(runIds),
+ * hooks: { t, sessionId, onFocus(runId), onStop(runId), onRead(runId), onEscalate(runId, target),
+ *          onStopAll() (the second press of "Stop all"; stopAllConfirmMs / stopAllMinGapMs time it),
+ *          onRemove(runId), onClearFinished(runIds), onReveal(runId), onRunChange(run),
  *          open, showAll, onToggle(open), onShowAllChange(showAll),
- *          onCountChange({ total, active, attention, visible }) }
+ *          onCountChange({ total, active, attention, answer, idle, working, waiting, visible }) }
  */
 export function createAgentsDock(hostEl, hooks = {}) {
+  injectSceneStyles();
   const t = (key, fallback, params) => {
     const v = typeof hooks.t === 'function' ? hooks.t(key, params) : undefined;
     if (v && v !== key && typeof v === 'string') return v;
@@ -53,6 +72,7 @@ export function createAgentsDock(hostEl, hooks = {}) {
   root.innerHTML = `
     <div class="asst-dock-head">
       <button type="button" class="asst-dock-toggle" aria-expanded="false" aria-controls="${bodyId}"><span class="asst-dock-chev" aria-hidden="true">&#x203A;</span><span class="asst-dock-title">${esc(t('assistant.dock.title', 'Agents'))}</span><span class="asst-dock-summary"></span></button>
+      <div class="asst-dock-minis" role="group" aria-label="${esc(t('assistant.dock.working', 'Agents at work'))}"></div>
       <span class="asst-dock-spacer"></span>
       <button type="button" class="asst-tb-btn asst-dock-showall" aria-pressed="false" hidden>${esc(t('assistant.dock.showAll', 'Show all'))}</button>
       <button type="button" class="asst-tb-btn asst-dock-clear" hidden>${esc(t('assistant.dock.clearFinished', 'Clear finished'))}</button>
@@ -64,14 +84,32 @@ export function createAgentsDock(hostEl, hooks = {}) {
 
   const toggle = root.querySelector('.asst-dock-toggle');
   const summaryEl = root.querySelector('.asst-dock-summary');
+  const minisEl = root.querySelector('.asst-dock-minis');
   const showAllBtn = root.querySelector('.asst-dock-showall');
   const stopAllBtn = root.querySelector('.asst-dock-stopall');
   const clearBtn = root.querySelector('.asst-dock-clear');
   const body = root.querySelector('.asst-dock-body');
+  // Armed, "Stop all" says what it would stop and waits for the second press (then lapses by itself).
+  const stopAllGate = createConfirmGate({ windowMs: hooks.stopAllConfirmMs, minGapMs: hooks.stopAllMinGapMs, onChange: () => paintStopAll() });
+  function paintStopAll(active = counts().active) {
+    const armed = stopAllGate.isArmed();
+    const label = armed
+      ? plural(t, 'assistant.dock.stopAllConfirm', active, 'Stop {count} agent?', 'Stop {count} agents?')
+      : t('assistant.dock.stopAll', 'Stop all');
+    const tip = armed
+      ? t('assistant.dock.stopAllConfirmTip', 'Press again to stop every agent of this session')
+      : t('assistant.dock.stopAllTip', 'Stop every agent of this session (asks once more)');
+    if (stopAllBtn.textContent !== label) stopAllBtn.textContent = label;
+    stopAllBtn.dataset.armed = armed ? 'true' : 'false';
+    stopAllBtn.setAttribute('data-tooltip', tip);
+  }
 
   const runs = new Map();   // runId → descriptor
   const cards = new Map();  // runId → element
   const removed = new Set(); // runIds the user removed: late events never revive them
+  const activities = new Map(); // runId → what its worker does now, compact ({ kind, name, step, at }), while the run lasts
+  const minis = new Map(); // runId → its mini scene in the head
+  let moreBtn = null;
   let open = hooks.open === true;
   let showAll = hooks.showAll === true;
   let ticker = null;
@@ -96,20 +134,31 @@ export function createAgentsDock(hostEl, hooks = {}) {
     return {
       total: list.length,
       active: list.filter(r => !isTerminalRunStatus(r.status)).length,
-      attention: list.filter(runNeedsAttention).length,
-      idle: list.filter(isRunIdle).length,
+      // Waiting on you, whatever for (a permission, a route card, your answer); `answer` is the part that
+      // needs your answer, as its lane says (asst-scenes.js awaitsAnswer: a turn that ended asking, a question
+      // mid-turn), and a warm worker that asked is never counted idle.
+      attention: list.filter(r => runNeedsAttention(r) || awaitsAnswer(r)).length,
+      answer: list.filter(awaitsAnswer).length,
+      idle: list.filter(r => isRunIdle(r) && !awaitsAnswer(r)).length,
       finished: list.length - list.filter(r => !isTerminalRunStatus(r.status)).length,
+      // The session's status reads these (asst-state.js sessionStatus): agents at work (queued for a free slot,
+      // starting, in a turn) keep it working after its own turn ended; agents waiting on you make it need you.
+      working: list.filter(r => WORKING_PHASES.has(stagePhase(r))).length,
+      waiting: list.filter(r => stagePhase(r) === 'waiting').length,
       visible: list.length > 0,
     };
   }
 
+  /** "2 running · 1 idle · 1 needs approval": each count in its own plural form (`key.one` / `key.other`, asst-tool-kinds.js plural). */
   function summaryText(c) {
     const bits = [];
     const running = c.active - c.attention - c.idle;
-    if (running > 0) bits.push(t('assistant.dock.running', '{n} running', { n: running }));
-    if (c.idle > 0) bits.push(t('assistant.dock.idle', '{n} idle', { n: c.idle }));
-    if (c.attention > 0) bits.push(t('assistant.dock.needsApproval', '{n} needs approval', { n: c.attention }));
-    if (!bits.length && c.total) bits.push(t('assistant.dock.done', '{n} finished', { n: c.total }));
+    if (running > 0) bits.push(plural(t, 'assistant.dock.running', running, '{count} running', '{count} running'));
+    if (c.idle > 0) bits.push(plural(t, 'assistant.dock.idle', c.idle, '{count} idle', '{count} idle'));
+    const approval = c.attention - (c.answer || 0);
+    if (approval > 0) bits.push(plural(t, 'assistant.dock.needsApproval', approval, '{count} needs approval', '{count} need approval'));
+    if (c.answer > 0) bits.push(plural(t, 'assistant.dock.needsAnswer', c.answer, '{count} waiting for your answer', '{count} waiting for your answer'));
+    if (!bits.length && c.total) bits.push(plural(t, 'assistant.dock.done', c.total, '{count} finished', '{count} finished'));
     return bits.join(' · ');
   }
 
@@ -131,24 +180,29 @@ export function createAgentsDock(hostEl, hooks = {}) {
     if (destroyed) return;
     const list = visibleRuns();
     const seen = new Set();
-    const frag = document.createDocumentFragment();
+    // Reconciled in place: a row that keeps its place keeps its node (and its mini scene keeps moving).
+    let at = 0;
     for (const run of list) {
       seen.add(run.runId);
       let card = cards.get(run.runId);
       if (!card) { card = buildRunCard(run, cardOpts()); cards.set(run.runId, card); }
       else updateRunCard(card, run, cardOpts());
       card.setAttribute('role', 'listitem');
-      frag.appendChild(card);
+      syncLane(card, run);
+      if (body.children[at] !== card) body.insertBefore(card, body.children[at] || null);
+      at += 1;
     }
     for (const [runId, card] of cards) { if (!seen.has(runId)) { card.remove(); cards.delete(runId); } }
-    body.innerHTML = '';
-    body.appendChild(frag);
+    while (body.children.length > at) body.lastElementChild.remove();
+    renderMinis();
 
     const c = counts();
     root.hidden = c.total === 0;
     summaryEl.textContent = summaryText(c);
     root.classList.toggle('attention', c.attention > 0);
     stopAllBtn.hidden = c.active === 0;
+    if (stopAllBtn.hidden) stopAllGate.reset();
+    paintStopAll(c.active);
     clearBtn.hidden = !open || typeof hooks.onClearFinished !== 'function' || ![...runs.values()].some(isRemovableRun);
     showAllBtn.hidden = !open;
     showAllBtn.setAttribute('aria-pressed', showAll ? 'true' : 'false');
@@ -159,18 +213,126 @@ export function createAgentsDock(hostEl, hooks = {}) {
     syncTicker();
   }
 
+  // ── Working agents at a glance: mini scenes in the head, a lane per open row ──
+  const workingRuns = () => sortRuns([...runs.values()]).filter(r => isLivePhase(stagePhase(r)));
+
+  /** "Coding · Settings: App controls section · 3 min" (the stage's own name). */
+  function labelOf(run, scene, phase) {
+    const from = new Date(run.startedAt || run.createdAt || 0).getTime();
+    return stageLabel({ scene, phase, title: run.title || run.task || run.runId, ms: from ? Date.now() - from : 0, run }, t);
+  }
+
+  /** Draw `scene` into `host` (an SVG of its own), unless the one there was picked under the dwell. */
+  function paintScene(node, host, run, phase) {
+    const now = Date.now();
+    const scene = sceneFor(run, activities.get(run.runId), now);
+    if (node.dataset.scene !== scene && (!node.dataset.scene || node.dataset.scene === 'generic' || now - (node._sceneAt || 0) >= SCENE_DWELL_MS)) {
+      host.innerHTML = sceneSvg(scene, { mini: true });
+      node.dataset.scene = scene;
+      node._sceneAt = now;
+    }
+    node.dataset.phase = phase;
+    host.firstElementChild?.toggleAttribute('data-live', phase !== 'waiting');
+    return node.dataset.scene;
+  }
+
+  function reveal(runId) {
+    if (runId) hooks.onReveal?.(runId);
+  }
+
+  function renderMinis() {
+    const live = workingRuns();
+    const shown = live.slice(0, MINI_LIMIT);
+    const keep = new Set(shown.map(r => r.runId));
+    for (const [runId, node] of minis) if (!keep.has(runId)) { node.remove(); minis.delete(runId); }
+    shown.forEach((run, i) => {
+      let node = minis.get(run.runId);
+      if (!node) {
+        node = el('button', 'asst-dock-mini');
+        node.type = 'button';
+        node.dataset.runId = run.runId;
+        node.addEventListener('click', (e) => { e.stopPropagation(); reveal(node.dataset.runId); });
+        minis.set(run.runId, node);
+      }
+      const phase = stagePhase(run);
+      const scene = paintScene(node, node, run, phase);
+      const label = labelOf(run, scene, phase);
+      node.setAttribute('aria-label', t('assistant.dock.reveal', '{label}. Show it in the conversation', { label }));
+      node.setAttribute('data-tooltip', label);
+      if (minisEl.children[i] !== node) minisEl.insertBefore(node, minisEl.children[i] || null);
+    });
+    const extra = live.length - shown.length;
+    if (extra > 0) {
+      if (!moreBtn) {
+        moreBtn = el('button', 'asst-dock-more');
+        moreBtn.type = 'button';
+        moreBtn.addEventListener('click', (e) => { e.stopPropagation(); setOpen(true); });
+      }
+      moreBtn.textContent = `+${extra}`;
+      const more = extra === 1 ? t('assistant.dock.more.one', '{count} more agent at work: show the list', { count: extra }) : t('assistant.dock.more.other', '{count} more agents at work: show the list', { count: extra });
+      moreBtn.setAttribute('aria-label', more);
+      moreBtn.setAttribute('data-tooltip', more);
+      if (minisEl.lastElementChild !== moreBtn) minisEl.appendChild(moreBtn);
+    } else moreBtn?.remove();
+  }
+
+  /** An open row's lane while its agent works: its mini scene and current step; a click shows its card. */
+  function syncLane(card, run) {
+    let lane = card.querySelector(':scope > .asst-run-lane');
+    const phase = stagePhase(run);
+    if (!isLivePhase(phase)) { lane?.remove(); return; }
+    if (!lane) {
+      lane = el('button', 'asst-run-lane');
+      lane.type = 'button';
+      lane.innerHTML = '<span class="asst-run-lane-scene" aria-hidden="true"></span><span class="asst-run-lane-step"></span>';
+      lane.addEventListener('click', (e) => { e.stopPropagation(); reveal(card.dataset.runId); });
+      const meta = card.querySelector(':scope > .asst-run-meta');
+      if (meta) meta.after(lane); else card.appendChild(lane);
+    }
+    const scene = paintScene(lane, lane.querySelector('.asst-run-lane-scene'), run, phase);
+    const step = phase === 'working' ? (stepLine(activities.get(run.runId), t) || phaseLine(phase, run, scene, t)) : phaseLine(phase, run, scene, t);
+    const stepEl = lane.querySelector('.asst-run-lane-step');
+    if (stepEl.textContent !== step) stepEl.textContent = step;
+    lane.setAttribute('aria-label', t('assistant.dock.reveal', '{label}. Show it in the conversation', { label: labelOf(run, scene, phase) }));
+  }
+
+  /** The worker's provider events say what it does now: its mini scene and lane follow. Kept compact, and only while the run lasts. */
+  function setRunActivity(runId, activity) {
+    if (!runId || !runs.has(runId)) return;
+    const run = runs.get(runId);
+    const next = isTerminalRunStatus(run.status) ? null : compactActivity(activity, t);
+    if (next) activities.set(runId, next); else activities.delete(runId);
+    const card = cards.get(runId);
+    if (card) syncLane(card, run);
+    if (minis.has(runId)) renderMinis();
+  }
+
   function syncTicker() {
-    const needs = open && !root.hidden && [...runs.values()].some(r => !isTerminalRunStatus(r.status));
-    if (needs && !ticker) ticker = setInterval(() => { for (const [runId, card] of cards) tickRunCard(card, runs.get(runId)); }, TICK_MS);
+    // Open: the rows' clocks; collapsed with agents at work: their mini scenes' names (whole minutes) and steps.
+    const needs = !root.hidden && (open || minis.size > 0) && [...runs.values()].some(r => !isTerminalRunStatus(r.status));
+    if (needs && !ticker) {
+      ticker = setInterval(() => {
+        if (open) for (const [runId, card] of cards) { const run = runs.get(runId); tickRunCard(card, run); if (run) syncLane(card, run); }
+        renderMinis();
+      }, TICK_MS);
+    }
     if (!needs && ticker) { clearInterval(ticker); ticker = null; }
   }
 
+  /** Every change to a run, whatever its source, reaches the panel (its transcript card follows). */
+  function changed(run) {
+    if (!run) return;
+    try { hooks.onRunChange?.(run); } catch { /* the panel is gone */ }
+  }
+
   function upsertRun(run) {
     const descriptor = runFromPayload(run) || run;
     if (!belongs(descriptor)) return null;
     const merged = mergeRunDescriptor(runs.get(descriptor.runId), descriptor);
     runs.set(descriptor.runId, merged);
+    if (isTerminalRunStatus(merged.status)) activities.delete(merged.runId); // the run is over: so is what it was doing
     render();
+    changed(merged);
     return merged;
   }
 
@@ -180,6 +342,7 @@ export function createAgentsDock(hostEl, hooks = {}) {
     for (const runId of Array.isArray(runIds) ? runIds : [runIds]) {
       if (!runId) continue;
       removed.add(runId);
+      activities.delete(runId);
       if (runs.delete(runId)) changed = true;
     }
     if (changed) render();
@@ -192,6 +355,7 @@ export function createAgentsDock(hostEl, hooks = {}) {
     const next = { ...current, ...patch, updatedAt: new Date().toISOString() };
     runs.set(runId, next);
     render();
+    changed(next);
     return next;
   }
 
@@ -220,14 +384,23 @@ export function createAgentsDock(hostEl, hooks = {}) {
         listed.add(id);
         return true;
       });
-      for (const run of list) { const d = runFromPayload(run) || run; if (belongs(d)) runs.set(d.runId, mergeRunDescriptor(runs.get(d.runId), d)); }
+      const merged = [];
+      for (const run of list) {
+        const d = runFromPayload(run) || run;
+        if (!belongs(d)) continue;
+        const next = mergeRunDescriptor(runs.get(d.runId), d);
+        runs.set(d.runId, next);
+        if (isTerminalRunStatus(next.status)) activities.delete(d.runId);
+        merged.push(next);
+      }
       // When the terminal page was complete, previously known terminal runs
       // absent from it were removed elsewhere. A run arriving during refresh
       // must never be pruned by this older snapshot.
       if (terminal.length < 100) {
-        for (const runId of knownTerminal) if (!listed.has(runId)) { runs.delete(runId); removed.add(runId); }
+        for (const runId of knownTerminal) if (!listed.has(runId)) { runs.delete(runId); removed.add(runId); activities.delete(runId); }
       }
       render();
+      for (const run of merged) changed(run);
     } catch { /* offline or not built yet */ }
   }
 
@@ -239,7 +412,15 @@ export function createAgentsDock(hostEl, hooks = {}) {
 
   toggle.addEventListener('click', () => setOpen(!open));
   showAllBtn.addEventListener('click', () => { showAll = !showAll; hooks.onShowAllChange?.(showAll); refresh().finally(render); });
-  stopAllBtn.addEventListener('click', () => hooks.onStopAll?.());
+  stopAllBtn.addEventListener('click', () => {
+    if (stopAllBtn.hidden || destroyed) return;
+    if (stopAllGate.press() === 'confirmed') hooks.onStopAll?.();
+  });
+  stopAllBtn.addEventListener('keydown', (e) => {
+    // A held Enter repeats its click: only the first press of a key counts.
+    if (e.repeat && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); return; }
+    if (e.key === 'Escape' && stopAllGate.reset()) { e.preventDefault(); e.stopPropagation(); }
+  });
   clearBtn.addEventListener('click', () => {
     const ids = [...runs.values()].filter(isRemovableRun).map(r => r.runId);
     if (ids.length) hooks.onClearFinished?.(ids);
@@ -269,13 +450,16 @@ export function createAgentsDock(hostEl, hooks = {}) {
   }));
 
   render();
-  refresh();
+  // The first fetch: what a reload knows about this session's runs (the panel restores their cards from it).
+  const ready = Promise.resolve(refresh());
 
   return {
     el: root,
+    ready,
     upsertRun,
     patchRun,
     patchUsageRun,
+    setRunActivity,
     dropRuns,
     getRun: (runId) => runs.get(runId) || null,
     getRuns: () => sortRuns([...runs.values()]),
@@ -289,6 +473,8 @@ export function createAgentsDock(hostEl, hooks = {}) {
     destroy() {
       destroyed = true;
       if (ticker) clearInterval(ticker);
+      stopAllGate.destroy();
+      activities.clear();
       unsubs.forEach(off => { try { off(); } catch { /* ignore */ } });
       root.remove();
     },

package/neural-interface/public/shared/assistant/asst-api.js

@@ -123,9 +123,12 @@ export async function fetchProjects() {
 
 // ── Sessions ─────────────────────────────────
 
-/** `fallback`: a model disabled in Assistant → Models starts on its enabled stand-in (session.fallback says which) instead of a 400. */
-export function createAssistantSession({ brain, label, fallback = false } = {}) {
-  return jsonFetch('/api/assistant/sessions', jsonBody({ brain, label, fallback: fallback === true || undefined }));
+/**
+ * `fallback`: a model disabled in Assistant → Models starts on its enabled stand-in (session.fallback says which) instead of a 400.
+ * `draft`: the server keeps it in memory, out of every list, until its first prompt stores it; closed or left unused, it is gone.
+ */
+export function createAssistantSession({ brain, label, fallback = false, draft = false } = {}) {
+  return jsonFetch('/api/assistant/sessions', jsonBody({ brain, label, fallback: fallback === true || undefined, draft: draft === true || undefined }));
 }
 
 export async function listAssistantSessions() {
@@ -149,6 +152,11 @@ export function closeAssistantSession(id) {
   return jsonFetch(`/api/assistant/sessions/${enc(id)}/close`, jsonBody({}));
 }
 
+/** Remove for good (Sessions menu): its running turn and workers stop, then the record and transcript go → { removed, stoppedRuns }. */
+export function removeAssistantSession(id) {
+  return jsonFetch(`/api/assistant/sessions/${enc(id)}`, { method: 'DELETE' });
+}
+
 // ── Attachments ──────────────────────────────
 
 /**