@agent-native/toolkit 0.228.0-nightly-20261111212500 → 0.228.0

package/dist/app/agentkit/react/components.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconId, IconThumbUpFilled, IconThumbUp, IconThumbDownFilled, IconThumbDown, IconActivity, IconAlertCircle, IconAlertTriangle, IconArrowDown, IconArrowFork, IconBook2, IconBrain, IconCheck, IconChevronLeft, IconChevronRight, IconCircle, IconCircleCheck, IconClock, IconCode, IconCopy, IconDots, IconFile, IconFolder, IconFileText, IconCheckbox, IconMail, IconUser, IconPresentation, IconStack2, IconMessageChatbot, IconGitBranch, IconLoader2, IconMessage, IconMessageQuestion, IconPlugConnected, IconPlayerPause, IconPlayerPlay, IconPencil, IconRefresh, IconSearch, IconTerminal2, IconChecklist, IconBolt, IconPointFilled, IconTool, IconWorld, IconWorldDownload, IconX, } from "@tabler/icons-react";
+import { IconId, IconThumbUpFilled, IconThumbUp, IconThumbDownFilled, IconThumbDown, IconActivity, IconAlertTriangle, IconArrowDown, IconArrowFork, IconBook2, IconBrain, IconChevronLeft, IconChevronRight, IconCircle, IconCircleCheck, IconClock, IconCode, IconCopy, IconDots, IconFile, IconFolder, IconFileText, IconCheckbox, IconMail, IconUser, IconPresentation, IconStack2, IconMessageChatbot, IconGitBranch, IconLoader2, IconMessage, IconMessageQuestion, IconPlugConnected, IconPlayerPause, IconPlayerPlay, IconPencil, IconRefresh, IconSearch, IconTerminal2, IconChecklist, IconBolt, IconPointFilled, IconTool, IconWorld, IconWorldDownload, IconX, } from "@tabler/icons-react";
 import { createContext, createElement, Component, Fragment, isValidElement, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
 import { createPortal } from "react-dom";
 import ReactMarkdown from "react-markdown";
@@ -13,15 +13,25 @@ import { Skeleton } from "../../../ui/skeleton.js";
 import { ApprovalCard, approvalOptionDecision, approvalRequestKind, } from "./approval-card.js";
 import { createAgentKitComposerSubmission, snapshotComposerValue, } from "./composer-submission.js";
 import { CoreFileStorageSetupContext } from "./core-file-storage.js";
+import { AgentKitDeferClosedContentContext, useUntilFoundContent, } from "./disclosure-content.js";
 import { splitAgentKitMessageContext } from "@agent-native/agentkit";
 import { AgentKitCapabilityError, AgentKitUploadError, hasActiveAgentRuns, isCurrentAgentSuggestion, selectAgentSuggestions, } from "@agent-native/agentkit/client";
 import { inferAgentActivityKind, } from "@agent-native/agentkit/protocol";
+import { prettyLanguageName } from "../../code-highlighter.js";
+import { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockTitle, } from "./code-block.js";
 import { defaultAgentKitLabels, useAgentCapability, useAgentConnection, useAgentKit, useAgentKitBeginPendingSubmission, useAgentKitControl, useAgentKitMutation, useAgentKitPendingSubmissions, useAgentKitSelector, useAgentKitSubmissionStarting, useAgentThread, useAgentThreadLoadStatus, } from "./context.js";
+import { formatAgentKitDuration } from "./duration.js";
+import { FileChange } from "./file-change.js";
 import { scheduleIdleMount } from "./idle-mount.js";
 import { orderMessageContent } from "./message-content-order.js";
 import { AGENTKIT_CLIENT_REQUEST_ID_METADATA_KEY, agentKitTurnInProgress, pendingSubmissionFiles, } from "./pending-submissions.js";
+import { parseStackTrace, StackTrace } from "./stack-trace.js";
+import { Terminal } from "./terminal.js";
+export { formatAgentKitDuration };
+import { useRovingFocus } from "./roving-focus.js";
 import { useAgentKitStopButton } from "./stop-button.js";
 import { AgentStreamingText, usePrefersReducedMotion, useStreamingRevealOrigin, } from "./streaming-text.js";
+import { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle, } from "./trace.js";
 import { TranscriptGlide } from "./transcript-glide.js";
 import { workedForRowChevronStyle, workedForRowSummaryStyle, } from "./transcript-layout.js";
 import { registerChatThreadView } from "./viewed-threads.js";
@@ -93,7 +103,7 @@ function sameRenderedNode(previous, next) {
 }
 const AgentKitSurfaceBoundary = memo(function AgentKitSurfaceBoundary({ surface, resetKey, children, }) {
     const { labels, onRenderError, threadId } = useAgentKit();
-    return (_jsx(AgentKitErrorBoundary, { resetKey: resetKey, fallback: _jsxs("div", { className: "agentkit-error", "data-render-surface": surface, role: "alert", children: [_jsx(IconAlertCircle, { "aria-hidden": "true", className: "agentkit-icon" }), _jsx("span", { children: labels.renderError })] }), onError: (error, info) => onRenderError?.({
+    return (_jsx(AgentKitErrorBoundary, { resetKey: resetKey, fallback: _jsxs("div", { className: "agentkit-error", "data-render-surface": surface, role: "alert", children: [_jsx(IconAlertTriangle, { "aria-hidden": "true", className: "agentkit-icon" }), _jsx("span", { children: labels.renderError })] }), onError: (error, info) => onRenderError?.({
             error,
             surface,
             threadId,
@@ -157,14 +167,28 @@ function AgentLink({ href, children, }) {
     const safeHref = safeAgentHref(href);
     return safeHref ? (_jsx("a", { href: safeHref, ...agentLinkTargetProps(safeHref, origin), children: children })) : (_jsx("span", { children: children }));
 }
-function codeBlockLanguage(children) {
+function fencedCode(children) {
     const code = Array.isArray(children) ? children[0] : children;
-    if (!code || typeof code !== "object" || !("props" in code))
-        return undefined;
+    if (!isValidElement(code)) {
+        return { text: nodeText(children), language: undefined };
+    }
     const className = code.props.className;
-    if (typeof className !== "string")
-        return undefined;
-    return /(?:^|\s)language-([\w+#.-]+)/.exec(className)?.[1];
+    return {
+        text: nodeText(code.props.children),
+        language: typeof className === "string"
+            ? /(?:^|\s)language-([\w+#.-]+)/.exec(className)?.[1]
+            : undefined,
+    };
+}
+function nodeText(node) {
+    if (typeof node === "string" || typeof node === "number")
+        return `${node}`;
+    if (Array.isArray(node))
+        return node.map(nodeText).join("");
+    if (isValidElement(node)) {
+        return nodeText(node.props.children);
+    }
+    return "";
 }
 function AgentMarkdownCodeBlock({ children, node: _node, className, ...props }) {
     // The header belongs to the block, so it fades in with the code.
@@ -174,34 +198,19 @@ function AgentMarkdownCodeBlock({ children, node: _node, className, ...props })
         .filter((name) => name && name !== STREAMING_REVEAL_BLOCK_CLASS)
         .join(" ") || undefined;
     const { labels } = useAgentKit();
-    const preRef = useRef(null);
-    const [copied, setCopied] = useState(false);
-    const copiedTimer = useRef(null);
-    useEffect(() => () => {
-        if (copiedTimer.current)
-            clearTimeout(copiedTimer.current);
-    }, []);
-    const language = codeBlockLanguage(children);
-    const copy = async () => {
-        const text = preRef.current?.textContent ?? "";
-        if (!(await writeClipboardText(text)))
-            return;
-        setCopied(true);
-        if (copiedTimer.current)
-            clearTimeout(copiedTimer.current);
-        copiedTimer.current = setTimeout(() => setCopied(false), 2_000);
-    };
-    return (_jsxs("figure", { className: revealsAsBlock
-            ? `agentkit-code-block ${STREAMING_REVEAL_BLOCK_CLASS}`
-            : "agentkit-code-block", children: [_jsxs("div", { className: "agentkit-code-block-header", children: [_jsx("span", { className: "agentkit-code-block-language", "aria-hidden": "true", children: language }), _jsx(IconButton, { label: copied ? labels.codeCopied : labels.copyCode, icon: copied ? (_jsx(IconCheck, { "aria-hidden": "true", size: 16 })) : (_jsx(IconCopy, { "aria-hidden": "true", size: 16 })), size: "compact", className: "size-6", onPress: () => void copy() })] }), _jsx("pre", { ...props, className: preClassName, ref: preRef, tabIndex: 0, role: "region", "aria-label": language
-                    ? labels.codeBlockLanguage.replace("{{language}}", () => language)
-                    : labels.codeBlock, children: children })] }));
+    const { text, language } = fencedCode(children);
+    const languageName = prettyLanguageName(language);
+    return (_jsxs(CodeBlock, { className: revealsAsBlock ? STREAMING_REVEAL_BLOCK_CLASS : undefined, children: [_jsxs(CodeBlockHeader, { children: [_jsx(CodeBlockTitle, { "aria-hidden": "true", children: languageName }), _jsx(CodeBlockActions, { children: _jsx(CodeBlockCopyButton, { value: text }) })] }), _jsx(CodeBlockContent, { ...props, className: preClassName, language: language, 
+                // A group, not a region: a landmark per code block buries the real ones.
+                role: "group", "aria-label": languageName
+                    ? labels.codeBlockLanguage.replace("{{language}}", () => languageName)
+                    : labels.codeBlock, children: text })] }));
 }
 function AgentMarkdownTable({ node: _node, ...props }) {
     const { labels } = useAgentKit();
     const table = useRef(null);
     useTableColumnGlide(table);
-    return (_jsx("div", { className: "agentkit-markdown-table", tabIndex: 0, role: "region", "aria-label": labels.table, children: _jsx("table", { ref: table, ...props }) }));
+    return (_jsx("div", { className: "agentkit-markdown-table", tabIndex: 0, role: "group", "aria-label": labels.table, children: _jsx("table", { ref: table, ...props }) }));
 }
 function AgentMarkdownImage({ node: _node, src, alt, ...props }) {
     const [loaded, setLoaded] = useState(false);
@@ -331,12 +340,12 @@ function activityIcon(kind) {
     }
 }
 const DISCLOSURE_ROW_INTERACTIVE = "button, a, input, textarea, select, [role='button'], [contenteditable='true']";
-/** One summary row for every AgentKit disclosure: icon, label, then chevron. */
-export function AgentKitDisclosureSummary({ open, onToggle, label, icon, expandable = true, as = "button", controls, meta, className, rowClassName, style, chevronStyle, children, }) {
-    const content = children ?? (_jsxs(_Fragment, { children: [icon !== undefined ? (_jsx("span", { className: "agentkit-disclosure-icon-slot", "aria-hidden": "true", children: icon })) : null, _jsx("span", { className: "agentkit-disclosure-label", children: label }), expandable && as === "button" ? (_jsx(IconChevronRight, { "aria-hidden": "true", className: "agentkit-icon agentkit-disclosure-chevron", "data-open": open ? "true" : "false", style: chevronStyle })) : null] }));
+/** The label keeps its own styling; `TraceTitle` is for host rows. */
+export function AgentKitDisclosureSummary({ open, onToggle, label, icon, expandable = true, as = "button", controls, meta, className, rowClassName, style, chevronStyle, status, children, }) {
+    const content = children ?? (_jsxs(_Fragment, { children: [_jsxs(TraceLine, { status: status, children: [icon !== undefined ? _jsx(TraceIcon, { children: icon }) : null, _jsx("span", { "data-slot": "trace-title", className: "agentkit-disclosure-label", children: label })] }), expandable && as === "button" ? (_jsx(IconChevronRight, { "aria-hidden": "true", className: "agentkit-icon agentkit-disclosure-chevron", "data-open": open ? "true" : "false", style: chevronStyle })) : null] }));
     const trigger = as === "static" ? (_jsx("span", { className: ["agentkit-disclosure-summary", className]
             .filter(Boolean)
-            .join(" "), "data-expandable": "false", style: style, children: content })) : (_jsx("button", { type: "button", className: ["agentkit-disclosure-summary", className]
+            .join(" "), "data-expandable": "false", style: style, children: content })) : (_jsx("button", { type: "button", "data-slot": expandable ? "trace-collapsible-trigger" : undefined, className: ["agentkit-disclosure-summary", className]
             .filter(Boolean)
             .join(" "), "data-expandable": expandable ? "true" : "false", "aria-expanded": expandable ? open : undefined, "aria-controls": expandable ? controls : undefined, "aria-disabled": expandable ? undefined : true, tabIndex: expandable ? undefined : -1, style: style, onClick: () => {
             if (expandable)
@@ -361,36 +370,10 @@ export function AgentKitDisclosureSummary({ open, onToggle, label, icon, expanda
             }
             : undefined, children: [trigger, meta] }));
 }
-/** True while a long thread opens, so closed rows can mount later. */
-const AgentKitDeferClosedContentContext = createContext(false);
-/**
- * Mounted while closed, like <details>, so find-in-page can reveal it. In a
- * long thread, closed content mounts in the next idle period rather than with
- * the transcript, so the history paints before every collapsed step renders.
- */
+/** Mounted while closed, like <details>, so find-in-page can reveal it. */
 export function AgentKitDisclosureContent({ id, open, onReveal, children, }) {
-    const ref = useRef(null);
-    const revealRef = useRef(onReveal);
-    revealRef.current = onReveal;
-    const deferClosed = useContext(AgentKitDeferClosedContentContext);
-    const [contentMounted, setContentMounted] = useState(open || !deferClosed);
-    if (open && !contentMounted)
-        setContentMounted(true);
-    useEffect(() => {
-        if (contentMounted)
-            return;
-        return scheduleIdleMount(() => setContentMounted(true));
-    }, [contentMounted]);
-    useEffect(() => {
-        const element = ref.current;
-        if (!element || open)
-            return;
-        element.setAttribute("hidden", "until-found");
-        const reveal = () => revealRef.current?.();
-        element.addEventListener("beforematch", reveal);
-        return () => element.removeEventListener("beforematch", reveal);
-    }, [open]);
-    return (_jsx("div", { ref: ref, id: id, className: "agentkit-disclosure-content", hidden: !open, children: contentMounted || open ? children : null }));
+    const { ref, mounted } = useUntilFoundContent(open, onReveal);
+    return (_jsx("div", { ref: ref, id: id, "data-slot": "trace-collapsible-content", "data-state": open ? "open" : "closed", className: "agentkit-disclosure-content", hidden: !open, children: mounted ? children : null }));
 }
 function interactionIcon(kind) {
     const props = { "aria-hidden": true, className: "agentkit-icon" };
@@ -407,7 +390,7 @@ function interactionIcon(kind) {
         case "completed":
             return _jsx(IconCircleCheck, { ...props });
         case "failed":
-            return _jsx(IconAlertCircle, { ...props });
+            return _jsx(IconAlertTriangle, { ...props });
         case "closed":
             return _jsx(IconX, { ...props });
         default:
@@ -769,6 +752,54 @@ function formatActivityToolValue(value, labels = {}) {
     const contentLimit = Math.max(0, ACTIVITY_TOOL_VALUE_LIMIT - omissionMarker.length - 1);
     return `${formatted.slice(0, contentLimit).trimEnd()}…${omissionMarker}`;
 }
+/** Fields whose string is the program a tool runs, with its grammar. */
+const ACTIVITY_TOOL_SOURCE_FIELDS = {
+    command: "bash",
+    script: undefined,
+    code: undefined,
+};
+function formatActivityToolInput(value, labels = {}) {
+    const source = activityToolSource(value);
+    if (!source) {
+        const text = formatActivityToolValue(value, labels);
+        return text ? { text } : undefined;
+    }
+    const text = formatActivityToolValue(source.text, labels);
+    if (!text)
+        return undefined;
+    const options = Object.entries(source.rest).flatMap(([key, option]) => {
+        const formatted = formatActivityToolValue(option, labels);
+        return formatted ? [[key, formatted.replace(/\s+/g, " ")]] : [];
+    });
+    return {
+        text,
+        language: source.language,
+        ...(options.length ? { options } : {}),
+    };
+}
+function activityToolSource(value) {
+    if (!value || typeof value !== "object" || Array.isArray(value)) {
+        return undefined;
+    }
+    const input = value;
+    const field = Object.keys(ACTIVITY_TOOL_SOURCE_FIELDS).find((key) => {
+        const text = input[key];
+        // `code` also names short values such as a country or a promo code.
+        return (typeof text === "string" &&
+            (key === "command" ? text.trim() !== "" : /\n|.{40}/.test(text)));
+    });
+    if (!field)
+        return undefined;
+    const languageField = ["language", "lang"].find((key) => typeof input[key] === "string");
+    const rest = Object.fromEntries(Object.entries(input).filter(([key, option]) => key !== field && key !== languageField && option !== undefined));
+    return {
+        text: input[field],
+        language: languageField
+            ? input[languageField]
+            : ACTIVITY_TOOL_SOURCE_FIELDS[field],
+        rest,
+    };
+}
 function activityLabel(activity, workingLabel) {
     const label = readableText(activity.label);
     if (label.toLowerCase() === "processing")
@@ -778,7 +809,16 @@ function activityLabel(activity, workingLabel) {
         workingLabel);
 }
 function AgentIdentityChip({ id, name, fallbackName = "Agent", kind, status, }) {
-    return (_jsx("span", { className: "agentkit-agent", "data-agent-id": id, "data-agent-kind": kind, "data-status": status, children: _jsx("span", { className: "agentkit-agent-name", children: readableText(name) || fallbackName }) }));
+    const { labels } = useAgentKit();
+    // The chip's tint and shimmer carry the state, so it is said in words too.
+    const statusLabel = status === "working"
+        ? labels.taskStatusRunning
+        : status === "failed"
+            ? labels.taskStatusFailed
+            : status === "waiting"
+                ? labels.taskStatusAwaitingInput
+                : undefined;
+    return (_jsxs("span", { className: "agentkit-agent", "data-agent-id": id, "data-agent-kind": kind, "data-status": status, children: [status === "failed" ? (_jsx(IconAlertTriangle, { "aria-hidden": "true", className: "agentkit-icon" })) : null, _jsx("span", { className: "agentkit-agent-name", children: readableText(name) || fallbackName }), statusLabel ? (_jsx("span", { className: "agentkit-visually-hidden", children: statusLabel })) : null] }));
 }
 function defaultInteractionLabel(interaction, labels) {
     if (interaction.label)
@@ -805,8 +845,9 @@ function defaultInteractionLabel(interaction, labels) {
     }
 }
 export function AgentInteractionItem({ value: interaction, threadId, }) {
-    const { slots, registry, labels } = useAgentKit();
+    const { slots, registry, labels, formatAgentInteractionDetail } = useAgentKit();
     const thread = useAgentThreadSlice(sameAgents, threadId);
+    const showAgent = useContext(AgentSubagentStepContext) !== interaction.agentId;
     const agent = thread.agents[interaction.agentId];
     const target = interaction.targetAgentId
         ? thread.agents[interaction.targetAgentId]
@@ -832,8 +873,8 @@ export function AgentInteractionItem({ value: interaction, threadId, }) {
     const label = readableText(interaction.label);
     const visibleLabel = humanizeAgentLabel(label) ||
         defaultInteractionLabel({ ...interaction, label: undefined }, labels);
-    const detail = readableText(interaction.detail);
-    return (_jsxs("div", { className: "agentkit-agent-interaction", "data-kind": interaction.kind, "data-scope": interaction.scope, children: [_jsxs("span", { className: "agentkit-agent-interaction-head", children: [interactionIcon(interaction.kind), agent && AgentRenderer ? (_jsx(AgentRenderer, { value: agent, threadId: threadId })) : (_jsx(AgentIdentityChip, { id: interaction.agentId, name: agentName, fallbackName: labels.assistant })), _jsx("span", { className: "agentkit-agent-interaction-label", children: visibleLabel }), target && TargetRenderer ? (_jsx(TargetRenderer, { value: target, threadId: threadId })) : interaction.targetAgentId ? (_jsx(AgentIdentityChip, { id: interaction.targetAgentId, name: targetName, fallbackName: labels.assistant })) : null, object ? _jsx(ObjectRenderer, { value: object, threadId: threadId }) : null] }), detail && (!object || interaction.kind === "failed") ? (_jsx("span", { ...(interaction.kind === "failed"
+    const detail = readableText(formatAgentInteractionDetail?.(interaction) ?? interaction.detail);
+    return (_jsxs("div", { className: "agentkit-agent-interaction", "data-kind": interaction.kind, "data-scope": interaction.scope, children: [_jsxs(TraceLine, { className: "agentkit-agent-interaction-head", status: interaction.kind === "failed" ? "error" : undefined, children: [_jsx(TraceIcon, { children: interactionIcon(interaction.kind) }), !showAgent ? null : AgentRenderer ? (_jsx(AgentRenderer, { value: agent, threadId: threadId })) : (_jsx(AgentIdentityChip, { id: interaction.agentId, name: agentName, fallbackName: labels.assistant })), _jsx("span", { "data-slot": "trace-title", className: "agentkit-agent-interaction-label", children: visibleLabel }), target && TargetRenderer ? (_jsx(TargetRenderer, { value: target, threadId: threadId })) : interaction.targetAgentId ? (_jsx(AgentIdentityChip, { id: interaction.targetAgentId, name: targetName, fallbackName: labels.assistant })) : null, object ? _jsx(ObjectRenderer, { value: object, threadId: threadId }) : null] }), detail && (!object || interaction.kind === "failed") ? (_jsx("span", { ...(interaction.kind === "failed"
                     ? SESSION_REPLAY_MASK_PROPS
                     : { title: detail }), className: "agentkit-agent-interaction-detail", children: detail })) : null] }));
 }
@@ -860,11 +901,27 @@ export function AgentActivityItem({ value: activity, threadId, }) {
     const thread = useAgentThreadSlice((previous, next) => previous.agents === next.agents &&
         previous.tools[activity.id] === next.tools[activity.id]);
     const [open, setOpen] = useState(false);
+    const showAgent = useContext(AgentSubagentStepContext) !== activity.agentId;
     const agent = activity.agentId ? thread.agents[activity.agentId] : undefined;
     const agentName = resolveAgentName(thread, activity.agentId, [activity.source, activity.object], labels.assistant);
     const tool = thread.tools[activity.id];
-    const toolInput = useMemo(() => (tool ? formatActivityToolValue(tool.input, labels) : undefined), [labels, tool]);
+    const toolInput = useMemo(() => (tool ? formatActivityToolInput(tool.input, labels) : undefined), [labels, tool]);
     const toolResult = useMemo(() => (tool ? formatActivityToolValue(tool.output, labels) : undefined), [labels, tool]);
+    const stackTrace = useMemo(() => {
+        if (!tool)
+            return undefined;
+        const sources = [
+            toolResult,
+            formatActivityToolValue(tool.error?.details, labels),
+            formatActivityToolValue(tool.error?.message, labels),
+        ];
+        for (const source of sources) {
+            const parsed = source ? parseStackTrace(source) : undefined;
+            if (parsed)
+                return { parsed, fromResult: source === toolResult };
+        }
+        return undefined;
+    }, [labels, tool, toolResult]);
     const toolInputLabel = labels.toolInput;
     const toolResultLabel = labels.toolResult;
     const expandable = Boolean(activity.summary?.length || toolInput || toolResult);
@@ -877,6 +934,13 @@ export function AgentActivityItem({ value: activity, threadId, }) {
     const object = activity.object ??
         sourceObjectUnlessRepresented(activity.source, thread, [activity.agentId]);
     const failed = activity.status === "failed";
+    const statusWords = activity.status === "running"
+        ? labels.taskStatusRunning
+        : failed
+            ? labels.taskStatusFailed
+            : activity.status === "cancelled"
+                ? labels.runStopped
+                : undefined;
     const errorPreview = activityErrorPreview(activity, tool, labels);
     // A tool call names what it acted on, so rows in a group tell apart.
     const toolObject = tool && !object
@@ -885,8 +949,41 @@ export function AgentActivityItem({ value: activity, threadId, }) {
     const detail = tool || failed
         ? readableText(toolObject?.text)
         : readableText(activity.detail);
-    const summaryId = useId();
-    return (_jsxs("div", { className: "agentkit-activity-item", "data-activity-kind": activity.kind, "data-status": activity.status, "data-open": expandable && open ? "true" : "false", children: [_jsx(AgentKitDisclosureSummary, { rowClassName: "agentkit-activity-row", open: open, onToggle: () => setOpen((current) => !current), expandable: expandable, as: expandable ? "button" : "static", controls: open ? summaryId : undefined, icon: failed ? (_jsx(IconAlertTriangle, { "aria-hidden": "true", className: "agentkit-icon" })) : (_jsx(ActivitySourceIcon, { activity: activity, threadId: threadId })), label: _jsxs(_Fragment, { children: [agent && AgentRenderer ? (_jsx(AgentRenderer, { value: agent, threadId: threadId })) : activity.agentId ? (_jsx(AgentIdentityChip, { id: activity.agentId, name: agentName, fallbackName: labels.assistant })) : null, _jsx("span", { className: "agentkit-activity-label", children: activityLabel(activity, labels.working) })] }), meta: object || detail ? (_jsxs(_Fragment, { children: [object ? (_jsx(ObjectRenderer, { value: object, threadId: threadId })) : null, detail ? (_jsx("span", { ...(toolObject ? SESSION_REPLAY_MASK_PROPS : {}), title: toolObject ? undefined : detail, className: "agentkit-activity-detail", "data-kind": toolObject?.kind, children: detail })) : null] })) : null }), errorPreview ? (_jsx("span", { ...SESSION_REPLAY_MASK_PROPS, className: "agentkit-activity-error", children: errorPreview })) : null, open ? (_jsxs("div", { ...(activity.status === "failed" ? SESSION_REPLAY_BLOCK_PROPS : {}), id: summaryId, className: "agentkit-activity-summary", children: [activity.summary?.map((part, index) => {
+    const line = (_jsxs(TraceLine, { status: traceStatus(activity.status), children: [_jsx(TraceIcon, { children: failed ? (_jsx(IconAlertTriangle, { "aria-hidden": "true", className: "agentkit-icon" })) : (_jsx(ActivitySourceIcon, { activity: activity, threadId: threadId })) }), _jsxs("span", { className: "agentkit-disclosure-label", children: [!showAgent ? null : agent && AgentRenderer ? (_jsx(AgentRenderer, { value: agent, threadId: threadId })) : activity.agentId ? (_jsx(AgentIdentityChip, { id: activity.agentId, name: agentName, fallbackName: labels.assistant })) : null, _jsx(TraceTitle, { className: "agentkit-activity-label", children: activityLabel(activity, labels.working) }), statusWords ? (_jsx("span", { className: "agentkit-visually-hidden", children: statusWords })) : null] })] }));
+    const meta = (_jsxs(_Fragment, { children: [object ? _jsx(ObjectRenderer, { value: object, threadId: threadId }) : null, detail ? (_jsx(TraceDescription, { ...(toolObject ? SESSION_REPLAY_MASK_PROPS : {}), title: toolObject ? undefined : detail, className: "agentkit-activity-detail", "data-kind": toolObject?.kind, children: detail })) : null] }));
+    const errorLine = errorPreview ? (_jsx("span", { ...SESSION_REPLAY_MASK_PROPS, className: "agentkit-activity-error", children: errorPreview })) : null;
+    const rootProps = {
+        className: "agentkit-activity-item",
+        "data-activity-kind": activity.kind,
+        "data-status": activity.status,
+        "data-open": expandable && open ? "true" : "false",
+    };
+    const fileChange = tool ? fileChangeTool(tool) : undefined;
+    if (fileChange) {
+        return (_jsxs("div", { ...rootProps, children: [_jsx(FileChange, { change: fileChange, running: activity.status === "running" }), errorLine] }));
+    }
+    const terminal = tool ? terminalTool(tool) : undefined;
+    if (terminal) {
+        return (_jsx("div", { ...rootProps, children: _jsx(Terminal, { command: terminal.command, output: typeof tool?.output === "string" ? tool.output : toolResult, running: activity.status === "running", exitCode: terminal.exitCode, durationMs: terminal.durationMs, timedOut: terminal.timedOut, failed: failed }) }));
+    }
+    if (!expandable) {
+        return (_jsxs("div", { ...rootProps, children: [_jsxs("div", { className: "agentkit-disclosure-row agentkit-activity-row", children: [_jsx("span", { className: "agentkit-disclosure-summary", "data-expandable": "false", children: line }), meta] }), errorLine] }));
+    }
+    return (_jsxs(TraceCollapsible, { ...rootProps, open: open, onOpenChange: setOpen, children: [_jsxs("div", { className: "agentkit-disclosure-row agentkit-activity-row", "data-expandable": "true", onClick: (event) => {
+                    // Meta controls handle their own clicks; a text-selecting drag is no toggle.
+                    const target = event.target;
+                    if (target instanceof Element &&
+                        target.closest(DISCLOSURE_ROW_INTERACTIVE))
+                        return;
+                    if (globalThis.getSelection()?.toString())
+                        return;
+                    setOpen((current) => !current);
+                }, children: [_jsx(TraceCollapsibleTrigger, { children: line }), meta] }), errorLine, _jsxs(TraceCollapsibleContent
+            // A fresh node on each toggle: the recorder can drop a block marker
+            // changed on a node it has recorded, and the closed body stays mounted.
+            , { keepMounted: true, ...(activity.status === "failed" || !open
+                    ? SESSION_REPLAY_BLOCK_PROPS
+                    : {}), className: "agentkit-activity-summary", children: [activity.summary?.map((part, index) => {
                         const safePart = part.type === "text"
                             ? {
                                 ...part,
@@ -896,7 +993,95 @@ export function AgentActivityItem({ value: activity, threadId, }) {
                             }
                             : part;
                         return safePart.type === "text" && !safePart.text ? null : (_jsx(AgentMessagePartView, { value: safePart, threadId: threadId }, `${activity.id}-summary-${index}`));
-                    }), toolInput ? (_jsxs("div", { className: "agentkit-activity-summary-section", children: [_jsx("div", { className: "agentkit-activity-summary-label", children: toolInputLabel }), _jsx("pre", { role: "region", "aria-label": toolInputLabel, tabIndex: 0, className: "agentkit-activity-summary-value", children: toolInput })] })) : null, toolResult ? (_jsxs("div", { className: "agentkit-activity-summary-section", children: [_jsx("div", { className: "agentkit-activity-summary-label", children: toolResultLabel }), _jsx("pre", { role: "region", "aria-label": toolResultLabel, tabIndex: 0, className: "agentkit-activity-summary-value", children: toolResult })] })) : null] })) : null] }));
+                    }), toolInput ? (_jsx(ActivityToolValue, { label: toolInputLabel, value: toolInput.text, language: toolInput.language, options: toolInput.options })) : null, stackTrace ? (_jsx(StackTrace, { trace: stackTrace.parsed, defaultOpen: true })) : null, toolResult && !(stackTrace?.fromResult && stackTrace.parsed.whole) ? (_jsx(ActivityToolValue, { label: toolResultLabel, value: toolResult })) : null] }, open ? "open" : "closed")] }));
+}
+function terminalTool(tool) {
+    const metadata = tool.metadata;
+    if (metadata?.toolKind !== "bash" || typeof metadata.command !== "string") {
+        return undefined;
+    }
+    return {
+        command: metadata.command,
+        exitCode: typeof metadata.exitCode === "number" || metadata.exitCode === null
+            ? metadata.exitCode
+            : undefined,
+        durationMs: typeof metadata.durationMs === "number" ? metadata.durationMs : undefined,
+        timedOut: metadata.timedOut === true ? true : undefined,
+    };
+}
+function fileChangeTool(tool) {
+    const metadata = tool.metadata;
+    const kind = metadata?.toolKind;
+    if ((kind !== "edit" && kind !== "write") ||
+        typeof metadata?.filePath !== "string") {
+        return undefined;
+    }
+    const text = (value) => typeof value === "string" ? value : undefined;
+    return {
+        filePath: metadata.filePath,
+        kind,
+        oldText: text(metadata.oldText),
+        newText: text(metadata.newText),
+        content: text(metadata.content),
+        lineCount: typeof metadata.lineCount === "number" ? metadata.lineCount : undefined,
+        truncated: metadata.truncated === true,
+    };
+}
+function ActivityToolValue({ label, value, language: sourceLanguage, options, }) {
+    const language = useMemo(() => sourceLanguage ?? (isJsonText(value) ? "json" : undefined), [sourceLanguage, value]);
+    return (_jsxs(CodeBlock, { size: "sm", className: "agentkit-activity-summary-section", children: [_jsxs(CodeBlockHeader, { children: [_jsx(CodeBlockTitle, { children: label }), _jsx(CodeBlockActions, { children: _jsx(CodeBlockCopyButton, { value: value }) })] }), _jsx(CodeBlockContent, { wrap: true, language: language, role: "group", "aria-label": label, className: "agentkit-activity-summary-value", children: value }), options ? (_jsx(CodeBlockFooter, { children: _jsx("dl", { className: "agentkit-activity-tool-options", children: options.map(([key, option]) => (_jsxs("div", { children: [_jsx("dt", { children: key }), _jsx("dd", { children: option })] }, key))) }) })) : null] }));
+}
+function isJsonText(text) {
+    const start = text.trimStart()[0];
+    if (start !== "{" && start !== "[")
+        return false;
+    try {
+        JSON.parse(text);
+        return true;
+        // coercion-ok: text that does not parse is the predicate's false answer.
+    }
+    catch {
+        return false;
+    }
+}
+/** The same page cited twice counts as one source. */
+export function AgentSources({ citations }) {
+    const { labels } = useAgentKit();
+    const sources = useMemo(() => {
+        const seen = new Set();
+        return citations.filter((citation) => {
+            const key = safeAgentHref(citation.url) ?? `title:${citation.title}`;
+            if (seen.has(key))
+                return false;
+            seen.add(key);
+            return true;
+        });
+    }, [citations]);
+    const label = (sources.length === 1
+        ? labels.workStepSourcesOne
+        : labels.workStepSourcesOther).replace("{{count}}", () => `${sources.length}`);
+    return (_jsx(Trace, { className: "agentkit-sources", children: _jsxs(TraceCollapsible, { children: [_jsx(TraceCollapsibleTrigger, { children: _jsxs(TraceLine, { children: [_jsx(TraceIcon, { children: _jsx(IconWorld, { "aria-hidden": "true", className: "agentkit-icon" }) }), _jsx("span", { className: "agentkit-disclosure-label", children: label })] }) }), _jsx(TraceCollapsibleContent, { keepMounted: true, children: _jsx("ul", { className: "agentkit-sources-list", children: sources.map((source, index) => (_jsx("li", { children: _jsx(AgentLink, { href: source.url, children: _jsxs(TraceLine, { children: [_jsx(TraceIcon, { children: _jsx(IconWorld, { "aria-hidden": "true", className: "agentkit-icon" }) }), _jsx(TraceTitle, { children: sourceTitle(source) })] }) }) }, `${index}:${source.url ?? source.title}`))) }) })] }) }));
+}
+function sourceTitle(source) {
+    const title = readableText(source.title);
+    if (title)
+        return title;
+    const href = safeAgentHref(source.url);
+    if (!href)
+        return source.title;
+    try {
+        return new URL(href).hostname;
+    }
+    catch {
+        return href;
+    }
+}
+function traceStatus(status) {
+    return status === "running"
+        ? "running"
+        : status === "failed"
+            ? "error"
+            : undefined;
 }
 function ActivitySourceIcon({ activity, threadId, compact = false, }) {
     const { registry } = useAgentKit();
@@ -981,26 +1166,6 @@ function workedSummaryLabel(durationMs, labels, formatDuration) {
         ? labels.workedFor.replace("{{duration}}", () => formatDuration(durationMs))
         : labels.worked;
 }
-export function formatAgentKitDuration(ms, units = {}) {
-    const hour = units.hour ?? "h";
-    const minute = units.minute ?? "m";
-    const second = units.second ?? "s";
-    const totalSeconds = Math.max(0, Math.round(ms / 1_000));
-    if (totalSeconds < 60)
-        return `${Math.max(1, totalSeconds)}${second}`;
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = totalSeconds % 60;
-    if (minutes < 60) {
-        return seconds === 0
-            ? `${minutes}${minute}`
-            : `${minutes}${minute} ${seconds}${second}`;
-    }
-    const hours = Math.floor(minutes / 60);
-    const remainingMinutes = minutes % 60;
-    return remainingMinutes === 0
-        ? `${hours}${hour}`
-        : `${hours}${hour} ${remainingMinutes}${minute}`;
-}
 function isVisibleReasoningPart(part) {
     return (part.type === "reasoning" &&
         part.visibility !== "hidden" &&
@@ -1527,7 +1692,7 @@ export const AgentActivityGroup = memo(function AgentActivityGroup({ runId, afte
             AgentActivityItem;
         return _jsx(Renderer, { value: call.activity, threadId: threadId }, call.id);
     };
-    return (_jsxs(_Fragment, { children: [resultCards, hasExpandableActivity || activelyWorking ? (_jsx(AgentWorkDisclosure, { label: baseSummaryLabel, failedCount: failedCount, icon: summaryIcon, running: visiblyRunning, expandable: hasExpandableActivity, runId: runId, messageId: messageId, current: currentActivity ? (_jsxs("span", { className: "agentkit-activities-current", "data-running": "true", "data-agentkit-current-activity": "true", children: [_jsx(ActivitySourceIcon, { activity: currentActivity, threadId: threadId, compact: true }), _jsx("span", { className: "agentkit-activities-current-label agent-running-shimmer", children: currentActivityLabel })] })) : null, currentLabel: currentActivity ? (_jsx("span", { className: "agentkit-activities-current", "data-running": "true", "data-agentkit-current-activity": "true", children: _jsx("span", { className: "agentkit-activities-current-label agent-running-shimmer", children: currentActivityLabel }) })) : null, children: _jsx(AgentWorkStepList, { steps: steps, threadId: threadId, running: activelyWorking, renderCall: renderCall }) })) : (_jsx("div", { className: "agentkit-activities-static", children: summaryLabel || currentActivity ? (_jsx(AgentKitDisclosureSummary, { as: "static", className: "agentkit-activities-summary", open: false, onToggle: () => { }, expandable: false, icon: summaryIcon, label: summaryLabel ? (_jsx("span", { className: "agentkit-activities-label", children: summaryLabel })) : (_jsx("span", { className: "agentkit-activities-current", "data-running": "true", "data-agentkit-current-activity": "true", children: _jsx("span", { className: "agentkit-activities-current-label agent-running-shimmer", children: currentActivityLabel }) })) })) : null }))] }));
+    return (_jsxs(_Fragment, { children: [resultCards, hasExpandableActivity || activelyWorking ? (_jsx(AgentWorkDisclosure, { label: baseSummaryLabel, failedCount: failedCount, icon: summaryIcon, running: visiblyRunning, expandable: hasExpandableActivity, runId: runId, messageId: messageId, current: currentActivity ? (_jsxs("span", { className: "agentkit-activities-current", "data-running": "true", "data-agentkit-current-activity": "true", children: [_jsx(ActivitySourceIcon, { activity: currentActivity, threadId: threadId, compact: true }), _jsx("span", { className: "agentkit-activities-current-label agent-running-shimmer", children: currentActivityLabel })] })) : null, currentLabel: currentActivity ? (_jsx("span", { className: "agentkit-activities-current", "data-running": "true", "data-agentkit-current-activity": "true", children: _jsx("span", { className: "agentkit-activities-current-label agent-running-shimmer", children: currentActivityLabel }) })) : null, children: _jsx(AgentWorkStepList, { steps: steps, threadId: threadId, running: activelyWorking, renderCall: renderCall }) })) : (_jsx("div", { className: "agentkit-activities-static", children: summaryLabel || currentActivity ? (_jsx(AgentKitDisclosureSummary, { as: "static", className: "agentkit-activities-summary", open: false, onToggle: () => { }, expandable: false, status: summaryLabel ? undefined : "running", icon: summaryIcon, label: summaryLabel ? (_jsx("span", { className: "agentkit-activities-label", children: summaryLabel })) : (_jsx("span", { className: "agentkit-activities-current", "data-running": "true", "data-agentkit-current-activity": "true", children: _jsx("span", { className: "agentkit-activities-current-label agent-running-shimmer", children: currentActivityLabel }) })) })) : null }))] }));
 });
 const WORK_STEP_PREVIEW_COUNT = 6;
 const WORK_GROUP_PREVIEW_COUNT = 4;
@@ -1642,7 +1807,7 @@ function AgentWorkGroupRow({ group, threadId, renderCall, }) {
             ]))
         : undefined;
     const reason = group.reason ? readableText(group.reason) : "";
-    return (_jsxs("div", { className: "agentkit-work-group", "data-verb": group.verb, "data-failed": group.failed ? "true" : undefined, "data-running": group.running ? "true" : undefined, "data-open": open ? "true" : "false", children: [_jsx(AgentKitDisclosureSummary, { rowClassName: "agentkit-activity-row agentkit-work-group-row", open: open, onToggle: () => setOpen((current) => !current), controls: contentId, icon: group.failed ? (_jsx(IconAlertTriangle, { "aria-hidden": "true", className: "agentkit-icon" })) : ((source?.icon ??
+    return (_jsxs("div", { className: "agentkit-work-group", "data-verb": group.verb, "data-failed": group.failed ? "true" : undefined, "data-running": group.running ? "true" : undefined, "data-open": open ? "true" : "false", children: [_jsx(AgentKitDisclosureSummary, { rowClassName: "agentkit-activity-row agentkit-work-group-row", open: open, onToggle: () => setOpen((current) => !current), controls: contentId, status: group.failed ? "error" : group.running ? "running" : undefined, icon: group.failed ? (_jsx(IconAlertTriangle, { "aria-hidden": "true", className: "agentkit-icon" })) : ((source?.icon ??
                     workVerbIcon(group.verb) ??
                     activityIcon(activity.kind))), label: _jsxs(_Fragment, { children: [agent && AgentRenderer ? (_jsx(AgentRenderer, { value: agent, threadId: threadId })) : activity.agentId ? (_jsx(AgentIdentityChip, { id: activity.agentId, name: resolveAgentName(thread, activity.agentId, [activity.source, activity.object], labels.assistant), fallbackName: labels.assistant })) : null, _jsx("span", { className: "agentkit-activity-label agentkit-work-group-label", children: label }), group.verb === "used" && !group.failed && count > 1 ? (_jsxs("span", { className: "agentkit-activity-cluster-count", children: ["\u00D7", count] })) : null] }), meta: reason || group.objects.length || reference ? (_jsxs("span", { className: "agentkit-work-group-meta", children: [reason ? (_jsx("span", { ...SESSION_REPLAY_MASK_PROPS, className: "agentkit-work-failure-reason", children: reason })) : null, _jsx(AgentWorkObjects, { objects: group.objects }), reference ? (_jsx(ObjectRenderer, { value: reference, threadId: threadId })) : null] })) : null }), _jsx(AgentKitDisclosureContent, { id: contentId, open: open, onReveal: () => setOpen(true), children: _jsx("div", { className: "agentkit-activity-cluster-items", children: group.calls.map(renderCall) }) })] }));
 }
@@ -1691,7 +1856,7 @@ function AgentWorkStepItem({ step, plain, threadId, renderCall, }) {
         ? step.groups
         : step.groups.filter((group, index) => index < WORK_GROUP_PREVIEW_COUNT || group.failed);
     const hiddenGroups = step.groups.length - groups.length;
-    return (_jsxs("li", { className: "agentkit-work-step", "data-running": step.running ? "true" : undefined, "data-untitled": step.title ? undefined : "true", "data-open": open ? "true" : "false", children: [plain ? null : (_jsx("span", { className: "agentkit-work-step-marker", "aria-hidden": "true", children: _jsx(IconPointFilled, { className: "agentkit-icon" }) })), _jsxs("div", { className: "agentkit-work-step-content", children: [title ? (_jsx(AgentKitDisclosureSummary, { className: "agentkit-work-step-title", open: open, onToggle: () => setOpen((current) => !current), expandable: hasBody, as: hasBody ? "button" : "static", controls: hasBody ? bodyId : undefined, label: _jsx("span", { className: "agentkit-work-step-label", "data-active": step.active ? "true" : undefined, children: title }) })) : null, hasBody ? (_jsx(AgentKitDisclosureContent, { id: bodyId, open: open, onReveal: () => setOpen(true), children: _jsx("div", { className: "agentkit-reasoning-content agentkit-work-step-body", children: ReasoningRenderer ? (_jsx(AgentKitWorkStepBodyContext.Provider, { value: true, children: _jsx(ReasoningRenderer, { value: { type: "reasoning", text: step.reasoning ?? "" }, threadId: threadId, active: step.active, resetKey: `${threadId}:${step.key}` }) })) : (_jsx(AgentMarkdown, { text: step.body, streaming: step.active })) }) })) : null, step.groups.length ? (_jsxs("ul", { ref: groupsRef, className: "agentkit-work-groups", role: "list", children: [groups.map((group) => (_jsx("li", { children: group.standalone ||
+    return (_jsxs("li", { className: "agentkit-work-step", "data-running": step.running ? "true" : undefined, "data-untitled": step.title ? undefined : "true", "data-open": open ? "true" : "false", children: [plain ? null : (_jsx("span", { className: "agentkit-work-step-marker", "aria-hidden": "true", children: _jsx(IconPointFilled, { className: "agentkit-icon" }) })), _jsxs("div", { className: "agentkit-work-step-content", children: [title ? (_jsx(AgentKitDisclosureSummary, { className: "agentkit-work-step-title", open: open, onToggle: () => setOpen((current) => !current), status: step.active ? "running" : undefined, expandable: hasBody, as: hasBody ? "button" : "static", controls: hasBody ? bodyId : undefined, label: _jsx("span", { className: "agentkit-work-step-label", "data-active": step.active ? "true" : undefined, children: title }) })) : null, hasBody ? (_jsx(AgentKitDisclosureContent, { id: bodyId, open: open, onReveal: () => setOpen(true), children: _jsx("div", { className: "agentkit-reasoning-content agentkit-work-step-body", children: ReasoningRenderer ? (_jsx(AgentKitWorkStepBodyContext.Provider, { value: true, children: _jsx(ReasoningRenderer, { value: { type: "reasoning", text: step.reasoning ?? "" }, threadId: threadId, active: step.active, resetKey: `${threadId}:${step.key}` }) })) : (_jsx(AgentMarkdown, { text: step.body, streaming: step.active })) }) })) : null, step.groups.length ? (_jsxs("ul", { ref: groupsRef, className: "agentkit-work-groups", role: "list", children: [groups.map((group) => (_jsx("li", { children: group.standalone ||
                                     (group.verb === "used" &&
                                         !group.failed &&
                                         group.calls.length === 1) ? (group.calls.map(renderCall)) : (_jsx(AgentWorkGroupRow, { group: group, threadId: threadId, renderCall: renderCall })) }, group.key))), hiddenGroups ? (_jsx("li", { children: _jsxs("button", { type: "button", className: "agentkit-disclosure-summary agentkit-work-more", onClick: () => {
@@ -1756,7 +1921,7 @@ function AgentWorkDisclosure({ label, failedCount = 0, icon, running, expandable
     // The row stays one mounted trigger from "Thinking" through the first
     // activity, so it never flickers; until then it is not a tab stop. Finished
     // work with nothing to expand is text, not a disabled button.
-    const disclosure = (_jsxs("div", { className: "agentkit-activities", "data-running": running ? "true" : undefined, "data-expandable": expandable ? "true" : "false", "data-open": open ? "true" : "false", children: [_jsx(AgentKitDisclosureSummary, { as: expandable || running ? "button" : "static", className: "agentkit-activities-summary", rowClassName: "agentkit-activities-row", open: open, onToggle: () => setOpen((value) => !value), expandable: expandable, controls: contentId, style: workedForRowSummaryStyle(workedForRowLayout), chevronStyle: workedForRowChevronStyle(workedForRowLayout), icon: icon, label: summaryLabel, children: summaryContent }), _jsxs(AgentKitDisclosureContent, { id: contentId, open: open, onReveal: expandable ? () => setOpen(true) : undefined, children: [runId && expandable && !running ? (_jsx(AgentRunDetails, { runId: runId, messageId: messageId, open: open })) : null, children] })] }));
+    const disclosure = (_jsxs("div", { className: "agentkit-activities", "data-running": running ? "true" : undefined, "data-expandable": expandable ? "true" : "false", "data-open": open ? "true" : "false", children: [_jsx(AgentKitDisclosureSummary, { as: expandable || running ? "button" : "static", className: "agentkit-activities-summary", rowClassName: "agentkit-activities-row", open: open, onToggle: () => setOpen((value) => !value), status: running ? "running" : undefined, expandable: expandable, controls: contentId, style: workedForRowSummaryStyle(workedForRowLayout), chevronStyle: workedForRowChevronStyle(workedForRowLayout), icon: icon, label: summaryLabel, children: summaryContent }), _jsxs(AgentKitDisclosureContent, { id: contentId, open: open, onReveal: expandable ? () => setOpen(true) : undefined, children: [runId && expandable && !running ? (_jsx(AgentRunDetails, { runId: runId, messageId: messageId, open: open })) : null, children] })] }));
     // A reply's work sits on its footer line, live or finished, so the finish
     // never moves it.
     return footerHost ? createPortal(disclosure, footerHost) : disclosure;
@@ -1764,7 +1929,7 @@ function AgentWorkDisclosure({ label, failedCount = 0, icon, running, expandable
 function AgentReasoningPartDisclosure({ label, text, active, resetKey, }) {
     const [open, setOpen] = useState(false);
     const contentId = useId();
-    return (_jsxs("div", { className: "agentkit-reasoning", "data-active": active ? "true" : undefined, "data-open": open ? "true" : "false", children: [_jsx(AgentKitDisclosureSummary, { className: "agentkit-reasoning-summary", open: open, onToggle: () => setOpen((value) => !value), controls: contentId, icon: activityIcon("reasoning"), label: _jsx("span", { className: "agentkit-reasoning-label", children: label }) }), _jsx(AgentKitDisclosureContent, { id: contentId, open: open, onReveal: () => setOpen(true), children: _jsx("div", { className: "agentkit-reasoning-content", children: _jsx(AgentStreamingText, { text: text, active: active, resetKey: resetKey, children: (visibleText) => (_jsx(AgentMarkdown, { text: visibleText, streaming: active || visibleText !== text })) }) }) })] }));
+    return (_jsxs("div", { className: "agentkit-reasoning", "data-active": active ? "true" : undefined, "data-open": open ? "true" : "false", children: [_jsx(AgentKitDisclosureSummary, { className: "agentkit-reasoning-summary", open: open, onToggle: () => setOpen((value) => !value), controls: contentId, status: active ? "running" : undefined, icon: activityIcon("reasoning"), label: _jsx("span", { className: "agentkit-reasoning-label", children: label }) }), _jsx(AgentKitDisclosureContent, { id: contentId, open: open, onReveal: () => setOpen(true), children: _jsx("div", { className: "agentkit-reasoning-content", children: _jsx(AgentStreamingText, { text: text, active: active, resetKey: resetKey, children: (visibleText) => (_jsx(AgentMarkdown, { text: visibleText, streaming: active || visibleText !== text })) }) }) })] }));
 }
 /** A reply's own reasoning as work steps, as a turn with tool calls lists it. */
 function AgentReasoningSteps({ message, threadId, active, }) {
@@ -1781,12 +1946,28 @@ function AgentReasoningSteps({ message, threadId, active, }) {
         : [])), [active, message]);
     return (_jsx(AgentWorkStepList, { steps: steps, threadId: threadId, running: active, renderCall: () => null }));
 }
-export function AgentCollaborationFeed({ runId, afterSequence, throughSequence, }) {
-    const { threadId, slots, registry, labels } = useAgentKit();
-    const thread = useAgentThreadSlice((previous, next) => sameRunWork(previous, next, runId));
-    const runEvents = agentRunEvents(thread, runId);
+function collaborationSubjectId(entry, thread) {
+    const isPrimary = (id) => id !== undefined && thread.agents[id]?.kind === "primary";
+    if (entry.type === "activity") {
+        const id = entry.value.agentId;
+        return id && !isPrimary(id) ? id : undefined;
+    }
+    const { agentId, targetAgentId } = entry.value;
+    if (isPrimary(agentId)) {
+        return targetAgentId && !isPrimary(targetAgentId)
+            ? targetAgentId
+            : undefined;
+    }
+    return agentId;
+}
+/** Each delegated agent's entries fold into one item where it first appears. */
+function agentCollaborationItems(thread, runEvents, labels, range) {
     const entries = new Map();
+    const firstSequence = new Map();
+    const order = [];
     const delegatedAgentIds = new Map();
+    // A delegated agent's own tool calls leave the parent's work for its step.
+    const delegatedToolAgentIds = new Map();
     for (const event of runEvents) {
         if (event.type === "activity.started" ||
             event.type === "activity.updated" ||
@@ -1796,15 +1977,18 @@ export function AgentCollaborationFeed({ runId, afterSequence, throughSequence,
             if (agentId)
                 delegatedAgentIds.set(event.activity.id, agentId);
         }
+        if (event.type === "tool.started" || event.type === "tool.updated") {
+            const agentId = event.toolCall.agentId ?? thread.tools[event.toolCall.id]?.agentId;
+            if (agentId)
+                delegatedToolAgentIds.set(event.toolCall.id, agentId);
+        }
     }
-    const firstSequence = new Map();
-    const order = [];
     const remember = (key, sequence, entry) => {
         if (!entries.has(key)) {
             order.push(key);
             firstSequence.set(key, sequence);
         }
-        entries.set(key, entry);
+        entries.set(key, { ...entry, sequence });
     };
     for (const event of runEvents) {
         if (event.type === "agent.interaction") {
@@ -1825,18 +2009,341 @@ export function AgentCollaborationFeed({ runId, afterSequence, throughSequence,
                 value: { ...activity, agentId },
             });
         }
+        const toolId = event.type === "tool.started" || event.type === "tool.updated"
+            ? event.toolCall.id
+            : event.type === "tool.delta"
+                ? event.toolCallId
+                : undefined;
+        const toolAgentId = toolId ? delegatedToolAgentIds.get(toolId) : undefined;
+        if (toolId && toolAgentId) {
+            const tool = toolId in thread.tools
+                ? thread.tools[toolId]
+                : event.type === "tool.started" || event.type === "tool.updated"
+                    ? event.toolCall
+                    : undefined;
+            if (tool) {
+                remember(`tool:${toolId}`, event.sequence, {
+                    type: "activity",
+                    value: { ...toolToActivity(tool, labels), agentId: toolAgentId },
+                });
+            }
+        }
     }
-    const selectedOrder = order.filter((key) => {
+    const items = [];
+    const subagents = new Map();
+    for (const key of order) {
         const sequence = firstSequence.get(key);
-        return (sequence !== undefined &&
-            sequenceInRange(sequence, { afterSequence, throughSequence }));
+        const entry = entries.get(key);
+        if (!entry || sequence === undefined || !sequenceInRange(sequence, range)) {
+            continue;
+        }
+        const agentId = collaborationSubjectId(entry, thread);
+        if (!agentId) {
+            items.push({ type: "entry", key, entry });
+            continue;
+        }
+        const grouped = subagents.get(agentId);
+        if (grouped) {
+            grouped.push(entry);
+            continue;
+        }
+        const created = [entry];
+        subagents.set(agentId, created);
+        items.push({
+            type: "subagent",
+            key: `subagent:${agentId}`,
+            agentId,
+            entries: created,
+        });
+    }
+    return items;
+}
+/** The one task a Subagent step shows: the agent's active task, else its first. */
+function subagentStepTask(thread, agentId) {
+    const agent = agentId in thread.agents ? thread.agents[agentId] : undefined;
+    return Object.values(thread.tasks).find((candidate) => candidate.assignedAgentId === agentId &&
+        (agent?.activeTaskId === undefined ||
+            candidate.id === agent.activeTaskId));
+}
+/** Tasks the Subagent steps in this range of a run show. */
+function subagentStepTaskIds(thread, runId, labels, range) {
+    const ids = new Set();
+    for (const item of agentCollaborationItems(thread, agentRunEvents(thread, runId), labels, range)) {
+        if (item.type !== "subagent")
+            continue;
+        const task = subagentStepTask(thread, item.agentId);
+        if (task)
+            ids.add(task.id);
+    }
+    return ids;
+}
+/** Set inside a Subagent step, so its rows do not repeat the agent's chip. */
+const AgentSubagentStepContext = createContext(undefined);
+const SUBAGENT_LIFECYCLE_KINDS = new Set([
+    "started",
+    "resumed",
+    "delegated",
+    "paused",
+    "completed",
+    "failed",
+    "closed",
+]);
+function subagentState(agent, entries) {
+    switch (agent?.status) {
+        case "waiting":
+        case "paused":
+            return "paused";
+        case "completed":
+            return "completed";
+        case "failed":
+            return "failed";
+        case "closed":
+            return "closed";
+        case "idle":
+        case "working":
+        case undefined:
+            break;
+    }
+    // Status can stay "working" past its last event; a finished call is not a finished agent.
+    const newestFirst = [...entries].sort((a, b) => b.sequence - a.sequence);
+    for (const entry of newestFirst) {
+        if (entry.type === "activity") {
+            if (entry.value.status === "running")
+                return "running";
+            continue;
+        }
+        switch (entry.value.kind) {
+            case "completed":
+                return "completed";
+            case "failed":
+                return "failed";
+            case "paused":
+                return "paused";
+            case "closed":
+                return "closed";
+            case "started":
+            case "resumed":
+            case "delegated":
+                return "running";
+            case "messaged":
+            default:
+                break;
+        }
+    }
+    if (agent?.status === "working")
+        return "running";
+    const latest = newestFirst.at(0);
+    return latest?.type === "activity" && latest.value.status === "failed"
+        ? "failed"
+        : latest?.type === "activity" && latest.value.status === "completed"
+            ? "completed"
+            : "running";
+}
+function metadataDurationMs(metadata) {
+    const value = metadata?.durationMs;
+    return typeof value === "number" && Number.isFinite(value) && value >= 0
+        ? value
+        : undefined;
+}
+function subagentDurationMs(agent, entries) {
+    const fromAgent = metadataDurationMs(agent?.metadata);
+    if (fromAgent !== undefined)
+        return fromAgent;
+    for (const entry of [...entries].sort((a, b) => b.sequence - a.sequence)) {
+        const fromEntry = metadataDurationMs(entry.value.metadata);
+        if (fromEntry !== undefined)
+            return fromEntry;
+    }
+    const started = agent?.startedAt ? Date.parse(agent.startedAt) : Number.NaN;
+    const completed = agent?.completedAt
+        ? Date.parse(agent.completedAt)
+        : Number.NaN;
+    return Number.isFinite(started) &&
+        Number.isFinite(completed) &&
+        completed >= started
+        ? completed - started
+        : undefined;
+}
+/** One row per delegated agent, with its own calls and its result inside. */
+export function AgentSubagentStep({ agentId, entries, runId, threadId, }) {
+    const { slots, registry, labels, formatWorkedForDuration, formatAgentInteractionDetail, } = useAgentKit();
+    const thread = useAgentThreadSlice((previous, next) => sameAgentsAndTasks(previous, next) &&
+        previous.tools === next.tools &&
+        previous.runs === next.runs);
+    const [open, setOpen] = useState(false);
+    const agent = agentId in thread.agents ? thread.agents[agentId] : undefined;
+    const AgentRenderer = agent
+        ? (registry.agents?.[agent.kind ?? ""] ??
+            slots.agent ??
+            AgentParticipantView)
+        : undefined;
+    const name = resolveAgentName(thread, agentId, entries.map((entry) => entry.value.source), labels.assistant);
+    const runStatus = runId === undefined ? undefined : thread.runs[runId]?.status;
+    const liveState = subagentState(agent, entries);
+    // Agents can outlive their run, so one still "working" after it settled has stopped.
+    const settledStatus = liveState !== "running"
+        ? undefined
+        : runStatus === "completed"
+            ? "completed"
+            : runStatus === "failed"
+                ? "failed"
+                : runStatus === "cancelled"
+                    ? "closed"
+                    : undefined;
+    const state = settledStatus ?? liveState;
+    const durationMs = state === "running" ? undefined : subagentDurationMs(agent, entries);
+    const duration = durationMs === undefined
+        ? undefined
+        : (formatWorkedForDuration?.(durationMs) ??
+            formatAgentKitDuration(durationMs, {
+                hour: labels.durationHourShort,
+                minute: labels.durationMinuteShort,
+                second: labels.durationSecondShort,
+            }));
+    const task = subagentStepTask(thread, agentId);
+    const taskTitle = task ? humanizeAgentLabel(task.title) : "";
+    const shownTaskTitle = taskTitle && taskTitle.toLocaleLowerCase() !== name.toLocaleLowerCase()
+        ? taskTitle
+        : "";
+    const newestFirst = [...entries].sort((a, b) => b.sequence - a.sequence);
+    const latest = (pick) => {
+        for (const entry of newestFirst) {
+            const value = pick(entry);
+            if (value !== undefined)
+                return value;
+        }
+        return undefined;
+    };
+    // A call's detail is its output, which is no headline.
+    const progress = state === "running"
+        ? latest((entry) => entry.type === "activity" &&
+            entry.value.status === "running" &&
+            !(entry.value.id in thread.tools) &&
+            readableText(entry.value.detail)
+            ? entry.value
+            : undefined)
+        : undefined;
+    const progressDetail = progress ? readableText(progress.detail) : "";
+    const failureDetail = state === "failed"
+        ? latest((entry) => entry.type === "interaction" && entry.value.kind === "failed"
+            ? readableText(formatAgentInteractionDetail?.(entry.value) ??
+                entry.value.detail) || undefined
+            : entry.type === "activity" && entry.value.status === "failed"
+                ? readableText(entry.value.detail) || undefined
+                : undefined)
+        : undefined;
+    const status = state === "running"
+        ? labels.agentWorking
+        : state === "failed"
+            ? labels.agentFailed
+            : state === "paused"
+                ? labels.agentPaused
+                : state === "closed"
+                    ? labels.agentClosed
+                    : duration
+                        ? labels.agentWorkedFor.replace("{{duration}}", () => duration)
+                        : labels.agentCompleted;
+    const content = entries.flatMap((entry) => {
+        const key = `${entry.type}:${entry.value.id}`;
+        if (entry.type === "interaction") {
+            const interaction = entry.value;
+            const Custom = registry.agentInteractions?.[interaction.kind] ??
+                slots.agentInteraction;
+            if (Custom) {
+                return [_jsx(Custom, { value: interaction, threadId: threadId }, key)];
+            }
+            // The row's own status, duration and error line already say these.
+            if (SUBAGENT_LIFECYCLE_KINDS.has(interaction.kind) &&
+                (interaction.kind === "failed" ||
+                    !(interaction.label ||
+                        interaction.detail ||
+                        interaction.object ||
+                        interaction.targetAgentId))) {
+                return [];
+            }
+            return [
+                _jsx(AgentInteractionItem, { value: interaction, threadId: threadId }, key),
+            ];
+        }
+        const activity = entry.value;
+        const Custom = registry.activities?.[activity.kind] ?? slots.activity;
+        if (Custom) {
+            return [_jsx(Custom, { value: activity, threadId: threadId }, key)];
+        }
+        if (activity.id in thread.tools) {
+            return [
+                _jsx(AgentActivityItem, { value: activity, threadId: threadId }, key),
+            ];
+        }
+        // The agent's report is the step's result, so it shows in place.
+        const summary = (activity.summary ?? []).flatMap((part, partIndex) => {
+            const safePart = part.type === "text"
+                ? {
+                    ...part,
+                    text: part.text.trim()
+                        ? formatActivityText(part.text, labels)
+                        : "",
+                }
+                : part;
+            return safePart.type === "text" && !safePart.text
+                ? []
+                : [
+                    _jsx(AgentMessagePartView, { value: safePart, threadId: threadId }, `${key}:summary:${partIndex}`),
+                ];
+        });
+        if (summary.length)
+            return summary;
+        // A summary-less "agent" activity is the status line the header carries.
+        if (activity === progress || activity.kind === "agent")
+            return [];
+        return [
+            _jsx(AgentActivityItem, { value: activity, threadId: threadId }, key),
+        ];
     });
-    if (selectedOrder.length === 0)
+    const failed = state === "failed";
+    const line = (_jsxs(TraceLine, { status: state === "running" ? "running" : failed ? "error" : undefined, children: [_jsx(TraceIcon, { children: _jsx(IconArrowFork, { "aria-hidden": "true", className: "agentkit-icon" }) }), _jsxs("span", { className: "agentkit-disclosure-label", children: [agent && AgentRenderer ? (_jsx(AgentRenderer, { value: settledStatus ? { ...agent, status: settledStatus } : agent, threadId: threadId })) : (_jsx(AgentIdentityChip, { id: agentId, name: name, fallbackName: labels.assistant, ...(failed
+                            ? { status: "failed" }
+                            : state === "running"
+                                ? { status: "working" }
+                                : {}) })), _jsx(TraceTitle, { className: "agentkit-activity-label", children: status })] })] }));
+    const detail = shownTaskTitle || progressDetail;
+    const ObjectRenderer = slots.object ?? AgentObjectReferenceView;
+    const taskObject = task
+        ? (task.object ??
+            sourceObjectUnlessRepresented(task.source, thread, [agentId]))
+        : undefined;
+    const meta = detail || taskObject ? (_jsxs(_Fragment, { children: [taskObject ? (_jsx(ObjectRenderer, { value: taskObject, threadId: threadId })) : null, detail ? (_jsx(TraceDescription, { ...SESSION_REPLAY_MASK_PROPS, className: "agentkit-activity-detail", children: detail })) : null] })) : null;
+    const errorLine = failureDetail ? (_jsx("span", { ...SESSION_REPLAY_MASK_PROPS, className: "agentkit-activity-error", children: failureDetail })) : null;
+    const rootProps = {
+        className: "agentkit-subagent-step",
+        "data-agent-id": agentId,
+        // Not data-state: the collapsible keeps its open state there.
+        "data-status": state,
+    };
+    if (!content.length) {
+        return (_jsxs("div", { ...rootProps, children: [_jsxs("div", { className: "agentkit-disclosure-row agentkit-activity-row", children: [_jsx("span", { className: "agentkit-disclosure-summary", "data-expandable": "false", children: line }), meta] }), errorLine] }));
+    }
+    return (_jsxs(TraceCollapsible, { ...rootProps, open: open, onOpenChange: setOpen, children: [_jsxs("div", { className: "agentkit-disclosure-row agentkit-activity-row", "data-expandable": "true", onClick: (event) => {
+                    const target = event.target;
+                    if (target instanceof Element &&
+                        target.closest(DISCLOSURE_ROW_INTERACTIVE))
+                        return;
+                    if (globalThis.getSelection()?.toString())
+                        return;
+                    setOpen((current) => !current);
+                }, children: [_jsx(TraceCollapsibleTrigger, { children: line }), meta] }), errorLine, _jsx(TraceCollapsibleContent, { keepMounted: true, ...(failed || !open ? SESSION_REPLAY_BLOCK_PROPS : {}), className: "agentkit-subagent-content", children: _jsx(AgentSubagentStepContext.Provider, { value: agentId, children: content }) }, open ? "open" : "closed")] }));
+}
+export function AgentCollaborationFeed({ runId, afterSequence, throughSequence, }) {
+    const { threadId, slots, registry, labels } = useAgentKit();
+    const thread = useAgentThreadSlice((previous, next) => sameRunWork(previous, next, runId));
+    const items = agentCollaborationItems(thread, agentRunEvents(thread, runId), labels, { afterSequence, throughSequence });
+    if (items.length === 0)
         return null;
-    return (_jsx("section", { className: "agentkit-agent-feed", "aria-label": labels.agents, "data-agent-collaboration-feed": "true", children: selectedOrder.map((key) => {
-            const entry = entries.get(key);
-            if (!entry)
-                return null;
+    return (_jsx("section", { className: "agentkit-agent-feed", "aria-label": labels.agents, "data-agent-collaboration-feed": "true", children: items.map((item) => {
+            if (item.type === "subagent") {
+                return (_jsx(AgentSubagentStep, { agentId: item.agentId, entries: item.entries, runId: runId, threadId: threadId }, item.key));
+            }
+            const { entry, key } = item;
             if (entry.type === "interaction") {
                 const Renderer = registry.agentInteractions?.[entry.value.kind] ??
                     slots.agentInteraction ??
@@ -1898,8 +2405,11 @@ export function AgentTaskItem({ value: task, threadId, }) {
             slots.agent ??
             AgentParticipantView)
         : undefined;
-    const progress = task.progress
-        ? `${task.progress.completed}/${task.progress.total}`
+    const taskProgress = task.progress;
+    const progress = taskProgress
+        ? labels.tasksProgress
+            .replace("{{completed}}", () => String(taskProgress.completed))
+            .replace("{{total}}", () => String(taskProgress.total))
         : undefined;
     const title = humanizeAgentLabel(task.title) ||
         (task.assignedAgentId ? agentName : labels.untitledTask);
@@ -1909,7 +2419,11 @@ export function AgentTaskItem({ value: task, threadId, }) {
     const showAgent = task.assignedAgentId &&
         title.toLocaleLowerCase() !== agentName.toLocaleLowerCase();
     const status = taskStatusPresentation(task.status, labels);
-    return (_jsxs("div", { className: "agentkit-task-row", "data-status": task.status, children: [status.icon, _jsx("span", { className: "agentkit-visually-hidden", children: status.label }), showAgent && agent && AgentRenderer ? (_jsx(AgentRenderer, { value: agent, threadId: threadId })) : showAgent && task.assignedAgentId ? (_jsx(AgentIdentityChip, { id: task.assignedAgentId, name: agentName, fallbackName: labels.assistant })) : null, _jsx("span", { className: "agentkit-task-title", children: title }), object ? _jsx(ObjectRenderer, { value: object, threadId: threadId }) : null, detail ? (_jsx("span", { className: "agentkit-task-detail", title: detail, children: detail })) : null, progress ? (_jsx("span", { className: "agentkit-task-progress", children: progress })) : null] }));
+    return (_jsxs(TraceLine, { className: "agentkit-task-row", "data-status": task.status, status: task.status === "running"
+            ? "running"
+            : task.status === "failed"
+                ? "error"
+                : undefined, children: [_jsx(TraceIcon, { children: status.icon }), _jsx("span", { className: "agentkit-visually-hidden", children: status.label }), showAgent && agent && AgentRenderer ? (_jsx(AgentRenderer, { value: agent, threadId: threadId })) : showAgent && task.assignedAgentId ? (_jsx(AgentIdentityChip, { id: task.assignedAgentId, name: agentName, fallbackName: labels.assistant })) : null, _jsx(TraceTitle, { className: "agentkit-task-title", children: title }), object ? _jsx(ObjectRenderer, { value: object, threadId: threadId }) : null, detail ? (_jsx("span", { className: "agentkit-task-detail", title: detail, children: detail })) : null, progress ? (_jsx(TraceDescription, { className: "agentkit-task-progress", children: progress })) : null] }));
 }
 export function AgentTaskGroup({ runId, afterSequence, throughSequence, }) {
     const { threadId, slots, registry, labels } = useAgentKit();
@@ -1931,14 +2445,23 @@ export function AgentTaskGroup({ runId, afterSequence, throughSequence, }) {
         }
         tasks.set(event.task.id, thread.tasks[event.task.id] ?? event.task);
     }
+    // Only the task a Subagent step shows moves out of this list.
+    const stepTaskIds = subagentStepTaskIds(thread, runId, labels, {
+        afterSequence,
+        throughSequence,
+    });
     const selectedIds = ids.filter((id) => {
         const sequence = firstSequence.get(id);
         return (sequence !== undefined &&
-            sequenceInRange(sequence, { afterSequence, throughSequence }));
+            sequenceInRange(sequence, { afterSequence, throughSequence }) &&
+            !stepTaskIds.has(id));
     });
     if (selectedIds.length === 0)
         return null;
-    return (_jsxs("div", { className: "agentkit-tasks", "data-open": open ? "true" : "false", children: [_jsx(AgentKitDisclosureSummary, { className: "agentkit-tasks-summary", open: open, onToggle: () => setOpen((value) => !value), controls: listId, icon: _jsx(IconChecklist, { "aria-hidden": "true", className: "agentkit-icon" }), label: _jsxs(_Fragment, { children: [_jsx("span", { children: labels.tasks }), _jsx("span", { className: "agentkit-tasks-count", children: selectedIds.length })] }) }), _jsx(AgentKitDisclosureContent, { id: listId, open: open, onReveal: () => setOpen(true), children: _jsx("div", { className: "agentkit-tasks-list", children: selectedIds.map((id) => {
+    const completedCount = selectedIds.filter((id) => tasks.get(id)?.status === "completed").length;
+    return (_jsxs("div", { className: "agentkit-tasks", "data-open": open ? "true" : "false", children: [_jsx(AgentKitDisclosureSummary, { className: "agentkit-tasks-summary", open: open, onToggle: () => setOpen((value) => !value), controls: listId, icon: _jsx(IconChecklist, { "aria-hidden": "true", className: "agentkit-icon" }), label: _jsxs(_Fragment, { children: [_jsx("span", { children: labels.tasks }), _jsx("span", { className: "agentkit-tasks-count", children: labels.tasksProgress
+                                .replace("{{completed}}", () => String(completedCount))
+                                .replace("{{total}}", () => String(selectedIds.length)) })] }) }), _jsx(AgentKitDisclosureContent, { id: listId, open: open, onReveal: () => setOpen(true), children: _jsx("div", { className: "agentkit-tasks-list", children: selectedIds.map((id) => {
                         const task = tasks.get(id);
                         if (!task)
                             return null;
@@ -2168,11 +2691,11 @@ export function AgentConnectionRequestCard({ request, runId, providerLabel, retr
                     : labels.connectionConnectProvider.replace("{{provider}}", () => providerName);
     const description = request.detail?.trim() ||
         (adminRequired && !terminal ? labels.connectionAdminRequired : undefined);
-    return (_jsxs(Surface, { as: "section", className: "agentkit-connection-request shadow-(--agent-kit-control-elevation)", elevation: "low", padding: "none", "data-status": request.status, "aria-labelledby": `${request.id}-title`, children: [_jsxs("div", { className: "agentkit-connection-request-copy", children: [_jsx(IconPlugConnected, { "aria-hidden": "true", className: "agentkit-icon" }), _jsxs("div", { children: [_jsx("h3", { id: `${request.id}-title`, children: title }), description ? _jsx("p", { children: description }) : null] })] }), !terminal && request.reason !== "admin_required" ? (_jsxs("div", { className: "agentkit-connection-request-actions", children: [_jsx(ActionButton, { emphasis: "outline", size: "compact", disabled: resolution.pending, onPress: () => resolve("decline"), children: labels.connectionNotNow }), _jsx(ActionButton, { className: "agentkit-primary-button", intent: "primary", size: "compact", disabled: resolution.pending || (!onConnectionRequest && !onConnect), pending: resolution.pending, onPress: () => resolve("connect"), children: resolution.pending
+    return (_jsxs(Surface, { as: "section", className: "agentkit-connection-request", elevation: "none", padding: "none", "data-status": request.status, "aria-labelledby": `${request.id}-title`, children: [_jsxs("div", { className: "agentkit-connection-request-copy", children: [_jsx(IconPlugConnected, { "aria-hidden": "true", className: "agentkit-icon" }), _jsxs("div", { children: [_jsx("h3", { id: `${request.id}-title`, children: title }), description ? _jsx("p", { children: description }) : null] })] }), !terminal && request.reason !== "admin_required" ? (_jsxs("div", { className: "agentkit-connection-request-actions", children: [_jsx(ActionButton, { emphasis: "outline", size: "compact", disabled: resolution.pending, onPress: () => resolve("decline"), children: labels.connectionNotNow }), _jsx(ActionButton, { className: "agentkit-primary-button", intent: "primary", size: "compact", disabled: resolution.pending || (!onConnectionRequest && !onConnect), pending: resolution.pending, onPress: () => resolve("connect"), children: resolution.pending
                             ? labels.connectionConnecting
                             : retry
                                 ? labels.connectionRetry
-                                : labels.connectionConnect })] })) : request.status === "failed" && (onConnectionRequest || onConnect) ? (_jsx("div", { className: "agentkit-connection-request-actions", children: _jsx(ActionButton, { emphasis: "outline", size: "compact", disabled: resolution.pending, pending: resolution.pending, onPress: () => resolve("connect"), children: labels.connectionRetry }) })) : null, resolution.error ? (_jsxs("div", { className: "agentkit-command-error", role: "alert", children: [_jsx(IconAlertCircle, { "aria-hidden": "true", className: "agentkit-icon" }), _jsx("span", { ...SESSION_REPLAY_MASK_PROPS, children: resolution.error.message })] })) : null] }));
+                                : labels.connectionConnect })] })) : request.status === "failed" && (onConnectionRequest || onConnect) ? (_jsx("div", { className: "agentkit-connection-request-actions", children: _jsx(ActionButton, { emphasis: "outline", size: "compact", disabled: resolution.pending, pending: resolution.pending, onPress: () => resolve("connect"), children: labels.connectionRetry }) })) : null, resolution.error ? (_jsxs("div", { className: "agentkit-command-error", role: "alert", children: [_jsx(IconAlertTriangle, { "aria-hidden": "true", className: "agentkit-icon" }), _jsx("span", { ...SESSION_REPLAY_MASK_PROPS, children: resolution.error.message })] })) : null] }));
 }
 function AgentWidgetActionButton({ widget, action, threadId, }) {
     const control = useAgentKitControl(threadId);
@@ -2716,20 +3239,52 @@ function AgentMessageTimestamp({ createdAt, format, }) {
     const fallback = formatAgentMessageTimestamp(createdAt);
     return (_jsx("time", { dateTime: createdAt, title: fallback.title, children: format?.(createdAt) ?? fallback.text }));
 }
+/** Enter and Space fire a click with no pointer detail. */
+function pressedByKeyboard(event) {
+    return event?.detail === 0;
+}
+/** Keyboard presses only: focusing the composer on touch opens the on-screen keyboard. */
+function useRescueFocusToComposer(threadId) {
+    const { requestComposerFocus } = useAgentKit();
+    return useCallback(() => {
+        requestAnimationFrame(() => {
+            const active = document.activeElement;
+            if (!active || active === document.body)
+                requestComposerFocus(threadId);
+        });
+    }, [requestComposerFocus, threadId]);
+}
 /**
  * Names an icon-only message action on hover and keyboard focus. Below the
  * button, so it never covers the message it acts on.
  */
-function MessageActionButton({ title, ...props }) {
-    // A disabled button gets no pointer events, so only a native title can
-    // explain it; an enabled one shows the reason in its tooltip instead, so a
-    // degraded action never opens both.
-    const inactive = Boolean(props.disabled || props.pending);
+function MessageActionButton({ title, busy = false, unavailable = false, icon, onPress, className, ...props }) {
+    // Only a native title explains a disabled button, never also the tooltip. An
+    // unavailable one stays focusable and a press opens its tooltip: taps never hover.
+    const inactive = Boolean(props.disabled || props.pending || busy);
     const reason = inactive ? undefined : title;
-    return (_jsx(Tooltip, { content: reason ? (_jsxs(_Fragment, { children: [props.label, _jsx("span", { className: "block text-muted-foreground", children: reason })] })) : (props.label), placement: "bottom", trigger: _jsx(IconButton, { ...props, ...(inactive && title !== undefined ? { title } : {}) }) }));
+    const reasonId = useId();
+    const [tooltipOpen, setTooltipOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { open: tooltipOpen, onOpenChange: setTooltipOpen, content: reason ? (_jsxs(_Fragment, { children: [props.label, _jsx("span", { className: "block text-muted-foreground", children: reason })] })) : (props.label), placement: "bottom", trigger: _jsx(IconButton, { ...props, icon: busy ? (_jsx(IconLoader2, { "aria-hidden": "true", className: "animate-spin" })) : (icon), ...(unavailable
+                        ? {
+                            className: `${className ?? ""} aria-disabled:cursor-default aria-disabled:opacity-50`,
+                        }
+                        : className
+                            ? { className }
+                            : {}), ...(busy ? { "aria-busy": true } : {}), ...(unavailable ? { "aria-disabled": true } : {}), ...(reason ? { "aria-describedby": reasonId } : {}), onPress: (event) => {
+                        if (unavailable) {
+                            if (reason)
+                                setTooltipOpen(true);
+                            return;
+                        }
+                        if (busy)
+                            return;
+                        onPress?.(event);
+                    }, ...(inactive && title !== undefined ? { title } : {}) }) }), reason ? (_jsx("span", { id: reasonId, hidden: true, children: reason })) : null] }));
 }
 export const AgentMessageActions = memo(function AgentMessageActions({ value: message, threadId, }) {
     const { controller, labels, slots, onThreadForked, onCopyMessage, branchNavigation, } = useAgentKit();
+    const rescueFocusToComposer = useRescueFocusToComposer(threadId);
     const feedbackCapability = useAgentCapability("feedback");
     const forkingCapability = useAgentCapability("threadForking");
     const control = useAgentKitControl(threadId);
@@ -2773,6 +3328,10 @@ export const AgentMessageActions = memo(function AgentMessageActions({ value: me
     const feedbackConfirmedTimer = useRef(null);
     const requestIdCopiedTimer = useRef(null);
     const toolbarRef = useRef(null);
+    const actionsRef = useRef(null);
+    // One tab stop per message: the toolbar for a reply, the row for a sent message.
+    useRovingFocus(toolbarRef, isAssistant);
+    useRovingFocus(actionsRef, !isAssistant);
     const moreToggleRef = useRef(null);
     const secondaryActionsRef = useRef(null);
     const pendingFocusRef = useRef(null);
@@ -2903,22 +3462,21 @@ export const AgentMessageActions = memo(function AgentMessageActions({ value: me
         forkAction.error ??
         regenerateAction.error;
     const placement = isAssistant ? "inline" : undefined;
-    const copyButton = (_jsx(MessageActionButton, { label: copied ? labels.copied : labels.copy, icon: copyAction.pending ? (_jsx(IconLoader2, { "aria-hidden": "true", className: "animate-spin" })) : copied ? (_jsx(IconCircleCheck, { "aria-hidden": "true" })) : (_jsx(IconCopy, { "aria-hidden": "true" })), size: "compact", className: "size-6", "aria-busy": copyAction.pending || undefined, onPress: () => {
+    const copyButton = (_jsx(MessageActionButton, { label: copied ? labels.copied : labels.copy, icon: copyAction.pending ? (_jsx(IconLoader2, { "aria-hidden": "true", className: "animate-spin" })) : copied ? (_jsx(IconCircleCheck, { "aria-hidden": "true" })) : (_jsx(IconCopy, { "aria-hidden": "true" })), size: "compact", className: "size-6 rounded-[var(--agent-kit-radius-xs,0.25rem)]", "aria-busy": copyAction.pending || undefined, onPress: () => {
             if (copyAction.pending)
                 return;
             void copyAction.execute().catch(() => undefined);
         } }));
     const branchControls = branchNavigation && branchNavigation.count > 1 ? (_jsxs("div", { className: "agentkit-branch-navigation", role: "group", "aria-label": labels.branchPositionLabel
             .replace("{{index}}", String(branchNavigation.index))
-            .replace("{{count}}", String(branchNavigation.count)), children: [_jsx(MessageActionButton, { label: labels.previousBranch, icon: _jsx(IconChevronLeft, { "aria-hidden": "true" }), size: "compact", className: "size-6", disabled: branchNavigation.index <= 1 || branchNavigationAction.pending, pending: branchNavigationAction.pending, onPress: () => void branchNavigationAction
+            .replace("{{count}}", String(branchNavigation.count)), children: [_jsx(MessageActionButton, { label: labels.previousBranch, icon: _jsx(IconChevronLeft, { "aria-hidden": "true" }), size: "compact", className: "size-6 rounded-[var(--agent-kit-radius-xs,0.25rem)]", unavailable: branchNavigation.index <= 1, busy: branchNavigationAction.pending, onPress: () => void branchNavigationAction
                     .execute("previous")
                     .catch(() => undefined) }), _jsx("span", { "aria-hidden": "true", children: labels.branchPosition
                     .replace("{{index}}", String(branchNavigation.index))
                     .replace("{{count}}", String(branchNavigation.count)) }), _jsx("span", { className: "agentkit-visually-hidden", "aria-live": "polite", children: labels.branchPositionLabel
                     .replace("{{index}}", String(branchNavigation.index))
-                    .replace("{{count}}", String(branchNavigation.count)) }), _jsx(MessageActionButton, { label: labels.nextBranch, icon: _jsx(IconChevronRight, { "aria-hidden": "true" }), size: "compact", className: "size-6", disabled: branchNavigation.index >= branchNavigation.count ||
-                    branchNavigationAction.pending, pending: branchNavigationAction.pending, onPress: () => void branchNavigationAction.execute("next").catch(() => undefined) })] })) : null;
-    const toolbar = isAssistant ? (_jsxs("div", { ref: toolbarRef, className: "agentkit-message-toolbar", role: "group", "aria-label": labels.messageActions, "data-placement": placement, "data-latest": isLastAssistantMessage ? "true" : undefined, "data-streaming": message.status === "streaming" ? "true" : undefined, "data-expanded": moreActionsOpen ? "true" : undefined, onKeyDown: (event) => {
+                    .replace("{{count}}", String(branchNavigation.count)) }), _jsx(MessageActionButton, { label: labels.nextBranch, icon: _jsx(IconChevronRight, { "aria-hidden": "true" }), size: "compact", className: "size-6 rounded-[var(--agent-kit-radius-xs,0.25rem)]", unavailable: branchNavigation.index >= branchNavigation.count, busy: branchNavigationAction.pending, onPress: () => void branchNavigationAction.execute("next").catch(() => undefined) })] })) : null;
+    const toolbar = isAssistant ? (_jsxs("div", { ref: toolbarRef, className: "agentkit-message-toolbar", role: "toolbar", "aria-label": labels.messageActions, "data-placement": placement, "data-latest": isLastAssistantMessage ? "true" : undefined, "data-streaming": message.status === "streaming" ? "true" : undefined, "data-expanded": moreActionsOpen ? "true" : undefined, onKeyDown: (event) => {
             if (event.key !== "Escape" || !moreActionsOpen)
                 return;
             event.preventDefault();
@@ -2949,7 +3507,7 @@ export const AgentMessageActions = memo(function AgentMessageActions({ value: me
                                     const chosen = feedback === value;
                                     const renderFeedbackButton = (toggle, open, contentId) => (_jsx(MessageActionButton, { label: value === "positive"
                                             ? labels.feedbackGood
-                                            : labels.feedbackBad, icon: value === "positive" ? (chosen ? (_jsx(IconThumbUpFilled, { "aria-hidden": "true" })) : (_jsx(IconThumbUp, { "aria-hidden": "true" }))) : chosen ? (_jsx(IconThumbDownFilled, { "aria-hidden": "true" })) : (_jsx(IconThumbDown, { "aria-hidden": "true" })), size: "compact", className: "size-6", "data-message-action": `feedback-${value}`, "aria-pressed": chosen, "aria-haspopup": toggle ? "dialog" : undefined, "aria-expanded": toggle ? open : undefined, "aria-controls": toggle && open ? contentId : undefined, disabled: !feedbackCapability.enabled || feedbackAction.pending, ...(feedbackCapability.reason === undefined
+                                            : labels.feedbackBad, icon: value === "positive" ? (chosen ? (_jsx(IconThumbUpFilled, { "aria-hidden": "true" })) : (_jsx(IconThumbUp, { "aria-hidden": "true" }))) : chosen ? (_jsx(IconThumbDownFilled, { "aria-hidden": "true" })) : (_jsx(IconThumbDown, { "aria-hidden": "true" })), size: "compact", className: "size-6 rounded-[var(--agent-kit-radius-xs,0.25rem)]", "data-message-action": `feedback-${value}`, "aria-pressed": chosen, "aria-haspopup": toggle ? "dialog" : undefined, "aria-expanded": toggle ? open : undefined, "aria-controls": toggle && open ? contentId : undefined, unavailable: !feedbackCapability.enabled, busy: feedbackAction.pending, ...(feedbackCapability.reason === undefined
                                             ? {}
                                             : { title: feedbackCapability.reason }), onPress: () => {
                                             toggle?.();
@@ -2958,30 +3516,40 @@ export const AgentMessageActions = memo(function AgentMessageActions({ value: me
                                         } }, value));
                                     return value === "negative" && slots.feedbackNote ? (_jsx(slots.feedbackNote, { threadId: threadId, ...(runId ? { runId } : {}), ...(messageSeq >= 0 ? { messageSeq } : {}), renderTrigger: renderFeedbackButton }, value)) : (renderFeedbackButton());
                                 })
-                                : null] }), hasSecondaryActions ? (_jsxs("div", { ref: secondaryActionsRef, id: secondaryActionsId, className: "agentkit-message-actions-set", "data-set": "secondary", "data-active": moreActionsOpen ? "true" : "false", inert: !moreActionsOpen, children: [showRetry ? (_jsx(MessageActionButton, { label: labels.regenerateResponse, icon: _jsx(IconRefresh, { "aria-hidden": "true" }), size: "compact", className: "size-6", "data-message-action": "retry", pending: regenerateAction.pending, disabled: regenerateAction.pending ||
-                                    position.active ||
-                                    !forkingCapability.enabled, ...(forkingCapability.reason === undefined
+                                : null] }), hasSecondaryActions ? (_jsxs("div", { ref: secondaryActionsRef, id: secondaryActionsId, className: "agentkit-message-actions-set", "data-set": "secondary", "data-active": moreActionsOpen ? "true" : "false", inert: !moreActionsOpen, children: [showRetry ? (_jsx(MessageActionButton, { label: labels.regenerateResponse, icon: _jsx(IconRefresh, { "aria-hidden": "true" }), size: "compact", className: "size-6 rounded-[var(--agent-kit-radius-xs,0.25rem)]", "data-message-action": "retry", busy: regenerateAction.pending, unavailable: position.active || !forkingCapability.enabled, ...(forkingCapability.reason === undefined
                                     ? {}
-                                    : { title: forkingCapability.reason }), onPress: () => void regenerateAction.execute().catch(() => undefined) })) : null, showFork ? (_jsx(MessageActionButton, { label: labels.forkFromHere, icon: _jsx(IconArrowFork, { "aria-hidden": "true" }), size: "compact", className: "size-6", "data-message-action": "fork", pending: forkAction.pending, disabled: !forkingCapability.enabled || forkAction.pending, ...(forkingCapability.reason === undefined
+                                    : { title: forkingCapability.reason }), onPress: (event) => {
+                                    const keyboard = pressedByKeyboard(event);
+                                    void regenerateAction
+                                        .execute()
+                                        .catch(() => undefined)
+                                        // The new response replaces this toolbar.
+                                        .finally(() => {
+                                        if (keyboard)
+                                            rescueFocusToComposer();
+                                    });
+                                } })) : null, showFork ? (_jsx(MessageActionButton, { label: labels.forkFromHere, icon: _jsx(IconArrowFork, { "aria-hidden": "true" }), size: "compact", className: "size-6 rounded-[var(--agent-kit-radius-xs,0.25rem)]", "data-message-action": "fork", busy: forkAction.pending, unavailable: !forkingCapability.enabled, ...(forkingCapability.reason === undefined
                                     ? {}
-                                    : { title: forkingCapability.reason }), onPress: () => void forkAction.execute().catch(() => undefined) })) : null, requestId ? (_jsx(MessageActionButton, { label: requestIdCopied ? labels.copied : labels.copyRequestId, icon: requestIdAction.pending ? (_jsx(IconLoader2, { "aria-hidden": "true", className: "animate-spin" })) : requestIdCopied ? (_jsx(IconCircleCheck, { "aria-hidden": "true" })) : (_jsx(IconId, { "aria-hidden": "true" })), size: "compact", className: "size-6", "data-message-action": "request-id", "aria-busy": requestIdAction.pending || undefined, onPress: () => {
+                                    : { title: forkingCapability.reason }), onPress: () => void forkAction.execute().catch(() => undefined) })) : null, requestId ? (_jsx(MessageActionButton, { label: requestIdCopied ? labels.copied : labels.copyRequestId, icon: requestIdAction.pending ? (_jsx(IconLoader2, { "aria-hidden": "true", className: "animate-spin" })) : requestIdCopied ? (_jsx(IconCircleCheck, { "aria-hidden": "true" })) : (_jsx(IconId, { "aria-hidden": "true" })), size: "compact", className: "size-6 rounded-[var(--agent-kit-radius-xs,0.25rem)]", "data-message-action": "request-id", "aria-busy": requestIdAction.pending || undefined, onPress: () => {
                                     if (requestIdAction.pending)
                                         return;
                                     void requestIdAction.execute().catch(() => undefined);
                                 } })) : null] })) : null] }), hasSecondaryActions ? (_jsx(MessageActionButton, { elementRef: moreToggleRef, label: labels.moreMessageActions, icon: _jsx(IconDots, { "aria-hidden": "true" }), size: "compact", 
                 // Hover is lighter than open, the toolkit's menu-trigger pattern,
                 // so pressing it reads as a change while the pointer is still on it.
-                className: "agentkit-message-actions-toggle size-6 hover:bg-accent/60 aria-expanded:bg-accent aria-expanded:text-foreground", "data-message-actions-toggle": "", "aria-expanded": moreActionsOpen, "aria-controls": secondaryActionsId, onPress: () => setMoreActions(!moreActionsOpen, moreActionsOpen ? "toggle" : "secondary") })) : null, _jsx("span", { className: "agentkit-visually-hidden", "aria-live": "polite", children: feedbackConfirmed
+                className: "agentkit-message-actions-toggle size-6 rounded-[var(--agent-kit-radius-xs,0.25rem)] hover:bg-accent/60 aria-expanded:bg-accent aria-expanded:text-foreground", "data-message-actions-toggle": "", "aria-expanded": moreActionsOpen, "aria-controls": secondaryActionsId, onPress: () => setMoreActions(!moreActionsOpen, moreActionsOpen ? "toggle" : "secondary") })) : null, _jsx("span", { className: "agentkit-visually-hidden", "aria-live": "polite", children: feedbackConfirmed
                     ? labels.feedbackSubmitted
-                    : requestIdCopied
+                    : requestIdCopied || copied
                         ? labels.copied
                         : "" })] })) : null;
-    return (_jsxs("div", { className: "agentkit-message-actions", "data-role": message.role, "data-placement": placement, "data-latest": isLastAssistantMessage ? "true" : undefined, "data-streaming": message.status === "streaming" ? "true" : undefined, "data-expanded": moreActionsOpen ? "true" : undefined, "data-has-error": footerError ? "true" : undefined, children: [isAssistant ? (_jsxs(_Fragment, { children: [_jsx("div", { ref: workHostRef, className: "agentkit-message-work-host" }), toolbar] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "agentkit-message-actions-leading", children: [copyButton, editContext?.enabled &&
+    return (_jsxs("div", { ref: actionsRef, className: "agentkit-message-actions", "data-role": message.role, "data-placement": placement, "data-latest": isLastAssistantMessage ? "true" : undefined, "data-streaming": message.status === "streaming" ? "true" : undefined, "data-expanded": moreActionsOpen ? "true" : undefined, "data-has-error": footerError ? "true" : undefined, ...(isAssistant
+            ? {}
+            : { role: "toolbar", "aria-label": labels.messageActions }), children: [isAssistant ? (_jsxs(_Fragment, { children: [_jsx("div", { ref: workHostRef, className: "agentkit-message-work-host" }), toolbar] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "agentkit-message-actions-leading", children: [copyButton, editContext?.enabled &&
                                 message.metadata?.pendingSubmission !== true &&
                                 forkingCapability.visible &&
-                                text.trim() ? (_jsx(MessageActionButton, { label: labels.editMessage, icon: _jsx(IconPencil, { "aria-hidden": "true" }), size: "compact", className: "size-6", disabled: position.active || !forkingCapability.enabled, ...(forkingCapability.reason === undefined
+                                text.trim() ? (_jsx(MessageActionButton, { label: labels.editMessage, icon: _jsx(IconPencil, { "aria-hidden": "true" }), size: "compact", className: "size-6 rounded-[var(--agent-kit-radius-xs,0.25rem)]", unavailable: position.active || !forkingCapability.enabled, ...(forkingCapability.reason === undefined
                                     ? {}
-                                    : { title: forkingCapability.reason }), "aria-pressed": editContext.message?.id === message.id, onPress: () => editContext.setMessage(message) })) : null] }), _jsx("div", { className: "agentkit-message-actions-trailing", children: message.createdAt ? (_jsx(AgentMessageTimestamp, { createdAt: message.createdAt, format: labels.formatTimestamp })) : null })] })), footerError ? (_jsx("span", { ...SESSION_REPLAY_MASK_PROPS, className: "agentkit-command-error", role: "alert", children: footerError.message })) : null] }));
+                                    : { title: forkingCapability.reason }), "aria-pressed": editContext.message?.id === message.id, onPress: () => editContext.setMessage(message) })) : null] }), _jsx("div", { className: "agentkit-message-actions-trailing", children: message.createdAt ? (_jsx(AgentMessageTimestamp, { createdAt: message.createdAt, format: labels.formatTimestamp })) : null }), _jsx("span", { className: "agentkit-visually-hidden", "aria-live": "polite", children: copied ? labels.copied : "" })] })), footerError ? (_jsx("span", { ...SESSION_REPLAY_MASK_PROPS, className: "agentkit-command-error", role: "alert", children: footerError.message })) : null] }));
 });
 const AgentKitPostWidgetTextContext = createContext(undefined);
 function shallowEqualArrays(previous, next) {
@@ -3030,12 +3598,16 @@ export const AgentMessageView = memo(function AgentMessageView({ value: message,
     let hasSeenWidget = false;
     const renderedContent = [];
     let citationRun = [];
+    let citationParts = [];
     let citationRunKey = "";
     const flushCitations = () => {
         if (!citationRun.length)
             return;
-        renderedContent.push(_jsx("span", { className: "agentkit-citations", children: citationRun }, `citations:${citationRunKey}`));
+        renderedContent.push(
+        // A host citation renderer keeps the inline run it was written for.
+        slots.citation || registry.messageParts?.citation ? (_jsx("span", { className: "agentkit-citations", children: citationRun }, `citations:${citationRunKey}`)) : (_jsx(AgentSources, { citations: citationParts }, `citations:${citationRunKey}`)));
         citationRun = [];
+        citationParts = [];
     };
     orderedContent.forEach((item, index) => {
         const isWidget = item.type === "widget" || item.part.type === "widget";
@@ -3053,13 +3625,14 @@ export const AgentMessageView = memo(function AgentMessageView({ value: message,
             if (!citationRun.length)
                 citationRunKey = item.key;
             citationRun.push(_jsx(Fragment, { children: content }, item.key));
+            citationParts.push(item.part);
             return;
         }
         flushCitations();
         renderedContent.push(followsWidget ? (_jsx("div", { "data-post-widget-text": "true", children: content }, item.key)) : (_jsx(Fragment, { children: content }, item.key)));
     });
     flushCitations();
-    return (_jsxs("article", { className: "agentkit-message", "data-role": message.role, "data-message-id": message.id, "data-pending": message.metadata?.pendingSubmission === true ? "true" : undefined, "data-editing": editing ? "true" : undefined, "aria-label": message.role === "user" ? labels.you : labels.assistant, "aria-busy": message.status === "streaming", children: [_jsxs("div", { className: "agentkit-message-content", children: [renderedContent, attachedAnnotations.length ? (_jsx("div", { className: "agentkit-annotations", children: attachedAnnotations.map((annotation) => (_jsx(AgentMessagePartView, { value: { type: "annotation", annotation }, threadId: threadId }, annotation.id))) })) : null, Supplement ? (_jsx(Supplement, { value: visibleMessage, threadId: threadId })) : null] }), _jsx(Actions, { value: slots.messageActions ? visibleMessage : message, threadId: threadId })] }));
+    return (_jsxs("article", { className: "agentkit-message", "data-role": message.role, "data-message-id": message.id, "data-pending": message.metadata?.pendingSubmission === true ? "true" : undefined, "data-editing": editing ? "true" : undefined, "aria-label": message.role === "user" ? labels.you : labels.assistant, "aria-busy": message.status === "streaming", children: [_jsx("h2", { className: "agentkit-visually-hidden", children: message.role === "user" ? labels.you : labels.assistant }), _jsxs("div", { className: "agentkit-message-content", children: [renderedContent, attachedAnnotations.length ? (_jsx("div", { className: "agentkit-annotations", children: attachedAnnotations.map((annotation) => (_jsx(AgentMessagePartView, { value: { type: "annotation", annotation }, threadId: threadId }, annotation.id))) })) : null, Supplement ? (_jsx(Supplement, { value: visibleMessage, threadId: threadId })) : null] }), _jsx(Actions, { value: slots.messageActions ? visibleMessage : message, threadId: threadId })] }));
 });
 function stripAgentMessageContext(message) {
     const metadata = stripAgentContextMetadata(message.metadata);
@@ -3107,14 +3680,12 @@ export function AgentRunFailure({ error, runId, threadId, }) {
             setContinueFailed(true);
         });
     };
-    // A failure the user can recover from is a warning; red means it is final.
-    const tone = error.retryable === true ? "warning" : "danger";
-    const ToneIcon = tone === "warning" ? IconAlertTriangle : IconAlertCircle;
-    return (_jsxs("div", { className: "agentkit-run-failure", "data-tone": tone, "data-error-code": error.code, "data-run-id": runId, "data-thread-id": threadId, role: !superseded && latestFailure ? "alert" : undefined, children: [_jsx(ToneIcon, { "aria-hidden": "true", className: "agentkit-icon" }), _jsxs("div", { className: "agentkit-run-failure-copy", children: [_jsx("strong", { children: labels.runFailed }), _jsx("span", { ...SESSION_REPLAY_MASK_PROPS, children: error.message }), canContinue ? (_jsx("div", { className: "agentkit-error-actions", children: _jsx(ActionButton, { emphasis: "outline", size: "compact", pending: continuing, onPress: continueRun, children: labels.continueRun }) })) : null, continueFailed && !superseded ? (_jsx("span", { className: "agentkit-command-error", role: "alert", children: labels.continueRunUnavailable })) : null] })] }));
+    // Amber, not red, even when not retryable: a failed run destroys nothing.
+    return (_jsxs("div", { className: "agentkit-run-failure", "data-tone": "warning", "data-error-code": error.code, "data-run-id": runId, "data-thread-id": threadId, role: !superseded && latestFailure ? "alert" : undefined, children: [_jsx(IconAlertTriangle, { "aria-hidden": "true", className: "agentkit-icon" }), _jsxs("div", { className: "agentkit-run-failure-copy", children: [_jsx("strong", { children: labels.runFailed }), _jsx("span", { ...SESSION_REPLAY_MASK_PROPS, children: error.message }), canContinue ? (_jsx("div", { className: "agentkit-error-actions", children: _jsx(ActionButton, { emphasis: "outline", size: "compact", pending: continuing, onPress: continueRun, children: labels.continueRun }) })) : null, continueFailed && !superseded ? (_jsx("span", { className: "agentkit-command-error", role: "alert", children: labels.continueRunUnavailable })) : null] })] }));
 }
 export function AgentConnectionErrorView({ error, threadId, recover, recovering, recoveryError, dismiss, }) {
     const { labels } = useAgentKit();
-    return (_jsxs(ComposerNotice, { tone: error.retryable ? "warning" : "danger", role: "alert", noticeId: "connection-error", className: "agentkit-connection-notice", rootProps: { "data-error-code": error.code, "data-thread-id": threadId }, onDismiss: dismiss, dismissLabel: labels.dismissNotice, actions: error.retryable ? (_jsx(ActionButton, { emphasis: "outline", size: "compact", className: "h-6 px-2 text-xs", pending: recovering, onPress: () => void recover().catch(() => undefined), children: labels.reconnect })) : undefined, children: [_jsx("span", { ...SESSION_REPLAY_MASK_PROPS, children: error.message }), recoveryError ? (_jsx("span", { ...SESSION_REPLAY_MASK_PROPS, className: "block", children: recoveryError.message })) : null] }));
+    return (_jsxs(ComposerNotice, { tone: "warning", role: "alert", noticeId: "connection-error", className: "agentkit-connection-notice", rootProps: { "data-error-code": error.code, "data-thread-id": threadId }, onDismiss: dismiss, dismissLabel: labels.dismissNotice, actions: error.retryable ? (_jsx(ActionButton, { emphasis: "outline", size: "compact", className: "h-6 px-2 text-xs", pending: recovering, onPress: () => void recover().catch(() => undefined), children: labels.reconnect })) : undefined, children: [_jsx("span", { ...SESSION_REPLAY_MASK_PROPS, children: error.message }), recoveryError ? (_jsx("span", { ...SESSION_REPLAY_MASK_PROPS, className: "block", children: recoveryError.message })) : null] }));
 }
 function hasActiveRuns(thread) {
     return threadHasActiveRuns(thread);
@@ -3390,7 +3961,7 @@ inlineTextAttachments = false, beforeSend, }) {
         editContext?.setMessage(null);
         focusComposer();
     }, [editContext, focusComposer, initialText]);
-    const editingRow = editingMessage ? (_jsxs("div", { role: "group", "aria-labelledby": editingLabelId, className: "agentkit-editing-row flex h-6 min-w-0 items-center gap-2 text-xs text-muted-foreground", "data-agentkit-editing-row": "true", children: [_jsx(Tooltip, { placement: "top", align: "start", trigger: _jsxs("span", { tabIndex: 0, className: "inline-flex min-w-0 items-center gap-2 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx(IconPencil, { "aria-hidden": "true", className: "size-4 shrink-0" }), _jsx("span", { id: editingLabelId, className: "truncate", children: labels.editingMessage })] }), content: labels.editingMessageHint }), _jsx(ActionButton, { emphasis: "ghost", size: "compact", className: "-me-2 ms-auto h-6 shrink-0 px-2 text-xs", onPress: cancelEditing, children: labels.cancelEditing })] })) : null;
+    const editingRow = editingMessage ? (_jsxs("div", { role: "group", "aria-labelledby": editingLabelId, className: "agentkit-editing-row flex h-6 min-w-0 items-center gap-2 text-xs text-muted-foreground", "data-agentkit-editing-row": "true", children: [_jsx(Tooltip, { placement: "top", align: "start", trigger: _jsxs("span", { tabIndex: 0, className: "inline-flex min-w-0 items-center gap-2 rounded-[var(--agent-kit-radius-xs,0.25rem)] outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx(IconPencil, { "aria-hidden": "true", className: "size-4 shrink-0" }), _jsx("span", { id: editingLabelId, className: "truncate", children: labels.editingMessage })] }), content: labels.editingMessageHint }), _jsx(ActionButton, { emphasis: "ghost", size: "compact", className: "-me-2 ms-auto h-6 shrink-0 px-2 text-xs", onPress: cancelEditing, children: labels.cancelEditing })] })) : null;
     useEffect(() => registerComposerFocus(threadId, focusComposer), [focusComposer, registerComposerFocus, threadId]);
     // i18n-ignore: These type-level callback property names are not visible copy.
     const submitMessage = async (text, files, references, // i18n-ignore: Type-only callback tuple, not rendered copy.
@@ -3518,6 +4089,9 @@ inlineTextAttachments = false, beforeSend, }) {
                 threadId: forkedThread.id,
                 text: payload.text,
                 attachments: [...payload.attachments],
+                ...(payload.references.length
+                    ? { references: [...payload.references] }
+                    : {}),
                 options: payload.options,
                 metadata: sendMetadata,
                 onLocalSubmit,
@@ -3559,6 +4133,9 @@ inlineTextAttachments = false, beforeSend, }) {
         const message = {
             text: payload.text,
             attachments: [...payload.attachments],
+            ...(payload.references.length
+                ? { references: [...payload.references] }
+                : {}),
             options: payload.options,
             metadata: sendMetadata,
             queueWhileRunning,
@@ -3857,6 +4434,8 @@ const AGENTKIT_HISTORY_ROW_CHUNK = 16;
 const AGENTKIT_TRANSCRIPT_SCROLLBAR_IDLE_MS = 900;
 /** Outlasts the reveal's bounded drain after a run ends. */
 const AGENTKIT_TRANSCRIPT_GLIDE_AFTER_RUN_MS = 2_000;
+/** How much of the previous turn shows above an anchored message. */
+const AGENTKIT_TURN_ANCHOR_PEEK_PX = 32;
 const AGENTKIT_TRANSCRIPT_SCROLL_KEYS = new Set([
     "ArrowDown",
     "ArrowUp",
@@ -3866,13 +4445,14 @@ const AGENTKIT_TRANSCRIPT_SCROLL_KEYS = new Set([
     "PageUp",
     " ",
 ]);
-const AGENTKIT_ACTIVITY_ANNOUNCE_INTERVAL_MS = 2_000;
+// Long enough for a screen reader to finish speaking between step names.
+const AGENTKIT_ACTIVITY_ANNOUNCE_INTERVAL_MS = 10_000;
 export function isAgentKitTranscriptNearBottom(element, threshold = AGENTKIT_TRANSCRIPT_BOTTOM_THRESHOLD) {
     return (element.scrollHeight - element.clientHeight - element.scrollTop <= threshold);
 }
 /** Layout-matching placeholder for a conversation whose history is loading. */
 export function AgentKitTranscriptSkeleton({ label = defaultAgentKitLabels.loadingConversation, className, }) {
-    return (_jsxs("div", { className: `agentkit-transcript-skeleton ${className ?? ""}`, role: "status", "aria-busy": "true", children: [_jsx("span", { className: "agentkit-visually-hidden", children: label }), _jsx("div", { className: "agentkit-transcript-skeleton-user", "aria-hidden": "true", children: _jsx(Skeleton, { className: "agentkit-transcript-skeleton-bubble ms-auto h-10 w-2/5 rounded-2xl" }) }), _jsxs("div", { className: "agentkit-transcript-skeleton-assistant", "aria-hidden": "true", children: [_jsx(Skeleton, { className: "agentkit-transcript-skeleton-line h-4 w-full" }), _jsx(Skeleton, { className: "agentkit-transcript-skeleton-line h-4 w-11/12" }), _jsx(Skeleton, { className: "agentkit-transcript-skeleton-line h-4 w-3/5" })] })] }));
+    return (_jsxs("div", { className: `agentkit-transcript-skeleton ${className ?? ""}`, role: "status", "aria-busy": "true", children: [_jsx("span", { className: "agentkit-visually-hidden", children: label }), _jsx("div", { className: "agentkit-transcript-skeleton-user", "aria-hidden": "true", children: _jsx(Skeleton, { className: "agentkit-transcript-skeleton-bubble ms-auto h-11 w-2/5 rounded-[var(--agent-kit-radius-sm,0.5rem)]" }) }), _jsxs("div", { className: "agentkit-transcript-skeleton-assistant", "aria-hidden": "true", children: [_jsx(Skeleton, { className: "agentkit-transcript-skeleton-line h-4 w-full" }), _jsx(Skeleton, { className: "agentkit-transcript-skeleton-line h-4 w-11/12" }), _jsx(Skeleton, { className: "agentkit-transcript-skeleton-line h-4 w-3/5" })] })] }));
 }
 function AgentThreadUnavailable({ onStartNewChat, }) {
     const { labels } = useAgentKit();
@@ -3914,6 +4494,14 @@ function currentRunActivityLabel(thread, runId, labels) {
     }
     return labels.working;
 }
+// A run that stops to wait on the user is as much news as one that ends.
+const RUN_STATUS_ANNOUNCEMENTS = {
+    completed: "responseReady",
+    failed: "responseFailed",
+    cancelled: "runStopped",
+    awaiting_approval: "waitingForApproval",
+    awaiting_input: "waitingForInput",
+};
 /**
  * One polite status region for the whole chat. The transcript itself stays
  * aria-live="off": streamed text would otherwise be read token by token.
@@ -3924,6 +4512,8 @@ function AgentKitLiveStatus({ threadId }) {
     const runId = latestRunId(thread);
     const run = runId ? thread.runs[runId] : undefined;
     const status = run?.status;
+    // A failure with an error has its own alert; announcing it here reads it twice.
+    const failureHasAlert = status === "failed" && Boolean(run?.error);
     const running = status === "running";
     const activityText = running && runId ? currentRunActivityLabel(thread, runId, labels) : "";
     const [announcement, setAnnouncement] = useState("");
@@ -3940,14 +4530,16 @@ function AgentKitLiveStatus({ threadId }) {
         if (!runId || previous.runId !== runId || previous.status === status) {
             return;
         }
-        if (status === "completed" || status === "failed") {
-            if (pendingTimerRef.current)
-                clearTimeout(pendingTimerRef.current);
-            pendingTimerRef.current = undefined;
-            lastAnnouncedAtRef.current = Date.now();
-            setAnnouncement(status === "completed" ? labels.responseReady : labels.responseFailed);
-        }
-    }, [labels.responseFailed, labels.responseReady, runId, status]);
+        const announced = status ? RUN_STATUS_ANNOUNCEMENTS[status] : undefined;
+        if (!announced)
+            return;
+        if (pendingTimerRef.current)
+            clearTimeout(pendingTimerRef.current);
+        pendingTimerRef.current = undefined;
+        lastAnnouncedAtRef.current = Date.now();
+        // Cleared rather than left on the last step name, which is stale now.
+        setAnnouncement(failureHasAlert ? "" : labels[announced]);
+    }, [failureHasAlert, labels, runId, status]);
     useEffect(() => {
         if (!activityText)
             return;
@@ -3975,8 +4567,8 @@ function isTerminalRunStatus(status) {
 export function AgentKitEmptyState({ text, children, className, }) {
     return (_jsxs("div", { className: `agentkit-empty-state ${className ?? ""}`, "data-agentkit-empty-state": "true", children: [_jsx("p", { className: "agentkit-empty-state-greeting", children: text }), children] }));
 }
-export function AgentKitChat({ title, toolbar, composer = true, composerProps, hasRenderedMessages = false, emptyComposerPlacement = "center", autoScroll = true, transcriptLayout, expectExistingThread, onStartNewChat, className, }) {
-    const { controller, threadId, slots, registry, labels, onThreadForked, threadLoad, formatWorkedForDuration, } = useAgentKit();
+export function AgentKitChat({ title, toolbar, composer = true, composerProps, hasRenderedMessages = false, emptyComposerPlacement = "center", autoScroll = true, anchorTurns = true, transcriptLayout, expectExistingThread, onStartNewChat, className, }) {
+    const { controller, threadId, slots, registry, labels, onThreadForked, threadLoad, formatWorkedForDuration, requestComposerFocus, } = useAgentKit();
     const formatReasoningDuration = (ms) => formatWorkedForDuration?.(ms) ??
         formatAgentKitDuration(ms, {
             hour: labels.durationHourShort,
@@ -4045,6 +4637,9 @@ export function AgentKitChat({ title, toolbar, composer = true, composerProps, h
     }, [threadId]);
     useRealtimeVoiceTranscripts(controller, threadId, hasActiveRuns(thread));
     const transcriptContentRef = useRef(null);
+    const turnSpacerRef = useRef(null);
+    // Set by a message sent in this thread; a thread that opens has no anchor.
+    const turnAnchoredRef = useRef(false);
     const fileDragDepthRef = useRef(0);
     const followsTranscriptRef = useRef(true);
     const programmaticScrollTopRef = useRef(undefined);
@@ -4212,7 +4807,35 @@ export function AgentKitChat({ title, toolbar, composer = true, composerProps, h
         setTranscriptScrollbarVisible(true);
         scheduleTranscriptScrollbarHide();
     }, [scheduleTranscriptScrollbarHide]);
+    // The spacer pads what the reply has not filled, so following the bottom holds
+    // the sent message near the top. Sized imperatively so streaming never re-renders.
+    const updateTurnSpacer = useCallback(() => {
+        const transcript = transcriptRef.current;
+        const content = transcriptContentRef.current;
+        const spacer = turnSpacerRef.current;
+        if (!transcript || !content || !spacer)
+            return;
+        // No stylesheet may size the spacer: its inline height is read back as-is.
+        const current = Number.parseFloat(spacer.style.blockSize) || 0;
+        const rows = content.querySelectorAll('.agentkit-message[data-role="user"]');
+        const row = rows.length ? rows[rows.length - 1] : undefined;
+        if (!anchorTurns || !turnAnchoredRef.current || !row) {
+            if (current)
+                spacer.style.blockSize = "";
+            return;
+        }
+        const rowTop = row.getBoundingClientRect().top -
+            transcript.getBoundingClientRect().top +
+            transcript.scrollTop;
+        const anchorTop = Math.max(0, rowTop - AGENTKIT_TURN_ANCHOR_PEEK_PX);
+        const next = Math.max(0, Math.ceil(anchorTop +
+            transcript.clientHeight -
+            (transcript.scrollHeight - current)));
+        if (next !== current)
+            spacer.style.blockSize = next ? `${next}px` : "";
+    }, [anchorTurns]);
     const scrollTranscriptToBottom = useCallback(() => {
+        updateTurnSpacer();
         const transcript = transcriptRef.current;
         if (!autoScroll || !transcript || !followsTranscriptRef.current)
             return;
@@ -4220,13 +4843,14 @@ export function AgentKitChat({ title, toolbar, composer = true, composerProps, h
         if (Math.abs(transcript.scrollTop - nextScrollTop) <= 1)
             return;
         writeTranscriptScrollTop(transcript, nextScrollTop);
-    }, [autoScroll, writeTranscriptScrollTop]);
+    }, [autoScroll, updateTurnSpacer, writeTranscriptScrollTop]);
     const stopTranscriptGlide = useCallback(() => {
         transcriptGlideRef.current?.glide.stop();
     }, []);
     // Streamed growth glides to the new bottom; anything else (opening a
     // thread, a long jump) lands there at once instead of gliding through it.
     const followTranscriptToBottom = useCallback(() => {
+        updateTurnSpacer();
         const transcript = transcriptRef.current;
         if (!autoScroll || !transcript || !followsTranscriptRef.current)
             return;
@@ -4244,7 +4868,22 @@ export function AgentKitChat({ title, toolbar, composer = true, composerProps, h
             transcriptGlideRef.current = {
                 element: transcript,
                 glide: new TranscriptGlide({
-                    element: transcript,
+                    // Size the spacer first so an anchored message holds still as the reply grows.
+                    element: {
+                        get scrollTop() {
+                            return transcript.scrollTop;
+                        },
+                        set scrollTop(value) {
+                            transcript.scrollTop = value;
+                        },
+                        get scrollHeight() {
+                            updateTurnSpacer();
+                            return transcript.scrollHeight;
+                        },
+                        get clientHeight() {
+                            return transcript.clientHeight;
+                        },
+                    },
                     write: (scrollTop) => writeTranscriptScrollTop(transcript, scrollTop),
                     following: () => followsTranscriptRef.current,
                 }),
@@ -4255,6 +4894,7 @@ export function AgentKitChat({ title, toolbar, composer = true, composerProps, h
         autoScroll,
         scrollTranscriptToBottom,
         stopTranscriptGlide,
+        updateTurnSpacer,
         writeTranscriptScrollTop,
     ]);
     useEffect(() => {
@@ -4340,6 +4980,7 @@ export function AgentKitChat({ title, toolbar, composer = true, composerProps, h
         if (transcriptThreadIdRef.current !== threadId) {
             transcriptThreadIdRef.current = threadId;
             previousLastMessageIdRef.current = undefined;
+            turnAnchoredRef.current = false;
             transcriptGlidesUntilRef.current = 0;
             jumps = true;
             setTranscriptFollow(true);
@@ -4353,6 +4994,9 @@ export function AgentKitChat({ title, toolbar, composer = true, composerProps, h
         if (lastMessage?.role === "user" &&
             lastMessage.id !== previousLastMessageId) {
             jumps = true;
+            // Only a send anchors: the first render of an opened thread is not one.
+            if (previousLastMessageId !== undefined)
+                turnAnchoredRef.current = true;
             setTranscriptFollow(true);
             hideTranscriptScrollbar();
         }
@@ -4375,6 +5019,28 @@ export function AgentKitChat({ title, toolbar, composer = true, composerProps, h
         stopTranscriptGlide,
         threadId,
     ]);
+    // Anchor from the pending submission so the message never lands at the bottom first.
+    const newestPendingSubmissionId = pendingSubmissions.at(-1)?.id;
+    const previousPendingSubmissionIdRef = useRef(newestPendingSubmissionId);
+    useLayoutEffect(() => {
+        const previous = previousPendingSubmissionIdRef.current;
+        previousPendingSubmissionIdRef.current = newestPendingSubmissionId;
+        if (!autoScroll ||
+            !newestPendingSubmissionId ||
+            newestPendingSubmissionId === previous) {
+            return;
+        }
+        turnAnchoredRef.current = true;
+        setTranscriptFollow(true);
+        stopTranscriptGlide();
+        scrollTranscriptToBottom();
+    }, [
+        autoScroll,
+        newestPendingSubmissionId,
+        scrollTranscriptToBottom,
+        setTranscriptFollow,
+        stopTranscriptGlide,
+    ]);
     useLayoutEffect(() => {
         const transcript = transcriptRef.current;
         const content = transcriptContentRef.current;
@@ -5021,10 +5687,19 @@ export function AgentKitChat({ title, toolbar, composer = true, composerProps, h
             observer.disconnect();
         };
     }, [hiddenHistoryRows, writeTranscriptScrollTop]);
-    return (_jsx(ComposerNoticeScope, { children: _jsx(AgentMessageEditContext.Provider, { value: messageEditContext, children: _jsx(AgentMessageWorkHostsContext.Provider, { value: messageWorkHosts, children: _jsx(AgentKitTranscriptFollowContext.Provider, { value: followTranscriptOnSubmit, children: _jsxs("section", { "aria-label": typeof title === "string" ? title : undefined, className: `agentkit-chat ${className ?? ""}`, "data-empty": showEmptyState, "data-has-header": hasHeader, "data-empty-composer-placement": showEmptyState ? emptyComposerPlacement : "bottom", style: chatLaneStyle(transcriptLayout), onDragEnter: handleFileDragEnter, onDragOver: handleFileDragOver, onDragLeave: handleFileDragLeave, onDropCapture: handleFileDropCapture, onDrop: handleFileDrop, children: [fileDragActive ? (_jsx("div", { className: "agentkit-file-drop-overlay", role: "status", children: labels.dropFilesToAttach })) : null, hasHeader ? (_jsx(AgentKitSurfaceBoundary, { surface: "header", resetKey: threadId, children: _jsx(AgentKitRegionSlot, { slot: Header, threadId: threadId, children: _jsxs("header", { className: "agentkit-chat-header", "data-agentkit-region": "header", "data-agentkit-chat-header": "true", "data-has-title": showTitle, children: [showTitle ? (_jsx("div", { className: "agentkit-chat-title", children: title })) : null, toolbar ? (_jsx(AgentKitRegionSlot, { slot: Toolbar, threadId: threadId, children: _jsx("div", { className: "agentkit-chat-toolbar", children: toolbar }) })) : null] }) }) })) : null, _jsx("div", { ref: transcriptRef, className: "agentkit-transcript", role: "region", "aria-label": labels.conversation, "aria-live": "off", tabIndex: 0, "data-follow": "true", "data-scrollbar-visible": transcriptScrollbarVisible, onKeyDown: handleTranscriptKeyDown, onPointerDown: handleTranscriptPointerDown, onScroll: handleTranscriptScroll, onTouchMove: revealTranscriptScrollbar, onWheel: revealTranscriptScrollbar, children: _jsx("div", { ref: transcriptContentRef, className: "agentkit-transcript-content", "data-lane-offset-mode": transcriptLayout?.messageLaneOffsetMode ?? "clamped", style: transcriptContentStyle(transcriptLayout), children: _jsxs(AgentKitRegionSlot, { slot: Transcript, threadId: threadId, children: [threadLoading ? (_jsx(AgentKitTranscriptSkeleton, { label: labels.loadingConversation })) : threadMissing ? (ThreadUnavailable ? (_jsx(ThreadUnavailable, { threadId: threadId })) : (_jsx(AgentThreadUnavailable, { onStartNewChat: onStartNewChat }))) : threadLoadFailed ? (_jsx(AgentThreadLoadFailed, { retry: hostLoadRetry ??
-                                                    (() => void recovery.execute().catch(() => undefined)), retrying: hostLoadRetry ? false : recovery.pending, retryError: hostLoadRetry ? undefined : recovery.error })) : showEmptyState ? (EmptyState ? (_jsx(EmptyState, { threadId: threadId })) : (_jsx(AgentKitEmptyState, { text: labels.emptyStateText }))) : null, _jsx(AgentKitPostWidgetTextContext.Provider, { value: transcriptLayout?.postWidgetText, children: _jsx(AgentKitDeferClosedContentContext.Provider, { value: longHistory, children: renderedTranscriptItems }) }), approvalEntries.map(([approvalId, request]) => (_jsx(AgentKitSurfaceBoundary, { surface: "approval", resetKey: `${approvalId}:${runRevision(thread.approvalRunIds[approvalId] ?? "")}`, children: Approval ? (_jsx(Approval, { value: request, threadId: threadId, runId: thread.approvalRunIds[approvalId] ?? "" })) : (_jsx(AgentApprovalPrompt, { request: request, runId: thread.approvalRunIds[approvalId] ?? "" })) }, `${threadId}:${approvalId}`))), connectionRequestEntries.map(([requestId, request]) => (_jsx(AgentKitSurfaceBoundary, { surface: "connection-request", resetKey: `${requestId}:${request.status}`, children: ConnectionRequest ? (_jsx(ConnectionRequest, { value: request, threadId: threadId, runId: thread.connectionRequestRunIds[requestId] ?? "" })) : (_jsx(AgentConnectionRequestCard, { request: request, runId: thread.connectionRequestRunIds[requestId] ?? "" })) }, `${threadId}:${requestId}`))), visibleConnectionError ? (_jsx(AgentKitSurfaceBoundary, { surface: "connection-error", resetKey: `${threadId}:${visibleConnectionError.code}`, children: _jsx(ErrorState, { error: visibleConnectionError, threadId: threadId, recover: recovery.execute, recovering: recovery.pending, ...(recovery.error === undefined
-                                                        ? {}
-                                                        : { recoveryError: recovery.error }), dismiss: clearConnectionNotice }) })) : null] }) }) }), _jsx("div", { className: "agentkit-scroll-to-bottom-control", "data-visible": transcriptAwayFromBottom ? "true" : "false", "aria-hidden": transcriptAwayFromBottom ? undefined : true, inert: !transcriptAwayFromBottom, children: _jsx(IconButton, { label: labels.scrollToBottom, icon: _jsx(IconArrowDown, { "aria-hidden": "true" }), size: "compact", className: "rounded-full border border-[color:var(--agentkit-border)] bg-(--agentkit-surface) text-[color:var(--agentkit-text)] shadow-(--agent-kit-overlay-elevation) hover:bg-(--agentkit-subtle) hover:text-[color:var(--agentkit-text)]", onPress: returnTranscriptToBottom }) }), _jsx(AgentKitLiveStatus, { threadId: threadId }), composer ? (_jsx("footer", { className: "agentkit-chat-footer", children: _jsx(AgentKitSurfaceBoundary, { surface: "composer", resetKey: threadId, children: _jsx(AgentKitRegionSlot, { slot: Footer, threadId: threadId, children: slots.composer ? (_jsx(Composer, { threadId: threadId })) : (_jsx(AgentKitComposer, { ...composerProps, threadId: threadId })) }) }) })) : null] }) }) }) }) }));
+    return (_jsx(ComposerNoticeScope, { children: _jsx(AgentMessageEditContext.Provider, { value: messageEditContext, children: _jsx(AgentMessageWorkHostsContext.Provider, { value: messageWorkHosts, children: _jsx(AgentKitTranscriptFollowContext.Provider, { value: followTranscriptOnSubmit, children: _jsxs("section", { "aria-label": typeof title === "string" ? title : undefined, className: `agentkit-chat ${className ?? ""}`, "data-empty": showEmptyState, "data-has-header": hasHeader, "data-empty-composer-placement": showEmptyState ? emptyComposerPlacement : "bottom", style: chatLaneStyle(transcriptLayout), onDragEnter: handleFileDragEnter, onDragOver: handleFileDragOver, onDragLeave: handleFileDragLeave, onDropCapture: handleFileDropCapture, onDrop: handleFileDrop, children: [fileDragActive ? (_jsx("div", { className: "agentkit-file-drop-overlay", role: "status", children: labels.dropFilesToAttach })) : null, hasHeader ? (_jsx(AgentKitSurfaceBoundary, { surface: "header", resetKey: threadId, children: _jsx(AgentKitRegionSlot, { slot: Header, threadId: threadId, children: _jsxs("header", { className: "agentkit-chat-header", "data-agentkit-region": "header", "data-agentkit-chat-header": "true", "data-has-title": showTitle, children: [showTitle ? (_jsx("div", { className: "agentkit-chat-title", children: title })) : null, toolbar ? (_jsx(AgentKitRegionSlot, { slot: Toolbar, threadId: threadId, children: _jsx("div", { 
+                                                    // Host buttons carry the primitive's own radius
+                                                    // utility, which beats layered CSS.
+                                                    className: "agentkit-chat-toolbar [&_:is(button,[role=button])]:rounded-[var(--agentkit-radius-xs)]", children: toolbar }) })) : null] }) }) })) : null, composer && !showEmptyState ? (_jsx("button", { type: "button", className: "agentkit-skip-link", "data-agentkit-skip-link": "composer", onClick: () => requestComposerFocus(threadId), children: labels.skipToComposer })) : null, _jsx("div", { ref: transcriptRef, className: "agentkit-transcript", role: "region", "aria-label": labels.conversation, "aria-live": "off", tabIndex: 0, "data-follow": "true", "data-scrollbar-visible": transcriptScrollbarVisible, onKeyDown: handleTranscriptKeyDown, onPointerDown: handleTranscriptPointerDown, onScroll: handleTranscriptScroll, onTouchMove: revealTranscriptScrollbar, onWheel: revealTranscriptScrollbar, children: _jsxs("div", { ref: transcriptContentRef, className: "agentkit-transcript-content", "data-lane-offset-mode": transcriptLayout?.messageLaneOffsetMode ?? "clamped", style: transcriptContentStyle(transcriptLayout), children: [_jsxs(AgentKitRegionSlot, { slot: Transcript, threadId: threadId, children: [threadLoading ? (_jsx(AgentKitTranscriptSkeleton, { label: labels.loadingConversation })) : threadMissing ? (ThreadUnavailable ? (_jsx(ThreadUnavailable, { threadId: threadId })) : (_jsx(AgentThreadUnavailable, { onStartNewChat: onStartNewChat }))) : threadLoadFailed ? (_jsx(AgentThreadLoadFailed, { retry: hostLoadRetry ??
+                                                        (() => void recovery.execute().catch(() => undefined)), retrying: hostLoadRetry ? false : recovery.pending, retryError: hostLoadRetry ? undefined : recovery.error })) : showEmptyState ? (EmptyState ? (_jsx(EmptyState, { threadId: threadId })) : (_jsx(AgentKitEmptyState, { text: labels.emptyStateText }))) : null, _jsx(AgentKitPostWidgetTextContext.Provider, { value: transcriptLayout?.postWidgetText, children: _jsx(AgentKitDeferClosedContentContext.Provider, { value: longHistory, children: renderedTranscriptItems }) }), approvalEntries.map(([approvalId, request]) => (_jsx(AgentKitSurfaceBoundary, { surface: "approval", resetKey: `${approvalId}:${runRevision(thread.approvalRunIds[approvalId] ?? "")}`, children: Approval ? (_jsx(Approval, { value: request, threadId: threadId, runId: thread.approvalRunIds[approvalId] ?? "" })) : (_jsx(AgentApprovalPrompt, { request: request, runId: thread.approvalRunIds[approvalId] ?? "" })) }, `${threadId}:${approvalId}`))), connectionRequestEntries.map(([requestId, request]) => (_jsx(AgentKitSurfaceBoundary, { surface: "connection-request", resetKey: `${requestId}:${request.status}`, children: ConnectionRequest ? (_jsx(ConnectionRequest, { value: request, threadId: threadId, runId: thread.connectionRequestRunIds[requestId] ?? "" })) : (_jsx(AgentConnectionRequestCard, { request: request, runId: thread.connectionRequestRunIds[requestId] ?? "" })) }, `${threadId}:${requestId}`))), visibleConnectionError ? (_jsx(AgentKitSurfaceBoundary, { surface: "connection-error", resetKey: `${threadId}:${visibleConnectionError.code}`, children: _jsx(ErrorState, { error: visibleConnectionError, threadId: threadId, recover: recovery.execute, recovering: recovery.pending, ...(recovery.error === undefined
+                                                            ? {}
+                                                            : { recoveryError: recovery.error }), dismiss: clearConnectionNotice }) })) : null] }), _jsx("div", { ref: turnSpacerRef, className: "agentkit-turn-spacer", "aria-hidden": "true" })] }) }), _jsx("div", { className: "agentkit-scroll-to-bottom-control", "data-visible": transcriptAwayFromBottom ? "true" : "false", "aria-hidden": transcriptAwayFromBottom ? undefined : true, inert: !transcriptAwayFromBottom, children: _jsx(IconButton, { label: labels.scrollToBottom, icon: _jsx(IconArrowDown, { "aria-hidden": "true" }), size: "compact", className: "rounded-[var(--agent-kit-radius-sm,0.5rem)] border border-[color:var(--agentkit-border)] bg-(--agentkit-surface) text-[color:var(--agentkit-text)] shadow-(--agent-kit-overlay-elevation) hover:bg-(--agentkit-subtle) hover:text-[color:var(--agentkit-text)]", onPress: (event) => {
+                                        returnTranscriptToBottom();
+                                        // The control goes inert at the bottom, which would drop
+                                        // a keyboard user's focus to the page.
+                                        if (pressedByKeyboard(event))
+                                            requestComposerFocus(threadId);
+                                    } }) }), _jsx(AgentKitLiveStatus, { threadId: threadId }), composer ? (_jsx("footer", { className: "agentkit-chat-footer", children: _jsx(AgentKitSurfaceBoundary, { surface: "composer", resetKey: threadId, children: _jsx(AgentKitRegionSlot, { slot: Footer, threadId: threadId, children: slots.composer ? (_jsx(Composer, { threadId: threadId })) : (_jsx(AgentKitComposer, { ...composerProps, threadId: threadId })) }) }) })) : null] }) }) }) }) }));
 }
 export { useAgentKitStopButton } from "./stop-button.js";
 //# sourceMappingURL=components.js.map