@agent-native/toolkit 0.23.1 → 0.198.1

package/dist/app/chat/chat/tool-call-display.js

@@ -0,0 +1,718 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatAgentChatContextItemsForPrompt } from "@agent-native/core/client/agent-chat";
+import { useAgentChatContext } from "@agent-native/core/client/agent-chat";
+import { useOptionalLocale, useT } from "@agent-native/core/client/i18n";
+import { isCallAgentToolCallShadowed, isToolCallActive, resolveToolCallRowContext, toolLabel, } from "@agent-native/core/client/tool-display";
+import { useFileUploadStatus } from "@agent-native/core/client/uploads";
+import { writeClipboardText } from "@agent-native/toolkit/clipboard";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { CubeLoader } from "@agent-native/toolkit/ui/cube-loader";
+import { Popover, PopoverContent, PopoverTrigger, } from "@agent-native/toolkit/ui/popover";
+import { cn } from "@agent-native/toolkit/utils";
+import { IconAlertTriangle, IconCircleX, IconCheck, IconChevronRight, IconCopy, IconCode, IconTerminal2, IconDatabase, IconSearch, IconFileCode, } from "@tabler/icons-react";
+import React, { useState, useEffect, useCallback, useLayoutEffect, useRef, } from "react";
+import { AgentTaskCard } from "../AgentTaskCard.js";
+import { ConnectBuilderCard } from "../ConnectBuilderCard.js";
+import { FileStorageSetupPopover } from "../FileStorageSetupPopover.js";
+import { McpAppRenderer } from "../mcp-apps/McpAppRenderer.js";
+import { useThinkingDisplay } from "../thinking-display.js";
+import { BashCell, EditCell, WriteCell, FilesChangedSummary, } from "../tool-cells/index.js";
+import { ActionChatUiSurface } from "./action-chat-ui-surface.js";
+import { AgentActivityObject } from "./agent-activity-object.js";
+import { AgentApprovalCard } from "./agent-approval-card.js";
+import { SmoothMarkdownText, HighlightedCodeBlock, } from "./markdown-renderer.js";
+import { IntegrationToolBadge, resolveToolIntegration, } from "./tool-integration.js";
+import { resolveToolRenderer } from "./tool-render-registry.js";
+import { isBuiltinDataWidgetActionRenderer, isBuiltinWorkspaceFileResult, isBuiltinConnectRequiredResult, resolveBuiltinActionChatRenderer, resolveBuiltinFallbackToolRenderer, } from "./widgets/builtin-tool-renderers.js";
+export const ChatRunningContext = React.createContext(false);
+export const ChatRunningRunIdContext = React.createContext(null);
+export const ChatRunningTurnIdContext = React.createContext(null);
+export const ChatRunDurationContext = React.createContext(null);
+export const SuppressInlineOpenAppContext = React.createContext(false);
+export const ASSISTANT_VISIBLE_TOOL_CALL_LIMIT = 3;
+export function ToolCallStackMotion({ children, className, }) {
+    return (_jsx("div", { className: cn("agent-tool-call-stack", className), children: children }));
+}
+function FileStorageSetupToolCall() {
+    const t = useT();
+    const fileUploadStatus = useFileUploadStatus();
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setOpen(true), children: t("onboarding.fileStorage.title") }), _jsx(FileStorageSetupPopover, { open: open, onOpenChange: setOpen, ...(!fileUploadStatus.isSuccess || fileUploadStatus.isError
+                    ? {
+                        status: "unavailable",
+                        onRetry: () => void fileUploadStatus.refetch(),
+                    }
+                    : { status: "missing" }) })] }));
+}
+export const ApprovalContext = React.createContext(null);
+export function toolCallHasPendingApproval(part) {
+    const approval = part.approval;
+    return (typeof approval?.approvalKey === "string" &&
+        approval.approvalKey.length > 0 &&
+        approval.dismissed !== true);
+}
+export const TOOL_LONG_RUNNING_HINT_DELAY_MS = 5 * 60_000;
+export function ToolActivityPresentation({ toolName, isRunning, toolCallId, suppressLongRunningHint = false, children, }) {
+    const t = useT();
+    const [showLongRunningHint, setShowLongRunningHint] = useState(false);
+    useEffect(() => {
+        if (!isRunning || suppressLongRunningHint) {
+            setShowLongRunningHint(false);
+            return;
+        }
+        setShowLongRunningHint(false);
+        const timeout = window.setTimeout(() => {
+            setShowLongRunningHint(true);
+        }, TOOL_LONG_RUNNING_HINT_DELAY_MS);
+        return () => window.clearTimeout(timeout);
+    }, [isRunning, suppressLongRunningHint, toolName]);
+    return (_jsx("div", { className: "agent-tool-call", "data-agent-tool-call-id": toolCallId, "data-running": isRunning ? "true" : undefined, children: _jsxs("div", { className: "agent-tool-call__content", children: [children, isRunning && showLongRunningHint && (_jsx("div", { className: "agent-kit-caption-copy mt-0.5 px-2.5 pb-2 leading-snug text-muted-foreground/80", children: t("agentChat.tool.longRunning") }))] }) }));
+}
+function stringifyToolValue(value, pretty = false) {
+    if (typeof value === "string")
+        return value;
+    try {
+        return JSON.stringify(value, null, pretty ? 2 : 0);
+    }
+    catch {
+        return String(value ?? "");
+    }
+}
+function looksLikeSql(text) {
+    return /^\s*(select|with|insert|update|delete|merge|create|alter|drop|explain|declare|begin)\b/i.test(text);
+}
+function parseJsonText(text) {
+    const trimmed = text.trim();
+    if (!trimmed || !/^[{[]/.test(trimmed))
+        return null;
+    try {
+        return JSON.parse(trimmed);
+    }
+    catch {
+        return null;
+    }
+}
+function inferToolTextLanguage(text, key, toolName) {
+    const keyName = (key ?? "").toLowerCase();
+    const tool = (toolName ?? "").toLowerCase();
+    if (keyName === "code" &&
+        (tool.includes("run-code") || tool.includes("run_code"))) {
+        return "javascript";
+    }
+    if (keyName === "sql" ||
+        keyName.endsWith("sql") ||
+        keyName === "query" ||
+        tool.includes("bigquery") ||
+        tool.includes("db-query") ||
+        looksLikeSql(text)) {
+        return "sql";
+    }
+    return parseJsonText(text) ? "json" : "text";
+}
+function formatToolTextValue(value, key, toolName) {
+    if (typeof value === "string") {
+        const parsed = parseJsonText(value);
+        if (parsed) {
+            return { text: JSON.stringify(parsed, null, 2), lang: "json" };
+        }
+        return {
+            text: value,
+            lang: inferToolTextLanguage(value, key, toolName),
+        };
+    }
+    return { text: stringifyToolValue(value, true), lang: "json" };
+}
+export function toolInputPayload(toolName, args, labels = {
+    input: "Input",
+    inputWithLabel: (label) => `Input - ${label}`,
+}) {
+    const entries = Object.entries(args);
+    if (entries.length === 0)
+        return null;
+    if (entries.length === 1) {
+        const [key, value] = entries[0];
+        const formatted = formatToolTextValue(value, key, toolName);
+        const normalizedKey = key.toLowerCase();
+        const keyLabel = normalizedKey === "sql" || normalizedKey.endsWith("sql") ? "SQL" : key;
+        return {
+            section: "input",
+            title: labels.inputWithLabel(keyLabel),
+            text: formatted.text,
+            copyText: typeof value === "string" ? value : stringifyToolValue(value, true),
+            lang: formatted.lang,
+        };
+    }
+    return {
+        section: "input",
+        title: labels.input,
+        text: JSON.stringify(args, null, 2),
+        copyText: JSON.stringify(args, null, 2),
+        lang: "json",
+    };
+}
+export function toolResultPayload(result, title = "Result") {
+    if (result === undefined)
+        return null;
+    const formatted = formatToolTextValue(result);
+    return {
+        section: "result",
+        title,
+        text: formatted.text,
+        copyText: result,
+        lang: formatted.lang,
+    };
+}
+function resolveToolIcon(toolName) {
+    const name = toolName.toLowerCase();
+    if (name.includes("bash") ||
+        name.includes("shell") ||
+        name.includes("terminal") ||
+        name.includes("run-code") ||
+        name.includes("exec")) {
+        return IconTerminal2;
+    }
+    if (name.includes("sql") ||
+        name.includes("bigquery") ||
+        name.includes("db-query") ||
+        name.includes("query")) {
+        return IconDatabase;
+    }
+    if (name.includes("search") ||
+        name.includes("find") ||
+        name.includes("grep")) {
+        return IconSearch;
+    }
+    if (name.includes("file") ||
+        name.includes("read") ||
+        name.includes("write") ||
+        name.includes("edit")) {
+        return IconFileCode;
+    }
+    return IconCode;
+}
+function SimpleCodeViewer({ text, lang, className, maxHeightClass = "max-h-56", }) {
+    return (_jsxs("div", { className: cn("agent-tool-code agent-kit-caption-copy overflow-auto rounded-md bg-muted/70 font-mono leading-relaxed text-foreground", maxHeightClass, className), children: [lang !== "text" && (_jsx("div", { className: "sticky top-0 z-[1] flex items-center justify-between border-b border-border/40 bg-muted/90 px-2.5 py-1", children: _jsx("span", { className: "agent-kit-micro-copy font-mono uppercase tracking-wide text-muted-foreground/80", children: lang }) })), _jsx(HighlightedCodeBlock, { code: text, lang: lang })] }));
+}
+function ToolOutputPopover({ open, onOpenChange, title, payload, children, }) {
+    const t = useT();
+    const [copied, setCopied] = useState(false);
+    const copyResetRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (copyResetRef.current)
+                clearTimeout(copyResetRef.current);
+        };
+    }, []);
+    const copyValue = useCallback(async () => {
+        try {
+            if (await writeClipboardText(payload.copyText)) {
+                setCopied(true);
+                if (copyResetRef.current)
+                    clearTimeout(copyResetRef.current);
+                copyResetRef.current = setTimeout(() => setCopied(false), 1200);
+            }
+        }
+        catch {
+            // Clipboard failures should not interrupt chat rendering.
+        }
+    }, [payload.copyText]);
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: children }), _jsxs(PopoverContent, { align: "start", side: "bottom", sideOffset: 6, collisionPadding: 12, className: "flex max-h-[min(calc(100vh-2rem),var(--radix-popover-content-available-height,75vh))] w-[min(calc(100vw-2rem),var(--radix-popover-content-available-width,760px),760px)] flex-col gap-0 overflow-hidden p-0", children: [_jsxs("div", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-3", children: [_jsx("div", { className: "truncate text-sm font-medium", children: title }), _jsxs("button", { type: "button", onClick: copyValue, className: "inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground", children: [copied ? _jsx(IconCheck, { size: 13 }) : _jsx(IconCopy, { size: 13 }), copied ? t("agentChat.common.copied") : t("agentChat.common.copy")] })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden p-3", children: _jsx(SimpleCodeViewer, { text: payload.text, lang: payload.lang, maxHeightClass: "max-h-[min(70vh,calc(var(--radix-popover-content-available-height,75vh)-4.5rem))]" }) })] })] }));
+}
+export function AnimatedCollapse({ open, children, }) {
+    const [mounted, setMounted] = useState(open);
+    useLayoutEffect(() => {
+        if (open)
+            setMounted(true);
+    }, [open]);
+    const onTransitionEnd = useCallback((event) => {
+        if (event.propertyName !== "grid-template-rows" || open)
+            return;
+        setMounted(false);
+    }, [open]);
+    if (!mounted)
+        return null;
+    return (_jsx("div", { className: "agent-chat-collapse", "data-state": open ? "open" : "closed", "aria-hidden": !open, onTransitionEnd: onTransitionEnd, children: _jsx("div", { className: "agent-chat-collapse__content", children: children }) }));
+}
+function ApprovalAffordance({ toolName, toolCallId, approval, }) {
+    const t = useT();
+    const ctx = React.useContext(ApprovalContext);
+    const [localResolution, setLocalResolution] = useState(null);
+    const [isAlwaysAllowing, setIsAlwaysAllowing] = useState(false);
+    const [alwaysAllowFailed, setAlwaysAllowFailed] = useState(false);
+    const onAlwaysAllow = approval.allowPersistentApproval === false ? undefined : ctx?.onAlwaysAllow;
+    const retainedResolution = ctx?.getApprovalResolution?.(approval.approvalKey, toolCallId, approval.askId) ?? null;
+    const resolution = retainedResolution ??
+        localResolution ??
+        (approval.dismissed === true ? "denied" : null);
+    if (resolution === "approved") {
+        return (_jsx("div", { className: "mt-1.5 text-xs text-muted-foreground", children: t("agentChat.approval.approved", { tool: toolName }) }));
+    }
+    if (resolution === "denied") {
+        return (_jsx("div", { className: "mt-1.5 text-xs text-muted-foreground", children: t("agentChat.approval.denied", { tool: toolName }) }));
+    }
+    const handleAlwaysAllow = async () => {
+        if (!onAlwaysAllow || isAlwaysAllowing)
+            return;
+        setIsAlwaysAllowing(true);
+        setAlwaysAllowFailed(false);
+        try {
+            await onAlwaysAllow(approval.approvalKey, toolName);
+            setLocalResolution("approved");
+            ctx?.onApprovalResolved?.(approval.approvalKey, "approved", toolCallId, approval.askId);
+        }
+        catch {
+            setAlwaysAllowFailed(true);
+        }
+        finally {
+            setIsAlwaysAllowing(false);
+        }
+    };
+    return (_jsx(AgentApprovalCard, { toolName: toolName, question: t("agentChat.approval.question", { tool: toolName }), approveLabel: t("agentChat.approval.approve"), denyLabel: t("agentChat.approval.deny"), moreOptionsLabel: t("agentChat.approval.moreOptions"), alwaysAllowLabel: t("agentChat.approval.alwaysAllowAction"), alwaysAllowHint: t("agentChat.approval.alwaysAllowActionHint"), saveFailedLabel: alwaysAllowFailed ? t("agentChat.common.saveFailed") : undefined, isAlwaysAllowing: isAlwaysAllowing, onApprove: ctx
+            ? () => {
+                setLocalResolution("approved");
+                ctx.onApprovalResolved?.(approval.approvalKey, "approved", toolCallId, approval.askId);
+                ctx.onApprove(approval.approvalKey);
+            }
+            : undefined, onDeny: () => {
+            setLocalResolution("denied");
+            ctx?.onApprovalResolved?.(approval.approvalKey, "denied", toolCallId, approval.askId);
+            ctx?.onDeny?.(approval.approvalKey);
+        }, onAlwaysAllow: onAlwaysAllow ? handleAlwaysAllow : undefined }));
+}
+export function ToolCallDisplay({ toolName, toolCallId, argsText, args, result, mcpApp, chatUI, isRunning, outcome, structuredMeta, activity, approval, repeatCount, isLatestRunning = isRunning, isActiveTail, }) {
+    const { items: agentChatContextItems } = useAgentChatContext(toolName === "connect-builder");
+    const builderContext = toolName === "connect-builder"
+        ? formatAgentChatContextItemsForPrompt(agentChatContextItems)
+        : "";
+    const isDelegatedAgentCall = toolName === "call-agent" || toolName.startsWith("agent:");
+    const effectiveIsRunning = isRunning ||
+        (isDelegatedAgentCall &&
+            isToolCallActive({
+                type: "tool-call",
+                toolName,
+                result,
+                outcome,
+                activity,
+                structuredMeta,
+            }));
+    const showActiveTail = isActiveTail ?? isLatestRunning;
+    const toolKind = structuredMeta?.toolKind;
+    const wrapToolDisplay = (children) => (_jsx(ToolActivityPresentation, { toolName: toolName, isRunning: effectiveIsRunning, toolCallId: toolCallId, suppressLongRunningHint: toolName === "call-agent" || toolName.startsWith("agent:"), children: children }));
+    if (toolKind === "bash") {
+        return wrapToolDisplay(_jsx(BashCell, { meta: structuredMeta, output: result, isRunning: effectiveIsRunning }));
+    }
+    if (toolKind === "edit") {
+        return wrapToolDisplay(_jsx(EditCell, { meta: structuredMeta, isRunning: effectiveIsRunning }));
+    }
+    if (toolKind === "write") {
+        return wrapToolDisplay(_jsx(WriteCell, { meta: structuredMeta, isRunning: effectiveIsRunning }));
+    }
+    return wrapToolDisplay(_jsx(ToolCallDisplayGeneric, { toolName: toolName, toolCallId: toolCallId, argsText: argsText, args: args, result: result, mcpApp: mcpApp, chatUI: chatUI, isRunning: effectiveIsRunning, outcome: outcome, isActiveTail: showActiveTail, structuredMeta: structuredMeta, approval: approval, repeatCount: repeatCount, context: builderContext }));
+}
+const WorkSummaryContentContext = React.createContext(false);
+function ToolCallDisplayGeneric({ toolName, toolCallId, argsText, args, result, mcpApp, chatUI, isRunning, outcome, isActiveTail, structuredMeta, approval, repeatCount, context, }) {
+    const t = useT();
+    const embeddedInWorkSummary = React.useContext(WorkSummaryContentContext);
+    const suppressInlineOpenApp = React.useContext(SuppressInlineOpenAppContext);
+    const isRawCallAgent = toolName === "call-agent";
+    const isAgentCall = toolName.startsWith("agent:") || isRawCallAgent;
+    const [expanded, setExpanded] = useState(isAgentCall);
+    const [outputOpen, setOutputOpen] = useState(false);
+    const agentName = toolName.startsWith("agent:")
+        ? toolName.slice(6)
+        : typeof args.agent === "string"
+            ? args.agent
+            : null;
+    const isAgentError = isAgentCall && result === "Error calling agent";
+    const isUnknownOutcome = !isRunning && outcome === "unknown";
+    const agentStreamText = isRawCallAgent
+        ? (result ?? "")
+        : isAgentCall
+            ? (argsText ?? "")
+            : "";
+    const agentActivity = structuredMeta?.agentActivity;
+    const agentProgress = structuredMeta?.agentProgress;
+    const hasStreamText = agentStreamText.length > 0;
+    const hasArgs = !isAgentCall && Object.keys(args).length > 0;
+    if (toolName === "connect-builder" && result) {
+        try {
+            const parsed = JSON.parse(result);
+            if (parsed?.kind === "connect-builder-card") {
+                return (_jsx(ConnectBuilderCard, { configured: !!parsed.configured, builderEnabled: parsed.builderEnabled !== false, connectUrl: parsed.connectUrl || "", orgName: parsed.orgName ?? null, prompt: typeof parsed.prompt === "string" ? parsed.prompt : "", context: context }));
+            }
+        }
+        catch {
+            // coercion-ok: malformed tool output should fall through to the default tool pill
+            // fall through to default pill rendering
+        }
+    }
+    if (toolName === "connect-file-storage" && result) {
+        try {
+            const parsed = JSON.parse(result);
+            if (parsed?.kind === "connect-file-storage-card") {
+                return _jsx(FileStorageSetupToolCall, {});
+            }
+        }
+        catch {
+            // coercion-ok: malformed storage tool output should fall through to the default tool pill
+            // fall through to default pill rendering
+        }
+    }
+    if (toolName === "agent-teams" &&
+        args?.action === "spawn" &&
+        result) {
+        try {
+            const parsed = JSON.parse(result);
+            if (parsed.taskId && parsed.threadId) {
+                return (_jsx(AgentTaskCard, { taskId: parsed.taskId, threadId: parsed.threadId, description: parsed.description ||
+                        args?.task ||
+                        t("agentChat.tool.subAgentTask"), onOpen: (tid) => {
+                        window.dispatchEvent(new CustomEvent("agent-task-open", {
+                            detail: {
+                                threadId: tid,
+                                description: parsed.description ||
+                                    args?.task ||
+                                    "",
+                                name: parsed.name || "",
+                            },
+                        }));
+                    } }));
+            }
+        }
+        catch {
+            // Fall through to default pill rendering
+        }
+    }
+    const parsedResult = result ? parseJsonText(result) : null;
+    const nativeToolContext = {
+        toolName,
+        args,
+        resultText: result,
+        resultJson: parsedResult,
+        isRunning,
+        isActiveTail,
+        ...(typeof toolCallId === "string"
+            ? { widgetId: `${toolCallId}:chat-ui` }
+            : {}),
+        chatUI,
+    };
+    const skipRegistryRenderer = !isAgentCall && isBuiltinDataWidgetActionRenderer(nativeToolContext);
+    const NativeToolRenderer = isAgentCall
+        ? null
+        : (resolveBuiltinActionChatRenderer(nativeToolContext) ??
+            (skipRegistryRenderer ? null : resolveToolRenderer(nativeToolContext)) ??
+            resolveBuiltinFallbackToolRenderer(nativeToolContext));
+    if (NativeToolRenderer) {
+        return (_jsx(ActionChatUiSurface, { context: nativeToolContext, isBuiltinDataWidget: isBuiltinDataWidgetActionRenderer(nativeToolContext) ||
+                isBuiltinWorkspaceFileResult(nativeToolContext) ||
+                isBuiltinConnectRequiredResult(nativeToolContext), children: _jsx(NativeToolRenderer, { context: nativeToolContext }) }));
+    }
+    const inputPayload = hasArgs
+        ? toolInputPayload(toolName, args, {
+            input: t("agentChat.tool.input"),
+            inputWithLabel: (label) => t("agentChat.tool.inputWithLabel", { label }),
+        })
+        : null;
+    const resultPayload = toolResultPayload(result, t("agentChat.tool.result"));
+    const displayName = isAgentCall
+        ? isRunning
+            ? t("agentChat.tool.askingAgent", { agent: agentName })
+            : isAgentError
+                ? t("agentChat.tool.askingAgentFailed", { agent: agentName })
+                : t("agentChat.tool.askedAgent", { agent: agentName })
+        : toolLabel(t, toolName);
+    const rowContext = isAgentCall ? null : resolveToolCallRowContext(args);
+    const canExpand = isAgentCall
+        ? hasStreamText
+        : hasArgs || result !== undefined;
+    const isExpanded = isAgentCall ? hasStreamText && expanded : expanded;
+    const integration = resolveToolIntegration(toolName, args);
+    const ToolIcon = resolveToolIcon(toolName);
+    const outputTitle = t("agentChat.tool.rawOutput", { tool: toolName });
+    if (isAgentCall) {
+        return (_jsx(AgentCallCell, { agentName: agentName ?? t("agentChat.common.agent"), toolCallId: toolCallId, activity: agentActivity, progress: agentProgress, responseText: agentStreamText, isRunning: isRunning, isError: isAgentError, durationMs: typeof structuredMeta?.agentDurationMs === "number"
+                ? structuredMeta.agentDurationMs
+                : agentActivity?.durationMs }));
+    }
+    return (_jsxs("div", { className: "group/tool my-0.5 w-full overflow-hidden", children: [mcpApp && !(suppressInlineOpenApp && toolName === "open_app") && (_jsx(McpAppRenderer, { app: mcpApp, className: "mb-1.5" })), _jsxs("button", { type: "button", onClick: () => canExpand && setExpanded(!isExpanded), "aria-expanded": canExpand ? isExpanded : undefined, className: cn("agent-kit-density flex w-full items-center gap-1.5 rounded-md py-0.5 text-left text-muted-foreground transition-colors", canExpand && "hover:text-foreground", isRunning && "text-muted-foreground"), children: [_jsx("span", { className: cn("relative flex shrink-0 items-center justify-center", integration ? "size-5" : "size-4"), children: integration ? (_jsx(IntegrationToolBadge, { integration: integration })) : isRunning ? (_jsx(CubeLoader, { "aria-hidden": "true", className: "size-3.5" })) : isAgentError ? (_jsx(IconCircleX, { className: "size-3.5 text-destructive" })) : isUnknownOutcome ? (_jsx(IconAlertTriangle, { className: "size-3.5 text-muted-foreground" })) : (_jsxs(_Fragment, { children: [_jsx(ToolIcon, { className: cn("size-3.5 transition-opacity", canExpand && "group-hover/tool:opacity-0") }), canExpand && (_jsx(IconChevronRight, { className: cn("absolute size-3.5 opacity-0 transition-[opacity,transform] group-hover/tool:opacity-100", isExpanded && "rotate-90") }))] })) }), _jsx("span", { className: cn("min-w-0 truncate font-normal", (isActiveTail || (integration && isRunning)) &&
+                            "agent-running-shimmer"), children: displayName }), rowContext ? (_jsx(AgentActivityObject, { object: {
+                            kind: rowContext.kind,
+                            label: rowContext.text,
+                            mono: rowContext.mono,
+                        }, className: "agent-kit-activity-object-boundary ms-auto shrink" })) : null, repeatCount && repeatCount > 1 && (_jsxs("span", { className: "agent-kit-micro-copy shrink-0 rounded border border-border/60 px-1.5 py-0.5 leading-none text-muted-foreground", title: t("agentChat.tool.repeated", { count: repeatCount }), children: [repeatCount, "x"] })), integration && isUnknownOutcome ? (_jsx(IconAlertTriangle, { "aria-hidden": "true", className: "size-3.5 shrink-0" })) : null, integration && canExpand ? (_jsx(IconChevronRight, { "aria-hidden": "true", className: cn("size-3.5 shrink-0 opacity-0 transition-[opacity,transform] group-hover/tool:opacity-100 group-focus-within/tool:opacity-100", isExpanded && "rotate-90 opacity-100") })) : null] }), _jsx(AnimatedCollapse, { open: isExpanded && !isAgentCall && (hasArgs || result !== undefined), children: _jsxs("div", { className: cn("mt-1 space-y-2", !embeddedInWorkSummary && "pl-5"), children: [inputPayload && (_jsx(SimpleCodeViewer, { text: inputPayload.text, lang: inputPayload.lang })), resultPayload && (_jsx(ToolOutputPopover, { open: outputOpen, onOpenChange: setOutputOpen, title: outputTitle, payload: resultPayload, children: _jsx("button", { type: "button", "aria-label": t("agentChat.tool.viewOutput", {
+                                    tool: toolName,
+                                }), className: "inline-flex size-6 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-accent hover:text-foreground", children: _jsx(IconCode, { className: "size-3.5" }) }) }))] }) }), isUnknownOutcome && (_jsx("p", { role: "status", className: cn("text-xs text-muted-foreground", !embeddedInWorkSummary && "ps-5"), children: t("agentChat.tool.interrupted") })), approval && (_jsx(ApprovalAffordance, { toolName: toolName, toolCallId: toolCallId, approval: approval }, approval.askId ?? approval.approvalKey))] }));
+}
+function AgentCallCell({ agentName, toolCallId, activity, progress, responseText, isRunning, isError, durationMs, }) {
+    const t = useT();
+    const formatDuration = useLocalizedWorkedDuration();
+    const [open, setOpen] = useState(true);
+    const responseKey = toolCallId ?? agentName;
+    const toolCount = activity?.toolCalls?.length ?? 0;
+    const segments = activity?.response ?? [];
+    const inlineSegments = responseText && !isRunning ? segments.slice(0, toolCount) : segments;
+    const finalText = responseText || (inlineSegments.length ? "" : activity?.responseText);
+    const work = activity?.reasoning?.length || toolCount || inlineSegments.length;
+    const workItemCount = Math.max(activity?.reasoning?.length ?? 0, toolCount, inlineSegments.length);
+    const label = isRunning
+        ? t("agentChat.tool.askingAgent", { agent: agentName })
+        : isError
+            ? t("agentChat.tool.askingAgentFailed", { agent: agentName })
+            : t("agentChat.tool.askedAgent", { agent: agentName });
+    const workContent = work ? (_jsx("div", { className: "space-y-1", children: Array.from({ length: workItemCount }, (_, index) => {
+            const reasoningText = activity?.reasoning?.[index];
+            const segment = inlineSegments[index];
+            const tool = activity?.toolCalls?.[index];
+            return (_jsxs(React.Fragment, { children: [reasoningText && (_jsx(ReasoningCell, { text: reasoningText, isStreaming: isRunning &&
+                            activity.activePhase === "reasoning" &&
+                            index === activity.reasoning.length - 1, defaultOpen: index === activity.reasoning.length - 1, collapseWhenReplaced: index < activity.toolCalls.length })), segment && (_jsx("div", { className: "pb-1", children: _jsx(SmoothMarkdownText, { text: segment, streaming: isRunning &&
+                                activity?.activePhase === "responding" &&
+                                index === inlineSegments.length - 1, resetKey: `agent-response-${responseKey}-${index}`, statusType: isRunning ? "running" : "complete" }) })), tool && (_jsx(AgentActivityToolCallRow, { tool: tool, isActiveTail: isRunning && index === activity.toolCalls.length - 1 }))] }, `activity-${index}`));
+        }) })) : null;
+    const progressState = progress?.state.replaceAll(/[-_]+/g, " ");
+    const progressText = isRunning && !activity && progress && progressState
+        ? [
+            progressState.charAt(0).toUpperCase() + progressState.slice(1),
+            t("agentChat.tool.elapsed", {
+                duration: formatDuration(progress.elapsedSeconds * 1000),
+            }),
+            progress.detail,
+        ]
+            .filter(Boolean)
+            .join(" · ")
+        : null;
+    return (_jsxs("div", { className: "group/tool my-0.5 w-full", children: [_jsxs("button", { type: "button", onClick: () => setOpen((value) => !value), "aria-expanded": open, className: "agent-kit-density flex w-full items-center gap-1.5 rounded-md py-0.5 text-left text-muted-foreground transition-colors hover:text-foreground", children: [isRunning ? (_jsx(CubeLoader, { "aria-hidden": "true", className: "size-3.5" })) : isError ? (_jsx(IconCircleX, { className: "size-3.5 text-destructive" })) : (_jsx(IconChevronRight, { className: cn("size-3.5 transition-transform", open && "rotate-90") })), _jsx("span", { className: cn("min-w-0 truncate font-normal", isRunning && "agent-running-shimmer"), children: label })] }), _jsx(AnimatedCollapse, { open: open, children: _jsxs("div", { className: "pt-1", children: [workContent &&
+                            (isRunning ? (workContent) : (_jsx(WorkedForSummary, { durationMs: durationMs, children: workContent }))), progressText && (_jsx("p", { className: "pb-1 text-xs text-muted-foreground", "data-testid": "agent-call-progress", "aria-live": "polite", children: progressText })), finalText && (_jsx("div", { className: "pb-1", children: _jsx(SmoothMarkdownText, { text: finalText, streaming: isRunning, resetKey: `agent-response-${responseKey}`, statusType: isRunning ? "running" : "complete" }) }))] }) })] }));
+}
+function AgentActivityToolCallRow({ tool, isActiveTail, }) {
+    const t = useT();
+    const isRunning = tool.status === "running";
+    const integration = resolveToolIntegration(tool.name, tool.input ? parseJsonText(tool.input) : undefined);
+    const ToolIcon = resolveToolIcon(tool.name);
+    return (_jsx(ToolActivityPresentation, { toolName: tool.name, isRunning: isRunning, toolCallId: tool.id, suppressLongRunningHint: true, children: _jsxs("div", { className: "agent-kit-density my-0.5 flex w-full items-center gap-1.5 rounded-md py-0.5 text-left text-muted-foreground", children: [_jsx("span", { className: cn("flex shrink-0 items-center justify-center", integration ? "size-5" : "size-4"), children: integration ? (_jsx(IntegrationToolBadge, { integration: integration })) : isRunning ? (_jsx(CubeLoader, { "aria-hidden": "true", className: "size-3.5" })) : (_jsx(ToolIcon, { className: "size-3.5" })) }), _jsx("span", { className: cn("min-w-0 truncate font-normal", isActiveTail && "agent-running-shimmer"), children: toolLabel(t, tool.name) })] }) }));
+}
+export function ToolCallFallback({ toolName, toolCallId, args, argsText, result, ...rest }) {
+    const chatRunning = React.useContext(ChatRunningContext);
+    const isRunning = rest.outcome !== "unknown" &&
+        ((result === undefined && chatRunning) ||
+            isToolCallActive({
+                type: "tool-call",
+                toolName,
+                result,
+                outcome: rest.outcome,
+                activity: rest.activity,
+                structuredMeta: rest.structuredMeta,
+            }));
+    return (_jsx(ToolCallDisplay, { toolName: toolName, toolCallId: toolCallId, args: args, argsText: argsText, result: typeof result === "string"
+            ? result
+            : result !== undefined
+                ? JSON.stringify(result)
+                : undefined, mcpApp: rest.mcpApp, chatUI: rest.chatUI, structuredMeta: rest.structuredMeta, activity: rest.activity, isRunning: isRunning, outcome: rest.outcome, isActiveTail: rest.isActiveTail, isLatestRunning: rest.isLatestRunning, approval: rest.approval, repeatCount: rest.repeatCount }));
+}
+export function ReconnectStreamMessage({ content, allowActivitySpinner = true, }) {
+    const chatRunning = React.useContext(ChatRunningContext);
+    const toolSummary = getReconnectToolSummaryInfo(content);
+    const latestReasoningPartIndex = content.reduce((latestIndex, part, index) => part.type === "reasoning" ? index : latestIndex, -1);
+    const streamingTextPartIndex = content.at(-1)?.type === "text" ? content.length - 1 : -1;
+    const streamingReasoningPartIndex = content.at(-1)?.type === "reasoning" ? content.length - 1 : -1;
+    const latestActiveToolIndex = content.reduce((latestIndex, part, index) => part.type === "tool-call" &&
+        !isCallAgentToolCallShadowed(content, index) &&
+        (chatRunning || (allowActivitySpinner && part.activity === true))
+        ? index
+        : latestIndex, -1);
+    const renderPart = (part, i) => {
+        if (isCallAgentToolCallShadowed(content, i))
+            return null;
+        if (part.type === "text") {
+            const partStreaming = chatRunning && i === streamingTextPartIndex;
+            return (_jsx(SmoothMarkdownText, { text: part.text, streaming: partStreaming, resetKey: `reconnect-text-${i}`, statusType: partStreaming ? "running" : "complete" }, `reconnect-text-${i}`));
+        }
+        if (part.type === "reasoning") {
+            return (_jsx(ReasoningCell, { text: part.text, isStreaming: chatRunning && i === streamingReasoningPartIndex, resetKey: `reconnect-reasoning-${i}`, defaultOpen: i === latestReasoningPartIndex, collapseWhenReplaced: i < latestReasoningPartIndex }, `reconnect-reasoning-${i}`));
+        }
+        return (_jsx(ToolCallDisplay, { toolName: part.toolName, toolCallId: part.toolCallId, argsText: part.argsText, args: part.args, result: part.result, mcpApp: part.mcpApp, chatUI: part.chatUI, structuredMeta: part.structuredMeta, activity: part.activity, outcome: part.outcome, isRunning: part.result === undefined &&
+                (chatRunning || (allowActivitySpinner && part.activity === true)), isActiveTail: i === latestActiveToolIndex, approval: part.approval, repeatCount: part.repeatCount }, `reconnect-tool-${i}`));
+    };
+    const renderedParts = [];
+    let summaryStartIndex = -1;
+    let summaryToolCount = 0;
+    const flushSummary = (endIndex) => {
+        if (summaryStartIndex < 0)
+            return;
+        renderedParts.push(_jsx(RanToolsSummary, { toolCount: summaryToolCount, motionKey: `reconnect-${summaryStartIndex}`, children: content
+                .slice(summaryStartIndex, endIndex)
+                .map((part, offset) => renderPart(part, summaryStartIndex + offset)) }, `reconnect-tool-summary-${summaryStartIndex}`));
+        summaryStartIndex = -1;
+        summaryToolCount = 0;
+    };
+    for (let i = 0; i < content.length; i++) {
+        const part = content[i];
+        if (isCallAgentToolCallShadowed(content, i))
+            continue;
+        const isOlderToolWork = toolSummary.startIndex >= 0 &&
+            i < toolSummary.startIndex &&
+            isReconnectToolSummaryPart(content, i, toolSummary.startIndex);
+        if (isOlderToolWork) {
+            summaryStartIndex = summaryStartIndex < 0 ? i : summaryStartIndex;
+            if (part.type === "tool-call")
+                summaryToolCount++;
+            continue;
+        }
+        flushSummary(i);
+        renderedParts.push(renderPart(part, i));
+    }
+    flushSummary(content.length);
+    return (_jsx("div", { className: "flex justify-start", children: _jsx("div", { className: "agent-kit-tool-content-boundary w-full text-sm leading-relaxed text-foreground", children: _jsx(ToolCallStackMotion, { className: "space-y-1", children: renderedParts }) }) }));
+}
+function getReconnectToolSummaryInfo(content) {
+    const toolCallIndices = content.reduce((indices, part, index) => {
+        if (part.type === "tool-call" &&
+            !isCallAgentToolCallShadowed(content, index) &&
+            isReconnectSummarizablePart(part)) {
+            indices.push(index);
+        }
+        return indices;
+    }, []);
+    if (toolCallIndices.length <= ASSISTANT_VISIBLE_TOOL_CALL_LIMIT) {
+        return { startIndex: -1 };
+    }
+    return {
+        startIndex: toolCallIndices[toolCallIndices.length - ASSISTANT_VISIBLE_TOOL_CALL_LIMIT],
+    };
+}
+function isReconnectSummarizablePart(part) {
+    return (part.type === "reasoning" ||
+        (part.type === "tool-call" &&
+            part.toolName !== "connect-builder" &&
+            part.chatUI === undefined &&
+            part.mcpApp === undefined &&
+            !toolCallHasPendingApproval(part)));
+}
+function isReconnectToolSummaryPart(content, index, startIndex) {
+    if (startIndex < 0 || index >= startIndex)
+        return false;
+    if (isCallAgentToolCallShadowed(content, index) ||
+        !isReconnectSummarizablePart(content[index])) {
+        return false;
+    }
+    let segmentStart = index;
+    while (segmentStart > 0 &&
+        !isCallAgentToolCallShadowed(content, segmentStart - 1) &&
+        isReconnectSummarizablePart(content[segmentStart - 1])) {
+        segmentStart--;
+    }
+    let segmentEnd = index + 1;
+    while (segmentEnd < startIndex &&
+        !isCallAgentToolCallShadowed(content, segmentEnd) &&
+        isReconnectSummarizablePart(content[segmentEnd])) {
+        segmentEnd++;
+    }
+    return content
+        .slice(segmentStart, segmentEnd)
+        .some((candidate) => candidate.type === "tool-call");
+}
+export function ReasoningCell({ text, isStreaming = false, defaultOpen, autoCollapse = false, collapseWhenReplaced = false, durationMs, }) {
+    const t = useT();
+    const formatDuration = useLocalizedWorkedDuration();
+    const display = useThinkingDisplay();
+    const embeddedInWorkSummary = React.useContext(WorkSummaryContentContext);
+    const startOpen = display === "expanded" ? (defaultOpen ?? true) : false;
+    const [open, setOpen] = useState(startOpen);
+    const wasStreamingRef = useRef(isStreaming);
+    const wasReplacedRef = useRef(collapseWhenReplaced);
+    const previousDisplayRef = useRef(display);
+    const trimmed = text.trim();
+    useEffect(() => {
+        if (autoCollapse && wasStreamingRef.current && !isStreaming) {
+            setOpen(false);
+        }
+        wasStreamingRef.current = isStreaming;
+    }, [autoCollapse, isStreaming]);
+    useEffect(() => {
+        if (collapseWhenReplaced && !wasReplacedRef.current) {
+            setOpen(false);
+        }
+        wasReplacedRef.current = collapseWhenReplaced;
+    }, [collapseWhenReplaced]);
+    useEffect(() => {
+        if (previousDisplayRef.current === display)
+            return;
+        previousDisplayRef.current = display;
+        setOpen(startOpen);
+    }, [display, startOpen]);
+    if (display === "hidden")
+        return null;
+    if (!trimmed && !isStreaming)
+        return null;
+    const label = isStreaming
+        ? t("agentChat.status.thinking")
+        : durationMs != null
+            ? t("agentChat.tool.thoughtFor", {
+                duration: formatDuration(durationMs),
+            })
+            : t("agentChat.tool.thought");
+    const showTail = isStreaming && open;
+    return (_jsxs("div", { className: cn("w-full", embeddedInWorkSummary ? "my-0" : "my-0.5"), children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, className: "agent-kit-density flex items-center gap-1.5 py-0.5 text-muted-foreground transition-colors hover:text-foreground", children: [_jsx(IconChevronRight, { className: cn("size-3.5 shrink-0 transition-transform", open && "rotate-90") }), isStreaming ? (_jsx("span", { className: "agent-thinking-indicator__text", children: label })) : (_jsx("span", { children: label }))] }), _jsx(AnimatedCollapse, { open: open, children: _jsx("div", { className: cn("pb-1", !embeddedInWorkSummary && "ps-5", showTail && "reasoning-cell-tail"), children: trimmed ? (_jsx("div", { className: "agent-reasoning-markdown agent-kit-density leading-relaxed text-muted-foreground", children: _jsx(SmoothMarkdownText, { text: trimmed, streaming: isStreaming, animateStreaming: false, resetKey: "reasoning", statusType: isStreaming ? "running" : "complete" }) })) : (_jsx("div", { className: "agent-kit-density leading-relaxed text-muted-foreground", children: isStreaming ? "…" : "" })) }) })] }));
+}
+export function formatWorkedDuration(ms, options = {}) {
+    const number = new Intl.NumberFormat(options.locale ?? "en-US");
+    const hour = options.hour ?? "h";
+    const minute = options.minute ?? "m";
+    const second = options.second ?? "s";
+    const part = (value, unit) => `${number.format(value)}${unit}`;
+    const totalSeconds = Math.max(0, Math.round(ms / 1000));
+    if (totalSeconds < 60) {
+        return part(Math.max(1, totalSeconds), second);
+    }
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    if (minutes < 60) {
+        if (seconds === 0)
+            return part(minutes, minute);
+        return `${part(minutes, minute)} ${part(seconds, second)}`;
+    }
+    const hours = Math.floor(minutes / 60);
+    const remMinutes = minutes % 60;
+    if (remMinutes === 0)
+        return part(hours, hour);
+    return `${part(hours, hour)} ${part(remMinutes, minute)}`;
+}
+export function useLocalizedWorkedDuration() {
+    const t = useT();
+    const locale = useOptionalLocale()?.locale ?? "en-US";
+    return useCallback((ms) => formatWorkedDuration(ms, {
+        locale,
+        hour: t("agentChat.duration.hourShort"),
+        minute: t("agentChat.duration.minuteShort"),
+        second: t("agentChat.duration.secondShort"),
+    }), [locale, t]);
+}
+export function WorkedForSummary({ durationMs, isRunning = false, defaultOpen = false, autoCollapse = false, children, }) {
+    const t = useT();
+    const formatDuration = useLocalizedWorkedDuration();
+    const [open, setOpen] = useState(defaultOpen);
+    useEffect(() => {
+        if (defaultOpen) {
+            setOpen(true);
+        }
+        else if (autoCollapse) {
+            setOpen(false);
+        }
+    }, [autoCollapse, defaultOpen]);
+    const label = isRunning
+        ? t("agentChat.status.working")
+        : durationMs != null && durationMs >= 1000
+            ? t("agentChat.tool.workedFor", {
+                duration: formatDuration(durationMs),
+            })
+            : t("agentChat.tool.worked");
+    return (_jsxs("div", { className: "my-1 w-full", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, className: "agent-kit-density flex items-center gap-1.5 py-0.5 text-muted-foreground transition-colors hover:text-foreground", children: [_jsx("span", { className: cn(isRunning && "agent-running-shimmer"), children: label }), _jsx(IconChevronRight, { className: cn("size-3.5 shrink-0 transition-transform", open && "rotate-90") })] }), _jsx(AnimatedCollapse, { open: open, children: _jsx(WorkSummaryContentContext.Provider, { value: true, children: _jsx("div", { className: "pt-1", children: children }) }) })] }));
+}
+export function RanToolsSummary({ toolCount, motionKey = "summary", children, }) {
+    const t = useT();
+    const [open, setOpen] = useState(false);
+    const label = t("agentChat.tool.ranTools", { count: toolCount });
+    return (_jsxs("div", { className: "agent-tool-summary my-1 w-full", "data-agent-tool-summary": motionKey, children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, className: "agent-kit-density flex items-center gap-1.5 py-0.5 text-muted-foreground transition-colors hover:text-foreground", children: [_jsx("span", { className: "agent-tool-summary__label", children: label }), _jsx(IconChevronRight, { className: cn("size-3.5 shrink-0 transition-transform", open && "rotate-90") })] }), _jsx(AnimatedCollapse, { open: open, children: _jsx("div", { className: "pt-1", children: children }) })] }));
+}
+export { FilesChangedSummary };
+//# sourceMappingURL=tool-call-display.js.map