# 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.