# TASK METADATA

- **Target Files:** `ui/components/AppLaunchpadPage.tsx`,
  `ui/components/SessionsPage.tsx`, `ui/components/PasskeysPage.tsx`,
  `server/main.ts`, `server/recovery.ts`
- **Core Objective:** Convert Launchpad, Sessions, and Passkeys views from rigid
  desktop tables into responsive card decks, and add an Emergency Recovery
  Backup management card (view status, reset recovery PIN, re-generate 12-word
  voucher).
- **Dependencies:**
  `tasks/new/2026-0824.04.gem.feat.ui-shell.design-tokens-and-adaptive-nav-2215.md`
- **Additional Important Notes:** Must ensure single-tap revocation, add-passkey
  actions, and emergency recovery voucher management work smoothly on
  touchscreens.

---

## 1. TASK METADATA

The header block specifies target user hub templates, core objective,
dependencies, and constraints.

## 2. Architectural Considerations & Risks

### Risks

- **Accidental Session Revocation:** Touchscreens have a higher risk of
  accidental taps on destructive actions (e.g. revoking the active session).
  - _Mitigation:_ Highlight the "Current Device" with an emerald badge to
    distinguish it from remote sessions, and provide confirmation feedback on
    single-tap revocation.
- **Recovery PIN Reset Security:** Resetting a recovery PIN or regenerating the
  2-of-3 SSS shares must require an authenticated session and live passkey user
  verification to prevent unauthorized recovery tampering.
  - _Mitigation:_ Re-verify user authentication before accepting updated
    recovery PIN hashes.

### Alternatives

- **Responsive Table Overflow vs Card Decks:** Horizontal scrolling tables on
  mobile force uncomfortable two-axis panning. Adaptive card stacks provide a
  native, scannable layout on narrow screens while maintaining full metadata
  clarity.

## 3. Proposed Implementation

### Phase 1: Application Launchpad Card Grid

1. In `ui/components/AppLaunchpadPage.tsx`:
   - Structure app items into modern elevated cards with app logo/glyph,
     application name, domain link, and role badge (`Admin` / `Member` /
     `Viewer`).
   - Add full-width 48px "Launch App ↗" button on mobile, switching to fluid
     grid tiles on desktop.

### Phase 2: Adaptive Sessions Cards

1. In `ui/components/SessionsPage.tsx`:
   - Replace table rows on mobile with structured cards:
     - Device type icon and IP badge.
     - "Current Device" badge for active session.
     - Formatted relative timestamp ("Active now", "Created 2 hours ago").
     - Single-tap "Revoke Session" button.
   - Prominent top action: "Revoke All Other Sessions".

### Phase 3: Adaptive Passkeys Manager & Emergency Recovery Card

1. In `ui/components/PasskeysPage.tsx`:
   - Render passkey cards with authenticator vendor badge (via AAGUID lookup).
   - Display passkey nickname, truncated credential ID, and creation date.
   - Large "Add Another Passkey" hero action button for easy multi-device
     enrollment.
   - Single-tap "Remove Passkey" button with confirmation.
   - **Emergency Recovery Backup Card**:
     - Display current recovery configuration status (e.g. "PIN Protected +
       12-Word Voucher Configured").
     - Action buttons to:
       1. "Reset Recovery PIN"
       2. "Re-generate Recovery Voucher & Shares" (with 1-tap copy modal).

### Phase 4: Verification & Quality Gates

1. Run `deno fmt ui/**/*.tsx`.
2. Run `deno task lint` and `deno task check`.
3. Run `deno task test` to ensure all dashboard rendering tests pass.