@robota-sdk/agent-transport 3.0.0-beta.64

package/src/tui/InputArea.tsx

@@ -0,0 +1,298 @@
+import React, { useState, useCallback, useRef, useMemo } from 'react';
+
+const PENDING_PROMPT_DISPLAY_MAX = 50;
+const PENDING_PROMPT_TAIL_KEEP = 47;
+import { Box, Text, useInput, useWindowSize } from 'ink';
+import type { IHistoryEntry } from '@robota-sdk/agent-core';
+import type { CommandRegistry, ICommand } from '@robota-sdk/agent-framework';
+import CjkTextInput from './CjkTextInput.js';
+import WaveText from './WaveText.js';
+import SlashAutocomplete from './SlashAutocomplete.js';
+import { expandPasteLabels } from './utils/paste-labels.js';
+import { useAutocomplete } from './hooks/useAutocomplete.js';
+import {
+  appendPromptHistory,
+  createPasteLabelChange,
+  createPromptHistoryNavigationState,
+  extractPromptHistory,
+  getAutocompletePopupAction,
+  getPendingPromptInputAction,
+  getPromptHistoryInputAction,
+  moveAutocompleteSelection,
+  navigatePromptHistory,
+  resolveEnterCommandSelection,
+  resolveTabCompletion,
+  shouldSubmitInput,
+} from './flows/input-area-flow.js';
+
+interface IProps {
+  onSubmit: (value: string) => void;
+  onCancelQueue?: () => void;
+  isDisabled: boolean;
+  isAborting?: boolean;
+  pendingPrompt?: string | null;
+  registry?: CommandRegistry;
+  sessionName?: string;
+  history?: readonly IHistoryEntry[];
+}
+
+/**
+ * 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 border box (columns).
+ * Used to compute available text width from terminal columns.
+ *
+ * Box borderStyle="single" adds 1 column per side (left + right).
+ * paddingLeft={1} adds 1 column inside the box.
+ * Prompt "> " takes 2 columns.
+ */
+const BORDER_HORIZONTAL = 2;
+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,
+  isAborting,
+  pendingPrompt,
+  registry,
+  sessionName,
+  history,
+}: IProps): React.ReactElement {
+  const [value, setValue] = useState('');
+  const [cursorHint, setCursorHint] = useState<number | 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 {
+    showPopup,
+    filteredCommands,
+    selectedIndex,
+    setSelectedIndex,
+    isSubcommandMode,
+    setShowPopup,
+  } = useAutocomplete(value, registry);
+
+  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;
+      }
+      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],
+  );
+
+  useInput(
+    (
+      _input: string,
+      key: { upArrow: boolean; downArrow: boolean; escape: boolean; tab: boolean },
+    ) => {
+      if (!showPopup) return;
+      const action = getAutocompletePopupAction(key);
+      if (action === 'previous' || action === 'next') {
+        setSelectedIndex((prev) =>
+          moveAutocompleteSelection(prev, filteredCommands.length, action),
+        );
+      } else if (action === 'close') {
+        setShowPopup(false);
+      } else if (action === 'complete') {
+        const cmd = filteredCommands[selectedIndex];
+        if (cmd) tabCompleteCommand(cmd);
+      }
+    },
+    { isActive: showPopup && !isDisabled },
+  );
+
+  useInput(
+    (_input, key) => {
+      const action = getPromptHistoryInputAction(key);
+      if (!action) return;
+      const result = navigatePromptHistory(value, promptHistory, historyState, action);
+      setValue(result.value);
+      setCursorHint(result.cursorHint);
+      setHistoryState(result.state);
+    },
+    { isActive: !showPopup && !isDisabled && !pendingPrompt },
+  );
+
+  // Backspace cancels queued prompt
+  useInput(
+    (_input, key) => {
+      if (getPendingPromptInputAction(key) === 'cancelQueue' && pendingPrompt) {
+        onCancelQueue?.();
+      }
+    },
+    { isActive: !!pendingPrompt },
+  );
+
+  const borderColor = isAborting
+    ? 'yellow'
+    : pendingPrompt
+      ? 'cyan'
+      : isDisabled
+        ? 'gray'
+        : 'green';
+  const innerWidth = Math.max(1, terminalColumns - BORDER_HORIZONTAL);
+
+  // Build top border with optional session name title (right-aligned, 2 chars from edge)
+  const topBorder = (() => {
+    if (sessionName) {
+      const label = ` "${sessionName}" `;
+      const rightPad = 2;
+      const leftLen = Math.max(0, innerWidth - label.length - rightPad);
+      return { left: '┌' + '─'.repeat(leftLen), label, right: '─'.repeat(rightPad) + '┐' };
+    }
+    return { left: '┌' + '─'.repeat(innerWidth), label: '', right: '┐' };
+  })();
+
+  return (
+    <Box flexDirection="column">
+      {showPopup && (
+        <SlashAutocomplete
+          commands={filteredCommands}
+          selectedIndex={selectedIndex}
+          visible={showPopup}
+          isSubcommandMode={isSubcommandMode}
+        />
+      )}
+      <Text color={borderColor}>
+        {topBorder.left}
+        {topBorder.label ? (
+          <Text backgroundColor={borderColor} color="black" bold>
+            {topBorder.label}
+          </Text>
+        ) : null}
+        {topBorder.right}
+      </Text>
+      <Box borderStyle="single" borderTop={false} borderColor={borderColor} paddingLeft={1}>
+        {isAborting ? (
+          <Text color="yellow"> Interrupting...</Text>
+        ) : pendingPrompt ? (
+          <Text color="cyan">
+            {' '}
+            Queued:{' '}
+            {pendingPrompt.length > PENDING_PROMPT_DISPLAY_MAX
+              ? pendingPrompt.slice(0, PENDING_PROMPT_TAIL_KEEP) + '...'
+              : pendingPrompt}{' '}
+            <Text dimColor>(Backspace to cancel)</Text>
+          </Text>
+        ) : isDisabled ? (
+          <WaveText text="  Waiting for response... (ESC to interrupt)" />
+        ) : (
+          <Box>
+            <Text color="green" bold>
+              {'> '}
+            </Text>
+            <CjkTextInput
+              value={value}
+              onChange={(v) => {
+                setValue(v);
+                resetHistoryNavigation();
+                setCursorHint(null); // reset after normal typing
+              }}
+              onSubmit={handleSubmit}
+              onPaste={handlePaste}
+              placeholder="Type a message or /help"
+              availableWidth={availableWidth}
+              cursorHint={cursorHint}
+              enableVerticalNavigation={false}
+            />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}

package/src/tui/InteractivePrompt.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import type {
+  TCommandInteractionPrompt as TInteractivePrompt,
+  ICommandChoicePromptOption as IChoicePromptOption,
+} from '@robota-sdk/agent-framework';
+import ListPicker from './ListPicker.js';
+import TextPrompt from './TextPrompt.js';
+
+interface IInteractivePromptProps {
+  prompt: TInteractivePrompt;
+  onSubmit: (value: string) => void;
+  onCancel: () => void;
+}
+
+export default function InteractivePrompt({
+  prompt,
+  onSubmit,
+  onCancel,
+}: IInteractivePromptProps): React.ReactElement {
+  if (prompt.kind === 'text') {
+    return (
+      <TextPrompt
+        key={`text:${prompt.title}`}
+        title={prompt.title}
+        description={prompt.description}
+        placeholder={prompt.placeholder}
+        allowEmpty={prompt.allowEmpty}
+        masked={prompt.masked}
+        validate={prompt.validate}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+      />
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Text bold>{prompt.title}</Text>
+      {prompt.description !== undefined && prompt.description.length > 0 && (
+        <Text dimColor>{prompt.description}</Text>
+      )}
+      <ListPicker<IChoicePromptOption>
+        items={[...prompt.options]}
+        maxVisible={prompt.maxVisible}
+        renderItem={(option, isSelected) => (
+          <Text color={isSelected ? 'cyan' : undefined}>
+            {isSelected ? '> ' : '  '}
+            {option.label}
+          </Text>
+        )}
+        onSelect={(option) => onSubmit(option.value)}
+        onCancel={onCancel}
+      />
+    </Box>
+  );
+}

package/src/tui/ListPicker.tsx

@@ -0,0 +1,94 @@
+/**
+ * Generic list picker with arrow-key navigation and viewport scrolling.
+ * Renders items via a user-supplied renderItem function.
+ * Shows a limited number of items at a time; scrolls as the cursor moves.
+ */
+
+import React, { useState, useRef, useCallback } from 'react';
+import { Box, Text, useInput } from 'ink';
+import {
+  applySelectionInput,
+  createSelectionFlowState,
+  getVerticalSelectionInputAction,
+  normalizeSelectionState,
+  type ISelectionFlowState,
+  type TSelectionInputAction,
+} from './flows/selection-flow.js';
+
+/** Default number of visible items */
+const DEFAULT_MAX_VISIBLE = 3;
+
+export interface IListPickerProps<T> {
+  /** Items to display in the list */
+  items: T[];
+  /** Render function for each item — receives the item and whether it is currently selected */
+  renderItem: (item: T, isSelected: boolean) => React.ReactElement;
+  /** Called when the user presses Enter on the highlighted item */
+  onSelect: (item: T) => void;
+  /** Called when the user presses Escape */
+  onCancel: () => void;
+  /** Maximum number of items visible at once (default: 10) */
+  maxVisible?: number;
+}
+
+export default function ListPicker<T>({
+  items,
+  renderItem,
+  onSelect,
+  onCancel,
+  maxVisible = DEFAULT_MAX_VISIBLE,
+}: IListPickerProps<T>): React.ReactElement {
+  const [state, setState] = useState<ISelectionFlowState>(() => createSelectionFlowState());
+  const stateRef = useRef(state);
+  const applyAction = useCallback(
+    (action: TSelectionInputAction): void => {
+      const result = applySelectionInput(stateRef.current, action, {
+        itemCount: items.length,
+        maxVisible,
+      });
+      stateRef.current = result.state;
+      setState(result.state);
+      if (result.effect.type === 'cancel') {
+        onCancel();
+      } else if (result.effect.type === 'select') {
+        const item = items[result.effect.index];
+        if (item !== undefined) {
+          onSelect(item);
+        }
+      }
+    },
+    [items, maxVisible, onCancel, onSelect],
+  );
+
+  useInput((_input, key) => {
+    const action = getVerticalSelectionInputAction(key);
+    if (action !== undefined) {
+      applyAction(action);
+    }
+  });
+
+  if (items.length === 0) {
+    return <Box />;
+  }
+
+  const normalizedState = normalizeSelectionState(state, { itemCount: items.length, maxVisible });
+  if (normalizedState !== state) {
+    stateRef.current = normalizedState;
+  }
+  const { selectedIndex, scrollOffset } = normalizedState;
+  const visibleItems = items.slice(scrollOffset, scrollOffset + maxVisible);
+  const hasMore = scrollOffset + maxVisible < items.length;
+  const hasLess = scrollOffset > 0;
+
+  return (
+    <Box flexDirection="column">
+      {hasLess && <Text dimColor> ↑ {scrollOffset} more above</Text>}
+      {visibleItems.map((item, index) => (
+        <Box key={scrollOffset + index} marginBottom={1}>
+          {renderItem(item, scrollOffset + index === selectedIndex)}
+        </Box>
+      ))}
+      {hasMore && <Text dimColor> ↓ {items.length - scrollOffset - maxVisible} more below</Text>}
+    </Box>
+  );
+}

package/src/tui/MenuSelect.tsx

@@ -0,0 +1,103 @@
+import React, { useState, useCallback, useRef } from 'react';
+import { Box, Text, useInput } from 'ink';
+import {
+  applySelectionInput,
+  createSelectionFlowState,
+  getVerticalSelectionInputAction,
+  normalizeSelectionState,
+  type ISelectionFlowState,
+  type TSelectionInputAction,
+} from './flows/selection-flow.js';
+
+export interface IMenuSelectItem {
+  label: string;
+  value: string;
+  hint?: string;
+}
+
+interface IProps {
+  title: string;
+  items: IMenuSelectItem[];
+  onSelect: (value: string) => void;
+  onBack: () => void;
+  loading?: boolean;
+  error?: string;
+}
+
+export default function MenuSelect({
+  title,
+  items,
+  onSelect,
+  onBack,
+  loading,
+  error,
+}: IProps): React.ReactElement {
+  const [state, setState] = useState<ISelectionFlowState>(() => createSelectionFlowState());
+  const stateRef = useRef(state);
+  const isEnabled = !loading && !error;
+  const applyAction = useCallback(
+    (action: TSelectionInputAction): void => {
+      const result = applySelectionInput(stateRef.current, action, {
+        itemCount: items.length,
+        enabled: isEnabled,
+      });
+      stateRef.current = result.state;
+      setState(result.state);
+      if (result.effect.type === 'cancel') {
+        onBack();
+      } else if (result.effect.type === 'select') {
+        const item = items[result.effect.index];
+        if (item !== undefined) {
+          onSelect(item.value);
+        }
+      }
+    },
+    [isEnabled, items, onBack, onSelect],
+  );
+
+  useInput((input, key) => {
+    const action = getVerticalSelectionInputAction(key);
+    if (action !== undefined) {
+      applyAction(action);
+    }
+  });
+
+  const normalizedState = normalizeSelectionState(state, { itemCount: items.length });
+  if (normalizedState !== state) {
+    stateRef.current = normalizedState;
+  }
+  const selected = normalizedState.selectedIndex;
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1}>
+      <Text color="yellow" bold>
+        {title}
+      </Text>
+      {loading && (
+        <Box marginTop={1}>
+          <Text dimColor>Loading...</Text>
+        </Box>
+      )}
+      {error && (
+        <Box marginTop={1} flexDirection="column">
+          <Text color="red">{error}</Text>
+          <Text dimColor>Press Esc to go back</Text>
+        </Box>
+      )}
+      {!loading && !error && (
+        <Box flexDirection="column" marginTop={1}>
+          {items.map((item, i) => (
+            <Box key={item.value}>
+              <Text color={i === selected ? 'cyan' : undefined} bold={i === selected}>
+                {i === selected ? '> ' : '  '}
+                {item.label}
+              </Text>
+              {item.hint && <Text dimColor> {item.hint}</Text>}
+            </Box>
+          ))}
+        </Box>
+      )}
+      <Text dimColor>{loading || error ? '' : ' ↑↓ Navigate  Enter Select  Esc Back'}</Text>
+    </Box>
+  );
+}