@townco/ui 0.1.109 → 0.1.111

package/dist/gui/components/ChatView.js

@@ -99,13 +99,49 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
     const todos = useChatStore(selectTodosForCurrentSession);
     const _latestContextSize = useChatStore((state) => state.latestContextSize);
     const { resolvedTheme, setTheme } = useTheme();
+    const citationUsageBySourceId = React.useMemo(() => {
+        const map = new Map();
+        // Match both [[N]] and [N] (while avoiding markdown links/refs), mirroring remark-citations.
+        const citationRegex = /\[\[(\d+)\]\]|\[(\d+)\](?![:(])/g;
+        const stripCode = (markdown) => markdown
+            // fenced code blocks
+            .replace(/```[\s\S]*?```/g, "")
+            // inline code
+            .replace(/`[^`]*`/g, "");
+        for (let messageIndex = 0; messageIndex < messages.length; messageIndex++) {
+            const message = messages[messageIndex];
+            if (!message?.content)
+                continue;
+            const content = stripCode(message.content);
+            citationRegex.lastIndex = 0;
+            let match;
+            let citationIndex = 0; // global citation index within THIS message
+            // biome-ignore lint/suspicious/noAssignInExpressions: Standard regex exec loop pattern
+            while ((match = citationRegex.exec(content)) !== null) {
+                const sourceId = match[1] ?? match[2];
+                if (!sourceId)
+                    continue;
+                const existing = map.get(sourceId) ?? [];
+                existing.push({
+                    messageId: message.id,
+                    messageIndex,
+                    citationIndex,
+                });
+                map.set(sourceId, existing);
+                citationIndex++;
+            }
+        }
+        return map;
+    }, [messages]);
     // Collect all sources from all messages for the sources panel
     const allSources = React.useMemo(() => {
-        const sources = [];
+        const byId = new Map();
         for (const message of messages) {
             if (message.sources) {
                 for (const source of message.sources) {
-                    sources.push({
+                    if (byId.has(source.id))
+                        continue;
+                    byId.set(source.id, {
                         id: source.id,
                         title: source.title,
                         url: source.url,
@@ -116,8 +152,15 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
                 }
             }
         }
-        return sources;
-    }, [messages]);
+        // Attach citation usage info for the Sources sidebar.
+        for (const [sourceId, usedIn] of citationUsageBySourceId.entries()) {
+            const existing = byId.get(sourceId);
+            if (existing) {
+                existing.usedIn = usedIn;
+            }
+        }
+        return Array.from(byId.values());
+    }, [messages, citationUsageBySourceId]);
     // Update document title with agent name and animated dots when streaming
     useDocumentTitle(agentName);
     // Initialize browser logger to capture console output and send to server

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

@@ -0,0 +1,9 @@
+import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
+export interface InvokingGroupProps {
+    toolCalls: ToolCallType[];
+}
+/**
+ * InvokingGroup component - displays a group of preliminary (invoking) tool calls
+ * Shows as "Invoking parallel operation (N)" with a summary of unique tool names
+ */
+export declare function InvokingGroup({ toolCalls }: InvokingGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/InvokingGroup.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ListVideo } from "lucide-react";
+import React from "react";
+/**
+ * InvokingGroup component - displays a group of preliminary (invoking) tool calls
+ * Shows as "Invoking parallel operation (N)" with a summary of unique tool names
+ */
+export function InvokingGroup({ toolCalls }) {
+    // Get unique display names for the summary
+    const displayNames = toolCalls.map((tc) => tc.prettyName || tc.title);
+    const uniqueNames = [...new Set(displayNames)];
+    const summary = uniqueNames.length <= 2
+        ? uniqueNames.join(", ")
+        : `${uniqueNames.slice(0, 2).join(", ")} +${uniqueNames.length - 2} more`;
+    return (_jsxs("div", { className: "flex flex-col my-4", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-paragraph-sm text-muted-foreground/50", children: [_jsx(ListVideo, { className: "h-3 w-3" }), _jsx("span", { children: "Invoking parallel operation" }), _jsx("span", { className: "text-[10px] bg-muted px-1.5 py-0.5 rounded text-muted-foreground/50", children: toolCalls.length })] }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground/50 pl-4.5", children: summary })] }));
+}

package/dist/gui/components/Message.js

@@ -100,7 +100,7 @@ export const Message = React.forwardRef(({ message, role: roleProp, layout, clas
         }
         return undefined;
     }, [role, autoScroll]);
-    return (_jsx("article", { ref: messageRef, "aria-label": `${role} message`, "data-message-id": messageId, className: cn(messageVariants({ role, layout }), className), style: {
+    return (_jsx("article", { ref: messageRef, id: messageId ? `message-${messageId}` : undefined, "aria-label": `${role} message`, "data-message-id": messageId, className: cn(messageVariants({ role, layout }), className), style: {
             minHeight: minHeight !== undefined ? `${minHeight}px` : undefined,
         }, ...props, children: children }));
 });

package/dist/gui/components/MessageContent.js

@@ -31,10 +31,31 @@ const messageContentVariants = cva("w-full rounded-2xl text-[var(--font-size)] f
         variant: "default",
     },
 });
+// Match both [[N]] and [N] (while avoiding markdown links/refs), mirroring `remark-citations`.
+const CITATION_REGEX = /\[\[(\d+)\]\]|\[(\d+)\](?![:(])/g;
+function countCitations(text) {
+    CITATION_REGEX.lastIndex = 0;
+    let count = 0;
+    while (CITATION_REGEX.exec(text) !== null)
+        count++;
+    return count;
+}
 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);
     const _currentModel = useChatStore((state) => state.currentModel);
+    const sessionSources = useChatStore((state) => state.sources);
+    const sourcesForResponse = React.useMemo(() => {
+        // Merge/dedupe global + message sources by id so inline citations can resolve after reload.
+        const byId = new Map();
+        for (const s of sessionSources)
+            byId.set(s.id, s);
+        if (message?.sources) {
+            for (const s of message.sources)
+                byId.set(s.id, s);
+        }
+        return Array.from(byId.values());
+    }, [sessionSources, message?.sources]);
     // Use smart rendering if message is provided and no custom children
     const useSmartRendering = message && !children;
     // Derive props from message if using smart rendering
@@ -189,18 +210,20 @@ 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: message.sources ?? [] }) }), 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(_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..." }) }) }))] }));
                         }
                         // Hooks have positions - render them inline with content
                         const elements = [];
                         let currentPosition = 0;
+                        let citationOffset = 0;
                         hookNotifications.forEach((notification) => {
                             const position = notification.contentPosition ?? message.content.length;
                             // 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: message.sources ?? [] }) }, `text-before-hook-${notification.id}`));
+                                    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);
                                 }
                             }
                             // Add hook notification
@@ -211,7 +234,8 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                         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: message.sources ?? [] }) }, "text-end-hooks"));
+                                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);
                             }
                         }
                         // Add tool calls at the end
@@ -247,6 +271,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                     // Sort by position
                     positionedItems.sort((a, b) => a.position - b.position);
                     let currentPosition = 0;
+                    let citationOffset = 0;
                     let currentBatch = [];
                     let currentBatchId;
                     let currentBatchTitle;
@@ -278,7 +303,8 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                                 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: message.sources ?? [] }) }, `text-before-${itemId}`));
+                                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);
                             }
                         }
                         if (positionedItem.type === "hookNotification") {
@@ -332,7 +358,8 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                     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: message.sources ?? [] }) }, "text-end"));
+                            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);
                         }
                     }
                     // Render preliminary (selecting) tool calls at the end, grouped

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

@@ -15,5 +15,16 @@ export interface ResponseProps extends React.HTMLAttributes<HTMLDivElement> {
     emptyMessage?: string;
     /** Citation sources for rendering inline citations */
     sources?: Source[];
+    /**
+     * Optional message id. If provided, we add stable per-citation anchors so the
+     * Sources sidebar can scroll to the exact cited spot.
+     */
+    messageId?: string;
+    /**
+     * When a message is rendered in multiple `Response` chunks (due to tool calls/hooks),
+     * citations need a global index across the full message. This is the starting index
+     * for citations rendered by THIS chunk.
+     */
+    citationIndexOffset?: number;
 }
 export declare const Response: React.NamedExoticComponent<ResponseProps & React.RefAttributes<HTMLDivElement>>;

package/dist/gui/components/Response.js

@@ -1,35 +1,76 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createLogger } from "@townco/core";
 import * as React from "react";
 import remarkGfm from "remark-gfm";
 import { Streamdown } from "streamdown";
 import { remarkCitations } from "../lib/remark-citations.js";
 import { cn } from "../lib/utils.js";
 import { CitationChip } from "./CitationChip.js";
-export const Response = React.memo(React.forwardRef(({ content, isStreaming = false, showEmpty = true, emptyMessage = "", sources = [], className, ...props }, ref) => {
+const logger = createLogger("Response", "debug");
+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);
+    // Log every render to track sources changes
+    logger.info("Response render", {
+        contentLength: content.length,
+        contentPreview: content.slice(0, 100),
+        sourcesCount: sources.length,
+        sourceIds: sources.map((s) => s.id),
+        remountKey,
+    });
+    // Increment remount key when sources change to force Streamdown remount
+    React.useEffect(() => {
+        setRemountKey((prev) => {
+            logger.info("Sources changed, incrementing remountKey", {
+                sourcesCount: sources.length,
+                sourceIds: sources.map((s) => s.id),
+                oldRemountKey: prev,
+            });
+            return prev + 1;
+        });
+    }, [sources]);
     // Memoize the remark plugins array to prevent re-renders
     // remarkGfm adds support for tables, strikethrough, autolinks, task lists
     const remarkPlugins = React.useMemo(() => [remarkGfm, remarkCitations], []);
     // Memoize the custom components to prevent re-renders
     // We use 'as Record<string, unknown>' because Streamdown's Components type
     // doesn't include all the props we need
-    const customComponents = React.useMemo(() => ({
-        // Custom span component that intercepts citation markers
-        // The remark-citations plugin creates spans with class "citation-marker"
-        // and data-citation-id attribute
-        // Note: Streamdown may pass 'class' instead of 'className'
-        span: (spanProps) => {
-            const { className, class: classAttr, "data-citation-id": citationId, children, ...restProps } = spanProps;
-            // Check both className and class (Streamdown may use either)
-            const cssClass = className || classAttr;
-            // Check if this span is a citation marker
-            if (cssClass === "citation-marker" && citationId) {
-                return _jsx(CitationChip, { sourceId: citationId, sources: sources });
-            }
-            // Otherwise render as normal span
-            return (_jsx("span", { className: cssClass, ...restProps, children: children }));
-        },
-    }), [sources]);
+    const customComponents = React.useMemo(() => {
+        // Each `Response` instance renders citations in-order. We assign anchors using a
+        // running local index + the provided chunk offset.
+        const citationCounter = { current: 0 };
+        return {
+            // Custom span component that intercepts citation markers
+            // The remark-citations plugin creates spans with class "citation-marker"
+            // and data-citation-id attribute
+            // Note: Streamdown may pass 'class' instead of 'className'
+            span: (spanProps) => {
+                const { className, class: classAttr, "data-citation-id": citationId, children, ...restProps } = spanProps;
+                // Check both className and class (Streamdown may use either)
+                const cssClass = className || classAttr;
+                // Check if this span is a citation marker
+                if (cssClass === "citation-marker" && citationId) {
+                    const globalCitationIndex = citationIndexOffset + citationCounter.current++;
+                    logger.info("Rendering citation marker", {
+                        citationId,
+                        sourcesAvailable: sources.length,
+                        sourceIds: sources.map((s) => s.id),
+                        foundSource: sources.find((s) => s.id === citationId)
+                            ? "yes"
+                            : "no",
+                    });
+                    // Anchor wrapper (when messageId is provided)
+                    if (messageId) {
+                        return (_jsx("span", { id: `citation-${messageId}-${globalCitationIndex}`, "data-citation-source-id": citationId, "data-citation-anchor": "true", className: "inline-flex rounded-md", children: _jsx(CitationChip, { sourceId: citationId, sources: sources }) }));
+                    }
+                    return _jsx(CitationChip, { sourceId: citationId, sources: sources });
+                }
+                // Otherwise render as normal span
+                return (_jsx("span", { className: cssClass, ...restProps, children: children }));
+            },
+        };
+    }, [sources, messageId, citationIndexOffset]);
     // Show empty state during streaming if no content yet
     if (!content && isStreaming && showEmpty) {
         return (_jsx("div", { ref: ref, className: cn("opacity-70 italic text-paragraph-sm", className), ...props, children: emptyMessage }));
@@ -37,7 +78,7 @@ export const Response = React.memo(React.forwardRef(({ content, isStreaming = fa
     if (!content) {
         return null;
     }
-    return (_jsx("div", { ref: ref, ...props, children: _jsx(Streamdown, { className: cn("size-full", "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0", "[&_code]:whitespace-pre-wrap [&_code]:break-words", "[&_pre]:max-w-full [&_pre]:overflow-x-auto", className), remarkPlugins: remarkPlugins, components: customComponents, children: content }) }));
+    return (_jsx("div", { ref: ref, ...props, children: _jsx(Streamdown, { className: cn("size-full", "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0", "[&_code]:whitespace-pre-wrap [&_code]:break-words", "[&_pre]:max-w-full [&_pre]:overflow-x-auto", className), remarkPlugins: remarkPlugins, components: customComponents, children: content }, `streamdown-${remountKey}`) }));
 }), (prevProps, nextProps) => prevProps.content === nextProps.content &&
     prevProps.sources === nextProps.sources);
 Response.displayName = "Response";

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

@@ -7,6 +7,16 @@ export interface SourceItem {
     sourceName: string;
     favicon?: string;
     timestamp?: string;
+    /**
+     * Where this source is cited in the transcript.
+     * `messageIndex` is 0-based within the current rendered message list.
+     */
+    usedIn?: Array<{
+        messageId: string;
+        messageIndex: number;
+        /** 0-based citation occurrence index within the message */
+        citationIndex: number;
+    }>;
 }
 export interface SourceListItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     source: SourceItem;

package/dist/gui/components/SourceListItem.js

@@ -2,6 +2,38 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../lib/utils.js";
 export const SourceListItem = React.forwardRef(({ source, isSelected, className, ...props }, ref) => {
+    const usedIn = source.usedIn ?? [];
+    const highlightCitation = React.useCallback((el) => {
+        // Clear any previous highlight
+        document
+            .querySelectorAll("[data-citation-highlight='true']")
+            .forEach((n) => {
+            n.removeAttribute("data-citation-highlight");
+            n.classList.remove("ring-2", "ring-ring", "ring-offset-2", "ring-offset-background");
+        });
+        el.setAttribute("data-citation-highlight", "true");
+        el.classList.add("ring-2", "ring-ring", "ring-offset-2", "ring-offset-background");
+        window.setTimeout(() => {
+            // Only remove if it's still the highlighted element.
+            if (el.getAttribute("data-citation-highlight") === "true") {
+                el.removeAttribute("data-citation-highlight");
+                el.classList.remove("ring-2", "ring-ring", "ring-offset-2", "ring-offset-background");
+            }
+        }, 1400);
+    }, []);
+    const scrollToCitationOrdinal = React.useCallback((sourceId, ordinal) => {
+        const nodes = Array.from(document.querySelectorAll(`[data-citation-anchor="true"][data-citation-source-id="${CSS.escape(sourceId)}"]`));
+        const el = nodes[ordinal];
+        if (!el)
+            return false;
+        el.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+            inline: "nearest",
+        });
+        window.setTimeout(() => highlightCitation(el), 150);
+        return true;
+    }, [highlightCitation]);
     return (_jsxs("button", { ref: ref, type: "button", className: cn(
         // Base styles matching FileSystemItem
         "group flex w-full text-left gap-2 items-start p-2 rounded-md cursor-pointer transition-colors text-paragraph-sm", 
@@ -10,12 +42,28 @@ export const SourceListItem = React.forwardRef(({ source, isSelected, className,
         // Focus state - matching FileSystemItem
         "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-border-dark", 
         // Selected state - matching FileSystemItem
-        isSelected && "bg-accent", className), onClick: () => window.open(source.url, "_blank"), ...props, children: [
-            _jsx("div", { className: "shrink-0 flex items-center h-5", children: _jsx("div", { className: "relative rounded-[3px] size-4 overflow-hidden bg-muted", children: source.favicon ? (_jsx("img", { alt: source.sourceName, className: "size-full object-cover", src: source.favicon })) : (_jsx("div", { className: "size-full bg-muted" })) }) }), _jsxs("div", { className: "flex flex-1 flex-col gap-1 min-w-0", children: [
+        isSelected && "bg-accent", className), onClick: () => {
+            // Always open the source URL. (Scrolling is handled via the usage pills.)
+            window.open(source.url, "_blank", "noopener,noreferrer");
+        }, ...props, children: [
+            _jsx("div", { className: "shrink-0 flex items-center h-5", children: _jsx("div", { className: "relative rounded-[3px] size-4 overflow-hidden bg-muted", children: source.favicon ? (_jsx("img", { alt: source.sourceName, className: "size-full object-cover", src: source.favicon })) : (_jsx("div", { className: "size-full bg-muted" })) }) }), _jsxs("div", { className: "flex flex-1 flex-col gap-0.5 min-w-0", children: [
                     _jsxs("div", { className: "text-paragraph-sm text-foreground truncate", children: [
                             _jsx("span", { className: "font-medium", children: source.sourceName }), _jsxs("span", { className: "text-muted-foreground", children: [" \u00B7 ", source.title] })
-                        ] }), _jsx("p", { className: "text-paragraph-sm text-muted-foreground line-clamp-3 break-all", children: source.snippet })
-                ] })
+                        ] }), usedIn.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-1.5 pt-1", children: [
+                            _jsx("span", { className: "text-xs text-muted-foreground", children: "Referenced" }), Array.from({ length: Math.min(usedIn.length, 12) }, (_, idx) => idx).map((idx) => (
+                            // Not a <button> (nested buttons are invalid); we emulate button semantics.
+                            // biome-ignore lint/a11y/useSemanticElements: spans are required to avoid nested buttons
+                            _jsx("span", { role: "button", tabIndex: 0, className: cn("px-1.5 py-0.5 rounded-md", "text-[10px] leading-none font-medium", "bg-muted text-muted-foreground", "hover:bg-accent hover:text-foreground transition-colors", "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-border-dark", "cursor-pointer select-none"), onClick: (e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    scrollToCitationOrdinal(source.id, idx);
+                                }, onKeyDown: (e) => {
+                                    if (e.key === "Enter" || e.key === " ") {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        scrollToCitationOrdinal(source.id, idx);
+                                    }
+                                }, "aria-label": `Scroll to citation ${idx + 1}`, children: idx + 1 }, `${source.id}-use-${idx}`))), usedIn.length > 12 && (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["+", usedIn.length - 12, " more"] }))] }))] })
         ] }));
 });
 SourceListItem.displayName = "SourceListItem";

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

@@ -0,0 +1,8 @@
+import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
+export interface ToolCallProps {
+    toolCall: ToolCallType;
+}
+/**
+ * ToolCall component - displays a single tool call with collapsible details
+ */
+export declare function ToolCall({ toolCall }: ToolCallProps): import("react/jsx-runtime").JSX.Element;