@mjasnikovs/pi-task 0.17.25 → 0.17.27

package/dist/remote/bridge.d.ts

@@ -27,6 +27,14 @@ export interface AskSpec {
     question: string;
     /** Primary recommended option, prefilled in the local TUI. */
     recommended?: string;
+    /**
+     * Placeholder for the local TUI text input when there is NO recommended
+     * option. Local-only: the remote card must not see it, or it would render as
+     * an acceptable recommendation ("✓ Accept" answering with placeholder text).
+     * Used by the steer prompt, whose hint ("type guidance, or leave empty…") is
+     * instructional copy, not an answer.
+     */
+    localPlaceholder?: string;
     /** Secondary recommended option shown as a second button on the remote. */
     recommended2?: string;
     /** Whether the browser card shows a Skip button (answers with empty string). */

package/dist/remote/bridge.js

@@ -102,7 +102,9 @@ export class SessionUI {
                 signal
             });
         }
-        return this.ctx.ui.input(spec.localTitle, spec.recommended, { signal });
+        return this.ctx.ui.input(spec.localTitle, spec.recommended ?? spec.localPlaceholder, {
+            signal
+        });
     }
 }
 export function publishNotify(message, level) {

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    .widget-bar-fill { height: 100%; background: var(--mauve); border-radius: 2px;\n      transition: width 0.3s ease; }\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    #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

@@ -330,8 +330,25 @@ export const STYLES = `    :root {
       font-size: 11px; font-variant-numeric: tabular-nums; }
     .widget-bar { height: 4px; background: var(--surface0); border-radius: 2px;
       overflow: hidden; margin-top: 6px; }
-    .widget-bar-fill { height: 100%; background: var(--mauve); border-radius: 2px;
+    /* Fill carries a soft highlight band that sweeps left→right through the mauve,
+       so the bar reads as "working" even while the step count holds still. The
+       gradient tile is 2x the fill width and shifts one full period per cycle,
+       so the loop is seamless. Base color stays mauve for reduced-motion. */
+    .widget-bar-fill { height: 100%; border-radius: 2px;
+      background: linear-gradient(90deg,
+        var(--mauve) 0%, var(--mauve) 38%, #ecdcfd 50%,
+        var(--mauve) 62%, var(--mauve) 100%);
+      background-size: 200% 100%;
+      box-shadow: 0 0 6px rgba(203, 166, 247, 0.45);
+      animation: bar-flow 2.4s linear infinite;
       transition: width 0.3s ease; }
+    @keyframes bar-flow {
+      from { background-position: 200% 0; }
+      to { background-position: 0% 0; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .widget-bar-fill { animation: none; background: var(--mauve); }
+    }
     /* Current action — the terminal's ↳ worker trailer, one dim ellipsized line. */
     .widget-action { margin-top: 6px; color: var(--subtext0); font-size: 11px;
       overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

package/dist/task/orchestrator.d.ts

@@ -92,8 +92,9 @@ export interface RunSingleTaskOptions {
      * Ask the user for a steering message after they interrupt (ESC) the
      * implementation turn. Return text to continue the same task as another turn,
      * or undefined/empty to pause the run. Only consulted with
-     * waitForImplementation. Defaults to a ctx.ui.input prompt; injectable so the
-     * steer loop is testable without a real dialog.
+     * waitForImplementation. Defaults to a bridged SessionUI.ask (local TUI input
+     * raced against a remote browser card); injectable so the steer loop is
+     * testable without a real dialog.
      */
     promptSteer?: (ctx: ExtensionCommandContext) => Promise<string | undefined>;
     /**

package/dist/task/orchestrator.js

@@ -25,7 +25,7 @@ import { readTextFile } from '../shared/fs-text.js';
 import { allocateTaskId, ensureTasksDir, readSection, readTaskFile, setTaskSection, taskFilePath, tasksDir, updateTaskFrontMatter, writeTaskFile } from './task-io.js';
 import { startWidget } from './widget.js';
 import { armImplWidget, disarmImplWidget, setupImplWidget } from './impl-widget.js';
-import { publishViewer, publishNotify, publishLifecycleNotice, registerBridgeCommand, getBridge } from '../remote/bridge.js';
+import { publishViewer, publishNotify, publishLifecycleNotice, registerBridgeCommand, getBridge, SessionUI } from '../remote/bridge.js';
 import { pushNotify } from '../remote/push.js';
 import { getConfig } from '../config/config.js';
 import { buildGateDeps } from './gate-deps.js';
@@ -342,6 +342,11 @@ export class TaskRunner {
 /** Dialog copy for the post-interrupt steering prompt. */
 const STEER_TITLE = 'Paused — steer the model';
 const STEER_PLACEHOLDER = 'Type guidance to continue this task, or leave empty to pause';
+/** Remote-card copy for the same prompt. The browser has no placeholder ghost
+ *  text, so the pause affordance must be spelled out in the question itself
+ *  (Skip = empty answer = pause, same as an empty local submit). */
+const STEER_QUESTION = 'Paused — the implementation was interrupted.\n'
+    + 'Type guidance to continue this task, or Skip to pause the run.';
 /**
  * True when the most recent assistant turn ended because the user interrupted it
  * (pressed ESC). pi records a user abort as stopReason "aborted" on the assistant
@@ -472,7 +477,19 @@ export async function resumeAcrossCompactions(ctx) {
  * should pause; false when the implementation completed (steered or not).
  */
 async function steerUntilDone(ctx, promptSteer) {
-    const ask = promptSteer ?? (c => c.ui.input(STEER_TITLE, STEER_PLACEHOLDER));
+    // Fan the prompt out through the bridge (local TUI input + remote browser
+    // card, first answer wins) instead of a raw ctx.ui.input: an interrupt can
+    // come from the remote Stop button just as well as a terminal ESC, and a
+    // terminal-only dialog leaves the remote viewer staring at a silently
+    // paused run. Remote Skip returns '' → same pause path as an empty local
+    // submit.
+    const ask = promptSteer
+        ?? (c => new SessionUI(c).ask({
+            localTitle: STEER_TITLE,
+            localPlaceholder: STEER_PLACEHOLDER,
+            question: STEER_QUESTION,
+            allowSkip: true
+        }));
     while (wasInterrupted(ctx)) {
         const steer = await ask(ctx);
         if (steer === undefined || steer.trim().length === 0)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mjasnikovs/pi-task",
-    "version": "0.17.25",
+    "version": "0.17.27",
     "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",