@firstpick/pi-package-webui 0.4.3 → 0.4.4

package/public/app.js

@@ -58,6 +58,7 @@ const elements = {
   skillEditorCancelButton: $("#skillEditorCancelButton"),
   skillEditorSaveButton: $("#skillEditorSaveButton"),
   sendButton: $("#sendButton"),
+  btwButton: $("#btwButton"),
   commandSuggest: $("#commandSuggest"),
   attachmentTray: $("#attachmentTray"),
   attachButton: $("#attachButton"),
@@ -301,6 +302,11 @@ let statsOverlayLastScope = "14";
 let statsOverlayCalibrationMessage = "";
 let statsOverlayCalibrationBusy = "";
 let latestStatsOverlayPayload = null;
+let latestBtwWidgetPayload = null;
+let btwWidgetDismissedId = "";
+let btwWidgetComposerOpen = false;
+let btwWidgetInputDraft = "";
+let btwWidgetFocusAfterRender = false;
 let latestWorkspace = null;
 let latestNetwork = null;
 let webuiVersion = "";
@@ -423,6 +429,14 @@ const GIT_INIT_STACK_STORAGE_KEY = "pi-webui-git-init-stack";
 const STATS_WEBUI_STATUS_KEY = "stats-webui";
 const STATS_WEBUI_PAYLOAD_TYPE = "firstpick.pi-extension-stats.overlay";
 const STATS_WEBUI_PAYLOAD_VERSION = 1;
+const BTW_WEBUI_STATUS_KEY = "btw-webui";
+const BTW_OUTPUT_WIDGET_KEY = "btw:output";
+const BTW_FOOTER_WIDGET_KEY = "btw:footer";
+const BTW_WIDGET_PAYLOAD_PREFIX = "BTW_WEBUI_PAYLOAD ";
+const BTW_WEBUI_PAYLOAD_TYPES = new Set(["firstpick.pi-extension-btw.overlay", "firstpick.pi-extension-btw.output"]);
+const WORKFLOW_WIDGET_PAYLOAD_PREFIX = "WORKFLOW_WEBUI_PAYLOAD ";
+const WORKFLOW_SUBPROCESS_PAYLOAD_TYPE = "firstpick.pi-extension-workflows.subprocess";
+const WORKFLOW_SUBPROCESS_PAYLOAD_VERSION = 1;
 const GIT_CHANGES_RENDER_ROW_LIMIT = 4000;
 const LAST_USER_PROMPT_STORAGE_KEY = "pi-webui-last-user-prompts";
 const PROMPT_HISTORY_STORAGE_KEY = "pi-webui-prompt-history";
@@ -496,9 +510,11 @@ let liveToolRenderTimer = null;
 // commands and live widget events), not npm package folders. This keeps local dev
 // symlinks and independently installed packages working.
 const optionalFeatureAvailability = {
+  btwCommand: false,
   gitWorkflow: false,
   releaseNpm: false,
   releaseAur: false,
+  workflows: false,
   safetyGuard: false,
   statsCommand: false,
   gitFooterStatus: false,
@@ -509,6 +525,13 @@ const optionalFeatureAvailability = {
   themeBundle: false,
 };
 const OPTIONAL_FEATURES = [
+  {
+    id: "btwCommand",
+    label: "/btw side questions",
+    packageName: "@firstpick/pi-extension-btw",
+    capabilityLabel: "/btw or btw:output widget event",
+    description: "Ephemeral side-question command with TUI overlay and browser output-widget rendering.",
+  },
   {
     id: "gitWorkflow",
     label: "Guided Git workflow",
@@ -530,6 +553,13 @@ const OPTIONAL_FEATURES = [
     capabilityLabel: "/release-aur",
     description: "Publish menu action, setup helpers, skills, and AUR release widgets.",
   },
+  {
+    id: "workflows",
+    label: "Workflows",
+    packageName: "@firstpick/pi-extension-workflows",
+    capabilityLabel: "/workflow or workflow subprocess widget event",
+    description: "Modular workflow runner with live subprocess output shown in a non-blocking Web UI widget.",
+  },
   {
     id: "safetyGuard",
     label: "Safety guard",
@@ -589,11 +619,16 @@ const OPTIONAL_FEATURES = [
 ];
 const OPTIONAL_FEATURE_BY_ID = new Map(OPTIONAL_FEATURES.map((feature) => [feature.id, feature]));
 const OPTIONAL_COMMAND_FEATURES = new Map([
+  ["btw", "btwCommand"],
+  ["btw-transfer", "btwCommand"],
+  ["btw-status", "btwCommand"],
   ["git-staged-msg", "gitWorkflow"],
   ["git-branch-name", "gitWorkflow"],
   ["pr", "gitWorkflow"],
   ["release-npm", "releaseNpm"],
   ["release-aur", "releaseAur"],
+  ["workflow", "workflows"],
+  ["workflow-clear", "workflows"],
   ["safety-guard", "safetyGuard"],
   ["skills", "tuiSkillsCommand"],
   ["tools", "tuiToolsCommand"],
@@ -604,6 +639,8 @@ const OPTIONAL_COMMAND_FEATURES = new Map([
 ]);
 const HIDDEN_COMMAND_NAMES = new Set(["webui-tree-navigate", "webui-helper"]);
 HIDDEN_COMMAND_NAMES.add("stats-webui");
+HIDDEN_COMMAND_NAMES.add("btw-status");
+HIDDEN_COMMAND_NAMES.add("btw-transfer");
 const NATIVE_SELECTOR_COMMANDS = new Set(["model", "settings", "theme", "fork", "clone", "name", "resume", "tree", "login", "logout", "scoped-models", "tools", "skills"]);
 const SETTINGS_THINKING_OPTIONS = ["off", "minimal", "low", "medium", "high", "xhigh"];
 const SETTINGS_TRANSPORT_OPTIONS = ["sse", "websocket", "websocket-cached", "auto"];
@@ -627,6 +664,7 @@ const optionalFeatureInstallInProgress = new Set();
 const optionalFeaturePackageStatuses = new Map();
 const optionalFeatureInstallMessages = new Map();
 const gitFooterPayloadRefreshInFlightByTab = new Set();
+const gitFooterPiCalibrationInFlightByTab = new Set();
 
 function createGitWorkflowActionsDone(patch = {}) {
   return {
@@ -3511,6 +3549,15 @@ function setOptionalFeatureDisabled(featureId, disabled) {
     statusEntries.delete(GIT_FOOTER_WEBUI_STATUS_KEY);
     clearGitFooterWebuiPayloadCache();
   }
+  if (featureId === "btwCommand") {
+    statusEntries.delete(BTW_WEBUI_STATUS_KEY);
+    widgets.delete(BTW_OUTPUT_WIDGET_KEY);
+    widgets.delete(BTW_FOOTER_WIDGET_KEY);
+    latestBtwWidgetPayload = null;
+    btwWidgetDismissedId = "";
+    btwWidgetComposerOpen = false;
+    btwWidgetInputDraft = "";
+  }
   storeDisabledOptionalFeatures();
   renderOptionalFeatureDependentDisplays();
   const tabContext = activeTabContext();
@@ -4145,6 +4192,10 @@ function resetActiveTabUi() {
   currentState = null;
   latestStats = null;
   latestStatsOverlayPayload = null;
+  latestBtwWidgetPayload = null;
+  btwWidgetDismissedId = "";
+  btwWidgetComposerOpen = false;
+  btwWidgetInputDraft = "";
   latestWorkspace = null;
   latestMessages = [];
   latestMessagesSessionKey = "";
@@ -4546,6 +4597,20 @@ function tabHasActiveAgent(tab) {
   return !!activity.isWorking || indicator.state === "working" || indicator.state === "blocked";
 }
 
+function activeTabHasConversationMessages(tab = activeTab()) {
+  const tabId = tab?.id || activeTabId;
+  if (!tabId) return false;
+  if (tabId !== activeTabId && !latestMessagesSessionKey.startsWith(`${tabId}|`)) return false;
+  return latestMessages.some((message) => ["user", "assistant"].includes(message?.role));
+}
+
+function shouldOpenCwdChangeInNewTab(tab) {
+  return !!tab?.conversationStarted
+    || activeTabHasConversationMessages(tab)
+    || stateHasVisibleWork(currentState)
+    || tabHasActiveAgent(tab);
+}
+
 function confirmCloseTerminalTabs(targetTabs, label) {
   const count = targetTabs.length;
   const noun = count === 1 ? "tab" : "tabs";
@@ -5268,6 +5333,58 @@ async function toggleFooterAutoCompaction(tabContext = activeTabContext()) {
   }
 }
 
+function scheduleGitFooterPiCalibrationRefresh(tabContext, delays = [600, 1600]) {
+  for (const delayMs of delays) {
+    setTimeout(() => {
+      if (isCurrentTabContext(tabContext)) requestGitFooterWebuiPayload(tabContext, { force: true });
+    }, delayMs);
+  }
+}
+
+async function runGitFooterPiCalibration(mode = "current", tabContext = activeTabContext()) {
+  if (!tabContext.tabId) return;
+  if (gitFooterPiCalibrationInFlightByTab.has(tabContext.tabId)) return;
+  if (currentState?.isStreaming || currentState?.isCompacting) {
+    addEvent("PI calibration can run after the active agent work finishes.", "warn");
+    return;
+  }
+
+  const commandName = resolveAvailableCommandName("calibrate", { rpcOnly: true });
+  if (!commandName) {
+    addEvent("PI calibration unavailable: /calibrate is not loaded in this Pi tab.", "warn");
+    return;
+  }
+  if (mode === "probe" && !confirm("Start an isolated PI calibration probe? This sends one tiny model request and may incur provider token usage.")) return;
+
+  const command = mode === "probe" ? `/${commandName}` : `/${commandName} current`;
+  gitFooterPiCalibrationInFlightByTab.add(tabContext.tabId);
+  renderFooter();
+  try {
+    await sendPrompt("prompt", command, { targetTabId: tabContext.tabId, throwOnError: true });
+    if (!isCurrentTabContext(tabContext)) return;
+    addEvent(mode === "probe" ? "PI calibration probe started; refreshing git footer value after it records…" : "PI calibration requested; refreshing git footer value…", "info");
+    scheduleGitFooterPiCalibrationRefresh(tabContext, mode === "probe" ? [5000, 14000] : [600, 1600]);
+  } catch (error) {
+    if (isCurrentTabContext(tabContext)) addEvent(error.message || String(error), "error");
+  } finally {
+    gitFooterPiCalibrationInFlightByTab.delete(tabContext.tabId);
+    if (isCurrentTabContext(tabContext)) renderFooter();
+  }
+}
+
+function applyGitFooterPiCalibrationOptions(chip, options) {
+  if (chip?.key !== "pi" || !FOOTER_PAYLOAD_ACTIONS.has(chip?.action)) return "";
+  const tabContext = activeTabContext();
+  const busy = !!tabContext.tabId && gitFooterPiCalibrationInFlightByTab.has(tabContext.tabId);
+  const mode = chip.action === "calibrate-probe" ? "probe" : "current";
+  options.onClick = () => runGitFooterPiCalibration(mode);
+  if (busy) options.ariaBusy = true;
+  if (busy) return "Calibrating PI estimate and refreshing this value…";
+  return mode === "probe"
+    ? "Click to start an isolated PI calibration probe, then refresh this value."
+    : "Click to calibrate this uncalibrated PI estimate from the current session, then refresh this value.";
+}
+
 function applyGitFooterContextToggleOptions(chip, options) {
   if (chip?.key !== "context") return "";
   options.onClick = () => toggleFooterAutoCompaction();
@@ -5449,6 +5566,7 @@ function footerMeta(label, value, className = "", options = {}) {
 }
 
 const FOOTER_PAYLOAD_TONES = new Set(["pink", "blue", "mauve", "yellow", "green", "teal"]);
+const FOOTER_PAYLOAD_ACTIONS = new Set(["calibrate-current", "calibrate-probe"]);
 const FOOTER_CHANGED_FILE_KINDS = new Set(["modified", "staged", "untracked", "conflicted"]);
 const FOOTER_CHANGED_FILE_KIND_ORDER = ["modified", "staged", "untracked", "conflicted"];
 const FOOTER_CHANGED_FILE_KIND_LABELS = {
@@ -5518,6 +5636,7 @@ function normalizeFooterPayloadChip(value, index) {
     tone: FOOTER_PAYLOAD_TONES.has(value.tone) ? value.tone : "",
     title: cleanFooterPayloadText(value.title, "", 4000),
   };
+  if (FOOTER_PAYLOAD_ACTIONS.has(value.action)) chip.action = value.action;
   if (Array.isArray(value.files)) {
     const files = value.files.map(normalizeFooterPayloadChangedFile).filter(Boolean).slice(0, 80);
     if (files.length) chip.files = files;
@@ -5752,7 +5871,7 @@ function applyFooterChangedFilesDropdown(node, chip) {
 
 function renderGitFooterPayloadMetric(chip) {
   const options = { tooltipAlign: gitFooterTooltipAlign(chip) };
-  const action = applyGitFooterContextToggleOptions(chip, options);
+  const action = applyGitFooterPiCalibrationOptions(chip, options) || applyGitFooterContextToggleOptions(chip, options);
   options.title = gitFooterPayloadTooltip(chip, { action });
   const node = footerMetric(chip.icon || "•", chip.label, chip.value, chip.tone ? `tone-${chip.tone}` : "", options);
   return chip.contextUsage ? applyFooterContextUsage(node, chip.contextUsage) : node;
@@ -7212,6 +7331,12 @@ async function changeActiveTabCwd() {
   const currentCwd = latestWorkspace?.cwd || tab.cwd || "";
   const cwd = await pickCwd(tab, currentCwd);
   if (!isCurrentTabContext(tabContext) || !cwd || cwd === currentCwd) return;
+
+  if (shouldOpenCwdChangeInNewTab(tab)) {
+    await createTerminalTab(cwd, { triggerButton: null });
+    return;
+  }
+
   if (!window.confirm(`Restart ${tab.title} in:\n${cwd}\n\nCurrent in-flight work in this tab will be stopped. The conversation continues in the new directory.`)) return;
 
   saveActiveDraft();
@@ -7715,6 +7840,10 @@ function releaseNpmLineTone(line) {
   if (/^(WARN|warning)\b/i.test(clean)) return "warn";
   if (/^(INFO|npm notice|notice)\b/i.test(clean)) return "info";
   if (/^RELEASE_NPM_EVENT\b/.test(clean)) return "event";
+  if (/^\[[0-9:]+\]\s+\[[^\]]+\]\s+\$/.test(clean)) return "command";
+  if (/\b(STDERR|failed|error|exited with code)\b/i.test(clean)) return "fail";
+  if (/\b(completed|succeeded|agent completed|tool completed)\b/i.test(clean)) return "pass";
+  if (/\b(started|running|auto retry|compaction)\b/i.test(clean)) return "info";
   return "";
 }
 
@@ -7924,6 +8053,74 @@ function renderReleaseAurLogWidget() {
   return node;
 }
 
+function parseWorkflowSubprocessPayload(lines) {
+  const raw = String(lines?.[0] || "").trim();
+  if (!raw) return null;
+  const json = raw.startsWith(WORKFLOW_WIDGET_PAYLOAD_PREFIX) ? raw.slice(WORKFLOW_WIDGET_PAYLOAD_PREFIX.length) : raw;
+  try {
+    const payload = JSON.parse(json);
+    if (payload?.type !== WORKFLOW_SUBPROCESS_PAYLOAD_TYPE || payload.version !== WORKFLOW_SUBPROCESS_PAYLOAD_VERSION) return null;
+    return payload;
+  } catch {
+    return null;
+  }
+}
+
+function workflowSubprocessIsLive(payload) {
+  return payload?.status === "queued" || payload?.status === "running" || Number(payload?.taskCounts?.running || 0) > 0;
+}
+
+function workflowTaskCountLabel(payload) {
+  const counts = payload?.taskCounts || {};
+  const done = Number(counts.completed || 0);
+  const total = Number(counts.total || 0);
+  const failed = Number(counts.failed || 0);
+  const cancelled = Number(counts.cancelled || 0);
+  return `${done}/${total} done${failed ? ` · ${failed} failed` : ""}${cancelled ? ` · ${cancelled} cancelled` : ""}`;
+}
+
+function renderWorkflowSubprocessWidget() {
+  if (!isOptionalFeatureEnabled("workflows")) return null;
+  const payload = parseWorkflowSubprocessPayload(getWidgetLines("workflow:subprocess"));
+  if (!payload) return null;
+
+  const live = workflowSubprocessIsLive(payload);
+  const node = make("section", `widget release-npm-widget workflow-widget ${live ? "workflow-live-widget" : "workflow-log-widget"}`);
+  node.setAttribute("aria-label", "workflow subprocess output");
+
+  const header = make("div", "release-npm-header");
+  const titleWrap = make("div", "release-npm-title-wrap");
+  titleWrap.append(
+    make("span", "release-npm-kicker", "workflow subprocesses"),
+    make("strong", "release-npm-title", payload.workflowName || payload.workflowKey || "workflow"),
+  );
+
+  const meta = make("div", "release-npm-meta");
+  meta.append(make("span", `release-npm-pill workflow-status ${payload.status || "unknown"}`, payload.status || "unknown"));
+  if (payload.activePhase) meta.append(make("span", "release-npm-pill", payload.activePhase));
+  meta.append(make("span", "release-npm-pill elapsed", workflowTaskCountLabel(payload)));
+  if (payload.truncated) meta.append(make("span", "release-npm-pill workflow-truncated", "truncated"));
+
+  const actions = make("div", "release-npm-actions");
+  actions.append(releaseNpmActionButton("Status", "/workflow status"));
+  if (live) actions.append(releaseNpmActionButton("Abort", "/workflow abort", "danger"));
+  actions.append(releaseNpmActionButton("Clear", "/workflow-clear"));
+  header.append(titleWrap, meta, actions);
+
+  const lines = Array.isArray(payload.lines) && payload.lines.length ? payload.lines : ["Waiting for workflow subprocess output..."];
+  const streamHeader = releaseNpmStreamHeader(live ? "Live subprocess output" : "Subprocess output", lines.length, { live });
+  const terminal = make("div", "release-npm-terminal");
+  terminal.setAttribute("role", "log");
+  terminal.setAttribute("aria-live", live ? "polite" : "off");
+  for (const line of lines) appendReleaseNpmTerminalLine(terminal, line);
+
+  const controls = make("div", "release-npm-controls", "Workflow subprocess output is shown as a non-blocking Web UI widget. Use /workflow abort to stop an active run.");
+  const outputDetails = renderReleaseNpmOutputDetails("workflow:subprocess", streamHeader, terminal, controls);
+  node.append(header, outputDetails);
+  requestAnimationFrame(() => { if (outputDetails.open) terminal.scrollTop = terminal.scrollHeight; });
+  return node;
+}
+
 function activeAppRunnerData() {
   return activeTabId ? appRunnerDataByTab.get(activeTabId) || { runners: [], activeRun: null } : { runners: [], activeRun: null };
 }
@@ -8914,6 +9111,274 @@ function handleStatsWebuiStatus(statusText) {
   if (payload.open || elements.statsOverlayDialog?.open) renderStatsOverlay();
 }
 
+function parseBtwWebuiPayloadRaw(raw) {
+  if (!raw) return null;
+  const text = String(raw || "");
+  const json = text.startsWith(BTW_WIDGET_PAYLOAD_PREFIX) ? text.slice(BTW_WIDGET_PAYLOAD_PREFIX.length) : text;
+  try {
+    const parsed = JSON.parse(json);
+    if (!BTW_WEBUI_PAYLOAD_TYPES.has(parsed?.type)) return null;
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+
+function parseBtwWidgetPayload(lines = []) {
+  const first = Array.isArray(lines) ? lines[0] : "";
+  return parseBtwWebuiPayloadRaw(first);
+}
+
+function currentBtwWidgetPayload() {
+  if (isOptionalFeatureDisabled("btwCommand")) return null;
+  const outputLines = widgets.get(BTW_OUTPUT_WIDGET_KEY)?.widgetLines || [];
+  const payload = parseBtwWidgetPayload(outputLines) || parseBtwWebuiPayloadRaw(statusEntries.get(BTW_WEBUI_STATUS_KEY)) || latestBtwWidgetPayload;
+  if (payload?.id && payload.id === btwWidgetDismissedId) return null;
+  return payload;
+}
+
+function btwStatusLabel(payload) {
+  switch (payload?.status) {
+    case "done": return "Done";
+    case "error": return "Error";
+    case "aborted": return "Aborted";
+    case "streaming": return "Answering…";
+    default: return "Starting…";
+  }
+}
+
+function btwAnswerLines(payload) {
+  const text = payload?.error || payload?.answer || (payload?.status === "loading" ? "Starting side request…" : "Waiting for model output…");
+  return String(text || "").replace(/\r\n?/g, "\n").split("\n");
+}
+
+function focusBtwWidgetInput() {
+  const input = document.querySelector(".btw-widget-input");
+  if (!input) return;
+  try {
+    input.focus({ preventScroll: true });
+  } catch {
+    input.focus();
+  }
+}
+
+function openBtwComposerWidget() {
+  btwWidgetComposerOpen = true;
+  btwWidgetDismissedId = "";
+  btwWidgetFocusAfterRender = true;
+  setComposerActionsOpen(false);
+  setPublishMenuOpen(false);
+  setNativeCommandMenuOpen(false);
+  setAppRunnerMenuOpen(false);
+  setOptionsMenuOpen(false);
+  renderWidgets();
+}
+
+function closeBtwOutputWidget() {
+  const payload = currentBtwWidgetPayload();
+  if (payload?.id) btwWidgetDismissedId = payload.id;
+  widgets.delete(BTW_OUTPUT_WIDGET_KEY);
+  widgets.delete(BTW_FOOTER_WIDGET_KEY);
+  statusEntries.delete(BTW_WEBUI_STATUS_KEY);
+  latestBtwWidgetPayload = null;
+  btwWidgetComposerOpen = false;
+  btwWidgetInputDraft = "";
+  renderWidgets();
+  renderStatus();
+}
+
+async function copyBtwWidgetAnswer(button) {
+  const payload = currentBtwWidgetPayload();
+  const answer = String(payload?.answer || payload?.error || "").trim();
+  if (!answer) return;
+  const original = button?.textContent || "Copy";
+  try {
+    await navigator.clipboard.writeText(answer);
+    if (button) button.textContent = "Copied";
+    setTimeout(() => { if (button) button.textContent = original; }, 1600);
+  } catch (error) {
+    addEvent(`copy /btw answer failed: ${error.message || String(error)}`, "error");
+  }
+}
+
+function base64UrlEncodeUtf8(value) {
+  const bytes = new TextEncoder().encode(String(value || ""));
+  let binary = "";
+  for (let offset = 0; offset < bytes.length; offset += 0x8000) {
+    binary += String.fromCharCode(...bytes.slice(offset, offset + 0x8000));
+  }
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/g, "");
+}
+
+function btwTransferPayload(payload) {
+  return {
+    question: payload?.question || "",
+    answer: payload?.answer || payload?.error || "",
+    status: payload?.status || "done",
+    model: payload?.model || "",
+    generatedAt: payload?.generatedAt || 0,
+    updatedAt: payload?.updatedAt || Date.now(),
+  };
+}
+
+function makeBtwTransferIcon() {
+  const ns = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(ns, "svg");
+  svg.setAttribute("class", "btw-transfer-icon");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  const bubble = document.createElementNS(ns, "path");
+  bubble.setAttribute("d", "M4.5 5.75h8.75a2 2 0 0 1 2 2v3.5a2 2 0 0 1-2 2H9.8L6.5 15.6v-2.35h-2a2 2 0 0 1-2-2v-3.5a2 2 0 0 1 2-2Z");
+  bubble.setAttribute("fill", "none");
+  bubble.setAttribute("stroke", "currentColor");
+  bubble.setAttribute("stroke-width", "1.9");
+  bubble.setAttribute("stroke-linecap", "round");
+  bubble.setAttribute("stroke-linejoin", "round");
+  const arrow = document.createElementNS(ns, "path");
+  arrow.setAttribute("d", "M13 17h7m0 0-2.8-2.8M20 17l-2.8 2.8");
+  arrow.setAttribute("fill", "none");
+  arrow.setAttribute("stroke", "currentColor");
+  arrow.setAttribute("stroke-width", "2.15");
+  arrow.setAttribute("stroke-linecap", "round");
+  arrow.setAttribute("stroke-linejoin", "round");
+  const line = document.createElementNS(ns, "path");
+  line.setAttribute("d", "M6 9.4h5.6");
+  line.setAttribute("fill", "none");
+  line.setAttribute("stroke", "currentColor");
+  line.setAttribute("stroke-width", "1.9");
+  line.setAttribute("stroke-linecap", "round");
+  svg.append(bubble, line, arrow);
+  return svg;
+}
+
+async function transferBtwContextToMain(button) {
+  const payload = currentBtwWidgetPayload();
+  const transferPayload = btwTransferPayload(payload);
+  if (!transferPayload.question && !transferPayload.answer) return;
+  const targetTabId = activeTabId;
+  const liveSteer = !!currentState?.isStreaming;
+  const original = button?.querySelector("span")?.textContent || "Transfer Context";
+  const encoded = base64UrlEncodeUtf8(JSON.stringify(transferPayload));
+  try {
+    await sendPrompt("prompt", `/btw-transfer ${encoded}`, { targetTabId, throwOnError: true, streamingBehavior: liveSteer ? "steer" : undefined });
+    const label = button?.querySelector("span");
+    if (label) label.textContent = liveSteer ? "Steered" : "Transferred";
+    addEvent(liveSteer
+      ? "/btw context sent as live steering; it will be injected after the next agent action"
+      : "/btw context transferred into the main conversation", "info");
+    setTimeout(() => { if (label) label.textContent = original; }, 1800);
+  } catch {
+    // sendPrompt already reports the error.
+  }
+}
+
+function btwWidgetActionButton(label, handler, className = "") {
+  const button = make("button", `release-npm-action ${className}`.trim(), label);
+  button.type = "button";
+  button.addEventListener("click", () => handler(button));
+  return button;
+}
+
+function renderBtwComposerForm() {
+  const form = make("form", "btw-widget-composer");
+  const input = make("textarea", "btw-widget-input");
+  input.rows = 1;
+  input.placeholder = "Ask a /btw side question…";
+  input.value = btwWidgetInputDraft;
+  input.setAttribute("aria-label", "Ask a /btw side question");
+  input.addEventListener("input", () => { btwWidgetInputDraft = input.value; });
+  input.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      form.requestSubmit();
+    }
+  });
+
+  const submit = make("button", "release-npm-action btw-widget-send", "Ask /btw");
+  submit.type = "submit";
+  form.append(input, submit);
+  form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const question = input.value.trim();
+    if (!question) {
+      input.focus();
+      return;
+    }
+    submit.disabled = true;
+    const sent = await sendBtwQuestion(question);
+    submit.disabled = false;
+    if (!sent) return;
+    btwWidgetInputDraft = "";
+    input.value = "";
+    input.focus({ preventScroll: true });
+  });
+  return form;
+}
+
+function renderBtwOutputWidget() {
+  const payload = currentBtwWidgetPayload();
+  if (!payload && !btwWidgetComposerOpen) return null;
+
+  if (payload) latestBtwWidgetPayload = payload;
+  const running = payload?.status === "loading" || payload?.status === "streaming";
+  const lineCount = payload ? btwAnswerLines(payload).length : 0;
+  const node = make("section", `widget release-npm-widget btw-widget${running ? " btw-live-widget" : " btw-done-widget"}`);
+  node.setAttribute("aria-label", "/btw side-question output");
+
+  const header = make("div", "release-npm-header");
+  const titleWrap = make("div", "release-npm-title-wrap");
+  titleWrap.append(make("span", "release-npm-kicker", "/btw"), make("strong", "release-npm-title", payload ? btwStatusLabel(payload) : "Ready"));
+
+  const meta = make("div", "release-npm-meta");
+  meta.append(make("span", `release-npm-pill btw-status ${payload?.status || "ready"}`.trim(), payload?.status || "ready"));
+  if (payload?.model) meta.append(make("span", "release-npm-pill", payload.model));
+
+  const actions = make("div", "release-npm-actions");
+  const transferButton = btwWidgetActionButton("", transferBtwContextToMain, "btw-transfer-action");
+  transferButton.title = currentState?.isStreaming
+    ? "Transfer this /btw question and answer as live steering after the next agent action"
+    : "Transfer this /btw question and answer into the main conversation context";
+  transferButton.append(makeBtwTransferIcon(), make("span", undefined, "Transfer Context"));
+  transferButton.disabled = !payload || !(payload.answer || payload.error || payload.question);
+  actions.append(
+    transferButton,
+    btwWidgetActionButton("Copy", copyBtwWidgetAnswer),
+    btwWidgetActionButton("Close", closeBtwOutputWidget),
+  );
+  header.append(titleWrap, meta, actions);
+
+  const question = make("div", "btw-widget-question");
+  question.append(make("span", "btw-widget-question-label", "Question"), make("span", "btw-widget-question-text", payload?.question || "Start or continue with the /btw input below."));
+
+  const streamHeader = releaseNpmStreamHeader(running ? "Live side answer" : "Side answer", lineCount, { live: running });
+  const terminal = make("div", "release-npm-terminal btw-terminal");
+  terminal.setAttribute("role", "log");
+  terminal.setAttribute("aria-live", running ? "polite" : "off");
+  for (const line of (payload ? btwAnswerLines(payload) : ["Type a side question below and press Enter to run it as /btw."])) appendReleaseNpmTerminalLine(terminal, line);
+
+  const note = payload?.status === "error"
+    ? "The side request failed. The main conversation was not changed."
+    : "Ephemeral answer · every message in this input is sent as /btw · not appended to the main transcript.";
+  const controls = make("div", "release-npm-controls btw-controls", note);
+  const outputDetails = renderReleaseNpmOutputDetails(`btw:${payload?.id || "composer"}`, streamHeader, terminal, controls);
+  node.append(header, question, outputDetails, renderBtwComposerForm());
+  requestAnimationFrame(() => {
+    if (outputDetails.open) terminal.scrollTop = terminal.scrollHeight;
+    if (btwWidgetFocusAfterRender) {
+      btwWidgetFocusAfterRender = false;
+      focusBtwWidgetInput();
+    }
+  });
+  return node;
+}
+
+function handleBtwWebuiStatus(statusText) {
+  const payload = parseBtwWebuiPayloadRaw(statusText);
+  if (payload) latestBtwWidgetPayload = payload;
+  renderWidgets();
+}
+
 function remoteWebuiWidgetLines(lines = []) {
   return (Array.isArray(lines) ? lines : [])
     .map(stripAnsi)
@@ -8939,8 +9404,12 @@ function renderWidgets() {
   if (releaseAurOutput) elements.widgetArea.append(releaseAurOutput);
   const releaseAurLog = renderReleaseAurLogWidget();
   if (releaseAurLog) elements.widgetArea.append(releaseAurLog);
+  const workflowSubprocessWidget = renderWorkflowSubprocessWidget();
+  if (workflowSubprocessWidget) elements.widgetArea.append(workflowSubprocessWidget);
   const appRunnerWidget = renderAppRunnerWidget();
   if (appRunnerWidget) elements.widgetArea.append(appRunnerWidget);
+  const btwWidget = renderBtwOutputWidget();
+  if (btwWidget) elements.widgetArea.append(btwWidget);
 
   for (const [key, value] of widgets) {
     const widgetFeatureId = optionalFeatureWidgetFeatureId(key);
@@ -13353,6 +13822,41 @@ function sendPromptFromModeButton(kind, button) {
   sendPrompt(kind);
 }
 
+async function sendBtwQuestion(question, { clearComposerDraft = false } = {}) {
+  const cleanQuestion = String(question || "").trim();
+  if (!cleanQuestion) return false;
+  const message = /^\/btw(?:\s|$)/.test(cleanQuestion) ? cleanQuestion : `/btw ${cleanQuestion}`;
+  const targetTabId = activeTabId;
+  btwWidgetComposerOpen = true;
+  btwWidgetDismissedId = "";
+  try {
+    await sendPrompt("prompt", message, { targetTabId, throwOnError: true });
+  } catch {
+    return false;
+  }
+  if (!targetTabId) return true;
+  if (clearComposerDraft) {
+    if (targetTabId === activeTabId) {
+      elements.promptInput.value = "";
+      resizePromptInput();
+      hideCommandSuggestions();
+      saveActiveDraft();
+    } else {
+      tabDrafts.set(targetTabId, "");
+    }
+  }
+  return true;
+}
+
+async function sendBtwPromptFromButton() {
+  const question = String(elements.promptInput.value || "").trim();
+  if (!question) {
+    openBtwComposerWidget();
+    return;
+  }
+  await sendBtwQuestion(question, { clearComposerDraft: true });
+}
+
 function setPublishMenuOpen(open) {
   publishMenuOpen = !!open;
   elements.publishButton.setAttribute("aria-expanded", publishMenuOpen ? "true" : "false");
@@ -13538,9 +14042,11 @@ function requestGitFooterWebuiPayload(tabContext = activeTabContext(), { force =
 }
 
 function updateOptionalFeatureAvailability() {
+  optionalFeatureAvailability.btwCommand = hasAvailableCommand("btw") || optionalFeatureAvailability.btwCommand || statusEntries.has(BTW_WEBUI_STATUS_KEY) || widgets.has(BTW_OUTPUT_WIDGET_KEY);
   optionalFeatureAvailability.gitWorkflow = hasAvailableCommand("git-staged-msg");
   optionalFeatureAvailability.releaseNpm = hasAvailableCommand("release-npm");
   optionalFeatureAvailability.releaseAur = hasAvailableCommand("release-aur");
+  optionalFeatureAvailability.workflows = hasAvailableCommand("workflow") || hasAvailableCommand("workflow-clear") || optionalFeatureAvailability.workflows || widgets.has("workflow") || widgets.has("workflow:subprocess");
   optionalFeatureAvailability.safetyGuard = hasAvailableCommand("safety-guard") || optionalFeatureAvailability.safetyGuard || statusEntries.has("safety-guard");
   optionalFeatureAvailability.statsCommand = hasAvailableCommand("stats");
   optionalFeatureAvailability.gitFooterStatus = hasAvailableCommand("git-footer-refresh") || optionalFeatureAvailability.gitFooterStatus || statusEntries.has("git-footer") || statusEntries.has(GIT_FOOTER_WEBUI_STATUS_KEY);
@@ -13569,15 +14075,17 @@ function optionalFeatureStatus(featureId) {
 }
 
 function optionalFeatureWidgetFeatureId(key) {
+  if (key.startsWith("btw:")) return "btwCommand";
   if (key.startsWith("release-npm:")) return "releaseNpm";
   if (key.startsWith("release-aur:")) return "releaseAur";
+  if (key === "workflow" || key.startsWith("workflow:")) return "workflows";
   if (key === "todo-progress") return "todoProgressWidget";
   if (key === "pi-remote-webui") return "remoteWebui";
   return null;
 }
 
 function optionalFeatureWidgetHasSpecializedRenderer(key) {
-  return key.startsWith("release-npm:") || key.startsWith("release-aur:");
+  return key.startsWith("btw:") || key.startsWith("release-npm:") || key.startsWith("release-aur:") || key === "workflow:subprocess";
 }
 
 function renderOptionalFeaturePanel() {
@@ -13640,6 +14148,16 @@ function renderOptionalFeaturePanel() {
 }
 
 function renderOptionalFeatureControls() {
+  const hasBtwCommand = isOptionalFeatureEnabled("btwCommand");
+  if (elements.btwButton) {
+    elements.btwButton.hidden = !hasBtwCommand;
+    setOptionalControlState(
+      elements.btwButton,
+      hasBtwCommand,
+      optionalFeatureUnavailableMessage("btwCommand"),
+    );
+  }
+
   const hasGitWorkflow = isOptionalFeatureEnabled("gitWorkflow");
   elements.gitWorkflowButton.hidden = !hasGitWorkflow;
   setOptionalControlState(
@@ -16349,7 +16867,7 @@ async function sendUserBashCommand(parsed, { usesPromptInput = false, targetTabI
   await runUserBashCommand(parsed, { usesPromptInput, targetTabId });
 }
 
-async function sendPrompt(kind = "prompt", explicitMessage, { targetTabId = activeTabId, throwOnError = false } = {}) {
+async function sendPrompt(kind = "prompt", explicitMessage, { targetTabId = activeTabId, throwOnError = false, streamingBehavior } = {}) {
   const usesPromptInput = explicitMessage === undefined;
   const rawMessage = usesPromptInput ? elements.promptInput.value : explicitMessage;
   const originalMessage = String(rawMessage || "").trim();
@@ -16395,7 +16913,7 @@ async function sendPrompt(kind = "prompt", explicitMessage, { targetTabId = acti
       response = await api("/api/follow-up", { method: "POST", body: bodyBase, tabId: targetTabId });
     } else {
       const body = { ...bodyBase };
-      if (targetWasStreaming) body.streamingBehavior = busyBehavior;
+      if (targetWasStreaming) body.streamingBehavior = streamingBehavior || busyBehavior;
       response = await api("/api/prompt", { method: "POST", body, tabId: targetTabId });
     }
     applyResponseTab(response);
@@ -16480,6 +16998,7 @@ function handleExtensionUiRequest(request) {
         statusEntries.delete(statusKey);
       }
       if (statusKey === STATS_WEBUI_STATUS_KEY) handleStatsWebuiStatus(request.statusText);
+      if (statusKey === BTW_WEBUI_STATUS_KEY) handleBtwWebuiStatus(request.statusText);
       updateOptionalFeatureAvailability();
       renderStatus();
       return;
@@ -16669,6 +17188,10 @@ function handleEvent(event) {
       clearContextUsageUnknownAfterCompaction(event.tabId || activeTabId);
       statusEntries.clear();
       widgets.clear();
+      latestBtwWidgetPayload = null;
+      btwWidgetDismissedId = "";
+      btwWidgetComposerOpen = false;
+      btwWidgetInputDraft = "";
       resetOptionalFeatureAvailability();
       renderStatus();
       renderWidgets();
@@ -17021,6 +17544,7 @@ elements.busyPromptBehaviorMenu?.addEventListener("keydown", (event) => {
 });
 elements.steerButton.addEventListener("click", () => sendPromptFromModeButton("steer", elements.steerButton));
 elements.followUpButton.addEventListener("click", () => sendPromptFromModeButton("follow-up", elements.followUpButton));
+elements.btwButton?.addEventListener("click", () => sendBtwPromptFromButton());
 elements.terminalTabsToggleButton.addEventListener("click", () => {
   setMobileTabsExpanded(!document.body.classList.contains("mobile-tabs-expanded"));
 });