@townco/ui 0.1.36 → 0.1.38

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

@@ -1,5 +1,7 @@
 export { toast } from "sonner";
 export { MockFileSystemProvider, mockFileSystemData, } from "../data/mockFileSystemData.js";
+export { mockSourceData } from "../data/mockSourceData.js";
+export { mockTodoData } from "../data/mockTodoData.js";
 export type { FileSystemData, FileSystemItem as FileSystemItemData, FileSystemItemType, FileSystemProvider, } from "../types/filesystem.js";
 export { Button, type ButtonProps, buttonVariants } from "./Button.js";
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./Card.js";
@@ -13,6 +15,7 @@ export { ChatSecondaryPanel, type ChatSecondaryPanelProps, } from "./ChatSeconda
 export * as ChatSidebar from "./ChatSidebar.js";
 export { ChatStatus, type ChatStatusProps } from "./ChatStatus.js";
 export { ChatView, type ChatViewProps } from "./ChatView.js";
+export { ContextUsageButton, type ContextUsageButtonProps, } from "./ContextUsageButton.js";
 export { Conversation, type ConversationProps } from "./Conversation.js";
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from "./Dialog.js";
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./DropdownMenu.js";
@@ -39,3 +42,4 @@ 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";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./Tooltip.js";

package/dist/gui/components/index.js

@@ -1,6 +1,8 @@
 // Base UI components
 export { toast } from "sonner";
 export { MockFileSystemProvider, mockFileSystemData, } from "../data/mockFileSystemData.js";
+export { mockSourceData } from "../data/mockSourceData.js";
+export { mockTodoData } from "../data/mockTodoData.js";
 export { Button, buttonVariants } from "./Button.js";
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./Card.js";
 export { ChatEmptyState } from "./ChatEmptyState.js";
@@ -14,6 +16,7 @@ export { ChatSecondaryPanel, } from "./ChatSecondaryPanel.js";
 export * as ChatSidebar from "./ChatSidebar.js";
 export { ChatStatus } from "./ChatStatus.js";
 export { ChatView } from "./ChatView.js";
+export { ContextUsageButton, } from "./ContextUsageButton.js";
 // Chat components - shadcn.io/ai inspired primitives
 export { Conversation } from "./Conversation.js";
 // Dialog components
@@ -46,3 +49,5 @@ export { TodoList } from "./TodoList.js";
 export { TodoListItem, } from "./TodoListItem.js";
 export { ToolCall } from "./ToolCall.js";
 export { ToolCallList } from "./ToolCallList.js";
+// Tooltip components
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./Tooltip.js";

package/dist/gui/components/tool-call-summary.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Tool call summary data from the /summarize endpoint
+ */
+export interface ToolCallSummary {
+    id: string;
+    name: string;
+    description: string;
+    input: Record<string, unknown>;
+    output?: string | undefined;
+    status: "pending" | "completed" | "error";
+    error?: string | undefined;
+}
+export interface SummaryResponse {
+    summary: {
+        total: number;
+        byStatus: Record<string, number>;
+        byTool: Record<string, number>;
+    };
+    toolCalls: ToolCallSummary[];
+}
+/**
+ * Props for ToolCallSummaryDisplay component
+ */
+export interface ToolCallSummaryDisplayProps {
+    /** ACP server URL */
+    serverUrl: string;
+    /** Anthropic API request (messages with tool calls) */
+    request: {
+        model?: string;
+        messages: Array<{
+            role: "user" | "assistant";
+            content: string | Array<{
+                type: string;
+                [key: string]: unknown;
+            }>;
+        }>;
+    };
+    /** Custom className for styling */
+    className?: string;
+}
+/**
+ * Display a summary of tool calls from an Anthropic API request
+ */
+export declare function ToolCallSummaryDisplay({ serverUrl, request, className, }: ToolCallSummaryDisplayProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/tool-call-summary.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createLogger } from "@townco/core";
+import { AlertCircle, CheckCircle, Clock, Loader2, RefreshCw, } from "lucide-react";
+import { useEffect, useState } from "react";
+import { cn } from "../lib/utils";
+const logger = createLogger("tool-call-summary");
+/**
+ * Display a summary of tool calls from an Anthropic API request
+ */
+export function ToolCallSummaryDisplay({ serverUrl, request, className, }) {
+    const [summary, setSummary] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const fetchSummary = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const response = await fetch(`${serverUrl}/summarize`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(request),
+            });
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || "Failed to fetch summary");
+            }
+            const data = await response.json();
+            setSummary(data);
+            logger.info("Tool call summary fetched", {
+                total: data.summary.total,
+            });
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            setError(message);
+            logger.error("Failed to fetch tool call summary", { error: message });
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    // Fetch summary on mount and when request changes
+    useEffect(() => {
+        fetchSummary();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [serverUrl, request]);
+    if (loading && !summary) {
+        return (_jsxs("div", { className: cn("flex items-center justify-center p-4 text-muted-foreground", className), children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), _jsx("span", { className: "text-paragraph-sm", children: "Loading summary..." })] }));
+    }
+    if (error) {
+        return (_jsx("div", { className: cn("rounded-lg border border-destructive/20 p-4", className), children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(AlertCircle, { className: "h-4 w-4 text-destructive shrink-0 mt-0.5" }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-paragraph-sm font-medium text-destructive", children: "Error loading summary" }), _jsx("p", { className: "text-paragraph-sm text-muted-foreground mt-1", children: error })] }), _jsx("button", { type: "button", onClick: fetchSummary, className: "text-muted-foreground hover:text-foreground transition-colors", children: _jsx(RefreshCw, { className: "h-4 w-4" }) })] }) }));
+    }
+    if (!summary || summary.summary.total === 0) {
+        return (_jsx("div", { className: cn("flex items-center justify-center p-4 text-muted-foreground", className), children: _jsx("span", { className: "text-paragraph-sm", children: "No tool calls found" }) }));
+    }
+    return (_jsxs("div", { className: cn("space-y-4", className), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h3", { className: "text-heading-5 font-semibold", children: ["Tool Calls (", summary.summary.total, ")"] }), _jsx("button", { type: "button", onClick: fetchSummary, disabled: loading, className: "text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50", children: _jsx(RefreshCw, { className: cn("h-4 w-4", loading && "animate-spin") }) })] }), _jsxs("div", { className: "flex gap-4", children: [(summary.summary.byStatus.completed ?? 0) > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(CheckCircle, { className: "h-4 w-4 text-success" }), _jsxs("span", { className: "text-paragraph-sm text-muted-foreground", children: [summary.summary.byStatus.completed, " completed"] })] })), (summary.summary.byStatus.pending ?? 0) > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Clock, { className: "h-4 w-4 text-warning" }), _jsxs("span", { className: "text-paragraph-sm text-muted-foreground", children: [summary.summary.byStatus.pending, " pending"] })] })), (summary.summary.byStatus.error ?? 0) > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(AlertCircle, { className: "h-4 w-4 text-destructive" }), _jsxs("span", { className: "text-paragraph-sm text-muted-foreground", children: [summary.summary.byStatus.error, " errors"] })] }))] }), _jsx("div", { className: "space-y-2", children: summary.toolCalls.map((toolCall) => (_jsx(ToolCallSummaryItem, { toolCall: toolCall }, toolCall.id))) })] }));
+}
+/**
+ * Display a single tool call summary
+ */
+function ToolCallSummaryItem({ toolCall }) {
+    const [expanded, setExpanded] = useState(false);
+    const statusIcon = toolCall.status === "completed" ? (_jsx(CheckCircle, { className: "h-4 w-4 text-success" })) : toolCall.status === "error" ? (_jsx(AlertCircle, { className: "h-4 w-4 text-destructive" })) : (_jsx(Clock, { className: "h-4 w-4 text-warning" }));
+    return (_jsxs("div", { className: "rounded-lg border border-border bg-card p-3 space-y-2", children: [_jsxs("button", { type: "button", onClick: () => setExpanded(!expanded), className: "flex items-start gap-2 w-full text-left", children: [statusIcon, _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-paragraph-sm font-medium text-foreground truncate", children: toolCall.description }), _jsx("p", { className: "text-paragraph-xs text-muted-foreground", children: toolCall.name })] })] }), expanded && (_jsxs("div", { className: "pl-6 space-y-2", children: [Object.keys(toolCall.input).length > 0 && (_jsxs("div", { children: [_jsx("p", { className: "text-paragraph-xs font-medium text-muted-foreground mb-1", children: "Input:" }), _jsx("pre", { className: "text-paragraph-xs bg-muted p-2 rounded overflow-x-auto", children: JSON.stringify(toolCall.input, null, 2) })] })), toolCall.output && (_jsxs("div", { children: [_jsx("p", { className: "text-paragraph-xs font-medium text-muted-foreground mb-1", children: "Output:" }), _jsx("pre", { className: "text-paragraph-xs bg-muted p-2 rounded overflow-x-auto", children: toolCall.output })] })), toolCall.error && (_jsxs("div", { children: [_jsx("p", { className: "text-paragraph-xs font-medium text-destructive mb-1", children: "Error:" }), _jsx("p", { className: "text-paragraph-xs text-destructive bg-destructive/10 p-2 rounded", children: toolCall.error })] }))] }))] }));
+}

package/dist/gui/data/mockSourceData.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Mock source data - stub implementation
+ * Replace this with real source data from agent later
+ */
+import type { SourceItem } from "../components/SourceListItem.js";
+/**
+ * Stub source data
+ * This data can be easily replaced with real sources from the agent
+ */
+export declare const mockSourceData: SourceItem[];

package/dist/gui/data/mockSourceData.js

@@ -0,0 +1,40 @@
+/**
+ * Mock source data - stub implementation
+ * Replace this with real source data from agent later
+ */
+/**
+ * Stub source data
+ * This data can be easily replaced with real sources from the agent
+ */
+export const mockSourceData = [
+    {
+        id: "1",
+        title: "Boeing Scores Early Wins at Dubai Airshow",
+        url: "https://www.reuters.com/business/aerospace-defense/boeing-scores-early-wins-dubai-airshow-2024-11-17",
+        snippet: "DUBAI, Nov 17 (Reuters) - Boeing (BA.N), opens new tab took centre stage at day one of the Dubai Airshow on Monday, booking a $38 billion order from host carrier Emirates and clinching more deals with African carriers, while China displayed its C919 in the Middle East for the first time.",
+        sourceName: "Reuters",
+        favicon: "https://www.reuters.com/favicon.ico",
+    },
+    {
+        id: "2",
+        title: "Boeing's Sustainable Aviation Goals Take Flight",
+        url: "https://www.forbes.com/boeing-sustainability",
+        snippet: "SEATTLE, Nov 18 (Reuters) - Boeing is making headway towards its sustainability targets, unveiling plans for a new eco-friendly aircraft design aimed at reducing emissions by 50% by 2030.",
+        sourceName: "Forbes",
+    },
+    {
+        id: "3",
+        title: "Boeing Faces Increased Competition in Global Aviation Market",
+        url: "https://www.reuters.com/business/aerospace-defense/boeing-competition-2024-11-19",
+        snippet: "CHICAGO, Nov 19 (Reuters) - As the global aviation industry rebounds post-pandemic, Boeing is grappling with intensified competition from rival manufacturers, particularly in the Asian market.",
+        sourceName: "Reuters",
+        favicon: "https://www.reuters.com/favicon.ico",
+    },
+    {
+        id: "4",
+        title: "Boeing's Starliner Successfully Completes Orbital Test Flight",
+        url: "https://www.theverge.com/boeing-starliner",
+        snippet: "NASA, Nov 20 (Reuters) - Boeing's CST-100 Starliner spacecraft achieves a significant milestone, successfully completing its orbital test flight, paving the way for future crewed missions to the International Space Station.",
+        sourceName: "The Verge",
+    },
+];

package/dist/gui/data/mockTodoData.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Mock todo data - stub implementation
+ * Replace this with real todo data from agent/store later
+ */
+import type { TodoItem } from "../components/TodoListItem.js";
+/**
+ * Stub todo data
+ * This data can be easily replaced with real todo queries from the agent
+ */
+export declare const mockTodoData: TodoItem[];

package/dist/gui/data/mockTodoData.js

@@ -0,0 +1,35 @@
+/**
+ * Mock todo data - stub implementation
+ * Replace this with real todo data from agent/store later
+ */
+/**
+ * Stub todo data
+ * This data can be easily replaced with real todo queries from the agent
+ */
+export const mockTodoData = [
+    {
+        id: "todo-1",
+        text: "Review filesystem implementation",
+        status: "completed",
+    },
+    {
+        id: "todo-2",
+        text: "Add overflow menu actions",
+        status: "in_progress",
+    },
+    {
+        id: "todo-3",
+        text: "Connect to real filesystem API",
+        status: "pending",
+    },
+    {
+        id: "todo-4",
+        text: "Implement drag and drop support",
+        status: "pending",
+    },
+    {
+        id: "todo-5",
+        text: "Add file preview functionality",
+        status: "pending",
+    },
+];

package/dist/gui/examples/FileSystemDemo.d.ts

@@ -0,0 +1,5 @@
+/**
+ * FileSystemDemo - A demo page showcasing the FileSystemView component
+ * Can be integrated into the GUI app for testing and demonstration
+ */
+export declare function FileSystemDemo(): import("react/jsx-runtime").JSX.Element;

package/dist/gui/examples/FileSystemDemo.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * FileSystemDemo - A demo page showcasing the FileSystemView component
+ * Can be integrated into the GUI app for testing and demonstration
+ */
+import * as React from "react";
+import { FileSystemView } from "../components/FileSystemView.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/Card.js";
+export function FileSystemDemo() {
+    const [selectedItem, setSelectedItem] = React.useState(null);
+    const handleDownload = (item) => {
+        console.log("Download:", item.name);
+        // Implement download logic
+    };
+    const handleRename = (item) => {
+        console.log("Rename:", item.name);
+        // Implement rename logic
+    };
+    const handleDelete = (item) => {
+        console.log("Delete:", item.name);
+        // Implement delete logic
+    };
+    return (_jsx("div", { className: "w-full h-full p-8 bg-background", children: _jsxs("div", { className: "max-w-7xl mx-auto space-y-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-bold tracking-tight", children: "File Manager" }), _jsx("p", { className: "text-muted-foreground mt-2", children: "A hierarchical file system view with stub data. Replace the MockFileSystemProvider with a real implementation to connect to actual filesystem data." })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", children: [_jsxs(Card, { className: "lg:col-span-2", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Files" }), _jsx(CardDescription, { children: "Browse files and folders. Click folders to expand/collapse." })] }), _jsx(CardContent, { className: "p-0", children: _jsx(FileSystemView, { onItemSelect: setSelectedItem, onDownload: handleDownload, onRename: handleRename, onDelete: handleDelete, className: "max-h-[600px] overflow-y-auto" }) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Details" }), _jsx(CardDescription, { children: "Information about the selected item" })] }), _jsx(CardContent, { children: selectedItem ? (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Name" }), _jsx("p", { className: "text-base font-mono", children: selectedItem.name })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Type" }), _jsx("p", { className: "text-base capitalize", children: selectedItem.type })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "ID" }), _jsx("p", { className: "text-base font-mono text-xs", children: selectedItem.id })] }), selectedItem.extension && (_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Extension" }), _jsxs("p", { className: "text-base", children: [".", selectedItem.extension] })] })), selectedItem.children && (_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Children" }), _jsxs("p", { className: "text-base", children: [selectedItem.children.length, " item(s)"] })] })), selectedItem.path && (_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Path" }), _jsx("p", { className: "text-base font-mono text-xs", children: selectedItem.path })] }))] })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "Select a file or folder to view details" })) })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Implementation Notes" }) }), _jsxs(CardContent, { className: "space-y-2 text-sm", children: [_jsxs("p", { children: [_jsx("strong", { children: "Stub System:" }), " Currently using ", _jsx("code", { className: "bg-muted px-1 py-0.5 rounded", children: "MockFileSystemProvider" }), " with hardcoded data."] }), _jsxs("p", { children: [_jsx("strong", { children: "Easy Replacement:" }), " Implement the ", _jsx("code", { className: "bg-muted px-1 py-0.5 rounded", children: "FileSystemProvider" }), " ", "interface to connect to real data sources."] }), _jsxs("p", { children: [_jsx("strong", { children: "Design:" }), " Based on shadcn file manager components and Figma specifications."] })] })] })] }) }));
+}

package/dist/gui/examples/FileSystemExample.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Example usage of FileSystemView component
+ * This demonstrates how to use the stub filesystem and how to replace it with real data
+ */
+/**
+ * Basic usage with default mock data
+ */
+export declare function BasicFileSystemExample(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Custom mock data example
+ * Shows how to create custom stub data
+ */
+export declare function CustomDataExample(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Example with real provider (commented out to avoid actual API calls)
+ */
+export declare function RealDataExample(): import("react/jsx-runtime").JSX.Element;

package/dist/gui/examples/FileSystemExample.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Example usage of FileSystemView component
+ * This demonstrates how to use the stub filesystem and how to replace it with real data
+ */
+import * as React from "react";
+import { FileSystemView } from "../components/FileSystemView.js";
+import { MockFileSystemProvider } from "../data/mockFileSystemData.js";
+/**
+ * Basic usage with default mock data
+ */
+export function BasicFileSystemExample() {
+    return (_jsx("div", { className: "w-full h-full bg-background", children: _jsx(FileSystemView, { onItemSelect: (item) => {
+                console.log("Selected:", item);
+            } }) }));
+}
+/**
+ * Custom mock data example
+ * Shows how to create custom stub data
+ */
+export function CustomDataExample() {
+    const customData = [
+        {
+            id: "src",
+            name: "src",
+            type: "folder",
+            children: [
+                {
+                    id: "components",
+                    name: "components",
+                    type: "folder",
+                    children: [
+                        { id: "button", name: "Button.tsx", type: "file", extension: "tsx" },
+                        { id: "card", name: "Card.tsx", type: "file", extension: "tsx" },
+                    ],
+                },
+                { id: "app", name: "App.tsx", type: "file", extension: "tsx" },
+                { id: "index", name: "index.ts", type: "file", extension: "ts" },
+            ],
+        },
+        {
+            id: "public",
+            name: "public",
+            type: "folder",
+            children: [
+                { id: "favicon", name: "favicon.ico", type: "file" },
+            ],
+        },
+    ];
+    const customProvider = new MockFileSystemProvider(customData);
+    return (_jsx("div", { className: "w-full h-full bg-background", children: _jsx(FileSystemView, { provider: customProvider, onItemSelect: (item) => {
+                console.log("Selected:", item);
+            } }) }));
+}
+/**
+ * Example of how to implement a real FileSystemProvider
+ * Replace MockFileSystemProvider with this when connecting to real data
+ */
+class RealFileSystemProvider {
+    apiUrl;
+    constructor(apiUrl) {
+        this.apiUrl = apiUrl;
+    }
+    async getRootItems() {
+        // Replace with actual API call
+        const response = await fetch(`${this.apiUrl}/filesystem/root`);
+        return response.json();
+    }
+    async getItemChildren(itemId) {
+        // Replace with actual API call
+        const response = await fetch(`${this.apiUrl}/filesystem/items/${itemId}/children`);
+        return response.json();
+    }
+    async getItemDetails(itemId) {
+        // Replace with actual API call
+        const response = await fetch(`${this.apiUrl}/filesystem/items/${itemId}`);
+        return response.json();
+    }
+}
+/**
+ * Example with real provider (commented out to avoid actual API calls)
+ */
+export function RealDataExample() {
+    // Uncomment and configure when ready to use real data:
+    // const realProvider = new RealFileSystemProvider('https://your-api.com');
+    return (_jsx("div", { className: "w-full h-full bg-background", children: _jsx(FileSystemView
+        // provider={realProvider}
+        , { 
+            // provider={realProvider}
+            onItemSelect: (item) => {
+                console.log("Selected:", item);
+                // Handle file selection - open file, show details, etc.
+            } }) }));
+}

package/dist/sdk/schemas/session.d.ts

@@ -158,6 +158,8 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     toolCall: z.ZodObject<{
         id: z.ZodString;
         title: z.ZodString;
+        prettyName: z.ZodOptional<z.ZodString>;
+        icon: z.ZodOptional<z.ZodString>;
         kind: z.ZodEnum<{
             read: "read";
             edit: "edit";

package/dist/sdk/transports/http.d.ts

@@ -20,6 +20,7 @@ export declare class HttpTransport implements Transport {
     private abortController;
     private options;
     private isReceivingMessages;
+    private isInReplayMode;
     constructor(options: HttpTransportOptions);
     connect(): Promise<void>;
     /**

package/dist/sdk/transports/http.js

@@ -21,6 +21,7 @@ export class HttpTransport {
     abortController = null;
     options;
     isReceivingMessages = false;
+    isInReplayMode = false; // True during session replay, ignores non-replay streaming
     constructor(options) {
         // Ensure baseUrl doesn't end with a slash
         this.options = { ...options, baseUrl: options.baseUrl.replace(/\/$/, "") };
@@ -100,6 +101,8 @@ export class HttpTransport {
                 capabilities: initResponse.agentCapabilities,
             });
             // Step 2: Open SSE connection FIRST so we can receive replayed messages
+            // Enter replay mode - ignore non-replay streaming until user sends a message
+            this.isInReplayMode = true;
             this.currentSessionId = sessionId;
             await this.connectSSE();
             // Step 3: Load existing session (will trigger message replay)
@@ -116,6 +119,7 @@ export class HttpTransport {
             });
             this.connected = true;
             this.reconnectAttempts = 0;
+            // Note: isInReplayMode will be set to false when user sends their first message
         }
         catch (error) {
             this.connected = false;
@@ -163,6 +167,11 @@ export class HttpTransport {
         if (!this.connected || !this.currentSessionId) {
             throw new Error("Transport not connected");
         }
+        // Exit replay mode when user sends their first message
+        if (this.isInReplayMode) {
+            logger.info("Exiting replay mode - user sent a message");
+            this.isInReplayMode = false;
+        }
         try {
             // Reset stream state for new message
             this.streamComplete = false;
@@ -510,10 +519,22 @@ export class HttpTransport {
                 "messageId" in update._meta
                 ? String(update._meta.messageId)
                 : undefined;
+            const prettyName = update._meta &&
+                typeof update._meta === "object" &&
+                "prettyName" in update._meta
+                ? String(update._meta.prettyName)
+                : undefined;
+            const icon = update._meta &&
+                typeof update._meta === "object" &&
+                "icon" in update._meta
+                ? String(update._meta.icon)
+                : undefined;
             // Initial tool call notification
             const toolCall = {
                 id: update.toolCallId ?? "",
                 title: update.title ?? "",
+                prettyName,
+                icon,
                 kind: update.kind || "other",
                 status: update.status || "pending",
                 locations: update.locations,
@@ -729,6 +750,15 @@ export class HttpTransport {
             this.notifySessionUpdate(sessionUpdate);
         }
         else if (update?.sessionUpdate === "agent_message_chunk") {
+            // Check if this is a replay (not live streaming)
+            const isReplay = update._meta &&
+                typeof update._meta === "object" &&
+                "isReplay" in update._meta &&
+                update._meta.isReplay === true;
+            // If in replay mode, ignore any chunks that aren't marked as replay
+            if (this.isInReplayMode && !isReplay) {
+                return;
+            }
             // Handle agent message chunks
             const sessionUpdate = {
                 type: "generic",
@@ -741,10 +771,7 @@ export class HttpTransport {
                 "tokenUsage" in update._meta
                 ? update._meta.tokenUsage
                 : undefined;
-            logger.debug("Agent message chunk", {
-                tokenUsage,
-            });
-            // Queue message chunks if present
+            // Queue message chunks if present (but skip during replay)
             // For agent_message_chunk, content is an object, not an array
             const content = update.content;
             if (content && typeof content === "object") {
@@ -759,7 +786,8 @@ export class HttpTransport {
                         isComplete: false,
                     };
                 }
-                if (chunk) {
+                // Only queue chunks for live streaming, not replay
+                if (chunk && !isReplay) {
                     // Resolve any waiting receive() calls immediately
                     const resolver = this.chunkResolvers.shift();
                     if (resolver) {
@@ -771,10 +799,11 @@ export class HttpTransport {
                     }
                 }
                 // Also notify as a complete message for session replay
-                // Only send session updates when NOT actively receiving messages (prevents duplication during normal streaming)
+                // During replay: always send session updates with complete messages
+                // During live streaming: only send when NOT actively receiving (prevents duplication)
                 if (chunk &&
                     typeof contentObj.text === "string" &&
-                    !this.isReceivingMessages) {
+                    (isReplay || !this.isReceivingMessages)) {
                     const messageSessionUpdate = {
                         type: "generic",
                         sessionId,
@@ -795,7 +824,10 @@ export class HttpTransport {
                     this.notifySessionUpdate(messageSessionUpdate);
                 }
             }
-            this.notifySessionUpdate(sessionUpdate);
+            // Only send generic session update during live streaming (not replay)
+            if (!isReplay) {
+                this.notifySessionUpdate(sessionUpdate);
+            }
         }
         else if (update?.sessionUpdate === "user_message_chunk") {
             // Handle user message chunks (could be from replay or new messages)

package/dist/sdk/transports/stdio.js

@@ -60,10 +60,23 @@ export class StdioTransport {
                         const sessionId = self.currentSessionId || params.sessionId;
                         // Handle ACP tool call notifications
                         if (update?.sessionUpdate === "tool_call") {
+                            // Extract prettyName and icon from _meta
+                            const prettyName = update._meta &&
+                                typeof update._meta === "object" &&
+                                "prettyName" in update._meta
+                                ? String(update._meta.prettyName)
+                                : undefined;
+                            const icon = update._meta &&
+                                typeof update._meta === "object" &&
+                                "icon" in update._meta
+                                ? String(update._meta.icon)
+                                : undefined;
                             // Initial tool call notification
                             const toolCall = {
                                 id: update.toolCallId ?? "",
                                 title: update.title ?? "",
+                                prettyName,
+                                icon,
                                 kind: update.kind || "other",
                                 status: update.status || "pending",
                                 locations: update.locations,

package/dist/tui/components/ChatView.js

@@ -12,10 +12,10 @@ export function ChatView({ client }) {
     const _currentModel = useChatStore((state) => state.currentModel);
     const _tokenDisplayMode = useChatStore((state) => state.tokenDisplayMode);
     // Use headless hooks for business logic
-    useChatSession(client); // Subscribe to session changes
-    const { messages, isStreaming } = useChatMessages(client);
+    const { startSession } = useChatSession(client); // Subscribe to session changes
+    const { messages, isStreaming } = useChatMessages(client, startSession);
     useToolCalls(client); // Still need to subscribe to tool call events
-    const { value, isSubmitting, attachedFiles, onChange, onSubmit } = useChatInput(client);
+    const { value, isSubmitting, attachedFiles, onChange, onSubmit } = useChatInput(client, startSession);
     // 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
@@ -34,8 +34,8 @@ export function ChatViewStatus({ client }) {
     const currentContext = useChatStore((state) => state.currentContext);
     const currentModel = useChatStore((state) => state.currentModel);
     const tokenDisplayMode = useChatStore((state) => state.tokenDisplayMode);
-    const { connectionStatus, sessionId } = useChatSession(client);
-    const { messages, isStreaming } = useChatMessages(client);
+    const { connectionStatus, sessionId, startSession } = useChatSession(client);
+    const { messages, isStreaming } = useChatMessages(client, startSession);
     const hasStreamingContent = messages.some((msg) => msg.isStreaming && msg.content.length > 0);
     return (_jsx(StatusBar, { connectionStatus: connectionStatus, sessionId: sessionId, isStreaming: isStreaming, streamingStartTime: streamingStartTime, hasStreamingContent: hasStreamingContent, totalBilled: totalBilled, currentContext: currentContext, currentModel: currentModel, tokenDisplayMode: tokenDisplayMode }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.36",
+  "version": "0.1.38",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@agentclientprotocol/sdk": "^0.5.1",
-    "@townco/core": "0.0.14",
+    "@townco/core": "0.0.16",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -62,7 +62,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "0.1.33",
+    "@townco/tsconfig": "0.1.35",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",