# TASK METADATA

- **Target Files:** `ui/components/AdminInvitesPage.tsx`,
  `ui/components/AdminUserDetailsPage.tsx`, `ui/components/AdminRolesPage.tsx`,
  `ui/components/AdminAppsPage.tsx`, `ui/components/admin/drawers/*.tsx`,
  `ui/components/admin/*.tsx`, `ui/ui_scripts.test.ts`
- **Core Objective:** Phase 2 (Admin Drawers & Scripts): Decompose large admin
  pages by extracting form drawers under `ui/components/admin/drawers/` and
  client script blocks into dedicated SSR JSX script components under
  `ui/components/admin/`.
- **Dependencies:**
  `tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.md`
- **Additional Important Notes:** Strictly 100% pure Hono SSR JSX. Preserve all
  form submit handlers, action endpoints, and pass `ui/ui_scripts.test.ts`.

---

### 2. Architectural Considerations & Risks

- **Risks:**
  - Breaking admin drawer open/close functions or invite generation triggers if
    script functions are missing or mismatched.
- **Mitigation:**
  - Encapsulate scripts into dedicated SSR JSX script components
    (`AdminInvitesScript.tsx`, `AdminAppsScript.tsx`, etc.) and ensure all
    client IDs match.

### 3. Proposed Implementation

1. **Extract Admin Drawers (`ui/components/admin/drawers/`):**
   - `InviteDrawer.tsx`: Invite creation form and options from
     `AdminInvitesPage.tsx`.
   - `GrantDrawer.tsx`: Permission grant assignment form from
     `AdminUserDetailsPage.tsx`.
   - `RoleEditorDrawer.tsx`: Role creation/editing form and permission picker
     from `AdminRolesPage.tsx`.
   - `AppDrawer.tsx`: Connected application registration drawer from
     `AdminAppsPage.tsx`.

2. **Extract Admin Script Components (`ui/components/admin/`):**
   - `AdminInvitesScript.tsx`: Client-side handlers for invite generation,
     clipboard copy, and redemption modal.
   - `AdminAppsScript.tsx`: Client-side handlers for app registration, edit
     prefill, and delete.
   - `AdminRolesScript.tsx`: Client-side handlers for role save and permission
     checkboxes.
   - `AdminUserDetailsScript.tsx`: Client-side handlers for grant revoke and
     session kill.

3. **Quality Gates & Validation:**
   - Run `deno fmt`, `deno task lint`, `deno task check`.
   - Run `deno test --allow-all` (ensure `ui/ui_scripts.test.ts` passes).