Function SessionSelector

extensions/cli/src/ui/SessionSelector.tsx:39–208

({
  sessions,
  onSelect,
  onExit,
}: SessionSelectorProps)

}

export function SessionSelector({
  sessions,
  onSelect,
  onExit,
}: SessionSelectorProps) {
  const [selectedIndex, setSelectedIndex] = useState(0);
  const [previewSession, setPreviewSession] = useState<Session | null>(null);
  const { rows: terminalHeight, columns: terminalWidth } = useTerminalSize();

  // Load the selected session for preview
  useEffect(() => {
    const selectedSession = sessions[selectedIndex];
    if (selectedSession && !selectedSession.isRemote) {
      const session = loadSessionById(selectedSession.sessionId);
      setPreviewSession(session);
    } else {
      setPreviewSession(null);
    }
  }, [selectedIndex, sessions]);

  // Calculate how many sessions we can display based on terminal height and scrolling
  const { displaySessions, scrollOffset } = useMemo(() => {
    // Account for:
    // - Box border (top + bottom): 2 lines
    // - Box padding (top + bottom): 2 lines
    // - Header "Recent Sessions": 1 line
    // - Instructions line: 1 line
    // - Empty line after instructions: 1 line
    // - Potential scroll indicators: up to 2 lines (1 above, 1 below)
    // Total overhead: ~9 lines
    const MAGIC_NUMBER = 9;
    const availableHeight = Math.max(1, terminalHeight - MAGIC_NUMBER);
    const maxDisplayableSessions = Math.floor(availableHeight / 3);

    // If we can display all sessions, no need to scroll
    if (sessions.length <= maxDisplayableSessions) {
      return { displaySessions: sessions, scrollOffset: 0 };
    }

    // Calculate scroll offset to keep selected item visible
    let scrollOffset = 0;
    if (selectedIndex >= maxDisplayableSessions) {
      scrollOffset = Math.min(
        selectedIndex - maxDisplayableSessions + 1,
        sessions.length - maxDisplayableSessions,
      );
    }

    const displaySessions = sessions.slice(
      scrollOffset,
      scrollOffset + maxDisplayableSessions,
    );
    return { displaySessions, scrollOffset };
  }, [sessions, terminalHeight, selectedIndex]);

  useInput((input, key) => {
    if (key.upArrow || input === "k") {
      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : sessions.length - 1));