aegiscode 3.1.8 → 3.1.10

package/src/ui/components/input/CustomTextInput.tsx

@@ -0,0 +1,220 @@
+import React, { useMemo, useCallback, useRef, memo } from 'react';
+import { Text, useInput } from 'ink';
+import chalk from 'chalk';
+import { useIsFocused, FocusId, focusManager } from '../../focus/index.js';
+
+interface CustomTextInputProps {
+  value: string;
+  cursorPosition: number;
+  /** Cursor visibility — computed by parent so this component doesn't re-render every tick */
+  cursorOn?: boolean;
+  onChange: (value: string) => void;
+  onChangeCursorPosition: (pos: number) => void;
+  onSubmit?: (value: string) => void;
+  onPaste?: (text: string) => { prompt?: string } | void;
+  onArrowUp?: () => void;
+  onArrowDown?: () => void;
+  placeholder?: string;
+  focusId?: FocusId;
+  disabled?: boolean;
+}
+
+const PASTE_CONFIG = {
+  TIMEOUT_MS: 100,
+  RAPID_INPUT_THRESHOLD_MS: 400,
+  LARGE_INPUT_THRESHOLD: 100,
+};
+
+export const CustomTextInput: React.FC<CustomTextInputProps> = memo(
+  ({
+    value,
+    cursorPosition,
+    onChange,
+    onChangeCursorPosition,
+    onSubmit,
+    onPaste,
+    onArrowUp,
+    onArrowDown,
+    placeholder = '',
+    focusId = FocusId.MAIN_INPUT,
+    disabled = false,
+    cursorOn = true,
+  }) => {
+    const isFocused = useIsFocused(focusId);
+    const isActive = isFocused && !disabled;
+
+    // Refs for all values accessed inside the stable useInput handler.
+    // Updated on every render — never trigger re-renders themselves.
+    const valueRef = useRef(value);
+    const cursorPositionRef = useRef(cursorPosition);
+    const onChangeRef = useRef(onChange);
+    const onChangeCursorPositionRef = useRef(onChangeCursorPosition);
+    const onSubmitRef = useRef(onSubmit);
+    const onPasteRef = useRef(onPaste);
+    const onArrowUpRef = useRef(onArrowUp);
+    const onArrowDownRef = useRef(onArrowDown);
+    const isActiveRef = useRef(isActive);
+
+    valueRef.current = value;
+    cursorPositionRef.current = cursorPosition;
+    onChangeRef.current = onChange;
+    onChangeCursorPositionRef.current = onChangeCursorPosition;
+    onSubmitRef.current = onSubmit;
+    onPasteRef.current = onPaste;
+    onArrowUpRef.current = onArrowUp;
+    onArrowDownRef.current = onArrowDown;
+    isActiveRef.current = isActive;
+
+    const renderedValue = useMemo(() => {
+      if (!isActive) return value || chalk.dim(placeholder);
+
+      if (value.length === 0) {
+        const block = cursorOn
+          ? chalk.bgHex('#00c8b4').hex('#000000')(' ')
+          : ' ';
+        return block + chalk.dim(placeholder);
+      }
+
+      const before = value.slice(0, cursorPosition);
+      const charUnder = value[cursorPosition] ?? ' ';
+      const after = value.slice(cursorPosition + 1);
+
+      const cursorChar = cursorOn
+        ? chalk.bgHex('#00c8b4').hex('#000000')(charUnder)
+        : charUnder;
+
+      return before + cursorChar + after;
+    }, [value, cursorPosition, isActive, placeholder, cursorOn]);
+
+    const pasteStateRef = useRef({
+      chunks: [] as string[],
+      timeoutId: null as NodeJS.Timeout | null,
+      firstInputTime: null as number | null,
+    });
+
+    // Stable — accesses all mutable values via refs
+    const handlePasteStable = useCallback((text: string) => {
+      const val = valueRef.current;
+      const pos = cursorPositionRef.current;
+      // Claude Code behavior: trim trailing whitespace from pasted text
+      const cleanText = text.trimEnd();
+      
+      if (onPasteRef.current) {
+        const result = onPasteRef.current(text);
+        if (result?.prompt) {
+          onChangeRef.current(val + result.prompt);
+          onChangeCursorPositionRef.current(val.length + result.prompt.length);
+          return;
+        }
+      }
+      const newValue = val.slice(0, pos) + cleanText + val.slice(pos);
+      onChangeRef.current(newValue);
+      onChangeCursorPositionRef.current(pos + cleanText.length);
+    }, []);
+
+    // Stable — Ink registers this once and never re-registers unless focusId changes.
+    // All mutable state is read from refs at call time.
+    const inputHandler = useCallback(
+      (input: string, key: Parameters<Parameters<typeof useInput>[0]>[1]) => {
+        if (focusManager.getCurrentFocus() !== focusId || !isActiveRef.current) return;
+
+        const val = valueRef.current;
+        const pos = cursorPositionRef.current;
+        const now = Date.now();
+        const pasteState = pasteStateRef.current;
+        const timeSinceFirst = pasteState.firstInputTime
+          ? now - pasteState.firstInputTime
+          : 0;
+
+        const isPaste =
+          input.length > PASTE_CONFIG.LARGE_INPUT_THRESHOLD ||
+          input.includes('\n') ||
+          (timeSinceFirst < PASTE_CONFIG.RAPID_INPUT_THRESHOLD_MS &&
+            pasteState.chunks.length > 0);
+
+        if (isPaste && input.length > 1) {
+          pasteState.chunks.push(input);
+          if (!pasteState.firstInputTime) pasteState.firstInputTime = now;
+          if (pasteState.timeoutId) clearTimeout(pasteState.timeoutId);
+          pasteState.timeoutId = setTimeout(() => {
+            const mergedText = pasteState.chunks.join('');
+            handlePasteStable(mergedText);
+            pasteState.chunks = [];
+            pasteState.timeoutId = null;
+            pasteState.firstInputTime = null;
+          }, PASTE_CONFIG.TIMEOUT_MS);
+          return;
+        }
+
+        // Multi-agent commands (/multi, /multiyolo, /research, /build, /forge, /council):
+        // Enter inserts newline, Shift+Enter submits — enables multi-line prompts.
+        // All other commands/messages: Enter submits immediately (as before).
+        const MULTI_AGENT_CMDS = ['/multi', '/multiyolo', '/research', '/build', '/forge', '/council'];
+        const isMultiAgent = MULTI_AGENT_CMDS.some(cmd => val.trimStart().startsWith(cmd));
+        if (key.return) {
+          if (isMultiAgent && !key.shift) {
+            // Insert newline at cursor
+            const newValue = val.slice(0, pos) + '\n' + val.slice(pos);
+            onChangeRef.current(newValue);
+            onChangeCursorPositionRef.current(pos + 1);
+          } else {
+            onSubmitRef.current?.(val);
+          }
+          return;
+        }
+        if (key.leftArrow) { if (pos > 0) onChangeCursorPositionRef.current(pos - 1); return; }
+        if (key.rightArrow) { if (pos < val.length) onChangeCursorPositionRef.current(pos + 1); return; }
+        if (key.upArrow) { onArrowUpRef.current?.(); return; }
+        if (key.downArrow) { onArrowDownRef.current?.(); return; }
+        if (key.backspace || key.delete) {
+          if (pos > 0) {
+            const newValue = val.slice(0, pos - 1) + val.slice(pos);
+            onChangeRef.current(newValue);
+            onChangeCursorPositionRef.current(pos - 1);
+          }
+          return;
+        }
+        if (key.ctrl && input === 'a') { onChangeCursorPositionRef.current(0); return; }
+        if (key.ctrl && input === 'e') { onChangeCursorPositionRef.current(val.length); return; }
+        if (key.ctrl && input === 'k') { onChangeRef.current(val.slice(0, pos)); return; }
+        if (key.ctrl && input === 'u') {
+          onChangeRef.current(val.slice(pos));
+          onChangeCursorPositionRef.current(0);
+          return;
+        }
+        if (input && !key.ctrl && !key.meta) {
+          const newValue = val.slice(0, pos) + input + val.slice(pos);
+          onChangeRef.current(newValue);
+          onChangeCursorPositionRef.current(pos + input.length);
+        }
+      },
+      [focusId, handlePasteStable] // both stable — focusId is a constant, handlePasteStable has empty deps
+    );
+
+    useInput(inputHandler, { isActive });
+
+    return (
+      <Text>
+        {!isActive && value.length === 0 ? (
+          <Text dimColor>{placeholder}</Text>
+        ) : (
+          renderedValue
+        )}
+      </Text>
+    );
+  },
+  // Only re-render when the displayed output would actually change.
+  // Callbacks are accessed via refs so they never need to cause a re-render.
+  // focus changes trigger re-renders via useIsFocused internally (bypasses this comparator).
+  (prev, next) =>
+    prev.value === next.value &&
+    prev.cursorPosition === next.cursorPosition &&
+    prev.cursorOn === next.cursorOn &&
+    prev.placeholder === next.placeholder &&
+    prev.disabled === next.disabled &&
+    prev.focusId === next.focusId
+);
+
+CustomTextInput.displayName = 'CustomTextInput';
+
+export default CustomTextInput;

package/src/ui/components/input/InputArea.tsx

@@ -0,0 +1,361 @@
+/**
+ * InputArea - 输入区域组件
+ * 
+ * 
+ * 
+ */
+
+import React, { useCallback, useState, useMemo, useEffect, useRef, memo } from 'react';
+import { Box, Text, useInput } from 'ink';
+
+const PromptGlyph: React.FC<{ isProcessing: boolean; lockedIn: boolean; glowPhase: number; color: string; idleColor: string }> = memo(({ isProcessing, lockedIn, glowPhase, color, idleColor }) => {
+  const displayColor = (isProcessing && lockedIn)
+    ? ELECTRIC_COLORS[glowPhase % ELECTRIC_COLORS.length]
+    : idleColor;
+  return <Text color={displayColor} bold>□</Text>;
+});
+PromptGlyph.displayName = 'PromptGlyph';
+import { CustomTextInput } from './CustomTextInput.js';
+import { CommandSuggestions } from './CommandSuggestions.js';
+
+import { themeManager } from '../../themes/index.js';
+import { FocusId, focusManager } from '../../focus/index.js';
+import { getState, useIsThinking, usePendingCommands, useCurrentCommand } from '../../../store/index.js';
+import { vanillaStore } from '../../../store/vanilla.js';
+import { getStreamingContent } from '../../../store/streaming-buffer.js';
+
+// Electric blue color ramp — cycles fast to simulate voltage/energy
+const ELECTRIC_COLORS = [
+  '#0055FF', '#0077FF', '#0099FF', '#00AAFF',
+  '#00CCFF', '#00EEFF', '#00FFFF', '#00EEFF',
+  '#00CCFF', '#00AAFF', '#0099FF', '#0077FF',
+];
+
+interface InputAreaProps {
+  /** 提交回调 */
+  onSubmit?: (value: string) => void;
+}
+
+/**
+ * 
+ * 
+ */
+export const InputArea: React.FC<InputAreaProps> = React.memo(
+  ({
+    onSubmit,
+  }) => {
+    // 使用 ref 保持回调引用稳
+    const onSubmitRef = useRef(onSubmit);
+    
+    // 更新 ref（不触发重新渲
+    useEffect(() => {
+      onSubmitRef.current = onSubmit;
+    });
+    
+    // 自管理命令历史（使用 ref 避免状态变化导致重新渲染传播到父组
+    const historyRef = useRef<string[]>([]);
+    const historyIndexRef = useRef(-1);
+    
+    const addToHistory = useCallback((command: string) => {
+      if (command.trim()) {
+        const history = historyRef.current;
+        if (history[history.length - 1] !== command) {
+          history.push(command);
+          if (history.length > 100) history.shift();
+        }
+      }
+      historyIndexRef.current = -1;
+    }, []);
+    
+    const getPreviousCommand = useCallback(() => {
+      const history = historyRef.current;
+      if (history.length === 0) return null;
+      if (historyIndexRef.current < history.length - 1) {
+        historyIndexRef.current++;
+        return history[history.length - 1 - historyIndexRef.current];
+      }
+      return history[0];
+    }, []);
+    
+    const getNextCommand = useCallback(() => {
+      if (historyIndexRef.current > 0) {
+        historyIndexRef.current--;
+        return historyRef.current[historyRef.current.length - 1 - historyIndexRef.current];
+      }
+      historyIndexRef.current = -1;
+      return '';
+    }, []);
+    
+    const theme = themeManager.getTheme();
+    
+    // 自己订阅需要的状
+    const isProcessing = useIsThinking();
+    const pendingCommands = usePendingCommands();
+    const currentCommand = useCurrentCommand();
+
+    const [pasteNotification, setPasteNotification] = useState<string | null>(null);
+    const pasteNotifRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    
+    const [thinkingSeconds, setThinkingSeconds] = useState(0);
+    const [streamingTokens, setStreamingTokens] = useState(0);
+    const thinkingTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+    useEffect(() => {
+      if (isProcessing) {
+        setThinkingSeconds(0);
+        setStreamingTokens(0);
+        thinkingTimerRef.current = setInterval(() => {
+          setThinkingSeconds(s => s + 1);
+          const buf = getStreamingContent();
+          if (buf) setStreamingTokens(Math.ceil(buf.content.length / 4));
+        }, 1000);
+      } else {
+        if (thinkingTimerRef.current) { clearInterval(thinkingTimerRef.current); thinkingTimerRef.current = null; }
+        setThinkingSeconds(0);
+        setStreamingTokens(0);
+      }
+      return () => { if (thinkingTimerRef.current) { clearInterval(thinkingTimerRef.current); thinkingTimerRef.current = null; } };
+    }, [isProcessing]);
+
+    const [hasStreamingMessage, setHasStreamingMessage] = useState(
+      () => getState().session.messages.some(m => m.isStreaming)
+    );
+    useEffect(() => {
+      let prev = hasStreamingMessage;
+      const unsubscribe = vanillaStore.subscribe((state) => {
+        const msgs = state.session.messages;
+        const newVal = msgs[msgs.length - 1]?.isStreaming ?? false;
+        if (newVal !== prev) {
+          prev = newVal;
+          setHasStreamingMessage(newVal);
+        }
+      });
+      return unsubscribe;
+    }, []);
+
+    // Electric glow animation — 200ms ticks, only active while processing
+    const [glowPhase, setGlowPhase] = useState(0);
+    const glowTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+    useEffect(() => {
+      if (isProcessing) {
+        setGlowPhase(0);
+        glowTimerRef.current = setInterval(() => setGlowPhase(p => p + 1), 150);
+      } else {
+        if (glowTimerRef.current) { clearInterval(glowTimerRef.current); glowTimerRef.current = null; }
+        setGlowPhase(0);
+      }
+      return () => { if (glowTimerRef.current) { clearInterval(glowTimerRef.current); glowTimerRef.current = null; } };
+    }, [isProcessing]);
+
+    // Cursor blink at idle (530 ms on/off), piggybacks on glowPhase during generation
+    const [idleBlink, setIdleBlink] = useState(true);
+    const idleBlinkRef = useRef<ReturnType<typeof setInterval> | null>(null);
+    useEffect(() => {
+      if (!isProcessing) {
+        setIdleBlink(true);
+        idleBlinkRef.current = setInterval(() => setIdleBlink(v => !v), 530);
+      } else {
+        if (idleBlinkRef.current) { clearInterval(idleBlinkRef.current); idleBlinkRef.current = null; }
+        setIdleBlink(true);
+      }
+      return () => { if (idleBlinkRef.current) { clearInterval(idleBlinkRef.current); idleBlinkRef.current = null; } };
+    }, [isProcessing]);
+    const cursorOn = isProcessing ? Math.floor(glowPhase / 5) % 2 === 0 : idleBlink;
+
+    const thinkingLabel = useMemo(() => {
+      if (!isProcessing) return null;
+      const cmd = currentCommand?.slice(0, 80);
+      const cmdStr = cmd ? ` · locked: ${cmd}` : '';
+      const elapsed = thinkingSeconds >= 2 ? ` · ${thinkingSeconds}s` : '';
+      const tokens = streamingTokens > 0 ? ` · ~${streamingTokens}t` : '';
+      if (hasStreamingMessage) return `generating${tokens}${elapsed}${cmdStr}`;
+      return `thinking${elapsed}${cmdStr}`;
+    }, [isProcessing, hasStreamingMessage, thinkingSeconds, streamingTokens, currentCommand]);
+
+    // 计
+    const placeholder = useMemo(() => {
+      if (isProcessing) {
+        return pendingCommands.length > 0
+          ? `Queued: ${pendingCommands.length} command(s). Type to add more...`
+          : 'Processing... Type to queue next command';
+      }
+      return 'Type a message...';
+    }, [isProcessing, pendingCommands.length]);
+    
+    // 自管理的输入状
+    const [input, setInput] = useState('');
+    const [cursorPosition, setCursorPosition] = useState(0);
+    const inputRef = useRef({ value: '', cursorPosition: 0 });
+    
+    // 更新 ref 保持同
+    useEffect(() => {
+      inputRef.current = { value: input, cursorPosition };
+    }, [input, cursorPosition]);
+    
+
+    
+    // 设置输入
+    const handleChange = useCallback((newValue: string) => {
+      inputRef.current.value = newValue;
+      setInput(newValue);
+      // cursor is always set immediately after via onChangeCursorPosition — no guard needed
+    }, []);
+    
+    // 设置光标位
+    const handleChangeCursorPosition = useCallback((pos: number) => {
+      const newPos = Math.max(0, Math.min(pos, inputRef.current.value.length));
+      inputRef.current.cursorPosition = newPos;
+      setCursorPosition(newPos);
+    }, []);
+    
+    const showSuggestions = input.startsWith('/') && input.length > 0 && !isProcessing;
+    const showPromptSuggestions = false; // Suggestions disabled
+
+    // 选择建议回
+    const handleSelectSuggestion = useCallback((newValue: string) => {
+      handleChange(newValue);
+      handleChangeCursorPosition(newValue.length);
+    }, [handleChange, handleChangeCursorPosition]);
+
+    // 清空输
+    const clearInput = useCallback(() => {
+      setInput('');
+      setCursorPosition(0);
+      inputRef.current = { value: '', cursorPosition: 0 };
+    }, []);
+    
+
+
+    // Paste — mimic Claude Code: show paste size notification
+    // Trimming is handled in CustomTextInput.tsx's handlePasteStable
+    const handlePaste = useCallback((text: string) => {
+      const lines = text.split('\n').length;
+      const chars = text.length;
+      
+      if (lines > 1 || chars > 200) {
+        const msg = lines > 1 ? `pasted ${lines} lines (${chars} chars)` : `pasted ${chars} chars`;
+        setPasteNotification(msg);
+        if (pasteNotifRef.current) clearTimeout(pasteNotifRef.current);
+        pasteNotifRef.current = setTimeout(() => setPasteNotification(null), 2000);
+      }
+    }, []);
+
+    // 提交处
+    const handleSubmit = useCallback(
+      (_value: string) => {
+        // Read from ref, not prop: the prop lags until React re-renders, so holding
+        // Enter fires multiple submits with the same stale value. The ref is
+        // pre-cleared here so any queued handler calls before re-render bail out.
+        const current = inputRef.current.value;
+        if (current.trim() && onSubmitRef.current) {
+          inputRef.current = { value: '', cursorPosition: 0 }; // guard before any async
+          addToHistory(current);
+          clearInput(); // queues setInput('') for React
+          onSubmitRef.current(current);
+        }
+      },
+      [clearInput, addToHistory]
+    );
+    
+    // 处理上下箭
+    const handleArrowUpInternal = useCallback(() => {
+      const prevCmd = getPreviousCommand();
+      if (prevCmd !== null && prevCmd !== undefined) {
+        handleChange(prevCmd);
+        handleChangeCursorPosition(prevCmd.length);
+      }
+    }, [handleChange, handleChangeCursorPosition, getPreviousCommand]);
+    
+    const handleArrowDownInternal = useCallback(() => {
+      const nextCmd = getNextCommand();
+      if (nextCmd !== null && nextCmd !== undefined) {
+        handleChange(nextCmd);
+        handleChangeCursorPosition(nextCmd.length);
+      }
+    }, [handleChange, handleChangeCursorPosition, getNextCommand]);
+    
+    // 处理 Tab — 由 CommandSuggestions 接管
+    useInput((_char, key) => {
+      if (focusManager.getCurrentFocus() !== FocusId.MAIN_INPUT) return;
+      // Tab is handled by CommandSuggestions; just swallow it here
+      // to prevent default browser-like behavior
+    });
+
+
+    return (
+      <Box flexDirection="column">
+        {/* Paste notification — Claude Code style: minimal, brief */}
+        {pasteNotification && (
+          <Box paddingX={0} marginBottom={0}>
+            <Text color={theme.colors.text.muted} dimColor>
+              {pasteNotification}
+            </Text>
+          </Box>
+        )}
+        {/* Thinking indicator — Claude Code style: minimal */}
+        <Box paddingX={0} marginBottom={0}>
+          {thinkingLabel ? (
+            <Text color={theme.colors.text.muted} dimColor>
+              {thinkingLabel}
+              {pendingCommands.length > 0 && <Text dimColor> · queued: {pendingCommands.length}</Text>}
+            </Text>
+          ) : null}
+        </Box>
+
+        {/* 输入框 — Claude Code style: no border, just prompt + input */}
+        <Box
+          flexDirection="row"
+          paddingX={0}
+          paddingY={0}
+        >
+          {/* Spinner while AI works, □ when idle */}
+          <Box marginRight={1}>
+            <PromptGlyph
+              isProcessing={isProcessing}
+              lockedIn={currentCommand !== null}
+              glowPhase={glowPhase}
+              color={theme.colors.primary}
+              idleColor={theme.colors.primary}
+            />
+          </Box>
+
+          {/* 输入框 - 始终启用，支持命令队列 */}
+          <Box flexGrow={1}>
+            <CustomTextInput
+              value={input}
+              cursorPosition={cursorPosition}
+              onChange={handleChange}
+              onChangeCursorPosition={handleChangeCursorPosition}
+              onSubmit={handleSubmit}
+              onPaste={handlePaste}
+              onArrowUp={handleArrowUpInternal}
+              onArrowDown={handleArrowDownInternal}
+              placeholder={placeholder}
+              focusId={FocusId.MAIN_INPUT}
+              disabled={false}
+              cursorOn={cursorOn}
+            />
+          </Box>
+        </Box>
+
+        {/* Command suggestions — below the input bar */}
+        {showSuggestions && (
+          <CommandSuggestions
+            input={input}
+            cursorPosition={cursorPosition}
+            onSelectSuggestion={handleSelectSuggestion}
+            visible={showSuggestions}
+          />
+        )}
+
+        {/* Prompt suggestions — disabled */}
+      </Box>
+    );
+  },
+  // 自定义比较函数：始终返回 true，因为回调通过 ref 访
+  // 这样 props 变化不会触发重新渲
+  () => false
+);
+
+InputArea.displayName = 'InputArea';
+
+export default InputArea;

package/src/ui/components/input/PromptSuggestions.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Box, Text, useInput } from 'ink';
+import { themeManager } from '../../themes/index.js';
+import { FocusId, focusManager } from '../../focus/index.js';
+
+const SUGGESTIONS = [
+  { label: 'Explain codebase',    text: 'Explain this codebase — what does it do and how is it structured?' },
+  { label: 'Fix a bug',           text: 'Find and fix the bug: ' },
+  { label: 'Write tests',         text: 'Write tests for ' },
+  { label: 'Refactor',            text: 'Refactor this to be cleaner and more maintainable: ' },
+  { label: 'Review changes',      text: 'Review my recent git changes and flag any issues' },
+  { label: 'Add feature',         text: 'Implement a new feature: ' },
+];
+
+interface PromptSuggestionsProps {
+  onSelect: (text: string) => void;
+  visible: boolean;
+}
+
+export const PromptSuggestions: React.FC<PromptSuggestionsProps> = ({ onSelect, visible }) => {
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const theme = themeManager.getTheme();
+
+  useInput(
+    (_, key) => {
+      if (!visible) return;
+      if (focusManager.getCurrentFocus() !== FocusId.MAIN_INPUT) return;
+
+      if (key.tab && !key.shift) {
+        setSelectedIndex(i => (i + 1) % SUGGESTIONS.length);
+        return;
+      }
+      if (key.tab && key.shift) {
+        setSelectedIndex(i => (i <= 0 ? SUGGESTIONS.length - 1 : i - 1));
+        return;
+      }
+      if (key.return) {
+        onSelect(SUGGESTIONS[selectedIndex].text);
+      }
+    },
+    { isActive: visible }
+  );
+
+  if (!visible) return null;
+
+  return (
+    <Box flexDirection="row" paddingX={2} marginTop={0} flexWrap="wrap">
+      {SUGGESTIONS.map((s, i) => {
+        const isSelected = i === selectedIndex;
+        return (
+          <Box key={s.label} marginRight={2}>
+            <Text
+              color={isSelected ? theme.colors.primary : theme.colors.text.muted}
+              bold={isSelected}
+              dimColor={!isSelected}
+            >
+              {isSelected ? '▸ ' : '  '}{s.label}
+            </Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};
+
+export default PromptSuggestions;

package/src/ui/components/input/index.ts

@@ -0,0 +1,6 @@
+/**
+ * 
+ */
+
+export { CustomTextInput } from './CustomTextInput.js';
+export { InputArea } from './InputArea.js';