tylerg/auth-yes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
auth-yes/tasks/complete/2026-0824.06.gem.feat.ui-user-hub.adaptive-launchpad-sessions-passkeys-2217.md

3.4 KiB
Raw Blame History

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.