@townco/ui 0.1.109 → 0.1.111

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

@@ -21,7 +21,7 @@ export function useChatMessages(client, startSession) {
     const addToolCallToCurrentMessage = useChatStore((state) => state.addToolCallToCurrentMessage);
     const updateToolCallInCurrentMessage = useChatStore((state) => state.updateToolCallInCurrentMessage);
     const addHookNotificationToCurrentMessage = useChatStore((state) => state.addHookNotificationToCurrentMessage);
-    const addSourcesToCurrentMessage = useChatStore((state) => state.addSourcesToCurrentMessage);
+    const addSourcesByToolCallId = useChatStore((state) => state.addSourcesByToolCallId);
     const truncateMessagesFrom = useChatStore((state) => state.truncateMessagesFrom);
     // Track the current assistant message ID for cancellation
     const currentAssistantMessageIdRef = useRef(null);
@@ -206,7 +206,7 @@ export function useChatMessages(client, startSession) {
                     // Sources chunk - citation sources from tool calls
                     logger.debug("Received sources chunk", { chunk });
                     // Add sources to current assistant message for citation rendering
-                    addSourcesToCurrentMessage(chunk.sources);
+                    addSourcesByToolCallId(chunk.sources);
                 }
             }
             // Ensure streaming state is cleared even if no explicit isComplete was received
@@ -259,7 +259,7 @@ export function useChatMessages(client, startSession) {
         addToolCallToCurrentMessage,
         updateToolCallInCurrentMessage,
         addHookNotificationToCurrentMessage,
-        addSourcesToCurrentMessage,
+        addSourcesByToolCallId,
     ]);
     /**
      * Cancel the current agent turn
@@ -446,7 +446,7 @@ export function useChatMessages(client, startSession) {
                 }
                 else if (chunk.type === "sources") {
                     logger.debug("Received sources chunk", { chunk });
-                    addSourcesToCurrentMessage(chunk.sources);
+                    addSourcesByToolCallId(chunk.sources);
                 }
             }
             if (!streamCompleted) {
@@ -497,7 +497,7 @@ export function useChatMessages(client, startSession) {
         addToolCallToCurrentMessage,
         updateToolCallInCurrentMessage,
         addHookNotificationToCurrentMessage,
-        addSourcesToCurrentMessage,
+        addSourcesByToolCallId,
     ]);
     return {
         messages,

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

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

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

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

package/dist/core/hooks/use-tool-calls.js

@@ -1,7 +1,7 @@
 import { createLogger } from "@townco/core";
 import { useEffect } from "react";
 import { useChatStore } from "../store/chat-store.js";
-const _logger = createLogger("use-tool-calls", "debug");
+const logger = createLogger("use-tool-calls", "debug");
 /**
  * Hook to track and manage tool calls from ACP sessions
  *
@@ -16,23 +16,46 @@ export function useToolCalls(client) {
     const updateToolCall = useChatStore((state) => state.updateToolCall);
     const addToolCallToCurrentMessage = useChatStore((state) => state.addToolCallToCurrentMessage);
     const updateToolCallInCurrentMessage = useChatStore((state) => state.updateToolCallInCurrentMessage);
+    const addSourcesByToolCallId = useChatStore((state) => state.addSourcesByToolCallId);
     useEffect(() => {
         if (!client)
             return;
+        logger.info("useToolCalls: subscribing to session updates");
         // Subscribe to session updates for tool calls
         const unsubscribe = client.onSessionUpdate((update) => {
+            logger.info("useToolCalls: received session update", {
+                type: update.type,
+                sessionId: update.sessionId,
+            });
             if (update.type === "tool_call") {
+                logger.info("useToolCalls: processing tool_call", {
+                    toolCallId: update.toolCall.id,
+                    title: update.toolCall.title,
+                });
                 // Add to session-level tool calls (for sidebar)
                 addToolCall(update.sessionId, update.toolCall);
                 // Also add to current assistant message (for inline display)
                 addToolCallToCurrentMessage(update.toolCall);
             }
             else if (update.type === "tool_call_update") {
+                logger.info("useToolCalls: processing tool_call_update", {
+                    toolCallId: update.toolCallUpdate.id,
+                });
                 // Update session-level tool calls (for sidebar)
                 updateToolCall(update.sessionId, update.toolCallUpdate);
                 // Also update in current assistant message (for inline display)
                 updateToolCallInCurrentMessage(update.toolCallUpdate);
             }
+            else if (update.type === "sources") {
+                logger.info("useToolCalls: processing sources", {
+                    sourcesCount: update.sources.length,
+                    sourceIds: update.sources.map((s) => s.id),
+                    toolCallIds: update.sources.map((s) => s.toolCallId),
+                });
+                // Distribute sources to the correct messages based on toolCallId
+                // This handles sources restored during session replay
+                addSourcesByToolCallId(update.sources);
+            }
         });
         return () => {
             unsubscribe();
@@ -43,6 +66,7 @@ export function useToolCalls(client) {
         updateToolCall,
         addToolCallToCurrentMessage,
         updateToolCallInCurrentMessage,
+        addSourcesByToolCallId,
     ]);
     return {
         toolCalls,

package/dist/core/store/chat-store.d.ts

@@ -33,6 +33,7 @@ export interface ChatStore {
     messages: DisplayMessage[];
     isStreaming: boolean;
     streamingStartTime: number | null;
+    sources: Source[];
     toolCalls: Record<string, ToolCall[]>;
     totalBilled: {
         inputTokens: number;
@@ -56,6 +57,7 @@ export interface ChatStore {
     addMessage: (message: DisplayMessage) => void;
     updateMessage: (id: string, updates: Partial<DisplayMessage>) => void;
     clearMessages: () => void;
+    addSources: (sources: Source[]) => void;
     setIsStreaming: (streaming: boolean) => void;
     setStreamingStartTime: (time: number | null) => void;
     addToolCall: (sessionId: string, toolCall: ToolCall) => void;
@@ -64,6 +66,7 @@ export interface ChatStore {
     updateToolCallInCurrentMessage: (update: ToolCallUpdate) => void;
     addHookNotificationToCurrentMessage: (notification: HookNotification) => void;
     addSourcesToCurrentMessage: (sources: Source[]) => void;
+    addSourcesByToolCallId: (sources: Source[]) => void;
     setInputValue: (value: string) => void;
     setInputSubmitting: (submitting: boolean) => void;
     addFileAttachment: (file: InputState["attachedFiles"][number]) => void;

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

@@ -99,6 +99,7 @@ export const useChatStore = create((set) => ({
     messages: [],
     isStreaming: false,
     streamingStartTime: null,
+    sources: [],
     toolCalls: {},
     totalBilled: {
         inputTokens: 0,
@@ -229,7 +230,18 @@ export const useChatStore = create((set) => ({
             currentContext: newCurrentContext,
         };
     }),
-    clearMessages: () => set({ messages: [] }),
+    clearMessages: () => set({ messages: [], sources: [] }),
+    addSources: (incomingSources) => set((state) => {
+        if (!incomingSources || incomingSources.length === 0)
+            return state;
+        // Merge/dedupe by source id (ids are globally unique within a session)
+        const byId = new Map();
+        for (const s of state.sources)
+            byId.set(s.id, s);
+        for (const s of incomingSources)
+            byId.set(s.id, s);
+        return { sources: Array.from(byId.values()) };
+    }),
     setIsStreaming: (streaming) => set({ isStreaming: streaming }),
     setStreamingStartTime: (time) => set({ streamingStartTime: time }),
     addToolCall: (sessionId, toolCall) => set((state) => ({
@@ -421,7 +433,16 @@ export const useChatStore = create((set) => ({
                 isStreaming: false,
                 sources,
             };
-            return { messages: [...state.messages, newMessage] };
+            // Also store in session-level sources
+            const byId = new Map();
+            for (const s of state.sources)
+                byId.set(s.id, s);
+            for (const s of sources)
+                byId.set(s.id, s);
+            return {
+                messages: [...state.messages, newMessage],
+                sources: [...byId.values()],
+            };
         }
         const messages = [...state.messages];
         const lastAssistantMsg = messages[lastAssistantIndex];
@@ -436,7 +457,117 @@ export const useChatStore = create((set) => ({
             sourcesCount: sources.length,
             totalSources: (lastAssistantMsg.sources?.length || 0) + sources.length,
         });
-        return { messages };
+        // Also store in session-level sources
+        const byId = new Map();
+        for (const s of state.sources)
+            byId.set(s.id, s);
+        for (const s of sources)
+            byId.set(s.id, s);
+        return { messages, sources: [...byId.values()] };
+    }),
+    addSourcesByToolCallId: (sources) => set((state) => {
+        logger.info("addSourcesByToolCallId called", {
+            sourcesCount: sources.length,
+            messagesCount: state.messages.length,
+            sourceDetails: sources.map((s) => ({
+                id: s.id,
+                toolCallId: s.toolCallId,
+                title: s.title?.slice(0, 30),
+            })),
+        });
+        // Log all messages and their tool calls for debugging
+        logger.info("Current messages state", {
+            messages: state.messages.map((m, i) => ({
+                index: i,
+                role: m.role,
+                contentLength: m.content?.length || 0,
+                toolCallIds: m.toolCalls?.map((tc) => tc.id) || [],
+                existingSources: m.sources?.length || 0,
+            })),
+        });
+        // Group sources by toolCallId
+        const sourcesByToolCallId = new Map();
+        for (const source of sources) {
+            if (!source.toolCallId) {
+                logger.warn("Source missing toolCallId", { sourceId: source.id });
+                continue;
+            }
+            const existing = sourcesByToolCallId.get(source.toolCallId) || [];
+            existing.push(source);
+            sourcesByToolCallId.set(source.toolCallId, existing);
+        }
+        if (sourcesByToolCallId.size === 0) {
+            logger.warn("No sources with toolCallId to distribute");
+            return state;
+        }
+        // Find messages containing tool calls with matching IDs and add sources
+        const messages = [...state.messages];
+        let sourcesAdded = 0;
+        for (const [toolCallId, toolCallSources] of sourcesByToolCallId) {
+            // Find the message containing this tool call
+            const messageIndex = messages.findIndex((msg) => msg.role === "assistant" &&
+                msg.toolCalls?.some((tc) => tc.id === toolCallId));
+            logger.info("Looking for message with toolCallId", {
+                toolCallId,
+                foundIndex: messageIndex,
+                sourcesCount: toolCallSources.length,
+            });
+            if (messageIndex !== -1) {
+                const msg = messages[messageIndex];
+                if (msg) {
+                    messages[messageIndex] = {
+                        ...msg,
+                        sources: [...(msg.sources || []), ...toolCallSources],
+                    };
+                    sourcesAdded += toolCallSources.length;
+                    logger.info("Added sources to message", {
+                        messageIndex,
+                        messageId: msg.id,
+                        toolCallId,
+                        sourcesAdded: toolCallSources.length,
+                        totalSourcesNow: messages[messageIndex]?.sources?.length,
+                        messageContentPreview: msg.content.slice(0, 100),
+                    });
+                }
+            }
+            else {
+                // Tool call not found in any message - add to last assistant message as fallback
+                logger.warn("Tool call not found in any message, using fallback", {
+                    toolCallId,
+                });
+                const lastAssistantIndex = messages.findLastIndex((msg) => msg.role === "assistant");
+                if (lastAssistantIndex !== -1) {
+                    const msg = messages[lastAssistantIndex];
+                    if (msg) {
+                        messages[lastAssistantIndex] = {
+                            ...msg,
+                            sources: [...(msg.sources || []), ...toolCallSources],
+                        };
+                        sourcesAdded += toolCallSources.length;
+                        logger.info("Added sources to last assistant message (fallback)", {
+                            lastAssistantIndex,
+                            sourcesAdded: toolCallSources.length,
+                        });
+                    }
+                }
+                else {
+                    logger.error("No assistant message found to add sources to");
+                }
+            }
+        }
+        logger.info("Finished distributing sources", {
+            totalSources: sources.length,
+            sourcesAdded,
+            toolCallIds: Array.from(sourcesByToolCallId.keys()),
+        });
+        // Always keep a session-level registry as well, so inline citations can resolve
+        // even if we couldn't associate sources to a specific message during replay.
+        const byId = new Map();
+        for (const s of state.sources)
+            byId.set(s.id, s);
+        for (const s of sources)
+            byId.set(s.id, s);
+        return { messages, sources: [...byId.values()] };
     }),
     updateToolCall: (sessionId, update) => set((state) => {
         const sessionToolCalls = state.toolCalls[sessionId] || [];

package/dist/gui/components/ChatPanelTabContent.js

@@ -5,6 +5,7 @@ import { cn } from "../lib/utils.js";
 import { SandboxFileSystemProvider } from "../providers/SandboxFileSystemProvider.js";
 import { FileSystemView } from "./FileSystemView.js";
 import { SourceListItem } from "./SourceListItem.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs.js";
 import { TodoList } from "./TodoList.js";
 export const TodoTabContent = React.forwardRef(({ todos = [], className, ...props }, ref) => {
     return (_jsx("div", { ref: ref, className: cn("h-full", className), ...props, children: _jsx(TodoList, { todos: todos, className: "h-full" }) }));
@@ -76,13 +77,34 @@ export const FilesTabContent = React.forwardRef(({ files = [], provider, session
 });
 FilesTabContent.displayName = "FilesTabContent";
 export const SourcesTabContent = React.forwardRef(({ sources = [], highlightedSourceId, className, ...props }, ref) => {
+    const { usedSources, consultedSources } = React.useMemo(() => {
+        const used = [];
+        const consulted = [];
+        for (const s of sources) {
+            if (s.usedIn && s.usedIn.length > 0)
+                used.push(s);
+            else
+                consulted.push(s);
+        }
+        return { usedSources: used, consultedSources: consulted };
+    }, [sources]);
+    const defaultSourcesTab = usedSources.length > 0 ? "used" : "consulted";
+    const [activeSourcesTab, setActiveSourcesTab] = React.useState(defaultSourcesTab);
+    // Keep tab selection sensible as sources stream in.
+    React.useEffect(() => {
+        setActiveSourcesTab(defaultSourcesTab);
+    }, [defaultSourcesTab]);
     // Show empty state if no sources
     if (sources.length === 0) {
         return (_jsxs("div", { ref: ref, className: cn("flex flex-col items-center justify-center h-full text-center py-8 max-w-sm mx-auto", className), ...props, children: [
                 _jsx(Globe, { className: "size-8 text-muted-foreground opacity-50 mb-3" }), _jsx("p", { className: "text-paragraph text-muted-foreground", children: "No sources yet" }), _jsx("p", { className: "text-paragraph-sm text-muted-foreground/70 mt-1", children: "Sources will appear when your agent searches the web or fetches data." })
             ] }));
     }
-    return (_jsx("div", { ref: ref, className: cn("space-y-2", className), ...props, children: sources.map((source) => (_jsx(SourceListItem, { source: source, isSelected: source.id === highlightedSourceId }, source.id))) }));
+    return (_jsxs(Tabs, { value: activeSourcesTab, onValueChange: (v) => setActiveSourcesTab(v), className: cn("flex flex-col gap-2", className), children: [
+            _jsx("div", { className: cn("sticky top-0 z-10 -mx-4 -mt-4 mb-4 px-4 bg-card border-b border-border", "before:content-[''] before:absolute before:left-0 before:right-0 before:-top-4 before:h-4 before:bg-card before:pointer-events-none"), children: _jsxs(TabsList, { className: "w-full h-auto p-0 bg-transparent rounded-none justify-start", children: [
+                        _jsxs(TabsTrigger, { value: "used", disabled: usedSources.length === 0, className: cn("flex-1 !text-xs !px-2 !py-2 rounded-none", "bg-transparent shadow-none", "border-b-2 border-transparent -mb-px", "text-muted-foreground hover:text-foreground", "data-[state=active]:bg-transparent data-[state=active]:shadow-none", "data-[state=active]:text-foreground data-[state=active]:border-foreground"), children: ["Referenced (", usedSources.length, ")"] }), _jsxs(TabsTrigger, { value: "consulted", disabled: consultedSources.length === 0, className: cn("flex-1 !text-xs !px-2 !py-2 rounded-none", "bg-transparent shadow-none", "border-b-2 border-transparent -mb-px", "text-muted-foreground hover:text-foreground", "data-[state=active]:bg-transparent data-[state=active]:shadow-none", "data-[state=active]:text-foreground data-[state=active]:border-foreground"), children: ["Reviewed (", consultedSources.length, ")"] })
+                    ] }) }), _jsx(TabsContent, { value: "used", className: "mt-0", children: usedSources.length > 0 ? (_jsx("div", { ref: ref, className: "space-y-2", ...props, children: usedSources.map((source) => (_jsx(SourceListItem, { source: source, isSelected: source.id === highlightedSourceId }, source.id))) })) : (_jsx("div", { ref: ref, className: "text-xs text-muted-foreground", ...props, children: "No referenced sources yet." })) }), _jsx(TabsContent, { value: "consulted", className: "mt-0", children: consultedSources.length > 0 ? (_jsx("div", { ref: ref, className: "space-y-2", ...props, children: consultedSources.map((source) => (_jsx(SourceListItem, { source: source, isSelected: source.id === highlightedSourceId }, source.id))) })) : (_jsx("div", { ref: ref, className: "text-xs text-muted-foreground", ...props, children: "No reviewed sources." })) })
+        ] }));
 });
 SourcesTabContent.displayName = "SourcesTabContent";
 export const DatabaseTabContent = React.forwardRef(({ data, className, ...props }, ref) => {