@firstpick/pi-package-webui 0.1.6 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firstpick/pi-package-webui",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Pi Web UI companion package with a local browser UI CLI plus /webui-start and /webui-status commands.",
   "license": "MIT",
   "type": "module",

package/public/app.js

@@ -7,6 +7,11 @@ const elements = {
   newTabButton: $("#newTabButton"),
   closeAllTabsButton: $("#closeAllTabsButton"),
   statusBar: $("#statusBar"),
+  serverOfflinePanel: $("#serverOfflinePanel"),
+  serverOfflineCommand: $("#serverOfflineCommand"),
+  serverOfflineSlashCommand: $("#serverOfflineSlashCommand"),
+  copyServerCommandButton: $("#copyServerCommandButton"),
+  retryServerConnectionButton: $("#retryServerConnectionButton"),
   widgetArea: $("#widgetArea"),
   stickyUserPromptButton: $("#stickyUserPromptButton"),
   chat: $("#chat"),
@@ -141,6 +146,8 @@ let pathSuggestAbortController = null;
 let latestStats = null;
 let latestWorkspace = null;
 let latestNetwork = null;
+let backendOffline = false;
+let backendOfflineNoticeShown = false;
 let latestMessages = [];
 let transientMessages = [];
 let actionEntrySeenKeysByTab = new Map();
@@ -193,6 +200,8 @@ const CUSTOM_BACKGROUNDS_STORAGE_KEY = "pi-webui-custom-backgrounds";
 const CUSTOM_BACKGROUND_IDB_NAME = "pi-webui-custom-background";
 const CUSTOM_BACKGROUND_IDB_STORE = "backgrounds";
 const CUSTOM_BACKGROUND_LEGACY_ID = "active";
+const SERVER_START_CWD_STORAGE_KEY = "pi-webui-last-server-cwd";
+const DEFAULT_WEBUI_PORT = "31415";
 const CUSTOM_BACKGROUND_MAX_FILE_BYTES = 24 * 1024 * 1024;
 const OPTIONAL_FEATURES_STORAGE_KEY = "pi-webui-optional-features-disabled";
 const LAST_USER_PROMPT_STORAGE_KEY = "pi-webui-last-user-prompts";
@@ -218,6 +227,7 @@ const ABORT_LONG_PRESS_MS = 700;
 const STREAM_OUTPUT_HIDE_DELAY_MS = 300;
 const STREAM_OUTPUT_TOOLCALL_GUARD_MS = 220;
 const STREAM_OUTPUT_MIN_VISIBLE_MS = 900;
+const TOOL_LIVE_UPDATE_THROTTLE_MS = 80;
 const TODO_PROGRESS_LINE_REGEX = /^\s*(?:(?:[-*]|\d+[.)])\s*)?\[(?: |x|X|-)\]\s+.+$/;
 const TODO_PROGRESS_PARTIAL_LINE_REGEX = /^\s*(?:(?:[-*]|\d+[.)])\s*)?\[(?: |x|X|-)?\]?\s*.*$/;
 const CHAT_SCROLL_KEYS = new Set(["ArrowDown", "ArrowUp", "End", "Home", "PageDown", "PageUp", " "]);
@@ -232,6 +242,8 @@ const statusEntries = new Map();
 const widgets = new Map();
 const liveToolRuns = new Map();
 const liveToolCards = new Map();
+const liveToolRenderQueue = new Map();
+let liveToolRenderTimer = null;
 // Optional feature detection intentionally checks loaded Pi capabilities (RPC-visible
 // commands and live widget events), not npm package folders. This keeps local dev
 // symlinks and independently installed packages working.
@@ -702,6 +714,120 @@ function registerPwaServiceWorker() {
   });
 }
 
+function readStoredServerStartCwd() {
+  try {
+    return localStorage.getItem(SERVER_START_CWD_STORAGE_KEY) || "";
+  } catch {
+    return "";
+  }
+}
+
+function rememberServerStartCwd(cwd) {
+  const value = typeof cwd === "string" ? cwd.trim() : "";
+  if (!value) return;
+  try {
+    localStorage.setItem(SERVER_START_CWD_STORAGE_KEY, value);
+  } catch {
+    // Ignore storage failures; the offline start helper can still show a generic command.
+  }
+  if (backendOffline) renderServerOfflinePanel();
+}
+
+function quoteCommandArg(value) {
+  const text = String(value || ".");
+  if (!/[\s"'`$]/.test(text)) return text;
+  if (!text.includes("'")) return `'${text}'`;
+  return `"${text.replace(/(["`$])/g, "\\$1")}"`;
+}
+
+function currentPortArg() {
+  const port = window.location.port || "";
+  return port && port !== DEFAULT_WEBUI_PORT ? ` --port ${port}` : "";
+}
+
+function serverStartCommandText() {
+  const cwd = readStoredServerStartCwd() || ".";
+  return `pi-webui --cwd ${quoteCommandArg(cwd)}${currentPortArg()}`;
+}
+
+function serverStartSlashCommandText() {
+  return `/webui-start${currentPortArg()}`;
+}
+
+function renderServerOfflinePanel() {
+  if (elements.serverOfflineCommand) elements.serverOfflineCommand.textContent = serverStartCommandText();
+  if (elements.serverOfflineSlashCommand) elements.serverOfflineSlashCommand.textContent = serverStartSlashCommandText();
+}
+
+function setBackendOffline(offline, error) {
+  backendOffline = !!offline;
+  document.body.classList.toggle("server-offline", backendOffline);
+  if (elements.serverOfflinePanel) elements.serverOfflinePanel.hidden = !backendOffline;
+  renderServerOfflinePanel();
+  if (backendOffline) {
+    if (!backendOfflineNoticeShown) {
+      backendOfflineNoticeShown = true;
+      addEvent(`Pi Web UI server is offline${error?.message ? `: ${error.message}` : ""}`, "warn");
+    }
+    return;
+  }
+  if (backendOfflineNoticeShown) addEvent("Pi Web UI server is back online", "info");
+  backendOfflineNoticeShown = false;
+}
+
+async function copyText(text) {
+  if (navigator.clipboard?.writeText && window.isSecureContext) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.append(textarea);
+  textarea.select();
+  const copied = document.execCommand("copy");
+  textarea.remove();
+  if (!copied) throw new Error("Clipboard copy failed");
+}
+
+async function copyServerStartCommand() {
+  const command = serverStartCommandText();
+  try {
+    await copyText(command);
+    addEvent("copied Pi Web UI start command", "info");
+  } catch (error) {
+    addEvent(`copy failed; manually run: ${command}`, "warn");
+  }
+}
+
+async function retryServerConnection() {
+  const button = elements.retryServerConnectionButton;
+  if (button) {
+    button.disabled = true;
+    button.textContent = "Retrying…";
+  }
+  try {
+    await api("/api/health", { scoped: false });
+  } catch (error) {
+    setBackendOffline(true, error);
+    addEvent("Pi Web UI server is still offline", "warn");
+    return;
+  } finally {
+    if (button) {
+      button.disabled = false;
+      button.textContent = "Retry connection";
+    }
+  }
+
+  try {
+    await initializeTabs();
+  } catch (error) {
+    addEvent(error.message || String(error), "error");
+  }
+}
+
 function scopedApiPath(path, tabId = activeTabId) {
   if (!tabId || !path.startsWith("/api/") || path === "/api/tabs" || path.startsWith("/api/tabs?") || path.startsWith("/api/tabs/")) return path;
   const url = new URL(path, window.location.origin);
@@ -710,12 +836,21 @@ function scopedApiPath(path, tabId = activeTabId) {
 }
 
 async function api(path, { method = "GET", body, tabId = activeTabId, scoped = true, signal } = {}) {
-  const response = await fetch(scoped ? scopedApiPath(path, tabId) : path, {
-    method,
-    headers: body === undefined ? undefined : { "content-type": "application/json" },
-    body: body === undefined ? undefined : JSON.stringify(body),
-    signal,
-  });
+  let response;
+  try {
+    response = await fetch(scoped ? scopedApiPath(path, tabId) : path, {
+      method,
+      headers: body === undefined ? undefined : { "content-type": "application/json" },
+      body: body === undefined ? undefined : JSON.stringify(body),
+      signal,
+    });
+  } catch (error) {
+    const offlineError = error instanceof Error ? error : new Error(String(error));
+    offlineError.backendOffline = true;
+    setBackendOffline(true, offlineError);
+    throw offlineError;
+  }
+  setBackendOffline(false);
   const data = await response.json().catch(() => ({}));
   if (!response.ok) {
     const error = new Error(data.error || data.message || JSON.stringify(data));
@@ -2016,6 +2151,7 @@ function cancelPendingDialogs() {
 
 function resetActiveTabUi() {
   clearRefreshTimers();
+  clearLiveToolRenderQueue();
   eventSource?.close();
   eventSource = null;
   currentState = null;
@@ -2306,6 +2442,7 @@ async function refreshTabs({ selectStored = false } = {}) {
   if (!activeTabId || !tabs.some((tab) => tab.id === activeTabId)) {
     setActiveTabId((stored && tabs.some((tab) => tab.id === stored) ? stored : tabs[0]?.id) || null, { remember: true });
   }
+  rememberServerStartCwd(tabs.find((tab) => tab.id === activeTabId)?.cwd || tabs[0]?.cwd);
   renderTabs();
   return tabs;
 }
@@ -4992,7 +5129,10 @@ function toolResultForCallId(toolCallId, messages = latestMessages) {
 function cleanupLiveToolRunsForMessages(messages = latestMessages) {
   const results = buildToolResultMap(messages);
   for (const id of liveToolRuns.keys()) {
-    if (results.has(id)) liveToolRuns.delete(id);
+    if (results.has(id)) {
+      liveToolRuns.delete(id);
+      cancelQueuedLiveToolRunRender(id);
+    }
   }
 }
 
@@ -5306,12 +5446,111 @@ function liveToolRunMessage(run) {
   };
 }
 
+function applyToolExecutionBubbleState(bubble, message) {
+  const status = toolExecutionStatus(message);
+  bubble.classList.remove("tool-pending", "tool-running", "tool-success", "tool-error", "error");
+  bubble.classList.add(`tool-${status}`);
+  if (message.isError || status === "error") bubble.classList.add("error");
+  if (message.toolCallId) {
+    const id = String(message.toolCallId);
+    bubble.dataset.toolCallId = id;
+    if (message.live) liveToolCards.set(id, bubble);
+  }
+}
+
+function toolDetailsStateKey(details, counts) {
+  const classKey = Array.from(details.classList || []).sort().join(".") || "details";
+  const summaryText = details.querySelector("summary")?.textContent || "";
+  const summaryKey = summaryText.replace(/\s*\([^)]*\)\s*$/g, "").trim();
+  const base = `${classKey}|${summaryKey}`;
+  const index = counts.get(base) || 0;
+  counts.set(base, index + 1);
+  return `${base}|${index}`;
+}
+
+function captureToolDetailsOpenState(root) {
+  const state = new Set();
+  const counts = new Map();
+  for (const details of root.querySelectorAll("details")) {
+    const key = toolDetailsStateKey(details, counts);
+    if (details.open) state.add(key);
+  }
+  return state;
+}
+
+function restoreToolDetailsOpenState(root, state) {
+  if (!state?.size) return;
+  const counts = new Map();
+  for (const details of root.querySelectorAll("details")) {
+    if (state.has(toolDetailsStateKey(details, counts))) details.open = true;
+  }
+}
+
+function updateLiveToolCard(bubble, message) {
+  if (!bubble?.isConnected) return false;
+  const header = bubble.querySelector(":scope > .message-header");
+  const body = bubble.querySelector(":scope > .message-body");
+  if (!body) return false;
+  applyToolExecutionBubbleState(bubble, message);
+  const role = header?.querySelector(".message-role");
+  if (role) role.textContent = messageTitle(message);
+  const timestamp = header?.querySelector(".muted");
+  if (timestamp) timestamp.textContent = formatDate(message.timestamp);
+  const detailsOpenState = captureToolDetailsOpenState(body);
+  body.replaceChildren();
+  renderToolExecution(body, message);
+  restoreToolDetailsOpenState(body, detailsOpenState);
+  return true;
+}
+
+function cancelQueuedLiveToolRunRender(toolCallId = "") {
+  if (toolCallId) liveToolRenderQueue.delete(String(toolCallId));
+  else liveToolRenderQueue.clear();
+  if (liveToolRenderQueue.size === 0) {
+    clearTimeout(liveToolRenderTimer);
+    liveToolRenderTimer = null;
+  }
+}
+
+function clearLiveToolRenderQueue() {
+  cancelQueuedLiveToolRunRender();
+}
+
+function flushLiveToolRunRenderQueue() {
+  const entries = Array.from(liveToolRenderQueue.values());
+  clearLiveToolRenderQueue();
+  for (const entry of entries) renderLiveToolRun(entry.run, { scroll: entry.scroll });
+}
+
+function scheduleLiveToolRunRender(run, { scroll = false } = {}) {
+  if (!run?.toolCallId) return;
+  const id = String(run.toolCallId);
+  const existing = liveToolRenderQueue.get(id);
+  liveToolRenderQueue.set(id, { run, scroll: !!(existing?.scroll || scroll) });
+  if (liveToolRenderTimer) return;
+  liveToolRenderTimer = setTimeout(() => {
+    liveToolRenderTimer = null;
+    const flush = () => flushLiveToolRunRenderQueue();
+    if (typeof requestAnimationFrame === "function") requestAnimationFrame(flush);
+    else flush();
+  }, TOOL_LIVE_UPDATE_THROTTLE_MS);
+}
+
 function renderLiveToolRun(run, { scroll = true } = {}) {
   if (!run?.toolCallId) return;
-  const existing = liveToolCards.get(run.toolCallId);
+  const id = String(run.toolCallId);
+  cancelQueuedLiveToolRunRender(id);
+  const existing = liveToolCards.get(id);
+  const existingConnected = !!(existing?.isConnected && existing.parentElement === elements.chat);
   const shouldFollow = scroll && (autoFollowChat || isChatNearBottom());
-  const created = appendMessage(liveToolRunMessage(run), { transient: true, animateEntry: !existing });
-  if (existing?.isConnected && existing !== created.bubble) existing.replaceWith(created.bubble);
+  const message = liveToolRunMessage(run);
+  if (existingConnected && updateLiveToolCard(existing, message)) {
+    renderRunIndicator({ scroll: false });
+    if (shouldFollow) scrollChatToBottom();
+    return;
+  }
+  const created = appendMessage(message, { transient: true, animateEntry: !existingConnected });
+  if (existingConnected && existing !== created.bubble) existing.replaceWith(created.bubble);
   renderRunIndicator({ scroll: false });
   if (shouldFollow) scrollChatToBottom();
 }
@@ -5345,7 +5584,7 @@ function handleToolExecutionStart(event) {
 function handleToolExecutionUpdate(event) {
   const result = { ...(event.partialResult || {}), isError: false };
   const run = upsertLiveToolRun(event, { result, isPartial: true, isError: false });
-  if (run) renderLiveToolRun(run, { scroll: false });
+  if (run) scheduleLiveToolRunRender(run, { scroll: false });
 }
 
 function handleToolExecutionEnd(event) {
@@ -5381,15 +5620,7 @@ function appendMessage(message, { streaming = false, messageIndex = -1, transien
   const role = String(message.role || "message");
   const safeRole = role.replace(/[^a-z0-9_-]/gi, "");
   const bubble = make("article", `message ${safeRole}${message.level ? ` ${message.level}` : ""}${streaming ? " streaming" : ""}${animateEntry ? " action-enter" : ""}`);
-  if (message.role === "toolExecution") {
-    const status = toolExecutionStatus(message);
-    bubble.classList.add(`tool-${status}`);
-    if (message.isError || status === "error") bubble.classList.add("error");
-    if (message.toolCallId) {
-      bubble.dataset.toolCallId = String(message.toolCallId);
-      if (message.live) liveToolCards.set(String(message.toolCallId), bubble);
-    }
-  }
+  if (message.role === "toolExecution") applyToolExecutionBubbleState(bubble, message);
   if (!transient && messageIndex >= 0) {
     bubble.dataset.messageIndex = String(messageIndex);
     if (role === "user") bubble.dataset.userPrompt = "true";
@@ -6819,6 +7050,7 @@ async function refreshWorkspace(tabContext = activeTabContext()) {
   }
   if (!isCurrentTabContext(tabContext)) return;
   latestWorkspace = nextWorkspace;
+  rememberServerStartCwd(nextWorkspace?.cwd);
   renderFooter();
 }
 
@@ -7908,10 +8140,14 @@ function connectEvents(tabContext = activeTabContext()) {
     }
   };
   source.onerror = () => {
-    if (eventSource === source && isCurrentTabContext(tabContext)) addEvent("event stream disconnected; browser will retry", "warn");
+    if (eventSource !== source || !isCurrentTabContext(tabContext)) return;
+    addEvent("event stream disconnected; browser will retry", "warn");
+    fetch("/api/health", { cache: "no-store" }).catch((error) => setBackendOffline(true, error));
   };
 }
 
+elements.copyServerCommandButton?.addEventListener("click", copyServerStartCommand);
+elements.retryServerConnectionButton?.addEventListener("click", retryServerConnection);
 elements.sendFeedbackButton.addEventListener("click", () => submitQueuedActionFeedback());
 elements.composer.addEventListener("submit", (event) => {
   event.preventDefault();
@@ -8273,4 +8509,5 @@ bindSidePanelSectionToggles();
 restoreSidePanelState();
 bindMobileViewChanges();
 registerPwaServiceWorker();
+renderServerOfflinePanel();
 initializeTabs().catch((error) => addEvent(error.message, "error"));

package/public/index.html

@@ -22,6 +22,20 @@
       <span class="side-panel-button-chevron" aria-hidden="true">‹</span>
     </button>
 
+    <section id="serverOfflinePanel" class="server-offline-panel" aria-live="assertive" hidden>
+      <div class="server-offline-card" role="status">
+        <span class="server-offline-kicker">Backend unavailable</span>
+        <h1>Pi Web UI server is offline</h1>
+        <p>Run this on the machine that hosts Pi Web UI, then retry the connection.</p>
+        <code id="serverOfflineCommand" class="server-offline-command">pi-webui --cwd .</code>
+        <div class="server-offline-actions">
+          <button id="copyServerCommandButton" class="primary" type="button">Copy start command</button>
+          <button id="retryServerConnectionButton" type="button">Retry connection</button>
+        </div>
+        <p class="server-offline-note muted">From an existing Pi terminal you can also run <code id="serverOfflineSlashCommand">/webui-start</code>.</p>
+      </div>
+    </section>
+
     <main class="layout">
       <section class="chat-panel">
         <header class="terminal-tabs-shell">

package/public/styles.css

@@ -309,6 +309,72 @@ body.side-panel-collapsed .side-panel {
 .side-panel-backdrop {
   display: none;
 }
+.server-offline-panel[hidden] {
+  display: none !important;
+}
+.server-offline-panel {
+  position: fixed;
+  inset: 1rem;
+  z-index: 60;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  pointer-events: none;
+}
+.server-offline-card {
+  position: relative;
+  width: min(44rem, 100%);
+  pointer-events: auto;
+  padding: clamp(1.2rem, 4vw, 2rem);
+  border: 1px solid rgba(249, 226, 175, 0.38);
+  border-radius: 1.2rem;
+  background:
+    radial-gradient(circle at 12% 0, rgba(249, 226, 175, 0.16), transparent 18rem),
+    linear-gradient(145deg, rgba(var(--ctp-base-rgb), 0.96), rgba(var(--ctp-crust-rgb), 0.98));
+  box-shadow: 0 1.2rem 4rem rgba(var(--ctp-crust-rgb), 0.74), 0 0 2rem rgba(249, 226, 175, 0.14), inset 0 1px 0 rgba(255,255,255,0.07);
+}
+.server-offline-kicker {
+  display: inline-block;
+  margin-bottom: 0.6rem;
+  color: var(--warning);
+  font-size: 0.76rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.server-offline-card h1 {
+  margin: 0 0 0.55rem;
+  font-size: clamp(1.35rem, 4vw, 2.1rem);
+}
+.server-offline-card p {
+  margin: 0 0 1rem;
+}
+.server-offline-command {
+  display: block;
+  margin: 0.9rem 0 1rem;
+  padding: 0.9rem 1rem;
+  overflow-x: auto;
+  white-space: pre;
+  border: 1px solid rgba(148, 226, 213, 0.26);
+  border-radius: 0.85rem;
+  color: var(--ctp-teal);
+  background: rgba(var(--ctp-crust-rgb), 0.72);
+  box-shadow: inset 0 0 1.2rem rgba(var(--ctp-crust-rgb), 0.46);
+}
+.server-offline-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.7rem;
+}
+.server-offline-note {
+  margin: 1rem 0 0;
+  font-size: 0.86rem;
+}
+body.server-offline .layout {
+  opacity: 0.42;
+  filter: blur(2px);
+  pointer-events: none;
+}
 .side-panel-expand-button {
   position: fixed;
   top: 1rem;
@@ -1922,6 +1988,7 @@ button.footer-meta {
 .message.toolExecution {
   border-color: rgba(249, 226, 175, 0.34);
   background: linear-gradient(145deg, rgba(249, 226, 175, 0.12), rgba(var(--ctp-surface-rgb), 0.58));
+  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
 }
 .message.toolExecution .message-role {
   color: var(--ctp-yellow);

package/tests/mobile-static.test.mjs

@@ -51,6 +51,9 @@ assert.match(html, /id="thinkingVisibilityStatus"/, "thinking-output visibility
 assert.match(html, /id="nativeCommandDialog"/, "native slash selector UI should have a dedicated dialog");
 assert.match(html, /id="nativeCommandSearch"[^>]*type="search"/, "native slash selector dialog should expose a filter box");
 assert.match(html, /id="optionalFeaturesBox"/, "side panel should expose optional feature status and controls");
+assert.match(html, /id="serverOfflinePanel"/, "PWA/offline shell should expose a backend-offline recovery panel");
+assert.match(html, /id="copyServerCommandButton"/, "backend-offline recovery panel should expose a start-command copy button");
+assert.match(html, /id="retryServerConnectionButton"/, "backend-offline recovery panel should expose a retry button");
 assert.match(html, /data-side-panel-section="controls"/, "side panel controls should live in a collapsible section");
 assert.match(html, /data-side-panel-section="commands"/, "side panel commands should live in a collapsible section");
 assert.match(html, /class="side-panel-section-toggle"[^>]*aria-controls="sidePanelSectionControls"/, "side panel section toggles should target their content panels");
@@ -158,6 +161,7 @@ assert.match(css, /\.terminal-tab\.activity-done/, "completed unseen work should
 assert.match(css, /\.terminal-tabs[\s\S]*?position:\s*absolute/, "expanded mobile tabs should overlay instead of consuming transcript space");
 assert.match(css, /body\.mobile-keyboard-open \.terminal-tabs-shell,[\s\S]*?body\.mobile-keyboard-open \.widget-area,[\s\S]*?body\.mobile-keyboard-open \.statusbar/, "mobile keyboard mode should hide header, widgets, and footer");
 assert.match(css, /body\.mobile-keyboard-open \.composer-actions-button,[\s\S]*?body\.mobile-keyboard-open \.composer-actions-panel/, "mobile keyboard mode should hide the secondary actions sheet while keeping active-run controls available");
+assert.match(css, /\.server-offline-panel/, "PWA/offline shell should style a backend-offline recovery panel");
 assert.match(css, /body:not\(\.pi-run-active\):not\(\.mobile-keyboard-open\) \.composer-row button\.primary \{ grid-column: span 4; \}/, "idle mobile composer should keep Actions and Send on one compact row");
 assert.match(css, /button\[hidden\] \{ display: none !important; \}/, "hidden bottom-row controls should not occupy layout space");
 assert.match(css, /\.footer-details-toggle \{ display: none; \}/, "footer details toggle should be hidden outside mobile CSS");
@@ -223,6 +227,10 @@ assert.match(app, /async function initializeTabs\(\)[\s\S]*?restoreActiveDraft\(
 assert.match(app, /resizePromptInput\(\);\nfocusPromptInput\(\{ defer: true \}\);\nupdateComposerModeButtons\(\);/, "startup should request prompt focus before waiting for tab state refreshes");
 assert.match(app, /elements\.promptInput\.addEventListener\("focus", \(\) => \{\n\s+syncMobileChatToBottomForInput\(\);/, "focusing mobile input should scroll output to bottom");
 assert.match(app, /navigator\.serviceWorker\.register\("\/service-worker\.js"\)/, "PWA service worker should be registered by the app");
+assert.match(app, /function serverStartCommandText\(\)[\s\S]*pi-webui --cwd/, "PWA/offline shell should build a pi-webui --cwd recovery command");
+assert.match(app, /Pi Web UI server is offline/, "PWA/offline shell should clearly report backend-down state");
+assert.match(app, /navigator\.clipboard\.writeText\(text\)/, "backend-offline recovery panel should copy the start command when possible");
+assert.match(app, /retryServerConnectionButton.*retryServerConnection/s, "backend-offline recovery panel should wire a retry action");
 assert.match(app, /function isChatNearBottom\(/, "chat should detect whether the user is reading above the bottom");
 assert.match(app, /function scheduleChatFollowScroll\(/, "chat auto-follow should retry after layout settles during fast streaming");
 assert.match(app, /function setChatScrollTopInstant\(top\)[\s\S]*?scrollBehavior = "auto"/, "chat auto-follow should bypass smooth scrolling while chasing fast output");
@@ -279,7 +287,10 @@ assert.match(app, /function toolResultPreviewText\(message, lineLimit = 10\)/, "
 assert.match(app, /function renderToolExecution\(parent, message\)[\s\S]*?WEBUI_TOOL_RENDERERS/, "paired tool cards should use the browser-side built-in tool renderer registry");
 assert.match(app, /appendToolRawDetails\(parent, tool\)/, "paired tool cards should keep a safe raw-data expander for debugging renderer mismatches");
 assert.match(app, /function toolStateMeta\(tool\)/, "tool cards should expose consistent status and elapsed metadata across built-in renderers");
-assert.match(app, /function handleToolExecutionUpdate\(event\)[\s\S]*?event\.partialResult/, "live tool_execution_update events should update transcript-visible tool cards");
+assert.match(app, /const TOOL_LIVE_UPDATE_THROTTLE_MS = 80/, "live tool cards should coalesce rapid partial updates before re-rendering");
+assert.match(app, /function updateLiveToolCard\(bubble, message\)[\s\S]*?body\.replaceChildren\(\);[\s\S]*?renderToolExecution\(body, message\);/, "live tool card updates should re-render the existing card body in place");
+assert.match(app, /function scheduleLiveToolRunRender\(run[\s\S]*?liveToolRenderQueue\.set[\s\S]*?TOOL_LIVE_UPDATE_THROTTLE_MS/, "live tool update events should be queued and throttled for smoother browser output");
+assert.match(app, /function handleToolExecutionUpdate\(event\)[\s\S]*?event\.partialResult[\s\S]*?scheduleLiveToolRunRender\(run, \{ scroll: false \}\)/, "live tool_execution_update events should update transcript-visible tool cards without replacing them per event");
 assert.match(app, /appendText\(preview, toolResultPreviewText\(message, 10\), "code-block tool-result-preview-text"\)/, "collapsed tool results should render the first ten preview lines by default");
 assert.match(app, /function assistantDisplayMessages\(message\)/, "assistant history should split thinking and tool-call parts out of the final Assistant output card");
 assert.match(app, /function assistantHasToolCallAfter\(content, index\)/, "assistant text that precedes a tool call should be detectable and suppressible");