@townco/ui 0.1.15 → 0.1.16

package/dist/gui/components/ToolCall.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Wrench } from "lucide-react";
+import { useState } from "react";
+import ReactJson from "react-json-view";
+/**
+ * Tool call status badge styles
+ */
+const statusStyles = {
+    pending: "bg-transparent text-muted-foreground",
+    in_progress: "bg-transparent text-muted-foreground",
+    completed: "bg-transparent text-muted-foreground",
+    failed: "bg-transparent text-muted-foreground",
+};
+/**
+ * Tool call kind icons (using emoji for simplicity)
+ */
+const kindIcons = {
+    read: "\u{1F4C4}",
+    edit: "\u{270F}\u{FE0F}",
+    delete: "\u{1F5D1}\u{FE0F}",
+    move: "\u{1F4E6}",
+    search: "\u{1F50D}",
+    execute: "\u{2699}\u{FE0F}",
+    think: "\u{1F4AD}",
+    fetch: "\u{1F310}",
+    switch_mode: "\u{1F501}",
+    other: "\u{1F527}",
+};
+/**
+ * ToolCall component - displays a single tool call with collapsible details
+ */
+export function ToolCall({ toolCall }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { type: "button", className: "flex items-center gap-1.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, children: [_jsxs("span", { className: `inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium rounded ${statusStyles[toolCall.status]}`, children: [_jsx(Wrench, { className: "h-3 w-3" }), _jsx("span", { children: toolCall.title }), toolCall.status === "completed" && _jsx("span", { children: "\u2713" })] }), _jsx("span", { className: "text-gray-400 text-xs opacity-0 group-hover:opacity-100 transition-opacity", children: isExpanded ? "▲" : "▼" })] }), isExpanded && (_jsxs("div", { className: "mt-2 space-y-3 text-sm border border-gray-200 rounded-md p-3 bg-white shadow-sm max-w-full", children: [toolCall.locations && toolCall.locations.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5", children: "Files" }), _jsx("ul", { className: "space-y-1", children: toolCall.locations.map((loc) => (_jsxs("li", { className: "font-mono text-xs text-gray-700 bg-gray-50 px-2 py-1 rounded", children: [loc.path, loc.line !== null &&
+                                            loc.line !== undefined &&
+                                            `:${loc.line}`] }, `${loc.path}:${loc.line ?? ""}`))) })] })), toolCall.rawInput && Object.keys(toolCall.rawInput).length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5", children: "Input" }), _jsx("div", { className: "bg-gray-50 p-2 rounded border border-gray-200", children: _jsx(ReactJson, { src: toolCall.rawInput, name: false, collapsed: 1, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: { fontSize: "11px", backgroundColor: "transparent" }, theme: "rjv-default" }) })] })), toolCall.content && toolCall.content.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5", children: "Output" }), _jsx("div", { className: "space-y-2", children: toolCall.content.map((block, idx) => {
+                                    // Generate a stable key based on content
+                                    const getBlockKey = () => {
+                                        if (block.type === "diff" && "path" in block) {
+                                            return `diff-${block.path}-${idx}`;
+                                        }
+                                        if (block.type === "terminal" && "terminalId" in block) {
+                                            return `terminal-${block.terminalId}`;
+                                        }
+                                        if (block.type === "text" && "text" in block) {
+                                            return `text-${block.text.substring(0, 20)}-${idx}`;
+                                        }
+                                        if (block.type === "content" && "content" in block) {
+                                            const innerContent = block.content;
+                                            return `content-${innerContent.text?.substring(0, 20)}-${idx}`;
+                                        }
+                                        return `block-${idx}`;
+                                    };
+                                    // Helper to render text content (with JSON parsing if applicable)
+                                    const renderTextContent = (text, key) => {
+                                        // Try to parse as JSON
+                                        try {
+                                            const parsed = JSON.parse(text);
+                                            // If it's an object or array, render with ReactJson
+                                            if (typeof parsed === "object" && parsed !== null) {
+                                                return (_jsx("div", { className: "bg-gray-50 p-2 rounded border border-gray-200", children: _jsx(ReactJson, { src: parsed, name: false, collapsed: 1, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: {
+                                                            fontSize: "11px",
+                                                            backgroundColor: "transparent",
+                                                        }, theme: "rjv-default" }) }, key));
+                                            }
+                                        }
+                                        catch {
+                                            // Not valid JSON, render as plain text
+                                        }
+                                        // Render as plain text
+                                        return (_jsx("pre", { className: "bg-gray-50 p-2.5 rounded border border-gray-200 text-xs overflow-x-auto font-mono text-gray-800", children: text }, key));
+                                    };
+                                    // Handle nested content blocks (ACP format)
+                                    if (block.type === "content" && "content" in block) {
+                                        const innerContent = block.content;
+                                        if (innerContent.type === "text" && innerContent.text) {
+                                            return renderTextContent(innerContent.text, getBlockKey());
+                                        }
+                                    }
+                                    // Handle direct text blocks
+                                    if (block.type === "text" && "text" in block) {
+                                        return renderTextContent(block.text, getBlockKey());
+                                    }
+                                    // Handle diff blocks
+                                    if (block.type === "diff" &&
+                                        "path" in block &&
+                                        "oldText" in block &&
+                                        "newText" in block) {
+                                        return (_jsxs("div", { className: "border rounded", children: [_jsxs("div", { className: "bg-gray-100 px-2 py-1 text-xs font-mono", children: [block.path, "line" in block &&
+                                                            block.line !== null &&
+                                                            block.line !== undefined &&
+                                                            `:${block.line}`] }), _jsxs("div", { className: "p-2 font-mono text-xs", children: [_jsxs("div", { className: "text-red-600", children: ["- ", block.oldText] }), _jsxs("div", { className: "text-green-600", children: ["+ ", block.newText] })] })] }, getBlockKey()));
+                                    }
+                                    // Handle terminal blocks
+                                    if (block.type === "terminal" && "terminalId" in block) {
+                                        return (_jsxs("div", { className: "bg-black text-green-400 p-2 rounded text-xs font-mono", children: ["Terminal: ", block.terminalId] }, getBlockKey()));
+                                    }
+                                    return null;
+                                }) })] })), toolCall.error && (_jsxs("div", { className: "bg-red-50 border border-red-200 rounded p-2.5 text-red-700", children: [_jsx("div", { className: "text-xs font-semibold text-red-600 uppercase tracking-wide mb-1.5", children: "Error" }), _jsx("div", { className: "text-xs", children: toolCall.error })] })), toolCall.tokenUsage && (_jsxs("div", { className: "bg-gray-50 border border-gray-200 rounded p-2.5", children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2", children: "Token Usage" }), _jsxs("div", { className: "grid grid-cols-3 gap-3 text-xs text-gray-700", children: [toolCall.tokenUsage.inputTokens !== undefined && (_jsxs("div", { children: [_jsx("div", { className: "text-gray-500 text-[10px] uppercase tracking-wide mb-0.5", children: "Input" }), _jsx("div", { className: "font-medium", children: toolCall.tokenUsage.inputTokens.toLocaleString() })] })), toolCall.tokenUsage.outputTokens !== undefined && (_jsxs("div", { children: [_jsx("div", { className: "text-gray-500 text-[10px] uppercase tracking-wide mb-0.5", children: "Output" }), _jsx("div", { className: "font-medium", children: toolCall.tokenUsage.outputTokens.toLocaleString() })] })), toolCall.tokenUsage.totalTokens !== undefined && (_jsxs("div", { children: [_jsx("div", { className: "text-gray-500 text-[10px] uppercase tracking-wide mb-0.5", children: "Total" }), _jsx("div", { className: "font-medium", children: toolCall.tokenUsage.totalTokens.toLocaleString() })] }))] })] })), toolCall.startedAt && (_jsxs("div", { className: "text-xs text-gray-500", children: ["Started: ", new Date(toolCall.startedAt).toLocaleTimeString(), toolCall.completedAt && (_jsxs(_Fragment, { children: [" ", "| Completed:", " ", new Date(toolCall.completedAt).toLocaleTimeString(), " (", Math.round((toolCall.completedAt - toolCall.startedAt) / 1000), "s)"] }))] }))] }))] }));
+}

package/dist/gui/components/ToolCallList.d.ts

@@ -0,0 +1,9 @@
+import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
+export interface ToolCallListProps {
+    toolCalls: ToolCallType[];
+    groupBy?: "status" | "chronological";
+}
+/**
+ * ToolCallList component - renders a list of tool calls, optionally grouped
+ */
+export declare function ToolCallList({ toolCalls, groupBy, }: ToolCallListProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/gui/components/ToolCallList.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ToolCall } from "./ToolCall.js";
+/**
+ * ToolCallList component - renders a list of tool calls, optionally grouped
+ */
+export function ToolCallList({ toolCalls, groupBy = "chronological", }) {
+    if (!toolCalls || toolCalls.length === 0) {
+        return null;
+    }
+    // Group by status if requested
+    if (groupBy === "status") {
+        const grouped = {
+            in_progress: toolCalls.filter((tc) => tc.status === "in_progress"),
+            pending: toolCalls.filter((tc) => tc.status === "pending"),
+            completed: toolCalls.filter((tc) => tc.status === "completed"),
+            failed: toolCalls.filter((tc) => tc.status === "failed"),
+        };
+        return (_jsxs("div", { className: "space-y-4", children: [grouped.in_progress.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-semibold text-gray-700 mb-2", children: "In Progress" }), grouped.in_progress.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id)))] })), grouped.pending.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-semibold text-gray-700 mb-2", children: "Pending" }), grouped.pending.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id)))] })), grouped.completed.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-semibold text-gray-700 mb-2", children: "Completed" }), grouped.completed.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id)))] })), grouped.failed.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-semibold text-gray-700 mb-2", children: "Failed" }), grouped.failed.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id)))] }))] }));
+    }
+    // Default: chronological order
+    return (_jsx("div", { className: "space-y-2", children: toolCalls.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id))) }));
+}

package/dist/gui/components/index.d.ts

@@ -29,3 +29,5 @@ export { Textarea, type TextareaProps, textareaVariants } from "./Textarea.js";
 export { ThinkingBlock, type ThinkingBlockProps, } from "./ThinkingBlock.js";
 export { TodoList, type TodoListProps } from "./TodoList.js";
 export { type TodoItem, TodoListItem, type TodoListItemProps, } from "./TodoListItem.js";
+export { ToolCall, type ToolCallProps } from "./ToolCall.js";
+export { ToolCallList, type ToolCallListProps } from "./ToolCallList.js";

package/dist/gui/components/index.js

@@ -36,3 +36,5 @@ export { Textarea, textareaVariants } from "./Textarea.js";
 export { ThinkingBlock, } from "./ThinkingBlock.js";
 export { TodoList } from "./TodoList.js";
 export { TodoListItem, } from "./TodoListItem.js";
+export { ToolCall } from "./ToolCall.js";
+export { ToolCallList } from "./ToolCallList.js";

package/dist/gui/components/resizable.d.ts

@@ -0,0 +1,7 @@
+import * as ResizablePrimitive from "react-resizable-panels";
+declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => import("react/jsx-runtime").JSX.Element;
+declare const ResizablePanel: ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>) => import("react/jsx-runtime").JSX.Element;
+declare const ResizableHandle: ({ withHandle, className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+    withHandle?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

package/dist/gui/components/resizable.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as ResizablePrimitive from "react-resizable-panels";
+import { cn } from "../lib/utils.js";
+const ResizablePanelGroup = ({ className, ...props }) => (_jsx(ResizablePrimitive.PanelGroup, { className: cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className), ...props }));
+const ResizablePanel = ({ className, ...props }) => (_jsx(ResizablePrimitive.Panel, { className: cn(className), ...props }));
+const ResizableHandle = ({ withHandle, className, ...props }) => (_jsx(ResizablePrimitive.PanelResizeHandle, { className: cn("relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90", className), ...props, children: withHandle && (_jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "h-2.5 w-2.5", children: [_jsx("title", { children: "Resize Handle" }), _jsx("circle", { cx: "9", cy: "12", r: "1" }), _jsx("circle", { cx: "9", cy: "5", r: "1" }), _jsx("circle", { cx: "9", cy: "19", r: "1" }), _jsx("circle", { cx: "15", cy: "12", r: "1" }), _jsx("circle", { cx: "15", cy: "5", r: "1" }), _jsx("circle", { cx: "15", cy: "19", r: "1" })] }) })) }));
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };