@mjasnikovs/pi-task 0.17.21 → 0.17.23

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

package/dist/remote/ui-styles.js

@@ -43,6 +43,54 @@ export const STYLES = `    :root {
     }
     #bell:hover { color: var(--text); }
     #bell.on { color: var(--mauve); }
+    /* Header status chip: connection dot + model name + context usage. */
+    #status-chip { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--subtext0); }
+    #status-dot {
+      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
+      background: var(--surface2); transition: background 0.2s ease;
+    }
+    #status-dot.idle { background: var(--green); }
+    #status-dot.running { background: var(--mauve); animation: dot-pulse 1.2s ease-in-out infinite; }
+    #status-dot.disconnected { background: var(--red); }
+    @keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+    @media (prefers-reduced-motion: reduce) { #status-dot.running { animation: none; } }
+    #status-model { color: var(--subtext1); }
+    #status-model:empty { display: none; }
+    #status-ctx { color: var(--subtext0); font-variant-numeric: tabular-nums; }
+    #status-ctx:empty { display: none; }
+    /* Notification bell dropdown: a push toggle row + the recent-toast history. */
+    #notif-panel {
+      display: none; position: fixed; z-index: 80;
+      top: calc(env(safe-area-inset-top, 0px) + 42px);
+      right: calc(env(safe-area-inset-right, 0px) + 12px);
+      width: min(320px, calc(100vw - 24px));
+      background: var(--mantle); border: 1px solid var(--surface1); border-radius: 8px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); overflow: hidden;
+    }
+    #notif-panel.open { display: block; }
+    #notif-toggle-row {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 8px 12px; border-bottom: 1px solid var(--surface0);
+    }
+    #notif-title { font-size: 12px; color: var(--subtext1); font-weight: 700; }
+    #notif-toggle {
+      background: var(--surface1); color: var(--text); border: none; border-radius: 6px;
+      padding: 4px 10px; font-family: inherit; font-size: 11px; cursor: pointer;
+    }
+    #notif-toggle:hover { filter: brightness(1.1); }
+    #notif-toggle.on { background: var(--mauve); color: var(--crust); font-weight: 700; }
+    #notif-list { max-height: 40dvh; overflow-y: auto; }
+    #notif-empty { padding: 14px 12px; color: var(--subtext0); font-size: 11px; text-align: center; }
+    .notif-item {
+      display: flex; align-items: baseline; gap: 8px; padding: 7px 12px;
+      border-bottom: 1px solid var(--surface0); font-size: 12px;
+    }
+    .notif-item:last-child { border-bottom: none; }
+    .notif-item .notif-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--blue); align-self: center; }
+    .notif-item.warning .notif-dot { background: var(--peach); }
+    .notif-item.error .notif-dot { background: var(--red); }
+    .notif-item .notif-msg { flex: 1; min-width: 0; color: var(--text); overflow-wrap: anywhere; word-break: break-word; }
+    .notif-item .notif-time { flex-shrink: 0; color: var(--subtext0); font-size: 10px; font-variant-numeric: tabular-nums; }
     #chat-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
     #chat-log {
       flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 16px;
@@ -67,7 +115,7 @@ export const STYLES = `    :root {
       line-height: 1.6; white-space: pre-wrap; word-break: break-word; font-size: 13px;
     }
     .bubble.user { background: var(--surface1); color: var(--text); align-self: flex-end; }
-    .bubble.assistant { background: var(--surface0); color: var(--text); align-self: flex-start; }
+    .bubble.assistant { background: var(--surface0); color: var(--text); align-self: flex-start; position: relative; }
     .bubble.error {
       background: var(--crust); color: var(--red); align-self: stretch;
       max-width: 100%; border: 1px solid var(--red); font-size: 12px;
@@ -86,6 +134,37 @@ export const STYLES = `    :root {
       color: var(--mauve); font-size: 15px; line-height: 1;
       font-family: ui-monospace, monospace;
     }
+    /* Collapsed reasoning block ("✻ Thinking… (n lines)"), muted + italic. */
+    .thinking-block { align-self: flex-start; max-width: 90%; font-size: 12px; }
+    .thinking-block > summary {
+      color: var(--subtext0); font-style: italic; cursor: pointer; list-style: none;
+      user-select: none; display: flex; align-items: center; gap: 8px; padding: 2px 0;
+    }
+    .thinking-block > summary::-webkit-details-marker { display: none; }
+    .thinking-block .thinking-spin {
+      color: var(--mauve); font-style: normal; font-family: ui-monospace, monospace;
+    }
+    .thinking-block .thinking-body {
+      color: var(--subtext0); font-style: italic; white-space: pre-wrap;
+      word-break: break-word; line-height: 1.5; margin: 4px 0 0 4px;
+      padding: 4px 0 2px 12px; border-left: 2px solid var(--surface1);
+    }
+    /* Copy buttons: on code-block headers and (floating) on finished assistant
+       bubbles. Wired by one delegated click handler in the client script. */
+    .copy-btn {
+      background: transparent; border: none; color: var(--subtext0); cursor: pointer;
+      font-family: inherit; font-size: 11px; padding: 2px 6px; border-radius: 4px;
+      line-height: 1.4;
+    }
+    .copy-btn:hover { color: var(--text); background: var(--surface1); }
+    .copy-btn.copied { color: var(--green); }
+    .bubble-copy {
+      position: absolute; top: 4px; right: 4px; opacity: 0;
+      background: var(--surface1); transition: opacity 0.12s ease;
+    }
+    .bubble.assistant:hover .bubble-copy { opacity: 1; }
+    /* Touch devices have no hover — keep the button faintly visible. */
+    @media (hover: none) { .bubble-copy { opacity: 0.55; } }
     .tool-call {
       background: var(--crust); border-radius: 6px; align-self: flex-start;
       max-width: 90%; font-size: 12px; border: 1px solid var(--surface0);
@@ -93,28 +172,50 @@ export const STYLES = `    :root {
     .tool-call summary {
       padding: 6px 10px; color: var(--subtext1); cursor: pointer;
       user-select: none; list-style: none;
-      overflow-wrap: anywhere; word-break: break-word;
+      display: flex; align-items: center; gap: 8px;
     }
     .tool-call summary::-webkit-details-marker { display: none; }
-    .tool-call summary::before { content: "▶  "; }
-    .tool-call[open] > summary::before { content: "▼  "; }
+    .tool-call summary::before { content: "▶"; flex-shrink: 0; font-size: 9px; color: var(--subtext0); }
+    .tool-call[open] > summary::before { content: "▼"; }
     .tool-call.error > summary { color: var(--red); }
+    /* The summary is a single line: the label ellipsizes (full text in the title
+       tooltip / on expand), badges and timing stay pinned to the right. */
+    .tool-label {
+      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+      font-family: ui-monospace, monospace;
+    }
+    .tool-badge { flex-shrink: 0; color: var(--subtext0); font-size: 11px; }
+    .tool-elapsed { flex-shrink: 0; color: var(--subtext0); font-size: 11px; }
     .tool-call pre {
       padding: 8px 12px; overflow-y: auto;
       color: var(--subtext1); font-size: 11px; max-height: 280px;
       border-top: 1px solid var(--surface0);
       white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
     }
-    .tool-spin { color: var(--mauve); margin-left: 6px; font-family: ui-monospace, monospace; font-size: 13px; }
+    .tool-spin { color: var(--mauve); flex-shrink: 0; font-family: ui-monospace, monospace; font-size: 13px; }
+    /* Line diff for edit/write tools (tints derived from --green/--red). */
+    .tool-diff { border-top: 1px solid var(--surface0); overflow-x: auto; }
+    .diff { font-family: ui-monospace, monospace; font-size: 11px; padding: 4px 0; }
+    .diff-line { white-space: pre; padding: 0 10px; }
+    .diff-sign { display: inline-block; width: 1ch; margin-right: 8px; color: var(--subtext0); }
+    .diff-add { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
+    .diff-del { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
+    .diff-ctx { color: var(--subtext1); }
     .code-block {
       background: var(--crust); border: 1px solid var(--surface0);
       border-radius: 6px; overflow: hidden; margin: 4px 0;
       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). */
+    .code-head {
+      display: flex; align-items: center; justify-content: space-between;
+      background: var(--surface0);
+    }
     .code-lang {
-      background: var(--surface0); color: var(--subtext0);
-      font-size: 10px; padding: 3px 10px; letter-spacing: 0.05em;
+      color: var(--subtext0); font-size: 10px; padding: 3px 10px; letter-spacing: 0.05em;
     }
+    .code-head .copy-btn { padding: 3px 10px; }
     .code-block code {
       display: block; padding: 10px 12px; overflow-x: auto;
       color: var(--text); white-space: pre; line-height: 1.55;
@@ -124,6 +225,35 @@ export const STYLES = `    :root {
     .hl-cmt { color: var(--subtext0); font-style: italic; }
     .hl-num { color: var(--blue); }
     .hl-fn  { color: var(--yellow); }
+    /* Hand-rolled markdown, applied only to assistant bubbles + the recommendation
+       panel (both get the .md class from setContent). Block elements lay themselves
+       out, so switch off the container's pre-wrap for these. */
+    .md { white-space: normal; }
+    .md > :first-child { margin-top: 0; }
+    .md > :last-child { margin-bottom: 0; }
+    .md .md-h { color: var(--mauve); font-weight: 700; line-height: 1.3; margin: 10px 0 4px; }
+    .md .md-h1 { font-size: 1.35em; }
+    .md .md-h2 { font-size: 1.2em; }
+    .md .md-h3 { font-size: 1.08em; }
+    .md .md-h4, .md .md-h5, .md .md-h6 { font-size: 1em; }
+    .md .md-p { margin: 6px 0; }
+    .md .md-list { margin: 6px 0; padding-left: 22px; }
+    .md .md-list li { margin: 2px 0; }
+    .md .md-task { list-style: none; margin-left: -22px; }
+    .md .md-check { color: var(--green); }
+    .md .md-quote { border-left: 3px solid var(--surface2); margin: 6px 0; padding: 2px 0 2px 10px; color: var(--subtext1); }
+    .md .md-hr { border: none; border-top: 1px solid var(--surface1); margin: 10px 0; }
+    .md a { color: var(--blue); text-decoration: underline; }
+    .md strong { color: var(--text); font-weight: 700; }
+    .md em { font-style: italic; }
+    .md del { color: var(--subtext0); }
+    .md .md-code {
+      background: var(--crust); border: 1px solid var(--surface0);
+      border-radius: 4px; padding: 1px 4px; font-size: 0.92em;
+    }
+    .md .md-table { border-collapse: collapse; margin: 8px 0; font-size: 0.95em; display: block; overflow-x: auto; }
+    .md .md-table th, .md .md-table td { border: 1px solid var(--surface1); padding: 4px 8px; text-align: left; }
+    .md .md-table th { background: var(--surface0); color: var(--subtext1); }
     #input-bar {
       background: var(--mantle); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
       display: flex; gap: 8px; flex-shrink: 0;
@@ -160,6 +290,13 @@ export const STYLES = `    :root {
       white-space: nowrap; align-self: flex-end;
     }
     #send:disabled, #input:disabled { opacity: 0.45; cursor: not-allowed; }
+    /* While the agent runs, Send becomes a red Stop; the armed (tap-to-confirm)
+       state brightens it and adds a halo, mirroring the prompt card's cancel. */
+    #send.stop { background: var(--red); color: var(--crust); }
+    #send.stop.armed {
+      filter: brightness(1.12);
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 45%, transparent);
+    }
     #reconnect-overlay {
       display: none; position: fixed; inset: 0;
       background: rgba(30,30,46,0.88); color: var(--subtext1);
@@ -175,6 +312,27 @@ export const STYLES = `    :root {
     }
     #status-panel { padding: 6px 12px; border-bottom: 1px solid var(--surface1);
       color: var(--subtext1); white-space: pre-wrap; font-size: 13px; display: none; }
+    /* 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; }
+    .widget-top { display: flex; align-items: center; gap: 8px; }
+    .widget-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
+      white-space: nowrap; color: var(--text); font-size: 13px; }
+    .widget-phase { flex-shrink: 0; background: var(--surface0); color: var(--mauve);
+      border-radius: 4px; padding: 1px 7px; font-size: 10px; letter-spacing: 0.03em;
+      text-transform: uppercase; }
+    .widget-elapsed { flex-shrink: 0; color: var(--subtext0); font-size: 11px;
+      font-variant-numeric: tabular-nums; }
+    .widget-bar { height: 4px; background: var(--surface0); border-radius: 2px;
+      overflow: hidden; margin-top: 6px; }
+    .widget-bar-fill { height: 100%; background: var(--mauve); border-radius: 2px;
+      transition: width 0.3s ease; }
+    /* Dim per-turn timestamp shown under a committed turn's bubble. */
+    .turn-time { font-size: 10px; color: var(--subtext0); opacity: 0.55; padding: 0 4px;
+      margin-top: -2px; }
+    .turn-time.user { align-self: flex-end; }
+    .turn-time.assistant, .turn-time.system { align-self: flex-start; }
+    .turn-time.system { align-self: center; }
     #prompt-card { position: fixed; left: 0; right: 0; bottom: 0; background: var(--mantle);
       border-top: 2px solid var(--mauve); padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
       display: none; z-index: 50; max-height: 80dvh; overflow-y: auto; }
@@ -217,4 +375,13 @@ export const STYLES = `    :root {
     #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); }`;
+    #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. */
+    @media (min-width: 960px) {
+      #chat-log { padding-left: calc((100% - 920px) / 2); padding-right: calc((100% - 920px) / 2); }
+      #status-panel { padding-left: calc((100% - 920px) / 2 + 12px); padding-right: calc((100% - 920px) / 2 + 12px); }
+      #input-bar { padding-left: calc((100% - 920px) / 2); padding-right: calc((100% - 920px) / 2); }
+      #cmd-suggestions { left: calc((100% - 920px) / 2 + 16px); right: calc((100% - 920px) / 2 + 16px); }
+    }`;

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

@@ -0,0 +1,2 @@
+/** Emitted client JS (top-level function declarations). */
+export declare function toolsModule(): string;

package/dist/remote/ui-tools.js

@@ -0,0 +1,113 @@
+// 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".
+//
+// Depends on escHtml (ui-render.ts) — both land in the same <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.
+    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).
+    function toolSummary(toolName, args) {
+      var name = (toolName || '').toLowerCase();
+      var a = toolArgs(args);
+      function s(v) { return v == null ? '' : String(v); }
+      if (a) {
+        var path = a.path != null ? a.path : a.file_path;
+        if (name.indexOf('bash') >= 0 && a.command != null) return '$ ' + s(a.command);
+        if (name === 'read' && path != null) return 'read ' + s(path);
+        if ((name === 'edit' || name === 'multiedit' || name === 'write' || name === 'str_replace') && path != null) return s(path);
+        if (name === 'grep' || name === 'find' || name === 'glob' || name === 'search') {
+          var pat = a.pattern != null ? a.pattern : (a.query != null ? a.query : a.glob);
+          var loc = a.path != null ? a.path : a.glob;
+          return name + ' ' + s(pat) + (loc && loc !== pat ? '  ' + s(loc) : '');
+        }
+      }
+      var argStr = typeof args === 'string' ? args : (args === undefined ? '' : JSON.stringify(args));
+      return toolName + (argStr ? ': ' + argStr : '');
+    }
+
+    // Line diff via LCS. Bounded: a huge pair falls back to "all removed / all added"
+    // rather than allocating an O(m*n) table that could hang the tab.
+    function lcsDiff(oldText, newText) {
+      // Treat '' / null as ZERO lines (not one empty line) so a new-file write shows
+      // as all-added with no phantom "removed blank line".
+      var a = (oldText == null || oldText === '') ? [] : String(oldText).split('\\n');
+      var b = (newText == null || newText === '') ? [] : String(newText).split('\\n');
+      var m = a.length, n = b.length;
+      var rows = [];
+      if (m * n > 250000) {
+        for (var x = 0; x < m; x++) rows.push({t: '-', s: a[x]});
+        for (var y = 0; y < n; y++) rows.push({t: '+', s: b[y]});
+        return rows;
+      }
+      var dp = [];
+      for (var i = 0; i <= m; i++) dp.push(new Array(n + 1).fill(0));
+      for (var i2 = m - 1; i2 >= 0; i2--)
+        for (var j2 = n - 1; j2 >= 0; j2--)
+          dp[i2][j2] = a[i2] === b[j2] ? dp[i2 + 1][j2 + 1] + 1 : Math.max(dp[i2 + 1][j2], dp[i2][j2 + 1]);
+      var i = 0, j = 0;
+      while (i < m && j < n) {
+        if (a[i] === b[j]) { rows.push({t: ' ', s: a[i]}); i++; j++; }
+        else if (dp[i + 1][j] >= dp[i][j + 1]) { rows.push({t: '-', s: a[i]}); i++; }
+        else { rows.push({t: '+', s: b[j]}); j++; }
+      }
+      while (i < m) { rows.push({t: '-', s: a[i++]}); }
+      while (j < n) { rows.push({t: '+', s: b[j++]}); }
+      return rows;
+    }
+
+    function diffStats(oldText, newText) {
+      var rows = lcsDiff(oldText, newText), add = 0, rem = 0;
+      for (var k = 0; k < rows.length; k++) { if (rows[k].t === '+') add++; else if (rows[k].t === '-') rem++; }
+      return {added: add, removed: rem};
+    }
+
+    function renderDiff(oldText, newText) {
+      var rows = lcsDiff(oldText, newText);
+      var html = '<div class="diff">';
+      for (var k = 0; k < rows.length; k++) {
+        var r = rows[k];
+        var cls = r.t === '+' ? 'diff-add' : (r.t === '-' ? 'diff-del' : 'diff-ctx');
+        html += '<div class="diff-line ' + cls + '"><span class="diff-sign">' + (r.t === ' ' ? ' ' : r.t) + '</span>' + escHtml(r.s) + '</div>';
+      }
+      return html + '</div>';
+    }
+
+    // The old/new text for an edit/write tool's diff, or null if not a diffable tool.
+    function toolDiffPair(toolName, args) {
+      var name = (toolName || '').toLowerCase();
+      var a = toolArgs(args);
+      if (!a) return null;
+      if (name === 'edit' || name === 'multiedit' || name === 'str_replace') {
+        if (a.old_string != null || a.new_string != null) return {old: a.old_string, neu: a.new_string};
+      }
+      if (name === 'write' && a.content != null) return {old: '', neu: a.content};
+      return null;
+    }
+
+    function toolBadge(toolName, args) {
+      var pair = toolDiffPair(toolName, args);
+      return pair ? diffStats(pair.old, pair.neu) : null;
+    }
+
+    function toolDiffHtml(toolName, args) {
+      var pair = toolDiffPair(toolName, args);
+      return pair ? renderDiff(pair.old, pair.neu) : null;
+    }
+
+    function fmtElapsed(ms) {
+      if (ms == null || isNaN(ms)) return '';
+      if (ms < 1000) return Math.round(ms) + 'ms';
+      var sec = ms / 1000;
+      return (sec < 10 ? sec.toFixed(1) : Math.round(sec)) + 's';
+    }
+`;
+}

package/dist/remote/ui.js

@@ -1,5 +1,8 @@
 import { STYLES } from './ui-styles.js';
 import { clientScript } from './ui-script.js';
+import { renderModule } from './ui-render.js';
+import { highlightModule } from './ui-highlight.js';
+import { toolsModule } from './ui-tools.js';
 export function html(wsUrl) {
     const iconSvg = encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">`
         + `<rect width="180" height="180" rx="38" fill="#1e1e2e"/>`
@@ -35,9 +38,21 @@ ${STYLES}
   <div id="header">
     <span class="title">pi-task remote</span>
     <div class="hgroup">
-      <button id="bell" aria-label="Toggle notifications" title="Notifications">&#x25EF;</button>
+      <span id="status-chip" title="Connection · model · context">
+        <span id="status-dot" class="disconnected"></span>
+        <span id="status-model"></span>
+        <span id="status-ctx"></span>
+      </span>
+      <button id="bell" aria-label="Notifications" title="Notifications">&#x25EF;</button>
     </div>
   </div>
+  <div id="notif-panel" aria-hidden="true">
+    <div id="notif-toggle-row">
+      <span id="notif-title">Notifications</span>
+      <button id="notif-toggle" type="button"></button>
+    </div>
+    <div id="notif-list"></div>
+  </div>
   <div id="chat-wrap">
     <div id="chat-log"></div>
     <button id="scroll-bottom" aria-label="Scroll to latest" title="Scroll to latest">&#x2193;</button>
@@ -61,6 +76,9 @@ ${STYLES}
   </div>
   <div id="viewer"><span class="close" id="viewer-close">&#x2715;</span><div id="viewer-body"></div></div>
   <script>
+${renderModule()}
+${highlightModule()}
+${toolsModule()}
 ${clientScript(wsUrl)}
   </script>
 </body>

package/dist/task/impl-widget.js

@@ -20,7 +20,7 @@
  * Only one task runs at a time (single active task), so a single module-level slot
  * is sufficient.
  */
-import { WIDGET_KEY, WIDGET_REFRESH_MS, buildImplLines } from './widget.js';
+import { WIDGET_KEY, WIDGET_REFRESH_MS, buildImplLines, buildImplData } from './widget.js';
 import { setTaskWidget } from '../remote/session-state.js';
 let armed = null;
 let lastLine;
@@ -52,7 +52,7 @@ function render() {
     catch {
         /* stale ctx */
     }
-    setTaskWidget(buildImplLines(state, undefined)); // un-themed for the wire
+    setTaskWidget(buildImplLines(state, undefined), buildImplData(state)); // un-themed for the wire
 }
 function startTimer() {
     if (timer)

package/dist/task/widget.d.ts

@@ -6,6 +6,7 @@
  */
 import type { ExtensionCommandContext } from '@earendil-works/pi-coding-agent';
 import { type PhaseName, type TaskState } from './task-types.js';
+import type { WidgetData } from '../remote/protocol.js';
 export interface WidgetState {
     taskId: string;
     title: string;
@@ -40,6 +41,8 @@ export declare function contextThresholdColor(theme: WidgetTheme, percent: numbe
 /** Render the `tokens/window [bar]` context suffix, or null when there's nothing to show. */
 export declare function formatContextDetail(usage: ContextSnapshot, theme?: WidgetTheme): string | null;
 export declare function buildWidgetLines(s: WidgetState, theme?: WidgetTheme): string[];
+/** Structured mirror of buildWidgetLines for the browser's progress widget. */
+export declare function buildWidgetData(s: WidgetState): WidgetData;
 export declare function startWidget(ctx: ExtensionCommandContext, getState: () => WidgetState | null): () => void;
 export interface AutoLoaderState {
     title: string;
@@ -58,6 +61,9 @@ export interface AutoLoaderState {
     kind?: 'planning' | 'enforce' | 'verify' | 'recommend' | 'lint-fix';
 }
 export declare function buildAutoLoaderLines(s: AutoLoaderState, theme?: WidgetTheme): string[];
+/** Structured mirror of buildAutoLoaderLines. Only the numbered planning stage
+ *  carries done/total; the enforce/verify/recommend/lint-fix passes are unnumbered. */
+export declare function buildAutoLoaderData(s: AutoLoaderState): WidgetData;
 /**
  * Start the planning loader widget (same cadence/look as the phase widget).
  * Returns a disposer that stops the refresh and clears the widget. No-op
@@ -74,4 +80,7 @@ export interface ImplState {
     contextUsage?: ContextSnapshot;
 }
 export declare function buildImplLines(s: ImplState, theme?: WidgetTheme): string[];
+/** Structured mirror of buildImplLines (the host implementation turn — no step
+ *  numbering, so no progress bar; just the phase badge and elapsed clock). */
+export declare function buildImplData(s: ImplState): WidgetData;
 export declare function flashTerminalWidget(ctx: ExtensionCommandContext, state: Exclude<TaskState, 'pending' | 'in_progress' | 'completed'>, taskId: string, reason: string | undefined): void;

package/dist/task/widget.js

@@ -88,6 +88,18 @@ export function buildWidgetLines(s, theme) {
         lines.push(trailer);
     return lines;
 }
+/** Structured mirror of buildWidgetLines for the browser's progress widget. */
+export function buildWidgetData(s) {
+    const idx = PHASE_INDEX[s.phase];
+    const total = PHASE_ORDER.length;
+    return {
+        title: `${s.taskId} · ${titleForDisplay(s)}`,
+        phase: s.phase,
+        done: Math.min(idx + 1, total),
+        total,
+        elapsed: formatDuration(Date.now() - s.startedAt)
+    };
+}
 // ─── Widget lifecycle ────────────────────────────────────────────────────────
 export function startWidget(ctx, getState) {
     if (!ctx.hasUI)
@@ -102,7 +114,7 @@ export function startWidget(ctx, getState) {
         catch {
             /* stale ctx */
         }
-        setTaskWidget(plain);
+        setTaskWidget(plain, s ? buildWidgetData(s) : null);
     };
     render();
     const timer = setInterval(render, WIDGET_REFRESH_MS);
@@ -137,6 +149,25 @@ export function buildAutoLoaderLines(s, theme) {
         lines.push(trailer);
     return lines;
 }
+/** Structured mirror of buildAutoLoaderLines. Only the numbered planning stage
+ *  carries done/total; the enforce/verify/recommend/lint-fix passes are unnumbered. */
+export function buildAutoLoaderData(s) {
+    const phase = s.kind === 'enforce' ? 'enforcing guidelines'
+        : s.kind === 'verify' ? 'verifying work'
+            : s.kind === 'recommend' ? 'assessing the failure'
+                : s.kind === 'lint-fix' ? 'fixing static findings'
+                    : s.step;
+    const d = {
+        title: `/task-auto · ${s.title}`,
+        phase,
+        elapsed: formatDuration(Date.now() - s.startedAt)
+    };
+    if (!s.kind || s.kind === 'planning') {
+        d.done = s.stepNum;
+        d.total = s.stepTotal;
+    }
+    return d;
+}
 /**
  * Start the planning loader widget (same cadence/look as the phase widget).
  * Returns a disposer that stops the refresh and clears the widget. No-op
@@ -155,7 +186,7 @@ export function startAutoLoader(ctx, getState) {
         catch {
             /* stale ctx */
         }
-        setTaskWidget(plain);
+        setTaskWidget(plain, s ? buildAutoLoaderData(s) : null);
     };
     render();
     const timer = setInterval(render, WIDGET_REFRESH_MS);
@@ -186,6 +217,15 @@ export function buildImplLines(s, theme) {
         lines.push(trailer);
     return lines;
 }
+/** Structured mirror of buildImplLines (the host implementation turn — no step
+ *  numbering, so no progress bar; just the phase badge and elapsed clock). */
+export function buildImplData(s) {
+    return {
+        title: `${s.taskId} · ${titleForDisplay(s)}`,
+        phase: 'implementing',
+        elapsed: formatDuration(Date.now() - s.startedAt)
+    };
+}
 export function flashTerminalWidget(ctx, state, taskId, reason) {
     if (!ctx.hasUI)
         return;

package/package.json

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