From 5385c7011ec452a4d6549569f486bffa079ba49b Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Fri, 9 Oct 2026 19:08:03 -0400
Subject: [PATCH] feat(swingset): add live user profile panels and API keys
 table

---
 .../swingset-live-user-profile-panels.md      |  2 +
 .../src/app/(clerk)/live/account/page.tsx     | 36 ++++++++++++++++
 .../app/(clerk)/live/api-keys-table/page.tsx  | 39 ++++++++++++++++++
 .../src/app/(clerk)/live/api-keys/page.tsx    | 12 ++----
 .../live/organization-api-keys/page.tsx       | 41 +++++++++++++++++++
 .../src/app/(clerk)/live/security/page.tsx    | 37 +++++++++++++++++
 packages/swingset/src/lib/live-navigation.ts  |  4 ++
 7 files changed, 162 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/swingset-live-user-profile-panels.md
 create mode 100644 packages/swingset/src/app/(clerk)/live/account/page.tsx
 create mode 100644 packages/swingset/src/app/(clerk)/live/api-keys-table/page.tsx
 create mode 100644 packages/swingset/src/app/(clerk)/live/organization-api-keys/page.tsx
 create mode 100644 packages/swingset/src/app/(clerk)/live/security/page.tsx

diff --git a/.changeset/swingset-live-user-profile-panels.md b/.changeset/swingset-live-user-profile-panels.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/swingset-live-user-profile-panels.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/swingset/src/app/(clerk)/live/account/page.tsx b/packages/swingset/src/app/(clerk)/live/account/page.tsx
new file mode 100644
index 00000000000..3749b088edc
--- /dev/null
+++ b/packages/swingset/src/app/(clerk)/live/account/page.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { UserProfileProfilePanel } from '@clerk/mosaic/features/user-profile/user-profile-profile-panel';
+import { MosaicProvider } from '@clerk/mosaic/mosaic-provider';
+import { useUser } from '@clerk/nextjs';
+import Link from 'next/link';
+
+export default function AccountLivePage() {
+  const { isLoaded, isSignedIn } = useUser();
+
+  return (
+    <MosaicProvider>
+      <div className='mx-auto flex w-full max-w-3xl flex-col gap-6 p-3 sm:p-8'>
+        <div className='flex flex-col gap-1'>
+          <h1 className='text-xl font-semibold'>Account</h1>
+          <p className='text-muted-foreground text-sm'>
+            The user profile account panel, with every live section the signed-in account has enabled.
+          </p>
+        </div>
+        {!isLoaded ? <p className='text-muted-foreground text-sm'>Loading…</p> : null}
+        {isLoaded && !isSignedIn ? (
+          <p className='text-muted-foreground text-sm'>
+            <Link
+              href='/sign-in'
+              className='text-foreground underline underline-offset-4'
+            >
+              Sign in
+            </Link>{' '}
+            to use the live harness.
+          </p>
+        ) : null}
+        {isLoaded && isSignedIn ? <UserProfileProfilePanel /> : null}
+      </div>
+    </MosaicProvider>
+  );
+}
diff --git a/packages/swingset/src/app/(clerk)/live/api-keys-table/page.tsx b/packages/swingset/src/app/(clerk)/live/api-keys-table/page.tsx
new file mode 100644
index 00000000000..0f40b0ebb75
--- /dev/null
+++ b/packages/swingset/src/app/(clerk)/live/api-keys-table/page.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import { APIKeysTable } from '@clerk/mosaic/features/api-keys/api-keys-table';
+import { MosaicProvider } from '@clerk/mosaic/mosaic-provider';
+import { useOrganization, useUser } from '@clerk/nextjs';
+import Link from 'next/link';
+
+export default function APIKeysTableLivePage() {
+  const { isLoaded, isSignedIn, user } = useUser();
+  const { organization } = useOrganization();
+
+  return (
+    <MosaicProvider>
+      <div className='mx-auto flex w-full max-w-3xl flex-col gap-6 p-3 sm:p-8'>
+        <div className='flex flex-col gap-1'>
+          <h1 className='text-xl font-semibold'>API keys table</h1>
+          <p className='text-muted-foreground text-sm'>
+            The API keys table for the signed-in user and their active organization, listing, creating, and revoking
+            real API keys. API keys must be enabled for the application.
+          </p>
+        </div>
+        {!isLoaded ? <p className='text-muted-foreground text-sm'>Loading…</p> : null}
+        {isLoaded && !isSignedIn ? (
+          <p className='text-muted-foreground text-sm'>
+            <Link
+              href='/sign-in'
+              className='text-foreground underline underline-offset-4'
+            >
+              Sign in
+            </Link>{' '}
+            to use the live harness.
+          </p>
+        ) : null}
+        {user ? <APIKeysTable subject={user.id} /> : null}
+        {organization ? <APIKeysTable subject={organization.id} /> : null}
+      </div>
+    </MosaicProvider>
+  );
+}
diff --git a/packages/swingset/src/app/(clerk)/live/api-keys/page.tsx b/packages/swingset/src/app/(clerk)/live/api-keys/page.tsx
index 1bb66492cdc..7e97e997a37 100644
--- a/packages/swingset/src/app/(clerk)/live/api-keys/page.tsx
+++ b/packages/swingset/src/app/(clerk)/live/api-keys/page.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { OrganizationProfileApiKeysPanel } from '@clerk/mosaic/features/organization-profile/organization-profile-api-keys-panel';
 import { UserProfileApiKeysPanel } from '@clerk/mosaic/features/user-profile/user-profile-api-keys-panel';
 import { MosaicProvider } from '@clerk/mosaic/mosaic-provider';
 import { useUser } from '@clerk/nextjs';
@@ -15,8 +14,8 @@ export default function ApiKeysLivePage() {
         <div className='flex flex-col gap-1'>
           <h1 className='text-xl font-semibold'>API keys</h1>
           <p className='text-muted-foreground text-sm'>
-            The user and organization profile API keys panels, listing, creating, and revoking real API keys for the
-            signed-in user and their active organization. API keys must be enabled for the application.
+            The user profile API keys panel, listing, creating, and revoking real API keys for the signed-in user. API
+            keys must be enabled for the application.
           </p>
         </div>
         {!isLoaded ? <p className='text-muted-foreground text-sm'>Loading…</p> : null}
@@ -31,12 +30,7 @@ export default function ApiKeysLivePage() {
             to use the live harness.
           </p>
         ) : null}
-        {isLoaded && isSignedIn ? (
-          <>
-            <UserProfileApiKeysPanel />
-            <OrganizationProfileApiKeysPanel />
-          </>
-        ) : null}
+        {isLoaded && isSignedIn ? <UserProfileApiKeysPanel /> : null}
       </div>
     </MosaicProvider>
   );
diff --git a/packages/swingset/src/app/(clerk)/live/organization-api-keys/page.tsx b/packages/swingset/src/app/(clerk)/live/organization-api-keys/page.tsx
new file mode 100644
index 00000000000..b14a0c384bd
--- /dev/null
+++ b/packages/swingset/src/app/(clerk)/live/organization-api-keys/page.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { OrganizationProfileApiKeysPanel } from '@clerk/mosaic/features/organization-profile/organization-profile-api-keys-panel';
+import { MosaicProvider } from '@clerk/mosaic/mosaic-provider';
+import { useOrganization, useUser } from '@clerk/nextjs';
+import Link from 'next/link';
+
+export default function OrganizationApiKeysLivePage() {
+  const { isLoaded, isSignedIn } = useUser();
+  const { organization } = useOrganization();
+
+  return (
+    <MosaicProvider>
+      <div className='mx-auto flex w-full max-w-3xl flex-col gap-6 p-3 sm:p-8'>
+        <div className='flex flex-col gap-1'>
+          <h1 className='text-xl font-semibold'>Organization API keys</h1>
+          <p className='text-muted-foreground text-sm'>
+            The organization profile API keys panel, listing, creating, and revoking real API keys for the active
+            organization. API keys must be enabled for the application.
+          </p>
+        </div>
+        {!isLoaded ? <p className='text-muted-foreground text-sm'>Loading…</p> : null}
+        {isLoaded && !isSignedIn ? (
+          <p className='text-muted-foreground text-sm'>
+            <Link
+              href='/sign-in'
+              className='text-foreground underline underline-offset-4'
+            >
+              Sign in
+            </Link>{' '}
+            and pick an active organization.
+          </p>
+        ) : null}
+        {isLoaded && isSignedIn && !organization ? (
+          <p className='text-muted-foreground text-sm'>Pick an active organization to see its API keys panel.</p>
+        ) : null}
+        {isLoaded && isSignedIn ? <OrganizationProfileApiKeysPanel /> : null}
+      </div>
+    </MosaicProvider>
+  );
+}
diff --git a/packages/swingset/src/app/(clerk)/live/security/page.tsx b/packages/swingset/src/app/(clerk)/live/security/page.tsx
new file mode 100644
index 00000000000..24103ea3936
--- /dev/null
+++ b/packages/swingset/src/app/(clerk)/live/security/page.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { UserProfileSecurityPanel } from '@clerk/mosaic/features/user-profile/user-profile-security-panel';
+import { MosaicProvider } from '@clerk/mosaic/mosaic-provider';
+import { useUser } from '@clerk/nextjs';
+import Link from 'next/link';
+
+export default function SecurityLivePage() {
+  const { isLoaded, isSignedIn } = useUser();
+
+  return (
+    <MosaicProvider>
+      <div className='mx-auto flex w-full max-w-3xl flex-col gap-6 p-3 sm:p-8'>
+        <div className='flex flex-col gap-1'>
+          <h1 className='text-xl font-semibold'>Security</h1>
+          <p className='text-muted-foreground text-sm'>
+            The user profile security panel, with the password, passkeys, 2-step verification, and active devices
+            sections for the signed-in account.
+          </p>
+        </div>
+        {!isLoaded ? <p className='text-muted-foreground text-sm'>Loading…</p> : null}
+        {isLoaded && !isSignedIn ? (
+          <p className='text-muted-foreground text-sm'>
+            <Link
+              href='/sign-in'
+              className='text-foreground underline underline-offset-4'
+            >
+              Sign in
+            </Link>{' '}
+            to use the live harness.
+          </p>
+        ) : null}
+        {isLoaded && isSignedIn ? <UserProfileSecurityPanel /> : null}
+      </div>
+    </MosaicProvider>
+  );
+}
diff --git a/packages/swingset/src/lib/live-navigation.ts b/packages/swingset/src/lib/live-navigation.ts
index 77f849845e7..d75b60268e2 100644
--- a/packages/swingset/src/lib/live-navigation.ts
+++ b/packages/swingset/src/lib/live-navigation.ts
@@ -10,6 +10,8 @@ type LiveSidebarGroup = {
 };
 
 const liveRoutes = new Map([
+  ['/user-profile/user-profile-profile-panel', '/live/account'],
+  ['/user-profile/user-profile-security-panel', '/live/security'],
   ['/user-profile/user-profile-api-keys-panel', '/live/api-keys'],
   ['/user-profile/user-profile-profile-section', '/live/profile'],
   ['/user-profile/user-profile-email-section', '/live/email'],
@@ -22,9 +24,11 @@ const liveRoutes = new Map([
   ['/user-profile/user-profile-danger-section', '/live/user-danger'],
   ['/organization-profile/organization-profile-general-panel', '/live/organization-general'],
   ['/organization-profile/organization-profile-members-panel', '/live/organization-members'],
+  ['/organization-profile/organization-profile-api-keys-panel', '/live/organization-api-keys'],
   ['/organization-profile/organization-profile-danger-section', '/live/organization-danger'],
   ['/user-profile/user-profile-passkeys-section', '/live/passkeys'],
   ['/user-profile/user-profile-web3wallets-section', '/live/web3-wallets'],
+  ['/api-keys/api-keys-table', '/live/api-keys-table'],
   ['/reverification/reverification', '/live/reverification'],
 ]);