ompchamber 3.3.3 → 3.5.0

package/src/client/components/mobile/mobile-session-sidebar/SessionRow.tsx

@@ -1,6 +1,7 @@
-import { Archive, ArchiveRestore, Check, ChevronDown, ChevronRight, CircleQuestionMark, Loader2, Pencil } from 'lucide-preact';
+import { Check, ChevronDown, ChevronRight, CircleQuestionMark, Loader2, MoreHorizontal } from 'lucide-preact';
 import type { SessionItemData } from '@/shared/types';
 import { useInlineRename } from '@/client/hooks/ui/inline-rename';
+import { SessionActionsMenu, useRowMenu } from '@/client/components/common/session-actions-menu';
 
 export interface MobileSessionRowProps {
   session: SessionItemData;
@@ -16,6 +17,9 @@ export interface MobileSessionRowProps {
   onToggleExpand?: () => void;
   onSelect: () => void;
   onArchive: () => void;
+  /** Omitted for a session that cannot be deleted yet (a pending `new-…` chat,
+   *  which has no transcript anywhere). */
+  onDelete?: () => void;
   onRename?: (name: string) => void;
 }
 
@@ -30,6 +34,7 @@ export function MobileSessionRow({
   onToggleExpand,
   onSelect,
   onArchive,
+  onDelete,
   onRename,
 }: MobileSessionRowProps) {
   const {
@@ -41,6 +46,9 @@ export function MobileSessionRow({
     handleKeyDown,
     handleBlur,
   } = useInlineRename(session.title, onRename);
+  // One trigger for every row action; also reachable by long-press contextmenu.
+  const menu = useRowMenu();
+  const hasActions = Boolean(onRename || onArchive || onDelete);
 
   // The roster toggle is the row's LAST element, so its glyph lands in the same
   // column as the folder header's expand chevron — one vertical line of
@@ -71,76 +79,86 @@ export function MobileSessionRow({
   }
 
   return (
-    <div
-      className={`w-full rounded-lg flex items-center transition-colors ${
-        isActive ? 'bg-ink/10 font-medium text-ink' : 'hover:bg-ink/5 text-ink/85'
-      }`}
-    >
-      <button
-        type="button"
-        onClick={onSelect}
-        className="flex-1 text-left pl-2 pr-3 py-2 flex items-center justify-between min-w-0"
+    <>
+      <div
+        onContextMenu={hasActions ? menu.openAtCursor : undefined}
+        className={`w-full rounded-lg flex items-center transition-colors ${
+          isActive ? 'bg-ink/10 font-medium text-ink' : 'hover:bg-ink/5 text-ink/85'
+        }`}
       >
-        <div className="flex items-center min-w-0 pr-2">
-          {/* Status slot, 16px at the same x as the folder header's icon slot,
-              so the left column reads as one line. Waiting on an answer
-              outranks the run spinner — the spinner says work is happening,
-              the question mark says it is YOUR turn (desktop parity). */}
-          <span className="w-4 flex-shrink-0 flex items-center justify-center">
-            {awaitingInput ? (
-              <CircleQuestionMark size={13} className="text-ink/70 animate-pulse" />
-            ) : status === 'stream' ? (
-              <Loader2 size={13} className="text-ink/50 animate-spin" />
-            ) : status ? (
-              <Check size={13} className="text-ink/50" />
-            ) : null}
-          </span>
-          <span className="text-xs truncate leading-snug ml-2">{title}</span>
-        </div>
-
-        <span className="text-[11px] text-ink/45 font-mono flex-shrink-0 ml-2">{timeAgo ?? ''}</span>
-      </button>
-
-      {onRename && (
         <button
           type="button"
-          onClick={startRename}
-          title="Rename session"
-          className="flex-shrink-0 p-2 text-ink/35 hover:text-ink rounded-lg cursor-pointer"
+          onClick={onSelect}
+          className="flex-1 text-left pl-2 pr-3 py-2 flex items-center justify-between min-w-0"
         >
-          <Pencil size={14} />
+          <div className="flex items-center min-w-0 pr-2">
+            {/* Status slot, 16px at the same x as the folder header's icon slot,
+                so the left column reads as one line. Waiting on an answer
+                outranks the run spinner — the spinner says work is happening,
+                the question mark says it is YOUR turn (desktop parity). */}
+            <span className="w-4 flex-shrink-0 flex items-center justify-center">
+              {awaitingInput ? (
+                <CircleQuestionMark size={13} className="text-ink/70 animate-pulse" />
+              ) : status === 'stream' ? (
+                <Loader2 size={13} className="text-ink/50 animate-spin" />
+              ) : status ? (
+                <Check size={13} className="text-ink/50" />
+              ) : null}
+            </span>
+            <span className="text-xs truncate leading-snug ml-2">{title}</span>
+          </div>
+
+          <span className="text-[11px] text-ink/45 font-mono flex-shrink-0 ml-2">{timeAgo ?? ''}</span>
         </button>
-      )}
 
-      {/* A row WITHOUT a roster toggle still has to keep the toggle's column
-          empty, or its archive glyph would sit where the toggle is and the
-          trailing icons would step in and out row to row. This `mr-1` is what
-          reserves that column: it moves the 14px glyph's centre from x=363 to
-          x=359, the exact x the toggle uses on a row that has one. */}
-      <button
-        type="button"
-        onClick={onArchive}
-        title={session.is_archived === 1 ? 'Unarchive session' : 'Archive session'}
-        className={`flex-shrink-0 p-2 text-ink/35 hover:text-ink rounded-lg cursor-pointer ${showChevron ? '' : 'mr-1'}`}
-      >
-        {session.is_archived === 1 ? <ArchiveRestore size={14} /> : <Archive size={14} />}
-      </button>
+        {/* One trigger for rename / archive / delete, always visible: a touch
+            surface has no hover, and the always-on action buttons this replaced
+            consumed a third of a phone's row width.
+            `mr-1` only when the row has NO roster toggle — it reserves that
+            column so the trailing glyph's centre stays 19px from the row's right
+            edge whether the last element is this trigger or the chevron. Without
+            it the glyphs step in and out from row to row. */}
+        {hasActions && (
+          <button
+            type="button"
+            onClick={menu.openBelow}
+            title="Session actions"
+            aria-label="Session actions"
+            aria-haspopup="menu"
+            aria-expanded={menu.anchor !== null}
+            className={`flex-shrink-0 p-2 text-ink/35 hover:text-ink rounded-lg cursor-pointer ${showChevron ? '' : 'mr-1'}`}
+          >
+            <MoreHorizontal size={16} />
+          </button>
+        )}
 
-      {/* Last element, so its glyph sits in the folder header's chevron column.
-          `p-1.5 mr-1.5` centres a 14px glyph on that column while keeping a
-          touch-sized tap target. */}
-      {showChevron && (
-        <button
-          type="button"
-          onClick={onToggleExpand}
-          title={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
-          aria-expanded={isExpanded}
-          aria-label={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
-          className="flex-shrink-0 p-1.5 mr-1.5 flex items-center justify-center text-ink/50 hover:text-ink rounded-lg cursor-pointer"
-        >
-          {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-        </button>
+        {/* Last element, so its glyph sits in the folder header's chevron column.
+            `p-1.5 mr-1.5` centres a 14px glyph on that column while keeping a
+            touch-sized tap target. */}
+        {showChevron && (
+          <button
+            type="button"
+            onClick={onToggleExpand}
+            title={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
+            aria-expanded={isExpanded}
+            aria-label={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
+            className="flex-shrink-0 p-1.5 mr-1.5 flex items-center justify-center text-ink/50 hover:text-ink rounded-lg cursor-pointer"
+          >
+            {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+          </button>
+        )}
+      </div>
+
+      {menu.anchor && (
+        <SessionActionsMenu
+          anchor={menu.anchor}
+          isArchived={session.is_archived === 1}
+          onRename={onRename ? startRename : undefined}
+          onArchive={onArchive}
+          onDelete={onDelete}
+          onClose={menu.close}
+        />
       )}
-    </div>
+    </>
   );
 }

package/src/client/components/settings/categories/AppearanceSettings.tsx

@@ -11,7 +11,7 @@ interface AppearanceSettingsProps {
 
 export function AppearanceSettings({ settings, onUpdate }: AppearanceSettingsProps) {
   return (
-    <div className="w-full space-y-8 text-xs text-ink">
+    <div className="w-full space-y-8 text-xs text-ink pb-3">
       <section className="space-y-4">
         <div className="flex items-center space-x-2 border-b border-ink/10 pb-2">
           <Palette size={16} className="text-ink/60" />

package/src/client/components/settings/categories/ChatSettings.tsx

@@ -11,7 +11,7 @@ interface ChatSettingsProps {
 
 export function ChatSettings({ settings, onUpdate }: ChatSettingsProps) {
   return (
-    <div className="w-full space-y-7 text-xs text-ink">
+    <div className="w-full space-y-7 text-xs text-ink pb-3">
       {/* 1. Streaming Transport (WebSocket vs SSE) */}
       <ChatTransportSection settings={settings} onUpdate={onUpdate} />
 

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

@@ -31,6 +31,8 @@ export interface BtwAskCardProps {
   onNewQuestion: () => void;
   /** `✕` — leave the side-question form. */
   onClose: () => void;
+  /** Escape — cancel the running answer first. Returns whether one was running. */
+  onCancel: () => boolean;
   /** A side answer is streaming: starting over waits for it. */
   running: boolean;
   topics: BtwTopic[];
@@ -50,6 +52,7 @@ export function BtwAskCard({
   onSubmit,
   onNewQuestion,
   onClose,
+  onCancel,
   running,
   topics,
   activeTopicId,
@@ -72,7 +75,9 @@ export function BtwAskCard({
   const handleKeyDown = (event: TargetedKeyboardEvent<HTMLTextAreaElement>) => {
     if (event.key === 'Escape') {
       event.preventDefault();
-      onClose();
+      // Cancel first, close only when nothing was running — omp's Escape handler
+      // does the same, so one keypress cannot abandon a question mid-flight.
+      if (!onCancel()) onClose();
       return;
     }
     if (event.key !== 'Enter' || event.shiftKey) return;

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

@@ -48,7 +48,7 @@ function AnswerStatus({ status }: { status: BtwTurnStatus }) {
     return <div className="text-[11px] text-ink/50">Cancelled</div>;
   }
 
-  return <div className="text-[11px] text-error">{status === 'failed' ? 'Failed' : 'Interrupted'}</div>;
+  return <div className="text-[11px] text-error">{status === 'error' ? 'Error' : 'Interrupted'}</div>;
 }
 
 /** The question row for a turn, in the chat's own user-bubble shape. */

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

@@ -24,7 +24,7 @@ const STATUS_LABEL: Record<BtwTurnStatus, string> = {
   running: 'thinking…',
   complete: 'complete',
   cancelled: 'cancelled',
-  failed: 'failed',
+  error: 'error',
   interrupted: 'interrupted',
 };
 

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

@@ -23,11 +23,12 @@
  * 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.
+ * The composer card is the CHAT's own `ChatInput`, not a look-alike: 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 — and so are the model / thinking / access controls: the side
+ * child runs on the chat's model and thinking selector, without tools, so those
+ * dropdowns would change nothing. That is exactly what omp's own `/btw` offers.
  */
 
 import { useState } from 'preact/hooks';
@@ -37,7 +38,6 @@ import { BtwAskCard } from '@/client/components/workspace/btw-panel/AskCard';
 import { BtwMessages } from '@/client/components/workspace/btw-panel/Messages';
 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;
@@ -70,9 +70,15 @@ export function BtwForm({
   // the same click burst would be a second request for work already running.
   // An already-promoted topic needs no second button either — its branch
   // session exists, and the server hands that id back on a repeat promote.
+  // A topic with follow-ups cannot be promoted (a branch carries one pair), so
+  // the action is offered only where the server would accept it.
   const canPromote =
-    Boolean(mode.activeTopic) && !mode.runningTopicId && !mode.busy && !mode.activeTopic?.promotedSessionId && lastTurn?.status === 'complete';
-  const dialog = mode.dialogs[0];
+    Boolean(mode.activeTopic) &&
+    mode.activeTopic!.turns.length === 1 &&
+    !mode.runningTopicId &&
+    !mode.busy &&
+    !mode.activeTopic?.promotedSessionId &&
+    lastTurn?.status === 'complete';
   const running = Boolean(mode.runningTopicId);
 
   return (
@@ -91,6 +97,7 @@ export function BtwForm({
           onSubmit={mode.submitAsk}
           onNewQuestion={mode.resetQuestion}
           onClose={mode.exit}
+          onCancel={mode.abort}
           running={running}
           topics={mode.topics}
           activeTopicId={mode.activeTopic?.id ?? null}
@@ -107,7 +114,7 @@ export function BtwForm({
           provider={mode.activeTopic?.model?.provider ?? provider}
           providerNames={providerNames}
           modelName={mode.activeTopic?.model?.name ?? modelName}
-          thinkingLevel={mode.thinkingLevel}
+          thinkingLevel={mode.activeTopic?.thinkingLevel}
           isMobile={variant === 'mobile'}
         />
 
@@ -135,33 +142,19 @@ export function BtwForm({
           setAttachments([]);
         }}
         isGenerating={running}
-        onStop={mode.abort}
+        onStop={() => void mode.abort()}
         appSettings={appSettings}
         attachments={attachments}
         onAttachmentsChange={setAttachments}
         rootPath={rootPath}
         variant={variant}
         enablePicker={false}
+        showModel={false}
+        showThinking={false}
+        showAccess={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>
   );
 }

package/src/client/components/workspace/chat-timeline/chat-input/Toolbar.tsx

@@ -3,7 +3,7 @@ import type { AIModelOption } from '@/shared/types';
 import { ModelDropdown } from '@/client/components/workspace/model-dropdown/index';
 import { ThinkingLevelDropdown } from '@/client/components/workspace/chat-timeline/chat-input/ThinkingLevelDropdown';
 import { AccessDropdown } from '@/client/components/workspace/chat-timeline/chat-input/AccessDropdown';
-import type { ApprovalMode } from '@/shared/lib/omp/config/access-mode';
+import { DEFAULT_APPROVAL_MODE, type ApprovalMode } from '@/shared/lib/omp/config/access-mode';
 
 export interface ComposerToolbarProps {
   isMobile: boolean;
@@ -21,8 +21,12 @@ export interface ComposerToolbarProps {
   onSend: () => void;
   /** Send is blocked while no workspace context is selected or nothing is typed. */
   sendDisabled: boolean;
-  accessMode: ApprovalMode;
-  onSelectAccess: (mode: ApprovalMode) => void;
+  accessMode?: ApprovalMode;
+  onSelectAccess?: (mode: ApprovalMode) => void;
+  /** Which selectors render; all true for the chat, all false for a side question. */
+  showModel?: boolean;
+  showThinking?: boolean;
+  showAccess?: boolean;
 }
 
 /**
@@ -45,32 +49,39 @@ export function ComposerToolbar({
   onStop,
   onSend,
   sendDisabled,
-  accessMode,
+  accessMode = DEFAULT_APPROVAL_MODE,
   onSelectAccess,
+  showModel = true,
+  showThinking = true,
+  showAccess = true,
 }: ComposerToolbarProps) {
   const showStop = isGenerating && (isMobile ? Boolean(onStop) : true);
 
   return (
     <div className={`flex items-center justify-between border-t border-ink/5 bg-canvas/50 rounded-b-md ${isMobile ? 'px-2 py-2' : 'px-3 py-2'}`}>
       <div className={`flex items-center min-w-0 ${isMobile ? 'space-x-1' : 'space-x-2'}`}>
-        <ModelDropdown
-          selectedModel={selectedModel ?? undefined}
-          onSelectModel={onSelectModel}
-          onThinkingLevelChange={onThinkingLevelChange}
-          className={isMobile ? 'min-w-0 max-w-[58%]' : undefined}
-        />
+        {showModel && (
+          <ModelDropdown
+            selectedModel={selectedModel ?? undefined}
+            onSelectModel={onSelectModel}
+            onThinkingLevelChange={onThinkingLevelChange}
+            className={isMobile ? 'min-w-0 max-w-[58%]' : undefined}
+          />
+        )}
 
-        <div className="w-[1px] h-3 bg-ink/10" />
+        {showModel && showThinking && <div className="w-[1px] h-3 bg-ink/10" />}
 
-        <ThinkingLevelDropdown
-          thinkingLevels={thinkingLevels}
-          currentThinking={currentThinking}
-          onSelect={onSelectThinking}
-        />
+        {showThinking && (
+          <ThinkingLevelDropdown
+            thinkingLevels={thinkingLevels}
+            currentThinking={currentThinking}
+            onSelect={onSelectThinking}
+          />
+        )}
 
-        <div className="w-[1px] h-3 bg-ink/10" />
+        {(showModel || showThinking) && showAccess && <div className="w-[1px] h-3 bg-ink/10" />}
 
-        <AccessDropdown value={accessMode} onSelect={onSelectAccess} />
+        {showAccess && onSelectAccess && <AccessDropdown value={accessMode} onSelect={onSelectAccess} />}
       </div>
 
       <div className="flex items-center gap-1.5 flex-shrink-0">

package/src/client/components/workspace/chat-timeline/chat-input/index.tsx

@@ -2,7 +2,6 @@ import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import type { ClipboardEvent, SetStateAction } from 'preact/compat';
 import { AlertTriangle, X } from 'lucide-preact';
 import type { AIModelOption, Attachment, ModelEntry } from '@/shared/types';
-import type { ApprovalMode } from '@/shared/lib/omp/config/access-mode';
 import { ComposerToolbar } from '@/client/components/workspace/chat-timeline/chat-input/Toolbar';
 import { ComposerTextarea } from '@/client/components/common/ComposerTextarea';
 import { AttachmentToolbar } from '@/client/components/workspace/chat-timeline/chat-input/AttachmentToolbar';
@@ -13,6 +12,7 @@ import { NO_PENDING_PICK } from '@/client/hooks/chat/timeline/deferred-model';
 import { primeFileReads } from '@/client/hooks/chat/composer/file-reads';
 import { useComposerPipeline } from '@/client/hooks/chat/composer/pipeline';
 import { DropOverlay } from '@/client/components/workspace/chat-timeline/chat-input/DropOverlay';
+import type { ChatInputProps } from '@/client/components/workspace/chat-timeline/chat-input/props';
 
 export function ChatInput({ 
   value, 
@@ -33,6 +33,9 @@ export function ChatInput({
   variant = 'desktop',
   accessMode,
   onAccessModeChange,
+  showModel = true,
+  showThinking = true,
+  showAccess = true,
   enablePicker = true,
   placeholder,
   /** Written on every model/thinking pick so the send path can snapshot the
@@ -44,43 +47,7 @@ export function ChatInput({
    *  by composers that never stream (the New Chat modal), where there is
    *  nothing to defer and adoption must behave as before. */
   deferredComposerPickRef = NO_PENDING_PICK,
-}: {
-  value: string;
-  onChange: (v: string) => void;
-  onSend: (attachments: Attachment[], options?: { steering?: boolean }) => void;
-  isGenerating: boolean;
-  onStop?: () => void;
-  className?: string;
-  disabled?: boolean;
-  appSettings?: Record<string, any>;
-  attachments?: Attachment[];
-  onAttachmentsChange?: (attachments: SetStateAction<Attachment[]>) => void;
-  onThinkingLevelChange?: (level: string) => void;
-  onModelChange?: (provider: string, modelId: string) => void;
-  /** Model last used by the active session (omp `model_change` entry). */
-  sessionModel?: { provider: string; modelId: string } | null;
-  /** Thinking level last used by the active session (omp `thinking_level_change` entry). */
-  sessionThinkingLevel?: string | null;
-  rootPath?: string | null;
-  accessMode: ApprovalMode;
-  onAccessModeChange: (mode: ApprovalMode) => void;
-  /**
-   * Whether the `@` / `/` / `!` / `#` autocomplete runs. Off for the
-   * side-question form, which has no file tree, commands or skills to offer —
-   * and whose text is never run through the mention translator.
-   */
-  enablePicker?: boolean;
-  /** Overrides the default hint text (the side-question form names its own). */
-  placeholder?: string;
-  /**
-   * `mobile` sizes the composer for a phone: 16px text (iOS Safari zooms the
-   * viewport when focusing an input below that), thumb-sized send/stop
-   * targets, and Enter-to-newline instead of Enter-to-send.
-   */
-  variant?: 'desktop' | 'mobile';
-  composerModelRef: { current: { provider: string; modelId: string; thinkingLevel: string } | null };
-  deferredComposerPickRef?: { current: { provider?: string; modelId?: string; thinkingLevel?: string } | null };
-}) {
+}: ChatInputProps) {
   const [internalAttachments, setInternalAttachments] = useState<Attachment[]>([]);
 
   const attachments = externalAttachments !== undefined ? externalAttachments : internalAttachments;
@@ -303,7 +270,7 @@ export function ChatInput({
         appSettings={appSettings}
         rootPath={rootPath}
         enablePicker={enablePicker}
-        placeholder={placeholder ?? (disabled ? "Please select a workspace above to start prompting..." : "@ for files/agents; / for commands and skills; ! for shell; # for snippets (Paste images/files here)")}
+        placeholder={placeholder ?? (disabled ? "Please select a workspace above to start prompting..." : "@ for files/agents; / for commands and skills (Paste images/files here)")}
         className={`w-full bg-transparent border-none focus:outline-none resize-none text-ink placeholder-ink/40 disabled:opacity-50 disabled:cursor-not-allowed ${
           isMobile ? 'px-3 py-3 text-base min-h-[68px] max-h-40' : 'px-3 py-3 text-sm min-h-[80px]'
         }`}
@@ -329,6 +296,9 @@ export function ChatInput({
         sendDisabled={disabled || (!value.trim() && attachments.length === 0)}
         accessMode={accessMode}
         onSelectAccess={onAccessModeChange}
+        showModel={showModel}
+        showThinking={showThinking}
+        showAccess={showAccess}
       />
     </div>
   );

package/src/client/components/workspace/chat-timeline/chat-input/props.ts

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The composer's props, split from its implementation so the component file
+ * stays under the repo's per-file ceiling. Every field here is documented where
+ * it changes behaviour; the component reads them all.
+ */
+
+import type { SetStateAction } from 'preact/compat';
+import type { Attachment } from '@/shared/types';
+import type { ApprovalMode } from '@/shared/lib/omp/config/access-mode';
+
+export interface ChatInputProps {
+  value: string;
+  onChange: (v: string) => void;
+  onSend: (attachments: Attachment[], options?: { steering?: boolean }) => void;
+  isGenerating: boolean;
+  onStop?: () => void;
+  className?: string;
+  disabled?: boolean;
+  appSettings?: Record<string, any>;
+  attachments?: Attachment[];
+  onAttachmentsChange?: (attachments: SetStateAction<Attachment[]>) => void;
+  onThinkingLevelChange?: (level: string) => void;
+  onModelChange?: (provider: string, modelId: string) => void;
+  /** Model last used by the active session (omp `model_change` entry). */
+  sessionModel?: { provider: string; modelId: string } | null;
+  /** Thinking level last used by the active session (omp `thinking_level_change` entry). */
+  sessionThinkingLevel?: string | null;
+  rootPath?: string | null;
+  /** The chat session's access mode; omit it on a composer whose access
+   *  selector is off (the side-question form). */
+  accessMode?: ApprovalMode;
+  onAccessModeChange?: (mode: ApprovalMode) => void;
+  /**
+   * Which of the toolbar's selectors render. The side-question composer turns
+   * all three off: its child runs on the chat's model and thinking selector and
+   * without tools, so a control there would change nothing.
+   */
+  showModel?: boolean;
+  showThinking?: boolean;
+  showAccess?: boolean;
+  /**
+   * Whether the `@` / `/` / `!` / `#` autocomplete runs. Off for the
+   * side-question form, which has no file tree, commands or skills to offer —
+   * and whose text is never run through the mention translator.
+   */
+  enablePicker?: boolean;
+  /** Overrides the default hint text (the side-question form names its own). */
+  placeholder?: string;
+  /**
+   * `mobile` sizes the composer for a phone: 16px text (iOS Safari zooms the
+   * viewport when focusing an input below that), thumb-sized send/stop
+   * targets, and Enter-to-newline instead of Enter-to-send.
+   */
+  variant?: 'desktop' | 'mobile';
+  composerModelRef: { current: { provider: string; modelId: string; thinkingLevel: string } | null };
+  deferredComposerPickRef?: { current: { provider?: string; modelId?: string; thinkingLevel?: string } | null };
+}