@townco/ui 0.1.15 → 0.1.16

package/dist/core/schemas/tool-call.d.ts

@@ -0,0 +1,174 @@
+import { z } from "zod";
+/**
+ * Tool call status lifecycle
+ */
+export declare const ToolCallStatusSchema: z.ZodEnum<{
+    pending: "pending";
+    in_progress: "in_progress";
+    completed: "completed";
+    failed: "failed";
+}>;
+export type ToolCallStatus = z.infer<typeof ToolCallStatusSchema>;
+/**
+ * Tool call categories for UI presentation
+ */
+export declare const ToolCallKindSchema: z.ZodEnum<{
+    read: "read";
+    edit: "edit";
+    delete: "delete";
+    move: "move";
+    search: "search";
+    execute: "execute";
+    think: "think";
+    fetch: "fetch";
+    switch_mode: "switch_mode";
+    other: "other";
+}>;
+export type ToolCallKind = z.infer<typeof ToolCallKindSchema>;
+/**
+ * File location with optional line number
+ */
+export declare const FileLocationSchema: z.ZodObject<{
+    path: z.ZodString;
+    line: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+}, z.core.$strip>;
+export type FileLocation = z.infer<typeof FileLocationSchema>;
+/**
+ * Token usage metadata for tracking LLM consumption
+ */
+export declare const TokenUsageSchema: z.ZodObject<{
+    inputTokens: z.ZodOptional<z.ZodNumber>;
+    outputTokens: z.ZodOptional<z.ZodNumber>;
+    totalTokens: z.ZodOptional<z.ZodNumber>;
+}, z.core.$strip>;
+export type TokenUsage = z.infer<typeof TokenUsageSchema>;
+/**
+ * Content block types for tool call results
+ */
+export declare const ToolCallContentBlockSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    type: z.ZodLiteral<"content">;
+    content: z.ZodObject<{
+        type: z.ZodLiteral<"text">;
+        text: z.ZodString;
+    }, z.core.$strip>;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"text">;
+    text: z.ZodString;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"diff">;
+    path: z.ZodString;
+    oldText: z.ZodString;
+    newText: z.ZodString;
+    line: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"terminal">;
+    terminalId: z.ZodString;
+}, z.core.$strip>], "type">;
+export type ToolCallContentBlock = z.infer<typeof ToolCallContentBlockSchema>;
+/**
+ * Complete tool call state as displayed in the UI
+ */
+export declare const ToolCallSchema: z.ZodObject<{
+    id: z.ZodString;
+    title: z.ZodString;
+    kind: z.ZodEnum<{
+        read: "read";
+        edit: "edit";
+        delete: "delete";
+        move: "move";
+        search: "search";
+        execute: "execute";
+        think: "think";
+        fetch: "fetch";
+        switch_mode: "switch_mode";
+        other: "other";
+    }>;
+    status: z.ZodEnum<{
+        pending: "pending";
+        in_progress: "in_progress";
+        completed: "completed";
+        failed: "failed";
+    }>;
+    locations: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        path: z.ZodString;
+        line: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+    }, z.core.$strip>>>;
+    rawInput: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+    rawOutput: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+    content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+        type: z.ZodLiteral<"content">;
+        content: z.ZodObject<{
+            type: z.ZodLiteral<"text">;
+            text: z.ZodString;
+        }, z.core.$strip>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"text">;
+        text: z.ZodString;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"diff">;
+        path: z.ZodString;
+        oldText: z.ZodString;
+        newText: z.ZodString;
+        line: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"terminal">;
+        terminalId: z.ZodString;
+    }, z.core.$strip>], "type">>>;
+    error: z.ZodOptional<z.ZodString>;
+    startedAt: z.ZodOptional<z.ZodNumber>;
+    completedAt: z.ZodOptional<z.ZodNumber>;
+    tokenUsage: z.ZodOptional<z.ZodObject<{
+        inputTokens: z.ZodOptional<z.ZodNumber>;
+        outputTokens: z.ZodOptional<z.ZodNumber>;
+        totalTokens: z.ZodOptional<z.ZodNumber>;
+    }, z.core.$strip>>;
+}, z.core.$strip>;
+export type ToolCall = z.infer<typeof ToolCallSchema>;
+/**
+ * Partial update for an existing tool call
+ */
+export declare const ToolCallUpdateSchema: z.ZodObject<{
+    id: z.ZodString;
+    status: z.ZodOptional<z.ZodEnum<{
+        pending: "pending";
+        in_progress: "in_progress";
+        completed: "completed";
+        failed: "failed";
+    }>>;
+    locations: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        path: z.ZodString;
+        line: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+    }, z.core.$strip>>>;
+    rawOutput: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+    content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+        type: z.ZodLiteral<"content">;
+        content: z.ZodObject<{
+            type: z.ZodLiteral<"text">;
+            text: z.ZodString;
+        }, z.core.$strip>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"text">;
+        text: z.ZodString;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"diff">;
+        path: z.ZodString;
+        oldText: z.ZodString;
+        newText: z.ZodString;
+        line: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"terminal">;
+        terminalId: z.ZodString;
+    }, z.core.$strip>], "type">>>;
+    error: z.ZodOptional<z.ZodString>;
+    completedAt: z.ZodOptional<z.ZodNumber>;
+    tokenUsage: z.ZodOptional<z.ZodObject<{
+        inputTokens: z.ZodOptional<z.ZodNumber>;
+        outputTokens: z.ZodOptional<z.ZodNumber>;
+        totalTokens: z.ZodOptional<z.ZodNumber>;
+    }, z.core.$strip>>;
+}, z.core.$strip>;
+export type ToolCallUpdate = z.infer<typeof ToolCallUpdateSchema>;
+/**
+ * Helper to merge a tool call update into an existing tool call
+ */
+export declare function mergeToolCallUpdate(existing: ToolCall, update: ToolCallUpdate): ToolCall;

package/dist/core/schemas/tool-call.js

@@ -0,0 +1,130 @@
+import { z } from "zod";
+/**
+ * Tool call status lifecycle
+ */
+export const ToolCallStatusSchema = z.enum([
+    "pending",
+    "in_progress",
+    "completed",
+    "failed",
+]);
+/**
+ * Tool call categories for UI presentation
+ */
+export const ToolCallKindSchema = z.enum([
+    "read",
+    "edit",
+    "delete",
+    "move",
+    "search",
+    "execute",
+    "think",
+    "fetch",
+    "switch_mode",
+    "other",
+]);
+/**
+ * File location with optional line number
+ */
+export const FileLocationSchema = z.object({
+    path: z.string(),
+    line: z.number().nullable().optional(),
+});
+/**
+ * Token usage metadata for tracking LLM consumption
+ */
+export const TokenUsageSchema = z.object({
+    inputTokens: z.number().optional(),
+    outputTokens: z.number().optional(),
+    totalTokens: z.number().optional(),
+});
+/**
+ * Content block types for tool call results
+ */
+export const ToolCallContentBlockSchema = z.discriminatedUnion("type", [
+    // ACP nested content format
+    z.object({
+        type: z.literal("content"),
+        content: z.object({
+            type: z.literal("text"),
+            text: z.string(),
+        }),
+    }),
+    // Direct text block (legacy)
+    z.object({
+        type: z.literal("text"),
+        text: z.string(),
+    }),
+    z.object({
+        type: z.literal("diff"),
+        path: z.string(),
+        oldText: z.string(),
+        newText: z.string(),
+        line: z.number().nullable().optional(),
+    }),
+    z.object({
+        type: z.literal("terminal"),
+        terminalId: z.string(),
+    }),
+]);
+/**
+ * Complete tool call state as displayed in the UI
+ */
+export const ToolCallSchema = z.object({
+    /** Unique identifier within the session */
+    id: z.string(),
+    /** Human-readable description of the operation */
+    title: z.string(),
+    /** Category for UI presentation */
+    kind: ToolCallKindSchema,
+    /** Current execution status */
+    status: ToolCallStatusSchema,
+    /** Affected file paths with optional line numbers */
+    locations: z.array(FileLocationSchema).optional(),
+    /** Raw parameters passed to the tool */
+    rawInput: z.record(z.string(), z.unknown()).optional(),
+    /** Raw response from the tool */
+    rawOutput: z.record(z.string(), z.unknown()).optional(),
+    /** Produced results (content blocks, diffs, terminal output) */
+    content: z.array(ToolCallContentBlockSchema).optional(),
+    /** Error message if status is 'failed' */
+    error: z.string().optional(),
+    /** Timestamp when the tool call started */
+    startedAt: z.number().optional(),
+    /** Timestamp when the tool call completed/failed */
+    completedAt: z.number().optional(),
+    /** Token usage metadata for this tool call */
+    tokenUsage: TokenUsageSchema.optional(),
+});
+/**
+ * Partial update for an existing tool call
+ */
+export const ToolCallUpdateSchema = z.object({
+    id: z.string(),
+    status: ToolCallStatusSchema.optional(),
+    locations: z.array(FileLocationSchema).optional(),
+    rawOutput: z.record(z.string(), z.unknown()).optional(),
+    content: z.array(ToolCallContentBlockSchema).optional(),
+    error: z.string().optional(),
+    completedAt: z.number().optional(),
+    tokenUsage: TokenUsageSchema.optional(),
+});
+/**
+ * Helper to merge a tool call update into an existing tool call
+ */
+export function mergeToolCallUpdate(existing, update) {
+    const merged = {
+        ...existing,
+        // Only update fields that are defined in the update
+        status: update.status ?? existing.status,
+        locations: update.locations ?? existing.locations,
+        rawOutput: update.rawOutput ?? existing.rawOutput,
+        content: update.content
+            ? [...(existing.content ?? []), ...update.content]
+            : existing.content,
+        error: update.error ?? existing.error,
+        completedAt: update.completedAt ?? existing.completedAt,
+        tokenUsage: update.tokenUsage ?? existing.tokenUsage,
+    };
+    return merged;
+}

package/dist/core/store/chat-store.d.ts

@@ -1,36 +1,36 @@
-import type {
-	ConnectionStatus,
-	DisplayMessage,
-	InputState,
-} from "../schemas/index.js";
+import type { ConnectionStatus, DisplayMessage, InputState } from "../schemas/index.js";
+import type { ToolCall, ToolCallUpdate } from "../schemas/tool-call.js";
 /**
  * Chat store state
  */
 export interface ChatStore {
-	connectionStatus: ConnectionStatus;
-	sessionId: string | null;
-	error: string | null;
-	messages: DisplayMessage[];
-	isStreaming: boolean;
-	streamingStartTime: number | null;
-	input: InputState;
-	setConnectionStatus: (status: ConnectionStatus) => void;
-	setSessionId: (id: string | null) => void;
-	setError: (error: string | null) => void;
-	addMessage: (message: DisplayMessage) => void;
-	updateMessage: (id: string, updates: Partial<DisplayMessage>) => void;
-	clearMessages: () => void;
-	setIsStreaming: (streaming: boolean) => void;
-	setStreamingStartTime: (time: number | null) => void;
-	setInputValue: (value: string) => void;
-	setInputSubmitting: (submitting: boolean) => void;
-	addFileAttachment: (file: InputState["attachedFiles"][number]) => void;
-	removeFileAttachment: (index: number) => void;
-	clearInput: () => void;
+    connectionStatus: ConnectionStatus;
+    sessionId: string | null;
+    error: string | null;
+    messages: DisplayMessage[];
+    isStreaming: boolean;
+    streamingStartTime: number | null;
+    toolCalls: Record<string, ToolCall[]>;
+    input: InputState;
+    setConnectionStatus: (status: ConnectionStatus) => void;
+    setSessionId: (id: string | null) => void;
+    setError: (error: string | null) => void;
+    addMessage: (message: DisplayMessage) => void;
+    updateMessage: (id: string, updates: Partial<DisplayMessage>) => void;
+    clearMessages: () => void;
+    setIsStreaming: (streaming: boolean) => void;
+    setStreamingStartTime: (time: number | null) => void;
+    addToolCall: (sessionId: string, toolCall: ToolCall) => void;
+    updateToolCall: (sessionId: string, update: ToolCallUpdate) => void;
+    addToolCallToCurrentMessage: (toolCall: ToolCall) => void;
+    updateToolCallInCurrentMessage: (update: ToolCallUpdate) => void;
+    setInputValue: (value: string) => void;
+    setInputSubmitting: (submitting: boolean) => void;
+    addFileAttachment: (file: InputState["attachedFiles"][number]) => void;
+    removeFileAttachment: (index: number) => void;
+    clearInput: () => void;
 }
 /**
  * Create chat store
  */
-export declare const useChatStore: import("zustand").UseBoundStore<
-	import("zustand").StoreApi<ChatStore>
->;
+export declare const useChatStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ChatStore>>;

package/dist/core/store/chat-store.js

@@ -1,65 +1,129 @@
 import { create } from "zustand";
+import { mergeToolCallUpdate } from "../schemas/tool-call.js";
 /**
  * Create chat store
  */
 export const useChatStore = create((set) => ({
-	// Initial state
-	connectionStatus: "disconnected",
-	sessionId: null,
-	error: null,
-	messages: [],
-	isStreaming: false,
-	streamingStartTime: null,
-	input: {
-		value: "",
-		isSubmitting: false,
-		attachedFiles: [],
-	},
-	// Actions
-	setConnectionStatus: (status) => set({ connectionStatus: status }),
-	setSessionId: (id) => set({ sessionId: id }),
-	setError: (error) => set({ error }),
-	addMessage: (message) =>
-		set((state) => ({
-			messages: [...state.messages, message],
-		})),
-	updateMessage: (id, updates) =>
-		set((state) => ({
-			messages: state.messages.map((msg) =>
-				msg.id === id ? { ...msg, ...updates } : msg,
-			),
-		})),
-	clearMessages: () => set({ messages: [] }),
-	setIsStreaming: (streaming) => set({ isStreaming: streaming }),
-	setStreamingStartTime: (time) => set({ streamingStartTime: time }),
-	setInputValue: (value) =>
-		set((state) => ({
-			input: { ...state.input, value },
-		})),
-	setInputSubmitting: (submitting) =>
-		set((state) => ({
-			input: { ...state.input, isSubmitting: submitting },
-		})),
-	addFileAttachment: (file) =>
-		set((state) => ({
-			input: {
-				...state.input,
-				attachedFiles: [...state.input.attachedFiles, file],
-			},
-		})),
-	removeFileAttachment: (index) =>
-		set((state) => ({
-			input: {
-				...state.input,
-				attachedFiles: state.input.attachedFiles.filter((_, i) => i !== index),
-			},
-		})),
-	clearInput: () =>
-		set((_state) => ({
-			input: {
-				value: "",
-				isSubmitting: false,
-				attachedFiles: [],
-			},
-		})),
+    // Initial state
+    connectionStatus: "disconnected",
+    sessionId: null,
+    error: null,
+    messages: [],
+    isStreaming: false,
+    streamingStartTime: null,
+    toolCalls: {},
+    input: {
+        value: "",
+        isSubmitting: false,
+        attachedFiles: [],
+    },
+    // Actions
+    setConnectionStatus: (status) => set({ connectionStatus: status }),
+    setSessionId: (id) => set({ sessionId: id }),
+    setError: (error) => set({ error }),
+    addMessage: (message) => set((state) => ({
+        messages: [...state.messages, message],
+    })),
+    updateMessage: (id, updates) => set((state) => ({
+        messages: state.messages.map((msg) => msg.id === id ? { ...msg, ...updates } : msg),
+    })),
+    clearMessages: () => set({ messages: [] }),
+    setIsStreaming: (streaming) => set({ isStreaming: streaming }),
+    setStreamingStartTime: (time) => set({ streamingStartTime: time }),
+    addToolCall: (sessionId, toolCall) => set((state) => ({
+        toolCalls: {
+            ...state.toolCalls,
+            [sessionId]: [...(state.toolCalls[sessionId] || []), toolCall],
+        },
+    })),
+    addToolCallToCurrentMessage: (toolCall) => set((state) => {
+        // Find the most recent assistant message (which should be streaming)
+        const lastAssistantIndex = state.messages.findLastIndex((msg) => msg.role === "assistant");
+        if (lastAssistantIndex === -1) {
+            console.warn("No assistant message found to add tool call to");
+            return state;
+        }
+        const messages = [...state.messages];
+        const lastAssistantMsg = messages[lastAssistantIndex];
+        if (!lastAssistantMsg)
+            return state;
+        messages[lastAssistantIndex] = {
+            ...lastAssistantMsg,
+            toolCalls: [...(lastAssistantMsg.toolCalls || []), toolCall],
+        };
+        return { messages };
+    }),
+    updateToolCallInCurrentMessage: (update) => set((state) => {
+        // Find the most recent assistant message
+        const lastAssistantIndex = state.messages.findLastIndex((msg) => msg.role === "assistant");
+        if (lastAssistantIndex === -1) {
+            console.warn("No assistant message found to update tool call in");
+            return state;
+        }
+        const messages = [...state.messages];
+        const lastAssistantMsg = messages[lastAssistantIndex];
+        if (!lastAssistantMsg)
+            return state;
+        const toolCalls = lastAssistantMsg.toolCalls || [];
+        const existingIndex = toolCalls.findIndex((tc) => tc.id === update.id);
+        if (existingIndex === -1) {
+            console.warn(`Tool call ${update.id} not found in message`);
+            return state;
+        }
+        const existing = toolCalls[existingIndex];
+        if (!existing)
+            return state;
+        const updatedToolCalls = [...toolCalls];
+        updatedToolCalls[existingIndex] = mergeToolCallUpdate(existing, update);
+        messages[lastAssistantIndex] = {
+            ...lastAssistantMsg,
+            toolCalls: updatedToolCalls,
+        };
+        return { messages };
+    }),
+    updateToolCall: (sessionId, update) => set((state) => {
+        const sessionToolCalls = state.toolCalls[sessionId] || [];
+        const existingIndex = sessionToolCalls.findIndex((tc) => tc.id === update.id);
+        if (existingIndex === -1) {
+            // Tool call not found, ignore update
+            return state;
+        }
+        const existing = sessionToolCalls[existingIndex];
+        if (!existing) {
+            return state;
+        }
+        const updatedToolCalls = [...sessionToolCalls];
+        updatedToolCalls[existingIndex] = mergeToolCallUpdate(existing, update);
+        return {
+            toolCalls: {
+                ...state.toolCalls,
+                [sessionId]: updatedToolCalls,
+            },
+        };
+    }),
+    setInputValue: (value) => set((state) => ({
+        input: { ...state.input, value },
+    })),
+    setInputSubmitting: (submitting) => set((state) => ({
+        input: { ...state.input, isSubmitting: submitting },
+    })),
+    addFileAttachment: (file) => set((state) => ({
+        input: {
+            ...state.input,
+            attachedFiles: [...state.input.attachedFiles, file],
+        },
+    })),
+    removeFileAttachment: (index) => set((state) => ({
+        input: {
+            ...state.input,
+            attachedFiles: state.input.attachedFiles.filter((_, i) => i !== index),
+        },
+    })),
+    clearInput: () => set((_state) => ({
+        input: {
+            value: "",
+            isSubmitting: false,
+            attachedFiles: [],
+        },
+    })),
 }));

package/dist/gui/components/ChatLayout.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ArrowDown } from "lucide-react";
 import * as React from "react";
 import { cn } from "../lib/utils.js";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "./resizable.js";
 import { Toaster } from "./Sonner.js";
 const ChatLayoutContext = React.createContext(undefined);
 const useChatLayoutContext = () => {
@@ -22,7 +23,7 @@ const ChatLayoutRoot = React.forwardRef(({ defaultSidebarOpen = false, defaultPa
             setPanelSize,
             activeTab,
             setActiveTab,
-        }, children: _jsx("div", { ref: ref, className: cn("flex h-screen flex-row bg-background text-foreground", className), ...props, children: children }) }));
+        }, children: _jsx("div", { ref: ref, className: cn("flex h-screen flex-row bg-background text-foreground", className), ...props, children: _jsx(ResizablePanelGroup, { direction: "horizontal", className: "flex-1", children: children }) }) }));
 });
 ChatLayoutRoot.displayName = "ChatLayout.Root";
 const ChatLayoutHeader = React.forwardRef(({ className, children, ...props }, ref) => {
@@ -30,7 +31,7 @@ const ChatLayoutHeader = React.forwardRef(({ className, children, ...props }, re
 });
 ChatLayoutHeader.displayName = "ChatLayout.Header";
 const ChatLayoutMain = React.forwardRef(({ className, children, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("flex flex-1 flex-col overflow-hidden", className), ...props, children: children }));
+    return (_jsx(ResizablePanel, { defaultSize: 75, minSize: 50, children: _jsx("div", { ref: ref, className: cn("flex flex-1 flex-col overflow-hidden h-full", className), ...props, children: children }) }));
 });
 ChatLayoutMain.displayName = "ChatLayout.Main";
 const ChatLayoutBody = React.forwardRef(({ showToaster = true, className, children, ...props }, ref) => {
@@ -90,13 +91,13 @@ const ChatLayoutAside = React.forwardRef(({ breakpoint = "lg", className, childr
     // Hidden state - don't render
     if (panelSize === "hidden")
         return null;
-    return (_jsx("div", { ref: ref, className: cn(
-        // Hidden by default, visible at breakpoint
-        "hidden border-l border-border bg-card overflow-y-auto transition-all duration-300", 
-        // Breakpoint visibility
-        breakpoint === "md" && "md:block", breakpoint === "lg" && "lg:block", breakpoint === "xl" && "xl:block", breakpoint === "2xl" && "2xl:block", 
-        // Size variants
-        panelSize === "small" && "w-80", panelSize === "large" && "w-lg", className), ...props, children: children }));
+    return (_jsxs(_Fragment, { children: [_jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 25, minSize: 15, maxSize: 50, children: _jsx("div", { ref: ref, className: cn(
+                    // Hidden by default, visible at breakpoint
+                    "hidden h-full border-l border-border bg-card overflow-y-auto transition-all duration-300", 
+                    // Breakpoint visibility
+                    breakpoint === "md" && "md:block", breakpoint === "lg" && "lg:block", breakpoint === "xl" && "xl:block", breakpoint === "2xl" && "2xl:block", 
+                    // Size variants - width is now controlled by ResizablePanel
+                    className), ...props, children: children }) })] }));
 });
 ChatLayoutAside.displayName = "ChatLayout.Aside";
 /* -------------------------------------------------------------------------------------------------

package/dist/gui/components/MessageContent.js

@@ -6,6 +6,7 @@ import { useChatStore } from "../../core/store/chat-store.js";
 import { cn } from "../lib/utils.js";
 import { Reasoning } from "./Reasoning.js";
 import { Response } from "./Response.js";
+import { ToolCall } from "./ToolCall.js";
 /**
  * MessageContent component inspired by shadcn.io/ai
  * Provides the content container with role-based styling
@@ -97,7 +98,9 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
         const hasThinking = !!thinking;
         // Check if waiting (streaming but no content yet)
         const isWaiting = message.isStreaming && !message.content && message.role === "assistant";
-        content = (_jsxs(_Fragment, { children: [message.role === "assistant" && hasThinking && (_jsx(Reasoning, { content: thinking, isStreaming: message.isStreaming, mode: thinkingDisplayStyle, autoCollapse: true })), isWaiting && streamingStartTime && (_jsxs("div", { className: "flex items-center gap-2 opacity-50", children: [_jsx(Loader2Icon, { className: "size-4 animate-spin text-muted-foreground" }), _jsx(WaitingElapsedTime, { startTime: streamingStartTime })] })), message.role === "user" ? (_jsx("div", { className: "whitespace-pre-wrap", children: message.content })) : (_jsx(Response, { content: message.content, isStreaming: message.isStreaming, showEmpty: false }))] }));
+        content = (_jsxs(_Fragment, { children: [message.role === "assistant" && hasThinking && (_jsx(Reasoning, { content: thinking, isStreaming: message.isStreaming, mode: thinkingDisplayStyle, autoCollapse: true })), isWaiting && streamingStartTime && (_jsxs("div", { className: "flex items-center gap-2 opacity-50", children: [_jsx(Loader2Icon, { className: "size-4 animate-spin text-muted-foreground" }), _jsx(WaitingElapsedTime, { startTime: streamingStartTime })] })), message.role === "assistant" &&
+                    message.toolCalls &&
+                    message.toolCalls.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-3", children: message.toolCalls.map((toolCall) => (_jsx(ToolCall, { toolCall: toolCall }, toolCall.id))) })), message.role === "user" ? (_jsx("div", { className: "whitespace-pre-wrap", children: message.content })) : (_jsx(Response, { content: message.content, isStreaming: message.isStreaming, showEmpty: false }))] }));
     }
     return (_jsx("div", { ref: ref, className: cn(messageContentVariants({ role, variant }), isStreaming && "animate-pulse-subtle", className), ...props, children: content }));
 });

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

@@ -0,0 +1,8 @@
+import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
+export interface ToolCallProps {
+    toolCall: ToolCallType;
+}
+/**
+ * ToolCall component - displays a single tool call with collapsible details
+ */
+export declare function ToolCall({ toolCall }: ToolCallProps): import("react/jsx-runtime").JSX.Element;