assistant-ui 0.0.121 → 0.0.122

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} />

package/templates/cloud-harness/package.json

@@ -13,38 +13,38 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^4.0.82",
+    "@ai-sdk/openai": "^4.0.86",
     "@assistant-ui/ai-sdk": "workspace:*",
     "@assistant-ui/core": "workspace:*",
     "@assistant-ui/react": "workspace:*",
+    "@assistant-ui/react-harness-sdk": "file:vendor/assistant-ui-react-harness-sdk-0.0.2.tgz",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/store": "workspace:*",
     "@assistant-ui/tap": "workspace:*",
     "@base-ui/react": "^1.8.0",
-    "ai": "^7.0.123",
+    "ai": "^7.0.130",
+    "assistant-cloud": "workspace:*",
     "class-variance-authority": "^0.7.1",
     "cn": "^0.4.0",
-    "lucide-react": "^1.49.0",
-    "next": "^16.3.8",
+    "harness-sdk": "file:vendor/harness-sdk-0.3.1.tgz",
+    "lucide-react": "^1.52.0",
+    "next": "^16.4.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "remark-gfm": "^4.0.1",
+    "statewire": "file:vendor/statewire-0.19.3.tgz",
     "tw-animate-css": "^1.4.0",
     "tw-shimmer": "^0.4.13",
-    "zustand": "^5.0.15",
-    "assistant-cloud": "workspace:*",
-    "@assistant-ui/react-harness-sdk": "file:vendor/assistant-ui-react-harness-sdk-0.0.2.tgz",
-    "harness-sdk": "file:vendor/harness-sdk-0.3.1.tgz",
-    "statewire": "file:vendor/statewire-0.19.3.tgz"
+    "zustand": "^5.0.15"
   },
   "devDependencies": {
     "@assistant-ui/next": "workspace:*",
     "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.6.3",
+    "@types/node": "^26.6.4",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "oxfmt": "^0.71.0",
-    "oxlint": "^1.86.0",
+    "oxfmt": "^0.72.0",
+    "oxlint": "^1.87.0",
     "tailwindcss": "^4.3.3",
     "typescript": "^7.0.2"
   }