@townco/ui 0.1.133 → 0.1.135

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

@@ -228,7 +228,7 @@ export declare function useChatMessages(client: AcpClient | null, startSession:
         }[] | undefined;
         sources?: {
             id: string;
-            url: string;
+            url?: string | undefined;
             title: string;
             snippet?: string | undefined;
             favicon?: string | undefined;

package/dist/core/schemas/chat.d.ts

@@ -312,7 +312,7 @@ export declare const DisplayMessage: z.ZodObject<{
     }, z.core.$strip>>>;
     sources: z.ZodOptional<z.ZodArray<z.ZodObject<{
         id: z.ZodString;
-        url: z.ZodString;
+        url: z.ZodOptional<z.ZodString>;
         title: z.ZodString;
         snippet: z.ZodOptional<z.ZodString>;
         favicon: z.ZodOptional<z.ZodString>;
@@ -607,7 +607,7 @@ export declare const ChatSessionState: z.ZodObject<{
         }, z.core.$strip>>>;
         sources: z.ZodOptional<z.ZodArray<z.ZodObject<{
             id: z.ZodString;
-            url: z.ZodString;
+            url: z.ZodOptional<z.ZodString>;
             title: z.ZodString;
             snippet: z.ZodOptional<z.ZodString>;
             favicon: z.ZodOptional<z.ZodString>;

package/dist/core/schemas/source.d.ts

@@ -4,7 +4,7 @@ import { z } from "zod";
  */
 export declare const SourceSchema: z.ZodObject<{
     id: z.ZodString;
-    url: z.ZodString;
+    url: z.ZodOptional<z.ZodString>;
     title: z.ZodString;
     snippet: z.ZodOptional<z.ZodString>;
     favicon: z.ZodOptional<z.ZodString>;

package/dist/core/schemas/source.js

@@ -5,8 +5,8 @@ import { z } from "zod";
 export const SourceSchema = z.object({
     /** Unique identifier for LLM reference (e.g., "1", "2") */
     id: z.string(),
-    /** The URL of the source */
-    url: z.string().url(),
+    /** The URL of the source (optional for backward compatibility with sessions that have missing URLs) */
+    url: z.string().optional(),
     /** Title of the source page/article */
     title: z.string(),
     /** Optional snippet/excerpt from the source */

package/dist/gui/components/ChatView.js

@@ -144,7 +144,7 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
                     byId.set(source.id, {
                         id: source.id,
                         title: source.title,
-                        url: source.url,
+                        url: source.url || "",
                         snippet: source.snippet || "",
                         sourceName: source.sourceName || "",
                         favicon: source.favicon || "",

package/dist/gui/components/CitationChip.js

@@ -39,7 +39,7 @@ export const CitationChip = React.forwardRef(({ sourceId, sources, className },
     if (!source) {
         return (_jsxs("span", { ref: ref, className: cn("inline-flex items-center px-1.5 py-0.5 text-xs font-medium", "bg-muted text-muted-foreground rounded-md", "cursor-default", className), children: ["[", sourceId, "]"] }));
     }
-    const domain = source.sourceName || getDomain(source.url);
+    const domain = source.sourceName || (source.url ? getDomain(source.url) : "");
     return (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [
                 _jsx(TooltipTrigger, { asChild: true, children: _jsxs("span", { ref: ref, role: "button", tabIndex: 0, onClick: handleClick, onKeyDown: (e) => {
                             if (e.key === "Enter" || e.key === " ") {

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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,98 @@
+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" }))] }));
+}

package/dist/gui/components/ToolCall.js

@@ -44,7 +44,15 @@ export function ToolCall({ toolCall }) {
     const { resolvedTheme } = useTheme();
     // Detect TodoWrite tool and subagent
     const isTodoWrite = toolCall.title === "todo_write";
-    const isSubagentCall = !!(toolCall.subagentPort && toolCall.subagentSessionId);
+    // 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;
     // 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
@@ -139,7 +147,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 }) })), !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, 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 &&
                         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/sdk/schemas/message.d.ts

@@ -411,7 +411,7 @@ export type HookNotificationChunk = z.infer<typeof HookNotificationChunk>;
  */
 export declare const CitationSource: z.ZodObject<{
     id: z.ZodString;
-    url: z.ZodString;
+    url: z.ZodOptional<z.ZodString>;
     title: z.ZodString;
     snippet: z.ZodOptional<z.ZodString>;
     favicon: z.ZodOptional<z.ZodString>;
@@ -426,7 +426,7 @@ export declare const SourcesChunk: z.ZodObject<{
     type: z.ZodLiteral<"sources">;
     sources: z.ZodArray<z.ZodObject<{
         id: z.ZodString;
-        url: z.ZodString;
+        url: z.ZodOptional<z.ZodString>;
         title: z.ZodString;
         snippet: z.ZodOptional<z.ZodString>;
         favicon: z.ZodOptional<z.ZodString>;
@@ -553,7 +553,7 @@ export declare const MessageChunk: z.ZodDiscriminatedUnion<[z.ZodObject<{
     type: z.ZodLiteral<"sources">;
     sources: z.ZodArray<z.ZodObject<{
         id: z.ZodString;
-        url: z.ZodString;
+        url: z.ZodOptional<z.ZodString>;
         title: z.ZodString;
         snippet: z.ZodOptional<z.ZodString>;
         favicon: z.ZodOptional<z.ZodString>;

package/dist/sdk/schemas/message.js

@@ -214,7 +214,7 @@ export const HookNotificationChunk = z.object({
  */
 export const CitationSource = z.object({
     id: z.string(),
-    url: z.string().url(),
+    url: z.string().optional(), // Optional for backward compatibility with sessions that have missing URLs
     title: z.string(),
     snippet: z.string().optional(),
     favicon: z.string().optional(),

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

@@ -758,7 +758,7 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     type: z.ZodLiteral<"sources">;
     sources: z.ZodArray<z.ZodObject<{
         id: z.ZodString;
-        url: z.ZodString;
+        url: z.ZodOptional<z.ZodString>;
         title: z.ZodString;
         snippet: z.ZodOptional<z.ZodString>;
         favicon: z.ZodOptional<z.ZodString>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.133",
+  "version": "0.1.135",
   "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.111",
+    "@townco/core": "0.0.113",
     "@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.130",
+    "@townco/tsconfig": "0.1.132",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "@types/unist": "^3.0.3",