mixdog 1.2.1 → 1.2.3

package/src/tui/app/create-app-pickers.mjs

@@ -37,6 +37,7 @@ export function createAppPickers({
   setSettingsPrompt,
   setOnboardingActive,
   closeUsagePanel,
+  btw,
   oauthSubmitRef,
   clearModelCaches,
   onboardingRef,
@@ -88,6 +89,8 @@ export function createAppPickers({
   const {
     openMcpServersPicker,
     openMcpPicker,
+    loginMcpServer,
+    logoutMcpServer,
     openProjectSkillsPicker,
     openSkillsPicker,
     openSkillDetailPicker,
@@ -205,6 +208,7 @@ export function createAppPickers({
     normalizeSlashCommandName,
     surface,
     closeUsagePanel,
+    btw,
     openModelPicker: (...a) => openModelPicker(...a),
     modelSwitchNotice,
     openWebSearchPicker: (...a) => openWebSearchPicker(...a),
@@ -219,6 +223,8 @@ export function createAppPickers({
     enterProject: (...a) => enterProject(...a),
     openProjectPicker: (...a) => openProjectPicker(...a),
     openMcpPicker: (...a) => openMcpPicker(...a),
+    loginMcpServer,
+    logoutMcpServer,
     openSkillsPicker: (...a) => openSkillsPicker(...a),
     openPluginsPicker: (...a) => openPluginsPicker(...a),
     openProviderSetupPicker: (...a) => openProviderSetupPicker(...a),

package/src/tui/app/extension-pickers/mcp-login.mjs

@@ -0,0 +1,107 @@
+// extension-pickers/mcp-login.mjs
+// `/mcp login <name>` and `/mcp logout <name>`. The sign-in URL is always
+// printed (and kept in the live prompt); the runtime may open the browser. The
+// flow is polled while a paste prompt (the shared 'oauth-code' provider prompt)
+// accepts the final redirect address. Pasted text is never echoed.
+const POLL_MS = 1500;
+
+export function createMcpLogin({ store, setProviderPrompt, pollMs = POLL_MS }) {
+  let active = null;
+
+  const stop = (flow) => {
+    flow.finished = true;
+    clearTimeout(flow.timer);
+    if (active === flow) active = null;
+  };
+
+  const closePrompt = (flow) => setProviderPrompt((prompt) => (prompt === flow.prompt ? null : prompt));
+
+  const showPrompt = (flow) => {
+    if (flow.finished) return;
+    const prompt = {
+      kind: 'oauth-code',
+      providerName: `MCP ${flow.name}`,
+      // The shared prompt pushes the one completion notice; no provider picker follows.
+      successReturn: () => {},
+      label: `MCP sign-in · ${flow.name}`,
+      hint: 'If the browser page fails to load, paste its address here.',
+      detail: flow.url,
+      login: {
+        completeCode: async (text) => {
+          const result = await store.completeMcpOAuthLogin(flow.id, text);
+          if (result?.state !== 'complete') throw new Error(result?.error || 'sign-in did not complete');
+          stop(flow);
+        },
+        cancel: () => {
+          if (flow.finished) return;
+          stop(flow);
+          void Promise.resolve(store.cancelMcpOAuthLogin(flow.id)).catch(() => {});
+          store.pushNotice(`MCP sign-in cancelled for ${flow.name}`, 'info');
+        },
+      },
+      failureReturn: () => showPrompt(flow),
+    };
+    flow.prompt = prompt;
+    setProviderPrompt(prompt);
+  };
+
+  const poll = (flow) => {
+    flow.timer = setTimeout(async () => {
+      if (flow.finished) return;
+      let status;
+      try {
+        status = await store.getMcpOAuthLoginStatus(flow.id);
+      } catch (e) {
+        if (flow.finished) return;
+        stop(flow);
+        closePrompt(flow);
+        store.pushNotice(`MCP sign-in failed for ${flow.name}: ${e?.message || e}`, 'error');
+        return;
+      }
+      if (flow.finished) return;
+      if (status?.state === 'pending') {
+        poll(flow);
+        return;
+      }
+      stop(flow);
+      closePrompt(flow);
+      if (status?.state === 'complete') store.pushNotice(`MCP sign-in complete for ${flow.name}`, 'info');
+      else if (status?.state === 'cancelled') store.pushNotice(`MCP sign-in cancelled for ${flow.name}`, 'info');
+      else store.pushNotice(`MCP sign-in failed for ${flow.name}${status?.error ? `: ${status.error}` : ''}`, 'error');
+    }, pollMs);
+  };
+
+  const loginMcpServer = async (name) => {
+    if (active) {
+      const previous = active;
+      stop(previous);
+      closePrompt(previous);
+      void Promise.resolve(store.cancelMcpOAuthLogin(previous.id)).catch(() => {});
+    }
+    try {
+      const started = await store.beginMcpOAuthLogin(name, { openBrowser: true });
+      if (started?.state === 'complete') {
+        store.pushNotice(`MCP sign-in complete for ${name}`, 'info');
+        return;
+      }
+      const flow = { id: started.flowId, name, url: started.url || '', finished: false, timer: null, prompt: null };
+      active = flow;
+      if (flow.url) store.pushNotice(`Sign in to ${name}: ${flow.url}`, 'info');
+      showPrompt(flow);
+      poll(flow);
+    } catch (e) {
+      store.pushNotice(`MCP sign-in failed for ${name}: ${e?.message || e}`, 'error');
+    }
+  };
+
+  const logoutMcpServer = async (name) => {
+    try {
+      await store.signOutMcpServer(name);
+      store.pushNotice(`MCP signed out of ${name}`, 'info');
+    } catch (e) {
+      store.pushNotice(`MCP sign-out failed for ${name}: ${e?.message || e}`, 'error');
+    }
+  };
+
+  return { loginMcpServer, logoutMcpServer };
+}

package/src/tui/app/extension-pickers/mcp-servers-picker.mjs

@@ -8,8 +8,9 @@ const serverDescription = (server, pending, optimistic) => {
   const transport = server.transport || 'unknown';
   if (pending) return `${optimistic.enabled ? 'enabling' : 'disabling'}… · ${transport}`;
   const error = server.error ? ` · ${server.error}` : '';
+  const signIn = server.authRequired ? ` · sign-in required: /mcp login ${server.name}` : '';
   return withScope(
-    `${server.source || 'config'} · ${server.status || 'unknown'} · ${transport} · ${server.toolCount || 0} tools${error}`,
+    `${server.source || 'config'} · ${server.status || 'unknown'} · ${transport} · ${server.toolCount || 0} tools${error}${signIn}`,
     server
   );
 };

package/src/tui/app/extension-pickers.mjs

@@ -7,6 +7,7 @@
  * store state, so they can't be pure. openMcpPicker is exposed for the
  * plugin-detail enable-mcp path (also aliased on the App body).
  */
+import { createMcpLogin } from './extension-pickers/mcp-login.mjs';
 import { createMcpServersPicker } from './extension-pickers/mcp-servers-picker.mjs';
 import { createPluginsPickers } from './extension-pickers/plugins-pickers.mjs';
 import { createSkillsPickers } from './extension-pickers/skills-pickers.mjs';
@@ -43,5 +44,5 @@ export function createExtensionPickers({
     setSettingsPrompt,
     openMcpPicker: mcp.openMcpPicker,
   });
-  return { ...mcp, ...skills, ...plugins };
+  return { ...mcp, ...createMcpLogin({ store, setProviderPrompt }), ...skills, ...plugins };
 }

package/src/tui/app/model-options.mjs

@@ -6,7 +6,7 @@
  * displayModelName formatter.
  */
 import { theme } from '../theme.mjs';
-import { displayModelName } from '../../runtime/shared/model-display.mjs';
+import { displayModelName, effortDisplayLabel } from '../../runtime/shared/model-display.mjs';
 import { isRollingModelAlias } from '../../runtime/shared/model-alias.mjs';
 import { DAYBREAK_PROVIDER, daybreakBlueOn } from '../../runtime/shared/llm/openai-daybreak.mjs';
 
@@ -248,18 +248,7 @@ const PROVIDER_DISPLAY_RANKS = {
 
 export const providerDisplayRank = (provider) => PROVIDER_DISPLAY_RANKS[String(provider || '').toLowerCase()] ?? 900;
 
-const titleCaseOption = (value) =>
-  String(value || '')
-    .split(/([\s_-]+)/)
-    .map((part) => (/^[\s_-]+$/.test(part) ? part : `${part.charAt(0).toUpperCase()}${part.slice(1).toLowerCase()}`))
-    .join('');
-
-export const effortDisplayLabel = (value) => {
-  const text = String(value || '').trim();
-  if (!text) return '';
-  if (text.toLowerCase() === 'xhigh') return 'XHigh';
-  return titleCaseOption(text);
-};
+export { effortDisplayLabel };
 
 export const fastDisplayLabel = (enabled = true) => `Fast ${enabled ? 'On' : 'Off'}`;
 
@@ -330,9 +319,15 @@ export const buildProviderModelItems = (models, provider, currentRoute = null) =
   }));
 };
 
-// Model · Effort · Fast, dropping the empty parts.
+// The configured speed tier: Ultrafast when the fast route asks for it.
+const routeSpeedLabel = (route) => {
+  if (!route?.fast) return '';
+  return route.modelParameters?.serviceTier === 'ultrafast' ? 'Ultrafast' : 'Fast';
+};
+
+// Model · Effort · Fast/Ultrafast, dropping the empty parts.
 const routeModelDetails = (route) =>
-  [routeModelDisplayName(route), route.effort ? effortDisplayLabel(route.effort) : '', route.fast ? 'Fast' : '']
+  [routeModelDisplayName(route), route.effort ? effortDisplayLabel(route.effort) : '', routeSpeedLabel(route)]
     .filter(Boolean)
     .join(' · ');
 
@@ -348,7 +343,7 @@ export const agentModelProfile = (route) => (route?.model ? routeModelDetails(ro
 export const agentModelParts = (route) => [
   { text: route?.model ? routeModelDisplayName(route) : '', width: 17 },
   { text: route?.effort ? effortDisplayLabel(route.effort) : '', width: 6 },
-  { text: route?.fast ? 'Fast' : '', width: 4 },
+  { text: routeSpeedLabel(route), width: 9 },
 ];
 
 export const routeFromModel = (model, effort = null) => ({

package/src/tui/app/shell-layout/row-budgets.mjs

@@ -5,7 +5,9 @@
  */
 import { isLiveSpinnerMetaVisible } from '../live-spinner-visibility.mjs';
 import { promptContentRows, wrappedDetailRows, queuedBandRows } from '../text-layout.mjs';
+import { questionPanelRows, questionsOf } from '../../components/question-panel-model.mjs';
 import { CORE_MULTILINE_TEXT_ENTRY_KINDS } from '../panel-signature.mjs';
+import { btwPanelRows } from '../btw-controller.mjs';
 
 const SCROLL_HINT_ROWS = 0;
 const LIVE_STATUS_ROWS = 0;
@@ -114,20 +116,25 @@ function floatingPanelBudget({
   picker,
   contextPanel,
   usagePanel,
+  btwPanel,
   slashPaletteOpen,
   hasTextEntryPrompt,
   TEXT_ENTRY_ROWS,
   OPTION_PANEL_EXTRA_ROWS,
   maxFloatingPanelRows,
+  frameColumns,
 }) {
   let desiredFloatingPanelRows = 0;
-  if (toolApproval) desiredFloatingPanelRows = PANEL_CHROME_ROWS + 2 + OPTION_PANEL_EXTRA_ROWS;
+  if (toolApproval?.kind === 'question' && questionsOf(toolApproval).length > 0) {
+    desiredFloatingPanelRows = questionPanelRows(questionsOf(toolApproval), frameColumns);
+  } else if (toolApproval) desiredFloatingPanelRows = PANEL_CHROME_ROWS + 2 + OPTION_PANEL_EXTRA_ROWS;
   else if (picker?.fillAvailable) desiredFloatingPanelRows = maxFloatingPanelRows;
   else if (picker) desiredFloatingPanelRows = PANEL_BASE_ROWS + OPTION_PANEL_EXTRA_ROWS;
   else if (contextPanel) desiredFloatingPanelRows = PANEL_BASE_ROWS + OPTION_PANEL_EXTRA_ROWS + 3;
   else if (usagePanel) desiredFloatingPanelRows = PANEL_BASE_ROWS + OPTION_PANEL_EXTRA_ROWS;
   else if (slashPaletteOpen) desiredFloatingPanelRows = SLASH_PALETTE_ROWS;
   else if (hasTextEntryPrompt) desiredFloatingPanelRows = TEXT_ENTRY_ROWS;
+  else if (btwPanel) desiredFloatingPanelRows = btwPanelRows(btwPanel, frameColumns);
   const floatingPanelRows = desiredFloatingPanelRows > 0 ? Math.min(desiredFloatingPanelRows, maxFloatingPanelRows) : 0;
   // Give the list every content row the panel exposes. The panel already grew
   // by OPTION_PANEL_EXTRA_ROWS; previously that growth was subtracted back out
@@ -174,6 +181,7 @@ export function computeRowBudgets({
   picker,
   contextPanel,
   usagePanel,
+  btwPanel,
   slashPaletteOpen,
 }) {
   const { textEntryPrompt, hasTextEntryPrompt, hasFloatingPanel, expandedOptionPanel, inputBoxHidden } = surfaces;
@@ -211,11 +219,13 @@ export function computeRowBudgets({
     picker,
     contextPanel,
     usagePanel,
+    btwPanel,
     slashPaletteOpen,
     hasTextEntryPrompt,
     TEXT_ENTRY_ROWS: textEntry.TEXT_ENTRY_ROWS,
     OPTION_PANEL_EXTRA_ROWS,
     maxFloatingPanelRows,
+    frameColumns,
   });
   const rows = {
     floatingPanelRows: panel.floatingPanelRows,

package/src/tui/app/shell-layout/surfaces.mjs

@@ -10,6 +10,7 @@ export function deriveSurfaces({
   picker,
   contextPanel,
   usagePanel,
+  btwPanel,
   slashPaletteOpen,
   tuiReady,
   state,
@@ -24,7 +25,8 @@ export function deriveSurfaces({
     contextPanel ||
     usagePanel ||
     slashPaletteOpen ||
-    hasTextEntryPrompt
+    hasTextEntryPrompt ||
+    btwPanel
   );
   const expandedOptionPanel = !!(toolApproval || picker || contextPanel || usagePanel || hasTextEntryPrompt);
   if (panelTransitionRef.current.signature.includes('picker:project') && !picker) {

package/src/tui/app/slash-commands.mjs

@@ -15,6 +15,12 @@ export const SLASH_COMMANDS = [
     description: 'Switch working directory (project)',
   },
   { name: 'compact', usage: '/compact', description: 'Compact older conversation context' },
+  {
+    name: 'btw',
+    usage: '/btw',
+    params: '<question>',
+    description: 'Ask a quick side question without interrupting the current work',
+  },
   {
     name: 'goal',
     usage: '/goal',
@@ -30,9 +36,12 @@ export const SLASH_COMMANDS = [
   { name: 'resume', usage: '/resume', params: '[id]', description: 'Resume a saved chat' },
   { name: 'context', usage: '/context', description: 'Show current context surface' },
   {
-    name: 'inherit',
-    usage: '/inherit',
-    description: 'Carry this conversation into a new session on the current model',
+    name: 'fork',
+    usage: '/fork',
+    aliases: ['inherit'],
+    aliasUsage: ['inherit'],
+    showAliasUsage: false,
+    description: 'Fork this conversation into a new session on the current model',
   },
   { name: 'usage', usage: '/usage', params: '[refresh]', description: 'Show total provider quota / balance' },
   { name: 'model', usage: '/model', params: '[name|refresh]', description: 'Switch model for subsequent turns' },
@@ -50,8 +59,13 @@ export const SLASH_COMMANDS = [
   { name: 'theme', usage: '/theme', params: '[id]', description: 'Change the TUI color theme' },
   { name: 'agents', usage: '/agents', params: '[refresh]', description: 'Show available workflow agents' },
   { name: 'effort', usage: '/effort', params: '[level]', description: 'Set reasoning effort for the current model' },
-  { name: 'fast', usage: '/fast', params: '[on|off|ultra]', description: 'Set Fast or Ultrafast mode for the current model' },
-  { name: 'mcp', usage: '/mcp', description: 'Manage MCP servers and tools' },
+  {
+    name: 'fast',
+    usage: '/fast',
+    params: '[on|off|ultra]',
+    description: 'Set Fast or Ultrafast mode for the current model',
+  },
+  { name: 'mcp', usage: '/mcp', params: '[login|logout <name>]', description: 'Manage MCP servers and tools' },
   { name: 'skills', usage: '/skills', description: 'Choose a skill for the next request' },
   { name: 'memory', usage: '/memory', params: '[status|core ...]', description: 'List and edit core memories' },
   { name: 'plugins', usage: '/plugins', description: 'Manage local plugin integrations' },
@@ -104,6 +118,7 @@ export function overlayBlocksGlobalTranscriptScroll(owner = {}) {
     owner.toolApproval ||
     owner.contextPanel ||
     owner.usagePanel ||
+    owner.btwPanel ||
     owner.providerPrompt ||
     owner.settingsPrompt
   );

package/src/tui/app/slash-dispatch/panel-commands.mjs

@@ -14,6 +14,8 @@ const desktopOnlyNotice = (ctx) => {
   return true;
 };
 
+const openMcpPanel = panelCommand('mcp', 'MCP Servers', (deps) => deps.openMcpPicker());
+
 const openSettings = panelCommand('settings', 'Settings', (deps) => deps.openSettingsPicker());
 
 export const panelCommands = {
@@ -26,7 +28,20 @@ export const panelCommands = {
     ctx.openSlashPanel('project', 'Projects', () => ctx.deps.openProjectPicker());
     return true;
   },
-  mcp: panelCommand('mcp', 'MCP Servers', (deps) => deps.openMcpPicker()),
+  mcp(ctx, arg) {
+    const [sub, ...rest] = arg.trim().split(/\s+/);
+    const action = sub?.toLowerCase();
+    if (action === 'login' || action === 'logout') {
+      const name = rest.join(' ');
+      if (!name) {
+        ctx.store.pushNotice(`usage: /mcp ${action} <name>`, 'warn');
+        return true;
+      }
+      void (action === 'login' ? ctx.deps.loginMcpServer(name) : ctx.deps.logoutMcpServer(name));
+      return true;
+    }
+    return openMcpPanel(ctx);
+  },
   skills: panelCommand('skills', 'Skills', (deps) => deps.openSkillsPicker()),
   plugins: panelCommand('plugins', 'Plugins', (deps) => deps.openPluginsPicker()),
   providers: panelCommand('providers', 'Providers', (deps) => deps.openProviderSetupPicker()),

package/src/tui/app/slash-dispatch/session-commands.mjs

@@ -1,8 +1,9 @@
 // slash-dispatch/session-commands.mjs
 // Slash commands that act on the session itself: clear/new, compact, goal,
-// resume, inherit, doctor and quit. Busy guards refuse the destructive ones
+// resume, fork (alias inherit), doctor and quit. Busy guards refuse the destructive ones
 // while a turn or session command is running.
 import { presentErrorText } from '../../../runtime/shared/err-text.mjs';
+import { BTW_USAGE_HINT } from '../btw-controller.mjs';
 
 function compactFailureNotice(error) {
   if (error == null || String(error).trim() === '') return 'Compact failed.';
@@ -63,6 +64,18 @@ export const sessionCommands = {
     return true;
   },
 
+  // Side question: allowed mid-turn; never queued, steered, or interrupting.
+  btw(ctx, arg) {
+    const { store, deps } = ctx;
+    const question = String(arg || '').trim();
+    if (!question) {
+      store.pushNotice(BTW_USAGE_HINT, 'warn');
+      return true;
+    }
+    deps.btw.ask(question);
+    return true;
+  },
+
   goal(ctx, arg) {
     const { store } = ctx;
     void Promise.resolve(store.goalControl?.({ command: arg }))
@@ -91,18 +104,18 @@ export const sessionCommands = {
     return true;
   },
 
-  inherit(ctx) {
+  fork(ctx, _arg, rawName) {
     const { state, store } = ctx;
-    if (state.busy) return refuseWhileBusy(store, 'inherit');
+    if (state.busy) return refuseWhileBusy(store, rawName === 'inherit' ? 'inherit' : 'fork');
     void Promise.resolve(store.inheritSession?.())
       .then((result) => {
         if (!result) {
-          store.pushNotice('nothing to inherit', 'warn');
+          store.pushNotice('nothing to fork', 'warn');
           return;
         }
-        store.pushNotice(`inherited ${result.messages} messages into ${result.sessionId}`, 'info');
+        store.pushNotice(`forked ${result.messages} messages into ${result.sessionId}`, 'info');
       })
-      .catch((e) => store.pushNotice(`inherit failed: ${e?.message || e}`, 'error'));
+      .catch((e) => store.pushNotice(`fork failed: ${e?.message || e}`, 'error'));
     return true;
   },
 

package/src/tui/app/use-global-key-input/approval-shortcut.mjs

@@ -0,0 +1,12 @@
+// Global tool-approval shortcuts: Esc/d/n deny, a/y approve. Returns the
+// decision to resolve with, or null. Question approvals (ask_user) are
+// answered only inside QuestionPanel, so typed letters and Esc never reach here.
+export function approvalShortcutDecision(toolApproval, input, key) {
+  if (!toolApproval || toolApproval.kind === 'question') return null;
+  const value = String(input || '')
+    .trim()
+    .toLowerCase();
+  if (key.escape || value === 'd' || value === 'n') return { approved: false, reason: 'denied by user' };
+  if (value === 'a' || value === 'y') return { approved: true, reason: 'approved by user' };
+  return null;
+}

package/src/tui/app/use-global-key-input.mjs

@@ -8,6 +8,7 @@
 import { useInput } from 'ink';
 import { overlayBlocksGlobalTranscriptScroll } from './slash-commands.mjs';
 import { copyActiveSelection } from './use-global-key-input/copy-first.mjs';
+import { approvalShortcutDecision } from './use-global-key-input/approval-shortcut.mjs';
 import { decodeSelectionMoveChord } from './use-global-key-input/shift-arrow.mjs';
 export function useGlobalKeyInput({
   store,
@@ -43,18 +44,10 @@ export function useGlobalKeyInput({
       // settle it through the same path a real release takes, before any branch
       // below reads the selection.
       settleStuckDrag?.();
-      if (toolApproval) {
-        const value = String(input || '')
-          .trim()
-          .toLowerCase();
-        if (key.escape || value === 'd' || value === 'n') {
-          store.resolveToolApproval?.(toolApproval.id, { approved: false, reason: 'denied by user' });
-          return;
-        }
-        if (value === 'a' || value === 'y') {
-          store.resolveToolApproval?.(toolApproval.id, { approved: true, reason: 'approved by user' });
-          return;
-        }
+      const decision = approvalShortcutDecision(toolApproval, input, key);
+      if (decision) {
+        store.resolveToolApproval?.(toolApproval.id, decision);
+        return;
       }
       if (key.ctrl && (input === 'c' || input === 'C')) {
         copyActiveSelection({ promptSelectionRef, dragRef, copySelection, showSelectionCopyHint });

package/src/tui/app/use-prompt-handlers.mjs

@@ -36,6 +36,8 @@ export function usePromptHandlers({
   usagePanel,
   closeUsagePanel,
   contextPanel,
+  btwPanel,
+  closeBtwPanel,
   // paste-attachment helpers (owned by App, threaded in explicitly)
   installPastedImages,
   clearPastedImagesSnapshot,
@@ -72,6 +74,13 @@ export function usePromptHandlers({
         return true;
       }
 
+      // /btw side panel: Esc closes it (cancelling a pending ask) before the
+      // turn interrupt / draft handling sees the key.
+      if (btwPanel) {
+        closeBtwPanel();
+        return true;
+      }
+
       if (meta.phase === 'clear-arm') {
         showPromptHint('Esc again to clear', 'plain', PROMPT_ESCAPE_HINT_TIMEOUT_MS);
         return true;
@@ -107,6 +116,8 @@ export function usePromptHandlers({
     },
     [
       contextPanel,
+      btwPanel,
+      closeBtwPanel,
       surface,
       usagePanel,
       closeUsagePanel,

package/src/tui/components/BtwPanel.jsx

@@ -0,0 +1,53 @@
+/**
+ * components/BtwPanel.jsx — transient `/btw` side-question panel above the prompt.
+ */
+import { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { theme } from '../theme.mjs';
+import { Markdown } from './Markdown.jsx';
+import { BTW_CHROME_ROWS, btwContentRows, btwScrollMax, btwScrollOffset } from '../app/btw-controller.mjs';
+
+export function BtwPanel({ panel, columns = 80, panelRows, themeEpoch = 0 }) {
+  const bodyRows = Math.max(1, (panelRows ?? BTW_CHROME_ROWS + 1) - BTW_CHROME_ROWS);
+  const total = btwContentRows(panel, columns);
+  const maxOffset = btwScrollMax(total, bodyRows);
+  const [offset, setOffset] = useState(0);
+  const top = Math.min(offset, maxOffset);
+  const scrollable = maxOffset > 0;
+
+  // A new question or a settled answer starts from the top.
+  useEffect(() => {
+    setOffset(0);
+  }, [panel.question, panel.status]);
+
+  useInput((_input, key) => {
+    if (!scrollable || (!key.pageUp && !key.pageDown)) return;
+    setOffset((current) => btwScrollOffset(key, current, bodyRows, total));
+  });
+
+  let body;
+  if (panel.status === 'pending') body = <Text color={theme.inactive}>answering… (Esc to cancel)</Text>;
+  else if (panel.status === 'error') body = <Text color={theme.error}>{panel.text}</Text>;
+  else
+    body = (
+      <Markdown themeEpoch={themeEpoch} columns={columns}>
+        {panel.text}
+      </Markdown>
+    );
+  return (
+    <Box flexDirection="column" flexShrink={0} width="100%">
+      <Box borderStyle="round" borderColor={theme.promptBorder} paddingX={1} width="100%" flexDirection="column">
+        <Text color={theme.panelTitle} wrap="truncate-end">{`btw · ${panel.question}`}</Text>
+        <Box flexDirection="column" height={bodyRows} overflow="hidden">
+          <Box flexDirection="column" flexShrink={0} marginTop={-top}>
+            {body}
+          </Box>
+        </Box>
+        <Text color={theme.inactive}>
+          {scrollable ? `PgUp/PgDn scroll (${top + 1}-${Math.min(total, top + bodyRows)}/${total}) · ` : ''}
+          Esc to close · not saved to the conversation
+        </Text>
+      </Box>
+    </Box>
+  );
+}