# TASK METADATA

- **Target Files:** `ui/components/AdminUsersPage.tsx`,
  `ui/components/AdminUserDetailsPage.tsx`, `ui/components/AdminAppsPage.tsx`,
  `ui/components/AdminInvitesPage.tsx`, `ui/components/AdminRolesPage.tsx`,
  `ui/components/AuditLogPage.tsx`
- **Core Objective:** Adapt admin management screens (Users, Invites, Apps,
  Roles, Audit Logs) into responsive mobile card lists with horizontal
  sub-navigation and quick search filters.
- **Dependencies:**
  `tasks/new/2026-0824.04.gem.feat.ui-shell.design-tokens-and-adaptive-nav-2215.md`
- **Additional Important Notes:** Must preserve high-density table views on wide
  screens while providing seamless mobile card layouts for system administrators
  on mobile devices.

---

## 1. TASK METADATA

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

## 2. Architectural Considerations & Risks

### Risks

- **Audit Log Volume on Mobile:** Large audit log event streams can degrade
  mobile rendering performance if loaded all at once.
  - _Mitigation:_ Implement pagination / limit query rendering to recent events
    with an expandable JSON detail drawer for raw event metadata.
- **Admin Action Mis-triggers:** Role modifications or user deletions on mobile
  touchscreens need clear danger boundaries.
  - _Mitigation:_ Use color-coded danger buttons (`btn-danger`) with
    confirmation prompts on high-impact administrative actions.

### Alternatives

- **Separate Mobile Admin App vs Adaptive SSR Views:** Building a separate
  mobile admin view duplicates route handlers. Using adaptive CSS
  `@media (max-width: 768px)` card transformations preserves a single unified
  codebase in pure Hono SSR JSX.

## 3. Proposed Implementation

### Phase 1: Mobile User & Invite Management

1. In `ui/components/AdminUsersPage.tsx` and
   `ui/components/AdminUserDetailsPage.tsx`:
   - Render user cards on mobile with avatar initials, username, creation date,
     role grant badges, and 1-tap action buttons (Edit Roles, Revoke).
   - Add responsive top search filter input.
2. In `ui/components/AdminInvitesPage.tsx`:
   - Render active invite codes as copy-ready cards with 1-tap clipboard action
     and expiration countdown badges.

### Phase 2: App Registry & Role Grants

1. In `ui/components/AdminAppsPage.tsx` and `ui/components/AdminRolesPage.tsx`:
   - Transform apps list into responsive cards showing domain, bypass paths,
     SPIFFE ID, and assigned user roles.

### Phase 3: Audit Log Event Feed

1. In `ui/components/AuditLogPage.tsx`:
   - Implement responsive timeline card feed with color-coded event chips
     (`login_success` in green, `login_failed` in red, `grant_revoked` in
     amber).
   - Add expandable JSON detail viewer for raw event payloads.

### 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 admin routes and SSR components pass
   cleanly.