Function App

src/cli/ui.tsx:74–734

(props: AppProps)

}

export function App(props: AppProps): React.ReactElement {
  const { exit } = useApp();
  // Pre-compute resumed-session metadata for the welcome banner
  const resumedMeta = (() => {
    if (!props.resumeSessionId) return undefined;
    try {
      const loaded = getSessionStore().loadSession(props.resumeSessionId);
      if (loaded) return { id: props.resumeSessionId, turnCount: loaded.meta.turn_count };
    } catch { /* ignore */ }
    return undefined;
  })();
  const [history, setHistory] = useState<HistoryItem[]>(() => {
    // On resume, repaint the prior Q&A so the user sees the conversation they're
    // continuing — not a blank screen. (The model's context is rehydrated separately
    // via `messages` below; this is purely the on-screen transcript.)
    if (props.resumeSessionId) {
      try {
        const loaded = getSessionStore().loadSession(props.resumeSessionId);
        if (loaded) return messagesToHistory(loaded.messages);
      } catch { /* ignore — fall back to empty */ }
    }
    return [];
  });
  const [input, setInput] = useState('');
  // Type-ahead queue: prompts the user submits while a turn is running. They run
  // one at a time as soon as the agent goes idle (drained by an effect below), so
  // the input box stays usable mid-task — like Claude Code's queued input.
  const [queued, setQueued] = useState<string[]>([]);
  // Bumped after each queued prompt finishes to re-trigger the drain effect even
  // when the prompt didn't flip `busy` (e.g. an instant slash command).
  const [drainTick, setDrainTick] = useState(0);
  const dispatchingRef = useRef(false);
  // Up/Down-arrow recall of previously submitted prompts (shell-style history),
  // consumed by ChatInput.
  const promptHistoryRef = useRef<string[]>([]);
  const [busy, setBusy] = useState(false);
  const [streamingText, setStreamingText] = useState('');
  const [activeTools, setActiveTools] = useState<Array<{ id: string; name: string; partialArgs: string }>>([]);
  const [pendingPrompt, setPendingPrompt] = useState<PendingPrompt | null>(null);
  const [sessionId, setSessionId] = useState<string>(() => {
    const store = getSessionStore();
    if (props.resumeSessionId) {
      const loaded = store.loadSession(props.resumeSessionId);
      if (loaded) return props.resumeSessionId;
    }
    return store.createSession(props.cwd, props.config.defaults.model);
  });
  const [messages, setMessages] = useState<Message[]>(() => {
    if (props.resumeSessionId) {
      const loaded = getSessionStore().loadSession(props.resumeSessionId);
      if (loaded) return loaded.messages;
    }
    return [];
  });
  const [mode, setMode] = useState<'normal' | 'plan'>('normal');
  // Gates the main UI behind the animated boot splash. Flips to true when the splash
  // finishes (or immediately when motion is disabled / not a TTY).
  const [booted, setBooted] = useState(false);