ompchamber 1.2.1 → 2.0.1

package/src/client/components/settings/categories/provider-settings/ModelConfigModal.tsx

@@ -11,28 +11,41 @@ interface ModelConfigModalProps {
   onSaveModelConfig: (modelId: string, updates: Partial<ProviderModel>) => void;
 }
 
+/** The reasoning levels omp's `thinking.efforts` accepts, in its own order. */
+const EFFORT_LEVELS = ['minimal', 'low', 'medium', 'high', 'xhigh', 'max'] as const;
+type EffortLevel = (typeof EFFORT_LEVELS)[number];
+
+/**
+ * Per-model configuration for one entry of `models.yml`.
+ *
+ * Only the knobs omp resolves per MODEL live here: `maxTokens` and the
+ * reasoning `thinking` block. omp has no per-model temperature or top-P — those
+ * are global `config.yml` settings, editable in Settings → OMP Engine — so
+ * offering sliders for them here would be a control that changes nothing. The
+ * dialog points at that panel instead.
+ */
 export function ModelConfigModal({
   isOpen,
   model,
   onClose,
   onSaveModelConfig,
 }: ModelConfigModalProps) {
-  if (!isOpen || !model) return null;
-
-  const [temperature, setTemperature] = useState<number>(model.temperature ?? 0.7);
-  const [maxTokens, setMaxTokens] = useState<number>(model.maxTokens ?? 384000);
-  const [topP, setTopP] = useState<number>(model.topP ?? 0.95);
-  const [reasoningEffort, setReasoningEffort] = useState<'low' | 'medium' | 'high'>(
-    model.reasoningEffort ?? 'medium'
+  const [maxTokens, setMaxTokens] = useState<string>(
+    model?.maxTokens ? String(model.maxTokens) : '',
   );
+  const [reasoningEffort, setReasoningEffort] = useState<EffortLevel | ''>(
+    (model?.reasoningEffort as EffortLevel | undefined) ?? '',
+  );
+
+  if (!isOpen || !model) return null;
 
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
+    const parsed = Number.parseInt(maxTokens, 10);
     onSaveModelConfig(model.id, {
-      temperature,
-      maxTokens,
-      topP,
-      reasoningEffort,
+      // Empty clears the override, so the model returns to the catalog value.
+      maxTokens: Number.isFinite(parsed) && parsed > 0 ? parsed : undefined,
+      reasoningEffort: reasoningEffort || undefined,
     });
     onClose();
   };
@@ -73,43 +86,6 @@ export function ModelConfigModal({
         </div>
       }
     >
-      {/* Temperature Slider */}
-      <div>
-        <div className="flex items-center justify-between mb-1 text-xs">
-          <span className="font-semibold text-ink">Sampling Temperature</span>
-          <span className="font-mono text-ink/70 font-semibold">{temperature.toFixed(2)}</span>
-        </div>
-        <input
-          type="range"
-          min="0.0"
-          max="2.0"
-          step="0.05"
-          value={temperature}
-          onChange={(e) => setTemperature(parseFloat(e.currentTarget.value))}
-          className="w-full accent-ink cursor-pointer"
-        />
-        <p className="text-[10px] text-ink/40 mt-0.5">
-          Controls randomness: lower is more deterministic, higher is more creative.
-        </p>
-      </div>
-
-      {/* Top P Slider */}
-      <div>
-        <div className="flex items-center justify-between mb-1 text-xs">
-          <span className="font-semibold text-ink">Top P (Nucleus Sampling)</span>
-          <span className="font-mono text-ink/70 font-semibold">{topP.toFixed(2)}</span>
-        </div>
-        <input
-          type="range"
-          min="0.1"
-          max="1.0"
-          step="0.05"
-          value={topP}
-          onChange={(e) => setTopP(parseFloat(e.currentTarget.value))}
-          className="w-full accent-ink cursor-pointer"
-        />
-      </div>
-
       {/* Max Output Tokens */}
       <div>
         <label className="block text-xs font-semibold text-ink mb-1">
@@ -117,23 +93,37 @@ export function ModelConfigModal({
         </label>
         <input
           type="number"
-          min={1024}
-          max={1000000}
+          min={1}
           step={1024}
           value={maxTokens}
-          onChange={(e) => setMaxTokens(parseInt(e.currentTarget.value, 10) || 4096)}
+          placeholder="Catalog default"
+          onChange={(e) => setMaxTokens(e.currentTarget.value)}
           className="w-full bg-paper border border-ink/20 rounded-md px-3 py-1.5 text-xs text-ink outline-none focus:border-ink/60 font-mono"
         />
+        <p className="text-[10px] text-ink/40 mt-0.5">
+          Written to models.yml as this model's output cap. Empty uses the catalog value.
+        </p>
       </div>
 
-      {/* Reasoning Effort (if supported) */}
+      {/* Reasoning Effort (only for models that support reasoning) */}
       {model.hasReasoning && (
         <div>
           <label className="block text-xs font-semibold text-ink mb-1.5">
-            Reasoning Effort
+            Default Reasoning Effort
           </label>
           <div className="grid grid-cols-3 gap-2">
-            {(['low', 'medium', 'high'] as const).map((lvl) => (
+            <button
+              type="button"
+              onClick={() => setReasoningEffort('')}
+              className={`py-1.5 rounded-md text-xs font-medium border text-center transition-colors cursor-pointer ${
+                reasoningEffort === ''
+                  ? 'border-ink/50 bg-ink/10 text-ink'
+                  : 'border-ink/15 text-ink/60 hover:border-ink/30'
+              }`}
+            >
+              Auto
+            </button>
+            {EFFORT_LEVELS.map((lvl) => (
               <button
                 key={lvl}
                 type="button"
@@ -148,8 +138,18 @@ export function ModelConfigModal({
               </button>
             ))}
           </div>
+          <p className="text-[10px] text-ink/40 mt-0.5">
+            The level omp starts this model at. Auto leaves the choice to the chat composer.
+          </p>
         </div>
       )}
+
+      <div className="flex items-start gap-2 px-3 py-2 rounded-md bg-ink/5 border border-ink/10 text-[11px] text-ink/60">
+        <span>
+          Sampling temperature and Top P are global omp settings, not per-model —
+          change them in <span className="font-medium text-ink">Settings → OMP Engine</span>.
+        </span>
+      </div>
     </Modal>
   );
 }

package/src/client/components/workspace/SearchPanel.tsx

@@ -6,6 +6,7 @@ import { useFetcher } from '@/client/lib/router/fetcher';
 import { GitRepoDropdown } from '@/client/components/workspace/file-explorer/GitRepoDropdown';
 import { useScrollbarFade, scrollbarFadeClass } from '@/client/hooks/ui/scrollbar-fade';
 import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { useRepoList, useRepoScope } from '@/client/hooks/workspace/repo-scope';
 import { useSearchStream } from '@/client/hooks/workspace/search-stream';
 import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
 import { getLanguageFromPath, highlightCode } from '@/shared/lib/code/syntax-highlight';
@@ -23,13 +24,18 @@ export function SearchPanel({ className = '', enabled = true, rootPath }: { clas
   const [includeFiles, setIncludeFiles] = useSessionState<string>('search.includeFiles', '');
   const [showMenu, setShowMenu] = useState(false);
   const [showIncludeField, setShowIncludeField] = useSessionState<boolean>('search.showIncludeField', false);
-  const [activeRepo, setActiveRepo] = useSessionState<string>('search.activeRepo', '.');
+  const { activeRepo, setActiveRepo } = useRepoScope(rootPath, 'search.activeRepo');
+  const { repos, scanning: reposScanning, rescan: rescanRepos } = useRepoList(rootPath, enabled);
   
   const menuRef = useRef<HTMLDivElement>(null);
   const { isScrolling, handleScroll } = useScrollbarFade();
 
   const replaceFetcher = useFetcher<{ success: boolean, results: any[] }>();
-  const { results, isSearching, start: startSearch } = useSearchStream();
+
+  // The tree being searched: the workspace root plus the selected repo. Every
+  // result is relative to it, so a switch must not keep the previous tree's
+  // hits on screen — `useSearchStream` tags them with this scope.
+  const { results, isSearching, start: startSearch } = useSearchStream(`${rootPath ?? ''}\u0000${activeRepo}`);
 
   useOnClickOutside(menuRef, () => setShowMenu(false));
 
@@ -109,7 +115,14 @@ export function SearchPanel({ className = '', enabled = true, rootPath }: { clas
       <div className="p-3 border-b border-ink/10 flex items-center justify-between">
         <div className="flex items-center space-x-2 min-w-0">
           <h2 className="text-xs font-semibold text-ink uppercase tracking-wider">Search</h2>
-          <GitRepoDropdown rootPath={rootPath} activeRepo={activeRepo} onSelectRepo={setActiveRepo} />
+          <GitRepoDropdown
+            rootPath={rootPath}
+            activeRepo={activeRepo}
+            onSelectRepo={setActiveRepo}
+            repos={repos}
+            scanning={reposScanning}
+            onRefreshRepos={rescanRepos}
+          />
         </div>
         <div className="relative" ref={menuRef}>
           <button 

package/src/client/components/workspace/btw-panel/AskCard.tsx

@@ -4,12 +4,17 @@
  */
 
 /**
- * The ask card — the top card of the side-question form.
+ * The ask card — the HEADER of the side-question panel.
  *
- * It is the form's own entry, not the chat's: the question typed here is always
- * a question of its own (a new topic), which is why it carries its own `⟳`
- * (start over) and `✕` (leave the form). The topic history and promotion ride
- * along here because the form replaced the composer that used to hold them.
+ * It is the panel's own entry, not the chat's: the question typed here is
+ * always a question of its own (a new topic), which is why it carries the
+ * panel's actions — `⟳` start over, `⌄` topic history, `⧉` promote, `✕` leave.
+ *
+ * It is a header rather than another card in the stack on purpose. The panel
+ * also holds a composer, and a second free-standing input beside it read as
+ * "the same thing again": users typed a follow-up into the new-question field.
+ * As a header it belongs to the answers card it sits on, and the composer below
+ * is the only input that continues the topic on screen.
  */
 
 import { useEffect, useRef, useState } from 'preact/hooks';
@@ -77,7 +82,7 @@ export function BtwAskCard({
   };
 
   return (
-    <div className="bg-paper border border-ink/20 rounded-2xl shadow-sm flex items-center gap-1 pl-1.5 pr-2 py-1 focus-within:border-ink transition-colors">
+    <div className="flex items-center gap-1 pl-1.5 pr-2 py-1.5 border-b border-ink/10 bg-canvas/40">
       <button
         type="button"
         onClick={() => {

package/src/client/components/workspace/btw-panel/Messages.tsx

@@ -1,34 +1,48 @@
 /**
- * BTW panel message body — the scrollable turn list of the active topic.
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * BTW panel message body — the scrollable conversation of the active topic.
  *
- * Pure presentation: the parent streams `liveAnswer` in and this file only
- * decides which text is current. No fetch, no session state.
+ * It renders through the CHAT's own `MessageList`, not a btw-specific renderer:
+ * a turn's `messages` are `ChatMessageData` (thinking, tool calls, usage,
+ * errors), so a tool the side child runs draws the same card it would in the
+ * chat, and the two can never drift. This file only assembles the row list —
+ * each turn's question as a user row, then that turn's conversation — and adds
+ * the btw-only status line for a turn that did not complete cleanly.
+ *
+ * Pure presentation: no fetch, no session state.
  */
 
 import { useEffect, useMemo, useRef } from 'preact/hooks';
-import type { BtwTopic, BtwTurnStatus } from '@/shared/types/btw';
-import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
+import type { BtwTopic, BtwTurn, BtwTurnStatus, ChatMessageData } from '@/shared/types';
+import { MessageList } from '@/client/components/workspace/chat-timeline/MessageList';
 
 export interface BtwMessagesProps {
   topic: BtwTopic | null;
-  /** Partial text of the running turn ('' when none). */
-  liveAnswer: string;
+  /** The running turn's conversation, chat-shaped (empty when none). */
+  liveMessages: ChatMessageData[];
   /** Panel-level error line, surfaced above the turns. */
   error: string | null;
+  provider?: string;
+  providerNames?: Record<string, string>;
+  modelName?: string;
+  /** Thinking level the side child runs at, for the run footer. */
+  thinkingLevel?: string;
+  isMobile?: boolean;
 }
 
-/** Status line under an answer that is not `complete`. */
+/**
+ * Status line for a turn that did not complete cleanly.
+ *
+ * `running` has no line here: the panel reports a turn in flight with the
+ * chat's own `GeneratingIndicator` at the bottom of the card, and a second
+ * "Thinking…" under the answer said the same thing twice.
+ */
 function AnswerStatus({ status }: { status: BtwTurnStatus }) {
-  if (status === 'complete') return null;
-
-  if (status === 'running') {
-    return (
-      <div className="flex items-center gap-1.5 text-[11px] text-ink/50">
-        <span className="w-1.5 h-1.5 rounded-full bg-ink/40 animate-pulse" />
-        <span>Thinking…</span>
-      </div>
-    );
-  }
+  if (status === 'complete' || status === 'running') return null;
 
   if (status === 'cancelled') {
     return <div className="text-[11px] text-ink/50">Cancelled</div>;
@@ -37,15 +51,63 @@ function AnswerStatus({ status }: { status: BtwTurnStatus }) {
   return <div className="text-[11px] text-error">{status === 'failed' ? 'Failed' : 'Interrupted'}</div>;
 }
 
-export function BtwMessages({ topic, liveAnswer, error }: BtwMessagesProps) {
+/** The question row for a turn, in the chat's own user-bubble shape. */
+function questionRow(topic: BtwTopic, turn: BtwTurn): ChatMessageData {
+  return {
+    id: `btw-${topic.id}-${turn.index}-user`,
+    role: 'user',
+    content: turn.question,
+    timestamp: new Date(turn.createdAt).toISOString(),
+  };
+}
+
+/**
+ * A turn's rows: its stored conversation, or — for a turn written before the
+ * conversation was stored — its plain `answer` as a single assistant row.
+ * Without this fallback every pre-existing turn would render its question and
+ * no answer at all.
+ *
+ * The child ECHOES the prompt it received, and that echo is the `<btw>` wrapper
+ * this panel itself built — the caller already renders the user's own question
+ * as a row, so the echo is dropped rather than shown as a second, uglier copy
+ * of the same turn.
+ */
+function turnRows(topic: BtwTopic, turn: BtwTurn): ChatMessageData[] {
+  const conversation = turn.messages.filter((message) => message.role !== 'user');
+  if (conversation.length > 0) return conversation;
+  if (!turn.answer) return [];
+  return [
+    {
+      id: `btw-${topic.id}-${turn.index}-answer`,
+      role: 'ai',
+      content: turn.answer,
+      timestamp: new Date(turn.updatedAt).toISOString(),
+    },
+  ];
+}
+
+export function BtwMessages({ topic, liveMessages, error, provider, providerNames, modelName, thinkingLevel, isMobile = false }: BtwMessagesProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const turns = topic?.turns ?? [];
 
+  // One row list for the whole topic: each question, then its conversation. The
+  // running turn's live rows replace its (still empty) stored ones.
+  const rows = useMemo<ChatMessageData[]>(() => {
+    if (!topic) return [];
+    return turns.flatMap((turn) => {
+      const running = turn.status === 'running' && liveMessages.length > 0;
+      // The live buffer carries the same echoed prompt the stored conversation
+      // does, so it is filtered the same way (see `turnRows`).
+      const conversation = running ? liveMessages.filter((message) => message.role !== 'user') : turnRows(topic, turn);
+      return [questionRow(topic, turn), ...conversation];
+    });
+  }, [topic, turns, liveMessages]);
+
   // Cheap scroll signal: any visible text growth (stream delta, new question,
   // topic switch) changes this number.
   const renderedLength = useMemo(
-    () => turns.reduce((total, turn) => total + turn.question.length + turn.answer.length, 0) + liveAnswer.length,
-    [turns, liveAnswer],
+    () => rows.reduce((total, row) => total + row.content.length + (row.toolCalls?.length ?? 0) * 64, 0),
+    [rows],
   );
 
   useEffect(() => {
@@ -53,47 +115,39 @@ export function BtwMessages({ topic, liveAnswer, error }: BtwMessagesProps) {
     if (body) body.scrollTop = body.scrollHeight;
   }, [renderedLength]);
 
-  const lastIndex = turns.length - 1;
-
   return (
     <div
       ref={scrollRef}
-      className="flex-1 min-h-0 overflow-y-auto scrollbar-overlay-container scrollbar-overlay-static px-4 py-3 space-y-4"
+      className="flex-1 min-h-0 overflow-y-auto scrollbar-overlay-container scrollbar-overlay-static px-4 py-3"
     >
       {error && (
         <div className="bg-error/10 border border-error/30 text-error rounded-lg px-3 py-2 text-[12px]">{error}</div>
       )}
 
       {topic === null ? (
-        <div className="flex h-full items-center justify-center px-4 text-center text-[12px] text-ink/50">
-          Start a side question — the answer stays out of this chat's transcript.
+        <div className="flex min-h-[72px] items-center justify-center px-4 text-center text-[12px] text-ink/50">
+          Ask a question above — the answer stays out of this chat's transcript.
         </div>
       ) : (
-        turns.map((turn, index) => {
-          // The streamed text wins while the newest turn is live: either it is
-          // still running, or it already outgrew the last flushed answer.
-          const streaming =
-            index === lastIndex &&
-            liveAnswer !== '' &&
-            (turn.status === 'running' || liveAnswer.length > turn.answer.length);
-          const answer = streaming ? liveAnswer : turn.answer;
-
-          return (
-            <div key={turn.index} className="space-y-2">
-              <div className="ml-auto max-w-[85%] w-fit bg-ink/[0.06] border border-ink/10 rounded-xl px-3.5 py-2.5 text-[13px] text-ink break-words">
-                <MarkdownRenderer content={turn.question} />
-              </div>
-
-              {answer !== '' && (
-                <div className="px-1 text-[13px] text-ink leading-relaxed">
-                  <MarkdownRenderer content={answer} />
-                </div>
-              )}
-
-              <AnswerStatus status={turn.status} />
-            </div>
-          );
-        })
+        <>
+          <MessageList
+            messages={rows}
+            isGenerating={topic.turns.some((turn) => turn.status === 'running')}
+            provider={provider}
+            providerNames={providerNames}
+            modelName={modelName}
+            thinkingLevel={thinkingLevel}
+            isMobile={isMobile}
+            userActions={false}
+          />
+          {/* A turn that stopped without completing is the only thing the chat's
+              own rows cannot express, so it is the only btw-specific line. */}
+          {turns
+            .filter((turn) => turn.status !== 'complete' && turn.status !== 'running')
+            .map((turn) => (
+              <AnswerStatus key={turn.index} status={turn.status} />
+            ))}
+        </>
       )}
     </div>
   );

package/src/client/components/workspace/btw-panel/index.tsx

@@ -4,33 +4,67 @@
  */
 
 /**
- * The side-question form — what the chat composer becomes while BTW mode is on.
+ * The side-question panel — what the chat composer becomes while BTW mode is on.
  *
- * Stacked cards, top to bottom: the topic's turns (only once there is something
- * to show, or an error to explain), the ask card (a question of its own), and
- * the side session's composer (follow-ups, attachments, model chip). Nothing it
- * produces enters the chat transcript — that is the point of a side question —
- * and promotion is the one explicit action that moves an answer into the chat,
- * as a session branched from it.
+ * TWO cards, and the split is what keeps it unambiguous:
+ *
+ *  1. the panel card — the ask card as its HEADER (the field that starts a new
+ *     topic, plus `⟳` start over / `⌄` topic history / `⧉` promote / `✕` leave),
+ *     the topic's turns as its body, and the running turn's indicator pinned at
+ *     the BOTTOM, where it reports the answer being streamed above it;
+ *  2. the composer — the chat's own `ChatInput`, for follow-ups to the topic on
+ *     screen.
+ *
+ * The ask field used to be a free-standing card directly above that composer,
+ * and users typed a follow-up into it. As a header it belongs to the answers
+ * card it sits on, and only one input continues the topic in view.
+ *
+ * Nothing here enters the chat transcript — that is the point of a side
+ * question — and promotion is the one explicit action that moves an answer into
+ * the chat, as a session branched from it.
+ *
+ * The composer card is the CHAT's own `ChatInput`, not a look-alike: a side
+ * question runs a child with tools and an access mode, so it offers the same
+ * model / thinking / access controls, the same attachments, drop targets and
+ * keybindings. Only the autocomplete is off (`enablePicker`) — a side question
+ * has no file tree, commands or skills to complete against.
  */
 
 import { useState } from 'preact/hooks';
+import type { Attachment } from '@/shared/types';
 import type { BtwMode } from '@/client/hooks/chat/btw/mode';
 import { BtwAskCard } from '@/client/components/workspace/btw-panel/AskCard';
 import { BtwMessages } from '@/client/components/workspace/btw-panel/Messages';
-import { BtwComposer } from '@/client/components/workspace/btw-panel/Composer';
-import { btwImagesFrom, readBtwAttachments, type BtwAttachment } from '@/client/components/workspace/btw-panel/attachments';
+import { ChatInput } from '@/client/components/workspace/chat-timeline/chat-input/index';
+import { GeneratingIndicator } from '@/client/components/workspace/chat-timeline/GeneratingIndicator';
+import { ExtensionDialog } from '@/client/components/workspace/chat-timeline/tool-renderers/extension-dialog/Lazy';
+
+/** Tallest the answer card grows before its own scrollbar takes over. */
+const ANSWERS_MAX_HEIGHT_PX = 520;
 
 export interface BtwFormProps {
   mode: BtwMode;
-  /** The chat's own model, shown until the topic reports the one it ran on. */
+  appSettings: Record<string, unknown>;
+  composerModelRef: { current: { provider: string; modelId: string; thinkingLevel: string } | null };
+  rootPath: string | null;
+  variant: 'desktop' | 'mobile';
+  /** Chat model/provider, shown until the topic reports the one it ran on. */
   modelName?: string;
   provider?: string;
   providerNames?: Record<string, string>;
 }
 
-export function BtwForm({ mode, modelName, provider, providerNames }: BtwFormProps) {
-  const [attachments, setAttachments] = useState<BtwAttachment[]>([]);
+export function BtwForm({
+  mode,
+  appSettings,
+  composerModelRef,
+  rootPath,
+  variant,
+  modelName,
+  provider,
+  providerNames,
+}: BtwFormProps) {
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
   const lastTurn = mode.activeTopic?.turns[mode.activeTopic.turns.length - 1];
   // `busy` is the command in flight (a promote POST, say): promoting again from
   // the same click burst would be a second request for work already running.
@@ -38,51 +72,96 @@ export function BtwForm({ mode, modelName, provider, providerNames }: BtwFormPro
   // session exists, and the server hands that id back on a repeat promote.
   const canPromote =
     Boolean(mode.activeTopic) && !mode.runningTopicId && !mode.busy && !mode.activeTopic?.promotedSessionId && lastTurn?.status === 'complete';
-  const showTurns = (mode.activeTopic?.turns.length ?? 0) > 0 || Boolean(mode.error);
+  const dialog = mode.dialogs[0];
+  const running = Boolean(mode.runningTopicId);
 
   return (
     <div className="flex flex-col gap-2">
-      {showTurns && (
-        <div className="bg-paper border border-ink/15 rounded-2xl shadow-xl flex flex-col max-h-[45vh] overflow-hidden">
-          <BtwMessages topic={mode.activeTopic} liveAnswer={mode.liveAnswer} error={mode.error} />
-        </div>
-      )}
+      {/* ONE card, so the header's field and the body's answers read as one
+          panel — and the composer below it as the other. The ask card is that
+          header: a second free-standing input beside the composer is what made
+          users type a follow-up into the new-question field. */}
+      <div
+        className="bg-paper border border-ink/15 rounded-2xl shadow-xl flex flex-col overflow-hidden"
+        style={{ maxHeight: ANSWERS_MAX_HEIGHT_PX }}
+      >
+        <BtwAskCard
+          value={mode.askDraft}
+          onChange={mode.setAskDraft}
+          onSubmit={mode.submitAsk}
+          onNewQuestion={mode.resetQuestion}
+          onClose={mode.exit}
+          running={running}
+          topics={mode.topics}
+          activeTopicId={mode.activeTopic?.id ?? null}
+          onSelectTopic={mode.selectTopic}
+          onDeleteTopic={mode.removeTopic}
+          canPromote={canPromote}
+          onPromote={() => void mode.promote()}
+        />
 
-      <BtwAskCard
-        value={mode.askDraft}
-        onChange={mode.setAskDraft}
-        onSubmit={mode.submitAsk}
-        onNewQuestion={mode.resetQuestion}
-        onClose={mode.exit}
-        running={Boolean(mode.runningTopicId)}
-        topics={mode.topics}
-        activeTopicId={mode.activeTopic?.id ?? null}
-        onSelectTopic={mode.selectTopic}
-        onDeleteTopic={mode.removeTopic}
-        canPromote={canPromote}
-        onPromote={() => void mode.promote()}
-      />
+        <BtwMessages
+          topic={mode.activeTopic}
+          liveMessages={mode.liveMessages}
+          error={mode.error}
+          provider={mode.activeTopic?.model?.provider ?? provider}
+          providerNames={providerNames}
+          modelName={mode.activeTopic?.model?.name ?? modelName}
+          thinkingLevel={mode.thinkingLevel}
+          isMobile={variant === 'mobile'}
+        />
+
+        {/* The turn in flight reports itself HERE, at the bottom of the card and
+            below the answer it is streaming — not above it, and not as the
+            "Thinking…" line the transcript used to draw under the answer. */}
+        {running && (
+          <GeneratingIndicator
+            id="btw-generating-indicator"
+            generatingVerb={mode.liveVerb}
+            modelName={mode.activeTopic?.model?.name ?? modelName}
+            provider={mode.activeTopic?.model?.provider ?? provider}
+            providerNames={providerNames}
+          />
+        )}
+      </div>
 
-      <BtwComposer
+      <ChatInput
         value={mode.followUpDraft}
         onChange={mode.setFollowUpDraft}
-        onSubmit={() => {
-          // Hand the images over and clear them: leaving them staged would
-          // re-send the same picture with every later follow-up.
-          mode.submitFollowUp(mode.followUpDraft, btwImagesFrom(attachments));
+        onSend={(outgoing) => {
+          // Hand the attachments over and clear them: leaving them staged would
+          // re-send the same file with every later follow-up.
+          mode.submitFollowUp(mode.followUpDraft, outgoing);
           setAttachments([]);
         }}
+        isGenerating={running}
         onStop={mode.abort}
-        running={Boolean(mode.runningTopicId)}
-        modelLabel={mode.activeTopic?.model?.name ?? modelName}
-        provider={mode.activeTopic?.model?.provider ?? provider}
-        providerNames={providerNames}
+        appSettings={appSettings}
         attachments={attachments}
-        onFilesSelected={(files) => {
-          void readBtwAttachments(files).then((next) => setAttachments((prev) => [...prev, ...next]));
-        }}
-        onRemoveAttachment={(id) => setAttachments((prev) => prev.filter((attachment) => attachment.id !== id))}
+        onAttachmentsChange={setAttachments}
+        rootPath={rootPath}
+        variant={variant}
+        enablePicker={false}
+        placeholder="Ask in this btw session..."
+        accessMode={mode.accessMode}
+        onAccessModeChange={mode.setAccessMode}
+        onThinkingLevelChange={mode.setThinkingLevel}
+        onModelChange={mode.setModel}
+        sessionModel={mode.activeTopic?.model ? { provider: mode.activeTopic.model.provider, modelId: mode.activeTopic.model.id } : null}
+        sessionThinkingLevel={mode.thinkingLevel}
+        composerModelRef={composerModelRef}
       />
+
+      {/* A side child runs with tools, so a gated call parks its turn on an
+          approval dialog. There is no tool card here to host one inline (unlike
+          the chat's `ask`), so every answerable request is a modal — and the
+          dialog brings its own backdrop. */}
+      {dialog && (
+        <ExtensionDialog
+          request={dialog.request}
+          onRespond={(_, response) => mode.respondToDialog(dialog.request.id, response)}
+        />
+      )}
     </div>
   );
 }