@supatest/cli 0.0.2 → 0.0.3

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..."))))));
+};

package/dist/ui/components/StatusBar.js

@@ -0,0 +1,45 @@
+/**
+ * Status Bar Component
+ * Displays session stats, web URL, and agent status
+ */
+import { Box, Text } from "ink";
+import React from "react";
+import { useSession } from "../contexts/SessionContext.js";
+import { theme } from "../utils/theme.js";
+function formatTokens(tokens) {
+    if (tokens >= 1000000)
+        return `${(tokens / 1000000).toFixed(1)}M`;
+    if (tokens >= 1000)
+        return `${(tokens / 1000).toFixed(1)}k`;
+    return tokens.toString();
+}
+export const StatusBar = () => {
+    const { stats, webUrl, isAgentRunning } = useSession();
+    const elapsedSeconds = Math.floor((Date.now() - stats.startTime) / 1000);
+    const minutes = Math.floor(elapsedSeconds / 60);
+    const seconds = elapsedSeconds % 60;
+    const timeStr = minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`;
+    return (React.createElement(Box, { borderColor: theme.border.default, borderStyle: "round", flexDirection: "column", paddingX: 1 },
+        React.createElement(Box, { flexDirection: "row", justifyContent: "space-between" },
+            React.createElement(Box, null,
+                React.createElement(Text, { color: theme.text.dim },
+                    "Files: ",
+                    React.createElement(Text, { color: theme.text.accent }, stats.filesModified.size)),
+                React.createElement(Text, { color: theme.text.dim }, " \u2022 "),
+                React.createElement(Text, { color: theme.text.dim },
+                    "Commands: ",
+                    React.createElement(Text, { color: theme.text.accent }, stats.commandsRun.length)),
+                React.createElement(Text, { color: theme.text.dim }, " \u2022 "),
+                React.createElement(Text, { color: theme.text.dim },
+                    "Time: ",
+                    React.createElement(Text, { color: theme.text.accent }, timeStr)),
+                React.createElement(Text, { color: theme.text.dim }, " \u2022 "),
+                React.createElement(Text, { color: theme.text.dim },
+                    "Tokens: ",
+                    React.createElement(Text, { color: theme.text.accent }, formatTokens(stats.totalTokens)))),
+            React.createElement(Box, null, isAgentRunning ? (React.createElement(Text, { color: theme.status.inProgress }, "\u25CF Running")) : (React.createElement(Text, { color: theme.status.completed }, "\u25CF Ready")))),
+        webUrl && (React.createElement(Box, { marginTop: 0 },
+            React.createElement(Text, { color: theme.text.dim },
+                "Web: ",
+                React.createElement(Text, { color: theme.text.info, underline: true }, webUrl))))));
+};

package/dist/ui/components/messages/AssistantMessage.js

@@ -0,0 +1,20 @@
+/**
+ * Assistant message component
+ * Displays AI responses with markdown rendering
+ */
+import { Box, Text } from "ink";
+import Spinner from "ink-spinner";
+import React from "react";
+import { MarkdownDisplay } from "../../utils/markdown.js";
+import { theme } from "../../utils/theme.js";
+export const AssistantMessage = ({ text, isPending = false, terminalWidth = 80, }) => {
+    // Use "dots" spinner to match the screenshot look (animating dots)
+    // When pending, show the spinner. When done, show the static accent icon.
+    const prefix = isPending ? React.createElement(Spinner, { type: "dots" }) : "✦ ";
+    const prefixWidth = 2;
+    return (React.createElement(Box, { flexDirection: "row", marginTop: 1 },
+        React.createElement(Box, { width: prefixWidth },
+            React.createElement(Text, { color: isPending ? theme.text.dim : theme.text.accent }, prefix)),
+        React.createElement(Box, { flexDirection: "column", flexGrow: 1 },
+            React.createElement(MarkdownDisplay, { isPending: isPending, terminalWidth: terminalWidth - prefixWidth, text: text }))));
+};

package/dist/ui/components/messages/ErrorMessage.js

@@ -0,0 +1,26 @@
+/**
+ * Error message component
+ * Displays errors and warnings
+ */
+import { Box, Text } from "ink";
+import React from "react";
+import { theme } from "../../utils/theme.js";
+export const ErrorMessage = ({ message, type = "error", }) => {
+    const { icon, color } = getErrorStyle(type);
+    return (React.createElement(Box, { flexDirection: "row", marginTop: 1 },
+        React.createElement(Text, { color: color },
+            icon,
+            " ",
+            message)));
+};
+/**
+ * Get icon and color based on error type
+ */
+function getErrorStyle(type) {
+    const styles = {
+        error: { icon: "✗", color: theme.text.error },
+        warning: { icon: "⚠", color: theme.text.warning },
+        info: { icon: "ℹ", color: theme.text.info },
+    };
+    return styles[type];
+}

package/dist/ui/components/messages/LoadingMessage.js

@@ -0,0 +1,28 @@
+/**
+ * Loading message component
+ * Displays a spinner with static text while waiting for assistant response
+ * Note: We avoid text rotation to prevent layout shifts and flickering
+ */
+import { Box, Text } from "ink";
+import Spinner from "ink-spinner";
+import React, { useMemo } from "react";
+import { theme } from "../../utils/theme.js";
+// Fun loading messages - pick one randomly on mount (no rotation to avoid flicker)
+const LOADING_MESSAGES = [
+    "Thinking...",
+    "Working...",
+    "Processing...",
+];
+export const LoadingMessage = () => {
+    // Pick a random message once on mount - no rotation to prevent layout shifts
+    const message = useMemo(() => LOADING_MESSAGES[Math.floor(Math.random() * LOADING_MESSAGES.length)], []);
+    return (React.createElement(Box, { flexDirection: "row", marginTop: 1 },
+        React.createElement(Box, { width: 2 },
+            React.createElement(Text, { color: theme.text.accent },
+                React.createElement(Spinner, { type: "dots" }))),
+        React.createElement(Box, { flexDirection: "column", flexGrow: 1 },
+            React.createElement(Text, { color: theme.text.dim },
+                message,
+                " ",
+                React.createElement(Text, { color: theme.text.dim }, "(esc to interrupt)")))));
+};

package/dist/ui/components/messages/ThinkingMessage.js

@@ -0,0 +1,17 @@
+/**
+ * Thinking message component
+ * Displays Claude's thinking process (collapsible by default)
+ */
+import { Box, Text } from "ink";
+import React from "react";
+import { theme } from "../../utils/theme.js";
+export const ThinkingMessage = ({ id, content, isExpanded = false, onToggle, }) => {
+    return (React.createElement(Box, { flexDirection: "column", marginTop: 1 },
+        React.createElement(Box, { flexDirection: "row" },
+            React.createElement(Text, { color: theme.text.dim }, "\u25CF Thinking"),
+            content && (React.createElement(Text, { color: theme.text.dim },
+                " ",
+                isExpanded ? "▼" : "▶"))),
+        isExpanded && content && (React.createElement(Box, { flexDirection: "column", marginLeft: 2 },
+            React.createElement(Text, { color: theme.text.dim }, content)))));
+};

package/dist/ui/components/messages/TodoMessage.js

@@ -0,0 +1,44 @@
+/**
+ * Todo message component
+ * Displays todo list with progress
+ */
+import { Box, Text } from "ink";
+import React from "react";
+import { theme } from "../../utils/theme.js";
+export const TodoMessage = ({ todos }) => {
+    const completed = todos.filter((t) => t.status === "completed");
+    const inProgress = todos.filter((t) => t.status === "in_progress");
+    const pending = todos.filter((t) => t.status === "pending");
+    const total = todos.length;
+    const completedCount = completed.length;
+    const progress = total > 0 ? Math.round((completedCount / total) * 100) : 0;
+    // Progress bar
+    const barLength = 20;
+    const filledLength = Math.round((barLength * completedCount) / total);
+    const bar = "█".repeat(filledLength) + "░".repeat(barLength - filledLength);
+    return (React.createElement(Box, { flexDirection: "column", marginY: 0 },
+        React.createElement(Box, { flexDirection: "row" },
+            React.createElement(Text, { color: theme.text.info }, "\uD83D\uDCDD "),
+            React.createElement(Text, { color: theme.text.dim }, "Todo Progress: "),
+            React.createElement(Text, { color: theme.text.accent }, bar),
+            React.createElement(Text, { color: theme.text.primary },
+                " ",
+                progress,
+                "%"),
+            React.createElement(Text, { color: theme.text.dim },
+                " ",
+                "(",
+                completedCount,
+                "/",
+                total,
+                ")")),
+        inProgress.length > 0 && (React.createElement(Box, { flexDirection: "column", marginLeft: 2 }, inProgress.map((todo, idx) => (React.createElement(Box, { flexDirection: "row", key: `in-progress-${idx}` },
+            React.createElement(Text, { color: theme.status.inProgress }, "\u2192 "),
+            React.createElement(Text, { color: theme.text.primary }, todo.activeForm || todo.content)))))),
+        completed.length > 0 && completed.length <= 2 && (React.createElement(Box, { flexDirection: "column", marginLeft: 2 }, completed.map((todo, idx) => (React.createElement(Box, { flexDirection: "row", key: `completed-${idx}` },
+            React.createElement(Text, { color: theme.status.completed }, "\u2713 "),
+            React.createElement(Text, { color: theme.text.dim }, todo.content)))))),
+        pending.length > 0 && pending.length <= 3 && (React.createElement(Box, { flexDirection: "column", marginLeft: 2 }, pending.map((todo, idx) => (React.createElement(Box, { flexDirection: "row", key: `pending-${idx}` },
+            React.createElement(Text, { color: theme.status.pending }, "\u23F3 "),
+            React.createElement(Text, { color: theme.text.secondary }, todo.content))))))));
+};