feat(swingset): add live user profile panels and API keys pages

.changeset/swingset-live-user-profile-panels.md

@@ -0,0 +1,2 @@
+---
+---

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>
+  );
+}

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>
+  );
+}

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>
   );

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>
+  );
+}

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>
+  );
+}

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'],
 ]);