@townco/ui 0.1.58 → 0.1.65

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

@@ -15,6 +15,10 @@ export function useChatMessages(client, startSession) {
     const updateMessage = useChatStore((state) => state.updateMessage);
     const setError = useChatStore((state) => state.setError);
     const setLatestContextSize = useChatStore((state) => state.setLatestContextSize);
+    const addToolCall = useChatStore((state) => state.addToolCall);
+    const updateToolCall = useChatStore((state) => state.updateToolCall);
+    const addToolCallToCurrentMessage = useChatStore((state) => state.addToolCallToCurrentMessage);
+    const updateToolCallInCurrentMessage = useChatStore((state) => state.updateToolCallInCurrentMessage);
     /**
      * Send a message to the agent
      */
@@ -94,54 +98,74 @@ export function useChatMessages(client, startSession) {
             let accumulatedContent = "";
             let streamCompleted = false;
             for await (const chunk of messageStream) {
-                // Update context size if provided (check both _meta.context_size and direct context_size)
-                const chunkMeta = chunk._meta;
-                const contextSizeData = chunkMeta?.context_size || chunk.context_size;
-                if (contextSizeData != null) {
-                    const contextSize = contextSizeData;
-                    logger.info("✅ Received context_size from backend", {
-                        context_size: contextSize,
-                        totalEstimated: contextSize.totalEstimated,
-                        source: chunkMeta?.context_size ? "_meta" : "direct",
-                    });
-                    setLatestContextSize(contextSize);
-                }
-                else {
-                    logger.debug("Chunk does not have context_size", {
-                        hasContextSize: "context_size" in chunk,
-                        hasMeta: "_meta" in chunk,
-                        metaKeys: chunkMeta ? Object.keys(chunkMeta) : null,
-                    });
-                }
-                if (chunk.tokenUsage) {
-                    logger.debug("Received tokenUsage from backend", {
-                        tokenUsage: chunk.tokenUsage,
-                    });
-                }
-                if (chunk.isComplete) {
-                    // Update final message
-                    updateMessage(assistantMessageId, {
-                        content: accumulatedContent,
-                        isStreaming: false,
-                        streamingStartTime: undefined, // Clear streaming start time
-                        ...(chunk.tokenUsage ? { tokenUsage: chunk.tokenUsage } : {}),
-                    });
-                    setIsStreaming(false);
-                    setStreamingStartTime(null); // Clear global streaming start time
-                    streamCompleted = true;
-                    break;
-                }
-                else {
-                    // Update streaming content
-                    if (chunk.contentDelta.type === "text") {
-                        accumulatedContent += chunk.contentDelta.text;
+                // Handle different chunk types using discriminated union
+                if (chunk.type === "content") {
+                    // Content chunk - text streaming
+                    // Update context size if provided (check both _meta.context_size and direct context_size)
+                    const chunkMeta = chunk._meta;
+                    const contextSizeData = chunkMeta?.context_size || chunk.context_size;
+                    if (contextSizeData != null) {
+                        const contextSize = contextSizeData;
+                        logger.info("✅ Received context_size from backend", {
+                            context_size: contextSize,
+                            totalEstimated: contextSize.totalEstimated,
+                            source: chunkMeta?.context_size ? "_meta" : "direct",
+                        });
+                        setLatestContextSize(contextSize);
+                    }
+                    else {
+                        logger.debug("Chunk does not have context_size", {
+                            hasContextSize: "context_size" in chunk,
+                            hasMeta: "_meta" in chunk,
+                            metaKeys: chunkMeta ? Object.keys(chunkMeta) : null,
+                        });
+                    }
+                    if (chunk.tokenUsage) {
+                        logger.debug("Received tokenUsage from backend", {
+                            tokenUsage: chunk.tokenUsage,
+                        });
+                    }
+                    if (chunk.isComplete) {
+                        // Update final message
                         updateMessage(assistantMessageId, {
                             content: accumulatedContent,
+                            isStreaming: false,
+                            streamingStartTime: undefined, // Clear streaming start time
                             ...(chunk.tokenUsage ? { tokenUsage: chunk.tokenUsage } : {}),
                         });
-                        // Small delay to allow Ink to render between chunks (~60fps)
-                        await new Promise((resolve) => setTimeout(resolve, 16));
+                        setIsStreaming(false);
+                        setStreamingStartTime(null); // Clear global streaming start time
+                        streamCompleted = true;
+                        break;
                     }
+                    else {
+                        // Update streaming content
+                        if (chunk.contentDelta.type === "text") {
+                            accumulatedContent += chunk.contentDelta.text;
+                            updateMessage(assistantMessageId, {
+                                content: accumulatedContent,
+                                ...(chunk.tokenUsage ? { tokenUsage: chunk.tokenUsage } : {}),
+                            });
+                            // Small delay to allow Ink to render between chunks (~60fps)
+                            await new Promise((resolve) => setTimeout(resolve, 16));
+                        }
+                    }
+                }
+                else if (chunk.type === "tool_call") {
+                    // Tool call chunk - tool invocation
+                    logger.debug("Received tool_call chunk", { chunk });
+                    // Add to session-level tool calls (for sidebar)
+                    addToolCall(activeSessionId, chunk.toolCall);
+                    // Also add to current assistant message (for inline display)
+                    addToolCallToCurrentMessage(chunk.toolCall);
+                }
+                else if (chunk.type === "tool_call_update") {
+                    // Tool call update chunk - tool results
+                    logger.debug("Received tool_call_update chunk", { chunk });
+                    // Update session-level tool calls (for sidebar)
+                    updateToolCall(activeSessionId, chunk.toolCallUpdate);
+                    // Also update in current assistant message (for inline display)
+                    updateToolCallInCurrentMessage(chunk.toolCallUpdate);
                 }
             }
             // Ensure streaming state is cleared even if no explicit isComplete was received
@@ -176,6 +200,10 @@ export function useChatMessages(client, startSession) {
         setStreamingStartTime,
         setError,
         setLatestContextSize,
+        addToolCall,
+        updateToolCall,
+        addToolCallToCurrentMessage,
+        updateToolCallInCurrentMessage,
     ]);
     return {
         messages,

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

@@ -36,8 +36,6 @@ export interface ChatLayoutMessagesProps extends React.HTMLAttributes<HTMLDivEle
     onScrollChange?: (isAtBottom: boolean) => void;
     /** Whether to show scroll to bottom button */
     showScrollToBottom?: boolean;
-    /** Whether to scroll to bottom on initial mount (default: true) */
-    initialScrollToBottom?: boolean;
 }
 declare const ChatLayoutMessages: React.ForwardRefExoticComponent<ChatLayoutMessagesProps & React.RefAttributes<HTMLDivElement>>;
 export interface ChatLayoutFooterProps extends React.HTMLAttributes<HTMLDivElement> {

package/dist/gui/components/ChatLayout.js

@@ -38,190 +38,135 @@ const ChatLayoutBody = React.forwardRef(({ showToaster = true, className, childr
     return (_jsxs("div", { ref: ref, className: cn("relative flex flex-1 flex-col overflow-hidden", className), ...props, children: [children, showToaster && _jsx(Toaster, {})] }));
 });
 ChatLayoutBody.displayName = "ChatLayout.Body";
-const ChatLayoutMessages = React.forwardRef(({ className, children, onScrollChange, showScrollToBottom = true, initialScrollToBottom = true, ...props }, ref) => {
-    const [showScrollButton, setShowScrollButton] = React.useState(false);
+const ChatLayoutMessages = React.forwardRef(({ className, children, onScrollChange, showScrollToBottom = true, ...props }, ref) => {
     const scrollContainerRef = React.useRef(null);
-    const wasAtBottomRef = React.useRef(true); // Track if user was at bottom before content update
-    const isAutoScrollingRef = React.useRef(false); // Track if we're programmatically scrolling
-    const hasInitialScrolledRef = React.useRef(false); // Track if initial scroll has happened
+    const [isAtBottom, setIsAtBottom] = React.useState(true);
+    const isAtBottomRef = React.useRef(true);
+    const isUserScrollingRef = React.useRef(false);
+    const lastScrollHeightRef = React.useRef(0);
+    const lastMutationTimeRef = React.useRef(0);
+    const isSmoothScrollingRef = React.useRef(false); // Protect smooth scrolls from interruption
+    // Keep ref in sync with state
+    React.useEffect(() => {
+        isAtBottomRef.current = isAtBottom;
+    }, [isAtBottom]);
     // Merge refs
     React.useImperativeHandle(ref, () => scrollContainerRef.current);
-    // Check if user is at bottom of scroll
-    const checkScrollPosition = React.useCallback(() => {
+    // Check if at bottom
+    const checkIfAtBottom = React.useCallback(() => {
         const container = scrollContainerRef.current;
         if (!container)
-            return false;
+            return true;
         const { scrollTop, scrollHeight, clientHeight } = container;
-        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-        const isAtBottom = distanceFromBottom < 100; // 100px threshold
-        setShowScrollButton(!isAtBottom && showScrollToBottom);
-        onScrollChange?.(isAtBottom);
-        return isAtBottom;
-    }, [onScrollChange, showScrollToBottom]);
-    // Handle scroll events
-    const handleScroll = React.useCallback(() => {
-        // If this is a programmatic scroll, don't update wasAtBottomRef
-        if (isAutoScrollingRef.current) {
-            return;
-        }
-        // This is a user-initiated scroll, update the position
-        const isAtBottom = checkScrollPosition();
-        wasAtBottomRef.current = isAtBottom;
-    }, [checkScrollPosition]);
-    // Scroll to bottom function
-    const scrollToBottom = React.useCallback((smooth = true) => {
+        return scrollTop + clientHeight >= scrollHeight - 100;
+    }, []);
+    // Scroll to bottom with protection for smooth scrolls
+    const scrollToBottom = React.useCallback((behavior = "smooth") => {
         const container = scrollContainerRef.current;
         if (!container)
             return;
-        // Mark that we're about to programmatically scroll
-        isAutoScrollingRef.current = true;
-        wasAtBottomRef.current = true; // Set immediately for instant scrolls
+        // If we're doing a smooth scroll, don't interrupt with instant
+        if (isSmoothScrollingRef.current && behavior === "instant") {
+            return;
+        }
+        if (behavior === "smooth") {
+            isSmoothScrollingRef.current = true;
+            // Clear the smooth scroll protection after animation completes
+            setTimeout(() => {
+                isSmoothScrollingRef.current = false;
+            }, 500);
+        }
         container.scrollTo({
             top: container.scrollHeight,
-            behavior: smooth ? "smooth" : "auto",
+            behavior,
         });
-        // Clear the flag after scroll completes
-        // For instant scrolling, clear immediately; for smooth, wait
-        setTimeout(() => {
-            isAutoScrollingRef.current = false;
-        }, smooth ? 300 : 0);
     }, []);
-    // Auto-scroll when content changes if user was at bottom
-    React.useEffect(() => {
-        const container = scrollContainerRef.current;
-        if (!container)
-            return;
-        // If user was at the bottom, scroll to new content
-        if (wasAtBottomRef.current && !isAutoScrollingRef.current) {
-            // Use requestAnimationFrame to ensure DOM has updated
-            requestAnimationFrame(() => {
-                scrollToBottom(false); // Use instant scroll for streaming to avoid jarring smooth animations
-            });
-        }
-        // Update scroll position state (but don't change wasAtBottomRef if we're auto-scrolling)
-        if (!isAutoScrollingRef.current) {
-            checkScrollPosition();
-        }
-    }, [children, scrollToBottom, checkScrollPosition]);
-    // Track last scroll height to detect when content stops loading
-    const lastScrollHeightRef = React.useRef(0);
-    const scrollStableCountRef = React.useRef(0);
-    // Scroll to bottom on initial mount and during session loading
-    // Keep scrolling until content stabilizes (no more changes)
+    // Handle user scroll events
     React.useEffect(() => {
-        if (!initialScrollToBottom)
-            return;
         const container = scrollContainerRef.current;
         if (!container)
             return;
-        const scrollToBottomInstant = () => {
-            container.scrollTop = container.scrollHeight;
-            wasAtBottomRef.current = true;
+        let scrollTimeout;
+        const handleScroll = () => {
+            // Mark as user scrolling
+            isUserScrollingRef.current = true;
+            clearTimeout(scrollTimeout);
+            // Update isAtBottom state
+            const atBottom = checkIfAtBottom();
+            setIsAtBottom(atBottom);
+            isAtBottomRef.current = atBottom;
+            onScrollChange?.(atBottom);
+            // Reset user scrolling flag after scroll ends
+            scrollTimeout = setTimeout(() => {
+                isUserScrollingRef.current = false;
+            }, 150);
         };
-        // Check if content has stabilized (scrollHeight hasn't changed)
-        const currentHeight = container.scrollHeight;
-        if (currentHeight === lastScrollHeightRef.current) {
-            scrollStableCountRef.current++;
-        }
-        else {
-            scrollStableCountRef.current = 0;
-            lastScrollHeightRef.current = currentHeight;
-        }
-        // If content is still loading (height changing) or we haven't scrolled yet,
-        // keep auto-scrolling. Stop after content is stable for a few renders.
-        if (scrollStableCountRef.current < 3) {
-            isAutoScrollingRef.current = true;
-            scrollToBottomInstant();
-            hasInitialScrolledRef.current = true;
-        }
-        else {
-            // Content is stable, stop auto-scrolling
-            isAutoScrollingRef.current = false;
-        }
-    }, [initialScrollToBottom, children]);
-    // Also use a timer-based approach as backup for session replay
-    // which may not trigger children changes
-    React.useEffect(() => {
-        if (!initialScrollToBottom)
-            return;
-        const container = scrollContainerRef.current;
-        if (!container)
-            return;
-        // Keep scrolling to bottom for the first 2 seconds of session load
-        // to catch async message replay
-        let cancelled = false;
-        const scrollInterval = setInterval(() => {
-            if (cancelled)
-                return;
-            if (container.scrollHeight > container.clientHeight) {
-                isAutoScrollingRef.current = true;
-                container.scrollTop = container.scrollHeight;
-                wasAtBottomRef.current = true;
-                hasInitialScrolledRef.current = true;
-            }
-        }, 100);
-        // Stop after 2 seconds
-        const timeout = setTimeout(() => {
-            clearInterval(scrollInterval);
-            isAutoScrollingRef.current = false;
-        }, 2000);
+        container.addEventListener("scroll", handleScroll, { passive: true });
         return () => {
-            cancelled = true;
-            clearInterval(scrollInterval);
-            clearTimeout(timeout);
+            container.removeEventListener("scroll", handleScroll);
+            clearTimeout(scrollTimeout);
         };
-    }, [initialScrollToBottom]); // Only run once on mount
-    // Check scroll position on mount
+    }, [checkIfAtBottom, onScrollChange]);
+    // Auto-scroll when content changes using MutationObserver + ResizeObserver
     React.useEffect(() => {
-        if (!isAutoScrollingRef.current) {
-            const isAtBottom = checkScrollPosition();
-            wasAtBottomRef.current = isAtBottom;
-        }
-    }, [checkScrollPosition]);
-    // Detect user interaction with scroll area (wheel, touch) - IMMEDIATELY break auto-scroll
-    const handleUserInteraction = React.useCallback(() => {
-        // Immediately mark that user is interacting
-        isAutoScrollingRef.current = false;
-        // For wheel/touch events, temporarily break auto-scroll
-        // The actual scroll event will update wasAtBottomRef properly
-        // This prevents the race condition where content updates before scroll completes
         const container = scrollContainerRef.current;
         if (!container)
             return;
-        // Check current position BEFORE the scroll happens
-        const { scrollTop, scrollHeight, clientHeight } = container;
-        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-        // If user is not currently at the bottom, definitely break auto-scroll
-        if (distanceFromBottom >= 100) {
-            wasAtBottomRef.current = false;
-        }
-        // If they are at bottom, the scroll event will determine if they stay there
-    }, []);
-    // Handle keyboard navigation
-    const handleKeyDown = React.useCallback((e) => {
-        // If user presses arrow keys, page up/down, home/end - they're scrolling
-        const scrollKeys = [
-            "ArrowUp",
-            "ArrowDown",
-            "PageUp",
-            "PageDown",
-            "Home",
-            "End",
-        ];
-        if (scrollKeys.includes(e.key)) {
-            isAutoScrollingRef.current = false;
-            // Check position on next frame after the scroll happens
+        const scrollIfNeeded = () => {
+            // Only auto-scroll if user was at bottom and isn't actively scrolling
+            if (!isAtBottomRef.current || isUserScrollingRef.current) {
+                return;
+            }
+            const now = Date.now();
+            const timeSinceLastMutation = now - lastMutationTimeRef.current;
+            const currentScrollHeight = container.scrollHeight;
+            const heightDelta = currentScrollHeight - lastScrollHeightRef.current;
+            lastMutationTimeRef.current = now;
+            lastScrollHeightRef.current = currentScrollHeight;
+            // Detect if this is likely a new message (large height increase + time gap)
+            // vs streaming (small incremental changes)
+            const isLikelyNewMessage = heightDelta > 80 && timeSinceLastMutation > 150;
             requestAnimationFrame(() => {
-                const container = scrollContainerRef.current;
-                if (!container)
-                    return;
-                const { scrollTop, scrollHeight, clientHeight } = container;
-                const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-                wasAtBottomRef.current = distanceFromBottom < 100;
+                if (isLikelyNewMessage) {
+                    scrollToBottom("smooth");
+                }
+                else {
+                    scrollToBottom("instant");
+                }
+                setIsAtBottom(true);
+                isAtBottomRef.current = true;
             });
+        };
+        // Watch for DOM changes (new messages, content updates)
+        const mutationObserver = new MutationObserver(scrollIfNeeded);
+        mutationObserver.observe(container, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+        });
+        // Watch for size changes (images loading, content expanding)
+        const resizeObserver = new ResizeObserver(scrollIfNeeded);
+        resizeObserver.observe(container);
+        // Also observe direct children for size changes
+        for (const child of Array.from(container.children)) {
+            resizeObserver.observe(child);
         }
-    }, []);
-    return (_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsx("div", { ref: scrollContainerRef, className: cn("h-full overflow-y-auto flex flex-col", className), onScroll: handleScroll, onWheel: handleUserInteraction, onTouchStart: handleUserInteraction, onKeyDown: handleKeyDown, tabIndex: 0, ...props, children: _jsx("div", { className: "mx-auto max-w-chat flex-1 w-full flex flex-col", children: children }) }), showScrollButton && (_jsx("button", { type: "button", onClick: () => scrollToBottom(true), className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-10", "flex items-center justify-center p-2 rounded-full", "bg-card border border-border shadow-lg", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "transition-all duration-200 ease-in-out", "animate-in fade-in slide-in-from-bottom-2"), "aria-label": "Scroll to bottom", children: _jsx(ArrowDown, { className: "size-4" }) }))] }));
+        // Initialize scroll height
+        lastScrollHeightRef.current = container.scrollHeight;
+        return () => {
+            mutationObserver.disconnect();
+            resizeObserver.disconnect();
+        };
+    }, [scrollToBottom]);
+    // Button click handler - smooth scroll and re-engage auto-scroll
+    const handleScrollToBottomClick = React.useCallback(() => {
+        setIsAtBottom(true);
+        isAtBottomRef.current = true;
+        scrollToBottom("smooth");
+    }, [scrollToBottom]);
+    return (_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsx("div", { ref: scrollContainerRef, className: cn("h-full overflow-y-auto flex flex-col", className), tabIndex: 0, ...props, children: _jsx("div", { className: "mx-auto max-w-chat flex-1 w-full flex flex-col", children: children }) }), showScrollToBottom && (_jsx("button", { type: "button", onClick: handleScrollToBottomClick, className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-10", "flex items-center justify-center p-2 rounded-full", "bg-card border border-border shadow-lg", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "transition-all duration-200 ease-in-out", isAtBottom
+                    ? "pointer-events-none scale-0 opacity-0"
+                    : "pointer-events-auto scale-100 opacity-100"), "aria-label": "Scroll to bottom", children: _jsx(ArrowDown, { className: "size-4" }) }))] }));
 });
 ChatLayoutMessages.displayName = "ChatLayout.Messages";
 const ChatLayoutFooter = React.forwardRef(({ className, children, ...props }, ref) => {

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 /**
  * Response component inspired by shadcn.io/ai
- * Streaming-optimized markdown renderer for AI-generated content
+ * Streaming-optimized markdown renderer using streamdown for incremental parsing
  */
 export interface ResponseProps extends React.HTMLAttributes<HTMLDivElement> {
     /** The markdown content to render */
@@ -13,4 +13,4 @@ export interface ResponseProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Custom empty state message */
     emptyMessage?: string;
 }
-export declare const Response: React.ForwardRefExoticComponent<ResponseProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Response: React.NamedExoticComponent<ResponseProps & React.RefAttributes<HTMLDivElement>>;

package/dist/gui/components/Response.js

@@ -1,9 +1,9 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
+import { Streamdown } from "streamdown";
 import { cn } from "../lib/utils.js";
-export const Response = React.forwardRef(({ content, isStreaming = false, showEmpty = true, emptyMessage = "", className, ...props }, ref) => {
+export const Response = React.memo(React.forwardRef(({ content, isStreaming = false, showEmpty = true, emptyMessage = "", className, ...props }, ref) => {
     // Show empty state during streaming if no content yet
     if (!content && isStreaming && showEmpty) {
         return (_jsx("div", { ref: ref, className: cn("opacity-70 italic text-paragraph-sm", className), ...props, children: emptyMessage }));
@@ -11,89 +11,6 @@ export const Response = React.forwardRef(({ content, isStreaming = false, showEm
     if (!content) {
         return null;
     }
-    const components = {
-        // Table styling
-        table: ({ node, ...props }) => (_jsx("div", { className: "overflow-x-auto my-4", children: _jsx("table", { className: "min-w-full border-collapse border border-border rounded-md", ...props }) })),
-        thead: ({ node, ...props }) => (_jsx("thead", { className: "bg-card border-b border-border", ...props })),
-        tbody: ({ node, ...props }) => _jsx("tbody", { ...props }),
-        tr: ({ node, ...props }) => (_jsx("tr", { className: "border-b border-border hover:bg-card transition-colors", ...props })),
-        th: ({ node, ...props }) => (_jsx("th", { className: "px-4 py-2 text-left font-semibold text-foreground border-r border-border last:border-r-0", ...props })),
-        td: ({ node, ...props }) => (_jsx("td", { className: "px-4 py-2 text-foreground border-r border-border last:border-r-0", ...props })),
-        // Task list styling
-        input: ({ node, checked, ...props }) => {
-            if (props.type === "checkbox") {
-                return (_jsx("input", { type: "checkbox", checked: checked || false, disabled: true, readOnly: true, className: "mr-2 w-4 h-4 accent-[primary] cursor-not-allowed", ...props }));
-            }
-            return _jsx("input", { ...props });
-        },
-        // Code block styling with enhanced shadows
-        code: ({ node, ...props }) => {
-            const inline = !props.className?.includes("language-");
-            if (inline) {
-                return (_jsx("code", { className: "px-1.5 py-0.5 bg-card border border-border rounded text-code text-foreground", ...props }));
-            }
-            return (_jsx("code", { className: "block p-4 bg-card border border-border rounded-md overflow-x-auto text-code text-foreground shadow-sm", ...props }));
-        },
-        pre: ({ node, ...props }) => (_jsx("pre", { className: "my-4 rounded-lg", ...props })),
-        // Heading styling with improved hierarchy
-        h1: ({ node, ...props }) => (_jsx("h1", { className: "text-heading-3 mt-6 mb-4 text-foreground border-b border-border pb-2", ...props })),
-        h2: ({ node, ...props }) => (_jsx("h2", { className: "text-subheading mt-5 mb-3 text-foreground border-b border-border/50 pb-1.5", ...props })),
-        h3: ({ node, ...props }) => (_jsx("h3", { className: "text-subheading mt-4 mb-2 text-foreground", ...props })),
-        h4: ({ node, ...props }) => (_jsx("h4", { className: "text-paragraph-sm font-semibold mt-3 mb-2 text-foreground", ...props })),
-        // List styling
-        ul: ({ node, ...props }) => {
-            // Check if this is a task list by looking for checkbox inputs in children
-            const isTaskList = node?.children?.some((child) => typeof child === "object" &&
-                child !== null &&
-                "type" in child &&
-                child.type === "element" &&
-                "tagName" in child &&
-                child.tagName === "li" &&
-                "children" in child &&
-                Array.isArray(child.children) &&
-                child.children.some((grandChild) => typeof grandChild === "object" &&
-                    grandChild !== null &&
-                    "type" in grandChild &&
-                    grandChild.type === "element" &&
-                    "tagName" in grandChild &&
-                    grandChild.tagName === "input" &&
-                    "properties" in grandChild &&
-                    typeof grandChild.properties === "object" &&
-                    grandChild.properties !== null &&
-                    "type" in grandChild.properties &&
-                    grandChild.properties.type === "checkbox"));
-            return (_jsx("ul", { className: cn("my-2 space-y-1 text-foreground", isTaskList
-                    ? "list-none space-y-2"
-                    : "list-disc list-outside pl-4"), ...props }));
-        },
-        ol: ({ node, ...props }) => (_jsx("ol", { className: "list-decimal list-outside pl-4 my-2 space-y-1 text-foreground", ...props })),
-        // List item styling
-        li: ({ node, ...props }) => {
-            // Check if this li contains a checkbox (task list item)
-            const isTaskListItem = node?.children?.some((child) => typeof child === "object" &&
-                child !== null &&
-                "type" in child &&
-                child.type === "element" &&
-                "tagName" in child &&
-                child.tagName === "input" &&
-                "properties" in child &&
-                typeof child.properties === "object" &&
-                child.properties !== null &&
-                "type" in child.properties &&
-                child.properties.type === "checkbox");
-            return (_jsx("li", { className: cn(isTaskListItem ? "flex items-start gap-2" : ""), ...props }));
-        },
-        // Link styling with hover effect
-        a: ({ node, ...props }) => (_jsx("a", { className: "text-primary hover:underline decoration-2 underline-offset-2 transition-all", target: "_blank", rel: "noopener noreferrer", ...props })),
-        // Paragraph styling
-        p: ({ node, ...props }) => (_jsx("p", { className: "mb-2 text-foreground leading-relaxed", ...props })),
-        // Blockquote styling with enhanced visual
-        blockquote: ({ node, ...props }) => (_jsx("blockquote", { className: "border-l-4 border-[primary] pl-4 italic my-4 text-foreground bg-card py-2 rounded-r-md shadow-sm", ...props })),
-        // Horizontal rule
-        hr: ({ node, ...props }) => (_jsx("hr", { className: "my-6 border-t border-border opacity-50", ...props })),
-        // Image styling
-        img: ({ node, ...props }) => (_jsx("img", { className: "max-w-full h-auto rounded-md border border-border my-4", loading: "lazy", ...props })),
-    };
-    return (_jsx("div", { ref: ref, className: cn("markdown-content prose prose-sm max-w-none dark:prose-invert", className), ...props, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: components, children: content }) }));
-});
+    return (_jsx("div", { ref: ref, ...props, children: _jsx(Streamdown, { className: cn("size-full", "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0", "[&_code]:whitespace-pre-wrap [&_code]:break-words", "[&_pre]:max-w-full [&_pre]:overflow-x-auto", className), children: content }) }));
+}), (prevProps, nextProps) => prevProps.content === nextProps.content);
 Response.displayName = "Response";

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

@@ -178,9 +178,10 @@ export declare const Message: z.ZodObject<{
 }, z.core.$strip>;
 export type Message = z.infer<typeof Message>;
 /**
- * Streaming message chunk
+ * Streaming message chunk - content delta
  */
-export declare const MessageChunk: z.ZodObject<{
+export declare const ContentChunk: z.ZodObject<{
+    type: z.ZodLiteral<"content">;
     id: z.ZodString;
     role: z.ZodEnum<{
         user: "user";
@@ -241,4 +242,100 @@ export declare const MessageChunk: z.ZodObject<{
         }, z.core.$strip>>;
     }, z.core.$strip>>;
 }, z.core.$strip>;
+export type ContentChunk = z.infer<typeof ContentChunk>;
+/**
+ * Tool call event chunk
+ */
+export declare const ToolCallChunk: z.ZodObject<{
+    type: z.ZodLiteral<"tool_call">;
+    id: z.ZodString;
+    toolCall: z.ZodAny;
+    messageId: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+export type ToolCallChunk = z.infer<typeof ToolCallChunk>;
+/**
+ * Tool call update chunk
+ */
+export declare const ToolCallUpdateChunk: z.ZodObject<{
+    type: z.ZodLiteral<"tool_call_update">;
+    id: z.ZodString;
+    toolCallUpdate: z.ZodAny;
+    messageId: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+export type ToolCallUpdateChunk = z.infer<typeof ToolCallUpdateChunk>;
+/**
+ * Message chunk - discriminated union of all chunk types
+ */
+export declare const MessageChunk: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    type: z.ZodLiteral<"content">;
+    id: z.ZodString;
+    role: z.ZodEnum<{
+        user: "user";
+        assistant: "assistant";
+        system: "system";
+        tool: "tool";
+    }>;
+    contentDelta: z.ZodDiscriminatedUnion<[z.ZodObject<{
+        type: z.ZodLiteral<"text">;
+        text: z.ZodString;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"image">;
+        url: z.ZodOptional<z.ZodString>;
+        source: z.ZodOptional<z.ZodObject<{
+            type: z.ZodLiteral<"base64">;
+            media_type: z.ZodEnum<{
+                "image/jpeg": "image/jpeg";
+                "image/png": "image/png";
+                "image/gif": "image/gif";
+                "image/webp": "image/webp";
+            }>;
+            data: z.ZodString;
+        }, z.core.$strip>>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"file">;
+        name: z.ZodString;
+        path: z.ZodOptional<z.ZodString>;
+        url: z.ZodOptional<z.ZodString>;
+        mimeType: z.ZodString;
+        size: z.ZodOptional<z.ZodNumber>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"tool_call">;
+        id: z.ZodString;
+        name: z.ZodString;
+        arguments: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"tool_result">;
+        callId: z.ZodString;
+        result: z.ZodUnknown;
+        error: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>], "type">;
+    isComplete: z.ZodBoolean;
+    tokenUsage: z.ZodOptional<z.ZodObject<{
+        inputTokens: z.ZodOptional<z.ZodNumber>;
+        outputTokens: z.ZodOptional<z.ZodNumber>;
+        totalTokens: z.ZodOptional<z.ZodNumber>;
+    }, z.core.$strip>>;
+    contextInputTokens: z.ZodOptional<z.ZodNumber>;
+    _meta: z.ZodOptional<z.ZodObject<{
+        context_size: z.ZodOptional<z.ZodObject<{
+            systemPromptTokens: z.ZodNumber;
+            userMessagesTokens: z.ZodNumber;
+            assistantMessagesTokens: z.ZodNumber;
+            toolInputTokens: z.ZodNumber;
+            toolResultsTokens: z.ZodNumber;
+            totalEstimated: z.ZodNumber;
+            llmReportedInputTokens: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>>;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"tool_call">;
+    id: z.ZodString;
+    toolCall: z.ZodAny;
+    messageId: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"tool_call_update">;
+    id: z.ZodString;
+    toolCallUpdate: z.ZodAny;
+    messageId: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>], "type">;
 export type MessageChunk = z.infer<typeof MessageChunk>;

package/dist/sdk/schemas/message.js

@@ -97,9 +97,10 @@ export const Message = z.object({
     metadata: z.record(z.string(), z.unknown()).optional(),
 });
 /**
- * Streaming message chunk
+ * Streaming message chunk - content delta
  */
-export const MessageChunk = z.object({
+export const ContentChunk = z.object({
+    type: z.literal("content"),
     id: z.string(),
     role: MessageRole,
     contentDelta: Content,
@@ -128,3 +129,29 @@ export const MessageChunk = z.object({
     })
         .optional(),
 });
+/**
+ * Tool call event chunk
+ */
+export const ToolCallChunk = z.object({
+    type: z.literal("tool_call"),
+    id: z.string(),
+    toolCall: z.any(), // Will be typed properly by importing ToolCall
+    messageId: z.string().optional(),
+});
+/**
+ * Tool call update chunk
+ */
+export const ToolCallUpdateChunk = z.object({
+    type: z.literal("tool_call_update"),
+    id: z.string(),
+    toolCallUpdate: z.any(), // Will be typed properly by importing ToolCallUpdate
+    messageId: z.string().optional(),
+});
+/**
+ * Message chunk - discriminated union of all chunk types
+ */
+export const MessageChunk = z.discriminatedUnion("type", [
+    ContentChunk,
+    ToolCallChunk,
+    ToolCallUpdateChunk,
+]);

package/dist/sdk/transports/http.js

@@ -346,6 +346,7 @@ export class HttpTransport {
             const resolver = this.chunkResolvers.shift();
             if (resolver) {
                 resolver({
+                    type: "content",
                     id: this.currentSessionId || "unknown",
                     role: "assistant",
                     contentDelta: { type: "text", text: "" },
@@ -354,6 +355,7 @@ export class HttpTransport {
             }
             else {
                 this.messageQueue.push({
+                    type: "content",
                     id: this.currentSessionId || "unknown",
                     role: "assistant",
                     contentDelta: { type: "text", text: "" },
@@ -379,7 +381,7 @@ export class HttpTransport {
                     const chunk = this.messageQueue.shift();
                     if (chunk) {
                         yield chunk;
-                        if (chunk.isComplete) {
+                        if (chunk.type === "content" && chunk.isComplete) {
                             return;
                         }
                     }
@@ -389,7 +391,7 @@ export class HttpTransport {
                     const chunk = await new Promise((resolve) => {
                         this.chunkResolvers.push(resolve);
                     });
-                    if (chunk.isComplete) {
+                    if (chunk.type === "content" && chunk.isComplete) {
                         yield chunk;
                         return;
                     }
@@ -407,6 +409,7 @@ export class HttpTransport {
             }
             // Mark the stream as complete
             yield {
+                type: "content",
                 id: this.currentSessionId || "unknown",
                 role: "assistant",
                 contentDelta: { type: "text", text: "" },
@@ -760,7 +763,20 @@ export class HttpTransport {
                 toolCall: toolCall,
                 messageId,
             };
-            this.notifySessionUpdate(sessionUpdate);
+            // Queue tool call as a chunk for ordered processing
+            const toolCallChunk = {
+                type: "tool_call",
+                id: sessionId,
+                toolCall: toolCall,
+                messageId,
+            };
+            const resolver = this.chunkResolvers.shift();
+            if (resolver) {
+                resolver(toolCallChunk);
+            }
+            else {
+                this.messageQueue.push(toolCallChunk);
+            }
         }
         else if (update?.sessionUpdate === "tool_call_update") {
             // Extract messageId and metadata from _meta
@@ -882,10 +898,23 @@ export class HttpTransport {
                 toolCallUpdate: toolCallUpdate,
                 messageId,
             };
-            logger.debug("Notifying tool_call_update session update", {
+            // Queue tool call update as a chunk for ordered processing
+            const toolCallUpdateChunk = {
+                type: "tool_call_update",
+                id: sessionId,
+                toolCallUpdate: toolCallUpdate,
+                messageId,
+            };
+            const resolver = this.chunkResolvers.shift();
+            if (resolver) {
+                resolver(toolCallUpdateChunk);
+            }
+            else {
+                this.messageQueue.push(toolCallUpdateChunk);
+            }
+            logger.debug("Queued tool_call_update chunk", {
                 sessionUpdate,
             });
-            this.notifySessionUpdate(sessionUpdate);
         }
         else if (update &&
             "sessionUpdate" in update &&
@@ -966,10 +995,23 @@ export class HttpTransport {
                 toolCallUpdate: toolOutput,
                 messageId,
             };
-            logger.debug("Notifying tool_output as tool_call_update", {
+            // Queue tool output as a chunk for ordered processing
+            const toolCallUpdateChunk = {
+                type: "tool_call_update",
+                id: sessionId,
+                toolCallUpdate: toolOutput,
+                messageId,
+            };
+            const resolver = this.chunkResolvers.shift();
+            if (resolver) {
+                resolver(toolCallUpdateChunk);
+            }
+            else {
+                this.messageQueue.push(toolCallUpdateChunk);
+            }
+            logger.debug("Queued tool_output as tool_call_update chunk", {
                 sessionUpdate,
             });
-            this.notifySessionUpdate(sessionUpdate);
         }
         else if (update?.sessionUpdate === "agent_message_chunk") {
             // Check if this is a replay (not live streaming)
@@ -1015,6 +1057,7 @@ export class HttpTransport {
                 let chunk = null;
                 if (contentObj.type === "text" && typeof contentObj.text === "string") {
                     chunk = {
+                        type: "content",
                         id: params.sessionId,
                         role: "assistant",
                         contentDelta: { type: "text", text: contentObj.text },

package/dist/sdk/transports/stdio.js

@@ -186,7 +186,19 @@ export class StdioTransport {
                                 status: "active",
                                 toolCall: toolCall,
                             };
-                            self.notifySessionUpdate(sessionUpdate);
+                            // Queue tool call as a chunk for ordered processing
+                            const toolCallChunk = {
+                                type: "tool_call",
+                                id: sessionId,
+                                toolCall: toolCall,
+                            };
+                            const resolver = self.chunkResolvers.shift();
+                            if (resolver) {
+                                resolver(toolCallChunk);
+                            }
+                            else {
+                                self.messageQueue.push(toolCallChunk);
+                            }
                         }
                         else if (update?.sessionUpdate === "tool_call_update") {
                             // Tool call update notification
@@ -259,7 +271,19 @@ export class StdioTransport {
                                 status: "active",
                                 toolCallUpdate: toolCallUpdate,
                             };
-                            self.notifySessionUpdate(sessionUpdate);
+                            // Queue tool call update as a chunk for ordered processing
+                            const toolCallUpdateChunk = {
+                                type: "tool_call_update",
+                                id: sessionId,
+                                toolCallUpdate: toolCallUpdate,
+                            };
+                            const resolver = self.chunkResolvers.shift();
+                            if (resolver) {
+                                resolver(toolCallUpdateChunk);
+                            }
+                            else {
+                                self.messageQueue.push(toolCallUpdateChunk);
+                            }
                         }
                         else if (update?.sessionUpdate === "agent_message_chunk") {
                             // Handle agent message chunks
@@ -291,6 +315,7 @@ export class StdioTransport {
                                 if (contentObj.type === "text" &&
                                     typeof contentObj.text === "string") {
                                     chunk = {
+                                        type: "content",
                                         id: params.sessionId,
                                         role: "assistant",
                                         contentDelta: { type: "text", text: contentObj.text },
@@ -485,6 +510,7 @@ export class StdioTransport {
             const resolver = this.chunkResolvers.shift();
             if (resolver) {
                 resolver({
+                    type: "content",
                     id: this.currentSessionId || "unknown",
                     role: "assistant",
                     contentDelta: { type: "text", text: "" },
@@ -507,6 +533,9 @@ export class StdioTransport {
                 const chunk = this.messageQueue.shift();
                 if (chunk) {
                     yield chunk;
+                    if (chunk.type === "content" && chunk.isComplete) {
+                        return;
+                    }
                 }
             }
             else {
@@ -514,7 +543,7 @@ export class StdioTransport {
                 const chunk = await new Promise((resolve) => {
                     this.chunkResolvers.push(resolve);
                 });
-                if (chunk.isComplete) {
+                if (chunk.type === "content" && chunk.isComplete) {
                     yield chunk;
                     return;
                 }
@@ -532,6 +561,7 @@ export class StdioTransport {
         }
         // Mark the stream as complete
         yield {
+            type: "content",
             id: this.currentSessionId || "unknown",
             role: "assistant",
             contentDelta: { type: "text", text: "" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.58",
+  "version": "0.1.65",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -42,13 +42,14 @@
   },
   "dependencies": {
     "@agentclientprotocol/sdk": "^0.5.1",
-    "@townco/core": "0.0.36",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@townco/core": "0.0.43",
     "@uiw/react-json-view": "^2.0.0-alpha.39",
     "bun": "^1.3.1",
     "class-variance-authority": "^0.7.1",
@@ -56,16 +57,16 @@
     "lucide-react": "^0.552.0",
     "react-markdown": "^10.1.0",
     "react-resizable-panels": "^3.0.6",
-    "@radix-ui/react-tooltip": "^1.2.8",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
+    "streamdown": "^1.6.9",
     "tailwind-merge": "^3.3.1",
     "zod": "^4.1.12",
     "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "0.1.55",
+    "@townco/tsconfig": "0.1.62",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",

package/src/styles/global.css

@@ -2,6 +2,9 @@
 
 @source "../**/*.{ts,tsx}";
 
+/* Include utility classes used by streamdown for markdown rendering */
+@source '../node_modules/streamdown/dist/index.js';
+
 @theme {
   /* Semantic Color Tokens */
   --color-background: var(--background);
@@ -206,6 +209,27 @@
   }
 }
 
+/* Streamdown code block dark mode styling */
+/* Ensure Shiki dark theme variables are applied in dark mode */
+.dark [data-streamdown="code-block"] {
+  background-color: var(--shiki-dark-bg, #24292e);
+}
+
+.dark [data-streamdown="code-block-body"] {
+  background-color: var(--shiki-dark-bg, #24292e) !important;
+  color: var(--shiki-dark, #e1e4e8) !important;
+}
+
+.dark [data-streamdown="code-block-header"] {
+  background-color: color-mix(in srgb, var(--shiki-dark-bg, #24292e) 80%, transparent);
+}
+
+/* Ensure inline code also has proper dark mode styling */
+.dark [data-streamdown="inline-code"] {
+  background-color: var(--muted);
+  color: var(--foreground);
+}
+
 @layer utilities {
   /* Typography utilities following design system */
   .text-heading-1 {