Skip to content

feat(ui): add agent action approval component - #9554

Draft
rafaelrcamargo wants to merge 12 commits into
mainfrom
rafael/agent-action-approval
Draft

feat(ui): add agent action approval component#9554
rafaelrcamargo wants to merge 12 commits into
mainfrom
rafael/agent-action-approval

Conversation

@rafaelrcamargo

Copy link
Copy Markdown
Member

Description

Adds an experimental <AgentActionApproval /> component across Clerk React SDKs. The component currently uses a focused mock approval request so the interaction can be reviewed while the API and SDK integration are still being developed.

The approval flow includes a Codex-requested refund, request metadata and parameters, an optional comment, an expiration countdown, and approve, reject, and expired terminal states. It is wired through Clerk JS mounting, React and Next.js exports, React Router and TanStack React Start exports, appearance customization, localization, and the Clerk JS sandbox.

Preview it in the Clerk JS sandbox at /agent-action-approval?scenario=AgentActionApproval and exercise the approve, reject, and expiration paths.

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated (not applicable for this experimental mocked prototype)

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@changeset-bot

changeset-bot Bot commented Aug 26, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 3e87106

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 23 packages
Name Type
@clerk/shared Minor
@clerk/clerk-js Minor
@clerk/ui Minor
@clerk/react Minor
@clerk/react-router Minor
@clerk/nextjs Minor
@clerk/tanstack-react-start Minor
@clerk/localizations Patch
@clerk/astro Patch
@clerk/backend Patch
@clerk/chrome-extension Patch
@clerk/electron Patch
@clerk/expo-passkeys Patch
@clerk/expo Patch
@clerk/express Patch
@clerk/fastify Patch
@clerk/headless Patch
@clerk/hono Patch
@clerk/msw Patch
@clerk/nuxt Patch
@clerk/testing Patch
@clerk/vue Patch
@clerk/swingset Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercel Bot commented Aug 26, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
clerk-js-sandbox Ready Ready Preview Sep 3, 2026 9:28pm UTC
swingset Ready Ready Preview Sep 3, 2026 9:28pm UTC

Request Review

@pkg-pr-new

pkg-pr-new Bot commented Aug 26, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@9554

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@9554

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@9554

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@9554

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@9554

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@9554

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@9554

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@9554

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@9554

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@9554

@clerk/express

npm i https://pkg.pr.new/@clerk/express@9554

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@9554

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@9554

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@9554

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@9554

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@9554

@clerk/react

npm i https://pkg.pr.new/@clerk/react@9554

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@9554

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@9554

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@9554

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@9554

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@9554

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@9554

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@9554

commit: 3e87106

@rafaelrcamargo rafaelrcamargo self-assigned this Aug 26, 2026
Use the shared LineItems primitives to keep agent action approval parameter styling consistent with the rest of the UI and remove the redundant custom renderer.
Update the shared agent action approval type and every supported locale dictionary together so approval, denial, parameter, detail, timestamp, and terminal-state text stays consistent across languages.

Covers changes C001-C050.
Improve the approval presentation with reusable detail and status icon components, clearer request metadata, updated payment details, optional comment labeling, and deny terminology. Align interaction tests with the revised headings, values, and controls.

Changes: C051, C052, C053, C054, C055
@coderabbitai

coderabbitai Bot commented Sep 3, 2026

Copy link
Copy Markdown
Contributor

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

  • Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

Comment @coderabbitai help to get the list of available commands.

Focus the agent action approval test on user-visible content and controls instead of document order and styling implementation details.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant