@mjasnikovs/pi-task 0.7.0 → 0.7.2

package/dist/remote/register.js

@@ -1,7 +1,6 @@
-import { broadcast } from './broadcast.js';
 import { getBridge, dispatchRemoteLine, dispatchRemoteNewSession, makeShimmedCtx } from './bridge.js';
 import { setupEvents } from './events.js';
-import { HistoryBuffer } from './history.js';
+import { reset, addUserTurn } from './session-state.js';
 import { html } from './ui.js';
 import { qrLines } from './qr.js';
 import { startServer, formatAddresses } from './server.js';
@@ -12,7 +11,6 @@ if (!_g.__piRemote)
     _g.__piRemote = { server: null, send: null, serveResult: null };
 const S = _g.__piRemote;
 export function registerRemote(pi) {
-    const history = new HistoryBuffer(20);
     async function ensureServer() {
         if (S.server)
             return S.server;
@@ -29,7 +27,7 @@ export function registerRemote(pi) {
             }
             dispatchRemoteLine(text, {
                 onPlain: plain => {
-                    history.addUserMessage(plain);
+                    addUserTurn(plain);
                     if (isAgentIdle()) {
                         S.send?.(plain);
                     }
@@ -38,7 +36,7 @@ export function registerRemote(pi) {
                     }
                 }
             });
-        }, wsUrl => html(wsUrl), () => history.getEntries());
+        }, wsUrl => html(wsUrl));
         // Hands-off HTTPS: point Tailscale serve at our port so phones get a
         // secure context. Best-effort — any failure degrades to the http URL.
         S.serveResult = await ensureTailscaleServe(S.server.port).catch(() => ({ state: 'unavailable' }));
@@ -47,13 +45,11 @@ export function registerRemote(pi) {
     pi.on('session_start', (_event, ctx) => {
         S.send = (text, opts) => (opts ? pi.sendUserMessage(text, opts) : pi.sendUserMessage(text));
         // A new session (incl. /new and the /task handoff's newSession) means the
-        // browser is showing a stale transcript/widgets — wipe both ends.
+        // browser is showing a stale transcript/widgets — wipe the authoritative
+        // state and tell connected clients to clear.
         const bridge = getBridge();
-        bridge.activeWidgets.clear();
-        bridge.activePrompt = null;
-        bridge.lastContextUsage = null;
-        broadcast({ type: 'reset' });
-        setupEvents(pi, history, broadcast);
+        reset();
+        setupEvents(pi);
         // Seed a shimmed ctx so commands that don't need newSession (/task-list,
         // /task-cancel, /task-auto-cancel) work immediately from the remote without
         // any terminal interaction. Only overwrite if null or already shimmed —

package/dist/remote/server.d.ts

@@ -1,4 +1,3 @@
-import type { Turn } from './history.js';
 export interface LocalIPs {
     /** Tailscale (tailscale0) IPv4 address, if the interface is up. */
     tailscale?: string;
@@ -27,5 +26,5 @@ export declare function getLocalIPs(nets?: NodeJS.Dict<import("node:os").Network
 /** Build the labeled URL lines shown under the QR code. Both Tailscale and LAN
  *  when present; a single unlabeled primary URL when neither resolves. */
 export declare function formatAddresses(ips: LocalIPs, port: number): AddressLine[];
-export declare function startServer(onMessage: MessageCallback, getHtml: (wsUrl: string) => string, getHistory: () => Turn[]): Promise<ServerHandle>;
+export declare function startServer(onMessage: MessageCallback, getHtml: (wsUrl: string) => string): Promise<ServerHandle>;
 export {};

package/dist/remote/server.js

@@ -2,7 +2,8 @@ import { createServer } from 'node:http';
 import { networkInterfaces } from 'node:os';
 import { WebSocketServer } from 'ws';
 import { addClient, removeClient, clientCount, broadcast, sendTo } from './broadcast.js';
-import { getBridge, answerPrompt } from './bridge.js';
+import { answerPrompt } from './bridge.js';
+import { getState, snapshot } from './session-state.js';
 import { isClientMessage } from './protocol.js';
 import { swJs } from './sw.js';
 import { publicKey, addSubscription, getSubscriptions, logPush } from './push.js';
@@ -59,7 +60,7 @@ async function findPort(start, max) {
     }
     throw new Error(`No free port found in range ${start}–${start + max - 1}`);
 }
-export async function startServer(onMessage, getHtml, getHistory) {
+export async function startServer(onMessage, getHtml) {
     const port = await findPort(8800, 100);
     const ips = getLocalIPs();
     const ip = ips.primary;
@@ -118,16 +119,8 @@ export async function startServer(onMessage, getHtml, getHistory) {
         addClient(ws);
         handle.onFirstConnect?.();
         handle.onFirstConnect = null;
-        sendTo(ws, { type: 'history', turns: getHistory() });
-        const bridge = getBridge();
-        for (const [key, lines] of bridge.activeWidgets) {
-            sendTo(ws, { type: 'widget', key, lines });
-        }
-        if (bridge.activePrompt)
-            sendTo(ws, bridge.activePrompt);
-        if (bridge.lastContextUsage) {
-            sendTo(ws, { type: 'context', contextUsage: bridge.lastContextUsage });
-        }
+        // One authoritative snapshot — the client replaces its whole view with it.
+        sendTo(ws, snapshot());
         broadcast({ type: 'client_count', count: clientCount() });
         ws.on('message', data => {
             let msg;
@@ -145,7 +138,7 @@ export async function startServer(onMessage, getHtml, getHistory) {
             }
             // type === 'message': ignore while a prompt is pending (composer is
             // disabled in the browser; this is the server-side guard).
-            if (getBridge().activePrompt)
+            if (getState().prompt)
                 return;
             onMessage(msg.text);
         });

package/dist/remote/session-state.d.ts

@@ -0,0 +1,54 @@
+import { HistoryBuffer } from './history.js';
+import type { Turn, Part } from './history.js';
+import type { ContextUsage, PromptMessage } from './protocol.js';
+export interface LiveTurn {
+    /** Ordered assistant content (text segments + tool calls) for this run. */
+    parts: Part[];
+    /** Is the trailing text part still accumulating deltas? Closed by text_end /
+     *  a tool start, so the next text begins a fresh segment (separate bubble). */
+    textOpen: boolean;
+}
+export interface SnapshotMessage {
+    type: 'snapshot';
+    turns: Turn[];
+    live: LiveTurn | null;
+    agentRunning: boolean;
+    taskWidget: string[] | null;
+    prompt: PromptMessage | null;
+    context: ContextUsage | null;
+}
+interface SessionState {
+    history: HistoryBuffer;
+    live: LiveTurn | null;
+    agentRunning: boolean;
+    taskWidget: string[] | null;
+    prompt: PromptMessage | null;
+    context: ContextUsage | null;
+    /** Broadcast sink — swapped in tests via _setSink. */
+    sink: (msg: unknown) => void;
+}
+export declare function getState(): SessionState;
+/** @internal Test-only: swap the broadcast sink to capture emitted deltas. */
+export declare function _setSink(fn: (msg: unknown) => void): void;
+export declare function agentStart(): void;
+export declare function appendText(delta: string): void;
+export declare function textEnd(): void;
+export declare function startTool(toolCallId: string, toolName: string, args: unknown): void;
+export declare function updateTool(toolCallId: string, partialResult: unknown): void;
+export declare function endTool(toolCallId: string, toolName: string, result: unknown, isError: boolean): void;
+export declare function agentEnd(context: ContextUsage): void;
+export declare function addUserTurn(text: string): void;
+export declare function addError(message: string): void;
+/** A persistent inline note (committed to the transcript so it survives reconnect)
+ *  plus a live delta so connected clients render it immediately. */
+export declare function addSystemNote(text: string): void;
+/** The single task-widget slot. Empty/undefined lines clear it. */
+export declare function setTaskWidget(lines: string[] | null | undefined): void;
+export declare function setPrompt(prompt: PromptMessage): void;
+export declare function clearPrompt(id: string): void;
+export declare function setContext(context: ContextUsage): void;
+/** Wipe everything (new session) and tell connected clients to clear. */
+export declare function reset(): void;
+/** Serialize the whole state for a (re)connecting client. */
+export declare function snapshot(): SnapshotMessage;
+export {};

package/dist/remote/session-state.js

@@ -0,0 +1,179 @@
+// The single authoritative mirror of what a connected browser should be showing.
+//
+// Every change funnels through a mutator that (1) updates this object and (2)
+// broadcasts the matching live delta. On (re)connect the server serializes the
+// whole object with snapshot() and the client replaces its entire view. Because
+// the snapshot and the live deltas read/write the same object, they can never
+// disagree — which is what kills the duplicate-transcript / orphaned-widget /
+// two-task-widget drift the ad-hoc broadcasting used to cause.
+//
+// State lives on globalThis so it survives jiti module re-evaluation on session
+// switches, the same pattern broadcast.ts and bridge.ts use.
+import { broadcast as wsBroadcast } from './broadcast.js';
+import { HistoryBuffer } from './history.js';
+const g = globalThis;
+function fresh() {
+    return {
+        history: new HistoryBuffer(20),
+        live: null,
+        agentRunning: false,
+        taskWidget: null,
+        prompt: null,
+        context: null,
+        sink: wsBroadcast
+    };
+}
+export function getState() {
+    if (!g.__piSessionState)
+        g.__piSessionState = fresh();
+    return g.__piSessionState;
+}
+/** @internal Test-only: swap the broadcast sink to capture emitted deltas. */
+export function _setSink(fn) {
+    getState().sink = fn;
+}
+function ensureLive(s) {
+    if (!s.live)
+        s.live = { parts: [], textOpen: false };
+    return s.live;
+}
+// ─── Mutators ────────────────────────────────────────────────────────────────
+export function agentStart() {
+    const s = getState();
+    s.live = { parts: [], textOpen: false };
+    s.agentRunning = true;
+    s.sink({ type: 'agent_start' });
+}
+export function appendText(delta) {
+    const s = getState();
+    const live = ensureLive(s);
+    const last = live.parts[live.parts.length - 1];
+    if (live.textOpen && last && last.kind === 'text') {
+        last.text += delta;
+    }
+    else {
+        live.parts.push({ kind: 'text', text: delta });
+        live.textOpen = true;
+    }
+    s.sink({ type: 'text_delta', delta });
+}
+export function textEnd() {
+    const s = getState();
+    if (s.live)
+        s.live.textOpen = false; // next text starts a new segment
+    s.sink({ type: 'text_end' });
+}
+export function startTool(toolCallId, toolName, args) {
+    const s = getState();
+    const live = ensureLive(s);
+    live.textOpen = false;
+    live.parts.push({
+        kind: 'tool',
+        toolCallId,
+        toolName,
+        args,
+        result: undefined,
+        isError: false,
+        done: false
+    });
+    s.sink({ type: 'tool_start', toolCallId, toolName, args });
+}
+export function updateTool(toolCallId, partialResult) {
+    getState().sink({ type: 'tool_update', toolCallId, partialResult });
+}
+export function endTool(toolCallId, toolName, result, isError) {
+    const s = getState();
+    const live = ensureLive(s);
+    const part = live.parts.find((p) => p.kind === 'tool' && p.toolCallId === toolCallId);
+    if (part) {
+        part.result = result;
+        part.isError = isError;
+        part.done = true;
+    }
+    else {
+        // tool_end without a matching start (shouldn't happen) — append a done tool.
+        live.parts.push({
+            kind: 'tool',
+            toolCallId,
+            toolName,
+            args: undefined,
+            result,
+            isError,
+            done: true
+        });
+    }
+    s.sink({ type: 'tool_end', toolCallId, toolName, result, isError });
+}
+export function agentEnd(context) {
+    const s = getState();
+    if (s.live)
+        s.history.addAssistantTurn(s.live.parts);
+    s.live = null;
+    s.agentRunning = false;
+    s.context = context;
+    s.sink({ type: 'agent_end', contextUsage: context });
+}
+export function addUserTurn(text) {
+    const s = getState();
+    s.history.addUserMessage(text);
+    s.sink({ type: 'user_message', text });
+}
+export function addError(message) {
+    const s = getState();
+    s.history.addError(message);
+    s.live = null;
+    s.agentRunning = false;
+    s.sink({ type: 'agent_error', message });
+}
+/** A persistent inline note (committed to the transcript so it survives reconnect)
+ *  plus a live delta so connected clients render it immediately. */
+export function addSystemNote(text) {
+    const s = getState();
+    s.history.addSystemNote(text);
+    s.sink({ type: 'system_note', text });
+}
+/** The single task-widget slot. Empty/undefined lines clear it. */
+export function setTaskWidget(lines) {
+    const s = getState();
+    s.taskWidget = lines && lines.length ? lines : null;
+    s.sink({ type: 'widget', lines: s.taskWidget });
+}
+export function setPrompt(prompt) {
+    const s = getState();
+    s.prompt = prompt;
+    s.sink(prompt);
+}
+export function clearPrompt(id) {
+    const s = getState();
+    s.prompt = null;
+    s.sink({ type: 'prompt_resolved', id });
+}
+export function setContext(context) {
+    const s = getState();
+    s.context = context;
+    s.sink({ type: 'context', contextUsage: context });
+}
+/** Wipe everything (new session) and tell connected clients to clear. */
+export function reset() {
+    const s = getState();
+    s.history = new HistoryBuffer(20);
+    s.live = null;
+    s.agentRunning = false;
+    s.taskWidget = null;
+    s.prompt = null;
+    s.context = null;
+    s.sink({ type: 'reset' });
+}
+/** Serialize the whole state for a (re)connecting client. */
+export function snapshot() {
+    const s = getState();
+    return {
+        type: 'snapshot',
+        turns: s.history.getEntries(),
+        live: s.live ? { parts: [...s.live.parts], textOpen: s.live.textOpen } : null,
+        agentRunning: s.agentRunning,
+        taskWidget: s.taskWidget,
+        prompt: s.prompt,
+        context: s.context
+    };
+}

package/dist/remote/ui.js

@@ -85,6 +85,13 @@ export function html(wsUrl) {
       background: var(--crust); color: var(--red); align-self: stretch;
       max-width: 100%; border: 1px solid var(--red); font-size: 12px;
     }
+    /* Persistent inline system note (e.g. context compaction) — a muted centered
+       divider, distinct from chat bubbles. */
+    .sysnote {
+      align-self: center; color: var(--subtext0); font-size: 11px;
+      font-family: ui-monospace, monospace; letter-spacing: 0.5px;
+      padding: 2px 10px; opacity: 0.85;
+    }
     .bubble.thinking {
       display: flex; gap: 5px; align-items: center; padding: 10px 14px;
     }
@@ -172,11 +179,12 @@ export function html(wsUrl) {
       font-size: 13px; z-index: 100; letter-spacing: 0.03em;
     }
     #reconnect-overlay.visible { display: flex; }
+    /* Trailing stream indicator: the same braille spinner as the thinking bubble,
+       inline at the end of the streaming text (not a green blinking block). */
     .cursor {
-      display: inline-block; width: 7px; height: 1em; vertical-align: text-bottom;
-      background: var(--green); animation: blink 1s step-end infinite; margin-left: 1px;
+      color: var(--mauve); margin-left: 2px;
+      font-family: ui-monospace, monospace;
     }
-    @keyframes blink { 50% { opacity: 0; } }
     #status-panel { padding: 6px 12px; border-bottom: 1px solid var(--surface1);
       color: var(--subtext1); white-space: pre-wrap; font-size: 13px; display: none; }
     #prompt-card { position: fixed; left: 0; right: 0; bottom: 0; background: var(--mantle);
@@ -276,12 +284,13 @@ export function html(wsUrl) {
     const statusPanel = document.getElementById('status-panel');
     // Widgets are keyed (e.g. 'pi-tasks', 'pi-task-auto'); track them per key so a
     // clear for one key can't be masked by a stale message from another.
-    const widgets = {};
+    // Single authoritative task-widget slot. The snapshot and the live 'widget'
+    // delta both set this; null hides the panel. (No more per-key map that could
+    // strand an orphaned widget on screen.)
+    let taskWidgetLines = null;
     function renderWidgets() {
-      let all = [];
-      for (const k in widgets) if (widgets[k] && widgets[k].length) all = all.concat(widgets[k]);
-      if (all.length) {
-        statusPanel.textContent = all.join('\\n');
+      if (taskWidgetLines && taskWidgetLines.length) {
+        statusPanel.textContent = taskWidgetLines.join('\\n');
         statusPanel.style.display = 'block';
       } else {
         statusPanel.style.display = 'none';
@@ -488,30 +497,46 @@ export function html(wsUrl) {
     let spinTimer = null;
     let spinIdx = 0;
     const SPIN = '\\u280B\\u2819\\u2839\\u2838\\u283C\\u2834\\u2826\\u2827\\u2807\\u280F';
+    // One braille ticker drives every '.spin' element — the thinking bubble AND the
+    // trailing stream cursor — so they share the same frame and look identical.
+    function spinPaint() {
+      const g = SPIN[spinIdx % SPIN.length];
+      const els = document.getElementsByClassName('spin');
+      for (let i = 0; i < els.length; i++) els[i].textContent = g;
+    }
+    function startSpin() {
+      spinPaint();
+      if (spinTimer) return;
+      spinTimer = setInterval(function () {
+        spinIdx = (spinIdx + 1) % SPIN.length;
+        spinPaint();
+      }, 90);
+    }
+    // Stop the ticker once nothing on screen needs spinning.
+    function stopSpinIfIdle() {
+      if (spinTimer && !document.querySelector('.spin')) {
+        clearInterval(spinTimer); spinTimer = null;
+      }
+    }
     function showThinking() {
       if (!thinkingEl) {
         thinkingEl = document.createElement('div');
         thinkingEl.className = 'bubble assistant thinking';
-        thinkingEl.innerHTML = '<span class="spinner"></span>';
-      }
-      if (!spinTimer) {
-        var sp = thinkingEl.firstChild;
-        sp.textContent = SPIN[spinIdx % SPIN.length];
-        spinTimer = setInterval(function () {
-          spinIdx = (spinIdx + 1) % SPIN.length;
-          sp.textContent = SPIN[spinIdx];
-        }, 90);
+        thinkingEl.innerHTML = '<span class="spinner spin"></span>';
       }
       chatLog.appendChild(thinkingEl); // append (or move) to bottom
+      startSpin();
       scrollBottom();
     }
     function hideThinking() {
-      if (spinTimer) { clearInterval(spinTimer); spinTimer = null; }
       if (thinkingEl) thinkingEl.remove();
+      stopSpinIfIdle();
     }
 
     function addToolCall(toolName, argsStr, isError) {
-      const label = (toolName + ': ' + argsStr).slice(0, 64);
+      // argsStr can be undefined (no args / JSON.stringify(undefined)); don't let
+      // that render as the literal "name: undefined" in the collapsed summary.
+      const label = (toolName + (argsStr ? ': ' + argsStr : '')).slice(0, 64);
       const d = document.createElement('details');
       d.className = 'tool-call' + (isError ? ' error' : '');
       const s = document.createElement('summary');
@@ -528,6 +553,82 @@ export function html(wsUrl) {
       sendBtn.disabled = !allow;
     }
 
+    // Stringify a tool result safely. A null/undefined result (e.g. a tool that
+    // hasn't produced output) must NOT become the JS value undefined, whose
+    // .slice() throws — a throw here aborts the whole snapshot rebuild after the
+    // log was already cleared, blanking the transcript on reconnect.
+    function toolResultText(result) {
+      if (result == null) return '';
+      const r = typeof result === 'string' ? result : JSON.stringify(result, null, 2);
+      return (r == null ? '' : r).slice(0, 8000);
+    }
+
+    // Render one tool part from the ordered parts list (running or finished).
+    function renderToolPart(p) {
+      const argsStr = typeof p.args === 'string' ? p.args : JSON.stringify(p.args);
+      const d = addToolCall(p.toolName, argsStr, p.isError);
+      if (p.done) {
+        const pre = document.createElement('pre');
+        pre.textContent = toolResultText(p.result);
+        d.appendChild(pre);
+      } else {
+        toolCallMap[p.toolCallId] = d; // a later tool_end delta fills the result
+      }
+      return d;
+    }
+
+    // A muted, centered system note (e.g. "Context compacted").
+    function addSystemLine(text) {
+      const el = document.createElement('div');
+      el.className = 'sysnote';
+      el.textContent = text;
+      chatLog.appendChild(el);
+      scrollBottom();
+      return el;
+    }
+
+    // Render one committed transcript turn. Assistant turns are an ordered list of
+    // parts (text segments + tool calls), so the layout matches the terminal's
+    // interleaving instead of one merged blob with tools dumped at the end.
+    function renderTurn(t) {
+      if (t.error) { addBubble('error', t.text); return; }
+      if (t.role === 'system') { addSystemLine(t.text); return; }
+      if (t.role === 'user') { addBubble('user', t.text); return; }
+      for (const p of (t.parts || [])) {
+        if (p.kind === 'text') { if (p.text) addBubble('assistant', p.text); }
+        else renderToolPart(p);
+      }
+    }
+
+    // Render the in-progress assistant turn from a snapshot, preserving order. The
+    // trailing OPEN text segment becomes the live streaming bubble (cursor + spin)
+    // so subsequent text_delta frames keep flowing into it.
+    function renderLiveTurn(live) {
+      const parts = live.parts || [];
+      for (let i = 0; i < parts.length; i++) {
+        const p = parts[i];
+        const last = i === parts.length - 1;
+        if (p.kind === 'text') {
+          if (last && live.textOpen) {
+            currentBubble = document.createElement('div');
+            currentBubble.className = 'bubble assistant';
+            const cursor = document.createElement('span');
+            cursor.className = 'cursor spin';
+            currentBubble.appendChild(cursor);
+            if (p.text) currentBubble.insertBefore(document.createTextNode(p.text), cursor);
+            chatLog.appendChild(currentBubble);
+            streamText = p.text || '';
+            startSpin();
+            scrollBottom();
+          } else if (p.text) {
+            addBubble('assistant', p.text);
+          }
+        } else {
+          renderToolPart(p);
+        }
+      }
+    }
+
     function showToast(message, level) {
       const t = document.createElement('div');
       t.className = 'toast ' + (level || 'info');
@@ -731,19 +832,27 @@ export function html(wsUrl) {
 
     function handleMsg(msg) {
       switch (msg.type) {
-        case 'history':
-          for (const t of (msg.turns || [])) {
-            if (t.error) { addBubble('error', t.text); continue; }
-            addBubble(t.role, t.text);
-            for (const tool of (t.tools || [])) {
-              const d = addToolCall(tool.toolName, JSON.stringify(tool.args), tool.isError);
-              const pre = document.createElement('pre');
-              const r = typeof tool.result === 'string' ? tool.result : JSON.stringify(tool.result, null, 2);
-              pre.textContent = r.slice(0, 8000);
-              d.appendChild(pre);
-            }
-          }
+        case 'snapshot': {
+          // Authoritative full state on every (re)connect: replace the WHOLE view.
+          // This is what kills duplicated transcript / stale-orphaned widgets —
+          // whatever was on screen is discarded and rebuilt from server truth.
+          chatLog.innerHTML = '';
+          closePrompt();
+          hideThinking();
+          currentBubble = null; streamText = '';
+          for (const k in toolCallMap) delete toolCallMap[k];
+          // Per-turn try/catch: one malformed turn must never abort the rebuild
+          // and leave the (already-cleared) transcript blank.
+          for (const t of (msg.turns || [])) { try { renderTurn(t); } catch (e) {} }
+          if (msg.live) { try { renderLiveTurn(msg.live); } catch (e) {} }
+          taskWidgetLines = (msg.taskWidget && msg.taskWidget.length) ? msg.taskWidget : null;
+          renderWidgets();
+          if (msg.context) setContextBar(msg.context); else contextFill.style.width = '0%';
+          if (msg.prompt) showPrompt(msg.prompt);
+          setEnabled(!msg.agentRunning && !msg.prompt);
+          if (msg.agentRunning && !msg.live) showThinking();
           break;
+        }
         case 'agent_start':
           autoScroll = true;
           streamText = '';
@@ -757,9 +866,10 @@ export function html(wsUrl) {
             currentBubble = document.createElement('div');
             currentBubble.className = 'bubble assistant';
             const cursor = document.createElement('span');
-            cursor.className = 'cursor';
+            cursor.className = 'cursor spin';
             currentBubble.appendChild(cursor);
             chatLog.appendChild(currentBubble);
+            startSpin();
           }
           streamText += msg.delta;
           {
@@ -773,6 +883,11 @@ export function html(wsUrl) {
             const c = currentBubble.querySelector('.cursor');
             if (c) c.remove();
             if (streamText) setContent(currentBubble, streamText);
+            // Close this message's bubble so the next text segment (after a tool or
+            // the next message) starts a fresh bubble — matching the terminal.
+            currentBubble = null;
+            streamText = '';
+            stopSpinIfIdle();
           }
           break;
         case 'tool_start': {
@@ -786,8 +901,7 @@ export function html(wsUrl) {
           if (d) {
             if (msg.isError) d.classList.add('error');
             const pre = document.createElement('pre');
-            const r = typeof msg.result === 'string' ? msg.result : JSON.stringify(msg.result, null, 2);
-            pre.textContent = r.slice(0, 8000);
+            pre.textContent = toolResultText(msg.result);
             d.appendChild(pre);
             delete toolCallMap[msg.toolCallId];
           }
@@ -800,6 +914,9 @@ export function html(wsUrl) {
         case 'user_message':
           addBubble('user', msg.text);
           break;
+        case 'system_note':
+          addSystemLine(msg.text);
+          break;
         case 'agent_error':
           hideThinking();
           if (currentBubble) {
@@ -808,6 +925,7 @@ export function html(wsUrl) {
             if (streamText) setContent(currentBubble, streamText);
             currentBubble = null;
             streamText = '';
+            stopSpinIfIdle();
           }
           addBubble('error', msg.message || 'Error');
           setEnabled(true);
@@ -833,8 +951,7 @@ export function html(wsUrl) {
           if (activePromptId === msg.id) closePrompt();
           break;
         case 'widget':
-          if (msg.lines && msg.lines.length) widgets[msg.key] = msg.lines;
-          else delete widgets[msg.key];
+          taskWidgetLines = (msg.lines && msg.lines.length) ? msg.lines : null;
           renderWidgets();
           break;
         case 'notify':
@@ -850,7 +967,7 @@ export function html(wsUrl) {
           hideThinking();
           currentBubble = null; streamText = '';
           closePrompt();
-          for (const k in widgets) delete widgets[k];
+          taskWidgetLines = null;
           renderWidgets();
           contextFill.style.width = '0%';
           break;

package/dist/task/auto-io.d.ts

@@ -13,5 +13,12 @@ export declare function parseTaskList(body: string): TaskEntry[];
 export declare function buildAutoBody(feature: string, clarifications: string, titles: string[]): string;
 /** Check off the Nth checkbox line, stamping the produced TASK_NNNN id. */
 export declare function checkOffTask(cwd: string, id: string, index: number, producedId: string, title: string): Promise<void>;
+/**
+ * Stamp the inner TASK_NNNN id onto the Nth (still-unchecked) entry the moment
+ * the inner task is allocated. This links the AUTO entry to its in-progress
+ * inner task so /task-auto-resume can continue it from its saved phase instead
+ * of starting a brand-new task — matching how /task-resume behaves.
+ */
+export declare function stampTaskInProgress(cwd: string, id: string, index: number, producedId: string, title: string): Promise<void>;
 /** Find the most-recently-updated resumable TASK_AUTO_* file, or null. */
 export declare function findResumableAuto(cwd: string): Promise<string | null>;