@mjasnikovs/pi-task 0.5.0 → 0.6.0

package/dist/remote/bridge.d.ts

@@ -1,5 +1,5 @@
 import type { ExtensionAPI, ExtensionCommandContext, ExtensionContext } from '@earendil-works/pi-coding-agent';
-import type { PromptMessage, ServerMessage } from './protocol.js';
+import type { ContextUsage, PromptMessage, ServerMessage } from './protocol.js';
 export interface BridgeState {
     /** promptId → resolver that settles the remote side of an ask() race. */
     pending: Map<string, (value: string | undefined) => void>;
@@ -7,6 +7,8 @@ export interface BridgeState {
     activePrompt: PromptMessage | null;
     /** Last lines pushed per widget key (replayed to late joiners). */
     activeWidgets: Map<string, string[]>;
+    /** Most recent context-window usage (replayed to seed late joiners' bar), or null. */
+    lastContextUsage: ContextUsage | null;
     nextId: number;
     /** Command name → handler, populated as pi-task registers its commands. */
     commands: Map<string, (args: string, ctx: ExtensionCommandContext) => unknown>;

package/dist/remote/bridge.js

@@ -6,6 +6,7 @@ export function getBridge() {
             pending: new Map(),
             activePrompt: null,
             activeWidgets: new Map(),
+            lastContextUsage: null,
             nextId: 0,
             commands: new Map(),
             currentCtx: null,

package/dist/remote/events.js

@@ -1,4 +1,5 @@
 import { setAgentIdle } from './state.js';
+import { getBridge } from './bridge.js';
 export function setupEvents(pi, history, broadcastFn) {
     let currentText = '';
     const currentTools = [];
@@ -67,6 +68,8 @@ export function setupEvents(pi, history, broadcastFn) {
     pi.on('agent_end', (_event, ctx) => {
         const contextUsage = ctx.getContextUsage();
         setAgentIdle(true);
+        // Remember it so a browser that connects mid-session gets its bar seeded.
+        getBridge().lastContextUsage = contextUsage;
         history.addAssistantTurn(currentText, [...currentTools]);
         broadcastFn({ type: 'agent_end', contextUsage });
         currentText = '';

package/dist/remote/protocol.d.ts

@@ -24,10 +24,21 @@ export interface ViewerMessage {
     title: string;
     text: string;
 }
+export interface ContextUsage {
+    tokens?: number;
+    contextWindow?: number;
+    percent?: number;
+}
+/** Seeds the context-usage bar for a freshly-connected client (the live value is
+ *  otherwise only carried on agent_end). */
+export interface ContextMessage {
+    type: 'context';
+    contextUsage: ContextUsage;
+}
 /** Server → browser messages added by the integration. The existing
  *  history / text_delta / tool_* / agent_* / client_count / user_message messages are
  *  emitted ad hoc by events.ts / server.ts and are not enumerated here. */
-export type ServerMessage = PromptMessage | PromptResolvedMessage | WidgetMessage | NotifyMessage | ViewerMessage;
+export type ServerMessage = PromptMessage | PromptResolvedMessage | WidgetMessage | NotifyMessage | ViewerMessage | ContextMessage;
 /** Browser → server messages. */
 export interface ClientChatMessage {
     type: 'message';

package/dist/remote/register.js

@@ -5,10 +5,11 @@ import { HistoryBuffer } from './history.js';
 import { html } from './ui.js';
 import { qrLines } from './qr.js';
 import { startServer, formatAddresses } from './server.js';
+import { ensureTailscaleServe, teardownTailscaleServe, planRemoteUrls } from './tailscale.js';
 import { isAgentIdle } from './state.js';
 const _g = globalThis;
 if (!_g.__piRemote)
-    _g.__piRemote = { server: null, send: null };
+    _g.__piRemote = { server: null, send: null, serveResult: null };
 const S = _g.__piRemote;
 export function registerRemote(pi) {
     const history = new HistoryBuffer(20);
@@ -38,6 +39,9 @@ export function registerRemote(pi) {
                 }
             });
         }, wsUrl => html(wsUrl), () => history.getEntries());
+        // Hands-off HTTPS: point Tailscale serve at our port so phones get a
+        // secure context. Best-effort — any failure degrades to the http URL.
+        S.serveResult = await ensureTailscaleServe(S.server.port).catch(() => ({ state: 'unavailable' }));
         return S.server;
     }
     pi.on('session_start', (_event, ctx) => {
@@ -50,7 +54,8 @@ export function registerRemote(pi) {
         // session_start (it's updated via withSession or registerBridgeCommand,
         // not replaced here).
         const b = getBridge();
-        if (!b.currentCtx || b.currentCtx['__piRemoteShimmed'] === true) {
+        if (!b.currentCtx
+            || b.currentCtx['__piRemoteShimmed'] === true) {
             b.currentCtx = makeShimmedCtx(ctx);
         }
         void ensureServer().catch(err => ctx.ui.notify(`Failed to start remote: ${err.message}`, 'error'));
@@ -58,8 +63,11 @@ export function registerRemote(pi) {
     pi.on('session_shutdown', (event, _ctx) => {
         if (event.reason === 'quit') {
             if (S.server) {
+                const port = S.server.port;
                 S.server.stop();
                 S.server = null;
+                S.serveResult = null;
+                void teardownTailscaleServe(port).catch(() => { });
             }
             S.send = null;
         }
@@ -69,8 +77,11 @@ export function registerRemote(pi) {
         handler: async (args, ctx) => {
             if (args.trim() === 'stop') {
                 if (S.server) {
+                    const port = S.server.port;
                     S.server.stop();
                     S.server = null;
+                    S.serveResult = null;
+                    void teardownTailscaleServe(port).catch(() => { });
                     ctx.ui.notify('Remote server stopped', 'info');
                 }
                 else {
@@ -82,11 +93,17 @@ export function registerRemote(pi) {
             getBridge().currentCtx = ctx;
             try {
                 const server = await ensureServer();
-                const primaryUrl = `http://${server.ip}:${server.port}`;
+                const httpPrimary = `http://${server.ip}:${server.port}`;
+                const result = S.serveResult ?? { state: 'unavailable' };
+                const plan = planRemoteUrls(httpPrimary, result);
+                const primaryUrl = plan.primaryUrl;
                 const qr = await qrLines(primaryUrl);
-                const addrs = formatAddresses(server.ips, server.port);
+                const addrs = [...plan.urlLines, ...formatAddresses(server.ips, server.port)];
                 const labelW = addrs.reduce((m, a) => Math.max(m, a.label.length), 0);
-                const addrLines = addrs.map(a => a.label ? `${a.label.padEnd(labelW)}  ${a.url}` : a.url);
+                const addrLines = [
+                    ...addrs.map(a => (a.label ? `${a.label.padEnd(labelW)}  ${a.url}` : a.url)),
+                    ...plan.hintLines
+                ];
                 const addrWidth = addrLines.reduce((m, l) => Math.max(m, l.length), 0);
                 if (ctx.mode === 'tui') {
                     // eslint-disable-next-line no-control-regex -- strip ANSI SGR escapes to measure visible width

package/dist/remote/server.js

@@ -95,6 +95,9 @@ export async function startServer(onMessage, getHtml, getHistory) {
         }
         if (bridge.activePrompt)
             sendTo(ws, bridge.activePrompt);
+        if (bridge.lastContextUsage) {
+            sendTo(ws, { type: 'context', contextUsage: bridge.lastContextUsage });
+        }
         broadcast({ type: 'client_count', count: clientCount() });
         ws.on('message', data => {
             let msg;

package/dist/remote/tailscale.d.ts

@@ -0,0 +1,45 @@
+/** Injectable command runner so serve orchestration is unit-testable without a real CLI. */
+export interface Run {
+    (cmd: string, args: string[]): Promise<{
+        stdout: string;
+        stderr: string;
+        exitCode: number;
+    }>;
+}
+export type ServeResult = {
+    state: 'served';
+    url: string;
+} | {
+    state: 'foreign-conflict';
+    host: string;
+} | {
+    state: 'certs-disabled';
+    host: string;
+} | {
+    state: 'unavailable';
+};
+export interface RemoteUrlPlan {
+    /** URL to encode in the QR and announce; the https one when serve is live. */
+    primaryUrl: string;
+    /** Labeled URL lines to add to the address list (e.g. the HTTPS URL when served). */
+    urlLines: {
+        label: string;
+        url: string;
+    }[];
+    /** Extra lines to print under the URLs (empty when nothing to suggest). */
+    hintLines: string[];
+}
+/** The "/" proxy target of the first :443 Web handler in `tailscale serve status --json`,
+ *  or undefined when there is no such handler / the output isn't valid serve JSON
+ *  (e.g. the literal "No serve config"). */
+export declare function serve443Target(json: string): string | undefined;
+/** Ensure Tailscale serves https://<host> → http://127.0.0.1:<port>. Mutates only
+ *  when needed and never touches a serve config we didn't create. Best-effort:
+ *  returns a non-served state rather than throwing. */
+export declare function ensureTailscaleServe(port: number, run?: Run): Promise<ServeResult>;
+/** Tear down the :443 serve handler ONLY if it currently points at our port.
+ *  Best-effort; callers should additionally `.catch()` since it may run during
+ *  shutdown. */
+export declare function teardownTailscaleServe(port: number, run?: Run): Promise<void>;
+/** Pure: pick the primary URL and any hint lines from a serve result. */
+export declare function planRemoteUrls(httpPrimary: string, result: ServeResult): RemoteUrlPlan;

package/dist/remote/tailscale.js

@@ -0,0 +1,108 @@
+import { execFile } from 'node:child_process';
+const defaultRun = (cmd, args) => new Promise(resolve => {
+    execFile(cmd, args, { timeout: 5000 }, (err, stdout, stderr) => {
+        const exitCode = err && typeof err.code === 'number' ?
+            err.code
+            : err ? 1
+                : 0;
+        resolve({ stdout: stdout ?? '', stderr: stderr ?? '', exitCode });
+    });
+});
+/** The "/" proxy target of the first :443 Web handler in `tailscale serve status --json`,
+ *  or undefined when there is no such handler / the output isn't valid serve JSON
+ *  (e.g. the literal "No serve config"). */
+export function serve443Target(json) {
+    let parsed;
+    try {
+        parsed = JSON.parse(json);
+    }
+    catch {
+        return undefined;
+    }
+    const web = parsed
+        .Web;
+    if (!web)
+        return undefined;
+    for (const key of Object.keys(web)) {
+        if (key.endsWith(':443'))
+            return web[key]?.Handlers?.['/']?.Proxy;
+    }
+    return undefined;
+}
+/** Tailscale MagicDNS name (trailing dot stripped), or undefined if the daemon
+ *  isn't reachable / has no name. */
+async function tailscaleHost(run) {
+    const status = await run('tailscale', ['status', '--json']);
+    if (status.exitCode !== 0)
+        return undefined;
+    try {
+        const parsed = JSON.parse(status.stdout);
+        return (parsed.Self?.DNSName ?? '').replace(/\.$/, '') || undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+/** Ensure Tailscale serves https://<host> → http://127.0.0.1:<port>. Mutates only
+ *  when needed and never touches a serve config we didn't create. Best-effort:
+ *  returns a non-served state rather than throwing. */
+export async function ensureTailscaleServe(port, run = defaultRun) {
+    const host = await tailscaleHost(run);
+    if (!host)
+        return { state: 'unavailable' };
+    const ours = `http://127.0.0.1:${port}`;
+    const serve = await run('tailscale', ['serve', 'status', '--json']);
+    const target = serve443Target(serve.stdout);
+    if (target === ours)
+        return { state: 'served', url: `https://${host}` };
+    if (target !== undefined)
+        return { state: 'foreign-conflict', host };
+    // No :443 handler yet — check cert capability before trying to create one.
+    const cert = await run('tailscale', ['cert']);
+    if (/HTTPS cert support is not enabled/i.test(cert.stdout + cert.stderr)) {
+        return { state: 'certs-disabled', host };
+    }
+    const set = await run('tailscale', ['serve', '--bg', '--https=443', ours]);
+    if (set.exitCode === 0)
+        return { state: 'served', url: `https://${host}` };
+    return { state: 'certs-disabled', host };
+}
+/** Tear down the :443 serve handler ONLY if it currently points at our port.
+ *  Best-effort; callers should additionally `.catch()` since it may run during
+ *  shutdown. */
+export async function teardownTailscaleServe(port, run = defaultRun) {
+    const serve = await run('tailscale', ['serve', 'status', '--json']);
+    if (serve443Target(serve.stdout) === `http://127.0.0.1:${port}`) {
+        await run('tailscale', ['serve', '--https=443', 'off']);
+    }
+}
+/** Pure: pick the primary URL and any hint lines from a serve result. */
+export function planRemoteUrls(httpPrimary, result) {
+    switch (result.state) {
+        case 'served':
+            return {
+                primaryUrl: result.url,
+                urlLines: [{ label: 'HTTPS', url: result.url }],
+                hintLines: []
+            };
+        case 'foreign-conflict':
+            return {
+                primaryUrl: httpPrimary,
+                urlLines: [],
+                hintLines: [
+                    'HTTPS: port 443 is already used by another tailscale serve config; not touching it.',
+                    '  Free it (tailscale serve --https=443 off) to enable phone notifications.'
+                ]
+            };
+        case 'certs-disabled':
+            return {
+                primaryUrl: httpPrimary,
+                urlLines: [],
+                hintLines: [
+                    'HTTPS (for phone notifications): enable HTTPS in the Tailscale admin console, then restart the remote.'
+                ]
+            };
+        case 'unavailable':
+            return { primaryUrl: httpPrimary, urlLines: [], hintLines: [] };
+    }
+}

package/dist/remote/ui.js

@@ -38,7 +38,7 @@ export function html(wsUrl) {
       font-family: ui-monospace, monospace; height: 100dvh;
       display: flex; flex-direction: column; overflow: hidden;
       padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
-               env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
+               0px env(safe-area-inset-left, 0px);
     }
     #context-bar { height: 4px; background: var(--surface0); flex-shrink: 0; }
     #context-bar-fill { height: 100%; background: var(--mauve); width: 0%; transition: width 0.4s ease; }
@@ -47,8 +47,27 @@ export function html(wsUrl) {
       display: flex; justify-content: space-between; align-items: center;
       font-size: 13px; flex-shrink: 0; border-bottom: 1px solid var(--surface0);
     }
-    #header .title { font-weight: bold; color: var(--mauve); letter-spacing: 0.05em; }
-    #header .status { color: var(--subtext0); font-size: 11px; }
+    #header .title { font-weight: bold; color: var(--mauve); letter-spacing: 0.05em;
+      position: relative; animation: glitch 5s steps(1) infinite; }
+    @keyframes glitch {
+      0%, 88%, 100% { text-shadow: none; transform: translate(0, 0); }
+      90% { text-shadow: -1px 0 var(--red), 1px 0 var(--teal); transform: translate(1px, -1px); }
+      92% { text-shadow: 1px 0 var(--red), -1px 0 var(--blue); transform: translate(-1px, 1px); }
+      94% { text-shadow: -1px 0 var(--blue), 1px 0 var(--red); transform: translate(1px, 0); }
+      96% { text-shadow: 1px 0 var(--teal), -1px 0 var(--red); transform: translate(-1px, 0); }
+    }
+    @media (prefers-reduced-motion: reduce) { #header .title { animation: none; } }
+    #header .status { color: var(--subtext0); font-size: 11px; display: inline-flex; align-items: center; gap: 5px; }
+    #header .cdot { color: var(--yellow); }
+    #header .cdot.up { color: var(--green); }
+    #header .cdot.down { color: var(--red); }
+    #header .hgroup { display: flex; align-items: center; gap: 10px; }
+    #bell {
+      background: none; border: none; color: var(--subtext1); cursor: pointer;
+      font-size: 15px; line-height: 1; padding: 2px; font-family: inherit;
+    }
+    #bell:hover { color: var(--text); }
+    #bell.on { color: var(--mauve); }
     #chat-log {
       flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 16px;
       display: flex; flex-direction: column; gap: 8px;
@@ -67,17 +86,11 @@ export function html(wsUrl) {
       max-width: 100%; border: 1px solid var(--red); font-size: 12px;
     }
     .bubble.thinking {
-      display: flex; gap: 5px; align-items: center; padding: 12px 14px;
+      display: flex; gap: 5px; align-items: center; padding: 10px 14px;
     }
-    .bubble.thinking .dot {
-      width: 7px; height: 7px; border-radius: 50%; background: var(--subtext0);
-      animation: thinking-bounce 1.2s infinite ease-in-out both;
-    }
-    .bubble.thinking .dot:nth-child(1) { animation-delay: -0.24s; }
-    .bubble.thinking .dot:nth-child(2) { animation-delay: -0.12s; }
-    @keyframes thinking-bounce {
-      0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
-      40% { transform: scale(1); opacity: 1; }
+    .bubble.thinking .spinner {
+      color: var(--mauve); font-size: 15px; line-height: 1;
+      font-family: ui-monospace, monospace;
     }
     .tool-call {
       background: var(--crust); border-radius: 6px; align-self: flex-start;
@@ -86,6 +99,7 @@ export function html(wsUrl) {
     .tool-call summary {
       padding: 6px 10px; color: var(--subtext1); cursor: pointer;
       user-select: none; list-style: none;
+      overflow-wrap: anywhere; word-break: break-word;
     }
     .tool-call summary::-webkit-details-marker { display: none; }
     .tool-call summary::before { content: "▶  "; }
@@ -116,7 +130,7 @@ export function html(wsUrl) {
     .hl-num { color: var(--blue); }
     .hl-fn  { color: var(--yellow); }
     #input-bar {
-      background: var(--mantle); padding: 10px 16px;
+      background: var(--mantle); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
       display: flex; gap: 8px; flex-shrink: 0;
       border-top: 1px solid var(--surface0);
       position: relative;
@@ -194,7 +208,8 @@ export function html(wsUrl) {
       font-size: 12px; font-weight: 500; padding: 8px 10px; }
     #prompt-card button.cancel:hover { color: var(--red); filter: none; }
     #prompt-card button.cancel.armed { background: var(--red); color: var(--crust); font-weight: 700; }
-    .toast { position: fixed; top: 12px; right: 12px; padding: 8px 12px; border-radius: 6px;
+    .toast { position: fixed; top: 12px; right: 12px; max-width: calc(100vw - 24px);
+      padding: 8px 12px; border-radius: 6px; overflow-wrap: anywhere; word-break: break-word;
       background: var(--surface1); color: var(--text); z-index: 60; }
     .toast.warning { background: var(--peach); color: var(--crust); }
     .toast.error { background: var(--red); color: var(--crust); }
@@ -208,7 +223,10 @@ export function html(wsUrl) {
   <div id="context-bar"><div id="context-bar-fill"></div></div>
   <div id="header">
     <span class="title">pi-task remote</span>
-    <span class="status" id="client-status">connecting…</span>
+    <div class="hgroup">
+      <span class="status" id="client-status"><span class="cdot" id="conn-dot">&#x25CB;</span><span id="client-label">connecting&#x2026;</span></span>
+      <button id="bell" aria-label="Toggle notifications" title="Notifications">&#x25EF;</button>
+    </div>
   </div>
   <div id="chat-log"></div>
   <div id="status-panel"></div>
@@ -242,7 +260,17 @@ export function html(wsUrl) {
     const inputEl = document.getElementById('input');
     const sendBtn = document.getElementById('send');
     const contextFill = document.getElementById('context-bar-fill');
-    const clientStatus = document.getElementById('client-status');
+    function setContextBar(usage) {
+      if (usage && usage.percent != null) contextFill.style.width = usage.percent + '%';
+    }
+    const connDot = document.getElementById('conn-dot');
+    const clientLabel = document.getElementById('client-label');
+    // state: 'connecting' (○ yellow) | 'up' (● green) | 'down' (● red)
+    function setConn(state, label) {
+      connDot.textContent = state === 'connecting' ? '\\u25CB' : '\\u25CF';
+      connDot.className = 'cdot' + (state === 'up' ? ' up' : state === 'down' ? ' down' : '');
+      if (label !== undefined) clientLabel.textContent = label;
+    }
     const reconnectOverlay = document.getElementById('reconnect-overlay');
     const reconnectMsg = document.getElementById('reconnect-msg');
     const cmdSuggestions = document.getElementById('cmd-suggestions');
@@ -444,16 +472,28 @@ export function html(wsUrl) {
     }
 
     let thinkingEl = null;
+    let spinTimer = null;
+    let spinIdx = 0;
+    const SPIN = '\\u280B\\u2819\\u2839\\u2838\\u283C\\u2834\\u2826\\u2827\\u2807\\u280F';
     function showThinking() {
       if (!thinkingEl) {
         thinkingEl = document.createElement('div');
         thinkingEl.className = 'bubble assistant thinking';
-        thinkingEl.innerHTML = '<span class="dot"></span><span class="dot"></span><span class="dot"></span>';
+        thinkingEl.innerHTML = '<span class="spinner"></span>';
+      }
+      if (!spinTimer) {
+        var sp = thinkingEl.firstChild;
+        sp.textContent = SPIN[spinIdx % SPIN.length];
+        spinTimer = setInterval(function () {
+          spinIdx = (spinIdx + 1) % SPIN.length;
+          sp.textContent = SPIN[spinIdx];
+        }, 90);
       }
       chatLog.appendChild(thinkingEl); // append (or move) to bottom
       scrollBottom();
     }
     function hideThinking() {
+      if (spinTimer) { clearInterval(spinTimer); spinTimer = null; }
       if (thinkingEl) thinkingEl.remove();
     }
 
@@ -483,6 +523,61 @@ export function html(wsUrl) {
       setTimeout(function () { t.remove(); }, 4000);
     }
 
+    const bell = document.getElementById('bell');
+    const NOTIFY_KEY = 'piRemoteNotify';
+
+    function notifyEnabled() {
+      return localStorage.getItem(NOTIFY_KEY) === '1'
+        && typeof Notification !== 'undefined'
+        && Notification.permission === 'granted';
+    }
+
+    function updateBell() {
+      // ◉ (mauve) when armed, ◯ (dim) when off/unavailable.
+      var on = notifyEnabled();
+      bell.textContent = on ? '\\u25C9' : '\\u25EF';
+      bell.classList.toggle('on', on);
+    }
+
+    // Why notifications can't be enabled here, or null if they can.
+    function notifyEnvIssue() {
+      if (typeof Notification === 'undefined') return "This browser doesn't support notifications.";
+      if (!window.isSecureContext) return 'Notifications need HTTPS. Open the Tailscale https:// URL, or open via localhost.';
+      const isIOS = /iP(hone|ad|od)/i.test(navigator.userAgent);
+      const standalone = navigator.standalone === true
+        || (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches);
+      if (isIOS && !standalone) return 'On iOS: Share \\u2192 Add to Home Screen first, then enable notifications.';
+      return null;
+    }
+
+    bell.addEventListener('click', function () {
+      // Turning OFF always works regardless of environment.
+      if (localStorage.getItem(NOTIFY_KEY) === '1') {
+        localStorage.setItem(NOTIFY_KEY, '0'); updateBell(); return;
+      }
+      const issue = notifyEnvIssue();
+      if (issue) { showToast(issue, 'warning'); return; }
+      Notification.requestPermission().then(function (perm) {
+        if (perm === 'granted') { localStorage.setItem(NOTIFY_KEY, '1'); }
+        else { showToast('Notifications blocked in browser settings.', 'warning'); }
+        updateBell();
+      });
+    });
+
+    // Fire a browser notification, but only when armed, in a secure context,
+    // and the tab is backgrounded (foreground already has the in-page UI).
+    function notify(title, body, tag) {
+      if (!notifyEnabled()) return;
+      if (!window.isSecureContext) return;
+      if (!document.hidden) return;
+      try {
+        const n = new Notification(title, { body: body || '', tag: tag });
+        n.onclick = function () { window.focus(); n.close(); };
+      } catch (e) { /* constructor unsupported (e.g. iOS without SW) */ }
+    }
+
+    updateBell();
+
     function answer(value) {
       if (activePromptId === null) return;
       ws.send(JSON.stringify({ type: 'prompt_answer', id: activePromptId, value: value }));
@@ -663,6 +758,7 @@ export function html(wsUrl) {
             streamText = '';
           }
           addBubble('error', msg.message || 'Error');
+          notify('Agent error', msg.message || 'Error', 'pi-error');
           setEnabled(true);
           break;
         case 'agent_end':
@@ -670,15 +766,19 @@ export function html(wsUrl) {
           currentBubble = null;
           streamText = '';
           setEnabled(true);
-          if (msg.contextUsage && msg.contextUsage.percent != null) {
-            contextFill.style.width = msg.contextUsage.percent + '%';
-          }
+          notify('Task finished', '', 'pi-end');
+          setContextBar(msg.contextUsage);
+          break;
+        case 'context':
+          // Seeds the bar for a client that joined mid-session.
+          setContextBar(msg.contextUsage);
           break;
         case 'client_count':
-          clientStatus.textContent = msg.count + ' client' + (msg.count === 1 ? '' : 's') + ' connected';
+          setConn('up', msg.count + ' client' + (msg.count === 1 ? '' : 's') + ' connected');
           break;
         case 'prompt':
           showPrompt(msg);
+          notify('pi needs your input', msg.question, 'pi-prompt');
           break;
         case 'prompt_resolved':
           if (activePromptId === msg.id) closePrompt();
@@ -739,7 +839,7 @@ export function html(wsUrl) {
       ws.addEventListener('open', () => {
         reconnectOverlay.classList.remove('visible');
         reconnectDelay = 1000;
-        clientStatus.textContent = 'connected';
+        setConn('up', 'connected');
         setEnabled(true);
       });
       ws.addEventListener('message', (e) => {
@@ -747,6 +847,7 @@ export function html(wsUrl) {
       });
       ws.addEventListener('close', () => {
         setEnabled(false);
+        setConn('down', 'disconnected');
         reconnectOverlay.classList.add('visible');
         reconnectMsg.textContent = 'reconnecting in ' + (reconnectDelay / 1000) + 's…';
         setTimeout(() => { reconnectDelay = Math.min(reconnectDelay * 2, 30000); connect(); }, reconnectDelay);

package/dist/workers/pi-worker-core.js

@@ -19,7 +19,7 @@ export async function runWorker(input) {
     const result = await runChildDefault(invocation, input.cwd, input.signal, {
         mode: 'json-events',
         onFirstByte: () => (tFirstByte = Date.now()),
-        onToolCall: (call) => loopDetector.record(call)
+        onToolCall: call => loopDetector.record(call)
     }, input.spawn);
     const tEnd = Date.now();
     const waitMs = tFirstByte === null ? tEnd - tStart : tFirstByte - tStart;

package/package.json

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