@supatest/cli 0.0.4 → 0.0.5

package/dist/ui/components/StatusBar.js

@@ -0,0 +1,34 @@
+/**
+ * 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";
+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(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))))))));
+};

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

@@ -0,0 +1,218 @@
+/**
+ * Tool message component
+ * Displays tool calls (Read, Write, Edit, Bash, etc.)
+ */
+import { structuredPatch } from "diff";
+import { Box, Text } from "ink";
+import React from "react";
+import { getToolDisplayName } from "shared";
+import { theme } from "../../utils/theme.js";
+export const ToolMessage = ({ toolName, description, input, result, isExpanded = true, }) => {
+    const displayName = getToolDisplayName(toolName);
+    const { icon, color } = getToolStyle(toolName);
+    const resultSummary = result ? getResultSummary(toolName, result) : null;
+    const hasExpandableContent = !!result;
+    const isRunning = !result;
+    // Get the actual command/content to display
+    const commandDisplay = getCommandDisplay(toolName, input);
+    // Check if this is an Edit operation - show diff by default
+    const isEditOperation = toolName === "Edit";
+    const editDiff = isEditOperation ? getEditDiff(input) : null;
+    // Tools that support expand/collapse (Bash has expandable output)
+    const isExpandableTool = toolName === "Bash" || toolName === "BashOutput" || toolName === "Command Output";
+    return (React.createElement(Box, { flexDirection: "column", marginTop: 1 },
+        React.createElement(Box, { flexDirection: "row" },
+            hasExpandableContent && isExpandableTool ? (React.createElement(Text, { color: theme.text.dim }, isExpanded ? "▼ " : "▶ ")) : (React.createElement(Text, { color: isRunning ? "yellow" : color }, "\u25CF ")),
+            React.createElement(Text, { bold: true, color: color }, displayName),
+            React.createElement(Text, { color: theme.text.dim },
+                "(",
+                description,
+                ")"),
+            editDiff && (React.createElement(Text, { color: theme.text.dim },
+                " with ",
+                editDiff.additions,
+                " addition",
+                editDiff.additions !== 1 ? "s" : "",
+                " and ",
+                editDiff.removals,
+                " removal",
+                editDiff.removals !== 1 ? "s" : "")),
+            hasExpandableContent && !isExpanded && isExpandableTool && (React.createElement(Text, { color: theme.text.dim }, " (ctrl+o to expand)"))),
+        !isEditOperation && resultSummary && (React.createElement(Box, { marginLeft: 2 },
+            React.createElement(Text, { color: theme.text.dim },
+                "\u2514 ",
+                resultSummary))),
+        editDiff && (React.createElement(Box, { flexDirection: "column", marginLeft: 2 }, editDiff.lines.map((line, i) => {
+            if (line.type === "separator") {
+                return (React.createElement(Box, { key: i, flexDirection: "row" },
+                    React.createElement(Text, { color: theme.text.dim }, "...")));
+            }
+            const isRemove = line.type === "remove";
+            const isAdd = line.type === "add";
+            const bgColor = isRemove ? "#5c1b1b" : isAdd ? "#1b3d1b" : undefined;
+            const prefix = isRemove ? "- " : isAdd ? "+ " : "  ";
+            const prefixColor = isRemove ? "red" : isAdd ? "green" : theme.text.dim;
+            return (React.createElement(Box, { key: i, flexDirection: "row" },
+                React.createElement(Text, { color: theme.text.dim }, line.lineNum.toString().padStart(4, " ")),
+                React.createElement(Text, { color: prefixColor },
+                    " ",
+                    prefix),
+                React.createElement(Text, { backgroundColor: bgColor }, line.content)));
+        }))),
+        isExpanded && result && isExpandableTool && (React.createElement(Box, { flexDirection: "column", marginLeft: 4, marginTop: 1 },
+            React.createElement(Text, { color: theme.text.secondary }, truncate(result, 2000))))));
+};
+/**
+ * Generate diff display for Edit operations using jsdiff
+ * Shows context lines before/after changes like Claude Code
+ */
+function getEditDiff(input) {
+    if (!input?.old_string || !input?.new_string)
+        return null;
+    // Use jsdiff to compute structured patch with 3 lines of context
+    const patch = structuredPatch("file", "file", input.old_string, input.new_string, "", "", { context: 3 });
+    const lines = [];
+    let additions = 0;
+    let removals = 0;
+    // Process each hunk
+    for (let hunkIndex = 0; hunkIndex < patch.hunks.length; hunkIndex++) {
+        const hunk = patch.hunks[hunkIndex];
+        // Add separator between hunks (except for first)
+        if (hunkIndex > 0) {
+            lines.push({
+                lineNum: "...",
+                type: "separator",
+                content: "",
+            });
+        }
+        let oldLineNum = hunk.oldStart;
+        let newLineNum = hunk.newStart;
+        for (const line of hunk.lines) {
+            const content = line.substring(1); // Remove the +/- prefix
+            if (line.startsWith("+")) {
+                lines.push({
+                    lineNum: newLineNum,
+                    type: "add",
+                    content,
+                });
+                newLineNum++;
+                additions++;
+            }
+            else if (line.startsWith("-")) {
+                lines.push({
+                    lineNum: oldLineNum,
+                    type: "remove",
+                    content,
+                });
+                oldLineNum++;
+                removals++;
+            }
+            else {
+                // Context line (starts with space)
+                lines.push({
+                    lineNum: newLineNum,
+                    type: "context",
+                    content,
+                });
+                oldLineNum++;
+                newLineNum++;
+            }
+        }
+    }
+    return { lines, additions, removals };
+}
+/**
+ * Get command/content to display based on tool type
+ */
+function getCommandDisplay(toolName, input) {
+    if (!input)
+        return null;
+    switch (toolName) {
+        case "Bash":
+        case "BashOutput":
+        case "Command Output": {
+            const command = input.command || input.bash_id;
+            if (!command)
+                return null;
+            // Split long commands into multiple lines
+            return [command];
+        }
+        case "Read":
+        case "Write":
+        case "Edit":
+            return input.file_path ? [input.file_path] : null;
+        case "Grep":
+            return input.pattern ? [`"${input.pattern}"${input.path ? ` in ${input.path}` : ""}`] : null;
+        case "Glob":
+            return input.pattern ? [input.pattern] : null;
+        default:
+            return null;
+    }
+}
+/**
+ * Get icon and color for tool based on name
+ */
+function getToolStyle(toolName) {
+    const styles = {
+        Read: { icon: "📖", color: theme.tool.read },
+        Write: { icon: "✏️", color: theme.tool.write },
+        Edit: { icon: "✏️", color: theme.tool.edit },
+        Bash: { icon: "🔨", color: theme.tool.bash },
+        BashOutput: { icon: "📄", color: theme.tool.bash },
+        "Command Output": { icon: "📄", color: theme.tool.bash },
+        Glob: { icon: "🔍", color: theme.tool.search },
+        Grep: { icon: "🔍", color: theme.tool.search },
+        Task: { icon: "🤖", color: theme.tool.agent },
+        TodoWrite: { icon: "📝", color: theme.text.info },
+    };
+    return styles[toolName] || { icon: "🔧", color: theme.text.secondary };
+}
+/**
+ * Truncate string to max length
+ */
+function truncate(str, maxLength) {
+    if (str.length <= maxLength) {
+        return str;
+    }
+    return str.slice(0, maxLength - 3) + "...";
+}
+/**
+ * Get result summary for tool output
+ */
+function getResultSummary(toolName, result) {
+    switch (toolName) {
+        case "Glob": {
+            // Count lines that look like file paths
+            const lines = result.split("\n").filter((line) => line.trim());
+            const count = lines.filter((line) => !line.startsWith("Found")).length;
+            return count > 0 ? `Found ${count} files` : "No files found";
+        }
+        case "Grep": {
+            // Count lines of output
+            const lines = result.split("\n").filter((line) => line.trim());
+            return lines.length > 0
+                ? `${lines.length} lines of output`
+                : "No matches found";
+        }
+        case "Read": {
+            // Count lines
+            const lines = result.split("\n").length;
+            return `Read ${lines} lines`;
+        }
+        case "Bash": {
+            // Show if there was output
+            const hasOutput = result.trim().length > 0;
+            return hasOutput ? `${result.split("\n").length} lines of output` : null;
+        }
+        case "BashOutput":
+        case "Command Output": {
+            // Show lines of shell output
+            const lines = result.split("\n").filter((line) => line.trim());
+            return lines.length > 0
+                ? `${lines.length} lines of output`
+                : "No output";
+        }
+        default:
+            return null;
+    }
+}

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

@@ -0,0 +1,14 @@
+/**
+ * User message component
+ * Displays user input/prompts
+ */
+import { Box, Text } from "ink";
+import React from "react";
+import { theme } from "../../utils/theme.js";
+export const UserMessage = ({ text }) => {
+    return (React.createElement(Box, { flexDirection: "row", marginTop: 1 },
+        React.createElement(Box, { width: 2 },
+            React.createElement(Text, { color: theme.text.info }, "\u276F ")),
+        React.createElement(Box, { flexGrow: 1 },
+            React.createElement(Text, { color: theme.text.primary }, text))));
+};