@supatest/cli 0.0.2 → 0.0.3

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