eve 0.83.2 → 0.84.0

package/dist/src/setup/scaffold/create/web-template.js

@@ -1,6 +1,15 @@
 const WEB_APP_TEMPLATE_FILES={"app/_components/agent-chat.tsx":`"use client";
 
-import type { UserContent } from "ai";
+import { ClientError, type MessagePart } from "eve/client";
+import {
+  activeTurn,
+  activity,
+  failure,
+  interaction,
+  interactions,
+  turns,
+  type Activity,
+} from "eve/events";
 import { useEveAgent } from "eve/react";
 import { AlertCircleIcon, BrainIcon, PlusIcon, SquareIcon } from "lucide-react";
 import { useRef, useState } from "react";
@@ -19,8 +28,8 @@ import {
   PromptInputTextarea,
   usePromptInputAttachments,
 } from "@/components/ai-elements/prompt-input";
-import { Shimmer } from "@/components/ai-elements/shimmer";
 import { Button } from "@/components/ui/button";
+import { Trace, TraceIcon, TraceLine, TraceTitle } from "@/components/ui/trace";
 import { cn } from "@/lib/utils";
 import { AgentMessage } from "./agent-message";
 import { WEB_CHAT_AGENT } from "@/app/eve-agent";
@@ -67,28 +76,41 @@ export function AgentChat({
     },
   });
 
-  const isBusy = agent.status === "submitted" || agent.status === "streaming";
+  const isBusy = agent.status === "busy";
+  // A turn waiting on a person is open while the store is idle; it still takes steering and Stop.
+  const turnOpen = activeTurn(agent.view) !== undefined;
   const isResuming = agent.status === "resuming";
-  const isEmpty = agent.data.messages.length === 0;
-  const lastMessage = agent.data.messages.at(-1);
+  const isEmpty = agent.messages.length === 0;
+  const lastMessage = agent.messages.at(-1);
   const isPendingAssistantShell =
-    lastMessage?.role === "assistant" &&
-    lastMessage.parts.every((part) => part.type === "step-start");
+    lastMessage?.role === "assistant" && lastMessage.parts.length === 0;
+  const now = activity(agent.view);
+  // Show what the agent is doing until its message has something to show, unless it waits on you.
   const showPendingThinking =
     isBusy &&
-    (agent.status === "submitted" || lastMessage?.role !== "assistant" || isPendingAssistantShell);
-  const turnFailure = isBusy || isResuming ? undefined : getLatestTurnFailure(agent.events);
+    now.kind !== "waiting-on-interaction" &&
+    (lastMessage?.role !== "assistant" || isPendingAssistantShell);
+  const failed =
+    isBusy || isResuming ? undefined : failure(agent.view, turns(agent.view).at(-1)?.turnId);
+  const turnFailure =
+    failed?.code === "MODEL_CALL_FAILED"
+      ? "The model is temporarily unavailable. Please try again."
+      : failed?.message;
   const errorMessage = cancellationError ?? agent.error?.message ?? turnFailure;
   const hasConversationContent = sessionless || !isEmpty || errorMessage !== undefined;
   const showConversationLayout = isResuming || hasConversationContent;
   const activeSessionId = sessionId ?? agent.session?.sessionId;
+  // A session that ended outside eve never settles its requests, so they stay open, yet it
+  // accepts no answer. Once the server says so, stop offering them.
+  const sessionEnded =
+    agent.error instanceof ClientError && agent.error.code === "session_not_active";
   // Answers are accepted while work runs; the server's settlement closes each request.
-  const canRespond = (requestId: string) =>
-    !isResuming && agent.data.inputs[requestId]?.status === "open";
+  const canRespond = (interactionId: string) =>
+    !isResuming && !sessionEnded && interaction(agent.view, interactionId)?.status === "open";
   // A tool call can ask several questions at once, and its message part holds only the latest.
   const questionsFor = (callId: string) =>
-    Object.values(agent.data.inputs).filter(
-      (input) => input.request.kind === "question" && input.request.action.callId === callId,
+    interactions(agent.view).filter(
+      (input) => input.request.kind === "question" && input.call?.callId === callId,
     );
 
   const requestCancellation = () => {
@@ -106,14 +128,14 @@ export function AgentChat({
     setCancellationError(undefined);
     hasSubmittedMessage.current = true;
     if (agent.session !== undefined) replaceSessionRoute(agent.session.sessionId);
-    const options = isBusy ? { turnPolicy: "steer" as const } : undefined;
+    const options = turnOpen ? { turnPolicy: "steer" as const } : undefined;
 
     if (message.files.length === 0) {
       await agent.send(text, options);
       return;
     }
 
-    const parts: UserContent = [];
+    const parts: MessagePart[] = [];
     if (text.length > 0) {
       parts.push({ text, type: "text" });
     }
@@ -138,7 +160,7 @@ export function AgentChat({
       />
       <ComposerAction
         hasInputText={hasInputText}
-        isBusy={isBusy}
+        canCancel={turnOpen}
         isResuming={isResuming}
         onCancel={requestCancellation}
       />
@@ -164,26 +186,28 @@ export function AgentChat({
         >
           <ConversationTopFade className="top-14" />
           <ConversationContent className="mx-auto w-full max-w-3xl gap-6 px-4 pt-20 pb-36 sm:px-6">
-            {agent.data.messages.map((message, index) =>
+            {agent.messages.map((message) =>
               showPendingThinking &&
               isPendingAssistantShell &&
               message.id === lastMessage.id ? null : (
                 <AgentMessage
                   canRespond={canRespond}
-                  isStreaming={
-                    agent.status === "streaming" && index === agent.data.messages.length - 1
-                  }
                   key={message.id}
                   message={message}
                   questionsFor={questionsFor}
-                  onInputResponses={(inputResponses) => {
+                  view={agent.view}
+                  onAnswers={async (answers) => {
                     setCancellationError(undefined);
-                    return agent.respond(inputResponses);
+                    await agent.respond(answers).catch((cause: unknown) => {
+                      setCancellationError(
+                        cause instanceof Error ? cause.message : "Unable to submit the answer.",
+                      );
+                    });
                   }}
                 />
               ),
             )}
-            {showPendingThinking ? <PendingThinking /> : null}
+            {showPendingThinking ? <PendingActivity activity={now} /> : null}
             {errorMessage ? <ErrorMessage message={errorMessage} /> : null}
           </ConversationContent>
           <ConversationScrollButton />
@@ -211,19 +235,19 @@ export function AgentChat({
 
 function ComposerAction({
   hasInputText,
-  isBusy,
+  canCancel,
   isResuming,
   onCancel,
 }: {
   readonly hasInputText: boolean;
-  readonly isBusy: boolean;
+  readonly canCancel: boolean;
   readonly isResuming: boolean;
   readonly onCancel: () => void;
 }) {
   const attachments = usePromptInputAttachments();
   const canSubmit = hasInputText || attachments.files.length > 0;
 
-  if (!isBusy || canSubmit) {
+  if (!canCancel || canSubmit) {
     return <PromptInputSubmit disabled={isResuming} />;
   }
 
@@ -281,75 +305,66 @@ function ChatHeader({ canStartNewChat }: { readonly canStartNewChat: boolean })
   );
 }
 
-function PendingThinking() {
+function PendingActivity({ activity }: { readonly activity: Activity }) {
   return (
     <Message aria-live="polite" from="assistant">
       <MessageContent>
-        <div className="mb-4 flex w-full items-center gap-2 text-muted-foreground text-sm">
-          <BrainIcon className="size-4" />
-          <Shimmer duration={1}>Thinking</Shimmer>
-        </div>
+        <Trace>
+          <TraceLine status="running">
+            <TraceIcon>
+              <BrainIcon />
+            </TraceIcon>
+            <TraceTitle>{activityLabel(activity)}</TraceTitle>
+          </TraceLine>
+        </Trace>
       </MessageContent>
     </Message>
   );
 }
 
-function toErrorMessage(error: unknown): string {
-  return error instanceof Error ? error.message : "Unable to cancel the response.";
-}
-
-function getLatestTurnFailure(
-  events: ReturnType<typeof useEveAgent>["events"],
-): string | undefined {
-  for (let index = events.length - 1; index >= 0; index -= 1) {
-    const event = events[index];
-
-    if (event.type === "turn.failed") {
-      return event.data.code === "MODEL_CALL_FAILED"
-        ? "The model is temporarily unavailable. Please try again."
-        : event.data.message;
-    }
-
-    if (event.type === "turn.completed" || event.type === "turn.cancelled") {
-      return undefined;
-    }
-
-    if (event.type === "message.received") {
-      return undefined;
-    }
+function activityLabel(activity: Activity): string {
+  switch (activity.kind) {
+    case "calling":
+      return activity.names.join(", ");
+    case "waiting-on-tasks":
+      return \`Waiting on \${activity.tasks.map((task) => task.name).join(", ")}\`;
+    case "compacting":
+      return "Compacting the conversation";
+    default:
+      return "Thinking";
   }
+}
 
-  return undefined;
+function toErrorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : "Unable to cancel the response.";
 }
 `,"app/_components/agent-message.tsx":`"use client";
 
+import type { CallState, SessionView } from "eve/events";
+import { callState, call, part } from "eve/events";
 import type {
-  ConversationInput,
-  EveAuthorizationPart,
-  EveDynamicToolPart,
+  Interaction,
+  EveInteractionPart,
   EveMessage,
-  EveMessageInputRequest,
   EveMessagePart,
+  EveToolPart,
 } from "eve/react";
-import type { FormEvent } from "react";
+import { signInEnding } from "eve/events";
+import { useState, type FormEvent } from "react";
 import {
+  BotIcon,
+  BrainIcon,
   CheckCircleIcon,
   ExternalLinkIcon,
   FileIcon,
   ImageIcon,
   KeyRoundIcon,
+  TerminalIcon,
+  WrenchIcon,
   XCircleIcon,
 } from "lucide-react";
 import { Message, MessageContent, MessageResponse } from "@/components/ai-elements/message";
-import { Reasoning, ReasoningContent, ReasoningTrigger } from "@/components/ai-elements/reasoning";
-import {
-  BashToolContent,
-  Tool,
-  ToolContent,
-  ToolHeader,
-  ToolInput,
-  ToolOutput,
-} from "@/components/ai-elements/tool";
+import { BashToolContent, ToolInput, ToolOutput } from "@/components/ai-elements/tool";
 import { Button } from "@/components/ui/button";
 import {
   Questionnaire,
@@ -363,53 +378,51 @@ import {
   QuestionnaireSubmit,
   QuestionnaireTitle,
 } from "@/components/ui/questionnaire";
+import {
+  Trace,
+  TraceCollapsible,
+  TraceCollapsibleContent,
+  TraceCollapsibleTrigger,
+  TraceDescription,
+  TraceIcon,
+  TraceLine,
+  TraceTitle,
+} from "@/components/ui/trace";
 import { cn } from "@/lib/utils";
 
-export type AgentInputResponse = {
+export type AgentAnswer = {
   readonly optionId?: string;
-  readonly requestId: string;
+  readonly interactionId: string;
   readonly text?: string;
 };
 
+/** How a message answers what the agent asks. */
+interface Asks {
+  readonly canRespond: (interactionId: string) => boolean;
+  readonly onAnswers: (answers: readonly AgentAnswer[]) => void | Promise<void>;
+  /** Every question a call asked; its part holds only the latest. */
+  readonly questionsFor: (callId: string) => readonly Interaction[];
+}
+
 type EveFilePart = Extract<EveMessagePart, { type: "file" }>;
+type Step = Extract<EveMessagePart, { type: "reasoning" | "tool" }>;
 
 export function AgentMessage({
-  canRespond,
-  isStreaming,
   message,
-  onInputResponses,
-  questionsFor,
-}: {
-  readonly canRespond: (requestId: string) => boolean;
-  readonly isStreaming: boolean;
-  readonly message: EveMessage;
-  readonly onInputResponses: (responses: readonly AgentInputResponse[]) => void | Promise<void>;
-  readonly questionsFor: (callId: string) => readonly ConversationInput[];
-}) {
-  const lastTextIndex = message.parts.reduce(
-    (last, part, index) => (part.type === "text" ? index : last),
-    -1,
-  );
-  const hasAssistantText =
-    message.role === "assistant" &&
-    message.parts.some((part) => part.type === "text" && part.text.length > 0);
-
+  view,
+  ...asks
+}: Asks & { readonly message: EveMessage; readonly view: SessionView }) {
   return (
     <Message
       data-optimistic={message.metadata?.optimistic ? "true" : undefined}
       from={message.role}
     >
       <MessageContent>
-        {message.parts.map((part, index) =>
-          hasAssistantText && part.type === "reasoning" ? null : (
-            <AgentMessagePart
-              canRespond={canRespond}
-              key={partKey(part, index)}
-              onInputResponses={onInputResponses}
-              part={part}
-              questionsFor={questionsFor}
-              showCaret={isStreaming && message.role === "assistant" && index === lastTextIndex}
-            />
+        {blocksOf(message.parts, asks).map((block, index) =>
+          Array.isArray(block) ? (
+            <Steps asks={asks} key={partKey(block[0]!, index)} steps={block} view={view} />
+          ) : (
+            <AgentMessagePart asks={asks} key={partKey(block, index)} part={block} />
           ),
         )}
       </MessageContent>
@@ -417,120 +430,268 @@ export function AgentMessage({
   );
 }
 
-function AgentMessagePart({
-  canRespond,
-  onInputResponses,
-  part,
-  questionsFor,
-  showCaret,
-}: {
-  readonly canRespond: (requestId: string) => boolean;
-  readonly onInputResponses: (responses: readonly AgentInputResponse[]) => void | Promise<void>;
-  readonly part: EveMessagePart;
-  readonly questionsFor: (callId: string) => readonly ConversationInput[];
-  readonly showCaret: boolean;
-}) {
+/**
+ * A message's parts, with each run of steps (reasoning and calls) gathered into one list. A call
+ * that asks a question shows as that question instead, and the model waiting on or cancelling
+ * its own tasks isn't activity to show.
+ */
+function blocksOf(parts: readonly EveMessagePart[], asks: Asks): (EveMessagePart | Step[])[] {
+  const blocks: (EveMessagePart | Step[])[] = [];
+  for (const part of parts) {
+    if (part.type === "tool" && part.kind === "control") continue;
+    const isStep =
+      part.type === "reasoning" ||
+      (part.type === "tool" && asks.questionsFor(part.callId).length === 0);
+    const last = blocks.at(-1);
+    if (!isStep) blocks.push(part);
+    else if (Array.isArray(last)) last.push(part as Step);
+    else blocks.push([part as Step]);
+  }
+  return blocks;
+}
+
+function AgentMessagePart({ asks, part }: { readonly asks: Asks; readonly part: EveMessagePart }) {
   switch (part.type) {
-    case "step-start":
-      return null;
     case "text":
       return (
-        <MessageResponse caret="block" isAnimating={showCaret}>
+        <MessageResponse caret="block" isAnimating={part.state === "streaming"}>
           {part.text}
         </MessageResponse>
       );
-    case "reasoning":
-      return (
-        <Reasoning defaultOpen isStreaming={part.state === "streaming"}>
-          <ReasoningTrigger />
-          <ReasoningContent>{part.text}</ReasoningContent>
-        </Reasoning>
-      );
     case "file":
       return <AttachmentPart part={part} />;
-    case "authorization":
-      return <AuthorizationPrompt part={part} />;
-    case "dynamic-tool": {
-      const questions = questionsFor(part.toolCallId);
-      if (questions.length > 0) {
-        return (
-          <div className="space-y-4">
-            {questions.map(({ request, response }) => (
+    case "interaction":
+      return <InteractionPrompt asks={asks} part={part} />;
+    case "tool":
+      return (
+        <div className="space-y-4">
+          {asks.questionsFor(part.callId).map((question) => {
+            // The call's part shows an answer this client sent at once; the view, once eve has it.
+            const { answer, ...request } =
+              part.interaction?.interactionId === question.interactionId
+                ? part.interaction
+                : question;
+            return (
               <QuestionRequest
-                canRespond={canRespond(request.requestId)}
-                inputRequest={request}
-                inputResponse={response}
-                key={request.requestId}
-                onInputResponses={onInputResponses}
+                answer={answer}
+                canRespond={asks.canRespond(request.interactionId)}
+                interaction={request}
+                key={request.interactionId}
+                onAnswers={asks.onAnswers}
               />
-            ))}
-          </div>
-        );
-      }
-
-      return (
-        <>
-          <Tool>
-            <ToolHeader
-              state={part.state}
-              title={part.toolMetadata?.eve?.label ?? part.toolName}
-              toolName={part.toolName}
-              type="dynamic-tool"
-            />
-            <ToolContent>
-              {part.toolName === "bash" ? (
-                <BashToolContent
-                  errorText={part.errorText}
-                  input={part.input}
-                  output={part.output}
-                />
-              ) : (
-                <>
-                  <ToolInput input={part.input} />
-                  <ToolOutput errorText={part.errorText} output={part.output} />
-                </>
-              )}
-            </ToolContent>
-          </Tool>
-          {/* Kept outside the collapsed card so a pending approval is always visible. */}
-          <InputRequestActions
-            canRespond={canRespond}
-            part={part}
-            onInputResponses={onInputResponses}
-          />
-        </>
+            );
+          })}
+        </div>
       );
-    }
+    default:
+      return null;
   }
 }
 
+/**
+ * A run of steps. Several fold into one line that opens while they work; an approval waits
+ * below them, so it stays in view when the list is closed.
+ */
+function Steps({
+  asks,
+  steps,
+  view,
+}: {
+  readonly asks: Asks;
+  readonly steps: readonly Step[];
+  readonly view: SessionView;
+}) {
+  const [open, setOpen] = useState<boolean>();
+  const states = steps.map((step) => stepState(step, view));
+  const working = states.some((state) => state === "working");
+  const waiting = states.some((state) => state === "waiting");
+  const failed = states.filter((state) => state === "failed").length;
+  const lines = (
+    <Trace>
+      {steps.map((step, index) =>
+        step.type === "reasoning" ? (
+          <ReasoningLine key={partKey(step, index)} part={step} />
+        ) : (
+          <ToolLine key={step.callId} part={step} state={callState(view, step.callId)} />
+        ),
+      )}
+    </Trace>
+  );
+  const approvals = steps.flatMap((step) =>
+    step.type === "tool" &&
+    step.interaction?.request.kind === "approval" &&
+    step.interaction.status !== "settled"
+      ? [step.interaction]
+      : [],
+  );
+
+  return (
+    <>
+      {steps.length === 1 ? (
+        lines
+      ) : (
+        <TraceCollapsible onOpenChange={setOpen} open={open ?? (working || waiting)}>
+          <TraceCollapsibleTrigger>
+            <TraceLine status={working ? "running" : failed > 0 ? "error" : undefined}>
+              <TraceTitle>
+                {working
+                  ? "Working"
+                  : waiting
+                    ? "Waiting for you"
+                    : \`Worked\${duration(steps, view) ?? ""}\`}
+              </TraceTitle>
+              <TraceDescription>
+                {failed > 0 ? \`\${failed} of \${steps.length} failed\` : \`\${steps.length} steps\`}
+              </TraceDescription>
+            </TraceLine>
+          </TraceCollapsibleTrigger>
+          <TraceCollapsibleContent>{lines}</TraceCollapsibleContent>
+        </TraceCollapsible>
+      )}
+      {approvals.map((interaction) => (
+        <InteractionActions
+          answer={interaction.answer}
+          asks={asks}
+          interaction={interaction}
+          key={interaction.interactionId}
+        />
+      ))}
+    </>
+  );
+}
+
+function stepState(step: Step, view: SessionView): "working" | "waiting" | "failed" | "done" {
+  if (step.type === "reasoning") return step.state === "streaming" ? "working" : "done";
+  const state = callState(view, step.callId);
+  if (state === "approval" || state === "blocked") return "waiting";
+  const status = state === undefined ? "running" : CALL_LINES[state].status;
+  return status === "error" ? "failed" : status === undefined ? "done" : "working";
+}
+
+/** " for 12s": from the first step's start to the last one's end, when facts report times. */
+function duration(steps: readonly Step[], view: SessionView): string | undefined {
+  const times = steps.flatMap((step) => {
+    const observed = step.type === "tool" ? call(view, step.callId) : part(view, step.id ?? "");
+    if (observed?.startedAt === undefined) return [];
+    return [Date.parse(observed.startedAt), Date.parse(observed.endedAt ?? observed.startedAt)];
+  });
+  if (times.length === 0) return undefined;
+  const seconds = Math.round((Math.max(...times) - Math.min(...times)) / 1000);
+  if (seconds < 1) return undefined;
+  return seconds < 60 ? \` for \${seconds}s\` : \` for \${Math.floor(seconds / 60)}m \${seconds % 60}s\`;
+}
+
+/** How a call's line reads in each state: its status, and a word on why. */
+const CALL_LINES: Record<
+  CallState,
+  { readonly status?: "running" | "error" | "pending"; readonly note?: string }
+> = {
+  approval: { note: "Needs approval", status: "pending" },
+  blocked: { note: "Waiting for you", status: "running" },
+  cancelled: { note: "Stopped" },
+  completed: {},
+  failed: { note: "Failed", status: "error" },
+  rejected: { note: "Denied" },
+  requested: { status: "pending" },
+  running: { status: "running" },
+};
+
+function ToolLine({
+  part,
+  state,
+}: {
+  readonly part: EveToolPart;
+  readonly state: CallState | undefined;
+}) {
+  // A call the model is still writing has no row yet.
+  const { note, status } = state === undefined ? { status: "running" as const } : CALL_LINES[state];
+  // An answer waits on its approval until every approval asked with it is decided.
+  const answered =
+    state === "approval" && part.interaction?.answer !== undefined
+      ? "Response submitted"
+      : undefined;
+  const Icon = part.name === "bash" ? TerminalIcon : part.kind === "agent" ? BotIcon : WrenchIcon;
+  const line = (
+    <TraceLine status={status}>
+      <TraceIcon>
+        <Icon />
+      </TraceIcon>
+      <TraceTitle>{part.label}</TraceTitle>
+      {(answered ?? note) ? <TraceDescription>{answered ?? note}</TraceDescription> : null}
+    </TraceLine>
+  );
+  if (part.input === undefined && part.output === undefined && part.error === undefined)
+    return line;
+
+  return (
+    <TraceCollapsible>
+      <TraceCollapsibleTrigger>{line}</TraceCollapsibleTrigger>
+      <TraceCollapsibleContent className="space-y-2 text-foreground">
+        {part.name === "bash" ? (
+          <BashToolContent
+            errorText={part.error?.message}
+            input={part.input}
+            output={part.output}
+          />
+        ) : (
+          <>
+            {part.input === undefined ? null : <ToolInput input={part.input} />}
+            <ToolOutput errorText={part.error?.message} output={part.output} />
+          </>
+        )}
+      </TraceCollapsibleContent>
+    </TraceCollapsible>
+  );
+}
+
+function ReasoningLine({ part }: { readonly part: Extract<Step, { type: "reasoning" }> }) {
+  const [open, setOpen] = useState<boolean>();
+  const running = part.state === "streaming";
+  const line = (
+    <TraceLine status={running ? "running" : undefined}>
+      <TraceIcon>
+        <BrainIcon />
+      </TraceIcon>
+      <TraceTitle>{running ? "Thinking" : "Thought"}</TraceTitle>
+    </TraceLine>
+  );
+  if (part.text.length === 0) return line;
+
+  return (
+    <TraceCollapsible onOpenChange={setOpen} open={open ?? running}>
+      <TraceCollapsibleTrigger>{line}</TraceCollapsibleTrigger>
+      <TraceCollapsibleContent className="whitespace-pre-wrap">{part.text}</TraceCollapsibleContent>
+    </TraceCollapsible>
+  );
+}
+
 function QuestionRequest({
   canRespond,
-  inputRequest,
-  inputResponse,
-  onInputResponses,
+  interaction,
+  answer,
+  onAnswers,
 }: {
   readonly canRespond: boolean;
-  readonly inputRequest: EveMessageInputRequest;
-  readonly inputResponse?: AgentInputResponse;
-  readonly onInputResponses: (responses: readonly AgentInputResponse[]) => void | Promise<void>;
+  readonly interaction: Interaction;
+  readonly answer?: AgentAnswer;
+  readonly onAnswers: (responses: readonly AgentAnswer[]) => void | Promise<void>;
 }) {
-  const options = inputRequest.options ?? [];
-  const acceptsFreeform = inputRequest.allowFreeform === true || options.length === 0;
-  const disabled = !canRespond || inputResponse !== undefined;
+  const options = interaction.request.options ?? [];
+  const acceptsFreeform = interaction.request.allowFreeform === true || options.length === 0;
+  const disabled = !canRespond || answer !== undefined;
 
   const submitResponse = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    const answer = new FormData(event.currentTarget).get(inputRequest.requestId);
-    if (typeof answer !== "string") {
+    const value = new FormData(event.currentTarget).get(interaction.interactionId);
+    if (typeof value !== "string") {
       return;
     }
 
-    const option = options.find(({ id }) => id === answer);
-    void onInputResponses([
+    const option = options.find(({ id }) => id === value);
+    void onAnswers([
       option === undefined
-        ? { requestId: inputRequest.requestId, text: answer.trim() }
-        : { optionId: option.id, requestId: inputRequest.requestId },
+        ? { interactionId: interaction.interactionId, text: value.trim() }
+        : { optionId: option.id, interactionId: interaction.interactionId },
     ]);
   };
 
@@ -543,15 +704,15 @@ function QuestionRequest({
       onSubmit={submitResponse}
       shortcuts="numbers"
     >
-      <QuestionnaireItem name={inputRequest.requestId} required>
+      <QuestionnaireItem name={interaction.interactionId} required>
         <QuestionnaireTitle className="text-sm font-medium">
-          {inputRequest.prompt}
+          {interaction.request.prompt}
         </QuestionnaireTitle>
         <QuestionnaireChoices>
           {options.map((option) => (
             <QuestionnaireChoice
-              className={cn(inputResponse?.optionId === option.id && "data-disabled:opacity-100")}
-              defaultChecked={inputResponse?.optionId === option.id}
+              className={cn(answer?.optionId === option.id && "data-disabled:opacity-100")}
+              defaultChecked={answer?.optionId === option.id}
               disabled={disabled}
               key={option.id}
               value={option.id}
@@ -567,8 +728,8 @@ function QuestionRequest({
           {acceptsFreeform ? (
             <QuestionnaireInput
               aria-label="Answer"
-              className={cn(inputResponse?.text !== undefined && "disabled:opacity-100")}
-              defaultValue={inputResponse?.text}
+              className={cn(answer?.text !== undefined && "disabled:opacity-100")}
+              defaultValue={answer?.text}
               disabled={disabled}
               placeholder="Type your answer…"
             />
@@ -616,12 +777,43 @@ function AttachmentPart({ part }: { readonly part: EveFilePart }) {
   );
 }
 
-function AuthorizationPrompt({ part }: { readonly part: EveAuthorizationPart }) {
-  const isAuthorized = part.state === "completed" && part.outcome === "authorized";
-  const isCompleted = part.state === "completed";
+/** An interaction no call carries: a sign-in, the budget prompt, or a question of its own. */
+function InteractionPrompt({
+  asks,
+  part,
+}: {
+  readonly asks: Asks;
+  readonly part: EveInteractionPart;
+}) {
+  const { request } = part;
+  if (request.signIn !== undefined) return <SignInPrompt part={part} />;
+  if (request.kind === "question") {
+    return (
+      <QuestionRequest
+        answer={part.answer}
+        canRespond={asks.canRespond(part.interactionId)}
+        interaction={part}
+        onAnswers={asks.onAnswers}
+      />
+    );
+  }
+  return <InteractionActions answer={part.answer} asks={asks} interaction={part} />;
+}
+
+function SignInPrompt({ part }: { readonly part: EveInteractionPart }) {
+  const signIn = part.request.signIn;
+  const name = signIn?.displayName ?? signIn?.name ?? "the service";
+  const isAuthorized = part.outcome === "accepted";
+  const isCompleted = part.status === "settled";
   const Icon = isAuthorized ? CheckCircleIcon : isCompleted ? XCircleIcon : KeyRoundIcon;
-  const instructions = part.authorization?.instructions;
-  const shouldShowInstructions = instructions !== undefined && instructions !== part.description;
+  const instructions = signIn?.instructions;
+  const description = isCompleted
+    ? isAuthorized
+      ? \`\${name} connected.\`
+      : \`\${name} authorization \${signInEnding(part.outcome ?? "withdrawn")}\${
+          part.reason !== undefined ? \` (\${part.reason})\` : ""
+        }.\`
+    : part.request.prompt;
 
   return (
     <div
@@ -648,24 +840,30 @@ function AuthorizationPrompt({ part }: { readonly part: EveAuthorizationPart })
           <Icon className="size-4" />
         </span>
         <div className="min-w-0 flex-1 space-y-2">
-          <p className="font-medium text-sm">{authorizationTitle(part)}</p>
-          <p className="text-muted-foreground text-sm">{authorizationDescription(part)}</p>
-          {shouldShowInstructions ? (
+          <p className="font-medium text-sm">
+            {isCompleted
+              ? isAuthorized
+                ? \`\${name} connected\`
+                : \`\${name} authorization \${signInEnding(part.outcome ?? "withdrawn")}\`
+              : \`Connect \${name}\`}
+          </p>
+          <p className="text-muted-foreground text-sm">{description}</p>
+          {!isCompleted && instructions !== undefined && instructions !== description ? (
             <p className="text-muted-foreground text-sm">{instructions}</p>
           ) : null}
-          {part.state === "required" && part.authorization?.userCode ? (
+          {!isCompleted && signIn?.userCode ? (
             <div className="flex flex-wrap items-center gap-2 text-sm">
               <span className="text-muted-foreground">Code</span>
               <code className="rounded-md bg-background px-2 py-1 font-mono">
-                {part.authorization.userCode}
+                {signIn.userCode}
               </code>
             </div>
           ) : null}
-          {part.state === "required" && part.authorization?.url ? (
+          {!isCompleted && signIn?.url ? (
             <Button asChild size="sm">
-              <a href={part.authorization.url} rel="noreferrer" target="_blank">
+              <a href={signIn.url} rel="noreferrer" target="_blank">
                 <ExternalLinkIcon className="size-4" />
-                Sign in with {part.displayName}
+                Sign in with {name}
               </a>
             </Button>
           ) : null}
@@ -675,40 +873,6 @@ function AuthorizationPrompt({ part }: { readonly part: EveAuthorizationPart })
   );
 }
 
-function authorizationTitle(part: EveAuthorizationPart): string {
-  if (part.state === "required") {
-    return \`Connect \${part.displayName}\`;
-  }
-  if (part.outcome === "authorized") {
-    return \`\${part.displayName} connected\`;
-  }
-  return \`\${part.displayName} authorization \${formatAuthorizationOutcome(part.outcome)}\`;
-}
-
-function authorizationDescription(part: EveAuthorizationPart): string {
-  if (part.state === "required") {
-    return part.description;
-  }
-  if (part.outcome === "authorized") {
-    return \`\${part.displayName} connected.\`;
-  }
-  const tail = part.reason !== undefined ? \` (\${part.reason})\` : "";
-  return \`\${part.displayName} authorization \${formatAuthorizationOutcome(part.outcome)}\${tail}.\`;
-}
-
-function formatAuthorizationOutcome(outcome: NonNullable<EveAuthorizationPart["outcome"]>): string {
-  switch (outcome) {
-    case "authorized":
-      return "authorized";
-    case "declined":
-      return "declined";
-    case "failed":
-      return "failed";
-    case "timed-out":
-      return "timed out";
-  }
-}
-
 function formatBytes(size: number | undefined): string | undefined {
   if (size === undefined) {
     return undefined;
@@ -722,60 +886,46 @@ function formatBytes(size: number | undefined): string | undefined {
   return \`\${(size / (1024 * 1024)).toFixed(1)} MB\`;
 }
 
-function InputRequestActions({
-  canRespond,
-  onInputResponses,
-  part,
+/** An interaction's prompt with a button for each option, or how it was answered. */
+function InteractionActions({
+  answer,
+  asks,
+  interaction,
 }: {
-  readonly canRespond: (requestId: string) => boolean;
-  readonly onInputResponses: (responses: readonly AgentInputResponse[]) => void | Promise<void>;
-  readonly part: EveDynamicToolPart;
+  readonly answer?: AgentAnswer;
+  readonly asks: Asks;
+  readonly interaction: Interaction;
 }) {
-  const inputRequest = part.toolMetadata?.eve?.inputRequest;
-  if (!inputRequest) {
-    return null;
-  }
-
-  const inputResponse = part.toolMetadata?.eve?.inputResponse;
-  const selectedOption = inputRequest.options?.find(
-    (option) => option.id === inputResponse?.optionId,
+  const selectedOption = interaction.request.options?.find(
+    (option) => option.id === answer?.optionId,
   );
-  // An approval can settle before its batch resolves, without an input response.
-  const settledApproval =
-    part.approval?.approved === undefined
-      ? undefined
-      : part.approval.approved
-        ? "Approved"
-        : "Denied";
 
   return (
     <div className="space-y-3 rounded-md border border-yellow-500/30 bg-yellow-500/5 p-3">
-      <p className="text-muted-foreground text-sm">{inputRequest.prompt}</p>
-      {inputResponse || settledApproval ? (
+      <p className="text-muted-foreground text-sm">{interaction.request.prompt}</p>
+      {answer ? (
         <p className="font-medium text-sm">
-          Responded:{" "}
-          {selectedOption?.label ??
-            inputResponse?.text ??
-            inputResponse?.optionId ??
-            settledApproval}
+          Responded: {selectedOption?.label ?? answer.text ?? answer.optionId}
         </p>
       ) : (
         <div className="flex flex-wrap gap-2">
-          {inputRequest.options?.map((option) => (
+          {interaction.request.options?.map((option, index) => (
             <Button
-              disabled={!canRespond(inputRequest.requestId)}
+              disabled={!asks.canRespond(interaction.interactionId)}
               key={option.id}
               onClick={() => {
-                void onInputResponses([
+                void asks.onAnswers([
                   {
                     optionId: option.id,
-                    requestId: inputRequest.requestId,
+                    interactionId: interaction.interactionId,
                   },
                 ]);
               }}
               size="sm"
               type="button"
-              variant={option.style === "danger" ? "destructive" : "default"}
+              variant={
+                option.style === "danger" ? "destructive" : index === 0 ? "default" : "outline"
+              }
             >
               {option.label}
             </Button>
@@ -788,12 +938,10 @@ function InputRequestActions({
 
 function partKey(part: EveMessagePart, index: number): string {
   switch (part.type) {
-    case "authorization":
-      return part.attemptId === undefined
-        ? \`authorization:\${part.turnId}:\${part.stepIndex}:\${part.name}\`
-        : \`authorization:\${part.attemptId}\`;
-    case "dynamic-tool":
-      return part.toolCallId;
+    case "interaction":
+      return \`interaction:\${part.interactionId}\`;
+    case "tool":
+      return part.callId;
     case "reasoning":
     case "text":
       return \`\${part.type}:\${part.id ?? index}\`;
@@ -825,6 +973,7 @@ export default function AppleIcon() {
 `,"app/eve-agent.ts":`/** Named workspace agent selected by the Web Chat installer. */
 export const WEB_CHAT_AGENT: string | undefined = undefined;
 `,"app/globals.css":`@import "tailwindcss";
+@import "tw-animate-css";
 @source "../node_modules/streamdown/dist/*.js";
 
 @theme inline {
@@ -928,6 +1077,94 @@ input,
 textarea {
   font: inherit;
 }
+
+/*
+ * From shadcn/tailwind.css, for Trace: Radix marks open and closed parts with data-state, and a
+ * running line's title shimmers.
+ */
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state="closed"]),
+  &:where([data-closed]:not([data-closed="false"])) {
+    @slot;
+  }
+}
+
+@property --shimmer-angle {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 20deg;
+}
+
+@property --shimmer-image {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --shimmer-text-fill {
+  syntax: "*";
+  inherits: false;
+}
+
+@theme inline {
+  @keyframes tw-shimmer {
+    from {
+      background-position: 100% 0;
+    }
+    to {
+      background-position: 0 0;
+    }
+  }
+}
+
+@utility shimmer {
+  --_spread: var(--shimmer-spread, calc(3ch + 40px));
+  --_base: currentColor;
+  --_highlight: var(--shimmer-color, oklch(from currentColor l c h / calc(alpha * 0.2)));
+
+  background-image: var(
+    --shimmer-image,
+    linear-gradient(
+      calc(90deg + var(--shimmer-angle)),
+      var(--_base) calc(50% - var(--_spread)),
+      color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * 0.5),
+      var(--_highlight) 50%,
+      color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * 0.5),
+      var(--_base) calc(50% + var(--_spread))
+    )
+  );
+  background-repeat: no-repeat;
+  background-size: calc(200% + var(--_spread) * 2) 100%;
+  background-position: 0 0;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
+  animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
+
+  @variant dark {
+    --_highlight: var(
+      --shimmer-color,
+      oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4))
+    );
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    background-image: none;
+    -webkit-text-fill-color: currentColor;
+  }
+}
+
+@utility shimmer-none {
+  --shimmer-image: none;
+  --shimmer-text-fill: currentColor;
+}
 `,"app/icon.svg":`<svg width="102" height="102" viewBox="0 0 102 102" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path fill="#000" d="M0 0h102v102H0z" />
   <path
@@ -990,203 +1227,6 @@ export default async function SessionPage({
 export default function NewSessionPage() {
   return <AgentChat sessionless />;
 }
-`,"components/ai-elements/chain-of-thought.tsx":`"use client";
-
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { Badge } from "@/components/ui/badge";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { cn } from "@/lib/utils";
-import type { LucideIcon } from "lucide-react";
-import { BrainIcon, ChevronDownIcon, DotIcon } from "lucide-react";
-import type { ComponentProps, ReactNode } from "react";
-import { createContext, memo, useContext, useMemo } from "react";
-
-interface ChainOfThoughtContextValue {
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
-}
-
-const ChainOfThoughtContext = createContext<ChainOfThoughtContextValue | null>(null);
-
-const useChainOfThought = () => {
-  const context = useContext(ChainOfThoughtContext);
-  if (!context) {
-    throw new Error("ChainOfThought components must be used within ChainOfThought");
-  }
-  return context;
-};
-
-export type ChainOfThoughtProps = ComponentProps<"div"> & {
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-};
-
-export const ChainOfThought = memo(
-  ({
-    className,
-    open,
-    defaultOpen = false,
-    onOpenChange,
-    children,
-    ...props
-  }: ChainOfThoughtProps) => {
-    const [isOpen, setIsOpen] = useControllableState({
-      defaultProp: defaultOpen,
-      onChange: onOpenChange,
-      prop: open,
-    });
-
-    const chainOfThoughtContext = useMemo(() => ({ isOpen, setIsOpen }), [isOpen, setIsOpen]);
-
-    return (
-      <ChainOfThoughtContext.Provider value={chainOfThoughtContext}>
-        <div className={cn("not-prose w-full space-y-4", className)} {...props}>
-          {children}
-        </div>
-      </ChainOfThoughtContext.Provider>
-    );
-  },
-);
-
-export type ChainOfThoughtHeaderProps = ComponentProps<typeof CollapsibleTrigger>;
-
-export const ChainOfThoughtHeader = memo(
-  ({ className, children, ...props }: ChainOfThoughtHeaderProps) => {
-    const { isOpen, setIsOpen } = useChainOfThought();
-
-    return (
-      <Collapsible onOpenChange={setIsOpen} open={isOpen}>
-        <CollapsibleTrigger
-          className={cn(
-            "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
-            className,
-          )}
-          {...props}
-        >
-          <BrainIcon className="size-4" />
-          <span className="flex-1 text-left">{children ?? "Chain of Thought"}</span>
-          <ChevronDownIcon
-            className={cn("size-4 transition-transform", isOpen ? "rotate-180" : "rotate-0")}
-          />
-        </CollapsibleTrigger>
-      </Collapsible>
-    );
-  },
-);
-
-export type ChainOfThoughtStepProps = ComponentProps<"div"> & {
-  icon?: LucideIcon;
-  label: ReactNode;
-  description?: ReactNode;
-  status?: "complete" | "active" | "pending";
-};
-
-const stepStatusStyles = {
-  active: "text-foreground",
-  complete: "text-muted-foreground",
-  pending: "text-muted-foreground/50",
-};
-
-export const ChainOfThoughtStep = memo(
-  ({
-    className,
-    icon: Icon = DotIcon,
-    label,
-    description,
-    status = "complete",
-    children,
-    ...props
-  }: ChainOfThoughtStepProps) => (
-    <div
-      className={cn(
-        "flex gap-2 text-sm",
-        stepStatusStyles[status],
-        "fade-in-0 slide-in-from-top-2 animate-in",
-        className,
-      )}
-      {...props}
-    >
-      <div className="relative mt-0.5">
-        <Icon className="size-4" />
-        <div className="absolute top-7 bottom-0 left-1/2 -mx-px w-px bg-border" />
-      </div>
-      <div className="flex-1 space-y-2 overflow-hidden">
-        <div>{label}</div>
-        {description && <div className="text-muted-foreground text-xs">{description}</div>}
-        {children}
-      </div>
-    </div>
-  ),
-);
-
-export type ChainOfThoughtSearchResultsProps = ComponentProps<"div">;
-
-export const ChainOfThoughtSearchResults = memo(
-  ({ className, ...props }: ChainOfThoughtSearchResultsProps) => (
-    <div className={cn("flex flex-wrap items-center gap-2", className)} {...props} />
-  ),
-);
-
-export type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>;
-
-export const ChainOfThoughtSearchResult = memo(
-  ({ className, children, ...props }: ChainOfThoughtSearchResultProps) => (
-    <Badge
-      className={cn("gap-1 px-2 py-0.5 font-normal text-xs", className)}
-      variant="secondary"
-      {...props}
-    >
-      {children}
-    </Badge>
-  ),
-);
-
-export type ChainOfThoughtContentProps = ComponentProps<typeof CollapsibleContent>;
-
-export const ChainOfThoughtContent = memo(
-  ({ className, children, ...props }: ChainOfThoughtContentProps) => {
-    const { isOpen } = useChainOfThought();
-
-    return (
-      <Collapsible open={isOpen}>
-        <CollapsibleContent
-          className={cn(
-            "mt-2 space-y-3",
-            "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
-            className,
-          )}
-          {...props}
-        >
-          {children}
-        </CollapsibleContent>
-      </Collapsible>
-    );
-  },
-);
-
-export type ChainOfThoughtImageProps = ComponentProps<"div"> & {
-  caption?: string;
-};
-
-export const ChainOfThoughtImage = memo(
-  ({ className, children, caption, ...props }: ChainOfThoughtImageProps) => (
-    <div className={cn("mt-2 space-y-2", className)} {...props}>
-      <div className="relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg bg-muted p-3">
-        {children}
-      </div>
-      {caption && <p className="text-muted-foreground text-xs">{caption}</p>}
-    </div>
-  ),
-);
-
-ChainOfThought.displayName = "ChainOfThought";
-ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader";
-ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
-ChainOfThoughtSearchResults.displayName = "ChainOfThoughtSearchResults";
-ChainOfThoughtSearchResult.displayName = "ChainOfThoughtSearchResult";
-ChainOfThoughtContent.displayName = "ChainOfThoughtContent";
-ChainOfThoughtImage.displayName = "ChainOfThoughtImage";
 `,"components/ai-elements/code-block.tsx":`"use client";
 
 import { Button } from "@/components/ui/button";
@@ -2303,54 +2343,20 @@ export const MessageToolbar = ({ className, children, ...props }: MessageToolbar
 );
 `,"components/ai-elements/prompt-input.tsx":`"use client";
 
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from "@/components/ui/command";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupTextarea,
-} from "@/components/ui/input-group";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Spinner } from "@/components/ui/spinner";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-import type { ChatStatus, FileUIPart, SourceDocumentUIPart } from "ai";
-import { ArrowUpIcon, ImageIcon, Monitor, PlusIcon, XIcon } from "lucide-react";
-import { nanoid } from "nanoid";
-import type {
-  ChangeEvent,
-  ChangeEventHandler,
-  ClipboardEventHandler,
-  ComponentProps,
-  FormEvent,
-  FormEventHandler,
-  HTMLAttributes,
-  KeyboardEventHandler,
-  PropsWithChildren,
-  ReactNode,
-  RefObject,
-} from "react";
+import { InputGroup, InputGroupButton, InputGroupTextarea } from "@/components/ui/input-group";
+import { cn } from "@/lib/utils";
+import type { FileUIPart } from "ai";
+import { ArrowUpIcon } from "lucide-react";
+import { nanoid } from "nanoid";
+import type {
+  ChangeEventHandler,
+  ClipboardEventHandler,
+  ComponentProps,
+  FormEvent,
+  FormEventHandler,
+  HTMLAttributes,
+  KeyboardEventHandler,
+} from "react";
 import {
   Children,
   createContext,
@@ -2362,15 +2368,10 @@ import {
   useState,
 } from "react";
 
-// ============================================================================
-// Helpers
-// ============================================================================
-
 const convertBlobUrlToDataUrl = async (url: string): Promise<string | null> => {
   try {
     const response = await fetch(url);
     const blob = await response.blob();
-    // FileReader uses callback-based API, wrapping in Promise is necessary
     // oxlint-disable-next-line eslint-plugin-promise(avoid-new)
     return new Promise((resolve) => {
       const reader = new FileReader();
@@ -2385,387 +2386,32 @@ const convertBlobUrlToDataUrl = async (url: string): Promise<string | null> => {
   }
 };
 
-const captureScreenshot = async (): Promise<File | null> => {
-  if (typeof navigator === "undefined" || !navigator.mediaDevices?.getDisplayMedia) {
-    return null;
-  }
-
-  let stream: MediaStream | null = null;
-  const video = document.createElement("video");
-  video.muted = true;
-  video.playsInline = true;
-
-  try {
-    stream = await navigator.mediaDevices.getDisplayMedia({
-      audio: false,
-      video: true,
-    });
-
-    video.srcObject = stream;
-
-    // Video element uses callback-based API, wrapping in Promise is necessary
-    // oxlint-disable-next-line eslint-plugin-promise(avoid-new)
-    await new Promise<void>((resolve, reject) => {
-      // oxlint-disable-next-line eslint-plugin-unicorn(prefer-add-event-listener)
-      video.onloadedmetadata = () => resolve();
-      // oxlint-disable-next-line eslint-plugin-unicorn(prefer-add-event-listener)
-      video.onerror = () => reject(new Error("Failed to load screen stream"));
-    });
-
-    await video.play();
-
-    const width = video.videoWidth;
-    const height = video.videoHeight;
-    if (!width || !height) {
-      return null;
-    }
-
-    const canvas = document.createElement("canvas");
-    canvas.width = width;
-    canvas.height = height;
-    const context = canvas.getContext("2d");
-    if (!context) {
-      return null;
-    }
-
-    context.drawImage(video, 0, 0, width, height);
-    // canvas.toBlob uses callback-based API, wrapping in Promise is necessary
-    // oxlint-disable-next-line eslint-plugin-promise(avoid-new)
-    const blob = await new Promise<Blob | null>((resolve) => {
-      canvas.toBlob(resolve, "image/png");
-    });
-    if (!blob) {
-      return null;
-    }
-
-    const timestamp = new Date()
-      .toISOString()
-      .replaceAll(/[:.]/g, "-")
-      .replace("T", "_")
-      .replace("Z", "");
-
-    return new File([blob], \`screenshot-\${timestamp}.png\`, {
-      lastModified: Date.now(),
-      type: "image/png",
-    });
-  } finally {
-    if (stream) {
-      for (const track of stream.getTracks()) {
-        track.stop();
-      }
-    }
-    video.pause();
-    video.srcObject = null;
-  }
-};
-
-// ============================================================================
-// Provider Context & Types
-// ============================================================================
-
-export interface AttachmentsContext {
+interface AttachmentsContext {
   files: (FileUIPart & { id: string })[];
   add: (files: File[] | FileList) => void;
   remove: (id: string) => void;
   clear: () => void;
-  openFileDialog: () => void;
-  fileInputRef: RefObject<HTMLInputElement | null>;
-}
-
-export interface TextInputContext {
-  value: string;
-  setInput: (v: string) => void;
-  clear: () => void;
-}
-
-export interface PromptInputControllerProps {
-  textInput: TextInputContext;
-  attachments: AttachmentsContext;
-  /** INTERNAL: Allows PromptInput to register its file textInput + "open" callback */
-  __registerFileInput: (ref: RefObject<HTMLInputElement | null>, open: () => void) => void;
 }
 
-const PromptInputController = createContext<PromptInputControllerProps | null>(null);
-const ProviderAttachmentsContext = createContext<AttachmentsContext | null>(null);
-
-export const usePromptInputController = () => {
-  const ctx = useContext(PromptInputController);
-  if (!ctx) {
-    throw new Error(
-      "Wrap your component inside <PromptInputProvider> to use usePromptInputController().",
-    );
-  }
-  return ctx;
-};
-
-// Optional variants (do NOT throw). Useful for dual-mode components.
-const useOptionalPromptInputController = () => useContext(PromptInputController);
-
-export const useProviderAttachments = () => {
-  const ctx = useContext(ProviderAttachmentsContext);
-  if (!ctx) {
-    throw new Error(
-      "Wrap your component inside <PromptInputProvider> to use useProviderAttachments().",
-    );
-  }
-  return ctx;
-};
-
-const useOptionalProviderAttachments = () => useContext(ProviderAttachmentsContext);
-
-export type PromptInputProviderProps = PropsWithChildren<{
-  initialInput?: string;
-}>;
-
-/**
- * Optional global provider that lifts PromptInput state outside of PromptInput.
- * If you don't use it, PromptInput stays fully self-managed.
- */
-export const PromptInputProvider = ({
-  initialInput: initialTextInput = "",
-  children,
-}: PromptInputProviderProps) => {
-  // ----- textInput state
-  const [textInput, setTextInput] = useState(initialTextInput);
-  const clearInput = useCallback(() => setTextInput(""), []);
-
-  // ----- attachments state (global when wrapped)
-  const [attachmentFiles, setAttachmentFiles] = useState<(FileUIPart & { id: string })[]>([]);
-  const fileInputRef = useRef<HTMLInputElement | null>(null);
-  // oxlint-disable-next-line eslint(no-empty-function)
-  const openRef = useRef<() => void>(() => {});
-
-  const add = useCallback((files: File[] | FileList) => {
-    const incoming = [...files];
-    if (incoming.length === 0) {
-      return;
-    }
-
-    setAttachmentFiles((prev) => [
-      ...prev,
-      ...incoming.map((file) => ({
-        filename: file.name,
-        id: nanoid(),
-        mediaType: file.type,
-        type: "file" as const,
-        url: URL.createObjectURL(file),
-      })),
-    ]);
-  }, []);
-
-  const remove = useCallback((id: string) => {
-    setAttachmentFiles((prev) => {
-      const found = prev.find((f) => f.id === id);
-      if (found?.url) {
-        URL.revokeObjectURL(found.url);
-      }
-      return prev.filter((f) => f.id !== id);
-    });
-  }, []);
-
-  const clear = useCallback(() => {
-    setAttachmentFiles((prev) => {
-      for (const f of prev) {
-        if (f.url) {
-          URL.revokeObjectURL(f.url);
-        }
-      }
-      return [];
-    });
-  }, []);
-
-  // Keep a ref to attachments for cleanup on unmount (avoids stale closure)
-  const attachmentsRef = useRef(attachmentFiles);
-
-  useEffect(() => {
-    attachmentsRef.current = attachmentFiles;
-  }, [attachmentFiles]);
-
-  // Cleanup blob URLs on unmount to prevent memory leaks
-  useEffect(
-    () => () => {
-      for (const f of attachmentsRef.current) {
-        if (f.url) {
-          URL.revokeObjectURL(f.url);
-        }
-      }
-    },
-    [],
-  );
-
-  const openFileDialog = useCallback(() => {
-    openRef.current?.();
-  }, []);
-
-  const attachments = useMemo<AttachmentsContext>(
-    () => ({
-      add,
-      clear,
-      fileInputRef,
-      files: attachmentFiles,
-      openFileDialog,
-      remove,
-    }),
-    [attachmentFiles, add, remove, clear, openFileDialog],
-  );
-
-  const __registerFileInput = useCallback(
-    (ref: RefObject<HTMLInputElement | null>, open: () => void) => {
-      fileInputRef.current = ref.current;
-      openRef.current = open;
-    },
-    [],
-  );
-
-  const controller = useMemo<PromptInputControllerProps>(
-    () => ({
-      __registerFileInput,
-      attachments,
-      textInput: {
-        clear: clearInput,
-        setInput: setTextInput,
-        value: textInput,
-      },
-    }),
-    [textInput, clearInput, attachments, __registerFileInput],
-  );
-
-  return (
-    <PromptInputController.Provider value={controller}>
-      <ProviderAttachmentsContext.Provider value={attachments}>
-        {children}
-      </ProviderAttachmentsContext.Provider>
-    </PromptInputController.Provider>
-  );
-};
-
-// ============================================================================
-// Component Context & Hooks
-// ============================================================================
-
 const LocalAttachmentsContext = createContext<AttachmentsContext | null>(null);
 
 export const usePromptInputAttachments = () => {
-  // Prefer local context (inside PromptInput) as it has validation, fall back to provider
-  const provider = useOptionalProviderAttachments();
-  const local = useContext(LocalAttachmentsContext);
-  const context = local ?? provider;
+  const context = useContext(LocalAttachmentsContext);
   if (!context) {
-    throw new Error(
-      "usePromptInputAttachments must be used within a PromptInput or PromptInputProvider",
-    );
+    throw new Error("usePromptInputAttachments must be used within a PromptInput");
   }
   return context;
 };
 
-// ============================================================================
-// Referenced Sources (Local to PromptInput)
-// ============================================================================
-
-export interface ReferencedSourcesContext {
-  sources: (SourceDocumentUIPart & { id: string })[];
-  add: (sources: SourceDocumentUIPart[] | SourceDocumentUIPart) => void;
-  remove: (id: string) => void;
-  clear: () => void;
-}
-
-export const LocalReferencedSourcesContext = createContext<ReferencedSourcesContext | null>(null);
-
-export const usePromptInputReferencedSources = () => {
-  const ctx = useContext(LocalReferencedSourcesContext);
-  if (!ctx) {
-    throw new Error(
-      "usePromptInputReferencedSources must be used within a LocalReferencedSourcesContext.Provider",
-    );
-  }
-  return ctx;
-};
-
-export type PromptInputActionAddAttachmentsProps = ComponentProps<typeof DropdownMenuItem> & {
-  label?: string;
-};
-
-export const PromptInputActionAddAttachments = ({
-  label = "Add photos or files",
-  ...props
-}: PromptInputActionAddAttachmentsProps) => {
-  const attachments = usePromptInputAttachments();
-
-  const handleSelect = useCallback(
-    (e: Event) => {
-      e.preventDefault();
-      attachments.openFileDialog();
-    },
-    [attachments],
-  );
-
-  return (
-    <DropdownMenuItem {...props} onSelect={handleSelect}>
-      <ImageIcon className="mr-2 size-4" /> {label}
-    </DropdownMenuItem>
-  );
-};
-
-export type PromptInputActionAddScreenshotProps = ComponentProps<typeof DropdownMenuItem> & {
-  label?: string;
-};
-
-export const PromptInputActionAddScreenshot = ({
-  label = "Take screenshot",
-  onSelect,
-  ...props
-}: PromptInputActionAddScreenshotProps) => {
-  const attachments = usePromptInputAttachments();
-
-  const handleSelect = useCallback(
-    async (event: Event) => {
-      onSelect?.(event);
-      if (event.defaultPrevented) {
-        return;
-      }
-
-      try {
-        const screenshot = await captureScreenshot();
-        if (screenshot) {
-          attachments.add([screenshot]);
-        }
-      } catch (error) {
-        if (
-          error instanceof DOMException &&
-          (error.name === "NotAllowedError" || error.name === "AbortError")
-        ) {
-          return;
-        }
-        throw error;
-      }
-    },
-    [onSelect, attachments],
-  );
-
-  return (
-    <DropdownMenuItem {...props} onSelect={handleSelect}>
-      <Monitor className="mr-2 size-4" />
-      {label}
-    </DropdownMenuItem>
-  );
-};
-
 export interface PromptInputMessage {
   text: string;
   files: FileUIPart[];
 }
 
-export type PromptInputProps = Omit<HTMLAttributes<HTMLFormElement>, "onSubmit" | "onError"> & {
-  // e.g., "image/*" or leave undefined for any
+type PromptInputProps = Omit<HTMLAttributes<HTMLFormElement>, "onSubmit" | "onError"> & {
   accept?: string;
   multiple?: boolean;
-  // When true, accepts drops anywhere on document. Default false (opt-in).
-  globalDrop?: boolean;
-  // Render a hidden input with given name and keep it in sync for native form posts. Default false.
-  syncHiddenInput?: boolean;
-  // Minimal constraints
   maxFiles?: number;
-  // bytes
   maxFileSize?: number;
   onError?: (err: { code: "max_files" | "max_file_size" | "accept"; message: string }) => void;
   onSubmit: (
@@ -2778,8 +2424,6 @@ export const PromptInput = ({
   className,
   accept,
   multiple,
-  globalDrop,
-  syncHiddenInput,
   maxFiles,
   maxFileSize,
   onError,
@@ -2787,223 +2431,94 @@ export const PromptInput = ({
   children,
   ...props
 }: PromptInputProps) => {
-  // Try to use a provider controller if present
-  const controller = useOptionalPromptInputController();
-  const usingProvider = !!controller;
-
-  // Refs
-  const inputRef = useRef<HTMLInputElement | null>(null);
   const formRef = useRef<HTMLFormElement | null>(null);
-
-  // ----- Local attachments (only used when no provider)
-  const [items, setItems] = useState<(FileUIPart & { id: string })[]>([]);
-  const files = usingProvider ? controller.attachments.files : items;
-
-  // ----- Local referenced sources (always local to PromptInput)
-  const [referencedSources, setReferencedSources] = useState<
-    (SourceDocumentUIPart & { id: string })[]
-  >([]);
-
-  // Keep a ref to files for cleanup on unmount (avoids stale closure)
+  const [files, setFiles] = useState<(FileUIPart & { id: string })[]>([]);
   const filesRef = useRef(files);
 
   useEffect(() => {
     filesRef.current = files;
   }, [files]);
 
-  const openFileDialogLocal = useCallback(() => {
-    inputRef.current?.click();
-  }, []);
-
   const matchesAccept = useCallback(
-    (f: File) => {
-      if (!accept || accept.trim() === "") {
-        return true;
-      }
-
+    (file: File) => {
+      if (!accept || accept.trim() === "") return true;
       const patterns = accept
         .split(",")
         .map((s) => s.trim())
         .filter(Boolean);
-
-      return patterns.some((pattern) => {
-        if (pattern.endsWith("/*")) {
-          // e.g: image/* -> image/
-          const prefix = pattern.slice(0, -1);
-          return f.type.startsWith(prefix);
-        }
-        return f.type === pattern;
-      });
+      return patterns.some((pattern) =>
+        pattern.endsWith("/*") ? file.type.startsWith(pattern.slice(0, -1)) : file.type === pattern,
+      );
     },
     [accept],
   );
 
-  const addLocal = useCallback(
+  const add = useCallback(
     (fileList: File[] | FileList) => {
       const incoming = [...fileList];
-      const accepted = incoming.filter((f) => matchesAccept(f));
+      const accepted = incoming.filter(matchesAccept);
       if (incoming.length && accepted.length === 0) {
-        onError?.({
-          code: "accept",
-          message: "No files match the accepted types.",
-        });
+        onError?.({ code: "accept", message: "No files match the accepted types." });
         return;
       }
-      const withinSize = (f: File) => (maxFileSize ? f.size <= maxFileSize : true);
-      const sized = accepted.filter(withinSize);
+      const sized = accepted.filter((file) => (maxFileSize ? file.size <= maxFileSize : true));
       if (accepted.length > 0 && sized.length === 0) {
-        onError?.({
-          code: "max_file_size",
-          message: "All files exceed the maximum size.",
-        });
+        onError?.({ code: "max_file_size", message: "All files exceed the maximum size." });
         return;
       }
-
-      setItems((prev) => {
+      setFiles((prev) => {
         const capacity =
           typeof maxFiles === "number" ? Math.max(0, maxFiles - prev.length) : undefined;
         const capped = typeof capacity === "number" ? sized.slice(0, capacity) : sized;
         if (typeof capacity === "number" && sized.length > capacity) {
-          onError?.({
-            code: "max_files",
-            message: "Too many files. Some were not added.",
-          });
+          onError?.({ code: "max_files", message: "Too many files. Some were not added." });
         }
-        const next: (FileUIPart & { id: string })[] = [];
-        for (const file of capped) {
-          next.push({
+        return [
+          ...prev,
+          ...capped.map((file) => ({
             filename: file.name,
             id: nanoid(),
             mediaType: file.type,
-            type: "file",
+            type: "file" as const,
             url: URL.createObjectURL(file),
-          });
-        }
-        return [...prev, ...next];
+          })),
+        ];
       });
     },
     [matchesAccept, maxFiles, maxFileSize, onError],
   );
 
-  const removeLocal = useCallback(
+  const remove = useCallback(
     (id: string) =>
-      setItems((prev) => {
+      setFiles((prev) => {
         const found = prev.find((file) => file.id === id);
-        if (found?.url) {
-          URL.revokeObjectURL(found.url);
-        }
+        if (found?.url) URL.revokeObjectURL(found.url);
         return prev.filter((file) => file.id !== id);
       }),
     [],
   );
 
-  // Wrapper that validates files before calling provider's add
-  const addWithProviderValidation = useCallback(
-    (fileList: File[] | FileList) => {
-      const incoming = [...fileList];
-      const accepted = incoming.filter((f) => matchesAccept(f));
-      if (incoming.length && accepted.length === 0) {
-        onError?.({
-          code: "accept",
-          message: "No files match the accepted types.",
-        });
-        return;
-      }
-      const withinSize = (f: File) => (maxFileSize ? f.size <= maxFileSize : true);
-      const sized = accepted.filter(withinSize);
-      if (accepted.length > 0 && sized.length === 0) {
-        onError?.({
-          code: "max_file_size",
-          message: "All files exceed the maximum size.",
-        });
-        return;
-      }
-
-      const currentCount = files.length;
-      const capacity =
-        typeof maxFiles === "number" ? Math.max(0, maxFiles - currentCount) : undefined;
-      const capped = typeof capacity === "number" ? sized.slice(0, capacity) : sized;
-      if (typeof capacity === "number" && sized.length > capacity) {
-        onError?.({
-          code: "max_files",
-          message: "Too many files. Some were not added.",
-        });
-      }
-
-      if (capped.length > 0) {
-        controller?.attachments.add(capped);
-      }
-    },
-    [matchesAccept, maxFileSize, maxFiles, onError, files.length, controller],
-  );
-
-  const clearAttachments = useCallback(
+  const clear = useCallback(
     () =>
-      usingProvider
-        ? controller?.attachments.clear()
-        : setItems((prev) => {
-            for (const file of prev) {
-              if (file.url) {
-                URL.revokeObjectURL(file.url);
-              }
-            }
-            return [];
-          }),
-    [usingProvider, controller],
+      setFiles((prev) => {
+        for (const file of prev) {
+          if (file.url) URL.revokeObjectURL(file.url);
+        }
+        return [];
+      }),
+    [],
   );
 
-  const clearReferencedSources = useCallback(() => setReferencedSources([]), []);
-
-  const add = usingProvider ? addWithProviderValidation : addLocal;
-  const remove = usingProvider ? controller.attachments.remove : removeLocal;
-  const openFileDialog = usingProvider
-    ? controller.attachments.openFileDialog
-    : openFileDialogLocal;
-
-  const clear = useCallback(() => {
-    clearAttachments();
-    clearReferencedSources();
-  }, [clearAttachments, clearReferencedSources]);
-
-  // Let provider know about our hidden file input so external menus can call openFileDialog()
-  useEffect(() => {
-    if (!usingProvider) {
-      return;
-    }
-    controller.__registerFileInput(inputRef, () => inputRef.current?.click());
-  }, [usingProvider, controller]);
-
-  // Note: File input cannot be programmatically set for security reasons
-  // The syncHiddenInput prop is no longer functional
-  useEffect(() => {
-    if (syncHiddenInput && inputRef.current && files.length === 0) {
-      inputRef.current.value = "";
-    }
-  }, [files, syncHiddenInput]);
-
-  // Attach drop handlers on nearest form and document (opt-in)
   useEffect(() => {
     const form = formRef.current;
-    if (!form) {
-      return;
-    }
-    if (globalDrop) {
-      // when global drop is on, let the document-level handler own drops
-      return;
-    }
-
-    const onDragOver = (e: DragEvent) => {
-      if (e.dataTransfer?.types?.includes("Files")) {
-        e.preventDefault();
-      }
+    if (!form) return;
+    const onDragOver = (event: DragEvent) => {
+      if (event.dataTransfer?.types?.includes("Files")) event.preventDefault();
     };
-    const onDrop = (e: DragEvent) => {
-      if (e.dataTransfer?.types?.includes("Files")) {
-        e.preventDefault();
-      }
-      if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
-        add(e.dataTransfer.files);
-      }
+    const onDrop = (event: DragEvent) => {
+      if (event.dataTransfer?.types?.includes("Files")) event.preventDefault();
+      if (event.dataTransfer?.files && event.dataTransfer.files.length > 0)
+        add(event.dataTransfer.files);
     };
     form.addEventListener("dragover", onDragOver);
     form.addEventListener("drop", onDrop);
@@ -3011,156 +2526,62 @@ export const PromptInput = ({
       form.removeEventListener("dragover", onDragOver);
       form.removeEventListener("drop", onDrop);
     };
-  }, [add, globalDrop]);
-
-  useEffect(() => {
-    if (!globalDrop) {
-      return;
-    }
-
-    const onDragOver = (e: DragEvent) => {
-      if (e.dataTransfer?.types?.includes("Files")) {
-        e.preventDefault();
-      }
-    };
-    const onDrop = (e: DragEvent) => {
-      if (e.dataTransfer?.types?.includes("Files")) {
-        e.preventDefault();
-      }
-      if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
-        add(e.dataTransfer.files);
-      }
-    };
-    document.addEventListener("dragover", onDragOver);
-    document.addEventListener("drop", onDrop);
-    return () => {
-      document.removeEventListener("dragover", onDragOver);
-      document.removeEventListener("drop", onDrop);
-    };
-  }, [add, globalDrop]);
+  }, [add]);
 
   useEffect(
     () => () => {
-      if (!usingProvider) {
-        for (const f of filesRef.current) {
-          if (f.url) {
-            URL.revokeObjectURL(f.url);
-          }
-        }
+      for (const file of filesRef.current) {
+        if (file.url) URL.revokeObjectURL(file.url);
       }
     },
-    [usingProvider],
+    [],
   );
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(
     (event) => {
-      if (event.currentTarget.files) {
-        add(event.currentTarget.files);
-      }
-      // Reset input value to allow selecting files that were previously removed
+      if (event.currentTarget.files) add(event.currentTarget.files);
+      // Reset so the same file can be selected again after removal.
       event.currentTarget.value = "";
     },
     [add],
   );
 
-  const attachmentsCtx = useMemo<AttachmentsContext>(
-    () => ({
-      add,
-      clear: clearAttachments,
-      fileInputRef: inputRef,
-      files: files.map((item) => ({ ...item, id: item.id })),
-      openFileDialog,
-      remove,
-    }),
-    [files, add, remove, clearAttachments, openFileDialog],
-  );
-
-  const refsCtx = useMemo<ReferencedSourcesContext>(
-    () => ({
-      add: (incoming: SourceDocumentUIPart[] | SourceDocumentUIPart) => {
-        const array = Array.isArray(incoming) ? incoming : [incoming];
-        setReferencedSources((prev) => [...prev, ...array.map((s) => ({ ...s, id: nanoid() }))]);
-      },
-      clear: clearReferencedSources,
-      remove: (id: string) => {
-        setReferencedSources((prev) => prev.filter((s) => s.id !== id));
-      },
-      sources: referencedSources,
-    }),
-    [referencedSources, clearReferencedSources],
-  );
+  const attachments = useMemo(() => ({ add, clear, files, remove }), [add, clear, files, remove]);
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = useCallback(
     async (event) => {
       event.preventDefault();
-
       const form = event.currentTarget;
-      const text = usingProvider
-        ? controller.textInput.value
-        : (() => {
-            const formData = new FormData(form);
-            return (formData.get("message") as string) || "";
-          })();
-
-      // Reset form immediately after capturing text to avoid race condition
-      // where user input during async blob conversion would be lost
-      if (!usingProvider) {
-        form.reset();
-      }
-
+      const text = (new FormData(form).get("message") as string) || "";
+      // Capture and reset before conversion so text typed while it runs isn't lost.
+      form.reset();
       try {
-        // Convert blob URLs to data URLs asynchronously
         const convertedFiles: FileUIPart[] = await Promise.all(
           files.map(async ({ id: _id, ...item }) => {
             if (item.url?.startsWith("blob:")) {
               const dataUrl = await convertBlobUrlToDataUrl(item.url);
-              // If conversion failed, keep the original blob URL
-              return {
-                ...item,
-                url: dataUrl ?? item.url,
-              };
+              return { ...item, url: dataUrl ?? item.url };
             }
             return item;
           }),
         );
-
-        const result = onSubmit({ files: convertedFiles, text }, event);
-
-        // Handle both sync and async onSubmit
-        if (result instanceof Promise) {
-          try {
-            await result;
-            clear();
-            if (usingProvider) {
-              controller.textInput.clear();
-            }
-          } catch {
-            // Don't clear on error - user may want to retry
-          }
-        } else {
-          // Sync function completed without throwing, clear inputs
-          clear();
-          if (usingProvider) {
-            controller.textInput.clear();
-          }
-        }
+        await onSubmit({ files: convertedFiles, text }, event);
+        clear();
       } catch {
-        // Don't clear on error - user may want to retry
+        // Keep attachments available for a retry.
       }
     },
-    [usingProvider, controller, files, onSubmit, clear],
+    [files, onSubmit, clear],
   );
 
-  // Render with or without local provider
-  const inner = (
-    <>
+  return (
+    <LocalAttachmentsContext.Provider value={attachments}>
       <input
         accept={accept}
         aria-label="Upload files"
         className="hidden"
         multiple={multiple}
         onChange={handleChange}
-        ref={inputRef}
         title="Upload files"
         type="file"
       />
@@ -3175,80 +2596,42 @@ export const PromptInput = ({
           {children}
         </InputGroup>
       </form>
-    </>
-  );
-
-  const withReferencedSources = (
-    <LocalReferencedSourcesContext.Provider value={refsCtx}>
-      {inner}
-    </LocalReferencedSourcesContext.Provider>
-  );
-
-  // Always provide LocalAttachmentsContext so children get validated add function
-  return (
-    <LocalAttachmentsContext.Provider value={attachmentsCtx}>
-      {withReferencedSources}
     </LocalAttachmentsContext.Provider>
   );
 };
 
-export type PromptInputBodyProps = HTMLAttributes<HTMLDivElement>;
-
-export const PromptInputBody = ({ className, ...props }: PromptInputBodyProps) => (
-  <div className={cn("contents", className)} {...props} />
-);
-
-export type PromptInputTextareaProps = ComponentProps<typeof InputGroupTextarea>;
-
 export const PromptInputTextarea = ({
   onChange,
   onKeyDown,
   className,
   placeholder = "What would you like to know?",
   ...props
-}: PromptInputTextareaProps) => {
-  const controller = useOptionalPromptInputController();
+}: ComponentProps<typeof InputGroupTextarea>) => {
   const attachments = usePromptInputAttachments();
   const [isComposing, setIsComposing] = useState(false);
 
   const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = useCallback(
-    (e) => {
-      // Call the external onKeyDown handler first
-      onKeyDown?.(e);
-
-      // If the external handler prevented default, don't run internal logic
-      if (e.defaultPrevented) {
-        return;
-      }
-
-      if (e.key === "Enter") {
-        if (isComposing || e.nativeEvent.isComposing) {
-          return;
-        }
-        if (e.shiftKey) {
-          return;
-        }
-        e.preventDefault();
-
-        // Check if the submit button is disabled before submitting
-        const { form } = e.currentTarget;
+    (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if (event.key === "Enter") {
+        if (isComposing || event.nativeEvent.isComposing || event.shiftKey) return;
+        event.preventDefault();
+        const { form } = event.currentTarget;
         const submitButton = form?.querySelector(
           'button[type="submit"]',
         ) as HTMLButtonElement | null;
-        if (submitButton?.disabled) {
-          return;
-        }
-
+        if (submitButton?.disabled) return;
         form?.requestSubmit();
       }
-
-      // Remove last attachment when Backspace is pressed and textarea is empty
-      if (e.key === "Backspace" && e.currentTarget.value === "" && attachments.files.length > 0) {
-        e.preventDefault();
+      if (
+        event.key === "Backspace" &&
+        event.currentTarget.value === "" &&
+        attachments.files.length > 0
+      ) {
+        event.preventDefault();
         const lastAttachment = attachments.files.at(-1);
-        if (lastAttachment) {
-          attachments.remove(lastAttachment.id);
-        }
+        if (lastAttachment) attachments.remove(lastAttachment.id);
       }
     },
     [onKeyDown, isComposing, attachments],
@@ -3257,22 +2640,14 @@ export const PromptInputTextarea = ({
   const handlePaste: ClipboardEventHandler<HTMLTextAreaElement> = useCallback(
     (event) => {
       const items = event.clipboardData?.items;
-
-      if (!items) {
-        return;
-      }
-
+      if (!items) return;
       const files: File[] = [];
-
       for (const item of items) {
         if (item.kind === "file") {
           const file = item.getAsFile();
-          if (file) {
-            files.push(file);
-          }
+          if (file) files.push(file);
         }
       }
-
       if (files.length > 0) {
         event.preventDefault();
         attachments.add(files);
@@ -3284,18 +2659,6 @@ export const PromptInputTextarea = ({
   const handleCompositionEnd = useCallback(() => setIsComposing(false), []);
   const handleCompositionStart = useCallback(() => setIsComposing(true), []);
 
-  const controlledProps = controller
-    ? {
-        onChange: (e: ChangeEvent<HTMLTextAreaElement>) => {
-          controller.textInput.setInput(e.currentTarget.value);
-          onChange?.(e);
-        },
-        value: controller.textInput.value,
-      }
-    : {
-        onChange,
-      };
-
   return (
     <InputGroupTextarea
       className={cn("field-sizing-content max-h-48 min-h-18 text-base md:text-sm", className)}
@@ -3306,1317 +2669,336 @@ export const PromptInputTextarea = ({
       onPaste={handlePaste}
       placeholder={placeholder}
       {...props}
-      {...controlledProps}
+      onChange={onChange}
     />
   );
 };
 
-export type PromptInputHeaderProps = Omit<ComponentProps<typeof InputGroupAddon>, "align">;
-
-export const PromptInputHeader = ({ className, ...props }: PromptInputHeaderProps) => (
-  <InputGroupAddon
-    align="block-end"
-    className={cn("order-first flex-wrap gap-1", className)}
+export const PromptInputButton = ({
+  variant = "ghost",
+  className,
+  size,
+  ...props
+}: ComponentProps<typeof InputGroupButton>) => (
+  <InputGroupButton
+    className={cn(
+      "rounded-full",
+      variant === "outline" && "bg-card hover:bg-card dark:hover:bg-input/30",
+      className,
+    )}
+    size={size ?? (Children.count(props.children) > 1 ? "sm" : "icon-sm")}
+    type="button"
+    variant={variant}
     {...props}
   />
 );
 
-export type PromptInputFooterProps = Omit<ComponentProps<typeof InputGroupAddon>, "align">;
-
-export const PromptInputFooter = ({ className, ...props }: PromptInputFooterProps) => (
-  <InputGroupAddon
-    align="block-end"
-    className={cn("justify-between gap-1", className)}
+export const PromptInputSubmit = ({
+  className,
+  variant = "default",
+  size = "icon-sm",
+  children,
+  ...props
+}: ComponentProps<typeof InputGroupButton>) => (
+  <InputGroupButton
+    aria-label="Submit"
+    className={cn("absolute right-2.5 bottom-2.5 rounded-full", className)}
+    size={size}
+    type="submit"
+    variant={variant}
     {...props}
-  />
+  >
+    {children ?? <ArrowUpIcon className="size-4" />}
+  </InputGroupButton>
 );
+`,"components/ai-elements/tool.tsx":`"use client";
 
-export type PromptInputToolsProps = HTMLAttributes<HTMLDivElement>;
+import { cn } from "@/lib/utils";
+import type { ComponentProps, ReactNode } from "react";
+import { isValidElement } from "react";
 
-export const PromptInputTools = ({ className, ...props }: PromptInputToolsProps) => (
-  <div className={cn("flex min-w-0 items-center gap-1", className)} {...props} />
-);
+import { CodeBlock } from "./code-block";
 
-export type PromptInputButtonTooltip =
-  | string
-  | {
-      content: ReactNode;
-      shortcut?: string;
-      side?: ComponentProps<typeof TooltipContent>["side"];
-    };
+const compactCodeBlockClassName =
+  "rounded-none border-0 bg-transparent [&_pre]:!bg-transparent [&_pre]:px-3 [&_pre]:pt-2 [&_pre]:pb-3 [&_pre]:text-xs [&_code]:text-xs";
 
-export type PromptInputButtonProps = ComponentProps<typeof InputGroupButton> & {
-  tooltip?: PromptInputButtonTooltip;
+export type BashToolContentProps = ComponentProps<"div"> & {
+  input: unknown;
+  output: unknown;
+  errorText: string | undefined;
 };
 
-export const PromptInputButton = ({
-  variant = "ghost",
+export const BashToolContent = ({
   className,
-  size,
-  tooltip,
+  input,
+  output,
+  errorText,
   ...props
-}: PromptInputButtonProps) => {
-  const newSize = size ?? (Children.count(props.children) > 1 ? "sm" : "icon-sm");
-
-  const button = (
-    <InputGroupButton
-      className={cn(
-        "rounded-full",
-        variant === "outline" && "bg-card hover:bg-card dark:hover:bg-input/30",
-        className,
-      )}
-      size={newSize}
-      type="button"
-      variant={variant}
-      {...props}
-    />
-  );
-
-  if (!tooltip) {
-    return button;
-  }
-
-  const tooltipContent = typeof tooltip === "string" ? tooltip : tooltip.content;
-  const shortcut = typeof tooltip === "string" ? undefined : tooltip.shortcut;
-  const side = typeof tooltip === "string" ? "top" : (tooltip.side ?? "top");
+}: BashToolContentProps) => {
+  const command = getRecordValue(input, "command");
+  const stdout = getRecordValue(output, "stdout") ?? (typeof output === "string" ? output : "");
+  const stderr = getRecordValue(output, "stderr") ?? errorText ?? "";
+  const exitCode = getRecordValue(output, "exitCode");
+  const hasResult = Boolean(stdout || stderr || (typeof exitCode === "number" && exitCode !== 0));
 
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>{button}</TooltipTrigger>
-      <TooltipContent side={side}>
-        {tooltipContent}
-        {shortcut && <span className="ml-2 text-muted-foreground">{shortcut}</span>}
-      </TooltipContent>
-    </Tooltip>
+    <div className={cn("space-y-2", className)} {...props}>
+      <pre className="overflow-x-auto whitespace-pre-wrap rounded-md bg-muted/50 p-3 font-mono text-xs leading-relaxed">
+        <code>
+          <span className="text-muted-foreground">$ </span>
+          {command ?? "…"}
+        </code>
+      </pre>
+      {hasResult ? (
+        <pre className="overflow-x-auto whitespace-pre-wrap rounded-md bg-muted/50 p-3 font-mono text-xs leading-relaxed">
+          <code>
+            <span className="mb-2 block font-sans text-[10px] text-muted-foreground uppercase tracking-wide">
+              Output
+            </span>
+            {stdout ? <span className="block">{String(stdout).trimEnd()}</span> : null}
+            {stderr ? (
+              <span className="block text-destructive">{String(stderr).trimEnd()}</span>
+            ) : null}
+            {typeof exitCode === "number" && exitCode !== 0 ? (
+              <span className="block text-muted-foreground">Exited with code {exitCode}</span>
+            ) : null}
+          </code>
+        </pre>
+      ) : null}
+    </div>
   );
 };
 
-export type PromptInputActionMenuProps = ComponentProps<typeof DropdownMenu>;
-export const PromptInputActionMenu = (props: PromptInputActionMenuProps) => (
-  <DropdownMenu {...props} />
-);
+const getRecordValue = (value: unknown, key: string): string | number | undefined => {
+  if (typeof value !== "object" || value === null || !(key in value)) {
+    return undefined;
+  }
 
-export type PromptInputActionMenuTriggerProps = PromptInputButtonProps;
+  const property = value[key as keyof typeof value];
+  return typeof property === "string" || typeof property === "number" ? property : undefined;
+};
 
-export const PromptInputActionMenuTrigger = ({
-  className,
-  children,
-  ...props
-}: PromptInputActionMenuTriggerProps) => (
-  <DropdownMenuTrigger asChild>
-    <PromptInputButton className={className} {...props}>
-      {children ?? <PlusIcon className="size-4" />}
-    </PromptInputButton>
-  </DropdownMenuTrigger>
-);
+export type ToolInputProps = ComponentProps<"div"> & {
+  input: unknown;
+};
 
-export type PromptInputActionMenuContentProps = ComponentProps<typeof DropdownMenuContent>;
-export const PromptInputActionMenuContent = ({
-  className,
-  ...props
-}: PromptInputActionMenuContentProps) => (
-  <DropdownMenuContent align="start" className={cn(className)} {...props} />
+export const ToolInput = ({ className, input, ...props }: ToolInputProps) => (
+  <div className={cn("overflow-hidden rounded-md bg-muted/50", className)} {...props}>
+    <span className="block px-3 pt-3 font-sans text-[10px] text-muted-foreground uppercase tracking-wide">
+      Parameters
+    </span>
+    <div>
+      <CodeBlock
+        className={compactCodeBlockClassName}
+        code={JSON.stringify(input, null, 2)}
+        language="json"
+      />
+    </div>
+  </div>
 );
 
-export type PromptInputActionMenuItemProps = ComponentProps<typeof DropdownMenuItem>;
-export const PromptInputActionMenuItem = ({
-  className,
-  ...props
-}: PromptInputActionMenuItemProps) => <DropdownMenuItem className={cn(className)} {...props} />;
-
-// Note: Actions that perform side-effects (like opening a file dialog)
-// are provided in opt-in modules (e.g., prompt-input-attachments).
-
-export type PromptInputSubmitProps = ComponentProps<typeof InputGroupButton> & {
-  status?: ChatStatus;
-  onStop?: () => void;
+export type ToolOutputProps = ComponentProps<"div"> & {
+  output: unknown;
+  errorText: string | undefined;
 };
 
-export const PromptInputSubmit = ({
-  className,
-  variant = "default",
-  size = "icon-sm",
-  status,
-  onStop,
-  onClick,
-  children,
-  ...props
-}: PromptInputSubmitProps) => {
-  const isGenerating = status === "submitted" || status === "streaming";
+export const ToolOutput = ({ className, output, errorText, ...props }: ToolOutputProps) => {
+  if (!(output || errorText)) {
+    return null;
+  }
 
-  let Icon = <ArrowUpIcon className="size-4" />;
+  let Output = <div>{output as ReactNode}</div>;
 
-  if (status === "submitted") {
-    Icon = <Spinner />;
-  } else if (status === "streaming") {
-    Icon = <span aria-hidden className="size-2.5 rounded-[2px] bg-current" />;
-  } else if (status === "error") {
-    Icon = <XIcon className="size-4" />;
+  if (typeof output === "object" && !isValidElement(output)) {
+    Output = (
+      <CodeBlock
+        className={compactCodeBlockClassName}
+        code={JSON.stringify(output, null, 2)}
+        language="json"
+      />
+    );
+  } else if (typeof output === "string") {
+    Output = <CodeBlock className={compactCodeBlockClassName} code={output} language="json" />;
   }
 
-  const handleClick = useCallback(
-    (e: React.MouseEvent<HTMLButtonElement>) => {
-      if (isGenerating && onStop) {
-        e.preventDefault();
-        onStop();
-        return;
-      }
-      onClick?.(e);
-    },
-    [isGenerating, onStop, onClick],
-  );
-
   return (
-    <InputGroupButton
-      aria-label={isGenerating ? "Stop" : "Submit"}
-      className={cn("absolute right-2.5 bottom-2.5 rounded-full", className)}
-      onClick={handleClick}
-      size={size}
-      type={isGenerating && onStop ? "button" : "submit"}
-      variant={variant}
+    <div
+      className={cn(
+        "overflow-x-auto rounded-md text-xs [&_table]:w-full",
+        errorText ? "bg-destructive/10 text-destructive" : "bg-muted/50 text-foreground",
+        className,
+      )}
       {...props}
     >
-      {children ?? Icon}
-    </InputGroupButton>
+      <span className="block px-3 pt-3 font-sans text-[10px] text-muted-foreground uppercase tracking-wide">
+        {errorText ? "Error" : "Result"}
+      </span>
+      {errorText && <div className="px-3 pt-2 pb-3">{errorText}</div>}
+      {Output}
+    </div>
   );
 };
+`,"components/ui/button-group.tsx":`import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
 
-export type PromptInputSelectProps = ComponentProps<typeof Select>;
-
-export const PromptInputSelect = (props: PromptInputSelectProps) => <Select {...props} />;
-
-export type PromptInputSelectTriggerProps = ComponentProps<typeof SelectTrigger>;
-
-export const PromptInputSelectTrigger = ({
-  className,
-  ...props
-}: PromptInputSelectTriggerProps) => (
-  <SelectTrigger
-    className={cn(
-      "border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors",
-      "hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground",
-      className,
-    )}
-    {...props}
-  />
-);
-
-export type PromptInputSelectContentProps = ComponentProps<typeof SelectContent>;
-
-export const PromptInputSelectContent = ({
-  className,
-  ...props
-}: PromptInputSelectContentProps) => <SelectContent className={cn(className)} {...props} />;
-
-export type PromptInputSelectItemProps = ComponentProps<typeof SelectItem>;
-
-export const PromptInputSelectItem = ({ className, ...props }: PromptInputSelectItemProps) => (
-  <SelectItem className={cn(className)} {...props} />
-);
-
-export type PromptInputSelectValueProps = ComponentProps<typeof SelectValue>;
-
-export const PromptInputSelectValue = ({ className, ...props }: PromptInputSelectValueProps) => (
-  <SelectValue className={cn(className)} {...props} />
-);
-
-export type PromptInputHoverCardProps = ComponentProps<typeof HoverCard>;
-
-export const PromptInputHoverCard = ({
-  openDelay = 0,
-  closeDelay = 0,
-  ...props
-}: PromptInputHoverCardProps) => (
-  <HoverCard closeDelay={closeDelay} openDelay={openDelay} {...props} />
-);
-
-export type PromptInputHoverCardTriggerProps = ComponentProps<typeof HoverCardTrigger>;
-
-export const PromptInputHoverCardTrigger = (props: PromptInputHoverCardTriggerProps) => (
-  <HoverCardTrigger {...props} />
-);
-
-export type PromptInputHoverCardContentProps = ComponentProps<typeof HoverCardContent>;
-
-export const PromptInputHoverCardContent = ({
-  align = "start",
-  ...props
-}: PromptInputHoverCardContentProps) => <HoverCardContent align={align} {...props} />;
-
-export type PromptInputTabsListProps = HTMLAttributes<HTMLDivElement>;
-
-export const PromptInputTabsList = ({ className, ...props }: PromptInputTabsListProps) => (
-  <div className={cn(className)} {...props} />
-);
-
-export type PromptInputTabProps = HTMLAttributes<HTMLDivElement>;
-
-export const PromptInputTab = ({ className, ...props }: PromptInputTabProps) => (
-  <div className={cn(className)} {...props} />
-);
-
-export type PromptInputTabLabelProps = HTMLAttributes<HTMLHeadingElement>;
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
 
-export const PromptInputTabLabel = ({ className, ...props }: PromptInputTabLabelProps) => (
-  // Content provided via children in props
-  // oxlint-disable-next-line eslint-plugin-jsx-a11y(heading-has-content)
-  <h3 className={cn("mb-2 px-3 font-medium text-muted-foreground text-xs", className)} {...props} />
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
 );
 
-export type PromptInputTabBodyProps = HTMLAttributes<HTMLDivElement>;
-
-export const PromptInputTabBody = ({ className, ...props }: PromptInputTabBodyProps) => (
-  <div className={cn("space-y-1", className)} {...props} />
-);
-
-export type PromptInputTabItemProps = HTMLAttributes<HTMLDivElement>;
-
-export const PromptInputTabItem = ({ className, ...props }: PromptInputTabItemProps) => (
-  <div
-    className={cn("flex items-center gap-2 px-3 py-2 text-xs hover:bg-accent", className)}
-    {...props}
-  />
-);
-
-export type PromptInputCommandProps = ComponentProps<typeof Command>;
-
-export const PromptInputCommand = ({ className, ...props }: PromptInputCommandProps) => (
-  <Command className={cn(className)} {...props} />
-);
-
-export type PromptInputCommandInputProps = ComponentProps<typeof CommandInput>;
-
-export const PromptInputCommandInput = ({ className, ...props }: PromptInputCommandInputProps) => (
-  <CommandInput className={cn(className)} {...props} />
-);
-
-export type PromptInputCommandListProps = ComponentProps<typeof CommandList>;
-
-export const PromptInputCommandList = ({ className, ...props }: PromptInputCommandListProps) => (
-  <CommandList className={cn(className)} {...props} />
-);
-
-export type PromptInputCommandEmptyProps = ComponentProps<typeof CommandEmpty>;
-
-export const PromptInputCommandEmpty = ({ className, ...props }: PromptInputCommandEmptyProps) => (
-  <CommandEmpty className={cn(className)} {...props} />
-);
-
-export type PromptInputCommandGroupProps = ComponentProps<typeof CommandGroup>;
-
-export const PromptInputCommandGroup = ({ className, ...props }: PromptInputCommandGroupProps) => (
-  <CommandGroup className={cn(className)} {...props} />
-);
-
-export type PromptInputCommandItemProps = ComponentProps<typeof CommandItem>;
-
-export const PromptInputCommandItem = ({ className, ...props }: PromptInputCommandItemProps) => (
-  <CommandItem className={cn(className)} {...props} />
-);
-
-export type PromptInputCommandSeparatorProps = ComponentProps<typeof CommandSeparator>;
-
-export const PromptInputCommandSeparator = ({
-  className,
-  ...props
-}: PromptInputCommandSeparatorProps) => <CommandSeparator className={cn(className)} {...props} />;
-`,"components/ai-elements/reasoning.tsx":`"use client";
-
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { cn } from "@/lib/utils";
-import { cjk } from "@streamdown/cjk";
-import { code } from "@streamdown/code";
-import { math } from "@streamdown/math";
-import { mermaid } from "@streamdown/mermaid";
-import { BrainIcon, ChevronDownIcon } from "lucide-react";
-import type { ComponentProps, ReactNode } from "react";
-import {
-  createContext,
-  memo,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { Streamdown } from "streamdown";
-
-import { Shimmer } from "./shimmer";
-
-interface ReasoningContextValue {
-  isStreaming: boolean;
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
-  duration: number | undefined;
-}
-
-const ReasoningContext = createContext<ReasoningContextValue | null>(null);
-
-export const useReasoning = () => {
-  const context = useContext(ReasoningContext);
-  if (!context) {
-    throw new Error("Reasoning components must be used within Reasoning");
-  }
-  return context;
-};
-
-export type ReasoningProps = ComponentProps<typeof Collapsible> & {
-  isStreaming?: boolean;
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  duration?: number;
-};
-
-const MS_IN_S = 1000;
-
-export const Reasoning = memo(
-  ({
-    className,
-    isStreaming = false,
-    open,
-    defaultOpen,
-    onOpenChange,
-    duration: durationProp,
-    children,
-    ...props
-  }: ReasoningProps) => {
-    const resolvedDefaultOpen = defaultOpen ?? isStreaming;
-    // Track if defaultOpen was explicitly set to false (to prevent auto-open)
-    const isExplicitlyClosed = defaultOpen === false;
-
-    const [isOpen, setIsOpen] = useControllableState<boolean>({
-      defaultProp: resolvedDefaultOpen,
-      onChange: onOpenChange,
-      prop: open,
-    });
-    const [duration, setDuration] = useControllableState<number | undefined>({
-      defaultProp: undefined,
-      prop: durationProp,
-    });
-
-    const hasEverStreamedRef = useRef(isStreaming);
-    const [hasAutoClosed, setHasAutoClosed] = useState(false);
-    const startTimeRef = useRef<number | null>(null);
-
-    // Track when streaming starts and compute duration
-    useEffect(() => {
-      if (isStreaming) {
-        hasEverStreamedRef.current = true;
-        if (startTimeRef.current === null) {
-          startTimeRef.current = Date.now();
-        }
-      } else if (startTimeRef.current !== null) {
-        setDuration(Math.ceil((Date.now() - startTimeRef.current) / MS_IN_S));
-        startTimeRef.current = null;
-      }
-    }, [isStreaming, setDuration]);
-
-    // Auto-open when streaming starts (unless explicitly closed)
-    useEffect(() => {
-      if (isStreaming && !isOpen && !isExplicitlyClosed) {
-        setIsOpen(true);
-      }
-    }, [isStreaming, isOpen, setIsOpen, isExplicitlyClosed]);
-
-    // Auto-close when streaming ends (once only, and only if it ever streamed)
-    useEffect(() => {
-      if (hasEverStreamedRef.current && !isStreaming && isOpen && !hasAutoClosed) {
-        setIsOpen(false);
-        setHasAutoClosed(true);
-      }
-    }, [isStreaming, isOpen, setIsOpen, hasAutoClosed]);
-
-    const handleOpenChange = useCallback(
-      (newOpen: boolean) => {
-        setIsOpen(newOpen);
-      },
-      [setIsOpen],
-    );
-
-    const contextValue = useMemo(
-      () => ({ duration, isOpen, isStreaming, setIsOpen }),
-      [duration, isOpen, isStreaming, setIsOpen],
-    );
-
-    return (
-      <ReasoningContext.Provider value={contextValue}>
-        <Collapsible
-          className={cn("not-prose mb-4 w-full", className)}
-          onOpenChange={handleOpenChange}
-          open={isOpen}
-          {...props}
-        >
-          {children}
-        </Collapsible>
-      </ReasoningContext.Provider>
-    );
-  },
-);
-
-export type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
-  getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
-};
-
-const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
-  if (isStreaming || duration === 0) {
-    return <Shimmer duration={1}>Thinking...</Shimmer>;
-  }
-  if (duration === undefined) {
-    return <p>Thought for a few seconds</p>;
-  }
-  return <p>Thought for {duration} seconds</p>;
-};
-
-export const ReasoningTrigger = memo(
-  ({
-    className,
-    children,
-    getThinkingMessage = defaultGetThinkingMessage,
-    ...props
-  }: ReasoningTriggerProps) => {
-    const { isStreaming, isOpen, duration } = useReasoning();
-
-    return (
-      <CollapsibleTrigger
-        className={cn(
-          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
-          className,
-        )}
-        {...props}
-      >
-        {children ?? (
-          <>
-            <BrainIcon className="size-4" />
-            {getThinkingMessage(isStreaming, duration)}
-            <ChevronDownIcon
-              className={cn("size-4 transition-transform", isOpen ? "rotate-180" : "rotate-0")}
-            />
-          </>
-        )}
-      </CollapsibleTrigger>
-    );
-  },
-);
-
-export type ReasoningContentProps = ComponentProps<typeof CollapsibleContent> & {
-  children: string;
-};
-
-const streamdownPlugins = { cjk, code, math, mermaid };
-
-export const ReasoningContent = memo(({ className, children, ...props }: ReasoningContentProps) => (
-  <CollapsibleContent
-    className={cn(
-      "mt-4 text-sm",
-      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
-      className,
-    )}
-    {...props}
-  >
-    <Streamdown plugins={streamdownPlugins}>{children}</Streamdown>
-  </CollapsibleContent>
-));
-
-Reasoning.displayName = "Reasoning";
-ReasoningTrigger.displayName = "ReasoningTrigger";
-ReasoningContent.displayName = "ReasoningContent";
-`,"components/ai-elements/shimmer.tsx":`"use client";
-
-import { cn } from "@/lib/utils";
-import type { MotionProps } from "motion/react";
-import { motion } from "motion/react";
-import type { CSSProperties, ElementType, JSX } from "react";
-import { memo, useMemo } from "react";
-
-type MotionHTMLProps = MotionProps & Record<string, unknown>;
-
-// Cache motion components at module level to avoid creating during render
-const motionComponentCache = new Map<
-  keyof JSX.IntrinsicElements,
-  React.ComponentType<MotionHTMLProps>
->();
-
-const getMotionComponent = (element: keyof JSX.IntrinsicElements) => {
-  let component = motionComponentCache.get(element);
-  if (!component) {
-    component = motion.create(element);
-    motionComponentCache.set(element, component);
-  }
-  return component;
-};
-
-export interface TextShimmerProps {
-  children: string;
-  as?: ElementType;
-  className?: string;
-  duration?: number;
-  spread?: number;
-}
-
-const ShimmerComponent = ({
-  children,
-  as: Component = "p",
-  className,
-  duration = 2,
-  spread = 2,
-}: TextShimmerProps) => {
-  const MotionComponent = getMotionComponent(Component as keyof JSX.IntrinsicElements);
-
-  const dynamicSpread = useMemo(() => (children?.length ?? 0) * spread, [children, spread]);
-
-  return (
-    <MotionComponent
-      animate={{ backgroundPosition: "0% center" }}
-      className={cn(
-        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
-        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
-        className,
-      )}
-      initial={{ backgroundPosition: "100% center" }}
-      style={
-        {
-          "--spread": \`\${dynamicSpread}px\`,
-          backgroundImage:
-            "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))",
-        } as CSSProperties
-      }
-      transition={{
-        duration,
-        ease: "linear",
-        repeat: Number.POSITIVE_INFINITY,
-      }}
-    >
-      {children}
-    </MotionComponent>
-  );
-};
-
-export const Shimmer = memo(ShimmerComponent);
-`,"components/ai-elements/tool.tsx":`"use client";
-
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { cn } from "@/lib/utils";
-import type { DynamicToolUIPart, ToolUIPart } from "ai";
-import { ChevronRightIcon, TerminalIcon, WrenchIcon } from "lucide-react";
-import type { ComponentProps, ReactNode } from "react";
-import { isValidElement } from "react";
-
-import { CodeBlock } from "./code-block";
-
-const compactCodeBlockClassName =
-  "rounded-none border-0 bg-transparent [&_pre]:!bg-transparent [&_pre]:px-3 [&_pre]:pt-2 [&_pre]:pb-3 [&_pre]:text-xs [&_code]:text-xs";
-
-export type ToolProps = ComponentProps<typeof Collapsible>;
-
-export const Tool = ({ className, ...props }: ToolProps) => (
-  <Collapsible className={cn("group not-prose w-full", className)} {...props} />
-);
-
-export type ToolPart = ToolUIPart | DynamicToolUIPart;
-
-export type ToolHeaderProps = {
-  title?: string;
-  className?: string;
-} & (
-  | { type: ToolUIPart["type"]; state: ToolUIPart["state"]; toolName?: never }
-  | {
-      type: DynamicToolUIPart["type"];
-      state: DynamicToolUIPart["state"];
-      toolName: string;
-    }
-);
-
-const statusLabels: Record<ToolPart["state"], string> = {
-  "approval-requested": "Awaiting Approval",
-  "approval-responded": "Responded",
-  "input-available": "Running",
-  "input-streaming": "Pending",
-  "output-available": "Completed",
-  "output-denied": "Denied",
-  "output-error": "Error",
-};
-
-export const getStatusIndicator = (status: ToolPart["state"]) =>
-  status === "output-available" ? null : (
-    <span className={cn("text-sm", status === "output-error" && "text-destructive")}>
-      {statusLabels[status]}
-    </span>
-  );
-
-export const ToolHeader = ({
-  className,
-  title,
-  type,
-  state,
-  toolName,
-  ...props
-}: ToolHeaderProps) => {
-  const derivedName = type === "dynamic-tool" ? toolName : type.split("-").slice(1).join("-");
-  const displayName = title ?? derivedName;
-
-  return (
-    <CollapsibleTrigger
-      className={cn(
-        "flex w-full items-center gap-2 py-0.5 text-left text-muted-foreground transition-colors hover:text-foreground",
-        className,
-      )}
-      {...props}
-    >
-      {displayName === "bash" ? (
-        <TerminalIcon className="size-4 shrink-0" />
-      ) : (
-        <WrenchIcon className="size-4 shrink-0" />
-      )}
-      <span className="text-sm">{displayName}</span>
-      {getStatusIndicator(state)}
-      <ChevronRightIcon className="size-3.5 shrink-0 transition-transform group-data-[state=open]:rotate-90" />
-    </CollapsibleTrigger>
-  );
-};
-
-export type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
-
-export const ToolContent = ({ className, ...props }: ToolContentProps) => (
-  <CollapsibleContent
-    className={cn(
-      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 space-y-4 py-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
-      className,
-    )}
-    {...props}
-  />
-);
-
-export type BashToolContentProps = ComponentProps<"div"> & {
-  input: ToolPart["input"];
-  output: ToolPart["output"];
-  errorText: ToolPart["errorText"];
-};
-
-export const BashToolContent = ({
-  className,
-  input,
-  output,
-  errorText,
-  ...props
-}: BashToolContentProps) => {
-  const command = getRecordValue(input, "command");
-  const stdout = getRecordValue(output, "stdout") ?? (typeof output === "string" ? output : "");
-  const stderr = getRecordValue(output, "stderr") ?? errorText ?? "";
-  const exitCode = getRecordValue(output, "exitCode");
-  const hasResult = Boolean(stdout || stderr || (typeof exitCode === "number" && exitCode !== 0));
-
-  return (
-    <div className={cn("space-y-2", className)} {...props}>
-      <pre className="overflow-x-auto whitespace-pre-wrap rounded-md bg-muted/50 p-3 font-mono text-xs leading-relaxed">
-        <code>
-          <span className="text-muted-foreground">$ </span>
-          {command ?? "…"}
-        </code>
-      </pre>
-      {hasResult ? (
-        <pre className="overflow-x-auto whitespace-pre-wrap rounded-md bg-muted/50 p-3 font-mono text-xs leading-relaxed">
-          <code>
-            <span className="mb-2 block font-sans text-[10px] text-muted-foreground uppercase tracking-wide">
-              Output
-            </span>
-            {stdout ? <span className="block">{String(stdout).trimEnd()}</span> : null}
-            {stderr ? (
-              <span className="block text-destructive">{String(stderr).trimEnd()}</span>
-            ) : null}
-            {typeof exitCode === "number" && exitCode !== 0 ? (
-              <span className="block text-muted-foreground">Exited with code {exitCode}</span>
-            ) : null}
-          </code>
-        </pre>
-      ) : null}
-    </div>
-  );
-};
-
-const getRecordValue = (value: unknown, key: string): string | number | undefined => {
-  if (typeof value !== "object" || value === null || !(key in value)) {
-    return undefined;
-  }
-
-  const property = value[key as keyof typeof value];
-  return typeof property === "string" || typeof property === "number" ? property : undefined;
-};
-
-export type ToolInputProps = ComponentProps<"div"> & {
-  input: ToolPart["input"];
-};
-
-export const ToolInput = ({ className, input, ...props }: ToolInputProps) => (
-  <div className={cn("overflow-hidden rounded-md bg-muted/50", className)} {...props}>
-    <span className="block px-3 pt-3 font-sans text-[10px] text-muted-foreground uppercase tracking-wide">
-      Parameters
-    </span>
-    <div>
-      <CodeBlock
-        className={compactCodeBlockClassName}
-        code={JSON.stringify(input, null, 2)}
-        language="json"
-      />
-    </div>
-  </div>
-);
-
-export type ToolOutputProps = ComponentProps<"div"> & {
-  output: ToolPart["output"];
-  errorText: ToolPart["errorText"];
-};
-
-export const ToolOutput = ({ className, output, errorText, ...props }: ToolOutputProps) => {
-  if (!(output || errorText)) {
-    return null;
-  }
-
-  let Output = <div>{output as ReactNode}</div>;
-
-  if (typeof output === "object" && !isValidElement(output)) {
-    Output = (
-      <CodeBlock
-        className={compactCodeBlockClassName}
-        code={JSON.stringify(output, null, 2)}
-        language="json"
-      />
-    );
-  } else if (typeof output === "string") {
-    Output = <CodeBlock className={compactCodeBlockClassName} code={output} language="json" />;
-  }
-
-  return (
-    <div
-      className={cn(
-        "overflow-x-auto rounded-md text-xs [&_table]:w-full",
-        errorText ? "bg-destructive/10 text-destructive" : "bg-muted/50 text-foreground",
-        className,
-      )}
-      {...props}
-    >
-      <span className="block px-3 pt-3 font-sans text-[10px] text-muted-foreground uppercase tracking-wide">
-        {errorText ? "Error" : "Result"}
-      </span>
-      {errorText && <div className="px-3 pt-2 pb-3">{errorText}</div>}
-      {Output}
-    </div>
-  );
-};
-`,"components/ui/badge.tsx":`import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { Slot } from "radix-ui";
-
-import { cn } from "@/lib/utils";
-
-const badgeVariants = cva(
-  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
-        outline:
-          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 [a&]:hover:underline",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-function Badge({
-  className,
-  variant = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "span";
-
-  return (
-    <Comp
-      data-slot="badge"
-      data-variant={variant}
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  );
-}
-
-export { Badge, badgeVariants };
-`,"components/ui/button-group.tsx":`import { cva, type VariantProps } from "class-variance-authority";
-import { Slot } from "radix-ui";
-
-import { cn } from "@/lib/utils";
-import { Separator } from "@/components/ui/separator";
-
-const buttonGroupVariants = cva(
-  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
-  {
-    variants: {
-      orientation: {
-        horizontal:
-          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
-        vertical:
-          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
-      },
-    },
-    defaultVariants: {
-      orientation: "horizontal",
-    },
-  },
-);
-
-function ButtonGroup({
-  className,
-  orientation,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="button-group"
-      data-orientation={orientation}
-      className={cn(buttonGroupVariants({ orientation }), className)}
-      {...props}
-    />
-  );
-}
-
-function ButtonGroupText({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"div"> & {
-  asChild?: boolean;
-}) {
-  const Comp = asChild ? Slot.Root : "div";
-
-  return (
-    <Comp
-      className={cn(
-        "flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function ButtonGroupSeparator({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="button-group-separator"
-      orientation={orientation}
-      className={cn(
-        "relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
-`,"components/ui/button.tsx":`import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { Slot } from "radix-ui";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot.Root : "button";
-
-  return (
-    <Comp
-      data-slot="button"
-      data-variant={variant}
-      data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-export { Button, buttonVariants };
-`,"components/ui/collapsible.tsx":`"use client";
-
-import { Collapsible as CollapsiblePrimitive } from "radix-ui";
-
-function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
-}
-
-function CollapsibleTrigger({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />;
-}
-
-function CollapsibleContent({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />;
-}
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };
-`,"components/ui/command.tsx":`"use client";
-
-import * as React from "react";
-import { Command as CommandPrimitive } from "cmdk";
-import { SearchIcon } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-
-function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
-  return (
-    <CommandPrimitive
-      data-slot="command"
-      className={cn(
-        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CommandDialog({
-  title = "Command Palette",
-  description = "Search for a command to run...",
-  children,
-  className,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof Dialog> & {
-  title?: string;
-  description?: string;
-  className?: string;
-  showCloseButton?: boolean;
-}) {
-  return (
-    <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
-      <DialogContent
-        className={cn("overflow-hidden p-0", className)}
-        showCloseButton={showCloseButton}
-      >
-        <Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function CommandInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
-  return (
-    <div data-slot="command-input-wrapper" className="flex h-9 items-center gap-2 border-b px-3">
-      <SearchIcon className="size-4 shrink-0 opacity-50" />
-      <CommandPrimitive.Input
-        data-slot="command-input"
-        className={cn(
-          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-        )}
-        {...props}
-      />
-    </div>
-  );
-}
-
-function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
-  return (
-    <CommandPrimitive.List
-      data-slot="command-list"
-      className={cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
-      {...props}
-    />
-  );
-}
-
-function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return (
-    <CommandPrimitive.Empty
-      data-slot="command-empty"
-      className="py-6 text-center text-sm"
-      {...props}
-    />
-  );
-}
-
-function CommandGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
-  return (
-    <CommandPrimitive.Group
-      data-slot="command-group"
-      className={cn(
-        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CommandSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-  return (
-    <CommandPrimitive.Separator
-      data-slot="command-separator"
-      className={cn("-mx-1 h-px bg-border", className)}
-      {...props}
-    />
-  );
-}
-
-function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
-  return (
-    <CommandPrimitive.Item
-      data-slot="command-item"
-      className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="command-shortcut"
-      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-};
-`,"components/ui/dialog.tsx":`"use client";
-
-import * as React from "react";
-import { XIcon } from "lucide-react";
-import { Dialog as DialogPrimitive } from "radix-ui";
-
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-
-function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
-}
-
-function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
-}
-
-function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
-}
-
-function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
-}
-
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function DialogContent({
+function ButtonGroup({
   className,
-  children,
-  showCloseButton = true,
+  orientation,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean;
-}) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
   return (
     <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
       {...props}
     />
   );
 }
 
-function DialogFooter({
+function ButtonGroupText({
   className,
-  showCloseButton = false,
-  children,
+  asChild = false,
   ...props
 }: React.ComponentProps<"div"> & {
-  showCloseButton?: boolean;
+  asChild?: boolean;
 }) {
+  const Comp = asChild ? Slot.Root : "div";
+
   return (
-    <div
-      data-slot="dialog-footer"
-      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
-      {...props}
-    >
-      {children}
-      {showCloseButton && (
-        <DialogPrimitive.Close asChild>
-          <Button variant="outline">Close</Button>
-        </DialogPrimitive.Close>
+    <Comp
+      className={cn(
+        "flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
       )}
-    </div>
+      {...props}
+    />
   );
 }
 
-function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
   return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto",
+        className,
+      )}
       {...props}
     />
   );
 }
 
-function DialogDescription({
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
+`,"components/ui/button.tsx":`import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
   className,
+  variant = "default",
+  size = "default",
+  asChild = false,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot.Root : "button";
+
   return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-sm text-muted-foreground", className)}
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
   );
 }
 
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-};
+export { Button, buttonVariants };
+`,"components/ui/collapsible.tsx":`"use client";
+
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+
+function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />;
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />;
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
 `,"components/ui/dropdown-menu.tsx":`"use client";
 
 import * as React from "react";
@@ -4845,44 +3227,6 @@ export {
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
 };
-`,"components/ui/hover-card.tsx":`"use client";
-
-import * as React from "react";
-import { HoverCard as HoverCardPrimitive } from "radix-ui";
-
-import { cn } from "@/lib/utils";
-
-function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
-}
-
-function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
-}
-
-function HoverCardContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
-  return (
-    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
-      <HoverCardPrimitive.Content
-        data-slot="hover-card-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          className,
-        )}
-        {...props}
-      />
-    </HoverCardPrimitive.Portal>
-  );
-}
-
-export { HoverCard, HoverCardTrigger, HoverCardContent };
 `,"components/ui/input-group.tsx":`"use client";
 
 import * as React from "react";
@@ -5580,22 +3924,6 @@ function Separator({
 }
 
 export { Separator };
-`,"components/ui/spinner.tsx":`import { Loader2Icon } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
-  return (
-    <Loader2Icon
-      role="status"
-      aria-label="Loading"
-      className={cn("size-4 animate-spin", className)}
-      {...props}
-    />
-  );
-}
-
-export { Spinner };
 `,"components/ui/textarea.tsx":`import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -5667,6 +3995,155 @@ function TooltipContent({
 }
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+`,"components/ui/trace.tsx":`import * as React from "react";
+import { cn } from "@/lib/utils";
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { ChevronRightIcon } from "lucide-react";
+
+function Trace({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="trace"
+      className={cn(
+        "flex w-full min-w-0 flex-col gap-2 *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:rounded-md *:has-[>[data-slot=trace-line]]:text-left *:has-[>[data-slot=trace-line]]:outline-none *:has-[>[data-slot=trace-line]]:focus-visible:ring-3 *:has-[>[data-slot=trace-line]]:focus-visible:ring-ring/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TraceLine({
+  className,
+  status,
+  ...props
+}: React.ComponentProps<"span"> & {
+  status?: "running" | "error" | "pending";
+}) {
+  return (
+    <span
+      data-slot="trace-line"
+      data-status={status}
+      className={cn(
+        "flex w-fit max-w-full min-w-0 items-center gap-2 text-sm text-muted-foreground transition-colors in-[a,button]:cursor-pointer in-[a:hover,button:hover]:text-foreground data-[status=error]:text-destructive data-[status=error]:in-[a:hover,button:hover]:text-destructive data-[status=pending]:opacity-60 data-[status=running]:*:data-[slot=trace-title]:shimmer",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TraceIcon({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="trace-icon"
+      aria-hidden="true"
+      className={cn(
+        "flex size-4 shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=trace-title]~&]:-ml-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TraceTitle({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="trace-title"
+      className={cn("min-w-0 truncate motion-reduce:shimmer-none", className)}
+      {...props}
+    />
+  );
+}
+
+function TraceDescription({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="trace-description"
+      className={cn("shrink-0 text-muted-foreground/70 tabular-nums", className)}
+      {...props}
+    />
+  );
+}
+
+function TraceCollapsible({
+  className,
+  ...props
+}: Omit<React.ComponentProps<typeof Collapsible>, "asChild" | "open"> &
+  (
+    | { open?: undefined }
+    | {
+        open: boolean;
+        onOpenChange: NonNullable<React.ComponentProps<typeof Collapsible>["onOpenChange"]>;
+      }
+  )) {
+  return (
+    <Collapsible
+      data-slot="trace-collapsible"
+      className={cn("flex w-full min-w-0 flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+function TraceCollapsibleTrigger({
+  className,
+  children,
+  ...props
+}: Omit<React.ComponentProps<typeof CollapsibleTrigger>, "asChild">) {
+  return (
+    <CollapsibleTrigger
+      data-slot="trace-collapsible-trigger"
+      className={cn(
+        "group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center gap-1 rounded-md text-left text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 has-[[data-status=error]]:text-destructive",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <TraceIcon className="transition-transform group-aria-expanded/trace-collapsible-trigger:rotate-90">
+        <ChevronRightIcon />
+      </TraceIcon>
+    </CollapsibleTrigger>
+  );
+}
+
+function TraceCollapsibleContent({
+  className,
+  children,
+  ...props
+}: Omit<React.ComponentProps<typeof CollapsibleContent>, "asChild">) {
+  return (
+    <CollapsibleContent
+      data-slot="trace-collapsible-content"
+      className="min-w-0 overflow-hidden duration-200 [--radix-accordion-content-height:var(--radix-collapsible-content-height)] data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        data-slot="trace-collapsible-content-inner"
+        className={cn(
+          "mt-2 mb-1 ml-[calc(--spacing(2)-1px)] min-w-0 border-l pr-1 pl-4 leading-relaxed wrap-break-word text-muted-foreground",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </CollapsibleContent>
+  );
+}
+
+export {
+  Trace,
+  TraceLine,
+  TraceIcon,
+  TraceTitle,
+  TraceDescription,
+  TraceCollapsible,
+  TraceCollapsibleTrigger,
+  TraceCollapsibleContent,
+};
 `,"components.json":`{
   "$schema": "https://ui.shadcn.com/schema.json",
   "style": "new-york",
@@ -5742,6 +4219,7 @@ export function proxy(request: NextRequest) {
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "Bundler",
+    "types": ["node", "eve/workflow-modules"],
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
@@ -6142,7 +4620,7 @@ export const auth = betterAuth({
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
-    "types": ["vite/client"],
+    "types": ["node", "vite/client", "eve/workflow-modules"],
     "paths": {
       "@/*": ["./*"]
     }
@@ -6160,4 +4638,4 @@ export default defineConfig({
   resolve: { tsconfigPaths: true },
   plugins: [tailwindcss(), tanstackStart({ srcDirectory: "app" }), viteReact(), nitro()],
 });
-`},WEB_APP_TEMPLATE_PACKAGE_JSON={scripts:{build:`next build`,"build:eve":`eve build`,dev:`next dev`,"dev:eve":`eve dev`,start:`next start`,"start:eve":`eve start`,typecheck:`tsc --noEmit -p tsconfig.json`},dependencies:{"@radix-ui/react-use-controllable-state":`1.2.2`,"@shadcn/react":`0.3.1`,"@shikijs/core":`3.23.0`,"@shikijs/engine-javascript":`3.23.0`,"@shikijs/engine-oniguruma":`3.23.0`,"@streamdown/cjk":`1.0.3`,"@streamdown/code":`1.1.1`,"@streamdown/math":`1.0.2`,"@streamdown/mermaid":`1.0.2`,"@tailwindcss/postcss":`4.3.0`,"class-variance-authority":`0.7.1`,clsx:`2.1.1`,cmdk:`1.1.1`,"lucide-react":`1.16.0`,motion:`12.40.0`,nanoid:`5.1.11`,next:`16.3.6`,"radix-ui":`1.4.3`,react:`19.2.6`,"react-dom":`19.2.6`,shiki:`3.23.0`,streamdown:`2.5.0`,"tailwind-merge":`3.6.0`,tailwindcss:`4.3.0`,"use-stick-to-bottom":`1.1.4`,zod:`4.5.4`},devDependencies:{"@types/node":`26`,"@types/react":`19.2.15`,"@types/react-dom":`19.2.3`,typescript:`6.0.3`}};export{WEB_APP_SIGN_IN_WITH_VERCEL_TEMPLATE_FILES,WEB_APP_TANSTACK_TEMPLATE_FILES,WEB_APP_TEMPLATE_FILES,WEB_APP_TEMPLATE_PACKAGE_JSON,WEB_CHANNEL_TEMPLATES};
+`},WEB_APP_TEMPLATE_PACKAGE_JSON={scripts:{build:`next build`,"build:eve":`eve build`,dev:`next dev`,"dev:eve":`eve dev`,start:`next start`,"start:eve":`eve start`,typecheck:`tsc --noEmit -p tsconfig.json`},dependencies:{"@shadcn/react":`0.3.1`,"@shikijs/core":`3.23.0`,"@shikijs/engine-javascript":`3.23.0`,"@shikijs/engine-oniguruma":`3.23.0`,"@streamdown/cjk":`1.0.3`,"@streamdown/code":`1.1.1`,"@streamdown/math":`1.0.2`,"@streamdown/mermaid":`1.0.2`,"@tailwindcss/postcss":`4.3.0`,"class-variance-authority":`0.7.1`,clsx:`2.1.1`,"lucide-react":`1.16.0`,nanoid:`5.1.11`,next:`16.3.6`,"radix-ui":`1.4.3`,react:`19.2.6`,"react-dom":`19.2.6`,shiki:`3.23.0`,streamdown:`2.5.0`,"tailwind-merge":`3.6.0`,tailwindcss:`4.3.0`,"tw-animate-css":`1.4.0`,"use-stick-to-bottom":`1.1.4`,zod:`4.5.4`},devDependencies:{"@types/node":`26`,"@types/react":`19.2.15`,"@types/react-dom":`19.2.3`,typescript:`6.0.3`}};export{WEB_APP_SIGN_IN_WITH_VERCEL_TEMPLATE_FILES,WEB_APP_TANSTACK_TEMPLATE_FILES,WEB_APP_TEMPLATE_FILES,WEB_APP_TEMPLATE_PACKAGE_JSON,WEB_CHANNEL_TEMPLATES};