cortena-ui 1.4.2 → 1.6.0

package/dist/components/agent-chat.js

@@ -0,0 +1,673 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { Spinner } from "./spinner.js";
+import { Badge } from "./badge.js";
+import { ErrorBanner } from "./error-banner.js";
+import { Textarea } from "./textarea.js";
+import { Markdown } from "./markdown.js";
+import { A2UIErrorCard } from "../a2ui/views.js";
+import { A2UIRenderer } from "../a2ui/renderer.js";
+import { isGenericLabel, truncate } from "../agent-chat/step-label.js";
+import { isHiddenMessage } from "../agent-chat/session.js";
+import { useAgentChat } from "../agent-chat/store.js";
+import { sessionTitle } from "../agent-chat/types.js";
+import { Check, ChevronDown, ChevronRight, MessageSquarePlus, Send, ShieldCheck, ShieldX, Sparkles, Square, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/components/agent-chat.tsx
+/**
+* AgentChat — the chat surface an extension's own agent runs in.
+*
+* §17 of how-to-create-a-cortena-extension, audit rule P-25. Moved here from
+* `cortenaweb/components/chat/**` so there is one chat and not two: a cut-down
+* widget diverges on approvals, A2UI and MCP Apps within one release, and every
+* fix then has to be made twice. cortenaweb adopts this component as a
+* follow-up; until then the two are kept in step by hand.
+*
+* Everything comes from the `AgentChatClient` prop — nothing here knows about
+* HTTP, AG-UI or a store — which is what lets `test/agent-chat.test.tsx` drive
+* the whole surface from a fake that replays scripted event sequences.
+*
+* Not in this package, on purpose: the MCP App frame. Rendering an extension's
+* own screen means a sandboxed iframe, a `srcdoc` CSP, a JSON-RPC postMessage
+* bridge and a `tools/invoke` proxy holding a credential — a host concern, not
+* a component one. `renderToolCall` is the seam: return a node for a tool call
+* and it replaces the card, return nothing and the default card is drawn.
+*/
+/**
+* Should the list jump back to the bottom after its content grew?
+*
+* Judged against the height BEFORE the growth. Measuring afterwards asks "is
+* the newest content already visible", which is false by construction for any
+* append taller than the threshold — a paragraph, a code block, an image — so
+* the re-pin skipped exactly when it was needed.
+*/
+function shouldStickToBottom(params) {
+	const { prevScrollHeight, scrollTop, clientHeight, threshold = 150 } = params;
+	if (prevScrollHeight <= 0) return true;
+	return prevScrollHeight - scrollTop - clientHeight < threshold;
+}
+function AgentThinking({ text, defaultOpen, streaming }) {
+	const [open, setOpen] = React.useState(defaultOpen ?? false);
+	if (!text) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "agent-chat-thinking",
+		className: "mt-1",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": open,
+			onClick: () => setOpen((v) => !v),
+			className: cn("inline-flex items-center gap-1 rounded-[var(--ds-radius-sm)] px-1 py-0.5", "text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]", "transition-colors duration-[var(--ds-duration-fast)] hover:text-[color:var(--ds-foreground)]"),
+			children: [open ? /* @__PURE__ */ jsx(ChevronDown, {
+				className: "size-3",
+				"aria-hidden": true
+			}) : /* @__PURE__ */ jsx(ChevronRight, {
+				className: "size-3",
+				"aria-hidden": true
+			}), streaming ? "Thinking…" : "Chain of thought"]
+		}), open ? /* @__PURE__ */ jsx("div", {
+			"data-slot": "agent-chat-thinking-body",
+			className: cn("mt-1 max-h-64 overflow-auto rounded-[var(--ds-radius-sm)] border border-[var(--ds-border-subtle)]", "bg-[var(--ds-muted)] px-3 py-2 whitespace-pre-wrap", "text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]"),
+			children: text
+		}) : null]
+	});
+}
+/**
+* How long a step runs before it starts saying how long it has been running.
+*
+* Under this, a timer is noise: every call takes a second or two and a number
+* ticking beside each one is a fidget spinner. Over it, the user has begun to
+* wonder whether anything is happening at all, and the number is the answer.
+*/
+const ELAPSED_AFTER_MS = 8e3;
+/**
+* `Date.now()`, re-read once a second while `active`.
+*
+* The interval only exists while something is running, so a finished chat sits
+* idle rather than re-rendering the whole transcript once a second for ever.
+*/
+function useTickingNow(active) {
+	const [now, setNow] = React.useState(() => Date.now());
+	React.useEffect(() => {
+		if (!active) return;
+		setNow(Date.now());
+		const id = setInterval(() => setNow(Date.now()), 1e3);
+		return () => clearInterval(id);
+	}, [active]);
+	return now;
+}
+/**
+* What the agent is doing, one plain sentence per tool call (SKILLS-9).
+*
+* This is the surface a person watches while they wait, and it is deliberately
+* not the tool strip: the strip is the record — names, arguments, output, the
+* MCP App seam — and reading it requires knowing what `broker_invoke` is. The
+* strip stays at the foot for anyone who wants the detail.
+*
+* NOT a live region of its own. The strip is drawn inside the transcript, and
+* the transcript is already `role="log" aria-live="polite"` — two nested live
+* regions is one announcement per change from the inner one and another from
+* the outer, which is how a screen reader ends up saying every step twice.
+* `aria-label` stays: it names the group for anyone who navigates to it.
+*/
+function AgentSteps({ steps }) {
+	const now = useTickingNow(steps.some((step) => step.status === "running"));
+	if (steps.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "agent-chat-steps",
+		"aria-label": "Progress",
+		className: "mt-1 flex flex-col gap-0.5",
+		children: steps.map((step) => {
+			const elapsed = step.status === "running" ? now - step.startedAt : 0;
+			const seconds = elapsed >= ELAPSED_AFTER_MS ? Math.floor(elapsed / 1e3) : 0;
+			const held = step.status === "running" && isGenericLabel(step.toolName, step.label);
+			return /* @__PURE__ */ jsxs("p", {
+				"data-slot": "agent-chat-step",
+				"data-status": step.status,
+				"data-tool": truncate(step.toolName, 80),
+				...held ? { "aria-hidden": true } : {},
+				className: cn("flex items-start gap-2 text-[length:var(--ds-text-caption-lg)]", step.status === "error" ? "text-[color:var(--ds-destructive)]" : "text-[color:var(--ds-muted-foreground)]"),
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "mt-0.5 inline-flex size-3.5 shrink-0 items-center justify-center",
+					children: step.status === "running" ? /* @__PURE__ */ jsx(Spinner, {
+						size: 12,
+						"aria-hidden": true
+					}) : step.status === "error" ? /* @__PURE__ */ jsx(X, { className: "size-3" }) : step.status === "stopped" ? /* @__PURE__ */ jsx(Square, { className: "size-2.5" }) : step.status === "paused" ? /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-[color:var(--ds-muted-foreground)]" }) : /* @__PURE__ */ jsx(Check, { className: "size-3 text-[color:var(--ds-success)]" })
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "min-w-0",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"data-slot": "agent-chat-step-label",
+							children: step.label
+						}, step.label),
+						seconds > 0 ? /* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							"data-slot": "agent-chat-step-elapsed",
+							children: ` · ${seconds}s`
+						}) : null,
+						step.status === "stopped" ? /* @__PURE__ */ jsx("span", {
+							"data-slot": "agent-chat-step-note",
+							children: " — Stopped"
+						}) : null,
+						step.status === "paused" ? /* @__PURE__ */ jsx("span", {
+							"data-slot": "agent-chat-step-note",
+							children: " — Waiting for your approval"
+						}) : null,
+						step.status === "error" && step.errorMessage ? /* @__PURE__ */ jsx("span", {
+							"data-slot": "agent-chat-step-error",
+							children: ` — ${step.errorMessage}`
+						}) : null
+					]
+				})]
+			}, step.id);
+		})
+	});
+}
+/**
+* Every block of one message, in arrival order.
+*
+* A block carrying a transport `error` — an unclosed fence, a body that did not
+* parse — gets an error card rather than being dropped. A block that is merely
+* malformed inside is the renderer's error to draw, and it draws the parts that
+* were fine.
+*/
+function AgentA2UIBlocks({ blocks, streaming, onAction }) {
+	if (!blocks || blocks.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "mt-2 flex flex-col gap-3",
+		"data-slot": "agent-chat-a2ui",
+		children: blocks.map((block, index) => /* @__PURE__ */ jsxs("div", { children: [block.error ? /* @__PURE__ */ jsx(A2UIErrorCard, {
+			title: "The agent's UI did not arrive complete",
+			detail: block.error
+		}) : null, block.messages.length > 0 ? /* @__PURE__ */ jsx(A2UIRenderer, {
+			message: block.messages,
+			...streaming || !onAction ? {} : { onAction }
+		}) : null] }, `${block.surfaceId}:${index}`))
+	});
+}
+function AssistantAvatar() {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "agent-chat-avatar",
+		"aria-hidden": true,
+		className: cn("grid size-7 shrink-0 place-items-center rounded-[var(--ds-radius-sm)]", "border border-[var(--ds-ring)] bg-[var(--ds-primary-soft)] text-[color:var(--ds-primary)]"),
+		children: /* @__PURE__ */ jsx(Sparkles, {
+			className: "size-3.5",
+			"aria-hidden": true
+		})
+	});
+}
+function AgentMessageBubble({ message, agentName, streaming, onAction }) {
+	if (isHiddenMessage(message)) return null;
+	if (message.isError) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "agent-chat-message",
+		"data-role": "error",
+		children: /* @__PURE__ */ jsx(ErrorBanner, { message: message.text })
+	});
+	if (message.role === "user") return /* @__PURE__ */ jsx("div", {
+		"data-slot": "agent-chat-message",
+		"data-role": "user",
+		className: "flex w-full justify-end",
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("max-w-[85%] rounded-[var(--ds-radius-lg)] border border-[var(--ds-border-subtle)]", "bg-[var(--ds-popover)] px-3.5 py-2 text-[color:var(--ds-foreground)]"),
+			children: /* @__PURE__ */ jsx(Markdown, {
+				compact: true,
+				children: message.text
+			})
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "agent-chat-message",
+		"data-role": "assistant",
+		className: "flex w-full gap-3",
+		children: [/* @__PURE__ */ jsx(AssistantAvatar, {}), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: cn("text-[length:var(--ds-text-caption)] font-semibold", "text-[color:var(--ds-foreground)]"),
+					children: agentName
+				}),
+				/* @__PURE__ */ jsx(AgentThinking, { text: message.thinkingText ?? "" }),
+				message.text ? /* @__PURE__ */ jsx("div", {
+					className: "mt-1",
+					children: /* @__PURE__ */ jsx(Markdown, {
+						compact: true,
+						children: message.text
+					})
+				}) : null,
+				/* @__PURE__ */ jsx(AgentA2UIBlocks, {
+					blocks: message.a2ui,
+					...streaming ? { streaming } : {},
+					...onAction ? { onAction } : {}
+				})
+			]
+		})]
+	});
+}
+/**
+* The assistant bubble while a turn is live.
+*
+* The filter chain is deliberately not applied: streaming text is
+* agent-authored prose in progress, and the filters are about finished
+* messages. Markdown is not processed either — partially arrived source
+* (`**bo`) looks worse than its raw form — so the streaming view is plain text
+* under `whitespace-pre-wrap` and `Markdown` takes over on `final`.
+*/
+function AgentStreamingBubble({ agentName, text, thinkingText, a2ui, steps }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "agent-chat-streaming",
+		className: "flex w-full gap-3",
+		children: [/* @__PURE__ */ jsx(AssistantAvatar, {}), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: cn("text-[length:var(--ds-text-caption)] font-semibold", "text-[color:var(--ds-foreground)]"),
+					children: agentName
+				}),
+				/* @__PURE__ */ jsx(AgentSteps, { steps: steps ?? [] }),
+				thinkingText ? /* @__PURE__ */ jsx(AgentThinking, {
+					text: thinkingText,
+					defaultOpen: true,
+					streaming: true
+				}) : null,
+				text ? /* @__PURE__ */ jsx("div", {
+					"data-slot": "agent-chat-streaming-text",
+					className: "mt-1 break-words whitespace-pre-wrap text-[color:var(--ds-foreground)]",
+					children: text
+				}) : null,
+				/* @__PURE__ */ jsx(AgentA2UIBlocks, {
+					blocks: a2ui,
+					streaming: true
+				})
+			]
+		})]
+	});
+}
+/** A `ui://` resource in a tool result is an MCP App: the extension's own screen. */
+function readMcpAppUri(output) {
+	return (typeof output === "string" ? output : output === void 0 ? "" : JSON.stringify(output)).match(/"uri"\s*:\s*"(ui:\/\/[^"]+)"/)?.[1] ?? null;
+}
+function summarise(input) {
+	if (input === void 0 || input === null) return "";
+	if (typeof input === "string") return input;
+	const record = input;
+	for (const key of [
+		"command",
+		"cmd",
+		"query",
+		"path",
+		"url",
+		"name"
+	]) {
+		const value = record[key];
+		if (typeof value === "string" && value.trim()) return value;
+	}
+	const json = JSON.stringify(input);
+	return json.length > 120 ? `${json.slice(0, 117)}…` : json;
+}
+/**
+* The default card. It shows the tool's name, its input and its output — the
+* input being the part that was missing for the whole of the AG-UI path,
+* because the bridge had no `TOOL_CALL_ARGS` case.
+*/
+function AgentToolCard({ entry }) {
+	const [open, setOpen] = React.useState(false);
+	const summary = summarise(entry.input);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "agent-tool-card",
+		"data-tool": entry.name,
+		"data-status": entry.status,
+		className: cn("overflow-hidden rounded-[var(--ds-radius-sm)] border border-[var(--ds-border-subtle)]", "bg-[var(--ds-muted)]"),
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": open,
+			onClick: () => setOpen((v) => !v),
+			className: cn("flex w-full items-center gap-2.5 px-3 py-2 text-left", "transition-colors duration-[var(--ds-duration-fast)] hover:bg-[var(--ds-hover)]"),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "inline-flex size-3.5 shrink-0 items-center justify-center",
+					children: entry.status === "running" ? /* @__PURE__ */ jsx(Spinner, { size: 14 }) : /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn("size-2 rounded-[var(--ds-radius-full)]", entry.status === "error" ? "bg-[var(--ds-destructive)]" : "bg-[var(--ds-success)]")
+					})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "font-mono text-[length:var(--ds-text-caption)] text-[color:var(--ds-primary)]",
+					children: entry.name
+				}),
+				summary ? /* @__PURE__ */ jsx("span", {
+					"data-slot": "agent-tool-card-input",
+					className: "min-w-0 truncate text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]",
+					children: summary
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: "ml-auto shrink-0 text-[color:var(--ds-text-tertiary)]",
+					children: open ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" })
+				})
+			]
+		}), open ? /* @__PURE__ */ jsxs("div", {
+			className: "border-t border-[var(--ds-border-subtle)] bg-[var(--ds-background)] px-3 py-2",
+			children: [entry.input !== void 0 ? /* @__PURE__ */ jsx("pre", {
+				"data-slot": "agent-tool-card-args",
+				className: "max-h-40 overflow-auto font-mono text-[length:var(--ds-text-caption-sm)] whitespace-pre-wrap text-[color:var(--ds-muted-foreground)]",
+				children: typeof entry.input === "string" ? entry.input : JSON.stringify(entry.input, null, 2)
+			}) : null, entry.output !== void 0 && entry.output !== null ? /* @__PURE__ */ jsx("pre", {
+				className: "mt-2 max-h-40 overflow-auto font-mono text-[length:var(--ds-text-caption-sm)] whitespace-pre-wrap text-[color:var(--ds-muted-foreground)]",
+				children: typeof entry.output === "string" ? entry.output : JSON.stringify(entry.output, null, 2)
+			}) : null]
+		}) : null]
+	});
+}
+/**
+* `exec` as a render-and-wait card: the run is paused on this decision.
+*
+* The three answers are the three cortenacore accepts. "Always allow" is not a
+* nicety — without it the same command is asked about on every turn, and a user
+* who has to answer the same question repeatedly stops reading the question.
+*/
+function AgentApprovalCard({ request, onResolve }) {
+	const command = typeof request.args.command === "string" ? request.args.command : request.toolName;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "agent-approval-card",
+		role: "group",
+		"aria-label": "Command approval required",
+		className: cn("flex flex-col gap-3 rounded-[var(--ds-radius-md)] border border-[var(--ds-border)]", "bg-[var(--ds-card)] p-3"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(ShieldCheck, {
+					className: "size-4 text-[color:var(--ds-primary)]",
+					"aria-hidden": true
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-[length:var(--ds-text-body-sm)] font-medium text-[color:var(--ds-foreground)]",
+					children: "Approval required"
+				})]
+			}),
+			/* @__PURE__ */ jsx("pre", {
+				className: "max-h-32 overflow-auto rounded-[var(--ds-radius-sm)] bg-[var(--ds-muted)] p-2 font-mono text-[length:var(--ds-text-caption)] whitespace-pre-wrap text-[color:var(--ds-foreground)]",
+				children: command
+			}),
+			request.error ? /* @__PURE__ */ jsx("p", {
+				"data-slot": "agent-approval-error",
+				role: "alert",
+				className: "text-[length:var(--ds-text-caption)] text-[color:var(--ds-destructive)]",
+				children: request.error
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsxs(Button, {
+						size: "sm",
+						onClick: () => onResolve(request.id, "allow-once"),
+						children: [/* @__PURE__ */ jsx(ShieldCheck, { "aria-hidden": true }), "Approve"]
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "outline",
+						onClick: () => onResolve(request.id, "allow-always"),
+						children: "Always allow"
+					}),
+					/* @__PURE__ */ jsxs(Button, {
+						size: "sm",
+						variant: "destructive",
+						onClick: () => onResolve(request.id, "deny"),
+						children: [/* @__PURE__ */ jsx(ShieldX, { "aria-hidden": true }), "Deny"]
+					})
+				]
+			})
+		]
+	});
+}
+function AgentChat({ client, agentName, storageScope, ephemeral, thinking, attachmentsSlot, renderToolCall, headerSlot, className, ...props }) {
+	const chat = useAgentChat({
+		client,
+		storageScope,
+		...ephemeral === void 0 ? {} : { ephemeral },
+		...thinking === void 0 ? {} : { thinking }
+	});
+	const [drawerOpen, setDrawerOpen] = React.useState(false);
+	const [value, setValue] = React.useState("");
+	const scrollRef = React.useRef(null);
+	const contentRef = React.useRef(null);
+	const prevHeightRef = React.useRef(0);
+	/**
+	* Re-pin to the bottom whenever the content grows or the viewport shrinks.
+	* A message keeps growing after it mounts — markdown settles, the tool strip
+	* appears between the list and the composer — and every one of those leaves
+	* the newest content under the composer until the reader scrolls by hand.
+	*
+	* Jumping rather than smooth-scrolling: this fires many times a second during
+	* streaming, and queued smooth animations fight each other and lose.
+	*/
+	React.useEffect(() => {
+		const scrollEl = scrollRef.current;
+		const contentEl = contentRef.current;
+		if (!scrollEl || !contentEl || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			const { scrollTop, scrollHeight, clientHeight } = scrollEl;
+			const stick = shouldStickToBottom({
+				prevScrollHeight: prevHeightRef.current,
+				scrollTop,
+				clientHeight
+			});
+			prevHeightRef.current = scrollHeight;
+			if (stick) scrollEl.scrollTop = scrollEl.scrollHeight;
+		});
+		observer.observe(contentEl);
+		observer.observe(scrollEl);
+		return () => observer.disconnect();
+	}, []);
+	const submit = React.useCallback(() => {
+		const trimmed = value.trim();
+		if (!trimmed || chat.streaming) return;
+		chat.send(trimmed);
+		setValue("");
+	}, [chat, value]);
+	const onKeyDown = React.useCallback((event) => {
+		if (event.key === "Escape" && chat.streaming) {
+			event.preventDefault();
+			event.stopPropagation();
+			chat.abort();
+			return;
+		}
+		if (event.key === "Enter" && !event.shiftKey) {
+			event.preventDefault();
+			submit();
+		}
+	}, [chat, submit]);
+	const toolEntries = chat.toolOrder.map((id) => chat.tools[id]).filter((entry) => entry !== void 0);
+	const showTools = toolEntries.length > 0 || chat.approvals.length > 0;
+	const visible = chat.messages.filter((message) => !isHiddenMessage(message));
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "agent-chat",
+		className: cn("flex h-full min-h-0 w-full flex-col bg-[var(--ds-background)]", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "agent-chat-header",
+				className: cn("flex shrink-0 items-center gap-2 border-b border-[var(--ds-border-subtle)] px-3 py-2"),
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "ghost",
+						"data-slot": "agent-chat-sessions-trigger",
+						"aria-expanded": drawerOpen,
+						onClick: () => {
+							setDrawerOpen((open) => !open);
+							chat.refreshSessions();
+						},
+						children: chat.sessions.length === 1 ? "1 session" : `${chat.sessions.length} sessions`
+					}),
+					/* @__PURE__ */ jsxs(Button, {
+						size: "sm",
+						variant: "ghost",
+						"data-slot": "agent-chat-new-session",
+						"aria-label": "New session",
+						onClick: () => {
+							chat.newSession();
+							setDrawerOpen(false);
+						},
+						children: [/* @__PURE__ */ jsx(MessageSquarePlus, { "aria-hidden": true }), "New"]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "ml-auto flex items-center gap-1",
+						children: headerSlot
+					})
+				]
+			}),
+			drawerOpen ? /* @__PURE__ */ jsx(AgentSessionDrawer, {
+				sessions: chat.sessions,
+				current: chat.sessionKey,
+				loading: chat.loadingSessions,
+				onResume: (key) => {
+					chat.resumeSession(key);
+					setDrawerOpen(false);
+				}
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				ref: scrollRef,
+				"data-slot": "agent-chat-scroll",
+				className: "min-h-0 flex-1 overflow-x-hidden overflow-y-auto",
+				children: /* @__PURE__ */ jsxs("div", {
+					ref: contentRef,
+					role: "log",
+					"aria-live": "polite",
+					"aria-label": `${agentName} chat`,
+					className: "flex min-w-0 flex-col gap-5 px-4 py-4",
+					children: [
+						chat.error ? /* @__PURE__ */ jsx(ErrorBanner, { message: chat.error }) : null,
+						chat.hasMoreHistory ? /* @__PURE__ */ jsx("div", {
+							className: "flex justify-center",
+							children: /* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								variant: "ghost",
+								"data-slot": "agent-chat-load-older",
+								disabled: chat.loadingHistory,
+								onClick: chat.loadOlder,
+								children: chat.loadingHistory ? "Loading…" : "Load older messages"
+							})
+						}) : null,
+						visible.length === 0 && !chat.streaming ? /* @__PURE__ */ jsxs("p", {
+							"data-slot": "agent-chat-empty",
+							className: "text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]",
+							children: [
+								"Ask ",
+								agentName,
+								" anything about this screen."
+							]
+						}) : null,
+						visible.map((message) => /* @__PURE__ */ jsx(AgentMessageBubble, {
+							message,
+							agentName,
+							streaming: chat.streaming,
+							onAction: chat.sendAction
+						}, message.id)),
+						chat.streaming ? /* @__PURE__ */ jsx(AgentStreamingBubble, {
+							agentName,
+							text: chat.streamText,
+							thinkingText: chat.streamThinkingText,
+							a2ui: chat.streamA2ui,
+							steps: chat.steps
+						}) : chat.steps.length > 0 ? /* @__PURE__ */ jsx(AgentSteps, { steps: chat.steps }) : null
+					]
+				})
+			}),
+			showTools ? /* @__PURE__ */ jsxs("div", {
+				"data-slot": "agent-chat-tools",
+				className: "flex shrink-0 flex-col gap-1.5 border-t border-[var(--ds-border-subtle)] px-3 py-2",
+				children: [
+					toolEntries.length > 0 ? /* @__PURE__ */ jsx(Badge, {
+						variant: "neutral",
+						className: "w-fit",
+						children: toolEntries.length === 1 ? "1 step" : `${toolEntries.length} steps`
+					}) : null,
+					toolEntries.map((entry) => {
+						const custom = renderToolCall?.({
+							entry,
+							mcpAppUri: readMcpAppUri(entry.output)
+						});
+						return /* @__PURE__ */ jsx(React.Fragment, { children: custom ?? /* @__PURE__ */ jsx(AgentToolCard, { entry }) }, entry.id);
+					}),
+					chat.approvals.map((request) => /* @__PURE__ */ jsx(AgentApprovalCard, {
+						request,
+						onResolve: chat.resolveApproval
+					}, request.id))
+				]
+			}) : null,
+			attachmentsSlot ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "agent-chat-attachments",
+				className: "shrink-0 px-3",
+				children: attachmentsSlot
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "agent-chat-composer",
+				className: "flex shrink-0 items-end gap-2 border-t border-[var(--ds-border-subtle)] p-3",
+				children: [/* @__PURE__ */ jsx(Textarea, {
+					"data-slot": "agent-chat-input",
+					"aria-label": `Message ${agentName}`,
+					placeholder: `Message ${agentName}…`,
+					rows: 1,
+					className: "max-h-40 min-h-9 resize-none",
+					value,
+					onChange: (event) => setValue(event.target.value),
+					onKeyDown
+				}), chat.streaming ? /* @__PURE__ */ jsx(Button, {
+					size: "icon",
+					variant: "outline",
+					"data-slot": "agent-chat-stop",
+					"aria-label": "Stop the run",
+					onClick: chat.abort,
+					children: /* @__PURE__ */ jsx(Square, { "aria-hidden": true })
+				}) : /* @__PURE__ */ jsx(Button, {
+					size: "icon",
+					"data-slot": "agent-chat-send",
+					"aria-label": "Send",
+					disabled: !value.trim(),
+					onClick: submit,
+					children: /* @__PURE__ */ jsx(Send, { "aria-hidden": true })
+				})]
+			})
+		]
+	});
+}
+/**
+* Every session of this agent, resumable from any window.
+*
+* The list is not this window's history: a session started in another window is
+* here and can be resumed, which is the difference between "sessions are per
+* window" (which key a window starts on) and "sessions are private to a window"
+* (which they are not).
+*/
+function AgentSessionDrawer({ sessions, current, loading, onResume }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "agent-chat-sessions",
+		className: cn("max-h-56 shrink-0 overflow-y-auto border-b border-[var(--ds-border-subtle)]", "bg-[var(--ds-card)] px-2 py-1.5"),
+		children: [
+			loading && sessions.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "px-2 py-1 text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]",
+				children: "Loading sessions…"
+			}) : null,
+			!loading && sessions.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "px-2 py-1 text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]",
+				children: "No earlier sessions."
+			}) : null,
+			sessions.map((session) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-slot": "agent-chat-session",
+				"data-current": session.key === current ? "" : void 0,
+				onClick: () => onResume(session.key),
+				className: cn("flex w-full items-center gap-2 rounded-[var(--ds-radius-sm)] px-2 py-1.5 text-left", "text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-foreground)]", "transition-colors duration-[var(--ds-duration-fast)] hover:bg-[var(--ds-hover)]", session.key === current && "bg-[var(--ds-primary-soft)]"),
+				children: /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate",
+					children: sessionTitle(session)
+				})
+			}, session.key))
+		]
+	});
+}
+//#endregion
+export { AgentA2UIBlocks, AgentApprovalCard, AgentChat, AgentMessageBubble, AgentSessionDrawer, AgentSteps, AgentStreamingBubble, AgentThinking, AgentToolCard, readMcpAppUri, shouldStickToBottom };
+
+//# sourceMappingURL=agent-chat.js.map