@firstpick/pi-package-webui 0.1.0 → 0.1.2

package/public/app.js

@@ -2,11 +2,19 @@ const $ = (selector) => document.querySelector(selector);
 
 const elements = {
   sessionLine: $("#sessionLine"),
+  tabBar: $("#tabBar"),
+  terminalTabsToggleButton: $("#terminalTabsToggleButton"),
+  newTabButton: $("#newTabButton"),
   statusBar: $("#statusBar"),
   widgetArea: $("#widgetArea"),
   chat: $("#chat"),
+  jumpToLatestButton: $("#jumpToLatestButton"),
   composer: $("#composer"),
+  composerRow: $(".composer-row"),
+  composerActionsButton: $("#composerActionsButton"),
+  composerActionsPanel: $("#composerActionsPanel"),
   promptInput: $("#promptInput"),
+  sendButton: $("#sendButton"),
   commandSuggest: $("#commandSuggest"),
   busyBehavior: $("#busyBehavior"),
   steerButton: $("#steerButton"),
@@ -26,8 +34,11 @@ const elements = {
   setModelButton: $("#setModelButton"),
   thinkingSelect: $("#thinkingSelect"),
   setThinkingButton: $("#setThinkingButton"),
+  networkStatus: $("#networkStatus"),
+  openNetworkButton: $("#openNetworkButton"),
   toggleSidePanelButton: $("#toggleSidePanelButton"),
   sidePanelExpandButton: $("#sidePanelExpandButton"),
+  sidePanelBackdrop: $("#sidePanelBackdrop"),
   sidePanel: $("#sidePanel"),
   stateDetails: $("#stateDetails"),
   queueBox: $("#queueBox"),
@@ -38,9 +49,22 @@ const elements = {
   dialogMessage: $("#dialogMessage"),
   dialogBody: $("#dialogBody"),
   dialogActions: $("#dialogActions"),
+  pathPickerDialog: $("#pathPickerDialog"),
+  pathPickerTitle: $("#pathPickerTitle"),
+  pathPickerCurrent: $("#pathPickerCurrent"),
+  pathPickerAddFastPickButton: $("#pathPickerAddFastPickButton"),
+  pathPickerFastPicks: $("#pathPickerFastPicks"),
+  pathPickerRoots: $("#pathPickerRoots"),
+  pathPickerList: $("#pathPickerList"),
+  pathPickerError: $("#pathPickerError"),
+  pathPickerCancelButton: $("#pathPickerCancelButton"),
+  pathPickerChooseButton: $("#pathPickerChooseButton"),
 };
 
 let currentState = null;
+let tabs = [];
+let activeTabId = null;
+let tabDrafts = new Map();
 let streamBubble = null;
 let streamText = null;
 let streamThinking = null;
@@ -50,17 +74,37 @@ let refreshStateTimer = null;
 let refreshFooterTimer = null;
 let eventSource = null;
 let activeDialog = null;
+let pathPickerState = null;
+let pathFastPicks = [];
+let pathFastPicksReady = false;
+let pathFastPicksLoadPromise = null;
+let mobileTabsExpanded = false;
 let availableCommands = [];
 let commandSuggestions = [];
 let commandSuggestIndex = 0;
 let latestStats = null;
 let latestWorkspace = null;
+let latestNetwork = null;
 let latestMessages = [];
+let transientMessages = [];
+let availableModels = [];
+let footerScopedModels = [];
+let footerScopedModelPatterns = [];
+let footerScopedModelSource = "none";
+let autoFollowChat = true;
+let mobileFooterExpanded = false;
+let footerModelPickerOpen = false;
+let maxVisualViewportHeight = 0;
 let currentRunStartedAt = null;
 let currentRunStreamChars = 0;
 let latestTokPerSecond = null;
 const dialogQueue = [];
 const SIDE_PANEL_STORAGE_KEY = "pi-webui-side-panel-collapsed";
+const TAB_STORAGE_KEY = "pi-webui-active-tab";
+const PATH_FAST_PICKS_STORAGE_KEY = "pi-webui-path-fast-picks";
+const MOBILE_VIEW_QUERY = "(max-width: 720px), (max-device-width: 720px), (pointer: coarse) and (hover: none)";
+const CHAT_BOTTOM_THRESHOLD_PX = 96;
+const mobileViewMedia = window.matchMedia?.(MOBILE_VIEW_QUERY) || null;
 const statusEntries = new Map();
 const widgets = new Map();
 const gitWorkflow = {
@@ -92,12 +136,105 @@ function make(tag, className, text) {
   return node;
 }
 
-function setSidePanelCollapsed(collapsed) {
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function isMobileView() {
+  return mobileViewMedia?.matches || false;
+}
+
+function readStoredSidePanelCollapsed() {
+  try {
+    const stored = localStorage.getItem(SIDE_PANEL_STORAGE_KEY);
+    return stored === null ? null : stored === "1";
+  } catch {
+    return null;
+  }
+}
+
+function setComposerActionsOpen(open) {
+  const shouldOpen = open && isMobileView();
+  document.body.classList.toggle("composer-actions-open", shouldOpen);
+  elements.composerActionsButton.setAttribute("aria-expanded", shouldOpen ? "true" : "false");
+}
+
+function isRunActive() {
+  return !!currentState?.isStreaming;
+}
+
+function resizePromptInput() {
+  const input = elements.promptInput;
+  input.style.height = "auto";
+  const maxHeight = Number.parseFloat(getComputedStyle(input).maxHeight);
+  const nextHeight = Number.isFinite(maxHeight) ? Math.min(input.scrollHeight, maxHeight) : input.scrollHeight;
+  input.style.height = `${Math.ceil(nextHeight)}px`;
+  input.style.overflowY = Number.isFinite(maxHeight) && input.scrollHeight > maxHeight + 1 ? "auto" : "hidden";
+}
+
+function updateComposerModeButtons() {
+  const runActive = isRunActive();
+  const target = runActive ? elements.composerRow : elements.composerActionsPanel;
+  const before = runActive ? elements.sendButton : null;
+  for (const button of [elements.steerButton, elements.followUpButton]) {
+    if (button.parentElement !== target) target.insertBefore(button, before);
+  }
+  document.body.classList.toggle("pi-run-active", runActive);
+}
+
+function updateFooterModelPickerPosition() {
+  if (!footerModelPickerOpen || !isMobileView()) {
+    document.documentElement.style.removeProperty("--footer-model-picker-bottom");
+    return;
+  }
+  const viewportHeight = window.innerHeight || window.visualViewport?.height || document.documentElement.clientHeight;
+  const statusTop = elements.statusBar.getBoundingClientRect().top;
+  const bottom = Math.max(8, Math.round(viewportHeight - statusTop + 6));
+  document.documentElement.style.setProperty("--footer-model-picker-bottom", `${bottom}px`);
+}
+
+function setMobileFooterExpanded(expanded) {
+  mobileFooterExpanded = expanded && isMobileView();
+  if (mobileFooterExpanded && footerModelPickerOpen) {
+    footerModelPickerOpen = false;
+    document.body.classList.remove("footer-model-picker-open");
+    elements.statusBar.querySelector(".footer-model-picker")?.remove();
+  }
+  document.body.classList.toggle("footer-details-expanded", mobileFooterExpanded);
+  const button = elements.statusBar.querySelector(".footer-details-toggle");
+  if (button) {
+    button.textContent = mobileFooterExpanded ? "Less" : "Details";
+    button.setAttribute("aria-expanded", mobileFooterExpanded ? "true" : "false");
+  }
+  updateFooterModelPickerPosition();
+}
+
+function setMobileTabsExpanded(expanded) {
+  mobileTabsExpanded = expanded && isMobileView();
+  document.body.classList.toggle("mobile-tabs-expanded", mobileTabsExpanded);
+  elements.terminalTabsToggleButton.setAttribute("aria-expanded", mobileTabsExpanded ? "true" : "false");
+}
+
+function syncMobileSidePanelState(collapsed) {
+  const showBackdrop = !collapsed && isMobileView();
+  elements.sidePanelBackdrop.hidden = !showBackdrop;
+  if (showBackdrop) elements.sidePanel.setAttribute("aria-modal", "true");
+  else elements.sidePanel.removeAttribute("aria-modal");
+}
+
+function setSidePanelCollapsed(collapsed, { persist = true, focusPanel = false } = {}) {
   document.body.classList.toggle("side-panel-collapsed", collapsed);
   elements.toggleSidePanelButton.setAttribute("aria-expanded", collapsed ? "false" : "true");
   elements.toggleSidePanelButton.setAttribute("title", collapsed ? "Expand side panel" : "Collapse side panel");
   elements.toggleSidePanelButton.setAttribute("aria-label", collapsed ? "Expand side panel" : "Collapse side panel");
   elements.sidePanelExpandButton.setAttribute("aria-expanded", collapsed ? "false" : "true");
+  syncMobileSidePanelState(collapsed);
+
+  if (!collapsed && focusPanel && isMobileView()) {
+    requestAnimationFrame(() => elements.toggleSidePanelButton.focus());
+  }
+
+  if (!persist || isMobileView()) return;
   try {
     localStorage.setItem(SIDE_PANEL_STORAGE_KEY, collapsed ? "1" : "0");
   } catch {
@@ -106,15 +243,83 @@ function setSidePanelCollapsed(collapsed) {
 }
 
 function restoreSidePanelState() {
-  try {
-    setSidePanelCollapsed(localStorage.getItem(SIDE_PANEL_STORAGE_KEY) === "1");
-  } catch {
-    setSidePanelCollapsed(false);
+  if (isMobileView()) {
+    setSidePanelCollapsed(true, { persist: false });
+    return;
+  }
+  const stored = readStoredSidePanelCollapsed();
+  setSidePanelCollapsed(stored ?? false, { persist: stored !== null });
+}
+
+function bindMobileViewChanges() {
+  if (!mobileViewMedia) return;
+  const syncForViewport = (event) => {
+    setComposerActionsOpen(false);
+    setMobileFooterExpanded(false);
+    setMobileTabsExpanded(false);
+    if (event.matches) {
+      setSidePanelCollapsed(true, { persist: false });
+      return;
+    }
+    const stored = readStoredSidePanelCollapsed();
+    setSidePanelCollapsed(stored ?? false, { persist: false });
+  };
+  if (typeof mobileViewMedia.addEventListener === "function") mobileViewMedia.addEventListener("change", syncForViewport);
+  else mobileViewMedia.addListener?.(syncForViewport);
+}
+
+function updateVisualViewportVars() {
+  const viewport = window.visualViewport;
+  const viewportHeight = viewport?.height || window.innerHeight || document.documentElement.clientHeight;
+  const offsetTop = viewport?.offsetTop || 0;
+  const layoutHeight = window.innerHeight || viewportHeight;
+  if (viewportHeight > maxVisualViewportHeight) maxVisualViewportHeight = viewportHeight;
+  const keyboardInset = viewport ? Math.max(0, Math.round(layoutHeight - viewportHeight - offsetTop)) : 0;
+  const promptFocused = document.activeElement === elements.promptInput;
+  const keyboardOpen = isMobileView() && promptFocused && (keyboardInset > 80 || maxVisualViewportHeight - viewportHeight > 120);
+  document.documentElement.style.setProperty("--visual-viewport-height", `${Math.round(viewportHeight)}px`);
+  document.documentElement.style.setProperty("--visual-viewport-offset-top", `${Math.round(offsetTop)}px`);
+  document.documentElement.style.setProperty("--keyboard-inset-bottom", `${keyboardInset}px`);
+  document.body.classList.toggle("mobile-keyboard-open", keyboardOpen);
+  if (keyboardOpen) {
+    setComposerActionsOpen(false);
+    setMobileTabsExpanded(false);
+    setMobileFooterExpanded(false);
+    setFooterModelPickerOpen(false);
+    syncMobileChatToBottomForInput();
+  }
+  updateFooterModelPickerPosition();
+}
+
+function installViewportHandlers() {
+  updateVisualViewportVars();
+  const update = () => updateVisualViewportVars();
+  window.visualViewport?.addEventListener("resize", update, { passive: true });
+  window.visualViewport?.addEventListener("scroll", update, { passive: true });
+  window.addEventListener("resize", update, { passive: true });
+  window.addEventListener("orientationchange", () => setTimeout(update, 80));
+}
+
+function registerPwaServiceWorker() {
+  if (!("serviceWorker" in navigator)) return;
+  if (!window.isSecureContext) {
+    addEvent("PWA install needs HTTPS or localhost for service-worker support on most mobile browsers.", "warn");
+    return;
   }
+  navigator.serviceWorker.register("/service-worker.js").catch((error) => {
+    addEvent(`PWA service worker registration failed: ${error.message}`, "warn");
+  });
 }
 
-async function api(path, { method = "GET", body } = {}) {
-  const response = await fetch(path, {
+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);
+  url.searchParams.set("tab", tabId);
+  return `${url.pathname}${url.search}${url.hash}`;
+}
+
+async function api(path, { method = "GET", body, tabId = activeTabId, scoped = true } = {}) {
+  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),
@@ -126,6 +331,228 @@ async function api(path, { method = "GET", body } = {}) {
   return data;
 }
 
+function activeTab() {
+  return tabs.find((tab) => tab.id === activeTabId) || null;
+}
+
+function rememberActiveTab() {
+  try {
+    if (activeTabId) localStorage.setItem(TAB_STORAGE_KEY, activeTabId);
+  } catch {
+    // Ignore storage failures; tabs still work for this page load.
+  }
+}
+
+function restoreStoredTabId() {
+  try {
+    return localStorage.getItem(TAB_STORAGE_KEY) || null;
+  } catch {
+    return null;
+  }
+}
+
+function updateDocumentTitle() {
+  const tab = activeTab();
+  document.title = tab ? `Pi Web UI · ${tab.title}` : "Pi Web UI";
+}
+
+function saveActiveDraft() {
+  if (activeTabId) tabDrafts.set(activeTabId, elements.promptInput.value || "");
+}
+
+function restoreActiveDraft() {
+  elements.promptInput.value = activeTabId ? tabDrafts.get(activeTabId) || "" : "";
+  resizePromptInput();
+  renderCommandSuggestions();
+}
+
+function clearRefreshTimers() {
+  clearTimeout(refreshMessagesTimer);
+  clearTimeout(refreshStateTimer);
+  clearTimeout(refreshFooterTimer);
+  refreshMessagesTimer = null;
+  refreshStateTimer = null;
+  refreshFooterTimer = null;
+}
+
+function cancelPendingDialogs() {
+  const pending = activeDialog ? [activeDialog] : [];
+  pending.push(...dialogQueue.splice(0));
+  for (const request of pending) {
+    if (!request?.id || !["select", "confirm", "input", "editor"].includes(request.method)) continue;
+    api("/api/extension-ui-response", {
+      method: "POST",
+      body: { type: "extension_ui_response", id: request.id, cancelled: true },
+      tabId: request.tabId || activeTabId,
+    }).catch((error) => console.warn("failed to cancel stale extension dialog", error));
+  }
+  activeDialog = null;
+  if (elements.dialog.open) elements.dialog.close();
+}
+
+function resetActiveTabUi() {
+  clearRefreshTimers();
+  eventSource?.close();
+  eventSource = null;
+  currentState = null;
+  latestStats = null;
+  latestWorkspace = null;
+  latestMessages = [];
+  currentRunStartedAt = null;
+  currentRunStreamChars = 0;
+  latestTokPerSecond = null;
+  statusEntries.clear();
+  widgets.clear();
+  transientMessages = [];
+  availableCommands = [];
+  commandSuggestions = [];
+  commandSuggestIndex = 0;
+  resetStreamBubble();
+  hideCommandSuggestions();
+  cancelPendingDialogs();
+  Object.assign(gitWorkflow, {
+    active: false,
+    step: "idle",
+    busy: false,
+    output: "",
+    error: "",
+    message: null,
+    messageRequestedAt: 0,
+  });
+  elements.chat.replaceChildren();
+  elements.stateDetails.replaceChildren();
+  elements.eventLog.replaceChildren();
+  elements.queueBox.textContent = "No queued messages.";
+  elements.queueBox.classList.add("muted");
+  elements.commandsBox.textContent = "Loading…";
+  elements.commandsBox.classList.add("muted");
+  elements.sessionLine.textContent = activeTab() ? "Connecting…" : "No terminal tabs.";
+  renderWidgets();
+  renderGitWorkflow();
+  renderFooter();
+}
+
+function renderTabs() {
+  const active = activeTab();
+  elements.terminalTabsToggleButton.textContent = active ? `${active.title}${tabs.length > 1 ? ` · ${tabs.length}` : ""}` : "Tabs";
+  elements.terminalTabsToggleButton.title = active ? `Show terminal tabs · active: ${active.title}` : "Show terminal tabs";
+  elements.tabBar.replaceChildren();
+  for (const tab of tabs) {
+    const isActive = tab.id === activeTabId;
+    const wrapper = make("div", `terminal-tab${isActive ? " active" : ""}${tab.running ? "" : " stopped"}`);
+    const button = make("button", "terminal-tab-button");
+    button.type = "button";
+    button.setAttribute("role", "tab");
+    button.setAttribute("aria-selected", isActive ? "true" : "false");
+    button.title = `${tab.title}${tab.running ? ` · pid ${tab.pid || "starting"}` : " · stopped"}`;
+    button.append(
+      make("span", "terminal-tab-title", tab.title),
+      make("span", "terminal-tab-meta", tab.running ? `pid ${tab.pid || "…"}` : "stopped"),
+    );
+    button.addEventListener("click", () => switchTab(tab.id));
+    wrapper.append(button);
+
+    if (tabs.length > 1) {
+      const close = make("button", "terminal-tab-close", "×");
+      close.type = "button";
+      close.title = `Close ${tab.title}`;
+      close.setAttribute("aria-label", `Close ${tab.title}`);
+      close.addEventListener("click", (event) => {
+        event.stopPropagation();
+        closeTerminalTab(tab.id);
+      });
+      wrapper.append(close);
+    }
+
+    elements.tabBar.append(wrapper);
+  }
+  elements.tabBar.append(elements.newTabButton);
+  setMobileTabsExpanded(mobileTabsExpanded);
+  updateDocumentTitle();
+}
+
+async function refreshTabs({ selectStored = false } = {}) {
+  const response = await api("/api/tabs", { scoped: false });
+  tabs = response.data?.tabs || [];
+  const stored = selectStored ? restoreStoredTabId() : null;
+  if (!activeTabId || !tabs.some((tab) => tab.id === activeTabId)) {
+    activeTabId = (stored && tabs.some((tab) => tab.id === stored) ? stored : tabs[0]?.id) || null;
+    rememberActiveTab();
+  }
+  renderTabs();
+  return tabs;
+}
+
+async function switchTab(tabId) {
+  if (!tabId || tabId === activeTabId || !tabs.some((tab) => tab.id === tabId)) return;
+  setMobileTabsExpanded(false);
+  footerModelPickerOpen = false;
+  saveActiveDraft();
+  activeTabId = tabId;
+  rememberActiveTab();
+  resetActiveTabUi();
+  renderTabs();
+  restoreActiveDraft();
+  connectEvents();
+  await refreshAll();
+}
+
+async function createTerminalTab() {
+  setMobileTabsExpanded(false);
+  elements.newTabButton.disabled = true;
+  try {
+    const response = await api("/api/tabs", { method: "POST", body: { cwd: activeTab()?.cwd }, scoped: false });
+    tabs = response.data?.tabs || tabs;
+    const tab = response.data?.tab;
+    renderTabs();
+    if (tab?.id) {
+      await switchTab(tab.id);
+      addEvent(`created isolated terminal ${tab.title}`, "info");
+    }
+  } catch (error) {
+    addEvent(error.message, "error");
+  } finally {
+    elements.newTabButton.disabled = false;
+  }
+}
+
+async function closeTerminalTab(tabId) {
+  const tab = tabs.find((item) => item.id === tabId);
+  if (!tab || tabs.length <= 1) return;
+  if (!confirm(`Close ${tab.title}? This terminates its isolated Pi process.`)) return;
+
+  const wasActive = tabId === activeTabId;
+  const fallbackTabId = tabs.find((item) => item.id !== tabId)?.id || null;
+  try {
+    if (wasActive) eventSource?.close();
+    const response = await api(`/api/tabs/${encodeURIComponent(tabId)}`, { method: "DELETE", scoped: false });
+    tabs = response.data?.tabs || tabs.filter((item) => item.id !== tabId);
+    tabDrafts.delete(tabId);
+    if (wasActive) {
+      activeTabId = (fallbackTabId && tabs.some((item) => item.id === fallbackTabId) ? fallbackTabId : tabs[0]?.id) || null;
+      rememberActiveTab();
+      resetActiveTabUi();
+      renderTabs();
+      restoreActiveDraft();
+      connectEvents();
+      if (activeTabId) await refreshAll();
+    } else {
+      renderTabs();
+    }
+  } catch (error) {
+    addEvent(error.message, "error");
+  }
+}
+
+async function initializeTabs() {
+  await refreshTabs({ selectStored: true });
+  resetActiveTabUi();
+  renderTabs();
+  restoreActiveDraft();
+  connectEvents();
+  if (activeTabId) await refreshAll();
+}
+
 function addEvent(message, level = "info") {
   const line = make("div", `event ${level}`.trim());
   const time = new Date().toLocaleTimeString();
@@ -226,13 +653,335 @@ function footerMetric(icon, label, value, tone = "") {
   return node;
 }
 
-function footerMeta(label, value, className = "") {
-  const node = make("span", `footer-meta ${className}`.trim());
+function footerMeta(label, value, className = "", options = {}) {
+  const isAction = typeof options.onClick === "function";
+  const node = make(isAction ? "button" : "span", `footer-meta ${className}${isAction ? " footer-meta-action" : ""}`.trim());
+  if (isAction) {
+    node.type = "button";
+    node.addEventListener("click", options.onClick);
+  }
   node.append(make("span", "footer-meta-label", label), make("span", "footer-meta-value", value));
-  node.title = `${label}: ${value}`;
+  node.title = options.title || `${label}: ${value}`;
   return node;
 }
 
+function setFooterModelPickerOpen(open) {
+  footerModelPickerOpen = !!open;
+  if (footerModelPickerOpen && isMobileView()) {
+    mobileFooterExpanded = false;
+    document.body.classList.remove("footer-details-expanded");
+    setComposerActionsOpen(false);
+    setMobileTabsExpanded(false);
+  }
+  document.body.classList.toggle("footer-model-picker-open", footerModelPickerOpen);
+  renderFooter();
+  updateFooterModelPickerPosition();
+}
+
+async function applyFooterModel(model) {
+  if (!model?.provider || !model?.id) return;
+  try {
+    footerModelPickerOpen = false;
+    await api("/api/model", { method: "POST", body: { provider: model.provider, modelId: model.id } });
+    await refreshState();
+    await refreshModels();
+  } catch (error) {
+    addEvent(error.message, "error");
+  } finally {
+    document.body.classList.toggle("footer-model-picker-open", footerModelPickerOpen);
+    renderFooter();
+  }
+}
+
+function renderFooterModelPicker() {
+  const picker = make("div", "footer-model-picker");
+  picker.setAttribute("role", "listbox");
+  picker.setAttribute("aria-label", "Scoped models");
+  picker.append(make("div", "footer-model-picker-title", "Scoped models"));
+  picker.append(make("div", "footer-model-picker-source", footerScopedModelSource === "none" ? "No saved scope" : `Source: ${footerScopedModelSource}${footerScopedModelPatterns.length ? ` · ${footerScopedModelPatterns.join(", ")}` : ""}`));
+  if (footerScopedModels.length === 0) {
+    const empty = make("div", "footer-model-picker-empty muted");
+    empty.append(
+      make("strong", undefined, "No scoped models available."),
+      make("span", undefined, " If you changed /scoped-models in the terminal UI, choose its Save action so Web UI can read it from settings, or start Web UI with forwarded Pi args like -- --models model-a,model-b."),
+    );
+    picker.append(empty);
+    return picker;
+  }
+  const current = currentState?.model;
+  for (const model of footerScopedModels) {
+    const selected = current?.provider === model.provider && current?.id === model.id;
+    const button = make("button", `footer-model-option${selected ? " active" : ""}`);
+    button.type = "button";
+    button.setAttribute("role", "option");
+    button.setAttribute("aria-selected", selected ? "true" : "false");
+    button.title = `${model.provider}/${model.id}${model.name ? ` · ${model.name}` : ""}`;
+    button.append(
+      make("span", "footer-model-option-main", `${model.provider}/${model.id}`),
+      make("span", "footer-model-option-name", model.name || ""),
+    );
+    button.addEventListener("click", () => applyFooterModel(model));
+    picker.append(button);
+  }
+  return picker;
+}
+
+function pathPickerButton(label, title, onClick, className = "") {
+  const button = make("button", className, label);
+  button.type = "button";
+  button.title = title || label;
+  button.addEventListener("click", onClick);
+  return button;
+}
+
+function setPathPickerError(message) {
+  elements.pathPickerError.textContent = message || "";
+  elements.pathPickerError.hidden = !message;
+}
+
+function normalizeFastPicks(value) {
+  const items = Array.isArray(value) ? value : [];
+  const seen = new Set();
+  const picks = [];
+  for (const item of items) {
+    const cwd = typeof item === "string" ? item : String(item?.cwd || "");
+    if (!cwd || seen.has(cwd)) continue;
+    seen.add(cwd);
+    picks.push({ cwd, displayCwd: String(item?.displayCwd || cwd) });
+  }
+  return picks.slice(0, 30);
+}
+
+function loadLegacyFastPicks() {
+  try {
+    return normalizeFastPicks(JSON.parse(localStorage.getItem(PATH_FAST_PICKS_STORAGE_KEY) || "[]"));
+  } catch {
+    return [];
+  }
+}
+
+function clearLegacyFastPicks() {
+  try {
+    localStorage.removeItem(PATH_FAST_PICKS_STORAGE_KEY);
+  } catch {
+    // Ignore storage cleanup failures; server persistence is authoritative.
+  }
+}
+
+function loadFastPicks() {
+  return pathFastPicks;
+}
+
+async function fetchFastPicks() {
+  const response = await api("/api/path-fast-picks", { scoped: false });
+  return normalizeFastPicks(response.data?.picks || []);
+}
+
+async function saveFastPicks(picks) {
+  pathFastPicks = normalizeFastPicks(picks);
+  pathFastPicksReady = true;
+  renderFastPicks();
+  try {
+    const response = await api("/api/path-fast-picks", { method: "POST", body: { picks: pathFastPicks }, scoped: false });
+    pathFastPicks = normalizeFastPicks(response.data?.picks || pathFastPicks);
+    clearLegacyFastPicks();
+  } catch (error) {
+    try {
+      localStorage.setItem(PATH_FAST_PICKS_STORAGE_KEY, JSON.stringify(pathFastPicks));
+    } catch {
+      // Ignore fallback storage failure; the event log still reports the server-side error.
+    }
+    addEvent(`failed to persist path fast picks on server; saved in this browser only: ${error.message}`, "error");
+  }
+  renderFastPicks();
+}
+
+async function initializeFastPicks() {
+  if (pathFastPicksLoadPromise) return pathFastPicksLoadPromise;
+  pathFastPicksLoadPromise = (async () => {
+    const legacy = loadLegacyFastPicks();
+    try {
+      const serverPicks = await fetchFastPicks();
+      const merged = normalizeFastPicks([...serverPicks, ...legacy]);
+      pathFastPicks = merged;
+      pathFastPicksReady = true;
+      if (legacy.length > 0 && JSON.stringify(merged) !== JSON.stringify(serverPicks)) await saveFastPicks(merged);
+      else clearLegacyFastPicks();
+    } catch (error) {
+      pathFastPicks = legacy;
+      pathFastPicksReady = true;
+      if (legacy.length > 0) addEvent(`using browser-only path fast picks; server load failed: ${error.message}`, "warn");
+      else addEvent(`failed to load path fast picks: ${error.message}`, "error");
+    }
+    renderFastPicks();
+  })();
+  return pathFastPicksLoadPromise;
+}
+
+function fastPickLabel(pick) {
+  const cwd = String(pick.cwd || pick.displayCwd || "");
+  const trimmed = cwd.replace(/\\/g, "/").replace(/\/+$/, "");
+  if (!trimmed) return cwd || "directory";
+  return trimmed.split("/").filter(Boolean).pop() || trimmed;
+}
+
+function currentFastPick() {
+  if (!pathPickerState?.cwd) return null;
+  return { cwd: pathPickerState.cwd, displayCwd: elements.pathPickerCurrent.textContent || pathPickerState.cwd };
+}
+
+function updateAddFastPickButton() {
+  if (!pathFastPicksReady) {
+    elements.pathPickerAddFastPickButton.disabled = true;
+    elements.pathPickerAddFastPickButton.textContent = "Loading fast picks…";
+    return;
+  }
+  const pick = currentFastPick();
+  const exists = !!pick && loadFastPicks().some((item) => item.cwd === pick.cwd);
+  elements.pathPickerAddFastPickButton.disabled = !pick || exists;
+  elements.pathPickerAddFastPickButton.textContent = exists ? "Fast pick added" : "Add fast pick";
+}
+
+function renderFastPicks() {
+  const picks = loadFastPicks();
+  elements.pathPickerFastPicks.replaceChildren();
+  if (!pathFastPicksReady) {
+    elements.pathPickerFastPicks.append(make("div", "path-picker-fast-picks-empty muted", "Loading fast picks…"));
+    updateAddFastPickButton();
+    return;
+  }
+  if (picks.length === 0) {
+    elements.pathPickerFastPicks.append(make("div", "path-picker-fast-picks-empty muted", "No fast picks yet."));
+    updateAddFastPickButton();
+    return;
+  }
+
+  for (const pick of picks) {
+    const item = make("span", "path-picker-fast-pick");
+    const jump = pathPickerButton(fastPickLabel(pick), pick.cwd, () => loadPathPickerDirectory(pick.cwd), "path-picker-fast-pick-button");
+    const remove = pathPickerButton("×", `Remove fast pick ${pick.cwd}`, async () => {
+      await saveFastPicks(loadFastPicks().filter((item) => item.cwd !== pick.cwd));
+    }, "path-picker-fast-pick-remove");
+    item.append(jump, remove);
+    elements.pathPickerFastPicks.append(item);
+  }
+  updateAddFastPickButton();
+}
+
+async function addCurrentFastPick() {
+  const pick = currentFastPick();
+  if (!pick) return;
+  const picks = loadFastPicks().filter((item) => item.cwd !== pick.cwd);
+  picks.unshift(pick);
+  await saveFastPicks(picks);
+}
+
+function renderPathPicker(data) {
+  if (!pathPickerState) return;
+  pathPickerState.cwd = data.cwd;
+  elements.pathPickerCurrent.textContent = data.displayCwd || data.cwd;
+  elements.pathPickerCurrent.title = data.cwd;
+  elements.pathPickerChooseButton.disabled = false;
+  elements.pathPickerChooseButton.textContent = "Use this directory";
+  setPathPickerError(data.truncated ? "Showing the first 500 directories." : "");
+  renderFastPicks();
+
+  elements.pathPickerRoots.replaceChildren();
+  if (data.parent) {
+    elements.pathPickerRoots.append(pathPickerButton("↑ Parent", data.parent, () => loadPathPickerDirectory(data.parent), "path-picker-root-button"));
+  }
+  for (const root of data.roots || []) {
+    elements.pathPickerRoots.append(pathPickerButton(root.label, root.cwd, () => loadPathPickerDirectory(root.cwd), "path-picker-root-button"));
+  }
+
+  elements.pathPickerList.replaceChildren();
+  if (!data.directories?.length) {
+    elements.pathPickerList.append(make("div", "path-picker-empty muted", "No subdirectories."));
+    return;
+  }
+
+  for (const directory of data.directories) {
+    const button = pathPickerButton(`${directory.name}/`, directory.cwd, () => loadPathPickerDirectory(directory.cwd), `path-picker-directory${directory.hidden ? " hidden-directory" : ""}`);
+    button.setAttribute("role", "option");
+    elements.pathPickerList.append(button);
+  }
+}
+
+async function loadPathPickerDirectory(cwd) {
+  if (!pathPickerState) return;
+  const requestId = ++pathPickerState.requestId;
+  elements.pathPickerAddFastPickButton.disabled = true;
+  elements.pathPickerChooseButton.disabled = true;
+  elements.pathPickerCurrent.textContent = "Loading…";
+  setPathPickerError("");
+
+  try {
+    const query = cwd ? `?path=${encodeURIComponent(cwd)}` : "";
+    const response = await api(`/api/directories${query}`);
+    if (!pathPickerState || pathPickerState.requestId !== requestId) return;
+    renderPathPicker(response.data || {});
+  } catch (error) {
+    if (!pathPickerState || pathPickerState.requestId !== requestId) return;
+    elements.pathPickerChooseButton.disabled = false;
+    elements.pathPickerCurrent.textContent = pathPickerState.cwd || "Unable to load directory";
+    setPathPickerError(error.message);
+    updateAddFastPickButton();
+  }
+}
+
+function closePathPicker(cwd) {
+  const state = pathPickerState;
+  if (!state) return;
+  pathPickerState = null;
+  if (elements.pathPickerDialog.open) elements.pathPickerDialog.close();
+  state.resolve(cwd || null);
+}
+
+function pickCwd(tab, initialCwd) {
+  if (pathPickerState) return Promise.resolve(null);
+
+  return new Promise((resolve) => {
+    pathPickerState = { tabId: tab.id, cwd: initialCwd, requestId: 0, resolve };
+    elements.pathPickerTitle.textContent = `Choose CWD for ${tab.title}`;
+    elements.pathPickerCurrent.textContent = "Loading…";
+    elements.pathPickerFastPicks.replaceChildren();
+    elements.pathPickerRoots.replaceChildren();
+    elements.pathPickerList.replaceChildren();
+    setPathPickerError("");
+    elements.pathPickerAddFastPickButton.disabled = true;
+    elements.pathPickerChooseButton.disabled = true;
+    initializeFastPicks().catch((error) => addEvent(`failed to initialize path fast picks: ${error.message}`, "error"));
+    elements.pathPickerDialog.showModal();
+    loadPathPickerDirectory(initialCwd);
+  });
+}
+
+async function changeActiveTabCwd() {
+  const tab = activeTab();
+  if (!tab) return;
+
+  const currentCwd = latestWorkspace?.cwd || tab.cwd || "";
+  const cwd = await pickCwd(tab, currentCwd);
+  if (!cwd || cwd === currentCwd) return;
+  if (!window.confirm(`Restart ${tab.title} in:\n${cwd}\n\nCurrent in-flight work in this tab will be stopped.`)) return;
+
+  saveActiveDraft();
+  try {
+    const response = await api(`/api/tabs/${encodeURIComponent(tab.id)}`, { method: "PATCH", body: { cwd }, scoped: false });
+    tabs = response.data?.tabs || tabs;
+    activeTabId = response.data?.tab?.id || activeTabId;
+    resetActiveTabUi();
+    renderTabs();
+    restoreActiveDraft();
+    connectEvents();
+    await refreshAll();
+    const changedCwd = response.data?.tab?.cwd || cwd;
+    addEvent(response.data?.changed === false ? `cwd unchanged: ${changedCwd}` : `changed ${tab.title} cwd to ${changedCwd}`, "info");
+  } catch (error) {
+    addEvent(error.message, "error");
+  }
+}
+
 function renderFooter() {
   const stats = latestStats;
   const tokens = stats?.tokens || {};
@@ -246,14 +995,16 @@ function renderFooter() {
     ? `${contextUsage.percent !== null && contextUsage.percent !== undefined ? `${Number(contextUsage.percent).toFixed(1)}% / ` : ""}${formatTokenCount(contextUsage.contextWindow)}`
     : "?";
 
+  const tab = activeTab();
   const git = latestWorkspace?.git;
   const branchLabel = git?.isRepo ? git.branch || "detached" : "no repo";
   const changeLabel = git?.isRepo ? `✎ ${git.changed ?? 0}  ◌ ${git.untracked ?? 0}` : "no git";
-  const workspaceLabel = latestWorkspace?.displayCwd || "loading…";
+  const workspaceLabel = latestWorkspace?.displayCwd || (tab?.cwd ? normalizeDisplayPath(tab.cwd) : "loading…");
   const runtime = latestWorkspace?.uptimeMs ? formatDuration(latestWorkspace.uptimeMs) : "--";
   const modelLine = `${shortModelLabel(currentState?.model)} · ${currentState?.thinkingLevel || "?"}`;
 
   elements.statusBar.replaceChildren();
+  document.body.classList.toggle("footer-model-picker-open", footerModelPickerOpen);
   const row1 = make("div", "footer-line footer-line-main");
   row1.append(
     footerMetric("🪙", "tokens", `↑ ${formatTokenCount(tokens.input ?? 0)}  ↓ ${formatTokenCount(tokens.output ?? 0)}`, "tone-pink"),
@@ -263,16 +1014,31 @@ function renderFooter() {
     footerMetric("💸", subscriptionSuffix(), formatCost(stats?.cost ?? 0), "tone-green"),
     footerMetric("🧠", "context", contextLabel, "tone-teal"),
   );
+  const footerToggle = make("button", "footer-details-toggle", mobileFooterExpanded ? "Less" : "Details");
+  footerToggle.type = "button";
+  footerToggle.setAttribute("aria-expanded", mobileFooterExpanded ? "true" : "false");
+  footerToggle.addEventListener("click", () => setMobileFooterExpanded(!mobileFooterExpanded));
 
   const row2 = make("div", "footer-line footer-line-meta");
   row2.append(
-    footerMeta("cwd", workspaceLabel, "footer-workspace"),
+    footerMeta("cwd", workspaceLabel, "footer-workspace", tab ? {
+      onClick: changeActiveTabCwd,
+      title: `Change cwd for ${tab.title}: ${workspaceLabel}`,
+    } : {}),
     footerMeta("git", branchLabel, "footer-branch"),
     footerMeta("changes", changeLabel, "footer-changes"),
     footerMeta("runtime", `⏱ ${runtime} · Agent`, "footer-runtime"),
-    footerMeta("model", modelLine, "footer-model"),
+    footerMeta("context", contextLabel, "footer-context"),
+    footerMeta("model", modelLine, "footer-model", {
+      onClick: () => setFooterModelPickerOpen(!footerModelPickerOpen),
+      title: `Change scoped model: ${modelLine}`,
+    }),
+    footerToggle,
   );
   elements.statusBar.append(row1, row2);
+  if (footerModelPickerOpen) elements.statusBar.append(renderFooterModelPicker());
+  setMobileFooterExpanded(mobileFooterExpanded);
+  updateFooterModelPickerPosition();
 }
 
 function scheduleRefreshMessages(delay = 120) {
@@ -292,6 +1058,7 @@ function scheduleRefreshFooter(delay = 300) {
 
 function renderStatus() {
   const state = currentState;
+  updateComposerModeButtons();
   const running = state?.isStreaming ? "running" : "idle";
   const compacting = state?.isCompacting ? " · compacting" : "";
   const queue = state?.pendingMessageCount ? ` · queued ${state.pendingMessageCount}` : "";
@@ -321,12 +1088,88 @@ function renderStatus() {
   renderFooter();
 }
 
+function stripAnsi(text) {
+  return String(text || "").replace(/\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g, "");
+}
+
+function parseTodoProgressWidget(lines) {
+  const cleanLines = lines.map(stripAnsi).map((line) => line.trim()).filter(Boolean);
+  const headerIndex = cleanLines.findIndex((line) => /^Todo\s+\d+\/\d+\s+done/i.test(line));
+  if (headerIndex === -1) return null;
+
+  const header = cleanLines[headerIndex];
+  const match = header.match(/^Todo\s+(\d+)\/(\d+)\s+done(?:,\s+(\d+)\s+partial)?/i);
+  if (!match) return null;
+
+  const items = [];
+  let footer = "";
+  for (const line of cleanLines.slice(headerIndex + 1)) {
+    const item = line.match(/^\[( |x|X|-)\]\s+(.+)$/);
+    if (item) {
+      const mark = item[1].toLowerCase();
+      items.push({ status: mark === "x" ? "done" : mark === "-" ? "partial" : "todo", text: item[2].trim() });
+    } else if (/^Scroll\s+/i.test(line)) {
+      footer = line;
+    }
+  }
+
+  return {
+    done: Number.parseInt(match[1], 10) || 0,
+    total: Number.parseInt(match[2], 10) || items.length,
+    partial: Number.parseInt(match[3] || "0", 10) || 0,
+    items,
+    footer,
+  };
+}
+
+function renderTodoProgressWidget(_key, lines) {
+  const todo = parseTodoProgressWidget(lines);
+  if (!todo) return null;
+
+  const node = make("section", "widget todo-widget");
+  node.setAttribute("aria-label", "Todo progress");
+
+  const percent = todo.total > 0 ? Math.max(0, Math.min(100, (todo.done / todo.total) * 100)) : 0;
+  const header = make("div", "todo-widget-header");
+  header.append(
+    make("span", "todo-widget-title", "Todo progress"),
+    make("span", "todo-widget-count", `${todo.done}/${todo.total}`),
+    make("span", "todo-widget-meta", todo.partial ? `${todo.partial} partial` : "active"),
+  );
+
+  const progress = make("div", "todo-widget-progress");
+  const fill = make("span", "todo-widget-progress-fill");
+  fill.style.width = `${percent}%`;
+  progress.append(fill);
+
+  const list = make("ol", "todo-widget-list");
+  for (const item of todo.items) {
+    const row = make("li", `todo-widget-item ${item.status}`);
+    row.append(
+      make("span", "todo-widget-marker", item.status === "done" ? "✓" : item.status === "partial" ? "–" : ""),
+      make("span", "todo-widget-text", item.text),
+    );
+    list.append(row);
+  }
+
+  node.append(header, progress, list);
+  if (todo.footer) node.append(make("div", "todo-widget-footer", todo.footer));
+  return node;
+}
+
 function renderWidgets() {
   elements.widgetArea.replaceChildren();
   for (const [key, value] of widgets) {
-    const node = make("div", "widget");
     const lines = Array.isArray(value.widgetLines) ? value.widgetLines : [];
-    node.textContent = `${key}\n${lines.join("\n")}`;
+    const specialized = key === "todo-progress" ? renderTodoProgressWidget(key, lines) : null;
+    if (specialized) {
+      elements.widgetArea.append(specialized);
+      continue;
+    }
+
+    const node = make("div", "widget");
+    const cleanLines = lines.map(stripAnsi);
+    node.textContent = `${key}\n${cleanLines.join("\n")}`;
     elements.widgetArea.append(node);
   }
 }
@@ -655,6 +1498,7 @@ function renderContent(parent, content) {
 }
 
 function messageTitle(message) {
+  if (message.title) return message.title;
   if (message.role === "toolResult") return `tool result: ${message.toolName || "unknown"}`;
   if (message.role === "bashExecution") return `bash: ${message.command || ""}`;
   return message.role || "message";
@@ -663,7 +1507,7 @@ function messageTitle(message) {
 function appendMessage(message, { streaming = false } = {}) {
   const role = String(message.role || "message");
   const safeRole = role.replace(/[^a-z0-9_-]/gi, "");
-  const bubble = make("article", `message ${safeRole}${streaming ? " streaming" : ""}`);
+  const bubble = make("article", `message ${safeRole}${message.level ? ` ${message.level}` : ""}${streaming ? " streaming" : ""}`);
   const isCollapsibleOutput = !streaming && (message.role === "toolResult" || message.role === "bashExecution");
 
   const header = make(isCollapsibleOutput ? "summary" : "div", "message-header");
@@ -692,15 +1536,89 @@ function appendMessage(message, { streaming = false } = {}) {
   return { bubble, body };
 }
 
-function scrollChatToBottom() {
+function renderAllMessages({ preserveScroll = false } = {}) {
+  const shouldFollow = !preserveScroll && (autoFollowChat || isChatNearBottom());
+  const previousScrollTop = elements.chat.scrollTop;
+  elements.chat.replaceChildren();
+  for (const message of latestMessages) appendMessage(message);
+  for (const message of transientMessages) appendMessage(message);
+  if (shouldFollow) scrollChatToBottom({ force: true });
+  else {
+    elements.chat.scrollTop = Math.min(previousScrollTop, elements.chat.scrollHeight);
+    autoFollowChat = isChatNearBottom();
+    updateJumpToLatestButton();
+  }
+}
+
+function addTransientMessage({ role = "notice", title, content, level = "info" }) {
+  transientMessages.push({
+    role,
+    title,
+    level,
+    content,
+    timestamp: Date.now(),
+  });
+  if (transientMessages.length > 80) transientMessages.splice(0, transientMessages.length - 80);
+  renderAllMessages();
+}
+
+function isChatNearBottom() {
+  const remaining = elements.chat.scrollHeight - elements.chat.scrollTop - elements.chat.clientHeight;
+  return remaining <= CHAT_BOTTOM_THRESHOLD_PX;
+}
+
+function updateJumpToLatestButton() {
+  elements.jumpToLatestButton.hidden = autoFollowChat || isChatNearBottom();
+}
+
+function scrollChatToBottom({ force = false } = {}) {
+  if (!force && !autoFollowChat) {
+    updateJumpToLatestButton();
+    return;
+  }
   elements.chat.scrollTop = elements.chat.scrollHeight;
+  autoFollowChat = true;
+  updateJumpToLatestButton();
+}
+
+function jumpToLatest() {
+  scrollChatToBottom({ force: true });
+}
+
+function syncMobileChatToBottomForInput() {
+  if (!isMobileView()) return;
+  autoFollowChat = true;
+  scrollChatToBottom({ force: true });
+  requestAnimationFrame(() => scrollChatToBottom({ force: true }));
+  setTimeout(() => scrollChatToBottom({ force: true }), 140);
+  setTimeout(() => scrollChatToBottom({ force: true }), 360);
+}
+
+function showComposerButtonTooltip(button) {
+  if (!button) return;
+  button.classList.add("tooltip-open");
+  button.focus({ preventScroll: true });
+  clearTimeout(button._tooltipTimer);
+  button._tooltipTimer = setTimeout(() => button.classList.remove("tooltip-open"), 3200);
+}
+
+function sendPromptFromModeButton(kind, button) {
+  if (!elements.promptInput.value.trim()) {
+    showComposerButtonTooltip(button);
+    return;
+  }
+  sendPrompt(kind);
+}
+
+function shouldSendPromptFromEnter(event) {
+  if (event.key !== "Enter" || event.shiftKey || event.isComposing) return false;
+  if (event.ctrlKey || event.metaKey) return true;
+  return !isMobileView();
 }
 
 function renderMessages(messages) {
   latestMessages = messages || [];
-  elements.chat.replaceChildren();
-  for (const message of latestMessages) appendMessage(message);
-  scrollChatToBottom();
+  renderAllMessages();
   renderFooter();
 }
 
@@ -803,6 +1721,55 @@ async function refreshWorkspace() {
   renderFooter();
 }
 
+function renderNetworkStatus() {
+  const network = latestNetwork;
+  const open = !!network?.open;
+  const opening = !!network?.opening;
+  const localUrl = network?.localUrl || `${window.location.origin}/`;
+  const networkUrls = Array.isArray(network?.networkUrls) ? network.networkUrls : [];
+  elements.networkStatus.className = `network-status ${opening ? "opening" : open ? "open" : "closed"}`;
+  elements.networkStatus.title = open
+    ? `Reachable on local network${networkUrls.length ? `:\n${networkUrls.join("\n")}` : " (no LAN address detected)"}`
+    : "Only reachable from this machine";
+
+  const heading = make("div", "network-status-heading", opening ? "Opening to local network…" : open ? "Open to local network" : "Closed · local only");
+  const detail = make("div", "network-status-detail", open ? "Use one of these URLs from a trusted device:" : "Only this machine can connect until you open the network listener.");
+  const list = make("div", "network-url-list");
+
+  const addUrl = (label, url) => {
+    if (!url) return;
+    const row = make("div", "network-status-url-row");
+    const labelNode = make("span", "network-status-url-label", label);
+    const link = make("a", "network-status-url", url);
+    link.href = url;
+    link.target = "_blank";
+    link.rel = "noreferrer";
+    row.append(labelNode, link);
+    list.append(row);
+  };
+
+  addUrl("Local", localUrl);
+  if (open) {
+    for (const url of networkUrls) addUrl("LAN", url);
+    if (networkUrls.length === 0) list.append(make("div", "network-status-empty", "No LAN address detected."));
+  }
+
+  elements.networkStatus.replaceChildren(heading, detail, list);
+  elements.openNetworkButton.disabled = opening || open;
+  elements.openNetworkButton.textContent = opening ? "Opening…" : open ? "Network open" : "Open to network";
+}
+
+async function refreshNetworkStatus() {
+  try {
+    const response = await api("/api/network", { scoped: false });
+    latestNetwork = response.data || null;
+  } catch {
+    const health = await api("/api/health", { scoped: false });
+    latestNetwork = health.network || { open: false, opening: false, localUrl: window.location.origin };
+  }
+  renderNetworkStatus();
+}
+
 async function refreshFooterData() {
   await Promise.allSettled([refreshStats(), refreshWorkspace()]);
 }
@@ -818,6 +1785,18 @@ async function refreshMessages() {
 async function refreshModels() {
   const response = await api("/api/models");
   const models = response.data?.models || [];
+  availableModels = models;
+  try {
+    const scopedResponse = await api("/api/scoped-models");
+    footerScopedModels = scopedResponse.data?.models || [];
+    footerScopedModelPatterns = scopedResponse.data?.patterns || [];
+    footerScopedModelSource = scopedResponse.data?.source || "none";
+  } catch (error) {
+    footerScopedModels = [];
+    footerScopedModelPatterns = [];
+    footerScopedModelSource = "none";
+    addEvent(`failed to load scoped models: ${error.message}`, "warn");
+  }
   elements.modelSelect.replaceChildren();
   for (const model of models) {
     const option = document.createElement("option");
@@ -826,6 +1805,7 @@ async function refreshModels() {
     elements.modelSelect.append(option);
   }
   syncModelSelectToState();
+  renderFooter();
 }
 
 function syncModelSelectToState() {
@@ -999,39 +1979,92 @@ async function refreshCommands() {
 }
 
 async function refreshAll() {
-  const results = await Promise.allSettled([refreshState(), refreshMessages(), refreshModels(), refreshCommands(), refreshStats(), refreshWorkspace()]);
+  const results = await Promise.allSettled([refreshState(), refreshMessages(), refreshModels(), refreshCommands(), refreshStats(), refreshWorkspace(), refreshNetworkStatus()]);
   for (const result of results) {
     if (result.status === "rejected") addEvent(result.reason.message || String(result.reason), "error");
   }
 }
 
+async function openToNetwork() {
+  if (latestNetwork?.open) return;
+  if (!confirm("Open Pi Web UI to your local network?\n\nThe Web UI has no authentication and can control Pi/tools. Only do this on a trusted LAN.")) return;
+
+  elements.openNetworkButton.disabled = true;
+  elements.openNetworkButton.textContent = "Opening…";
+  try {
+    await api("/api/network/open", { method: "POST", body: {}, scoped: false });
+    addEvent("opening webui to local network", "warn");
+    for (let attempt = 0; attempt < 20; attempt++) {
+      await delay(350);
+      try {
+        await refreshNetworkStatus();
+        if (latestNetwork?.open) {
+          const url = latestNetwork.networkUrls?.[0];
+          addEvent(`webui open to local network${url ? `: ${url}` : ""}`, "warn");
+          return;
+        }
+      } catch {
+        // The listener briefly drops while rebinding; retry.
+      }
+    }
+    await refreshNetworkStatus();
+  } catch (error) {
+    addEvent(error.message, "error");
+  } finally {
+    renderNetworkStatus();
+  }
+}
+
 async function sendPrompt(kind = "prompt") {
   const message = elements.promptInput.value.trim();
   if (!message) return;
 
+  autoFollowChat = true;
+  updateJumpToLatestButton();
+  setComposerActionsOpen(false);
+
   try {
+    let response;
     if (kind === "steer") {
-      await api("/api/steer", { method: "POST", body: { message } });
+      response = await api("/api/steer", { method: "POST", body: { message } });
     } else if (kind === "follow-up") {
-      await api("/api/follow-up", { method: "POST", body: { message } });
+      response = await api("/api/follow-up", { method: "POST", body: { message } });
     } else {
       const body = { message };
       if (currentState?.isStreaming) body.streamingBehavior = elements.busyBehavior.value || "followUp";
-      await api("/api/prompt", { method: "POST", body });
+      response = await api("/api/prompt", { method: "POST", body });
+    }
+    if (response?.command === "native_slash_command" && response.data?.copyText) {
+      try {
+        await navigator.clipboard.writeText(response.data.copyText);
+      } catch (error) {
+        response.data.message = `${response.data.message || "Copy requested, but clipboard access failed."}\n\nClipboard access failed: ${error.message}\n\n${response.data.copyText}`;
+        response.data.level = "warn";
+      }
+    }
+    if (response?.command === "native_slash_command" && response.data?.message) {
+      addTransientMessage({ role: "native", title: message.split(/\s+/, 1)[0], content: response.data.message, level: response.data.level || "info" });
     }
     elements.promptInput.value = "";
+    resizePromptInput();
     hideCommandSuggestions();
     scheduleRefreshState();
   } catch (error) {
     addEvent(error.message, "error");
+    addTransientMessage({ role: "error", title: message.startsWith("/") ? message.split(/\s+/, 1)[0] : "error", content: error.message, level: "error" });
   }
 }
 
 function handleExtensionUiRequest(request) {
+  request.tabId ||= activeTabId;
   switch (request.method) {
-    case "notify":
-      addEvent(request.message || "notification", request.notifyType === "error" ? "error" : request.notifyType === "warning" ? "warn" : "info");
+    case "notify": {
+      const level = request.notifyType === "error" ? "error" : request.notifyType === "warning" ? "warn" : "info";
+      const message = request.message || "notification";
+      addEvent(message, level);
+      addTransientMessage({ role: "extension", title: "extension output", content: message, level });
       return;
+    }
     case "setStatus":
       if (request.statusText) statusEntries.set(request.statusKey || "extension", request.statusText);
       else statusEntries.delete(request.statusKey || "extension");
@@ -1047,6 +2080,7 @@ function handleExtensionUiRequest(request) {
       return;
     case "set_editor_text":
       elements.promptInput.value = request.text || "";
+      resizePromptInput();
       elements.promptInput.focus();
       renderCommandSuggestions();
       return;
@@ -1063,8 +2097,9 @@ function handleExtensionUiRequest(request) {
 }
 
 async function sendDialogResponse(payload) {
+  const { tabId = activeTabId, ...body } = payload;
   try {
-    await api("/api/extension-ui-response", { method: "POST", body: payload });
+    await api("/api/extension-ui-response", { method: "POST", body, tabId });
   } catch (error) {
     addEvent(error.message, "error");
   } finally {
@@ -1092,36 +2127,36 @@ function showNextDialog() {
   elements.dialogBody.replaceChildren();
   elements.dialogActions.replaceChildren();
 
-  const cancel = () => sendDialogResponse({ type: "extension_ui_response", id: request.id, cancelled: true });
+  const cancel = () => sendDialogResponse({ type: "extension_ui_response", id: request.id, cancelled: true, tabId: request.tabId });
 
   if (request.method === "select") {
     const options = make("div", "dialog-options");
     for (const option of request.options || []) {
       const button = make("button", undefined, String(option));
       button.type = "button";
-      button.addEventListener("click", () => sendDialogResponse({ type: "extension_ui_response", id: request.id, value: String(option) }));
+      button.addEventListener("click", () => sendDialogResponse({ type: "extension_ui_response", id: request.id, value: String(option), tabId: request.tabId }));
       options.append(button);
     }
     elements.dialogBody.append(options);
     addDialogButton("Cancel", cancel);
   } else if (request.method === "confirm") {
     addDialogButton("Cancel", cancel);
-    addDialogButton("No", () => sendDialogResponse({ type: "extension_ui_response", id: request.id, confirmed: false }));
-    addDialogButton("Yes", () => sendDialogResponse({ type: "extension_ui_response", id: request.id, confirmed: true }), "primary");
+    addDialogButton("No", () => sendDialogResponse({ type: "extension_ui_response", id: request.id, confirmed: false, tabId: request.tabId }));
+    addDialogButton("Yes", () => sendDialogResponse({ type: "extension_ui_response", id: request.id, confirmed: true, tabId: request.tabId }), "primary");
   } else if (request.method === "input") {
     const input = make("input", "dialog-input");
     input.value = request.prefill || "";
     input.placeholder = request.placeholder || "";
     elements.dialogBody.append(input);
     addDialogButton("Cancel", cancel);
-    addDialogButton("Submit", () => sendDialogResponse({ type: "extension_ui_response", id: request.id, value: input.value }), "primary");
+    addDialogButton("Submit", () => sendDialogResponse({ type: "extension_ui_response", id: request.id, value: input.value, tabId: request.tabId }), "primary");
     setTimeout(() => input.focus(), 0);
   } else if (request.method === "editor") {
     const textarea = make("textarea", "dialog-editor");
     textarea.value = request.prefill || "";
     elements.dialogBody.append(textarea);
     addDialogButton("Cancel", cancel);
-    addDialogButton("Submit", () => sendDialogResponse({ type: "extension_ui_response", id: request.id, value: textarea.value }), "primary");
+    addDialogButton("Submit", () => sendDialogResponse({ type: "extension_ui_response", id: request.id, value: textarea.value, tabId: request.tabId }), "primary");
     setTimeout(() => textarea.focus(), 0);
   }
 
@@ -1131,16 +2166,43 @@ function showNextDialog() {
 function handleEvent(event) {
   switch (event.type) {
     case "webui_connected":
-      addEvent(`connected to webui for ${event.cwd}`);
+      addEvent(`connected to ${event.tabTitle || "terminal"} for ${event.cwd}`);
+      refreshTabs().catch((error) => addEvent(error.message, "error"));
       break;
     case "pi_process_start":
       addEvent(`started pi rpc pid ${event.pid}`);
+      refreshTabs().catch((error) => addEvent(error.message, "error"));
+      break;
+    case "webui_tab_restarting":
+      addEvent(`restarting ${event.tabTitle || "terminal"} in ${event.cwd}`);
+      break;
+    case "webui_tab_reloading":
+      addEvent(`reloading ${event.tabTitle || "terminal"} native Pi resources`);
+      addTransientMessage({ role: "native", title: "/reload", content: `Reloading ${event.tabTitle || "terminal"} native Pi resources…`, level: "info" });
+      break;
+    case "webui_tab_reloaded":
+      addEvent(`${event.tabTitle || "terminal"} reloaded`);
+      addTransientMessage({ role: "native", title: "/reload", content: `${event.tabTitle || "terminal"} reloaded. Keybindings, extensions, skills, prompts, and themes were refreshed by restarting the RPC tab${event.sessionFile ? ` and resuming ${event.sessionFile}` : ""}.`, level: "info" });
+      refreshTabs().catch((error) => addEvent(error.message, "error"));
+      setTimeout(() => refreshAll().catch((error) => addEvent(error.message, "error")), 500);
+      break;
+    case "webui_cwd_changed":
+      addEvent(`${event.tabTitle || "terminal"} cwd changed to ${event.cwd}`);
+      refreshTabs().catch((error) => addEvent(error.message, "error"));
+      scheduleRefreshFooter();
+      break;
+    case "webui_network_rebinding":
+      addEvent(`webui network listener rebinding on ${event.host}:${event.port}; event stream will reconnect`, "warn");
+      latestNetwork = { ...(latestNetwork || {}), opening: true };
+      renderNetworkStatus();
       break;
     case "pi_process_exit":
       addEvent(`pi rpc exited (${event.code ?? event.signal ?? "unknown"})`, "error");
+      refreshTabs().catch((error) => addEvent(error.message, "error"));
       break;
     case "pi_process_error":
       addEvent(event.error || "pi rpc process error", "error");
+      refreshTabs().catch((error) => addEvent(error.message, "error"));
       break;
     case "pi_stderr":
       addEvent(event.text.trim(), "warn");
@@ -1216,7 +2278,8 @@ function handleEvent(event) {
 
 function connectEvents() {
   eventSource?.close();
-  eventSource = new EventSource("/api/events");
+  if (!activeTabId) return;
+  eventSource = new EventSource(`/api/events?tab=${encodeURIComponent(activeTabId)}`);
   eventSource.onmessage = (message) => {
     try {
       handleEvent(JSON.parse(message.data));
@@ -1231,9 +2294,19 @@ elements.composer.addEventListener("submit", (event) => {
   event.preventDefault();
   sendPrompt("prompt");
 });
-elements.steerButton.addEventListener("click", () => sendPrompt("steer"));
-elements.followUpButton.addEventListener("click", () => sendPrompt("follow-up"));
-elements.gitWorkflowButton.addEventListener("click", startGitWorkflow);
+elements.composerActionsButton.addEventListener("click", () => {
+  setComposerActionsOpen(!document.body.classList.contains("composer-actions-open"));
+});
+elements.steerButton.addEventListener("click", () => sendPromptFromModeButton("steer", elements.steerButton));
+elements.followUpButton.addEventListener("click", () => sendPromptFromModeButton("follow-up", elements.followUpButton));
+elements.terminalTabsToggleButton.addEventListener("click", () => {
+  setMobileTabsExpanded(!document.body.classList.contains("mobile-tabs-expanded"));
+});
+elements.newTabButton.addEventListener("click", createTerminalTab);
+elements.gitWorkflowButton.addEventListener("click", () => {
+  setComposerActionsOpen(false);
+  startGitWorkflow();
+});
 elements.gitWorkflowCancelButton.addEventListener("click", cancelGitWorkflow);
 elements.abortButton.addEventListener("click", async () => {
   try {
@@ -1243,6 +2316,7 @@ elements.abortButton.addEventListener("click", async () => {
   }
 });
 elements.newSessionButton.addEventListener("click", async () => {
+  setComposerActionsOpen(false);
   if (!confirm("Start a new Pi session?")) return;
   try {
     await api("/api/new-session", { method: "POST", body: {} });
@@ -1252,6 +2326,7 @@ elements.newSessionButton.addEventListener("click", async () => {
   }
 });
 elements.compactButton.addEventListener("click", async () => {
+  setComposerActionsOpen(false);
   try {
     elements.compactButton.disabled = true;
     elements.compactButton.textContent = "Compacting…";
@@ -1285,15 +2360,64 @@ elements.setThinkingButton.addEventListener("click", async () => {
     addEvent(error.message, "error");
   }
 });
+elements.openNetworkButton.addEventListener("click", openToNetwork);
 elements.toggleSidePanelButton.addEventListener("click", () => {
   setSidePanelCollapsed(true);
 });
 elements.sidePanelExpandButton.addEventListener("click", () => {
-  setSidePanelCollapsed(false);
+  setSidePanelCollapsed(false, { focusPanel: true });
+});
+elements.sidePanelBackdrop.addEventListener("click", () => {
+  setSidePanelCollapsed(true);
+});
+elements.jumpToLatestButton.addEventListener("click", jumpToLatest);
+elements.chat.addEventListener("scroll", () => {
+  autoFollowChat = isChatNearBottom();
+  updateJumpToLatestButton();
+}, { passive: true });
+document.addEventListener("pointerdown", (event) => {
+  if (document.body.classList.contains("composer-actions-open") && !elements.composer.contains(event.target)) {
+    setComposerActionsOpen(false);
+  }
+  if (document.body.classList.contains("mobile-tabs-expanded") && !elements.tabBar.contains(event.target) && !elements.terminalTabsToggleButton.contains(event.target)) {
+    setMobileTabsExpanded(false);
+  }
+  if (footerModelPickerOpen && !elements.statusBar.contains(event.target)) {
+    setFooterModelPickerOpen(false);
+  }
+}, { passive: true });
+window.addEventListener("keydown", (event) => {
+  if (event.key !== "Escape") return;
+  if (document.body.classList.contains("composer-actions-open")) {
+    setComposerActionsOpen(false);
+    return;
+  }
+  if (document.body.classList.contains("mobile-tabs-expanded")) {
+    setMobileTabsExpanded(false);
+    return;
+  }
+  if (footerModelPickerOpen) {
+    setFooterModelPickerOpen(false);
+    return;
+  }
+  if (isMobileView() && !document.body.classList.contains("side-panel-collapsed")) {
+    setSidePanelCollapsed(true);
+  }
+});
+
+elements.pathPickerAddFastPickButton.addEventListener("click", () => addCurrentFastPick().catch((error) => addEvent(error.message, "error")));
+elements.pathPickerCancelButton.addEventListener("click", () => closePathPicker(null));
+elements.pathPickerChooseButton.addEventListener("click", () => closePathPicker(pathPickerState?.cwd || null));
+elements.pathPickerDialog.addEventListener("cancel", (event) => {
+  event.preventDefault();
+  closePathPicker(null);
+});
+elements.pathPickerDialog.addEventListener("close", () => {
+  if (pathPickerState) closePathPicker(null);
 });
 
 elements.promptInput.addEventListener("keydown", (event) => {
-  if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+  if (shouldSendPromptFromEnter(event)) {
     event.preventDefault();
     hideCommandSuggestions();
     sendPrompt("prompt");
@@ -1323,8 +2447,19 @@ elements.promptInput.addEventListener("keydown", (event) => {
   }
 });
 
-elements.promptInput.addEventListener("input", () => renderCommandSuggestions());
-elements.promptInput.addEventListener("click", () => renderCommandSuggestions());
+elements.promptInput.addEventListener("input", () => {
+  resizePromptInput();
+  renderCommandSuggestions();
+});
+elements.promptInput.addEventListener("focus", () => {
+  syncMobileChatToBottomForInput();
+  setTimeout(updateVisualViewportVars, 0);
+});
+elements.promptInput.addEventListener("click", () => {
+  updateVisualViewportVars();
+  syncMobileChatToBottomForInput();
+  renderCommandSuggestions();
+});
 elements.promptInput.addEventListener("keyup", (event) => {
   if (["ArrowDown", "ArrowUp", "Enter", "Tab", "Escape"].includes(event.key)) return;
   renderCommandSuggestions({ keepIndex: true });
@@ -1332,9 +2467,15 @@ elements.promptInput.addEventListener("keyup", (event) => {
 elements.promptInput.addEventListener("blur", () => {
   setTimeout(() => {
     if (document.activeElement !== elements.promptInput) hideCommandSuggestions();
+    updateVisualViewportVars();
   }, 120);
 });
 
+resizePromptInput();
+updateComposerModeButtons();
+installViewportHandlers();
+initializeFastPicks().catch((error) => addEvent(`failed to initialize path fast picks: ${error.message}`, "error"));
 restoreSidePanelState();
-connectEvents();
-refreshAll();
+bindMobileViewChanges();
+registerPwaServiceWorker();
+initializeTabs().catch((error) => addEvent(error.message, "error"));