assistant-ui 0.0.121 → 0.0.123

package/src/lib/transform.ts

@@ -3,8 +3,8 @@ import path from "node:path";
 import type { TransformOptions } from "./transform-options";
 import { fileURLToPath } from "node:url";
 import * as fs from "node:fs";
-import { sync as globSync } from "glob";
 import { runSpawnCapture, SpawnExitError, SpawnSignalError } from "./run-spawn";
+import { readProjectFiles } from "./utils/file-scanner";
 
 const log = debug("codemod:transform");
 
@@ -22,7 +22,8 @@ export function getRelevantFiles(source: string): string[] {
   }
 
   const pattern = "**/*.{js,jsx,ts,tsx}";
-  const files = globSync(pattern, {
+  const relevantFiles: string[] = [];
+  for (const { fullPath, content } of readProjectFiles(pattern, {
     cwd: target,
     ignore: [
       "**/node_modules/**",
@@ -31,27 +32,12 @@ export function getRelevantFiles(source: string): string[] {
       "**/*.min.js",
       "**/*.bundle.js",
     ],
-  }).map((file) => path.join(target, file));
-
-  const relevantFiles = files.filter((file) => {
-    try {
-      const content = fs.readFileSync(file, "utf8");
-      return content.includes("assistant-ui");
-    } catch {
-      return false;
-    }
-  });
-
+  })) {
+    if (content.includes("assistant-ui")) relevantFiles.push(fullPath);
+  }
   return relevantFiles;
 }
 
-/**
- * Counts the number of files that need to be processed
- */
-export function countFilesToProcess(source: string): number {
-  return getRelevantFiles(source).length;
-}
-
 function buildCommand(
   codemodPath: string,
   targetFiles: string[],

package/src/lib/utils/download.ts

@@ -0,0 +1,57 @@
+import { downloadTemplate } from "giget";
+
+export const DOWNLOAD_TIMEOUT_MS = 30_000;
+
+export function resolveGitHubAuthToken(): string | undefined {
+  const token =
+    process.env.GIGET_AUTH ?? process.env.GITHUB_TOKEN ?? process.env.GH_TOKEN;
+  const trimmed = token?.trim();
+  return trimmed || undefined;
+}
+
+export async function withStagedDownload<T>(
+  source: string,
+  options: NonNullable<Parameters<typeof downloadTemplate>[1]>,
+  timeoutMessage: string,
+  cleanup: () => void | Promise<void>,
+  consumeDownload: (download: Promise<unknown>) => Promise<T>,
+): Promise<T> {
+  // giget logs to console.debug whenever DEBUG is set, which the `debug`
+  // package does at module load for an unrelated namespace.
+  const origDebug = process.env.DEBUG;
+  delete process.env.DEBUG;
+  let download: Promise<unknown> | undefined;
+  let settled = false;
+  try {
+    const authToken = resolveGitHubAuthToken();
+    download = downloadTemplate(source, {
+      ...options,
+      ...(authToken ? { auth: authToken } : {}),
+    }).finally(() => {
+      settled = true;
+    });
+
+    let timer: ReturnType<typeof setTimeout>;
+    const timeout = new Promise<never>((_, reject) => {
+      timer = setTimeout(
+        () => reject(new Error(timeoutMessage)),
+        DOWNLOAD_TIMEOUT_MS,
+      );
+    });
+    try {
+      return await consumeDownload(Promise.race([download, timeout]));
+    } finally {
+      clearTimeout(timer!);
+    }
+  } finally {
+    try {
+      if (!download || settled) {
+        await cleanup();
+      } else {
+        void download.then(cleanup, cleanup);
+      }
+    } finally {
+      if (origDebug !== undefined) process.env.DEBUG = origDebug;
+    }
+  }
+}

package/src/lib/utils/file-scanner.ts

@@ -49,29 +49,3 @@ export function scanForImport(
 
   return false;
 }
-
-export function getFilesContaining(
-  searchString: string,
-  options: ScanOptions = {},
-): string[] {
-  const cwd = options.cwd || process.cwd();
-  const pattern = options.pattern || "**/*.{js,jsx,ts,tsx}";
-  const ignore = options.ignore || [
-    "**/node_modules/**",
-    "**/dist/**",
-    "**/build/**",
-  ];
-
-  const result: string[] = [];
-
-  for (const { fullPath, content } of readProjectFiles(pattern, {
-    cwd,
-    ignore,
-  })) {
-    if (content.includes(searchString)) {
-      result.push(fullPath);
-    }
-  }
-
-  return result;
-}

package/src/lib/utils/package-manager.ts

@@ -7,6 +7,32 @@ import { runSpawn, SpawnSignalError } from "../run-spawn";
 
 export type PackageManagerName = "npm" | "pnpm" | "yarn" | "bun";
 
+export function dlxCommand(pm: PackageManagerName): [string, string[]] {
+  switch (pm) {
+    case "pnpm":
+      return ["pnpm", ["dlx"]];
+    case "yarn":
+      return ["yarn", ["dlx"]];
+    case "bun":
+      return ["bunx", []];
+    case "npm":
+      return ["npx", ["--yes"]];
+  }
+}
+
+export function resolvePackageManager(opts: {
+  useNpm?: boolean;
+  usePnpm?: boolean;
+  useYarn?: boolean;
+  useBun?: boolean;
+}): PackageManagerName | undefined {
+  if (opts.useNpm) return "npm";
+  if (opts.usePnpm) return "pnpm";
+  if (opts.useYarn) return "yarn";
+  if (opts.useBun) return "bun";
+  return undefined;
+}
+
 export function askQuestion(query: string): Promise<string> {
   return new Promise((resolve) => {
     // A stream only reaches EOF once, so a run that already consumed stdin gets

package/src/lib/utils/registry.test.ts

@@ -144,12 +144,6 @@ describe("resolveRegistryItemUrl", () => {
     );
   });
 
-  it("uses the base URL for an explicit undefined style", () => {
-    expect(resolveRegistryItemUrl("thread", undefined)).toBe(
-      "https://r.assistant-ui.com/base/thread.json",
-    );
-  });
-
   it("keeps the style inside a single path segment", () => {
     expect(resolveRegistryItemUrl("thread", "base-nova?preview=1")).toBe(
       "https://r.assistant-ui.com/styles/base-nova%3Fpreview%3D1/thread.json",

package/templates/cloud-harness/app/api/chat/route.ts

@@ -6,6 +6,7 @@ export const maxDuration = 30;
 export const POST = async (request: Request) => {
   const { messages } = (await request.json()) as { messages: UIMessage[] };
   const result = streamText({
+    abortSignal: request.signal,
     model: openai.responses("gpt-6-luna"),
     messages: await convertToModelMessages(messages),
   });

package/templates/cloud-harness/components/assistant-ui/elements/collapsible-root.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { Collapsible } from "@base-ui/react/collapsible";
+import { forwardRef } from "react";
+
+export const CollapsibleRoot = forwardRef<
+  React.ComponentRef<typeof Collapsible.Root>,
+  React.ComponentPropsWithoutRef<typeof Collapsible.Root>
+>(function CollapsibleRoot(props, ref) {
+  return <Collapsible.Root ref={ref} data-slot="collapsible" {...props} />;
+});
+
+export function CollapsibleTrigger({ ...props }: Collapsible.Trigger.Props) {
+  return <Collapsible.Trigger data-slot="collapsible-trigger" {...props} />;
+}
+
+export function CollapsibleContent({ ...props }: Collapsible.Panel.Props) {
+  return <Collapsible.Panel data-slot="collapsible-content" {...props} />;
+}

package/templates/cloud-harness/components/assistant-ui/elements/markdown-text.tsx

@@ -5,7 +5,7 @@ import "@assistant-ui/react-markdown/styles/dot.css";
 import {
   type CodeHeaderProps,
   MarkdownTextPrimitive,
-  unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
+  memoizeMarkdownComponents,
   useIsMarkdownCodeBlock,
 } from "@assistant-ui/react-markdown";
 import remarkGfm from "remark-gfm";

package/templates/cloud-harness/components/assistant-ui/elements/tool-fallback.aui.tsx

@@ -1,6 +1,14 @@
 "use client";
 
-import { memo, useCallback, useRef, useState } from "react";
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import {
   AlertCircleIcon,
   CheckIcon,
@@ -22,12 +30,12 @@ import {
   type ToolCallMessagePartStatus,
   type ToolCallMessagePartComponent,
 } from "@assistant-ui/react";
+import { cn } from "@/lib/utils";
 import {
-  Collapsible,
+  CollapsibleRoot as Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from "@/components/ui/collapsible";
-import { cn } from "@/lib/utils";
+} from "./collapsible-root";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 
@@ -158,7 +166,7 @@ function ToolFallbackTrigger({
     <CollapsibleTrigger
       data-slot="tool-fallback-trigger"
       className={cn(
-        "aui-tool-fallback-trigger group/trigger text-muted-foreground hover:text-foreground flex w-fit origin-left items-center gap-2 py-1.5 text-sm transition-[color,scale] active:scale-[0.98]",
+        "aui-tool-fallback-trigger group/trigger text-muted-foreground hover:text-foreground flex w-fit max-w-full origin-left items-center gap-2 py-1.5 text-sm transition-[color,scale] active:scale-[0.98]",
         className,
       )}
       {...props}
@@ -174,7 +182,7 @@ function ToolFallbackTrigger({
       <span
         data-slot="tool-fallback-trigger-label"
         className={cn(
-          "aui-tool-fallback-trigger-label-wrapper inline-block text-start leading-none",
+          "aui-tool-fallback-trigger-label-wrapper inline-block min-w-0 text-start leading-none wrap-anywhere",
           isCancelled && "text-muted-foreground line-through",
           isRunning && "shimmer motion-reduce:animate-none",
         )}
@@ -245,7 +253,7 @@ function ToolFallbackArgs({
       className={cn("aui-tool-fallback-args", className)}
       {...props}
     >
-      <pre className="aui-tool-fallback-args-value bg-muted/50 text-foreground/90 rounded-md p-2.5 text-xs whitespace-pre-wrap">
+      <pre className="aui-tool-fallback-args-value bg-muted/50 text-foreground/90 rounded-md p-2.5 text-xs break-words whitespace-pre-wrap">
         {argsText}
       </pre>
     </div>
@@ -287,7 +295,7 @@ function ToolFallbackResult({
       <p className="aui-tool-fallback-result-header text-muted-foreground text-xs font-medium">
         Result:
       </p>
-      <pre className="aui-tool-fallback-result-content bg-muted/50 text-foreground/90 mt-1 rounded-md p-2.5 text-xs whitespace-pre-wrap">
+      <pre className="aui-tool-fallback-result-content bg-muted/50 text-foreground/90 mt-1 rounded-md p-2.5 text-xs break-words whitespace-pre-wrap">
         {formatUnknownValue(result, 2)}
       </pre>
     </div>
@@ -321,7 +329,7 @@ function ToolFallbackError({
       <p className="aui-tool-fallback-error-header text-muted-foreground font-semibold">
         {headerText}
       </p>
-      <p className="aui-tool-fallback-error-reason text-muted-foreground whitespace-pre-line">
+      <p className="aui-tool-fallback-error-reason text-muted-foreground break-words whitespace-pre-line">
         {errorText}
       </p>
     </div>
@@ -436,10 +444,20 @@ const receiptIcons = {
 function ToolFallbackApprovalReceipt({
   approval,
   className,
+  focusReceiptRef,
+  receiptRef,
   ...props
-}: React.ComponentProps<"div"> & {
+}: React.ComponentPropsWithoutRef<"div"> & {
   approval: NonNullable<ToolCallMessagePart["approval"]>;
+  focusReceiptRef: React.MutableRefObject<string | null | undefined>;
+  receiptRef: React.MutableRefObject<HTMLDivElement | null>;
 }) {
+  useLayoutEffect(() => {
+    const shouldFocus = focusReceiptRef.current === approval.id;
+    focusReceiptRef.current = null;
+    if (shouldFocus) receiptRef.current?.focus({ preventScroll: true });
+  }, [approval.id, focusReceiptRef, receiptRef]);
+
   const receipt = approvalReceipt(approval);
   const Icon = receiptIcons[receipt.outcome];
   const notes = [
@@ -452,8 +470,10 @@ function ToolFallbackApprovalReceipt({
 
   return (
     <div
+      ref={receiptRef}
       data-slot="tool-fallback-approval-receipt"
       data-outcome={receipt.outcome}
+      tabIndex={-1}
       className={cn(
         "aui-tool-fallback-approval-receipt flex flex-col gap-1.5 pt-1",
         className,
@@ -675,14 +695,36 @@ const offersInterruptAction = (
   approval != null ||
   interrupt != null;
 
-function ToolFallbackApproval(
-  props: React.ComponentProps<typeof ToolFallbackApprovalImpl>,
-) {
-  return <ToolFallbackApprovalImpl key={props.approval?.id} {...props} />;
-}
+type ToolFallbackApprovalProps = React.ComponentPropsWithoutRef<"div"> &
+  Partial<
+    Pick<
+      ToolCallMessagePartProps,
+      "addResult" | "resume" | "respondToApproval" | "status"
+    >
+  > & {
+    interrupt?: ToolCallMessagePart["interrupt"];
+    approval?: ToolCallMessagePart["approval"];
+  };
+
+const ToolFallbackApproval = forwardRef<
+  HTMLDivElement,
+  ToolFallbackApprovalProps
+>(function ToolFallbackApproval(props, ref) {
+  const carryFocusRef = useRef(false);
+  return (
+    <ToolFallbackApprovalImpl
+      key={props.approval?.id}
+      carryFocusRef={carryFocusRef}
+      forwardedRef={ref}
+      {...props}
+    />
+  );
+});
 
 function ToolFallbackApprovalImpl({
   className,
+  forwardedRef,
+  carryFocusRef,
   addResult,
   resume,
   interrupt,
@@ -690,16 +732,10 @@ function ToolFallbackApprovalImpl({
   respondToApproval,
   status,
   ...props
-}: React.ComponentProps<"div"> &
-  Partial<
-    Pick<
-      ToolCallMessagePartProps,
-      "addResult" | "resume" | "respondToApproval" | "status"
-    >
-  > & {
-    interrupt?: ToolCallMessagePart["interrupt"];
-    approval?: ToolCallMessagePart["approval"];
-  }) {
+}: Omit<ToolFallbackApprovalProps, "ref"> & {
+  forwardedRef: React.ForwardedRef<HTMLDivElement>;
+  carryFocusRef: React.MutableRefObject<boolean>;
+}) {
   const [submitted, setSubmitted] = useState(false);
   const voiceActive = useAuiState((s) => s.thread.voice !== undefined);
   const canAnswer = useAuiState((s) => s.thread.capabilities.answerToolCall);
@@ -707,17 +743,85 @@ function ToolFallbackApprovalImpl({
   const [confirmingId, setConfirmingId] = useState<string | null>(null);
   const [answer, setAnswer] = useState("");
   const [error, setError] = useState<string | null>(null);
+  const isRequiresAction = status?.type === "requires-action";
+  const [prevRequiresAction, setPrevRequiresAction] =
+    useState(isRequiresAction);
+  const [attempt, setAttempt] = useState(0);
+  const attemptRef = useRef(attempt);
+  useLayoutEffect(() => {
+    attemptRef.current = attempt;
+  }, [attempt]);
+  if (isRequiresAction !== prevRequiresAction) {
+    setPrevRequiresAction(isRequiresAction);
+    if (isRequiresAction) {
+      setSubmitted(false);
+      setConfirmingId(null);
+      setAnswer("");
+      setError(null);
+      setAttempt(attempt + 1);
+    }
+  }
+  const pendingGroupRef = useRef<HTMLDivElement | null>(null);
+  const receiptRef = useRef<HTMLDivElement | null>(null);
+  const focusReceiptRef = useRef<string | null | undefined>(null);
+  useLayoutEffect(() => {
+    if (carryFocusRef.current) {
+      carryFocusRef.current = false;
+      pendingGroupRef.current?.focus({ preventScroll: true });
+    }
+    return () => {
+      const element = pendingGroupRef.current ?? receiptRef.current;
+      carryFocusRef.current =
+        element?.contains(element.ownerDocument.activeElement) ?? false;
+    };
+  }, [carryFocusRef]);
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
+    forwardedRef,
+    () => pendingGroupRef.current ?? receiptRef.current,
+  );
+  const setPendingGroup = useCallback(
+    (element: HTMLDivElement | null) => {
+      const group = pendingGroupRef.current;
+      focusReceiptRef.current =
+        !element && group?.contains(group.ownerDocument.activeElement)
+          ? approval?.id
+          : null;
+      pendingGroupRef.current = element;
+    },
+    [approval?.id],
+  );
+  const hidePendingApproval =
+    approval != null &&
+    !isSettled(approval) &&
+    status !== undefined &&
+    status.type !== "requires-action" &&
+    !(submitted && status.type === "running");
+  useLayoutEffect(() => {
+    if (hidePendingApproval) focusReceiptRef.current = null;
+  }, [hidePendingApproval]);
+  const focusPendingGroup = () => {
+    const group = pendingGroupRef.current;
+    if (group?.contains(group.ownerDocument.activeElement)) {
+      group.focus({ preventScroll: true });
+    }
+  };
 
   if (approval != null && isSettled(approval))
     return (
       <ToolFallbackApprovalReceipt
         approval={approval}
+        receiptRef={receiptRef}
+        focusReceiptRef={focusReceiptRef}
         className={className}
         {...props}
       />
     );
 
-  if (!offersInterruptAction(status, approval, interrupt)) return null;
+  if (
+    hidePendingApproval ||
+    !offersInterruptAction(status, approval, interrupt)
+  )
+    return null;
 
   const promptText = approval?.prompt ? (
     <p className="aui-tool-fallback-approval-prompt text-foreground whitespace-pre-line">
@@ -730,11 +834,13 @@ function ToolFallbackApprovalImpl({
       promptText && (
         <div
           data-slot="tool-fallback-approval"
+          tabIndex={-1}
           className={cn(
             "aui-tool-fallback-approval flex flex-col gap-2 pt-1",
             className,
           )}
           {...props}
+          ref={setPendingGroup}
         >
           {promptText}
         </div>
@@ -753,12 +859,15 @@ function ToolFallbackApprovalImpl({
   // A refused response leaves the request open, so the controls come back
   // rather than staying spent on a decision the runtime never recorded.
   const submit = (send: () => Promise<void> | void) => {
+    focusPendingGroup();
     setSubmitted(true);
+    setConfirmingId(null);
     setError(null);
     void (async () => {
       try {
         await send();
       } catch (sendError) {
+        if (attemptRef.current !== attempt) return;
         setSubmitted(false);
         setError(
           sendError instanceof Error ? sendError.message : String(sendError),
@@ -789,7 +898,6 @@ function ToolFallbackApprovalImpl({
 
   const respondWithOption = (option: ToolApprovalOption) => {
     if (locked) return;
-    setConfirmingId(null);
     // A custom kind has no decision class for the runtime to derive, and
     // responding without one throws; picking a declared option is an answer,
     // so it resolves as approved.
@@ -819,6 +927,7 @@ function ToolFallbackApprovalImpl({
 
   const handleOption = (option: ToolApprovalOption) => {
     if (option.confirm) {
+      focusPendingGroup();
       setConfirmingId(option.id);
     } else {
       respondWithOption(option);
@@ -886,11 +995,13 @@ function ToolFallbackApprovalImpl({
     return (
       <div
         data-slot="tool-fallback-approval"
+        tabIndex={-1}
         className={cn(
           "aui-tool-fallback-approval flex flex-col gap-3 pt-1",
           className,
         )}
         {...props}
+        ref={setPendingGroup}
       >
         {promptText}
         <ToolFallbackApprovalQuestions
@@ -913,11 +1024,13 @@ function ToolFallbackApprovalImpl({
     return (
       <div
         data-slot="tool-fallback-approval-confirm"
+        tabIndex={-1}
         className={cn(
           "aui-tool-fallback-approval-confirm flex flex-col gap-2 pt-1",
           className,
         )}
         {...props}
+        ref={setPendingGroup}
       >
         <p className="aui-tool-fallback-approval-confirm-title font-semibold">
           {confirmMeta?.title ?? `${approvalOptionLabel(confirming)}?`}
@@ -951,7 +1064,10 @@ function ToolFallbackApprovalImpl({
             size="sm"
             variant="outline"
             className={pressable}
-            onClick={() => setConfirmingId(null)}
+            onClick={() => {
+              focusPendingGroup();
+              setConfirmingId(null);
+            }}
             disabled={locked}
           >
             Back
@@ -970,11 +1086,13 @@ function ToolFallbackApprovalImpl({
     return (
       <div
         data-slot="tool-fallback-approval"
+        tabIndex={-1}
         className={cn(
           "aui-tool-fallback-approval flex flex-col gap-2 pt-1",
           className,
         )}
         {...props}
+        ref={setPendingGroup}
       >
         {promptText}
         <div className="flex flex-wrap items-center gap-2">
@@ -1017,11 +1135,13 @@ function ToolFallbackApprovalImpl({
     return (
       <div
         data-slot="tool-fallback-approval"
+        tabIndex={-1}
         className={cn(
           "aui-tool-fallback-approval flex flex-col gap-2 pt-1",
           className,
         )}
         {...props}
+        ref={setPendingGroup}
       >
         {promptText}
         {answerField}
@@ -1036,11 +1156,13 @@ function ToolFallbackApprovalImpl({
   return (
     <div
       data-slot="tool-fallback-approval"
+      tabIndex={-1}
       className={cn(
         "aui-tool-fallback-approval flex flex-col gap-2 pt-1",
         className,
       )}
       {...props}
+      ref={setPendingGroup}
     >
       {promptText}
       <div className="flex items-center gap-2">
@@ -1083,7 +1205,8 @@ const ToolFallbackImpl: ToolCallMessagePartComponent = ({
     status?.type === "incomplete" && status.reason === "cancelled";
   const isRequiresAction = status?.type === "requires-action";
   const shouldRenderApproval =
-    isRequiresAction && offersInterruptAction(status, approval, interrupt);
+    approval != null ||
+    (isRequiresAction && offersInterruptAction(status, approval, interrupt));
 
   const [open, setOpen] = useState(isRequiresAction);
   const [prevRequiresAction, setPrevRequiresAction] =
@@ -1092,6 +1215,31 @@ const ToolFallbackImpl: ToolCallMessagePartComponent = ({
     setPrevRequiresAction(isRequiresAction);
     if (isRequiresAction) setOpen(true);
   }
+  const approvalHadFocusRef = useRef(false);
+  const approvalElementRef = useRef<HTMLDivElement | null>(null);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+
+  useLayoutEffect(() => {
+    const focusedElement = approvalElementRef.current;
+    if (
+      !focusedElement ||
+      focusedElement.isConnected ||
+      isRequiresAction ||
+      !approvalHadFocusRef.current
+    ) {
+      return;
+    }
+
+    const shouldFocusTrigger = approval == null || !isSettled(approval);
+    approvalHadFocusRef.current = false;
+    const { activeElement, body } = focusedElement.ownerDocument;
+    if (
+      shouldFocusTrigger &&
+      (activeElement == null || activeElement === body)
+    ) {
+      triggerRef.current?.focus({ preventScroll: true });
+    }
+  }, [approval, isRequiresAction, status?.type]);
 
   return (
     <ToolFallbackRoot open={open} onOpenChange={setOpen}>
@@ -1102,7 +1250,7 @@ const ToolFallbackImpl: ToolCallMessagePartComponent = ({
           argsText={argsText}
           className={cn(isCancelled && "opacity-60")}
         />
-        {(shouldRenderApproval || isSettled(approval)) && (
+        {shouldRenderApproval && (
           <ToolFallbackApproval
             addResult={addResult}
             resume={resume}
@@ -1110,6 +1258,26 @@ const ToolFallbackImpl: ToolCallMessagePartComponent = ({
             approval={approval}
             respondToApproval={respondToApproval}
             status={status}
+            onFocusCapture={(event) => {
+              const root = event.currentTarget.closest(
+                '[data-slot="tool-fallback-root"]',
+              );
+              triggerRef.current =
+                root?.querySelector<HTMLButtonElement>(
+                  '[data-slot="tool-fallback-trigger"]',
+                ) ?? null;
+              approvalElementRef.current = event.currentTarget;
+              approvalHadFocusRef.current = true;
+            }}
+            onBlurCapture={(event) => {
+              const relatedTarget = event.relatedTarget;
+              const stillFocused = relatedTarget
+                ? event.currentTarget.contains(relatedTarget as Node)
+                : event.currentTarget.contains(
+                    event.currentTarget.ownerDocument.activeElement,
+                  );
+              if (!stillFocused) approvalHadFocusRef.current = false;
+            }}
           />
         )}
         <ToolFallbackResult result={result} />