@mjasnikovs/pi-task 0.39.1 → 0.39.3

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 by setAppHeight (visualViewport.height, falling back to\n         window.innerHeight) so the column height is a stable pixel value across\n         an orientation change. 100dvh is the fallback for first paint / no-JS. */\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, on its own surface bar. */\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       In normal flow, NOT absolutely positioned \u2014 as an overlay it would cover\n       the task widget's progress row above the composer. */\n    #held-bar {\n      display: flex; align-items: center; gap: 8px; flex-shrink: 0;\n      background: var(--mantle); border-top: 1px solid var(--surface1);\n      padding: 6px 16px; font-size: 12px;\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       (one ticker paints every .spin), inline at the end of the streaming text. */\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 squeezed to a stub\n       by the meta row beside it on a narrow screen. */\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      #held-bar { padding-left: calc((100% - 920px) / 2 + 16px); padding-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 by setAppHeight (visualViewport.height, falling back to\n         window.innerHeight) so the column height is a stable pixel value across\n         an orientation change. 100dvh is the fallback for first paint / no-JS. */\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      /* publishNote sends multi-line text (the /task-config table); textContent\n         keeps the newlines only if the box does not collapse them. */\n      white-space: pre-wrap;\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, on its own surface bar. */\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       In normal flow, NOT absolutely positioned \u2014 as an overlay it would cover\n       the task widget's progress row above the composer. */\n    #held-bar {\n      display: flex; align-items: center; gap: 8px; flex-shrink: 0;\n      background: var(--mantle); border-top: 1px solid var(--surface1);\n      padding: 6px 16px; font-size: 12px;\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       (one ticker paints every .spin), inline at the end of the streaming text. */\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 squeezed to a stub\n       by the meta row beside it on a narrow screen. */\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    /* 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      #held-bar { padding-left: calc((100% - 920px) / 2 + 16px); padding-right: calc((100% - 920px) / 2 + 16px); }\n    }";

package/dist/remote/ui-styles.js

@@ -121,6 +121,9 @@ export const STYLES = `    :root {
     /* Persistent inline system note (e.g. context compaction) — a muted centered
        divider, distinct from chat bubbles. */
     .sysnote {
+      /* publishNote sends multi-line text (the /task-config table); textContent
+         keeps the newlines only if the box does not collapse them. */
+      white-space: pre-wrap;
       align-self: center; color: var(--subtext0); font-size: 11px;
       font-family: ui-monospace, monospace; letter-spacing: 0.5px;
       padding: 2px 10px; opacity: 0.85;
@@ -414,10 +417,6 @@ export const STYLES = `    :root {
       background: var(--surface1); color: var(--text); z-index: 60; }
     .toast.warning { background: var(--peach); color: var(--crust); }
     .toast.error { background: var(--red); color: var(--crust); }
-    #viewer { position: fixed; inset: 24px; background: var(--mantle); border: 1px solid var(--surface2);
-      border-radius: 8px; padding: 16px; overflow: auto; white-space: pre-wrap;
-      overflow-wrap: anywhere; word-break: break-word; display: none; z-index: 70; }
-    #viewer .close { position: absolute; top: 8px; right: 12px; cursor: pointer; color: var(--subtext0); }
     /* Desktop: center the transcript/status/input in a readable column instead of
        hugging the left edge. The scrollbar stays at the true window edge; only the
        content is inset. Mobile (below 960px) is unchanged. */

package/dist/remote/ui.js

@@ -79,7 +79,6 @@ ${STYLES}
     <textarea id="prompt-input" rows="3" placeholder="Type your answer…" style="display:none"></textarea>
     <div class="row" id="prompt-buttons"></div>
   </div>
-  <div id="viewer"><span class="close" id="viewer-close">&#x2715;</span><div id="viewer-body"></div></div>
   <script>
 ${renderModule()}
 ${highlightModule()}

package/dist/task/auto-orchestrator.js

@@ -26,7 +26,7 @@ import { isFatalChildCause, prependHint, USER_CANCELLED } from './child-runner.j
 import { requestCancel, resetCancel, isCancelRequested, cancelCheckpoint } from './cancel-points.js';
 import { withRun, announceTerminal } from './run-bracket.js';
 import { refineExistingFilesBlock, SINGLE_READ_EXTENSION_PATH } from './phases.js';
-import { SessionUI, registerBridgeCommand, publishLifecycleNotice } from '../remote/bridge.js';
+import { SessionUI, registerBridgeCommand, publishLifecycleNotice, notifyBoth, notifyRun, isRemoteOrigin } from '../remote/bridge.js';
 import { getParentContextWindow } from './context-usage.js';
 import { ChildStatus, runPlanningChild, statusCallbacks } from './child-status.js';
 import { buildGateDeps, collectTreeChanges } from './gate-deps.js';
@@ -421,7 +421,7 @@ async function schedulePendingRepairs(cwd, id, afterIndex, ctx, deps) {
             titles.splice(at + 1, 0, title);
             at += 1;
             await deps.record?.(cwd, id, `plan: inserted scoped repair step after step ${afterIndex + 1} — ${title}`);
-            ctx.ui.notify(`${id}: queued a scoped repair for ${repair.file} (${repair.owner}'s file — root cause of ${repair.blamed.join(', ')}).`, 'warning');
+            notifyRun(ctx, `${id}: queued a scoped repair for ${repair.file} (${repair.owner}'s file — root cause of ${repair.blamed.join(', ')}).`, 'warning');
         }
     }
     catch {
@@ -623,7 +623,7 @@ export async function elicitClarifications(ctx, cwd, deps, oriented) {
         }
     }
     if (transcript.length === 0) {
-        ctx.ui.notify('No clarifying questions needed — planning tasks…', 'info');
+        notifyBoth(ctx, 'No clarifying questions needed — planning tasks…', 'info');
     }
     return transcript.forRecord();
 }
@@ -844,7 +844,7 @@ export async function coverPlan(ctx, cwd, deps, oriented, clarifications, decomp
             // mode (bare verdict, indistinguishable from a real one). The plan still
             // ships — the floor never rejects on count — but never silently.
             if (best.suspect) {
-                ctx.ui.notify(`/task-auto: only ${best.plan.titles.length} task(s) planned for a large spec`
+                notifyRun(ctx, `/task-auto: only ${best.plan.titles.length} task(s) planned for a large spec`
                     + ' and the regeneration did not grow the list — review the plan before running.', 'warning');
             }
             break;
@@ -889,7 +889,7 @@ export async function coverPlan(ctx, cwd, deps, oriented, clarifications, decomp
     if (unresolvedMissing !== null) {
         logPlanDebug(cwd, `decompose-coverage exhausted ${round} round(s) still INCOMPLETE — missing: `
             + unresolvedMissing.join('; ').slice(0, 300));
-        ctx.ui.notify(`/task-auto: no task fully owns — ${unresolvedMissing.join('; ').slice(0, 200)}. `
+        notifyRun(ctx, `/task-auto: no task fully owns — ${unresolvedMissing.join('; ').slice(0, 200)}. `
             + 'Carried into every task via .pi-tasks/requirements.md, but not as a dedicated '
             + 'task. To give it one, stop now and add it to the plan in .pi-tasks/; otherwise '
             + 'it proceeds.', 'warning');
@@ -966,7 +966,7 @@ export async function planAuto(ctx, cwd, feature, deps) {
             carriedJudge.length > 0 ? `${carriedJudge.length} judge-flagged` : '',
             carriedDangling.length > 0 ? `${carriedDangling.length} dangling-artifact` : ''
         ].filter(p => p.length > 0);
-        ctx.ui.notify(`/task-auto: carrying ${parts.join(', ')} requirement(s) into every task`
+        notifyRun(ctx, `/task-auto: carrying ${parts.join(', ')} requirement(s) into every task`
             + ' — see .pi-tasks/requirements.md.', 'info');
     }
     // Thread the feature's spec doc(s) into every title so each per-task
@@ -1191,7 +1191,7 @@ async function reportStashDrift(active, deps, cwd, id, title, before) {
         const after = await deps.stashRef(cwd);
         if (after === before)
             return;
-        active.ui.notify(`${id}: the git stash stack changed during "${title}" and was left that way — `
+        notifyRun(active, `${id}: the git stash stack changed during "${title}" and was left that way — `
             + 'inspect `git stash list`; an orphan stash later pops as an unresolvable conflict.', 'warning');
     }
     catch {
@@ -1269,8 +1269,7 @@ export async function runAutoLoop(ctx, cwd, id, deps) {
             // never learns how far the run has gotten — mirror it into the session
             // view too (transient toast, same as announceDone's info path).
             const progressMsg = `${id}: task ${next.index + 1}/${entries.length} — ${next.title}`;
-            active.ui.notify(progressMsg, 'info');
-            publishLifecycleNotice(progressMsg, 'info');
+            notifyBoth(active, progressMsg, 'info');
             // If this entry already has a stamped inner id, it was started in a
             // previous (interrupted) run — resume it from its saved phase rather
             // than spawning a fresh task. But the stamped inner file can be gone
@@ -1298,7 +1297,7 @@ export async function runAutoLoop(ctx, cwd, id, deps) {
             // half. Only the success path is announced to keep the common no-op quiet.
             const checkpoint = await deps.commit(cwd, `chore: checkpoint before "${next.title}"`);
             if (checkpoint.committed) {
-                active.ui.notify(`${id}: checkpointed uncommitted work before "${next.title}".`, 'info');
+                notifyRun(active, `${id}: checkpointed uncommitted work before "${next.title}".`, 'info');
             }
             // Stash ref before the task: compared after the gates so a stash pushed
             // during the task (impl model or any child) and left behind is called
@@ -1444,8 +1443,11 @@ async function handleTaskAuto(args, ctx) {
     const cwd = ctx.cwd;
     const raw = args.trim();
     if (raw.length === 0) {
-        ctx.ui.setEditorText('/task-auto ');
-        ctx.ui.notify('Describe the feature after /task-auto (use @ for file completion).', 'info');
+        // Prefilling the composer answers a LOCAL user. From the browser it would
+        // type into a terminal nobody is sitting at; the notice is the answer there.
+        if (!isRemoteOrigin(ctx))
+            ctx.ui.setEditorText('/task-auto ');
+        notifyBoth(ctx, 'Describe the feature after /task-auto (use @ for file completion).', 'info');
         return;
     }
     autoRunning = true;
@@ -1506,11 +1508,13 @@ async function handleTaskAutoResume(args, ctx) {
         : await findResumableAutoDetailed(cwd);
     const candidate = eligible ?? (unattended ? await findResumableAutoDetailed(cwd) : null);
     const decision = decideResume(candidate, Date.now(), unattended);
-    ctx.ui.notify(decision.banner, decision.level);
     // An unattended refusal happens with nobody watching the terminal — the
-    // remote view is the only surface that will still be there in the morning.
+    // remote view is the only surface that will still be there in the morning,
+    // which is why it is a run notice and not a toast.
     if (unattended)
-        publishLifecycleNotice(decision.banner, decision.level);
+        notifyRun(ctx, decision.banner, decision.level);
+    else
+        notifyBoth(ctx, decision.banner, decision.level);
     if (!decision.resume || !candidate)
         return;
     const id = candidate.id;
@@ -1543,10 +1547,12 @@ async function handleTaskAutoResume(args, ctx) {
 async function handleTaskAutoCancel(_args, ctx) {
     if (!autoRunning) {
         ctx.ui.notify('No /task-auto loop is running.', 'info');
+        publishLifecycleNotice('No /task-auto loop is running.', 'info');
         return;
     }
     requestAutoCancel();
     ctx.ui.notify(CANCEL_ACK, 'warning');
+    publishLifecycleNotice(CANCEL_ACK, 'warning');
 }
 /**
  * What the user is told the moment the request lands. Deliberately does NOT

package/dist/task/failure-classifier.js

@@ -4,7 +4,7 @@
  */
 import { updateTaskFrontMatter } from './task-io.js';
 import { flashTerminalWidget } from './widget.js';
-import { publishLifecycleNotice } from '../remote/bridge.js';
+import { notifyRun } from '../remote/bridge.js';
 import { ChildFailureError, USER_CANCELLED } from './child-runner.js';
 import { streamStallCause } from '../shared/stream-watchdog.js';
 // ─── Classifier ──────────────────────────────────────────────────────────────
@@ -80,9 +80,8 @@ export async function handleFailure(err, ctx, cwd, id, aborted) {
     const c = classifyFailure(err, aborted);
     await updateTaskFrontMatter(cwd, id, { state: c.state, reason: c.reason });
     flashTerminalWidget(ctx, c.state, id, c.flash);
-    ctx.ui.notify(`${id} ${c.notify}`, c.level);
-    // Mirror to remote viewers. `ctx.ui.notify` reaches the terminal UI only, so
-    // without this call the remote view shows nothing when a task fails.
-    publishLifecycleNotice(`${id} ${c.notify}`, c.level);
+    // How the run ENDED. Durable on the remote: a toast is gone before an absent
+    // user looks, and this is the one line that says the task did not finish.
+    notifyRun(ctx, `${id} ${c.notify}`, c.level);
     return c;
 }

package/dist/task/gate-child.js

@@ -26,6 +26,7 @@
  */
 import { formatLoopHint } from './loop-detector.js';
 import { classifyEnforceChildFailure } from './enforce-guidelines.js';
+import { notifyRun } from '../remote/bridge.js';
 /**
  * What each kind may do. Adding a child is a row; it cannot be added without
  * deciding all four questions, which is the point.
@@ -145,7 +146,7 @@ export function makeGateChild(deps) {
                         log(`=== ${deps.kind} GIT-STATE GUARD — ${label}; `
                             + `restored: ${rec.actions.join('; ')} ===`);
                         if (rec.verdictTainted) {
-                            deps.ctx.ui.notify(`${deps.taskTitle}: ${deps.kind} child mutated repo state — `
+                            notifyRun(deps.ctx, `${deps.taskTitle}: ${deps.kind} child mutated repo state — `
                                 + `restored (${rec.actions.join('; ').slice(0, 140)}).`, 'warning');
                         }
                     }
@@ -156,7 +157,7 @@ export function makeGateChild(deps) {
             // only thing that can block.
             if (r.loopHit) {
                 log(`=== ${deps.kind} LOOP WARNING — ${formatLoopHint(r.loopHit)} ===`);
-                deps.ctx.ui.notify(`${deps.taskTitle}: ${deps.kind} worker looped past the nudges — `
+                notifyRun(deps.ctx, `${deps.taskTitle}: ${deps.kind} worker looped past the nudges — `
                     + 'continuing (not blocked).', 'warning');
             }
             const failure = classifyEnforceChildFailure(r);

package/dist/task/orchestrator.js

@@ -27,7 +27,7 @@ import { allocateTaskId, ensureTasksDir, readSection, readTaskFile, setTaskSecti
 import { startWidget } from './widget.js';
 import { setupImplWidget } from './impl-widget.js';
 import { enterImplementationTurn } from './implementation-scope.js';
-import { publishViewer, publishNotify, registerBridgeCommand, getBridge } from '../remote/bridge.js';
+import { SessionUI, publishNotify, registerBridgeCommand, getBridge, notifyBoth, isRemoteOrigin } from '../remote/bridge.js';
 import { pushNotify } from '../remote/push.js';
 import { getConfig } from '../config/config.js';
 import { gateDebugWriter } from './debug-log.js';
@@ -681,8 +681,11 @@ async function handleTask(args, ctx) {
     const cwd = ctx.cwd;
     const raw = args.trim();
     if (raw.length === 0) {
-        ctx.ui.setEditorText('/task ');
-        ctx.ui.notify('Type your prompt after /task (use @ for file completion).', 'info');
+        // Prefilling the composer answers a LOCAL user. From the browser it would
+        // type into a terminal nobody is sitting at; the notice is the answer there.
+        if (!isRemoteOrigin(ctx))
+            ctx.ui.setEditorText('/task ');
+        notifyBoth(ctx, 'Type your prompt after /task (use @ for file completion).', 'info');
         return;
     }
     // When a gate is enabled, /task awaits the implementation and runs the same
@@ -696,7 +699,7 @@ async function handleTask(args, ctx) {
     }
     const { end } = await runSingleTask(ctx, cwd, raw, { notifyFinish: true });
     if (end.kind === 'no-session') {
-        ctx.ui.notify('Could not start a fresh session for /task.', 'warning');
+        notifyBoth(ctx, 'Could not start a fresh session for /task.', 'warning');
     }
 }
 async function handleTaskList(_args, ctx) {
@@ -729,8 +732,12 @@ async function handleTaskList(_args, ctx) {
     if (lines.length === 0)
         lines.push('(no tasks in .pi-tasks/)');
     lines.push('', 'resume: /task-resume <id>   (eligible: in_progress, pending, cancelled, failed)');
-    publishViewer('Tasks', lines.join('\n'));
-    await ctx.ui.editor('Tasks', lines.join('\n'));
+    await new SessionUI(ctx).show({
+        localTitle: 'Tasks',
+        localText: lines.join('\n'),
+        question: 'Tasks',
+        body: lines.join('\n')
+    });
 }
 async function handleTaskResume(args, ctx) {
     await ctx.waitForIdle();
@@ -742,8 +749,7 @@ async function handleTaskResume(args, ctx) {
             await fsp.access(taskFilePath(cwd, id));
         }
         catch {
-            ctx.ui.notify(`${id} not found in .pi-tasks/`, 'error');
-            publishNotify(`${id} not found in .pi-tasks/`, 'error');
+            notifyBoth(ctx, `${id} not found in .pi-tasks/`, 'error');
             return;
         }
     }
@@ -771,8 +777,7 @@ async function handleTaskResume(args, ctx) {
         }
         candidates.sort((a, b) => b.mtime - a.mtime);
         if (candidates.length === 0) {
-            ctx.ui.notify('No resumable tasks.', 'info');
-            publishNotify('No resumable tasks.', 'info');
+            notifyBoth(ctx, 'No resumable tasks.', 'info');
             return;
         }
         id = candidates[0].id;
@@ -785,19 +790,17 @@ async function handleTaskResume(args, ctx) {
     }
     const { end } = await runSingleTask(ctx, cwd, '', { resumeId: id, notifyFinish: true });
     if (end.kind === 'no-session') {
-        ctx.ui.notify('Could not start a fresh session for /task-resume.', 'warning');
+        notifyBoth(ctx, 'Could not start a fresh session for /task-resume.', 'warning');
     }
 }
 // eslint-disable-next-line @typescript-eslint/require-await
 async function handleTaskCancel(_args, ctx) {
     if (!activeTask) {
-        ctx.ui.notify('No task is running.', 'info');
-        publishNotify('No task is running.', 'info');
+        notifyBoth(ctx, 'No task is running.', 'info');
         return;
     }
     activeTask.cancel();
-    ctx.ui.notify(`Cancelling ${activeTask.taskId}…`, 'warning');
-    publishNotify(`Cancelling ${activeTask.taskId}…`, 'warning');
+    notifyBoth(ctx, `Cancelling ${activeTask.taskId}…`, 'warning');
 }
 // ─── Entry point ─────────────────────────────────────────────────────────────
 export function registerTask(pi) {

package/dist/task/phases.js

@@ -40,7 +40,7 @@ import { detachUnsatisfiableRequirements, claimPendingRequirements, unclaimedPen
 import { trackedSourceOracle } from './owned-freeze-conflict.js';
 import { groupArgsForChild, runPhaseChild, runWithEmphasisRetry, prependHint, USER_CANCELLED, ChildFailureError, isFatalChildCause } from './child-runner.js';
 import { runResearchWorker, researchWorkerCacheHeading } from './research-worker.js';
-import { SessionUI } from '../remote/bridge.js';
+import { SessionUI, notifyRun } from '../remote/bridge.js';
 import { isYoloMode, yoloPickAutoAnswer } from './yolo.js';
 import { QaTranscript, GRILL_QA_POLICY } from './qa-transcript.js';
 // ─── Re-export constants from their home modules ────────────────────────────
@@ -1113,7 +1113,7 @@ export async function critiqueWithFallback(d, p) {
         // it is the validated-shape fallback, and failing the run costs more.
         if (parseVerifyBlock(p.spec) === null)
             throw err;
-        p.ctx.ui.notify(msg === 'verify_grep_theater' ?
+        notifyRun(p.ctx, msg === 'verify_grep_theater' ?
             'Critique rewrite kept a grep-only VERIFY — using compose draft. Consider adding a command that RUNS the deliverable.'
             : "Critique couldn't produce a VERIFY block — using compose draft. Edit the spec manually if needed.", 'warning');
         return p.spec;

package/dist/task/plan-orchestrator.js

@@ -34,7 +34,7 @@ import { deriveTitle } from './parsers.js';
 import { renderInlineMarkdown } from './inline-markdown.js';
 import { expandFeatureMentions } from './auto-orchestrator.js';
 import { runSingleTask, runGatedTask } from './orchestrator.js';
-import { SessionUI, publishViewer, publishLifecycleNotice, registerBridgeCommand } from '../remote/bridge.js';
+import { SessionUI, registerBridgeCommand, notifyBoth, notifyRun, isRemoteOrigin } from '../remote/bridge.js';
 import { withRun, announceTerminal } from './run-bracket.js';
 import { getConfig } from '../config/config.js';
 import { isYoloMode } from './yolo.js';
@@ -121,9 +121,12 @@ export function buildPlanDeps(ctx, cwd, planId, task, signal) {
             allowSkip: true
         }),
         showAnswer: async (question, answer) => {
-            const text = `You asked:\n${question}\n\n${answer}\n`;
-            publishViewer(ASK_TITLE, text);
-            await ctx.ui.editor(ASK_TITLE, text);
+            await ui.show({
+                localTitle: ASK_TITLE,
+                localText: `You asked:\n${question}\n\n${answer}\n`,
+                question: `You asked: ${question}`,
+                body: answer
+            });
         },
         onEntries: async (entries) => {
             await persistEntries(cwd, planId, entries);
@@ -147,13 +150,7 @@ export function buildPlanDeps(ctx, cwd, planId, task, signal) {
 async function reportReadOnlyViolation(ctx, cwd, planId, step, touched, logDebug) {
     const line = formatReadOnlyViolation(step, touched);
     logDebug?.(line);
-    try {
-        ctx.ui.notify(line, 'error');
-    }
-    catch {
-        /* stale ctx — the record below is what matters */
-    }
-    publishLifecycleNotice(line, 'error');
+    notifyRun(ctx, line, 'error');
     try {
         const existing = (await readSection(cwd, planId, 'read-only violations')) ?? '';
         await setTaskSection(cwd, planId, 'read-only violations', existing ? `${existing}\n- ${line}` : `- ${line}`);
@@ -193,7 +190,7 @@ async function defaultHandoff(ctx, cwd, prompt) {
     }
     const { taskId, end } = await runSingleTask(ctx, cwd, prompt, { notifyFinish: true });
     if (end.kind === 'no-session') {
-        ctx.ui.notify('Could not start a fresh session for /task-plan.', 'warning');
+        notifyBoth(ctx, 'Could not start a fresh session for /task-plan.', 'warning');
         return undefined;
     }
     return taskId || undefined;
@@ -239,8 +236,11 @@ export async function handleTaskPlan(args, ctx, commandDeps = DEFAULT_COMMAND_DE
     const cwd = ctx.cwd;
     const raw = args.trim();
     if (raw.length === 0) {
-        ctx.ui.setEditorText('/task-plan ');
-        ctx.ui.notify('Describe the task after /task-plan (use @ for file completion).', 'info');
+        // Prefilling the composer answers a LOCAL user. From the browser it would
+        // type into a terminal nobody is sitting at; the notice is the answer there.
+        if (!isRemoteOrigin(ctx))
+            ctx.ui.setEditorText('/task-plan ');
+        notifyBoth(ctx, 'Describe the task after /task-plan (use @ for file completion).', 'info');
         return;
     }
     // Inline any @file the user referenced, exactly as /task-auto's planner does:

package/dist/task/run-final-gate.js

@@ -1,7 +1,7 @@
 import { AutofixLedger } from './autofix-ledger.js';
 import { describeDebt, recordDebt } from './accept-debt.js';
 import { cancelCheckpoint } from './cancel-points.js';
-import { SessionUI } from '../remote/bridge.js';
+import { SessionUI, notifyBoth, notifyRun } from '../remote/bridge.js';
 import { isYoloMode, yoloFinalGateChoice, YOLO_STAMP } from './yolo.js';
 import { ignoredWriteTrailLine, ignoredWriteDebtReason } from './write-guard.js';
 import { readOwnedRequirements } from './requirements.js';
@@ -76,7 +76,7 @@ export async function runFinalGateStage(active, deps, p) {
     // Set when the gate finished having observed NOTHING dynamic. Declared out here so
     // the run-completion announcement can say so.
     let unobservedNote = null;
-    active.ui.notify(`${id}: running final integration gate…`, 'info');
+    notifyBoth(active, `${id}: running final integration gate…`, 'info');
     // Run-level gate trail on the parent task file — same durable auditability
     // contract as the per-task `## gates` records.
     const recGate = async (line) => {
@@ -111,7 +111,7 @@ export async function runFinalGateStage(active, deps, p) {
         unobservedNote = fin.unobserved;
         await recGate(`final-gate: UNOBSERVED — ${fin.reason.slice(0, 300)}`);
         await carryDebt(fin.unobserved);
-        active.ui.notify(`${id}: the final integration gate observed NOTHING dynamic — `
+        notifyRun(active, `${id}: the final integration gate observed NOTHING dynamic — `
             + 'the run completed on static checks alone. Nothing verified '
             + 'that the assembled product builds, boots or works.', 'warning');
     }
@@ -132,7 +132,7 @@ export async function runFinalGateStage(active, deps, p) {
         for (const d of debts) {
             await recGate(`defect STILL OPEN — ${d.taskId || '(unknown task)'}: ${describeDebt(d)}: ${d.reason.slice(0, 240)}${d.conflict ? ` [CONFLICTING CLAIM — ${d.conflict}]` : ''}`);
         }
-        active.ui.notify(`${id}: ${debts.length} recorded verify-FAIL defect(s) are STILL unresolved at run end — see the gate trail.`, 'warning');
+        notifyRun(active, `${id}: ${debts.length} recorded verify-FAIL defect(s) are STILL unresolved at run end — see the gate trail.`, 'warning');
     };
     // What was REPORTED, so a post-autofix re-derivation can be compared against it
     // rather than blindly re-printed.
@@ -149,7 +149,7 @@ export async function runFinalGateStage(active, deps, p) {
             + ` ${(o.pending ?? []).join(', ')}]`);
     }
     if (unclaimed.length > 0) {
-        active.ui.notify(`${id}: ${unclaimed.length} authoritative design requirement(s) ended the run`
+        notifyRun(active, `${id}: ${unclaimed.length} authoritative design requirement(s) ended the run`
             + ' owned by NO task — the task they were mapped to could not touch the'
             + ' file, and nothing else claimed it. See the gate trail.', 'warning');
     }
@@ -315,7 +315,7 @@ export async function runFinalGateStage(active, deps, p) {
             // commit — the ACCEPT is a decision about the FAILING gate, never an
             // instruction to throw away work.
             await commitStranded('accepted');
-            active.ui.notify(`${id}: final integration gate FAIL accepted by user — completing.`
+            notifyRun(active, `${id}: final integration gate FAIL accepted by user — completing.`
                 + (ledger.stranded().length > 0 ?
                     ` ${ledger.stranded().length} uncommitted fix-pass change(s) committed separately.`
                     : ''), 'warning');
@@ -324,7 +324,7 @@ export async function runFinalGateStage(active, deps, p) {
         if (choice.action === 'autofix' && canAutofix) {
             const attempt = ledger.attempt();
             await recGate(`final-gate: user chose AUTOFIX (attempt ${attempt}/${MAX_FINAL_GATE_AUTOFIX})`);
-            active.ui.notify(`${id}: final-gate autofix (${attempt}/${MAX_FINAL_GATE_AUTOFIX}) — bounded fix pass, then the gate re-runs…`, 'info');
+            notifyRun(active, `${id}: final-gate autofix (${attempt}/${MAX_FINAL_GATE_AUTOFIX}) — bounded fix pass, then the gate re-runs…`, 'info');
             const seed = choice.guidance ? `${fin.reason}\n\nUser guidance: ${choice.guidance}` : fin.reason;
             const fix = await deps.finalGateFix(active, cwd, seed, [...ledger.ignoredWrites()]);
             // IGNORED-PATH WRITES. The pass wrote file(s) git ignores, so
@@ -355,7 +355,7 @@ export async function runFinalGateStage(active, deps, p) {
                     await carryDebt(fix.unobserved);
                 }
                 await recGate(`final-gate: autofix ${fix.unobserved ? 'ended UNOBSERVED' : 'converged'} — ${fix.reason.slice(0, 200)}`);
-                active.ui.notify(`${id}: final integration gate ${fix.unobserved ? 'is UNOBSERVED' : 'PASSES'} after autofix — ${fix.reason.slice(0, 140)}`, fix.unobserved ? 'warning' : 'info');
+                notifyRun(active, `${id}: final integration gate ${fix.unobserved ? 'is UNOBSERVED' : 'PASSES'} after autofix — ${fix.reason.slice(0, 140)}`, fix.unobserved ? 'warning' : 'info');
                 // The gate's own outcome, WHOLE, with this door's reason on it.
                 // Rebuilding it as a two-key literal would drop `openDebts` and
                 // `observedFailures` from the value entirely.
@@ -380,7 +380,7 @@ export async function runFinalGateStage(active, deps, p) {
                 await recGate(`final-gate: autofix attempt ${attempt} left ${ledger.stranded().length} `
                     + `uncommitted change(s) — ${ledger.stranded().slice(0, 8).join(', ')}`);
             }
-            active.ui.notify(`${id}: final-gate autofix did not converge — ${fix.reason.slice(0, 140)}`, 'warning');
+            notifyRun(active, `${id}: final-gate autofix did not converge — ${fix.reason.slice(0, 140)}`, 'warning');
             // NON-PROGRESS CLASSIFIER. An attempt that changed the tree, re-ran the
             // gate, and got back the SAME ranked-first failure as the previous such
             // attempt is evidence about the CHECK, not about the fix — a check that
@@ -396,7 +396,7 @@ export async function runFinalGateStage(active, deps, p) {
                 await recGate(`final-gate: check DEMOTED to UNOBSERVED after ${attempt} tree-changing `
                     + `attempts returned an identical failure — carried as debt (origin final-gate) `
                     + `and re-checked by the next run's gate: ${verdict.detail.slice(0, 240)}`);
-                active.ui.notify(`${id}: final-gate check is unfalsifiable in this environment — carried as debt; `
+                notifyRun(active, `${id}: final-gate check is unfalsifiable in this environment — carried as debt; `
                     + 'the remaining checks decide convergence.', 'warning');
             }
             // Convergence on the REMAINING checks: a demoted signature no longer counts
@@ -409,7 +409,7 @@ export async function runFinalGateStage(active, deps, p) {
                     const converged = `converged on all remaining checks; ${ledger.demotedCount()} check(s) `
                         + 'carried as UNOBSERVED debt (unfalsifiable in this environment)';
                     await recGate(`final-gate: ${converged}`);
-                    active.ui.notify(`${id}: final integration gate converged — ${converged}.`, 'warning');
+                    notifyRun(active, `${id}: final integration gate converged — ${converged}.`, 'warning');
                     // The gate's own outcome, with this door's reason on it — the
                     // whole value, so `openDebts` survives the assignment.
                     fin = { ...fix.gate, ok: true, reason: converged };