79: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"],"ScrollBar"] ac:I[34002,["/_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"],"CodeEditor"] ad: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"] 54:["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","aui-bg",":"]}] 55:["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}] 56:["$","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"}]]}] 57:["$","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"}]]}] 58:["$","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"}]]}] 59:["$","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"}]]}] 5a:["$","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"}]]}] 5b:["$","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"}]]}] 5c:["$","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"}]]}] 5d:["$","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"}]]}] 5e:["$","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"}]]}] 5f:["$","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",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 60:["$","div","aui-hot",{"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-hot",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#be185d"}]]}] 61:["$","div","aui-hot-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-hot-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#9d174d"}]]}] 62:["$","div","aui-on-hot",{"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-hot",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 63:["$","div","aui-warn",{"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-warn",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#b45309"}]]}] 64:["$","div","aui-warn-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-warn-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#92400e"}]]}] 65:["$","div","aui-ring",{"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-ring",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0e7490"}]]}] 66:["$","div","aui-add-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-add-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgb(8 145 178 / 0.08)"}}],["$","p",null,{"children":"rgb(8 145 178 / 0.08)"}]]}]}]]}] 67:["$","div","aui-add-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-add-strong",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgb(8 145 178 / 0.16)"}}],["$","p",null,{"children":"rgb(8 145 178 / 0.16)"}]]}]}]]}] 68:["$","div","aui-del-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-del-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgb(190 24 93 / 0.07)"}}],["$","p",null,{"children":"rgb(190 24 93 / 0.07)"}]]}]}]]}] 69:["$","div","aui-del-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-del-strong",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"rgb(190 24 93 / 0.14)"}}],["$","p",null,{"children":"rgb(190 24 93 / 0.14)"}]]}]}]]}] 6a:["$","div","aui-chart-input",{"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-chart-input",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0891b2"}]]}] 6b:["$","div","aui-chart-output",{"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-chart-output",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#db2777"}]]}] 6c:["$","div","aui-code-keyword",{"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-code-keyword",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#155e75"}]]}] 6d:["$","div","aui-code-string",{"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-code-string",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#9a3412"}]]}] 6e:["$","div","aui-code-number",{"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-code-number",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#9d174d"}]]}] 6f:["$","div","aui-code-comment",{"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-code-comment",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#525b67"}]]}] 70:["$","div","aui-code-punctuation",{"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-code-punctuation",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4b5563"}]]}] 71:["$","div","aui-radius",{"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-radius",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0.75rem"}]]}] 72:["$","div","aui-font-sans",{"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-font-sans",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--font-sans, var(--font-geist-sans, ui-sans-serif, system-ui, sans-serif))"}]]}] 73:["$","div","aui-font-mono",{"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-font-mono",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--font-mono, var(--font-geist-mono, ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace))"}]]}] 74:["$","$L79",null,{"orientation":"horizontal"}] 75:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L53",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":"#0d0f12"}]]}],["$","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":"#181c22"}]]}],["$","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":"#1e232a"}]]}],["$","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":"#262b33"}]]}],["$","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":"#353c47"}]]}],["$","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":"#e8eaed"}]]}],["$","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":"#a1a9b4"}]]}],["$","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":"#8b94a0"}]]}],["$","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":"#22d3ee"}]]}],["$","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":"#67e8f9"}]]}],["$","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",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d0f12"}]]}],["$","div","aui-hot",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":["$L7a","$L7b"]}],"$L7c","$L7d","$L7e","$L7f","$L80","$L81","$L82","$L83","$L84","$L85","$L86","$L87","$L88","$L89","$L8a","$L8b"]}],"$L8c"]}]}]]}] 76:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L53",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-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":["--","color-aui-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--aui-bg)"}]]}],["$","div","color-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":["--","color-aui-surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--aui-surface)"}]]}],["$","div","color-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":["--","color-aui-surface-2",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--aui-surface-2)"}]]}],["$","div","color-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":["--","color-aui-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--aui-border)"}]]}],["$","div","color-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":["--","color-aui-border-strong",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--aui-border-strong)"}]]}],["$","div","color-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":["--","color-aui-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--aui-fg)"}]]}],["$","div","color-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":["--","color-aui-fg-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--aui-fg-muted)"}]]}],["$","div","color-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":["--","color-aui-fg-subtle",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--aui-fg-subtle)"}]]}],["$","div","color-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":["--","color-aui-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--aui-accent)"}]]}],["$","div","color-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":["--","color-aui-accent-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--aui-accent-fg)"}]]}],["$","div","color-aui-on-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":["$L8d","$L8e"]}],"$L8f","$L90","$L91","$L92","$L93","$L94","$L95","$L96","$L97","$L98","$L99","$L9a","$L9b","$L9c","$L9d","$L9e","$L9f","$La0","$La1","$La2","$La3","$La4","$La5","$La6","$La7","$La8","$La9","$Laa"]}],"$Lab"]}]}]]}] 77:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$Lac",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes aui-shimmer {\n\tfrom {\n\t\tbackground-position: 200% 0;\n\t}\n\tto {\n\t\tbackground-position: -200% 0;\n\t}\n}\n\n@keyframes aui-ping {\n\t0% {\n\t\ttransform: scale(1);\n\t\topacity: 0.7;\n\t}\n\t80%, 100% {\n\t\ttransform: scale(2.2);\n\t\topacity: 0;\n\t}\n}\n\n@keyframes aui-spin {\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n}\n\n@keyframes aui-blink {\n\tto {\n\t\tvisibility: hidden;\n\t}\n}\n\n@keyframes aui-enter {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(4px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: none;\n\t}\n}\n\n@keyframes aui-expand {\n\tfrom {\n\t\theight: 0;\n\t\topacity: 0;\n\t}\n\tto {\n\t\theight: var(--radix-collapsible-content-height);\n\t\topacity: 1;\n\t}\n}\n\n@keyframes aui-collapse {\n\tfrom {\n\t\theight: var(--radix-collapsible-content-height);\n\t\topacity: 1;\n\t}\n\tto {\n\t\theight: 0;\n\t\topacity: 0;\n\t}\n}\n\n@keyframes aui-indeterminate {\n\t0% {\n\t\ttransform: translateX(-100%);\n\t}\n\t100% {\n\t\ttransform: translateX(250%);\n\t}\n}"}]}]]}] ae: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}
    />
  );
}
af: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' };
}
b0: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);
  }
}
b1: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',
};
b2: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);
}
b3: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>
);
b4: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';
b5: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;
b6: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>
  );
}
78:["$","$Lad",null,{"files":[{"path":"packages/agent-ui-kit/src/approval-card.tsx","content":"$ae","type":"registry:component","target":"components/agent-ui/approval-card.tsx"},{"path":"packages/agent-ui-kit/src/lib/ai.ts","content":"$af","type":"registry:lib","target":"components/agent-ui/lib/ai.ts"},{"path":"packages/agent-ui-kit/src/lib/format.ts","content":"$b0","type":"registry:lib","target":"components/agent-ui/lib/format.ts"},{"path":"packages/agent-ui-kit/src/lib/highlight.ts","content":"$b1","type":"registry:lib","target":"components/agent-ui/lib/highlight.ts"},{"path":"packages/agent-ui-kit/src/lib/hooks.ts","content":"$b2","type":"registry:lib","target":"components/agent-ui/lib/hooks.ts"},{"path":"packages/agent-ui-kit/src/lib/icons.tsx","content":"$b3","type":"registry:lib","target":"components/agent-ui/lib/icons.tsx"},{"path":"packages/agent-ui-kit/src/lib/primitives.tsx","content":"$b4","type":"registry:lib","target":"components/agent-ui/lib/primitives.tsx"},{"path":"packages/agent-ui-kit/src/lib/utils.ts","content":"$b5","type":"registry:lib","target":"components/agent-ui/lib/utils.ts"},{"path":"packages/agent-ui-kit/src/tool-call-timeline.tsx","content":"$b6","type":"registry:component","target":"components/agent-ui/tool-call-timeline.tsx"}],"className":"h-[70svh] min-h-80"}]
</article></body></html>