@robota-sdk/agent-ui-terminal 3.0.0-beta.81

package/src/ExecutionWorkspaceSwitcher.tsx

@@ -0,0 +1,213 @@
+import { Box } from 'ink';
+import React from 'react';
+
+import { useWorkspaceSwitcherSelection } from './execution-workspace-switcher-selection.js';
+import { formatExecutionWorkspaceEntryRow } from './execution-workspace-view-model.js';
+import { useNumberedSelection } from './hooks/useNumberedSelection.js';
+import {
+  KeyHintFooter,
+  SELECTION_INDICATOR,
+  SELECTION_INDICATOR_NONE,
+  type IKeyHint,
+} from './key-hint-footer.js';
+import { useKeybindingActions, useKeybindingHints } from './keybindings/keybindings-context.js';
+import { formatNumberedSelectionPrompt, numberedRowPrefix } from './numbered-list.js';
+import { Text } from './SafeText.js';
+import { useScreenReader } from './screen-reader-context.js';
+import { statusGlyphColor } from './status-glyph.js';
+import { usePalette } from './theme/index.js';
+
+import type {
+  IExecutionWorkspaceEntry,
+  IExecutionWorkspaceSnapshot,
+} from '@robota-sdk/agent-interface-execution';
+
+/** Footer for the workspace switcher (order: navigate → primary → dismiss). */
+export const EXECUTION_WORKSPACE_SWITCHER_FOOTER_HINTS: readonly IKeyHint[] = [
+  { keys: '↑↓', label: 'Navigate' },
+  { keys: 'Enter', label: 'Switch' },
+  { keys: 'Ctrl+B/Esc', label: 'Close' },
+];
+
+/**
+ * CLI-1994: the extra hint shown only while a forked entry is focused. Appended rather than always
+ * present, because a key that does nothing on most rows reads as a broken key, not an unused one.
+ */
+export const EXECUTION_WORKSPACE_ATTACH_HINT: IKeyHint = { keys: 'a', label: 'Attach' };
+
+interface IProps {
+  snapshot: IExecutionWorkspaceSnapshot | null;
+  selectedEntryId?: string;
+  onSelect: (entryId: string) => void;
+  onClose: () => void;
+  /**
+   * CLI-1994: attach to the focused entry's forked session — a VIEW switch onto that record, never
+   * a merge. Absent when the surface cannot switch sessions; the control is then not offered.
+   */
+  onAttach?: (entry: IExecutionWorkspaceEntry) => void;
+}
+
+/** CLI-1994: `attach` is offered by the projection; the switcher only reads what it was handed. */
+function offersAttach(entry: IExecutionWorkspaceEntry | undefined): boolean {
+  return entry?.controls.includes('attach') === true;
+}
+
+export default function ExecutionWorkspaceSwitcher({
+  snapshot,
+  selectedEntryId,
+  onSelect,
+  onClose,
+  onAttach,
+}: IProps): React.ReactElement {
+  const palette = usePalette();
+  const entries = [...(snapshot?.entries ?? [])];
+  const { normalized, visibleEntries, applyAction } = useWorkspaceSwitcherSelection({
+    entries,
+    selectedEntryId,
+    onSelect,
+    onClose,
+  });
+  const focusedEntry = entries[normalized.selectedIndex];
+  const canAttach = onAttach !== undefined && offersAttach(focusedEntry);
+
+  // CLI-2004: the switcher is an arrow-key menu, so the mode gives it numbers and a typed answer.
+  const screenReader = useScreenReader();
+  const numbered = useNumberedSelection({
+    enabled: screenReader && entries.length > 0,
+    itemCount: entries.length,
+    cancellable: true,
+    onSelect: (index) => {
+      const entry = entries[index];
+      if (entry) onSelect(entry.id);
+    },
+    onCancel: onClose,
+  });
+
+  useKeybindingActions(
+    'workspace-switcher',
+    (actions) => {
+      for (const action of actions) {
+        if (action === 'attach' && canAttach && focusedEntry) {
+          // Attaching replaces what the terminal is looking at, so the switcher has nothing left to
+          // switch between — it closes itself rather than making every caller remember to.
+          onAttach(focusedEntry);
+          onClose();
+        } else if (action === 'previous' || action === 'next' || action === 'select') {
+          applyAction(action);
+        } else if (action === 'close') {
+          applyAction('cancel');
+        }
+      }
+    },
+    { isActive: !screenReader },
+  );
+  const footerHints = useKeybindingHints('workspace-switcher', [
+    [['previous', 'next'], 'Navigate'],
+    ['select', 'Switch'],
+    ['close', 'Close'],
+  ]);
+  const attachHint = useKeybindingHints('workspace-switcher', [['attach', 'Attach']]);
+
+  return (
+    <Box
+      flexDirection="column"
+      {...(screenReader
+        ? {}
+        : { borderStyle: 'round' as const, borderColor: palette.border.focused })}
+      paddingX={1}
+    >
+      <Text color={palette.text.accent} bold>
+        Execution workspace
+      </Text>
+      <Box flexDirection="column" marginTop={1}>
+        {visibleEntries.length === 0 ? (
+          <Text dimColor>No workspace entries</Text>
+        ) : screenReader ? (
+          entries.map((entry, index) => (
+            <ExecutionWorkspaceSwitcherRow
+              key={entry.id}
+              entry={entry}
+              isFocused={false}
+              selectedEntryId={selectedEntryId}
+              rowNumber={index}
+            />
+          ))
+        ) : (
+          visibleEntries.map((entry, index) => (
+            <ExecutionWorkspaceSwitcherRow
+              key={entry.id}
+              entry={entry}
+              isFocused={normalized.scrollOffset + index === normalized.selectedIndex}
+              selectedEntryId={selectedEntryId}
+            />
+          ))
+        )}
+      </Box>
+      {screenReader ? (
+        <ScreenReaderSelectionPrompt
+          itemCount={entries.length}
+          buffer={numbered.buffer}
+          invalid={numbered.invalid}
+        />
+      ) : (
+        <KeyHintFooter hints={canAttach ? [...footerHints, ...attachHint] : footerHints} />
+      )}
+    </Box>
+  );
+}
+
+/** The typed-selection prompt, re-printed verbatim after an out-of-range answer. */
+function ScreenReaderSelectionPrompt({
+  itemCount,
+  buffer,
+  invalid,
+}: {
+  itemCount: number;
+  buffer: string;
+  invalid: boolean;
+}): React.ReactElement {
+  const prompt = formatNumberedSelectionPrompt(itemCount, true);
+  return (
+    <Box flexDirection="column">
+      <Text>
+        {prompt}
+        {buffer.length > 0 ? ` ${buffer}` : ''}
+      </Text>
+      {invalid && <Text>{prompt}</Text>}
+    </Box>
+  );
+}
+
+function ExecutionWorkspaceSwitcherRow({
+  entry,
+  isFocused,
+  selectedEntryId,
+  rowNumber,
+}: {
+  entry: IExecutionWorkspaceEntry;
+  isFocused: boolean;
+  selectedEntryId?: string;
+  rowNumber?: number;
+}): React.ReactElement {
+  const palette = usePalette();
+  const row = formatExecutionWorkspaceEntryRow(entry, { selectedEntryId });
+  return (
+    <Text>
+      <Text color={isFocused ? palette.text.accent : undefined} bold={isFocused}>
+        {rowNumber !== undefined
+          ? numberedRowPrefix(rowNumber)
+          : isFocused
+            ? SELECTION_INDICATOR
+            : SELECTION_INDICATOR_NONE}
+      </Text>
+      <Text color={statusGlyphColor(palette, row.statusKind)}>{`${row.radio} ${row.state}`}</Text>
+      <Text
+        color={isFocused ? palette.text.accent : undefined}
+        bold={isFocused}
+      >{` ${row.title}`}</Text>
+      <Text dimColor>{` · ${row.statusLabel}`}</Text>
+      {row.subtitle ? <Text dimColor>{` · ${row.subtitle}`}</Text> : null}
+      {row.preview ? <Text dimColor>{` · ${row.preview}`}</Text> : null}
+    </Text>
+  );
+}

package/src/HistorySearchOverlay.tsx

@@ -0,0 +1,150 @@
+/**
+ * SCREEN-1993 — the reverse prompt-history search overlay (Ctrl+R), rendered inside the input area
+ * on the `SlashAutocomplete` pattern. The query line, the scope label, the matches newest-first with
+ * the query highlighted, the load state and the footer of live keys.
+ *
+ * The highlight survives `NO_COLOR`: when the process emits no colour, a matched run is wrapped in
+ * visible brackets instead of relying on an SGR attribute nothing would render.
+ */
+import { Box } from 'ink';
+import React from 'react';
+
+import { splitByRanges, type IHistorySearchMatch } from './history-search/history-search-flow.js';
+import {
+  KeyHintFooter,
+  SELECTION_INDICATOR,
+  SELECTION_INDICATOR_NONE,
+  type IKeyHint,
+} from './key-hint-footer.js';
+import { useKeybindingHints } from './keybindings/keybindings-context.js';
+import { numberedRowPrefix } from './numbered-list.js';
+import { Text } from './SafeText.js';
+import { useScreenReader } from './screen-reader-context.js';
+import { isInteractiveColorTerminal } from './terminal-capabilities.js';
+import { usePalette } from './theme/index.js';
+
+import type { IHistorySearchView } from './history-search/useHistorySearch.js';
+
+/** Footer for the overlay, in the default bindings. */
+export const HISTORY_SEARCH_FOOTER_HINTS: readonly IKeyHint[] = [
+  { keys: '↑↓', label: 'Navigate' },
+  { keys: 'Ctrl+S', label: 'Scope' },
+  { keys: 'Enter/Tab', label: 'Insert' },
+  { keys: 'Ctrl+E', label: 'Run' },
+  { keys: 'Esc', label: 'Close' },
+];
+
+const MAX_VISIBLE = 8;
+
+function scrollOffset(selectedIndex: number, total: number): number {
+  if (total <= MAX_VISIBLE || selectedIndex < MAX_VISIBLE) return 0;
+  return Math.min(selectedIndex - MAX_VISIBLE + 1, total - MAX_VISIBLE);
+}
+
+/** `1 unreadable line skipped` / `3 unreadable lines skipped`. */
+function formatSkippedLines(count: number): string {
+  return `${count} unreadable ${count === 1 ? 'line' : 'lines'} skipped`;
+}
+
+function MatchRow(props: {
+  readonly match: IHistorySearchMatch;
+  readonly selected: boolean;
+  readonly rowNumber: number | undefined;
+  readonly color: boolean;
+}): React.ReactElement {
+  const palette = usePalette();
+  const { match, selected, rowNumber, color } = props;
+  const indicator =
+    rowNumber !== undefined
+      ? numberedRowPrefix(rowNumber)
+      : selected
+        ? SELECTION_INDICATOR
+        : SELECTION_INDICATOR_NONE;
+  // A stored prompt may span lines; one visible glyph per newline keeps the row a row and the
+  // match ranges aligned (same length).
+  const runs = splitByRanges(
+    match.entry.text.replace(/\r\n|[\r\n]/gu, (br) => (br.length === 2 ? ' ↵' : '↵')),
+    match.ranges,
+  );
+  return (
+    <Text
+      color={selected ? palette.text.accent : undefined}
+      dimColor={!selected}
+      wrap="truncate-end"
+    >
+      {indicator}
+      {runs.map((run, index) =>
+        run.matched ? (
+          <Text key={index} bold inverse={color}>
+            {color ? run.text : `[${run.text}]`}
+          </Text>
+        ) : (
+          <Text key={index}>{run.text}</Text>
+        ),
+      )}
+    </Text>
+  );
+}
+
+function StateLine({ view }: { readonly view: IHistorySearchView }): React.ReactElement {
+  const palette = usePalette();
+  if (view.error !== undefined) {
+    return <Text color={palette.text.error}>History could not be read: {view.error}</Text>;
+  }
+  const parts: string[] = [];
+  if (view.matches.length === 0) {
+    parts.push(
+      view.loading ? 'loading…' : view.query.length === 0 ? 'no stored prompts yet' : 'no match',
+    );
+  } else {
+    parts.push(`${view.matches.length} match${view.matches.length === 1 ? '' : 'es'}`);
+    if (view.loading) parts.push('loading…');
+  }
+  if (view.skippedLines > 0) parts.push(formatSkippedLines(view.skippedLines));
+  return <Text dimColor>{parts.join(' · ')}</Text>;
+}
+
+export default function HistorySearchOverlay({
+  view,
+}: {
+  readonly view: IHistorySearchView;
+}): React.ReactElement | null {
+  const palette = usePalette();
+  const screenReader = useScreenReader();
+  const color = isInteractiveColorTerminal();
+  const footerHints = useKeybindingHints('history-search', [
+    [['previous', 'next'], 'Navigate'],
+    ['cycle-scope', 'Scope'],
+    ['insert', 'Insert'],
+    ['execute', 'Run'],
+    ['cancel', 'Close'],
+  ]);
+  if (!view.open) return null;
+  const offset = scrollOffset(view.selectedIndex, view.matches.length);
+  const visible = view.matches.slice(offset, offset + MAX_VISIBLE);
+  return (
+    <Box
+      flexDirection="column"
+      {...(screenReader
+        ? {}
+        : { borderStyle: 'round' as const, borderColor: palette.border.muted })}
+      paddingX={1}
+    >
+      <Text>
+        <Text color={palette.text.accent}>(reverse-i-search)</Text> scope: {view.scope} · query:{' '}
+        {view.query}
+      </Text>
+      {visible.map((match, index) => (
+        <MatchRow
+          key={`${match.entry.at}:${offset + index}`}
+          match={match}
+          selected={offset + index === view.selectedIndex}
+          rowNumber={screenReader ? offset + index : undefined}
+          color={color}
+        />
+      ))}
+      <StateLine view={view} />
+      <KeyHintFooter hints={footerHints} />
+    </Box>
+  );
+}

package/src/InputArea.tsx

@@ -0,0 +1,338 @@
+import { Box, useWindowSize } from 'ink';
+import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+
+import CjkTextInput from './CjkTextInput.js';
+import ExternalPromptNotice from './external-prompt-notice.js';
+import {
+  appendPromptHistory,
+  createPasteLabelChange,
+  createPromptHistoryNavigationState,
+  extractPromptHistory,
+  resolveEnterCommandSelection,
+  resolveTabCompletion,
+  shouldSubmitInput,
+} from './flows/input-area-flow.js';
+import HistorySearchOverlay from './HistorySearchOverlay.js';
+import { useAutocomplete } from './hooks/useAutocomplete.js';
+import { useInputAreaHistorySearch } from './hooks/useInputAreaHistorySearch.js';
+import { useInputAreaKeys } from './hooks/useInputAreaKeys.js';
+import { DeletionAnnouncement, InputBottomRule, InputTopRule } from './input-area-rules.js';
+import { KeyHintFooter } from './key-hint-footer.js';
+import { useKeybindingHints } from './keybindings/keybindings-context.js';
+import { Text } from './SafeText.js';
+import { useScreenReader } from './screen-reader-context.js';
+import SlashAutocomplete from './SlashAutocomplete.js';
+import { usePalette } from './theme/index.js';
+import { expandPasteLabels } from './utils/paste-labels.js';
+import WaveText from './WaveText.js';
+
+import type { IInputAreaHistorySearch } from './hooks/useInputAreaHistorySearch.js';
+import type { ITuiCommandQueryPort } from './tui-app-channel-port.js';
+import type { IHistoryEntry } from '@robota-sdk/agent-core';
+import type { ICommand } from '@robota-sdk/agent-interface-command';
+
+const PENDING_PROMPT_DISPLAY_MAX = 50;
+const PENDING_PROMPT_TAIL_KEEP = 47;
+
+interface IProps {
+  /** FLOW-2006: a deep link's prefill, seeded once. */
+  initialValue?: string | undefined;
+  /** Told to the controller the first time the prefill is taken. */
+  consumeInitialValue?: (() => void) | undefined;
+  /** True while the composer's text came from a deep link: renders the provenance notice. */
+  externalPromptOrigin?: boolean | undefined;
+  onSubmit: (value: string) => void;
+  onCancelQueue?: () => void;
+  isDisabled: boolean;
+  isQueueCancellationDisabled?: boolean;
+  isAborting?: boolean;
+  pendingPrompt?: string | null;
+  /** REMOTE-014 E5: total queued turns (owner + co-drivers); >1 surfaces a co-driver-queued hint. */
+  pendingCount?: number;
+  commandQueryPort?: ITuiCommandQueryPort;
+  sessionName?: string;
+  history?: readonly IHistoryEntry[];
+  /**
+   * SCREEN-014: called when ↓ is pressed on an empty input at the bottom of prompt history, so the
+   * parent can move focus into the background-work list (a no-op for the input today).
+   */
+  onRequestFocusBackgroundList?: () => void;
+  /** SCREEN-1993: the stored-prompt search surface; absent ⇒ `ctrl+r` is inert. */
+  historySearch?: IInputAreaHistorySearch | undefined;
+}
+
+/**
+ * Known limitation: Korean IME last character may be dropped on Enter.
+ * This is an Ink raw mode limitation — no compositionstart/compositionend
+ * events are available in terminal raw mode.
+ * Reference: https://github.com/anthropics/claude-code/issues/3045
+ */
+/**
+ * Layout constants for InputArea (columns).
+ * Used to compute available text width from terminal columns.
+ *
+ * Side borders removed — only top/bottom horizontal lines remain.
+ * paddingLeft={1} adds 1 column inside the box.
+ * Prompt "> " takes 2 columns.
+ */
+const BORDER_HORIZONTAL = 0;
+const PADDING_LEFT = 1;
+const PROMPT_WIDTH = 2;
+const INPUT_AREA_OVERHEAD = BORDER_HORIZONTAL + PADDING_LEFT + PROMPT_WIDTH;
+const DEFAULT_TERMINAL_COLUMNS = 80;
+
+export default function InputArea({
+  onSubmit,
+  onCancelQueue,
+  isDisabled,
+  isQueueCancellationDisabled,
+  isAborting,
+  pendingPrompt,
+  pendingCount,
+  commandQueryPort,
+  sessionName,
+  history,
+  onRequestFocusBackgroundList,
+  historySearch,
+  initialValue,
+  consumeInitialValue,
+  externalPromptOrigin,
+}: IProps): React.ReactElement {
+  const palette = usePalette();
+  // FLOW-2006: the deep link's prefill arrives as a prop and is taken exactly once; the controller
+  // then drops it, so a remount (the handoff-suspend path) never re-seeds a cleared prompt.
+  const [value, setValue] = useState(initialValue ?? '');
+  // The text the link supplied, held for as long as it is still what the composer holds. The
+  // provenance belongs to THIS TEXT, not to the session: once it is sent or cleared, the next
+  // prompt is the user's own and must not be labelled as if a link had written it.
+  const [seededValue] = useState(externalPromptOrigin === true ? (initialValue ?? '') : '');
+  useEffect(() => {
+    if (initialValue === undefined || initialValue.length === 0) return;
+    consumeInitialValue?.();
+  }, [initialValue, consumeInitialValue]);
+  const [cursorHint, setCursorHint] = useState<number | null>(null);
+  // CLI-2004: the text the last word/line delete removed, announced once and cleared on the next
+  // ordinary edit. A reader announces the line it is ON — what left it is otherwise unrecoverable.
+  const screenReader = useScreenReader();
+  const [deletedText, setDeletedText] = useState<string | null>(null);
+  const [historyState, setHistoryState] = useState(createPromptHistoryNavigationState);
+  const [localPromptHistory, setLocalPromptHistory] = useState<string[]>([]);
+  const restoredPromptHistory = useMemo(() => extractPromptHistory(history ?? []), [history]);
+  const promptHistory = useMemo(
+    () =>
+      localPromptHistory.reduce<string[]>(
+        (prompts, prompt) => appendPromptHistory(prompts, prompt),
+        restoredPromptHistory,
+      ),
+    [restoredPromptHistory, localPromptHistory],
+  );
+  const pasteStore = useRef<Map<number, string>>(new Map());
+  const { columns } = useWindowSize();
+  const terminalColumns = columns > 0 ? columns : DEFAULT_TERMINAL_COLUMNS;
+  const availableWidth = Math.max(1, terminalColumns - INPUT_AREA_OVERHEAD);
+  const pasteIdRef = useRef(0);
+  const submitHint = useKeybindingHints('chat-input', [['submit', 'Submit']]);
+
+  const {
+    showPopup,
+    filteredCommands,
+    selectedIndex,
+    setSelectedIndex,
+    isSubcommandMode,
+    setShowPopup,
+  } = useAutocomplete(value, commandQueryPort);
+
+  const handlePaste = useCallback((text: string, cursorPosition: number) => {
+    pasteIdRef.current += 1;
+    const id = pasteIdRef.current;
+    pasteStore.current.set(id, text);
+    setValue((prev) => {
+      const change = createPasteLabelChange(prev, cursorPosition, id, text);
+      setCursorHint(change.cursorHint);
+      return change.value;
+    });
+  }, []);
+
+  const resetHistoryNavigation = useCallback(() => {
+    setHistoryState(createPromptHistoryNavigationState());
+  }, []);
+
+  const recordPromptHistory = useCallback((prompt: string): void => {
+    setLocalPromptHistory((prev) => appendPromptHistory(prev, prompt));
+  }, []);
+
+  const submitPrompt = useCallback(
+    (prompt: string): void => {
+      recordPromptHistory(prompt);
+      resetHistoryNavigation();
+      onSubmit(prompt);
+    },
+    [onSubmit, recordPromptHistory, resetHistoryNavigation],
+  );
+
+  /** Tab: insert command into input field without executing */
+  const tabCompleteCommand = useCallback(
+    (cmd: ICommand): void => {
+      const result = resolveTabCompletion(value, cmd);
+      if (result.type === 'insert') {
+        setValue(result.value);
+        if (result.selectedIndex !== undefined) {
+          setSelectedIndex(result.selectedIndex);
+        }
+      }
+    },
+    [value, setSelectedIndex],
+  );
+
+  /** Enter: insert and execute command immediately */
+  const enterSelectCommand = useCallback(
+    (cmd: ICommand): void => {
+      const result = resolveEnterCommandSelection(value, cmd);
+      if (result.type === 'insert') {
+        setValue(result.value);
+        if (result.selectedIndex !== undefined) {
+          setSelectedIndex(result.selectedIndex);
+        }
+        return;
+      }
+      if (result.type === 'submit') {
+        setValue('');
+        submitPrompt(result.value);
+      }
+    },
+    [value, submitPrompt, setSelectedIndex],
+  );
+
+  const handleSubmit = useCallback(
+    (text: string): void => {
+      if (!shouldSubmitInput(text)) return;
+
+      if (showPopup && filteredCommands[selectedIndex]) {
+        enterSelectCommand(filteredCommands[selectedIndex]);
+        return;
+      }
+
+      // Expand paste labels before submitting
+      const expanded = expandPasteLabels(text.trim(), pasteStore.current);
+
+      setValue('');
+      // Reset paste state
+      pasteStore.current.clear();
+      pasteIdRef.current = 0;
+
+      submitPrompt(expanded);
+    },
+    [showPopup, filteredCommands, selectedIndex, enterSelectCommand, submitPrompt],
+  );
+
+  const search = useInputAreaHistorySearch({
+    historySearch,
+    sessionPrompts: promptHistory,
+    composerActive: !showPopup && !isDisabled && !pendingPrompt,
+    setValue,
+    setCursorHint,
+    submitPrompt,
+  });
+
+  useInputAreaKeys({
+    value,
+    isDisabled,
+    searchOpen: search.open,
+    isQueueCancellationDisabled: isQueueCancellationDisabled ?? isDisabled,
+    pendingPrompt,
+    showPopup,
+    setShowPopup,
+    filteredCommands,
+    selectedIndex,
+    setSelectedIndex,
+    tabCompleteCommand,
+    promptHistory,
+    historyState,
+    setValue,
+    setCursorHint,
+    setHistoryState,
+    onRequestFocusBackgroundList,
+    onCancelQueue,
+  });
+
+  const borderColor = isAborting
+    ? palette.border.attention
+    : pendingPrompt
+      ? palette.border.focused
+      : isDisabled
+        ? palette.border.muted
+        : palette.border.active;
+  const innerWidth = Math.max(1, terminalColumns - BORDER_HORIZONTAL);
+
+  return (
+    <Box flexDirection="column">
+      {showPopup && (
+        <SlashAutocomplete
+          commands={filteredCommands}
+          selectedIndex={selectedIndex}
+          visible={showPopup}
+          isSubcommandMode={isSubcommandMode}
+        />
+      )}
+      <HistorySearchOverlay view={search} />
+      <DeletionAnnouncement deleted={screenReader ? deletedText : null} />
+      <InputTopRule
+        screenReader={screenReader}
+        innerWidth={innerWidth}
+        borderColor={borderColor}
+        {...(sessionName !== undefined ? { sessionName } : {})}
+      />
+      <Box paddingLeft={1}>
+        {isAborting ? (
+          <Text color={palette.text.warning}> Interrupting...</Text>
+        ) : pendingPrompt ? (
+          <Text color={palette.text.accent}>
+            {' '}
+            Queued:{' '}
+            {pendingPrompt.length > PENDING_PROMPT_DISPLAY_MAX
+              ? pendingPrompt.slice(0, PENDING_PROMPT_TAIL_KEEP) + '...'
+              : pendingPrompt}{' '}
+            {typeof pendingCount === 'number' && pendingCount > 1 && (
+              <Text dimColor>(+{pendingCount - 1} co-driver queued) </Text>
+            )}
+            <Text dimColor>(Backspace to cancel)</Text>
+          </Text>
+        ) : isDisabled ? (
+          <WaveText text="  Waiting for response... (ESC to interrupt)" />
+        ) : (
+          <Box>
+            <Text color={palette.text.success} bold>
+              {'> '}
+            </Text>
+            <CjkTextInput
+              value={value}
+              onChange={(v) => {
+                setValue(v);
+                resetHistoryNavigation();
+                setCursorHint(null); // reset after normal typing
+              }}
+              onDeletedText={setDeletedText}
+              onSubmit={handleSubmit}
+              onPaste={handlePaste}
+              placeholder="Type a message or /help"
+              availableWidth={availableWidth}
+              cursorHint={cursorHint}
+              enableVerticalNavigation={false}
+              keybindingContext={showPopup ? 'autocomplete-menu' : 'chat-input'}
+              focus={!search.open}
+            />
+          </Box>
+        )}
+      </Box>
+      {!screenReader && !isDisabled && !pendingPrompt && !search.open && (
+        <KeyHintFooter hints={submitHint} />
+      )}
+      <InputBottomRule
+        screenReader={screenReader}
+        innerWidth={innerWidth}
+        borderColor={borderColor}
+      />
+      {seededValue.length > 0 && value === seededValue && <ExternalPromptNotice value={value} />}
+    </Box>
+  );
+}