@supatest/cli 0.0.4 → 0.0.5

package/dist/ui/components/InputPrompt.js

@@ -0,0 +1,286 @@
+/**
+ * Input Prompt Component
+ * Multi-line input field for entering tasks
+ * Supports:
+ * - File autocompletion (@filename)
+ * - Slash commands (handled by parent)
+ */
+import path from "node:path";
+import chalk from "chalk";
+import { Box, Text } from "ink";
+import React, { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import { useSession } from "../contexts/SessionContext.js";
+import { useKeypress } from "../hooks/useKeypress.js";
+import { getFiles } from "../utils/file-completion.js";
+import { theme } from "../utils/theme.js";
+export const InputPrompt = forwardRef(({ onSubmit, placeholder = "Enter your task (press Enter to submit, Shift+Enter for new line)...", disabled = false, onHelpToggle, currentFolder, gitBranch, onInputChange, }, ref) => {
+    const { messages, agentMode } = useSession();
+    const [value, setValue] = useState("");
+    const [cursorOffset, setCursorOffset] = useState(0);
+    // Autocomplete State
+    const [allFiles, setAllFiles] = useState([]);
+    const [suggestions, setSuggestions] = useState([]);
+    const [activeSuggestion, setActiveSuggestion] = useState(0);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [mentionStartIndex, setMentionStartIndex] = useState(-1);
+    // Slash Command State
+    const SLASH_COMMANDS = [
+        { name: "/help", desc: "Show help" },
+        { name: "/resume", desc: "Resume session" },
+        { name: "/clear", desc: "Clear history" },
+        { name: "/setup", desc: "Install Playwright browsers" },
+        { name: "/login", desc: "Authenticate with Supatest" },
+        { name: "/logout", desc: "Log out" },
+        { name: "/exit", desc: "Exit CLI" }
+    ];
+    const [isSlashCommand, setIsSlashCommand] = useState(false);
+    useImperativeHandle(ref, () => ({
+        clear: () => {
+            setValue("");
+            setCursorOffset(0);
+            setShowSuggestions(false);
+            onInputChange?.("");
+        }
+    }));
+    // Load files on mount
+    useEffect(() => {
+        // Load files asynchronously to avoid blocking initial render
+        setTimeout(() => {
+            try {
+                const files = getFiles();
+                setAllFiles(files);
+            }
+            catch (e) {
+                // Ignore errors
+            }
+        }, 100);
+    }, []);
+    const updateValue = (newValue, newCursor) => {
+        setValue(newValue);
+        setCursorOffset(newCursor);
+        checkSuggestions(newValue, newCursor);
+        onInputChange?.(newValue);
+    };
+    const checkSuggestions = (text, cursor) => {
+        // 1. Check for Slash Commands (must be at start)
+        if (text.startsWith("/") && cursor <= text.length && !text.includes(" ", 1)) {
+            const query = text.slice(1); // Remove '/'
+            const matches = SLASH_COMMANDS
+                .filter(cmd => cmd.name.slice(1).startsWith(query.toLowerCase()))
+                .map(cmd => `${cmd.name}  ${cmd.desc}`);
+            if (matches.length > 0) {
+                setSuggestions(matches);
+                setShowSuggestions(true);
+                setActiveSuggestion(0);
+                setIsSlashCommand(true);
+                return;
+            }
+        }
+        setIsSlashCommand(false);
+        // 2. Check for File Mentions
+        const textBeforeCursor = text.slice(0, cursor);
+        const lastAt = textBeforeCursor.lastIndexOf("@");
+        if (lastAt !== -1) {
+            // Check if @ is at start or preceded by whitespace
+            const isValidStart = lastAt === 0 || /\s/.test(textBeforeCursor[lastAt - 1]);
+            if (isValidStart) {
+                const query = textBeforeCursor.slice(lastAt + 1);
+                // Stop suggestions if query contains whitespace (end of mention)
+                if (!/\s/.test(query)) {
+                    const matches = allFiles
+                        .filter((f) => f.toLowerCase().includes(query.toLowerCase()))
+                        .slice(0, 5); // Limit to 5 suggestions
+                    if (matches.length > 0) {
+                        setSuggestions(matches);
+                        setShowSuggestions(true);
+                        setActiveSuggestion(0);
+                        setMentionStartIndex(lastAt);
+                        return;
+                    }
+                }
+            }
+        }
+        setShowSuggestions(false);
+    };
+    const completeSuggestion = (submit = false) => {
+        if (!showSuggestions || suggestions.length === 0)
+            return;
+        // Handle Slash Command Completion
+        if (isSlashCommand) {
+            const selectedCmd = suggestions[activeSuggestion].split(" ")[0];
+            if (submit) {
+                onSubmit(selectedCmd);
+                setValue("");
+                setCursorOffset(0);
+                setShowSuggestions(false);
+                onInputChange?.("");
+                return;
+            }
+            updateValue(selectedCmd, selectedCmd.length);
+            setShowSuggestions(false);
+            return;
+        }
+        const selectedFile = suggestions[activeSuggestion];
+        const textBeforeMention = value.slice(0, mentionStartIndex);
+        const textAfterCursor = value.slice(cursorOffset);
+        // Add @ + filename + space
+        const newValue = textBeforeMention + "@" + selectedFile + " " + textAfterCursor;
+        const newCursor = mentionStartIndex + 1 + selectedFile.length + 1;
+        updateValue(newValue, newCursor);
+        setShowSuggestions(false);
+    };
+    useKeypress((key) => {
+        if (disabled)
+            return;
+        const input = key.sequence;
+        // Mouse events are now filtered by KeypressContext
+        // So we don't need to check for them here
+        // Handle Paste / Drag & Drop (file paths)
+        if (input.length > 1 && (input.includes("/") || input.includes("\\"))) {
+            let cleanPath = input.trim();
+            // Remove surrounding quotes
+            if ((cleanPath.startsWith('"') && cleanPath.endsWith('"')) ||
+                (cleanPath.startsWith("'") && cleanPath.endsWith("'"))) {
+                cleanPath = cleanPath.slice(1, -1);
+            }
+            // Remove escaped spaces
+            cleanPath = cleanPath.replace(/\\ /g, " ");
+            // If it looks like an absolute path, treat as file drop
+            if (path.isAbsolute(cleanPath)) {
+                try {
+                    const cwd = process.cwd();
+                    const rel = path.relative(cwd, cleanPath);
+                    if (!rel.startsWith("..") && !path.isAbsolute(rel)) {
+                        cleanPath = rel;
+                    }
+                }
+                catch (e) {
+                    // Ignore
+                }
+                const charBefore = value[cursorOffset - 1];
+                const prefix = charBefore === "@" ? "" : "@";
+                const toInsert = prefix + cleanPath + " ";
+                const newValue = value.slice(0, cursorOffset) + toInsert + value.slice(cursorOffset);
+                updateValue(newValue, cursorOffset + toInsert.length);
+                return;
+            }
+        }
+        // Toggle Help
+        if (input === "?" && value.length === 0 && onHelpToggle) {
+            onHelpToggle();
+            return;
+        }
+        // Handle Autocomplete Navigation (only without shift modifier)
+        // Let Shift+Up/Down pass through for scrolling
+        if (showSuggestions && !key.shift) {
+            if (key.name === 'up') {
+                setActiveSuggestion((prev) => prev > 0 ? prev - 1 : suggestions.length - 1);
+                return;
+            }
+            if (key.name === 'down') {
+                setActiveSuggestion((prev) => prev < suggestions.length - 1 ? prev + 1 : 0);
+                return;
+            }
+            if (key.name === 'tab' || key.name === 'return') {
+                completeSuggestion(key.name === 'return');
+                return;
+            }
+            if (key.name === 'escape') {
+                setShowSuggestions(false);
+                return;
+            }
+        }
+        // Standard Input Handling
+        if (key.name === 'return') {
+            if (key.shift) {
+                // Shift+Enter: Add newline
+                const newValue = value.slice(0, cursorOffset) + "\n" + value.slice(cursorOffset);
+                updateValue(newValue, cursorOffset + 1);
+            }
+            else {
+                // Enter: Submit
+                if (value.trim()) {
+                    onSubmit(value.trim());
+                    setValue("");
+                    setCursorOffset(0);
+                    setShowSuggestions(false);
+                    onInputChange?.("");
+                }
+            }
+        }
+        else if (key.name === 'backspace' || key.name === 'delete') {
+            if (cursorOffset > 0) {
+                const newValue = value.slice(0, cursorOffset - 1) + value.slice(cursorOffset);
+                updateValue(newValue, cursorOffset - 1);
+            }
+        }
+        else if (key.name === 'left') {
+            setCursorOffset(Math.max(0, cursorOffset - 1));
+        }
+        else if (key.name === 'right') {
+            setCursorOffset(Math.min(value.length, cursorOffset + 1));
+        }
+        else if (key.ctrl && input === "u") {
+            updateValue("", 0);
+        }
+        else if (key.name === 'tab' && !showSuggestions) {
+            // Ignore tab if no suggestions (prevents focus loss if mapped)
+        }
+        else if (key.paste) {
+            // Handle paste events (Cmd+V, bracketed paste)
+            const newValue = value.slice(0, cursorOffset) + input + value.slice(cursorOffset);
+            updateValue(newValue, cursorOffset + input.length);
+        }
+        else if (key.insertable && input) {
+            // Only insert if the key is actually insertable (not arrow keys, etc.)
+            const newValue = value.slice(0, cursorOffset) + input + value.slice(cursorOffset);
+            updateValue(newValue, cursorOffset + input.length);
+        }
+    }, { isActive: !disabled });
+    // Split into lines for display and calculate cursor position
+    const lines = value ? value.split("\n") : [];
+    const hasContent = value.trim().length > 0;
+    // Calculate which line and column the cursor should be on
+    let cursorLine = 0;
+    let cursorCol = cursorOffset;
+    let charCount = 0;
+    for (let i = 0; i < lines.length; i++) {
+        const lineLength = lines[i].length;
+        if (charCount + lineLength >= cursorOffset) {
+            cursorLine = i;
+            cursorCol = cursorOffset - charCount;
+            break;
+        }
+        charCount += lineLength + 1; // +1 for newline character
+    }
+    return (React.createElement(Box, { flexDirection: "column", width: "100%" },
+        showSuggestions && (React.createElement(Box, { borderColor: theme.border.default, borderStyle: "round", flexDirection: "column", marginBottom: 0, paddingX: 1 }, suggestions.map((file, idx) => (React.createElement(Text, { color: idx === activeSuggestion ? theme.text.accent : theme.text.dim, key: file },
+            idx === activeSuggestion ? "❯ " : "  ",
+            " ",
+            file))))),
+        React.createElement(Box, { borderColor: disabled ? theme.border.default : theme.border.accent, borderStyle: "round", flexDirection: "column", marginBottom: 0, minHeight: 3, paddingX: 1, width: "100%" },
+            React.createElement(Box, { flexDirection: "row" },
+                React.createElement(Text, { color: theme.text.accent }, "\u276F "),
+                React.createElement(Box, { flexDirection: "column", flexGrow: 1 },
+                    !hasContent && !disabled && (React.createElement(Text, null,
+                        chalk.inverse(placeholder.slice(0, 1)),
+                        React.createElement(Text, { color: theme.text.dim, italic: true }, placeholder.slice(1)))),
+                    lines.length > 0 && (React.createElement(Box, { flexDirection: "column" }, lines.map((line, idx) => {
+                        // Insert cursor at the correct position
+                        if (idx === cursorLine && !disabled) {
+                            const before = line.slice(0, cursorCol);
+                            const charAtCursor = line[cursorCol] || ' ';
+                            const after = line.slice(cursorCol + 1);
+                            return (React.createElement(Text, { color: theme.text.primary, key: idx },
+                                before,
+                                chalk.inverse(charAtCursor),
+                                after));
+                        }
+                        return (React.createElement(Text, { color: theme.text.primary, key: idx }, line));
+                    }))),
+                    !hasContent && disabled && (React.createElement(Text, { color: theme.text.dim, italic: true }, "Waiting for agent to complete..."))))),
+        React.createElement(Box, { paddingX: 1 },
+            React.createElement(Text, { color: agentMode === "plan" ? theme.status.inProgress : theme.text.dim }, agentMode === "plan" ? "⏸ plan mode on" : "▶ build mode"),
+            React.createElement(Text, { color: theme.text.dim }, " (shift+tab to cycle)"))));
+});
+InputPrompt.displayName = "InputPrompt";

package/dist/ui/components/MessageList.js

@@ -0,0 +1,42 @@
+/**
+ * Message List Component
+ * Displays all messages in the conversation
+ */
+import { Box } from "ink";
+import React from "react";
+import { useSession } from "../contexts/SessionContext.js";
+import { Header } from "./Header.js";
+import { AssistantMessage } from "./messages/AssistantMessage.js";
+import { ErrorMessage } from "./messages/ErrorMessage.js";
+import { LoadingMessage } from "./messages/LoadingMessage.js";
+import { ThinkingMessage } from "./messages/ThinkingMessage.js";
+import { TodoMessage } from "./messages/TodoMessage.js";
+import { ToolMessage } from "./messages/ToolMessage.js";
+import { UserMessage } from "./messages/UserMessage.js";
+import { Scrollable } from "./Scrollable.js";
+export const MessageList = ({ terminalWidth, currentFolder, gitBranch }) => {
+    const { messages, updateMessageById, isAgentRunning } = useSession();
+    const renderMessage = (message) => {
+        switch (message.type) {
+            case "user":
+                return React.createElement(UserMessage, { key: message.id, text: message.content });
+            case "assistant":
+                return (React.createElement(AssistantMessage, { isPending: message.isPending, key: message.id, terminalWidth: terminalWidth, text: message.content }));
+            case "tool":
+                return (React.createElement(ToolMessage, { description: message.content, id: message.id, input: message.toolInput, isExpanded: message.isExpanded, key: message.id, onToggle: (id) => updateMessageById(id, { isExpanded: !message.isExpanded }), result: message.toolResult, toolName: message.toolName || "Unknown" }));
+            case "thinking":
+                return (React.createElement(ThinkingMessage, { content: message.content, id: message.id, isExpanded: message.isExpanded, key: message.id, onToggle: (id) => updateMessageById(id, { isExpanded: !message.isExpanded }) }));
+            case "error":
+                return (React.createElement(ErrorMessage, { key: message.id, message: message.content, type: message.errorType || "error" }));
+            case "todo":
+                return React.createElement(TodoMessage, { key: message.id, todos: message.todos || [] });
+            default:
+                return null;
+        }
+    };
+    return (React.createElement(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden" },
+        React.createElement(Scrollable, { scrollToBottom: true },
+            React.createElement(Header, { currentFolder: currentFolder, gitBranch: gitBranch, key: "header" }),
+            messages.map((message) => (React.createElement(Box, { flexDirection: "column", key: message.id, width: "100%" }, renderMessage(message)))),
+            isAgentRunning && !messages.some(m => m.type === "assistant" && m.isPending) && (React.createElement(LoadingMessage, { key: "loading" })))));
+};

package/dist/ui/components/QueuedMessageDisplay.js

@@ -0,0 +1,31 @@
+import { Box, Text } from "ink";
+import React from "react";
+import { theme } from "../utils/theme.js";
+const MAX_DISPLAYED_QUEUED_MESSAGES = 3;
+export const QueuedMessageDisplay = ({ messageQueue, }) => {
+    if (messageQueue.length === 0) {
+        return null;
+    }
+    return (React.createElement(Box, { borderColor: theme.border.default, borderStyle: "round", flexDirection: "column", marginBottom: 1, marginTop: 0, paddingX: 1 },
+        React.createElement(Box, { marginBottom: 0 },
+            React.createElement(Text, { bold: true, color: theme.text.secondary },
+                "Queued (",
+                messageQueue.length,
+                ")")),
+        messageQueue
+            .slice(0, MAX_DISPLAYED_QUEUED_MESSAGES)
+            .map((message, index) => {
+            const preview = message.replace(/\s+/g, " ");
+            return (React.createElement(Box, { key: index, width: "100%" },
+                React.createElement(Text, { color: theme.text.dim },
+                    " ",
+                    index + 1,
+                    ". "),
+                React.createElement(Text, { color: theme.text.primary, wrap: "truncate" }, preview)));
+        }),
+        messageQueue.length > MAX_DISPLAYED_QUEUED_MESSAGES && (React.createElement(Box, null,
+            React.createElement(Text, { color: theme.text.dim, italic: true },
+                "... (+",
+                messageQueue.length - MAX_DISPLAYED_QUEUED_MESSAGES,
+                " more)")))));
+};

package/dist/ui/components/Scrollable.js

@@ -0,0 +1,103 @@
+/**
+ * Scrollable wrapper component
+ * Provides smooth scrolling with a thin, animated scrollbar
+ */
+import { Box, getInnerHeight, getScrollHeight } from "ink";
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
+import { useMouse } from "../contexts/MouseContext";
+import { useAnimatedScrollbar } from "../hooks/useAnimatedScrollbar";
+import { useBatchedScroll } from "../hooks/useBatchedScroll";
+import { useKeypress } from "../hooks/useKeypress";
+export const Scrollable = ({ children, flexGrow, scrollToBottom, hasFocus = true, }) => {
+    const [scrollTop, setScrollTop] = useState(0);
+    const ref = useRef(null);
+    const [size, setSize] = useState({
+        innerHeight: 0,
+        scrollHeight: 0,
+    });
+    const sizeRef = useRef(size);
+    useEffect(() => {
+        sizeRef.current = size;
+    }, [size]);
+    const childrenCountRef = useRef(0);
+    // Track previous values to avoid unnecessary state updates
+    const prevSizeRef = useRef({ innerHeight: 0, scrollHeight: 0 });
+    const prevScrollTopRef = useRef(0);
+    // Measure container and auto-scroll to bottom when content changes
+    // Use a ref to batch updates and avoid cascading re-renders
+    useLayoutEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const innerHeight = Math.round(getInnerHeight(ref.current));
+        const scrollHeight = Math.round(getScrollHeight(ref.current));
+        const prevSize = prevSizeRef.current;
+        const sizeChanged = prevSize.innerHeight !== innerHeight || prevSize.scrollHeight !== scrollHeight;
+        // Only update if size actually changed
+        if (sizeChanged) {
+            prevSizeRef.current = { innerHeight, scrollHeight };
+            // Check if we were at bottom before the change (use previous values)
+            const wasAtBottom = prevScrollTopRef.current >= prevSize.scrollHeight - prevSize.innerHeight - 1;
+            // Batch size and scroll updates together
+            const newScrollTop = wasAtBottom ? Math.max(0, scrollHeight - innerHeight) : scrollTop;
+            // Only trigger state updates if values actually changed
+            if (size.innerHeight !== innerHeight || size.scrollHeight !== scrollHeight) {
+                setSize({ innerHeight, scrollHeight });
+            }
+            if (wasAtBottom && newScrollTop !== scrollTop) {
+                prevScrollTopRef.current = newScrollTop;
+                setScrollTop(newScrollTop);
+            }
+        }
+        const childCountCurrent = React.Children.count(children);
+        // Only auto-scroll to bottom if user was already at bottom or near bottom
+        if (scrollToBottom && childrenCountRef.current !== childCountCurrent) {
+            const wasAtBottom = scrollTop >= size.scrollHeight - size.innerHeight - 1;
+            if (wasAtBottom) {
+                const newScrollTop = Math.max(0, scrollHeight - innerHeight);
+                if (newScrollTop !== scrollTop) {
+                    prevScrollTopRef.current = newScrollTop;
+                    setScrollTop(newScrollTop);
+                }
+            }
+        }
+        childrenCountRef.current = childCountCurrent;
+    });
+    const { getScrollTop, setPendingScrollTop } = useBatchedScroll(scrollTop);
+    const scrollBy = useCallback((delta) => {
+        const { scrollHeight, innerHeight } = sizeRef.current;
+        const current = getScrollTop();
+        const next = Math.min(Math.max(0, current + delta), Math.max(0, scrollHeight - innerHeight));
+        setPendingScrollTop(next);
+        setScrollTop(next);
+    }, [getScrollTop, setPendingScrollTop]);
+    const { scrollbarColor, scrollByWithAnimation } = useAnimatedScrollbar(hasFocus, scrollBy, {
+        focusedColor: "#6C7086", // gemini-cli's text.secondary
+        unfocusedColor: "#454759", // interpolated between #6C7086 and #1E1E2E
+    });
+    // Handle keyboard scrolling with Shift+Up/Down
+    // Regular Up/Down is reserved for menu navigation (autocomplete)
+    // Uses KeypressContext to filter out mouse events
+    useKeypress((key) => {
+        if (key.name === 'up' && key.shift) {
+            scrollByWithAnimation(-3); // Scroll 3 lines at a time for smoother feel
+        }
+        else if (key.name === 'down' && key.shift) {
+            scrollByWithAnimation(3);
+        }
+    }, { isActive: hasFocus });
+    // Handle mouse/trackpad scrolling
+    useMouse((event) => {
+        if (event.name === 'scroll-up') {
+            scrollByWithAnimation(-3);
+            return true; // Mark as handled
+        }
+        else if (event.name === 'scroll-down') {
+            scrollByWithAnimation(3);
+            return true; // Mark as handled
+        }
+        return false;
+    }, { isActive: hasFocus });
+    return (React.createElement(Box, { flexDirection: "column", flexGrow: flexGrow ?? 1, height: "100%", overflowX: "hidden", overflowY: "scroll", paddingRight: 1, ref: ref, scrollbarThumbColor: scrollbarColor, scrollTop: scrollTop, width: "100%" },
+        React.createElement(Box, { flexDirection: "column", flexShrink: 0, width: "100%" }, children)));
+};

package/dist/ui/components/SessionSelector.js

@@ -0,0 +1,196 @@
+/**
+ * Session Selector Component
+ * Displays a list of sessions for the user to select from with pagination
+ */
+import { Box, Text, useInput } from "ink";
+import React, { useEffect, useState } from "react";
+import { theme } from "../utils/theme.js";
+const PAGE_SIZE = 20;
+const VISIBLE_ITEMS = 10;
+/**
+ * Determine if a session is "Me" or "Team" based on authMethod
+ */
+function getSessionPrefix(authMethod) {
+    return authMethod === "api-key" ? "[Team]" : "[Me]";
+}
+export const SessionSelector = ({ apiClient, onSelect, onCancel, }) => {
+    const [allSessions, setAllSessions] = useState([]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [isLoading, setIsLoading] = useState(false);
+    const [hasMore, setHasMore] = useState(true);
+    const [totalSessions, setTotalSessions] = useState(0);
+    const [error, setError] = useState(null);
+    // Load initial page
+    useEffect(() => {
+        loadMoreSessions();
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    const loadMoreSessions = async () => {
+        if (isLoading || !hasMore) {
+            return;
+        }
+        setIsLoading(true);
+        setError(null);
+        try {
+            const offset = allSessions.length;
+            const result = await apiClient.getSessions(PAGE_SIZE, offset);
+            const newSessions = result.sessions.map((s) => ({
+                session: s,
+                prefix: getSessionPrefix(s.authMethod),
+            }));
+            setTotalSessions(result.pagination.total);
+            setHasMore(offset + result.sessions.length < result.pagination.total);
+            setAllSessions((prev) => [...prev, ...newSessions]);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+            setHasMore(false);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    useInput((input, key) => {
+        if (allSessions.length === 0) {
+            if (key.escape || input === "q") {
+                onCancel();
+            }
+            return;
+        }
+        if (key.upArrow) {
+            setSelectedIndex((prev) => (prev > 0 ? prev - 1 : allSessions.length - 1));
+        }
+        else if (key.downArrow) {
+            const newIndex = selectedIndex < allSessions.length - 1 ? selectedIndex + 1 : 0;
+            setSelectedIndex(newIndex);
+            // Load more when approaching the end
+            if (newIndex >= allSessions.length - 3 && hasMore && !isLoading) {
+                loadMoreSessions();
+            }
+        }
+        else if (key.return) {
+            if (allSessions[selectedIndex]) {
+                onSelect(allSessions[selectedIndex].session);
+            }
+        }
+        else if (key.escape || input === "q") {
+            onCancel();
+        }
+    });
+    if (error) {
+        return (React.createElement(Box, { borderColor: "red", borderStyle: "round", flexDirection: "column", padding: 1 },
+            React.createElement(Text, { bold: true, color: "red" }, "Error Loading Sessions"),
+            React.createElement(Text, { color: theme.text.dim }, error),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: theme.text.dim },
+                    "Press ",
+                    React.createElement(Text, { bold: true }, "ESC"),
+                    " to cancel"))));
+    }
+    if (allSessions.length === 0 && isLoading) {
+        return (React.createElement(Box, { borderColor: "cyan", borderStyle: "round", flexDirection: "column", padding: 1 },
+            React.createElement(Text, { bold: true, color: "cyan" }, "Loading Sessions..."),
+            React.createElement(Text, { color: theme.text.dim }, "Fetching your sessions from the server")));
+    }
+    if (allSessions.length === 0 && !isLoading) {
+        return (React.createElement(Box, { borderColor: "yellow", borderStyle: "round", flexDirection: "column", padding: 1 },
+            React.createElement(Text, { bold: true, color: "yellow" }, "No Sessions Found"),
+            React.createElement(Text, { color: theme.text.dim }, "No previous sessions available. Start a new conversation!"),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: theme.text.dim },
+                    "Press ",
+                    React.createElement(Text, { bold: true }, "ESC"),
+                    " to cancel"))));
+    }
+    // Calculate the visible window of sessions
+    const VISIBLE_ITEMS = 10;
+    // Calculate start and end indices for the visible window
+    // Always try to center the selected item, but adjust for boundaries
+    let startIndex;
+    let endIndex;
+    if (allSessions.length <= VISIBLE_ITEMS) {
+        // Show all sessions if we have fewer than the visible limit
+        startIndex = 0;
+        endIndex = allSessions.length;
+    }
+    else {
+        // Try to center the selected item
+        const halfWindow = Math.floor(VISIBLE_ITEMS / 2);
+        startIndex = Math.max(0, selectedIndex - halfWindow);
+        endIndex = startIndex + VISIBLE_ITEMS;
+        // If we're near the end, adjust to show the last N items
+        if (endIndex > allSessions.length) {
+            endIndex = allSessions.length;
+            startIndex = Math.max(0, endIndex - VISIBLE_ITEMS);
+        }
+    }
+    const visibleSessions = allSessions.slice(startIndex, endIndex);
+    // Calculate max title length for proper alignment
+    const MAX_TITLE_WIDTH = 50;
+    const PREFIX_WIDTH = 6; // "[Me] " or "[Team] "
+    return (React.createElement(Box, { borderColor: "cyan", borderStyle: "round", flexDirection: "column", padding: 1 },
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { bold: true, color: "cyan" }, "Select a Session to Resume")),
+        React.createElement(Box, { flexDirection: "column" }, visibleSessions.map((item, index) => {
+            const actualIndex = startIndex + index;
+            const isSelected = actualIndex === selectedIndex;
+            const title = item.session.title || "Untitled session";
+            // Truncate and pad title to fixed width for alignment
+            let displayTitle = title.length > MAX_TITLE_WIDTH
+                ? `${title.slice(0, MAX_TITLE_WIDTH - 3)}...`
+                : title;
+            // Pad the title to fixed width
+            displayTitle = displayTitle.padEnd(MAX_TITLE_WIDTH, " ");
+            // Format date more compactly
+            const sessionDate = new Date(item.session.createdAt);
+            const now = new Date();
+            const isToday = sessionDate.toDateString() === now.toDateString();
+            const yesterday = new Date(now);
+            yesterday.setDate(yesterday.getDate() - 1);
+            const isYesterday = sessionDate.toDateString() === yesterday.toDateString();
+            let dateStr;
+            if (isToday) {
+                dateStr = `Today ${sessionDate.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })}`;
+            }
+            else if (isYesterday) {
+                dateStr = `Yesterday ${sessionDate.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })}`;
+            }
+            else {
+                dateStr = `${sessionDate.toLocaleDateString([], { month: "numeric", day: "numeric" })} ${sessionDate.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })}`;
+            }
+            const prefix = item.prefix.padEnd(PREFIX_WIDTH, " "); // Pad prefix to fixed width
+            const prefixColor = item.prefix === "[Me]" ? "cyan" : "yellow";
+            const indicator = isSelected ? "▶ " : "  ";
+            const bgColor = isSelected ? theme.text.accent : undefined;
+            return (React.createElement(Box, { key: item.session.id, width: "100%" },
+                React.createElement(Text, { backgroundColor: bgColor, bold: isSelected, color: isSelected ? "black" : theme.text.primary }, indicator),
+                React.createElement(Text, { backgroundColor: bgColor, bold: isSelected, color: prefixColor }, prefix),
+                React.createElement(Text, { backgroundColor: bgColor, bold: isSelected, color: isSelected ? "black" : theme.text.primary }, displayTitle),
+                React.createElement(Text, { backgroundColor: bgColor, color: theme.text.dim },
+                    "(",
+                    dateStr,
+                    ")",
+                    "\n")));
+        })),
+        React.createElement(Box, { flexDirection: "column", marginTop: 1 },
+            (allSessions.length > VISIBLE_ITEMS || totalSessions > allSessions.length) && (React.createElement(Box, { marginBottom: 1 },
+                React.createElement(Text, { color: "yellow" },
+                    "Showing ",
+                    startIndex + 1,
+                    "-",
+                    endIndex,
+                    " of ",
+                    totalSessions || allSessions.length,
+                    " sessions",
+                    hasMore && !isLoading && React.createElement(Text, { color: theme.text.dim }, " \u2022 Scroll for more")))),
+            React.createElement(Box, null,
+                React.createElement(Text, { color: theme.text.dim },
+                    "Use ",
+                    React.createElement(Text, { bold: true }, "\u2191\u2193"),
+                    " to navigate \u2022 ",
+                    React.createElement(Text, { bold: true }, "Enter"),
+                    " to select \u2022 ",
+                    React.createElement(Text, { bold: true }, "ESC"),
+                    " to cancel")),
+            isLoading && (React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: "cyan" }, "Loading more sessions..."))))));
+};