@townco/ui 0.1.50 → 0.1.52

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

@@ -7,4 +7,5 @@ export * from "./use-chat-messages.js";
 export * from "./use-chat-session.js";
 export * from "./use-media-query.js";
 export * from "./use-message-history.js";
+export * from "./use-subagent-stream.js";
 export * from "./use-tool-calls.js";

package/dist/core/hooks/index.js

@@ -7,4 +7,5 @@ export * from "./use-chat-messages.js";
 export * from "./use-chat-session.js";
 export * from "./use-media-query.js";
 export * from "./use-message-history.js";
+export * from "./use-subagent-stream.js";
 export * from "./use-tool-calls.js";

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

@@ -69,6 +69,90 @@ export declare function useChatMessages(client: AcpClient | null, startSession:
                 originalTokens?: number | undefined;
                 finalTokens?: number | undefined;
             } | undefined;
+            subagentPort?: number | undefined;
+            subagentSessionId?: string | undefined;
+            subagentMessages?: {
+                id: string;
+                content: string;
+                toolCalls?: {
+                    id: string;
+                    title: string;
+                    status: "pending" | "in_progress" | "completed" | "failed";
+                    prettyName?: string | undefined;
+                    icon?: string | undefined;
+                    content?: ({
+                        type: "content";
+                        content: {
+                            type: "text";
+                            text: string;
+                        };
+                    } | {
+                        type: "text";
+                        text: string;
+                    } | {
+                        type: "image";
+                        data: string;
+                        mimeType?: string | undefined;
+                        alt?: string | undefined;
+                    } | {
+                        type: "image";
+                        url: string;
+                        alt?: string | undefined;
+                    } | {
+                        type: "diff";
+                        path: string;
+                        oldText: string;
+                        newText: string;
+                        line?: number | null | undefined;
+                    } | {
+                        type: "terminal";
+                        terminalId: string;
+                    })[] | undefined;
+                }[] | undefined;
+                contentBlocks?: ({
+                    type: "text";
+                    text: string;
+                } | {
+                    type: "tool_call";
+                    toolCall: {
+                        id: string;
+                        title: string;
+                        status: "pending" | "in_progress" | "completed" | "failed";
+                        prettyName?: string | undefined;
+                        icon?: string | undefined;
+                        content?: ({
+                            type: "content";
+                            content: {
+                                type: "text";
+                                text: string;
+                            };
+                        } | {
+                            type: "text";
+                            text: string;
+                        } | {
+                            type: "image";
+                            data: string;
+                            mimeType?: string | undefined;
+                            alt?: string | undefined;
+                        } | {
+                            type: "image";
+                            url: string;
+                            alt?: string | undefined;
+                        } | {
+                            type: "diff";
+                            path: string;
+                            oldText: string;
+                            newText: string;
+                            line?: number | null | undefined;
+                        } | {
+                            type: "terminal";
+                            terminalId: string;
+                        })[] | undefined;
+                    };
+                })[] | undefined;
+                isStreaming?: boolean | undefined;
+            }[] | undefined;
+            subagentStreaming?: boolean | undefined;
         }[] | undefined;
         tokenUsage?: {
             inputTokens?: number | undefined;

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

@@ -112,6 +112,18 @@ export function useChatSession(client, initialSessionId) {
             setConnectionStatus("connecting");
             setError(null);
             await client.connect();
+            // Get the session ID from the transport after connecting
+            // (the transport creates a session during connect)
+            const currentSession = client.getCurrentSession();
+            if (currentSession?.id) {
+                setSessionId(currentSession.id);
+                // Update URL with session ID
+                if (typeof window !== "undefined") {
+                    const url = new URL(window.location.href);
+                    url.searchParams.set("session", currentSession.id);
+                    window.history.replaceState({}, "", url.toString());
+                }
+            }
             setConnectionStatus("connected");
         }
         catch (error) {
@@ -122,7 +134,7 @@ export function useChatSession(client, initialSessionId) {
             setError(message);
             setConnectionStatus("error");
         }
-    }, [client, setConnectionStatus, setError]);
+    }, [client, setConnectionStatus, setSessionId, setError]);
     /**
      * Load an existing session
      */
@@ -197,8 +209,13 @@ export function useChatSession(client, initialSessionId) {
         try {
             const id = await client.startSession();
             setSessionId(id);
-            clearMessages();
-            resetTokens();
+            // Only clear messages if there are no messages from initial message
+            // (initial messages are added before startSession is called)
+            const currentMessages = useChatStore.getState().messages;
+            if (currentMessages.length === 0) {
+                clearMessages();
+                resetTokens();
+            }
             // Update URL with new session ID
             if (typeof window !== "undefined") {
                 const url = new URL(window.location.href);

package/dist/core/hooks/use-subagent-stream.d.ts

@@ -0,0 +1,28 @@
+import type { SubagentMessage } from "../schemas/tool-call.js";
+export interface UseSubagentStreamOptions {
+    /** Sub-agent HTTP port */
+    port: number;
+    /** Sub-agent session ID */
+    sessionId: string;
+    /** Base host (defaults to localhost) */
+    host?: string;
+}
+export interface UseSubagentStreamReturn {
+    /** Accumulated messages from the sub-agent */
+    messages: SubagentMessage[];
+    /** Whether the stream is currently active */
+    isStreaming: boolean;
+    /** Error message if connection failed */
+    error: string | null;
+}
+/**
+ * Hook to connect directly to a sub-agent's SSE endpoint and stream messages.
+ *
+ * This hook:
+ * - Connects to the sub-agent's HTTP server at the given port
+ * - Subscribes to the /events SSE endpoint with the session ID
+ * - Parses incoming session/update notifications
+ * - Extracts text chunks and tool calls
+ * - Returns accumulated messages for display
+ */
+export declare function useSubagentStream(options: UseSubagentStreamOptions | null): UseSubagentStreamReturn;

package/dist/core/hooks/use-subagent-stream.js

@@ -0,0 +1,254 @@
+import { createLogger } from "@townco/core";
+import { useCallback, useEffect, useRef, useState } from "react";
+const logger = createLogger("subagent-stream");
+/**
+ * Hook to connect directly to a sub-agent's SSE endpoint and stream messages.
+ *
+ * This hook:
+ * - Connects to the sub-agent's HTTP server at the given port
+ * - Subscribes to the /events SSE endpoint with the session ID
+ * - Parses incoming session/update notifications
+ * - Extracts text chunks and tool calls
+ * - Returns accumulated messages for display
+ */
+export function useSubagentStream(options) {
+    const [messages, setMessages] = useState([]);
+    // Start as streaming=true if options provided, since we're about to connect
+    const [isStreaming, setIsStreaming] = useState(!!options);
+    const [hasCompleted, setHasCompleted] = useState(false);
+    const [error, setError] = useState(null);
+    const abortControllerRef = useRef(null);
+    const currentMessageRef = useRef(null);
+    const updateTimeoutRef = useRef(null);
+    // Throttled update to prevent excessive re-renders
+    const scheduleUpdate = useCallback(() => {
+        // If there's already a pending timeout, let it handle the update
+        // (it will read the latest currentMessageRef value)
+        if (updateTimeoutRef.current)
+            return;
+        updateTimeoutRef.current = setTimeout(() => {
+            updateTimeoutRef.current = null;
+            if (currentMessageRef.current) {
+                setMessages([{ ...currentMessageRef.current }]);
+            }
+        }, 250); // Batch updates every 250ms
+    }, []);
+    // Process incoming SSE message from sub-agent
+    // Defined BEFORE connectToSubagent so it's available in the closure
+    const processSSEMessage = useCallback((data) => {
+        try {
+            const message = JSON.parse(data);
+            logger.debug("Processing SSE message", {
+                method: message.method,
+                hasParams: !!message.params,
+            });
+            // Check if this is a session/update notification
+            if (message.method === "session/update" && message.params?.update) {
+                const update = message.params.update;
+                logger.debug("Got session update", {
+                    sessionUpdate: update.sessionUpdate,
+                });
+                if (update.sessionUpdate === "agent_message_chunk") {
+                    // Handle text chunk
+                    const content = update.content;
+                    if (content?.type === "text" && typeof content.text === "string") {
+                        if (currentMessageRef.current) {
+                            currentMessageRef.current.content += content.text;
+                            // Add to contentBlocks - append to last text block or create new one
+                            const blocks = currentMessageRef.current.contentBlocks ?? [];
+                            const lastBlock = blocks[blocks.length - 1];
+                            if (lastBlock && lastBlock.type === "text") {
+                                lastBlock.text += content.text;
+                            }
+                            else {
+                                blocks.push({ type: "text", text: content.text });
+                            }
+                            currentMessageRef.current.contentBlocks = blocks;
+                            scheduleUpdate();
+                        }
+                    }
+                }
+                else if (update.sessionUpdate === "tool_call") {
+                    // Handle new tool call
+                    const toolCall = {
+                        id: update.toolCallId ?? `tc-${Date.now()}`,
+                        title: update.title ?? "Tool call",
+                        prettyName: update._meta?.prettyName,
+                        icon: update._meta?.icon,
+                        status: update.status ?? "pending",
+                        content: [],
+                    };
+                    if (currentMessageRef.current) {
+                        currentMessageRef.current.toolCalls = [
+                            ...(currentMessageRef.current.toolCalls ?? []),
+                            toolCall,
+                        ];
+                        // Add to contentBlocks for interleaved display
+                        const blocks = currentMessageRef.current.contentBlocks ?? [];
+                        blocks.push({ type: "tool_call", toolCall });
+                        currentMessageRef.current.contentBlocks = blocks;
+                        scheduleUpdate();
+                    }
+                }
+                else if (update.sessionUpdate === "tool_call_update") {
+                    // Handle tool call update (status change, completion)
+                    if (currentMessageRef.current?.toolCalls) {
+                        const toolCallId = update.toolCallId;
+                        const updateToolCall = (tc) => tc.id === toolCallId
+                            ? {
+                                ...tc,
+                                status: update.status ?? tc.status,
+                                content: update.content ?? tc.content,
+                            }
+                            : tc;
+                        currentMessageRef.current.toolCalls =
+                            currentMessageRef.current.toolCalls.map(updateToolCall);
+                        // Also update in contentBlocks
+                        if (currentMessageRef.current.contentBlocks) {
+                            currentMessageRef.current.contentBlocks =
+                                currentMessageRef.current.contentBlocks.map((block) => block.type === "tool_call"
+                                    ? { ...block, toolCall: updateToolCall(block.toolCall) }
+                                    : block);
+                        }
+                        scheduleUpdate();
+                    }
+                }
+            }
+        }
+        catch (err) {
+            logger.error("Failed to parse sub-agent SSE message", {
+                error: err instanceof Error ? err.message : String(err),
+            });
+        }
+    }, [scheduleUpdate]);
+    const connectToSubagent = useCallback(async (port, sessionId, host) => {
+        const baseUrl = `http://${host}:${port}`;
+        logger.info("Connecting to sub-agent SSE", { baseUrl, sessionId });
+        setIsStreaming(true);
+        setError(null);
+        // Create abort controller for cleanup
+        const abortController = new AbortController();
+        abortControllerRef.current = abortController;
+        try {
+            logger.info("Fetching SSE endpoint", {
+                url: `${baseUrl}/events`,
+                sessionId,
+            });
+            const response = await fetch(`${baseUrl}/events`, {
+                method: "GET",
+                headers: {
+                    "X-Session-ID": sessionId,
+                },
+                signal: abortController.signal,
+            });
+            logger.info("SSE response received", {
+                status: response.status,
+                ok: response.ok,
+            });
+            if (!response.ok) {
+                throw new Error(`SSE connection failed: HTTP ${response.status}`);
+            }
+            if (!response.body) {
+                throw new Error("Response body is null");
+            }
+            logger.info("Sub-agent SSE connection opened, starting to read stream");
+            // Read the SSE stream
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = "";
+            // Initialize current message
+            currentMessageRef.current = {
+                id: `subagent-${Date.now()}`,
+                content: "",
+                toolCalls: [],
+                contentBlocks: [],
+                isStreaming: true,
+            };
+            setMessages([currentMessageRef.current]);
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) {
+                    logger.debug("Sub-agent SSE stream closed");
+                    break;
+                }
+                // Decode the chunk and add to buffer
+                buffer += decoder.decode(value, { stream: true });
+                // Process complete SSE messages
+                const lines = buffer.split("\n");
+                buffer = lines.pop() || ""; // Keep incomplete line in buffer
+                let currentEvent = { event: "message", data: "" };
+                for (const line of lines) {
+                    if (line.startsWith("event:")) {
+                        currentEvent.event = line.substring(6).trim();
+                    }
+                    else if (line.startsWith("data:")) {
+                        currentEvent.data = line.substring(5).trim();
+                    }
+                    else if (line === "") {
+                        // Empty line signals end of event
+                        if (currentEvent.event === "message" && currentEvent.data) {
+                            processSSEMessage(currentEvent.data);
+                        }
+                        // Reset for next event
+                        currentEvent = { event: "message", data: "" };
+                    }
+                }
+            }
+        }
+        catch (err) {
+            if (err instanceof Error && err.name === "AbortError") {
+                logger.debug("Sub-agent SSE stream aborted");
+            }
+            else {
+                const errorMessage = err instanceof Error
+                    ? err.message
+                    : "Failed to connect to sub-agent";
+                logger.error("Sub-agent SSE error", { error: errorMessage });
+                setError(errorMessage);
+            }
+        }
+        finally {
+            // Mark streaming as complete
+            if (currentMessageRef.current) {
+                currentMessageRef.current.isStreaming = false;
+                setMessages((prev) => prev.map((m) => m.id === currentMessageRef.current?.id
+                    ? { ...m, isStreaming: false }
+                    : m));
+            }
+            setHasCompleted(true);
+            setIsStreaming(false);
+            abortControllerRef.current = null;
+            logger.debug("Sub-agent stream completed");
+        }
+    }, [processSSEMessage]);
+    // Connect when options change
+    useEffect(() => {
+        if (!options) {
+            return;
+        }
+        const { port, sessionId, host = "localhost" } = options;
+        if (!port || !sessionId) {
+            return;
+        }
+        // Reset state for new connection
+        setMessages([]);
+        setError(null);
+        setHasCompleted(false);
+        setIsStreaming(true);
+        connectToSubagent(port, sessionId, host);
+        // Cleanup on unmount or options change
+        return () => {
+            if (abortControllerRef.current) {
+                abortControllerRef.current.abort();
+                abortControllerRef.current = null;
+            }
+            if (updateTimeoutRef.current) {
+                clearTimeout(updateTimeoutRef.current);
+                updateTimeoutRef.current = null;
+            }
+        };
+    }, [options?.port, options?.sessionId, options?.host, connectToSubagent]);
+    // Derive streaming status: streaming if we haven't completed yet
+    const effectiveIsStreaming = !hasCompleted;
+    return { messages, isStreaming: effectiveIsStreaming, error };
+}

package/dist/core/hooks/use-tool-calls.d.ts

@@ -67,6 +67,90 @@ export declare function useToolCalls(client: AcpClient | null): {
             originalTokens?: number | undefined;
             finalTokens?: number | undefined;
         } | undefined;
+        subagentPort?: number | undefined;
+        subagentSessionId?: string | undefined;
+        subagentMessages?: {
+            id: string;
+            content: string;
+            toolCalls?: {
+                id: string;
+                title: string;
+                status: "pending" | "in_progress" | "completed" | "failed";
+                prettyName?: string | undefined;
+                icon?: string | undefined;
+                content?: ({
+                    type: "content";
+                    content: {
+                        type: "text";
+                        text: string;
+                    };
+                } | {
+                    type: "text";
+                    text: string;
+                } | {
+                    type: "image";
+                    data: string;
+                    mimeType?: string | undefined;
+                    alt?: string | undefined;
+                } | {
+                    type: "image";
+                    url: string;
+                    alt?: string | undefined;
+                } | {
+                    type: "diff";
+                    path: string;
+                    oldText: string;
+                    newText: string;
+                    line?: number | null | undefined;
+                } | {
+                    type: "terminal";
+                    terminalId: string;
+                })[] | undefined;
+            }[] | undefined;
+            contentBlocks?: ({
+                type: "text";
+                text: string;
+            } | {
+                type: "tool_call";
+                toolCall: {
+                    id: string;
+                    title: string;
+                    status: "pending" | "in_progress" | "completed" | "failed";
+                    prettyName?: string | undefined;
+                    icon?: string | undefined;
+                    content?: ({
+                        type: "content";
+                        content: {
+                            type: "text";
+                            text: string;
+                        };
+                    } | {
+                        type: "text";
+                        text: string;
+                    } | {
+                        type: "image";
+                        data: string;
+                        mimeType?: string | undefined;
+                        alt?: string | undefined;
+                    } | {
+                        type: "image";
+                        url: string;
+                        alt?: string | undefined;
+                    } | {
+                        type: "diff";
+                        path: string;
+                        oldText: string;
+                        newText: string;
+                        line?: number | null | undefined;
+                    } | {
+                        type: "terminal";
+                        terminalId: string;
+                    })[] | undefined;
+                };
+            })[] | undefined;
+            isStreaming?: boolean | undefined;
+        }[] | undefined;
+        subagentStreaming?: boolean | undefined;
     }[]>;
     getToolCallsForSession: (sessionId: string) => ToolCall[];
 };