@supatest/cli 0.0.2 → 0.0.3

package/dist/ui/components/AuthBanner.js

@@ -0,0 +1,20 @@
+/**
+ * Auth Banner Component
+ * Shows authentication status when user is not logged in
+ */
+import { Box, Text } from "ink";
+import React from "react";
+import { AuthState } from "../types/auth.js";
+import { theme } from "../utils/theme.js";
+export const AuthBanner = ({ authState }) => {
+    // Don't show banner if authenticated
+    if (authState === AuthState.Authenticated) {
+        return null;
+    }
+    const message = authState === AuthState.Authenticating
+        ? "Authenticating..."
+        : "Not logged in. Type /login to authenticate.";
+    const color = authState === AuthState.Authenticating ? theme.text.info : theme.text.warning;
+    return (React.createElement(Box, { marginBottom: 0, paddingX: 1 },
+        React.createElement(Text, { color: color }, message)));
+};

package/dist/ui/components/AuthDialog.js

@@ -0,0 +1,32 @@
+/**
+ * Auth Dialog Component
+ * Prompts user to login (authentication is required)
+ *
+ * Based on Gemini CLI (Apache 2.0 License)
+ * https://github.com/google-gemini/gemini-cli
+ * Copyright 2025 Google LLC
+ */
+import { Box, Text } from "ink";
+import React from "react";
+import { useKeypress } from "../hooks/useKeypress.js";
+import { theme } from "../utils/theme.js";
+export const AuthDialog = ({ onLogin }) => {
+    useKeypress((key) => {
+        // Any key press triggers login (Enter, L, or any other key)
+        if (key.name === "return" || key.name === "l" || key.sequence === "l") {
+            onLogin();
+        }
+    }, { isActive: true });
+    return (React.createElement(Box, { borderColor: theme.border.accent, borderStyle: "round", flexDirection: "column", paddingX: 2, paddingY: 1 },
+        React.createElement(Text, { bold: true, color: theme.text.primary }, "Welcome to Supatest CLI"),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: theme.text.secondary }, "Authentication is required to use Supatest CLI.")),
+        React.createElement(Box, { flexDirection: "column", marginTop: 1 },
+            React.createElement(Box, null,
+                React.createElement(Text, { color: theme.text.accent },
+                    ">",
+                    " "),
+                React.createElement(Text, { color: theme.text.primary }, "[L] Login with browser"))),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: theme.text.dim, italic: true }, "Press Enter or L to login"))));
+};

package/dist/ui/components/Banner.js

@@ -0,0 +1,12 @@
+import { Box, Text } from "ink";
+import React from "react";
+import { theme } from "../utils/theme.js";
+export const Banner = ({ text, type = "info" }) => {
+    let borderColor = theme.border.default;
+    if (type === "warning")
+        borderColor = theme.text.warning;
+    if (type === "error")
+        borderColor = theme.border.error;
+    return (React.createElement(Box, { borderColor: borderColor, borderStyle: "round", flexDirection: "column", marginBottom: 1, paddingX: 1, width: "100%" },
+        React.createElement(Text, { color: type === "warning" ? theme.text.warning : type === "error" ? theme.text.error : theme.text.primary }, text)));
+};

package/dist/ui/components/ExpandableSection.js

@@ -0,0 +1,17 @@
+/**
+ * Expandable Section Component
+ * Shows a collapsible section with summary and expandable details
+ */
+import { Box, Text } from "ink";
+import React from "react";
+import { theme } from "../utils/theme.js";
+export const ExpandableSection = ({ id, summary, summaryColor = theme.text.dim, details, isExpanded = false, onToggle, }) => {
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Box, { flexDirection: "row" },
+            React.createElement(Text, { color: summaryColor }, summary),
+            details && (React.createElement(Text, { color: theme.text.dim },
+                " ",
+                isExpanded ? "▼" : "▶"))),
+        isExpanded && details && (React.createElement(Box, { flexDirection: "column", marginLeft: 2 },
+            React.createElement(Text, { color: theme.text.dim }, details)))));
+};

package/dist/ui/components/Header.js

@@ -0,0 +1,49 @@
+import { Box, Text } from "ink";
+import Gradient from "ink-gradient";
+import React from "react";
+import { getBanner } from "../../utils/banner.js";
+import { theme } from "../utils/theme.js";
+export const Header = ({ version, currentFolder, gitBranch }) => {
+    const banner = getBanner();
+    // Build the info line: "v0.0.2 • ~/path/to/folder on branch"
+    const infoParts = [`v${version}`];
+    if (currentFolder) {
+        let locationStr = currentFolder;
+        if (gitBranch) {
+            locationStr += ` on ${gitBranch}`;
+        }
+        infoParts.push(locationStr);
+    }
+    const infoLine = infoParts.join(" • ");
+    return (React.createElement(Box, { alignItems: "center", flexDirection: "column", marginBottom: 1, marginTop: 5, width: "100%" },
+        React.createElement(Gradient, { colors: ["#C96868", "#FF8C94"] },
+            React.createElement(Text, null, banner)),
+        React.createElement(Box, { justifyContent: "center", marginTop: 0 },
+            React.createElement(Text, { color: theme.text.dim }, infoLine)),
+        React.createElement(Box, { flexDirection: "column", marginTop: 1, paddingX: 2, width: "100%" },
+            React.createElement(Box, { flexDirection: "column", marginBottom: 0 },
+                React.createElement(Text, { color: theme.text.dim },
+                    "\uD83D\uDCA1 ",
+                    React.createElement(Text, { color: theme.text.secondary }, "Tip:"),
+                    " Use ",
+                    React.createElement(Text, { bold: true, color: theme.text.accent }, "@filename"),
+                    " to reference files, or ",
+                    React.createElement(Text, { bold: true, color: theme.text.accent }, "/help"),
+                    " for commands")),
+            React.createElement(Box, { flexDirection: "column", marginTop: 0 },
+                React.createElement(Text, { color: theme.text.dim },
+                    "\u2328\uFE0F  ",
+                    React.createElement(Text, { color: theme.text.secondary }, "Shortcuts:"),
+                    " ",
+                    React.createElement(Text, { bold: true, color: theme.text.accent }, "Ctrl+H"),
+                    " help, ",
+                    React.createElement(Text, { bold: true, color: theme.text.accent }, "Ctrl+C"),
+                    " exit, ",
+                    React.createElement(Text, { bold: true, color: theme.text.accent }, "ESC"),
+                    " interrupt")),
+            React.createElement(Box, { flexDirection: "column", marginTop: 0 },
+                React.createElement(Text, { color: theme.text.dim },
+                    "\uD83D\uDE80 ",
+                    React.createElement(Text, { color: theme.text.secondary }, "Prompt Tips:"),
+                    " Be explicit with instructions, provide context, use examples, and think step-by-step")))));
+};

package/dist/ui/components/HelpMenu.js

@@ -0,0 +1,89 @@
+/**
+ * Help Menu Component
+ * Displays available commands, keyboard shortcuts, and usage tips
+ */
+import { Box, Text } from "ink";
+import React from "react";
+import { theme } from "../utils/theme.js";
+export const HelpMenu = ({ isAuthenticated }) => {
+    return (React.createElement(Box, { borderColor: theme.border.accent, borderStyle: "round", flexDirection: "column", marginBottom: 1, marginTop: 1, paddingX: 2, paddingY: 1 },
+        React.createElement(Text, { bold: true, color: theme.text.accent }, "\uD83D\uDCD6 Supatest AI CLI - Help"),
+        React.createElement(Box, { marginTop: 1 }),
+        React.createElement(Text, { bold: true, color: theme.text.secondary }, "Slash Commands:"),
+        React.createElement(Box, { flexDirection: "column", marginLeft: 2, marginTop: 0 },
+            React.createElement(Text, null,
+                React.createElement(Text, { color: theme.text.accent }, "/help"),
+                React.createElement(Text, { color: theme.text.dim }, " or "),
+                React.createElement(Text, { color: theme.text.accent }, "/?"),
+                React.createElement(Text, { color: theme.text.dim }, " - Toggle this help menu")),
+            React.createElement(Text, null,
+                React.createElement(Text, { color: theme.text.accent }, "/resume"),
+                React.createElement(Text, { color: theme.text.dim }, " - Resume a previous session")),
+            React.createElement(Text, null,
+                React.createElement(Text, { color: theme.text.accent }, "/clear"),
+                React.createElement(Text, { color: theme.text.dim }, " - Clear message history")),
+            React.createElement(Text, null,
+                React.createElement(Text, { color: theme.text.accent }, "/setup"),
+                React.createElement(Text, { color: theme.text.dim }, " - Initial setup for Supatest CLI")),
+            isAuthenticated ? (React.createElement(Text, null,
+                React.createElement(Text, { color: theme.text.accent }, "/logout"),
+                React.createElement(Text, { color: theme.text.dim }, " - Log out of Supatest"))) : (React.createElement(Text, null,
+                React.createElement(Text, { color: theme.text.accent }, "/login"),
+                React.createElement(Text, { color: theme.text.dim }, " - Authenticate with Supatest"))),
+            React.createElement(Text, null,
+                React.createElement(Text, { color: theme.text.accent }, "/exit"),
+                React.createElement(Text, { color: theme.text.dim }, " - Exit the CLI"))),
+        React.createElement(Box, { marginTop: 1 }),
+        React.createElement(Text, { bold: true, color: theme.text.secondary }, "Keyboard Shortcuts:"),
+        React.createElement(Box, { flexDirection: "column", marginLeft: 2, marginTop: 0 },
+            React.createElement(Text, null,
+                React.createElement(Text, { color: theme.text.accent }, "?"),
+                React.createElement(Text, { color: theme.text.dim },
+                    " ",
+                    "- Toggle help (when input is empty)")),
+            React.createElement(Text, null,
+                React.createElement(Text, { color: theme.text.accent }, "Ctrl+H"),
+                React.createElement(Text, { color: theme.text.dim }, " - Toggle help")),
+            React.createElement(Text, null,
+                React.createElement(Text, { color: theme.text.accent }, "Ctrl+C"),
+                React.createElement(Text, { color: theme.text.dim },
+                    " ",
+                    "- Exit (or clear input if not empty)")),
+            React.createElement(Text, null,
+                React.createElement(Text, { color: theme.text.accent }, "Ctrl+D"),
+                React.createElement(Text, { color: theme.text.dim }, " - Exit immediately")),
+            React.createElement(Text, null,
+                React.createElement(Text, { color: theme.text.accent }, "Ctrl+L"),
+                React.createElement(Text, { color: theme.text.dim }, " - Clear terminal screen")),
+            React.createElement(Text, null,
+                React.createElement(Text, { color: theme.text.accent }, "Ctrl+U"),
+                React.createElement(Text, { color: theme.text.dim }, " - Clear current input line")),
+            React.createElement(Text, null,
+                React.createElement(Text, { color: theme.text.accent }, "ESC"),
+                React.createElement(Text, { color: theme.text.dim }, " - Interrupt running agent")),
+            React.createElement(Text, null,
+                React.createElement(Text, { color: theme.text.accent }, "Shift+Up/Down"),
+                React.createElement(Text, { color: theme.text.dim }, " - Scroll through messages")),
+            React.createElement(Text, null,
+                React.createElement(Text, { color: theme.text.accent }, "Shift+Enter"),
+                React.createElement(Text, { color: theme.text.dim }, " - Add new line in input")),
+            React.createElement(Text, null,
+                React.createElement(Text, { color: theme.text.accent }, "ctrl+o"),
+                React.createElement(Text, { color: theme.text.dim }, " - Toggle tool outputs"))),
+        React.createElement(Box, { marginTop: 1 }),
+        React.createElement(Text, { bold: true, color: theme.text.secondary }, "File References:"),
+        React.createElement(Box, { flexDirection: "column", marginLeft: 2, marginTop: 0 },
+            React.createElement(Text, null,
+                React.createElement(Text, { color: theme.text.accent }, "@filename"),
+                React.createElement(Text, { color: theme.text.dim },
+                    " ",
+                    "- Reference a file (autocomplete with Tab)")),
+            React.createElement(Text, { color: theme.text.dim }, "Example: \"Fix the bug in @src/app.ts\"")),
+        React.createElement(Box, { marginTop: 1 }),
+        React.createElement(Text, { bold: true, color: theme.text.secondary }, "Tips:"),
+        React.createElement(Box, { flexDirection: "column", marginLeft: 2, marginTop: 0 },
+            React.createElement(Text, { color: theme.text.dim }, "\u2022 Press Enter to submit your task"),
+            React.createElement(Text, { color: theme.text.dim }, "\u2022 Use Shift+Enter to write multi-line prompts"),
+            React.createElement(Text, { color: theme.text.dim }, "\u2022 Drag and drop files into the terminal to add file paths"),
+            React.createElement(Text, { color: theme.text.dim }, "\u2022 The agent will automatically run tools and fix issues"))));
+};

package/dist/ui/components/InputPrompt.js

@@ -0,0 +1,292 @@
+/**
+ * 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, stats } = 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, justifyContent: "space-between" },
+            React.createElement(Box, null,
+                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)")),
+            React.createElement(Text, { color: theme.text.dim }, stats.totalTokens >= 1000000
+                ? `${(stats.totalTokens / 1000000).toFixed(1)}M tokens`
+                : stats.totalTokens >= 1000
+                    ? `${(stats.totalTokens / 1000).toFixed(1)}k tokens`
+                    : `${stats.totalTokens} tokens`))));
+});
+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", version: "0.0.2" }),
+            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)")))));
+};