Function SessionPreview

src/components/SessionPreview.tsx:18–102

({ log, onExit, onSelect }: Props)

};

export function SessionPreview({ log, onExit, onSelect }: Props): React.ReactNode {
  // fullLog holds the complete log with messages loaded.
  // The input `log` may be a "lite log" (empty messages array),
  // so we load the full messages on mount and store them here.
  const [fullLog, setFullLog] = React.useState<LogOption | null>(null);

  // Load full messages if this is a lite log
  React.useEffect(() => {
    setFullLog(null);
    if (isLiteLog(log)) {
      void loadFullLog(log).then(setFullLog);
    }
  }, [log]);

  const isLoading = isLiteLog(log) && fullLog === null;
  const displayLog = fullLog ?? log;
  const conversationId = getSessionIdFromLog(displayLog) || ('' as UUID);

  // Get all base tools for preview (no permissions needed for read-only view)
  const tools = getAllBaseTools();

  // Handle keyboard input via keybindings
  useKeybinding('confirm:no', onExit, { context: 'Confirmation' });

  const handleSelect = useCallback(() => {
    onSelect(fullLog ?? log);
  }, [onSelect, fullLog, log]);

  useKeybinding('confirm:yes', handleSelect, { context: 'Confirmation' });

  // Show loading state while fetching full log
  if (isLoading) {
    return (
      <Box flexDirection="column" padding={1}>
        <LoadingState message="Loading session…" />
        <Text dimColor>
          <Byline>
            <ConfigurableShortcutHint action="confirm:no" context="Confirmation" fallback="Esc" description="cancel" />
          </Byline>
        </Text>
      </Box>
    );
  }

  return (
    <Box flexDirection="column">
      <Messages
        messages={displayLog.messages}
        tools={tools}
        commands={[]}
        verbose={true}
        toolJSX={null}
        toolUseConfirmQueue={[]}
        inProgressToolUseIDs={new Set()}
        isMessageSelectorVisible={false}
        conversationId={conversationId}
        screen="transcript"
        streamingToolUses={[]}