86 lines
3.4 KiB
Markdown
86 lines
3.4 KiB
Markdown
# 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.
|