From da97efb9e6c8221bb6f723ba6b4a23567be5c700 Mon Sep 17 00:00:00 2001
From: Shobhan Karthish <ShobhanKarthish@users.noreply.github.com>
Date: Sat, 5 Sep 2026 09:20:00 +0000
Subject: [PATCH] fix(confirmation): derive approval type from AI SDK
 ToolUIPart

Replace the hand-copied ToolUIPartApproval union with
NonNullable<ToolUIPart['approval']> so the Confirmation component
stays aligned with the SDK. Surface approval.requestReason in
ConfirmationRequest when the field is present.

Closes #484
---
 .../elements/__tests__/confirmation.test.tsx  | 20 +++++++++
 packages/elements/src/confirmation.tsx        | 41 ++++++++-----------
 2 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/packages/elements/__tests__/confirmation.test.tsx b/packages/elements/__tests__/confirmation.test.tsx
index 28342a2f..862c5dd0 100644
--- a/packages/elements/__tests__/confirmation.test.tsx
+++ b/packages/elements/__tests__/confirmation.test.tsx
@@ -76,6 +76,26 @@ describe("confirmationRequest, ConfirmationAccepted, ConfirmationRejected", () =
     expect(screen.queryByText("Rejected")).not.toBeInTheDocument();
   });
 
+  it("renders requestReason when present on approval", () => {
+    render(
+      <Confirmation
+        approval={
+          {
+            id: "test-id",
+            requestReason: "Needs human review before running",
+          } as { id: string }
+        }
+        state="approval-requested"
+      >
+        <ConfirmationRequest>Custom approval message</ConfirmationRequest>
+      </Confirmation>
+    );
+    expect(
+      screen.getByText("Needs human review before running")
+    ).toBeInTheDocument();
+    expect(screen.getByText("Custom approval message")).toBeInTheDocument();
+  });
+
   it("renders ConfirmationAccepted when approved and state is approval-responded", () => {
     render(
       <Confirmation
diff --git a/packages/elements/src/confirmation.tsx b/packages/elements/src/confirmation.tsx
index 7c964383..911f4536 100644
--- a/packages/elements/src/confirmation.tsx
+++ b/packages/elements/src/confirmation.tsx
@@ -7,31 +7,10 @@ import type { ToolUIPart } from "ai";
 import type { ComponentProps, ReactNode } from "react";
 import { createContext, useContext, useMemo } from "react";
 
-type ToolUIPartApproval =
-  | {
-      id: string;
-      approved?: never;
-      reason?: never;
-    }
-  | {
-      id: string;
-      approved: boolean;
-      reason?: string;
-    }
-  | {
-      id: string;
-      approved: true;
-      reason?: string;
-    }
-  | {
-      id: string;
-      approved: false;
-      reason?: string;
-    }
-  | undefined;
+type ToolUIPartApproval = NonNullable<ToolUIPart["approval"]>;
 
 interface ConfirmationContextValue {
-  approval: ToolUIPartApproval;
+  approval: ToolUIPartApproval | undefined;
   state: ToolUIPart["state"];
 }
 
@@ -87,14 +66,26 @@ export interface ConfirmationRequestProps {
 }
 
 export const ConfirmationRequest = ({ children }: ConfirmationRequestProps) => {
-  const { state } = useConfirmation();
+  const { approval, state } = useConfirmation();
 
   // Only show when approval is requested
   if (state !== "approval-requested") {
     return null;
   }
 
-  return children;
+  const requestReason =
+    approval &&
+    "requestReason" in approval &&
+    typeof approval.requestReason === "string"
+      ? approval.requestReason
+      : undefined;
+
+  return (
+    <>
+      {requestReason ? <span>{requestReason}</span> : null}
+      {children}
+    </>
+  );
 };
 
 export interface ConfirmationAcceptedProps {