@firstpick/pi-package-webui 0.2.5 → 0.2.6

package/README.md

@@ -154,7 +154,7 @@ Optional companions:
 - `@firstpick/pi-extension-setup-skills` — TUI `/skills` setup command alongside WebUI-native skill toggles.
 - `@firstpick/pi-extension-todo-progress` — todo-progress rendering.
 - `@firstpick/pi-extension-tools` — TUI `/tools` active-tool manager alongside WebUI-native tool toggles.
-- `@firstpick/pi-extension-git-footer-status` — richer git/footer status.
+- `@firstpick/pi-extension-git-footer-status` — richer extension-owned git/footer status, including the structured Web UI footer payload.
 - `@firstpick/pi-extension-stats` — stats commands and status data.
 - `@firstpick/pi-themes-bundle` — Web UI and Pi theme resources.
 

package/bin/pi-webui.mjs

@@ -1592,34 +1592,11 @@ async function getPathSuggestionData(tab, rawQuery) {
 }
 
 async function getWorkspaceInfo(cwd, startedAt) {
-  const info = {
+  return {
     cwd,
     displayCwd: displayPath(cwd),
     uptimeMs: Math.max(0, Date.now() - Date.parse(startedAt)),
-    git: { isRepo: false },
-  };
-
-  const inside = await runCommand("git", ["rev-parse", "--is-inside-work-tree"], { cwd, timeoutMs: 1200 });
-  if (inside.exitCode !== 0 || inside.stdout.trim() !== "true") return info;
-
-  const [branch, status] = await Promise.all([
-    runCommand("git", ["branch", "--show-current"], { cwd, timeoutMs: 1200 }),
-    runCommand("git", ["status", "--porcelain=v1", "--branch"], { cwd, timeoutMs: 1800 }),
-  ]);
-  const lines = status.stdout.split(/\r?\n/).filter(Boolean);
-  const branchLine = lines.find((line) => line.startsWith("## "));
-  const fileLines = lines.filter((line) => !line.startsWith("## "));
-  const untracked = fileLines.filter((line) => line.startsWith("??")).length;
-  const changed = fileLines.length - untracked;
-
-  info.git = {
-    isRepo: true,
-    branch: branch.stdout.trim() || branchLine?.replace(/^##\s+/, "").split("...")[0] || "detached",
-    changed,
-    untracked,
-    branchStatus: branchLine,
   };
-  return info;
 }
 
 let activeGitWorkflowProcess = null;
@@ -2206,6 +2183,39 @@ function pendingExtensionUiMap(tab) {
   return tab.pendingExtensionUiRequests;
 }
 
+function extensionStatusMap(tab) {
+  if (!tab.extensionStatuses) tab.extensionStatuses = new Map();
+  return tab.extensionStatuses;
+}
+
+function rememberExtensionStatusEvent(tab, event) {
+  if (event?.type !== "extension_ui_request" || event.method !== "setStatus" || !event.statusKey) return;
+  const statuses = extensionStatusMap(tab);
+  if (event.statusText) statuses.set(String(event.statusKey), String(event.statusText));
+  else statuses.delete(String(event.statusKey));
+}
+
+function clearExtensionStatuses(tab) {
+  tab?.extensionStatuses?.clear();
+}
+
+function replayExtensionStatuses(tab, res) {
+  for (const [statusKey, statusText] of extensionStatusMap(tab)) {
+    sendSse(res, {
+      type: "extension_ui_request",
+      id: randomUUID(),
+      method: "setStatus",
+      statusKey,
+      statusText,
+      tabId: tab.id,
+      tabTitle: tab.title,
+      replayed: true,
+      tabActivity: tabActivitySnapshot(tab),
+      pendingExtensionUiRequestCount: pendingExtensionUiRequests(tab).length,
+    });
+  }
+}
+
 function bashQueueForTab(tab) {
   if (!tab.bashQueue) tab.bashQueue = [];
   return tab.bashQueue;
@@ -2499,8 +2509,13 @@ function attachRpcToTab(tab, rpc) {
     if (resolveWebuiHelperResponse(tab, event) || resolveWebuiHelperRpcResponse(tab, event)) return;
     updateTabActivityFromEvent(tab, event);
     let scopedEvent = { ...event, tabId: tab.id, tabTitle: tab.title, tabActivity: tabActivitySnapshot(tab) };
-    if (event?.type === "pi_process_exit" || event?.type === "pi_process_error") clearPendingExtensionUiRequests(tab);
-    else trackPendingExtensionUiRequest(tab, scopedEvent);
+    if (event?.type === "pi_process_exit" || event?.type === "pi_process_error") {
+      clearPendingExtensionUiRequests(tab);
+      clearExtensionStatuses(tab);
+    } else {
+      rememberExtensionStatusEvent(tab, scopedEvent);
+      trackPendingExtensionUiRequest(tab, scopedEvent);
+    }
     scopedEvent = { ...scopedEvent, tabActivity: tabActivitySnapshot(tab), pendingExtensionUiRequestCount: pendingExtensionUiRequests(tab).length };
     recordEvent(scopedEvent);
     for (const client of tab.sseClients) sendSse(client, scopedEvent);
@@ -2534,6 +2549,7 @@ async function createTab({ id: requestedId, index, title, titleSource, conversat
     pendingThinkingLevel: undefined,
     activity: createTabActivity(createdAt),
     pendingExtensionUiRequests: new Map(),
+    extensionStatuses: new Map(),
     webuiHelperRequests: new Map(),
     webuiHelperResponseIds: new Set(),
     bashQueue: [],
@@ -2732,6 +2748,7 @@ async function updateTabCwd(id, cwd) {
   forgetTabState(tab);
   resetTabActivity(tab);
   clearPendingExtensionUiRequests(tab);
+  clearExtensionStatuses(tab);
   const rpc = new PiRpcProcess({ ...piCommand, cwd: tab.cwd });
   attachRpcToTab(tab, rpc);
   rpc.start();
@@ -2766,6 +2783,7 @@ async function restartTabRpc(tab, reason = "reload") {
 
   resetTabActivity(tab);
   clearPendingExtensionUiRequests(tab);
+  clearExtensionStatuses(tab);
   const rpc = new PiRpcProcess({ ...piCommand, cwd: tab.cwd });
   attachRpcToTab(tab, rpc);
   rpc.start();
@@ -3945,6 +3963,7 @@ const server = createServer(async (req, res) => {
         tabActivity: tabActivitySnapshot(tab),
         pendingExtensionUiRequestCount: pendingExtensionUiRequests(tab).length,
       });
+      replayExtensionStatuses(tab, res);
       replayPendingExtensionUiRequests(tab, res);
       const keepAlive = setInterval(() => res.write(": keepalive\n\n"), 15000);
       req.on("close", () => {
@@ -4288,6 +4307,7 @@ const server = createServer(async (req, res) => {
           forgetTabState(tab);
           rememberTabState(tab, response.data);
           clearPendingExtensionUiRequests(tab);
+          clearExtensionStatuses(tab);
         }
         sendJson(res, response.success === false ? 400 : 200, responseWithTab(response, tab));
         return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firstpick/pi-package-webui",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "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

@@ -207,9 +207,6 @@ let mobileFooterExpanded = false;
 let footerModelPickerOpen = false;
 let publishMenuOpen = false;
 let maxVisualViewportHeight = 0;
-let currentRunStartedAt = null;
-let currentRunStreamChars = 0;
-let latestTokPerSecond = null;
 let abortRequestInFlight = false;
 let userBashByTab = new Map();
 let userBashQueuesByTab = new Map();
@@ -234,6 +231,10 @@ 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 GIT_FOOTER_WEBUI_STATUS_KEY = "git-footer-webui";
+const GIT_FOOTER_WEBUI_PAYLOAD_TYPE = "firstpick.git-footer-status.footer";
+const GIT_FOOTER_WEBUI_PAYLOAD_VERSION = 1;
+const GIT_FOOTER_WEBUI_PAYLOAD_CACHE_KEY = "pi-webui-git-footer-webui-payload-cache";
 const LAST_USER_PROMPT_STORAGE_KEY = "pi-webui-last-user-prompts";
 const PROMPT_HISTORY_STORAGE_KEY = "pi-webui-prompt-history";
 const PROMPT_HISTORY_LIMIT_PER_TAB = 50;
@@ -343,8 +344,8 @@ const OPTIONAL_FEATURES = [
     id: "gitFooterStatus",
     label: "Git footer status",
     packageName: "@firstpick/pi-extension-git-footer-status",
-    capabilityLabel: "/git-footer-refresh or git-footer status event",
-    description: "Enhanced Pi footer/status telemetry when loaded by Pi.",
+    capabilityLabel: "/git-footer-refresh or git-footer-webui status event",
+    description: "Extension-owned enhanced footer/status telemetry when loaded by Pi.",
   },
   {
     id: "statsCommand",
@@ -375,6 +376,7 @@ const OPTIONAL_COMMAND_FEATURES = new Map([
 const HIDDEN_COMMAND_NAMES = new Set(["webui-tree-navigate", "webui-helper"]);
 const NATIVE_SELECTOR_COMMANDS = new Set(["model", "settings", "theme", "fork", "clone", "resume", "tree", "login", "logout", "scoped-models", "tools", "skills"]);
 const optionalFeatureInstallInProgress = new Set();
+const gitFooterPayloadRefreshInFlightByTab = new Set();
 
 function createGitWorkflowState() {
   return {
@@ -974,6 +976,92 @@ async function copyText(text) {
   if (!copied) throw new Error("Clipboard copy failed");
 }
 
+function messageCopyFallbackText(body) {
+  return String(body?.innerText || body?.textContent || "").replace(/\n{3,}/g, "\n\n").trimEnd();
+}
+
+function messageCopyText(message, body = null) {
+  if (!message) return messageCopyFallbackText(body);
+  if (message.role === "assistant") {
+    const content = message.content === undefined || message.content === null ? "" : textFromContent(message.content);
+    const text = stripTodoProgressLines(content).trimEnd();
+    return text || messageCopyFallbackText(body);
+  }
+  if (message.role === "bashExecution") return stripAnsi([`$ ${message.command || ""}`, message.output || ""].filter(Boolean).join("\n\n")).trimEnd();
+  if (message.role === "compactionSummary") return String(message.summary || "Context was compacted.").trimEnd();
+  if (message.role === "toolResult") {
+    const content = message.content === undefined || message.content === null ? "" : textFromContent(message.content);
+    return stripAnsi(content).trimEnd() || messageCopyFallbackText(body);
+  }
+  if (message.role === "toolExecution") {
+    const tool = normalizeToolExecution(message);
+    const hasArgs = tool.args && Object.keys(tool.args).length > 0;
+    const sections = [`tool: ${tool.name}`];
+    if (hasArgs) sections.push(`arguments:\n${JSON.stringify(tool.args, null, 2)}`);
+    if (tool.text) sections.push(`${tool.isPartial ? "live output" : "output"}:\n${tool.text}`);
+    if (tool.details?.fullOutputPath) sections.push(`full output: ${tool.details.fullOutputPath}`);
+    return sections.join("\n\n").trimEnd() || messageCopyFallbackText(body);
+  }
+  if (message.role === "thinking") return visibleThinkingText(message.thinking || textFromContent(message.content)).trimEnd() || messageCopyFallbackText(body);
+  if (message.role === "toolCall") return JSON.stringify(message.arguments ?? message.content ?? {}, null, 2);
+  if (message.role === "assistantEvent") {
+    return (typeof message.content === "string" ? message.content : JSON.stringify(message.content ?? {}, null, 2)).trimEnd();
+  }
+  const content = message.content === undefined || message.content === null ? "" : textFromContent(message.content);
+  return stripAnsi(content).trimEnd() || messageCopyFallbackText(body);
+}
+
+function setMessageCopyButtonState(button, copied) {
+  clearTimeout(button._messageCopyResetTimer);
+  button.classList.toggle("copied", copied);
+  const icon = button.querySelector(".message-copy-icon");
+  if (icon) icon.textContent = copied ? "✓" : "⧉";
+  button.title = copied ? "Copied" : "Copy message";
+  button.setAttribute("aria-label", button.title);
+  if (copied) {
+    button._messageCopyResetTimer = setTimeout(() => setMessageCopyButtonState(button, false), 1400);
+  }
+}
+
+async function copyMessageBubble(button) {
+  const bubble = button.closest(".message");
+  const body = bubble?._copyBody || bubble?.querySelector(":scope > .message-body, :scope > .message-collapse > .message-body");
+  const text = messageCopyText(bubble?._copyMessage, body);
+  if (!text.trim()) {
+    addEvent("message has no text to copy", "warn");
+    return;
+  }
+  button.disabled = true;
+  try {
+    await copyText(text);
+    setMessageCopyButtonState(button, true);
+  } catch (error) {
+    addEvent(`message copy failed: ${error.message || String(error)}`, "warn");
+  } finally {
+    button.disabled = false;
+  }
+}
+
+function attachMessageCopyButton(bubble, message, body) {
+  if (!bubble || !body) return null;
+  bubble._copyMessage = message;
+  bubble._copyBody = body;
+  const existing = bubble.querySelector(":scope > .message-copy-button");
+  if (existing) return existing;
+  const button = make("button", "message-copy-button");
+  button.type = "button";
+  button.append(make("span", "message-copy-icon", "⧉"));
+  setMessageCopyButtonState(button, false);
+  button.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    copyMessageBubble(button);
+  });
+  bubble.classList.add("has-copy-action");
+  bubble.append(button);
+  return button;
+}
+
 function triggerNativeDownload(download) {
   const url = String(download?.url || "").trim();
   if (!url) return false;
@@ -1797,6 +1885,10 @@ function setOptionalFeatureDisabled(featureId, disabled) {
   if (!OPTIONAL_FEATURE_BY_ID.has(featureId)) return;
   if (disabled) disabledOptionalFeatures.add(featureId);
   else disabledOptionalFeatures.delete(featureId);
+  if (featureId === "gitFooterStatus") {
+    statusEntries.delete(GIT_FOOTER_WEBUI_STATUS_KEY);
+    clearGitFooterWebuiPayloadCache();
+  }
   storeDisabledOptionalFeatures();
   renderOptionalFeatureDependentDisplays();
   const tabContext = activeTabContext();
@@ -2412,9 +2504,6 @@ function resetActiveTabUi() {
   latestStats = null;
   latestWorkspace = null;
   latestMessages = [];
-  currentRunStartedAt = null;
-  currentRunStreamChars = 0;
-  latestTokPerSecond = null;
   clearRunIndicatorActivity({ render: false });
   statusEntries.clear();
   widgets.clear();
@@ -3239,7 +3328,8 @@ function formatStatusEntry(key, value) {
   const cleanKey = cleanStatusText(key);
   const cleanValue = cleanStatusText(value);
   if (!cleanValue) return "";
-  if (cleanKey === "git-footer" && !isOptionalFeatureEnabled("gitFooterStatus")) return "";
+  if ((cleanKey === "git-footer" || cleanKey === GIT_FOOTER_WEBUI_STATUS_KEY) && !isOptionalFeatureEnabled("gitFooterStatus")) return "";
+  if (cleanKey === GIT_FOOTER_WEBUI_STATUS_KEY) return "";
   if (cleanKey === "plan-mode") return `Plan: ${cleanValue}`;
   if (cleanKey === "extension") return cleanValue;
   return `${cleanKey}: ${cleanValue}`;
@@ -3250,23 +3340,50 @@ function shortModelLabel(model) {
   return `(${model.provider}) ${model.id}`;
 }
 
-function formatTokenCount(value) {
-  const n = Number(value);
-  if (!Number.isFinite(n)) return "?";
-  const abs = Math.abs(n);
-  const sign = n < 0 ? "-" : "";
-  if (abs >= 1_000_000_000) return `${sign}${(abs / 1_000_000_000).toFixed(abs >= 10_000_000_000 ? 0 : 1)}B`;
-  if (abs >= 1_000_000) return `${sign}${(abs / 1_000_000).toFixed(abs >= 10_000_000 ? 0 : 1)}M`;
-  if (abs >= 1_000) return `${sign}${(abs / 1_000).toFixed(abs >= 10_000 ? 0 : 1)}k`;
-  return `${Math.round(n)}`;
+function footerModelLine(model = currentState?.model, thinkingLevel = currentState?.thinkingLevel) {
+  const label = shortModelLabel(model);
+  if (!model?.reasoning) return label;
+  const thinking = thinkingLevel === "off" ? "thinking off" : thinkingLevel || "?";
+  return `${label} • ${thinking}`;
+}
+
+function formatFooterTokenCount(value) {
+  const n = Math.max(0, Number(value) || 0);
+  if (n < 1000) return `${Math.round(n)}`;
+  if (n < 10000) return `${(n / 1000).toFixed(1)}k`;
+  if (n < 1000000) return `${Math.round(n / 1000)}k`;
+  if (n < 10000000) return `${(n / 1000000).toFixed(1)}M`;
+  return `${Math.round(n / 1000000)}M`;
+}
+
+function footerCostAuthLabel() {
+  const provider = currentState?.model?.provider || "";
+  return /codex|copilot|chatgpt/i.test(provider) ? "sub" : "api";
 }
 
-function formatCost(value) {
-  const n = Number(value);
-  if (!Number.isFinite(n) || n <= 0) return "$0.000";
-  if (n < 0.01) return `$${n.toFixed(4)}`;
-  if (n < 100) return `$${n.toFixed(3)}`;
-  return `$${n.toFixed(2)}`;
+function footerStatsTokensDisplay(stats = latestStats) {
+  const tokens = stats?.tokens;
+  if (!tokens) return "";
+  return `↑${formatFooterTokenCount(tokens.input)} ↓${formatFooterTokenCount(tokens.output)}`;
+}
+
+function footerStatsCostDisplay(stats = latestStats) {
+  if (!stats) return "";
+  return `$${Number(stats.cost || 0).toFixed(3)} (${footerCostAuthLabel()})`;
+}
+
+function footerStatsContextDisplay(stats = latestStats) {
+  const usage = stats?.contextUsage || currentState?.contextUsage;
+  const contextWindow = usage?.contextWindow ?? currentState?.model?.contextWindow ?? 0;
+  if (!contextWindow) return "";
+  const rawPercent = Number(usage?.percent);
+  const percent = Number.isFinite(rawPercent) ? `${rawPercent.toFixed(1)}%` : "?";
+  const auto = currentState?.autoCompactionEnabled !== false ? " (auto)" : "";
+  return `${percent}/${formatFooterTokenCount(contextWindow)}${auto}`;
+}
+
+function fallbackFooterStats() {
+  return [footerStatsTokensDisplay(), footerStatsCostDisplay(), footerStatsContextDisplay()].filter(Boolean);
 }
 
 function formatDuration(ms) {
@@ -3297,32 +3414,10 @@ function textFromContent(content) {
     .join("\n");
 }
 
-function estimateMessageTokens(messages) {
-  let chars = 0;
-  for (const message of messages || []) {
-    chars += textFromContent(message.content).length;
-    if (message.role === "toolResult") chars += textFromContent(message.content).length;
-    if (message.role === "bashExecution") chars += String(message.command || "").length + String(message.output || "").length;
-    chars += 16;
-  }
-  return Math.round(chars / 4);
-}
-
-function estimatePiTokens() {
-  const contextTokens = latestStats?.contextUsage?.tokens;
-  if (!Number.isFinite(Number(contextTokens))) return null;
-  return Math.max(0, Number(contextTokens) - estimateMessageTokens(latestMessages));
-}
-
-function subscriptionSuffix() {
-  const provider = currentState?.model?.provider || "";
-  return /codex|copilot|chatgpt/i.test(provider) ? "sub" : "metered";
-}
-
-function footerMetric(icon, label, value, tone = "") {
+function footerMetric(icon, label, value, tone = "", options = {}) {
   const node = make("span", `footer-metric ${tone}`.trim());
   node.append(make("span", "footer-metric-icon", icon), make("span", "footer-metric-label", label), make("span", "footer-metric-value", value));
-  node.title = `${label}: ${value}`;
+  node.title = options.title || `${label}: ${value}`;
   return node;
 }
 
@@ -3349,7 +3444,7 @@ function contextUsageActiveColor(percent) {
 
 function applyFooterContextUsage(node, contextUsage) {
   node.classList.add("footer-context-card");
-  const percent = Number(contextUsage?.percent);
+  const percent = typeof contextUsage?.percent === "number" ? contextUsage.percent : Number.NaN;
   if (Number.isFinite(percent)) {
     const clampedPercent = Math.min(100, Math.max(0, percent));
     const activeColor = contextUsageActiveColor(clampedPercent);
@@ -3373,6 +3468,223 @@ function footerMeta(label, value, className = "", options = {}) {
   return node;
 }
 
+const FOOTER_PAYLOAD_TONES = new Set(["pink", "blue", "mauve", "yellow", "green", "teal"]);
+const FOOTER_META_CLASS_BY_KEY = new Map([
+  ["cwd", "footer-workspace"],
+  ["git", "footer-branch"],
+  ["git-state", "footer-git-state"],
+  ["sync", "footer-sync"],
+  ["changes", "footer-changes"],
+  ["git-extra", "footer-git-extra"],
+  ["context", "footer-context"],
+  ["model", "footer-model"],
+]);
+
+function cleanFooterPayloadText(value, fallback = "") {
+  const text = cleanStatusText(value).slice(0, 240);
+  return text || fallback;
+}
+
+function normalizeFooterPayloadChip(value, index) {
+  if (!value || typeof value !== "object") return null;
+  const key = cleanFooterPayloadText(value.key, `item-${index}`).replace(/[^a-z0-9_.:-]/gi, "-").slice(0, 64) || `item-${index}`;
+  const label = cleanFooterPayloadText(value.label, key).slice(0, 32);
+  const chip = {
+    key,
+    label,
+    value: cleanFooterPayloadText(value.value, "—"),
+    icon: cleanFooterPayloadText(value.icon, "•").slice(0, 8),
+    tone: FOOTER_PAYLOAD_TONES.has(value.tone) ? value.tone : "",
+    title: cleanFooterPayloadText(value.title, ""),
+  };
+  if (value.contextUsage && typeof value.contextUsage === "object") {
+    const percent = typeof value.contextUsage.percent === "number" ? value.contextUsage.percent : Number.NaN;
+    const contextWindow = Number(value.contextUsage.contextWindow);
+    chip.contextUsage = {
+      percent: Number.isFinite(percent) ? percent : null,
+      contextWindow: Number.isFinite(contextWindow) ? contextWindow : 0,
+    };
+  }
+  return chip;
+}
+
+function currentGitFooterCacheCwd(tabId = activeTabId) {
+  const tab = tabs.find((item) => item.id === tabId) || activeTab();
+  return latestWorkspace?.cwd || tab?.cwd || "";
+}
+
+function parseGitFooterWebuiPayloadRaw(raw) {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    if (!parsed || parsed.type !== GIT_FOOTER_WEBUI_PAYLOAD_TYPE || parsed.version !== GIT_FOOTER_WEBUI_PAYLOAD_VERSION) return null;
+    const main = Array.isArray(parsed.main) ? parsed.main.map(normalizeFooterPayloadChip).filter(Boolean).slice(0, 8) : [];
+    const meta = Array.isArray(parsed.meta) ? parsed.meta.map(normalizeFooterPayloadChip).filter(Boolean).slice(0, 10) : [];
+    if (!main.length && !meta.length) return null;
+    return { main, meta };
+  } catch {
+    return null;
+  }
+}
+
+function readCachedGitFooterWebuiPayloadRaw() {
+  try {
+    const cached = JSON.parse(localStorage.getItem(GIT_FOOTER_WEBUI_PAYLOAD_CACHE_KEY) || "null");
+    if (!cached || typeof cached.raw !== "string") return null;
+    const cachedCwd = typeof cached.cwd === "string" ? cached.cwd : "";
+    const currentCwd = currentGitFooterCacheCwd();
+    if (cachedCwd && currentCwd && cachedCwd !== currentCwd) return null;
+    return cached.raw;
+  } catch {
+    return null;
+  }
+}
+
+function cacheGitFooterWebuiPayload(raw, tabId = activeTabId) {
+  if (!parseGitFooterWebuiPayloadRaw(raw)) return;
+  try {
+    localStorage.setItem(GIT_FOOTER_WEBUI_PAYLOAD_CACHE_KEY, JSON.stringify({
+      raw,
+      cwd: currentGitFooterCacheCwd(tabId),
+      savedAt: Date.now(),
+    }));
+  } catch {
+    // Cached footer payloads are best-effort; live extension payloads still work.
+  }
+}
+
+function clearGitFooterWebuiPayloadCache() {
+  try {
+    localStorage.removeItem(GIT_FOOTER_WEBUI_PAYLOAD_CACHE_KEY);
+  } catch {
+    // Ignore storage failures; toggles should still work for this page load.
+  }
+}
+
+function parseGitFooterWebuiPayload() {
+  if (isOptionalFeatureDisabled("gitFooterStatus")) return null;
+
+  const livePayload = parseGitFooterWebuiPayloadRaw(statusEntries.get(GIT_FOOTER_WEBUI_STATUS_KEY));
+  if (livePayload) return livePayload;
+
+  const commandsStillLoading = availableCommands.length === 0 && rawAvailableCommands.length === 0;
+  const extensionDetected = hasAvailableCommand("git-footer-refresh") || optionalFeatureAvailability.gitFooterStatus;
+  if (!commandsStillLoading && !extensionDetected) return null;
+  return parseGitFooterWebuiPayloadRaw(readCachedGitFooterWebuiPayloadRaw());
+}
+
+function footerMetaClassForPayload(chip) {
+  const base = FOOTER_META_CLASS_BY_KEY.get(chip.key) || "footer-extension-meta";
+  const toneClass = chip.tone ? ` tone-${chip.tone}` : "";
+  return `${base}${toneClass}`.trim();
+}
+
+function footerTuiItem(value, className = "", options = {}) {
+  const text = cleanStatusText(value);
+  const isAction = typeof options.onClick === "function";
+  const node = make(isAction ? "button" : "span", `footer-tui-item ${className}${isAction ? " footer-tui-action" : ""}`.trim(), text);
+  if (isAction) {
+    node.type = "button";
+    node.addEventListener("click", options.onClick);
+  }
+  if (options.title) node.title = options.title;
+  return node;
+}
+
+function renderTuiFooterLine({ cwd, cwdTitle, message = "", stats = [], model = "" } = {}) {
+  const tab = activeTab();
+  const line = make("div", "footer-line footer-line-tui");
+  line.append(footerTuiItem(cwd || "loading…", "footer-tui-cwd", tab ? {
+    onClick: changeActiveTabCwd,
+    title: cwdTitle || `Change cwd for ${tab.title}: ${cwd}`,
+  } : { title: cwdTitle }));
+  if (message) line.append(footerTuiItem(message, "footer-tui-status"));
+  for (const stat of stats.filter(Boolean)) line.append(footerTuiItem(stat, "footer-tui-stat"));
+  if (model) {
+    line.append(make("span", "footer-tui-spacer"));
+    line.append(footerTuiItem(model, "footer-tui-model", {
+      onClick: () => setFooterModelPickerOpen(!footerModelPickerOpen),
+      title: `Change scoped model: ${model}`,
+    }));
+  }
+  return line;
+}
+
+function renderGitFooterPayloadMetric(chip) {
+  const node = footerMetric(chip.icon || "•", chip.label, chip.value, chip.tone ? `tone-${chip.tone}` : "", { title: chip.title || undefined });
+  return chip.contextUsage ? applyFooterContextUsage(node, chip.contextUsage) : node;
+}
+
+function renderGitFooterPayloadMeta(chip, tab) {
+  const options = { title: chip.title || undefined };
+  if (chip.key === "cwd" && tab) {
+    options.onClick = changeActiveTabCwd;
+    options.title = chip.title || `Change cwd for ${tab.title}: ${chip.value}`;
+  } else if (chip.key === "model") {
+    options.onClick = () => setFooterModelPickerOpen(!footerModelPickerOpen);
+    options.title = chip.title || `Change scoped model: ${chip.value}`;
+  }
+  const node = footerMeta(chip.label, chip.value, footerMetaClassForPayload(chip), options);
+  return chip.contextUsage ? applyFooterContextUsage(node, chip.contextUsage) : node;
+}
+
+function renderGitFooterPayload(payload) {
+  const tab = activeTab();
+  elements.statusBar.replaceChildren();
+  elements.statusBar.classList.remove("statusbar-tui-footer");
+  elements.statusBar.classList.add("statusbar-git-footer");
+  document.body.classList.toggle("footer-model-picker-open", footerModelPickerOpen);
+
+  const row1 = make("div", "footer-line footer-line-main");
+  row1.append(...payload.main.map(renderGitFooterPayloadMetric));
+
+  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(...payload.meta.map((chip) => renderGitFooterPayloadMeta(chip, tab)), footerToggle);
+
+  elements.statusBar.append(row1, row2);
+  if (footerModelPickerOpen) elements.statusBar.append(renderFooterModelPicker());
+  setMobileFooterExpanded(mobileFooterExpanded);
+  updateFooterModelPickerPosition();
+}
+
+function gitFooterFallbackMessage() {
+  if (isOptionalFeatureDisabled("gitFooterStatus")) return "";
+  const tabContext = activeTabContext();
+  const commandsStillLoading = availableCommands.length === 0 && rawAvailableCommands.length === 0;
+  const footerRefreshPending = tabContext.tabId ? gitFooterPayloadRefreshInFlightByTab.has(tabContext.tabId) : false;
+  const extensionDetected = hasAvailableCommand("git-footer-refresh") || optionalFeatureAvailability.gitFooterStatus;
+  return commandsStillLoading || footerRefreshPending || extensionDetected
+    ? "Loading git footer status…"
+    : "Git footer status extension unavailable";
+}
+
+function renderMinimalFooter() {
+  const tab = activeTab();
+  const workspaceLabel = latestWorkspace?.displayCwd || (tab?.cwd ? normalizeDisplayPath(tab.cwd) : "loading…");
+  const modelLine = footerModelLine();
+  const footerMessage = gitFooterFallbackMessage();
+
+  elements.statusBar.replaceChildren();
+  elements.statusBar.classList.remove("statusbar-git-footer");
+  elements.statusBar.classList.add("statusbar-tui-footer");
+  document.body.classList.toggle("footer-model-picker-open", footerModelPickerOpen);
+  elements.statusBar.append(renderTuiFooterLine({
+    cwd: workspaceLabel,
+    cwdTitle: tab ? `Change cwd for ${tab.title}: ${workspaceLabel}` : undefined,
+    message: footerMessage,
+    stats: fallbackFooterStats(),
+    model: modelLine,
+  }));
+  if (footerModelPickerOpen) elements.statusBar.append(renderFooterModelPicker());
+  setMobileFooterExpanded(false);
+  updateFooterModelPickerPosition();
+}
+
 function setFooterModelPickerOpen(open) {
   footerModelPickerOpen = !!open;
   if (footerModelPickerOpen && isMobileView()) {
@@ -3703,62 +4015,12 @@ async function changeActiveTabCwd() {
 }
 
 function renderFooter() {
-  const stats = latestStats;
-  const tokens = stats?.tokens || {};
-  const contextUsage = stats?.contextUsage || currentState?.contextUsage;
-  const piTokens = estimatePiTokens();
-  const speed = currentRunStartedAt
-    ? (Math.max(1, Math.round(currentRunStreamChars / 4)) / Math.max(0.5, (performance.now() - currentRunStartedAt) / 1000))
-    : latestTokPerSecond;
-  const speedLabel = Number.isFinite(speed) ? `${speed.toFixed(1)} tok/s` : "-- tok/s";
-  const contextLabel = contextUsage?.contextWindow
-    ? `${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 || (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"),
-    footerMetric("💾", "cache", `R ${formatTokenCount(tokens.cacheRead ?? 0)}${tokens.cacheWrite ? `  W ${formatTokenCount(tokens.cacheWrite)}` : ""}`, "tone-blue"),
-    footerMetric("π", "pi", piTokens === null ? "-- tok" : `~${formatTokenCount(piTokens)} tok`, "tone-mauve"),
-    footerMetric("⚡", "speed", speedLabel, "tone-yellow"),
-    footerMetric("💸", subscriptionSuffix(), formatCost(stats?.cost ?? 0), "tone-green"),
-    applyFooterContextUsage(footerMetric("🧠", "context", contextLabel, "tone-teal"), contextUsage),
-  );
-  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", 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"),
-    applyFooterContextUsage(footerMeta("context", contextLabel, "footer-context"), contextUsage),
-    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();
+  const gitFooterPayload = parseGitFooterWebuiPayload();
+  if (gitFooterPayload) {
+    renderGitFooterPayload(gitFooterPayload);
+    return;
+  }
+  renderMinimalFooter();
 }
 
 function scheduleRefreshMessages(delay = 120, tabContext = activeTabContext()) {
@@ -6291,6 +6553,7 @@ function updateLiveToolCard(bubble, message) {
   const header = bubble.querySelector(":scope > .message-header");
   const body = bubble.querySelector(":scope > .message-body");
   if (!body) return false;
+  attachMessageCopyButton(bubble, message, body);
   applyToolExecutionBubbleState(bubble, message);
   const role = header?.querySelector(".message-role");
   if (role) role.textContent = messageTitle(message);
@@ -6476,6 +6739,7 @@ function appendMessage(message, { streaming = false, messageIndex = -1, transien
   } else {
     bubble.append(header, body);
   }
+  attachMessageCopyButton(bubble, message, body);
   if (!streaming && !transient) renderActionFeedbackControls(bubble, message, messageIndex);
   appendChatMessageBubble(bubble);
   return { bubble, body };
@@ -7024,16 +7288,37 @@ function resetOptionalFeatureAvailability() {
   renderOptionalFeatureControls();
 }
 
+function requestGitFooterWebuiPayload(tabContext = activeTabContext()) {
+  if (!tabContext.tabId || isOptionalFeatureDisabled("gitFooterStatus")) return;
+  if (currentState?.isStreaming || currentState?.isCompacting) return;
+  if (!hasAvailableCommand("git-footer-refresh") || statusEntries.has(GIT_FOOTER_WEBUI_STATUS_KEY)) return;
+  if (gitFooterPayloadRefreshInFlightByTab.has(tabContext.tabId)) return;
+
+  gitFooterPayloadRefreshInFlightByTab.add(tabContext.tabId);
+  if (isCurrentTabContext(tabContext)) renderFooter();
+  api("/api/prompt", {
+    method: "POST",
+    body: { message: "/git-footer-refresh --webui-silent", streamingBehavior: "steer" },
+    tabId: tabContext.tabId,
+  }).catch((error) => {
+    if (isCurrentTabContext(tabContext)) addEvent(`git footer payload refresh failed: ${error.message || String(error)}`, "warn");
+  }).finally(() => {
+    gitFooterPayloadRefreshInFlightByTab.delete(tabContext.tabId);
+    if (isCurrentTabContext(tabContext)) renderFooter();
+  });
+}
+
 function updateOptionalFeatureAvailability() {
   optionalFeatureAvailability.gitWorkflow = hasAvailableCommand("git-staged-msg");
   optionalFeatureAvailability.releaseNpm = hasAvailableCommand("release-npm");
   optionalFeatureAvailability.releaseAur = hasAvailableCommand("release-aur");
   optionalFeatureAvailability.statsCommand = hasAvailableCommand("stats");
-  optionalFeatureAvailability.gitFooterStatus = hasAvailableCommand("git-footer-refresh") || optionalFeatureAvailability.gitFooterStatus || statusEntries.has("git-footer");
+  optionalFeatureAvailability.gitFooterStatus = hasAvailableCommand("git-footer-refresh") || optionalFeatureAvailability.gitFooterStatus || statusEntries.has("git-footer") || statusEntries.has(GIT_FOOTER_WEBUI_STATUS_KEY);
   optionalFeatureAvailability.tuiSkillsCommand = hasLoadedRpcCommand("skills");
   optionalFeatureAvailability.todoProgressWidget = hasAvailableCommand("todo-progress-status") || optionalFeatureAvailability.todoProgressWidget || widgets.has("todo-progress");
   optionalFeatureAvailability.tuiToolsCommand = hasLoadedRpcCommand("tools");
   optionalFeatureAvailability.themeBundle = availableThemes.length > 0;
+  requestGitFooterWebuiPayload();
   renderOptionalFeatureControls();
 }
 
@@ -8011,7 +8296,6 @@ function handleMessageUpdate(event) {
     scrollChatToBottom();
   } else if (update.type === "thinking_delta") {
     const delta = thinkingDeltaText(update);
-    currentRunStreamChars += delta.length;
     setRunIndicatorActivity("Thinking…", { scroll: false });
     const synced = syncStreamingThinkingFromMessage(event);
     if (thinkingOutputVisible && delta && (!synced || !streamThinking?.textContent)) {
@@ -8028,7 +8312,6 @@ function handleMessageUpdate(event) {
     setRunIndicatorActivity("Finished thinking; waiting for the next output or action…", { scroll: false });
   } else if (update.type === "text_delta" || update.type === "text_end") {
     const delta = update.type === "text_delta" ? update.delta || "" : "";
-    currentRunStreamChars += delta.length;
     const partialText = assistantTextFromMessage(assistantStreamingMessage(event));
     if (typeof partialText === "string") streamRawText = partialText;
     else if (update.type === "text_end" && typeof update.content === "string") streamRawText = update.content;
@@ -8060,6 +8343,7 @@ async function refreshState(tabContext = activeTabContext()) {
   syncActiveTabActivityFromState(currentState);
   syncRunIndicatorFromState(currentState);
   renderStatus();
+  requestGitFooterWebuiPayload(tabContext);
 }
 
 async function refreshStats(tabContext = activeTabContext()) {
@@ -8086,7 +8370,6 @@ async function refreshWorkspace(tabContext = activeTabContext()) {
           cwd: health.cwd,
           displayCwd: normalizeDisplayPath(health.cwd),
           uptimeMs: latestWorkspace?.uptimeMs || 0,
-          git: { isRepo: false },
         }
       : null;
   }
@@ -9184,12 +9467,18 @@ function handleExtensionUiRequest(request) {
       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");
+    case "setStatus": {
+      const statusKey = request.statusKey || "extension";
+      if (request.statusText) {
+        statusEntries.set(statusKey, request.statusText);
+        if (statusKey === GIT_FOOTER_WEBUI_STATUS_KEY) cacheGitFooterWebuiPayload(request.statusText, request.tabId);
+      } else {
+        statusEntries.delete(statusKey);
+      }
       updateOptionalFeatureAvailability();
       renderStatus();
       return;
+    }
     case "setWidget":
       if (Array.isArray(request.widgetLines)) widgets.set(request.widgetKey || request.id, request);
       else widgets.delete(request.widgetKey || request.id);
@@ -9392,13 +9681,11 @@ function handleEvent(event) {
     }
     case "pi_process_exit":
       addEvent(`pi rpc exited (${event.code ?? event.signal ?? "unknown"})`, "error");
-      currentRunStartedAt = null;
       clearRunIndicatorActivity();
       refreshTabs().catch((error) => addEvent(error.message, "error"));
       break;
     case "pi_process_error":
       addEvent(event.error || "pi rpc process error", "error");
-      currentRunStartedAt = null;
       clearRunIndicatorActivity();
       refreshTabs().catch((error) => addEvent(error.message, "error"));
       break;
@@ -9410,9 +9697,6 @@ function handleEvent(event) {
       scheduleRefreshState();
       break;
     case "agent_start":
-      currentRunStartedAt = performance.now();
-      currentRunStreamChars = 0;
-      latestTokPerSecond = null;
       if (currentState) currentState = { ...currentState, isStreaming: true };
       setRunIndicatorActivity("Agent run started; waiting for first output or action…");
       addEvent("agent started");
@@ -9423,7 +9707,6 @@ function handleEvent(event) {
     case "agent_end":
       addEvent("agent finished");
       notifyAgentDone(event.tabId || activeTabId, { activity: event.tabActivity, tabTitle: event.tabTitle });
-      currentRunStartedAt = null;
       if (currentState) currentState = { ...currentState, isStreaming: false };
       clearRunIndicatorActivity();
       markTabOutputSeen();
@@ -9450,11 +9733,6 @@ function handleEvent(event) {
       handleMessageUpdate(event);
       break;
     case "message_end":
-      if (event.message?.role === "assistant" && currentRunStartedAt) {
-        const elapsedSeconds = Math.max(0.5, (performance.now() - currentRunStartedAt) / 1000);
-        const outputTokens = Number(event.message?.usage?.output ?? 0) || Math.max(1, Math.round(currentRunStreamChars / 4));
-        latestTokPerSecond = outputTokens / elapsedSeconds;
-      }
       if (runIndicatorIsActive()) setRunIndicatorActivity("Assistant message finished; waiting for the next step…", { scroll: false });
       scheduleRefreshMessages();
       scheduleRefreshState();

package/public/styles.css

@@ -1458,6 +1458,17 @@ body.side-panel-collapsed .terminal-tabs-shell {
   opacity: 0.62;
   box-shadow: 0 0 1rem var(--glow-mauve);
 }
+.statusbar-tui-footer {
+  gap: 0;
+  padding-block: 0.58rem;
+}
+.statusbar-tui-footer::before {
+  opacity: 0.32;
+  box-shadow: none;
+}
+.statusbar-git-footer {
+  gap: 0.58rem;
+}
 .footer-line {
   position: relative;
   z-index: 1;
@@ -1475,6 +1486,51 @@ body.side-panel-collapsed .terminal-tabs-shell {
   gap: 0.5rem;
   color: rgba(var(--ctp-subtext-rgb), 0.76);
 }
+.footer-line-tui {
+  align-items: center;
+  gap: 0.5rem;
+  overflow: hidden;
+  color: rgba(var(--ctp-subtext-rgb), 0.78);
+  white-space: nowrap;
+}
+.footer-tui-item {
+  min-width: 0;
+  overflow: hidden;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+button.footer-tui-item {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.footer-tui-action:hover,
+.footer-tui-action:focus-visible {
+  color: var(--ctp-teal);
+  outline: none;
+}
+.footer-tui-cwd {
+  flex: 0 1 auto;
+  max-width: 38%;
+  color: rgba(var(--ctp-text-rgb), 0.86);
+}
+.footer-tui-status { color: var(--ctp-yellow); }
+.footer-tui-stat { flex: 0 0 auto; }
+.footer-tui-spacer {
+  flex: 1 1 auto;
+  min-width: 1.2rem;
+}
+.footer-tui-model {
+  flex: 0 1 auto;
+  max-width: 46%;
+  color: rgba(var(--ctp-text-rgb), 0.86);
+  text-align: right;
+}
 .footer-details-toggle { display: none; }
 .footer-metric,
 .footer-meta {
@@ -2423,6 +2479,49 @@ button.footer-meta {
   color: rgba(var(--ctp-subtext-rgb), 0.78);
   font-size: 0.78rem;
 }
+.message.has-copy-action:not(.toolResult):not(.bashExecution):not(.compactionSummary) > .message-header,
+.message.has-copy-action:not(.toolResult):not(.bashExecution):not(.compactionSummary) > .message-body {
+  padding-right: 3.1rem;
+}
+.message.has-copy-action > .message-collapse > summary.message-header {
+  padding-right: 3.4rem;
+}
+.message-copy-button {
+  position: absolute;
+  top: 0.48rem;
+  right: 0.54rem;
+  z-index: 9;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.15rem;
+  min-width: 2.15rem;
+  min-height: 2.05rem;
+  padding: 0;
+  border-radius: 0.64rem;
+  color: rgba(var(--ctp-text-rgb), 0.82);
+  background: linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.82), rgba(var(--ctp-crust-rgb), 0.90));
+  border-color: rgba(148, 226, 213, 0.26);
+  box-shadow: 0 0.45rem 1rem rgba(var(--ctp-crust-rgb), 0.30), inset 0 1px 0 rgba(255,255,255,0.055);
+  line-height: 1;
+  opacity: 0.72;
+}
+.message-copy-button:hover,
+.message-copy-button:focus-visible,
+.message-copy-button.copied {
+  color: #11111b;
+  border-color: transparent;
+  background: linear-gradient(120deg, var(--ctp-teal), var(--ctp-blue));
+  box-shadow: 0 0 0.9rem rgba(148, 226, 213, 0.28), 0 0.45rem 1rem rgba(var(--ctp-crust-rgb), 0.34);
+  opacity: 1;
+}
+.message-copy-button.copied {
+  background: linear-gradient(120deg, var(--ctp-green), var(--ctp-teal));
+}
+.message-copy-icon {
+  font-size: 1.18rem;
+  line-height: 1;
+}
 .message-collapse {
   margin: 0;
   padding: 0;
@@ -2597,7 +2696,7 @@ button.footer-meta {
 }
 .action-feedback-controls {
   position: absolute;
-  top: calc(100% - 0.18rem);
+  bottom: 0.48rem;
   right: 0.55rem;
   z-index: 8;
   display: flex;
@@ -2605,7 +2704,7 @@ button.footer-meta {
   gap: 0.35rem;
   opacity: 0;
   pointer-events: auto;
-  transform: translateY(-0.12rem) scale(0.98);
+  transform: translateY(0.12rem) scale(0.98);
   transition: opacity 140ms ease, transform 140ms ease;
 }
 .action-feedback-controls:hover,
@@ -3994,6 +4093,19 @@ summary { cursor: pointer; color: var(--warning); }
     padding: 0.68rem 0.7rem;
     border-radius: 0.82rem;
   }
+  .message-copy-button {
+    top: 0.38rem;
+    right: 0.42rem;
+    width: 2rem;
+    min-width: 2rem;
+    min-height: 1.92rem;
+  }
+  .message-copy-icon { font-size: 1.12rem; }
+  .message.has-copy-action:not(.toolResult):not(.bashExecution):not(.compactionSummary) > .message-header,
+  .message.has-copy-action:not(.toolResult):not(.bashExecution):not(.compactionSummary) > .message-body,
+  .message.has-copy-action > .message-collapse > summary.message-header {
+    padding-right: 2.55rem;
+  }
   .message-header {
     gap: 0.5rem;
     margin-bottom: 0.38rem;
@@ -4007,7 +4119,7 @@ summary { cursor: pointer; color: var(--warning); }
   }
   .feedback-tray button { width: 100%; }
   .action-feedback-controls {
-    top: calc(100% - 0.12rem);
+    bottom: 0.38rem;
     right: 0.34rem;
     gap: 0.28rem;
   }
@@ -4032,6 +4144,19 @@ summary { cursor: pointer; color: var(--warning); }
     overflow: visible;
   }
   body.footer-model-picker-open .footer-line { z-index: 1; }
+  .footer-line-tui {
+    flex-wrap: wrap;
+    gap: 0.22rem 0.48rem;
+    white-space: normal;
+  }
+  .footer-tui-item { white-space: nowrap; }
+  .footer-tui-cwd,
+  .footer-tui-model {
+    flex-basis: 100%;
+    max-width: 100%;
+    text-align: left;
+  }
+  .footer-tui-spacer { display: none; }
   .footer-model-picker {
     position: fixed;
     left: max(0.55rem, env(safe-area-inset-left));

package/tests/mobile-static.test.mjs

@@ -131,6 +131,8 @@ assert.match(css, /#promptInput \{[\s\S]*?overflow-y:\s*hidden/, "prompt input s
 assert.match(css, /\.sticky-user-prompt-button \{[\s\S]*?grid-template-columns:\s*auto minmax\(0, 1fr\) auto/, "last-user-prompt jump control should render as a fixed transcript header");
 assert.match(css, /\.message\.extension,[\s\S]*?\.message\.native/, "extension and native command output should have visible transcript styling");
 assert.match(css, /\.message\.run-indicator-message \{[\s\S]*?border-color/, "active agent runs should render a visible transcript indicator card");
+assert.match(css, /\.message-copy-button \{[\s\S]*?position:\s*absolute/, "transcript messages should expose a top-right copy button");
+assert.match(css, /\.message\.has-copy-action[\s\S]*?padding-right:\s*3\.1rem/, "copy buttons should reserve space in message cards");
 assert.match(css, /\.message\.action-enter \{[\s\S]*?action-card-slide-in 340ms/, "new action cards should visibly slide in from the bottom");
 assert.match(css, /@keyframes action-card-slide-in \{[\s\S]*?translate3d\(0, 1\.45rem, 0\)/, "action-card entry animation should start well below the final position");
 assert.match(css, /\.message\.thinking,\n\.message\.toolCall,\n\.message\.assistantEvent/, "thinking and assistant events should have non-assistant transcript card styling");
@@ -177,7 +179,7 @@ assert.match(css, /\.command-suggest-item:hover \{\n\s+box-shadow: none;\n\s+tra
 assert.doesNotMatch(css, /\.command-suggest-item:hover,\n\.command-suggest-item\.active/, "autocomplete hover and active selection styles should stay separate");
 assert.match(css, /\.feedback-tray\[hidden\] \{ display: none; \}/, "queued action-feedback tray should hide when empty");
 assert.match(css, /\.action-feedback-controls \{[\s\S]*?position:\s*absolute/, "action reactions should be absolutely positioned so they do not expand cards");
-assert.match(css, /\.action-feedback-controls \{[\s\S]*?top:\s*calc\(100% - 0\.18rem\)/, "action reactions should sit outside the message box by default");
+assert.match(css, /\.action-feedback-controls \{[\s\S]*?bottom:\s*0\.48rem/, "action reactions should sit inside the message box by default");
 assert.match(css, /\.action-feedback-controls \{[\s\S]*?opacity:\s*0/, "action reactions should stay hidden until hovered or focused");
 assert.match(css, /\.action-feedback-controls:hover,[\s\S]*?\.action-feedback-controls:focus-within/, "action reactions should reveal on hover or keyboard focus");
 assert.match(css, /\.action-feedback-controls:not\(:hover\):not\(:focus-within\) \.action-feedback-button/, "hidden action reactions should not expose button hit targets until the hover area is reached");
@@ -212,14 +214,16 @@ assert.match(css, /body\.mobile-keyboard-open \.composer-actions-button,[\s\S]*?
 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");
-assert.match(css, /\.footer-workspace,\n\s+\.footer-context \{ display: grid !important; \}/, "collapsed mobile footer should primarily show cwd and context");
-assert.match(css, /\.footer-model \{ order: 7; \}/, "model should move into expanded footer details on mobile");
+assert.match(css, /\.statusbar-tui-footer \{[\s\S]*?gap:\s*0/, "default TUI-like footer should reduce statusbar chrome around the compact line");
+assert.match(css, /\.statusbar-git-footer \{[\s\S]*?gap:\s*0\.58rem/, "enabled git-footer extension should keep the styled Web UI footer spacing");
+assert.match(css, /\.footer-line-tui \{[\s\S]*?white-space:\s*nowrap/, "default Web UI footer should use a minimal TUI-like line");
+assert.match(css, /\.footer-tui-cwd[\s\S]*?max-width:\s*38%/, "TUI-like footer should keep cwd compact on desktop");
+assert.match(css, /\.footer-tui-model[\s\S]*?text-align:\s*right/, "TUI-like footer should right-align model information on desktop");
 assert.match(css, /\.footer-model-picker[\s\S]*?position:\s*absolute/, "footer model picker should render as a dropdown/popover");
 assert.match(css, /@media \(max-width: 720px\), \(max-device-width: 720px\), \(pointer: coarse\) and \(hover: none\)[\s\S]*?\.footer-model-picker \{[\s\S]*?position:\s*fixed/, "mobile footer model picker should escape footer-details stacking as a fixed overlay on narrow, device-width-narrow, or touch-only devices");
 assert.match(css, /bottom:\s*var\(--footer-model-picker-bottom/, "mobile footer model picker should be anchored by a JS-computed viewport offset");
 assert.match(css, /\.footer-model-option\.active/, "footer model picker should style the selected scoped model");
-assert.match(css, /body\.footer-details-expanded \.footer-line-meta[\s\S]*?display:\s*grid/, "mobile footer metadata should be expandable");
+assert.match(css, /@media \(max-width: 720px\), \(max-device-width: 720px\), \(pointer: coarse\) and \(hover: none\)[\s\S]*?\.footer-line-tui \{[\s\S]*?flex-wrap:\s*wrap/, "mobile footer should wrap the minimal TUI-like line instead of using expanded metadata chips");
 assert.match(css, /(?:^|\n)\s*\.side-panel-backdrop\s*\{[\s\S]*?position:\s*fixed/, "mobile side panel backdrop should be fixed overlay UI");
 assert.match(css, /(?:^|\n)\s*\.side-panel\s*\{[\s\S]*?position:\s*fixed/, "mobile side panel should be an overlay drawer instead of stacked content");
 assert.match(css, /\.extension-dialog[\s\S]*?max-height:\s*calc\(var\(--visual-viewport-height/, "dialogs should fit the visual viewport on mobile");
@@ -296,6 +300,10 @@ assert.match(app, /navigator\.serviceWorker\.register\("\/service-worker\.js"\)/
 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, /function messageCopyText\(message, body = null\)/, "frontend should derive copy text from transcript messages");
+assert.match(app, /function attachMessageCopyButton\(bubble, message, body\)/, "frontend should add copy controls to rendered transcript cards");
+assert.match(app, /button\.append\(make\("span", "message-copy-icon", "⧉"\)\)/, "message copy buttons should render as icon-only controls");
+assert.match(app, /copyMessageBubble\(button\)/, "message copy buttons should copy through the shared clipboard helper");
 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");
@@ -345,6 +353,27 @@ assert.match(app, /function renderCodexUsage\(\)/, "frontend should render Codex
 assert.match(app, /api\(`\/api\/codex-usage\$\{suffix\}`, \{ scoped: false \}\)/, "Codex usage should load through a server endpoint without browser credentials");
 assert.match(app, /restoreSidePanelSectionState\(\);\nbindSidePanelSectionToggles\(\);/, "side panel section state should restore before toggles are bound");
 assert.match(app, /OPTIONAL_FEATURES_STORAGE_KEY/, "optional feature disable toggles should persist in browser storage");
+assert.match(app, /GIT_FOOTER_WEBUI_STATUS_KEY = "git-footer-webui"/, "git footer Web UI data should be received as an extension-owned status payload");
+assert.match(app, /function parseGitFooterWebuiPayloadRaw\(raw\)[\s\S]*GIT_FOOTER_WEBUI_PAYLOAD_TYPE[\s\S]*GIT_FOOTER_WEBUI_PAYLOAD_VERSION/, "Web UI footer should parse the structured payload emitted by git-footer-status");
+assert.match(app, /function renderFooter\(\)[\s\S]*parseGitFooterWebuiPayload\(\)[\s\S]*renderGitFooterPayload\(gitFooterPayload\)/, "detailed footer rendering should prefer the git-footer-status extension payload");
+assert.match(app, /function renderGitFooterPayload\(payload\)[\s\S]*classList\.remove\("statusbar-tui-footer"\)[\s\S]*classList\.add\("statusbar-git-footer"\)[\s\S]*payload\.main\.map\(renderGitFooterPayloadMetric\)[\s\S]*payload\.meta\.map/, "enabled git footer payload should use the styled extension chip renderer, not the default TUI line");
+assert.match(app, /function renderGitFooterPayloadMetric\(chip\)[\s\S]*footerMetric\(chip\.icon/, "git footer main payload chips should render as styled metrics");
+assert.match(app, /function renderGitFooterPayloadMeta\(chip, tab\)[\s\S]*footerMeta\(chip\.label, chip\.value, footerMetaClassForPayload\(chip\)/, "git footer meta payload chips should render as styled metadata");
+assert.match(app, /let latestStats = null/, "default footer should retain session stats for token and context display");
+assert.match(app, /async function refreshStats\(tabContext = activeTabContext\(\)\)[\s\S]*api\("\/api\/stats"/, "default footer should fetch session stats");
+assert.match(app, /function renderMinimalFooter\(\)[\s\S]*stats: fallbackFooterStats\(\)/, "minimal default footer should include token, cost, and context stats");
+assert.match(app, /function footerStatsTokensDisplay\(stats = latestStats\)[\s\S]*`↑\$\{formatFooterTokenCount\(tokens\.input\)\} ↓\$\{formatFooterTokenCount\(tokens\.output\)\}`/, "fallback footer stats should include input/output tokens");
+assert.match(app, /function footerStatsCostDisplay\(stats = latestStats\)[\s\S]*footerCostAuthLabel\(\)/, "fallback footer stats should include api\/sub cost mode");
+assert.doesNotMatch(app, /Git footer status disabled/, "disabled git footer should show only the minimal footer metadata");
+assert.doesNotMatch(app, /footerMeta\("runtime"/, "minimal Web UI footer should not render runtime metadata");
+assert.match(app, /statusEntries\.has\(GIT_FOOTER_WEBUI_STATUS_KEY\)/, "optional feature detection should recognize the git-footer-status Web UI payload");
+assert.match(app, /\/git-footer-refresh --webui-silent/, "Web UI should quietly request the extension-owned footer payload when idle and missing");
+assert.match(app, /Loading git footer status…/, "missing git footer payload should show a loading state before declaring the extension unavailable");
+assert.match(app, /GIT_FOOTER_WEBUI_PAYLOAD_CACHE_KEY/, "git footer payloads should be cached across Web UI reloads");
+assert.match(app, /function setOptionalFeatureDisabled\(featureId, disabled\)[\s\S]*clearGitFooterWebuiPayloadCache\(\)/, "changing the git footer feature toggle should invalidate the cached footer payload");
+const workspaceInfoSource = server.match(/async function getWorkspaceInfo[\s\S]*?\n}\n\nlet activeGitWorkflowProcess/)?.[0] || "";
+assert.ok(workspaceInfoSource, "server workspace info source should be inspectable");
+assert.doesNotMatch(workspaceInfoSource, /runCommand\("git"|branchStatus|isRepo/, "Web UI workspace endpoint should not duplicate git footer status collection");
 assert.match(app, /function renderOptionalFeatureDependentDisplays\(\)[\s\S]*renderOptionalFeatureControls\(\);[\s\S]*renderThemeSelect\(\);[\s\S]*renderWidgets\(\);[\s\S]*renderStatus\(\);[\s\S]*renderCommands\(\);[\s\S]*renderAllMessages\(\{ preserveScroll: true \}\);[\s\S]*if \(streamRawText\) renderStreamingAssistantText\(\);/, "optional feature toggles should immediately refresh visible controls, commands, transcript, and live stream displays");
 assert.match(app, /function setOptionalFeatureDisabled\(featureId, disabled\)[\s\S]*renderOptionalFeatureDependentDisplays\(\);[\s\S]*const tabContext = activeTabContext\(\);[\s\S]*refreshCommands\(tabContext\)/, "optional feature enable/disable should re-render the GUI and then refresh command capabilities");
 assert.match(app, /function setOptionalControlState\(button, available, unavailableTitle\)[\s\S]*setAttribute\("aria-label", nextAriaLabel\)[\s\S]*setAttribute\("data-tooltip", nextTooltip\)/, "optional feature button disabled state should update accessible labels and visible tooltips");
@@ -595,16 +624,16 @@ assert.match(app, /function applyResponseTab\(response\)/, "frontend should merg
 assert.match(app, /case "webui_tab_renamed":/, "frontend should update tab labels from backend rename events");
 assert.match(app, /terminalTabsToggleButton\.addEventListener\("click"/, "terminal tabs trigger should be wired in JS");
 assert.match(app, /composerActionsButton\.addEventListener\("click"/, "composer actions trigger should be wired in JS");
-assert.match(app, /function setMobileFooterExpanded\(/, "mobile footer should have an expandable details state");
+assert.match(app, /function setMobileFooterExpanded\(/, "mobile footer should preserve expansion state for compatibility");
 assert.match(app, /function updateFooterModelPickerPosition\(\)/, "mobile model picker should compute a fixed overlay position above the footer");
-assert.match(app, /mobileFooterExpanded = false;[\s\S]*?document\.body\.classList\.remove\("footer-details-expanded"\)/, "opening mobile model picker should collapse footer details so details cannot cover the dropdown");
-assert.match(app, /footerMeta\("context", contextLabel, "footer-context"\)/, "footer should render context as a primary mobile meta item");
-assert.match(app, /footerMeta\("model", modelLine, "footer-model", \{/, "footer model item should be clickable");
+assert.match(app, /mobileFooterExpanded = false;[\s\S]*?document\.body\.classList\.remove\("footer-details-expanded"\)/, "opening mobile model picker should collapse legacy footer details so they cannot cover the dropdown");
+assert.match(app, /function renderTuiFooterLine\([\s\S]*footer-line footer-line-tui/, "footer should render a minimal TUI-like line instead of metadata chips");
+assert.match(app, /footerTuiItem\(model, "footer-tui-model", \{[\s\S]*setFooterModelPickerOpen\(!footerModelPickerOpen\)/, "footer model item should be clickable");
 assert.match(app, /function renderFooterModelPicker\(\)/, "footer should render a scoped-model picker dropdown");
 assert.match(app, /api\("\/api\/scoped-models", \{ tabId: tabContext\.tabId \}\)/, "footer model picker should load scoped models instead of all available models");
 assert.match(app, /for \(const model of footerScopedModels\)/, "footer model picker should render only scoped models");
 assert.match(app, /api\("\/api\/model", \{ method: "POST"/, "footer model picker should apply selected model through the model API");
-assert.match(app, /footer-details-toggle/, "footer details toggle should be rendered by JS");
+assert.doesNotMatch(app.match(/function renderMinimalFooter\(\)[\s\S]*?\n\}/)?.[0] || "", /footer-details-toggle/, "minimal default footer should not render a details toggle chip");
 assert.match(app, /bindMobileViewChanges\(/, "side panel state should react to mobile breakpoint changes");
 assert.match(app, /function restoreSidePanelState\(\) \{\n\s+if \(isMobileView\(\)\)/, "mobile should start with side panel collapsed even if desktop state was expanded");
 assert.match(app, /case "webui_tab_reloaded":/, "frontend should handle native /reload tab restart events");
@@ -652,10 +681,14 @@ assert.match(server, /tabActivity: tabActivitySnapshot\(tab\)/, "server should e
 assert.match(server, /const EXTENSION_UI_BLOCKING_METHODS = new Set\(\["select", "confirm", "input", "editor"\]\)/, "server should know which extension UI requests can block Pi runs");
 assert.match(server, /function trackPendingExtensionUiRequest\(tab, event\)/, "server should track blocking extension UI requests per tab");
 assert.match(server, /pendingExtensionUiRequests: new Map\(\)/, "new tabs should initialize pending extension UI request storage");
+assert.match(server, /extensionStatuses: new Map\(\)/, "new tabs should initialize replayable extension status storage");
+assert.match(server, /function rememberExtensionStatusEvent\(tab, event\)[\s\S]*event\.method !== "setStatus"[\s\S]*statuses\.set\(String\(event\.statusKey\), String\(event\.statusText\)\)/, "server should retain extension status events for reconnects");
+assert.match(server, /rememberExtensionStatusEvent\(tab, scopedEvent\)[\s\S]*trackPendingExtensionUiRequest\(tab, scopedEvent\)/, "RPC events should retain extension statuses before broadcasting");
 assert.match(server, /trackPendingExtensionUiRequest\(tab, scopedEvent\)/, "RPC events should populate pending extension UI storage before broadcasting");
 assert.match(server, /scopedEvent = \{ \.\.\.scopedEvent,[\s\S]*?pendingExtensionUiRequestCount: pendingExtensionUiRequests\(tab\)\.length \}/, "RPC events should broadcast pending blocker counts for tab indicators");
+assert.match(server, /function replayExtensionStatuses\(tab, res\)[\s\S]*method: "setStatus"/, "server should replay latest extension statuses on SSE reconnect");
 assert.match(server, /function replayPendingExtensionUiRequests\(tab, res\)/, "server should be able to replay missed extension UI requests on SSE reconnect");
-assert.match(server, /replayPendingExtensionUiRequests\(tab, res\)/, "SSE connections should replay pending extension UI blockers");
+assert.match(server, /replayExtensionStatuses\(tab, res\);\n\s+replayPendingExtensionUiRequests\(tab, res\)/, "SSE connections should replay extension statuses before pending blockers");
 assert.match(server, /pendingExtensionUiRequests: pendingExtensionUiRequestSummaries\(tab\)/, "detailed Web UI status should expose pending extension UI blockers");
 assert.match(server, /resolvePendingExtensionUiRequest\(tab, payload\.id\)/, "extension UI responses should clear the pending blocker cache");
 assert.match(server, /type: "webui_extension_ui_resolved"[\s\S]*?pendingExtensionUiRequestCount/, "extension UI responses should notify clients that a blocker resolved");