@firstpick/pi-package-webui 0.3.1 → 0.3.3

package/public/app.js

@@ -5,7 +5,11 @@ const elements = {
   webuiDevBadge: $("#webuiDevBadge"),
   tabBar: $("#tabBar"),
   terminalTabsToggleButton: $("#terminalTabsToggleButton"),
+  newTabMenu: $("#newTabMenu"),
   newTabButton: $("#newTabButton"),
+  newTabMenuPanel: $("#newTabMenuPanel"),
+  newTabCurrentDirectoryButton: $("#newTabCurrentDirectoryButton"),
+  newTabChooseDirectoryButton: $("#newTabChooseDirectoryButton"),
   closeAllTabsButton: $("#closeAllTabsButton"),
   statusBar: $("#statusBar"),
   serverOfflinePanel: $("#serverOfflinePanel"),
@@ -46,6 +50,10 @@ const elements = {
   nativeCommandMenu: $("#nativeCommandMenu"),
   nativeSkillsButton: $("#nativeSkillsButton"),
   nativeToolsButton: $("#nativeToolsButton"),
+  appRunnerMenu: $("#appRunnerMenu"),
+  appRunnerInfoButton: $("#appRunnerInfoButton"),
+  appRunnerMenuButton: $("#appRunnerMenuButton"),
+  appRunnerMenuPanel: $("#appRunnerMenuPanel"),
   optionsMenuButton: $("#optionsMenuButton"),
   optionsMenu: $("#optionsMenu"),
   optionsResumeButton: $("#optionsResumeButton"),
@@ -63,6 +71,12 @@ const elements = {
   gitWorkflowOutput: $("#gitWorkflowOutput"),
   gitWorkflowActions: $("#gitWorkflowActions"),
   gitWorkflowCancelButton: $("#gitWorkflowCancelButton"),
+  gitPrDialog: $("#gitPrDialog"),
+  gitPrTitleInput: $("#gitPrTitleInput"),
+  gitPrBodyEditor: $("#gitPrBodyEditor"),
+  gitPrStatus: $("#gitPrStatus"),
+  gitPrCancelButton: $("#gitPrCancelButton"),
+  gitPrCreateButton: $("#gitPrCreateButton"),
   modelSelect: $("#modelSelect"),
   setModelButton: $("#setModelButton"),
   thinkingSelect: $("#thinkingSelect"),
@@ -109,6 +123,13 @@ const elements = {
   promptListDialogLoadButton: $("#promptListDialogLoadButton"),
   promptListSaveButton: $("#promptListSaveButton"),
   promptListRunListButton: $("#promptListRunListButton"),
+  attachmentTextDialog: $("#attachmentTextDialog"),
+  attachmentTextTitle: $("#attachmentTextTitle"),
+  attachmentTextMeta: $("#attachmentTextMeta"),
+  attachmentTextEditor: $("#attachmentTextEditor"),
+  attachmentTextStatus: $("#attachmentTextStatus"),
+  attachmentTextCancelButton: $("#attachmentTextCancelButton"),
+  attachmentTextSaveButton: $("#attachmentTextSaveButton"),
   commandSearchInput: $("#commandSearchInput"),
   commandsBox: $("#commandsBox"),
   eventLog: $("#eventLog"),
@@ -139,6 +160,9 @@ const elements = {
   nativeCommandBody: $("#nativeCommandBody"),
   nativeCommandError: $("#nativeCommandError"),
   nativeCommandActions: $("#nativeCommandActions"),
+  appRunnerInfoDialog: $("#appRunnerInfoDialog"),
+  appRunnerInfoBody: $("#appRunnerInfoBody"),
+  appRunnerInfoCloseButton: $("#appRunnerInfoCloseButton"),
 };
 
 let currentState = null;
@@ -147,6 +171,7 @@ let activeTabId = null;
 let activeTabGeneration = 0;
 let tabDrafts = new Map();
 let tabAttachments = new Map();
+let activeTextAttachmentEditor = null;
 let tabActivities = new Map();
 let tabSeenCompletionSerials = new Map();
 let streamBubble = null;
@@ -174,14 +199,20 @@ let refreshTabsTimer = null;
 let foregroundReconcileTimer = null;
 let eventSource = null;
 let activeDialog = null;
+let activeGitPrDialogResolve = null;
 let nativeCommandTabId = null;
 let pathPickerState = null;
+let firstTerminalCwdPromptShown = false;
 let pathFastPicks = [];
 let pathFastPicksReady = false;
 let pathFastPicksLoadPromise = null;
 let mobileTabsExpanded = false;
 let openTerminalTabGroupKey = null;
+let newTabMenuOpen = false;
 let nativeCommandMenuOpen = false;
+let appRunnerMenuOpen = false;
+let appRunnerCustomDraft = { id: "", label: "", command: "./", path: "", args: "" };
+let appRunnerFileBrowserState = { open: false, loading: false, path: "", data: null, error: "" };
 let optionsMenuOpen = false;
 let availableCommands = [];
 let rawAvailableCommands = [];
@@ -239,6 +270,7 @@ let customBackgroundLoading = false;
 let footerScopedModels = [];
 let footerScopedModelPatterns = [];
 let footerScopedModelSource = "none";
+const contextUsageUnknownAfterCompactionByTab = new Map();
 let autoFollowChat = true;
 let chatFollowFrame = null;
 let chatFollowSettleTimer = null;
@@ -288,10 +320,13 @@ const ATTACHMENT_MAX_FILE_BYTES = 64 * 1024 * 1024;
 const ATTACHMENT_MAX_TOTAL_BYTES = 64 * 1024 * 1024;
 const ATTACHMENT_INLINE_IMAGE_MAX_BYTES = 8 * 1024 * 1024;
 const ATTACHMENT_INLINE_IMAGE_TOTAL_MAX_BYTES = 16 * 1024 * 1024;
+const LONG_INPUT_ATTACHMENT_LINE_THRESHOLD = 20;
+const LONG_INPUT_ATTACHMENT_MIME_TYPE = "text/plain";
 const INLINE_IMAGE_MIME_TYPES = new Set(["image/png", "image/jpeg", "image/webp", "image/gif"]);
 const BACKGROUND_IMAGE_MIME_TYPES = new Set(["image/png", "image/jpeg", "image/webp", "image/gif"]);
 const DEFAULT_THEME_NAME = "catppuccin-mocha";
 const MOBILE_VIEW_QUERY = "(max-width: 720px), (max-device-width: 720px), (pointer: coarse) and (hover: none)";
+const SIDE_PANEL_OVERLAY_QUERY = "(max-width: 1050px), (max-device-width: 720px), (pointer: coarse) and (hover: none)";
 const CHAT_BOTTOM_THRESHOLD_PX = 96;
 const STICKY_USER_PROMPT_PREVIEW_LIMIT = 220;
 const STICKY_USER_PROMPT_TOP_GAP_PX = 12;
@@ -320,10 +355,12 @@ const BLOCKED_TAB_NOTIFICATION_TAG_PREFIX = "pi-webui-blocked-tab";
 const AGENT_DONE_NOTIFICATION_TAG_PREFIX = "pi-webui-agent-done";
 const BLOCKED_TAB_NOTIFICATION_ICON = "/icon-192.png";
 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 todoProgressWidgetExpandedByTab = new Map();
 const releaseNpmOutputExpandedByTab = new Map();
+const appRunnerDataByTab = new Map();
 const liveToolRuns = new Map();
 const liveToolCards = new Map();
 const liveToolRenderQueue = new Map();
@@ -410,6 +447,8 @@ const OPTIONAL_FEATURES = [
 const OPTIONAL_FEATURE_BY_ID = new Map(OPTIONAL_FEATURES.map((feature) => [feature.id, feature]));
 const OPTIONAL_COMMAND_FEATURES = new Map([
   ["git-staged-msg", "gitWorkflow"],
+  ["git-branch-name", "gitWorkflow"],
+  ["pr", "gitWorkflow"],
   ["release-npm", "releaseNpm"],
   ["release-aur", "releaseAur"],
   ["skills", "tuiSkillsCommand"],
@@ -441,16 +480,42 @@ const SETTINGS_AUTOCOMPLETE_OPTIONS = ["3", "5", "7", "10", "15", "20"];
 const optionalFeatureInstallInProgress = new Set();
 const gitFooterPayloadRefreshInFlightByTab = new Set();
 
+function createGitWorkflowActionsDone(patch = {}) {
+  return {
+    stage: false,
+    message: false,
+    commit: false,
+    push: false,
+    ...patch,
+  };
+}
+
+function gitWorkflowActionDone(workflow, process) {
+  return !!createGitWorkflowActionsDone(workflow?.actionsDone)[process];
+}
+
+function gitWorkflowActionDonePatch(workflow, process) {
+  return { actionsDone: createGitWorkflowActionsDone({ ...workflow?.actionsDone, [process]: true }) };
+}
+
 function createGitWorkflowState() {
   return {
     active: false,
     step: "idle",
+    process: "stage",
     busy: false,
     runId: 0,
     output: "",
     error: "",
     message: null,
     messageRequestedAt: 0,
+    branchName: "",
+    branchNameRequestedAt: 0,
+    actionsDone: createGitWorkflowActionsDone(),
+    prMode: false,
+    prBranch: "",
+    pr: null,
+    prRequestedAt: 0,
   };
 }
 
@@ -494,7 +559,13 @@ function clearGitWorkflowForTab(tabId) {
   }
 }
 
-const GIT_WORKFLOW_STEPS = ["Stage", "Message", "Commit", "Push"];
+const GIT_WORKFLOW_PROCESSES = [
+  { value: "stage", label: "Stage" },
+  { value: "message", label: "Message" },
+  { value: "commit", label: "Commit" },
+  { value: "push", label: "Push" },
+];
+const GIT_WORKFLOW_PROCESS_VALUES = new Set(GIT_WORKFLOW_PROCESSES.map((process) => process.value));
 const ACTION_FEEDBACK_REACTIONS = {
   up: { icon: "👍", label: "Good job", title: "Good job!" },
   down: { icon: "👎", label: "Avoid this", title: "Avoid this" },
@@ -506,11 +577,32 @@ const GIT_WORKFLOW_ACTIVE_INDEX = {
   generate: 1,
   generating: 1,
   message: 2,
+  branchNaming: 2,
+  branching: 2,
   committing: 2,
   push: 3,
   pushing: 3,
+  prGenerating: 3,
+  prReview: 3,
+  prCreating: 3,
   done: 4,
 };
+const GIT_WORKFLOW_CREATE_PR_TOOLTIP = [
+  "Create PR:",
+  "1. Ask Pi to generate a type/feature-name branch from staged changes.",
+  "2. Read dev/COMMIT/staged-branch-name.txt.",
+  "3. Let you confirm or edit the generated branch name.",
+  "4. Run git switch -c <branch>.",
+  "5. Return here so you can choose Commit short or Commit long on that branch.",
+].join("\n");
+const GIT_WORKFLOW_MANUAL_BRANCH_TOOLTIP = [
+  "Manual branch:",
+  "1. Skip agent branch-name generation.",
+  "2. Prefill a branch from the commit message if possible.",
+  "3. Let you type or edit the type/feature-name branch name.",
+  "4. Run git switch -c <branch>.",
+  "5. Return here so you can choose Commit short or Commit long on that branch.",
+].join("\n");
 
 function make(tag, className, text) {
   const node = document.createElement(tag);
@@ -527,6 +619,10 @@ function isMobileView() {
   return mobileViewMedia?.matches || false;
 }
 
+function isSidePanelOverlayView() {
+  return sidePanelOverlayMedia?.matches || false;
+}
+
 function readStoredSidePanelCollapsed() {
   try {
     const stored = localStorage.getItem(SIDE_PANEL_STORAGE_KEY);
@@ -788,6 +884,7 @@ function setComposerActionsOpen(open) {
   if (!shouldOpen) {
     setPublishMenuOpen(false);
     setNativeCommandMenuOpen(false);
+    setAppRunnerMenuOpen(false);
     setOptionsMenuOpen(false);
   }
 }
@@ -923,7 +1020,7 @@ function setMobileTabsExpanded(expanded) {
 }
 
 function syncMobileSidePanelState(collapsed) {
-  const showBackdrop = !collapsed && isMobileView();
+  const showBackdrop = !collapsed && isSidePanelOverlayView();
   elements.sidePanelBackdrop.hidden = !showBackdrop;
   if (showBackdrop) elements.sidePanel.setAttribute("aria-modal", "true");
   else elements.sidePanel.removeAttribute("aria-modal");
@@ -937,11 +1034,11 @@ function setSidePanelCollapsed(collapsed, { persist = true, focusPanel = false }
   elements.sidePanelExpandButton.setAttribute("aria-expanded", collapsed ? "false" : "true");
   syncMobileSidePanelState(collapsed);
 
-  if (!collapsed && focusPanel && isMobileView()) {
+  if (!collapsed && focusPanel && isSidePanelOverlayView()) {
     requestAnimationFrame(() => elements.toggleSidePanelButton.focus());
   }
 
-  if (!persist || isMobileView()) return;
+  if (!persist || isSidePanelOverlayView()) return;
   try {
     localStorage.setItem(SIDE_PANEL_STORAGE_KEY, collapsed ? "1" : "0");
   } catch {
@@ -950,7 +1047,7 @@ function setSidePanelCollapsed(collapsed, { persist = true, focusPanel = false }
 }
 
 function restoreSidePanelState() {
-  if (isMobileView()) {
+  if (isSidePanelOverlayView()) {
     setSidePanelCollapsed(true, { persist: false });
     return;
   }
@@ -964,7 +1061,7 @@ function bindMobileViewChanges() {
     setComposerActionsOpen(false);
     setMobileFooterExpanded(false);
     setMobileTabsExpanded(false);
-    if (event.matches) {
+    if (event.matches || isSidePanelOverlayView()) {
       setSidePanelCollapsed(true, { persist: false });
       return;
     }
@@ -975,6 +1072,20 @@ function bindMobileViewChanges() {
   else mobileViewMedia.addListener?.(syncForViewport);
 }
 
+function bindSidePanelOverlayViewChanges() {
+  if (!sidePanelOverlayMedia || sidePanelOverlayMedia === mobileViewMedia) return;
+  const syncForViewport = (event) => {
+    if (event.matches) {
+      setSidePanelCollapsed(true, { persist: false });
+      return;
+    }
+    const stored = readStoredSidePanelCollapsed();
+    setSidePanelCollapsed(stored ?? false, { persist: false });
+  };
+  if (typeof sidePanelOverlayMedia.addEventListener === "function") sidePanelOverlayMedia.addEventListener("change", syncForViewport);
+  else sidePanelOverlayMedia.addListener?.(syncForViewport);
+}
+
 function updateVisualViewportVars() {
   const viewport = window.visualViewport;
   const viewportHeight = viewport?.height || window.innerHeight || document.documentElement.clientHeight;
@@ -1050,8 +1161,7 @@ function currentPortArg() {
 }
 
 function serverStartCommandText() {
-  const cwd = readStoredServerStartCwd() || ".";
-  return `pi-webui --cwd ${quoteCommandArg(cwd)}${currentPortArg()}`;
+  return `pi-webui${currentPortArg()}`;
 }
 
 function serverStartSlashCommandText() {
@@ -1371,6 +1481,46 @@ function attachmentIcon(kind) {
   return kind === "image" ? "🖼️" : kind === "video" ? "🎞️" : kind === "audio" ? "🎵" : kind === "doc" ? "📄" : "📎";
 }
 
+function normalizeTextAttachmentContent(text) {
+  return String(text || "").replace(/\r\n?/g, "\n");
+}
+
+function textLineCount(text) {
+  const normalized = normalizeTextAttachmentContent(text);
+  return normalized ? normalized.split("\n").length : 0;
+}
+
+function shouldAttachTextInsteadOfComposerInput(text) {
+  const normalized = normalizeTextAttachmentContent(text);
+  return normalized.trim().length > 0 && textLineCount(normalized) > LONG_INPUT_ATTACHMENT_LINE_THRESHOLD;
+}
+
+function longInputAttachmentFileName() {
+  const stamp = new Date().toISOString().replace(/\.\d{3}Z$/, "Z").replace(/:/g, "-");
+  return `webui-input-${stamp}.txt`;
+}
+
+function makeTextAttachmentFile(text, name = longInputAttachmentFileName(), mimeType = LONG_INPUT_ATTACHMENT_MIME_TYPE) {
+  const normalized = normalizeTextAttachmentContent(text);
+  const fileName = String(name || longInputAttachmentFileName());
+  const type = String(mimeType || LONG_INPUT_ATTACHMENT_MIME_TYPE);
+  if (typeof File === "function") return new File([normalized], fileName, { type });
+  const blob = new Blob([normalized], { type });
+  try {
+    blob.name = fileName;
+    blob.lastModified = Date.now();
+  } catch {
+    // Older browsers may expose non-extensible Blob instances; the attachment record still carries the name.
+  }
+  return blob;
+}
+
+function isEditableTextAttachment(attachment) {
+  const name = String(attachment?.name || "");
+  const mimeType = String(attachment?.mimeType || attachment?.file?.type || inferMimeTypeFromName(name)).split(";", 1)[0].trim().toLowerCase();
+  return mimeType.startsWith("text/") || /(?:json|xml|yaml|toml|markdown|csv)/i.test(mimeType) || /\.(?:txt|md|markdown|csv|json|xml|ya?ml|toml|ini|log)$/i.test(name);
+}
+
 function attachmentsForTab(tabId = activeTabId) {
   return tabId ? tabAttachments.get(tabId) || [] : [];
 }
@@ -1399,11 +1549,19 @@ function renderAttachmentTray() {
     const icon = make("span", "attachment-pill-icon", attachmentIcon(attachment.kind));
     const name = make("span", "attachment-pill-name", attachment.name);
     const meta = make("span", "attachment-pill-meta", `${attachment.kind} · ${formatBytes(attachment.size)}`);
+    const edit = isEditableTextAttachment(attachment) ? make("button", "attachment-edit-button", "Edit") : null;
+    if (edit) {
+      edit.type = "button";
+      edit.setAttribute("aria-label", `Open and edit ${attachment.name}`);
+      edit.addEventListener("click", () => openTextAttachmentEditor(attachment.id));
+    }
     const remove = make("button", "attachment-remove-button", "×");
     remove.type = "button";
     remove.setAttribute("aria-label", `Remove ${attachment.name}`);
     remove.addEventListener("click", () => removeAttachment(attachment.id));
-    pill.append(icon, name, meta, remove);
+    pill.append(icon, name, meta);
+    if (edit) pill.append(edit);
+    pill.append(remove);
     tray.append(pill);
   }
 }
@@ -1414,6 +1572,7 @@ function removeAttachment(id, tabId = activeTabId) {
   if (index === -1) return;
   const [removed] = attachments.splice(index, 1);
   if (removed?.previewUrl) URL.revokeObjectURL(removed.previewUrl);
+  if (activeTextAttachmentEditor?.tabId === tabId && activeTextAttachmentEditor?.attachmentId === id) closeTextAttachmentEditor();
   if (attachments.length === 0) tabAttachments.delete(tabId);
   if (tabId === activeTabId) renderAttachmentTray();
 }
@@ -1423,15 +1582,16 @@ function clearAttachments(tabId = activeTabId) {
   for (const attachment of attachments) {
     if (attachment.previewUrl) URL.revokeObjectURL(attachment.previewUrl);
   }
+  if (activeTextAttachmentEditor?.tabId === tabId) closeTextAttachmentEditor();
   if (tabId) tabAttachments.delete(tabId);
   if (tabId === activeTabId) renderAttachmentTray();
 }
 
 function addAttachmentFiles(fileList, source = "picker") {
   const files = Array.from(fileList || []).filter(Boolean);
-  if (!files.length) return;
+  if (!files.length) return { added: 0, skipped: [] };
   const attachments = ensureAttachmentsForTab();
-  if (!attachments.length && !activeTabId) return;
+  if (!attachments.length && !activeTabId) return { added: 0, skipped: ["no active tab"] };
   let totalBytes = attachments.reduce((sum, attachment) => sum + attachment.size, 0);
   let added = 0;
   const skipped = [];
@@ -1469,6 +1629,129 @@ function addAttachmentFiles(fileList, source = "picker") {
   renderAttachmentTray();
   if (added) addEvent(`attached ${added} ${added === 1 ? "file" : "files"} from ${source}`, "info");
   if (skipped.length) addEvent(`skipped attachments: ${skipped.join("; ")}`, "warn");
+  return { added, skipped };
+}
+
+function attachLongTextAsFile(text, source = "input text") {
+  if (!shouldAttachTextInsteadOfComposerInput(text)) return false;
+  const normalized = normalizeTextAttachmentContent(text);
+  const lineCount = textLineCount(normalized);
+  const result = addAttachmentFiles([makeTextAttachmentFile(normalized)], `${lineCount}-line ${source}`);
+  return result.added > 0;
+}
+
+function moveLongPromptInputToAttachment() {
+  const text = elements.promptInput.value || "";
+  if (!attachLongTextAsFile(text, "input text")) return false;
+  elements.promptInput.value = "";
+  resizePromptInput();
+  hideCommandSuggestions();
+  return true;
+}
+
+function attachmentById(tabId, id) {
+  return attachmentsForTab(tabId).find((attachment) => attachment.id === id) || null;
+}
+
+function closeTextAttachmentEditor() {
+  if (elements.attachmentTextDialog?.open) elements.attachmentTextDialog.close();
+  else activeTextAttachmentEditor = null;
+}
+
+function setAttachmentTextStatus(message = "", level = "muted") {
+  if (!elements.attachmentTextStatus) return;
+  elements.attachmentTextStatus.textContent = message;
+  elements.attachmentTextStatus.className = `attachment-text-status ${level || "muted"}`;
+}
+
+function renderTextAttachmentEditorMeta() {
+  if (!activeTextAttachmentEditor || !elements.attachmentTextMeta) return;
+  const attachment = attachmentById(activeTextAttachmentEditor.tabId, activeTextAttachmentEditor.attachmentId);
+  if (!attachment) {
+    elements.attachmentTextMeta.textContent = "Attachment no longer exists.";
+    return;
+  }
+  const text = elements.attachmentTextEditor?.value || "";
+  const lineCount = textLineCount(text);
+  elements.attachmentTextMeta.textContent = `${attachment.name} · ${attachment.mimeType} · ${formatBytes(attachment.size)} · ${lineCount} ${lineCount === 1 ? "line" : "lines"}`;
+}
+
+function readFileAsText(file) {
+  if (typeof file?.text === "function") return file.text();
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = () => reject(reader.error || new Error("Failed to read text attachment"));
+    reader.onload = () => resolve(String(reader.result || ""));
+    reader.readAsText(file);
+  });
+}
+
+async function openTextAttachmentEditor(attachmentId, tabId = activeTabId) {
+  const attachment = attachmentById(tabId, attachmentId);
+  if (!attachment) return;
+  if (!isEditableTextAttachment(attachment)) {
+    addEvent(`${attachment.name || "attachment"} is not editable text`, "warn");
+    return;
+  }
+
+  activeTextAttachmentEditor = { tabId, attachmentId };
+  if (elements.attachmentTextTitle) elements.attachmentTextTitle.textContent = `Edit ${attachment.name || "text attachment"}`;
+  if (elements.attachmentTextEditor) elements.attachmentTextEditor.value = "";
+  if (elements.attachmentTextSaveButton) elements.attachmentTextSaveButton.disabled = true;
+  renderTextAttachmentEditorMeta();
+  setAttachmentTextStatus("Loading text attachment…", "muted");
+  if (elements.attachmentTextDialog && !elements.attachmentTextDialog.open) elements.attachmentTextDialog.showModal();
+
+  try {
+    const text = await readFileAsText(attachment.file);
+    if (activeTextAttachmentEditor?.tabId !== tabId || activeTextAttachmentEditor?.attachmentId !== attachmentId) return;
+    if (elements.attachmentTextEditor) elements.attachmentTextEditor.value = normalizeTextAttachmentContent(text);
+    if (elements.attachmentTextSaveButton) elements.attachmentTextSaveButton.disabled = false;
+    renderTextAttachmentEditorMeta();
+    setAttachmentTextStatus("Edit the text, then save it back to the attachment.", "muted");
+    queueMicrotask(() => elements.attachmentTextEditor?.focus());
+  } catch (error) {
+    if (elements.attachmentTextSaveButton) elements.attachmentTextSaveButton.disabled = true;
+    setAttachmentTextStatus(`Failed to open text attachment: ${error.message || String(error)}`, "error");
+  }
+}
+
+function totalAttachmentBytesWithReplacement(tabId, attachmentId, nextSize) {
+  return attachmentsForTab(tabId).reduce((sum, attachment) => sum + (attachment.id === attachmentId ? nextSize : attachment.size || 0), 0);
+}
+
+function saveTextAttachmentEdit() {
+  if (!activeTextAttachmentEditor) return;
+  const { tabId, attachmentId } = activeTextAttachmentEditor;
+  const attachment = attachmentById(tabId, attachmentId);
+  if (!attachment) {
+    setAttachmentTextStatus("Attachment no longer exists.", "error");
+    return;
+  }
+
+  const text = elements.attachmentTextEditor?.value || "";
+  const name = attachment.name || longInputAttachmentFileName();
+  const mimeType = attachment.mimeType || inferMimeTypeFromName(name) || LONG_INPUT_ATTACHMENT_MIME_TYPE;
+  const nextFile = makeTextAttachmentFile(text, name, mimeType);
+  if (nextFile.size > ATTACHMENT_MAX_FILE_BYTES) {
+    setAttachmentTextStatus(`Edited file is larger than ${formatBytes(ATTACHMENT_MAX_FILE_BYTES)}.`, "error");
+    return;
+  }
+  if (totalAttachmentBytesWithReplacement(tabId, attachmentId, nextFile.size) > ATTACHMENT_MAX_TOTAL_BYTES) {
+    setAttachmentTextStatus(`Edited attachments exceed ${formatBytes(ATTACHMENT_MAX_TOTAL_BYTES)} total.`, "error");
+    return;
+  }
+
+  if (attachment.previewUrl) URL.revokeObjectURL(attachment.previewUrl);
+  attachment.file = nextFile;
+  attachment.name = name;
+  attachment.mimeType = nextFile.type || mimeType;
+  attachment.size = nextFile.size || 0;
+  attachment.kind = attachmentKind(attachment.mimeType, attachment.name);
+  attachment.previewUrl = undefined;
+  if (tabId === activeTabId) renderAttachmentTray();
+  addEvent(`updated text attachment ${attachment.name} (${formatBytes(attachment.size)})`, "info");
+  closeTextAttachmentEditor();
 }
 
 function clipboardFiles(dataTransfer) {
@@ -1496,9 +1779,15 @@ function clipboardFiles(dataTransfer) {
 
 function handleAttachmentPaste(event) {
   const files = clipboardFiles(event.clipboardData);
-  if (!files.length) return;
+  if (files.length) {
+    event.preventDefault();
+    addAttachmentFiles(files, "clipboard");
+    return;
+  }
+
+  const text = event.clipboardData?.getData("text/plain") || "";
+  if (!attachLongTextAsFile(text, "clipboard text")) return;
   event.preventDefault();
-  addAttachmentFiles(files, "clipboard");
 }
 
 function isFileDrag(event) {
@@ -2587,7 +2876,7 @@ function restoreActiveDraft() {
 
 function focusPromptInput({ defer = false } = {}) {
   const focus = () => {
-    if (!elements.promptInput || elements.dialog.open || elements.pathPickerDialog.open || elements.nativeCommandDialog.open || elements.promptListDialog?.open || document.visibilityState === "hidden") return;
+    if (!elements.promptInput || elements.dialog.open || elements.pathPickerDialog.open || elements.nativeCommandDialog.open || elements.appRunnerInfoDialog?.open || elements.promptListDialog?.open || elements.attachmentTextDialog?.open || document.visibilityState === "hidden") return;
     try {
       elements.promptInput.focus({ preventScroll: true });
     } catch {
@@ -2661,6 +2950,7 @@ function resetActiveTabUi() {
   else renderQueue({ tabId: activeTabId, steering: [], followUp: [] });
   elements.commandsBox.textContent = "Loading…";
   elements.commandsBox.classList.add("muted");
+  renderAppRunnerControls();
   renderWidgets();
   renderGitWorkflow();
   renderFooter();
@@ -2873,6 +3163,35 @@ function clearOpenTerminalTabGroup(groupKey, { force = false } = {}) {
   syncTabPolling();
 }
 
+function setNewTabMenuOpen(open) {
+  newTabMenuOpen = !!open;
+  elements.newTabButton?.setAttribute("aria-expanded", newTabMenuOpen ? "true" : "false");
+  elements.newTabButton?.classList.toggle("menu-open", newTabMenuOpen);
+  elements.newTabMenu?.classList.toggle("open", newTabMenuOpen);
+}
+
+function openNewTabMenu() {
+  setPublishMenuOpen(false);
+  setNativeCommandMenuOpen(false);
+  setAppRunnerMenuOpen(false);
+  setOptionsMenuOpen(false);
+  setNewTabMenuOpen(true);
+}
+
+function focusNewTabMenuItem(direction = "first") {
+  const items = [elements.newTabCurrentDirectoryButton, elements.newTabChooseDirectoryButton].filter(Boolean);
+  const item = direction === "last" ? items.at(-1) : items[0];
+  item?.focus({ preventScroll: true });
+}
+
+function moveNewTabMenuFocus(delta) {
+  const items = [elements.newTabCurrentDirectoryButton, elements.newTabChooseDirectoryButton].filter(Boolean);
+  if (!items.length) return;
+  const currentIndex = Math.max(0, items.indexOf(document.activeElement));
+  const nextIndex = (currentIndex + delta + items.length) % items.length;
+  items[nextIndex].focus({ preventScroll: true });
+}
+
 function renderTabs() {
   const active = activeTab();
   const activeIndicator = active ? tabIndicator(active) : null;
@@ -2891,7 +3210,7 @@ function renderTabs() {
       for (const tab of group.tabs) elements.tabBar.append(renderTerminalTab(tab));
     }
   }
-  elements.tabBar.append(elements.newTabButton);
+  elements.tabBar.append(elements.newTabMenu);
   elements.closeAllTabsButton.disabled = tabs.length === 0;
   updateTerminalTabGroupOpenState();
   setMobileTabsExpanded(mobileTabsExpanded);
@@ -2933,12 +3252,22 @@ async function switchTab(tabId) {
   if (isCurrentTabContext(tabContext)) markTabOutputSeen();
 }
 
-async function createTerminalTab(cwd = activeTab()?.cwd, { triggerButton = elements.newTabButton } = {}) {
+function currentDirectoryForNewTab() {
+  return latestWorkspace?.cwd || activeTab()?.cwd || "";
+}
+
+async function createTerminalTab(cwd = currentDirectoryForNewTab(), { triggerButton = elements.newTabButton } = {}) {
   setMobileTabsExpanded(false);
+  setNewTabMenuOpen(false);
+  const resolvedCwd = cwd || currentDirectoryForNewTab();
+  if (!resolvedCwd && tabs.length === 0) {
+    await createTerminalTabFromChosenDirectory({ triggerButton });
+    return;
+  }
   const disabledButtons = new Set([elements.newTabButton, triggerButton].filter(Boolean));
   for (const button of disabledButtons) button.disabled = true;
   try {
-    const response = await api("/api/tabs", { method: "POST", body: { cwd: cwd || activeTab()?.cwd }, scoped: false });
+    const response = await api("/api/tabs", { method: "POST", body: { cwd: resolvedCwd }, scoped: false });
     tabs = response.data?.tabs || tabs;
     syncTabMetadata(tabs);
     const tab = response.data?.tab;
@@ -2954,6 +3283,27 @@ async function createTerminalTab(cwd = activeTab()?.cwd, { triggerButton = eleme
   }
 }
 
+async function createTerminalTabFromChosenDirectory({ triggerButton = elements.newTabChooseDirectoryButton } = {}) {
+  const sourceTab = activeTab();
+  const initialCwd = currentDirectoryForNewTab();
+  setMobileTabsExpanded(false);
+  setNewTabMenuOpen(false);
+  const cwd = await pickCwd(sourceTab || { id: "new-tab", title: "new tab" }, initialCwd, { title: "Choose CWD for new tab" });
+  if (!cwd) return;
+  await createTerminalTab(cwd, { triggerButton });
+}
+
+async function createFirstTerminalTabFromChosenDirectory() {
+  if (firstTerminalCwdPromptShown || tabs.length > 0) return;
+  firstTerminalCwdPromptShown = true;
+  const cwd = await pickCwd({ id: "first-terminal", title: "first terminal" }, "", { title: "Choose CWD for first terminal" });
+  if (!cwd) {
+    addEvent("choose a CWD to start the first terminal", "warn");
+    return;
+  }
+  await createTerminalTab(cwd, { triggerButton: null });
+}
+
 function tabHasActiveAgent(tab) {
   const activity = activityForTab(tab);
   const indicator = tabIndicator(tab);
@@ -3003,6 +3353,7 @@ async function closeTerminalTabs(tabIds, { label = "selected terminal tabs" } =
       tabDrafts.delete(id);
       clearAttachments(id);
       clearGitWorkflowForTab(id);
+      appRunnerDataByTab.delete(id);
     }
     clearOpenTerminalTabGroup(null, { force: true });
 
@@ -3045,10 +3396,14 @@ async function closeAllTerminalTabs() {
 }
 
 async function initializeTabs() {
-  await refreshTabs({ selectStored: true });
+  const loadedTabs = await refreshTabs({ selectStored: true });
   resetActiveTabUi();
   renderTabs();
   restoreActiveDraft();
+  if (!loadedTabs.length) {
+    await createFirstTerminalTabFromChosenDirectory();
+    return;
+  }
   focusPromptInput({ defer: true });
   const tabContext = activeTabContext();
   connectEvents(tabContext);
@@ -3534,6 +3889,50 @@ function footerCostAuthLabel() {
   return /codex|copilot|chatgpt/i.test(provider) ? "sub" : "api";
 }
 
+function contextWindowFromSources(...sources) {
+  for (const source of sources) {
+    const value = typeof source === "object" && source !== null ? source.contextWindow : source;
+    const contextWindow = Number(value);
+    if (Number.isFinite(contextWindow) && contextWindow > 0) return contextWindow;
+  }
+  return 0;
+}
+
+function contextUsageUnknownAfterCompaction(tabId = activeTabId) {
+  return !!tabId && contextUsageUnknownAfterCompactionByTab.has(tabId);
+}
+
+function unknownFooterContextText(contextUsage = null) {
+  const contextWindow = contextWindowFromSources(
+    contextUsage,
+    latestStats?.contextUsage,
+    currentState?.contextUsage,
+    currentState?.model?.contextWindow,
+  );
+  return contextWindow ? `?/${formatFooterTokenCount(contextWindow)}` : "?";
+}
+
+function contextUsageWithUnknownPercent(contextUsage = null) {
+  return {
+    ...(contextUsage || {}),
+    percent: null,
+    contextWindow: contextWindowFromSources(contextUsage, latestStats?.contextUsage, currentState?.contextUsage, currentState?.model?.contextWindow),
+  };
+}
+
+function markContextUsageUnknownAfterCompaction(tabId = activeTabId) {
+  if (!tabId) return;
+  contextUsageUnknownAfterCompactionByTab.set(tabId, Date.now());
+  if (tabId !== activeTabId) return;
+  if (currentState) currentState = { ...currentState, contextUsage: contextUsageWithUnknownPercent(currentState.contextUsage) };
+  if (latestStats) latestStats = { ...latestStats, contextUsage: contextUsageWithUnknownPercent(latestStats.contextUsage) };
+}
+
+function clearContextUsageUnknownAfterCompaction(tabId = activeTabId) {
+  if (!tabId) return;
+  contextUsageUnknownAfterCompactionByTab.delete(tabId);
+}
+
 function footerStatsTokensDisplay(stats = latestStats) {
   const tokens = stats?.tokens;
   if (!tokens) return "";
@@ -3554,7 +3953,8 @@ function footerContextDisplayWithAuto(value, state = currentState) {
 
 function footerStatsContextDisplay(stats = latestStats) {
   const usage = stats?.contextUsage || currentState?.contextUsage;
-  const contextWindow = usage?.contextWindow ?? currentState?.model?.contextWindow ?? 0;
+  const contextWindow = contextWindowFromSources(usage, currentState?.model?.contextWindow);
+  if (contextUsageUnknownAfterCompaction()) return footerContextDisplayWithAuto(unknownFooterContextText(usage));
   if (!contextWindow) return "";
   const rawPercent = Number(usage?.percent);
   const percent = Number.isFinite(rawPercent) ? `${rawPercent.toFixed(1)}%` : "?";
@@ -3853,8 +4253,10 @@ function footerPayloadWithLiveModel(payload) {
   const effort = footerThinkingDisplay();
   const hasThinkingChip = [...payload.main, ...payload.meta].some((chip) => chip?.key === "thinking");
   const contextChip = (chip) => {
-    const value = footerContextDisplayWithAuto(chip?.value);
-    return { ...chip, value, title: `context: ${value}` };
+    const usageUnknown = contextUsageUnknownAfterCompaction();
+    const value = usageUnknown ? footerContextDisplayWithAuto(unknownFooterContextText(chip?.contextUsage)) : footerContextDisplayWithAuto(chip?.value);
+    const contextUsage = usageUnknown ? contextUsageWithUnknownPercent(chip?.contextUsage) : chip?.contextUsage;
+    return { ...chip, value, title: `context: ${value}`, ...(contextUsage ? { contextUsage } : {}) };
   };
   const effortChip = (chip) => ({ ...chip, key: "thinking", label: "effort", value: effort, title: `effort: ${effort}`, tone: "mauve" });
   const splitChip = (chip) => {
@@ -4469,12 +4871,13 @@ function closePathPicker(cwd) {
   state.resolve(cwd || null);
 }
 
-function pickCwd(tab, initialCwd) {
+function pickCwd(tab, initialCwd, { title } = {}) {
   if (pathPickerState) return Promise.resolve(null);
 
   return new Promise((resolve) => {
-    pathPickerState = { tabId: tab.id, cwd: initialCwd, requestId: 0, loading: false, creatingDirectory: false, directories: [], filteredDirectories: [], resolve };
-    elements.pathPickerTitle.textContent = `Choose CWD for ${tab.title}`;
+    const pickerTab = tab || { id: "path-picker", title: "tab" };
+    pathPickerState = { tabId: pickerTab.id, cwd: initialCwd, requestId: 0, loading: false, creatingDirectory: false, directories: [], filteredDirectories: [], resolve };
+    elements.pathPickerTitle.textContent = title || `Choose CWD for ${pickerTab.title}`;
     elements.pathPickerCurrent.textContent = "Loading…";
     elements.pathPickerCreateNameInput.value = "";
     elements.pathPickerSearchInput.value = "";
@@ -5206,6 +5609,530 @@ function renderReleaseAurLogWidget() {
   return node;
 }
 
+function activeAppRunnerData() {
+  return activeTabId ? appRunnerDataByTab.get(activeTabId) || { runners: [], activeRun: null } : { runners: [], activeRun: null };
+}
+
+function setAppRunnerData(tabId, data = {}) {
+  if (!tabId) return;
+  const previous = appRunnerDataByTab.get(tabId) || { runners: [], activeRun: null, customRunnerConfig: null };
+  appRunnerDataByTab.set(tabId, {
+    cwd: data.cwd || previous.cwd || "",
+    runners: Array.isArray(data.runners) ? data.runners : previous.runners || [],
+    customRunnerConfig: data.customRunnerConfig || previous.customRunnerConfig || null,
+    activeRun: Object.prototype.hasOwnProperty.call(data, "activeRun") ? data.activeRun : previous.activeRun || null,
+  });
+}
+
+function appRunnerIsRunning(run) {
+  return run?.status === "running" || run?.stopping === true;
+}
+
+function appRunnerStatusLabel(run) {
+  if (run?.stopping && run.status === "running") return "stopping";
+  if (run?.status === "done") return "exit 0";
+  if (run?.status === "failed") return run.signal ? `signal ${run.signal}` : `exit ${run.exitCode ?? "?"}`;
+  if (run?.status === "error") return "error";
+  return run?.status || "running";
+}
+
+function appRunnerElapsedLabel(run) {
+  const startedAt = Date.parse(run?.startedAt || "");
+  if (!Number.isFinite(startedAt)) return "";
+  const endedAt = Date.parse(run?.endedAt || "");
+  const end = Number.isFinite(endedAt) ? endedAt : Date.now();
+  return formatDuration(end - startedAt);
+}
+
+function appRunnerActionButton(label, handler, className = "") {
+  const button = make("button", `release-npm-action ${className}`.trim(), label);
+  button.type = "button";
+  button.addEventListener("click", handler);
+  return button;
+}
+
+async function refreshAppRunners(tabContext = activeTabContext()) {
+  if (!tabContext.tabId) return;
+  const response = await api("/api/app-runners", { tabId: tabContext.tabId });
+  if (!isCurrentTabContext(tabContext)) return;
+  setAppRunnerData(tabContext.tabId, response.data || {});
+  renderAppRunnerControls();
+  renderWidgets();
+}
+
+async function runAppRunner(runnerId) {
+  const tabContext = activeTabContext();
+  if (!tabContext.tabId || !runnerId) return;
+  setComposerActionsOpen(false);
+  setAppRunnerMenuOpen(false);
+  try {
+    const response = await api("/api/app-runner", { method: "POST", body: { runnerId }, tabId: tabContext.tabId });
+    if (!isCurrentTabContext(tabContext)) return;
+    setAppRunnerData(tabContext.tabId, response.data || {});
+    renderAppRunnerControls();
+    renderWidgets();
+    const command = response.data?.activeRun?.displayCommand || "app runner";
+    addEvent(`started ${command}`, "info");
+  } catch (error) {
+    if (isCurrentTabContext(tabContext)) addEvent(error.message || String(error), "error");
+  }
+}
+
+async function stopAppRunner() {
+  const tabContext = activeTabContext();
+  if (!tabContext.tabId) return;
+  try {
+    const response = await api("/api/app-runner/stop", { method: "POST", body: {}, tabId: tabContext.tabId });
+    if (!isCurrentTabContext(tabContext)) return;
+    setAppRunnerData(tabContext.tabId, response.data || {});
+    renderAppRunnerControls();
+    renderWidgets();
+    addEvent("app runner stop requested", "warn");
+  } catch (error) {
+    if (isCurrentTabContext(tabContext)) addEvent(error.message || String(error), "error");
+  }
+}
+
+async function clearAppRunner() {
+  const tabContext = activeTabContext();
+  if (!tabContext.tabId) return;
+  try {
+    const response = await api("/api/app-runner/clear", { method: "POST", body: {}, tabId: tabContext.tabId });
+    if (!isCurrentTabContext(tabContext)) return;
+    setAppRunnerData(tabContext.tabId, response.data || {});
+    renderAppRunnerControls();
+    renderWidgets();
+  } catch (error) {
+    if (isCurrentTabContext(tabContext)) addEvent(error.message || String(error), "error");
+  }
+}
+
+function appRunnerOutputText(run) {
+  const lines = Array.isArray(run?.lines) ? run.lines : [];
+  return lines.join("\n").trimEnd();
+}
+
+async function copyAppRunnerOutput(run) {
+  const text = appRunnerOutputText(run);
+  if (!text.trim()) {
+    addEvent("app runner output is empty", "warn");
+    return;
+  }
+  try {
+    await copyText(text);
+    addEvent("copied app runner output", "info");
+  } catch (error) {
+    addEvent(`app runner output copy failed: ${error.message || String(error)}`, "warn");
+  }
+}
+
+const APP_RUNNER_SUPPORTED_ITEMS = [
+  "Project-local custom runners from .pi-webui-runners.json",
+  "package.json scripts: bun/npm/pnpm/yarn dev, start, serve",
+  "npx frameworks: Vite, Next, Astro, Storybook",
+  "Rust: cargo run",
+  "Python: uv run or python entry files such as Main.py, main.py, src/main.py",
+  "Go/Golang: go run",
+  "Zig: zig build run or zig run",
+  "C/C++: CMake, cc/c++ main files",
+  "Docker Compose: docker compose up",
+  "Shell scripts: bash/zsh/fish in root, dev/, scripts/, dev/scripts/",
+  "Deno, make, just, and plain Node entry files",
+];
+const APP_RUNNER_SUPPORTED_TOOLTIP = [
+  "No app runner detected for this tab cwd.",
+  "",
+  "Currently supported:",
+  ...APP_RUNNER_SUPPORTED_ITEMS.map((item) => `• ${item}`),
+].join("\n");
+
+function appRunnerMenuCanOpen() {
+  const data = activeAppRunnerData();
+  return Array.isArray(data.runners) && data.runners.length > 0 && !appRunnerIsRunning(data.activeRun);
+}
+
+function activeAppRunnerCustomConfig() {
+  return activeAppRunnerData().customRunnerConfig || { runners: [], projectRoot: "", displayProjectRoot: "", displayConfigFile: "" };
+}
+
+function resetAppRunnerCustomDraft() {
+  appRunnerCustomDraft = { id: "", label: "", command: "./", path: "", args: "" };
+  appRunnerFileBrowserState = { open: false, loading: false, path: "", data: null, error: "" };
+}
+
+function appRunnerRelativeDir(filePath) {
+  const normalized = String(filePath || "").replace(/\\/g, "/").replace(/^\.\/+/, "");
+  const index = normalized.lastIndexOf("/");
+  return index === -1 ? "" : normalized.slice(0, index);
+}
+
+function appRunnerCustomArgsText(args) {
+  return Array.isArray(args) ? args.join(" ") : String(args || "");
+}
+
+function appRunnerCustomDraftPayload() {
+  return {
+    id: appRunnerCustomDraft.id || undefined,
+    label: appRunnerCustomDraft.label.trim(),
+    command: appRunnerCustomDraft.command.trim() || "./",
+    path: appRunnerCustomDraft.path.trim(),
+    args: appRunnerCustomDraft.args.trim(),
+  };
+}
+
+function updateAppRunnerCustomDraftFrom(container) {
+  if (!container) return;
+  appRunnerCustomDraft = {
+    id: appRunnerCustomDraft.id || "",
+    label: container.querySelector("#appRunnerCustomLabelInput")?.value || "",
+    command: container.querySelector("#appRunnerCustomCommandInput")?.value || "./",
+    path: container.querySelector("#appRunnerCustomPathInput")?.value || "",
+    args: container.querySelector("#appRunnerCustomArgsInput")?.value || "",
+  };
+}
+
+function appRunnerInputField({ id, label, value, placeholder = "", hint = "" }) {
+  const field = make("label", "app-runner-custom-field");
+  field.setAttribute("for", id);
+  field.append(make("span", "", label));
+  const input = make("input", "dialog-input");
+  input.id = id;
+  input.type = "text";
+  input.value = value || "";
+  input.placeholder = placeholder;
+  input.autocomplete = "off";
+  input.spellcheck = false;
+  field.append(input);
+  if (hint) field.append(make("small", "muted", hint));
+  input.addEventListener("input", () => updateAppRunnerCustomDraftFrom(field.closest(".app-runner-custom-form")));
+  input.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter") return;
+    event.preventDefault();
+    saveAppRunnerCustomRunner(field.closest(".app-runner-custom-form"));
+  });
+  return { field, input };
+}
+
+async function saveAppRunnerCustomRunner(form) {
+  updateAppRunnerCustomDraftFrom(form);
+  const payload = appRunnerCustomDraftPayload();
+  if (!payload.path) {
+    addEvent("custom app runner path is required", "warn");
+    form?.querySelector("#appRunnerCustomPathInput")?.focus();
+    return;
+  }
+  const tabContext = activeTabContext();
+  try {
+    const response = await api("/api/app-runner-config", { method: "POST", body: { runner: payload }, tabId: tabContext.tabId });
+    if (!isCurrentTabContext(tabContext)) return;
+    setAppRunnerData(tabContext.tabId, response.data || {});
+    resetAppRunnerCustomDraft();
+    renderAppRunnerControls();
+    renderWidgets();
+    renderAppRunnerInfoDialog();
+    addEvent("saved custom app runner", "info");
+  } catch (error) {
+    if (isCurrentTabContext(tabContext)) addEvent(error.message || String(error), "error");
+  }
+}
+
+async function deleteAppRunnerCustomRunner(id) {
+  const tabContext = activeTabContext();
+  try {
+    const response = await api("/api/app-runner-config", { method: "DELETE", body: { id }, tabId: tabContext.tabId });
+    if (!isCurrentTabContext(tabContext)) return;
+    setAppRunnerData(tabContext.tabId, response.data || {});
+    if (appRunnerCustomDraft.id === id) resetAppRunnerCustomDraft();
+    renderAppRunnerControls();
+    renderWidgets();
+    renderAppRunnerInfoDialog();
+    addEvent("deleted custom app runner", "warn");
+  } catch (error) {
+    if (isCurrentTabContext(tabContext)) addEvent(error.message || String(error), "error");
+  }
+}
+
+async function loadAppRunnerFileBrowser(relativePath = "") {
+  const tabContext = activeTabContext();
+  const path = String(relativePath || "").replace(/^\.\/+/, "").replace(/\/+$/g, "");
+  appRunnerFileBrowserState = { open: true, loading: true, path, data: null, error: "" };
+  renderAppRunnerInfoDialog();
+  try {
+    const response = await api(`/api/app-runner-files?path=${encodeURIComponent(path)}`, { tabId: tabContext.tabId });
+    if (!isCurrentTabContext(tabContext)) return;
+    appRunnerFileBrowserState = { open: true, loading: false, path, data: response.data || {}, error: "" };
+    renderAppRunnerInfoDialog();
+  } catch (error) {
+    if (!isCurrentTabContext(tabContext)) return;
+    appRunnerFileBrowserState = { open: true, loading: false, path, data: null, error: error.message || String(error) };
+    renderAppRunnerInfoDialog();
+  }
+}
+
+function renderAppRunnerFileBrowser() {
+  if (!appRunnerFileBrowserState.open) return null;
+  const browser = make("div", "app-runner-file-browser");
+  if (appRunnerFileBrowserState.loading) {
+    browser.append(make("div", "muted", "Loading project files…"));
+    return browser;
+  }
+  if (appRunnerFileBrowserState.error) {
+    browser.append(make("div", "path-picker-error", appRunnerFileBrowserState.error));
+    return browser;
+  }
+  const data = appRunnerFileBrowserState.data || {};
+  const header = make("div", "app-runner-file-browser-header");
+  header.append(make("strong", "", data.displayRelativeDir || "."));
+  const close = make("button", "app-runner-file-browser-close", "Hide browser");
+  close.type = "button";
+  close.addEventListener("click", () => {
+    appRunnerFileBrowserState = { open: false, loading: false, path: "", data: null, error: "" };
+    renderAppRunnerInfoDialog();
+  });
+  header.append(close);
+  browser.append(header);
+
+  const roots = make("div", "path-picker-roots app-runner-file-browser-roots");
+  if (data.parent !== null && data.parent !== undefined) roots.append(pathPickerButton("↑ Parent", data.parent || ".", () => loadAppRunnerFileBrowser(data.parent || ""), "path-picker-root-button"));
+  roots.append(pathPickerButton("Project root", data.displayProjectRoot || "Project root", () => loadAppRunnerFileBrowser(""), "path-picker-root-button"));
+  browser.append(roots);
+
+  const list = make("div", "path-picker-list app-runner-file-browser-list");
+  const directories = Array.isArray(data.directories) ? data.directories : [];
+  const files = Array.isArray(data.files) ? data.files : [];
+  for (const directory of directories) {
+    const button = pathPickerButton(`${directory.name}/`, directory.path, () => loadAppRunnerFileBrowser(directory.path), `path-picker-directory${directory.hidden ? " hidden-directory" : ""}`);
+    list.append(button);
+  }
+  for (const file of files) {
+    const button = pathPickerButton(file.name, file.path, () => {
+      appRunnerCustomDraft.path = file.path;
+      appRunnerFileBrowserState = { open: false, loading: false, path: "", data: null, error: "" };
+      renderAppRunnerInfoDialog();
+    }, `path-picker-directory app-runner-file-choice${file.hidden ? " hidden-directory" : ""}`);
+    list.append(button);
+  }
+  if (!directories.length && !files.length) list.append(make("div", "path-picker-empty muted", "No files in this directory."));
+  browser.append(list);
+  if (data.truncated) browser.append(make("div", "path-picker-error", "Showing the first project entries only."));
+  return browser;
+}
+
+function renderAppRunnerCustomSection() {
+  const config = activeAppRunnerCustomConfig();
+  const section = make("section", "app-runner-info-section app-runner-custom-section");
+  const titleRow = make("div", "app-runner-section-title-row");
+  titleRow.append(make("h3", "", "Custom project runners"));
+  if (config.displayConfigFile) titleRow.append(make("code", "", config.displayConfigFile));
+  section.append(titleRow);
+  section.append(make("p", "muted", "Add project-local runners saved in .pi-webui-runners.json. Command defaults to ./, so a selected file runs as ./path/to/file."));
+
+  const existing = make("div", "app-runner-custom-list");
+  const customRunners = Array.isArray(config.runners) ? config.runners : [];
+  if (!customRunners.length) {
+    existing.append(make("div", "app-runner-custom-empty muted", "No custom runners saved for this project yet."));
+  } else {
+    for (const runner of customRunners) {
+      const row = make("div", "app-runner-custom-item");
+      const details = make("div", "app-runner-custom-item-details");
+      details.append(make("strong", "", runner.label || runner.path || "custom runner"), make("code", "", runner.displayCommand || runner.path || ""));
+      const actions = make("div", "app-runner-custom-item-actions");
+      const edit = make("button", "", "Edit");
+      edit.type = "button";
+      edit.addEventListener("click", () => {
+        appRunnerCustomDraft = { id: runner.id || "", label: runner.label || "", command: runner.command || "./", path: runner.path || "", args: appRunnerCustomArgsText(runner.args) };
+        appRunnerFileBrowserState = { open: false, loading: false, path: "", data: null, error: "" };
+        renderAppRunnerInfoDialog();
+      });
+      const remove = make("button", "danger", "Delete");
+      remove.type = "button";
+      remove.addEventListener("click", () => {
+        if (!confirm(`Delete custom app runner “${runner.label || runner.path || runner.id}”?`)) return;
+        deleteAppRunnerCustomRunner(runner.id);
+      });
+      actions.append(edit, remove);
+      row.append(details, actions);
+      existing.append(row);
+    }
+  }
+  section.append(existing);
+
+  const form = make("div", "app-runner-custom-form");
+  const labelField = appRunnerInputField({ id: "appRunnerCustomLabelInput", label: "Label", value: appRunnerCustomDraft.label, placeholder: "My app" });
+  const commandField = appRunnerInputField({ id: "appRunnerCustomCommandInput", label: "Command", value: appRunnerCustomDraft.command || "./", placeholder: "./", hint: "Use ./ to execute the selected file directly, or use bash, python3, node, bun, uv run, etc." });
+  const pathField = appRunnerInputField({ id: "appRunnerCustomPathInput", label: "Path to file", value: appRunnerCustomDraft.path, placeholder: "dev/scripts/start.sh" });
+  const pathRow = make("div", "app-runner-custom-path-row");
+  pathRow.append(pathField.field);
+  const browse = make("button", "app-runner-custom-browse", "Browse…");
+  browse.type = "button";
+  browse.addEventListener("click", () => {
+    updateAppRunnerCustomDraftFrom(form);
+    loadAppRunnerFileBrowser(appRunnerRelativeDir(appRunnerCustomDraft.path));
+  });
+  pathRow.append(browse);
+  const argsField = appRunnerInputField({ id: "appRunnerCustomArgsInput", label: "Args", value: appRunnerCustomDraft.args, placeholder: "--port 3000", hint: "Optional extra args, space-separated." });
+  form.append(labelField.field, commandField.field, pathRow, argsField.field);
+  const formActions = make("div", "app-runner-custom-form-actions");
+  const save = make("button", "primary", appRunnerCustomDraft.id ? "Save changes" : "Add runner");
+  save.type = "button";
+  save.addEventListener("click", () => saveAppRunnerCustomRunner(form));
+  const reset = make("button", "", "Reset");
+  reset.type = "button";
+  reset.addEventListener("click", () => { resetAppRunnerCustomDraft(); renderAppRunnerInfoDialog(); });
+  formActions.append(save, reset);
+  form.append(formActions);
+  const browser = renderAppRunnerFileBrowser();
+  if (browser) form.append(browser);
+  section.append(form);
+  return section;
+}
+
+function renderAppRunnerControls() {
+  const menu = elements.appRunnerMenu;
+  const button = elements.appRunnerMenuButton;
+  const panel = elements.appRunnerMenuPanel;
+  if (!menu || !button || !panel) return;
+  const data = activeAppRunnerData();
+  const runners = Array.isArray(data.runners) ? data.runners : [];
+  const activeRun = data.activeRun;
+  const running = appRunnerIsRunning(activeRun);
+  menu.hidden = false;
+  menu.classList.toggle("has-runners", runners.length > 0);
+  if (elements.appRunnerInfoButton) {
+    elements.appRunnerInfoButton.hidden = runners.length === 0;
+    elements.appRunnerInfoButton.disabled = runners.length === 0;
+  }
+  button.disabled = running;
+  button.title = running
+    ? `App runner already running: ${activeRun.displayCommand || activeRun.label || "runner"}`
+    : runners.length
+      ? "Run a detected app runner"
+      : "No app runners detected in this tab working directory";
+  button.dataset.tooltip = runners.length ? "App runners: run detected project commands in this tab's working directory." : APP_RUNNER_SUPPORTED_TOOLTIP;
+  button.setAttribute("aria-label", button.title);
+  if (!runners.length || running) setAppRunnerMenuOpen(false);
+
+  panel.replaceChildren();
+  for (const runner of runners) {
+    const item = make("button", "composer-publish-menu-item composer-app-runner-menu-item");
+    item.type = "button";
+    item.setAttribute("role", "menuitem");
+    const runnerDisplayCommand = runner.shortDisplayCommand || runner.displayCommand;
+    item.title = runner.description ? `${runnerDisplayCommand}\n${runner.description}` : runnerDisplayCommand;
+    item.addEventListener("click", () => runAppRunner(runner.id));
+    const label = make("span", "app-runner-menu-item-label", runner.label || runnerDisplayCommand);
+    const command = make("span", "app-runner-menu-item-command", runnerDisplayCommand);
+    item.append(label, command);
+    panel.append(item);
+  }
+}
+
+function renderAppRunnerInfoDialog() {
+  const body = elements.appRunnerInfoBody;
+  if (!body) return;
+  const data = activeAppRunnerData();
+  const runners = Array.isArray(data.runners) ? data.runners : [];
+  body.replaceChildren();
+
+  const current = make("section", "app-runner-info-section");
+  current.append(make("h3", "", "Detected in this tab"));
+  if (runners.length) {
+    const list = make("ul", "app-runner-info-list app-runner-info-detected-list");
+    for (const runner of runners) {
+      const command = runner.shortDisplayCommand || runner.displayCommand || runner.command || runner.id;
+      const item = make("li");
+      item.append(
+        make("strong", "", runner.label || command || "runner"),
+        make("code", "", command || "detected command"),
+      );
+      if (runner.description) item.append(make("span", "", runner.description));
+      list.append(item);
+    }
+    current.append(list);
+  } else {
+    current.append(make("p", "muted", "No runners are currently detected for this tab working directory."));
+  }
+
+  const how = make("section", "app-runner-info-section");
+  how.append(make("h3", "", "How it works"));
+  const howList = make("ul", "app-runner-info-list");
+  for (const line of [
+    "Detection is scoped to the active terminal tab's current working directory.",
+    "Only commands/files that exist and runner binaries available on this system are shown.",
+    "Starting a runner keeps live output pinned above the chat/terminal area.",
+    "Only one app runner can be active per tab; Close/Stop terminates the process/server.",
+  ]) howList.append(make("li", "", line));
+  how.append(howList);
+
+  const supported = make("section", "app-runner-info-section");
+  supported.append(make("h3", "", "Supported runner types"));
+  const supportedList = make("ul", "app-runner-info-list app-runner-info-supported-list");
+  for (const itemText of APP_RUNNER_SUPPORTED_ITEMS) supportedList.append(make("li", "", itemText));
+  supported.append(supportedList);
+
+  body.append(current, renderAppRunnerCustomSection(), how, supported);
+}
+
+function openAppRunnerInfoDialog() {
+  if (!elements.appRunnerInfoDialog) return;
+  renderAppRunnerInfoDialog();
+  setAppRunnerMenuOpen(false);
+  if (!elements.appRunnerInfoDialog.open) elements.appRunnerInfoDialog.showModal();
+}
+
+function closeAppRunnerInfoDialog() {
+  if (elements.appRunnerInfoDialog?.open) elements.appRunnerInfoDialog.close();
+}
+
+function renderAppRunnerWidget() {
+  const data = activeAppRunnerData();
+  const run = data.activeRun;
+  if (!run) return null;
+  const running = appRunnerIsRunning(run);
+  const status = appRunnerStatusLabel(run);
+  const node = make("section", `widget release-npm-widget app-runner-widget${running ? " app-runner-live-widget" : " app-runner-log-widget"}`);
+  node.setAttribute("aria-label", "app runner output");
+
+  const header = make("div", "release-npm-header");
+  const titleWrap = make("div", "release-npm-title-wrap");
+  titleWrap.append(make("span", "release-npm-kicker", "app runner"), make("strong", "release-npm-title", run.label || run.displayCommand || "app runner"));
+
+  const elapsed = appRunnerElapsedLabel(run);
+  header.append(titleWrap);
+
+  const lines = Array.isArray(run.lines) && run.lines.length ? run.lines : [run.displayCommand ? `$ ${run.displayCommand}` : "Waiting for app runner output..."];
+  const streamHeader = releaseNpmStreamHeader(running ? "Live app output" : "App output", run.lineCount || lines.length, { live: running });
+  const terminal = make("div", "release-npm-terminal");
+  terminal.setAttribute("role", "log");
+  terminal.setAttribute("aria-live", running ? "polite" : "off");
+  for (const line of lines) appendReleaseNpmTerminalLine(terminal, line);
+
+  const controlParts = [run.displayCommand, run.cwd, run.truncated ? "output truncated" : ""].map(cleanStatusText).filter(Boolean);
+  const controls = make("div", "release-npm-controls app-runner-output-controls");
+  const actions = make("div", "app-runner-output-actions");
+  const closeButton = appRunnerActionButton("Close", running ? stopAppRunner : clearAppRunner, running ? "danger app-runner-close-action" : "app-runner-close-action");
+  closeButton.title = running ? "Stop this app runner/process/server" : "Close app runner output";
+  const copyButton = appRunnerActionButton("Copy output", () => copyAppRunnerOutput(run), "app-runner-copy-action");
+  copyButton.title = "Copy app runner output";
+  actions.append(closeButton, copyButton);
+  if (running) {
+    actions.append(appRunnerActionButton("Stop", stopAppRunner, "danger"));
+  } else {
+    const canRunAgain = (data.runners || []).some((runner) => runner.id === run.runnerId);
+    if (canRunAgain) actions.append(appRunnerActionButton("Run again", () => runAppRunner(run.runnerId)));
+    actions.append(appRunnerActionButton("Clear", clearAppRunner));
+  }
+  const pills = make("div", "app-runner-output-pills");
+  if (run.kind) pills.append(make("span", "release-npm-pill", run.kind));
+  pills.append(make("span", `release-npm-pill app-runner-status ${run.status || "running"}`.trim(), status));
+  if (elapsed) pills.append(make("span", "release-npm-pill elapsed", elapsed));
+  controls.append(actions, pills, make("span", "app-runner-output-meta", controlParts.join(" · ")));
+  const outputDetails = renderReleaseNpmOutputDetails(`app-runner:${run.id || run.runnerId || "active"}`, streamHeader, terminal, controls);
+  node.append(header, outputDetails);
+  requestAnimationFrame(() => { if (outputDetails.open) terminal.scrollTop = terminal.scrollHeight; });
+  return node;
+}
+
 function renderWidgets() {
   elements.widgetArea.replaceChildren();
   const releaseOutput = renderReleaseNpmOutputWidget();
@@ -5216,6 +6143,8 @@ function renderWidgets() {
   if (releaseAurOutput) elements.widgetArea.append(releaseAurOutput);
   const releaseAurLog = renderReleaseAurLogWidget();
   if (releaseAurLog) elements.widgetArea.append(releaseAurLog);
+  const appRunnerWidget = renderAppRunnerWidget();
+  if (appRunnerWidget) elements.widgetArea.append(appRunnerWidget);
 
   for (const [key, value] of widgets) {
     const widgetFeatureId = optionalFeatureWidgetFeatureId(key);
@@ -5239,6 +6168,8 @@ function setGitWorkflow(patch, { tabId = activeTabId } = {}) {
   const workflow = gitWorkflowForTab(tabId);
   if (!workflow) return null;
   Object.assign(workflow, patch);
+  workflow.actionsDone = createGitWorkflowActionsDone(workflow.actionsDone);
+  if (patch.step && !("process" in patch)) workflow.process = gitWorkflowProcessForStep(workflow.step, workflow.process);
   if (tabId === activeTabId) {
     gitWorkflow = workflow;
     renderGitWorkflow();
@@ -5274,24 +6205,141 @@ function formatCommitMessagePreview(message) {
   return [`=== SHORT ===`, message.short || "(empty)", "", "=== LONG ===", message.long || "(empty)"].join("\n");
 }
 
-function addGitWorkflowAction(label, handler, className = "", disabled = gitWorkflow.busy) {
+function gitWorkflowMessageTitle(message) {
+  return String(message?.short || message?.long || "").split("\n").find((line) => line.trim())?.trim() || "Pull request";
+}
+
+function slugifyGitBranchPart(value) {
+  return String(value || "")
+    .normalize("NFKD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 48);
+}
+
+function defaultGitPrBranchName(message = gitWorkflow.message) {
+  const title = gitWorkflowMessageTitle(message);
+  const match = title.match(/^([a-z][a-z0-9-]*)(?:\([^)]*\))?:\s*(.+)$/i);
+  const type = slugifyGitBranchPart(match?.[1] || "feat") || "feat";
+  const summary = slugifyGitBranchPart(match?.[2] || title) || "feature";
+  return `${type}/${summary}`;
+}
+
+function formatGitPrPreview(pr) {
+  if (!pr) return "No PR description loaded yet.";
+  const header = [`=== PR DESCRIPTION ===`, `Branch: ${pr.branch || gitWorkflow.prBranch || "current branch"}`];
+  if (pr.path) header.push(`File: ${pr.path}`);
+  return [...header, "", pr.body || "(empty)"].join("\n");
+}
+
+function addGitWorkflowAction(label, handler, className = "", disabled = gitWorkflow.busy, tooltip = "") {
   const button = make("button", className, label);
   button.type = "button";
   button.disabled = disabled;
+  if (tooltip) {
+    button.title = tooltip;
+    button.dataset.tooltip = tooltip;
+    button.setAttribute("aria-label", `${label}. ${tooltip.replace(/\s+/g, " ")}`);
+  }
   button.addEventListener("click", handler);
   elements.gitWorkflowActions.append(button);
   return button;
 }
 
+function setGitPrDialogStatus(message = "", level = "muted") {
+  if (!elements.gitPrStatus) return;
+  elements.gitPrStatus.textContent = message;
+  elements.gitPrStatus.className = `git-pr-status ${level || "muted"}`;
+}
+
+function resolveGitPrDialog(value) {
+  const resolve = activeGitPrDialogResolve;
+  activeGitPrDialogResolve = null;
+  if (elements.gitPrDialog?.open) elements.gitPrDialog.close();
+  if (resolve) resolve(value);
+}
+
+function openGitPrReviewDialog(pr, { title = "" } = {}) {
+  if (!elements.gitPrDialog || !elements.gitPrTitleInput || !elements.gitPrBodyEditor) return Promise.resolve(null);
+  if (activeGitPrDialogResolve) resolveGitPrDialog(null);
+  elements.gitPrTitleInput.value = title || gitWorkflowMessageTitle(gitWorkflow.message);
+  elements.gitPrBodyEditor.value = pr?.body || "";
+  setGitPrDialogStatus(`Review ${pr?.path || "the generated PR description"}. Edit if needed, then create the pull request.`);
+  return new Promise((resolve) => {
+    activeGitPrDialogResolve = resolve;
+    elements.gitPrDialog.showModal();
+    queueMicrotask(() => elements.gitPrBodyEditor.focus());
+  });
+}
+
+function gitWorkflowProcessForStep(step = gitWorkflow.step, fallback = gitWorkflow.process || "stage") {
+  switch (step) {
+    case "generate":
+    case "generating":
+      return "message";
+    case "message":
+    case "branchNaming":
+    case "branching":
+    case "committing":
+      return "commit";
+    case "push":
+    case "pushing":
+    case "prGenerating":
+    case "prReview":
+    case "prCreating":
+    case "done":
+      return "push";
+    case "add":
+    case "idle":
+      return "stage";
+    case "cancelled":
+    case "error":
+      return GIT_WORKFLOW_PROCESS_VALUES.has(fallback) ? fallback : "stage";
+    default:
+      return "stage";
+  }
+}
+
+function selectGitWorkflowProcess(processValue, tabId = gitWorkflowActionTabId()) {
+  const workflow = gitWorkflowForTab(tabId);
+  if (!workflow) return;
+  const process = GIT_WORKFLOW_PROCESS_VALUES.has(processValue) ? processValue : "stage";
+  workflow.runId += 1;
+  const runId = workflow.runId;
+  const base = { active: true, process, busy: false, error: "", messageRequestedAt: 0, branchName: "", branchNameRequestedAt: 0, prMode: false, prBranch: "", pr: null, prRequestedAt: 0 };
+
+  if (process === "stage") {
+    setGitWorkflow({ ...base, step: "add", message: null, output: "Ready to stage all changes with git add ." }, { tabId });
+    return;
+  }
+  if (process === "message") {
+    setGitWorkflow({ ...base, step: "generate", message: null, output: "Ready to generate a commit message from the currently staged changes." }, { tabId });
+    return;
+  }
+  if (process === "commit") {
+    setGitWorkflow({ ...base, step: "message", message: null, output: "Loading current generated commit message files…" }, { tabId });
+    loadGitWorkflowMessage({ requireFresh: false, runId, tabId });
+    return;
+  }
+  setGitWorkflow({ ...base, step: "push", output: "Ready to run git push for the current branch." }, { tabId });
+}
+
 function gitWorkflowTitle() {
   switch (gitWorkflow.step) {
     case "add": return "Stage all changes";
     case "generate": return "Generate staged commit message";
     case "generating": return "Waiting for /git-staged-msg";
-    case "message": return "Choose commit message";
+    case "message": return gitWorkflow.prMode ? "Choose PR branch commit message" : "Choose commit message";
+    case "branchNaming": return "Waiting for branch name";
+    case "branching": return "Creating PR branch";
     case "committing": return "Committing";
-    case "push": return "Push commit";
+    case "push": return gitWorkflow.prMode ? "Push branch and create PR" : "Push commit";
     case "pushing": return "Pushing";
+    case "prGenerating": return "Waiting for /pr";
+    case "prReview": return "Review PR description";
+    case "prCreating": return "Creating pull request";
     case "done": return "Git workflow complete";
     case "cancelled": return "Git workflow cancelled";
     case "error": return "Git workflow needs attention";
@@ -5304,11 +6352,16 @@ function gitWorkflowHint() {
     case "add": return "Step 1: run git add . in the current Pi working directory.";
     case "generate": return "Step 2: run /git-staged-msg, then preview the generated files.";
     case "generating": return "Pi is generating dev/COMMIT/staged-commit-short.txt and staged-commit-long.txt.";
-    case "message": return "Step 3/4: preview the native g-msg output and choose short or long commit.";
+    case "message": return gitWorkflow.prMode ? `Branch ${gitWorkflow.prBranch || "created"}: choose short or long commit before opening a PR.` : "Step 3/4: preview the native g-msg output, commit here, or create a PR branch first.";
+    case "branchNaming": return "Pi is generating dev/COMMIT/staged-branch-name.txt. Cancel will request Pi abort.";
+    case "branching": return "Creating a new branch with git switch -c before committing.";
     case "committing": return "Running native git commit from the generated message file.";
-    case "push": return "Step 5: push the new commit to the configured remote.";
+    case "push": return gitWorkflow.prMode ? "Push the PR branch, generate /pr, review the description, then create the pull request." : "Step 5: push the new commit to the configured remote.";
     case "pushing": return "Running git push. Cancel will request process termination.";
-    case "done": return "Push finished. Review the output below.";
+    case "prGenerating": return "Pi is generating dev/PR/<current-branch>.md with /pr.";
+    case "prReview": return "Review or edit the generated PR description before creating the pull request.";
+    case "prCreating": return "Running gh pr create with the confirmed description.";
+    case "done": return gitWorkflow.prMode ? "PR workflow finished. Review the output below." : "Push finished. Review the output below.";
     case "cancelled": return "No further workflow steps will run.";
     case "error": return gitWorkflow.error || "Fix the issue, then retry or restart.";
     default: return "Stage changes, generate a commit message, commit, and push.";
@@ -5326,9 +6379,14 @@ function renderGitWorkflow() {
   elements.gitWorkflowActions.replaceChildren();
 
   const activeIndex = GIT_WORKFLOW_ACTIVE_INDEX[gitWorkflow.step] ?? 0;
-  for (const [index, label] of GIT_WORKFLOW_STEPS.entries()) {
-    const item = make("span", "git-workflow-step", label);
-    if (gitWorkflow.step === "done" || index < activeIndex) item.classList.add("done");
+  const activeProcess = gitWorkflowProcessForStep(gitWorkflow.step, gitWorkflow.process);
+  for (const [index, process] of GIT_WORKFLOW_PROCESSES.entries()) {
+    const item = make("button", "git-workflow-step", process.label);
+    item.type = "button";
+    item.dataset.gitWorkflowProcess = process.value;
+    item.disabled = !!gitWorkflow.busy;
+    item.setAttribute("aria-pressed", String(process.value === activeProcess));
+    if (gitWorkflowActionDone(gitWorkflow, process.value)) item.classList.add("done");
     if (index === activeIndex && !["done", "cancelled", "error"].includes(gitWorkflow.step)) item.classList.add("active");
     elements.gitWorkflowSteps.append(item);
   }
@@ -5344,11 +6402,28 @@ function renderGitWorkflow() {
   } else if (gitWorkflow.step === "generating") {
     addGitWorkflowAction("Refresh message preview", () => loadGitWorkflowMessage({ requireFresh: true }), "", false);
   } else if (gitWorkflow.step === "message") {
-    addGitWorkflowAction("Commit short", () => commitGitWorkflow("short"), "primary", false);
-    addGitWorkflowAction("Commit long", () => commitGitWorkflow("long"), "primary", false);
+    if (!gitWorkflow.prMode) {
+      addGitWorkflowAction("Create PR", () => createGitPrBranch(), "primary", false, GIT_WORKFLOW_CREATE_PR_TOOLTIP);
+      addGitWorkflowAction("Manual branch", () => createGitPrBranchManually(), "", false, GIT_WORKFLOW_MANUAL_BRANCH_TOOLTIP);
+    }
+    addGitWorkflowAction("Commit short", () => commitGitWorkflow("short"), gitWorkflow.prMode ? "primary" : "", false);
+    addGitWorkflowAction("Commit long", () => commitGitWorkflow("long"), gitWorkflow.prMode ? "primary" : "", false);
     addGitWorkflowAction("Regenerate", () => runGitMessagePrompt(), "", false);
+  } else if (gitWorkflow.step === "branchNaming") {
+    addGitWorkflowAction("Refresh branch name", () => loadGitWorkflowBranchName({ requireFresh: true }), "", false);
+    addGitWorkflowAction("Manual branch", () => createGitPrBranchManually(), "", !!gitWorkflow.busy, GIT_WORKFLOW_MANUAL_BRANCH_TOOLTIP);
+  } else if (gitWorkflow.step === "branching") {
+    addGitWorkflowAction("Creating branch…", () => {}, "primary", true);
   } else if (gitWorkflow.step === "push") {
-    addGitWorkflowAction("Run git push", () => pushGitWorkflow(), "primary", false);
+    if (gitWorkflow.prMode) addGitWorkflowAction("Push and Create PR", () => pushAndCreatePrGitWorkflow(), "primary", false);
+    else addGitWorkflowAction("Run git push", () => pushGitWorkflow(), "primary", false);
+  } else if (gitWorkflow.step === "prGenerating") {
+    addGitWorkflowAction("Refresh PR description", () => loadGitWorkflowPr({ requireFresh: true }), "", false);
+  } else if (gitWorkflow.step === "prReview") {
+    addGitWorkflowAction("Create PR", () => createGitPrFromReview(), "primary", false);
+    addGitWorkflowAction("Regenerate /pr", () => runGitPrPrompt(), "", false);
+  } else if (gitWorkflow.step === "prCreating") {
+    addGitWorkflowAction("Creating PR…", () => {}, "primary", true);
   } else if (gitWorkflow.step === "done") {
     addGitWorkflowAction("Close", () => setGitWorkflow({ active: false }), "primary", false);
     addGitWorkflowAction("Start another", () => startGitWorkflow(), "", false);
@@ -5398,11 +6473,19 @@ function startGitWorkflow(tabId = activeTabId) {
   setGitWorkflow({
     active: true,
     step: "add",
+    process: "stage",
     busy: false,
-    output: "Ready to stage all changes with git add .\n\nNative mode is used for g-msg/g-short/g-long: dev/COMMIT message files are read directly and git commit is run without fish.",
+    output: "Ready to stage all changes with git add .\n\nNative mode is used for g-msg/g-short/g-long: dev/COMMIT message files are read directly and git commit is run without fish. After the message is generated, use Create PR to switch to a new branch before committing.",
     error: "",
     message: null,
     messageRequestedAt: 0,
+    branchName: "",
+    branchNameRequestedAt: 0,
+    actionsDone: createGitWorkflowActionsDone(),
+    prMode: false,
+    prBranch: "",
+    pr: null,
+    prRequestedAt: 0,
   }, { tabId });
 }
 
@@ -5410,7 +6493,8 @@ async function cancelGitWorkflow(tabId = gitWorkflowActionTabId()) {
   const tabContext = activeTabContext(tabId);
   const workflow = gitWorkflowForTab(tabId, { create: false });
   if (!workflow?.active) return;
-  const shouldAbortPi = workflow.step === "generating";
+  const shouldAbortPi = workflow.step === "generating" || workflow.step === "branchNaming" || workflow.step === "prGenerating";
+  if (activeGitPrDialogResolve) resolveGitPrDialog(null);
   workflow.runId += 1;
   setGitWorkflow({ step: "cancelled", busy: false, error: "", output: `${workflow.output || ""}${workflow.output ? "\n\n" : ""}Cancelled by user.` }, { tabId });
   if (shouldAbortPi && isCurrentTabContext(tabContext)) setRunIndicatorActivity("Abort requested; checking whether Pi stopped…");
@@ -5430,7 +6514,7 @@ async function runGitAdd(tabId = gitWorkflowActionTabId()) {
   try {
     const result = await gitWorkflowRequest("/api/git-workflow/add", { runId, tabId });
     if (!result) return;
-    setGitWorkflow({ step: "generate", busy: false, output: `${formatGitCommandResult(result)}\n\nStaged. Next: run /git-staged-msg.` }, { tabId });
+    setGitWorkflow({ step: "generate", busy: false, ...gitWorkflowActionDonePatch(workflow, "stage"), output: `${formatGitCommandResult(result)}\n\nStaged. Next: run /git-staged-msg.` }, { tabId });
     if (isCurrentTabContext(tabContext)) scheduleRefreshFooter();
   } catch (error) {
     if (isCurrentGitWorkflowRun(runId, tabId)) failGitWorkflow(error, "add", { tabId });
@@ -5494,6 +6578,7 @@ async function loadGitWorkflowMessage({ requireFresh = false, retries = 0, runId
       busy: false,
       error: "",
       message,
+      ...(requireFresh && currentWorkflow.messageRequestedAt ? gitWorkflowActionDonePatch(currentWorkflow, "message") : {}),
       output: formatCommitMessagePreview(message),
     }, { tabId });
   } catch (error) {
@@ -5507,6 +6592,130 @@ async function loadGitWorkflowMessage({ requireFresh = false, retries = 0, runId
   }
 }
 
+function gitBranchNamePromptMessage() {
+  if (hasAvailableCommand("git-branch-name")) return "/git-branch-name";
+  return [
+    "Generate one PR branch name for the current staged work.",
+    "Inspect only staged changes (`git diff --cached`) and the generated commit message files if present:",
+    "- dev/COMMIT/staged-commit-short.txt",
+    "- dev/COMMIT/staged-commit-long.txt",
+    "",
+    "Write exactly one line to dev/COMMIT/staged-branch-name.txt in this format:",
+    "<type>/<short-feature-name>",
+    "",
+    "Rules: use lowercase kebab-case, no spaces/underscores/uppercase/trailing punctuation, 2-5 words after the slash, and no extra lines or prose in the file.",
+  ].join("\n");
+}
+
+async function createGitPrBranch(tabId = gitWorkflowActionTabId()) {
+  await runGitBranchNamePrompt(tabId);
+}
+
+async function createGitPrBranchManually(tabId = gitWorkflowActionTabId()) {
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  if (!workflow) return;
+  await createGitPrBranchWithSuggestion(workflow.branchName || defaultGitPrBranchName(workflow.message), tabId);
+}
+
+async function runGitBranchNamePrompt(tabId = gitWorkflowActionTabId()) {
+  const tabContext = activeTabContext(tabId);
+  const targetTab = tabs.find((tab) => tab.id === tabId);
+  const targetBusy = tabId === activeTabId ? !!currentState?.isStreaming : activityForTab(targetTab).isWorking;
+  if (targetBusy) {
+    failGitWorkflow(new Error("Pi is currently running. Wait for it to finish or abort before generating a branch name."), "message", { tabId });
+    return;
+  }
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  if (!workflow) return;
+  const runId = workflow.runId;
+  const requestedAt = Date.now();
+  setGitWorkflow({
+    step: "branchNaming",
+    busy: true,
+    error: "",
+    branchNameRequestedAt: requestedAt,
+    output: "Sending branch-name request to Pi.\n\nCancel will request Pi abort.",
+  }, { tabId });
+  if (isCurrentTabContext(tabContext)) setRunIndicatorActivity("Sending branch-name request to Pi…");
+  try {
+    await api("/api/prompt", { method: "POST", body: { message: gitBranchNamePromptMessage() }, tabId });
+    if (!isCurrentGitWorkflowRun(runId, tabId)) return;
+    appendGitWorkflowOutput("Branch-name request accepted. Waiting for agent_end, then the branch name will be loaded.", { tabId });
+    if (isCurrentTabContext(tabContext)) scheduleRefreshState(120, tabContext);
+    setTimeout(() => {
+      const currentWorkflow = gitWorkflowForTab(tabId, { create: false });
+      const targetStillBusy = tabId === activeTabId && currentState?.isStreaming;
+      if (isCurrentGitWorkflowRun(runId, tabId) && currentWorkflow?.step === "branchNaming" && !targetStillBusy) {
+        loadGitWorkflowBranchName({ requireFresh: true, retries: 1, runId, tabId });
+      }
+    }, 2500);
+  } catch (error) {
+    if (isCurrentGitWorkflowRun(runId, tabId)) {
+      if (isCurrentTabContext(tabContext)) clearRunIndicatorActivity();
+      failGitWorkflow(error, "message", { tabId });
+    }
+  }
+}
+
+async function loadGitWorkflowBranchName({ requireFresh = false, retries = 0, runId, tabId = activeTabId } = {}) {
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  const expectedRunId = runId ?? workflow?.runId;
+  try {
+    const branchName = await gitWorkflowRequest("/api/git-workflow/branch-name", { method: "GET", runId: expectedRunId, tabId });
+    if (!branchName) return;
+    const currentWorkflow = gitWorkflowForTab(tabId, { create: false });
+    if (!currentWorkflow) return;
+    if (requireFresh && currentWorkflow.branchNameRequestedAt && (branchName.mtimeMs || 0) + 10000 < currentWorkflow.branchNameRequestedAt) {
+      throw new Error("Generated branch name has not refreshed yet.");
+    }
+    const branch = branchName.branch || defaultGitPrBranchName(currentWorkflow.message);
+    setGitWorkflow({
+      step: "message",
+      busy: false,
+      error: "",
+      branchName: branch,
+      output: `${formatCommitMessagePreview(currentWorkflow.message)}\n\nGenerated branch name: ${branch}`,
+    }, { tabId });
+    await createGitPrBranchWithSuggestion(branch, tabId, expectedRunId);
+  } catch (error) {
+    if (!isCurrentGitWorkflowRun(expectedRunId, tabId)) return;
+    if (retries > 0) {
+      setTimeout(() => loadGitWorkflowBranchName({ requireFresh, retries: retries - 1, runId: expectedRunId, tabId }), 1400);
+      return;
+    }
+    const currentWorkflow = gitWorkflowForTab(tabId, { create: false });
+    failGitWorkflow(error, currentWorkflow?.step === "branchNaming" ? "message" : currentWorkflow?.step, { tabId });
+  }
+}
+
+async function createGitPrBranchWithSuggestion(suggestion, tabId = gitWorkflowActionTabId(), expectedRunId) {
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  if (!workflow) return;
+  const proposedBranch = prompt("New PR branch name (example: type/feature-name)", suggestion || defaultGitPrBranchName(workflow.message));
+  if (expectedRunId !== undefined && !isCurrentGitWorkflowRun(expectedRunId, tabId)) return;
+  if (proposedBranch === null) {
+    setGitWorkflow({ step: "message", busy: false, output: `${formatCommitMessagePreview(workflow.message)}\n\nPR branch creation cancelled. Use Create PR to generate a branch name again or Manual branch to type one.` }, { tabId });
+    return;
+  }
+  const branch = proposedBranch.trim();
+  if (!branch) {
+    failGitWorkflow(new Error("Branch name is required to create a PR branch."), "message", { tabId });
+    return;
+  }
+  const runId = workflow.runId;
+  setGitWorkflow({ step: "branching", prMode: true, prBranch: branch, branchName: branch, busy: true, error: "", output: `${formatCommitMessagePreview(workflow.message)}\n\nRunning git switch -c ${branch}…` }, { tabId });
+  try {
+    const result = await gitWorkflowRequest("/api/git-workflow/branch", { body: { branch }, runId, tabId });
+    if (!result) return;
+    setGitWorkflow({ step: "message", prMode: true, prBranch: result.branch || branch, branchName: result.branch || branch, busy: false, output: `${formatGitCommandResult(result)}\n\nCreated PR branch ${result.branch || branch}. Choose Commit short or Commit long to commit on this branch.` }, { tabId });
+  } catch (error) {
+    if (isCurrentGitWorkflowRun(runId, tabId)) {
+      setGitWorkflow({ prMode: false, prBranch: "" }, { tabId });
+      failGitWorkflow(error, "message", { tabId });
+    }
+  }
+}
+
 async function commitGitWorkflow(variant, tabId = gitWorkflowActionTabId()) {
   const tabContext = activeTabContext(tabId);
   const workflow = gitWorkflowForTab(tabId, { create: false });
@@ -5516,7 +6725,8 @@ async function commitGitWorkflow(variant, tabId = gitWorkflowActionTabId()) {
   try {
     const result = await gitWorkflowRequest("/api/git-workflow/commit", { body: { variant }, runId, tabId });
     if (!result) return;
-    setGitWorkflow({ step: "push", busy: false, output: `${formatGitCommandResult(result)}\n\nCommit created. Next: git push.` }, { tabId });
+    const nextAction = workflow.prMode ? "Push and Create PR." : "git push.";
+    setGitWorkflow({ step: "push", busy: false, ...gitWorkflowActionDonePatch(workflow, "commit"), output: `${formatGitCommandResult(result)}\n\nCommit created. Next: ${nextAction}` }, { tabId });
     if (isCurrentTabContext(tabContext)) scheduleRefreshFooter();
   } catch (error) {
     if (isCurrentGitWorkflowRun(runId, tabId)) failGitWorkflow(error, "message", { tabId });
@@ -5532,13 +6742,129 @@ async function pushGitWorkflow(tabId = gitWorkflowActionTabId()) {
   try {
     const result = await gitWorkflowRequest("/api/git-workflow/push", { runId, tabId });
     if (!result) return;
-    setGitWorkflow({ step: "done", busy: false, output: formatGitCommandResult(result) || "git push finished." }, { tabId });
+    setGitWorkflow({ step: "done", busy: false, ...gitWorkflowActionDonePatch(workflow, "push"), output: formatGitCommandResult(result) || "git push finished." }, { tabId });
+    if (isCurrentTabContext(tabContext)) scheduleRefreshFooter();
+  } catch (error) {
+    if (isCurrentGitWorkflowRun(runId, tabId)) failGitWorkflow(error, "push", { tabId });
+  }
+}
+
+async function runGitPrPrompt(tabId = gitWorkflowActionTabId(), { prefixOutput = "" } = {}) {
+  const tabContext = activeTabContext(tabId);
+  const targetTab = tabs.find((tab) => tab.id === tabId);
+  const targetBusy = tabId === activeTabId ? !!currentState?.isStreaming : activityForTab(targetTab).isWorking;
+  if (targetBusy) {
+    failGitWorkflow(new Error("Pi is currently running. Wait for it to finish or abort before generating a PR description."), "push", { tabId });
+    return;
+  }
+  if (!hasAvailableCommand("pr")) {
+    failGitWorkflow(new Error(commandUnavailableMessage("pr")), "push", { tabId });
+    return;
+  }
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  if (!workflow) return;
+  const runId = workflow.runId;
+  const requestedAt = Date.now();
+  setGitWorkflow({
+    step: "prGenerating",
+    busy: true,
+    error: "",
+    prRequestedAt: requestedAt,
+    output: `${prefixOutput ? `${prefixOutput}\n\n` : ""}Sending /pr to Pi.\n\nCancel will request Pi abort.`,
+  }, { tabId });
+  if (isCurrentTabContext(tabContext)) setRunIndicatorActivity("Sending /pr to Pi…");
+  try {
+    await api("/api/prompt", { method: "POST", body: { message: "/pr" }, tabId });
+    if (!isCurrentGitWorkflowRun(runId, tabId)) return;
+    appendGitWorkflowOutput("/pr accepted. Waiting for agent_end, then the PR description will be loaded.", { tabId });
+    if (isCurrentTabContext(tabContext)) scheduleRefreshState(120, tabContext);
+    setTimeout(() => {
+      const currentWorkflow = gitWorkflowForTab(tabId, { create: false });
+      const targetStillBusy = tabId === activeTabId && currentState?.isStreaming;
+      if (isCurrentGitWorkflowRun(runId, tabId) && currentWorkflow?.step === "prGenerating" && !targetStillBusy) {
+        loadGitWorkflowPr({ requireFresh: true, retries: 1, runId, tabId });
+      }
+    }, 2500);
+  } catch (error) {
+    if (isCurrentGitWorkflowRun(runId, tabId)) {
+      if (isCurrentTabContext(tabContext)) clearRunIndicatorActivity();
+      failGitWorkflow(error, "push", { tabId });
+    }
+  }
+}
+
+async function loadGitWorkflowPr({ requireFresh = false, retries = 0, runId, tabId = activeTabId } = {}) {
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  const expectedRunId = runId ?? workflow?.runId;
+  try {
+    const pr = await gitWorkflowRequest("/api/git-workflow/pr-description", { method: "GET", runId: expectedRunId, tabId });
+    if (!pr) return;
+    const currentWorkflow = gitWorkflowForTab(tabId, { create: false });
+    if (!currentWorkflow) return;
+    if (requireFresh && currentWorkflow.prRequestedAt && (pr.mtimeMs || 0) + 10000 < currentWorkflow.prRequestedAt) {
+      throw new Error("Generated PR description has not refreshed yet.");
+    }
+    setGitWorkflow({
+      step: "prReview",
+      busy: false,
+      error: "",
+      pr,
+      prBranch: pr.branch || currentWorkflow.prBranch,
+      output: formatGitPrPreview(pr),
+    }, { tabId });
+  } catch (error) {
+    if (!isCurrentGitWorkflowRun(expectedRunId, tabId)) return;
+    if (retries > 0) {
+      setTimeout(() => loadGitWorkflowPr({ requireFresh, retries: retries - 1, runId: expectedRunId, tabId }), 1400);
+      return;
+    }
+    const currentWorkflow = gitWorkflowForTab(tabId, { create: false });
+    failGitWorkflow(error, currentWorkflow?.step === "prGenerating" ? "push" : currentWorkflow?.step, { tabId });
+  }
+}
+
+async function pushAndCreatePrGitWorkflow(tabId = gitWorkflowActionTabId()) {
+  const tabContext = activeTabContext(tabId);
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  if (!workflow) return;
+  const runId = workflow.runId;
+  const branch = workflow.prBranch || "current branch";
+  setGitWorkflow({ step: "pushing", busy: true, error: "", output: `Pushing PR branch ${branch}…` }, { tabId });
+  try {
+    const result = await gitWorkflowRequest("/api/git-workflow/push", { body: { setUpstream: true, branch: workflow.prBranch }, runId, tabId });
+    if (!result) return;
+    setGitWorkflow({ ...gitWorkflowActionDonePatch(workflow, "push") }, { tabId });
     if (isCurrentTabContext(tabContext)) scheduleRefreshFooter();
+    await runGitPrPrompt(tabId, { prefixOutput: `${formatGitCommandResult(result)}\n\nPushed PR branch ${result.branch || branch}.` });
   } catch (error) {
     if (isCurrentGitWorkflowRun(runId, tabId)) failGitWorkflow(error, "push", { tabId });
   }
 }
 
+async function createGitPrFromReview(tabId = gitWorkflowActionTabId()) {
+  const tabContext = activeTabContext(tabId);
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  if (!workflow?.pr) return;
+  const runId = workflow.runId;
+  const review = await openGitPrReviewDialog(workflow.pr, { title: gitWorkflowMessageTitle(workflow.message) });
+  if (!isCurrentGitWorkflowRun(runId, tabId)) return;
+  if (!review) {
+    setGitWorkflow({ step: "prReview", busy: false, output: `${formatGitPrPreview(workflow.pr)}\n\nPR creation cancelled. Edit the description, regenerate /pr, or press Create PR again.` }, { tabId });
+    return;
+  }
+  const title = review.title.trim();
+  const body = review.body.trimEnd();
+  setGitWorkflow({ step: "prCreating", busy: true, error: "", output: `${formatGitPrPreview({ ...workflow.pr, body })}\n\nCreating pull request with gh pr create…` }, { tabId });
+  try {
+    const result = await gitWorkflowRequest("/api/git-workflow/create-pr", { body: { title, body }, runId, tabId });
+    if (!result) return;
+    setGitWorkflow({ step: "done", busy: false, ...gitWorkflowActionDonePatch(workflow, "push"), output: `${formatGitCommandResult(result)}\n\nPull request created.` }, { tabId });
+    if (isCurrentTabContext(tabContext)) scheduleRefreshFooter();
+  } catch (error) {
+    if (isCurrentGitWorkflowRun(runId, tabId)) failGitWorkflow(error, "prReview", { tabId });
+  }
+}
+
 function resumeGitWorkflowForActiveTab(tabContext = activeTabContext()) {
   if (!isCurrentTabContext(tabContext)) return;
   bindGitWorkflowToActiveTab();
@@ -5552,6 +6878,22 @@ function resumeGitWorkflowForActiveTab(tabContext = activeTabContext()) {
     }
     loadGitWorkflowMessage({ requireFresh: true, retries: 3, runId: gitWorkflow.runId, tabId: workflowTabId });
   }
+  if (workflowTabId === tabContext.tabId && gitWorkflow.active && gitWorkflow.step === "branchNaming" && !currentState?.isStreaming) {
+    const retryDelayMs = Math.max(0, 2500 - (Date.now() - (gitWorkflow.branchNameRequestedAt || 0)));
+    if (retryDelayMs > 0) {
+      setTimeout(() => resumeGitWorkflowForActiveTab(tabContext), retryDelayMs);
+      return;
+    }
+    loadGitWorkflowBranchName({ requireFresh: true, retries: 3, runId: gitWorkflow.runId, tabId: workflowTabId });
+  }
+  if (workflowTabId === tabContext.tabId && gitWorkflow.active && gitWorkflow.step === "prGenerating" && !currentState?.isStreaming) {
+    const retryDelayMs = Math.max(0, 2500 - (Date.now() - (gitWorkflow.prRequestedAt || 0)));
+    if (retryDelayMs > 0) {
+      setTimeout(() => resumeGitWorkflowForActiveTab(tabContext), retryDelayMs);
+      return;
+    }
+    loadGitWorkflowPr({ requireFresh: true, retries: 3, runId: gitWorkflow.runId, tabId: workflowTabId });
+  }
 }
 
 function normalizeQueuedMessages(event) {
@@ -8139,6 +9481,13 @@ function setNativeCommandMenuOpen(open) {
   elements.nativeCommandMenuButton.parentElement?.classList.toggle("open", nativeCommandMenuOpen);
 }
 
+function setAppRunnerMenuOpen(open) {
+  appRunnerMenuOpen = !!open;
+  elements.appRunnerMenuButton?.setAttribute("aria-expanded", appRunnerMenuOpen ? "true" : "false");
+  elements.appRunnerMenuButton?.classList.toggle("menu-open", appRunnerMenuOpen);
+  elements.appRunnerMenuButton?.parentElement?.classList.toggle("open", appRunnerMenuOpen);
+}
+
 function setOptionsMenuOpen(open) {
   optionsMenuOpen = !!open;
   elements.optionsMenuButton.setAttribute("aria-expanded", optionsMenuOpen ? "true" : "false");
@@ -8386,6 +9735,7 @@ async function installOptionalFeature(featureId) {
 function runPublishWorkflow(command) {
   setComposerActionsOpen(false);
   setPublishMenuOpen(false);
+  setAppRunnerMenuOpen(false);
   setOptionsMenuOpen(false);
   const commandName = String(command || "").replace(/^\//, "").split(/\s+/)[0];
   const featureId = OPTIONAL_COMMAND_FEATURES.get(commandName);
@@ -8404,6 +9754,7 @@ async function runNativeCommandMenu(command) {
   setComposerActionsOpen(false);
   setPublishMenuOpen(false);
   setNativeCommandMenuOpen(false);
+  setAppRunnerMenuOpen(false);
   setOptionsMenuOpen(false);
   const commandName = String(command || "").replace(/^\//, "").split(/\s+/)[0].toLowerCase();
   const featureId = optionalFeatureIdForCommand(commandName);
@@ -10081,6 +11432,7 @@ async function refreshAll(tabContext = activeTabContext()) {
     refreshCommands(tabContext),
     refreshStats(tabContext),
     refreshWorkspace(tabContext),
+    refreshAppRunners(tabContext),
     refreshNativeSettings(tabContext),
     refreshNetworkStatus(),
     refreshWebuiVersion(),
@@ -10795,6 +12147,11 @@ function handleEvent(event) {
     case "webui_connected":
       setWebuiVersion(event.version);
       setWebuiDevServer(isWebuiDevMetadata(event));
+      if (Object.prototype.hasOwnProperty.call(event, "activeRun")) {
+        setAppRunnerData(event.tabId || activeTabId, { cwd: event.cwd, activeRun: event.activeRun });
+        renderAppRunnerControls();
+        renderWidgets();
+      }
       addEvent(`connected to ${event.tabTitle || "terminal"} for ${event.cwd}`);
       scheduleForegroundReconcile("event stream reconnect", 0);
       break;
@@ -10816,6 +12173,7 @@ function handleEvent(event) {
     case "webui_tab_reloaded":
       addEvent(`${event.tabTitle || "terminal"} reloaded`);
       addTransientMessage({ role: "native", title: "/reload", content: `${event.tabTitle || "terminal"} reloaded. Keybindings, extensions, skills, prompts, and themes were refreshed by restarting the RPC tab${event.sessionFile ? ` and resuming ${event.sessionFile}` : ""}.`, level: "info" });
+      clearContextUsageUnknownAfterCompaction(event.tabId || activeTabId);
       statusEntries.clear();
       widgets.clear();
       resetOptionalFeatureAvailability();
@@ -10833,9 +12191,18 @@ function handleEvent(event) {
       removeQueuedDialogRequests(event.ids || []);
       addEvent(`cancelled ${event.ids?.length || 0} pending extension UI request(s)`, "warn");
       break;
+    case "webui_app_runner_update":
+      setAppRunnerData(event.tabId || activeTabId, { cwd: event.cwd, activeRun: event.activeRun });
+      renderAppRunnerControls();
+      renderWidgets();
+      break;
     case "webui_cwd_changed":
       addEvent(`${event.tabTitle || "terminal"} cwd changed to ${event.cwd}`);
+      setAppRunnerData(event.tabId || activeTabId, { cwd: event.cwd, activeRun: null, runners: [] });
+      renderAppRunnerControls();
+      renderWidgets();
       refreshTabs().catch((error) => addEvent(error.message, "error"));
+      refreshAppRunners(tabContext).catch((error) => addEvent(error.message, "error"));
       scheduleRefreshFooter();
       break;
     case "webui_network_rebinding": {
@@ -10879,6 +12246,7 @@ function handleEvent(event) {
     case "agent_end":
       addEvent("agent finished");
       notifyAgentDone(event.tabId || activeTabId, { activity: event.tabActivity, tabTitle: event.tabTitle });
+      clearContextUsageUnknownAfterCompaction(event.tabId || activeTabId);
       if (currentState) currentState = { ...currentState, isStreaming: false };
       clearRunIndicatorActivity();
       markTabOutputSeen();
@@ -10892,6 +12260,10 @@ function handleEvent(event) {
         const workflow = gitWorkflowForTab(workflowTabId, { create: false });
         if (workflow?.active && workflow.step === "generating") {
           loadGitWorkflowMessage({ requireFresh: true, retries: 3, runId: workflow.runId, tabId: workflowTabId });
+        } else if (workflow?.active && workflow.step === "branchNaming") {
+          loadGitWorkflowBranchName({ requireFresh: true, retries: 3, runId: workflow.runId, tabId: workflowTabId });
+        } else if (workflow?.active && workflow.step === "prGenerating") {
+          loadGitWorkflowPr({ requireFresh: true, retries: 3, runId: workflow.runId, tabId: workflowTabId });
         }
       }
       break;
@@ -10930,15 +12302,22 @@ function handleEvent(event) {
       break;
     case "compaction_start":
       if (currentState) currentState = { ...currentState, isCompacting: true };
+      markContextUsageUnknownAfterCompaction(event.tabId || activeTabId);
       setRunIndicatorActivity(`Compacting context${event.reason ? ` (${event.reason})` : ""}…`);
       addEvent(`compaction started (${event.reason})`);
+      renderStatus();
       break;
     case "compaction_end":
       if (currentState) currentState = { ...currentState, isCompacting: false };
+      if (event.aborted) clearContextUsageUnknownAfterCompaction(event.tabId || activeTabId);
+      else markContextUsageUnknownAfterCompaction(event.tabId || activeTabId);
       addEvent(`compaction ${event.aborted ? "aborted" : "finished"}`);
       if (!currentState?.isStreaming) clearRunIndicatorActivity();
       markTabOutputSeen();
+      renderStatus();
+      scheduleRefreshState();
       scheduleRefreshMessages();
+      scheduleRefreshFooter();
       break;
     case "auto_retry_start": {
       const seconds = Math.max(0, Math.ceil(Number(event.delayMs || 0) / 1000));
@@ -10982,6 +12361,7 @@ function handleEvent(event) {
           applyOptimisticThinkingSelection(event.data, tabContext);
         } else if (event.command === "new_session") {
           const tabId = event.tabId || activeTabId;
+          clearContextUsageUnknownAfterCompaction(tabId);
           forgetLastUserPrompt(tabId);
           resetGitWorkflowForTab(tabId);
         }
@@ -11038,6 +12418,23 @@ elements.promptListSaveButton?.addEventListener("click", saveDisplayedPromptList
 elements.promptListRunListButton?.addEventListener("click", () => runDisplayedPromptList());
 elements.promptListCloseButton?.addEventListener("click", () => elements.promptListDialog?.close());
 elements.promptListDialog?.querySelector("form")?.addEventListener("submit", (event) => event.preventDefault());
+elements.attachmentTextCancelButton?.addEventListener("click", closeTextAttachmentEditor);
+elements.attachmentTextSaveButton?.addEventListener("click", saveTextAttachmentEdit);
+elements.attachmentTextEditor?.addEventListener("input", () => {
+  renderTextAttachmentEditorMeta();
+  setAttachmentTextStatus("Unsaved attachment edits.", "warn");
+});
+elements.attachmentTextDialog?.addEventListener("close", () => {
+  activeTextAttachmentEditor = null;
+  if (elements.attachmentTextEditor) elements.attachmentTextEditor.value = "";
+  setAttachmentTextStatus("");
+});
+elements.attachmentTextDialog?.addEventListener("keydown", (event) => {
+  if (!(event.ctrlKey || event.metaKey) || event.altKey || event.shiftKey || event.key.toLowerCase() !== "s") return;
+  event.preventDefault();
+  if (!elements.attachmentTextSaveButton?.disabled) saveTextAttachmentEdit();
+});
+elements.attachmentTextDialog?.querySelector("form")?.addEventListener("submit", (event) => event.preventDefault());
 elements.sendFeedbackButton.addEventListener("click", () => submitQueuedActionFeedback());
 elements.composer.addEventListener("submit", (event) => {
   event.preventDefault();
@@ -11051,7 +12448,47 @@ elements.followUpButton.addEventListener("click", () => sendPromptFromModeButton
 elements.terminalTabsToggleButton.addEventListener("click", () => {
   setMobileTabsExpanded(!document.body.classList.contains("mobile-tabs-expanded"));
 });
-elements.newTabButton.addEventListener("click", () => createTerminalTab());
+elements.newTabButton.addEventListener("click", (event) => {
+  event.stopPropagation();
+  openNewTabMenu();
+});
+elements.newTabButton.addEventListener("keydown", (event) => {
+  if (event.key !== "ArrowDown" && event.key !== "ArrowUp" && event.key !== "Enter" && event.key !== " ") return;
+  event.preventDefault();
+  openNewTabMenu();
+  focusNewTabMenuItem(event.key === "ArrowUp" ? "last" : "first");
+});
+elements.newTabMenuPanel?.addEventListener("keydown", (event) => {
+  if (event.key === "Escape") {
+    event.preventDefault();
+    setNewTabMenuOpen(false);
+    elements.newTabButton.focus({ preventScroll: true });
+  } else if (event.key === "ArrowDown") {
+    event.preventDefault();
+    moveNewTabMenuFocus(1);
+  } else if (event.key === "ArrowUp") {
+    event.preventDefault();
+    moveNewTabMenuFocus(-1);
+  } else if (event.key === "Home") {
+    event.preventDefault();
+    focusNewTabMenuItem("first");
+  } else if (event.key === "End") {
+    event.preventDefault();
+    focusNewTabMenuItem("last");
+  }
+});
+elements.newTabMenu?.addEventListener("pointerenter", () => openNewTabMenu());
+elements.newTabMenu?.addEventListener("pointerleave", () => {
+  if (!elements.newTabMenu?.contains(document.activeElement)) setNewTabMenuOpen(false);
+});
+elements.newTabMenu?.addEventListener("focusin", () => openNewTabMenu());
+elements.newTabMenu?.addEventListener("focusout", () => {
+  setTimeout(() => {
+    if (!elements.newTabMenu?.contains(document.activeElement)) setNewTabMenuOpen(false);
+  }, 0);
+});
+elements.newTabCurrentDirectoryButton?.addEventListener("click", () => createTerminalTab(currentDirectoryForNewTab(), { triggerButton: elements.newTabCurrentDirectoryButton }));
+elements.newTabChooseDirectoryButton?.addEventListener("click", () => createTerminalTabFromChosenDirectory({ triggerButton: elements.newTabChooseDirectoryButton }));
 elements.closeAllTabsButton.addEventListener("click", () => closeAllTerminalTabs());
 elements.gitWorkflowButton.addEventListener("click", () => {
   setComposerActionsOpen(false);
@@ -11060,17 +12497,20 @@ elements.gitWorkflowButton.addEventListener("click", () => {
 const publishMenuContainer = elements.publishButton.parentElement;
 elements.publishButton.addEventListener("click", () => {
   setNativeCommandMenuOpen(false);
+  setAppRunnerMenuOpen(false);
   setOptionsMenuOpen(false);
   setPublishMenuOpen(true);
 });
 publishMenuContainer?.addEventListener("pointerenter", () => {
   setNativeCommandMenuOpen(false);
+  setAppRunnerMenuOpen(false);
   setOptionsMenuOpen(false);
   setPublishMenuOpen(true);
 });
 publishMenuContainer?.addEventListener("pointerleave", () => setPublishMenuOpen(false));
 publishMenuContainer?.addEventListener("focusin", () => {
   setNativeCommandMenuOpen(false);
+  setAppRunnerMenuOpen(false);
   setOptionsMenuOpen(false);
   setPublishMenuOpen(true);
 });
@@ -11082,17 +12522,20 @@ publishMenuContainer?.addEventListener("focusout", () => {
 const nativeCommandMenuContainer = elements.nativeCommandMenuButton.parentElement;
 elements.nativeCommandMenuButton.addEventListener("click", () => {
   setPublishMenuOpen(false);
+  setAppRunnerMenuOpen(false);
   setOptionsMenuOpen(false);
   setNativeCommandMenuOpen(true);
 });
 nativeCommandMenuContainer?.addEventListener("pointerenter", () => {
   setPublishMenuOpen(false);
+  setAppRunnerMenuOpen(false);
   setOptionsMenuOpen(false);
   setNativeCommandMenuOpen(true);
 });
 nativeCommandMenuContainer?.addEventListener("pointerleave", () => setNativeCommandMenuOpen(false));
 nativeCommandMenuContainer?.addEventListener("focusin", () => {
   setPublishMenuOpen(false);
+  setAppRunnerMenuOpen(false);
   setOptionsMenuOpen(false);
   setNativeCommandMenuOpen(true);
 });
@@ -11101,21 +12544,66 @@ nativeCommandMenuContainer?.addEventListener("focusout", () => {
     if (!nativeCommandMenuContainer?.contains(document.activeElement)) setNativeCommandMenuOpen(false);
   }, 0);
 });
+const appRunnerMenuContainer = elements.appRunnerMenuButton?.parentElement;
+elements.appRunnerInfoButton?.addEventListener("click", (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+  openAppRunnerInfoDialog();
+});
+elements.appRunnerInfoCloseButton?.addEventListener("click", closeAppRunnerInfoDialog);
+elements.appRunnerMenuButton?.addEventListener("click", async () => {
+  setPublishMenuOpen(false);
+  setNativeCommandMenuOpen(false);
+  setOptionsMenuOpen(false);
+  setAppRunnerMenuOpen(false);
+  const tabContext = activeTabContext();
+  try {
+    await refreshAppRunners(tabContext);
+    if (!isCurrentTabContext(tabContext)) return;
+    if (appRunnerMenuCanOpen()) setAppRunnerMenuOpen(true);
+    else if (!appRunnerIsRunning(activeAppRunnerData().activeRun)) openAppRunnerInfoDialog();
+  } catch (error) {
+    if (isCurrentTabContext(tabContext)) addEvent(error.message || String(error), "error");
+  }
+});
+appRunnerMenuContainer?.addEventListener("pointerenter", () => {
+  if (elements.appRunnerMenuButton?.disabled || !appRunnerMenuCanOpen()) return;
+  setPublishMenuOpen(false);
+  setNativeCommandMenuOpen(false);
+  setOptionsMenuOpen(false);
+  setAppRunnerMenuOpen(true);
+});
+appRunnerMenuContainer?.addEventListener("pointerleave", () => setAppRunnerMenuOpen(false));
+appRunnerMenuContainer?.addEventListener("focusin", () => {
+  if (elements.appRunnerMenuButton?.disabled || !appRunnerMenuCanOpen()) return;
+  setPublishMenuOpen(false);
+  setNativeCommandMenuOpen(false);
+  setOptionsMenuOpen(false);
+  setAppRunnerMenuOpen(true);
+});
+appRunnerMenuContainer?.addEventListener("focusout", () => {
+  setTimeout(() => {
+    if (!appRunnerMenuContainer?.contains(document.activeElement)) setAppRunnerMenuOpen(false);
+  }, 0);
+});
 const optionsMenuContainer = elements.optionsMenuButton.parentElement;
 elements.optionsMenuButton.addEventListener("click", () => {
   setPublishMenuOpen(false);
   setNativeCommandMenuOpen(false);
+  setAppRunnerMenuOpen(false);
   setOptionsMenuOpen(true);
 });
 optionsMenuContainer?.addEventListener("pointerenter", () => {
   setPublishMenuOpen(false);
   setNativeCommandMenuOpen(false);
+  setAppRunnerMenuOpen(false);
   setOptionsMenuOpen(true);
 });
 optionsMenuContainer?.addEventListener("pointerleave", () => setOptionsMenuOpen(false));
 optionsMenuContainer?.addEventListener("focusin", () => {
   setPublishMenuOpen(false);
   setNativeCommandMenuOpen(false);
+  setAppRunnerMenuOpen(false);
   setOptionsMenuOpen(true);
 });
 optionsMenuContainer?.addEventListener("focusout", () => {
@@ -11135,7 +12623,32 @@ elements.optionsSettingsButton.addEventListener("click", () => runNativeCommandM
 elements.optionsExportButton.addEventListener("click", () => runNativeCommandMenu("/export"));
 elements.optionsForkButton.addEventListener("click", () => runNativeCommandMenu("/fork"));
 elements.optionsTreeButton.addEventListener("click", () => runNativeCommandMenu("/tree"));
+elements.gitWorkflowSteps.addEventListener("click", (event) => {
+  const target = event.target instanceof Element ? event.target : null;
+  const button = target?.closest("[data-git-workflow-process]");
+  if (!button || !elements.gitWorkflowSteps.contains(button) || button.disabled) return;
+  selectGitWorkflowProcess(button.dataset.gitWorkflowProcess);
+});
 elements.gitWorkflowCancelButton.addEventListener("click", () => cancelGitWorkflow());
+elements.gitPrCancelButton?.addEventListener("click", () => resolveGitPrDialog(null));
+elements.gitPrCreateButton?.addEventListener("click", () => {
+  const title = elements.gitPrTitleInput?.value.trim() || "";
+  const body = elements.gitPrBodyEditor?.value.trimEnd() || "";
+  if (!title) {
+    setGitPrDialogStatus("PR title is required.", "error");
+    elements.gitPrTitleInput?.focus();
+    return;
+  }
+  if (!body.trim()) {
+    setGitPrDialogStatus("PR description is required.", "error");
+    elements.gitPrBodyEditor?.focus();
+    return;
+  }
+  resolveGitPrDialog({ title, body });
+});
+elements.gitPrDialog?.addEventListener("close", () => {
+  if (activeGitPrDialogResolve) resolveGitPrDialog(null);
+});
 elements.nativeCommandDialog.addEventListener("close", () => {
   elements.nativeCommandSearch.oninput = null;
   nativeCommandTabId = null;
@@ -11231,6 +12744,8 @@ elements.compactButton.addEventListener("click", async () => {
     elements.compactButton.textContent = "Compacting…";
     setRunIndicatorActivity("Requesting context compaction…");
     scrollChatToBottom({ force: true });
+    markContextUsageUnknownAfterCompaction(tabContext.tabId);
+    renderFooter();
     addEvent("manual compaction requested");
     await api("/api/compact", { method: "POST", body: {}, tabId: tabContext.tabId });
     if (!isCurrentTabContext(tabContext)) return;
@@ -11239,7 +12754,9 @@ elements.compactButton.addEventListener("click", async () => {
     scheduleRefreshFooter(600, tabContext);
   } catch (error) {
     if (isCurrentTabContext(tabContext)) {
+      clearContextUsageUnknownAfterCompaction(tabContext.tabId);
       clearRunIndicatorActivity();
+      renderFooter();
       addEvent(error.message, "error");
     }
   } finally {
@@ -11339,6 +12856,9 @@ document.addEventListener("pointerdown", (event) => {
   if (openTerminalTabGroupKey && !event.target?.closest?.(".terminal-tab-group")) {
     clearOpenTerminalTabGroup(openTerminalTabGroupKey);
   }
+  if (newTabMenuOpen && !event.target?.closest?.(".terminal-new-tab-menu")) {
+    setNewTabMenuOpen(false);
+  }
   if (document.body.classList.contains("composer-actions-open") && !elements.composer.contains(event.target)) {
     setComposerActionsOpen(false);
   }
@@ -11348,10 +12868,14 @@ document.addEventListener("pointerdown", (event) => {
   if (nativeCommandMenuOpen && !event.target?.closest?.(".composer-native-command-menu")) {
     setNativeCommandMenuOpen(false);
   }
+  if (appRunnerMenuOpen && !event.target?.closest?.(".composer-app-runner-menu")) {
+    setAppRunnerMenuOpen(false);
+  }
   if (optionsMenuOpen && !event.target?.closest?.(".composer-options-menu")) {
     setOptionsMenuOpen(false);
   }
   if (document.body.classList.contains("mobile-tabs-expanded") && !elements.tabBar.contains(event.target) && !elements.terminalTabsToggleButton.contains(event.target)) {
+    setNewTabMenuOpen(false);
     setMobileTabsExpanded(false);
   }
   if (isFooterPickerOpen() && !elements.statusBar.contains(event.target)) {
@@ -11374,7 +12898,7 @@ function isTextEntryTarget(target) {
 
 function shouldHandleNativeAppShortcut(event) {
   if (event.defaultPrevented) return false;
-  if (elements.dialog?.open || elements.pathPickerDialog?.open || elements.nativeCommandDialog?.open) return false;
+  if (elements.dialog?.open || elements.pathPickerDialog?.open || elements.nativeCommandDialog?.open || elements.appRunnerInfoDialog?.open) return false;
   return event.target === elements.promptInput || !isTextEntryTarget(event.target);
 }
 
@@ -11442,15 +12966,24 @@ window.addEventListener("keydown", (event) => {
     setNativeCommandMenuOpen(false);
     return;
   }
+  if (appRunnerMenuOpen) {
+    setAppRunnerMenuOpen(false);
+    return;
+  }
   if (optionsMenuOpen) {
     setOptionsMenuOpen(false);
     return;
   }
+  if (newTabMenuOpen) {
+    setNewTabMenuOpen(false);
+    return;
+  }
   if (document.body.classList.contains("composer-actions-open")) {
     setComposerActionsOpen(false);
     return;
   }
   if (document.body.classList.contains("mobile-tabs-expanded")) {
+    setNewTabMenuOpen(false);
     setMobileTabsExpanded(false);
     return;
   }
@@ -11473,7 +13006,7 @@ window.addEventListener("keydown", (event) => {
     }
     lastEmptyPromptEscapeTime = now;
   }
-  if (isMobileView() && !document.body.classList.contains("side-panel-collapsed")) {
+  if (isSidePanelOverlayView() && !document.body.classList.contains("side-panel-collapsed")) {
     setSidePanelCollapsed(true);
     return;
   }
@@ -11566,6 +13099,7 @@ elements.promptInput.addEventListener("keydown", (event) => {
 
 elements.promptInput.addEventListener("input", () => {
   resetPromptHistoryNavigation();
+  if (moveLongPromptInputToAttachment()) return;
   resizePromptInput();
   renderCommandSuggestions();
 });
@@ -11594,6 +13128,7 @@ resizePromptInput();
 focusPromptInput({ defer: true });
 updateComposerModeButtons();
 updateOptionalFeatureAvailability();
+renderAppRunnerControls();
 renderLoadedPromptListPreview();
 loadLastUserPromptCache();
 loadPromptHistoryCache();
@@ -11613,6 +13148,7 @@ bindSidePanelSectionToggles();
 restoreSidePanelState();
 initializeCodexUsage();
 bindMobileViewChanges();
+bindSidePanelOverlayViewChanges();
 registerPwaServiceWorker();
 renderServerOfflinePanel();
 initializeTabs().catch((error) => addEvent(error.message, "error"));