@kabmo-labs/kabmo 0.0.0-stage → 0.0.1

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

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The composer's stretch decision table.
+ *
+ * What this pins is the DIFFERENCE between the two layouts, because that is
+ * where a wrong answer is invisible on one of them: a phone composer that grew
+ * "in place" would keep a 68px box, and a desktop composer that went
+ * full-screen would hide the transcript the prompt is written against. The
+ * picker's placement rides the same decision — a full-height composer has no
+ * room above it, so an upward popup would be drawn off the viewport.
+ *
+ * The keyboard lift is the third: it must be applied on a phone (the soft
+ * keyboard does not shrink the layout viewport, and there is no hardware Enter
+ * to fall back on) and must NOT be applied on a desktop, where there is no
+ * keyboard to lift over.
+ */
+
+import { describe, expect, test } from 'bun:test';
+
+import { composerExpansion } from '@/client/components/workspace/chat-timeline/chat-input/expansion';
+
+const base = { expanded: false, isDragging: false, keyboardInset: 0 } as const;
+
+describe('composerExpansion docked', () => {
+  test('a phone keeps its touch-sized box and opens the popup upward', () => {
+    const layout = composerExpansion({ ...base, variant: 'mobile' });
+    expect(layout.cardPositionClass).toBe('relative');
+    expect(layout.textareaClass).toContain('min-h-[68px]');
+    expect(layout.textareaClass).toContain('text-base');
+    expect(layout.pickerPlacement).toBe('up');
+    expect(layout.style).toBeUndefined();
+  });
+
+  test('a desktop keeps its 80px box', () => {
+    const layout = composerExpansion({ ...base, variant: 'desktop' });
+    expect(layout.textareaClass).toContain('min-h-[80px]');
+    expect(layout.textareaClass).toContain('text-sm');
+    expect(layout.pickerPlacement).toBe('up');
+  });
+
+  test('a file drag is what the frame border reports', () => {
+    expect(composerExpansion({ ...base, variant: 'desktop' }).cardClass).toContain('border-ink/20');
+    expect(composerExpansion({ ...base, variant: 'desktop', isDragging: true }).cardClass).toContain('border-ink/40');
+  });
+});
+
+describe('composerExpansion stretched', () => {
+  test('a phone takes the viewport, and its popup opens over the draft', () => {
+    const layout = composerExpansion({ ...base, expanded: true, variant: 'mobile' });
+    // Position is its own field: a `relative` in the base list would WIN over
+    // this `fixed` (Tailwind orders `static, fixed, absolute, relative, sticky`).
+    expect(layout.cardPositionClass).toBe('fixed inset-0 z-40');
+    expect(layout.cardClass).not.toContain('relative');
+    // No frame on a full-screen surface — and `border-0` rather than
+    // `border-transparent`, which would come back as an ink hairline on focus.
+    expect(layout.cardClass).toContain('border-0');
+    expect(layout.cardClass).not.toContain('focus-within:border-ink');
+    expect(layout.textareaClass).toContain('h-full');
+    expect(layout.wrapperClass).toBe('flex-1 min-h-0');
+    expect(layout.pickerPlacement).toBe('over');
+  });
+
+  test('a desktop grows in place and keeps the dock width', () => {
+    const layout = composerExpansion({ ...base, expanded: true, variant: 'desktop' });
+    expect(layout.cardPositionClass).toBe('relative');
+    expect(layout.textareaClass).toContain('min-h-[38vh]');
+    expect(layout.wrapperClass).toBe('');
+    // The popup still has the chat above it.
+    expect(layout.pickerPlacement).toBe('up');
+  });
+
+  test('the keyboard lift rides the phone card only', () => {
+    const phone = composerExpansion({ ...base, expanded: true, variant: 'mobile', keyboardInset: 336 });
+    expect(phone.style?.paddingBottom).toBe('336px');
+    // No keyboard: the home indicator's inset is the floor.
+    const idle = composerExpansion({ ...base, expanded: true, variant: 'mobile' });
+    expect(idle.style?.paddingBottom).toBe('env(safe-area-inset-bottom, 0px)');
+
+    const desktop = composerExpansion({ ...base, expanded: true, variant: 'desktop', keyboardInset: 336 });
+    expect(desktop.style).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,143 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The composer's stretched layout — what "bigger" means on each layout.
+ *
+ * One control, two answers, and the difference is the LAYOUT, not a size:
+ *
+ *  - **Mobile** takes the whole viewport. The chat is a single column there and
+ *    the composer already owns the bottom of it, so stretching it can only
+ *    cover the transcript — and that is the point: a phone keyboard plus a
+ *    docked 68px box is a four-line window onto a prompt that is often longer.
+ *    The card is `fixed inset-0` at `z-40`, which keeps every dialog ABOVE it
+ *    (extension/ask `z-50`, goal and undo modals `z-[60]`, plan review
+ *    `z-[70]`, toasts `z-[200]`) — a stretched composer that covered a blocking
+ *    dialog would make the agent's question unanswerable.
+ *  - **Desktop** grows IN PLACE. The chat panel is a column beside the editor
+ *    and the right panel, so a full-screen composer would hide the conversation
+ *    the prompt is being written against. The textarea grows to a share of the
+ *    viewport and the card keeps the width its dock already gives it (which is
+ *    the panel's own width, up to the dock's cap) — proportional, not full
+ *    screen.
+ *
+ * Three smaller decisions ride along, and each is why this is a module rather
+ * than a ternary in the component:
+ *
+ *  - **The popup flips over the draft on mobile.** `ComposerPicker` opens
+ *    UPWARD (`bottom-full`) because a docked composer has the whole chat above
+ *    it. A full-height composer does not: its top edge is the screen's top, so
+ *    an upward popup would be drawn off the viewport with nothing to scroll
+ *    back. Over the top of the draft is the only placement with room.
+ *  - **The keyboard lift beats the home indicator.** Mobile browsers do not
+ *    shrink the layout viewport for the soft keyboard, so a bottom-anchored
+ *    card keeps its bottom edge under the keys — including the toolbar and the
+ *    Send button, and a phone has no hardware Enter to fall back on. The lift
+ *    is the panel's own overlap with the visible area (`useKeyboardInset`),
+ *    applied as padding; with no keyboard the padding is the home indicator's
+ *    inset instead.
+ *  - **A send collapses the mobile stretch.** The stretched composer covers the
+ *    transcript, so staying stretched would hide the answer being streamed. On
+ *    desktop it stays: the chat is visible either way, and a composer that
+ *    snapped back on every send would move the box the user is typing in.
+ */
+
+import type { CSSProperties } from 'preact';
+import type { ComposerPickerPlacement } from '@/client/components/common/ComposerPicker';
+
+export type ComposerVariant = 'desktop' | 'mobile';
+
+export interface ComposerExpansionInput {
+  variant: ComposerVariant;
+  expanded: boolean;
+  /** Whether a file drag currently hovers the composer (the frame's border). */
+  isDragging: boolean;
+  /**
+   * The soft keyboard's overlap with the viewport's bottom edge, in px, from
+   * `useKeyboardInset`. 0 when there is no keyboard (or no `visualViewport`).
+   */
+  keyboardInset: number;
+}
+
+export interface ComposerExpansion {
+  /** Frame classes for the card: border, radius, background, elevation. */
+  cardClass: string;
+  /**
+   * The card's POSITION, and it is a field of its own because Tailwind's
+   * position utilities are ordered `static, fixed, absolute, relative, sticky`
+   * — so a `relative` left in the base class list WINS over a `fixed` added
+   * later, whatever order they are written in. Measured: the phone card stayed
+   * in the dock with `position: relative` and the `fixed inset-0` ignored.
+   */
+  cardPositionClass: string;
+  /** Classes ADDED to the card's own layout (`@container flex …`). */
+  cardLayoutClass: string;
+  /** The textarea's size classes for this state. */
+  textareaClass: string;
+  /** Classes for the textarea's WRAPPER — the element the popup anchors to. */
+  wrapperClass: string;
+  pickerPlacement: ComposerPickerPlacement;
+  /** Inline style for the card; undefined when there is nothing to apply. */
+  style: CSSProperties | undefined;
+}
+
+export function composerExpansion({
+  variant,
+  expanded,
+  isDragging,
+  keyboardInset,
+}: ComposerExpansionInput): ComposerExpansion {
+  const mobile = variant === 'mobile';
+  const border = isDragging ? 'border-ink/40' : 'border-ink/20 focus-within:border-ink';
+
+  if (!expanded) {
+    return {
+      cardClass: `border rounded-md bg-paper shadow-sm ${border}`,
+      cardPositionClass: 'relative',
+      cardLayoutClass: '',
+      textareaClass: mobile
+        ? 'px-3 py-3 text-base min-h-[68px] max-h-40'
+        : 'px-3 py-3 text-sm min-h-[80px]',
+      wrapperClass: '',
+      pickerPlacement: 'up',
+      style: undefined,
+    };
+  }
+
+  if (mobile) {
+    return {
+      // `border-0`, not `border-transparent`: the collapsed frame's
+      // `focus-within:border-ink` only sets the border COLOUR, so a transparent
+      // border would come back as an ink hairline around the screen the moment
+      // the textarea takes focus — which is the state this opens in.
+      cardClass: 'border-0 rounded-none bg-paper shadow-none',
+      cardPositionClass: 'fixed inset-0 z-40',
+      cardLayoutClass: '',
+      textareaClass: 'h-full px-3 py-3 text-base',
+      wrapperClass: 'flex-1 min-h-0',
+      pickerPlacement: 'over',
+      style: {
+        paddingTop: 'env(safe-area-inset-top, 0px)',
+        // The keyboard's overlap is measured, so it is exact; the indicator's
+        // inset is only a fallback for the no-keyboard state.
+        paddingBottom: keyboardInset > 0 ? `${keyboardInset}px` : 'env(safe-area-inset-bottom, 0px)',
+      },
+    };
+  }
+
+  return {
+    cardClass: `border rounded-md bg-paper shadow-lg ${border}`,
+    cardPositionClass: 'relative',
+    cardLayoutClass: '',
+    // A share of the viewport, not of the panel: the dock sits at the bottom of
+    // a column whose height is the window's, so this is the same proportion at
+    // any panel width. It is a `min-h`, so the box is exactly this tall until
+    // the content scrolls inside it.
+    textareaClass: 'px-3 py-3 text-sm min-h-[38vh]',
+    wrapperClass: '',
+    pickerPlacement: 'up',
+    style: undefined,
+  };
+}

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

@@ -0,0 +1,283 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import type { ClipboardEvent, SetStateAction } from 'preact/compat';
+import { AlertTriangle, X } from 'lucide-preact';
+import type { Attachment } from '@/shared/types';
+import { ComposerToolbar } from '@/client/components/workspace/chat-timeline/chat-input/Toolbar';
+import { VoiceNotice } from '@/client/components/workspace/chat-timeline/chat-input/VoiceNotice';
+import { ComposerTextarea } from '@/client/components/common/ComposerTextarea';
+import { usePublishComposerState } from '@/client/hooks/chat/composer/publish-state';
+import { useModelSelection } from '@/client/hooks/chat/composer/model-selection';
+import { AttachmentToolbar } from '@/client/components/workspace/chat-timeline/chat-input/AttachmentToolbar';
+import { NO_PENDING_PICK } from '@/client/hooks/chat/timeline/deferred-model';
+import { useAutoGrow } from '@/client/hooks/chat/composer/auto-grow';
+import { useVoiceInput } from '@/client/hooks/chat/composer/voice-input';
+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 { GoalSurfaces } from '@/client/components/workspace/chat-timeline/chat-input/GoalSurfaces';
+import { normalizeGoalBudget } from '@/shared/lib/omp/mode/budget';
+import { readKabmoSetting } from '@/shared/lib/settings/client';
+import { useKeyboardInset } from '@/client/hooks/ui/keyboard-inset';
+import { composerExpansion } from '@/client/components/workspace/chat-timeline/chat-input/expansion';
+import type { ChatInputProps } from '@/client/components/workspace/chat-timeline/chat-input/props';
+
+export function ChatInput({ 
+  value, 
+  onChange, 
+  sessionId, 
+  onSend, 
+  isGenerating,
+  onStop,
+  className = '',
+  disabled = false,
+  appSettings = {},
+  attachments: externalAttachments,
+  onAttachmentsChange,
+  onThinkingLevelChange,
+  onModelChange,
+  sessionModel,
+  sessionThinkingLevel,
+  rootPath,
+  variant = 'desktop',
+  accessMode,
+  onAccessModeChange,
+  modes,
+  showModel = true,
+  showThinking = true,
+  showAccess = true,
+  enablePicker = true,
+  placeholder,
+  autoGrow,
+  /** Mirrors the pick so the send path queues it without reading state. */
+  composerModelRef,
+  /** Pending pick from a previous turn; omits for non-streaming composers. */
+  deferredComposerPickRef = NO_PENDING_PICK,
+  chatRunning,
+  expandable = false,
+}: ChatInputProps) {
+  const [internalAttachments, setInternalAttachments] = useState<Attachment[]>([]);
+  // The Goal modal is owned here, not by the toolbar: the button is a toggle,
+  // and the modal it opens needs the same `modes` slice the toolbar got.
+  const [goalModalOpen, setGoalModalOpen] = useState(false);
+  // Stretched: on a phone the composer takes the viewport, on a desktop its
+  // textarea grows to a share of it. Local, like the Goal modal's flag — a
+  // layout preference for one draft, not a setting, and the URL is what carries
+  // the session it belongs to.
+  const [expanded, setExpanded] = useState(false);
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  const { selectedModel, setSelectedModel, thinkingLevels, currentThinking, selectThinking } = useModelSelection({
+    composerModelRef,
+    sessionModel,
+    sessionThinkingLevel,
+    deferredComposerPickRef,
+    onThinkingLevelChange,
+  });
+
+  const attachments = externalAttachments !== undefined ? externalAttachments : internalAttachments;
+  const setAttachments = (updater: SetStateAction<Attachment[]>) => {
+    if (onAttachmentsChange) {
+      // Forward the updater untouched: onAttachmentsChange is a state setter,
+      // so functional updates stay functional. Evaluating them here against
+      // the closure `attachments` would resurrect stale state (e.g. the async
+      // FileReader callback wiping the just-added image).
+      onAttachmentsChange(updater);
+    } else {
+      setInternalAttachments(updater);
+    }
+  };
+
+
+  const handlePaste = (e: ClipboardEvent<HTMLTextAreaElement>) => {
+    const clipboard = e.clipboardData;
+    if (!clipboard) return;
+    if (clipboard.files.length > 0) {
+      e.preventDefault();
+      const files = Array.from(clipboard.files);
+      // Same rule as a drop: the clipboard's file permission is released when
+      // this handler returns, so the reads are started here, in its tick.
+      acceptFiles(files, false, [], primeFileReads(files));
+    }
+  };
+
+  // Attach-and-send pipeline: drop handling, the inline notice, and the send
+  // guard all live in the hook, because a drop registers files before this
+  // component re-renders and the send decision cannot read a stale prop.
+  const { notice, dismissNotice, isDragging, dropProps, acceptFiles, removeAttachment, submit } = useComposerPipeline({
+    attachments,
+    setAttachments,
+    value,
+    disabled,
+    rootPath,
+    onSend,
+  });
+
+  // Publishes this composer's state to the plugin kit, and gives the kit a way
+  // to write into it (through `onChange`, never the DOM).
+  const { onTextareaReady } = usePublishComposerState({
+    value,
+    onChange,
+    isSubmitting: isGenerating,
+    sessionId: sessionId ?? null,
+  });
+
+  const isMobile = variant === 'mobile';
+  // A modal composer sizes itself to its content; the chat's keeps its fixed
+  // box (see `autoGrow`). The hook is unconditional — its ref is simply unused
+  // when growth is off.
+  const growRef = useAutoGrow({
+    value,
+    minHeightPx: autoGrow?.minHeightPx ?? 0,
+    maxHeightPx: autoGrow?.maxHeightPx ?? Number.POSITIVE_INFINITY,
+  });
+
+  // The soft keyboard's overlap with the viewport. Measured ONLY while
+  // stretched: that is the one state where the card is bottom-anchored to the
+  // screen and would otherwise sit behind the keys (a phone has no hardware
+  // Enter, so the covered toolbar would be the only way to send). Docked, the
+  // card is inside the chat's own column and the measurement is unused.
+  const keyboardInset = useKeyboardInset(cardRef, expandable && expanded);
+  const layout = composerExpansion({ variant, expanded, isDragging, keyboardInset });
+
+  // Escape returns to the docked composer. Bound to the document rather than to
+  // the textarea so it works while the picker has focus — the picker consumes
+  // Escape only while it is OPEN, and a stretched composer with a closed popup
+  // would otherwise have no keyboard way out.
+  useEffect(() => {
+    if (!expanded) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setExpanded(false);
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [expanded]);
+
+  // A send on a phone collapses the stretch: it covers the transcript, so
+  // staying stretched would hide the answer being streamed. On a desktop the
+  // chat is visible either way and the box stays where the user put it.
+  const handleSubmit = (options?: { steering?: boolean }) => {
+    if (isMobile) setExpanded(false);
+    submit(options);
+  };
+
+  // Browser dictation, delegated to omp's own local STT worker. The hook owns
+  // capture + the socket; this component owns where the text lands and the
+  // status line while a first-run model download is still going.
+  const {
+    voiceSupported,
+    voiceListening,
+    voiceBusy,
+    voiceStatus,
+    handleVoiceToggle,
+    displayedVoiceError,
+  } = useVoiceInput((transcript) => {
+    // Append rather than replace: a dictation into a composer that already
+    // holds a draft must not discard what the user typed.
+    const existing = value.trim();
+    onChange(existing ? `${existing} ${transcript}` : transcript);
+  });
+
+  return (
+    <div
+      ref={cardRef}
+      className={`@container transition-colors flex flex-col ${layout.cardPositionClass} ${layout.cardClass} ${layout.cardLayoutClass} ${className}`}
+      style={layout.style}
+      {...dropProps}
+    >
+      <DropOverlay visible={isDragging} />
+
+      {/* Goal mode strip describes the turn the next message will join. */}
+      <GoalSurfaces
+        modes={modes}
+        running={chatRunning ?? isGenerating}
+        open={goalModalOpen}
+        defaultBudget={normalizeGoalBudget(readKabmoSetting<number>('goalDefaultBudget', appSettings))}
+        onOpen={() => setGoalModalOpen(true)}
+        onClose={() => setGoalModalOpen(false)}
+      />
+
+      <AttachmentToolbar
+        attachments={attachments}
+        onFilesSelected={(files) => acceptFiles(files)}
+        onRemove={removeAttachment}
+        // The phone hosts the mode toggles here; the desktop keeps them in the
+        // bottom toolbar, which has room. `showAccess` gates both hosts.
+        modes={isMobile && showAccess ? modes : undefined}
+        onOpenGoal={() => setGoalModalOpen(true)}
+        // Only the chat's own composer stretches; a caller that owns its size
+        // (the New Chat modal) gets no control and cannot be stretched.
+        expanded={expandable ? expanded : undefined}
+        onToggleExpand={expandable ? () => setExpanded((prev) => !prev) : undefined}
+      />
+
+      {/* Refused plan/goal command notice. */}
+      {(notice || modes?.error) && (
+        <div className="flex items-start gap-1.5 border-b border-error/20 bg-error/5 px-3 py-1.5 text-[11px] text-error">
+          <AlertTriangle size={11} className="mt-0.5 shrink-0" />
+          <span className="min-w-0 flex-1 break-words">{notice || modes?.error}</span>
+          <button
+            type="button"
+            onClick={() => (notice ? dismissNotice() : modes?.clearError())}
+            className="shrink-0 text-error/60 hover:text-error transition-colors"
+            title="Dismiss"
+          >
+            <X size={11} />
+          </button>
+        </div>
+      )}
+
+      {/* Textarea */}
+      <ComposerTextarea
+        value={value}
+        onChange={onChange}
+        onSend={handleSubmit}
+        disabled={disabled}
+        appSettings={appSettings}
+        rootPath={rootPath}
+        enablePicker={enablePicker}
+        placement={layout.pickerPlacement}
+        wrapperClassName={layout.wrapperClass}
+        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 ${layout.textareaClass}`}
+        onPaste={handlePaste}
+        variant={variant}
+        textareaRef={autoGrow ? growRef : undefined}
+        onReady={onTextareaReady}
+      />
+
+      {/* Dictation progress / failure, above the toolbar that owns the mic. */}
+      <VoiceNotice status={voiceStatus} error={displayedVoiceError} />
+
+      {/* Bottom Config Toolbar */}
+      <ComposerToolbar
+        isMobile={isMobile}
+        selectedModel={selectedModel}
+        onSelectModel={(model) => {
+          setSelectedModel(model);
+          onModelChange?.(model.provider, model.id);
+        }}
+        thinkingLevels={thinkingLevels}
+        currentThinking={currentThinking}
+        onSelectThinking={selectThinking}
+        onThinkingLevelChange={onThinkingLevelChange}
+        isGenerating={isGenerating}
+        chatRunning={chatRunning}
+        onStop={onStop}
+        onSend={() => handleSubmit()}
+        sendDisabled={disabled || (!value.trim() && attachments.length === 0)}
+        accessMode={accessMode}
+        onSelectAccess={onAccessModeChange}
+        showModel={showModel}
+        showThinking={showThinking}
+        showAccess={showAccess}
+        modes={modes}
+        onOpenGoal={() => setGoalModalOpen(true)}
+        voiceSupported={voiceSupported}
+        voiceListening={voiceListening}
+        voiceBusy={voiceBusy}
+        onVoiceToggle={handleVoiceToggle}
+        text={value}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The plan/goal slice of the composer's props.
+ *
+ * Its own module because three components thread it (the toolbar, the input and
+ * the dock) and each one only passes it through — a shared shape keeps the
+ * signature identical at every hop, so a field added for the modal cannot be
+ * dropped by an intermediate component.
+ */
+
+import type { GoalContinuation, GoalRecord } from '@/shared/lib/omp/mode/types';
+import type { GoalAction } from '@/client/hooks/chat/timeline/modes';
+
+export interface ComposerModes {
+  plan: boolean;
+  goal: boolean;
+  /** A goal the chat still owns (see `ChatTimelineModes.goalOpen`): what the
+   *  Goal button's pressed state and the modal's view are decided from. */
+  goalOpen: boolean;
+  goalRecord: GoalRecord | null;
+  /** The child's last automatic goal turn, or null when it has not reported
+   *  one. Read by the goal strip above the composer, not by the toolbar. */
+  goalContinuation: GoalContinuation | null;
+  /** The loop is deciding whether to open another automatic turn. */
+  goalEvaluating: boolean;
+  pending: boolean;
+  /** Plan is hidden while Goal is on: omp refuses to enter one mode while the
+   *  other is active, so offering both would present a button whose only
+   *  outcome is a refusal. */
+  planAvailable: boolean;
+  /**
+   * The last mode-command refusal, from either side of the wire (the route's
+   * error, or a `KABMO_MODE_ERROR` from the extension). The composer renders
+   * it, because a command that failed silently left the toggle pressed over a
+   * mode the child is not in.
+   */
+  error: string | null;
+  /** Clear the refusal once it has been read. */
+  clearError: () => void;
+  onTogglePlan: (enabled: boolean) => void;
+  /** The Goal modal's outcome. Opening the modal is the TOOLBAR's business
+   *  (the modal itself lives in `ChatInput`), so that handler is passed
+   *  separately and does not belong to the shared mode shape. */
+  onGoalAction: (action: GoalAction) => void;
+}

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

@@ -0,0 +1,100 @@
+/**
+ * @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';
+import type { ComposerModes } from '@/client/components/workspace/chat-timeline/chat-input/modes-props';
+
+export interface ChatInputProps {
+  value: string;
+  /**
+   * The session this composer writes to, or null on a composer with no session
+   * yet (the New Chat modal). Published to the plugin kit as the composer's
+   * `scope`, so a plugin knows which conversation its draft belongs to.
+   */
+  sessionId?: string | null;
+  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;
+  /**
+   * Which plan/goal modes the CHAT is in, plus the handlers that change them.
+   * Omitted by every composer that does not own a chat turn — the side-question
+   * form runs on the parent's modes and must not offer its own, and the New Chat
+   * modal has no session to change them on yet.
+   */
+  modes?: ComposerModes;
+  /**
+   * 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';
+  /**
+   * Grow the textarea with its content, up to a ceiling, instead of keeping a
+   * fixed box that scrolls. On for a modal composer (the card is the only thing
+   * on screen, so growing it costs nothing); off for the chat, where a growing
+   * composer would push the conversation around under the reader.
+   */
+  autoGrow?: { minHeightPx: number; maxHeightPx: number };
+  composerModelRef: { current: { provider: string; modelId: string; thinkingLevel: string } | null };
+  deferredComposerPickRef?: { current: { provider?: string; modelId?: string; thinkingLevel?: string } | null };
+  /**
+   * The CHAT-level "a run is in flight" flag (`timelineRunning`), for rows that
+   * describe the run rather than this draft — the goal strip and the Stop
+   * button. Falls back to `isGenerating`, which is this client's own run: a
+   * composer that only knows what it started would show an idle goal and no
+   * way to stop a turn, while another tab's run streams — the same
+   * disagreement `timelineRunning` exists to prevent.
+   */
+  chatRunning?: boolean;
+  /**
+   * Whether the composer offers its stretch control. On for the chat's own
+   * composer, which is docked into a column and can afford to cover it; off for
+   * a composer whose size the CALLER owns — the New Chat modal has its own
+   * maximize (it stretches the card, not the composer), and the side-question
+   * form lives inside a panel that is already sized to the answers beside it.
+   */
+  expandable?: boolean;
+}