@townco/ui 0.1.14 → 0.1.16

package/dist/sdk/transports/stdio.js

@@ -55,43 +55,198 @@ export class StdioTransport {
                         // Handle session updates from the agent
                         const paramsExtended = params;
                         const update = paramsExtended.update;
-                        const sessionUpdate = {
-                            sessionId: self.currentSessionId || params.sessionId,
-                            status: "active",
-                        };
-                        // Queue message chunks if present - content is in update.content
-                        if (update?.content) {
+                        const sessionId = self.currentSessionId || params.sessionId;
+                        // Handle ACP tool call notifications
+                        if (update?.sessionUpdate === "tool_call") {
+                            // Initial tool call notification
+                            const toolCall = {
+                                id: update.toolCallId ?? "",
+                                title: update.title ?? "",
+                                kind: update.kind || "other",
+                                status: update.status || "pending",
+                                locations: update.locations,
+                                rawInput: update.rawInput,
+                                tokenUsage: update.tokenUsage,
+                                content: update.content?.map((c) => {
+                                    // Type guard to safely check properties
+                                    if (typeof c !== "object" || c === null) {
+                                        return { type: "text", text: "" };
+                                    }
+                                    const content = c;
+                                    // Handle ACP nested content format
+                                    if (content.type === "content" &&
+                                        typeof content.content === "object" &&
+                                        content.content !== null) {
+                                        const innerContent = content.content;
+                                        if (innerContent.type === "text") {
+                                            return {
+                                                type: "content",
+                                                content: {
+                                                    type: "text",
+                                                    text: typeof innerContent.text === "string"
+                                                        ? innerContent.text
+                                                        : "",
+                                                },
+                                            };
+                                        }
+                                    }
+                                    // Handle legacy direct formats
+                                    if (content.type === "text")
+                                        return {
+                                            type: "text",
+                                            text: typeof content.text === "string" ? content.text : "",
+                                        };
+                                    if (content.type === "diff")
+                                        return {
+                                            type: "diff",
+                                            path: typeof content.path === "string" ? content.path : "",
+                                            oldText: typeof content.oldText === "string"
+                                                ? content.oldText
+                                                : "",
+                                            newText: typeof content.newText === "string"
+                                                ? content.newText
+                                                : "",
+                                            line: typeof content.line === "number"
+                                                ? content.line
+                                                : null,
+                                        };
+                                    if (content.type === "terminal")
+                                        return {
+                                            type: "terminal",
+                                            terminalId: typeof content.terminalId === "string"
+                                                ? content.terminalId
+                                                : "",
+                                        };
+                                    return { type: "text", text: "" };
+                                }),
+                                startedAt: Date.now(),
+                            };
+                            const sessionUpdate = {
+                                type: "tool_call",
+                                sessionId,
+                                status: "active",
+                                toolCall: toolCall,
+                            };
+                            self.notifySessionUpdate(sessionUpdate);
+                        }
+                        else if (update?.sessionUpdate === "tool_call_update") {
+                            // Tool call update notification
+                            const toolCallUpdate = {
+                                id: update.toolCallId ?? "",
+                                status: update.status,
+                                locations: update.locations,
+                                rawOutput: update.rawOutput,
+                                tokenUsage: update.tokenUsage,
+                                content: update.content?.map((c) => {
+                                    // Type guard to safely check properties
+                                    if (typeof c !== "object" || c === null) {
+                                        return { type: "text", text: "" };
+                                    }
+                                    const content = c;
+                                    // Handle ACP nested content format
+                                    if (content.type === "content" &&
+                                        typeof content.content === "object" &&
+                                        content.content !== null) {
+                                        const innerContent = content.content;
+                                        if (innerContent.type === "text") {
+                                            return {
+                                                type: "content",
+                                                content: {
+                                                    type: "text",
+                                                    text: typeof innerContent.text === "string"
+                                                        ? innerContent.text
+                                                        : "",
+                                                },
+                                            };
+                                        }
+                                    }
+                                    // Handle legacy direct formats
+                                    if (content.type === "text")
+                                        return {
+                                            type: "text",
+                                            text: typeof content.text === "string" ? content.text : "",
+                                        };
+                                    if (content.type === "diff")
+                                        return {
+                                            type: "diff",
+                                            path: typeof content.path === "string" ? content.path : "",
+                                            oldText: typeof content.oldText === "string"
+                                                ? content.oldText
+                                                : "",
+                                            newText: typeof content.newText === "string"
+                                                ? content.newText
+                                                : "",
+                                            line: typeof content.line === "number"
+                                                ? content.line
+                                                : null,
+                                        };
+                                    if (content.type === "terminal")
+                                        return {
+                                            type: "terminal",
+                                            terminalId: typeof content.terminalId === "string"
+                                                ? content.terminalId
+                                                : "",
+                                        };
+                                    return { type: "text", text: "" };
+                                }),
+                                error: update.error,
+                                completedAt: update.status === "completed" || update.status === "failed"
+                                    ? Date.now()
+                                    : undefined,
+                            };
+                            const sessionUpdate = {
+                                type: "tool_call_update",
+                                sessionId,
+                                status: "active",
+                                toolCallUpdate: toolCallUpdate,
+                            };
+                            self.notifySessionUpdate(sessionUpdate);
+                        }
+                        else if (update?.sessionUpdate === "agent_message_chunk") {
+                            // Handle agent message chunks
+                            const sessionUpdate = {
+                                type: "generic",
+                                sessionId,
+                                status: "active",
+                            };
+                            // Queue message chunks if present
+                            // For agent_message_chunk, content is an object, not an array
                             const content = update.content;
-                            let chunk = null;
-                            if (content.type === "text" && content.text) {
-                                chunk = {
-                                    id: params.sessionId,
-                                    role: "assistant",
-                                    contentDelta: { type: "text", text: content.text },
-                                    isComplete: false,
-                                };
-                            }
-                            else if (content.type === "tool_call") {
-                                chunk = {
-                                    id: params.sessionId,
-                                    role: "assistant",
-                                    contentDelta: content,
-                                    isComplete: false,
-                                };
-                            }
-                            if (chunk) {
-                                // Resolve any waiting receive() calls immediately
-                                const resolver = self.chunkResolvers.shift();
-                                if (resolver) {
-                                    resolver(chunk);
+                            if (content && typeof content === "object") {
+                                const contentObj = content;
+                                let chunk = null;
+                                if (contentObj.type === "text" &&
+                                    typeof contentObj.text === "string") {
+                                    chunk = {
+                                        id: params.sessionId,
+                                        role: "assistant",
+                                        contentDelta: { type: "text", text: contentObj.text },
+                                        isComplete: false,
+                                    };
                                 }
-                                else {
-                                    // Only queue if no resolver is waiting
-                                    self.messageQueue.push(chunk);
+                                if (chunk) {
+                                    // Resolve any waiting receive() calls immediately
+                                    const resolver = self.chunkResolvers.shift();
+                                    if (resolver) {
+                                        resolver(chunk);
+                                    }
+                                    else {
+                                        // Only queue if no resolver is waiting
+                                        self.messageQueue.push(chunk);
+                                    }
                                 }
                             }
+                            self.notifySessionUpdate(sessionUpdate);
+                        }
+                        else {
+                            // Handle other session updates
+                            const sessionUpdate = {
+                                type: "generic",
+                                sessionId,
+                                status: "active",
+                            };
+                            self.notifySessionUpdate(sessionUpdate);
                         }
-                        self.notifySessionUpdate(sessionUpdate);
                     },
                     async writeTextFile(params) {
                         const fs = await import("node:fs/promises");

package/dist/tui/components/ChatView.js

@@ -1,57 +1,25 @@
-import { Box } from "ink";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import {
-	useChatInput,
-	useChatMessages,
-	useChatSession,
-	useChatStore,
-} from "../../core/index.js";
+import { Box } from "ink";
+import { useChatInput, useChatMessages, useChatSession, useChatStore, useToolCalls, } from "../../core/index.js";
 import { InputBox } from "./InputBox.js";
 import { MessageList } from "./MessageList.js";
 import { StatusBar } from "./StatusBar.js";
 export function ChatView({ client }) {
-	const setIsStreaming = useChatStore((state) => state.setIsStreaming);
-	const streamingStartTime = useChatStore((state) => state.streamingStartTime);
-	// Use headless hooks for business logic
-	const { connectionStatus, sessionId } = useChatSession(client);
-	const { messages, isStreaming } = useChatMessages(client);
-	const { value, isSubmitting, attachedFiles, onChange, onSubmit } =
-		useChatInput(client);
-	// Check if we're actively receiving content (hide waiting indicator)
-	const hasStreamingContent = messages.some(
-		(msg) => msg.isStreaming && msg.content.length > 0,
-	);
-	// Callbacks for keyboard shortcuts
-	const handleEscape = () => {
-		if (isStreaming) {
-			// TODO: Implement proper cancellation when SDK supports it
-			setIsStreaming(false);
-		}
-	};
-	return _jsxs(Box, {
-		flexDirection: "column",
-		height: "100%",
-		children: [
-			_jsx(Box, {
-				flexGrow: 1,
-				flexDirection: "column",
-				children: _jsx(MessageList, { messages: messages }),
-			}),
-			_jsx(InputBox, {
-				value: value,
-				isSubmitting: isSubmitting,
-				attachedFiles: attachedFiles,
-				onChange: onChange,
-				onSubmit: onSubmit,
-				onEscape: handleEscape,
-			}),
-			_jsx(StatusBar, {
-				connectionStatus: connectionStatus,
-				sessionId: sessionId,
-				isStreaming: isStreaming,
-				streamingStartTime: streamingStartTime,
-				hasStreamingContent: hasStreamingContent,
-			}),
-		],
-	});
+    const setIsStreaming = useChatStore((state) => state.setIsStreaming);
+    const streamingStartTime = useChatStore((state) => state.streamingStartTime);
+    // Use headless hooks for business logic
+    const { connectionStatus, sessionId } = useChatSession(client);
+    const { messages, isStreaming } = useChatMessages(client);
+    useToolCalls(client); // Still need to subscribe to tool call events
+    const { value, isSubmitting, attachedFiles, onChange, onSubmit } = useChatInput(client);
+    // Check if we're actively receiving content (hide waiting indicator)
+    const hasStreamingContent = messages.some((msg) => msg.isStreaming && msg.content.length > 0);
+    // Callbacks for keyboard shortcuts
+    const handleEscape = () => {
+        if (isStreaming) {
+            // TODO: Implement proper cancellation when SDK supports it
+            setIsStreaming(false);
+        }
+    };
+    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsx(Box, { flexGrow: 1, flexDirection: "column", children: _jsx(MessageList, { messages: messages }) }), _jsx(InputBox, { value: value, isSubmitting: isSubmitting, attachedFiles: attachedFiles, onChange: onChange, onSubmit: onSubmit, onEscape: handleEscape }), _jsx(StatusBar, { connectionStatus: connectionStatus, sessionId: sessionId, isStreaming: isStreaming, streamingStartTime: streamingStartTime, hasStreamingContent: hasStreamingContent })] }));
 }

package/dist/tui/components/MessageList.d.ts

@@ -1,7 +1,5 @@
 import type { DisplayMessage } from "../../core/index.js";
 export interface MessageListProps {
-	messages: DisplayMessage[];
+    messages: DisplayMessage[];
 }
-export declare function MessageList({
-	messages,
-}: MessageListProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessageList({ messages }: MessageListProps): import("react/jsx-runtime").JSX.Element;

package/dist/tui/components/MessageList.js

@@ -1,43 +1,19 @@
-import { Box, Text } from "ink";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
 import { GameOfLife } from "./GameOfLife.js";
+import { ToolCall } from "./ToolCall.js";
 export function MessageList({ messages }) {
-	return _jsx(Box, {
-		flexDirection: "column",
-		paddingX: 1,
-		paddingY: 1,
-		children:
-			messages.length === 0
-				? _jsx(GameOfLife, {})
-				: messages.map((message) =>
-						_jsx(Message, { message: message }, message.id),
-					),
-	});
+    return (_jsx(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, children: messages.length === 0 ? (_jsx(GameOfLife, {})) : (messages.map((message) => (_jsx(Message, { message: message }, message.id)))) }));
 }
 function Message({ message }) {
-	const roleColor =
-		message.role === "user"
-			? "blue"
-			: message.role === "assistant"
-				? "green"
-				: "gray";
-	const roleSymbol =
-		message.role === "user" ? ">" : message.role === "assistant" ? "⏺" : "•";
-	const trimmedContent = message.content?.trim() || "";
-	return _jsx(Box, {
-		flexDirection: "column",
-		marginY: 1,
-		children: _jsxs(Box, {
-			children: [
-				_jsxs(Text, {
-					bold: true,
-					color: roleColor,
-					children: [roleSymbol, " "],
-				}),
-				message.role === "user"
-					? _jsx(Text, { backgroundColor: "gray", children: trimmedContent })
-					: _jsx(Text, { children: trimmedContent }),
-			],
-		}),
-	});
+    const roleColor = message.role === "user"
+        ? "blue"
+        : message.role === "assistant"
+            ? "green"
+            : "gray";
+    const roleSymbol = message.role === "user" ? ">" : message.role === "assistant" ? "⏺" : "•";
+    const trimmedContent = message.content?.trim() || "";
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [message.role === "assistant" &&
+                message.toolCalls &&
+                message.toolCalls.length > 0 && (_jsx(Box, { flexDirection: "column", marginLeft: 2, marginBottom: 1, children: message.toolCalls.map((toolCall) => (_jsx(ToolCall, { toolCall: toolCall }, toolCall.id))) })), _jsxs(Box, { children: [_jsxs(Text, { bold: true, color: roleColor, children: [roleSymbol, " "] }), message.role === "user" ? (_jsx(Text, { backgroundColor: "gray", children: trimmedContent })) : (_jsx(Text, { children: trimmedContent }))] })] }));
 }

package/dist/tui/components/ToolCall.d.ts

@@ -0,0 +1,9 @@
+import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
+export interface ToolCallProps {
+    toolCall: ToolCallType;
+}
+/**
+ * ToolCall component for TUI - displays a single tool call
+ * Always shows: tool name, start time, duration, and cost
+ */
+export declare function ToolCall({ toolCall }: ToolCallProps): import("react/jsx-runtime").JSX.Element;

package/dist/tui/components/ToolCall.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+/**
+ * Tool call status indicators for terminal
+ */
+const statusIndicators = {
+    pending: "⏳",
+    in_progress: "⚙️ ",
+    completed: "✓",
+    failed: "✗",
+};
+/**
+ * Tool call status colors
+ */
+const statusColors = {
+    pending: "gray",
+    in_progress: "blue",
+    completed: "green",
+    failed: "red",
+};
+/**
+ * ToolCall component for TUI - displays a single tool call
+ * Always shows: tool name, start time, duration, and cost
+ */
+export function ToolCall({ toolCall }) {
+    // Calculate duration if completed
+    const duration = toolCall.startedAt && toolCall.completedAt
+        ? ((toolCall.completedAt - toolCall.startedAt) / 1000).toFixed(1)
+        : null;
+    // Format start time
+    const startTime = toolCall.startedAt
+        ? new Date(toolCall.startedAt).toLocaleTimeString()
+        : "";
+    // Calculate cost (simplified - input tokens * rate + output tokens * rate)
+    // Using approximate rates: $3/M input, $15/M output for Claude
+    const cost = toolCall.tokenUsage?.inputTokens && toolCall.tokenUsage?.outputTokens
+        ? ((toolCall.tokenUsage.inputTokens / 1_000_000) * 3 +
+            (toolCall.tokenUsage.outputTokens / 1_000_000) * 15).toFixed(4)
+        : null;
+    return (_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: statusColors[toolCall.status], children: statusIndicators[toolCall.status] }), _jsx(Text, { color: "cyan", bold: true, children: "[TOOL]" }), _jsx(Text, { children: toolCall.title }), startTime && (_jsxs(Text, { color: "gray", dimColor: true, children: ["| ", startTime] })), duration && (_jsxs(Text, { color: "gray", dimColor: true, children: ["| ", duration, "s"] })), cost && (_jsxs(Text, { color: "gray", dimColor: true, children: ["| $", cost] }))] }));
+}

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

@@ -0,0 +1,8 @@
+import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
+export interface ToolCallListProps {
+    toolCalls: ToolCallType[];
+}
+/**
+ * ToolCallList component for TUI - renders a list of tool calls
+ */
+export declare function ToolCallList({ toolCalls }: ToolCallListProps): import("react/jsx-runtime").JSX.Element;

package/dist/tui/components/ToolCallList.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { ToolCall } from "./ToolCall.js";
+/**
+ * ToolCallList component for TUI - renders a list of tool calls
+ */
+export function ToolCallList({ toolCalls }) {
+    if (!toolCalls || toolCalls.length === 0) {
+        return (_jsx(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", paddingY: 2, children: _jsx(Text, { dimColor: true, children: "No tool calls yet" }) }));
+    }
+    // Group by status for better organization
+    const inProgress = toolCalls.filter((tc) => tc.status === "in_progress");
+    const pending = toolCalls.filter((tc) => tc.status === "pending");
+    const completed = toolCalls.filter((tc) => tc.status === "completed");
+    const failed = toolCalls.filter((tc) => tc.status === "failed");
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [inProgress.length > 0 && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { bold: true, color: "blue", children: ["\u25B6 In Progress (", inProgress.length, ")"] }), inProgress.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id)))] })), pending.length > 0 && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { bold: true, color: "gray", children: ["\u23F8 Pending (", pending.length, ")"] }), pending.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id)))] })), completed.length > 0 && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { bold: true, color: "green", children: ["\u2713 Completed (", completed.length, ")"] }), completed.slice(-5).map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id))), completed.length > 5 && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { dimColor: true, children: ["... and ", completed.length - 5, " more"] }) }))] })), failed.length > 0 && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { bold: true, color: "red", children: ["\u2717 Failed (", failed.length, ")"] }), failed.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id)))] }))] }));
+}

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

@@ -9,3 +9,5 @@ export * from "./MultiSelect.js";
 export * from "./ReadlineInput.js";
 export * from "./SingleSelect.js";
 export * from "./StatusBar.js";
+export * from "./ToolCall.js";
+export * from "./ToolCallList.js";

package/dist/tui/components/index.js

@@ -9,3 +9,5 @@ export * from "./MultiSelect.js";
 export * from "./ReadlineInput.js";
 export * from "./SingleSelect.js";
 export * from "./StatusBar.js";
+export * from "./ToolCall.js";
+export * from "./ToolCallList.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -50,7 +50,9 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.552.0",
+    "react-json-view": "^1.21.3",
     "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^3.0.6",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
@@ -59,7 +61,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "0.1.11",
+    "@townco/tsconfig": "0.1.13",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",