From 21c906028863abeaeb3117d08d2c034f6e1fa2c7 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Wed, 16 Sep 2026 00:19:06 -0600
Subject: [PATCH 01/25] feat(ui): add passkey rename and removal dialogs

---
 .changeset/calm-passkeys-views.md             |   2 +
 ...ser-profile-passkeys-section.view.test.tsx | 195 ++++++++++++++++++
 .../user-profile-security-panel.view.test.tsx |   2 +
 .../user-profile-passkey-row.view.tsx         |  98 +++++++++
 .../user-profile-passkeys-section.messages.ts |  17 ++
 .../user-profile-passkeys-section.view.tsx    | 123 +++++++----
 .../user-profile-rename-passkey.dialog.tsx    | 116 +++++++++++
 7 files changed, 509 insertions(+), 44 deletions(-)
 create mode 100644 .changeset/calm-passkeys-views.md
 create mode 100644 packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
 create mode 100644 packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
 create mode 100644 packages/mosaic/src/features/user-profile/user-profile-passkeys-section.messages.ts
 create mode 100644 packages/mosaic/src/features/user-profile/user-profile-rename-passkey.dialog.tsx

diff --git a/.changeset/calm-passkeys-views.md b/.changeset/calm-passkeys-views.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/calm-passkeys-views.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
new file mode 100644
index 00000000000..9266d3fdf6b
--- /dev/null
+++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
@@ -0,0 +1,195 @@
+import { act, render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { MosaicProvider } from '../../../MosaicProvider';
+import { UserProfilePasskeysSectionView } from '../user-profile-passkeys-section.view';
+
+const passkeys = [
+  { id: 'laptop', name: 'MacBook' },
+  { id: 'phone', name: 'iPhone' },
+];
+
+describe('passkeys section', () => {
+  it('confirms the selected passkey and returns focus on cancellation', async () => {
+    const user = userEvent.setup();
+    const onRemove = vi.fn();
+    render(
+      <MosaicProvider>
+        <UserProfilePasskeysSectionView
+          passkeys={passkeys}
+          onRemove={onRemove}
+        />
+      </MosaicProvider>,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Manage MacBook' }));
+    await user.click(screen.getByRole('menuitem', { name: 'Remove passkey' }));
+    expect(screen.getByRole('dialog')).toHaveAccessibleDescription('MacBook will be removed from this account.');
+    expect(onRemove).not.toHaveBeenCalled();
+    await user.click(screen.getByRole('button', { name: 'Cancel' }));
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    expect(screen.getByRole('button', { name: 'Manage MacBook' })).toHaveFocus();
+
+    await user.click(screen.getByRole('button', { name: 'Manage iPhone' }));
+    await user.click(screen.getByRole('menuitem', { name: 'Remove passkey' }));
+    const dialog = screen.getByRole('dialog');
+    expect(dialog).toHaveAccessibleDescription('iPhone will be removed from this account.');
+    await user.click(within(dialog).getByRole('button', { name: 'Remove', exact: true }));
+    expect(onRemove).toHaveBeenCalledExactlyOnceWith('phone');
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  });
+  it('renames through a prefilled form, preserves the draft after failure, and retries', async () => {
+    const user = userEvent.setup();
+    const onRename = vi.fn().mockRejectedValueOnce(new Error('Try again')).mockResolvedValueOnce(undefined);
+    render(
+      <MosaicProvider>
+        <UserProfilePasskeysSectionView
+          passkeys={passkeys}
+          onRename={onRename}
+        />
+      </MosaicProvider>,
+    );
+    await user.click(screen.getByRole('button', { name: 'Manage MacBook' }));
+    await user.click(screen.getByRole('menuitem', { name: 'Rename' }));
+    const input = screen.getByRole('textbox', { name: 'Passkey name' });
+    expect(input).toHaveValue('MacBook');
+    await waitFor(() => expect(input).toHaveFocus());
+    expect(screen.getByRole('button', { name: 'Save' })).toHaveAttribute('aria-disabled', 'true');
+    await user.clear(input);
+    await user.type(input, 'Work laptop');
+    await user.click(screen.getByRole('button', { name: 'Save' }));
+    expect(await screen.findByRole('alert')).toHaveTextContent('Try again');
+    expect(input).toHaveValue('Work laptop');
+    await user.click(screen.getByRole('button', { name: 'Save' }));
+    expect(onRename).toHaveBeenLastCalledWith('laptop', 'Work laptop');
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  });
+
+  it('hides an unavailable section and keeps Add available with an empty list or creation error', async () => {
+    const user = userEvent.setup();
+    const onAdd = vi.fn();
+    const { rerender } = render(
+      <UserProfilePasskeysSectionView
+        sectionTitle='Authentication'
+        passkeys={[]}
+      />,
+    );
+    expect(screen.queryByRole('heading', { name: 'Authentication' })).not.toBeInTheDocument();
+    expect(screen.queryByText('Passkeys')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Add passkey' })).not.toBeInTheDocument();
+    rerender(
+      <UserProfilePasskeysSectionView
+        passkeys={[]}
+        onAdd={onAdd}
+        addError='Could not create passkey'
+      />,
+    );
+    expect(screen.getByRole('alert')).toHaveTextContent('Could not create passkey');
+    await user.click(screen.getByRole('button', { name: 'Add passkey' }));
+    expect(onAdd).toHaveBeenCalledOnce();
+  });
+
+  it('finishes removing the final passkey after pending work and keeps Add available', async () => {
+    const user = userEvent.setup();
+    let finish = () => {};
+    const pending = new Promise<void>(resolve => {
+      finish = resolve;
+    });
+    function Example() {
+      const [items, setItems] = useState([passkeys[0]]);
+      return (
+        <MosaicProvider>
+          <UserProfilePasskeysSectionView
+            passkeys={items}
+            onAdd={() => setItems([passkeys[0]])}
+            onRemove={async () => {
+              await pending;
+              setItems([]);
+            }}
+          />
+        </MosaicProvider>
+      );
+    }
+    render(<Example />);
+    await user.click(screen.getByRole('button', { name: 'Manage MacBook' }));
+    await user.click(screen.getByRole('menuitem', { name: 'Remove passkey' }));
+    await user.click(screen.getByRole('button', { name: 'Remove', exact: true }));
+    expect(screen.getByRole('button', { name: 'Remove', exact: true })).toHaveAttribute('aria-busy', 'true');
+    await act(async () => {
+      finish();
+      await pending;
+    });
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    expect(screen.queryByText('MacBook')).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Add passkey' }));
+    expect(screen.getByText('MacBook')).toBeVisible();
+  });
+
+  it('retries removal for the same passkey after a failure', async () => {
+    const user = userEvent.setup();
+    const onRemove = vi.fn().mockRejectedValueOnce(new Error('Removal failed')).mockResolvedValueOnce(undefined);
+    render(
+      <MosaicProvider>
+        <UserProfilePasskeysSectionView
+          passkeys={passkeys}
+          onRemove={onRemove}
+        />
+      </MosaicProvider>,
+    );
+    await user.click(screen.getByRole('button', { name: 'Manage iPhone' }));
+    await user.click(screen.getByRole('menuitem', { name: 'Remove passkey' }));
+    await user.click(screen.getByRole('button', { name: 'Remove', exact: true }));
+    expect(await screen.findByRole('alert')).toHaveTextContent('Removal failed');
+    await user.click(screen.getByRole('button', { name: 'Remove', exact: true }));
+    expect(onRemove.mock.calls).toEqual([['phone'], ['phone']]);
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  });
+  it('preserves literal passkey names in menu labels and removal copy', async () => {
+    const user = userEvent.setup();
+    render(
+      <MosaicProvider>
+        <UserProfilePasskeysSectionView
+          passkeys={[{ id: 'special', name: '$& laptop' }]}
+          onRemove={vi.fn()}
+        />
+      </MosaicProvider>,
+    );
+    await user.click(screen.getByRole('button', { name: 'Manage $& laptop' }));
+    await user.click(screen.getByRole('menuitem', { name: 'Remove passkey' }));
+    expect(screen.getByRole('dialog')).toHaveAccessibleDescription('$& laptop will be removed from this account.');
+  });
+
+  it('keeps rename pending until saving finishes', async () => {
+    const user = userEvent.setup();
+    let finish = () => {};
+    const onRename = vi.fn(
+      () =>
+        new Promise<void>(resolve => {
+          finish = resolve;
+        }),
+    );
+    render(
+      <MosaicProvider>
+        <UserProfilePasskeysSectionView
+          passkeys={passkeys}
+          onRename={onRename}
+        />
+      </MosaicProvider>,
+    );
+    await user.click(screen.getByRole('button', { name: 'Manage MacBook' }));
+    await user.click(screen.getByRole('menuitem', { name: 'Rename' }));
+    const input = screen.getByRole('textbox', { name: 'Passkey name' });
+    await user.clear(input);
+    await user.type(input, 'Work laptop');
+    await user.click(screen.getByRole('button', { name: 'Save' }));
+    expect(input).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Save' })).toHaveAttribute('aria-busy', 'true');
+    await user.keyboard('{Escape}');
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    await act(() => finish());
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    expect(onRename).toHaveBeenCalledExactlyOnceWith('laptop', 'Work laptop');
+  });
+});
diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx
index 1d3d5109cdd..69ec7ff3cca 100644
--- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx
+++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx
@@ -109,6 +109,8 @@ describe('UserProfileSecurityPanelView', () => {
     await user.click(screen.getByRole('menuitem', { name: 'Rename' }));
     await user.click(screen.getByRole('button', { name: 'Manage Passkey' }));
     await user.click(screen.getByRole('menuitem', { name: 'Remove passkey' }));
+    await user.click(within(screen.getByRole('dialog')).getByRole('button', { name: 'Remove', exact: true }));
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
 
     const otherDevices = screen.getByRole('region', { name: 'Other devices' });
     await user.click(within(otherDevices).getByRole('button', { name: 'Manage Safari on iOS' }));
diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
new file mode 100644
index 00000000000..ed79eb11400
--- /dev/null
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
@@ -0,0 +1,98 @@
+import { useMemo, useState } from 'react';
+
+import { Dialog } from '../../components/dialog';
+import { Section } from '../../components/section';
+import type { UserProfileMenuAction } from './user-profile-action-menu';
+import { UserProfileActionMenu } from './user-profile-action-menu';
+import { userProfilePasskeysMessages as m } from './user-profile-passkeys-section.messages';
+import type { UserProfilePasskey } from './user-profile-passkeys-section.view';
+import { UserProfileRenamePasskeyDialog } from './user-profile-rename-passkey.dialog';
+import { UserProfileSecurityIcon } from './user-profile-security-icon';
+
+export function UserProfilePasskeyRowView({
+  passkey,
+  onRename,
+  onManage,
+  onRemove,
+}: {
+  passkey: UserProfilePasskey;
+  onRename?: (id: string, name: string) => void | Promise<void>;
+  onManage?: (id: string) => void;
+  onRemove?: () => void;
+}) {
+  const renameDialog = useMemo(() => Dialog.createHandle(), []);
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState(passkey.name);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string>();
+
+  const onOpenChange = (nextOpen: boolean) => {
+    if (isSaving) {
+      return;
+    }
+    if (nextOpen) {
+      setName(passkey.name);
+      setError(undefined);
+    }
+    setOpen(nextOpen);
+  };
+  const onSubmit = async () => {
+    if (!onRename || isSaving || name.length < 2 || name === passkey.name) {
+      return;
+    }
+    setIsSaving(true);
+    setError(undefined);
+    try {
+      await onRename(passkey.id, name);
+      setOpen(false);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : m.saveError);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const actions: UserProfileMenuAction[] = [];
+  if (onRename) {
+    actions.push({ label: m.rename, onClick: () => renameDialog.open(undefined) });
+  } else if (onManage) {
+    actions.push({ label: m.rename, onClick: () => onManage(passkey.id) });
+  }
+  if (onRemove) {
+    actions.push({ label: m.removeAction, color: 'negative', onClick: onRemove });
+  }
+
+  return (
+    <>
+      <Section.Item>
+        <UserProfileSecurityIcon name='passkey' />
+        <Section.Content>
+          <Section.Label>{passkey.name}</Section.Label>
+          {passkey.createdAtLabel ? <Section.Description>{passkey.createdAtLabel}</Section.Description> : null}
+          {passkey.lastUsedAtLabel ? <Section.Description>{passkey.lastUsedAtLabel}</Section.Description> : null}
+        </Section.Content>
+        {actions.length > 0 ? (
+          <Section.Actions>
+            <UserProfileActionMenu
+              actions={actions}
+              label={m.manage.replace('{name}', () => passkey.name)}
+            />
+          </Section.Actions>
+        ) : null}
+      </Section.Item>
+      {onRename ? (
+        <UserProfileRenamePasskeyDialog
+          handle={renameDialog}
+          open={open}
+          onOpenChange={onOpenChange}
+          name={name}
+          onNameChange={setName}
+          isSaving={isSaving}
+          error={error}
+          canSave={name.length > 1 && name !== passkey.name}
+          onSubmit={() => void onSubmit()}
+        />
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.messages.ts b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.messages.ts
new file mode 100644
index 00000000000..aade8051ad5
--- /dev/null
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.messages.ts
@@ -0,0 +1,17 @@
+export const userProfilePasskeysMessages = {
+  label: 'Passkeys',
+  add: 'Add passkey',
+  empty: 'No passkeys added',
+  manage: 'Manage {name}',
+  rename: 'Rename',
+  renameTitle: 'Rename passkey',
+  renameDescription: 'You can change the passkey name to make it easier to find.',
+  nameLabel: 'Passkey name',
+  save: 'Save',
+  cancel: 'Cancel',
+  saveError: 'Something went wrong. Please try again.',
+  removeAction: 'Remove passkey',
+  removeTitle: 'Remove passkey',
+  removeDescription: '{name} will be removed from this account.',
+  remove: 'Remove',
+};
diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
index d9f744fbe11..079176a671b 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
@@ -1,8 +1,11 @@
+import { useMemo } from 'react';
+
+import { Confirmation } from '../../blocks/confirmation';
+import { Button } from '../../components/button';
+import { Icon } from '../../components/icon';
 import { Section } from '../../components/section';
-import type { UserProfileMenuAction } from './user-profile-action-menu';
-import { UserProfileActionMenu } from './user-profile-action-menu';
-import { UserProfileSecurityIcon } from './user-profile-security-icon';
-import { UserProfileSecurityList } from './user-profile-security-list';
+import { UserProfilePasskeyRowView } from './user-profile-passkey-row.view';
+import { userProfilePasskeysMessages as m } from './user-profile-passkeys-section.messages';
 
 export interface UserProfilePasskey {
   id: string;
@@ -15,56 +18,88 @@ export interface UserProfilePasskeysSectionViewProps {
   passkeys: UserProfilePasskey[];
   sectionTitle?: string;
   onAdd?: () => void;
+  addError?: string;
+  onRename?: (id: string, name: string) => void | Promise<void>;
   onManage?: (id: string) => void;
-  onRemove?: (id: string) => void;
+  onRemove?: (id: string) => void | Promise<void>;
 }
 
 export function UserProfilePasskeysSectionView({
   passkeys,
   sectionTitle,
   onAdd,
+  addError,
+  onRename,
   onManage,
   onRemove,
 }: UserProfilePasskeysSectionViewProps) {
-  return (
-    <UserProfileSecurityList
-      addLabel='Add passkey'
-      emptyLabel='No passkeys added'
-      hasItems={passkeys.length > 0}
-      label='Passkeys'
-      sectionTitle={sectionTitle}
-      onAdd={onAdd}
-    >
-      {passkeys.map(passkey => {
-        const actions: UserProfileMenuAction[] = [];
+  const removePasskey = useMemo(() => Confirmation.createHandle<UserProfilePasskey>(), []);
 
-        if (onManage) {
-          actions.push({ label: 'Rename', onClick: () => onManage(passkey.id) });
-        }
-        if (onRemove) {
-          actions.push({ label: 'Remove passkey', color: 'negative', onClick: () => onRemove(passkey.id) });
-        }
-
-        return (
-          <Section.Item key={passkey.id}>
-            <UserProfileSecurityIcon name='passkey' />
-            <Section.Content>
-              <Section.Label>{passkey.name}</Section.Label>
-              {passkey.createdAtLabel || passkey.lastUsedAtLabel ? (
-                <Section.Description>
-                  {[passkey.createdAtLabel, passkey.lastUsedAtLabel].filter(Boolean).join(' · ')}
-                </Section.Description>
-              ) : null}
-            </Section.Content>
-            <Section.Actions>
-              <UserProfileActionMenu
-                actions={actions}
-                label={`Manage ${passkey.name}`}
-              />
-            </Section.Actions>
-          </Section.Item>
-        );
-      })}
-    </UserProfileSecurityList>
+  return (
+    <>
+      {passkeys.length > 0 || onAdd ? (
+        <Section.Root aria-label={sectionTitle ? undefined : m.label}>
+          {sectionTitle ? <Section.Title>{sectionTitle}</Section.Title> : null}
+          <Section.Group>
+            <Section.Row>
+              <Section.Item>
+                <Section.Content>
+                  <Section.Label>{m.label}</Section.Label>
+                </Section.Content>
+                {onAdd ? (
+                  <Section.Actions>
+                    <Button
+                      aria-label={m.add}
+                      color='neutral'
+                      size='sm'
+                      variant='outline'
+                      onClick={onAdd}
+                    >
+                      <Icon
+                        name='plus'
+                        placement='inline-start'
+                        size='sm'
+                      />
+                      {m.add}
+                    </Button>
+                  </Section.Actions>
+                ) : null}
+              </Section.Item>
+              {addError ? <Section.Error>{addError}</Section.Error> : null}
+              {passkeys.length > 0 ? (
+                <Section.Items>
+                  {passkeys.map(passkey => (
+                    <UserProfilePasskeyRowView
+                      key={passkey.id}
+                      passkey={passkey}
+                      onRename={onRename}
+                      onManage={onManage}
+                      onRemove={onRemove ? () => removePasskey.open(passkey) : undefined}
+                    />
+                  ))}
+                </Section.Items>
+              ) : (
+                <Section.Items>
+                  <Section.Item>
+                    <Section.Content>
+                      <Section.Description>{m.empty}</Section.Description>
+                    </Section.Content>
+                  </Section.Item>
+                </Section.Items>
+              )}
+            </Section.Row>
+          </Section.Group>
+        </Section.Root>
+      ) : null}
+      {onRemove ? (
+        <Confirmation
+          handle={removePasskey}
+          title={m.removeTitle}
+          description={passkey => m.removeDescription.replace('{name}', () => passkey.name)}
+          actionLabel={m.remove}
+          onConfirm={passkey => onRemove(passkey.id)}
+        />
+      ) : null}
+    </>
   );
 }
diff --git a/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.dialog.tsx b/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.dialog.tsx
new file mode 100644
index 00000000000..498fbde019d
--- /dev/null
+++ b/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.dialog.tsx
@@ -0,0 +1,116 @@
+import { useId, useRef } from 'react';
+
+import { Banner } from '../../components/banner';
+import { Button, SubmitButton } from '../../components/button';
+import { Card } from '../../components/card';
+import type { DialogHandle } from '../../components/dialog';
+import { Dialog } from '../../components/dialog';
+import { Field } from '../../components/field';
+import { Input } from '../../components/input';
+import { userProfilePasskeysMessages as m } from './user-profile-passkeys-section.messages';
+
+export interface UserProfileRenamePasskeyDialogProps {
+  handle: DialogHandle;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  name: string;
+  onNameChange: (name: string) => void;
+  canSave: boolean;
+  isSaving?: boolean;
+  error?: string;
+  onSubmit: () => void;
+}
+
+export function UserProfileRenamePasskeyDialog({
+  handle,
+  open,
+  onOpenChange,
+  name,
+  onNameChange,
+  canSave,
+  isSaving = false,
+  error,
+  onSubmit,
+}: UserProfileRenamePasskeyDialogProps) {
+  const formId = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
+  return (
+    <Dialog.Root
+      handle={handle}
+      open={open}
+      onOpenChange={onOpenChange}
+      closedBy='closerequest'
+    >
+      <Dialog.Popup
+        size='card'
+        initialFocus={inputRef}
+      >
+        <Card.Root
+          elevation='overlay'
+          renderBranding={false}
+        >
+          <Card.Header>
+            <Card.Title>{m.renameTitle}</Card.Title>
+            <Card.Description>{m.renameDescription}</Card.Description>
+          </Card.Header>
+          <Card.Content
+            render={
+              <form
+                id={formId}
+                onSubmit={event => {
+                  event.preventDefault();
+                  if (canSave && !isSaving) {
+                    onSubmit();
+                  }
+                }}
+              />
+            }
+          >
+            {error ? (
+              <Banner.Root
+                role='alert'
+                color='negative'
+              >
+                <Banner.Label>{error}</Banner.Label>
+              </Banner.Root>
+            ) : null}
+            <Field.Root
+              required
+              disabled={isSaving}
+            >
+              <Field.Label>{m.nameLabel}</Field.Label>
+              <Input
+                ref={inputRef}
+                autoComplete='off'
+                value={name}
+                onChange={event => onNameChange(event.target.value)}
+              />
+            </Field.Root>
+          </Card.Content>
+          <Card.Footer>
+            <Dialog.Close
+              render={
+                <Button
+                  variant='outline'
+                  fullWidth
+                  disabled={isSaving}
+                >
+                  {m.cancel}
+                </Button>
+              }
+            />
+            <SubmitButton
+              form={formId}
+              fullWidth
+              isPending={isSaving}
+              disabled={!canSave}
+              focusableWhenDisabled
+            >
+              {m.save}
+            </SubmitButton>
+          </Card.Footer>
+        </Card.Root>
+      </Dialog.Popup>
+    </Dialog.Root>
+  );
+}

From 243827f3ec0c12ac38ba5f8cbe9a409ae8ae8beb Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Wed, 16 Sep 2026 00:19:22 -0600
Subject: [PATCH 02/25] docs(swingset): demonstrate passkey management states

---
 packages/swingset/src/lib/registry.ts         |  2 +
 .../stories/user-profile-passkeys-section.mdx | 49 ++++++++---
 .../user-profile-passkeys-section.stories.tsx | 82 ++++++++++++-------
 3 files changed, 89 insertions(+), 44 deletions(-)

diff --git a/packages/swingset/src/lib/registry.ts b/packages/swingset/src/lib/registry.ts
index 0cf1cd1eda3..b0acccd1552 100644
--- a/packages/swingset/src/lib/registry.ts
+++ b/packages/swingset/src/lib/registry.ts
@@ -304,6 +304,7 @@ import {
 import {
   Default as UserProfilePasskeysSectionDefault,
   Empty as UserProfilePasskeysSectionEmpty,
+  RecoverableErrors as UserProfilePasskeysSectionRecoverableErrors,
   meta as userProfilePasskeysSectionMeta,
 } from '../stories/user-profile-passkeys-section.stories';
 import {
@@ -651,6 +652,7 @@ const userProfilePasskeysSectionModule: StoryModule = {
   meta: userProfilePasskeysSectionMeta,
   Default: UserProfilePasskeysSectionDefault,
   Empty: UserProfilePasskeysSectionEmpty,
+  RecoverableErrors: UserProfilePasskeysSectionRecoverableErrors,
 };
 const userProfileMfaSectionModule: StoryModule = {
   meta: userProfileMfaSectionMeta,
diff --git a/packages/swingset/src/stories/user-profile-passkeys-section.mdx b/packages/swingset/src/stories/user-profile-passkeys-section.mdx
index b4ba13cebb8..2602f696c6b 100644
--- a/packages/swingset/src/stories/user-profile-passkeys-section.mdx
+++ b/packages/swingset/src/stories/user-profile-passkeys-section.mdx
@@ -2,16 +2,39 @@ import * as Stories from './user-profile-passkeys-section.stories';
 
 # UserProfilePasskeysSection
 
-Passkey management composed with the shared Security list treatment.
-
-<Story
-  name='Default'
-  storyModule={Stories}
-  composition={[{ name: 'Section', href: '/components/section', layer: 'Components' }]}
-/>
-
-<Story
-  name='Empty'
-  storyModule={Stories}
-  composition={[{ name: 'Section', href: '/components/section', layer: 'Components' }]}
-/>
+Manage passkey names and confirm removal. These examples mock creation; browser and authenticator interactions belong to the controller.
+
+## Playground
+
+<Story name='Default' storyModule={Stories} composition={[
+  { name: 'Section', href: '/components/section', layer: 'Components' },
+  { name: 'Button', href: '/components/button', layer: 'Components' },
+  { name: 'Menu', href: '/components/menu', layer: 'Components' },
+  { name: 'Dialog', href: '/components/dialog', layer: 'Components' },
+  { name: 'Confirmation', href: '/blocks/confirmation', layer: 'Blocks' },
+]} />
+
+## Props
+
+| Prop           | Type                                                  | Default      | Description                                                      |
+| -------------- | ----------------------------------------------------- | ------------ | ---------------------------------------------------------------- |
+| `passkeys`     | `UserProfilePasskey[]`                                | — (required) | Names and formatted creation/last-used labels.                   |
+| `sectionTitle` | `string`                                              | —            | Optional surrounding section heading.                            |
+| `onAdd`        | `() => void`                                          | —            | Shows Add when supplied.                                         |
+| `addError`     | `string`                                              | —            | Inline creation error.                                           |
+| `onRename`     | `(id: string, name: string) => void \| Promise<void>` | —            | Resolve to close; reject with an Error to display the failure.   |
+| `onRemove`     | `(id: string) => void \| Promise<void>`               | —            | Shared confirmation awaits removal and displays rejected errors. |
+
+## Usage
+
+### No passkeys yet
+
+Add remains available after removing the final passkey. With neither passkeys nor an Add callback, the section is hidden.
+
+<Story name='Empty' storyModule={Stories} />
+
+### Recoverable errors
+
+The first Add, Rename, and Remove attempt fails. Retry completes the action; saving and removal use a short simulated delay.
+
+<Story name='RecoverableErrors' storyModule={Stories} />
diff --git a/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx b/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx
index 42e928ae9dd..dd6fce632bf 100644
--- a/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx
+++ b/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx
@@ -1,6 +1,7 @@
 import type { UserProfilePasskey } from '@clerk/mosaic/features/user-profile/user-profile-passkeys-section.view';
 import { UserProfilePasskeysSectionView } from '@clerk/mosaic/features/user-profile/user-profile-passkeys-section.view';
-import { useState } from 'react';
+import type { ReactElement } from 'react';
+import { useRef, useState } from 'react';
 
 import type { StoryMeta } from '@/lib/types';
 
@@ -15,46 +16,65 @@ export const meta: StoryMeta = {
   source: 'packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx',
 };
 
-export function Default() {
-  const [passkeys, setPasskeys] = useState<UserProfilePasskey[]>([
-    {
-      id: 'passkey',
-      name: 'Passkey',
-      createdAtLabel: 'Created today at 10:12 PM',
-      lastUsedAtLabel: 'Last used 1h ago',
-    },
-  ]);
+function PasskeysExample({ empty = false, failOnce = false }: { empty?: boolean; failOnce?: boolean }): ReactElement {
+  const [passkeys, setPasskeys] = useState<UserProfilePasskey[]>(
+    empty
+      ? []
+      : [
+          { id: 'laptop', name: 'MacBook', createdAtLabel: 'Created today', lastUsedAtLabel: 'Last used 1 hour ago' },
+          { id: 'phone', name: 'iPhone', createdAtLabel: 'Created yesterday' },
+        ],
+  );
+  const [addError, setAddError] = useState<string>();
+  const failures = useRef(new Set<string>());
+  const nextId = useRef(1);
+
+  const attempt = async (action: string) => {
+    await new Promise(resolve => setTimeout(resolve, 600));
+    if (failOnce && !failures.current.has(action)) {
+      failures.current.add(action);
+      throw new Error('Something went wrong. Please try again.');
+    }
+  };
 
   return (
     <UserProfilePasskeysSectionView
       passkeys={passkeys}
       sectionTitle='Authentication'
-      onAdd={() =>
+      addError={addError}
+      onAdd={() => {
+        if (failOnce && !failures.current.has('add')) {
+          failures.current.add('add');
+          setAddError('Could not create a passkey. Please try again.');
+          return;
+        }
+        setAddError(undefined);
+        const id = nextId.current++;
         setPasskeys(current => [
           ...current,
-          { id: `passkey-${Date.now()}`, name: `Passkey ${current.length + 1}`, createdAtLabel: 'Created just now' },
-        ])
-      }
-      onManage={() => undefined}
-      onRemove={id => setPasskeys(current => current.filter(passkey => passkey.id !== id))}
+          { id: `new-${id}`, name: `New passkey ${id}`, createdAtLabel: 'Created just now' },
+        ]);
+      }}
+      onRename={async (id, name) => {
+        await attempt('rename');
+        setPasskeys(current => current.map(passkey => (passkey.id === id ? { ...passkey, name } : passkey)));
+      }}
+      onRemove={async id => {
+        await attempt('remove');
+        setPasskeys(current => current.filter(passkey => passkey.id !== id));
+      }}
     />
   );
 }
 
-export function Empty() {
-  const [passkeys, setPasskeys] = useState<UserProfilePasskey[]>([]);
+export function Default(): ReactElement {
+  return <PasskeysExample />;
+}
 
-  return (
-    <UserProfilePasskeysSectionView
-      passkeys={passkeys}
-      sectionTitle='Authentication'
-      onAdd={() =>
-        setPasskeys(current => [
-          ...current,
-          { id: `passkey-${Date.now()}`, name: `Passkey ${current.length + 1}`, createdAtLabel: 'Created just now' },
-        ])
-      }
-      onRemove={id => setPasskeys(current => current.filter(passkey => passkey.id !== id))}
-    />
-  );
+export function Empty(): ReactElement {
+  return <PasskeysExample empty />;
+}
+
+export function RecoverableErrors(): ReactElement {
+  return <PasskeysExample failOnce />;
 }

From 1646f9b249a819d2d4427439aec3a672aeac07bf Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Wed, 16 Sep 2026 00:25:46 -0600
Subject: [PATCH 03/25] fix(ui): wire passkey actions through composed profile
 views

---
 .../user-profile-security-panel.view.test.tsx | 11 +++-
 .../user-profile-security-panel.view.tsx      |  8 ++-
 .../stories/fixtures/user-profile-passkeys.ts | 61 +++++++++++++++++++
 .../src/stories/fixtures/user-profile.ts      | 24 +++-----
 .../user-profile-passkeys-section.stories.tsx | 49 ++-------------
 .../user-profile-security-panel.stories.tsx   | 25 +++-----
 6 files changed, 94 insertions(+), 84 deletions(-)
 create mode 100644 packages/swingset/src/stories/fixtures/user-profile-passkeys.ts

diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx
index 69ec7ff3cca..ffdbc5646fe 100644
--- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx
+++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx
@@ -77,7 +77,7 @@ describe('UserProfileSecurityPanelView', () => {
 
   it('forwards security actions', async () => {
     const onAddPasskey = vi.fn();
-    const onManagePasskey = vi.fn();
+    const onRenamePasskey = vi.fn(() => Promise.resolve());
     const onRemovePasskey = vi.fn();
     const onAddMfaMethod = vi.fn();
     const onSignOutDevice = vi.fn();
@@ -91,7 +91,7 @@ describe('UserProfileSecurityPanelView', () => {
         { id: 'backup_1', type: 'backup-codes' },
       ],
       onAddPasskey,
-      onManagePasskey,
+      onRenamePasskey,
       onRemovePasskey,
       onAddMfaMethod,
       onSignOutDevice,
@@ -107,6 +107,11 @@ describe('UserProfileSecurityPanelView', () => {
 
     await user.click(screen.getByRole('button', { name: 'Manage Passkey' }));
     await user.click(screen.getByRole('menuitem', { name: 'Rename' }));
+    const passkeyName = screen.getByRole('textbox', { name: 'Passkey name' });
+    await user.clear(passkeyName);
+    await user.type(passkeyName, 'Work laptop');
+    await user.click(screen.getByRole('button', { name: 'Save' }));
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
     await user.click(screen.getByRole('button', { name: 'Manage Passkey' }));
     await user.click(screen.getByRole('menuitem', { name: 'Remove passkey' }));
     await user.click(within(screen.getByRole('dialog')).getByRole('button', { name: 'Remove', exact: true }));
@@ -125,7 +130,7 @@ describe('UserProfileSecurityPanelView', () => {
     await user.click(within(deleteDialog).getByRole('button', { name: 'Delete account' }));
 
     expect(onAddPasskey).toHaveBeenCalledOnce();
-    expect(onManagePasskey).toHaveBeenCalledWith('passkey_1');
+    expect(onRenamePasskey).toHaveBeenCalledWith('passkey_1', 'Work laptop');
     expect(onRemovePasskey).toHaveBeenCalledWith('passkey_1');
     expect(onAddMfaMethod).toHaveBeenCalledWith('authenticator');
     expect(onSignOutDevice).toHaveBeenCalledWith('mobile');
diff --git a/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
index 526c14eeb83..a4bceb30cfb 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
@@ -41,8 +41,10 @@ export interface UserProfileSecurityPanelViewProps
   mfaMethods?: UserProfileMfaMethod[];
   devices?: UserProfileDevice[];
   onAddPasskey?: () => void;
+  addPasskeyError?: string;
+  onRenamePasskey?: (id: string, name: string) => void | Promise<void>;
   onManagePasskey?: (id: string) => void;
-  onRemovePasskey?: (id: string) => void;
+  onRemovePasskey?: (id: string) => void | Promise<void>;
   onAddMfaMethod?: (type: UserProfileMfaAddableMethod) => void;
   onRegenerateBackupCodes?: () => void;
   onRemoveMfaMethod?: (id: string) => void;
@@ -59,6 +61,8 @@ export function UserProfileSecurityPanelView({
   devices,
   onSubmitPassword,
   onAddPasskey,
+  addPasskeyError,
+  onRenamePasskey,
   onManagePasskey,
   onRemovePasskey,
   onAddMfaMethod,
@@ -90,6 +94,8 @@ export function UserProfileSecurityPanelView({
                 passkeys={passkeys}
                 sectionTitle={showPassword ? undefined : 'Authentication'}
                 onAdd={onAddPasskey}
+                addError={addPasskeyError}
+                onRename={onRenamePasskey}
                 onManage={onManagePasskey}
                 onRemove={onRemovePasskey}
               />
diff --git a/packages/swingset/src/stories/fixtures/user-profile-passkeys.ts b/packages/swingset/src/stories/fixtures/user-profile-passkeys.ts
new file mode 100644
index 00000000000..710aa48e575
--- /dev/null
+++ b/packages/swingset/src/stories/fixtures/user-profile-passkeys.ts
@@ -0,0 +1,61 @@
+import type { UserProfilePasskey } from '@clerk/ui/mosaic/features/user-profile/user-profile-passkeys-section.view';
+import { useRef, useState } from 'react';
+
+interface PasskeysFixture {
+  passkeys: UserProfilePasskey[];
+  addError: string | undefined;
+  onAdd: () => void;
+  onRename: (id: string, name: string) => Promise<void>;
+  onRemove: (id: string) => Promise<void>;
+}
+
+export function usePasskeysFixture({
+  empty = false,
+  failOnce = false,
+}: { empty?: boolean; failOnce?: boolean } = {}): PasskeysFixture {
+  const [passkeys, setPasskeys] = useState<UserProfilePasskey[]>(
+    empty
+      ? []
+      : [
+          { id: 'laptop', name: 'MacBook', createdAtLabel: 'Created today', lastUsedAtLabel: 'Last used 1 hour ago' },
+          { id: 'phone', name: 'iPhone', createdAtLabel: 'Created yesterday' },
+        ],
+  );
+  const [addError, setAddError] = useState<string>();
+  const failures = useRef(new Set<string>());
+  const nextId = useRef(1);
+
+  const attempt = async (action: string) => {
+    await new Promise(resolve => setTimeout(resolve, 600));
+    if (failOnce && !failures.current.has(action)) {
+      failures.current.add(action);
+      throw new Error('Something went wrong. Please try again.');
+    }
+  };
+
+  return {
+    passkeys,
+    addError,
+    onAdd: () => {
+      if (failOnce && !failures.current.has('add')) {
+        failures.current.add('add');
+        setAddError('Could not create a passkey. Please try again.');
+        return;
+      }
+      setAddError(undefined);
+      const id = nextId.current++;
+      setPasskeys(current => [
+        ...current,
+        { id: `new-${id}`, name: `New passkey ${id}`, createdAtLabel: 'Created just now' },
+      ]);
+    },
+    onRename: async (id, name) => {
+      await attempt('rename');
+      setPasskeys(current => current.map(passkey => (passkey.id === id ? { ...passkey, name } : passkey)));
+    },
+    onRemove: async id => {
+      await attempt('remove');
+      setPasskeys(current => current.filter(passkey => passkey.id !== id));
+    },
+  };
+}
diff --git a/packages/swingset/src/stories/fixtures/user-profile.ts b/packages/swingset/src/stories/fixtures/user-profile.ts
index e3e4f450f82..4c0b3bd0f57 100644
--- a/packages/swingset/src/stories/fixtures/user-profile.ts
+++ b/packages/swingset/src/stories/fixtures/user-profile.ts
@@ -10,7 +10,6 @@ import type {
 } from '@clerk/mosaic/features/user-profile/user-profile-profile-panel.view';
 import type {
   UserProfileMfaMethod,
-  UserProfilePasskey,
 } from '@clerk/mosaic/features/user-profile/user-profile-security-panel.view';
 import { useMemo, useState } from 'react';
 
@@ -22,6 +21,7 @@ import { useConnectedAccountsFixture } from './user-profile-connected-accounts';
 import { useUserProfileEditNameFixture } from './user-profile-edit-name';
 import { useUserProfileEditPasswordFixture } from './user-profile-edit-password';
 import { useUserProfileEditUsernameFixture } from './user-profile-edit-username';
+import { usePasskeysFixture } from './user-profile-passkeys';
 import { useWeb3WalletsFixture } from './user-profile-web3-wallets';
 
 export interface UserProfileFixtureOptions {
@@ -65,14 +65,7 @@ export function useUserProfileFixture({ onAddEmail }: UserProfileFixtureOptions
   const [phones, setPhones] = useState<UserProfilePhone[]>([
     { id: 'phone_1', value: '+1 801-888-8181', isDefault: true, isVerified: true },
   ]);
-  const [passkeys, setPasskeys] = useState<UserProfilePasskey[]>([
-    {
-      id: 'passkey',
-      name: 'MacBook Pro',
-      createdAtLabel: 'Created today at 10:12 PM',
-      lastUsedAtLabel: 'Last used 1h ago',
-    },
-  ]);
+  const passkeys = usePasskeysFixture();
   const [mfaMethods, setMfaMethods] = useState<UserProfileMfaMethod[]>([
     { id: 'sms', type: 'sms', description: '+1 801-888-8181' },
     { id: 'backup', type: 'backup-codes' },
@@ -146,7 +139,9 @@ export function useUserProfileFixture({ onAddEmail }: UserProfileFixtureOptions
     },
     security: {
       ...editPassword,
-      passkeys,
+      passkeys: passkeys.passkeys,
+      addPasskeyError: passkeys.addError,
+      onRenamePasskey: passkeys.onRename,
       mfaMethods,
       devices: activeDevices.devices,
       onAddMfaMethod: type =>
@@ -154,16 +149,11 @@ export function useUserProfileFixture({ onAddEmail }: UserProfileFixtureOptions
           ...current,
           { id: `${type}-${Date.now()}`, type, description: type === 'sms' ? '+1 801-555-0100' : undefined },
         ]),
-      onAddPasskey: () =>
-        setPasskeys(current => [
-          ...current,
-          { id: `passkey-${Date.now()}`, name: `Passkey ${current.length + 1}`, createdAtLabel: 'Created just now' },
-        ]),
+      onAddPasskey: passkeys.onAdd,
       onDeleteAccount: () => Promise.resolve(),
-      onManagePasskey: () => undefined,
       onRegenerateBackupCodes: () => undefined,
       onRemoveMfaMethod: id => setMfaMethods(current => current.filter(method => method.id !== id)),
-      onRemovePasskey: id => setPasskeys(current => current.filter(passkey => passkey.id !== id)),
+      onRemovePasskey: passkeys.onRemove,
       onSignOutAllOtherDevices: activeDevices.onSignOutAllOtherDevices,
       onSignOutDevice: activeDevices.onSignOutDevice,
     },
diff --git a/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx b/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx
index dd6fce632bf..f8f3a4445a6 100644
--- a/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx
+++ b/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx
@@ -1,10 +1,10 @@
-import type { UserProfilePasskey } from '@clerk/mosaic/features/user-profile/user-profile-passkeys-section.view';
 import { UserProfilePasskeysSectionView } from '@clerk/mosaic/features/user-profile/user-profile-passkeys-section.view';
 import type { ReactElement } from 'react';
-import { useRef, useState } from 'react';
 
 import type { StoryMeta } from '@/lib/types';
 
+import { usePasskeysFixture } from './fixtures/user-profile-passkeys';
+
 export { default as __source } from './user-profile-passkeys-section.stories?raw';
 
 export const meta: StoryMeta = {
@@ -17,52 +17,11 @@ export const meta: StoryMeta = {
 };
 
 function PasskeysExample({ empty = false, failOnce = false }: { empty?: boolean; failOnce?: boolean }): ReactElement {
-  const [passkeys, setPasskeys] = useState<UserProfilePasskey[]>(
-    empty
-      ? []
-      : [
-          { id: 'laptop', name: 'MacBook', createdAtLabel: 'Created today', lastUsedAtLabel: 'Last used 1 hour ago' },
-          { id: 'phone', name: 'iPhone', createdAtLabel: 'Created yesterday' },
-        ],
-  );
-  const [addError, setAddError] = useState<string>();
-  const failures = useRef(new Set<string>());
-  const nextId = useRef(1);
-
-  const attempt = async (action: string) => {
-    await new Promise(resolve => setTimeout(resolve, 600));
-    if (failOnce && !failures.current.has(action)) {
-      failures.current.add(action);
-      throw new Error('Something went wrong. Please try again.');
-    }
-  };
-
+  const fixture = usePasskeysFixture({ empty, failOnce });
   return (
     <UserProfilePasskeysSectionView
-      passkeys={passkeys}
+      {...fixture}
       sectionTitle='Authentication'
-      addError={addError}
-      onAdd={() => {
-        if (failOnce && !failures.current.has('add')) {
-          failures.current.add('add');
-          setAddError('Could not create a passkey. Please try again.');
-          return;
-        }
-        setAddError(undefined);
-        const id = nextId.current++;
-        setPasskeys(current => [
-          ...current,
-          { id: `new-${id}`, name: `New passkey ${id}`, createdAtLabel: 'Created just now' },
-        ]);
-      }}
-      onRename={async (id, name) => {
-        await attempt('rename');
-        setPasskeys(current => current.map(passkey => (passkey.id === id ? { ...passkey, name } : passkey)));
-      }}
-      onRemove={async id => {
-        await attempt('remove');
-        setPasskeys(current => current.filter(passkey => passkey.id !== id));
-      }}
     />
   );
 }
diff --git a/packages/swingset/src/stories/user-profile-security-panel.stories.tsx b/packages/swingset/src/stories/user-profile-security-panel.stories.tsx
index b89f1db42b9..74cbf99f3b2 100644
--- a/packages/swingset/src/stories/user-profile-security-panel.stories.tsx
+++ b/packages/swingset/src/stories/user-profile-security-panel.stories.tsx
@@ -1,6 +1,5 @@
 import type {
   UserProfileMfaMethod,
-  UserProfilePasskey,
 } from '@clerk/mosaic/features/user-profile/user-profile-security-panel.view';
 import { UserProfileSecurityPanelView } from '@clerk/mosaic/features/user-profile/user-profile-security-panel.view';
 import { useState } from 'react';
@@ -9,6 +8,7 @@ import type { StoryMeta } from '@/lib/types';
 
 import { useUserProfileActiveDevicesFixture } from './fixtures/user-profile-active-devices';
 import { useUserProfileEditPasswordFixture } from './fixtures/user-profile-edit-password';
+import { usePasskeysFixture } from './fixtures/user-profile-passkeys';
 
 export { default as __source } from './user-profile-security-panel.stories?raw';
 
@@ -23,14 +23,7 @@ export const meta: StoryMeta = {
 
 export function Default() {
   const editPassword = useUserProfileEditPasswordFixture();
-  const [passkeys, setPasskeys] = useState<UserProfilePasskey[]>([
-    {
-      id: 'passkey',
-      name: 'Passkey',
-      createdAtLabel: 'Created today at 10:12 PM',
-      lastUsedAtLabel: 'Last used 1h ago',
-    },
-  ]);
+  const passkeys = usePasskeysFixture();
   const [mfaMethods, setMfaMethods] = useState<UserProfileMfaMethod[]>([
     { id: 'sms', type: 'sms', description: '+1 801-888-8181' },
     { id: 'backup', type: 'backup-codes' },
@@ -42,7 +35,9 @@ export function Default() {
       {...editPassword}
       devices={devices.devices}
       mfaMethods={mfaMethods}
-      passkeys={passkeys}
+      passkeys={passkeys.passkeys}
+      addPasskeyError={passkeys.addError}
+      onRenamePasskey={passkeys.onRename}
       onAddMfaMethod={type =>
         setMfaMethods(current => {
           const timestamp = Date.now();
@@ -59,21 +54,15 @@ export function Default() {
           ];
         })
       }
-      onAddPasskey={() =>
-        setPasskeys(current => [
-          ...current,
-          { id: `passkey-${Date.now()}`, name: `Passkey ${current.length + 1}`, createdAtLabel: 'Created just now' },
-        ])
-      }
+      onAddPasskey={passkeys.onAdd}
       onDeleteAccount={() => Promise.resolve()}
-      onManagePasskey={() => undefined}
       onRegenerateBackupCodes={() =>
         setMfaMethods(current =>
           current.map(method => (method.type === 'backup-codes' ? { ...method, description: 'Just now' } : method)),
         )
       }
       onRemoveMfaMethod={id => setMfaMethods(current => current.filter(method => method.id !== id))}
-      onRemovePasskey={id => setPasskeys(current => current.filter(passkey => passkey.id !== id))}
+      onRemovePasskey={passkeys.onRemove}
       onSignOutAllOtherDevices={devices.onSignOutAllOtherDevices}
       onSignOutDevice={devices.onSignOutDevice}
     />

From 760132075316eb2ec9e5060c5ad24967441a77f4 Mon Sep 17 00:00:00 2001
From: Kyle MacDonald <kyle@clerk.dev>
Date: Wed, 16 Sep 2026 10:42:58 -0400
Subject: [PATCH 04/25] fix(swingset): sort passkey story imports in registry

---
 packages/swingset/src/lib/registry.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/swingset/src/lib/registry.ts b/packages/swingset/src/lib/registry.ts
index b0acccd1552..50c07c5cedc 100644
--- a/packages/swingset/src/lib/registry.ts
+++ b/packages/swingset/src/lib/registry.ts
@@ -304,8 +304,8 @@ import {
 import {
   Default as UserProfilePasskeysSectionDefault,
   Empty as UserProfilePasskeysSectionEmpty,
-  RecoverableErrors as UserProfilePasskeysSectionRecoverableErrors,
   meta as userProfilePasskeysSectionMeta,
+  RecoverableErrors as UserProfilePasskeysSectionRecoverableErrors,
 } from '../stories/user-profile-passkeys-section.stories';
 import {
   Default as UserProfilePasswordSectionDefault,

From 785309e86278584655644b36055dbb1b9bbc22c5 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Wed, 16 Sep 2026 09:17:27 -0600
Subject: [PATCH 05/25] refactor(ui): use fill for passkey messages

---
 .../features/user-profile/user-profile-passkey-row.view.tsx    | 3 ++-
 .../user-profile/user-profile-passkeys-section.view.tsx        | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
index ed79eb11400..ad245aae66d 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
@@ -2,6 +2,7 @@ import { useMemo, useState } from 'react';
 
 import { Dialog } from '../../components/dialog';
 import { Section } from '../../components/section';
+import { fill } from './user-profile-account-section/user-profile-account-section.messages';
 import type { UserProfileMenuAction } from './user-profile-action-menu';
 import { UserProfileActionMenu } from './user-profile-action-menu';
 import { userProfilePasskeysMessages as m } from './user-profile-passkeys-section.messages';
@@ -75,7 +76,7 @@ export function UserProfilePasskeyRowView({
           <Section.Actions>
             <UserProfileActionMenu
               actions={actions}
-              label={m.manage.replace('{name}', () => passkey.name)}
+              label={fill(m.manage, { name: passkey.name })}
             />
           </Section.Actions>
         ) : null}
diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
index 079176a671b..0d272104ee9 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
@@ -4,6 +4,7 @@ import { Confirmation } from '../../blocks/confirmation';
 import { Button } from '../../components/button';
 import { Icon } from '../../components/icon';
 import { Section } from '../../components/section';
+import { fill } from './user-profile-account-section/user-profile-account-section.messages';
 import { UserProfilePasskeyRowView } from './user-profile-passkey-row.view';
 import { userProfilePasskeysMessages as m } from './user-profile-passkeys-section.messages';
 
@@ -95,7 +96,7 @@ export function UserProfilePasskeysSectionView({
         <Confirmation
           handle={removePasskey}
           title={m.removeTitle}
-          description={passkey => m.removeDescription.replace('{name}', () => passkey.name)}
+          description={passkey => fill(m.removeDescription, { name: passkey.name })}
           actionLabel={m.remove}
           onConfirm={passkey => onRemove(passkey.id)}
         />

From 5558b8983037075537fd8d83f51c83bb42128d52 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Wed, 16 Sep 2026 12:23:16 -0600
Subject: [PATCH 06/25] fix(ui): align passkey rows with the design

---
 .../user-profile-passkey-row.view.tsx         | 31 ++++++++++++++++---
 .../user-profile-passkeys-section.messages.ts |  1 +
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
index ad245aae66d..f1d0d8f7298 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
@@ -1,14 +1,16 @@
+import * as stylex from '@stylexjs/stylex';
 import { useMemo, useState } from 'react';
 
 import { Dialog } from '../../components/dialog';
+import { Icon, IconFrame } from '../../components/icon';
 import { Section } from '../../components/section';
+import { colorVars } from '../../tokens.stylex';
 import { fill } from './user-profile-account-section/user-profile-account-section.messages';
 import type { UserProfileMenuAction } from './user-profile-action-menu';
 import { UserProfileActionMenu } from './user-profile-action-menu';
 import { userProfilePasskeysMessages as m } from './user-profile-passkeys-section.messages';
 import type { UserProfilePasskey } from './user-profile-passkeys-section.view';
 import { UserProfileRenamePasskeyDialog } from './user-profile-rename-passkey.dialog';
-import { UserProfileSecurityIcon } from './user-profile-security-icon';
 
 export function UserProfilePasskeyRowView({
   passkey,
@@ -26,6 +28,10 @@ export function UserProfilePasskeyRowView({
   const [name, setName] = useState(passkey.name);
   const [isSaving, setIsSaving] = useState(false);
   const [error, setError] = useState<string>();
+  const description =
+    passkey.createdAtLabel && passkey.lastUsedAtLabel
+      ? fill(m.details, { createdAt: passkey.createdAtLabel, lastUsedAt: passkey.lastUsedAtLabel })
+      : passkey.createdAtLabel || passkey.lastUsedAtLabel;
 
   const onOpenChange = (nextOpen: boolean) => {
     if (isSaving) {
@@ -66,11 +72,22 @@ export function UserProfilePasskeyRowView({
   return (
     <>
       <Section.Item>
-        <UserProfileSecurityIcon name='passkey' />
+        <Section.Media size='lg'>
+          <IconFrame
+            filled
+            bordered={false}
+          >
+            <Icon
+              aria-hidden
+              name='security-passkey'
+              size='md'
+              xstyle={styles.icon}
+            />
+          </IconFrame>
+        </Section.Media>
         <Section.Content>
           <Section.Label>{passkey.name}</Section.Label>
-          {passkey.createdAtLabel ? <Section.Description>{passkey.createdAtLabel}</Section.Description> : null}
-          {passkey.lastUsedAtLabel ? <Section.Description>{passkey.lastUsedAtLabel}</Section.Description> : null}
+          {description ? <Section.Description>{description}</Section.Description> : null}
         </Section.Content>
         {actions.length > 0 ? (
           <Section.Actions>
@@ -97,3 +114,9 @@ export function UserProfilePasskeyRowView({
     </>
   );
 }
+
+const styles = stylex.create({
+  icon: {
+    color: colorVars['--cl-color-neutral-faded'],
+  },
+});
diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.messages.ts b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.messages.ts
index aade8051ad5..e07f1bfaa48 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.messages.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.messages.ts
@@ -2,6 +2,7 @@ export const userProfilePasskeysMessages = {
   label: 'Passkeys',
   add: 'Add passkey',
   empty: 'No passkeys added',
+  details: '{createdAt} · {lastUsedAt}',
   manage: 'Manage {name}',
   rename: 'Rename',
   renameTitle: 'Rename passkey',

From abb0230b24a52cdf8a24a8196ccb075799388966 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Wed, 16 Sep 2026 13:36:43 -0600
Subject: [PATCH 07/25] fix(ui): align passkeys with shared messages and color
 tokens

---
 .../features/user-profile/user-profile-passkey-row.view.tsx   | 4 ++--
 .../user-profile/user-profile-passkeys-section.view.tsx       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
index f1d0d8f7298..ea327ac4f16 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
@@ -5,7 +5,7 @@ import { Dialog } from '../../components/dialog';
 import { Icon, IconFrame } from '../../components/icon';
 import { Section } from '../../components/section';
 import { colorVars } from '../../tokens.stylex';
-import { fill } from './user-profile-account-section/user-profile-account-section.messages';
+import { fill } from '../../utils/messages';
 import type { UserProfileMenuAction } from './user-profile-action-menu';
 import { UserProfileActionMenu } from './user-profile-action-menu';
 import { userProfilePasskeysMessages as m } from './user-profile-passkeys-section.messages';
@@ -117,6 +117,6 @@ export function UserProfilePasskeyRowView({
 
 const styles = stylex.create({
   icon: {
-    color: colorVars['--cl-color-neutral-faded'],
+    color: colorVars['--cl-color-foreground-secondary'],
   },
 });
diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
index 0d272104ee9..f93cf634c69 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
@@ -4,7 +4,7 @@ import { Confirmation } from '../../blocks/confirmation';
 import { Button } from '../../components/button';
 import { Icon } from '../../components/icon';
 import { Section } from '../../components/section';
-import { fill } from './user-profile-account-section/user-profile-account-section.messages';
+import { fill } from '../../utils/messages';
 import { UserProfilePasskeyRowView } from './user-profile-passkey-row.view';
 import { userProfilePasskeysMessages as m } from './user-profile-passkeys-section.messages';
 

From 7a1fa4a0cb06410fe8c242b06a75499f2210e8b3 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Wed, 16 Sep 2026 14:05:14 -0600
Subject: [PATCH 08/25] refactor(ui): move passkey rename state into a
 controller

---
 .../user-profile-passkey-row.view.tsx         | 44 +--------
 .../user-profile-rename-passkey.controller.ts | 99 +++++++++++++++++++
 2 files changed, 104 insertions(+), 39 deletions(-)
 create mode 100644 packages/mosaic/src/features/user-profile/user-profile-rename-passkey.controller.ts

diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
index ea327ac4f16..12a01dce6e8 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
@@ -1,5 +1,5 @@
 import * as stylex from '@stylexjs/stylex';
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 
 import { Dialog } from '../../components/dialog';
 import { Icon, IconFrame } from '../../components/icon';
@@ -10,6 +10,7 @@ import type { UserProfileMenuAction } from './user-profile-action-menu';
 import { UserProfileActionMenu } from './user-profile-action-menu';
 import { userProfilePasskeysMessages as m } from './user-profile-passkeys-section.messages';
 import type { UserProfilePasskey } from './user-profile-passkeys-section.view';
+import { useUserProfileRenamePasskeyController } from './user-profile-rename-passkey.controller';
 import { UserProfileRenamePasskeyDialog } from './user-profile-rename-passkey.dialog';
 
 export function UserProfilePasskeyRowView({
@@ -24,41 +25,12 @@ export function UserProfilePasskeyRowView({
   onRemove?: () => void;
 }) {
   const renameDialog = useMemo(() => Dialog.createHandle(), []);
-  const [open, setOpen] = useState(false);
-  const [name, setName] = useState(passkey.name);
-  const [isSaving, setIsSaving] = useState(false);
-  const [error, setError] = useState<string>();
+  const controller = useUserProfileRenamePasskeyController({ id: passkey.id, name: passkey.name, onRename });
   const description =
     passkey.createdAtLabel && passkey.lastUsedAtLabel
       ? fill(m.details, { createdAt: passkey.createdAtLabel, lastUsedAt: passkey.lastUsedAtLabel })
       : passkey.createdAtLabel || passkey.lastUsedAtLabel;
 
-  const onOpenChange = (nextOpen: boolean) => {
-    if (isSaving) {
-      return;
-    }
-    if (nextOpen) {
-      setName(passkey.name);
-      setError(undefined);
-    }
-    setOpen(nextOpen);
-  };
-  const onSubmit = async () => {
-    if (!onRename || isSaving || name.length < 2 || name === passkey.name) {
-      return;
-    }
-    setIsSaving(true);
-    setError(undefined);
-    try {
-      await onRename(passkey.id, name);
-      setOpen(false);
-    } catch (cause) {
-      setError(cause instanceof Error ? cause.message : m.saveError);
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
   const actions: UserProfileMenuAction[] = [];
   if (onRename) {
     actions.push({ label: m.rename, onClick: () => renameDialog.open(undefined) });
@@ -100,15 +72,9 @@ export function UserProfilePasskeyRowView({
       </Section.Item>
       {onRename ? (
         <UserProfileRenamePasskeyDialog
+          {...controller}
           handle={renameDialog}
-          open={open}
-          onOpenChange={onOpenChange}
-          name={name}
-          onNameChange={setName}
-          isSaving={isSaving}
-          error={error}
-          canSave={name.length > 1 && name !== passkey.name}
-          onSubmit={() => void onSubmit()}
+          open={controller.isOpen}
         />
       ) : null}
     </>
diff --git a/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.controller.ts b/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.controller.ts
new file mode 100644
index 00000000000..6afbdb9aeb6
--- /dev/null
+++ b/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.controller.ts
@@ -0,0 +1,99 @@
+import { setup } from '../../machine/setup';
+import { useMachine } from '../../machine/useMachine';
+import { userProfilePasskeysMessages as m } from './user-profile-passkeys-section.messages';
+
+interface UserProfileRenamePasskeyContext {
+  passkeyId: string;
+  savedName: string;
+  name: string;
+  onRename: ((id: string, name: string) => void | Promise<void>) | undefined;
+  error: string | undefined;
+}
+
+type UserProfileRenamePasskeyEvent =
+  | { type: 'OPEN' }
+  | { type: 'TYPE'; value: string }
+  | { type: 'SAVE' }
+  | { type: 'CANCEL' };
+
+const { createMachine, assign, fromPromise } = setup<UserProfileRenamePasskeyContext, UserProfileRenamePasskeyEvent>();
+
+function isSaveable(context: UserProfileRenamePasskeyContext): boolean {
+  return Boolean(context.onRename) && context.name.length > 1 && context.name !== context.savedName;
+}
+
+const userProfileRenamePasskeyMachine = createMachine({
+  id: 'renamePasskey',
+  initial: 'idle',
+  context: {
+    passkeyId: '',
+    savedName: '',
+    name: '',
+    onRename: undefined,
+    error: undefined,
+  },
+  states: {
+    idle: {
+      on: {
+        OPEN: {
+          target: 'editing',
+          actions: assign(context => ({ name: context.savedName, error: undefined })),
+        },
+      },
+    },
+    editing: {
+      on: {
+        TYPE: { actions: assign((_, event) => ({ name: event.value })) },
+        SAVE: { target: 'saving', guard: isSaveable, actions: assign(() => ({ error: undefined })) },
+        CANCEL: { target: 'idle', actions: assign(() => ({ error: undefined })) },
+      },
+    },
+    saving: {
+      invoke: fromPromise(async context => context.onRename?.(context.passkeyId, context.name), {
+        onDone: { target: 'idle' },
+        onError: {
+          target: 'editing',
+          actions: assign((_, event) => ({ error: event.error instanceof Error ? event.error.message : m.saveError })),
+        },
+      }),
+    },
+  },
+});
+
+interface UserProfileRenamePasskeyControllerOptions {
+  id: string;
+  name: string;
+  onRename?: (id: string, name: string) => void | Promise<void>;
+}
+
+interface UserProfileRenamePasskeyController {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  name: string;
+  onNameChange: (name: string) => void;
+  onSubmit: () => void;
+  canSave: boolean;
+  isSaving: boolean;
+  error: string | undefined;
+}
+
+export function useUserProfileRenamePasskeyController({
+  id,
+  name,
+  onRename,
+}: UserProfileRenamePasskeyControllerOptions): UserProfileRenamePasskeyController {
+  const [snapshot, send] = useMachine(userProfileRenamePasskeyMachine, {
+    context: { passkeyId: id, savedName: name, onRename },
+  });
+
+  return {
+    isOpen: snapshot.value === 'editing' || snapshot.value === 'saving',
+    onOpenChange: open => send({ type: open ? 'OPEN' : 'CANCEL' }),
+    name: snapshot.context.name,
+    onNameChange: value => send({ type: 'TYPE', value }),
+    onSubmit: () => send({ type: 'SAVE' }),
+    canSave: isSaveable(snapshot.context),
+    isSaving: snapshot.value === 'saving',
+    error: snapshot.context.error,
+  };
+}

From 98ed03f70e457f5acc052c0b1e9809bebe9789a0 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Wed, 16 Sep 2026 14:05:37 -0600
Subject: [PATCH 09/25] fix(ui): align passkey visibility in the security panel

---
 .../user-profile-security-panel.view.test.tsx | 42 +++++++++++-
 .../user-profile-security-panel.styles.ts     |  3 +
 .../user-profile-security-panel.view.tsx      | 65 +++++++++----------
 3 files changed, 76 insertions(+), 34 deletions(-)

diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx
index ffdbc5646fe..9eec8ce2bfb 100644
--- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx
+++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx
@@ -1,4 +1,5 @@
-import { render, screen, waitFor, within } from '@testing-library/react';
+import { createDeferredPromise } from '@clerk/shared/utils';
+import { act, render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
@@ -165,6 +166,45 @@ describe('UserProfileSecurityPanelView', () => {
     expect(screen.queryByRole('menuitem', { name: 'Sign out' })).not.toBeInTheDocument();
   });
 
+  it('keeps the authentication heading on MFA when passkeys are unavailable', () => {
+    renderView({ hasPassword: false, passkeys: [] });
+
+    expect(screen.queryByText('Passkeys')).not.toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Authentication' })).toBeVisible();
+    expect(screen.getByText('2-step verification')).toBeVisible();
+  });
+
+  it('keeps the final passkey confirmation mounted after authentication becomes empty', async () => {
+    const user = userEvent.setup();
+    const removal = createDeferredPromise();
+    const onRemovePasskey = vi.fn(async () => {
+      await removal.promise;
+    });
+    const { rerender } = renderView({ hasPassword: false, mfaMethods: undefined, onRemovePasskey });
+
+    await user.click(screen.getByRole('button', { name: 'Manage Passkey' }));
+    await user.click(screen.getByRole('menuitem', { name: 'Remove passkey' }));
+    await user.click(within(screen.getByRole('dialog')).getByRole('button', { name: 'Remove' }));
+
+    rerender(
+      <MosaicProvider>
+        <UserProfileSecurityPanelView
+          passkeys={[]}
+          onRemovePasskey={onRemovePasskey}
+        />
+      </MosaicProvider>,
+    );
+    expect(screen.queryByRole('heading', { name: 'Authentication' })).not.toBeInTheDocument();
+    expect(screen.getByRole('dialog', { name: 'Remove passkey' })).toBeVisible();
+
+    await act(async () => {
+      removal.resolve();
+      await removal.promise;
+    });
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    expect(screen.queryByText('Passkeys')).not.toBeInTheDocument();
+  });
+
   it('only shows backup codes with another verification method and only allows regeneration', async () => {
     const onRegenerateBackupCodes = vi.fn();
     const onRemoveMfaMethod = vi.fn();
diff --git a/packages/mosaic/src/features/user-profile/user-profile-security-panel.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-security-panel.styles.ts
index a743e88cd52..438797596fa 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-security-panel.styles.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-security-panel.styles.ts
@@ -33,6 +33,9 @@ export const styles = stylex.create({
     flexDirection: 'column',
     width: '100%',
   },
+  emptySectionCards: {
+    display: 'none',
+  },
   sections: {
     gap: space['10'],
     display: 'flex',
diff --git a/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
index a4bceb30cfb..a2963286ca2 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
@@ -73,44 +73,43 @@ export function UserProfileSecurityPanelView({
   onDeleteAccount,
 }: UserProfileSecurityPanelViewProps): ReactElement {
   const showPassword = hasPassword || Boolean(onSubmitPassword) || Boolean(managedBy);
-  const hasAuthentication = showPassword || passkeys !== undefined || mfaMethods !== undefined;
+  const showPasskeys = passkeys !== undefined && (passkeys.length > 0 || Boolean(onAddPasskey));
+  const hasAuthentication = showPassword || showPasskeys || mfaMethods !== undefined;
 
   return (
     <div {...mergeStyleProps(themeProps('user-profile-security-panel'), stylex.props(styles.root))}>
       <Profile.PageTitle>Security</Profile.PageTitle>
       <div {...stylex.props(styles.sections)}>
-        {hasAuthentication ? (
-          <div {...stylex.props(styles.sectionCards)}>
-            {showPassword ? (
-              <UserProfilePasswordSectionView
-                hasPassword={hasPassword}
-                managedBy={managedBy}
-                requiresCurrentPassword={requiresCurrentPassword}
-                onSubmitPassword={onSubmitPassword}
-              />
-            ) : null}
-            {passkeys !== undefined ? (
-              <UserProfilePasskeysSectionView
-                passkeys={passkeys}
-                sectionTitle={showPassword ? undefined : 'Authentication'}
-                onAdd={onAddPasskey}
-                addError={addPasskeyError}
-                onRename={onRenamePasskey}
-                onManage={onManagePasskey}
-                onRemove={onRemovePasskey}
-              />
-            ) : null}
-            {mfaMethods !== undefined ? (
-              <UserProfileMfaSectionView
-                methods={mfaMethods}
-                sectionTitle={!showPassword && passkeys === undefined ? 'Authentication' : undefined}
-                onAdd={onAddMfaMethod}
-                onRegenerateBackupCodes={onRegenerateBackupCodes}
-                onRemove={onRemoveMfaMethod}
-              />
-            ) : null}
-          </div>
-        ) : null}
+        <div {...stylex.props(styles.sectionCards, !hasAuthentication && styles.emptySectionCards)}>
+          {showPassword ? (
+            <UserProfilePasswordSectionView
+              hasPassword={hasPassword}
+              managedBy={managedBy}
+              requiresCurrentPassword={requiresCurrentPassword}
+              onSubmitPassword={onSubmitPassword}
+            />
+          ) : null}
+          {passkeys !== undefined ? (
+            <UserProfilePasskeysSectionView
+              passkeys={passkeys}
+              sectionTitle={showPassword ? undefined : 'Authentication'}
+              onAdd={onAddPasskey}
+              addError={addPasskeyError}
+              onRename={onRenamePasskey}
+              onManage={onManagePasskey}
+              onRemove={onRemovePasskey}
+            />
+          ) : null}
+          {mfaMethods !== undefined ? (
+            <UserProfileMfaSectionView
+              methods={mfaMethods}
+              sectionTitle={!showPassword && !showPasskeys ? 'Authentication' : undefined}
+              onAdd={onAddMfaMethod}
+              onRegenerateBackupCodes={onRegenerateBackupCodes}
+              onRemove={onRemoveMfaMethod}
+            />
+          ) : null}
+        </div>
         {devices ? (
           <UserProfileActiveDevicesSectionView
             devices={devices}

From 729e5d88cf3d6f7452f1ba7cdbf903b976bbd3e5 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Wed, 16 Sep 2026 15:32:39 -0600
Subject: [PATCH 10/25] fix(ui): preserve legacy mosaic passkey section
 visibility

---
 ...ser-profile-passkeys-section.view.test.tsx |  57 ++++++---
 .../user-profile-security-panel.view.test.tsx |  32 +++++-
 .../user-profile-passkeys-section.view.tsx    | 108 +++++++++---------
 .../user-profile-security-panel.view.tsx      |   5 +-
 4 files changed, 126 insertions(+), 76 deletions(-)

diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
index 9266d3fdf6b..4ba4c8141c9 100644
--- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
+++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
@@ -4,14 +4,40 @@ import { useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { MosaicProvider } from '../../../MosaicProvider';
+import type { UserProfilePasskey, UserProfilePasskeysSectionViewProps } from '../user-profile-passkeys-section.view';
 import { UserProfilePasskeysSectionView } from '../user-profile-passkeys-section.view';
 
-const passkeys = [
+const passkeys: UserProfilePasskey[] = [
   { id: 'laptop', name: 'MacBook' },
   { id: 'phone', name: 'iPhone' },
 ];
 
+function renderView(overrides: Partial<UserProfilePasskeysSectionViewProps> = {}) {
+  const props: UserProfilePasskeysSectionViewProps = {
+    passkeys,
+    onAdd: vi.fn(),
+    onRename: vi.fn(),
+    onRemove: vi.fn(),
+    ...overrides,
+  };
+  return render(
+    <MosaicProvider>
+      <UserProfilePasskeysSectionView {...props} />
+    </MosaicProvider>,
+  );
+}
+
 describe('passkeys section', () => {
+  it('hides existing passkeys and their actions when the caller hides the section', () => {
+    renderView({ isVisible: false, sectionTitle: 'Authentication' });
+
+    expect(screen.queryByRole('heading', { name: 'Authentication' })).not.toBeInTheDocument();
+    expect(screen.queryByText('Passkeys')).not.toBeInTheDocument();
+    expect(screen.queryByText('MacBook')).not.toBeInTheDocument();
+    expect(screen.queryByText('iPhone')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
   it('confirms the selected passkey and returns focus on cancellation', async () => {
     const user = userEvent.setup();
     const onRemove = vi.fn();
@@ -67,25 +93,20 @@ describe('passkeys section', () => {
     await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
   });
 
-  it('hides an unavailable section and keeps Add available with an empty list or creation error', async () => {
+  it('keeps an empty section visible when Add is unavailable', () => {
+    renderView({ passkeys: [], onAdd: undefined, sectionTitle: 'Authentication' });
+
+    expect(screen.getByRole('heading', { name: 'Authentication' })).toBeVisible();
+    expect(screen.getByText('Passkeys')).toBeVisible();
+    expect(screen.getByText('No passkeys added')).toBeVisible();
+    expect(screen.queryByRole('button', { name: 'Add passkey' })).not.toBeInTheDocument();
+  });
+
+  it('keeps Add available with an empty list and creation error', async () => {
     const user = userEvent.setup();
     const onAdd = vi.fn();
-    const { rerender } = render(
-      <UserProfilePasskeysSectionView
-        sectionTitle='Authentication'
-        passkeys={[]}
-      />,
-    );
-    expect(screen.queryByRole('heading', { name: 'Authentication' })).not.toBeInTheDocument();
-    expect(screen.queryByText('Passkeys')).not.toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Add passkey' })).not.toBeInTheDocument();
-    rerender(
-      <UserProfilePasskeysSectionView
-        passkeys={[]}
-        onAdd={onAdd}
-        addError='Could not create passkey'
-      />,
-    );
+    renderView({ passkeys: [], onAdd, addError: 'Could not create passkey' });
+
     expect(screen.getByRole('alert')).toHaveTextContent('Could not create passkey');
     await user.click(screen.getByRole('button', { name: 'Add passkey' }));
     expect(onAdd).toHaveBeenCalledOnce();
diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx
index 9eec8ce2bfb..b7a5a9cd665 100644
--- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx
+++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx
@@ -166,15 +166,34 @@ describe('UserProfileSecurityPanelView', () => {
     expect(screen.queryByRole('menuitem', { name: 'Sign out' })).not.toBeInTheDocument();
   });
 
-  it('keeps the authentication heading on MFA when passkeys are unavailable', () => {
-    renderView({ hasPassword: false, passkeys: [] });
+  it('keeps the authentication heading on MFA when existing passkeys are hidden', () => {
+    renderView({
+      hasPassword: false,
+      passkeysVisible: false,
+      onAddPasskey: vi.fn(),
+      onRenamePasskey: vi.fn(),
+      onRemovePasskey: vi.fn(),
+    });
 
     expect(screen.queryByText('Passkeys')).not.toBeInTheDocument();
+    expect(screen.queryByText('Passkey')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Add passkey' })).not.toBeInTheDocument();
     expect(screen.getByRole('heading', { name: 'Authentication' })).toBeVisible();
     expect(screen.getByText('2-step verification')).toBeVisible();
   });
 
-  it('keeps the final passkey confirmation mounted after authentication becomes empty', async () => {
+  it('keeps one authentication heading when passkeys are empty and Add is unavailable', () => {
+    renderView({ hasPassword: false, passkeys: [], onAddPasskey: undefined });
+
+    const section = screen.getByRole('region', { name: 'Authentication' });
+    expect(within(section).getByText('Passkeys')).toBeVisible();
+    expect(within(section).getByText('No passkeys added')).toBeVisible();
+    expect(screen.getByRole('heading', { name: 'Authentication' })).toBeVisible();
+    expect(screen.queryByRole('button', { name: 'Add passkey' })).not.toBeInTheDocument();
+    expect(screen.getByRole('region', { name: '2-step verification' })).toBeVisible();
+  });
+
+  it('keeps the empty section and final passkey confirmation mounted without Add', async () => {
     const user = userEvent.setup();
     const removal = createDeferredPromise();
     const onRemovePasskey = vi.fn(async () => {
@@ -194,7 +213,7 @@ describe('UserProfileSecurityPanelView', () => {
         />
       </MosaicProvider>,
     );
-    expect(screen.queryByRole('heading', { name: 'Authentication' })).not.toBeInTheDocument();
+    expect(screen.getByText('Authentication')).toBeInTheDocument();
     expect(screen.getByRole('dialog', { name: 'Remove passkey' })).toBeVisible();
 
     await act(async () => {
@@ -202,7 +221,10 @@ describe('UserProfileSecurityPanelView', () => {
       await removal.promise;
     });
     await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
-    expect(screen.queryByText('Passkeys')).not.toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Authentication' })).toBeVisible();
+    expect(screen.getByText('Passkeys')).toBeVisible();
+    expect(screen.getByText('No passkeys added')).toBeVisible();
+    expect(screen.queryByRole('button', { name: 'Add passkey' })).not.toBeInTheDocument();
   });
 
   it('only shows backup codes with another verification method and only allows regeneration', async () => {
diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
index f93cf634c69..9b9efbc6a5b 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
@@ -17,6 +17,7 @@ export interface UserProfilePasskey {
 
 export interface UserProfilePasskeysSectionViewProps {
   passkeys: UserProfilePasskey[];
+  isVisible?: boolean;
   sectionTitle?: string;
   onAdd?: () => void;
   addError?: string;
@@ -27,6 +28,7 @@ export interface UserProfilePasskeysSectionViewProps {
 
 export function UserProfilePasskeysSectionView({
   passkeys,
+  isVisible = true,
   sectionTitle,
   onAdd,
   addError,
@@ -36,62 +38,64 @@ export function UserProfilePasskeysSectionView({
 }: UserProfilePasskeysSectionViewProps) {
   const removePasskey = useMemo(() => Confirmation.createHandle<UserProfilePasskey>(), []);
 
+  if (!isVisible) {
+    return null;
+  }
+
   return (
     <>
-      {passkeys.length > 0 || onAdd ? (
-        <Section.Root aria-label={sectionTitle ? undefined : m.label}>
-          {sectionTitle ? <Section.Title>{sectionTitle}</Section.Title> : null}
-          <Section.Group>
-            <Section.Row>
-              <Section.Item>
-                <Section.Content>
-                  <Section.Label>{m.label}</Section.Label>
-                </Section.Content>
-                {onAdd ? (
-                  <Section.Actions>
-                    <Button
-                      aria-label={m.add}
-                      color='neutral'
+      <Section.Root aria-label={sectionTitle ? undefined : m.label}>
+        {sectionTitle ? <Section.Title>{sectionTitle}</Section.Title> : null}
+        <Section.Group>
+          <Section.Row>
+            <Section.Item>
+              <Section.Content>
+                <Section.Label>{m.label}</Section.Label>
+              </Section.Content>
+              {onAdd ? (
+                <Section.Actions>
+                  <Button
+                    aria-label={m.add}
+                    color='neutral'
+                    size='sm'
+                    variant='outline'
+                    onClick={onAdd}
+                  >
+                    <Icon
+                      name='plus'
+                      placement='inline-start'
                       size='sm'
-                      variant='outline'
-                      onClick={onAdd}
-                    >
-                      <Icon
-                        name='plus'
-                        placement='inline-start'
-                        size='sm'
-                      />
-                      {m.add}
-                    </Button>
-                  </Section.Actions>
-                ) : null}
-              </Section.Item>
-              {addError ? <Section.Error>{addError}</Section.Error> : null}
-              {passkeys.length > 0 ? (
-                <Section.Items>
-                  {passkeys.map(passkey => (
-                    <UserProfilePasskeyRowView
-                      key={passkey.id}
-                      passkey={passkey}
-                      onRename={onRename}
-                      onManage={onManage}
-                      onRemove={onRemove ? () => removePasskey.open(passkey) : undefined}
                     />
-                  ))}
-                </Section.Items>
-              ) : (
-                <Section.Items>
-                  <Section.Item>
-                    <Section.Content>
-                      <Section.Description>{m.empty}</Section.Description>
-                    </Section.Content>
-                  </Section.Item>
-                </Section.Items>
-              )}
-            </Section.Row>
-          </Section.Group>
-        </Section.Root>
-      ) : null}
+                    {m.add}
+                  </Button>
+                </Section.Actions>
+              ) : null}
+            </Section.Item>
+            {addError ? <Section.Error>{addError}</Section.Error> : null}
+            {passkeys.length > 0 ? (
+              <Section.Items>
+                {passkeys.map(passkey => (
+                  <UserProfilePasskeyRowView
+                    key={passkey.id}
+                    passkey={passkey}
+                    onRename={onRename}
+                    onManage={onManage}
+                    onRemove={onRemove ? () => removePasskey.open(passkey) : undefined}
+                  />
+                ))}
+              </Section.Items>
+            ) : (
+              <Section.Items>
+                <Section.Item>
+                  <Section.Content>
+                    <Section.Description>{m.empty}</Section.Description>
+                  </Section.Content>
+                </Section.Item>
+              </Section.Items>
+            )}
+          </Section.Row>
+        </Section.Group>
+      </Section.Root>
       {onRemove ? (
         <Confirmation
           handle={removePasskey}
diff --git a/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
index a2963286ca2..cc1ebb7ae7e 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
@@ -38,6 +38,7 @@ export interface UserProfileSecurityPanelViewProps
       'hasPassword' | 'requiresCurrentPassword' | 'managedBy' | 'onSubmitPassword'
     > {
   passkeys?: UserProfilePasskey[];
+  passkeysVisible?: boolean;
   mfaMethods?: UserProfileMfaMethod[];
   devices?: UserProfileDevice[];
   onAddPasskey?: () => void;
@@ -57,6 +58,7 @@ export function UserProfileSecurityPanelView({
   requiresCurrentPassword,
   managedBy,
   passkeys,
+  passkeysVisible = true,
   mfaMethods,
   devices,
   onSubmitPassword,
@@ -73,7 +75,7 @@ export function UserProfileSecurityPanelView({
   onDeleteAccount,
 }: UserProfileSecurityPanelViewProps): ReactElement {
   const showPassword = hasPassword || Boolean(onSubmitPassword) || Boolean(managedBy);
-  const showPasskeys = passkeys !== undefined && (passkeys.length > 0 || Boolean(onAddPasskey));
+  const showPasskeys = passkeys !== undefined && passkeysVisible;
   const hasAuthentication = showPassword || showPasskeys || mfaMethods !== undefined;
 
   return (
@@ -92,6 +94,7 @@ export function UserProfileSecurityPanelView({
           {passkeys !== undefined ? (
             <UserProfilePasskeysSectionView
               passkeys={passkeys}
+              isVisible={passkeysVisible}
               sectionTitle={showPassword ? undefined : 'Authentication'}
               onAdd={onAddPasskey}
               addError={addPasskeyError}

From 2d2075319015006c48dcbb30db1fc6e35e64093e Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Wed, 16 Sep 2026 15:32:57 -0600
Subject: [PATCH 11/25] docs(swingset): explain legacy passkey visibility

---
 packages/swingset/src/lib/registry.ts         |  2 ++
 .../stories/user-profile-passkeys-section.mdx | 31 +++++++++++++------
 .../user-profile-passkeys-section.stories.tsx | 11 +++++++
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/packages/swingset/src/lib/registry.ts b/packages/swingset/src/lib/registry.ts
index 50c07c5cedc..240125f4246 100644
--- a/packages/swingset/src/lib/registry.ts
+++ b/packages/swingset/src/lib/registry.ts
@@ -302,6 +302,7 @@ import {
   meta as userProfileMfaSectionMeta,
 } from '../stories/user-profile-mfa-section.stories';
 import {
+  CreationUnavailable as UserProfilePasskeysSectionCreationUnavailable,
   Default as UserProfilePasskeysSectionDefault,
   Empty as UserProfilePasskeysSectionEmpty,
   meta as userProfilePasskeysSectionMeta,
@@ -650,6 +651,7 @@ const userProfilePasswordSectionModule: StoryModule = {
 };
 const userProfilePasskeysSectionModule: StoryModule = {
   meta: userProfilePasskeysSectionMeta,
+  CreationUnavailable: UserProfilePasskeysSectionCreationUnavailable,
   Default: UserProfilePasskeysSectionDefault,
   Empty: UserProfilePasskeysSectionEmpty,
   RecoverableErrors: UserProfilePasskeysSectionRecoverableErrors,
diff --git a/packages/swingset/src/stories/user-profile-passkeys-section.mdx b/packages/swingset/src/stories/user-profile-passkeys-section.mdx
index 2602f696c6b..80333662a78 100644
--- a/packages/swingset/src/stories/user-profile-passkeys-section.mdx
+++ b/packages/swingset/src/stories/user-profile-passkeys-section.mdx
@@ -16,23 +16,36 @@ Manage passkey names and confirm removal. These examples mock creation; browser
 
 ## Props
 
-| Prop           | Type                                                  | Default      | Description                                                      |
-| -------------- | ----------------------------------------------------- | ------------ | ---------------------------------------------------------------- |
-| `passkeys`     | `UserProfilePasskey[]`                                | — (required) | Names and formatted creation/last-used labels.                   |
-| `sectionTitle` | `string`                                              | —            | Optional surrounding section heading.                            |
-| `onAdd`        | `() => void`                                          | —            | Shows Add when supplied.                                         |
-| `addError`     | `string`                                              | —            | Inline creation error.                                           |
-| `onRename`     | `(id: string, name: string) => void \| Promise<void>` | —            | Resolve to close; reject with an Error to display the failure.   |
-| `onRemove`     | `(id: string) => void \| Promise<void>`               | —            | Shared confirmation awaits removal and displays rejected errors. |
+| Prop           | Type                                                  | Default      | Description                                                                         |
+| -------------- | ----------------------------------------------------- | ------------ | ----------------------------------------------------------------------------------- |
+| `passkeys`     | `UserProfilePasskey[]`                                | — (required) | Names and formatted creation/last-used labels.                                      |
+| `isVisible`    | `boolean`                                             | `true`       | Caller-derived section visibility, independent of Add availability and list length. |
+| `sectionTitle` | `string`                                              | —            | Optional surrounding section heading.                                               |
+| `onAdd`        | `() => void`                                          | —            | Shows Add when supplied.                                                            |
+| `addError`     | `string`                                              | —            | Inline creation error.                                                              |
+| `onRename`     | `(id: string, name: string) => void \| Promise<void>` | —            | Resolve to close; reject with an Error to display the failure.                      |
+| `onRemove`     | `(id: string) => void \| Promise<void>`               | —            | Shared confirmation awaits removal and displays rejected errors.                    |
 
 ## Usage
 
+### Legacy visibility
+
+Legacy hides the entire section when passkeys are disabled for the instance or identification creation is disallowed, even if the user already has passkeys. Future model/controller wiring must express that decision with `isVisible={false}` (`passkeysVisible={false}` in the Security panel). These views do not read instance settings themselves.
+
+On a satellite domain, an otherwise visible section remains visible even when empty; only Add is unavailable. Represent that by omitting `onAdd`, without hiding the section.
+
 ### No passkeys yet
 
-Add remains available after removing the final passkey. With neither passkeys nor an Add callback, the section is hidden.
+The section remains visible after removing the final passkey. Add remains available when its callback is supplied.
 
 <Story name='Empty' storyModule={Stories} />
 
+### Creation unavailable
+
+Rename and remove existing passkeys. Removing the final passkey leaves the empty section visible, matching a satellite domain where creation is unavailable.
+
+<Story name='CreationUnavailable' storyModule={Stories} />
+
 ### Recoverable errors
 
 The first Add, Rename, and Remove attempt fails. Retry completes the action; saving and removal use a short simulated delay.
diff --git a/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx b/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx
index f8f3a4445a6..f57448d1b14 100644
--- a/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx
+++ b/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx
@@ -34,6 +34,17 @@ export function Empty(): ReactElement {
   return <PasskeysExample empty />;
 }
 
+export function CreationUnavailable(): ReactElement {
+  const fixture = usePasskeysFixture();
+  return (
+    <UserProfilePasskeysSectionView
+      {...fixture}
+      sectionTitle='Authentication'
+      onAdd={undefined}
+    />
+  );
+}
+
 export function RecoverableErrors(): ReactElement {
   return <PasskeysExample failOnce />;
 }

From 5f447cbbafff8d523f345bb00975c7b030e34920 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Wed, 16 Sep 2026 15:45:35 -0600
Subject: [PATCH 12/25] refactor(ui): remove unused passkey manage fallback

---
 .../features/user-profile/user-profile-passkey-row.view.tsx   | 4 ----
 .../user-profile/user-profile-passkeys-section.view.tsx       | 3 ---
 .../user-profile/user-profile-security-panel.view.tsx         | 3 ---
 3 files changed, 10 deletions(-)

diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
index 12a01dce6e8..618b052e65f 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
@@ -16,12 +16,10 @@ import { UserProfileRenamePasskeyDialog } from './user-profile-rename-passkey.di
 export function UserProfilePasskeyRowView({
   passkey,
   onRename,
-  onManage,
   onRemove,
 }: {
   passkey: UserProfilePasskey;
   onRename?: (id: string, name: string) => void | Promise<void>;
-  onManage?: (id: string) => void;
   onRemove?: () => void;
 }) {
   const renameDialog = useMemo(() => Dialog.createHandle(), []);
@@ -34,8 +32,6 @@ export function UserProfilePasskeyRowView({
   const actions: UserProfileMenuAction[] = [];
   if (onRename) {
     actions.push({ label: m.rename, onClick: () => renameDialog.open(undefined) });
-  } else if (onManage) {
-    actions.push({ label: m.rename, onClick: () => onManage(passkey.id) });
   }
   if (onRemove) {
     actions.push({ label: m.removeAction, color: 'negative', onClick: onRemove });
diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
index 9b9efbc6a5b..5ea425a079a 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
@@ -22,7 +22,6 @@ export interface UserProfilePasskeysSectionViewProps {
   onAdd?: () => void;
   addError?: string;
   onRename?: (id: string, name: string) => void | Promise<void>;
-  onManage?: (id: string) => void;
   onRemove?: (id: string) => void | Promise<void>;
 }
 
@@ -33,7 +32,6 @@ export function UserProfilePasskeysSectionView({
   onAdd,
   addError,
   onRename,
-  onManage,
   onRemove,
 }: UserProfilePasskeysSectionViewProps) {
   const removePasskey = useMemo(() => Confirmation.createHandle<UserProfilePasskey>(), []);
@@ -79,7 +77,6 @@ export function UserProfilePasskeysSectionView({
                     key={passkey.id}
                     passkey={passkey}
                     onRename={onRename}
-                    onManage={onManage}
                     onRemove={onRemove ? () => removePasskey.open(passkey) : undefined}
                   />
                 ))}
diff --git a/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
index cc1ebb7ae7e..7929f8a4e67 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
@@ -44,7 +44,6 @@ export interface UserProfileSecurityPanelViewProps
   onAddPasskey?: () => void;
   addPasskeyError?: string;
   onRenamePasskey?: (id: string, name: string) => void | Promise<void>;
-  onManagePasskey?: (id: string) => void;
   onRemovePasskey?: (id: string) => void | Promise<void>;
   onAddMfaMethod?: (type: UserProfileMfaAddableMethod) => void;
   onRegenerateBackupCodes?: () => void;
@@ -65,7 +64,6 @@ export function UserProfileSecurityPanelView({
   onAddPasskey,
   addPasskeyError,
   onRenamePasskey,
-  onManagePasskey,
   onRemovePasskey,
   onAddMfaMethod,
   onRegenerateBackupCodes,
@@ -99,7 +97,6 @@ export function UserProfileSecurityPanelView({
               onAdd={onAddPasskey}
               addError={addPasskeyError}
               onRename={onRenamePasskey}
-              onManage={onManagePasskey}
               onRemove={onRemovePasskey}
             />
           ) : null}

From 29e89b1a375b89c5492e0bd92efac801a82142a0 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Wed, 16 Sep 2026 15:51:18 -0600
Subject: [PATCH 13/25] refactor(ui): colocate passkey styles with feature
 styles

---
 .../user-profile/user-profile-passkey-row.view.tsx       | 9 +--------
 .../user-profile/user-profile-passkeys-section.styles.ts | 9 +++++++++
 2 files changed, 10 insertions(+), 8 deletions(-)
 create mode 100644 packages/mosaic/src/features/user-profile/user-profile-passkeys-section.styles.ts

diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
index 618b052e65f..f90dae272f5 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
@@ -1,14 +1,13 @@
-import * as stylex from '@stylexjs/stylex';
 import { useMemo } from 'react';
 
 import { Dialog } from '../../components/dialog';
 import { Icon, IconFrame } from '../../components/icon';
 import { Section } from '../../components/section';
-import { colorVars } from '../../tokens.stylex';
 import { fill } from '../../utils/messages';
 import type { UserProfileMenuAction } from './user-profile-action-menu';
 import { UserProfileActionMenu } from './user-profile-action-menu';
 import { userProfilePasskeysMessages as m } from './user-profile-passkeys-section.messages';
+import { styles } from './user-profile-passkeys-section.styles';
 import type { UserProfilePasskey } from './user-profile-passkeys-section.view';
 import { useUserProfileRenamePasskeyController } from './user-profile-rename-passkey.controller';
 import { UserProfileRenamePasskeyDialog } from './user-profile-rename-passkey.dialog';
@@ -76,9 +75,3 @@ export function UserProfilePasskeyRowView({
     </>
   );
 }
-
-const styles = stylex.create({
-  icon: {
-    color: colorVars['--cl-color-foreground-secondary'],
-  },
-});
diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.styles.ts
new file mode 100644
index 00000000000..ab368ec2077
--- /dev/null
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.styles.ts
@@ -0,0 +1,9 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { colorVars } from '../../tokens.stylex';
+
+export const styles = stylex.create({
+  icon: {
+    color: colorVars['--cl-color-foreground-secondary'],
+  },
+});

From 5485f59a6383fa673b02831b5eb0dfb5beca13cf Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Wed, 16 Sep 2026 15:55:36 -0600
Subject: [PATCH 14/25] refactor(ui): let the panel control passkey section
 visibility

---
 ...ser-profile-passkeys-section.view.test.tsx | 12 ++++++------
 .../user-profile-passkeys-section.view.tsx    |  6 ------
 .../user-profile-security-panel.view.tsx      |  3 +--
 .../stories/user-profile-passkeys-section.mdx | 19 +++++++++----------
 4 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
index 4ba4c8141c9..c1216710c7e 100644
--- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
+++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
@@ -28,13 +28,13 @@ function renderView(overrides: Partial<UserProfilePasskeysSectionViewProps> = {}
 }
 
 describe('passkeys section', () => {
-  it('hides existing passkeys and their actions when the caller hides the section', () => {
-    renderView({ isVisible: false, sectionTitle: 'Authentication' });
+  it('shows existing passkeys without actions when their callbacks are unavailable', () => {
+    renderView({ onAdd: undefined, onRename: undefined, onRemove: undefined, sectionTitle: 'Authentication' });
 
-    expect(screen.queryByRole('heading', { name: 'Authentication' })).not.toBeInTheDocument();
-    expect(screen.queryByText('Passkeys')).not.toBeInTheDocument();
-    expect(screen.queryByText('MacBook')).not.toBeInTheDocument();
-    expect(screen.queryByText('iPhone')).not.toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Authentication' })).toBeVisible();
+    expect(screen.getByText('Passkeys')).toBeVisible();
+    expect(screen.getByText('MacBook')).toBeVisible();
+    expect(screen.getByText('iPhone')).toBeVisible();
     expect(screen.queryByRole('button')).not.toBeInTheDocument();
   });
 
diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
index 5ea425a079a..89a6cc9eb13 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
@@ -17,7 +17,6 @@ export interface UserProfilePasskey {
 
 export interface UserProfilePasskeysSectionViewProps {
   passkeys: UserProfilePasskey[];
-  isVisible?: boolean;
   sectionTitle?: string;
   onAdd?: () => void;
   addError?: string;
@@ -27,7 +26,6 @@ export interface UserProfilePasskeysSectionViewProps {
 
 export function UserProfilePasskeysSectionView({
   passkeys,
-  isVisible = true,
   sectionTitle,
   onAdd,
   addError,
@@ -36,10 +34,6 @@ export function UserProfilePasskeysSectionView({
 }: UserProfilePasskeysSectionViewProps) {
   const removePasskey = useMemo(() => Confirmation.createHandle<UserProfilePasskey>(), []);
 
-  if (!isVisible) {
-    return null;
-  }
-
   return (
     <>
       <Section.Root aria-label={sectionTitle ? undefined : m.label}>
diff --git a/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
index 7929f8a4e67..5d3f67ccab4 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
@@ -89,10 +89,9 @@ export function UserProfileSecurityPanelView({
               onSubmitPassword={onSubmitPassword}
             />
           ) : null}
-          {passkeys !== undefined ? (
+          {showPasskeys ? (
             <UserProfilePasskeysSectionView
               passkeys={passkeys}
-              isVisible={passkeysVisible}
               sectionTitle={showPassword ? undefined : 'Authentication'}
               onAdd={onAddPasskey}
               addError={addPasskeyError}
diff --git a/packages/swingset/src/stories/user-profile-passkeys-section.mdx b/packages/swingset/src/stories/user-profile-passkeys-section.mdx
index 80333662a78..7019d37929c 100644
--- a/packages/swingset/src/stories/user-profile-passkeys-section.mdx
+++ b/packages/swingset/src/stories/user-profile-passkeys-section.mdx
@@ -16,21 +16,20 @@ Manage passkey names and confirm removal. These examples mock creation; browser
 
 ## Props
 
-| Prop           | Type                                                  | Default      | Description                                                                         |
-| -------------- | ----------------------------------------------------- | ------------ | ----------------------------------------------------------------------------------- |
-| `passkeys`     | `UserProfilePasskey[]`                                | — (required) | Names and formatted creation/last-used labels.                                      |
-| `isVisible`    | `boolean`                                             | `true`       | Caller-derived section visibility, independent of Add availability and list length. |
-| `sectionTitle` | `string`                                              | —            | Optional surrounding section heading.                                               |
-| `onAdd`        | `() => void`                                          | —            | Shows Add when supplied.                                                            |
-| `addError`     | `string`                                              | —            | Inline creation error.                                                              |
-| `onRename`     | `(id: string, name: string) => void \| Promise<void>` | —            | Resolve to close; reject with an Error to display the failure.                      |
-| `onRemove`     | `(id: string) => void \| Promise<void>`               | —            | Shared confirmation awaits removal and displays rejected errors.                    |
+| Prop           | Type                                                  | Default      | Description                                                      |
+| -------------- | ----------------------------------------------------- | ------------ | ---------------------------------------------------------------- |
+| `passkeys`     | `UserProfilePasskey[]`                                | — (required) | Names and formatted creation/last-used labels.                   |
+| `sectionTitle` | `string`                                              | —            | Optional surrounding section heading.                            |
+| `onAdd`        | `() => void`                                          | —            | Shows Add when supplied.                                         |
+| `addError`     | `string`                                              | —            | Inline creation error.                                           |
+| `onRename`     | `(id: string, name: string) => void \| Promise<void>` | —            | Resolve to close; reject with an Error to display the failure.   |
+| `onRemove`     | `(id: string) => void \| Promise<void>`               | —            | Shared confirmation awaits removal and displays rejected errors. |
 
 ## Usage
 
 ### Legacy visibility
 
-Legacy hides the entire section when passkeys are disabled for the instance or identification creation is disallowed, even if the user already has passkeys. Future model/controller wiring must express that decision with `isVisible={false}` (`passkeysVisible={false}` in the Security panel). These views do not read instance settings themselves.
+Legacy hides the entire section when passkeys are disabled for the instance or identification creation is disallowed, even if the user already has passkeys. The caller conditionally renders the section using that policy decision. The Security panel accepts `passkeysVisible={false}` to omit it; future model/controller wiring supplies that value. The section itself always renders when mounted and does not read instance settings.
 
 On a satellite domain, an otherwise visible section remains visible even when empty; only Add is unavailable. Represent that by omitting `onAdd`, without hiding the section.
 

From b36ed87678011a547452ba6adc8b97bf51a29239 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Wed, 16 Sep 2026 16:09:09 -0600
Subject: [PATCH 15/25] docs(swingset): describe passkey visibility directly

---
 .../swingset/src/stories/user-profile-passkeys-section.mdx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/swingset/src/stories/user-profile-passkeys-section.mdx b/packages/swingset/src/stories/user-profile-passkeys-section.mdx
index 7019d37929c..320da8d411d 100644
--- a/packages/swingset/src/stories/user-profile-passkeys-section.mdx
+++ b/packages/swingset/src/stories/user-profile-passkeys-section.mdx
@@ -27,9 +27,9 @@ Manage passkey names and confirm removal. These examples mock creation; browser
 
 ## Usage
 
-### Legacy visibility
+### Visibility
 
-Legacy hides the entire section when passkeys are disabled for the instance or identification creation is disallowed, even if the user already has passkeys. The caller conditionally renders the section using that policy decision. The Security panel accepts `passkeysVisible={false}` to omit it; future model/controller wiring supplies that value. The section itself always renders when mounted and does not read instance settings.
+The caller hides the entire section when passkeys are disabled for the instance or identification creation is disallowed, even if the user already has passkeys. Set `passkeysVisible={false}` on the Security panel to omit it. The standalone section always renders when mounted and does not read instance settings.
 
 On a satellite domain, an otherwise visible section remains visible even when empty; only Add is unavailable. Represent that by omitting `onAdd`, without hiding the section.
 

From 42b43a994394530244dacaba5b7a194e0df38c4c Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Wed, 16 Sep 2026 16:24:04 -0600
Subject: [PATCH 16/25] fix(ui): align passkey Add label and clarify satellite
 behavior

---
 .../__tests__/user-profile-passkeys-section.view.test.tsx     | 4 +++-
 .../user-profile/user-profile-passkeys-section.messages.ts    | 3 ++-
 .../user-profile/user-profile-passkeys-section.view.tsx       | 2 +-
 .../swingset/src/stories/user-profile-passkeys-section.mdx    | 2 ++
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
index c1216710c7e..ec855e62264 100644
--- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
+++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
@@ -108,7 +108,9 @@ describe('passkeys section', () => {
     renderView({ passkeys: [], onAdd, addError: 'Could not create passkey' });
 
     expect(screen.getByRole('alert')).toHaveTextContent('Could not create passkey');
-    await user.click(screen.getByRole('button', { name: 'Add passkey' }));
+    const addButton = screen.getByRole('button', { name: 'Add passkey' });
+    expect(addButton).toHaveTextContent(/^Add$/);
+    await user.click(addButton);
     expect(onAdd).toHaveBeenCalledOnce();
   });
 
diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.messages.ts b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.messages.ts
index e07f1bfaa48..537fad1cc35 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.messages.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.messages.ts
@@ -1,6 +1,7 @@
 export const userProfilePasskeysMessages = {
   label: 'Passkeys',
-  add: 'Add passkey',
+  add: 'Add',
+  addLabel: 'Add passkey',
   empty: 'No passkeys added',
   details: '{createdAt} · {lastUsedAt}',
   manage: 'Manage {name}',
diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
index 89a6cc9eb13..7023a102274 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
@@ -47,7 +47,7 @@ export function UserProfilePasskeysSectionView({
               {onAdd ? (
                 <Section.Actions>
                   <Button
-                    aria-label={m.add}
+                    aria-label={m.addLabel}
                     color='neutral'
                     size='sm'
                     variant='outline'
diff --git a/packages/swingset/src/stories/user-profile-passkeys-section.mdx b/packages/swingset/src/stories/user-profile-passkeys-section.mdx
index 320da8d411d..ffc3ce1cc70 100644
--- a/packages/swingset/src/stories/user-profile-passkeys-section.mdx
+++ b/packages/swingset/src/stories/user-profile-passkeys-section.mdx
@@ -33,6 +33,8 @@ The caller hides the entire section when passkeys are disabled for the instance
 
 On a satellite domain, an otherwise visible section remains visible even when empty; only Add is unavailable. Represent that by omitting `onAdd`, without hiding the section.
 
+A satellite shares the same Clerk user account, so users can see passkeys they created on the primary domain. Those passkeys are tied to the primary domain and cannot authenticate directly on a different satellite domain. Users can still rename or remove them because those actions manage the account's existing passkeys. See [domain restrictions for passkeys](https://clerk.com/docs/guides/development/custom-flows/authentication/passkeys#domain-restrictions-for-passkeys).
+
 ### No passkeys yet
 
 The section remains visible after removing the final passkey. Add remains available when its callback is supplied.

From 23382b83da25b9eb51166e1fd978d420f788015b Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Wed, 16 Sep 2026 16:44:15 -0600
Subject: [PATCH 17/25] fix(ui): align passkeys with updated dialog API on main

---
 .../user-profile-passkeys-section.view.test.tsx    | 14 +++++++-------
 .../user-profile-security-panel.view.test.tsx      | 10 +++++-----
 .../user-profile-rename-passkey.dialog.tsx         |  6 +-----
 3 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
index ec855e62264..6fe00028a5c 100644
--- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
+++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
@@ -52,19 +52,19 @@ describe('passkeys section', () => {
 
     await user.click(screen.getByRole('button', { name: 'Manage MacBook' }));
     await user.click(screen.getByRole('menuitem', { name: 'Remove passkey' }));
-    expect(screen.getByRole('dialog')).toHaveAccessibleDescription('MacBook will be removed from this account.');
+    expect(screen.getByRole('alertdialog')).toHaveAccessibleDescription('MacBook will be removed from this account.');
     expect(onRemove).not.toHaveBeenCalled();
     await user.click(screen.getByRole('button', { name: 'Cancel' }));
-    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
     expect(screen.getByRole('button', { name: 'Manage MacBook' })).toHaveFocus();
 
     await user.click(screen.getByRole('button', { name: 'Manage iPhone' }));
     await user.click(screen.getByRole('menuitem', { name: 'Remove passkey' }));
-    const dialog = screen.getByRole('dialog');
+    const dialog = screen.getByRole('alertdialog');
     expect(dialog).toHaveAccessibleDescription('iPhone will be removed from this account.');
     await user.click(within(dialog).getByRole('button', { name: 'Remove', exact: true }));
     expect(onRemove).toHaveBeenCalledExactlyOnceWith('phone');
-    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
   });
   it('renames through a prefilled form, preserves the draft after failure, and retries', async () => {
     const user = userEvent.setup();
@@ -144,7 +144,7 @@ describe('passkeys section', () => {
       finish();
       await pending;
     });
-    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
     expect(screen.queryByText('MacBook')).not.toBeInTheDocument();
     await user.click(screen.getByRole('button', { name: 'Add passkey' }));
     expect(screen.getByText('MacBook')).toBeVisible();
@@ -167,7 +167,7 @@ describe('passkeys section', () => {
     expect(await screen.findByRole('alert')).toHaveTextContent('Removal failed');
     await user.click(screen.getByRole('button', { name: 'Remove', exact: true }));
     expect(onRemove.mock.calls).toEqual([['phone'], ['phone']]);
-    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
   });
   it('preserves literal passkey names in menu labels and removal copy', async () => {
     const user = userEvent.setup();
@@ -181,7 +181,7 @@ describe('passkeys section', () => {
     );
     await user.click(screen.getByRole('button', { name: 'Manage $& laptop' }));
     await user.click(screen.getByRole('menuitem', { name: 'Remove passkey' }));
-    expect(screen.getByRole('dialog')).toHaveAccessibleDescription('$& laptop will be removed from this account.');
+    expect(screen.getByRole('alertdialog')).toHaveAccessibleDescription('$& laptop will be removed from this account.');
   });
 
   it('keeps rename pending until saving finishes', async () => {
diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx
index b7a5a9cd665..86e4f296a76 100644
--- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx
+++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx
@@ -115,8 +115,8 @@ describe('UserProfileSecurityPanelView', () => {
     await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
     await user.click(screen.getByRole('button', { name: 'Manage Passkey' }));
     await user.click(screen.getByRole('menuitem', { name: 'Remove passkey' }));
-    await user.click(within(screen.getByRole('dialog')).getByRole('button', { name: 'Remove', exact: true }));
-    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    await user.click(within(screen.getByRole('alertdialog')).getByRole('button', { name: 'Remove', exact: true }));
+    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
 
     const otherDevices = screen.getByRole('region', { name: 'Other devices' });
     await user.click(within(otherDevices).getByRole('button', { name: 'Manage Safari on iOS' }));
@@ -203,7 +203,7 @@ describe('UserProfileSecurityPanelView', () => {
 
     await user.click(screen.getByRole('button', { name: 'Manage Passkey' }));
     await user.click(screen.getByRole('menuitem', { name: 'Remove passkey' }));
-    await user.click(within(screen.getByRole('dialog')).getByRole('button', { name: 'Remove' }));
+    await user.click(within(screen.getByRole('alertdialog')).getByRole('button', { name: 'Remove' }));
 
     rerender(
       <MosaicProvider>
@@ -214,13 +214,13 @@ describe('UserProfileSecurityPanelView', () => {
       </MosaicProvider>,
     );
     expect(screen.getByText('Authentication')).toBeInTheDocument();
-    expect(screen.getByRole('dialog', { name: 'Remove passkey' })).toBeVisible();
+    expect(screen.getByRole('alertdialog', { name: 'Remove passkey' })).toBeVisible();
 
     await act(async () => {
       removal.resolve();
       await removal.promise;
     });
-    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
     expect(screen.getByRole('heading', { name: 'Authentication' })).toBeVisible();
     expect(screen.getByText('Passkeys')).toBeVisible();
     expect(screen.getByText('No passkeys added')).toBeVisible();
diff --git a/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.dialog.tsx b/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.dialog.tsx
index 498fbde019d..bba534685e3 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.dialog.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.dialog.tsx
@@ -39,12 +39,8 @@ export function UserProfileRenamePasskeyDialog({
       handle={handle}
       open={open}
       onOpenChange={onOpenChange}
-      closedBy='closerequest'
     >
-      <Dialog.Popup
-        size='card'
-        initialFocus={inputRef}
-      >
+      <Dialog.Popup initialFocus={inputRef}>
         <Card.Root
           elevation='overlay'
           renderBranding={false}

From 25191a722df8b06fa576eaef8fe16566075cccf0 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Wed, 16 Sep 2026 17:01:07 -0600
Subject: [PATCH 18/25] docs(swingset): focus passkey examples on view behavior

---
 .../src/stories/user-profile-passkeys-section.mdx         | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/swingset/src/stories/user-profile-passkeys-section.mdx b/packages/swingset/src/stories/user-profile-passkeys-section.mdx
index ffc3ce1cc70..bd5346ac2a9 100644
--- a/packages/swingset/src/stories/user-profile-passkeys-section.mdx
+++ b/packages/swingset/src/stories/user-profile-passkeys-section.mdx
@@ -29,11 +29,7 @@ Manage passkey names and confirm removal. These examples mock creation; browser
 
 ### Visibility
 
-The caller hides the entire section when passkeys are disabled for the instance or identification creation is disallowed, even if the user already has passkeys. Set `passkeysVisible={false}` on the Security panel to omit it. The standalone section always renders when mounted and does not read instance settings.
-
-On a satellite domain, an otherwise visible section remains visible even when empty; only Add is unavailable. Represent that by omitting `onAdd`, without hiding the section.
-
-A satellite shares the same Clerk user account, so users can see passkeys they created on the primary domain. Those passkeys are tied to the primary domain and cannot authenticate directly on a different satellite domain. Users can still rename or remove them because those actions manage the account's existing passkeys. See [domain restrictions for passkeys](https://clerk.com/docs/guides/development/custom-flows/authentication/passkeys#domain-restrictions-for-passkeys).
+The caller decides whether to render the section. When mounted, the section stays visible even with no passkeys or actions.
 
 ### No passkeys yet
 
@@ -43,7 +39,7 @@ The section remains visible after removing the final passkey. Add remains availa
 
 ### Creation unavailable
 
-Rename and remove existing passkeys. Removing the final passkey leaves the empty section visible, matching a satellite domain where creation is unavailable.
+Omit `onAdd` to hide Add. Existing passkeys can still be renamed or removed, and removing the final passkey leaves the empty state visible.
 
 <Story name='CreationUnavailable' storyModule={Stories} />
 

From 7f59ccf6a82ebe54023148fcc17dc04f427b2167 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Wed, 16 Sep 2026 17:07:51 -0600
Subject: [PATCH 19/25] fix(ui): clear passkey rename errors when editing

---
 .../__tests__/user-profile-passkeys-section.view.test.tsx    | 5 ++++-
 .../user-profile/user-profile-rename-passkey.controller.ts   | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
index 6fe00028a5c..8b57ea14071 100644
--- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
+++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
@@ -88,8 +88,11 @@ describe('passkeys section', () => {
     await user.click(screen.getByRole('button', { name: 'Save' }));
     expect(await screen.findByRole('alert')).toHaveTextContent('Try again');
     expect(input).toHaveValue('Work laptop');
+    await user.type(input, ' updated');
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    expect(input).toHaveValue('Work laptop updated');
     await user.click(screen.getByRole('button', { name: 'Save' }));
-    expect(onRename).toHaveBeenLastCalledWith('laptop', 'Work laptop');
+    expect(onRename).toHaveBeenLastCalledWith('laptop', 'Work laptop updated');
     await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
   });
 
diff --git a/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.controller.ts b/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.controller.ts
index 6afbdb9aeb6..739153fa356 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.controller.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.controller.ts
@@ -43,7 +43,7 @@ const userProfileRenamePasskeyMachine = createMachine({
     },
     editing: {
       on: {
-        TYPE: { actions: assign((_, event) => ({ name: event.value })) },
+        TYPE: { actions: assign((_, event) => ({ name: event.value, error: undefined })) },
         SAVE: { target: 'saving', guard: isSaveable, actions: assign(() => ({ error: undefined })) },
         CANCEL: { target: 'idle', actions: assign(() => ({ error: undefined })) },
       },

From a545ae2616754fefa18ba1f8dbebc44f8d070e86 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Wed, 16 Sep 2026 17:20:16 -0600
Subject: [PATCH 20/25] fix(ui): keep passkey edit errors consistent with other
 rows

---
 .../__tests__/user-profile-passkeys-section.view.test.tsx       | 2 +-
 .../user-profile/user-profile-rename-passkey.controller.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
index 8b57ea14071..e86d5624c40 100644
--- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
+++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
@@ -89,7 +89,7 @@ describe('passkeys section', () => {
     expect(await screen.findByRole('alert')).toHaveTextContent('Try again');
     expect(input).toHaveValue('Work laptop');
     await user.type(input, ' updated');
-    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    expect(screen.getByRole('alert')).toHaveTextContent('Try again');
     expect(input).toHaveValue('Work laptop updated');
     await user.click(screen.getByRole('button', { name: 'Save' }));
     expect(onRename).toHaveBeenLastCalledWith('laptop', 'Work laptop updated');
diff --git a/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.controller.ts b/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.controller.ts
index 739153fa356..6afbdb9aeb6 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.controller.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.controller.ts
@@ -43,7 +43,7 @@ const userProfileRenamePasskeyMachine = createMachine({
     },
     editing: {
       on: {
-        TYPE: { actions: assign((_, event) => ({ name: event.value, error: undefined })) },
+        TYPE: { actions: assign((_, event) => ({ name: event.value })) },
         SAVE: { target: 'saving', guard: isSaveable, actions: assign(() => ({ error: undefined })) },
         CANCEL: { target: 'idle', actions: assign(() => ({ error: undefined })) },
       },

From ab5a34cddcbd6c27355e4159772aa4ce0e1ab2a1 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Thu, 17 Sep 2026 10:05:11 -0600
Subject: [PATCH 21/25] fix(swingset): use extracted Mosaic package in passkey
 fixtures

---
 packages/swingset/src/stories/fixtures/user-profile-passkeys.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/swingset/src/stories/fixtures/user-profile-passkeys.ts b/packages/swingset/src/stories/fixtures/user-profile-passkeys.ts
index 710aa48e575..3c1ecc5247b 100644
--- a/packages/swingset/src/stories/fixtures/user-profile-passkeys.ts
+++ b/packages/swingset/src/stories/fixtures/user-profile-passkeys.ts
@@ -1,4 +1,4 @@
-import type { UserProfilePasskey } from '@clerk/ui/mosaic/features/user-profile/user-profile-passkeys-section.view';
+import type { UserProfilePasskey } from '@clerk/mosaic/features/user-profile/user-profile-passkeys-section.view';
 import { useRef, useState } from 'react';
 
 interface PasskeysFixture {

From 2acbe542d47a3d4b3ead3feb49e18f1ad7da0fd9 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Thu, 17 Sep 2026 10:34:35 -0600
Subject: [PATCH 22/25] docs(mosaic): describe passkey management improvements

---
 .changeset/calm-passkeys-views.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.changeset/calm-passkeys-views.md b/.changeset/calm-passkeys-views.md
index a845151cc84..94c52e0c8a0 100644
--- a/.changeset/calm-passkeys-views.md
+++ b/.changeset/calm-passkeys-views.md
@@ -1,2 +1,5 @@
 ---
+'@clerk/mosaic': patch
 ---
+
+Add a passkey section to Mosaic user profiles with actions to add, rename, and remove passkeys.

From 75217040588b027ed9c141bccd254de02132f064 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Thu, 17 Sep 2026 13:30:56 -0600
Subject: [PATCH 23/25] fix(mosaic): align passkey imports with localization on
 main

---
 .../src/features/user-profile/user-profile-passkey-row.view.tsx | 2 +-
 .../user-profile/user-profile-passkeys-section.view.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
index f90dae272f5..324a79095a3 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { Dialog } from '../../components/dialog';
 import { Icon, IconFrame } from '../../components/icon';
 import { Section } from '../../components/section';
-import { fill } from '../../utils/messages';
+import { fill } from '../../localization/messages';
 import type { UserProfileMenuAction } from './user-profile-action-menu';
 import { UserProfileActionMenu } from './user-profile-action-menu';
 import { userProfilePasskeysMessages as m } from './user-profile-passkeys-section.messages';
diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
index 7023a102274..f6c75b52f5f 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
@@ -4,7 +4,7 @@ import { Confirmation } from '../../blocks/confirmation';
 import { Button } from '../../components/button';
 import { Icon } from '../../components/icon';
 import { Section } from '../../components/section';
-import { fill } from '../../utils/messages';
+import { fill } from '../../localization/messages';
 import { UserProfilePasskeyRowView } from './user-profile-passkey-row.view';
 import { userProfilePasskeysMessages as m } from './user-profile-passkeys-section.messages';
 

From bfe657d7406aa6169102c7fa29eee00e048e8e46 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Thu, 17 Sep 2026 17:28:17 -0600
Subject: [PATCH 24/25] style(swingset): format imports after rebase

---
 packages/swingset/src/stories/fixtures/user-profile.ts        | 4 +---
 .../src/stories/user-profile-security-panel.stories.tsx       | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/swingset/src/stories/fixtures/user-profile.ts b/packages/swingset/src/stories/fixtures/user-profile.ts
index 4c0b3bd0f57..24edb2b66ff 100644
--- a/packages/swingset/src/stories/fixtures/user-profile.ts
+++ b/packages/swingset/src/stories/fixtures/user-profile.ts
@@ -8,9 +8,7 @@ import type {
   UserProfileEmail,
   UserProfilePhone,
 } from '@clerk/mosaic/features/user-profile/user-profile-profile-panel.view';
-import type {
-  UserProfileMfaMethod,
-} from '@clerk/mosaic/features/user-profile/user-profile-security-panel.view';
+import type { UserProfileMfaMethod } from '@clerk/mosaic/features/user-profile/user-profile-security-panel.view';
 import { useMemo, useState } from 'react';
 
 import { usePreviewImage } from './use-preview-image';
diff --git a/packages/swingset/src/stories/user-profile-security-panel.stories.tsx b/packages/swingset/src/stories/user-profile-security-panel.stories.tsx
index 74cbf99f3b2..8f310349c09 100644
--- a/packages/swingset/src/stories/user-profile-security-panel.stories.tsx
+++ b/packages/swingset/src/stories/user-profile-security-panel.stories.tsx
@@ -1,6 +1,4 @@
-import type {
-  UserProfileMfaMethod,
-} from '@clerk/mosaic/features/user-profile/user-profile-security-panel.view';
+import type { UserProfileMfaMethod } from '@clerk/mosaic/features/user-profile/user-profile-security-panel.view';
 import { UserProfileSecurityPanelView } from '@clerk/mosaic/features/user-profile/user-profile-security-panel.view';
 import { useState } from 'react';
 

From 3add645c15c546399347b5e91d93ac6923d51cba Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Thu, 17 Sep 2026 17:40:39 -0600
Subject: [PATCH 25/25] fix(mosaic): restore focus after passkey removal

---
 .changeset/calm-passkeys-views.md             |  3 -
 ...ser-profile-passkeys-section.view.test.tsx | 38 +++++++++++--
 ...er-profile-active-devices-section.view.tsx | 55 +++++--------------
 .../user-profile-passkey-row.view.tsx         |  4 ++
 .../user-profile-passkeys-section.styles.ts   |  8 ++-
 .../user-profile-passkeys-section.view.tsx    | 30 ++++++++--
 .../mosaic/src/hooks/useListRemovalFocus.ts   | 44 +++++++++++++++
 .../stories/user-profile-passkeys-section.mdx |  2 -
 8 files changed, 129 insertions(+), 55 deletions(-)
 create mode 100644 packages/mosaic/src/hooks/useListRemovalFocus.ts

diff --git a/.changeset/calm-passkeys-views.md b/.changeset/calm-passkeys-views.md
index 94c52e0c8a0..a845151cc84 100644
--- a/.changeset/calm-passkeys-views.md
+++ b/.changeset/calm-passkeys-views.md
@@ -1,5 +1,2 @@
 ---
-'@clerk/mosaic': patch
 ---
-
-Add a passkey section to Mosaic user profiles with actions to add, rename, and remove passkeys.
diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
index e86d5624c40..fd65d4206b1 100644
--- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
+++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx
@@ -66,6 +66,29 @@ describe('passkeys section', () => {
     expect(onRemove).toHaveBeenCalledExactlyOnceWith('phone');
     await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
   });
+  it.each([
+    ['MacBook', 'iPhone'],
+    ['iPhone', 'MacBook'],
+  ])('returns focus from removed %s to remaining %s', async (removed, remaining) => {
+    const user = userEvent.setup();
+    function Example() {
+      const [items, setItems] = useState(passkeys);
+      return (
+        <MosaicProvider>
+          <UserProfilePasskeysSectionView
+            passkeys={items}
+            onRemove={id => setItems(current => current.filter(item => item.id !== id))}
+          />
+        </MosaicProvider>
+      );
+    }
+    render(<Example />);
+    await user.click(screen.getByRole('button', { name: `Manage ${removed}` }));
+    await user.click(screen.getByRole('menuitem', { name: 'Remove passkey' }));
+    await user.click(screen.getByRole('button', { name: 'Remove', exact: true }));
+    await waitFor(() => expect(screen.getByRole('button', { name: `Manage ${remaining}` })).toHaveFocus());
+  });
+
   it('renames through a prefilled form, preserves the draft after failure, and retries', async () => {
     const user = userEvent.setup();
     const onRename = vi.fn().mockRejectedValueOnce(new Error('Try again')).mockResolvedValueOnce(undefined);
@@ -111,13 +134,15 @@ describe('passkeys section', () => {
     renderView({ passkeys: [], onAdd, addError: 'Could not create passkey' });
 
     expect(screen.getByRole('alert')).toHaveTextContent('Could not create passkey');
+    expect(screen.getByRole('alert')).toHaveAttribute('data-open');
+    expect(screen.getByRole('alert')).toHaveAttribute('data-starting-style');
     const addButton = screen.getByRole('button', { name: 'Add passkey' });
     expect(addButton).toHaveTextContent(/^Add$/);
     await user.click(addButton);
     expect(onAdd).toHaveBeenCalledOnce();
   });
 
-  it('finishes removing the final passkey after pending work and keeps Add available', async () => {
+  it.each([true, false])('restores focus after removing the final passkey with Add available: %s', async hasAdd => {
     const user = userEvent.setup();
     let finish = () => {};
     const pending = new Promise<void>(resolve => {
@@ -129,7 +154,7 @@ describe('passkeys section', () => {
         <MosaicProvider>
           <UserProfilePasskeysSectionView
             passkeys={items}
-            onAdd={() => setItems([passkeys[0]])}
+            onAdd={hasAdd ? () => setItems([passkeys[0]]) : undefined}
             onRemove={async () => {
               await pending;
               setItems([]);
@@ -149,8 +174,13 @@ describe('passkeys section', () => {
     });
     await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
     expect(screen.queryByText('MacBook')).not.toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: 'Add passkey' }));
-    expect(screen.getByText('MacBook')).toBeVisible();
+    if (hasAdd) {
+      expect(screen.getByRole('button', { name: 'Add passkey' })).toHaveFocus();
+      await user.click(screen.getByRole('button', { name: 'Add passkey' }));
+      expect(screen.getByText('MacBook')).toBeVisible();
+    } else {
+      expect(screen.getByRole('region', { name: 'Passkeys' })).toHaveFocus();
+    }
   });
 
   it('retries removal for the same passkey after a failure', async () => {
diff --git a/packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx
index f6ade3eee26..1e95393de41 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx
@@ -1,4 +1,5 @@
 import * as stylex from '@stylexjs/stylex';
+import type { Ref } from 'react';
 import { useMemo, useRef, useState } from 'react';
 
 import { Confirmation } from '../../blocks/confirmation';
@@ -6,6 +7,7 @@ import { Badge } from '../../components/badge';
 import { SubmitButton } from '../../components/button';
 import { Dialog } from '../../components/dialog';
 import { Section } from '../../components/section';
+import { useListRemovalFocus } from '../../hooks/useListRemovalFocus';
 import type { MosaicMessages } from '../../localization';
 import { fill, useMessages } from '../../localization';
 import type { UserProfileMenuAction } from './user-profile-action-menu';
@@ -36,42 +38,13 @@ export function UserProfileActiveDevicesSectionView({
 
   const openSignOut = onSignOutDevice ? (device: UserProfileDevice) => signOutDevice.open(device) : undefined;
 
-  const triggers = useRef(new Map<string, HTMLButtonElement>());
-  const signedOut = useRef<{ id: string; index: number } | undefined>(undefined);
-
-  const registerTrigger = (id: string) => (element: HTMLButtonElement | null) => {
-    if (element) {
-      triggers.current.set(id, element);
-    } else {
-      triggers.current.delete(id);
-    }
-  };
-
-  const signOutDeviceAt = onSignOutDevice
-    ? async (device: UserProfileDevice) => {
-        const index = otherDevices.findIndex(other => other.id === device.id);
-        await onSignOutDevice(device.id);
-        // Recorded only once the device is really gone, so a cancelled or failed attempt still
-        // returns focus to the row's own menu.
-        signedOut.current = { id: device.id, index };
-      }
-    : undefined;
-
-  // The row the dialog was opened from has just unmounted, so focus goes to whichever row took
-  // its place — the last one if it was the last, the current device once none are left.
-  const focusAfterSignOut = () => {
-    const removed = signedOut.current;
-    signedOut.current = undefined;
-    if (!removed) {
-      return null;
-    }
-    // Filtered by id as well as index: a caller whose list only catches up on a later refetch
-    // still has the signed-out row here, and handing focus back to it loses focus all over again
-    // when it goes.
-    const remaining = devices.filter(device => !device.isCurrent && device.id !== removed.id);
-    const next = remaining[Math.min(removed.index, remaining.length - 1)] ?? currentDevices[0];
-    return (next && triggers.current.get(next.id)) ?? null;
-  };
+  const currentDeviceTrigger = useRef<HTMLButtonElement>(null);
+  const removalFocus = useListRemovalFocus({
+    ids: otherDevices.map(device => device.id),
+    onRemove: onSignOutDevice,
+    fallback: () => currentDeviceTrigger.current,
+  });
+  const signOutDeviceAt = onSignOutDevice ? (device: UserProfileDevice) => removalFocus.remove(device.id) : undefined;
 
   const [isSigningOutAll, setIsSigningOutAll] = useState(false);
   const [signOutAllError, setSignOutAllError] = useState<string>();
@@ -104,7 +77,7 @@ export function UserProfileActiveDevicesSectionView({
               <Section.Row key={device.id}>
                 <DeviceItem
                   device={device}
-                  triggerRef={registerTrigger(device.id)}
+                  triggerRef={device.id === currentDevices[0]?.id ? currentDeviceTrigger : undefined}
                   onViewDetails={device => deviceDetails.open(device)}
                 />
               </Section.Row>
@@ -153,7 +126,7 @@ export function UserProfileActiveDevicesSectionView({
                   <DeviceItem
                     key={device.id}
                     device={device}
-                    triggerRef={registerTrigger(device.id)}
+                    triggerRef={removalFocus.registerTrigger(device.id)}
                     onSignOut={openSignOut}
                     onViewDetails={device => deviceDetails.open(device)}
                   />
@@ -165,7 +138,7 @@ export function UserProfileActiveDevicesSectionView({
       ) : null}
       <UserProfileDeviceDetailsDialog
         handle={deviceDetails}
-        finalFocus={focusAfterSignOut}
+        finalFocus={removalFocus.finalFocus}
         onSignOut={signOutDeviceAt}
       />
       {onSignOutDevice ? (
@@ -176,7 +149,7 @@ export function UserProfileActiveDevicesSectionView({
           description={device => fill(m.signOutDialog.description, { name: device.name })}
           actionLabel={m.signOutDialog.confirm}
           cancelLabel={m.signOutDialog.cancel}
-          finalFocus={focusAfterSignOut}
+          finalFocus={removalFocus.finalFocus}
           onConfirm={device => signOutDeviceAt?.(device)}
         />
       ) : null}
@@ -200,7 +173,7 @@ function DeviceItem({
   onSignOut,
 }: {
   device: UserProfileDevice;
-  triggerRef: (element: HTMLButtonElement | null) => void;
+  triggerRef?: Ref<HTMLButtonElement>;
   onViewDetails: (device: UserProfileDevice) => void;
   onSignOut?: (device: UserProfileDevice) => void;
 }) {
diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
index 324a79095a3..ee428cc0ef0 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
@@ -1,3 +1,4 @@
+import type { Ref } from 'react';
 import { useMemo } from 'react';
 
 import { Dialog } from '../../components/dialog';
@@ -14,10 +15,12 @@ import { UserProfileRenamePasskeyDialog } from './user-profile-rename-passkey.di
 
 export function UserProfilePasskeyRowView({
   passkey,
+  triggerRef,
   onRename,
   onRemove,
 }: {
   passkey: UserProfilePasskey;
+  triggerRef?: Ref<HTMLButtonElement>;
   onRename?: (id: string, name: string) => void | Promise<void>;
   onRemove?: () => void;
 }) {
@@ -59,6 +62,7 @@ export function UserProfilePasskeyRowView({
         {actions.length > 0 ? (
           <Section.Actions>
             <UserProfileActionMenu
+              triggerRef={triggerRef}
               actions={actions}
               label={fill(m.manage, { name: passkey.name })}
             />
diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.styles.ts
index ab368ec2077..78853e524bf 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.styles.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.styles.ts
@@ -1,8 +1,14 @@
 import * as stylex from '@stylexjs/stylex';
 
-import { colorVars } from '../../tokens.stylex';
+import { colorVars, space } from '../../tokens.stylex';
 
 export const styles = stylex.create({
+  addError: {
+    marginTop: {
+      default: space['2'],
+      ':where(:not([data-open]), [data-starting-style])': 0,
+    },
+  },
   icon: {
     color: colorVars['--cl-color-foreground-secondary'],
   },
diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
index f6c75b52f5f..f462de1c120 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx
@@ -1,12 +1,15 @@
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 
 import { Confirmation } from '../../blocks/confirmation';
 import { Button } from '../../components/button';
+import { Field } from '../../components/field';
 import { Icon } from '../../components/icon';
 import { Section } from '../../components/section';
+import { useListRemovalFocus } from '../../hooks/useListRemovalFocus';
 import { fill } from '../../localization/messages';
 import { UserProfilePasskeyRowView } from './user-profile-passkey-row.view';
 import { userProfilePasskeysMessages as m } from './user-profile-passkeys-section.messages';
+import { styles } from './user-profile-passkeys-section.styles';
 
 export interface UserProfilePasskey {
   id: string;
@@ -32,11 +35,22 @@ export function UserProfilePasskeysSectionView({
   onRename,
   onRemove,
 }: UserProfilePasskeysSectionViewProps) {
+  const addButton = useRef<HTMLButtonElement>(null);
+  const section = useRef<HTMLElement>(null);
+  const removalFocus = useListRemovalFocus({
+    ids: passkeys.map(passkey => passkey.id),
+    onRemove,
+    fallback: () => addButton.current ?? section.current,
+  });
   const removePasskey = useMemo(() => Confirmation.createHandle<UserProfilePasskey>(), []);
 
   return (
     <>
-      <Section.Root aria-label={sectionTitle ? undefined : m.label}>
+      <Section.Root
+        ref={section}
+        tabIndex={-1}
+        aria-label={sectionTitle ? undefined : m.label}
+      >
         {sectionTitle ? <Section.Title>{sectionTitle}</Section.Title> : null}
         <Section.Group>
           <Section.Row>
@@ -47,6 +61,7 @@ export function UserProfilePasskeysSectionView({
               {onAdd ? (
                 <Section.Actions>
                   <Button
+                    ref={addButton}
                     aria-label={m.addLabel}
                     color='neutral'
                     size='sm'
@@ -63,13 +78,19 @@ export function UserProfilePasskeysSectionView({
                 </Section.Actions>
               ) : null}
             </Section.Item>
-            {addError ? <Section.Error>{addError}</Section.Error> : null}
+            <Field.Message
+              role={addError ? 'alert' : 'status'}
+              xstyle={styles.addError}
+            >
+              <Field.Error>{addError}</Field.Error>
+            </Field.Message>
             {passkeys.length > 0 ? (
               <Section.Items>
                 {passkeys.map(passkey => (
                   <UserProfilePasskeyRowView
                     key={passkey.id}
                     passkey={passkey}
+                    triggerRef={removalFocus.registerTrigger(passkey.id)}
                     onRename={onRename}
                     onRemove={onRemove ? () => removePasskey.open(passkey) : undefined}
                   />
@@ -93,7 +114,8 @@ export function UserProfilePasskeysSectionView({
           title={m.removeTitle}
           description={passkey => fill(m.removeDescription, { name: passkey.name })}
           actionLabel={m.remove}
-          onConfirm={passkey => onRemove(passkey.id)}
+          finalFocus={removalFocus.finalFocus}
+          onConfirm={passkey => removalFocus.remove(passkey.id)}
         />
       ) : null}
     </>
diff --git a/packages/mosaic/src/hooks/useListRemovalFocus.ts b/packages/mosaic/src/hooks/useListRemovalFocus.ts
new file mode 100644
index 00000000000..1c38c6ae607
--- /dev/null
+++ b/packages/mosaic/src/hooks/useListRemovalFocus.ts
@@ -0,0 +1,44 @@
+import { useRef } from 'react';
+
+export function useListRemovalFocus({
+  ids,
+  onRemove,
+  fallback,
+}: {
+  ids: string[];
+  onRemove?: (id: string) => void | Promise<void>;
+  fallback: () => HTMLElement | null;
+}) {
+  const triggers = useRef(new Map<string, HTMLButtonElement>());
+  const removed = useRef<{ id: string; index: number } | undefined>(undefined);
+
+  const registerTrigger = (id: string) => (element: HTMLButtonElement | null) => {
+    if (element) {
+      triggers.current.set(id, element);
+    } else {
+      triggers.current.delete(id);
+    }
+  };
+
+  const remove = async (id: string) => {
+    if (!onRemove) {
+      return;
+    }
+    const index = ids.indexOf(id);
+    await onRemove(id);
+    removed.current = { id, index };
+  };
+
+  const finalFocus = () => {
+    const item = removed.current;
+    removed.current = undefined;
+    if (!item) {
+      return null;
+    }
+    const remaining = ids.filter(id => id !== item.id);
+    const next = remaining[Math.min(item.index, remaining.length - 1)];
+    return (next ? triggers.current.get(next) : undefined) ?? fallback();
+  };
+
+  return { registerTrigger, remove, finalFocus };
+}
diff --git a/packages/swingset/src/stories/user-profile-passkeys-section.mdx b/packages/swingset/src/stories/user-profile-passkeys-section.mdx
index bd5346ac2a9..b36689c2f9c 100644
--- a/packages/swingset/src/stories/user-profile-passkeys-section.mdx
+++ b/packages/swingset/src/stories/user-profile-passkeys-section.mdx
@@ -2,8 +2,6 @@ import * as Stories from './user-profile-passkeys-section.stories';
 
 # UserProfilePasskeysSection
 
-Manage passkey names and confirm removal. These examples mock creation; browser and authenticator interactions belong to the controller.
-
 ## Playground
 
 <Story name='Default' storyModule={Stories} composition={[