@firstpick/pi-package-webui 0.5.4 → 0.5.5

package/public/app.js

@@ -397,7 +397,12 @@ let footerThinkingPickerOpen = false;
 let footerAutoCompactionToggleInFlight = false;
 let footerBranchPickerOpen = false;
 let footerBranchPickerState = { loading: false, error: "", branches: [], current: "", root: "", switching: "", tabId: null };
+let footerBranchCreateDraft = { type: "", name: "" };
 let footerBranchPickerRequestSerial = 0;
+let footerScopedModelDragKey = "";
+let footerScopedModelLastDragOverKey = "";
+let footerScopedModelPointerDrag = null;
+let footerScopedModelSuppressClickUntil = 0;
 let publishMenuOpen = false;
 let maxVisualViewportHeight = 0;
 let abortRequestInFlight = false;
@@ -437,6 +442,8 @@ const SKILL_USAGE_STORAGE_KEY = "pi-webui-skill-usage-v1";
 const TERMINAL_TABS_LAYOUT_STORAGE_KEY = "pi-webui-terminal-tabs-layout";
 const TERMINAL_CUSTOM_GROUPS_STORAGE_KEY = "pi-webui-terminal-custom-groups-v1";
 const TERMINAL_TAB_DRAG_MIME = "application/x-pi-terminal-tab-id";
+const FOOTER_SCOPED_MODEL_ORDER_STORAGE_KEY = "pi-webui-footer-scoped-model-order-v1";
+const FOOTER_SCOPED_MODEL_POINTER_DRAG_THRESHOLD_PX = 6;
 const TOOL_OUTPUT_EXPANDED_STORAGE_KEY = "pi-webui-tool-output-expanded";
 const THEME_STORAGE_KEY = "pi-webui-theme";
 const CUSTOM_BACKGROUND_STORAGE_KEY = "pi-webui-custom-background";
@@ -534,6 +541,7 @@ const mobileViewMedia = window.matchMedia?.(MOBILE_VIEW_QUERY) || null;
 const sidePanelOverlayMedia = window.matchMedia?.(SIDE_PANEL_OVERLAY_QUERY) || mobileViewMedia;
 const statusEntries = new Map();
 const widgets = new Map();
+const widgetsByTab = new Map();
 const todoProgressWidgetExpandedByTab = new Map();
 const releaseNpmOutputExpandedByTab = new Map();
 const appRunnerDataByTab = new Map();
@@ -887,6 +895,7 @@ const GIT_WORKFLOW_MANUAL_BRANCH_TOOLTIP = [
   "5. Return here to commit short, long, or typed input on that branch.",
   "6. Push and Create PR will push upstream, run /pr, let you review, then run gh pr create.",
 ].join("\n");
+const GIT_BRANCH_TYPE_SUGGESTIONS = ["feat", "fix", "change", "perf", "test", "chore", "refactor", "docs", "style", "build", "ci", "revert"];
 const GIT_FOOTER_STATUS_SETUP_TOOLTIP = [
   "git-footer-status-setup:",
   "Store the GitHub username used when the Web UI initializes a no-repo directory.",
@@ -918,6 +927,12 @@ const GIT_INIT_STACK_TOOLTIP = [
   "Choose a known stack or type one. The value is saved in this browser.",
   "If left blank, Pi will inspect the codebase and fall back to sane default .gitignore patterns.",
 ].join("\n");
+const MERMAID_MODULE_URL = "/vendor/mermaid/mermaid.esm.min.mjs";
+const MERMAID_LANGUAGES = new Set(["mermaid", "mmd"]);
+const MERMAID_MAX_TEXT_SIZE = 100_000;
+let mermaidModulePromise = null;
+let mermaidThemeSignature = "";
+let mermaidRenderSequence = 0;
 
 function make(tag, className, text) {
   const node = document.createElement(tag);
@@ -4448,6 +4463,7 @@ function syncTabMetadata(nextTabs = []) {
       actionFeedbackByTab.delete(tabId);
       skillUsageByTab.delete(tabId);
       tabMessagesCache.delete(tabId);
+      widgetsByTab.delete(tabId);
       clearGitWorkflowForTab(tabId);
     }
   }
@@ -4710,6 +4726,55 @@ function cancelPendingDialogs() {
   if (elements.dialog.open) elements.dialog.close();
 }
 
+function widgetCacheForTab(tabId = activeTabId, { create = true } = {}) {
+  if (!tabId) return null;
+  let cache = widgetsByTab.get(tabId);
+  if (!cache && create) {
+    cache = new Map();
+    widgetsByTab.set(tabId, cache);
+  }
+  return cache || null;
+}
+
+function cacheWidgetsForTab(tabId = activeTabId) {
+  if (!tabId) return;
+  if (widgets.size === 0) {
+    widgetsByTab.delete(tabId);
+    return;
+  }
+  widgetsByTab.set(tabId, new Map(widgets));
+}
+
+function restoreWidgetsForActiveTab() {
+  widgets.clear();
+  const cache = widgetCacheForTab(activeTabId, { create: false });
+  if (!cache) return;
+  for (const [key, value] of cache) widgets.set(key, value);
+}
+
+function setWidgetForTab(tabId, widgetKey, request) {
+  if (!widgetKey) return;
+  const targetTabId = tabId || activeTabId;
+  const cache = widgetCacheForTab(targetTabId);
+  const hasLines = Array.isArray(request?.widgetLines);
+
+  if (cache) {
+    if (hasLines) cache.set(widgetKey, request);
+    else cache.delete(widgetKey);
+    if (cache.size === 0) widgetsByTab.delete(targetTabId);
+  }
+
+  if (targetTabId === activeTabId) {
+    if (hasLines) widgets.set(widgetKey, request);
+    else widgets.delete(widgetKey);
+  }
+}
+
+function clearWidgetsForTab(tabId = activeTabId) {
+  if (tabId) widgetsByTab.delete(tabId);
+  if (!tabId || tabId === activeTabId) widgets.clear();
+}
+
 function resetActiveTabUi() {
   clearRefreshTimers();
   clearLiveToolRenderQueue();
@@ -4727,7 +4792,7 @@ function resetActiveTabUi() {
   latestMessagesSessionKey = "";
   clearRunIndicatorActivity({ render: false });
   statusEntries.clear();
-  widgets.clear();
+  restoreWidgetsForActiveTab();
   transientMessages = [];
   liveToolRuns.clear();
   liveToolCards.clear();
@@ -5108,6 +5173,7 @@ async function switchTab(tabId) {
   footerBranchPickerRequestSerial += 1;
   saveActiveDraft();
   cacheMessagesForTab(activeTabId);
+  cacheWidgetsForTab(activeTabId);
   const tabContext = setActiveTabId(tabId, { remember: true });
   resetActiveTabUi();
   renderTabs();
@@ -7691,15 +7757,71 @@ function confirmFooterGitBranchAction(branch, { create = false, requireConfirm =
   return window.confirm(message);
 }
 
-function promptFooterGitBranchName() {
-  const value = window.prompt("New git branch name:", "");
-  if (value === null) return "";
-  return cleanStatusText(value);
+function footerBranchCreateType(value = footerBranchCreateDraft.type) {
+  return slugifyGitBranchPart(value);
 }
 
-async function createFooterGitBranch() {
-  const branchName = promptFooterGitBranchName();
-  if (!branchName) return;
+function slugifyGitBranchName(value) {
+  return cleanStatusText(value)
+    .split("/")
+    .map((part) => slugifyGitBranchPart(part))
+    .filter(Boolean)
+    .join("/");
+}
+
+function footerBranchCreateName() {
+  const type = footerBranchCreateType();
+  const rawName = cleanStatusText(footerBranchCreateDraft.name);
+  if (!type || !rawName) return "";
+  return slugifyGitBranchName(`${type}/${rawName}`);
+}
+
+function footerBranchCreatePreviewName() {
+  const type = footerBranchCreateType() || "<type>";
+  const rawName = cleanStatusText(footerBranchCreateDraft.name);
+  const name = rawName ? slugifyGitBranchName(rawName) : "<branch-name>";
+  return `${type}/${name}`;
+}
+
+function updateFooterBranchCreateDraft(patch = {}) {
+  const has = (key) => Object.prototype.hasOwnProperty.call(patch, key);
+  footerBranchCreateDraft = {
+    type: has("type") ? footerBranchCreateType(patch.type) : footerBranchCreateType(),
+    name: has("name") ? String(patch.name || "") : footerBranchCreateDraft.name,
+  };
+}
+
+function quoteGitBranchForDisplay(branch) {
+  return `'${String(branch || "").replace(/'/g, `'\\''`)}'`;
+}
+
+function gitSwitchCreateCommandDisplay(branch) {
+  return `git switch -c ${quoteGitBranchForDisplay(branch)}`;
+}
+
+function footerBranchCreateTooltip(branchName = footerBranchCreateName()) {
+  const command = gitSwitchCreateCommandDisplay(branchName || footerBranchCreatePreviewName());
+  return [
+    "Create new branch",
+    "A branch is a safe workspace for your changes.",
+    "",
+    `This will run: ${command}`,
+    "",
+    "What happens:",
+    "• creates the branch from the current code",
+    "• switches this tab to that branch",
+    "• does not commit, push, or delete anything",
+    "",
+    "Tip: use short lowercase words, e.g. fix/login-button.",
+  ].join("\n");
+}
+
+async function createFooterGitBranch(branch = footerBranchCreateName()) {
+  const branchName = cleanStatusText(branch);
+  if (!branchName) {
+    addEvent("Enter a branch name before creating a new git branch.", "warn");
+    return;
+  }
   const tabContext = activeTabContext();
   if (!confirmFooterGitBranchAction(branchName, { create: true, requireConfirm: true, tabContext })) return;
   await applyFooterGitBranch(branchName, { create: true, tabContext, skipConfirm: true });
@@ -7720,6 +7842,7 @@ async function applyFooterGitBranch(branch, { create = false, tabContext = activ
     footerBranchPickerOpen = false;
     footerBranchPickerRequestSerial += 1;
     footerBranchPickerState = { ...footerBranchPickerState, loading: false, switching: "", current: switchedBranch };
+    if (create) updateFooterBranchCreateDraft({ name: "" });
     applyOptimisticGitFooterBranch(switchedBranch, tabContext);
     addEvent(response.data?.created ? `Created and switched to git branch ${switchedBranch}.` : response.data?.switched === false ? `Already on git branch ${switchedBranch}.` : `Switched git branch to ${switchedBranch}.`, "info");
     requestGitFooterWebuiPayload(tabContext, { force: true });
@@ -7737,6 +7860,124 @@ async function applyFooterGitBranch(branch, { create = false, tabContext = activ
   }
 }
 
+function renderFooterBranchCreateForm(state = footerBranchPickerState) {
+  const form = make("form", "footer-branch-create-form");
+  form.setAttribute("aria-label", "Create new git branch");
+
+  const header = make("div", "footer-branch-create-header");
+  header.append(make("strong", "footer-branch-create-title", "Create new branch"));
+
+  const fields = make("div", "footer-branch-create-fields");
+  const typeField = make("div", "footer-branch-create-type-field");
+  const typeInput = make("input", "footer-branch-create-dropdown-inputfield");
+  typeInput.type = "text";
+  typeInput.value = footerBranchCreateType();
+  typeInput.placeholder = "type";
+  typeInput.setAttribute("aria-label", "Branch type suggestion or custom prefix");
+  typeInput.setAttribute("aria-haspopup", "listbox");
+  typeInput.autocomplete = "off";
+  typeInput.autocapitalize = "none";
+  typeInput.spellcheck = false;
+
+  const typeSuggestions = make("div", "footer-branch-type-suggestions");
+  typeSuggestions.setAttribute("role", "listbox");
+  typeSuggestions.hidden = true;
+  const renderTypeSuggestions = () => {
+    const filter = slugifyGitBranchPart(typeInput.value);
+    const matches = GIT_BRANCH_TYPE_SUGGESTIONS.filter((type) => !filter || type.includes(filter));
+    const shown = matches.length ? matches : GIT_BRANCH_TYPE_SUGGESTIONS;
+    typeSuggestions.replaceChildren(...shown.map((type) => {
+      const button = make("button", `footer-branch-type-suggestion${footerBranchCreateType(typeInput.value) === type ? " active" : ""}`, type);
+      button.type = "button";
+      button.setAttribute("role", "option");
+      button.setAttribute("aria-selected", footerBranchCreateType(typeInput.value) === type ? "true" : "false");
+      button.addEventListener("pointerdown", (event) => event.preventDefault());
+      button.addEventListener("click", () => {
+        typeInput.value = type;
+        updateFooterBranchCreateDraft({ type });
+        updatePreview();
+        typeSuggestions.hidden = true;
+        nameInput.focus();
+      });
+      return button;
+    }));
+  };
+
+  const slash = make("span", "footer-branch-create-slash", "/");
+
+  const nameInput = make("input", "footer-branch-create-input-field");
+  nameInput.type = "text";
+  nameInput.value = footerBranchCreateDraft.name;
+  nameInput.placeholder = "short-feature-name";
+  nameInput.autocomplete = "off";
+  nameInput.autocapitalize = "none";
+  nameInput.spellcheck = false;
+  nameInput.setAttribute("aria-label", "New branch name");
+
+  const submitButton = make("button", "footer-branch-create-submit", state.switching ? "Creating…" : "Create new branch");
+  submitButton.type = "submit";
+
+  const preview = make("div", "footer-branch-create-preview");
+  const updatePreview = () => {
+    const branchName = footerBranchCreateName();
+    preview.textContent = gitSwitchCreateCommandDisplay(branchName || footerBranchCreatePreviewName());
+    const submitDisabled = Boolean(state.switching) || !branchName;
+    submitButton.disabled = false;
+    submitButton.classList.toggle("footer-branch-create-submit-disabled", submitDisabled);
+    submitButton.setAttribute("aria-disabled", submitDisabled ? "true" : "false");
+    submitButton.dataset.tooltip = footerBranchCreateTooltip(branchName);
+    submitButton.setAttribute("aria-label", branchName ? `Create and switch to ${branchName}` : "Create new branch: enter both a branch type and name first");
+    submitButton.removeAttribute("title");
+  };
+
+  typeInput.addEventListener("focus", () => {
+    renderTypeSuggestions();
+    typeSuggestions.hidden = false;
+  });
+  typeInput.addEventListener("blur", () => {
+    setTimeout(() => { typeSuggestions.hidden = true; }, 120);
+  });
+  typeInput.addEventListener("input", () => {
+    updateFooterBranchCreateDraft({ type: typeInput.value });
+    updatePreview();
+    renderTypeSuggestions();
+    typeSuggestions.hidden = false;
+  });
+  typeInput.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      typeSuggestions.hidden = true;
+      return;
+    }
+    if (event.key !== "/" && event.key !== "Enter") return;
+    event.preventDefault();
+    typeSuggestions.hidden = true;
+    nameInput.focus();
+    nameInput.select();
+  });
+  nameInput.addEventListener("input", () => {
+    updateFooterBranchCreateDraft({ name: nameInput.value });
+    updatePreview();
+  });
+  nameInput.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter") return;
+    event.preventDefault();
+    form.requestSubmit();
+  });
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    if (state.switching) return;
+    const branchName = footerBranchCreateName();
+    createFooterGitBranch(branchName).catch((error) => addEvent(error.message || String(error), "error"));
+  });
+
+  updatePreview();
+  renderTypeSuggestions();
+  typeField.append(typeInput, typeSuggestions);
+  fields.append(typeField, slash, nameInput, submitButton);
+  form.append(header, fields, preview);
+  return form;
+}
+
 function renderFooterBranchPicker() {
   const picker = make("div", "footer-model-picker footer-branch-picker");
   picker.setAttribute("role", "listbox");
@@ -7753,7 +7994,7 @@ function renderFooterBranchPicker() {
     return picker;
   }
   if (state.loading && state.branches.length === 0) {
-    picker.append(make("div", "footer-model-picker-empty muted", "Loading local branches…"));
+    picker.append(make("div", "footer-model-picker-empty muted", "Loading existing local branches… New branch creation is available."), renderFooterBranchCreateForm(state));
     return picker;
   }
 
@@ -7761,16 +8002,11 @@ function renderFooterBranchPicker() {
   if (!state.loading && !hasOtherBranches) {
     const empty = make("div", "footer-model-picker-empty muted");
     empty.append(make("strong", undefined, "No other local branches available."), make("span", undefined, " Create a branch from the current HEAD to continue."));
-    const createButton = make("button", "footer-model-option footer-branch-create-option");
-    createButton.type = "button";
-    createButton.append(
-      make("span", "footer-model-option-main", "Create new branch"),
-      make("span", "footer-model-option-name", "prompts for a name, confirms, then runs git switch -c"),
-    );
-    createButton.addEventListener("click", () => createFooterGitBranch().catch((error) => addEvent(error.message || String(error), "error")));
-    picker.append(empty, createButton);
+    picker.append(empty);
   }
 
+  picker.append(renderFooterBranchCreateForm(state));
+
   for (const branch of state.branches) {
     const selected = branch.current || (!!state.current && branch.name === state.current);
     const disabled = selected || state.loading || !!state.switching;
@@ -7790,6 +8026,162 @@ function renderFooterBranchPicker() {
   return picker;
 }
 
+function footerScopedModelKey(model) {
+  return model?.provider && model?.id ? `${model.provider}/${model.id}` : "";
+}
+
+function readFooterScopedModelOrder() {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(FOOTER_SCOPED_MODEL_ORDER_STORAGE_KEY) || "[]");
+    return Array.isArray(parsed) ? parsed.filter((key) => typeof key === "string" && key.trim()) : [];
+  } catch {
+    return [];
+  }
+}
+
+function writeFooterScopedModelOrder(order) {
+  try {
+    localStorage.setItem(FOOTER_SCOPED_MODEL_ORDER_STORAGE_KEY, JSON.stringify([...new Set(order.filter(Boolean))]));
+  } catch {}
+}
+
+function orderedFooterScopedModels() {
+  const order = readFooterScopedModelOrder();
+  if (!order.length) return footerScopedModels;
+  const rank = new Map(order.map((key, index) => [key, index]));
+  return [...footerScopedModels].sort((a, b) => {
+    const aRank = rank.has(footerScopedModelKey(a)) ? rank.get(footerScopedModelKey(a)) : Number.MAX_SAFE_INTEGER;
+    const bRank = rank.has(footerScopedModelKey(b)) ? rank.get(footerScopedModelKey(b)) : Number.MAX_SAFE_INTEGER;
+    return aRank - bRank;
+  });
+}
+
+function commitFooterScopedModelOrder(order, { render = true, focusKey = "" } = {}) {
+  writeFooterScopedModelOrder(order);
+  footerScopedModels = orderedFooterScopedModels();
+  if (render) renderFooter();
+  if (focusKey) {
+    const movedButton = document.querySelector(`[data-footer-model-key="${CSS.escape(focusKey)}"]`);
+    if (movedButton) movedButton.focus();
+  }
+}
+
+function reorderFooterScopedModel(fromKey, toKey, { focus = true } = {}) {
+  if (!fromKey || !toKey || fromKey === toKey) return false;
+  const models = orderedFooterScopedModels();
+  const fromIndex = models.findIndex((model) => footerScopedModelKey(model) === fromKey);
+  const toIndex = models.findIndex((model) => footerScopedModelKey(model) === toKey);
+  if (fromIndex < 0 || toIndex < 0) return false;
+  const [moved] = models.splice(fromIndex, 1);
+  models.splice(toIndex, 0, moved);
+  commitFooterScopedModelOrder(models.map(footerScopedModelKey), { focusKey: focus ? fromKey : "" });
+  return true;
+}
+
+function moveFooterScopedModelByOffset(modelKey, offset) {
+  const models = orderedFooterScopedModels();
+  const fromIndex = models.findIndex((model) => footerScopedModelKey(model) === modelKey);
+  const toIndex = fromIndex + offset;
+  if (fromIndex < 0 || toIndex < 0 || toIndex >= models.length) return false;
+  const [moved] = models.splice(fromIndex, 1);
+  models.splice(toIndex, 0, moved);
+  commitFooterScopedModelOrder(models.map(footerScopedModelKey), { focusKey: modelKey });
+  return true;
+}
+
+function footerScopedModelButtons() {
+  return [...document.querySelectorAll(".footer-model-picker .footer-model-option[data-footer-model-key]")];
+}
+
+function footerScopedModelButtonFromPoint(clientX, clientY) {
+  return document.elementFromPoint(clientX, clientY)?.closest?.(".footer-model-option[data-footer-model-key]") || null;
+}
+
+function clearFooterScopedModelDragMarkers() {
+  for (const button of footerScopedModelButtons()) {
+    button.classList.remove("drag-over", "drag-over-before", "drag-over-after");
+  }
+}
+
+function commitVisibleFooterScopedModelOrder({ render = false, focusKey = "" } = {}) {
+  const order = footerScopedModelButtons().map((button) => button.dataset.footerModelKey).filter(Boolean);
+  if (!order.length) return;
+  commitFooterScopedModelOrder(order, { render, focusKey });
+}
+
+function moveVisibleFooterScopedModel(fromKey, targetButton, clientY) {
+  if (!fromKey || !targetButton) return false;
+  const sourceButton = document.querySelector(`[data-footer-model-key="${CSS.escape(fromKey)}"]`);
+  if (!sourceButton || sourceButton === targetButton) return false;
+  const parent = sourceButton.parentElement;
+  if (!parent || targetButton.parentElement !== parent) return false;
+  const targetKey = targetButton.dataset.footerModelKey || "";
+  const rect = targetButton.getBoundingClientRect();
+  const insertBefore = clientY < rect.top + rect.height / 2;
+
+  clearFooterScopedModelDragMarkers();
+  targetButton.classList.add("drag-over", insertBefore ? "drag-over-before" : "drag-over-after");
+  footerScopedModelLastDragOverKey = `${targetKey}:${insertBefore ? "before" : "after"}`;
+
+  if (insertBefore) parent.insertBefore(sourceButton, targetButton);
+  else parent.insertBefore(sourceButton, targetButton.nextSibling);
+  commitVisibleFooterScopedModelOrder({ render: false });
+  return true;
+}
+
+function beginFooterScopedModelPointerDrag(event, modelKey) {
+  if (event.button !== 0 || !modelKey) return;
+  footerScopedModelPointerDrag = { modelKey, pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, active: false };
+  window.addEventListener("pointermove", updateFooterScopedModelPointerDrag, { capture: true });
+  window.addEventListener("pointerup", endFooterScopedModelPointerDrag, { capture: true });
+  window.addEventListener("pointercancel", endFooterScopedModelPointerDrag, { capture: true });
+}
+
+function updateFooterScopedModelPointerDrag(event) {
+  const drag = footerScopedModelPointerDrag;
+  if (!drag || drag.pointerId !== event.pointerId) return;
+  const distance = Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY);
+  if (!drag.active && distance < FOOTER_SCOPED_MODEL_POINTER_DRAG_THRESHOLD_PX) return;
+  event.preventDefault();
+  if (!drag.active) {
+    drag.active = true;
+    footerScopedModelDragKey = drag.modelKey;
+    footerScopedModelLastDragOverKey = "";
+    clearTimeout(pointerActivationTimeout);
+    pointerActivationTimeout = null;
+    activePointerActivation = null;
+    deferredUiRenderCallbacks.delete("footer");
+    const sourceButton = document.querySelector(`[data-footer-model-key="${CSS.escape(drag.modelKey)}"]`);
+    if (sourceButton) sourceButton.classList.add("dragging");
+  }
+  const targetButton = footerScopedModelButtonFromPoint(event.clientX, event.clientY);
+  if (!targetButton || targetButton.dataset.footerModelKey === drag.modelKey) return;
+  const rect = targetButton.getBoundingClientRect();
+  const markerKey = `${targetButton.dataset.footerModelKey}:${event.clientY < rect.top + rect.height / 2 ? "before" : "after"}`;
+  if (markerKey === footerScopedModelLastDragOverKey) return;
+  moveVisibleFooterScopedModel(drag.modelKey, targetButton, event.clientY);
+}
+
+function endFooterScopedModelPointerDrag(event) {
+  const drag = footerScopedModelPointerDrag;
+  if (!drag || drag.pointerId !== event.pointerId) return;
+  window.removeEventListener("pointermove", updateFooterScopedModelPointerDrag, { capture: true });
+  window.removeEventListener("pointerup", endFooterScopedModelPointerDrag, { capture: true });
+  window.removeEventListener("pointercancel", endFooterScopedModelPointerDrag, { capture: true });
+  const wasActive = drag.active;
+  const sourceButton = document.querySelector(`[data-footer-model-key="${CSS.escape(drag.modelKey)}"]`);
+  footerScopedModelPointerDrag = null;
+  footerScopedModelDragKey = "";
+  footerScopedModelLastDragOverKey = "";
+  clearFooterScopedModelDragMarkers();
+  if (sourceButton) sourceButton.classList.remove("dragging");
+  if (wasActive) {
+    footerScopedModelSuppressClickUntil = Date.now() + 250;
+    event.preventDefault();
+    commitVisibleFooterScopedModelOrder({ render: false, focusKey: drag.modelKey });
+  }
+}
+
 async function applyFooterModel(model) {
   if (!model?.provider || !model?.id) return;
   const tabContext = activeTabContext();
@@ -7815,7 +8207,7 @@ function renderFooterModelPicker() {
   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(", ")}` : ""}`));
+  picker.append(make("div", "footer-model-picker-source", "Drag models to reorder · Alt+↑/↓ moves focused model"));
   if (footerScopedModels.length === 0) {
     const empty = make("div", "footer-model-picker-empty muted");
     empty.append(
@@ -7826,10 +8218,16 @@ function renderFooterModelPicker() {
     return picker;
   }
   const current = currentState?.model;
+  footerScopedModels = orderedFooterScopedModels();
   for (const model of footerScopedModels) {
     const selected = current?.provider === model.provider && current?.id === model.id;
-    const button = make("button", `footer-model-option${selected ? " active" : ""}`);
+    const modelKey = footerScopedModelKey(model);
+    const dragging = footerScopedModelDragKey === modelKey;
+    const dragOver = footerScopedModelDragKey && footerScopedModelLastDragOverKey === modelKey;
+    const button = make("button", `footer-model-option${selected ? " active" : ""}${dragging ? " dragging" : ""}${dragOver ? " drag-over" : ""}`);
     button.type = "button";
+    button.draggable = false;
+    button.dataset.footerModelKey = modelKey;
     button.setAttribute("role", "option");
     button.setAttribute("aria-selected", selected ? "true" : "false");
     button.title = `${model.provider}/${model.id}${model.name ? ` · ${model.name}` : ""}`;
@@ -7837,7 +8235,19 @@ function renderFooterModelPicker() {
       make("span", "footer-model-option-main", `${model.provider}/${model.id}`),
       make("span", "footer-model-option-name", model.name || ""),
     );
-    button.addEventListener("click", () => applyFooterModel(model));
+    button.addEventListener("click", (event) => {
+      if (Date.now() < footerScopedModelSuppressClickUntil) {
+        event.preventDefault();
+        return;
+      }
+      applyFooterModel(model);
+    });
+    button.addEventListener("keydown", (event) => {
+      if (!event.altKey || (event.key !== "ArrowUp" && event.key !== "ArrowDown")) return;
+      event.preventDefault();
+      moveFooterScopedModelByOffset(modelKey, event.key === "ArrowUp" ? -1 : 1);
+    });
+    button.addEventListener("pointerdown", (event) => beginFooterScopedModelPointerDrag(event, modelKey));
     picker.append(button);
   }
   return picker;
@@ -8653,8 +9063,79 @@ function stripTodoProgressLines(text, { streaming = false } = {}) {
   return kept.join("\n").replace(/\n{3,}/g, "\n\n").trim();
 }
 
+function parseTodoProgressItemLine(line) {
+  const match = String(line || "").match(/^\s*(?:(?:[-*]|\d+[.)])\s*)?\[( |x|X|-)\]\s+(.+)$/);
+  if (!match) return null;
+  const mark = match[1].toLowerCase();
+  return { status: mark === "x" ? "done" : mark === "-" ? "partial" : "todo", text: match[2].trim() };
+}
+
+function todoProgressStatusLabel(status) {
+  if (status === "done") return "[x]";
+  if (status === "partial") return "[-]";
+  return "[ ]";
+}
+
+function liveTodoProgressWidgetLinesFromText(text) {
+  if (!isOptionalFeatureEnabled("todoProgressWidget")) return null;
+  const raw = String(text || "");
+  if (!raw.trim()) return null;
+
+  let inFence = false;
+  let goal = "";
+  let current = [];
+  const blocks = [];
+  const flush = () => {
+    if (current.length) blocks.push(current);
+    current = [];
+  };
+
+  for (const line of raw.split(/\r?\n/)) {
+    if (/^\s*```/.test(line)) {
+      inFence = !inFence;
+      flush();
+      continue;
+    }
+    if (inFence) continue;
+
+    const clean = stripAnsi(line).trim();
+    const goalMatch = clean.match(/^Goal\s*[:：]\s*(.+)$/i);
+    if (goalMatch?.[1]?.trim()) goal = goalMatch[1].trim();
+
+    const item = parseTodoProgressItemLine(clean);
+    if (item) {
+      current.push(item);
+      continue;
+    }
+    flush();
+  }
+  flush();
+
+  const items = blocks.at(-1) || [];
+  if (!items.length) return null;
+
+  const done = items.filter((item) => item.status === "done").length;
+  const partial = items.filter((item) => item.status === "partial").length;
+  const lines = [];
+  if (goal) lines.push(`Goal: ${goal}`);
+  lines.push(`Todo ${done}/${items.length} done${partial ? `, ${partial} partial` : ""}`);
+  for (const item of items) lines.push(`${todoProgressStatusLabel(item.status)} ${item.text}`);
+  return lines;
+}
+
+function syncLiveTodoProgressWidgetFromText(text, tabId = activeTabId) {
+  const lines = liveTodoProgressWidgetLinesFromText(text);
+  if (!lines) return false;
+  setWidgetForTab(tabId, "todo-progress", { method: "setWidget", widgetKey: "todo-progress", widgetLines: lines, tabId, live: true });
+  updateOptionalFeatureAvailability();
+  if (tabId === activeTabId) renderWidgets();
+  return true;
+}
+
 function parseTodoProgressWidget(lines) {
   const cleanLines = lines.map(stripAnsi).map((line) => line.trim()).filter(Boolean);
+  const goalLine = cleanLines.find((line) => /^Goal\s*[:：]/i.test(line));
+  const goal = goalLine ? goalLine.replace(/^Goal\s*[:：]\s*/i, "").trim() : "";
   const headerIndex = cleanLines.findIndex((line) => /^Todo\s+\d+\/\d+\s+done/i.test(line));
   if (headerIndex === -1) return null;
 
@@ -8665,16 +9146,16 @@ function parseTodoProgressWidget(lines) {
   const items = [];
   let footer = "";
   for (const line of cleanLines.slice(headerIndex + 1)) {
-    const item = line.match(/^\[( |x|X|-)\]\s+(.+)$/);
+    const item = parseTodoProgressItemLine(line);
     if (item) {
-      const mark = item[1].toLowerCase();
-      items.push({ status: mark === "x" ? "done" : mark === "-" ? "partial" : "todo", text: item[2].trim() });
+      items.push(item);
     } else if (/^Scroll\s+/i.test(line)) {
       footer = line;
     }
   }
 
   return {
+    goal,
     done: Number.parseInt(match[1], 10) || 0,
     total: Number.parseInt(match[2], 10) || items.length,
     partial: Number.parseInt(match[3] || "0", 10) || 0,
@@ -8709,6 +9190,7 @@ function renderTodoProgressWidget(_key, lines) {
   const fill = make("span", "todo-widget-progress-fill");
   fill.style.width = `${percent}%`;
   progress.append(fill);
+  if (todo.goal) summary.append(make("div", "todo-widget-goal", `Goal: ${todo.goal}`));
   summary.append(header, progress);
 
   const body = make("div", "todo-widget-body");
@@ -12888,14 +13370,201 @@ function appendMarkdownParagraph(parent, lines) {
   parent.append(paragraph);
 }
 
-function appendMarkdownCodeBlock(parent, code, language = "") {
+function setMarkdownCodeCopyButtonState(button, copied) {
+  clearTimeout(button._markdownCodeCopyResetTimer);
+  const label = button._markdownCodeCopyDefaultLabel || "Copy";
+  button.classList.toggle("copied", copied);
+  button.textContent = copied ? "Copied" : label;
+  button.title = copied ? "Copied code block" : `${label} code block`;
+  button.setAttribute("aria-label", button.title);
+  if (copied) {
+    button._markdownCodeCopyResetTimer = setTimeout(() => setMarkdownCodeCopyButtonState(button, false), 1400);
+  }
+}
+
+async function copyMarkdownCodeBlock(button) {
+  const wrapper = button.closest(".markdown-code-block");
+  const codeNode = wrapper?.querySelector(":scope > pre.markdown-code > code, :scope > details.markdown-mermaid-source pre.markdown-code > code");
+  const text = codeNode?.textContent || "";
+  if (!text) {
+    addEvent("code block has no text to copy", "warn");
+    return;
+  }
+  button.disabled = true;
+  try {
+    await copyText(text);
+    setMarkdownCodeCopyButtonState(button, true);
+  } catch (error) {
+    addEvent(`code block copy failed: ${error.message || String(error)}`, "warn");
+  } finally {
+    button.disabled = false;
+  }
+}
+
+function attachMarkdownCodeCopyButton(wrapper, label = "Copy") {
+  if (!wrapper) return null;
+  const existing = wrapper.querySelector(":scope > .markdown-code-copy-button");
+  if (existing) return existing;
+  const button = make("button", "markdown-code-copy-button", label);
+  button.type = "button";
+  button._markdownCodeCopyDefaultLabel = label;
+  setMarkdownCodeCopyButtonState(button, false);
+  button.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    copyMarkdownCodeBlock(button);
+  });
+  wrapper.classList.add("has-code-copy-action");
+  wrapper.append(button);
+  return button;
+}
+
+function normalizedMarkdownLanguage(language) {
+  return String(language || "").trim().toLowerCase();
+}
+
+function isMermaidLanguage(language) {
+  return MERMAID_LANGUAGES.has(normalizedMarkdownLanguage(language));
+}
+
+function mermaidCssVar(styles, name, fallback) {
+  return styles.getPropertyValue(name).trim() || fallback;
+}
+
+function mermaidConfig() {
+  const styles = getComputedStyle(document.documentElement);
+  const text = mermaidCssVar(styles, "--ctp-text", "#cdd6f4");
+  const subtext = mermaidCssVar(styles, "--ctp-subtext", "#bac2de");
+  const surface = mermaidCssVar(styles, "--ctp-surface", "#313244");
+  const base = mermaidCssVar(styles, "--ctp-base", "#1e1e2e");
+  const crust = mermaidCssVar(styles, "--ctp-crust", "#11111b");
+  const mauve = mermaidCssVar(styles, "--ctp-mauve", "#cba6f7");
+  const blue = mermaidCssVar(styles, "--ctp-blue", "#89b4fa");
+  const teal = mermaidCssVar(styles, "--ctp-teal", "#94e2d5");
+  const yellow = mermaidCssVar(styles, "--ctp-yellow", "#f9e2af");
+  const red = mermaidCssVar(styles, "--ctp-red", "#f38ba8");
+  return {
+    startOnLoad: false,
+    securityLevel: "strict",
+    logLevel: "error",
+    maxTextSize: MERMAID_MAX_TEXT_SIZE,
+    theme: "base",
+    flowchart: { htmlLabels: false },
+    themeVariables: {
+      darkMode: true,
+      background: "transparent",
+      mainBkg: base,
+      secondBkg: surface,
+      primaryColor: surface,
+      primaryTextColor: text,
+      primaryBorderColor: mauve,
+      secondaryColor: base,
+      secondaryTextColor: text,
+      secondaryBorderColor: blue,
+      tertiaryColor: crust,
+      tertiaryTextColor: text,
+      tertiaryBorderColor: teal,
+      lineColor: subtext,
+      textColor: text,
+      titleColor: teal,
+      nodeTextColor: text,
+      clusterBkg: crust,
+      clusterBorder: mauve,
+      edgeLabelBackground: base,
+      noteBkgColor: crust,
+      noteTextColor: text,
+      noteBorderColor: yellow,
+      errorBkgColor: crust,
+      errorTextColor: red,
+      fontFamily: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    },
+  };
+}
+
+function initializeMermaid(mermaid) {
+  const config = mermaidConfig();
+  const signature = JSON.stringify(config);
+  if (signature !== mermaidThemeSignature) {
+    mermaid.initialize(config);
+    mermaidThemeSignature = signature;
+  }
+}
+
+async function loadMermaid() {
+  if (!mermaidModulePromise) {
+    mermaidModulePromise = import(MERMAID_MODULE_URL)
+      .then((module) => module.default || module)
+      .catch((error) => {
+        mermaidModulePromise = null;
+        throw error;
+      });
+  }
+  const mermaid = await mermaidModulePromise;
+  initializeMermaid(mermaid);
+  return mermaid;
+}
+
+function mermaidRenderErrorMessage(error) {
+  return String(error?.str || error?.message || error || "Unknown Mermaid render error").trim();
+}
+
+async function renderMermaidDiagram(diagram, status, source) {
+  const token = `${Date.now().toString(36)}-${++mermaidRenderSequence}`;
+  diagram.dataset.mermaidRenderToken = token;
+  try {
+    if (source.length > MERMAID_MAX_TEXT_SIZE) throw new Error(`Mermaid diagram is too large (${source.length} characters, max ${MERMAID_MAX_TEXT_SIZE}).`);
+    const mermaid = await loadMermaid();
+    const id = `mermaid-${token.replace(/[^a-z0-9_-]/gi, "-")}`;
+    const { svg, bindFunctions } = await mermaid.render(id, source);
+    if (!diagram.isConnected || diagram.dataset.mermaidRenderToken !== token) return;
+    diagram.innerHTML = svg;
+    bindFunctions?.(diagram);
+    diagram.classList.add("rendered");
+    status.textContent = "";
+    status.hidden = true;
+  } catch (error) {
+    if (!diagram.isConnected || diagram.dataset.mermaidRenderToken !== token) return;
+    diagram.classList.add("render-error");
+    status.hidden = false;
+    status.classList.add("error");
+    status.textContent = `Mermaid render failed: ${mermaidRenderErrorMessage(error)}`;
+  }
+}
+
+function appendMarkdownMermaidBlock(parent, code) {
+  const source = String(code || "").replace(/\n+$/g, "");
+  const wrapper = make("div", "markdown-code-block markdown-mermaid-block");
+  wrapper.append(make("div", "markdown-code-language", "mermaid"));
+  const diagram = make("div", "markdown-mermaid-diagram");
+  diagram.setAttribute("role", "img");
+  diagram.setAttribute("aria-label", "Mermaid diagram");
+  const status = make("div", "markdown-mermaid-status muted", "Rendering Mermaid diagram…");
+  const sourceDetails = make("details", "markdown-mermaid-source");
+  sourceDetails.append(make("summary", undefined, "Mermaid source"));
+  const pre = make("pre", "code-block markdown-code");
+  const codeNode = make("code", "language-mermaid");
+  codeNode.textContent = source;
+  pre.append(codeNode);
+  sourceDetails.append(pre);
+  wrapper.append(diagram, status, sourceDetails);
+  attachMarkdownCodeCopyButton(wrapper, "Copy source");
+  parent.append(wrapper);
+  queueMicrotask(() => renderMermaidDiagram(diagram, status, source));
+}
+
+function appendMarkdownCodeBlock(parent, code, language = "", { closed = true } = {}) {
+  if (closed && isMermaidLanguage(language)) {
+    appendMarkdownMermaidBlock(parent, code);
+    return;
+  }
   const wrapper = make("div", "markdown-code-block");
   if (language) wrapper.append(make("div", "markdown-code-language", language));
   const pre = make("pre", "code-block markdown-code");
   const codeNode = make("code", language ? `language-${language.replace(/[^a-z0-9_-]/gi, "")}` : "");
-  codeNode.textContent = code.replace(/\n+$/g, "");
+  codeNode.textContent = String(code || "").replace(/\n+$/g, "");
   pre.append(codeNode);
   wrapper.append(pre);
+  attachMarkdownCodeCopyButton(wrapper);
   parent.append(wrapper);
 }
 
@@ -12993,8 +13662,9 @@ function renderMarkdownInto(parent, text) {
         codeLines.push(lines[index]);
         index += 1;
       }
-      if (index < lines.length) index += 1;
-      appendMarkdownCodeBlock(parent, codeLines.join("\n"), language);
+      const closed = index < lines.length;
+      if (closed) index += 1;
+      appendMarkdownCodeBlock(parent, codeLines.join("\n"), language, { closed });
       continue;
     }
     if (markdownTableSeparator(lines[index + 1]) && line.includes("|")) {
@@ -16991,6 +17661,7 @@ function handleMessageUpdate(event) {
     if (typeof partialText === "string") streamRawText = partialText;
     else if (update.type === "text_end" && typeof update.content === "string") streamRawText = update.content;
     else streamRawText += delta;
+    syncLiveTodoProgressWidgetFromText(streamRawText, event.tabId || activeTabId);
     setRunIndicatorActivity("Writing response…", { scroll: false });
     if (streamToolCallSeen || streamBubble) renderStreamingAssistantText();
     else scheduleStreamingAssistantTextRender();
@@ -17304,6 +17975,7 @@ async function refreshModels(tabContext = activeTabContext()) {
   if (!isCurrentTabContext(tabContext)) return;
   availableModels = models;
   footerScopedModels = scopedModels;
+  footerScopedModels = orderedFooterScopedModels();
   footerScopedModelPatterns = scopedModelPatterns;
   footerScopedModelSource = scopedModelSource;
   if (scopedModelError) addEvent(`failed to load scoped models: ${scopedModelError.message}`, "warn");
@@ -18605,18 +19277,17 @@ function handleExtensionUiRequest(request) {
     }
     case "setWidget": {
       const widgetKey = request.widgetKey || request.id;
+      const requestTabId = request.tabId || activeTabId;
       if (widgetKey === "pi-remote-webui") {
-        widgets.delete(widgetKey);
+        setWidgetForTab(requestTabId, widgetKey, { ...request, widgetLines: undefined });
         if (Array.isArray(request.widgetLines)) {
           mirrorRemoteWebuiWidgetToTranscript(widgetKey, request.widgetLines, request);
           showRemoteWebuiQrPopup(widgetKey, request.widgetLines, request);
         } else {
           closeRemoteWebuiQrPopup();
         }
-      } else if (Array.isArray(request.widgetLines)) {
-        widgets.set(widgetKey, request);
       } else {
-        widgets.delete(widgetKey);
+        setWidgetForTab(requestTabId, widgetKey, request);
       }
       updateOptionalFeatureAvailability();
       renderWidgets();
@@ -18793,7 +19464,7 @@ function handleEvent(event) {
       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" });
       clearContextUsageUnknownAfterCompaction(event.tabId || activeTabId);
       statusEntries.clear();
-      widgets.clear();
+      clearWidgetsForTab(event.tabId || activeTabId);
       latestBtwWidgetPayload = null;
       btwWidgetDismissedId = "";
       btwWidgetComposerOpen = false;