@townco/ui 0.1.31 → 0.1.33

package/dist/core/hooks/index.d.ts

@@ -1,6 +1,7 @@
 /**
  * Export all core hooks
  */
+export * from "./use-acp-client.js";
 export * from "./use-chat-input.js";
 export * from "./use-chat-messages.js";
 export * from "./use-chat-session.js";

package/dist/core/hooks/index.js

@@ -1,6 +1,7 @@
 /**
  * Export all core hooks
  */
+export * from "./use-acp-client.js";
 export * from "./use-chat-input.js";
 export * from "./use-chat-messages.js";
 export * from "./use-chat-session.js";

package/dist/core/hooks/use-acp-client.d.ts

@@ -0,0 +1,22 @@
+import { AcpClient } from "../../sdk/client/index.js";
+export interface UseACPClientOptions {
+    serverUrl: string;
+}
+export interface UseACPClientReturn {
+    client: AcpClient | null;
+    error: string | null;
+    sessionId: string | null;
+}
+/**
+ * Custom hook to initialize and manage an ACP client connection
+ *
+ * Handles:
+ * - Extracting session ID from URL query parameters
+ * - Creating and initializing the ACP client
+ * - Cleanup on unmount
+ * - Error handling
+ *
+ * @param options - Configuration options for the ACP client
+ * @returns Object containing client, error state, and session ID
+ */
+export declare function useACPClient(options: UseACPClientOptions): UseACPClientReturn;

package/dist/core/hooks/use-acp-client.js

@@ -0,0 +1,63 @@
+import { createLogger } from "@townco/core";
+import { useEffect, useState } from "react";
+import { AcpClient } from "../../sdk/client/index.js";
+const logger = createLogger("acp-client-hook");
+/**
+ * Custom hook to initialize and manage an ACP client connection
+ *
+ * Handles:
+ * - Extracting session ID from URL query parameters
+ * - Creating and initializing the ACP client
+ * - Cleanup on unmount
+ * - Error handling
+ *
+ * @param options - Configuration options for the ACP client
+ * @returns Object containing client, error state, and session ID
+ */
+export function useACPClient(options) {
+    const [client, setClient] = useState(null);
+    const [error, setError] = useState(null);
+    const [sessionId, setSessionId] = useState(null);
+    useEffect(() => {
+        // Extract session ID from URL query parameter (?session=abc123)
+        const urlParams = new URLSearchParams(window.location.search);
+        const urlSessionId = urlParams.get("session");
+        if (urlSessionId) {
+            logger.info("Session ID found in URL", { sessionId: urlSessionId });
+            setSessionId(urlSessionId);
+        }
+        // Create AcpClient with HTTP transport
+        try {
+            logger.info("Initializing ACP client", {
+                serverUrl: options.serverUrl,
+            });
+            const acpClient = new AcpClient({
+                type: "http",
+                options: {
+                    baseUrl: options.serverUrl,
+                },
+            });
+            setClient(acpClient);
+            logger.info("ACP client initialized successfully");
+            // Clean up on unmount
+            return () => {
+                logger.debug("Disconnecting ACP client");
+                acpClient.disconnect().catch((err) => {
+                    logger.error("Failed to disconnect ACP client", {
+                        error: err instanceof Error ? err.message : String(err),
+                    });
+                });
+            };
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "Failed to initialize ACP client";
+            setError(errorMessage);
+            logger.error("Failed to initialize ACP client", {
+                error: err instanceof Error ? err.message : String(err),
+                stack: err instanceof Error ? err.stack : undefined,
+            });
+            return undefined;
+        }
+    }, [options.serverUrl]);
+    return { client, error, sessionId };
+}

package/dist/core/hooks/use-chat-session.d.ts

@@ -3,7 +3,7 @@ import type { AcpClient } from "../../sdk/client/index.js";
  * Hook for managing chat session lifecycle
  */
 export declare function useChatSession(client: AcpClient | null, initialSessionId?: string | null): {
-    connectionStatus: "error" | "disconnected" | "connecting" | "connected";
+    connectionStatus: "disconnected" | "connecting" | "connected" | "error";
     sessionId: string | null;
     connect: () => Promise<void>;
     loadSession: (sessionIdToLoad: string) => Promise<void>;

package/dist/core/hooks/use-chat-session.js

@@ -27,21 +27,39 @@ export function useChatSession(client, initialSessionId) {
                 // Convert SDK message to DisplayMessage
                 // Filter out tool messages as they're not displayed in the chat
                 if (update.message.role !== "tool") {
-                    const displayMessage = {
-                        id: update.message.id,
-                        role: update.message.role,
-                        content: update.message.content
-                            .map((c) => {
-                            if (c.type === "text") {
-                                return c.text;
-                            }
-                            return "";
-                        })
-                            .join(""),
-                        timestamp: update.message.timestamp,
-                        isStreaming: false,
-                    };
-                    addMessage(displayMessage);
+                    const textContent = update.message.content
+                        .map((c) => {
+                        if (c.type === "text") {
+                            return c.text;
+                        }
+                        return "";
+                    })
+                        .join("");
+                    // During session replay, chunks for the same message arrive separately
+                    // Check if we should append to the last assistant message or create a new one
+                    const messages = useChatStore.getState().messages;
+                    const lastMessage = messages[messages.length - 1];
+                    if (update.message.role === "assistant" &&
+                        lastMessage?.role === "assistant" &&
+                        lastMessage.content === "" &&
+                        textContent) {
+                        // Append text to existing empty assistant message (created by tool call)
+                        logger.debug("Appending text to existing assistant message");
+                        useChatStore.getState().updateMessage(lastMessage.id, {
+                            content: lastMessage.content + textContent,
+                        });
+                    }
+                    else {
+                        // Create new message
+                        const displayMessage = {
+                            id: update.message.id,
+                            role: update.message.role,
+                            content: textContent,
+                            timestamp: update.message.timestamp,
+                            isStreaming: false,
+                        };
+                        addMessage(displayMessage);
+                    }
                 }
             }
         });

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

@@ -155,8 +155,23 @@ export const useChatStore = create((set) => ({
         // Find the most recent assistant message (which should be streaming)
         const lastAssistantIndex = state.messages.findLastIndex((msg) => msg.role === "assistant");
         if (lastAssistantIndex === -1) {
-            logger.warn("No assistant message found to add tool call to");
-            return state;
+            // No assistant message exists yet - create one with the tool call
+            // This happens during session replay when a tool call comes before any text
+            logger.debug("No assistant message found, creating one for tool call at position 0");
+            const newMessage = {
+                id: `msg_${Date.now()}_assistant`,
+                role: "assistant",
+                content: "",
+                timestamp: new Date().toISOString(),
+                isStreaming: false,
+                toolCalls: [
+                    {
+                        ...toolCall,
+                        contentPosition: 0, // Tool call at the start
+                    },
+                ],
+            };
+            return { messages: [...state.messages, newMessage] };
         }
         const messages = [...state.messages];
         const lastAssistantMsg = messages[lastAssistantIndex];

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

@@ -0,0 +1,7 @@
+import type { AcpClient } from "../../sdk/client/index.js";
+export interface ChatViewProps {
+    client: AcpClient | null;
+    initialSessionId?: string | null;
+    error?: string | null;
+}
+export declare function ChatView({ client, initialSessionId, error: initError, }: ChatViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/ChatView.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createLogger } from "@townco/core";
+import { ArrowUp, ChevronUp, Code, PanelRight, Settings, Sparkles, } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useChatMessages, useChatSession, useToolCalls, } from "../../core/hooks/index.js";
+import { useChatStore } from "../../core/store/chat-store.js";
+import { cn } from "../lib/utils.js";
+import { ChatEmptyState, ChatHeader, ChatInputActions, ChatInputAttachment, ChatInputCommandMenu, ChatInputField, ChatInputRoot, ChatInputSubmit, ChatInputToolbar, ChatInputVoiceInput, ChatLayout, FilesTabContent, Message, MessageContent, PanelTabsHeader, SourcesTabContent, Tabs, TabsContent, TodoTabContent, } from "./index.js";
+const logger = createLogger("gui");
+// Mobile header component that uses ChatHeader context
+function MobileHeader({ agentName }) {
+    const { isExpanded, setIsExpanded } = ChatHeader.useChatHeaderContext();
+    return (_jsxs("div", { className: "flex lg:hidden items-center gap-2 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2 flex-1", children: [_jsx("h1", { className: "text-[20px] font-semibold leading-[1.2] tracking-[-0.4px] text-foreground", children: agentName }), _jsx("div", { className: "flex items-center justify-center shrink-0", children: _jsx(ChevronUp, { className: "size-4 rotate-180 text-muted-foreground" }) })] }), _jsx("button", { type: "button", className: "flex items-center justify-center shrink-0 cursor-pointer", "aria-label": "Toggle menu", onClick: () => setIsExpanded(!isExpanded), children: _jsx(PanelRight, { className: "size-4 text-muted-foreground" }) })] }));
+}
+// Header component that uses ChatLayout context (must be inside ChatLayout.Root)
+function AppChatHeader({ agentName, todos, sources, showHeader, }) {
+    const { panelSize, setPanelSize } = ChatLayout.useChatLayoutContext();
+    return (_jsxs(ChatHeader.Root, { className: cn("border-b border-border bg-card relative lg:p-0", "[border-bottom-width:0.5px]"), children: [_jsxs("div", { className: "hidden lg:flex items-center gap-2 w-full h-16 py-5 pl-6 pr-4", children: [showHeader && (_jsxs("div", { className: "flex items-center gap-2 flex-1", children: [_jsx("h1", { className: "text-[20px] font-semibold leading-[1.2] tracking-[-0.4px] text-foreground", children: agentName }), _jsx("div", { className: "flex items-center justify-center shrink-0", children: _jsx(ChevronUp, { className: "size-4 rotate-180 text-muted-foreground" }) })] })), !showHeader && _jsx("div", { className: "flex-1" }), _jsx("button", { type: "button", className: "flex items-center justify-center shrink-0 cursor-pointer", "aria-label": "Toggle sidebar", onClick: () => {
+                            setPanelSize(panelSize === "hidden" ? "small" : "hidden");
+                        }, children: _jsx(PanelRight, { className: "size-4 text-muted-foreground" }) })] }), _jsx(MobileHeader, { agentName: agentName }), _jsx(ChatHeader.ExpandablePanel, { className: cn("pt-6 pb-8 px-6", "border-b border-border bg-card", "shadow-[0_4px_16px_0_rgba(0,0,0,0.04)]", "[border-bottom-width:0.5px]"), children: _jsxs(Tabs, { defaultValue: "todo", className: "w-full", children: [_jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources"], variant: "default" }), _jsx(TabsContent, { value: "todo", className: "mt-4", children: _jsx(TodoTabContent, { todos: todos }) }), _jsx(TabsContent, { value: "files", className: "mt-4", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "sources", className: "mt-4", children: _jsx(SourcesTabContent, { sources: sources }) })] }) })] }));
+}
+export function ChatView({ client, initialSessionId, error: initError, }) {
+    // Use shared hooks from @townco/ui/core - MUST be called before any early returns
+    const { connectionStatus, connect, sessionId } = useChatSession(client, initialSessionId);
+    const { messages } = useChatMessages(client);
+    useToolCalls(client); // Still need to subscribe to tool call events
+    const error = useChatStore((state) => state.error);
+    const [agentName, setAgentName] = useState("Agent");
+    const [isLargeScreen, setIsLargeScreen] = useState(typeof window !== "undefined" ? window.innerWidth >= 1024 : true);
+    // Log connection status changes
+    useEffect(() => {
+        logger.debug("Connection status changed", { status: connectionStatus });
+        if (connectionStatus === "error" && error) {
+            logger.error("Connection error occurred", { error });
+        }
+    }, [connectionStatus, error]);
+    // Get agent name from session metadata
+    useEffect(() => {
+        if (client && sessionId) {
+            const session = client.getCurrentSession();
+            if (session?.metadata?.agentName) {
+                setAgentName(session.metadata.agentName);
+            }
+        }
+    }, [client, sessionId]);
+    // Monitor screen size changes and update isLargeScreen state
+    useEffect(() => {
+        const mediaQuery = window.matchMedia("(min-width: 1024px)");
+        const handleChange = (e) => {
+            setIsLargeScreen(e.matches);
+        };
+        // Set initial value
+        setIsLargeScreen(mediaQuery.matches);
+        // Listen for changes
+        mediaQuery.addEventListener("change", handleChange);
+        return () => {
+            mediaQuery.removeEventListener("change", handleChange);
+        };
+    }, []);
+    // If there's an initialization error, show error UI (after all hooks have been called)
+    if (initError) {
+        return (_jsx("div", { className: "flex items-center justify-center h-screen bg-background", children: _jsxs("div", { className: "text-center p-8 max-w-md", children: [_jsx("h1", { className: "text-2xl font-bold text-destructive mb-4", children: "Initialization Error" }), _jsx("p", { className: "text-foreground mb-4", children: initError }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Failed to initialize the ACP client. Check the console for details." })] }) }));
+    }
+    // TODO: Replace with useChatStore((state) => state.todos) when todos are added to the store
+    const todos = [];
+    // Dummy sources data based on Figma design
+    const sources = [
+        {
+            id: "1",
+            title: "Boeing Scores Early Wins at Dubai Airshow",
+            sourceName: "Reuters",
+            url: "https://www.reuters.com/markets/companies/BA.N",
+            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.",
+            favicon: "https://www.google.com/s2/favicons?domain=reuters.com&sz=32",
+        },
+        {
+            id: "2",
+            title: "Boeing's Sustainable Aviation Goals Take Flight",
+            sourceName: "Forbes",
+            url: "https://www.forbes.com",
+            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.",
+            favicon: "https://www.google.com/s2/favicons?domain=forbes.com&sz=32",
+        },
+        {
+            id: "3",
+            title: "Boeing Faces Increased Competition in Global Aviation Market",
+            sourceName: "Reuters",
+            url: "https://www.reuters.com",
+            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.",
+            favicon: "https://www.google.com/s2/favicons?domain=reuters.com&sz=32",
+        },
+        {
+            id: "4",
+            title: "Boeing's Starliner Successfully Completes Orbital Test Flight",
+            sourceName: "The Verge",
+            url: "https://www.theverge.com",
+            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.",
+            favicon: "https://www.google.com/s2/favicons?domain=theverge.com&sz=32",
+        },
+    ];
+    // Command menu items for chat input
+    const commandMenuItems = [
+        {
+            id: "model-sonnet",
+            label: "Use Sonnet 4.5",
+            description: "Switch to Claude Sonnet 4.5 model",
+            icon: _jsx(Sparkles, { className: "h-4 w-4" }),
+            category: "model",
+            onSelect: () => {
+                logger.info("User selected Sonnet 4.5 model");
+            },
+        },
+        {
+            id: "model-opus",
+            label: "Use Opus",
+            description: "Switch to Claude Opus model",
+            icon: _jsx(Sparkles, { className: "h-4 w-4" }),
+            category: "model",
+            onSelect: () => {
+                logger.info("User selected Opus model");
+            },
+        },
+        {
+            id: "settings",
+            label: "Open Settings",
+            description: "Configure chat preferences",
+            icon: _jsx(Settings, { className: "h-4 w-4" }),
+            category: "action",
+            onSelect: () => {
+                logger.info("User opened settings");
+            },
+        },
+        {
+            id: "code-mode",
+            label: "Code Mode",
+            description: "Enable code-focused responses",
+            icon: _jsx(Code, { className: "h-4 w-4" }),
+            category: "mode",
+            onSelect: () => {
+                logger.info("User enabled code mode");
+            },
+        },
+    ];
+    return (_jsxs(ChatLayout.Root, { defaultPanelSize: "hidden", defaultActiveTab: "todo", children: [_jsxs(ChatLayout.Main, { children: [_jsx(AppChatHeader, { agentName: agentName, todos: todos, sources: sources, showHeader: messages.length > 0 }), connectionStatus === "error" && error && (_jsx("div", { className: "border-b border-destructive/20 bg-destructive/10 px-6 py-4", children: _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "mb-1 text-sm font-semibold text-destructive", children: "Connection Error" }), _jsx("p", { className: "whitespace-pre-line text-sm text-foreground", children: error })] }), _jsx("button", { type: "button", onClick: connect, className: "rounded-lg bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive-hover", children: "Retry" })] }) })), _jsxs(ChatLayout.Body, { children: [_jsx(ChatLayout.Messages, { className: messages.length > 0 ? "pt-4" : "", children: messages.length === 0 ? (_jsx("div", { className: "flex flex-1 items-center px-4", children: _jsx(ChatEmptyState, { title: agentName, description: "This agent can help you with your tasks. Start a conversation by typing a message below.", suggestedPrompts: [
+                                            "Help me debug this code",
+                                            "Explain how this works",
+                                            "Create a new feature",
+                                            "Review my changes",
+                                        ], onPromptClick: (prompt) => {
+                                            // TODO: Implement prompt click handler
+                                            logger.info("Prompt clicked", { prompt });
+                                        } }) })) : (_jsx("div", { className: "flex flex-col gap-4 px-4", children: messages.map((message, index) => (_jsx(Message, { message: message, isLastMessage: index === messages.length - 1, children: _jsx(MessageContent, { message: message, thinkingDisplayStyle: "collapsible" }) }, message.id))) })) }), _jsx(ChatLayout.Footer, { children: _jsxs(ChatInputRoot, { client: client, children: [_jsx(ChatInputCommandMenu, { commands: commandMenuItems }), _jsx(ChatInputField, { placeholder: "Type a message or / for commands...", autoFocus: true }), _jsxs(ChatInputToolbar, { children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ChatInputActions, {}), _jsx(ChatInputAttachment, {})] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ChatInputVoiceInput, {}), _jsx(ChatInputSubmit, { children: _jsx(ArrowUp, { className: "size-4" }) })] })] })] }) })] })] }), isLargeScreen && (_jsx(ChatLayout.Aside, { breakpoint: "lg", children: _jsxs(Tabs, { defaultValue: "todo", className: "flex flex-col h-full", children: [_jsx("div", { className: cn("border-b border-border bg-card", "px-6 py-2 h-16", "flex items-center", "[border-bottom-width:0.5px]"), children: _jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources"], variant: "compact" }) }), _jsx(TabsContent, { value: "todo", className: "flex-1 p-4 mt-0", children: _jsx(TodoTabContent, { todos: todos }) }), _jsx(TabsContent, { value: "files", className: "flex-1 p-4 mt-0", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "sources", className: "flex-1 p-4 mt-0", children: _jsx(SourcesTabContent, { sources: sources }) })] }) }))] }));
+}

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

@@ -10,6 +10,7 @@ export { DatabaseTabContent, type DatabaseTabContentProps, FilesTabContent, type
 export { ChatSecondaryPanel, type ChatSecondaryPanelProps, } from "./ChatSecondaryPanel.js";
 export * as ChatSidebar from "./ChatSidebar.js";
 export { ChatStatus, type ChatStatusProps } from "./ChatStatus.js";
+export { ChatView, type ChatViewProps } from "./ChatView.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";

package/dist/gui/components/index.js

@@ -12,6 +12,7 @@ export { DatabaseTabContent, FilesTabContent, SourcesTabContent, TodoTabContent,
 export { ChatSecondaryPanel, } from "./ChatSecondaryPanel.js";
 export * as ChatSidebar from "./ChatSidebar.js";
 export { ChatStatus } from "./ChatStatus.js";
+export { ChatView } from "./ChatView.js";
 // Chat components - shadcn.io/ai inspired primitives
 export { Conversation } from "./Conversation.js";
 // Dialog components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "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.9",
+    "@townco/core": "0.0.11",
     "@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.28",
+    "@townco/tsconfig": "0.1.30",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",