synabun 2.0.9 → 2.1.0

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

@@ -1,3 +1,4 @@
+import { fetchToolCatalog } from '../agent-runtime-options.js';
 // ═══════════════════════════════════════════
 // SynaBun Assistant — panel (mount / lifecycle)
 // ═══════════════════════════════════════════
@@ -40,6 +41,7 @@ import { getWhiteboardElementById } from '../ui-whiteboard.js';
 import { focusNativeLoopRun } from '../ui-native-loop-router.js';
 import { wireFileLinks } from '../ui-file-links.js';
 import { injectAssistantStyles } from './asst-styles.js';
+import { tipsSeen, tourOffered } from '../tour/tour-state.js';
 import { createAssistantSocket } from './asst-ws.js';
 import { createRenderer, ICON_ASSISTANT, mdInto } from './asst-render.js';
 import { createMascotDirector, MASCOT_TIMING, turnEndPose } from './asst-mascot.js';
@@ -47,19 +49,22 @@ import { lastInputAt, onKey, onPointer } from '../synabun-ticker.js';
 import { buildControlResponse, closedControlState, normalizeControlRequest, renderControlCard } from './asst-control.js';
 import { buildPromptText, createComposer } from './asst-composer.js';
 import { buildDispatchSpec, parseSlashCommand, slashHelpMarkdown } from './asst-slash.js';
+import { resolveStopTarget } from './asst-stop.js';
+import { plural } from './asst-tool-kinds.js';
 import { cachedProjects, createBrainPicker, testDensityLabel } from './asst-brain-picker.js';
 import { createRovingToolbar } from './asst-roving.js';
 import { openAccountsManager } from './asst-accounts.js';
 import { createAgentsDock } from './asst-agents-dock.js';
+import { activityOf } from './asst-scenes.js';
 import { createUsageGauge } from './asst-usage.js';
-import { closeMenu, isMenuOpen, openMenu } from './asst-menu.js';
+import { closeMenu, currentMenuAnchor, isMenuOpen, openMenu } from './asst-menu.js';
 import { createRouteModeControl, openModelsManager, openRoutesEditor, refreshModelsManager, renderRouteCard, routeModeLabel } from './asst-route.js';
 import { budgetChipText, budgetSpendText, budgetTone, closeBudgetEditor, createBudgetController, mountBudgetChip, openBudgetEditor } from './asst-budget.js';
 import { computerRemoteView, createComputerPanel, createComputerToggle, normalizeComputerRemote, openFrameLightbox, closeFrameLightbox, requestDesktopStop } from './asst-computer.js';
 import {
   applyLimit, applyLimitPacket, applyUsagePacket, brainLabel, createRenameWriter, createTabState, DEFAULT_ROUTE_MODE, deserializeTabState, fmtCost, fmtRunLine, limitExpiresIn, limitNoticeText, modelShortName,
   brainModePatch, normalizeBrain, normalizeComputerMode, permissionModeLabel, normalizeRouteMode, normalizeTestDensity, projectLabel, providerShortLabel, readStoredBrain, runFromPayload,
-  serializeTabState, tabStorageKey, userSessionTitle,
+  serializeTabState, sessionStatus, tabStorageKey, userSessionTitle,
 } from './asst-state.js';
 import {
   closeAssistantSession, dispatchAssistantRun, escalateAssistantRun, focusAssistantRun, getAssistantRun,
@@ -74,6 +79,7 @@ const ICON_COG = '<svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v
 const ICON_ROUTE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h13l-3-3M20 17H7l3 3"/></svg>';
 const ICON_COMPUTER = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/></svg>';
 const ICON_CLOSE = '<svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+const ICON_TRASH = '<svg viewBox="0 0 24 24"><path d="M3 6h18M8 6V4.5A1.5 1.5 0 0 1 9.5 3h5A1.5 1.5 0 0 1 16 4.5V6M18.5 6l-.8 13a2 2 0 0 1-2 1.9H8.3a2 2 0 0 1-2-1.9L5.5 6M10 11v6M14 11v6"/></svg>';
 const REPLAY_WAIT_MS = 1500; // a replay that stops short of its count is drawn after this long
 
 function el(tag, className, text) {
@@ -148,7 +154,9 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     usageView: saved?.usageView || null,
   });
   Object.assign(st, {
-    status: 'idle',
+    status: 'idle',                                // the brain's own: its turn, its cards (setStatus)
+    workers: { working: 0, waiting: 0 },           // its dispatched agents, from the agents tray (sessionStatus)
+    shownStatus: 'idle',                           // what the host shows: both together (pushStatus)
     dispatchUsd: 0,
     serverCost: false,
     engine: '',
@@ -165,6 +173,9 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     desktopProbe: false,
     routingProbe: false,
     sessionTitle: String(session?.title || ''),  // the server's name (the user's rename, else the first prompt): history + notifications
+    // Whether this session holds a chat (a prompt was sent): until then the server keeps it as a draft,
+    // New reuses it, and leaving it for another session closes it (nothing of it is stored).
+    chatStarted: !!session?.chatStartedAt || Number(session?.turns) > 0,
   });
   let recordName = userSessionTitle(session); // the name the session record holds as the user's ('' = never renamed)
   const controls = new Map(); // requestId → { card, origin, kind }
@@ -236,6 +247,23 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
   const providerIcon = (p) => getProviderMeta(p).icon;
   const providerColor = (p) => getProviderMeta(p).color;
   const visible = () => { try { return host.isVisible ? !!host.isVisible() : true; } catch { return true; } };
+
+  // ── Just-in-time tips (../tour/tour-tips.js): once each, ever; never in a replay or while the tour runs ──
+  function tip(id, targetOf) {
+    if (destroyed || replaying || !visible() || guestBlocked() || tipsSeen(storage).has(id)) return;
+    requestAnimationFrame(() => {
+      if (destroyed) return;
+      let target = null;
+      try { target = targetOf(); } catch { target = null; }
+      if (!target?.isConnected) return;
+      import('../tour/tour-tips.js')
+        .then(async ({ ensureTourStyles, showTip }) => {
+          await ensureTourStyles();
+          if (!destroyed && target.isConnected) showTip(id, { storage, tr: (key) => t(key), root, target, renderer, reduced: () => matchMedia('(prefers-reduced-motion: reduce)').matches });
+        })
+        .catch(() => { /* a tip is never worth an error */ });
+    });
+  }
   const hostId = host.id || null; // routing only (assistant:new / resume / focused) — never a feature switch
 
   function persist() {
@@ -315,18 +343,33 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     notify(host.notifySource || 'cli', type, notifyLabel(), { sessionId, provider: 'assistant', panel: 'assistant' });
   }
 
-  /** root[data-status] and data-computer drive status styling (the live dot, the Computer switch). */
+  /** root[data-status] (the session's status, sessionStatus) and data-computer drive status styling (the live dot, the Computer switch). */
   function renderStatus() {
-    root.dataset.status = st.status || 'idle';
+    root.dataset.status = st.shownStatus || 'idle';
     if (st.desktopActive) root.dataset.computer = 'active';
     else delete root.dataset.computer;
   }
 
+  /** The brain's own status: its turn ('working', 'done', 'idle') and its cards ('action'). */
   function setStatus(status) {
     st.status = status || 'idle';
-    renderStatus();
+    pushStatus(true);
     syncBlocked();
-    try { host.setStatus?.(st.status); } catch { /* ignore */ }
+  }
+
+  /**
+   * What the host shows (tray pill, header, terminal badge) is the session's status: the brain's own and
+   * its dispatched agents' together (asst-state.js sessionStatus), so the gold stays while a worker works
+   * after the turn that dispatched it ended, and a worker that waits on you makes the session need you.
+   * The brain's own changes always reach the host; a change of the agents' counts only when the status moved.
+   */
+  function pushStatus(always = false) {
+    if (destroyed) return;
+    const next = sessionStatus(st.status, st.workers);
+    if (!always && next === st.shownStatus) return;
+    st.shownStatus = next;
+    renderStatus();
+    try { host.setStatus?.(next); } catch { /* ignore */ }
   }
 
   /**
@@ -484,7 +527,18 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
       emptyBudgetChip?.destroy();
       emptyBudgetChip = null;
     },
-    onSuggestion: (template) => composer.fillTemplate(template),
+    // The first-visit row asks for the Workspace tour on this panel (ui-tutorial.js); the others fill the composer.
+    onSuggestion: (template, s) => {
+      if (s?.action === 'tour') { emit('tour:open', { host: controller.tourHost(), from: 'starter' }); return; }
+      composer.fillTemplate(template);
+    },
+    // A follow-up under a finished message, or Retry now on a usage-limit card: sent as the user's next
+    // message (queued while a turn runs, like a typed one). "Something else…" is the composer.
+    onFollowup: (text) => { submit(clickPayload(text)); },
+    onFollowupOther: () => composer.focus(),
+    onLimitRetry: (text) => { submit(clickPayload(text)); },
+    limitInfo: () => st.limit,
+    brainProvider: () => st.brain.provider,
     heroOrigin: () => { try { return host.takeHeroOrigin?.() || null; } catch { return null; } },
     onMascotChange: () => director?.retarget(),
     onInit: (ev) => {
@@ -514,12 +568,20 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     },
   });
 
+  /** What a click sends: the text alone, shaped like a typed message with nothing attached. */
+  function clickPayload(text) {
+    return { text: String(text ?? ''), images: [], files: [], uploads: [], memories: [] };
+  }
+
   function emptySuggestions() {
     const project = projectLabel(st.brain.project, cachedProjects()) || tt('assistant.empty.thisProject', 'this project');
     const list = [];
+    // Until the Workspace tour is completed or skipped, its starter comes first. It never opens by itself.
+    if (tourOffered(storage) && !guestBlocked()) list.push({ id: 'tour', action: 'tour', kind: 'ask', label: tt('tour.starter', 'Show me the workspace'), meta: tt('tour.starterTime', '2 min') });
     if (computerAvailable()) list.push({ id: 'computer', label: tt('assistant.empty.suggestComputer', 'Use my Mac to…'), template: tt('assistant.empty.templateComputer', 'Use my Mac to {caret}') });
     list.push({ id: 'web', label: tt('assistant.empty.suggestWeb', 'Look up … on the web'), template: tt('assistant.empty.templateWeb', 'Look up {caret} on the web') });
     list.push({ id: 'fix', label: tt('assistant.empty.suggestFix', 'Fix … in {project}', { project }), template: tt('assistant.empty.templateFix', 'Fix {caret} in {project}', { project }) });
+    list.push({ id: 'skill', label: tt('assistant.empty.suggestSkill', 'Create Skill'), template: tt('assistant.empty.templateSkill', 'Create a skill that {caret}') });
     list.push({ id: 'schedule', label: tt('assistant.empty.suggestSchedule', 'Schedule …'), template: tt('assistant.empty.templateSchedule', 'Schedule {caret}') });
     list.push({ id: 'remember', label: tt('assistant.empty.suggestRemember', 'Remember …'), template: tt('assistant.empty.templateRemember', 'Remember {caret}') });
     return list;
@@ -531,7 +593,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     describeSlash: (cmd) => tt(cmd.descKey, cmd.desc),
     resolveMemory: (id) => appState.allNodes?.find(n => n.id === id) || null,
     resolveWhiteboardImage: (id) => { const wb = getWhiteboardElementById(id); return wb?.type === 'image' && wb.dataUrl ? { dataUrl: wb.dataUrl } : null; },
-    onDraftChange: (text) => { st.draft = text; persist(); director?.type(!!String(text || '').trim()); },
+    onDraftChange: (text) => { st.draft = text; persist(); director?.type(!!String(text || '').trim()); renderer.setDrafting?.(!!String(text || '').trim()); },
     onFocusChange: (focused) => { if (focused) director?.touch(); else director?.stopTyping(); },
     onAbort: () => abort(),
     onToast: toast,
@@ -569,6 +631,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
   const accountHooks = () => ({ t, onChanged: () => picker.refresh(true), onSelect: (id) => applyBrain({ ...st.brain, accountId: id }, { requiresSwitch: true, field: 'account' }) });
   // Model · effort · permission mode · account sit in the composer row next to attach; project and MCP in the toolbar.
   const picker = createBrainPicker({ brain: composer.el.querySelector('.asst-composer-brain'), context: barGroups.context }, {
+    getSessionId: () => st.sessionId,
     t,
     mascot: () => director,
     getBrain: () => st.brain,
@@ -632,18 +695,40 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     onStopAll: () => stopAll(),
     onRemove: (runId) => removeRun(runId),
     onClearFinished: () => clearFinished(),
+    // A mini scene or a lane: that run's card in the transcript (drawn first when this window never got it).
+    onReveal: (runId) => {
+      if (renderer.revealRun(runId)) return;
+      const run = dock.getRun(runId);
+      if (run) { renderer.restoreRuns([run]); renderer.revealRun(runId); }
+    },
+    // Whatever told the tray (the sync bus, its fetch), the transcript's card and route line follow.
+    onRunChange: (run) => renderer.syncRun(run),
     onToggle: (open) => { st.dockOpen = open; agentsBtn.setAttribute('aria-pressed', open ? 'true' : 'false'); persist(); },
     onShowAllChange: (showAll) => { st.dockShowAll = showAll; persist(); },
-    onCountChange: ({ total, active, attention, visible: shown }) => {
+    onCountChange: ({ total, active, attention, working = 0, waiting = 0, visible: shown }) => {
       agentsCount.textContent = String(active || total);
       agentsCount.classList.toggle('attention', attention > 0);
       agentsBtn.hidden = !shown;
       agentsBtn.classList.toggle('attention', attention > 0);
+      // Whatever told the tray (this socket, the sync bus, its fetch after a reload): the session's status follows.
+      st.workers = { working, waiting };
+      pushStatus();
     },
   });
   agentsBtn.setAttribute('aria-pressed', st.dockOpen ? 'true' : 'false');
 
   const usage = createUsageGauge(root.querySelector('.asst-usage-host'), { t, sessionId });
+  // The first usage strip on screen gets its tip (once, ever).
+  const usageHostEl = root.querySelector('.asst-usage-host');
+  if (typeof MutationObserver === 'function' && !tipsSeen(storage).has('usage')) {
+    const usageTipWatch = new MutationObserver(() => {
+      if (usageHostEl.hidden) return;
+      usageTipWatch.disconnect();
+      tip('usage', () => usageHostEl.querySelector('.asst-usage-strip') || usageHostEl);
+    });
+    usageTipWatch.observe(usageHostEl, { attributes: true, attributeFilter: ['hidden'] });
+    unsubs.push(() => usageTipWatch.disconnect());
+  }
   if (st.usageView) { usage.apply({ type: 'assistant:usage', ...st.usageView }); usage.setConnection('reconnecting'); }
   let usageFetchSeq = 0;
   let usageSocketOpened = false;
@@ -688,6 +773,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     clearTimeout(limitTimer);
     limitTimer = null;
     const limit = st.limit;
+    renderer.noteLimit(limit); // the waiting card of this turn's limit error counts to the reported reset
     limitEl.hidden = !limit;
     limitEl.dataset.status = limit?.status || '';
     const text = limitNoticeText(limit, tt);
@@ -777,6 +863,8 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
         lockControl(packet.request_id, resolvedLabel(packet.origin, tt('assistant.control.state.answered', 'Answered')));
         return;
       case 'reattach_result':
+        // Whether a turn runs now: a route the journal left open is that turn's, or nobody's.
+        renderer.reattached(!!(packet.ok && packet.running));
         if (packet.ok) {
           if (packet.sessionId) st.providerSessionId = packet.sessionId;
           if (packet.resynced) rehydrate({ force: true });
@@ -805,6 +893,8 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
         finishTurn({ aborted: true });
         return;
       case 'error': {
+        // The server no longer has this session: no error row and no retry loop; the host closes the tab.
+        if (packet.code === 'SESSION_NOT_FOUND') { sessionGone(); return; }
         // A rejected route answer keeps its card open with the message.
         const routeCard = packet.request_id ? routeCardByRequest(packet.request_id) : null;
         if (routeCard) { routeCard.fail(packet.message); return; }
@@ -833,7 +923,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
         return;
       case 'assistant:dispatch': {
         const run = runFromPayload(packet);
-        if (run) { dock.upsertRun(run); renderer.upsertRunCard(dock.getRun(run.runId) || run); }
+        if (run) { dock.upsertRun(run); renderer.upsertRunCard(dock.getRun(run.runId) || run); tip('run', () => renderer.getRunCard(run.runId)); }
         return;
       }
       case 'assistant:permission-request':
@@ -877,7 +967,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     switch (ev.type) {
       case 'synabun.dispatch': {
         const run = runFromPayload(ev);
-        if (run) { dock.upsertRun(run); renderer.upsertRunCard(dock.getRun(run.runId) || run); }
+        if (run) { dock.upsertRun(run); renderer.upsertRunCard(dock.getRun(run.runId) || run); tip('run', () => renderer.getRunCard(run.runId)); }
         return;
       }
       case 'synabun.dispatch_result': {
@@ -930,11 +1020,12 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     if (meta.id && meta.id !== sessionId) return;
     // The server's title names the conversation (history, notifications); the tab's name is the host's.
     applyRecordName(meta);
+    if (meta.chatStartedAt || Number(meta.turns) > 0) st.chatStarted = true;
     if (meta.brain && typeof meta.brain === 'object') {
       const next = normalizeBrain({ ...st.brain, ...meta.brain, provider: meta.brain.provider || meta.brain.brain || st.brain.provider });
       if (JSON.stringify(next) !== JSON.stringify(st.brain)) { st.brain = next; picker.render(); host.setBrain?.(next); persist(); }
     } else if (typeof meta.brain === 'string') {
-      const next = normalizeBrain({ ...st.brain, provider: meta.brain, model: meta.model ?? st.brain.model, effort: meta.effort ?? st.brain.effort, accountId: meta.accountId ?? st.brain.accountId, mcpProfile: meta.mcpProfile ?? st.brain.mcpProfile, project: meta.cwd ?? st.brain.project });
+      const next = normalizeBrain({ ...st.brain, provider: meta.brain, model: meta.model ?? st.brain.model, effort: meta.effort ?? st.brain.effort, accountId: meta.accountId ?? st.brain.accountId, tools: meta.tools ?? st.brain.tools, project: meta.cwd ?? st.brain.project });
       if (JSON.stringify(next) !== JSON.stringify(st.brain)) { st.brain = next; picker.render(); host.setBrain?.(next); persist(); }
     }
     if (meta.budget && typeof meta.budget === 'object') budgetController.receiveSession(meta.budget);
@@ -1118,6 +1209,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     if (st.computerRemote) { explainRemoteComputer(); return; }
     const next = enabled === true;
     const wasActive = st.desktopActive;
+    if (next && !st.computerEffective) tip('computer', () => (isRendered(computerToggle.el) ? computerToggle.el : moreBtn));
     st.computerUse = next;
     st.computerEffective = next;
     persist();
@@ -1143,7 +1235,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
       elapsedMs: st.turnStartedAt ? Date.now() - st.turnStartedAt : 0,
     }) : null;
     const answer = wasRunning && !aborted ? renderer.turnAnswer() : '';
-    renderer.finishTurn({ holdMs: pose ? MASCOT_TIMING.oneShotMs[pose] : 0 });
+    renderer.finishTurn({ holdMs: pose ? MASCOT_TIMING.oneShotMs[pose] : 0, guess: !aborted && !errored });
     if (wasRunning) director.turnEnded(pose);
     if (answer && !silent) announce(tt('assistant.announce.replied', 'SynaBun replied: {text}', { text: answer }));
     st.running = false;
@@ -1183,6 +1275,8 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
       providerIcon,
       scrollEnd: () => renderer.scrollEnd(),
       onRespond: (n, decision) => respondControl(n, decision),
+      // A question card's Esc, and its answer when focus was in it: back to the message box.
+      focusComposer: () => composer.focus(),
       renderRoute: (_container, n) => mountRouteCard(n),
     });
     if (!entry) return;
@@ -1224,6 +1318,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     renderer.appendNode(card.el);
     routeCards.set(card.routeId, card);
     routeChip.render();
+    tip('route', () => card.el);
     requestAnimationFrame(() => { if (!destroyed && !card.collapsed) card.focusIfIdle(); });
     return card;
   }
@@ -1343,6 +1438,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     st.turnStartedAt = Date.now();
     setRunning(true);
     sock.send(msg);
+    st.chatStarted = true; // the server stores the session with this prompt
     // Name the conversation like the server will (its first prompt) — not the tab.
     if (!st.userRenamed && (!st.sessionTitle || /^(?:SynaBun|Assistant(?: \d+)?)$/.test(st.sessionTitle))) {
       const guess = String(payload.text || '').split('\n')[0].trim().slice(0, 60);
@@ -1391,8 +1487,9 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
         else renames.settled().then(() => { if (!destroyed) sock.send({ type: 'list_sessions' }); }); // a rename on its way is in the list
         return true;
       case 'stop':
+        // /stop all: every run of the session, at once. /stop <target>: the one run it names, or nothing.
         if (parsed.all) await stopAll();
-        else if (parsed.target) await stopRun(parsed.target);
+        else if (parsed.target) await stopNamedRun(parsed.target);
         else abort();
         return true;
       case 'agents': {
@@ -1475,7 +1572,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
   }
 
   async function dispatch(parsed, payload) {
-    const spec = buildDispatchSpec(parsed, st.brain, { assistantSessionId: sessionId });
+    const spec = buildDispatchSpec(parsed, st.brain, { assistantSessionId: sessionId, toolCatalog: await fetchToolCatalog() });
     renderer.appendUser(payload.text);
     try {
       const res = await dispatchAssistantRun(spec);
@@ -1504,15 +1601,34 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     if (!st.running) setRunning(true, { label: tt('assistant.compacting', 'compacting…') });
   }
 
+  /** Nobody chatted in this session yet (and nothing runs in it): New reuses it, leaving it closes it. */
+  function unused() {
+    return !st.chatStarted && !st.running;
+  }
+
   function newSession(provider) {
     const b = provider ? normalizeBrain({ ...st.brain, provider, model: '', effort: null, agent: null, accountId: null }) : st.brain;
+    // This one is still empty: it is the new session (the server keeps one draft, not a pile of them).
+    // /new <provider> switches its brain as the picker does; what only this page showed (/help) is cleared.
+    if (unused() && !destroyed) {
+      if (provider && provider !== st.brain.provider) applyBrain(b, { requiresSwitch: true, field: 'provider' });
+      if (!renderer.isEmpty()) clearTranscript();
+      composer.focus();
+      return;
+    }
     emit('assistant:new', { brain: b, host: hostId });
   }
 
+  /** Open another assistant session; this one goes with it when nobody chatted in it (`replaces`). */
+  function openOther(id) {
+    emit('assistant:resume', { sessionId: id, host: hostId, replaces: unused() ? sessionId : null });
+  }
+
   function resume(id) {
     if (!id) return;
-    if (String(id).startsWith('assistant-')) { emit('assistant:resume', { sessionId: id, host: hostId }); return; }
+    if (String(id).startsWith('assistant-')) { if (id !== sessionId) openOther(id); return; }
     sock.send({ type: 'resume', providerSessionId: id });
+    st.chatStarted = true; // a provider conversation: the server stores the session with it
     renderer.appendDivider(tt('assistant.status.resuming', 'resuming {id}', { id: String(id).slice(0, 8) }));
   }
 
@@ -1527,7 +1643,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     if (meta.silent) return;
     if (meta.requiresSwitch) {
       const b = st.brain;
-      if (!meta.restartBrain) sock.send({ type: 'switch_brain', brain: b.provider, model: b.model || undefined, effort: b.effort || undefined, accountId: b.accountId || undefined, mcpProfile: b.mcpProfile || undefined, cwd: b.project || undefined, agent: b.agent || undefined, permissionMode: b.permissionMode, planMode: b.planMode === true });
+      if (!meta.restartBrain) sock.send({ type: 'switch_brain', brain: b.provider, model: b.model || undefined, effort: b.effort || undefined, accountId: b.accountId || undefined, tools: b.tools ?? undefined, cwd: b.project || undefined, agent: b.agent || undefined, permissionMode: b.permissionMode, planMode: b.planMode === true });
       renderer.appendDivider(`${tt('assistant.status.brain', 'brain')} → ${brainLabel(b)}`);
       renderer.forgetSeen(); // the new brain's ids start over
     } else if (before.permissionMode !== st.brain.permissionMode || !!before.planMode !== !!st.brain.planMode) {
@@ -1580,9 +1696,29 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     }
   }
 
+  /**
+   * /stop <target>: the run of this session it names (its id or the start of it, its title, the words
+   * of its title: asst-stop.js), and only that one. A target that fits none, or more than one, stops nothing.
+   */
+  async function stopNamedRun(target) {
+    const found = resolveStopTarget(target, dock.getRuns());
+    if (found.run && !found.error) return stopRun(found.run.runId);
+    if (found.passthrough) return stopRun(found.passthrough); // a full id the tray has not loaded: the server knows
+    const name = (run) => `${run.title || run.runId}${run.title ? ` (${String(run.runId).slice(0, 8)})` : ''}`;
+    const message = found.error === 'ambiguous'
+      ? tt('assistant.slash.stopAmbiguous', '"{target}" matches {count} agents: {list}. Nothing was stopped; name one of them.', { target, count: found.matches.length, list: found.matches.map(name).join(', ') })
+      : found.error === 'finished'
+        ? tt('assistant.slash.stopFinished', '{name} has already finished.', { name: name(found.run) })
+        : tt('assistant.slash.stopNoMatch', 'No agent of this session matches "{target}". Nothing was stopped; /agents lists them.', { target });
+    renderer.appendStatus(message);
+  }
+
   async function stopAll() {
-    try { await killAllAssistantRuns(sessionId); toast(tt('assistant.status.stopAllRequested', 'Stopping all dispatched agents…')); }
-    catch (err) { renderer.appendError(`${tt('assistant.status.stopFailed', 'Stop failed')}: ${err?.message || err}`); }
+    try {
+      const res = await killAllAssistantRuns(sessionId);
+      const count = Array.isArray(res?.stopped) ? res.stopped.length : null;
+      toast(count === null ? tt('assistant.status.stopAllRequested', 'Stopping all dispatched agents…') : plural(tt, 'assistant.status.stopAllDone', count, 'Stopped {count} agent.', 'Stopped {count} agents.'));
+    } catch (err) { renderer.appendError(`${tt('assistant.status.stopFailed', 'Stop failed')}: ${err?.message || err}`); }
   }
 
   async function escalateRun(runId, target) {
@@ -1634,35 +1770,109 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
   }
 
   // ── Menus ──
+  /**
+   * The Sessions menu: New, then every session that holds a chat (the server lists no other). Each row
+   * opens its session; its Remove (hover / focus, → from the row, Delete) asks in the row itself, then
+   * removes the session for good: its running turn and agents stop (the question says so), every host
+   * drops its tab, and the session showing here is replaced by a fresh one, as New does.
+   */
   function showSessionsMenu(list) {
-    const sessions = (Array.isArray(list) ? list : []).filter(s => s?.id);
-    const items = [
-      { id: 'new', label: tt('assistant.topbar.new', 'New assistant session'), desc: brainLabel(st.brain), icon: ICON_NEW, onSelect: () => newSession(null) },
-      { kind: 'separator' },
-    ];
-    if (!sessions.length) items.push({ kind: 'info', label: tt('assistant.sessions.empty', 'No other sessions') });
-    else items.push({ kind: 'header', label: tt('assistant.sessions.recent', 'Recent') });
-    for (const s of sessions.slice(0, 30)) {
-      const isCurrent = s.id === sessionId;
-      const b = s.brain && typeof s.brain === 'object' ? s.brain : { provider: s.brain, model: s.model, effort: s.effort };
-      items.push({
-        kind: 'radio',
-        id: s.id,
-        label: s.title || s.label || s.id,
-        desc: [brainLabel(b), relativeTime(s.updatedAt || s.createdAt), s.status].filter(Boolean).join(' · '),
-        selected: isCurrent,
-        onSelect: () => { if (!isCurrent) emit('assistant:resume', { sessionId: s.id, host: hostId }); },
-      });
-    }
-    openMenu(sessionsBtn, {
+    let sessions = (Array.isArray(list) ? list : []).filter(s => s?.id);
+    let asking = null; // the id of the row that asks "Remove …?"
+    const nameOf = (s) => s.title || s.label || s.id;
+    const build = () => {
+      const items = [
+        { id: 'new', label: tt('assistant.topbar.new', 'New assistant session'), desc: brainLabel(st.brain), icon: ICON_NEW, onSelect: () => newSession(null) },
+        { kind: 'separator' },
+      ];
+      if (!sessions.length) items.push({ kind: 'info', label: tt('assistant.sessions.empty', 'No other sessions') });
+      else items.push({ kind: 'header', label: tt('assistant.sessions.recent', 'Recent') });
+      for (const s of sessions.slice(0, 30)) {
+        const isCurrent = s.id === sessionId;
+        const name = nameOf(s);
+        if (s.id === asking) { items.push(removeQuestion(s, name, isCurrent)); continue; }
+        const b = s.brain && typeof s.brain === 'object' ? s.brain : { provider: s.brain, model: s.model, effort: s.effort };
+        items.push({
+          kind: 'radio',
+          id: s.id,
+          label: name,
+          desc: [brainLabel(b), relativeTime(s.updatedAt || s.createdAt), s.status].filter(Boolean).join(' · '),
+          selected: isCurrent,
+          onSelect: () => { if (!isCurrent) openOther(s.id); },
+          action: {
+            id: `remove:${s.id}`,
+            icon: ICON_TRASH,
+            label: tt('assistant.sessions.removeNamed', 'Remove “{title}”', { title: name }),
+            tooltip: tt('assistant.sessions.remove', 'Remove session'),
+            onSelect: () => ask(s.id),
+          },
+        });
+      }
+      return items;
+    };
+    /** "Remove “name”? …" with Remove and Cancel, in place of the row (it still matches the filter by name). */
+    const removeQuestion = (s, name, isCurrent) => {
+      const runs = Math.max(0, Number(s.activeRuns) || 0);
+      const running = isCurrent ? st.running : s.running === true;
+      const question = [
+        tt('assistant.sessions.removeAsk', 'Remove “{title}” for good?', { title: name }),
+        running ? tt('assistant.sessions.removeStopsTurn', 'Its running turn stops.') : '',
+        runs ? tt('assistant.sessions.removeStopsAgents', 'Its running agents stop ({count}).', { count: runs }) : '',
+      ].filter(Boolean).join(' ');
+      return {
+        kind: 'buttons',
+        id: `ask:${s.id}`,
+        className: 'asst-dd-confirm',
+        label: question,
+        buttons: [
+          { id: `remove-yes:${s.id}`, label: tt('assistant.sessions.removeConfirm', 'Remove'), danger: true, keywords: name, keepOpen: true, onSelect: () => confirmRemove(s, isCurrent) },
+          { id: `remove-no:${s.id}`, label: tt('common.cancel', 'Cancel'), keywords: name, keepOpen: true, onSelect: () => cancel() },
+        ],
+      };
+    };
+    const handle = openMenu(sessionsBtn, {
       title: tt('assistant.topbar.sessions', 'Sessions'),
-      items,
+      items: build(),
       role: 'menu',
       placement: 'below',
       width: 300,
       filter: sessions.length > 8,
       filterPlaceholder: tt('assistant.sessions.filter', 'Filter sessions…'),
+      // Esc while a row asks: back to the row, the menu stays open.
+      onEscape: () => { if (!asking) return false; cancel(); return true; },
     });
+    function ask(id) {
+      asking = id;
+      handle?.update({ items: build(), focus: `remove-no:${id}` });
+    }
+    function cancel() {
+      const id = asking;
+      asking = null;
+      handle?.update({ items: build(), focus: id });
+    }
+    function confirmRemove(s, isCurrent) {
+      asking = null;
+      const name = nameOf(s);
+      const done = (result) => {
+        if (result?.ok) return;
+        const text = tt('assistant.sessions.removeFailed', 'Could not remove “{title}”: {error}', { title: name, error: result?.error || tt('assistant.errorGeneric', 'Something went wrong') });
+        if (destroyed) return;
+        renderer.appendError(text);
+        announce(text);
+      };
+      if (isCurrent) {
+        // This panel's own session: a fresh one takes its place (as New), then this one goes.
+        closeMenu();
+        emit('assistant:remove', { sessionId: s.id, fresh: true, brain: st.brain, done });
+        return;
+      }
+      // Another session (open elsewhere or not): its row goes now, and focus stays in the list.
+      const at = sessions.findIndex((row) => row.id === s.id);
+      sessions = sessions.filter((row) => row.id !== s.id);
+      const next = sessions[Math.min(at, sessions.length - 1)];
+      handle?.update({ items: build(), focus: next ? next.id : 'new' });
+      emit('assistant:remove', { sessionId: s.id, fresh: false, done });
+    }
   }
 
   function engineText() {
@@ -1720,6 +1930,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     items.push({ kind: 'info', label: tt('assistant.topbar.cost', 'Session cost'), value: fmtCost(totalCost()) || '$0.00' });
     if (Number(st.dispatchUsd) > 0) items.push({ kind: 'info', label: tt('assistant.topbar.agentsCost', 'Agents'), value: fmtCost(st.dispatchUsd) });
     openMenu(moreBtn, { label: tt('assistant.toolbar.more', 'More options'), items, role: 'menu', placement: 'below', width: 280 });
+    tip('more', () => document.querySelector('.asst-dd-menu'));
   }
 
   // Assistant → Models: switch models off (hidden from routing, dispatch and every model menu).
@@ -1898,6 +2109,18 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     const requestId = msg?.request_id || msg?.requestId;
     if (requestId) lockControl(requestId, resolvedLabel(msg.resolvedBy));
   }));
+  // What this session's workers do right now (Claude and Codex workers stream their events to the page,
+  // OpenCode workers a compact copy of their tool calls: lib/opencode-worker-activity.js):
+  // their stages and the tray's scenes follow the current call.
+  unsubs.push(on('sync:sidepanel:provider-event', (msg) => {
+    const runId = msg?.run?.runId;
+    if (!runId || !dock.getRun(runId)) return;
+    const activity = activityOf(msg.event);
+    if (!activity) return;
+    const stamped = { ...activity, at: Date.now() };
+    renderer.setRunActivity(runId, stamped);
+    dock.setRunActivity(runId, stamped);
+  }));
   unsubs.push(on('sync:assistant:desktop', (msg) => computerPanel.applyDesktop(msg)));
   unsubs.push(on('sync:assistant:desktop-setup', (msg) => computerPanel.applySetup(msg)));
   // Models switched on/off elsewhere: the open Models manager reloads (the menus drop their cache on their own).
@@ -1924,6 +2147,19 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
   }
 
   // ── Rehydration ──
+  /**
+   * The server no longer has this session: a draft it dropped (a restart before its first prompt, a
+   * page away too long) or one removed while this page missed the broadcast. The tab closes; one that
+   * was showing with no chat in it is replaced by a fresh session (asst-hosts.js gone), never left dead.
+   */
+  let gone = false;
+  function sessionGone() {
+    if (gone || destroyed) return;
+    gone = true;
+    sock.close();
+    emit('assistant:gone', { sessionId, fresh: visible() && unused(), brain: st.brain });
+  }
+
   async function rehydrate({ force = false } = {}) {
     try {
       const data = await getAssistantSession(sessionId);
@@ -1936,7 +2172,11 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
       // A conversation with nothing in it yet may be greeted; a restored one never is.
       if (Array.isArray(transcript) && !transcript.length && !(Number(meta?.turns) > 0)) renderer.offerGreeting();
       for (const run of (Array.isArray(data?.runs) ? data.runs : [])) dock.upsertRun(run);
+      // Run cards are not journaled: the runs the tray fetched come back into the transcript, next to the
+      // calls that dispatched them, and a worker that still works is live at once (its stage, its route line).
+      dock.ready.then(() => { if (!destroyed) renderer.restoreRuns(dock.getRuns()); });
     } catch (err) {
+      if (err?.status === 404) { sessionGone(); return; }
       console.warn('[assistant] could not restore the conversation', err);
       renderer.showEmpty();
     }
@@ -1951,7 +2191,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
   if (session && typeof session === 'object') applySessionMeta(session);
   else applyFeatures();
   rehydrate().finally(() => {
-    if (destroyed) return;
+    if (destroyed || gone) return;
     probeFeatures();
     applyLastUsedRouteMode();
     applyLastUsedTestDensity();
@@ -1984,6 +2224,22 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     resume,
     setRouteMode: (mode) => setRouteMode(mode),
     setComputerUse: (enabled) => setComputerUse(enabled),
+    /**
+     * What the Workspace tour presents on (public/shared/tour/): this panel's own board,
+     * its controls and its director, while the empty state shows its character and nothing
+     * runs. null otherwise (the tour then uses a session-free preview).
+     */
+    tourHost() {
+      const hero = renderer.mascot();
+      if (destroyed || st.running || hero?.kind !== 'hero' || hero.parked?.()) return null;
+      return {
+        root, transcript: transcriptEl, announcer, bar: barEl, renderer, director, composer,
+        live: true,
+        computer: computerAvailable(),
+        refreshStarters: () => renderer.refreshEmpty(),
+        focusComposer: () => composer.focus(),
+      };
+    },
     attachMemory: (node) => composer.addMemory(node),
     attachImageDataUrl: (dataUrl, name) => composer.addImageDataUrl(dataUrl, name),
     insertText: (text) => composer.insertText(text),
@@ -1991,7 +2247,8 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     attachPath: (path) => { if (path) { composer.insertText(`\`${path}\` `); composer.focus(); } },
     /** The server's name for the conversation (the user's rename, else the first prompt): tooltips. */
     getConversationTitle: () => st.sessionTitle || '',
-    getStatus: () => st.status || 'idle',
+    /** The session's status as its host shows it: the brain's own with its dispatched agents' (sessionStatus). */
+    getStatus: () => st.shownStatus || 'idle',
     focus: () => composer.focus(),
     onShown: () => { syncTabLabel(); renderer.scrollEnd(true); if (visible()) composer.focus(); director.touch(); },
     onHidden: () => { closeMenu(); picker.close(); director.stopTyping(); },
@@ -2012,7 +2269,9 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
       unsubs.forEach(off => { try { off(); } catch { /* ignore */ } });
       document.removeEventListener('keydown', onEscCapture, true);
       surfaces.forEach((node) => { node.removeEventListener('keydown', onRootKey); node.removeEventListener('focusin', onFocusIn); });
-      closeMenu();
+      // Its own menu closes; another panel's stays open (its Sessions menu may be what removed this session).
+      const menuAnchor = currentMenuAnchor();
+      if (!menuAnchor || !menuAnchor.isConnected || root.contains(menuAnchor) || barEl.contains(menuAnchor)) closeMenu();
       closeFrameLightbox();
       if (helpModal) { helpModal.remove(); helpModal = null; }
       for (const card of routeCards.values()) card.destroy();