ompchamber 1.0.0 → 1.2.0

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

@@ -0,0 +1,181 @@
+/**
+ * BTW panel composer card — the side question's own input.
+ *
+ * Pure presentation: text, attachments and the running turn are owned by the
+ * parent; this file only autosizes the textarea, reads keys and renders.
+ */
+
+import { useEffect, useRef } from 'preact/hooks';
+import type { TargetedEvent, TargetedKeyboardEvent } from 'preact';
+import { File as FileIcon, Paperclip, Send, Shield, Square, X } from 'lucide-preact';
+import { formatBytes } from '@/shared/lib/format/number';
+import { providerLabel } from '@/shared/lib/models/provider-label';
+
+export interface BtwComposerProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  onStop: () => void;
+  running: boolean;
+  modelLabel?: string;
+  provider?: string;
+  attachments: { id: string; name: string; size: number }[];
+  onFilesSelected: (files: File[]) => void;
+  onRemoveAttachment: (id: string) => void;
+}
+
+const ICON_BUTTON = 'p-1.5 rounded text-ink/60 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer';
+
+export function BtwComposer({
+  value,
+  onChange,
+  onSubmit,
+  onStop,
+  running,
+  modelLabel,
+  provider,
+  attachments,
+  onFilesSelected,
+  onRemoveAttachment,
+}: BtwComposerProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const canSend = value.trim().length > 0 || attachments.length > 0;
+  const providerText = provider ? providerLabel(provider) : '';
+
+  // The form replaces the chat composer that had focus, so the caret is put
+  // here — the field the form is for, and the one a restored draft is waiting
+  // in — instead of being left on the document body.
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.focus();
+    textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+  }, []);
+
+  // Grow with the content and collapse again when the parent clears `value`
+  // after a submit — `height: auto` first, otherwise the box can only expand.
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = 'auto';
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  }, [value]);
+
+  const handleKeyDown = (event: TargetedKeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Escape') {
+      event.currentTarget.blur();
+      return;
+    }
+    if (event.key !== 'Enter' || event.shiftKey) return;
+    // IME candidate selection must not submit the question.
+    if (event.isComposing || event.keyCode === 229) return;
+    event.preventDefault();
+    if (canSend) onSubmit();
+  };
+
+  const handleFileSelect = (event: TargetedEvent<HTMLInputElement>) => {
+    const files = event.currentTarget.files;
+    if (files && files.length > 0) onFilesSelected(Array.from(files));
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  };
+
+  return (
+    <div className="bg-paper border border-ink/20 rounded-2xl shadow-lg flex flex-col overflow-hidden">
+      <textarea
+        ref={textareaRef}
+        rows={1}
+        value={value}
+        onInput={(event) => onChange(event.currentTarget.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Ask in this btw session..."
+        className="w-full bg-transparent text-[13px] text-ink placeholder-ink/40 resize-none outline-none px-3.5 pt-3 pb-1 max-h-32"
+      />
+
+      {attachments.length > 0 && (
+        <div className="flex items-center flex-wrap gap-1.5 px-3 pt-2">
+          {attachments.map((attachment) => (
+            <div
+              key={attachment.id}
+              className="relative flex items-center bg-canvas border border-ink/10 rounded-md p-0.5 pr-6 text-xs"
+            >
+              <div className="w-6 h-6 flex items-center justify-center bg-ink/5 rounded-sm mr-1.5 text-ink/60">
+                <FileIcon size={12} strokeWidth={2} />
+              </div>
+              <span className="truncate max-w-[120px] font-mono text-[10px] text-ink/80">{attachment.name}</span>
+              {formatBytes(attachment.size) && (
+                <span className="ml-1.5 font-mono text-[10px] text-ink/40">{formatBytes(attachment.size)}</span>
+              )}
+              <button
+                type="button"
+                onClick={() => onRemoveAttachment(attachment.id)}
+                className="absolute right-0.5 top-1/2 -translate-y-1/2 p-0.5 text-ink/40 hover:text-error hover:bg-error/10 rounded transition-colors cursor-pointer"
+                aria-label={`Remove ${attachment.name}`}
+                title="Remove attachment"
+              >
+                <X size={10} strokeWidth={2} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className="flex items-center justify-between px-2 pb-2">
+        <div className="flex items-center gap-0.5">
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            className={ICON_BUTTON}
+            aria-label="Attach files"
+            title="Attach files"
+          >
+            <Paperclip size={14} strokeWidth={2} />
+          </button>
+
+          <span
+            className="p-1.5 text-ink/40"
+            aria-label="Side answers never use tools"
+            title="Side answers never use tools"
+          >
+            <Shield size={14} strokeWidth={2} />
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2 min-w-0">
+          {(providerText || modelLabel) && (
+            <div className="flex items-baseline gap-1.5 min-w-0">
+              {providerText && <span className="text-[10px] text-ink/40 shrink-0">{providerText}</span>}
+              {modelLabel && <span className="text-[11px] text-ink/70 truncate">{modelLabel}</span>}
+            </div>
+          )}
+
+          {running ? (
+            <button
+              type="button"
+              onClick={onStop}
+              className="bg-ink text-canvas rounded p-1.5 cursor-pointer"
+              aria-label="Stop side answer"
+              title="Stop side answer"
+            >
+              <Square size={14} strokeWidth={2} />
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={onSubmit}
+              disabled={!canSend}
+              className="bg-ink text-canvas hover:bg-ink/80 rounded p-1.5 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
+              aria-label="Send side question"
+              title="Send side question"
+            >
+              <Send size={14} strokeWidth={2} />
+            </button>
+          )}
+        </div>
+      </div>
+
+      <input type="file" accept="image/*" multiple className="hidden" ref={fileInputRef} onChange={handleFileSelect} />
+    </div>
+  );
+}

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

@@ -0,0 +1,100 @@
+/**
+ * BTW panel message body — the scrollable turn list 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.
+ */
+
+import { useEffect, useMemo, useRef } from 'preact/hooks';
+import type { BtwTopic, BtwTurnStatus } from '@/shared/types/btw';
+import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
+
+export interface BtwMessagesProps {
+  topic: BtwTopic | null;
+  /** Partial text of the running turn ('' when none). */
+  liveAnswer: string;
+  /** Panel-level error line, surfaced above the turns. */
+  error: string | null;
+}
+
+/** Status line under an answer that is not `complete`. */
+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 === 'cancelled') {
+    return <div className="text-[11px] text-ink/50">Cancelled</div>;
+  }
+
+  return <div className="text-[11px] text-error">{status === 'failed' ? 'Failed' : 'Interrupted'}</div>;
+}
+
+export function BtwMessages({ topic, liveAnswer, error }: BtwMessagesProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const turns = topic?.turns ?? [];
+
+  // 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],
+  );
+
+  useEffect(() => {
+    const body = scrollRef.current;
+    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"
+    >
+      {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>
+      ) : (
+        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>
+          );
+        })
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,106 @@
+/**
+ * BTW topic history dropdown — the ⌄ menu of the panel header.
+ *
+ * Pure presentation: it renders the topic list and reports dismissal; the open
+ * state lives in `BtwHeader`.
+ */
+
+import { useEffect, useRef } from 'preact/hooks';
+import { Trash2 } from 'lucide-preact';
+import type { BtwTopic, BtwTurnStatus } from '@/shared/types/btw';
+
+export interface BtwTopicMenuProps {
+  topics: BtwTopic[];
+  activeTopicId: string | null;
+  onSelectTopic: (id: string) => void;
+  /** Drop a topic and its transcript — a topic copies the parent session, so
+   *  history nobody will reopen is real disk. */
+  onDeleteTopic: (id: string) => void;
+  /** Called after a selection and on outside click / Escape. */
+  onCloseMenu: () => void;
+}
+
+const STATUS_LABEL: Record<BtwTurnStatus, string> = {
+  running: 'thinking…',
+  complete: 'complete',
+  cancelled: 'cancelled',
+  failed: 'failed',
+  interrupted: 'interrupted',
+};
+
+/** `<turn count> · <status of the newest turn>` — the one-line topic summary. */
+export function BtwTopicMenu({ topics, activeTopicId, onSelectTopic, onDeleteTopic, onCloseMenu }: BtwTopicMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Outside dismissal. Pointerdown (not click) so the menu is gone before the
+  // underlying target reacts; the header toggle is exempt — it owns its own
+  // open state and would otherwise re-open what this handler just closed.
+  useEffect(() => {
+    const onPointerDown = (event: globalThis.PointerEvent) => {
+      const target = event.target instanceof Element ? event.target : null;
+      if (menuRef.current?.contains(target)) return;
+      if (target?.closest('[data-btw-menu-anchor]')) return;
+      onCloseMenu();
+    };
+    document.addEventListener('pointerdown', onPointerDown);
+    return () => document.removeEventListener('pointerdown', onPointerDown);
+  }, [onCloseMenu]);
+
+  useEffect(() => {
+    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key === 'Escape') onCloseMenu();
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [onCloseMenu]);
+
+  return (
+    <div
+      ref={menuRef}
+      role="menu"
+      aria-label="Side question history"
+      className="absolute left-0 top-full mt-1 z-50 bg-paper border border-ink/15 rounded-lg shadow-xl min-w-[280px] max-h-72 overflow-y-auto scrollbar-overlay-container scrollbar-overlay-static p-1"
+    >
+      {topics.length === 0 && (
+        <div className="px-2.5 py-2 text-[12px] text-ink/50">No side questions yet.</div>
+      )}
+
+      {topics.map((topic) => {
+        const count = topic.turns.length;
+        const newest = topic.turns[count - 1];
+
+        return (
+          <div
+            key={topic.id}
+            className={`group flex items-center rounded ${topic.id === activeTopicId ? 'bg-ink/5' : 'hover:bg-ink/5'}`}
+          >
+            <button
+              type="button"
+              role="menuitem"
+              onClick={() => {
+                onSelectTopic(topic.id);
+                onCloseMenu();
+              }}
+              className="flex-1 min-w-0 text-left px-2.5 py-2 rounded cursor-pointer"
+            >
+              <div className="truncate text-[12px] text-ink">{topic.title}</div>
+              <div className="text-[11px] text-ink/50">
+                {count} turn{count === 1 ? '' : 's'}
+                {newest ? ` · ${STATUS_LABEL[newest.status]}` : ''}
+              </div>
+            </button>
+            <button
+              type="button"
+              onClick={() => onDeleteTopic(topic.id)}
+              className="p-1.5 mr-1 rounded text-ink/40 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:text-error hover:bg-error/10 transition-colors cursor-pointer"
+              aria-label={`Delete side question: ${topic.title}`}
+              title="Delete this side question"
+            >
+              <Trash2 size={12} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/client/components/workspace/btw-panel/attachments.ts

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Attachment handling for the side composer.
+ *
+ * A side question reaches the model with images only — no text files and no
+ * tools (the prompt says so, and the child runs `--no-tools`), so an
+ * attachment that cannot be an image payload is not offered in the first
+ * place. The file picker is `accept="image/*"`; this reads what it returns.
+ */
+
+import type { AgentImage } from '@/shared/types';
+
+/** An attachment held by the side composer until it is sent. */
+export interface BtwAttachment {
+  id: string;
+  name: string;
+  size: number;
+  dataBase64?: string;
+}
+
+function readImage(file: File): Promise<string | undefined> {
+  const { promise, resolve } = Promise.withResolvers<string | undefined>();
+  const reader = new FileReader();
+  reader.onload = () => {
+    const result = typeof reader.result === 'string' ? reader.result : '';
+    const comma = result.indexOf(',');
+    resolve(comma >= 0 ? result.slice(comma + 1) : undefined);
+  };
+  reader.onerror = () => resolve(undefined);
+  reader.readAsDataURL(file);
+  return promise;
+}
+
+/** Read picked files into attachments, keeping only images. */
+export async function readBtwAttachments(files: File[]): Promise<BtwAttachment[]> {
+  const images = files.filter((file) => file.type.startsWith('image/'));
+  return Promise.all(
+    images.map(async (file) => {
+      const dataBase64 = await readImage(file);
+      return {
+        id: `btw-${file.name}-${file.size}-${file.lastModified}`,
+        name: file.name,
+        size: file.size,
+        ...(dataBase64 ? { dataBase64 } : {}),
+      };
+    }),
+  );
+}
+
+/** The model payload for an ask — images only, base64 already read. */
+export function btwImagesFrom(attachments: BtwAttachment[]): AgentImage[] {
+  return attachments
+    .filter((attachment): attachment is BtwAttachment & { dataBase64: string } => typeof attachment.dataBase64 === 'string')
+    .map((attachment) => ({
+      type: 'image' as const,
+      data: attachment.dataBase64,
+      mimeType: mimeTypeOf(attachment.name),
+    }));
+}
+
+const MIME_BY_EXTENSION: Record<string, string> = {
+  png: 'image/png',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  gif: 'image/gif',
+  webp: 'image/webp',
+  bmp: 'image/bmp',
+  svg: 'image/svg+xml',
+  avif: 'image/avif',
+};
+
+function mimeTypeOf(name: string): string {
+  const dot = name.lastIndexOf('.');
+  const extension = dot >= 0 ? name.slice(dot + 1).toLowerCase() : '';
+  return MIME_BY_EXTENSION[extension] ?? 'image/png';
+}

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

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The side-question form — 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.
+ */
+
+import { useState } from 'preact/hooks';
+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';
+
+export interface BtwFormProps {
+  mode: BtwMode;
+  /** The chat's own model, shown until the topic reports the one it ran on. */
+  modelName?: string;
+  provider?: string;
+}
+
+export function BtwForm({ mode, modelName, provider }: BtwFormProps) {
+  const [attachments, setAttachments] = useState<BtwAttachment[]>([]);
+  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.
+  const canPromote = Boolean(mode.activeTopic) && !mode.runningTopicId && !mode.busy && lastTurn?.status === 'complete';
+  const showTurns = (mode.activeTopic?.turns.length ?? 0) > 0 || Boolean(mode.error);
+
+  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>
+      )}
+
+      <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()}
+      />
+
+      <BtwComposer
+        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));
+          setAttachments([]);
+        }}
+        onStop={mode.abort}
+        running={Boolean(mode.runningTopicId)}
+        modelLabel={mode.activeTopic?.model?.name ?? modelName}
+        provider={mode.activeTopic?.model?.provider ?? provider}
+        attachments={attachments}
+        onFilesSelected={(files) => {
+          void readBtwAttachments(files).then((next) => setAttachments((prev) => [...prev, ...next]));
+        }}
+        onRemoveAttachment={(id) => setAttachments((prev) => prev.filter((attachment) => attachment.id !== id))}
+      />
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/ComposerDock.tsx

@@ -1,5 +1,7 @@
 import type { Dispatch, SetStateAction } from 'preact/compat';
 import { ChatInput } from '@/client/components/workspace/chat-timeline/chat-input/index';
+import { BtwForm } from '@/client/components/workspace/btw-panel/index';
+import { useBtwMode } from '@/client/hooks/chat/btw/mode';
 import { GeneratingIndicator } from '@/client/components/workspace/chat-timeline/GeneratingIndicator';
 import { QueueList } from '@/client/components/workspace/chat-timeline/QueueList';
 import type { Attachment, QueuedMessage } from '@/shared/types';
@@ -7,6 +9,8 @@ import type { ApprovalMode } from '@/shared/lib/omp/config/access-mode';
 
 interface ComposerDockProps {
   isMobile: boolean;
+  /** Chamber session the side-question panel scopes to. */
+  sessionId: string | null;
   isGenerating: boolean;
   modelName?: string;
   generatingVerb: string;
@@ -32,6 +36,7 @@ interface ComposerDockProps {
   accessMode: ApprovalMode;
   onAccessModeChange: (mode: ApprovalMode) => void;
   composerModelRef: { current: { provider: string; modelId: string; thinkingLevel: string } | null };
+  deferredComposerPickRef: { current: { provider?: string; modelId?: string; thinkingLevel?: string } | null };
   sessionModel: { provider: string; modelId: string } | null;
   sessionThinkingLevel?: string | null;
   variant: 'desktop' | 'mobile';
@@ -44,6 +49,7 @@ interface ComposerDockProps {
  */
 export function ComposerDock({
   isMobile,
+  sessionId,
   isGenerating,
   modelName,
   generatingVerb,
@@ -69,16 +75,24 @@ export function ComposerDock({
   accessMode,
   onAccessModeChange,
   composerModelRef,
+  deferredComposerPickRef,
   sessionModel,
   sessionThinkingLevel,
   variant,
 }: ComposerDockProps) {
+  // Side questions take over the composer entirely: the chat's own input is
+  // hidden while the form is open, so a stray Enter cannot send to the wrong
+  // conversation.
+  const btw = useBtwMode(sessionId, appSettings);
+
   return (
     <div
       className={`bg-transparent border-t-0 flex-shrink-0 space-y-2 ${isMobile ? 'px-3 pt-1' : 'p-4 pt-1'}`}
       style={isMobile ? { paddingBottom: 'max(0.75rem, env(safe-area-inset-bottom, 0px))' } : undefined}
     >
-      <div className="mx-auto w-full max-w-[970px]">
+      {/* `relative` keeps the queue/indicator stack anchored above the input
+          while the side-question form takes the composer's place. */}
+      <div className="relative mx-auto w-full max-w-[970px]">
         {isGenerating && (
           <GeneratingIndicator
             modelName={modelName}
@@ -103,25 +117,30 @@ export function ComposerDock({
           })}
           isSteering
         />
-        <ChatInput
-          value={inputValue}
-          onChange={setInputValue}
-          rootPath={rootPath}
-          attachments={attachments}
-          onAttachmentsChange={setAttachments}
-          onSend={onSend}
-          isGenerating={isGenerating}
-          onStop={onStop}
-          appSettings={appSettings}
-          onThinkingLevelChange={onThinkingLevelChange}
-          onModelChange={onModelChange}
-          accessMode={accessMode}
-          onAccessModeChange={onAccessModeChange}
-          composerModelRef={composerModelRef}
-          sessionModel={sessionModel}
-          sessionThinkingLevel={sessionThinkingLevel}
-          variant={variant}
-        />
+        {btw.open ? (
+          <BtwForm mode={btw} modelName={modelName} provider={provider} />
+        ) : (
+          <ChatInput
+            value={inputValue}
+            onChange={setInputValue}
+            rootPath={rootPath}
+            attachments={attachments}
+            onAttachmentsChange={setAttachments}
+            onSend={onSend}
+            isGenerating={isGenerating}
+            onStop={onStop}
+            appSettings={appSettings}
+            onThinkingLevelChange={onThinkingLevelChange}
+            onModelChange={onModelChange}
+            accessMode={accessMode}
+            onAccessModeChange={onAccessModeChange}
+            composerModelRef={composerModelRef}
+            deferredComposerPickRef={deferredComposerPickRef}
+            sessionModel={sessionModel}
+            sessionThinkingLevel={sessionThinkingLevel}
+            variant={variant}
+          />
+        )}
       </div>
     </div>
   );

package/src/client/components/workspace/chat-timeline/EmptyWorkspacePrompt.tsx

@@ -40,6 +40,7 @@ interface EmptyWorkspacePromptProps {
   accessMode: ApprovalMode;
   onAccessModeChange: (mode: ApprovalMode) => void;
   composerModelRef: { current: { provider: string; modelId: string; thinkingLevel: string } | null };
+  deferredComposerPickRef: { current: { provider?: string; modelId?: string; thinkingLevel?: string } | null };
   generatingVerb?: string;
   variant?: 'desktop' | 'mobile';
 }
@@ -69,6 +70,7 @@ export function EmptyWorkspacePrompt({
   accessMode,
   onAccessModeChange,
   composerModelRef,
+  deferredComposerPickRef,
   generatingVerb,
   variant = 'desktop',
 }: EmptyWorkspacePromptProps) {
@@ -226,6 +228,7 @@ export function EmptyWorkspacePrompt({
           accessMode={accessMode}
           onAccessModeChange={onAccessModeChange}
           composerModelRef={composerModelRef}
+          deferredComposerPickRef={deferredComposerPickRef}
           variant={variant}
         />
       </div>