@mjasnikovs/pi-task 0.38.29 → 0.38.30

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    /* Held mid-run input: what you typed is waiting for the next task turn.\n       In normal flow, NOT absolutely positioned over the composer \u2014 as an\n       overlay it covered the task widget's progress row (caught in a real\n       browser against a live /task-auto run). */\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       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      #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      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    }";

package/dist/remote/ui-styles.js

@@ -9,11 +9,9 @@ export const STYLES = `    :root {
     body {
       background: var(--base); color: var(--text);
       font-family: ui-monospace, monospace;
-      /* --app-h is set from window.innerHeight (see setAppHeight) so the column
-         height is a stable pixel value across an orientation change. 100dvh is a
-         fallback for first paint / no-JS: iOS Safari interpolates dvh during the
-         rotation animation, which makes the whole flex column resize repeatedly
-         ("spazzing out") — a fixed px height does not. */
+      /* --app-h is set by setAppHeight (visualViewport.height, falling back to
+         window.innerHeight) so the column height is a stable pixel value across
+         an orientation change. 100dvh is the fallback for first paint / no-JS. */
       height: var(--app-h, 100dvh);
       display: flex; flex-direction: column; overflow: hidden;
       padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
@@ -207,7 +205,7 @@ export const STYLES = `    :root {
       align-self: stretch; max-width: 100%; font-size: 12px;
     }
     /* Header row above a code block: language label on the left, copy button on
-       the right (the surface bar that used to live on .code-lang). */
+       the right, on its own surface bar. */
     .code-head {
       display: flex; align-items: center; justify-content: space-between;
       background: var(--surface0);
@@ -261,9 +259,8 @@ export const STYLES = `    :root {
       position: relative;
     }
     /* Held mid-run input: what you typed is waiting for the next task turn.
-       In normal flow, NOT absolutely positioned over the composer — as an
-       overlay it covered the task widget's progress row (caught in a real
-       browser against a live /task-auto run). */
+       In normal flow, NOT absolutely positioned — as an overlay it would cover
+       the task widget's progress row above the composer. */
     #held-bar {
       display: flex; align-items: center; gap: 8px; flex-shrink: 0;
       background: var(--mantle); border-top: 1px solid var(--surface1);
@@ -323,8 +320,8 @@ export const STYLES = `    :root {
       font-size: 13px; z-index: 100; letter-spacing: 0.03em;
     }
     #reconnect-overlay.visible { display: flex; }
-    /* Trailing stream indicator: the same braille spinner as the thinking bubble,
-       inline at the end of the streaming text (not a green blinking block). */
+    /* Trailing stream indicator: the same braille spinner as the thinking bubble
+       (one ticker paints every .spin), inline at the end of the streaming text. */
     .cursor {
       color: var(--mauve); margin-left: 2px;
       font-family: ui-monospace, monospace;
@@ -334,8 +331,8 @@ export const STYLES = `    :root {
     /* Structured task widget (progress bar + phase badge + elapsed). Replaces the
        plain text lines when the server sends a structured data payload. */
     #status-panel.structured { white-space: normal; display: block; }
-    /* Title gets its own line and wraps (clamped to 2) — never truncated to a stub
-       the way the old single-row flex layout squeezed it on narrow/mobile widths. */
+    /* Title gets its own line and wraps, clamped to 2 — never squeezed to a stub
+       by the meta row beside it on a narrow screen. */
     .widget-title { display: -webkit-box; -webkit-box-orient: vertical;
       -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--text);
       font-size: 13px; line-height: 1.3; word-break: break-word; }

package/dist/remote/ui-tools.js

@@ -1,20 +1,23 @@
 // Tool-call presentation helpers, shipped as a JS string and concatenated into
 // the page by ui.ts. Turns raw {toolName, args} into a readable one-line summary,
-// a +N −M diff badge, and an expandable line-diff body for edit/write tools —
-// replacing the old "name + JSON.stringify(args) hard-sliced at 64 chars".
+// a +N −M diff badge, and an expandable line-diff body for edit/write tools.
 //
-// Depends on escHtml (ui-render.ts) — both land in the same <script>.
+// Depends on escHtml (ui-render.ts) — ui.ts emits renderModule() ahead of
+// toolsModule(), inside one <script>.
 /** Emitted client JS (top-level function declarations). */
 export function toolsModule() {
-    return `    // args arrives as an object (live tool_start / snapshot part) or a JSON string.
+    return `    // pi types tool_execution_start's args as an "any", so accept
+    // either the object (live event / snapshot part) or a JSON string; null for
+    // anything else.
     function toolArgs(args) {
       if (args && typeof args === 'object') return args;
       if (typeof args === 'string') { try { return JSON.parse(args); } catch (e) { return null; } }
       return null;
     }
 
-    // A readable one-line summary. Falls back to the old name+JSON form (but with NO
-    // hard 64-char slice — the summary line ellipsizes via CSS, full text on hover).
+    // A readable one-line summary, falling back to name + JSON for a tool with no
+    // special case. Never truncated here: .tool-label ellipsizes in CSS and
+    // addToolCall puts the full text in the summary's title attribute.
     function toolSummary(toolName, args) {
       var name = (toolName || '').toLowerCase();
       var a = toolArgs(args);

package/dist/shared/child-extensions.d.ts

@@ -1,28 +1,40 @@
 /**
- * Extension whitelist → child argv (GitHub issue #4).
+ * Extension whitelist → child argv.
  *
- * Child pi sessions run with `--no-extensions`, so a provider registered by a
- * host extension (e.g. pi-lmstudio) doesn't exist in them — the child can't
- * resolve the default model and demands OAuth/API keys. pi's `--no-extensions`
- * explicitly preserves explicit `-e <path>` loads (only discovery is disabled),
- * so injecting the user's whitelisted entry paths restores the provider while
- * keeping every non-whitelisted extension out. Same mechanism pi-task already
- * uses for its own worker-tool extensions (see runWorker's `extensions` input).
+ * Child pi sessions run with `--no-extensions` (see CHILD_BASE_ARGS). That flag
+ * disables extension DISCOVERY only: pi still loads every explicit `-e <path>`.
+ * An extension can be the sole source of a model provider — pi's `ExtensionAPI`
+ * exposes `registerProvider` — and with discovery off such an extension never
+ * runs in the child, so the provider it would register is absent there.
+ * Injecting the user's whitelisted entry paths loads exactly those back and
+ * leaves every non-whitelisted extension out.
+ *
+ * Same mechanism `runWorker` uses for the internal worker-tool extensions, via
+ * its `extensions` input.
  */
 /**
  * Map whitelisted entry paths to `-e` argv pairs. Pure given `exists`.
  *
- * A path whose file is gone (extension uninstalled since it was whitelisted)
- * is skipped silently: pi itself would record "Extension path does not exist"
- * as a load ERROR, and a stale toggle must never break every child spawn.
- * Duplicates collapse so a path can't be loaded twice.
+ * The existence filter is load-bearing. A missing `-e` path is fatal to pi, not
+ * a warning: it prints `Extension path does not exist: <path>` and exits 1
+ * without reaching the model. So a whitelist entry left pointing at an
+ * uninstalled extension would kill every child spawn, and is dropped here
+ * instead. Blank and duplicate entries are dropped for the same reason — a
+ * hand-edited config must not be able to shape the argv into a failure.
  */
 export declare function extensionArgs(paths: readonly string[], exists?: (p: string) => boolean): string[];
 /**
- * The base argv every child pi invocation starts from: internal worker
- * extensions (verbatim — they always exist, shipped in dist), then the user's
- * whitelisted extensions (existence-filtered, deduped against the internal
- * ones), then CHILD_BASE_ARGS. Computed per spawn, not at module load, so a
- * /task-config toggle takes effect for the next child without a restart.
+ * The base argv every child pi invocation starts from: all three argv builders
+ * (`childArgs`, `focusedChildArgs`, `runWorker`) begin here.
+ *
+ * Order: internal worker extensions, then the user's whitelisted extensions
+ * (existence-filtered, and deduped against the internal ones), then
+ * CHILD_BASE_ARGS. Internal paths go in verbatim with no existence check
+ * because every one of them is resolved against `import.meta.url`, so it names
+ * a sibling of the module that asked for it and ships wherever that ships.
+ *
+ * The config is read on every call rather than at module load, so a
+ * `/task-config` toggle reaches the next child: the toggle saves through
+ * `saveConfig`, which replaces the object `getConfig` hands back.
  */
 export declare function childBaseArgs(internalExtensions?: readonly string[]): string[];

package/dist/shared/child-extensions.js

@@ -2,23 +2,28 @@ import * as fs from 'node:fs';
 import { CHILD_BASE_ARGS } from './child-process.js';
 import { getConfig } from '../config/config.js';
 /**
- * Extension whitelist → child argv (GitHub issue #4).
+ * Extension whitelist → child argv.
  *
- * Child pi sessions run with `--no-extensions`, so a provider registered by a
- * host extension (e.g. pi-lmstudio) doesn't exist in them — the child can't
- * resolve the default model and demands OAuth/API keys. pi's `--no-extensions`
- * explicitly preserves explicit `-e <path>` loads (only discovery is disabled),
- * so injecting the user's whitelisted entry paths restores the provider while
- * keeping every non-whitelisted extension out. Same mechanism pi-task already
- * uses for its own worker-tool extensions (see runWorker's `extensions` input).
+ * Child pi sessions run with `--no-extensions` (see CHILD_BASE_ARGS). That flag
+ * disables extension DISCOVERY only: pi still loads every explicit `-e <path>`.
+ * An extension can be the sole source of a model provider — pi's `ExtensionAPI`
+ * exposes `registerProvider` — and with discovery off such an extension never
+ * runs in the child, so the provider it would register is absent there.
+ * Injecting the user's whitelisted entry paths loads exactly those back and
+ * leaves every non-whitelisted extension out.
+ *
+ * Same mechanism `runWorker` uses for the internal worker-tool extensions, via
+ * its `extensions` input.
  */
 /**
  * Map whitelisted entry paths to `-e` argv pairs. Pure given `exists`.
  *
- * A path whose file is gone (extension uninstalled since it was whitelisted)
- * is skipped silently: pi itself would record "Extension path does not exist"
- * as a load ERROR, and a stale toggle must never break every child spawn.
- * Duplicates collapse so a path can't be loaded twice.
+ * The existence filter is load-bearing. A missing `-e` path is fatal to pi, not
+ * a warning: it prints `Extension path does not exist: <path>` and exits 1
+ * without reaching the model. So a whitelist entry left pointing at an
+ * uninstalled extension would kill every child spawn, and is dropped here
+ * instead. Blank and duplicate entries are dropped for the same reason — a
+ * hand-edited config must not be able to shape the argv into a failure.
  */
 export function extensionArgs(paths, exists = fs.existsSync) {
     const seen = new Set();
@@ -34,11 +39,18 @@ export function extensionArgs(paths, exists = fs.existsSync) {
     return args;
 }
 /**
- * The base argv every child pi invocation starts from: internal worker
- * extensions (verbatim — they always exist, shipped in dist), then the user's
- * whitelisted extensions (existence-filtered, deduped against the internal
- * ones), then CHILD_BASE_ARGS. Computed per spawn, not at module load, so a
- * /task-config toggle takes effect for the next child without a restart.
+ * The base argv every child pi invocation starts from: all three argv builders
+ * (`childArgs`, `focusedChildArgs`, `runWorker`) begin here.
+ *
+ * Order: internal worker extensions, then the user's whitelisted extensions
+ * (existence-filtered, and deduped against the internal ones), then
+ * CHILD_BASE_ARGS. Internal paths go in verbatim with no existence check
+ * because every one of them is resolved against `import.meta.url`, so it names
+ * a sibling of the module that asked for it and ships wherever that ships.
+ *
+ * The config is read on every call rather than at module load, so a
+ * `/task-config` toggle reaches the next child: the toggle saves through
+ * `saveConfig`, which replaces the object `getConfig` hands back.
  */
 export function childBaseArgs(internalExtensions = []) {
     const internal = internalExtensions.flatMap(e => ['-e', e]);

package/dist/shared/child-output.d.ts

@@ -4,34 +4,34 @@ export declare function parseChildOutput(stdout: string): {
 };
 export declare function normaliseWhitespace(s: string): string;
 /**
- * THE excerpt predicate: does this excerpt appear verbatim in the source content
- * (whitespace-normalised)? {@link verifyExcerpt} delegates to it, so there is exactly one
- * definition of "verified" in the codebase.
+ * THE excerpt predicate: does this excerpt appear verbatim in the source content,
+ * whitespace-normalised? {@link verifyExcerpt} delegates to it, and
+ * `normaliseWhitespace` has no caller outside this file, so the codebase holds
+ * exactly one definition of "verified".
  *
- * False for an excerpt that is empty OR whitespace-only. The emptiness test is applied to
- * the NORMALISED excerpt, not the raw one: `"   "` is a non-empty string that normalises to
- * `""`, and `content.includes('')` is true for every content — so the raw-string guard let a
- * whitespace-only excerpt "verify" against anything, while `verifyExcerpt` (which tested the
- * normalised length) called the same input unverified. A citation with no characters in it is
- * not evidence, so both now answer false.
+ * The emptiness test runs on the NORMALISED excerpt, not the raw one, and the
+ * distinction is load-bearing. `"   "` has length 3 but normalises to `""`, and
+ * `content.includes("")` is true for every content — so a raw-length guard would
+ * let a whitespace-only citation verify against anything at all. A citation with
+ * no characters in it is not evidence.
  *
- * Unreachable from the shipped extractors — `parseChildOutput` already maps a whitespace-only
- * `<excerpt>` to `undefined` via `.trim() || undefined`, and every call site guards on that —
- * so this is a latent-disagreement fix, not a behaviour change to any recorded verdict.
+ * The shipped extractor cannot reach that input: `parseChildOutput` maps a
+ * whitespace-only `<excerpt>` to `undefined` via `.trim() || undefined`, and its
+ * one call site tests `parsed.excerpt` before calling in. This guard is what
+ * keeps the predicate honest if a second call site appears.
  */
 export declare function isExcerptInContent(excerpt: string, content: string): boolean;
 /**
  * The same verdict as {@link isExcerptInContent}, PLUS a retained record of what was
- * actually checked — the whitespace-normalised excerpt and a hash+length of the normalised
- * content it was searched in. This is PROMPT-3 item 4: make an `excerptVerified === false`
- * DIAGNOSABLE after the fact, so it can be attributed to fabrication (the excerpt is nowhere
- * near the content) versus a normaliser gap (it is a markdown-escape or entity variant of
- * text that IS present) WITHOUT re-fetching. It deliberately does NOT loosen the verifier:
- * `.verified` IS `isExcerptInContent` — delegated, not re-implemented, so the two cannot
- * drift apart again (they had: a whitespace-only excerpt verified there and failed here).
- * F-3(f) — whether the normaliser needs
- * markdown-escape handling — is left unproven on purpose; you decide that from the retained
- * evidence, not by weakening the one working hallucination detector first.
+ * actually checked: the whitespace-normalised excerpt, and a sha256 and length of the
+ * normalised content it was searched in.
+ *
+ * The retained fields make a `verified === false` diagnosable without re-fetching the
+ * source. They separate fabrication (the excerpt is nowhere near the content) from a
+ * normaliser gap (it is an escape or entity variant of text that IS present), and the
+ * content hash says whether two verdicts were even looking at the same page.
+ *
+ * Adding evidence is the whole change: the verdict itself is not loosened.
  */
 export interface ExcerptVerification {
     verified: boolean;
@@ -43,8 +43,14 @@ export interface ExcerptVerification {
     normalisedExcerpt: string;
 }
 export declare function verifyExcerpt(excerpt: string, content: string): ExcerptVerification;
-/** Format the child's parsed output with a header and optional excerpt block.
- *  When `verified === false` a warning is prepended. */
+/**
+ * Format the child's parsed output with a header and optional excerpt block.
+ *
+ * The warning is prepended only on the excerpt path, and only for an explicit
+ * `false`. With no excerpt the function returns before the warning is built, and
+ * an `undefined` verdict — nothing was checked — prints no warning either. So the
+ * warning means "checked and not found", never "not checked".
+ */
 export declare function formatResultText(header: string, parsed: {
     answer: string;
     excerpt?: string;

package/dist/shared/child-output.js

@@ -1,9 +1,10 @@
 /**
  * Shared utilities for parsing and formatting child pi output.
  *
- * Used by both fetch-core (web page extraction) and docs-core (npm package
- * docs extraction). The child pi outputs <answer> and <excerpt> XML tags;
- * these functions parse, verify, and format the result.
+ * An extraction child is prompted to answer inside `<answer>` and cite inside
+ * `<excerpt>` — the rule blocks that ask for it live in fetch-core and
+ * abstention. These functions parse those tags, check the citation against the
+ * source it was drawn from, and format the result.
  */
 import { createHash } from 'node:crypto';
 export function parseChildOutput(stdout) {
@@ -21,20 +22,21 @@ export function normaliseWhitespace(s) {
     return s.replace(/\s+/g, ' ').trim();
 }
 /**
- * THE excerpt predicate: does this excerpt appear verbatim in the source content
- * (whitespace-normalised)? {@link verifyExcerpt} delegates to it, so there is exactly one
- * definition of "verified" in the codebase.
+ * THE excerpt predicate: does this excerpt appear verbatim in the source content,
+ * whitespace-normalised? {@link verifyExcerpt} delegates to it, and
+ * `normaliseWhitespace` has no caller outside this file, so the codebase holds
+ * exactly one definition of "verified".
  *
- * False for an excerpt that is empty OR whitespace-only. The emptiness test is applied to
- * the NORMALISED excerpt, not the raw one: `"   "` is a non-empty string that normalises to
- * `""`, and `content.includes('')` is true for every content — so the raw-string guard let a
- * whitespace-only excerpt "verify" against anything, while `verifyExcerpt` (which tested the
- * normalised length) called the same input unverified. A citation with no characters in it is
- * not evidence, so both now answer false.
+ * The emptiness test runs on the NORMALISED excerpt, not the raw one, and the
+ * distinction is load-bearing. `"   "` has length 3 but normalises to `""`, and
+ * `content.includes("")` is true for every content — so a raw-length guard would
+ * let a whitespace-only citation verify against anything at all. A citation with
+ * no characters in it is not evidence.
  *
- * Unreachable from the shipped extractors — `parseChildOutput` already maps a whitespace-only
- * `<excerpt>` to `undefined` via `.trim() || undefined`, and every call site guards on that —
- * so this is a latent-disagreement fix, not a behaviour change to any recorded verdict.
+ * The shipped extractor cannot reach that input: `parseChildOutput` maps a
+ * whitespace-only `<excerpt>` to `undefined` via `.trim() || undefined`, and its
+ * one call site tests `parsed.excerpt` before calling in. This guard is what
+ * keeps the predicate honest if a second call site appears.
  */
 export function isExcerptInContent(excerpt, content) {
     const ne = normaliseWhitespace(excerpt);
@@ -53,8 +55,14 @@ export function verifyExcerpt(excerpt, content) {
         normalisedExcerpt: ne
     };
 }
-/** Format the child's parsed output with a header and optional excerpt block.
- *  When `verified === false` a warning is prepended. */
+/**
+ * Format the child's parsed output with a header and optional excerpt block.
+ *
+ * The warning is prepended only on the excerpt path, and only for an explicit
+ * `false`. With no excerpt the function returns before the warning is built, and
+ * an `undefined` verdict — nothing was checked — prints no warning either. So the
+ * warning means "checked and not found", never "not checked".
+ */
 export function formatResultText(header, parsed, verified) {
     if (!parsed.excerpt) {
         return header ? `${header}\n\n${parsed.answer}` : parsed.answer;