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

3.0 KiB
Raw Blame History

TASK METADATA

  • Target Files: ui/components/AppLaunchpadPage.tsx, ui/components/SessionsPage.tsx, ui/components/PasskeysPage.tsx
  • Core Objective: Convert Launchpad, Sessions, and Passkeys views from rigid desktop tables into responsive, touch-friendly card decks with device icons, AAGUID brand chips, and 1-tap revocation actions.
  • 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 and add-passkey actions work flawlessly on mobile touchscreens without accidental mis-clicks.

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.
  • Information Density vs Screen Space: Displaying raw UUIDs, AAGUIDs, and long User-Agent strings clutters mobile viewports.
    • Mitigation: Truncate IDs to 8 characters with a 1-tap copy action, and display friendly device labels (📱 Phone, 💻 Laptop) and known AAGUID vendor names (Google Password Manager, Apple Keychain, YubiKey).

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

  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.

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.