synabun 2.0.10 → 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,6 +49,8 @@ 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';
@@ -243,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() {
@@ -506,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) => {
@@ -536,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;
@@ -553,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,
@@ -591,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,
@@ -677,6 +718,17 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
   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;
@@ -721,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);
@@ -870,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':
@@ -914,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': {
@@ -972,7 +1025,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
       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);
@@ -1156,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();
@@ -1181,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;
@@ -1221,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;
@@ -1262,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;
   }
@@ -1430,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': {
@@ -1514,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);
@@ -1585,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) {
@@ -1638,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) {
@@ -1852,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).
@@ -2145,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),

package/neural-interface/public/shared/assistant/asst-rack-styles.js

@@ -8,9 +8,9 @@
 // mascot stands over its task class's scene (asst-scenes.js; the motion is
 // asst-scene-styles.js): one column, as wide as the scene.
 //
-// Rules: gold only means live (the awake row's ring and tick, the caret, the
-// sweep); a rack a card holds (data-state="waiting") drops its gold: "Waiting
-// for you" in the warn tone with ◆, no caret, stopped clocks. Motion answers
+// Rules: gold only means live (the awake row's ring and tick, the bubble's
+// verb, the sweep); a rack a card holds (data-state="waiting") drops its gold:
+// "Waiting for you" in the warn tone with ◆, stopped clocks. Motion answers
 // events and stays under 300 ms; infinite animations run only on the live
 // rack, pause while the UI is dragged (body.ui-interacting) and everything is
 // static under prefers-reduced-motion (the sweep is not drawn at all). No
@@ -117,6 +117,7 @@ export const RACK_CSS = `
     grid-area: caption;
     align-self: end;
     min-width: 0;
+    margin-left: 8px; /* flush with the bubble's body (its notch takes the first 8px) */
     margin-bottom: 6px; /* the gap over the bubble: an empty caption takes no room */
     overflow: hidden;
     display: -webkit-box;
@@ -128,95 +129,107 @@ export const RACK_CSS = `
   }
   .asst-rack-caption:empty { display: none; }
 
+  /* ── The bubble: one 18px line (verb · subject · clock), 32px tall at one line, the ledger row's height.
+     The verb is gold only while the call runs; the mascot (and the sweep) carry the motion, the bubble
+     carries the words and, at the end of the line in the quietest tone, the numbers. Opaque fill (the
+     card under the panel tint), so the notch can cover the ring where it meets the edge: no seam. */
   .asst-bubble {
+    --rk-bubble-bg: linear-gradient(var(--rk-fill-1), var(--rk-fill-1)), var(--rk-card);
     grid-area: bubble;
     position: relative;
     justify-self: start;
     align-self: start;
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    align-items: baseline;
-    column-gap: 7px;
-    row-gap: 1px;
+    display: block; /* a block, not a flex column: a flex item's -webkit-box is blockified and loses its line clamp */
     max-width: calc(100% - 8px);
     min-width: 0;
     margin-left: 8px;
-    padding: 6px 11px 7px;
-    border-radius: 3px 12px 12px 12px;
-    background: var(--rk-fill-1);
+    padding: 7px 10px;
+    border-radius: 3px 10px 10px 10px;
+    background: var(--rk-bubble-bg);
     box-shadow: inset 0 0 0 1px var(--rk-line);
   }
-  /* The tail: an 8px notch on the bubble's edge pointing at the mascot (left beside it, up under it). */
+  /* The tail: a 7px notch pointing at the mascot (left beside it, up under it), centred on the first line and
+     on the mascot's eyes. An 11px square turned 45° and cut to a triangle, 1px into the bubble so it paints
+     over the ring: the ring stops at the notch's legs, no double edge. */
   .asst-bubble::before {
     content: '';
     position: absolute;
-    left: -5.5px;
-    top: 7px;
+    left: -4.5px;
+    top: 10.5px;
     width: 11px;
     height: 11px;
-    background: var(--rk-fill-1);
+    background: var(--rk-bubble-bg);
     box-shadow: inset 1px -1px 0 var(--rk-line);
     clip-path: polygon(0 0, 0 100%, 100% 100%);
     transform: rotate(45deg);
     pointer-events: none;
   }
-  .asst-bubble-verb { color: var(--rk-text-2); font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
+  /* The line: one text flow, two lines at most (six opened), of the verb, the subject (cut by asst-render.js
+     until nothing is clamped) and the numbers, which take the end of the subject's last line and wrap
+     under it as a unit when they are long (a computer action and its clock). 2px of room around it for
+     the subject's focus ring. */
+  .asst-bubble-line {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    min-width: 0;
+    margin: -2px -3px;
+    padding: 2px 3px;
+    overflow: hidden;
+    /* The strut sets the 18px pitch; the words inside sit at line-height 1, so no mix of sizes or fonts grows a line. */
+    font-size: 12px;
+    line-height: 18px;
+    overflow-wrap: anywhere;
+  }
+  .asst-bubble-line:has(> .asst-bubble-subject[aria-expanded="true"]) { -webkit-line-clamp: 6; }
+  .asst-bubble-verb { color: var(--rk-text-2); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
+  .asst-bubble-verb:not(:empty) { margin-right: 7px; }
   .asst-bubble[data-state="running"] .asst-bubble-verb { color: var(--rk-gold); }
-  /* A card holds the call: no gold, no caret, the clock stopped (asst-render.js), "◆ Waiting for you". */
+  /* A card holds the call: no gold, the clock stopped (asst-render.js), "◆ Waiting for you". */
   .asst-bubble[data-state="waiting"] .asst-bubble-verb { color: var(--rk-warn); }
   .asst-bubble[data-state="waiting"] .asst-bubble-verb::before { content: '◆'; margin-right: 5px; font-size: 9px; vertical-align: 1px; }
   .asst-bubble-subject {
     --rk-cut: middle; /* where asst-render.js cuts a long subject: the middle; the head on a narrow stage */
     position: relative;
-    min-width: 0;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
     border-radius: 4px;
     color: var(--rk-text);
     font-size: 12px;
-    line-height: 1.5;
-    overflow-wrap: anywhere;
+    line-height: 1;
     cursor: pointer;
   }
   .asst-bubble-subject.is-mono { font-family: var(--rk-mono); font-size: 11.5px; }
   .asst-bubble-subject.is-muted { color: var(--rk-text-3); }
-  .asst-bubble-subject[aria-expanded="true"] { -webkit-line-clamp: 6; cursor: text; user-select: text; }
+  .asst-bubble-subject[aria-expanded="true"] { cursor: text; user-select: text; }
   .asst-bubble-subject .is-dim { color: var(--rk-text-3); }
   .asst-bubble-subject .is-strong { color: var(--rk-text); font-weight: 600; }
-  /* Streaming thinking fades in from its cut edge. */
-  .asst-bubble[data-kind="think"][data-state="running"] .asst-bubble-subject {
+  /* A URL or path: one piece per span, a <wbr> between them (asst-render.js writeSubject), so it wraps after "/"
+     and at its other separators, never mid-word; a piece wider than its line is cut instead (fitSubject). The
+     rest of the subject wraps as the line says. Opened, the whole literal shows: a piece may break again. */
+  .asst-bubble-piece { white-space: nowrap; }
+  .asst-bubble-subject[aria-expanded="true"] .asst-bubble-piece { white-space: normal; }
+  /* Streaming thinking cut from its head ("…the end of the thought") fades in from the cut; whole text is left alone. */
+  .asst-bubble[data-kind="think"][data-state="running"] .asst-bubble-subject.is-cut {
     -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px);
     mask-image: linear-gradient(90deg, transparent, #000 12px);
   }
-  .asst-bubble-caret {
-    display: none;
-    width: 6px;
-    height: 12px;
-    margin-left: 3px;
-    vertical-align: -2px;
-    background: var(--rk-gold);
-  }
-  .asst-bubble[data-state="running"] .asst-bubble-caret { display: inline-block; animation: asst-rk-caret 1.06s steps(1) infinite; }
   .asst-bubble-meta {
-    grid-column: 2;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2px 12px;
+    display: inline-flex;
+    gap: 0 8px;
+    margin-left: 7px;
     color: var(--rk-text-3);
     font-size: 11px;
-    line-height: 1.5;
+    line-height: 1; /* inside the 18px strut: the smaller type never grows the line */
+    white-space: nowrap;
     font-variant-numeric: tabular-nums;
   }
   .asst-bubble-meta:empty { display: none; }
   .asst-bubble-num { white-space: nowrap; }
   .asst-bubble-err {
-    grid-column: 1 / -1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     min-width: 0;
+    margin-top: 2px;
     overflow: hidden;
     color: var(--rk-red);
     font-family: var(--rk-mono);
@@ -228,8 +241,8 @@ export const RACK_CSS = `
   .asst-bubble-copy {
     position: relative;
     isolation: isolate;
-    grid-column: 1 / -1;
-    justify-self: start;
+    display: inline-flex;
+    align-items: center;
     height: var(--rk-pill-h);
     margin-top: 4px;
     padding: 0 var(--rk-pill-px);
@@ -242,7 +255,9 @@ export const RACK_CSS = `
     cursor: pointer;
   }
   .asst-bubble-copy:hover { color: var(--rk-text); }
-  .asst-odo { display: inline-flex; font-variant-numeric: tabular-nums; white-space: pre; }
+  /* The clock: tabular digits that roll in place (asst-render.js); its cell keeps "59 s" of room, right-aligned, so
+     "9 s" → "10 s" moves nothing. */
+  .asst-odo { display: inline-flex; justify-content: flex-end; min-width: 2.4em; font-variant-numeric: tabular-nums; white-space: pre; }
   .asst-odo-d { display: inline-block; }
 
   .asst-rack-sweep { position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; overflow: hidden; pointer-events: none; }
@@ -553,9 +568,9 @@ export const RACK_CSS = `
     .asst-rack-stage { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "face caption" "bubble bubble"; column-gap: 8px; row-gap: 6px; }
     .asst-rack-set { align-self: center; flex-direction: row; }
     .asst-rack.is-staged > .asst-rack-stage { padding: 10px 10px 10px; }
-    .asst-rack-caption { align-self: center; margin-bottom: 0; }
-    .asst-bubble { justify-self: stretch; max-width: 100%; margin: 4px 0 0; border-radius: 3px 12px 12px 12px; }
-    .asst-bubble::before { left: 30px; top: -5.5px; box-shadow: inset 1px 1px 0 var(--rk-line); clip-path: polygon(0 100%, 0 0, 100% 0); }
+    .asst-rack-caption { align-self: center; margin-left: 0; margin-bottom: 0; }
+    .asst-bubble { justify-self: stretch; max-width: 100%; margin: 4px 0 0; border-radius: 3px 10px 10px 10px; }
+    .asst-bubble::before { left: 30px; top: -4.5px; box-shadow: inset 1px 1px 0 var(--rk-line); clip-path: polygon(0 100%, 0 0, 100% 0); }
     .asst-station-hdr { gap: 8px; padding: 0 6px; }
     .asst-station-time { display: none; }
     .asst-tick.is-old { display: none; }
@@ -565,7 +580,8 @@ export const RACK_CSS = `
     .asst-station-sub { margin-left: 12px; }
   }
   @container asst (max-width: 320px) {
-    .asst-bubble { padding: 5px 9px 6px; }
+    .asst-bubble { padding: 6px 9px; }
+    .asst-bubble::before { top: -4.5px; }
     .asst-bubble-subject { --rk-cut: head; }
     .asst-bubble-meta { display: none; }
   }
@@ -576,6 +592,7 @@ export const RACK_CSS = `
   }
 
   /* ── Motion ─────────────────────────────────────────────────────── */
+  /* The caret blink belongs to the scenes' code caret (asst-scene-styles.js); the bubble has none. */
   @keyframes asst-rk-caret { 0% { opacity: 1; } 50% { opacity: 0; } }
   @keyframes asst-rk-sweep { from { transform: translateX(-100%); } to { transform: translateX(270%); } }
   @keyframes asst-rk-tick { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }