@mjasnikovs/pi-task 0.13.14 → 0.13.16

package/dist/remote/ui-script.js

@@ -216,12 +216,32 @@ export function clientScript(wsUrl) {
       inputEl.focus();
     }
 
-    chatLog.addEventListener('scroll', () => {
+    const scrollBtn = document.getElementById('scroll-bottom');
+    function atBottom() {
       const { scrollTop, scrollHeight, clientHeight } = chatLog;
-      autoScroll = scrollTop + clientHeight >= scrollHeight - 24;
+      return scrollTop + clientHeight >= scrollHeight - 24;
+    }
+    // Show the jump-to-latest button only when the user has scrolled up away
+    // from the newest text; hide it once they're back at the bottom.
+    function updateScrollBtn() {
+      scrollBtn.classList.toggle('visible', !atBottom());
+    }
+    chatLog.addEventListener('scroll', () => {
+      autoScroll = atBottom();
+      updateScrollBtn();
+    });
+    scrollBtn.addEventListener('click', () => {
+      autoScroll = true;
+      chatLog.scrollTop = chatLog.scrollHeight;
+      updateScrollBtn();
     });
 
-    function scrollBottom() { if (autoScroll) chatLog.scrollTop = chatLog.scrollHeight; }
+    function scrollBottom() {
+      if (autoScroll) chatLog.scrollTop = chatLog.scrollHeight;
+      // New content can push the bottom away while the user is scrolled up;
+      // keep the button's visibility in sync on every append, not just on scroll.
+      updateScrollBtn();
+    }
 
     function addBubble(role, text) {
       const el = document.createElement('div');

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; height: 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-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    #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; height: 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); }";

package/dist/remote/ui-styles.js

@@ -37,10 +37,22 @@ export const STYLES = `    :root {
     }
     #bell:hover { color: var(--text); }
     #bell.on { color: var(--mauve); }
+    #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;
       display: flex; flex-direction: column; gap: 8px;
     }
+    /* Floating jump-to-latest button — only shown when scrolled away from the
+       bottom (toggled via .visible from the scroll handler). */
+    #scroll-bottom {
+      display: none; position: absolute; bottom: 16px; right: 16px; z-index: 40;
+      width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
+      background: var(--surface1); color: var(--text); border: 1px solid var(--surface2);
+      font-family: inherit; font-size: 18px; line-height: 1; padding: 0;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+    }
+    #scroll-bottom:hover { background: var(--surface2); color: var(--mauve); }
+    #scroll-bottom.visible { display: block; }
     #chat-log::-webkit-scrollbar { width: 6px; }
     #chat-log::-webkit-scrollbar-track { background: transparent; }
     #chat-log::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 3px; }

package/dist/remote/ui.js

@@ -38,7 +38,10 @@ ${STYLES}
       <button id="bell" aria-label="Toggle notifications" title="Notifications">&#x25EF;</button>
     </div>
   </div>
-  <div id="chat-log"></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>
+  </div>
   <div id="status-panel"></div>
   <div id="input-bar">
     <div id="cmd-suggestions"></div>

package/dist/task/auto-orchestrator.js

@@ -304,7 +304,11 @@ export async function runAutoLoop(ctx, cwd, id, deps) {
             }
             if (!res.ok) {
                 await updateTaskFrontMatter(cwd, id, { state: 'failed' });
-                announceDone(active, `${id} stopped at "${next.title}" — fix and run /task-auto-resume.`, 'error');
+                // res.reason is set when the implementation turn itself died
+                // (e.g. a context-overflow 400) — surface it so the real cause
+                // isn't lost behind the generic "stopped" message.
+                const why = res.reason ? ` — ${res.reason.slice(0, 160)}` : '';
+                announceDone(active, `${id} stopped at "${next.title}"${why} — fix and run /task-auto-resume.`, 'error');
                 return;
             }
             // res.ok === true means runner.run() completed, so res.taskId is the

package/dist/task/orchestrator.d.ts

@@ -108,6 +108,14 @@ export interface RunSingleTaskResult {
      * uninterrupted.
      */
     interrupted?: boolean;
+    /**
+     * Why the run is not ok, when known. Set when a waitForImplementation turn
+     * ended with stopReason "error" (the model/provider died mid-implementation —
+     * e.g. a context-overflow 400 — after the task file was already marked
+     * `completed` at spec-handoff). The /task-auto loop surfaces this in its
+     * "stopped at …" message so the real cause isn't lost. Undefined otherwise.
+     */
+    reason?: string;
 }
 /**
  * Run one prompt through the full single-task pipeline in a fresh session and

package/dist/task/orchestrator.js

@@ -288,6 +288,29 @@ function wasInterrupted(ctx) {
     }
     return false;
 }
+/**
+ * The error cause when the most recent assistant turn ended with stopReason
+ * "error" — the model/provider failed mid-implementation (context overflow,
+ * disconnect, provider 5xx) after pi exhausted its own retries. Returns the
+ * provider's errorMessage, or undefined if the turn ended cleanly ("stop") or
+ * was user-aborted ("aborted", handled by wasInterrupted).
+ *
+ * The /task-auto loop reads this AFTER the implementation wait: a task's file is
+ * marked `completed` at spec-handoff (before implementation), so without this
+ * check an implementation turn that died — e.g. "400 ... exceeds the available
+ * context size" — would still read as ok and get checked off and committed.
+ */
+function implementationError(ctx) {
+    const entries = ctx.sessionManager.getEntries();
+    for (let i = entries.length - 1; i >= 0; i--) {
+        const e = entries[i];
+        if ('message' in e && 'role' in e.message && e.message.role === 'assistant') {
+            const m = e.message;
+            return m.stopReason === 'error' ? (m.errorMessage ?? 'model error') : undefined;
+        }
+    }
+    return undefined;
+}
 /**
  * After the implementation turn settles, honour a user ESC by letting them steer.
  *
@@ -326,6 +349,11 @@ export async function runSingleTask(ctx, cwd, rawPrompt, opts = {}) {
     // cancellation path (where no replacement occurs).
     let freshCtx = ctx;
     let interrupted = false;
+    // The implementation turn's failure cause, when it ended with stopReason
+    // "error" (only meaningful in the waitForImplementation path). The task file
+    // was already marked `completed` at spec-handoff, so this is the only signal
+    // that the implementation itself died and the task must not be checked off.
+    let implError;
     const result = await ctx.newSession({
         withSession: async (newCtx) => {
             freshCtx = newCtx;
@@ -335,6 +363,10 @@ export async function runSingleTask(ctx, cwd, rawPrompt, opts = {}) {
                 if (opts.waitForImplementation) {
                     await newCtx.waitForIdle();
                     interrupted = await steerUntilDone(newCtx, opts.promptSteer);
+                    // A user-declined steer (interrupted) is its own paused
+                    // path; otherwise inspect how the turn actually ended.
+                    if (!interrupted)
+                        implError = implementationError(newCtx);
                 }
             }, opts.spawnFn, opts.onStart);
             await runner.run();
@@ -360,13 +392,18 @@ export async function runSingleTask(ctx, cwd, rawPrompt, opts = {}) {
             ok = false;
         }
     }
+    // The file reads `completed` from spec-handoff even when the implementation
+    // turn then died. Demote to a failure so /task-auto stops here (leaving the
+    // entry unchecked and resumable) instead of committing and advancing.
+    if (ok && implError)
+        ok = false;
     if (opts.notifyFinish) {
         // One push per top-level /task or /task-resume, on any terminal end. The
         // file state is the source of truth: 'completed' on success, 'failed' /
         // 'cancelled' otherwise; an unreadable/absent file falls back to 'ended'.
         void pushNotify('Task finished', `${taskId || 'Task'} ${state ?? 'ended'}.`, 'pi-end').catch(() => { });
     }
-    return { taskId, ok, sessionCancelled: false, ctx: freshCtx, interrupted };
+    return { taskId, ok, sessionCancelled: false, ctx: freshCtx, interrupted, reason: implError };
 }
 // ─── Command handlers ────────────────────────────────────────────────────────
 async function handleTask(args, ctx) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mjasnikovs/pi-task",
-    "version": "0.13.14",
+    "version": "0.13.16",
     "description": "Deterministic spec-orchestration for local models, with a bundled real-time remote web view and web/docs/fetch/worker subagent tools.",
     "type": "module",
     "main": "./dist/index.js",