@mjasnikovs/pi-task 0.20.2 → 0.21.0

package/dist/remote/protocol.d.ts

@@ -40,6 +40,14 @@ export interface NotifyMessage {
     message: string;
     level: 'info' | 'warning' | 'error';
 }
+/** Lines the user typed while a task run owned the session, waiting for the next
+ *  task turn. Shown in the composer so a held message is never a silent one. */
+export interface HeldMessage {
+    type: 'held';
+    texts: string[];
+    /** True while a task run owns the session (drives the composer placeholder). */
+    runActive: boolean;
+}
 export interface ViewerMessage {
     type: 'viewer';
     title: string;
@@ -67,7 +75,7 @@ export type { SnapshotMessage } from './session-state.js';
 /** Server → browser messages. The live text_delta / tool_* / agent_* /
  *  user_message deltas are emitted by the SessionState mutators
  *  and not all enumerated here; the snapshot below carries the full state. */
-export type ServerMessage = PromptMessage | PromptResolvedMessage | WidgetMessage | NotifyMessage | ViewerMessage | ContextMessage | ResetMessage | import('./session-state.js').SnapshotMessage;
+export type ServerMessage = PromptMessage | PromptResolvedMessage | WidgetMessage | NotifyMessage | ViewerMessage | HeldMessage | ContextMessage | ResetMessage | import('./session-state.js').SnapshotMessage;
 /** Browser → server messages. */
 export interface ClientChatMessage {
     type: 'message';
@@ -82,5 +90,9 @@ export interface ClientPromptAnswer {
 export interface ClientInterrupt {
     type: 'interrupt';
 }
-export type ClientMessage = ClientChatMessage | ClientPromptAnswer | ClientInterrupt;
+/** Drop everything held for the next task turn (the composer's ✕). */
+export interface ClientClearHeld {
+    type: 'clear_held';
+}
+export type ClientMessage = ClientChatMessage | ClientPromptAnswer | ClientInterrupt | ClientClearHeld;
 export declare function isClientMessage(x: unknown): x is ClientMessage;

package/dist/remote/protocol.js

@@ -8,6 +8,8 @@ export function isClientMessage(x) {
         return typeof m.text === 'string';
     if (m.type === 'interrupt')
         return true;
+    if (m.type === 'clear_held')
+        return true;
     if (m.type === 'prompt_answer') {
         return typeof m.id === 'string' && (m.value === undefined || typeof m.value === 'string');
     }

package/dist/remote/register.d.ts

@@ -1,2 +1,10 @@
 import type { ExtensionAPI } from '@earendil-works/pi-coding-agent';
+/**
+ * Where a plain (non-slash) browser line goes. Exported so the decision is
+ * tested as SHIPPED rather than as a copy — the three branches are the whole of
+ * issue #8, and the middle one is the regression.
+ */
+export declare function routePlainLine(plain: string, send: (text: string, opts?: {
+    deliverAs: 'steer' | 'followUp';
+}) => void): void;
 export declare function registerRemote(pi: ExtensionAPI): void;

package/dist/remote/register.js

@@ -1,16 +1,40 @@
 import { getConfig } from '../config/config.js';
 import { getBridge, dispatchRemoteLine, dispatchRemoteNewSession, makeShimmedCtx, interruptAgent, registerBridgeCommand, registerRemoteOnlyCommand, publishNotify } from './bridge.js';
 import { setupEvents } from './events.js';
-import { reset, addUserTurn } from './session-state.js';
+import { reset, addUserTurn, setHeld } from './session-state.js';
 import { html } from './ui.js';
 import { qrLines } from './qr.js';
 import { startServer, formatAddresses } from './server.js';
 import { ensureTailscaleServe, teardownTailscaleServe, planRemoteUrls, hostFromResult } from './tailscale.js';
 import { isAgentIdle } from './state.js';
+import { holdInput, isRunActive, clearHeldInput, heldInput, setHeldInputListener } from '../task/mid-run-input.js';
 const _g = globalThis;
 if (!_g.__piRemote)
     _g.__piRemote = { server: null, send: null, serveResult: null };
 const S = _g.__piRemote;
+/**
+ * Where a plain (non-slash) browser line goes. Exported so the decision is
+ * tested as SHIPPED rather than as a copy — the three branches are the whole of
+ * issue #8, and the middle one is the regression.
+ */
+export function routePlainLine(plain, send) {
+    addUserTurn(plain);
+    if (!isAgentIdle()) {
+        // A live turn: steer it (inject into the current generation) so the
+        // nudge lands immediately.
+        send(plain, { deliverAs: 'steer' });
+    }
+    else if (isRunActive()) {
+        // Idle, but a task run owns the session — which is most of a run, since
+        // the spec phases and every gate are child processes. Sending here opens
+        // a SECOND turn beside the run; that is what killed a live run on pi
+        // 0.82.1. Hold it for the next task turn instead.
+        holdInput(plain);
+    }
+    else {
+        send(plain);
+    }
+}
 export function registerRemote(pi) {
     async function ensureServer() {
         if (S.server)
@@ -27,21 +51,9 @@ export function registerRemote(pi) {
                 return;
             }
             dispatchRemoteLine(text, {
-                onPlain: plain => {
-                    addUserTurn(plain);
-                    if (isAgentIdle()) {
-                        S.send?.(plain);
-                    }
-                    else {
-                        // Mid-run: steer the live turn (inject the message into the
-                        // current generation) rather than queueing it for after, so a
-                        // remote nudge lands immediately — matching the composer's
-                        // "delivered mid-run" affordance.
-                        S.send?.(plain, { deliverAs: 'steer' });
-                    }
-                }
+                onPlain: plain => routePlainLine(plain, (t, opts) => S.send?.(t, opts))
             });
-        }, wsUrl => html(wsUrl), interruptAgent);
+        }, wsUrl => html(wsUrl), interruptAgent, clearHeldInput);
         // 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' }));
@@ -55,6 +67,8 @@ export function registerRemote(pi) {
         const bridge = getBridge();
         reset();
         setupEvents(pi);
+        // Mirror held mid-run input into the browser composer.
+        setHeldInputListener(() => setHeld(heldInput(), isRunActive()));
         // 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

@@ -42,5 +42,5 @@ export declare function formatAddresses(ips: LocalIPs, port: number, tsHost?: st
  *  real server) escapes as an uncaughtException that crashes pi (issue #7).
  *  Retrying the real bind has no probe and no window. */
 export declare function listenWithRetry(server: import('node:http').Server, start: number, max: number): Promise<number>;
-export declare function startServer(onMessage: MessageCallback, getHtml: (wsUrl: string) => string, onInterrupt?: () => void): Promise<ServerHandle>;
+export declare function startServer(onMessage: MessageCallback, getHtml: (wsUrl: string) => string, onInterrupt?: () => void, onClearHeld?: () => void): Promise<ServerHandle>;
 export {};

package/dist/remote/server.js

@@ -94,7 +94,7 @@ export function listenWithRetry(server, start, max) {
         server.listen(port, '0.0.0.0');
     });
 }
-export async function startServer(onMessage, getHtml, onInterrupt) {
+export async function startServer(onMessage, getHtml, onInterrupt, onClearHeld) {
     const ips = getLocalIPs();
     const ip = ips.primary;
     // The bound port isn't known until listenWithRetry succeeds, and wsUrl
@@ -211,6 +211,10 @@ export async function startServer(onMessage, getHtml, onInterrupt) {
                 answerPrompt(msg.id, msg.value);
                 return;
             }
+            if (msg.type === 'clear_held') {
+                onClearHeld?.();
+                return;
+            }
             // type === 'message': ignore while a prompt is pending (composer is
             // disabled in the browser; this is the server-side guard).
             if (getState().prompt)

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

@@ -18,6 +18,8 @@ export interface SnapshotMessage {
     prompt: PromptMessage | null;
     context: ContextUsage | null;
     model: string | null;
+    held: string[];
+    heldRunActive: boolean;
 }
 interface SessionState {
     history: HistoryBuffer;
@@ -29,6 +31,13 @@ interface SessionState {
     context: ContextUsage | null;
     /** Human-readable active model name (e.g. "Qwen3.6 27B"), for the header chip. */
     model: string | null;
+    /** Lines typed while a task run owned the session, waiting for the next task
+     *  turn to steer. Mirrors src/task/mid-run-input.ts so the browser can show
+     *  what is pending instead of leaving the user guessing. */
+    held: string[];
+    /** True while a task run owns the session, so the composer can say what a
+     *  typed line will do BEFORE the user types it. */
+    heldRunActive: boolean;
     /** tool start timestamps (ms), keyed by toolCallId — kept off the serialized
      *  parts so it never reaches the client; used only to compute elapsedMs. */
     toolStarts: Record<string, number>;
@@ -51,6 +60,8 @@ export declare function updateTool(toolCallId: string, partialResult: unknown):
 export declare function endTool(toolCallId: string, toolName: string, result: unknown, isError: boolean): void;
 export declare function agentEnd(context: ContextUsage, model?: string): void;
 export declare function addUserTurn(text: string): void;
+/** Mirror the held-input list to every browser. */
+export declare function setHeld(texts: string[], runActive: boolean): 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. */

package/dist/remote/session-state.js

@@ -22,6 +22,8 @@ function fresh() {
         prompt: null,
         context: null,
         model: null,
+        held: [],
+        heldRunActive: false,
         toolStarts: {},
         sink: wsBroadcast
     };
@@ -157,6 +159,13 @@ export function addUserTurn(text) {
     s.history.addUserMessage(text);
     s.sink({ type: 'user_message', text });
 }
+/** Mirror the held-input list to every browser. */
+export function setHeld(texts, runActive) {
+    const s = getState();
+    s.held = [...texts];
+    s.heldRunActive = runActive;
+    s.sink({ type: 'held', texts: s.held, runActive });
+}
 export function addError(message) {
     const s = getState();
     s.history.addError(message);
@@ -197,6 +206,8 @@ export function setContext(context) {
 /** Wipe everything (new session) and tell connected clients to clear. */
 export function reset() {
     const s = getState();
+    s.held = [];
+    s.heldRunActive = false;
     s.history = new HistoryBuffer(20);
     s.live = null;
     s.agentRunning = false;
@@ -220,6 +231,8 @@ export function snapshot() {
         taskWidgetData: s.taskWidgetData,
         prompt: s.prompt,
         context: s.context,
-        model: s.model
+        model: s.model,
+        held: [...s.held],
+        heldRunActive: s.heldRunActive
     };
 }

package/dist/remote/ui-script.js

@@ -13,6 +13,10 @@ export function clientScript(wsUrl) {
     const inputEl = document.getElementById('input');
     const sendBtn = document.getElementById('send');
     const contextFill = document.getElementById('context-bar-fill');
+    const heldBar = document.getElementById('held-bar');
+    const heldLabel = document.getElementById('held-label');
+    const heldText = document.getElementById('held-text');
+    const heldClear = document.getElementById('held-clear');
     function setContextBar(usage) {
       if (usage && usage.percent != null) contextFill.style.width = usage.percent + '%';
       setStatusChip(usage);
@@ -308,6 +312,24 @@ export function clientScript(wsUrl) {
       s.appendChild(e);
     }
 
+    // Lines typed while a task run owns the session. They are NOT sent yet: the
+    // run's phases are child processes, so sending would open a second turn
+    // beside the run. Held here and steered into the next task turn.
+    let held = [];
+    let runHolding = false;
+    function renderHeld() {
+      if (!held.length) { heldBar.style.display = 'none'; return; }
+      heldBar.style.display = 'flex';
+      heldLabel.textContent = held.length === 1
+        ? 'waiting for the task turn:'
+        : held.length + ' waiting for the task turn:';
+      heldText.textContent = held.join(' · ');
+    }
+    heldClear.addEventListener('click', () => {
+      if (!ws || ws.readyState !== WebSocket.OPEN) return;
+      ws.send(JSON.stringify({ type: 'clear_held' }));
+    });
+
     // Reconcile the composer (input + Send/Stop button) with the current state.
     // The input is disabled ONLY while disconnected or a prompt card is open — a
     // running agent no longer locks it, so messages can steer the live turn.
@@ -316,8 +338,10 @@ export function clientScript(wsUrl) {
       const promptOpen = activePromptId !== null;
       inputEl.disabled = !connected || promptOpen;
       inputEl.placeholder = agentRunning
-        ? 'message the agent — delivered mid-run'
-        : 'type a message\\u2026 (/ for commands)';
+        ? 'message the agent \\u2014 steers the live turn'
+        : (runHolding
+            ? 'task running \\u2014 held for the next task turn'
+            : 'type a message\\u2026 (/ for commands)');
       if (agentRunning && !promptOpen) {
         // Send morphs into a red Stop that interrupts the running turn.
         sendBtn.classList.add('stop');
@@ -858,6 +882,12 @@ export function clientScript(wsUrl) {
 
     function handleMsg(msg) {
       switch (msg.type) {
+        case 'held':
+          held = msg.texts || [];
+          runHolding = !!msg.runActive;
+          renderHeld();
+          refreshComposer();
+          break;
         case 'snapshot': {
           // Authoritative full state on every (re)connect: replace the WHOLE view.
           // This is what kills duplicated transcript / stale-orphaned widgets —
@@ -878,6 +908,9 @@ export function clientScript(wsUrl) {
           setModelName(msg.model);
           if (msg.context) setContextBar(msg.context); else contextFill.style.width = '0%';
           agentRunning = !!msg.agentRunning;
+          held = msg.held || [];
+          runHolding = !!msg.heldRunActive;
+          renderHeld();
           turnHadContent = !!(msg.live && msg.live.parts && msg.live.parts.length);
           if (msg.prompt) showPrompt(msg.prompt);
           refreshComposer();
@@ -1066,8 +1099,10 @@ export function clientScript(wsUrl) {
       // user_message back to every client (us included), which renders the
       // bubble. Don't render it here too, or the sender sees it twice.
       // Mid-run the message steers the live turn (no state change here); when
-      // idle, optimistically show the spinner until agent_start lands.
-      if (!agentRunning) showThinking();
+      // idle, optimistically show the spinner until agent_start lands. While a
+      // task run holds the session nothing starts now — the line is held for the
+      // next task turn, so a spinner would be a lie.
+      if (!agentRunning && !runHolding) showThinking();
     }
 
     sendBtn.addEventListener('click', onSendClick);

package/dist/remote/ui-styles.d.ts

@@ -1 +1 @@
-export declare const STYLES = "    :root {\n      --base: #1e1e2e; --mantle: #181825; --crust: #11111b;\n      --surface0: #313244; --surface1: #45475a; --surface2: #585b70;\n      --text: #cdd6f4; --subtext1: #a6adc8; --subtext0: #7f849c;\n      --mauve: #cba6f7; --blue: #89b4fa; --green: #a6e3a1; --red: #f38ba8;\n      --yellow: #f9e2af; --peach: #fab387; --teal: #94e2d5;\n    }\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n    body {\n      background: var(--base); color: var(--text);\n      font-family: ui-monospace, monospace;\n      /* --app-h is set from window.innerHeight (see setAppHeight) so the column\n         height is a stable pixel value across an orientation change. 100dvh is a\n         fallback for first paint / no-JS: iOS Safari interpolates dvh during the\n         rotation animation, which makes the whole flex column resize repeatedly\n         (\"spazzing out\") \u2014 a fixed px height does not. */\n      height: var(--app-h, 100dvh);\n      display: flex; flex-direction: column; overflow: hidden;\n      padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)\n               0px env(safe-area-inset-left, 0px);\n    }\n    #context-bar { height: 4px; background: var(--surface0); flex-shrink: 0; }\n    #context-bar-fill { height: 100%; background: var(--mauve); width: 0%; transition: width 0.4s ease; }\n    #header {\n      background: var(--mantle); padding: 8px 16px;\n      display: flex; justify-content: space-between; align-items: center;\n      font-size: 13px; flex-shrink: 0; border-bottom: 1px solid var(--surface0);\n    }\n    #header .title { font-weight: bold; color: var(--mauve); letter-spacing: 0.05em;\n      position: relative; animation: glitch 5s steps(1) infinite; }\n    @keyframes glitch {\n      0%, 88%, 100% { text-shadow: none; transform: translate(0, 0); }\n      90% { text-shadow: -1px 0 var(--red), 1px 0 var(--teal); transform: translate(1px, -1px); }\n      92% { text-shadow: 1px 0 var(--red), -1px 0 var(--blue); transform: translate(-1px, 1px); }\n      94% { text-shadow: -1px 0 var(--blue), 1px 0 var(--red); transform: translate(1px, 0); }\n      96% { text-shadow: 1px 0 var(--teal), -1px 0 var(--red); transform: translate(-1px, 0); }\n    }\n    @media (prefers-reduced-motion: reduce) { #header .title { animation: none; } }\n    #header .hgroup { display: flex; align-items: center; gap: 10px; }\n    #bell {\n      background: none; border: none; color: var(--subtext1); cursor: pointer;\n      font-size: 15px; line-height: 1; padding: 2px; font-family: inherit;\n    }\n    #bell:hover { color: var(--text); }\n    #bell.on { color: var(--mauve); }\n    /* Header status chip: connection dot + model name + context usage. */\n    #status-chip { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--subtext0); }\n    #status-dot {\n      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;\n      background: var(--surface2); transition: background 0.2s ease;\n    }\n    #status-dot.idle { background: var(--green); }\n    #status-dot.running { background: var(--mauve); animation: dot-pulse 1.2s ease-in-out infinite; }\n    #status-dot.disconnected { background: var(--red); }\n    @keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }\n    @media (prefers-reduced-motion: reduce) { #status-dot.running { animation: none; } }\n    #status-model { color: var(--subtext1); }\n    #status-model:empty { display: none; }\n    #status-ctx { color: var(--subtext0); font-variant-numeric: tabular-nums; }\n    #status-ctx:empty { display: none; }\n    /* Notification bell dropdown: a push toggle row + the recent-toast history. */\n    #notif-panel {\n      display: none; position: fixed; z-index: 80;\n      top: calc(env(safe-area-inset-top, 0px) + 42px);\n      right: calc(env(safe-area-inset-right, 0px) + 12px);\n      width: min(320px, calc(100vw - 24px));\n      background: var(--mantle); border: 1px solid var(--surface1); border-radius: 8px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); overflow: hidden;\n    }\n    #notif-panel.open { display: block; }\n    #notif-toggle-row {\n      display: flex; align-items: center; justify-content: space-between;\n      padding: 8px 12px; border-bottom: 1px solid var(--surface0);\n    }\n    #notif-title { font-size: 12px; color: var(--subtext1); font-weight: 700; }\n    #notif-toggle {\n      background: var(--surface1); color: var(--text); border: none; border-radius: 6px;\n      padding: 4px 10px; font-family: inherit; font-size: 11px; cursor: pointer;\n    }\n    #notif-toggle:hover { filter: brightness(1.1); }\n    #notif-toggle.on { background: var(--mauve); color: var(--crust); font-weight: 700; }\n    #notif-list { max-height: 40dvh; overflow-y: auto; }\n    #notif-empty { padding: 14px 12px; color: var(--subtext0); font-size: 11px; text-align: center; }\n    .notif-item {\n      display: flex; align-items: baseline; gap: 8px; padding: 7px 12px;\n      border-bottom: 1px solid var(--surface0); font-size: 12px;\n    }\n    .notif-item:last-child { border-bottom: none; }\n    .notif-item .notif-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--blue); align-self: center; }\n    .notif-item.warning .notif-dot { background: var(--peach); }\n    .notif-item.error .notif-dot { background: var(--red); }\n    .notif-item .notif-msg { flex: 1; min-width: 0; color: var(--text); overflow-wrap: anywhere; word-break: break-word; }\n    .notif-item .notif-time { flex-shrink: 0; color: var(--subtext0); font-size: 10px; font-variant-numeric: tabular-nums; }\n    #chat-wrap { position: relative; flex: 1; min-height: 0; display: flex; }\n    #chat-log {\n      flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 16px;\n      display: flex; flex-direction: column; gap: 8px;\n    }\n    /* Floating jump-to-latest button \u2014 only shown when scrolled away from the\n       bottom (toggled via .visible from the scroll handler). */\n    #scroll-bottom {\n      display: none; position: absolute; bottom: 16px; right: 16px; z-index: 40;\n      width: 36px; height: 36px; border-radius: 50%; cursor: pointer;\n      background: var(--surface1); color: var(--text); border: 1px solid var(--surface2);\n      font-family: inherit; font-size: 18px; line-height: 1; padding: 0;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n    }\n    #scroll-bottom:hover { background: var(--surface2); color: var(--mauve); }\n    #scroll-bottom.visible { display: block; }\n    #chat-log::-webkit-scrollbar { width: 6px; }\n    #chat-log::-webkit-scrollbar-track { background: transparent; }\n    #chat-log::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 3px; }\n    .bubble {\n      max-width: 82%; padding: 8px 12px; border-radius: 8px;\n      line-height: 1.6; white-space: pre-wrap; word-break: break-word; font-size: 13px;\n    }\n    .bubble.user { background: var(--surface1); color: var(--text); align-self: flex-end; }\n    .bubble.assistant { background: var(--surface0); color: var(--text); align-self: flex-start; position: relative; }\n    .bubble.error {\n      background: var(--crust); color: var(--red); align-self: stretch;\n      max-width: 100%; border: 1px solid var(--red); font-size: 12px;\n    }\n    /* Persistent inline system note (e.g. context compaction) \u2014 a muted centered\n       divider, distinct from chat bubbles. */\n    .sysnote {\n      align-self: center; color: var(--subtext0); font-size: 11px;\n      font-family: ui-monospace, monospace; letter-spacing: 0.5px;\n      padding: 2px 10px; opacity: 0.85;\n    }\n    .bubble.thinking {\n      display: flex; gap: 5px; align-items: center; padding: 10px 14px;\n    }\n    .bubble.thinking .spinner {\n      color: var(--mauve); font-size: 15px; line-height: 1;\n      font-family: ui-monospace, monospace;\n    }\n    /* Collapsed reasoning block (\"\u273B Thinking\u2026 (n lines)\"), muted + italic. */\n    .thinking-block { align-self: flex-start; max-width: 90%; font-size: 12px; }\n    .thinking-block > summary {\n      color: var(--subtext0); font-style: italic; cursor: pointer; list-style: none;\n      user-select: none; display: flex; align-items: center; gap: 8px; padding: 2px 0;\n    }\n    .thinking-block > summary::-webkit-details-marker { display: none; }\n    .thinking-block .thinking-spin {\n      color: var(--mauve); font-style: normal; font-family: ui-monospace, monospace;\n    }\n    .thinking-block .thinking-body {\n      color: var(--subtext0); font-style: italic; white-space: pre-wrap;\n      word-break: break-word; line-height: 1.5; margin: 4px 0 0 4px;\n      padding: 4px 0 2px 12px; border-left: 2px solid var(--surface1);\n    }\n    /* Copy buttons: on code-block headers and (floating) on finished assistant\n       bubbles. Wired by one delegated click handler in the client script. */\n    .copy-btn {\n      background: transparent; border: none; color: var(--subtext0); cursor: pointer;\n      font-family: inherit; font-size: 11px; padding: 2px 6px; border-radius: 4px;\n      line-height: 1.4;\n    }\n    .copy-btn:hover { color: var(--text); background: var(--surface1); }\n    .copy-btn.copied { color: var(--green); }\n    .bubble-copy {\n      position: absolute; top: 4px; right: 4px; opacity: 0;\n      background: var(--surface1); transition: opacity 0.12s ease;\n    }\n    .bubble.assistant:hover .bubble-copy { opacity: 1; }\n    /* Touch devices have no hover \u2014 keep the button faintly visible. */\n    @media (hover: none) { .bubble-copy { opacity: 0.55; } }\n    .tool-call {\n      background: var(--crust); border-radius: 6px; align-self: flex-start;\n      max-width: 90%; font-size: 12px; border: 1px solid var(--surface0);\n    }\n    .tool-call summary {\n      padding: 6px 10px; color: var(--subtext1); cursor: pointer;\n      user-select: none; list-style: none;\n      display: flex; align-items: center; gap: 8px;\n    }\n    .tool-call summary::-webkit-details-marker { display: none; }\n    .tool-call summary::before { content: \"\u25B6\"; flex-shrink: 0; font-size: 9px; color: var(--subtext0); }\n    .tool-call[open] > summary::before { content: \"\u25BC\"; }\n    .tool-call.error > summary { color: var(--red); }\n    /* The summary is a single line: the label ellipsizes (full text in the title\n       tooltip / on expand), badges and timing stay pinned to the right. */\n    .tool-label {\n      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n      font-family: ui-monospace, monospace;\n    }\n    .tool-badge { flex-shrink: 0; color: var(--subtext0); font-size: 11px; }\n    .tool-elapsed { flex-shrink: 0; color: var(--subtext0); font-size: 11px; }\n    .tool-call pre {\n      padding: 8px 12px; overflow-y: auto;\n      color: var(--subtext1); font-size: 11px; max-height: 280px;\n      border-top: 1px solid var(--surface0);\n      white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;\n    }\n    .tool-spin { color: var(--mauve); flex-shrink: 0; font-family: ui-monospace, monospace; font-size: 13px; }\n    /* Line diff for edit/write tools (tints derived from --green/--red). */\n    .tool-diff { border-top: 1px solid var(--surface0); overflow-x: auto; }\n    .diff { font-family: ui-monospace, monospace; font-size: 11px; padding: 4px 0; }\n    .diff-line { white-space: pre; padding: 0 10px; }\n    .diff-sign { display: inline-block; width: 1ch; margin-right: 8px; color: var(--subtext0); }\n    .diff-add { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }\n    .diff-del { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }\n    .diff-ctx { color: var(--subtext1); }\n    .code-block {\n      background: var(--crust); border: 1px solid var(--surface0);\n      border-radius: 6px; overflow: hidden; margin: 4px 0;\n      align-self: stretch; max-width: 100%; font-size: 12px;\n    }\n    /* Header row above a code block: language label on the left, copy button on\n       the right (the surface bar that used to live on .code-lang). */\n    .code-head {\n      display: flex; align-items: center; justify-content: space-between;\n      background: var(--surface0);\n    }\n    .code-lang {\n      color: var(--subtext0); font-size: 10px; padding: 3px 10px; letter-spacing: 0.05em;\n    }\n    .code-head .copy-btn { padding: 3px 10px; }\n    .code-block code {\n      display: block; padding: 10px 12px; overflow-x: auto;\n      color: var(--text); white-space: pre; line-height: 1.55;\n    }\n    .hl-kw  { color: var(--mauve); }\n    .hl-str { color: var(--green); }\n    .hl-cmt { color: var(--subtext0); font-style: italic; }\n    .hl-num { color: var(--blue); }\n    .hl-fn  { color: var(--yellow); }\n    /* Hand-rolled markdown, applied only to assistant bubbles + the recommendation\n       panel (both get the .md class from setContent). Block elements lay themselves\n       out, so switch off the container's pre-wrap for these. */\n    .md { white-space: normal; }\n    .md > :first-child { margin-top: 0; }\n    .md > :last-child { margin-bottom: 0; }\n    .md .md-h { color: var(--mauve); font-weight: 700; line-height: 1.3; margin: 10px 0 4px; }\n    .md .md-h1 { font-size: 1.35em; }\n    .md .md-h2 { font-size: 1.2em; }\n    .md .md-h3 { font-size: 1.08em; }\n    .md .md-h4, .md .md-h5, .md .md-h6 { font-size: 1em; }\n    .md .md-p { margin: 6px 0; }\n    .md .md-list { margin: 6px 0; padding-left: 22px; }\n    .md .md-list li { margin: 2px 0; }\n    .md .md-task { list-style: none; margin-left: -22px; }\n    .md .md-check { color: var(--green); }\n    .md .md-quote { border-left: 3px solid var(--surface2); margin: 6px 0; padding: 2px 0 2px 10px; color: var(--subtext1); }\n    .md .md-hr { border: none; border-top: 1px solid var(--surface1); margin: 10px 0; }\n    .md a { color: var(--blue); text-decoration: underline; }\n    .md strong { color: var(--text); font-weight: 700; }\n    .md em { font-style: italic; }\n    .md del { color: var(--subtext0); }\n    .md .md-code {\n      background: var(--crust); border: 1px solid var(--surface0);\n      border-radius: 4px; padding: 1px 4px; font-size: 0.92em;\n    }\n    .md .md-table { border-collapse: collapse; margin: 8px 0; font-size: 0.95em; display: block; overflow-x: auto; }\n    .md .md-table th, .md .md-table td { border: 1px solid var(--surface1); padding: 4px 8px; text-align: left; }\n    .md .md-table th { background: var(--surface0); color: var(--subtext1); }\n    #input-bar {\n      background: var(--mantle); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));\n      display: flex; gap: 8px; flex-shrink: 0;\n      border-top: 1px solid var(--surface0);\n      position: relative;\n    }\n    #cmd-suggestions {\n      display: none; position: absolute; bottom: 100%; left: 16px; right: 16px;\n      background: var(--mantle); border: 1px solid var(--surface1);\n      border-bottom: none; border-radius: 8px 8px 0 0;\n      overflow: hidden; z-index: 10;\n    }\n    .cmd-item {\n      display: flex; align-items: baseline; gap: 10px;\n      padding: 7px 12px; cursor: pointer; font-size: 12px;\n      border-bottom: 1px solid var(--surface0);\n    }\n    .cmd-item:last-child { border-bottom: none; }\n    .cmd-item:hover, .cmd-item.active { background: var(--surface0); }\n    .cmd-item .cmd-name { color: var(--blue); font-weight: bold; flex-shrink: 0; }\n    .cmd-item .cmd-desc { color: var(--subtext0); }\n    #input {\n      flex: 1; background: var(--surface0); color: var(--text);\n      border: none; border-radius: 6px; padding: 8px 12px;\n      font-family: inherit; font-size: 13px; resize: none;\n      outline: none; line-height: 1.5; min-height: 36px; max-height: 120px;\n    }\n    #input::placeholder { color: var(--subtext0); }\n    #input:focus { box-shadow: 0 0 0 1px var(--mauve); }\n    #send {\n      background: var(--blue); color: var(--crust); border: none;\n      border-radius: 6px; padding: 8px 16px; font-weight: bold;\n      cursor: pointer; font-size: 13px; font-family: inherit;\n      white-space: nowrap; align-self: flex-end;\n    }\n    #send:disabled, #input:disabled { opacity: 0.45; cursor: not-allowed; }\n    /* While the agent runs, Send becomes a red Stop; the armed (tap-to-confirm)\n       state brightens it and adds a halo, mirroring the prompt card's cancel. */\n    #send.stop { background: var(--red); color: var(--crust); }\n    #send.stop.armed {\n      filter: brightness(1.12);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 45%, transparent);\n    }\n    #reconnect-overlay {\n      display: none; position: fixed; inset: 0;\n      background: rgba(30,30,46,0.88); color: var(--subtext1);\n      justify-content: center; align-items: center;\n      font-size: 13px; z-index: 100; letter-spacing: 0.03em;\n    }\n    #reconnect-overlay.visible { display: flex; }\n    /* Trailing stream indicator: the same braille spinner as the thinking bubble,\n       inline at the end of the streaming text (not a green blinking block). */\n    .cursor {\n      color: var(--mauve); margin-left: 2px;\n      font-family: ui-monospace, monospace;\n    }\n    #status-panel { padding: 6px 12px; border-bottom: 1px solid var(--surface1);\n      color: var(--subtext1); white-space: pre-wrap; font-size: 13px; display: none; }\n    /* Structured task widget (progress bar + phase badge + elapsed). Replaces the\n       plain text lines when the server sends a structured data payload. */\n    #status-panel.structured { white-space: normal; display: block; }\n    /* Title gets its own line and wraps (clamped to 2) \u2014 never truncated to a stub\n       the way the old single-row flex layout squeezed it on narrow/mobile widths. */\n    .widget-title { display: -webkit-box; -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--text);\n      font-size: 13px; line-height: 1.3; word-break: break-word; }\n    .widget-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; }\n    .widget-phase { flex-shrink: 0; background: var(--surface0); color: var(--mauve);\n      border-radius: 4px; padding: 1px 7px; font-size: 10px; letter-spacing: 0.03em;\n      text-transform: uppercase; }\n    .widget-step { flex-shrink: 0; color: var(--subtext0); font-size: 11px;\n      font-variant-numeric: tabular-nums; }\n    .widget-elapsed { flex-shrink: 0; margin-left: auto; color: var(--subtext0);\n      font-size: 11px; font-variant-numeric: tabular-nums; }\n    .widget-bar { height: 4px; background: var(--surface0); border-radius: 2px;\n      overflow: hidden; margin-top: 6px; }\n    /* Fill carries a soft highlight band that sweeps left\u2192right through the mauve,\n       so the bar reads as \"working\" even while the step count holds still. The\n       gradient tile is 2x the fill width and shifts one full period per cycle,\n       so the loop is seamless. Base color stays mauve for reduced-motion. */\n    .widget-bar-fill { height: 100%; border-radius: 2px;\n      background: linear-gradient(90deg,\n        var(--mauve) 0%, var(--mauve) 38%, #ecdcfd 50%,\n        var(--mauve) 62%, var(--mauve) 100%);\n      background-size: 200% 100%;\n      box-shadow: 0 0 6px rgba(203, 166, 247, 0.45);\n      animation: bar-flow 2.4s linear infinite;\n      transition: width 0.3s ease; }\n    @keyframes bar-flow {\n      from { background-position: 200% 0; }\n      to { background-position: 0% 0; }\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .widget-bar-fill { animation: none; background: var(--mauve); }\n    }\n    /* Current action \u2014 the terminal's \u21B3 worker trailer, one dim ellipsized line. */\n    .widget-action { margin-top: 6px; color: var(--subtext0); font-size: 11px;\n      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n      font-variant-numeric: tabular-nums; }\n    /* Dim per-turn timestamp shown under a committed turn's bubble. */\n    .turn-time { font-size: 10px; color: var(--subtext0); opacity: 0.55; padding: 0 4px;\n      margin-top: -2px; }\n    .turn-time.user { align-self: flex-end; }\n    .turn-time.assistant, .turn-time.system { align-self: flex-start; }\n    .turn-time.system { align-self: center; }\n    #prompt-card { position: fixed; left: 0; right: 0; bottom: 0; background: var(--mantle);\n      border-top: 2px solid var(--mauve); padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));\n      display: none; z-index: 50; max-height: 80dvh; overflow-y: auto; }\n    #prompt-card .q-label { color: var(--mauve); font-size: 11px; font-weight: 700;\n      text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }\n    #prompt-card .q { color: var(--text); margin-bottom: 12px; white-space: pre-wrap;\n      font-size: 15px; line-height: 1.5; }\n    #prompt-card .rec-panel { background: var(--surface0); border-left: 3px solid var(--green);\n      border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; }\n    #prompt-card .rec-label { color: var(--green); font-size: 11px; font-weight: 700;\n      text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }\n    #prompt-card .rec-text { color: var(--text); font-size: 15px; line-height: 1.5;\n      white-space: pre-wrap; overflow-wrap: anywhere; }\n    #prompt-card textarea { width: 100%; background: var(--surface0); color: var(--text);\n      border: 1px solid var(--surface2); border-radius: 6px; padding: 10px; font-size: 15px;\n      font-family: inherit; line-height: 1.5; resize: vertical; margin-bottom: 4px; }\n    #prompt-card .row { display: flex; gap: 8px; margin-top: 12px; align-items: stretch;\n      flex-wrap: wrap; }\n    /* Recommendation answers can be long sentences, so stack them as a readable list. */\n    #prompt-card .row.stacked { flex-direction: column; align-items: stretch; }\n    #prompt-card .row.stacked button { flex: none; text-align: left; }\n    #prompt-card .row.stacked button.cancel { align-self: center; text-align: center; }\n    #prompt-card button { padding: 11px 16px; border-radius: 8px; border: none; cursor: pointer;\n      font-family: inherit; font-size: 14px; font-weight: 600; transition: filter .15s ease; }\n    #prompt-card button:hover { filter: brightness(1.08); }\n    #prompt-card button.primary { background: var(--green); color: var(--crust);\n      font-weight: 700; flex: 1; min-width: 160px; }\n    #prompt-card button.secondary { background: var(--surface1); color: var(--text);\n      flex: 1; min-width: 160px; }\n    #prompt-card button.cancel { margin-left: auto; align-self: center; background: transparent;\n      color: var(--subtext0); font-size: 12px; font-weight: 500; padding: 8px 10px; }\n    #prompt-card button.cancel:hover { color: var(--red); filter: none; }\n    #prompt-card button.cancel.armed { background: var(--red); color: var(--crust); font-weight: 700; }\n    .toast { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px);\n      right: calc(env(safe-area-inset-right, 0px) + 12px); max-width: calc(100vw - 24px);\n      padding: 8px 12px; border-radius: 6px; overflow-wrap: anywhere; word-break: break-word;\n      background: var(--surface1); color: var(--text); z-index: 60; }\n    .toast.warning { background: var(--peach); color: var(--crust); }\n    .toast.error { background: var(--red); color: var(--crust); }\n    #viewer { position: fixed; inset: 24px; background: var(--mantle); border: 1px solid var(--surface2);\n      border-radius: 8px; padding: 16px; overflow: auto; white-space: pre-wrap;\n      overflow-wrap: anywhere; word-break: break-word; display: none; z-index: 70; }\n    #viewer .close { position: absolute; top: 8px; right: 12px; cursor: pointer; color: var(--subtext0); }\n    /* Desktop: center the transcript/status/input in a readable column instead of\n       hugging the left edge. The scrollbar stays at the true window edge; only the\n       content is inset. Mobile (below 960px) is unchanged. */\n    @media (min-width: 960px) {\n      #chat-log { padding-left: calc((100% - 920px) / 2); padding-right: calc((100% - 920px) / 2); }\n      #status-panel { padding-left: calc((100% - 920px) / 2 + 12px); padding-right: calc((100% - 920px) / 2 + 12px); }\n      #input-bar { padding-left: calc((100% - 920px) / 2); padding-right: calc((100% - 920px) / 2); }\n      #cmd-suggestions { left: calc((100% - 920px) / 2 + 16px); right: calc((100% - 920px) / 2 + 16px); }\n    }";
+export declare const STYLES = "    :root {\n      --base: #1e1e2e; --mantle: #181825; --crust: #11111b;\n      --surface0: #313244; --surface1: #45475a; --surface2: #585b70;\n      --text: #cdd6f4; --subtext1: #a6adc8; --subtext0: #7f849c;\n      --mauve: #cba6f7; --blue: #89b4fa; --green: #a6e3a1; --red: #f38ba8;\n      --yellow: #f9e2af; --peach: #fab387; --teal: #94e2d5;\n    }\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n    body {\n      background: var(--base); color: var(--text);\n      font-family: ui-monospace, monospace;\n      /* --app-h is set from window.innerHeight (see setAppHeight) so the column\n         height is a stable pixel value across an orientation change. 100dvh is a\n         fallback for first paint / no-JS: iOS Safari interpolates dvh during the\n         rotation animation, which makes the whole flex column resize repeatedly\n         (\"spazzing out\") \u2014 a fixed px height does not. */\n      height: var(--app-h, 100dvh);\n      display: flex; flex-direction: column; overflow: hidden;\n      padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)\n               0px env(safe-area-inset-left, 0px);\n    }\n    #context-bar { height: 4px; background: var(--surface0); flex-shrink: 0; }\n    #context-bar-fill { height: 100%; background: var(--mauve); width: 0%; transition: width 0.4s ease; }\n    #header {\n      background: var(--mantle); padding: 8px 16px;\n      display: flex; justify-content: space-between; align-items: center;\n      font-size: 13px; flex-shrink: 0; border-bottom: 1px solid var(--surface0);\n    }\n    #header .title { font-weight: bold; color: var(--mauve); letter-spacing: 0.05em;\n      position: relative; animation: glitch 5s steps(1) infinite; }\n    @keyframes glitch {\n      0%, 88%, 100% { text-shadow: none; transform: translate(0, 0); }\n      90% { text-shadow: -1px 0 var(--red), 1px 0 var(--teal); transform: translate(1px, -1px); }\n      92% { text-shadow: 1px 0 var(--red), -1px 0 var(--blue); transform: translate(-1px, 1px); }\n      94% { text-shadow: -1px 0 var(--blue), 1px 0 var(--red); transform: translate(1px, 0); }\n      96% { text-shadow: 1px 0 var(--teal), -1px 0 var(--red); transform: translate(-1px, 0); }\n    }\n    @media (prefers-reduced-motion: reduce) { #header .title { animation: none; } }\n    #header .hgroup { display: flex; align-items: center; gap: 10px; }\n    #bell {\n      background: none; border: none; color: var(--subtext1); cursor: pointer;\n      font-size: 15px; line-height: 1; padding: 2px; font-family: inherit;\n    }\n    #bell:hover { color: var(--text); }\n    #bell.on { color: var(--mauve); }\n    /* Header status chip: connection dot + model name + context usage. */\n    #status-chip { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--subtext0); }\n    #status-dot {\n      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;\n      background: var(--surface2); transition: background 0.2s ease;\n    }\n    #status-dot.idle { background: var(--green); }\n    #status-dot.running { background: var(--mauve); animation: dot-pulse 1.2s ease-in-out infinite; }\n    #status-dot.disconnected { background: var(--red); }\n    @keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }\n    @media (prefers-reduced-motion: reduce) { #status-dot.running { animation: none; } }\n    #status-model { color: var(--subtext1); }\n    #status-model:empty { display: none; }\n    #status-ctx { color: var(--subtext0); font-variant-numeric: tabular-nums; }\n    #status-ctx:empty { display: none; }\n    /* Notification bell dropdown: a push toggle row + the recent-toast history. */\n    #notif-panel {\n      display: none; position: fixed; z-index: 80;\n      top: calc(env(safe-area-inset-top, 0px) + 42px);\n      right: calc(env(safe-area-inset-right, 0px) + 12px);\n      width: min(320px, calc(100vw - 24px));\n      background: var(--mantle); border: 1px solid var(--surface1); border-radius: 8px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); overflow: hidden;\n    }\n    #notif-panel.open { display: block; }\n    #notif-toggle-row {\n      display: flex; align-items: center; justify-content: space-between;\n      padding: 8px 12px; border-bottom: 1px solid var(--surface0);\n    }\n    #notif-title { font-size: 12px; color: var(--subtext1); font-weight: 700; }\n    #notif-toggle {\n      background: var(--surface1); color: var(--text); border: none; border-radius: 6px;\n      padding: 4px 10px; font-family: inherit; font-size: 11px; cursor: pointer;\n    }\n    #notif-toggle:hover { filter: brightness(1.1); }\n    #notif-toggle.on { background: var(--mauve); color: var(--crust); font-weight: 700; }\n    #notif-list { max-height: 40dvh; overflow-y: auto; }\n    #notif-empty { padding: 14px 12px; color: var(--subtext0); font-size: 11px; text-align: center; }\n    .notif-item {\n      display: flex; align-items: baseline; gap: 8px; padding: 7px 12px;\n      border-bottom: 1px solid var(--surface0); font-size: 12px;\n    }\n    .notif-item:last-child { border-bottom: none; }\n    .notif-item .notif-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--blue); align-self: center; }\n    .notif-item.warning .notif-dot { background: var(--peach); }\n    .notif-item.error .notif-dot { background: var(--red); }\n    .notif-item .notif-msg { flex: 1; min-width: 0; color: var(--text); overflow-wrap: anywhere; word-break: break-word; }\n    .notif-item .notif-time { flex-shrink: 0; color: var(--subtext0); font-size: 10px; font-variant-numeric: tabular-nums; }\n    #chat-wrap { position: relative; flex: 1; min-height: 0; display: flex; }\n    #chat-log {\n      flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 16px;\n      display: flex; flex-direction: column; gap: 8px;\n    }\n    /* Floating jump-to-latest button \u2014 only shown when scrolled away from the\n       bottom (toggled via .visible from the scroll handler). */\n    #scroll-bottom {\n      display: none; position: absolute; bottom: 16px; right: 16px; z-index: 40;\n      width: 36px; height: 36px; border-radius: 50%; cursor: pointer;\n      background: var(--surface1); color: var(--text); border: 1px solid var(--surface2);\n      font-family: inherit; font-size: 18px; line-height: 1; padding: 0;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n    }\n    #scroll-bottom:hover { background: var(--surface2); color: var(--mauve); }\n    #scroll-bottom.visible { display: block; }\n    #chat-log::-webkit-scrollbar { width: 6px; }\n    #chat-log::-webkit-scrollbar-track { background: transparent; }\n    #chat-log::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 3px; }\n    .bubble {\n      max-width: 82%; padding: 8px 12px; border-radius: 8px;\n      line-height: 1.6; white-space: pre-wrap; word-break: break-word; font-size: 13px;\n    }\n    .bubble.user { background: var(--surface1); color: var(--text); align-self: flex-end; }\n    .bubble.assistant { background: var(--surface0); color: var(--text); align-self: flex-start; position: relative; }\n    .bubble.error {\n      background: var(--crust); color: var(--red); align-self: stretch;\n      max-width: 100%; border: 1px solid var(--red); font-size: 12px;\n    }\n    /* Persistent inline system note (e.g. context compaction) \u2014 a muted centered\n       divider, distinct from chat bubbles. */\n    .sysnote {\n      align-self: center; color: var(--subtext0); font-size: 11px;\n      font-family: ui-monospace, monospace; letter-spacing: 0.5px;\n      padding: 2px 10px; opacity: 0.85;\n    }\n    .bubble.thinking {\n      display: flex; gap: 5px; align-items: center; padding: 10px 14px;\n    }\n    .bubble.thinking .spinner {\n      color: var(--mauve); font-size: 15px; line-height: 1;\n      font-family: ui-monospace, monospace;\n    }\n    /* Collapsed reasoning block (\"\u273B Thinking\u2026 (n lines)\"), muted + italic. */\n    .thinking-block { align-self: flex-start; max-width: 90%; font-size: 12px; }\n    .thinking-block > summary {\n      color: var(--subtext0); font-style: italic; cursor: pointer; list-style: none;\n      user-select: none; display: flex; align-items: center; gap: 8px; padding: 2px 0;\n    }\n    .thinking-block > summary::-webkit-details-marker { display: none; }\n    .thinking-block .thinking-spin {\n      color: var(--mauve); font-style: normal; font-family: ui-monospace, monospace;\n    }\n    .thinking-block .thinking-body {\n      color: var(--subtext0); font-style: italic; white-space: pre-wrap;\n      word-break: break-word; line-height: 1.5; margin: 4px 0 0 4px;\n      padding: 4px 0 2px 12px; border-left: 2px solid var(--surface1);\n    }\n    /* Copy buttons: on code-block headers and (floating) on finished assistant\n       bubbles. Wired by one delegated click handler in the client script. */\n    .copy-btn {\n      background: transparent; border: none; color: var(--subtext0); cursor: pointer;\n      font-family: inherit; font-size: 11px; padding: 2px 6px; border-radius: 4px;\n      line-height: 1.4;\n    }\n    .copy-btn:hover { color: var(--text); background: var(--surface1); }\n    .copy-btn.copied { color: var(--green); }\n    .bubble-copy {\n      position: absolute; top: 4px; right: 4px; opacity: 0;\n      background: var(--surface1); transition: opacity 0.12s ease;\n    }\n    .bubble.assistant:hover .bubble-copy { opacity: 1; }\n    /* Touch devices have no hover \u2014 keep the button faintly visible. */\n    @media (hover: none) { .bubble-copy { opacity: 0.55; } }\n    .tool-call {\n      background: var(--crust); border-radius: 6px; align-self: flex-start;\n      max-width: 90%; font-size: 12px; border: 1px solid var(--surface0);\n    }\n    .tool-call summary {\n      padding: 6px 10px; color: var(--subtext1); cursor: pointer;\n      user-select: none; list-style: none;\n      display: flex; align-items: center; gap: 8px;\n    }\n    .tool-call summary::-webkit-details-marker { display: none; }\n    .tool-call summary::before { content: \"\u25B6\"; flex-shrink: 0; font-size: 9px; color: var(--subtext0); }\n    .tool-call[open] > summary::before { content: \"\u25BC\"; }\n    .tool-call.error > summary { color: var(--red); }\n    /* The summary is a single line: the label ellipsizes (full text in the title\n       tooltip / on expand), badges and timing stay pinned to the right. */\n    .tool-label {\n      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n      font-family: ui-monospace, monospace;\n    }\n    .tool-badge { flex-shrink: 0; color: var(--subtext0); font-size: 11px; }\n    .tool-elapsed { flex-shrink: 0; color: var(--subtext0); font-size: 11px; }\n    .tool-call pre {\n      padding: 8px 12px; overflow-y: auto;\n      color: var(--subtext1); font-size: 11px; max-height: 280px;\n      border-top: 1px solid var(--surface0);\n      white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;\n    }\n    .tool-spin { color: var(--mauve); flex-shrink: 0; font-family: ui-monospace, monospace; font-size: 13px; }\n    /* Line diff for edit/write tools (tints derived from --green/--red). */\n    .tool-diff { border-top: 1px solid var(--surface0); overflow-x: auto; }\n    .diff { font-family: ui-monospace, monospace; font-size: 11px; padding: 4px 0; }\n    .diff-line { white-space: pre; padding: 0 10px; }\n    .diff-sign { display: inline-block; width: 1ch; margin-right: 8px; color: var(--subtext0); }\n    .diff-add { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }\n    .diff-del { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }\n    .diff-ctx { color: var(--subtext1); }\n    .code-block {\n      background: var(--crust); border: 1px solid var(--surface0);\n      border-radius: 6px; overflow: hidden; margin: 4px 0;\n      align-self: stretch; max-width: 100%; font-size: 12px;\n    }\n    /* Header row above a code block: language label on the left, copy button on\n       the right (the surface bar that used to live on .code-lang). */\n    .code-head {\n      display: flex; align-items: center; justify-content: space-between;\n      background: var(--surface0);\n    }\n    .code-lang {\n      color: var(--subtext0); font-size: 10px; padding: 3px 10px; letter-spacing: 0.05em;\n    }\n    .code-head .copy-btn { padding: 3px 10px; }\n    .code-block code {\n      display: block; padding: 10px 12px; overflow-x: auto;\n      color: var(--text); white-space: pre; line-height: 1.55;\n    }\n    .hl-kw  { color: var(--mauve); }\n    .hl-str { color: var(--green); }\n    .hl-cmt { color: var(--subtext0); font-style: italic; }\n    .hl-num { color: var(--blue); }\n    .hl-fn  { color: var(--yellow); }\n    /* Hand-rolled markdown, applied only to assistant bubbles + the recommendation\n       panel (both get the .md class from setContent). Block elements lay themselves\n       out, so switch off the container's pre-wrap for these. */\n    .md { white-space: normal; }\n    .md > :first-child { margin-top: 0; }\n    .md > :last-child { margin-bottom: 0; }\n    .md .md-h { color: var(--mauve); font-weight: 700; line-height: 1.3; margin: 10px 0 4px; }\n    .md .md-h1 { font-size: 1.35em; }\n    .md .md-h2 { font-size: 1.2em; }\n    .md .md-h3 { font-size: 1.08em; }\n    .md .md-h4, .md .md-h5, .md .md-h6 { font-size: 1em; }\n    .md .md-p { margin: 6px 0; }\n    .md .md-list { margin: 6px 0; padding-left: 22px; }\n    .md .md-list li { margin: 2px 0; }\n    .md .md-task { list-style: none; margin-left: -22px; }\n    .md .md-check { color: var(--green); }\n    .md .md-quote { border-left: 3px solid var(--surface2); margin: 6px 0; padding: 2px 0 2px 10px; color: var(--subtext1); }\n    .md .md-hr { border: none; border-top: 1px solid var(--surface1); margin: 10px 0; }\n    .md a { color: var(--blue); text-decoration: underline; }\n    .md strong { color: var(--text); font-weight: 700; }\n    .md em { font-style: italic; }\n    .md del { color: var(--subtext0); }\n    .md .md-code {\n      background: var(--crust); border: 1px solid var(--surface0);\n      border-radius: 4px; padding: 1px 4px; font-size: 0.92em;\n    }\n    .md .md-table { border-collapse: collapse; margin: 8px 0; font-size: 0.95em; display: block; overflow-x: auto; }\n    .md .md-table th, .md .md-table td { border: 1px solid var(--surface1); padding: 4px 8px; text-align: left; }\n    .md .md-table th { background: var(--surface0); color: var(--subtext1); }\n    #input-bar {\n      background: var(--mantle); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));\n      display: flex; gap: 8px; flex-shrink: 0;\n      border-top: 1px solid var(--surface0);\n      position: relative;\n    }\n    /* Held mid-run input: what you typed is waiting for the next task turn. */\n    #held-bar {\n      position: absolute; bottom: 100%; left: 16px; right: 16px;\n      display: flex; align-items: center; gap: 8px;\n      background: var(--mantle); border: 1px solid var(--surface1);\n      border-bottom: none; border-radius: 8px 8px 0 0;\n      padding: 6px 10px; font-size: 12px; z-index: 9;\n    }\n    #held-label { color: var(--yellow); white-space: nowrap; }\n    #held-text {\n      color: var(--subtext0); overflow: hidden; text-overflow: ellipsis;\n      white-space: nowrap; flex: 1;\n    }\n    #held-clear {\n      background: none; border: none; color: var(--subtext0);\n      cursor: pointer; font-size: 13px; padding: 0 2px;\n    }\n    #held-clear:hover { color: var(--red); }\n    #cmd-suggestions {\n      display: none; position: absolute; bottom: 100%; left: 16px; right: 16px;\n      background: var(--mantle); border: 1px solid var(--surface1);\n      border-bottom: none; border-radius: 8px 8px 0 0;\n      overflow: hidden; z-index: 10;\n    }\n    .cmd-item {\n      display: flex; align-items: baseline; gap: 10px;\n      padding: 7px 12px; cursor: pointer; font-size: 12px;\n      border-bottom: 1px solid var(--surface0);\n    }\n    .cmd-item:last-child { border-bottom: none; }\n    .cmd-item:hover, .cmd-item.active { background: var(--surface0); }\n    .cmd-item .cmd-name { color: var(--blue); font-weight: bold; flex-shrink: 0; }\n    .cmd-item .cmd-desc { color: var(--subtext0); }\n    #input {\n      flex: 1; background: var(--surface0); color: var(--text);\n      border: none; border-radius: 6px; padding: 8px 12px;\n      font-family: inherit; font-size: 13px; resize: none;\n      outline: none; line-height: 1.5; min-height: 36px; max-height: 120px;\n    }\n    #input::placeholder { color: var(--subtext0); }\n    #input:focus { box-shadow: 0 0 0 1px var(--mauve); }\n    #send {\n      background: var(--blue); color: var(--crust); border: none;\n      border-radius: 6px; padding: 8px 16px; font-weight: bold;\n      cursor: pointer; font-size: 13px; font-family: inherit;\n      white-space: nowrap; align-self: flex-end;\n    }\n    #send:disabled, #input:disabled { opacity: 0.45; cursor: not-allowed; }\n    /* While the agent runs, Send becomes a red Stop; the armed (tap-to-confirm)\n       state brightens it and adds a halo, mirroring the prompt card's cancel. */\n    #send.stop { background: var(--red); color: var(--crust); }\n    #send.stop.armed {\n      filter: brightness(1.12);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 45%, transparent);\n    }\n    #reconnect-overlay {\n      display: none; position: fixed; inset: 0;\n      background: rgba(30,30,46,0.88); color: var(--subtext1);\n      justify-content: center; align-items: center;\n      font-size: 13px; z-index: 100; letter-spacing: 0.03em;\n    }\n    #reconnect-overlay.visible { display: flex; }\n    /* Trailing stream indicator: the same braille spinner as the thinking bubble,\n       inline at the end of the streaming text (not a green blinking block). */\n    .cursor {\n      color: var(--mauve); margin-left: 2px;\n      font-family: ui-monospace, monospace;\n    }\n    #status-panel { padding: 6px 12px; border-bottom: 1px solid var(--surface1);\n      color: var(--subtext1); white-space: pre-wrap; font-size: 13px; display: none; }\n    /* Structured task widget (progress bar + phase badge + elapsed). Replaces the\n       plain text lines when the server sends a structured data payload. */\n    #status-panel.structured { white-space: normal; display: block; }\n    /* Title gets its own line and wraps (clamped to 2) \u2014 never truncated to a stub\n       the way the old single-row flex layout squeezed it on narrow/mobile widths. */\n    .widget-title { display: -webkit-box; -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--text);\n      font-size: 13px; line-height: 1.3; word-break: break-word; }\n    .widget-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; }\n    .widget-phase { flex-shrink: 0; background: var(--surface0); color: var(--mauve);\n      border-radius: 4px; padding: 1px 7px; font-size: 10px; letter-spacing: 0.03em;\n      text-transform: uppercase; }\n    .widget-step { flex-shrink: 0; color: var(--subtext0); font-size: 11px;\n      font-variant-numeric: tabular-nums; }\n    .widget-elapsed { flex-shrink: 0; margin-left: auto; color: var(--subtext0);\n      font-size: 11px; font-variant-numeric: tabular-nums; }\n    .widget-bar { height: 4px; background: var(--surface0); border-radius: 2px;\n      overflow: hidden; margin-top: 6px; }\n    /* Fill carries a soft highlight band that sweeps left\u2192right through the mauve,\n       so the bar reads as \"working\" even while the step count holds still. The\n       gradient tile is 2x the fill width and shifts one full period per cycle,\n       so the loop is seamless. Base color stays mauve for reduced-motion. */\n    .widget-bar-fill { height: 100%; border-radius: 2px;\n      background: linear-gradient(90deg,\n        var(--mauve) 0%, var(--mauve) 38%, #ecdcfd 50%,\n        var(--mauve) 62%, var(--mauve) 100%);\n      background-size: 200% 100%;\n      box-shadow: 0 0 6px rgba(203, 166, 247, 0.45);\n      animation: bar-flow 2.4s linear infinite;\n      transition: width 0.3s ease; }\n    @keyframes bar-flow {\n      from { background-position: 200% 0; }\n      to { background-position: 0% 0; }\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .widget-bar-fill { animation: none; background: var(--mauve); }\n    }\n    /* Current action \u2014 the terminal's \u21B3 worker trailer, one dim ellipsized line. */\n    .widget-action { margin-top: 6px; color: var(--subtext0); font-size: 11px;\n      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n      font-variant-numeric: tabular-nums; }\n    /* Dim per-turn timestamp shown under a committed turn's bubble. */\n    .turn-time { font-size: 10px; color: var(--subtext0); opacity: 0.55; padding: 0 4px;\n      margin-top: -2px; }\n    .turn-time.user { align-self: flex-end; }\n    .turn-time.assistant, .turn-time.system { align-self: flex-start; }\n    .turn-time.system { align-self: center; }\n    #prompt-card { position: fixed; left: 0; right: 0; bottom: 0; background: var(--mantle);\n      border-top: 2px solid var(--mauve); padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));\n      display: none; z-index: 50; max-height: 80dvh; overflow-y: auto; }\n    #prompt-card .q-label { color: var(--mauve); font-size: 11px; font-weight: 700;\n      text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }\n    #prompt-card .q { color: var(--text); margin-bottom: 12px; white-space: pre-wrap;\n      font-size: 15px; line-height: 1.5; }\n    #prompt-card .rec-panel { background: var(--surface0); border-left: 3px solid var(--green);\n      border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; }\n    #prompt-card .rec-label { color: var(--green); font-size: 11px; font-weight: 700;\n      text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }\n    #prompt-card .rec-text { color: var(--text); font-size: 15px; line-height: 1.5;\n      white-space: pre-wrap; overflow-wrap: anywhere; }\n    #prompt-card textarea { width: 100%; background: var(--surface0); color: var(--text);\n      border: 1px solid var(--surface2); border-radius: 6px; padding: 10px; font-size: 15px;\n      font-family: inherit; line-height: 1.5; resize: vertical; margin-bottom: 4px; }\n    #prompt-card .row { display: flex; gap: 8px; margin-top: 12px; align-items: stretch;\n      flex-wrap: wrap; }\n    /* Recommendation answers can be long sentences, so stack them as a readable list. */\n    #prompt-card .row.stacked { flex-direction: column; align-items: stretch; }\n    #prompt-card .row.stacked button { flex: none; text-align: left; }\n    #prompt-card .row.stacked button.cancel { align-self: center; text-align: center; }\n    #prompt-card button { padding: 11px 16px; border-radius: 8px; border: none; cursor: pointer;\n      font-family: inherit; font-size: 14px; font-weight: 600; transition: filter .15s ease; }\n    #prompt-card button:hover { filter: brightness(1.08); }\n    #prompt-card button.primary { background: var(--green); color: var(--crust);\n      font-weight: 700; flex: 1; min-width: 160px; }\n    #prompt-card button.secondary { background: var(--surface1); color: var(--text);\n      flex: 1; min-width: 160px; }\n    #prompt-card button.cancel { margin-left: auto; align-self: center; background: transparent;\n      color: var(--subtext0); font-size: 12px; font-weight: 500; padding: 8px 10px; }\n    #prompt-card button.cancel:hover { color: var(--red); filter: none; }\n    #prompt-card button.cancel.armed { background: var(--red); color: var(--crust); font-weight: 700; }\n    .toast { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px);\n      right: calc(env(safe-area-inset-right, 0px) + 12px); max-width: calc(100vw - 24px);\n      padding: 8px 12px; border-radius: 6px; overflow-wrap: anywhere; word-break: break-word;\n      background: var(--surface1); color: var(--text); z-index: 60; }\n    .toast.warning { background: var(--peach); color: var(--crust); }\n    .toast.error { background: var(--red); color: var(--crust); }\n    #viewer { position: fixed; inset: 24px; background: var(--mantle); border: 1px solid var(--surface2);\n      border-radius: 8px; padding: 16px; overflow: auto; white-space: pre-wrap;\n      overflow-wrap: anywhere; word-break: break-word; display: none; z-index: 70; }\n    #viewer .close { position: absolute; top: 8px; right: 12px; cursor: pointer; color: var(--subtext0); }\n    /* Desktop: center the transcript/status/input in a readable column instead of\n       hugging the left edge. The scrollbar stays at the true window edge; only the\n       content is inset. Mobile (below 960px) is unchanged. */\n    @media (min-width: 960px) {\n      #chat-log { padding-left: calc((100% - 920px) / 2); padding-right: calc((100% - 920px) / 2); }\n      #status-panel { padding-left: calc((100% - 920px) / 2 + 12px); padding-right: calc((100% - 920px) / 2 + 12px); }\n      #input-bar { padding-left: calc((100% - 920px) / 2); padding-right: calc((100% - 920px) / 2); }\n      #cmd-suggestions { left: calc((100% - 920px) / 2 + 16px); right: calc((100% - 920px) / 2 + 16px); }\n    }";

package/dist/remote/ui-styles.js

@@ -260,6 +260,24 @@ export const STYLES = `    :root {
       border-top: 1px solid var(--surface0);
       position: relative;
     }
+    /* Held mid-run input: what you typed is waiting for the next task turn. */
+    #held-bar {
+      position: absolute; bottom: 100%; left: 16px; right: 16px;
+      display: flex; align-items: center; gap: 8px;
+      background: var(--mantle); border: 1px solid var(--surface1);
+      border-bottom: none; border-radius: 8px 8px 0 0;
+      padding: 6px 10px; font-size: 12px; z-index: 9;
+    }
+    #held-label { color: var(--yellow); white-space: nowrap; }
+    #held-text {
+      color: var(--subtext0); overflow: hidden; text-overflow: ellipsis;
+      white-space: nowrap; flex: 1;
+    }
+    #held-clear {
+      background: none; border: none; color: var(--subtext0);
+      cursor: pointer; font-size: 13px; padding: 0 2px;
+    }
+    #held-clear:hover { color: var(--red); }
     #cmd-suggestions {
       display: none; position: absolute; bottom: 100%; left: 16px; right: 16px;
       background: var(--mantle); border: 1px solid var(--surface1);

package/dist/remote/ui.js

@@ -59,6 +59,11 @@ ${STYLES}
   </div>
   <div id="status-panel"></div>
   <div id="input-bar">
+    <div id="held-bar" style="display:none">
+      <span id="held-label"></span>
+      <span id="held-text"></span>
+      <button id="held-clear" type="button" title="Discard">&#x2715;</button>
+    </div>
     <div id="cmd-suggestions"></div>
     <textarea id="input" placeholder="type a message… (/ for commands)" rows="1" disabled></textarea>
     <button id="send" disabled>Send</button>

package/dist/task/auto-orchestrator.js

@@ -23,6 +23,8 @@ import { findPhantomImports, rewritePhantomSpecifiers } from '../workers/phantom
 import { runPhaseChild, prependHint, USER_CANCELLED } from './child-runner.js';
 import { requestCancel, resetCancel, isCancelRequested, cancelCheckpoint } from './cancel-points.js';
 import { armCancelListener, disarmCancelListener } from './cancel-input.js';
+import { beginRun, endRun } from './mid-run-input.js';
+import { reportDroppedInput } from './dropped-input.js';
 import { refineExistingFilesBlock } from './phases.js';
 import { SessionUI, registerBridgeCommand, publishLifecycleNotice } from '../remote/bridge.js';
 import { pushNotify } from '../remote/push.js';
@@ -1565,6 +1567,7 @@ async function handleTaskAuto(args, ctx) {
         return;
     }
     autoRunning = true;
+    beginRun(); // the whole loop owns the session, not just the task inside it
     // Take delivery of a typed /task-auto-cancel for the WHOLE run, planning
     // included — planning is children too, so the host is not streaming and the
     // ordinary command path cannot reach us.
@@ -1602,6 +1605,7 @@ async function handleTaskAuto(args, ctx) {
     }
     finally {
         autoRunning = false;
+        reportDroppedInput(endRun(), ctx);
         disarmCancelListener();
     }
 }
@@ -1631,6 +1635,7 @@ async function handleTaskAutoResume(args, ctx) {
     const id = candidate.id;
     await updateTaskFrontMatter(cwd, id, { state: 'in_progress' });
     autoRunning = true;
+    beginRun(); // the whole loop owns the session, not just the task inside it
     armTerminalCancel(ctx);
     try {
         // Reuse the interrupted run's research-cache id, dropping only the entries whose
@@ -1650,6 +1655,7 @@ async function handleTaskAutoResume(args, ctx) {
     }
     finally {
         autoRunning = false;
+        reportDroppedInput(endRun(), ctx);
         disarmCancelListener();
     }
 }

package/dist/task/cancel-input.d.ts

@@ -1,5 +1,5 @@
 /**
- * Raw-terminal delivery for /task-auto-cancel.
+ * Raw-terminal delivery for input typed while a run owns the main loop.
  *
  * THE PROBLEM. While a /task-auto run is in flight, the host's interactive main
  * loop is parked at `await session.prompt("/task-auto …")` and never loops back
@@ -23,10 +23,25 @@
  * ourselves and `consume` the keystroke so the line is never queued for a
  * post-run replay of the confusing "no loop is running" message.
  *
- * Nothing else is intercepted: every other keystroke is passed straight through,
- * so typing, history, and the ESC/steer path are untouched. Deliberately no
- * bare-key shortcut — ESC already means "interrupt the turn" during the
- * implementation turn, and hijacking it would break steerUntilDone.
+ * WHAT ELSE IT NOW CARRIES. The same interception makes the terminal behave like
+ * the browser for everything else typed mid-run, instead of feeding pi's queue:
+ *
+ *   - a bridge slash command (/task-list, /task-auto-cancel, …) runs immediately,
+ *     exactly as dispatchRemoteLine runs it for a browser;
+ *   - a plain line is HELD (src/task/mid-run-input.ts) and steered into the next
+ *     task turn, rather than starting a competing turn or being replayed after
+ *     the run.
+ *
+ * Three things are deliberately NOT intercepted, and each would be a regression:
+ *   - a keystroke that is not a submit, so typing and history are untouched;
+ *   - anything typed while a prompt/dialog is open (the raw listener sees keys
+ *     BEFORE the focused component, so swallowing here would eat the user's
+ *     answer to a clarify question or the ESC-steer input);
+ *   - a submit while the agent is streaming — pi's own submit path already
+ *     steers the live turn, which is the behaviour we want.
+ *
+ * Deliberately no bare-key shortcut — ESC already means "interrupt the turn"
+ * during the implementation turn, and hijacking it would break steerUntilDone.
  */
 import type { ExtensionCommandContext } from '@earendil-works/pi-coding-agent';
 /**
@@ -45,17 +60,26 @@ export declare function isCancelSubmission(data: string, editorText: string): bo
  * Prefer the arm/rearm/disarm trio below over calling this directly: the
  * listener does not survive a session replacement.
  */
-export declare function installCancelListener(ctx: ExtensionCommandContext, onCancel: (live: ExtensionCommandContext) => void): () => void;
-/** Begin listening for a typed /task-auto-cancel. Replaces any previous arm. */
-export declare function armCancelListener(ctx: ExtensionCommandContext, onCancel: (live: ExtensionCommandContext) => void): void;
+export declare function installCancelListener(ctx: ExtensionCommandContext, onCancel?: (live: ExtensionCommandContext) => void): () => void;
+/**
+ * Begin intercepting mid-run terminal input. Refcounted, because runs nest:
+ * /task-auto arms for its loop and every task inside it arms again, so a plain
+ * "replace" would let the first inner run's end silently un-arm the rest of the
+ * loop. The first `onCancel` wins — /task-auto passes one so a typed
+ * /task-auto-cancel can post its acknowledgement through the live ctx; a plain
+ * /task passes none and lets the generic bridge dispatch handle that command
+ * like any other.
+ */
+export declare function armCancelListener(ctx: ExtensionCommandContext, onCancel?: (live: ExtensionCommandContext) => void): void;
 /**
  * Re-point the armed listener at a replacement ctx. A no-op when nothing is
- * armed, so the runner can call it unconditionally on every session swap
- * (including for a plain /task, which has no cancel listener of its own).
+ * armed, so the runner can call it unconditionally on every session swap.
  */
 export declare function rearmCancelListener(ctx: ExtensionCommandContext): void;
-/** Stop listening, so a cancel typed after the run goes back through the
- *  ordinary command path (which then reports there is no loop running). */
+/** Stop listening once the outermost run ends, so input typed after the run goes
+ *  back through pi's ordinary path. */
 export declare function disarmCancelListener(): void;
+/** Force-disarm regardless of depth (tests, and hard teardown). */
+export declare function forceDisarmCancelListener(): void;
 /** Whether a listener is currently armed (tests). */
 export declare function isCancelListenerArmed(): boolean;

package/dist/task/cancel-input.js

@@ -1,3 +1,6 @@
+import { holdInput, isRunActive } from './mid-run-input.js';
+import { getBridge } from '../remote/bridge.js';
+import { getState } from '../remote/session-state.js';
 /** The command this listener delivers. Accepts a leading slash only — matching
  *  bare "task-auto-cancel" would fire on prose about the command. */
 const CANCEL_RE = /^\/task-auto-cancel\s*$/;
@@ -13,6 +16,15 @@ function isSubmitKey(data) {
 export function isCancelSubmission(data, editorText) {
     return isSubmitKey(data) && CANCEL_RE.test(editorText.trim());
 }
+/** Best-effort toast; a failed notification must never break interception. */
+function notify(ctx, message) {
+    try {
+        ctx.ui.notify(message, 'info');
+    }
+    catch {
+        /* cosmetic only */
+    }
+}
 /**
  * Watch raw terminal input for a submitted /task-auto-cancel and call `onCancel`
  * the moment it is typed, however deep in a run we are.
@@ -34,6 +46,8 @@ export function installCancelListener(ctx, onCancel) {
     let unsubscribe = () => { };
     try {
         unsubscribe = ui.onTerminalInput(data => {
+            if (!isSubmitKey(data))
+                return undefined;
             let text;
             try {
                 text = getText();
@@ -43,20 +57,65 @@ export function installCancelListener(ctx, onCancel) {
                 // take the run down with it — fall through to normal handling.
                 return undefined;
             }
-            if (!isCancelSubmission(data, text))
+            const trimmed = text.trim();
+            if (trimmed.length === 0)
                 return undefined;
-            // Clear what we swallowed, so the editor does not sit there holding a
-            // command the user believes they submitted.
+            const swallow = () => {
+                // Clear what we swallowed, so the editor does not sit there
+                // holding a line the user believes they submitted.
+                try {
+                    setText?.('');
+                }
+                catch {
+                    /* cosmetic only */
+                }
+                return { consume: true };
+            };
+            if (CANCEL_RE.test(trimmed) && onCancel) {
+                const r = swallow();
+                // Hand back the ctx this listener is installed on: after a session
+                // replacement the original is stale and using it throws.
+                onCancel(ctx);
+                return r;
+            }
+            // A dialog owns the keyboard — this Enter is the user's ANSWER.
+            if (getState().prompt !== null)
+                return undefined;
+            // Outside a run, pi's own handling is correct and unblocked.
+            if (!isRunActive())
+                return undefined;
+            // Streaming: pi's submit path already steers the live turn.
             try {
-                setText?.('');
+                if (!ctx.isIdle())
+                    return undefined;
             }
             catch {
-                /* cosmetic only */
+                return undefined;
+            }
+            if (trimmed.startsWith('/')) {
+                const space = trimmed.indexOf(' ');
+                const name = (space === -1 ? trimmed.slice(1) : trimmed.slice(1, space)).trim();
+                const args = space === -1 ? '' : trimmed.slice(space + 1).trim();
+                const handler = getBridge().commands.get(name);
+                // Unknown to the bridge (a pi builtin like /model): leave it to pi.
+                if (!handler)
+                    return undefined;
+                const r = swallow();
+                try {
+                    const result = handler(args, ctx);
+                    if (result instanceof Promise) {
+                        result.catch((err) => notify(ctx, `/${name} failed: ${String(err)}`));
+                    }
+                }
+                catch (err) {
+                    notify(ctx, `/${name} failed: ${String(err)}`);
+                }
+                return r;
             }
-            // Hand back the ctx this listener is installed on: after a session
-            // replacement the original is stale and using it throws.
-            onCancel(ctx);
-            return { consume: true };
+            const r = swallow();
+            holdInput(trimmed);
+            notify(ctx, 'Held for the running task — it lands on the next task turn.');
+            return r;
         });
     }
     catch {
@@ -85,25 +144,51 @@ export function installCancelListener(ctx, onCancel) {
  * inside the runner, which must not learn about /task-auto's cancel plumbing.
  */
 let armed = null;
-/** Begin listening for a typed /task-auto-cancel. Replaces any previous arm. */
+/**
+ * Begin intercepting mid-run terminal input. Refcounted, because runs nest:
+ * /task-auto arms for its loop and every task inside it arms again, so a plain
+ * "replace" would let the first inner run's end silently un-arm the rest of the
+ * loop. The first `onCancel` wins — /task-auto passes one so a typed
+ * /task-auto-cancel can post its acknowledgement through the live ctx; a plain
+ * /task passes none and lets the generic bridge dispatch handle that command
+ * like any other.
+ */
 export function armCancelListener(ctx, onCancel) {
-    disarmCancelListener();
-    armed = { dispose: installCancelListener(ctx, onCancel), onCancel };
+    if (armed) {
+        armed.depth++;
+        if (!armed.onCancel && onCancel) {
+            // Upgrade in place: keep the same install, gain the ack callback.
+            armed.dispose();
+            armed.dispose = installCancelListener(ctx, onCancel);
+            armed.onCancel = onCancel;
+        }
+        return;
+    }
+    armed = { dispose: installCancelListener(ctx, onCancel), onCancel, depth: 1 };
 }
 /**
  * Re-point the armed listener at a replacement ctx. A no-op when nothing is
- * armed, so the runner can call it unconditionally on every session swap
- * (including for a plain /task, which has no cancel listener of its own).
+ * armed, so the runner can call it unconditionally on every session swap.
  */
 export function rearmCancelListener(ctx) {
     if (!armed)
         return;
     armed.dispose();
-    armed = { dispose: installCancelListener(ctx, armed.onCancel), onCancel: armed.onCancel };
+    armed.dispose = installCancelListener(ctx, armed.onCancel);
 }
-/** Stop listening, so a cancel typed after the run goes back through the
- *  ordinary command path (which then reports there is no loop running). */
+/** Stop listening once the outermost run ends, so input typed after the run goes
+ *  back through pi's ordinary path. */
 export function disarmCancelListener() {
+    if (!armed)
+        return;
+    armed.depth--;
+    if (armed.depth > 0)
+        return;
+    armed.dispose();
+    armed = null;
+}
+/** Force-disarm regardless of depth (tests, and hard teardown). */
+export function forceDisarmCancelListener() {
     armed?.dispose();
     armed = null;
 }

package/dist/task/dropped-input.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Tell the user when mid-run input never reached the agent.
+ *
+ * A line held for the next task turn (src/task/mid-run-input.ts) normally lands
+ * as a steer. When the run ends before any turn starts — a cancel, a failure, a
+ * final task with nothing left to implement — the held text has nowhere to go.
+ * Delivering it afterwards would recreate the surprise of pi's queue replaying
+ * lines into a finished run (issue #8), so it is dropped; dropping it QUIETLY
+ * would be the same trap. Both surfaces get told, with the text quoted back so
+ * it can be re-sent by hand.
+ */
+import type { ExtensionCommandContext } from '@earendil-works/pi-coding-agent';
+export declare function formatDroppedInput(dropped: readonly string[]): string | null;
+export declare function reportDroppedInput(dropped: readonly string[], ctx?: ExtensionCommandContext): void;

package/dist/task/dropped-input.js

@@ -0,0 +1,25 @@
+import { publishNotify } from '../remote/bridge.js';
+/** Trim a held line to something that fits in a toast. */
+function preview(text) {
+    const oneLine = text.replace(/\s+/g, ' ').trim();
+    return oneLine.length > 80 ? `${oneLine.slice(0, 77)}…` : oneLine;
+}
+export function formatDroppedInput(dropped) {
+    if (dropped.length === 0)
+        return null;
+    const head = preview(dropped[0]);
+    const rest = dropped.length > 1 ? ` (+${dropped.length - 1} more)` : '';
+    return `The run ended before your message could be delivered: "${head}"${rest}`;
+}
+export function reportDroppedInput(dropped, ctx) {
+    const message = formatDroppedInput(dropped);
+    if (message === null)
+        return;
+    try {
+        ctx?.ui.notify(message, 'warning');
+    }
+    catch {
+        // A stale ctx after session replacement must not swallow the remote copy.
+    }
+    publishNotify(message, 'warning');
+}

package/dist/task/mid-run-input.d.ts

@@ -0,0 +1,53 @@
+/**
+ * What a typed message DOES while a task run owns the session.
+ *
+ * Before this module the two surfaces disagreed, and both were wrong whenever the
+ * host session was idle — which is most of a run, since the spec phases and every
+ * gate are child `pi` processes, not host turns:
+ *
+ *   - browser  → `sendUserMessage` with no delivery mode, which starts a SECOND
+ *                turn alongside the run. Reproduced live on pi 0.82.1 (issue #8):
+ *                that turn ran the write tool into the project, and when it was
+ *                still streaming as the pipeline delivered its spec the run died
+ *                with "TASK_0001 failed: Agent is already processing."
+ *   - terminal → pi's `pendingUserInputs` queue, drained only by the main loop
+ *                that our own command handler is parked inside — so the line sat
+ *                there silently and then fired minutes later against a finished
+ *                run.
+ *
+ * The shared rule both surfaces now follow:
+ *
+ *   agent streaming → steer the live turn (unchanged; this half always worked)
+ *   agent idle, run active → HOLD it here, show it as pending, and deliver it as
+ *                            a steer when the next task turn starts
+ *   no run active → ordinary message, unchanged
+ *
+ * Holding is what makes the two surfaces agree AND keeps the run safe: a held
+ * line never becomes a competing turn, and it is never silently replayed after
+ * the run has finished.
+ */
+export declare function setHeldInputListener(fn: (() => void) | null): void;
+/** Mark a task run as owning the session (refcounted; call from a finally). */
+export declare function beginRun(): void;
+/**
+ * End a run. Returns anything still held, which the caller MUST report: that
+ * text missed its delivery window, and replaying it into a finished run is the
+ * exact surprise this module exists to remove — but dropping it silently would
+ * be the same trap the terminal queue was.
+ */
+export declare function endRun(): string[];
+export declare function isRunActive(): boolean;
+/** For tests: forget all state. */
+export declare function resetMidRunInput(): void;
+/** Hold a line for the next task turn. Blank lines are ignored. */
+export declare function holdInput(text: string): void;
+/** The lines currently waiting (a copy — mutating it must not affect state). */
+export declare function heldInput(): string[];
+export declare function clearHeldInput(): void;
+/**
+ * Take everything held, as one steer payload, and clear it. Returns null when
+ * nothing is waiting. Clearing BEFORE delivery is deliberate: a delivery that
+ * throws must not leave the same text queued to be delivered again on the next
+ * turn.
+ */
+export declare function takeHeldInput(): string | null;

package/dist/task/mid-run-input.js

@@ -0,0 +1,101 @@
+/**
+ * What a typed message DOES while a task run owns the session.
+ *
+ * Before this module the two surfaces disagreed, and both were wrong whenever the
+ * host session was idle — which is most of a run, since the spec phases and every
+ * gate are child `pi` processes, not host turns:
+ *
+ *   - browser  → `sendUserMessage` with no delivery mode, which starts a SECOND
+ *                turn alongside the run. Reproduced live on pi 0.82.1 (issue #8):
+ *                that turn ran the write tool into the project, and when it was
+ *                still streaming as the pipeline delivered its spec the run died
+ *                with "TASK_0001 failed: Agent is already processing."
+ *   - terminal → pi's `pendingUserInputs` queue, drained only by the main loop
+ *                that our own command handler is parked inside — so the line sat
+ *                there silently and then fired minutes later against a finished
+ *                run.
+ *
+ * The shared rule both surfaces now follow:
+ *
+ *   agent streaming → steer the live turn (unchanged; this half always worked)
+ *   agent idle, run active → HOLD it here, show it as pending, and deliver it as
+ *                            a steer when the next task turn starts
+ *   no run active → ordinary message, unchanged
+ *
+ * Holding is what makes the two surfaces agree AND keeps the run safe: a held
+ * line never becomes a competing turn, and it is never silently replayed after
+ * the run has finished.
+ */
+/** Held lines, oldest first. Delivered as one steer at the next turn start. */
+let held = [];
+/** Depth, not a boolean: /task-auto brackets its whole loop and each task inside
+ *  it brackets its own run, so a plain flag would clear on the first inner end
+ *  and leave the rest of the loop looking idle. */
+let runDepth = 0;
+/** Fired whenever the held list changes, so the surfaces can re-render. */
+let onChange = null;
+export function setHeldInputListener(fn) {
+    onChange = fn;
+}
+/** Mark a task run as owning the session (refcounted; call from a finally). */
+export function beginRun() {
+    runDepth++;
+    if (runDepth === 1)
+        onChange?.(); // surfaces switch to "held" mode
+}
+/**
+ * End a run. Returns anything still held, which the caller MUST report: that
+ * text missed its delivery window, and replaying it into a finished run is the
+ * exact surprise this module exists to remove — but dropping it silently would
+ * be the same trap the terminal queue was.
+ */
+export function endRun() {
+    runDepth = Math.max(0, runDepth - 1);
+    if (runDepth > 0)
+        return [];
+    const dropped = held;
+    held = [];
+    onChange?.();
+    return dropped;
+}
+export function isRunActive() {
+    return runDepth > 0;
+}
+/** For tests: forget all state. */
+export function resetMidRunInput() {
+    held = [];
+    runDepth = 0;
+    onChange = null;
+}
+/** Hold a line for the next task turn. Blank lines are ignored. */
+export function holdInput(text) {
+    const trimmed = text.trim();
+    if (trimmed.length === 0)
+        return;
+    held.push(trimmed);
+    onChange?.();
+}
+/** The lines currently waiting (a copy — mutating it must not affect state). */
+export function heldInput() {
+    return [...held];
+}
+export function clearHeldInput() {
+    if (held.length === 0)
+        return;
+    held = [];
+    onChange?.();
+}
+/**
+ * Take everything held, as one steer payload, and clear it. Returns null when
+ * nothing is waiting. Clearing BEFORE delivery is deliberate: a delivery that
+ * throws must not leave the same text queued to be delivered again on the next
+ * turn.
+ */
+export function takeHeldInput() {
+    if (held.length === 0)
+        return null;
+    const payload = held.join('\n\n');
+    held = [];
+    onChange?.();
+    return payload;
+}

package/dist/task/orchestrator.js

@@ -36,7 +36,9 @@ import { findDeliveryPhantoms, formatApiOverrideBanner } from '../workers/phanto
 import { titleForDisplay } from './parsers.js';
 import { USER_CANCELLED } from './child-runner.js';
 import { cancelCheckpoint } from './cancel-points.js';
-import { rearmCancelListener } from './cancel-input.js';
+import { armCancelListener, disarmCancelListener, rearmCancelListener } from './cancel-input.js';
+import { beginRun, endRun, takeHeldInput } from './mid-run-input.js';
+import { reportDroppedInput } from './dropped-input.js';
 import { formatTimings } from './timings.js';
 import { getParentContextWindow, resolveContextUsage } from './context-usage.js';
 // ─── Module-level state ──────────────────────────────────────────────────────
@@ -151,6 +153,10 @@ export class TaskRunner {
     async run() {
         const cwd = this._cwd;
         const ctx = this._ctx;
+        // Mid-run input holds instead of starting a competing turn from here on,
+        // and the terminal interception is armed for the same window.
+        beginRun();
+        armCancelListener(ctx);
         // Initialise or resume the TASK file.
         let id;
         let title;
@@ -280,6 +286,8 @@ export class TaskRunner {
         finally {
             this._disposeWidget();
             clearActiveTask(this);
+            disarmCancelListener();
+            reportDroppedInput(endRun(), ctx);
         }
     }
     /** Stop the phase widget — clearing both the terminal and remote surfaces —
@@ -290,7 +298,7 @@ export class TaskRunner {
         this._stopWidget?.();
         this._stopWidget = null;
     }
-    async _deliverSpec(ctx) {
+    async _deliverSpec(_ctx) {
         const spec = this._specForDelivery();
         // Keep the rich status block alive across the implementation turn (the phase
         // widget was disposed at handoff). Awaited (/task-auto) stays armed across all
@@ -316,12 +324,11 @@ export class TaskRunner {
             throw new Error('extension not initialised (no ExtensionAPI captured)');
         }
         armImplWidget(meta, { oneShot: true });
-        if (ctx.isIdle()) {
-            piApi.sendUserMessage(spec);
-        }
-        else {
-            piApi.sendUserMessage(spec, { deliverAs: 'followUp' });
-        }
+        // Always name a delivery mode. pi ignores it when the session is idle and
+        // uses it when something else is streaming — so this one call is correct
+        // in both cases, where an isIdle() check is a check-then-act race that
+        // loses to any turn starting in between (issue #8).
+        piApi.sendUserMessage(spec, { deliverAs: 'followUp' });
     }
     /**
      * The spec as the implementer should receive it (Layer B). Layer A strips phantom
@@ -472,7 +479,7 @@ export async function resumeAcrossCompactions(ctx) {
     while (resumes < MAX_COMPACTION_RESUMES
         && !wasInterrupted(ctx)
         && endedAtCompactionBoundary(ctx)) {
-        await ctx.sendUserMessage(CONTINUE_AFTER_COMPACTION);
+        await ctx.sendUserMessage(CONTINUE_AFTER_COMPACTION, { deliverAs: 'followUp' });
         await ctx.waitForIdle();
         resumes++;
     }
@@ -582,7 +589,7 @@ export async function steerUntilDone(ctx, promptSteer, watchdog) {
         const steer = await ask(ctx);
         if (steer === undefined || steer.trim().length === 0)
             return true; // pause
-        await ctx.sendUserMessage(steer);
+        await ctx.sendUserMessage(steer, { deliverAs: 'followUp' });
         await ctx.waitForIdle();
     }
     return false;
@@ -615,7 +622,8 @@ export async function runSingleTask(ctx, cwd, rawPrompt, opts = {}) {
             // /task-auto-cancel has to survive. No-op unless a run armed one.
             rearmCancelListener(newCtx);
             const runner = new TaskRunner(newCtx, cwd, rawPrompt, opts.resumeId, async (spec) => {
-                await newCtx.sendUserMessage(spec);
+                // Queue-or-run: never throws, whatever else is on the session (issue #8).
+                await newCtx.sendUserMessage(spec, { deliverAs: 'followUp' });
                 if (opts.waitForImplementation) {
                     await newCtx.waitForIdle();
                     // A threshold auto-compaction parks the turn at idle WITHOUT
@@ -709,6 +717,26 @@ export async function markResumable(cwd, taskId) {
  * paused/failed) leaves the task resumable and tells the user to /task-resume.
  */
 export async function runGatedTask(ctx, cwd, raw, opts = {}) {
+    // The GATES are part of the run, and they are child processes with the host
+    // session idle — the same hold window as the spec phases. Bracketing only
+    // TaskRunner would leave verify/enforce looking like "no run", which a live
+    // run on pi 0.82.1 showed as runActive=false while the widget still read
+    // "verifying work" (issue #8). The body has many early returns, so the
+    // bracket lives in this wrapper rather than in a dozen places.
+    beginRun();
+    // Arm the raw-stdin interception for the WHOLE run. Without this a plain
+    // /task had no terminal path at all — only /task-auto armed one — so a line
+    // typed during it went into pi's queue and fired after the run (seen live).
+    armCancelListener(ctx);
+    try {
+        await runGatedTaskInner(ctx, cwd, raw, opts);
+    }
+    finally {
+        disarmCancelListener();
+        reportDroppedInput(endRun(), ctx);
+    }
+}
+async function runGatedTaskInner(ctx, cwd, raw, opts = {}) {
     const abort = new AbortController();
     const deps = opts.deps
         ?? buildGateDeps({
@@ -912,6 +940,22 @@ async function handleTaskCancel(_args, ctx) {
 export function registerTask(pi) {
     piApi = pi;
     setupImplWidget(pi);
+    // Deliver whatever the user typed while the run held the session, at the
+    // first moment there is a live turn to steer. agent_start fires as streaming
+    // begins, so `steer` is accepted here; when nothing is held this is a no-op,
+    // which is every turn outside a run.
+    pi.on('agent_start', () => {
+        const held = takeHeldInput();
+        if (held === null)
+            return;
+        try {
+            pi.sendUserMessage(held, { deliverAs: 'steer' });
+            publishNotify('Delivered your message to the running task.', 'info');
+        }
+        catch (err) {
+            publishNotify(`Could not deliver your message: ${err.message}`, 'warning');
+        }
+    });
     registerBridgeCommand(pi, 'task', {
         description: 'Start a new task. Usage: /task <prompt>',
         handler: handleTask

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mjasnikovs/pi-task",
-    "version": "0.20.2",
+    "version": "0.21.0",
     "description": "Deterministic task planning and spec-orchestration for local models — crash-safe /task pipelines with verify/enforce gates, a real-time remote web view, and web/docs/fetch/worker subagent tools.",
     "type": "module",
     "main": "./dist/index.js",