@townco/ui 0.1.116 → 0.1.118

package/dist/gui/components/ChatView.js

@@ -330,30 +330,7 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
                                                             logger.info("Prompt clicked", { prompt });
                                                         }, onPromptHover: handlePromptHover, onPromptLeave: handlePromptLeave, onOpenFiles: openFiles, onOpenSettings: openSettings, toolsAndMcpsCount: agentTools.length +
                                                             agentMcps.length +
-                                                            agentSubagents.length }) })) })) : null) : (_jsx("div", { className: "flex flex-col px-4", children: messages.map((message, index) => {
-                                                    // Calculate dynamic spacing based on message sequence
-                                                    const isFirst = index === 0;
-                                                    const previousMessage = isFirst
-                                                        ? null
-                                                        : messages[index - 1];
-                                                    let spacingClass = "mt-2";
-                                                    if (isFirst) {
-                                                        // First message needs more top margin if it's an assistant initial message
-                                                        spacingClass =
-                                                            message.role === "assistant" ? "mt-8" : "mt-2";
-                                                    }
-                                                    else if (message.role === "user") {
-                                                        // User message usually starts a new turn
-                                                        spacingClass =
-                                                            previousMessage?.role === "user" ? "mt-4" : "mt-4";
-                                                    }
-                                                    else if (message.role === "assistant") {
-                                                        // Assistant message is usually a response
-                                                        spacingClass =
-                                                            previousMessage?.role === "assistant"
-                                                                ? "mt-2"
-                                                                : "mt-6";
-                                                    }
+                                                            agentSubagents.length }) })) })) : null) : (_jsx("div", { className: "flex flex-col px-4 py-4", children: messages.map((message, index) => {
                                                     // Check if any message is streaming
                                                     const anyMessageStreaming = messages.some((m) => m.isStreaming);
                                                     // Calculate which user message number this is (1-indexed for display, 0-indexed for API)
@@ -366,7 +343,7 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
                                                     // Check if this message should be dimmed (comes after editing message)
                                                     const shouldDim = editingMessageIndex !== null &&
                                                         index > editingMessageIndex;
-                                                    return (_jsx(Message, { message: message, className: cn(spacingClass, "group", shouldDim && "opacity-50"), isLastMessage: index === messages.length - 1, children: _jsx("div", { className: "flex flex-col w-full", children: message.role === "user" ? (_jsx(EditableUserMessage, { message: message, messageIndex: userMessageIndex, isStreaming: anyMessageStreaming, onEditAndResend: editAndResend, sticky: true, onEditingChange: (isEditing) => {
+                                                    return (_jsx(Message, { message: message, className: cn("group", shouldDim && "opacity-50"), isLastMessage: index === messages.length - 1, children: _jsx("div", { className: "flex flex-col w-full min-w-0", children: message.role === "user" ? (_jsx(EditableUserMessage, { message: message, messageIndex: userMessageIndex, isStreaming: anyMessageStreaming, onEditAndResend: editAndResend, sticky: true, onEditingChange: (isEditing) => {
                                                                     setEditingMessageIndex(isEditing ? index : null);
                                                                 } })) : (_jsxs(_Fragment, { children: [
                                                                     _jsx(MessageContent, { message: message, thinkingDisplayStyle: "collapsible" }), _jsx(MessageActions, { message: message, isStreaming: message.isStreaming, onSendMessage: sendMessage, isLastAssistantMessage: index ===

package/dist/gui/components/EditableUserMessage.js

@@ -114,7 +114,7 @@ function PureEditableUserMessage({ message, messageIndex, isStreaming, onEditAnd
                     }
                     : undefined, role: sticky && !isEditing ? "button" : undefined, tabIndex: sticky && !isEditing ? 0 : undefined, children: _jsxs("div", { className: "flex flex-col gap-2", children: [message.images && message.images.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: message.images.map((image, imageIndex) => (_jsx("img", { src: `data:${image.mimeType};base64,${image.data}`, alt: `Attachment ${imageIndex + 1}`, className: cn("max-w-[200px] max-h-[200px] rounded-lg object-cover", isEditing && "opacity-50") }, `image-${image.mimeType}-${image.data.slice(0, 20)}`))) })), message.content && (
                         // biome-ignore lint/a11y/useSemanticElements: contentEditable div preserves whitespace formatting better than textarea
-                        _jsx("div", { ref: contentEditableRef, role: "textbox", tabIndex: isEditing ? 0 : -1, contentEditable: isEditing, onKeyDown: isEditing ? handleKeyDown : undefined, suppressContentEditableWarning: true, className: cn("whitespace-pre-wrap text-foreground leading-relaxed outline-none", isEditing && "cursor-text", !isEditing && "cursor-default"), children: message.content }))] }) }), !isStreaming && message.content && (_jsx(Actions, { className: cn("mt-2 transition-opacity justify-end", isEditing
+                        _jsx("div", { ref: contentEditableRef, role: "textbox", tabIndex: isEditing ? 0 : -1, contentEditable: isEditing, onKeyDown: isEditing ? handleKeyDown : undefined, suppressContentEditableWarning: true, className: cn("whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-foreground leading-relaxed outline-none", isEditing && "cursor-text", !isEditing && "cursor-default"), children: message.content }))] }) }), !isStreaming && message.content && (_jsx(Actions, { className: cn("mt-2 transition-opacity justify-end", isEditing
                     ? "opacity-100"
                     : "opacity-0 group-hover/user-message:opacity-100"), children: isEditing ? (_jsxs(_Fragment, { children: [
                         _jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancelEdit, className: "h-7 px-2 text-xs text-muted-foreground hover:text-foreground", children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleSaveAndResend, className: "h-7 px-3 text-xs", children: "Send" })

package/dist/gui/components/Message.js

@@ -6,10 +6,10 @@ import { cn } from "../lib/utils.js";
  * Message wrapper component inspired by shadcn.io/ai
  * Provides role-based layout and styling for chat messages
  */
-const messageVariants = cva("flex animate-fadeIn", {
+const messageVariants = cva("flex min-w-0 animate-fadeIn", {
     variants: {
         role: {
-            user: "max-w-[80%] self-end ml-auto mr-2",
+            user: "max-w-[80%] self-end ml-auto",
             assistant: "self-start mr-auto",
             system: "self-start mr-auto max-w-full",
         },

package/dist/gui/components/MessageActions.js

@@ -63,7 +63,7 @@ function PureMessageActions({ message, isStreaming, onRedo, onSendMessage, isLas
             toast.info("Export not available");
         }
     };
-    return (_jsxs(Actions, { className: cn("mt-2 mb-10", visibilityClass), children: [
+    return (_jsxs(Actions, { className: cn(visibilityClass), children: [
             _jsx(Action, { onClick: handleCopy, tooltip: isCopied ? "Copied!" : "Copy", children: isCopied ? _jsx(Check, { className: "size-4" }) : _jsx(Copy, { className: "size-4" }) }), _jsx(Action, { onClick: handleRedo, tooltip: "Redo", children: _jsx(RotateCcw, { className: "size-4" }) }), _jsxs(DropdownMenu, { children: [
                     _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [
                                 _jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { className: cn("relative size-7 p-1.5 text-muted-foreground hover:text-foreground"), size: "sm", type: "button", variant: "ghost", children: [

package/dist/gui/components/MessageContent.js

@@ -13,11 +13,11 @@ import { ToolOperation } from "./ToolOperation.js";
  * Provides the content container with role-based styling
  * Handles automatic rendering of thinking, waiting states, and content
  */
-const messageContentVariants = cva("w-full rounded-2xl text-[var(--font-size)] font-[var(--font-family)] leading-relaxed break-words transition-colors", {
+const messageContentVariants = cva("w-full min-w-0 rounded-2xl text-[var(--font-size)] font-[var(--font-family)] leading-relaxed break-words [overflow-wrap:anywhere] transition-colors", {
     variants: {
         role: {
             user: "bg-secondary text-foreground px-4 py-4 text-paragraph",
-            assistant: "text-foreground text-paragraph-sm",
+            assistant: "text-foreground text-paragraph",
             system: "bg-card border border-border text-foreground opacity-80 text-caption px-4 py-3",
         },
         variant: {
@@ -40,6 +40,11 @@ function countCitations(text) {
         count++;
     return count;
 }
+function trimTrailingNewlines(text) {
+    // Avoid rendering an extra blank line at the end of assistant markdown
+    // (especially noticeable right before tool-operation blocks).
+    return text.replace(/\n+$/g, "");
+}
 export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStreaming: isStreamingProp, message, thinkingDisplayStyle = "collapsible", className, children, ...props }, ref) => {
     // Get streaming start time and current model from store
     const streamingStartTime = useChatStore((state) => state.streamingStartTime);
@@ -70,7 +75,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
         const hasThinking = !!thinking;
         // Check if waiting (streaming but no content yet)
         const isWaiting = message.isStreaming && !message.content && message.role === "assistant";
-        content = (_jsxs(_Fragment, { children: [message.role === "assistant" && hasThinking && (_jsx("div", { children: _jsx(Reasoning, { content: thinking, isStreaming: message.isStreaming, mode: thinkingDisplayStyle, autoCollapse: true }) })), isWaiting && streamingStartTime && (_jsx("div", { className: "flex flex-col my-4 rounded-md px-1 -mx-1 w-fit", children: _jsx("div", { className: "flex items-center gap-1.5", children: _jsx("span", { className: "text-paragraph-sm text-text-secondary/70", children: "Working..." }) }) })), message.role === "assistant" ? ((() => {
+        content = (_jsxs(_Fragment, { children: [message.role === "assistant" && hasThinking && (_jsx("div", { children: _jsx(Reasoning, { content: thinking, isStreaming: message.isStreaming, mode: thinkingDisplayStyle, autoCollapse: true }) })), isWaiting && streamingStartTime && (_jsx("div", { className: "flex flex-col rounded-md px-1 -mx-1 w-fit", children: _jsx("div", { className: "flex items-center gap-1.5", children: _jsx("span", { className: "text-paragraph-sm text-text-secondary/70", children: "Working..." }) }) })), message.role === "assistant" ? ((() => {
                     // Sort tool calls by content position
                     const sortedToolCalls = (message.toolCalls || [])
                         .slice()
@@ -210,7 +215,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                         const hasHookPositions = hookNotifications.some((n) => n.contentPosition !== undefined);
                         if (!hasHookPositions) {
                             // No positions - render hooks at top, then content, then tool calls
-                            return (_jsxs(_Fragment, { children: [hookNotifications.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-1", children: hookNotifications.map((notification) => (_jsx(HookNotification, { notification: notification }, notification.id))) })), _jsx("div", { children: _jsx(Response, { content: message.content, isStreaming: message.isStreaming, showEmpty: false, sources: sourcesForResponse, messageId: message.id, citationIndexOffset: 0 }) }), groupedToolCalls.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-1", children: groupedToolCalls.map((item, index) => renderToolCallOrGroup(item, index)) })), shouldShowThinkingIndicator && (_jsx("div", { className: "flex flex-col my-4 rounded-md px-1 -mx-1 w-fit", children: _jsx("div", { className: "flex items-center gap-1.5", children: _jsx("span", { className: "text-paragraph-sm text-text-secondary/70", children: "Thinking..." }) }) }))] }));
+                            return (_jsxs("div", { className: "flex flex-col gap-2", children: [hookNotifications.length > 0 && (_jsx("div", { className: "flex flex-col gap-2", children: hookNotifications.map((notification) => (_jsx(HookNotification, { notification: notification }, notification.id))) })), _jsx("div", { children: _jsx(Response, { content: trimTrailingNewlines(message.content), isStreaming: message.isStreaming, showEmpty: false, sources: sourcesForResponse, messageId: message.id, citationIndexOffset: 0 }) }), groupedToolCalls.length > 0 && (_jsx("div", { className: "flex flex-col gap-2", children: groupedToolCalls.map((item, index) => renderToolCallOrGroup(item, index)) })), shouldShowThinkingIndicator && (_jsx("div", { className: "flex flex-col rounded-md px-1 -mx-1 w-fit", children: _jsx("div", { className: "flex items-center gap-1.5", children: _jsx("span", { className: "text-paragraph-sm text-text-secondary/70", children: "Thinking..." }) }) }))] }));
                         }
                         // Hooks have positions - render them inline with content
                         const elements = [];
@@ -221,9 +226,10 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                             // Add text before this hook notification
                             if (position > currentPosition) {
                                 const textChunk = message.content.slice(currentPosition, position);
-                                if (textChunk) {
-                                    elements.push(_jsx("div", { children: _jsx(Response, { content: textChunk, isStreaming: false, showEmpty: false, sources: sourcesForResponse, messageId: message.id, citationIndexOffset: citationOffset }) }, `text-before-hook-${notification.id}`));
-                                    citationOffset += countCitations(textChunk);
+                                const trimmedChunk = trimTrailingNewlines(textChunk);
+                                if (trimmedChunk) {
+                                    elements.push(_jsx("div", { children: _jsx(Response, { content: trimmedChunk, isStreaming: false, showEmpty: false, sources: sourcesForResponse, messageId: message.id, citationIndexOffset: citationOffset }) }, `text-before-hook-${notification.id}`));
+                                    citationOffset += countCitations(trimmedChunk);
                                 }
                             }
                             // Add hook notification
@@ -233,9 +239,10 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                         // Add remaining text
                         if (currentPosition < message.content.length) {
                             const remainingText = message.content.slice(currentPosition);
-                            if (remainingText) {
-                                elements.push(_jsx("div", { children: _jsx(Response, { content: remainingText, isStreaming: message.isStreaming, showEmpty: false, sources: sourcesForResponse, messageId: message.id, citationIndexOffset: citationOffset }) }, "text-end-hooks"));
-                                citationOffset += countCitations(remainingText);
+                            const trimmedRemaining = trimTrailingNewlines(remainingText);
+                            if (trimmedRemaining) {
+                                elements.push(_jsx("div", { children: _jsx(Response, { content: trimmedRemaining, isStreaming: message.isStreaming, showEmpty: false, sources: sourcesForResponse, messageId: message.id, citationIndexOffset: citationOffset }) }, "text-end-hooks"));
+                                citationOffset += countCitations(trimmedRemaining);
                             }
                         }
                         // Add tool calls at the end
@@ -244,7 +251,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                                 elements.push(renderToolCallOrGroup(item, index));
                             });
                         }
-                        return _jsx(_Fragment, { children: elements });
+                        return _jsx("div", { className: "flex flex-col gap-2", children: elements });
                     }
                     // Render content interleaved with tool calls and hook notifications
                     // Group consecutive tool calls with the same batchId or same title
@@ -299,12 +306,13 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                             // Flush any pending batch before adding text
                             flushBatch();
                             const textChunk = message.content.slice(currentPosition, position);
-                            if (textChunk) {
+                            const trimmedChunk = trimTrailingNewlines(textChunk);
+                            if (trimmedChunk) {
                                 const itemId = positionedItem.type === "toolCall"
                                     ? positionedItem.item.id
                                     : positionedItem.item.id;
-                                elements.push(_jsx("div", { children: _jsx(Response, { content: textChunk, isStreaming: false, showEmpty: false, sources: sourcesForResponse, messageId: message.id, citationIndexOffset: citationOffset }) }, `text-before-${itemId}`));
-                                citationOffset += countCitations(textChunk);
+                                elements.push(_jsx("div", { children: _jsx(Response, { content: trimmedChunk, isStreaming: false, showEmpty: false, sources: sourcesForResponse, messageId: message.id, citationIndexOffset: citationOffset }) }, `text-before-${itemId}`));
+                                citationOffset += countCitations(trimmedChunk);
                             }
                         }
                         if (positionedItem.type === "hookNotification") {
@@ -357,9 +365,10 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                     // Add remaining text after the last non-preliminary tool call
                     if (currentPosition < message.content.length) {
                         const remainingText = message.content.slice(currentPosition);
-                        if (remainingText) {
-                            elements.push(_jsx("div", { children: _jsx(Response, { content: remainingText, isStreaming: message.isStreaming, showEmpty: false, sources: sourcesForResponse, messageId: message.id, citationIndexOffset: citationOffset }) }, "text-end"));
-                            citationOffset += countCitations(remainingText);
+                        const trimmedRemaining = trimTrailingNewlines(remainingText);
+                        if (trimmedRemaining) {
+                            elements.push(_jsx("div", { children: _jsx(Response, { content: trimmedRemaining, isStreaming: message.isStreaming, showEmpty: false, sources: sourcesForResponse, messageId: message.id, citationIndexOffset: citationOffset }) }, "text-end"));
+                            citationOffset += countCitations(trimmedRemaining);
                         }
                     }
                     // Render preliminary (selecting) tool calls at the end, grouped
@@ -377,10 +386,10 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                     }
                     // Add thinking indicator if all tool calls are complete but message is still streaming
                     if (shouldShowThinkingIndicator) {
-                        elements.push(_jsx("div", { className: "flex flex-col my-4 rounded-md px-1 -mx-1 w-fit", children: _jsx("div", { className: "flex items-center gap-1.5", children: _jsx("span", { className: "text-paragraph-sm text-text-secondary/70", children: "Thinking..." }) }) }, "thinking-indicator"));
+                        elements.push(_jsx("div", { className: "flex flex-col rounded-md px-1 -mx-1 w-fit", children: _jsx("div", { className: "flex items-center gap-1.5", children: _jsx("span", { className: "text-paragraph-sm text-text-secondary/70", children: "Thinking..." }) }) }, "thinking-indicator"));
                     }
-                    return _jsx(_Fragment, { children: elements });
-                })()) : (_jsxs("div", { className: "flex flex-col gap-2", children: [message.images && message.images.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: message.images.map((image, imageIndex) => (_jsx("img", { src: `data:${image.mimeType};base64,${image.data}`, alt: `Attachment ${imageIndex + 1}`, className: "max-w-[200px] max-h-[200px] rounded-lg object-cover" }, `image-${image.mimeType}-${image.data.slice(0, 20)}`))) })), message.content && (_jsx("div", { className: "whitespace-pre-wrap", children: message.content }))] }))] }));
+                    return _jsx("div", { className: "flex flex-col gap-2", children: elements });
+                })()) : (_jsxs("div", { className: "flex flex-col gap-2", children: [message.images && message.images.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: message.images.map((image, imageIndex) => (_jsx("img", { src: `data:${image.mimeType};base64,${image.data}`, alt: `Attachment ${imageIndex + 1}`, className: "max-w-[200px] max-h-[200px] rounded-lg object-cover" }, `image-${image.mimeType}-${image.data.slice(0, 20)}`))) })), message.content && (_jsx("div", { className: "whitespace-pre-wrap break-words [overflow-wrap:anywhere]", children: message.content }))] }))] }));
     }
     return (_jsx("div", { ref: ref, className: cn(messageContentVariants({ role, variant }), isStreaming && "animate-pulse-subtle", className), ...props, children: content }));
 });

package/dist/gui/components/Response.js

@@ -1,13 +1,79 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createLogger } from "@townco/core";
+import { Check, Copy, Download } from "lucide-react";
 import * as React from "react";
 import remarkGfm from "remark-gfm";
+import { toast } from "sonner";
 import { Streamdown } from "streamdown";
 import { remarkCitations } from "../lib/remark-citations.js";
 import { cn } from "../lib/utils.js";
+import { Action, Actions } from "./Actions.js";
 import { CitationChip } from "./CitationChip.js";
 const logger = createLogger("Response", "debug");
+function escapeCsvCell(value) {
+    // Escape double quotes by doubling them, and wrap in quotes if needed.
+    const mustQuote = /[",\n\r]/.test(value);
+    const escaped = value.replaceAll('"', '""');
+    return mustQuote ? `"${escaped}"` : escaped;
+}
+function tableToCsv(table) {
+    const rows = Array.from(table.querySelectorAll("tr"));
+    return rows
+        .map((row) => {
+        const cells = Array.from(row.querySelectorAll("th,td"));
+        return cells
+            .map((cell) => escapeCsvCell((cell.textContent || "").trim()))
+            .join(",");
+    })
+        .join("\n");
+}
+function downloadTextFile(filename, content, mime) {
+    const blob = new Blob([content], { type: mime });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}
+function TableWithActions(tableProps) {
+    const { className, ...rest } = tableProps;
+    const tableRef = React.useRef(null);
+    const [isCopied, setIsCopied] = React.useState(false);
+    const handleCopy = React.useCallback(async () => {
+        const table = tableRef.current;
+        if (!table)
+            return;
+        try {
+            const csv = tableToCsv(table);
+            await navigator.clipboard.writeText(csv);
+            setIsCopied(true);
+            toast.success("Copied table as CSV");
+            setTimeout(() => setIsCopied(false), 1500);
+        }
+        catch {
+            toast.error("Failed to copy table");
+        }
+    }, []);
+    const handleDownload = React.useCallback(() => {
+        const table = tableRef.current;
+        if (!table)
+            return;
+        const csv = tableToCsv(table);
+        downloadTextFile("table.csv", csv, "text/csv;charset=utf-8");
+        toast.success("Downloaded table.csv");
+    }, []);
+    return (_jsxs("div", { className: "group/table", children: [
+            _jsx("div", { className: "overflow-x-auto", children: _jsx("table", { ref: tableRef, className: cn("min-w-full border-collapse border border-border rounded-md", className), ...rest }) }), _jsxs(Actions, { className: cn("mt-2 flex justify-end", "opacity-0 group-hover/table:opacity-100 transition-opacity", 
+                // Keep layout stable and avoid accidental clicks when hidden
+                "pointer-events-none group-hover/table:pointer-events-auto"), children: [
+                    _jsx(Action, { onClick: handleCopy, tooltip: isCopied ? "Copied!" : "Copy", children: isCopied ? (_jsx(Check, { className: "size-4" })) : (_jsx(Copy, { className: "size-4" })) }), _jsx(Action, { onClick: handleDownload, tooltip: "Download CSV", children: _jsx(Download, { className: "size-4" }) })
+                ] })
+        ] }));
+}
 export const Response = React.memo(React.forwardRef(({ content, isStreaming = false, showEmpty = true, emptyMessage = "", sources = [], messageId, citationIndexOffset = 0, className, ...props }, ref) => {
     // State to force remount when sources change
     const [remountKey, setRemountKey] = React.useState(0);
@@ -41,6 +107,11 @@ export const Response = React.memo(React.forwardRef(({ content, isStreaming = fa
         // running local index + the provided chunk offset.
         const citationCounter = { current: 0 };
         return {
+            table: (props) => (_jsx(TableWithActions, { ...props })),
+            thead: (props) => (_jsx("thead", { className: cn("bg-card border-b border-border", props.className), ...props })),
+            tr: (props) => (_jsx("tr", { className: cn("border-b border-border hover:bg-card transition-colors", props.className), ...props })),
+            th: (props) => (_jsx("th", { className: cn("px-4 py-2 text-left font-semibold text-foreground border-r border-border last:border-r-0", props.className), ...props })),
+            td: (props) => (_jsx("td", { className: cn("px-4 py-2 text-foreground border-r border-border last:border-r-0", props.className), ...props })),
             // Custom span component that intercepts citation markers
             // The remark-citations plugin creates spans with class "citation-marker"
             // and data-citation-id attribute

package/dist/gui/components/ToolCall.js

@@ -44,15 +44,7 @@ export function ToolCall({ toolCall }) {
     const { resolvedTheme } = useTheme();
     // Detect TodoWrite tool and subagent
     const isTodoWrite = toolCall.title === "todo_write";
-    // A subagent call can be detected by:
-    // - Live: has port and sessionId (but no stored messages yet)
-    // - Replay: has stored subagentMessages
-    const hasLiveSubagent = !!(toolCall.subagentPort && toolCall.subagentSessionId);
-    const hasStoredSubagent = !!(toolCall.subagentMessages && toolCall.subagentMessages.length > 0);
-    const isSubagentCall = hasLiveSubagent || hasStoredSubagent;
-    // Use replay mode if we have stored messages - they should take precedence
-    // over trying to connect to SSE (which won't work for replayed sessions)
-    const isReplaySubagent = hasStoredSubagent;
+    const isSubagentCall = !!(toolCall.subagentPort && toolCall.subagentSessionId);
     // Safely access ChatLayout context - will be undefined if not within ChatLayout
     const layoutContext = React.useContext(ChatLayout.Context);
     // Click handler: toggle sidepanel for TodoWrite, subagent details for subagents, expand for others
@@ -147,7 +139,7 @@ export function ToolCall({ toolCall }) {
     if (isPreliminary) {
         return (_jsx("div", { className: "flex flex-col my-4", children: _jsxs("span", { className: "text-paragraph-sm text-muted-foreground/50", children: ["Invoking ", displayName] }) }));
     }
-    return (_jsxs("div", { className: "flex flex-col my-4", children: [_jsxs("button", { type: "button", className: "flex flex-col items-start gap-0.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: handleHeaderClick, "aria-expanded": isTodoWrite ? undefined : isExpanded, children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [_jsx("div", { className: iconColorClass, title: statusTooltip, children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground", children: displayName }), hasError && _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }), isTodoWrite ? (_jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground/70" })) : (_jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` }))] }), toolCall.subline && (_jsx("span", { className: "text-paragraph-sm text-muted-foreground/70 pl-4.5", children: toolCall.subline }))] }), !isTodoWrite && isSubagentCall && (_jsx("div", { className: "pl-4.5", children: _jsx(SubAgentDetails, { port: toolCall.subagentPort, sessionId: toolCall.subagentSessionId, parentStatus: toolCall.status, agentName: toolCall.rawInput?.agentName, query: toolCall.rawInput?.query, isExpanded: isSubagentExpanded, onExpandChange: setIsSubagentExpanded, storedMessages: toolCall.subagentMessages, isReplay: isReplaySubagent }) })), !isTodoWrite && !isSubagentCall && isExpanded && (_jsxs("div", { className: "mt-2 text-sm border border-border rounded-lg bg-card overflow-hidden w-full", children: [toolCall.rawInput &&
+    return (_jsxs("div", { className: "flex flex-col my-4", children: [_jsxs("button", { type: "button", className: "flex flex-col items-start gap-0.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: handleHeaderClick, "aria-expanded": isTodoWrite ? undefined : isExpanded, children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [_jsx("div", { className: iconColorClass, title: statusTooltip, children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground", children: displayName }), hasError && _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }), isTodoWrite ? (_jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground/70" })) : (_jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` }))] }), toolCall.subline && (_jsx("span", { className: "text-paragraph-sm text-muted-foreground/70 pl-4.5", children: toolCall.subline }))] }), !isTodoWrite && isSubagentCall && (_jsx("div", { className: "pl-4.5", children: _jsx(SubAgentDetails, { port: toolCall.subagentPort, sessionId: toolCall.subagentSessionId, parentStatus: toolCall.status, agentName: toolCall.rawInput?.agentName, query: toolCall.rawInput?.query, isExpanded: isSubagentExpanded, onExpandChange: setIsSubagentExpanded }) })), !isTodoWrite && !isSubagentCall && isExpanded && (_jsxs("div", { className: "mt-2 text-sm border border-border rounded-lg bg-card overflow-hidden w-full", children: [toolCall.rawInput &&
                         Object.keys(toolCall.rawInput).length > 0 &&
                         !toolCall.subagentPort && (_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsx("div", { className: "text-[11px] font-mono text-foreground", children: _jsx(JsonView, { value: toolCall.rawInput, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: jsonStyle }) })] })), toolCall.locations && toolCall.locations.length > 0 && (_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Files" }), _jsx("ul", { className: "space-y-1", children: toolCall.locations.map((loc) => (_jsxs("li", { className: "font-mono text-[11px] text-foreground bg-muted px-1.5 py-0.5 rounded w-fit", children: [loc.path, loc.line !== null &&
                                             loc.line !== undefined &&

package/dist/gui/components/ToolOperation.js

@@ -241,7 +241,7 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
     const displayText = getDisplayText();
     // For preliminary/selecting states, show simple non-expandable text
     if (isSelecting && !isGrouped) {
-        return (_jsx("div", { className: "flex flex-col my-4 rounded-md px-1 -mx-1 w-fit", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [
+        return (_jsx("div", { className: "flex flex-col rounded-md px-1 -mx-1 w-fit", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [
                     _jsx("div", { className: "text-text-secondary/70", children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsxs("span", { className: "text-paragraph-xs text-text-muted", children: [displayText, singleToolCall?.startedAt && (_jsx(RunningDuration, { startTime: singleToolCall.startedAt, isRunning: !singleToolCall.subagentCompleted }))] })
                 ] }) }));
     }
@@ -258,14 +258,14 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
         })();
         // Check if all tool calls in the group are completed
         const allCompleted = toolCalls.every((tc) => tc.subagentCompleted);
-        return (_jsxs("div", { className: "flex flex-col my-4 rounded-md px-1 -mx-1 w-fit", children: [
+        return (_jsxs("div", { className: "flex flex-col rounded-md px-1 -mx-1 w-fit", children: [
                 _jsxs("div", { className: "flex items-center gap-1.5", children: [
                         _jsx("div", { className: "text-text-secondary/70", children: _jsx(ListVideo, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-text-secondary/70", children: "Selecting tools" }), selectingStartTime && (_jsx(RunningDuration, { startTime: selectingStartTime, isRunning: !allCompleted })), _jsx("span", { className: "text-[10px] bg-muted px-1.5 py-0.5 rounded text-text-secondary/70", children: toolCalls.length })
                     ] }), _jsx("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: displayText })
             ] }));
     }
     // Full display (for single tool call or expanded group, includes minimized state)
-    return (_jsxs("div", { className: "flex flex-col my-4", children: [
+    return (_jsxs("div", { className: "flex flex-col", children: [
             _jsxs("button", { type: "button", className: "flex flex-col items-start gap-0.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit rounded-md px-1 -mx-1", onClick: handleHeaderClick, "aria-expanded": isTodoWrite ? undefined : isExpanded, children: [
                     _jsxs("div", { className: "flex items-center gap-1.5", children: [
                             _jsx("div", { className: "text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsxs("span", { className: "text-paragraph-sm text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: [isGrouped && _jsx("span", { className: "mr-1", children: "Parallel operation" }), !isGrouped && displayText] }), isSubagentCall && (_jsx(ContextUsageIndicator, { contextSize: subagentHeaderContextSize, size: 12, className: "text-text-secondary/70 group-hover:text-text-secondary transition-colors" })), !isGrouped &&
@@ -331,7 +331,7 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
                             return null;
                         })()] }), !isTodoWrite && isSubagentCall && singleToolCall && (_jsx("div", { className: "pl-4.5 mt-2", children: _jsx(SubAgentDetails, { parentStatus: singleToolCall.status, agentName: singleToolCall.rawInput?.agentName, query: singleToolCall.rawInput?.query, isExpanded: isSubagentExpanded, onExpandChange: setIsSubagentExpanded, storedMessages: singleToolCall.subagentMessages }) })), !isTodoWrite && isExpanded && (_jsx("div", { className: "mt-1", children: isGrouped ? (
                 // Render individual tool calls in group
-                _jsx("div", { className: "flex flex-col gap-4 mt-2", children: toolCalls.map((toolCall) => {
+                _jsx("div", { className: "flex flex-col gap-2 mt-1", children: toolCalls.map((toolCall) => {
                         const hookNotification = hookNotifications.find((n) => n.toolCallId === toolCall.id);
                         return (_jsx(GroupedToolCallItem, { toolCall: toolCall, ...(hookNotification ? { hookNotification } : {}) }, toolCall.id));
                     }) })) : (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.116",
+  "version": "0.1.118",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -49,7 +49,7 @@
     "@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.94",
+    "@townco/core": "0.0.96",
     "@types/mdast": "^4.0.4",
     "@uiw/react-json-view": "^2.0.0-alpha.39",
     "class-variance-authority": "^0.7.1",
@@ -67,7 +67,7 @@
     "zustand": "^5.0.8"
   },
   "devDependencies": {
-    "@townco/tsconfig": "0.1.113",
+    "@townco/tsconfig": "0.1.115",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "@types/unist": "^3.0.3",

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

@@ -1,23 +0,0 @@
-export interface SubagentStreamProps {
-    /** Sub-agent HTTP port */
-    port: number;
-    /** Sub-agent session ID */
-    sessionId: string;
-    /** Optional host (defaults to localhost) */
-    host?: string;
-    /** Parent tool call status - use this to determine if sub-agent is running */
-    parentStatus?: "pending" | "in_progress" | "completed" | "failed";
-    /** Sub-agent name (for display) */
-    agentName?: string | undefined;
-    /** Query sent to the sub-agent */
-    query?: string | undefined;
-}
-/**
- * SubagentStream component - displays streaming content from a sub-agent.
- *
- * This component:
- * - Connects directly to the sub-agent's SSE endpoint
- * - Displays streaming text and tool calls
- * - Renders in a collapsible section (collapsed by default)
- */
-export declare function SubagentStream({ port, sessionId, host, parentStatus, agentName, query, }: SubagentStreamProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/SubagentStream.js

@@ -1,98 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown, CircleDot, Loader2 } from "lucide-react";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useSubagentStream } from "../../core/hooks/use-subagent-stream.js";
-const SCROLL_THRESHOLD = 50; // px from bottom to consider "at bottom"
-/**
- * SubagentStream component - displays streaming content from a sub-agent.
- *
- * This component:
- * - Connects directly to the sub-agent's SSE endpoint
- * - Displays streaming text and tool calls
- * - Renders in a collapsible section (collapsed by default)
- */
-export function SubagentStream({ port, sessionId, host, parentStatus, agentName, query, }) {
-    const [isExpanded, setIsExpanded] = useState(false); // Start collapsed for parallel ops
-    const [isThinkingExpanded, setIsThinkingExpanded] = useState(true);
-    const [isNearBottom, setIsNearBottom] = useState(true);
-    const thinkingContainerRef = useRef(null);
-    const { messages, isStreaming: hookIsStreaming, error } = useSubagentStream({
-        port,
-        sessionId,
-        ...(host !== undefined ? { host } : {}),
-    });
-    // Use parent status as primary indicator, fall back to hook's streaming state
-    // Parent is "in_progress" means sub-agent is definitely still running
-    const isRunning = parentStatus === "in_progress" || parentStatus === "pending" || hookIsStreaming;
-    // Get the current/latest message
-    const currentMessage = messages[messages.length - 1];
-    const hasContent = currentMessage &&
-        (currentMessage.content ||
-            (currentMessage.toolCalls && currentMessage.toolCalls.length > 0));
-    // Auto-collapse Thinking when completed (so Output is the primary view)
-    const prevIsRunningRef = useRef(isRunning);
-    useEffect(() => {
-        if (prevIsRunningRef.current && !isRunning) {
-            // Just completed - collapse thinking to show output
-            setIsThinkingExpanded(false);
-        }
-        prevIsRunningRef.current = isRunning;
-    }, [isRunning]);
-    // Check if user is near bottom of scroll area
-    const checkScrollPosition = useCallback(() => {
-        const container = thinkingContainerRef.current;
-        if (!container)
-            return;
-        const { scrollTop, scrollHeight, clientHeight } = container;
-        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-        setIsNearBottom(distanceFromBottom < SCROLL_THRESHOLD);
-    }, []);
-    // Scroll to bottom
-    const scrollToBottom = useCallback(() => {
-        const container = thinkingContainerRef.current;
-        if (!container)
-            return;
-        container.scrollTop = container.scrollHeight;
-    }, []);
-    // Auto-scroll when content changes and user is near bottom
-    useEffect(() => {
-        if (isNearBottom && (isRunning || hasContent)) {
-            scrollToBottom();
-        }
-    }, [currentMessage?.content, currentMessage?.toolCalls, isNearBottom, isRunning, hasContent, scrollToBottom]);
-    // Set up scroll listener
-    useEffect(() => {
-        const container = thinkingContainerRef.current;
-        if (!container)
-            return;
-        const handleScroll = () => checkScrollPosition();
-        container.addEventListener("scroll", handleScroll, { passive: true });
-        checkScrollPosition(); // Check initial position
-        return () => container.removeEventListener("scroll", handleScroll);
-    }, [checkScrollPosition, isThinkingExpanded, isExpanded]);
-    // Get last line of streaming content for preview
-    const lastLine = currentMessage?.content
-        ? currentMessage.content.split("\n").filter(Boolean).pop() || ""
-        : "";
-    const previewText = lastLine.length > 100 ? `${lastLine.slice(0, 100)}...` : lastLine;
-    return (_jsxs("div", { children: [!isExpanded && (_jsx("button", { type: "button", onClick: () => setIsExpanded(true), className: "w-full max-w-md text-left cursor-pointer bg-transparent border-none p-0", children: previewText ? (_jsx("p", { className: `text-paragraph-sm text-muted-foreground truncate ${isRunning ? "animate-pulse" : ""}`, children: previewText })) : isRunning ? (_jsx("p", { className: "text-paragraph-sm text-muted-foreground/50 italic animate-pulse", children: "Waiting for response..." })) : null })), isExpanded && (_jsxs("div", { className: "space-y-3", children: [(agentName || query) && (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsxs("div", { className: "text-[11px] font-mono space-y-1", children: [agentName && (_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "agentName: " }), _jsx("span", { className: "text-foreground", children: agentName })] })), query && (_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "query: " }), _jsx("span", { className: "text-foreground", children: query })] }))] })] })), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setIsThinkingExpanded(!isThinkingExpanded), className: "flex items-center gap-2 cursor-pointer bg-transparent border-none p-0 text-left group", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider font-sans", children: "Thinking" }), _jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isThinkingExpanded ? "rotate-180" : ""}` })] }), isThinkingExpanded && (_jsxs("div", { ref: thinkingContainerRef, className: "mt-2 rounded-md overflow-hidden bg-muted/30 border border-border/50 max-h-[200px] overflow-y-auto", children: [error && (_jsxs("div", { className: "px-2 py-2 text-[11px] text-destructive", children: ["Error: ", error] })), !error && !hasContent && isRunning && (_jsx("div", { className: "px-2 py-2 text-[11px] text-muted-foreground", children: "Waiting for sub-agent response..." })), currentMessage && (_jsxs("div", { className: "px-2 py-2 space-y-2", children: [currentMessage.toolCalls &&
-                                                currentMessage.toolCalls.length > 0 && (_jsx("div", { className: "space-y-1", children: currentMessage.toolCalls.map((tc) => (_jsx(SubagentToolCallItem, { toolCall: tc }, tc.id))) })), currentMessage.content && (_jsxs("div", { className: "text-[11px] text-foreground whitespace-pre-wrap font-mono", children: [currentMessage.content, currentMessage.isStreaming && (_jsx("span", { className: "inline-block w-1.5 h-3 bg-primary/70 ml-0.5 animate-pulse" }))] }))] }))] }))] }), !isRunning && currentMessage?.content && (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Output" }), _jsx("div", { className: "text-[11px] text-foreground whitespace-pre-wrap font-mono max-h-[200px] overflow-y-auto rounded-md bg-muted/30 border border-border/50 px-2 py-2", children: currentMessage.content })] }))] }))] }));
-}
-/**
- * Simple tool call display for sub-agent tool calls
- */
-function SubagentToolCallItem({ toolCall }) {
-    const statusIcon = {
-        pending: "...",
-        in_progress: "",
-        completed: "",
-        failed: "",
-    }[toolCall.status];
-    const statusColor = {
-        pending: "text-muted-foreground",
-        in_progress: "text-blue-500",
-        completed: "text-green-500",
-        failed: "text-destructive",
-    }[toolCall.status];
-    return (_jsxs("div", { className: "flex items-center gap-2 text-[10px] text-muted-foreground", children: [_jsx("span", { className: statusColor, children: statusIcon }), _jsx("span", { className: "font-medium", children: toolCall.prettyName || toolCall.title }), toolCall.status === "in_progress" && (_jsx(Loader2, { className: "h-2.5 w-2.5 animate-spin" }))] }));
-}