From dc2b5488c86f2da02d0541f0efbfdfd11ab09bf4 Mon Sep 17 00:00:00 2001
From: Tyler Gillispie <mrteye@gmail.com>
Date: Tue, 25 Aug 2026 22:48:17 -0700
Subject: [PATCH] docs(tasks): establish discrete phase task files ph1 through
 ph3 for ui decomposition roadmap

---
 ....arch.ui-decomposition-roadmap-2300.ph1.md | 54 +++++++++++++++++++
 ....arch.ui-decomposition-roadmap-2300.ph2.md | 52 ++++++++++++++++++
 ....arch.ui-decomposition-roadmap-2300.ph3.md | 44 +++++++++++++++
 3 files changed, 150 insertions(+)
 create mode 100644 tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.ph1.md
 create mode 100644 tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.ph2.md
 create mode 100644 tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.ph3.md

diff --git a/tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.ph1.md b/tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.ph1.md
new file mode 100644
index 0000000..d800dc5
--- /dev/null
+++ b/tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.ph1.md
@@ -0,0 +1,54 @@
+# TASK METADATA
+
+- **Target Files:** `ui/components/SessionsPage.tsx`,
+  `ui/components/AuthenticatedLayout.tsx`, `ui/components/layout/Navbar.tsx`,
+  `ui/components/layout/MobileSidebar.tsx`, `ui/components/layout/UserMenu.tsx`,
+  `ui/components/sessions/SessionTable.tsx`,
+  `ui/components/sessions/SessionDeck.tsx`,
+  `ui/components/sessions/SessionsScript.tsx`, `ui/ui_scripts.test.ts`
+- **Core Objective:** Phase 1 (Sessions & Layout Extraction): Refactor
+  `AuthenticatedLayout.tsx` (372 lines) and `SessionsPage.tsx` (754 lines) by
+  extracting layout components into `ui/components/layout/` and session
+  table/script components into `ui/components/sessions/`.
+- **Dependencies:**
+  `tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.md`
+- **Additional Important Notes:** Strictly 100% pure Hono SSR JSX. Client
+  scripts must be extracted as pure SSR JSX script components rendering
+  `<script dangerouslySetInnerHTML={{ __html: ... }}>`. Must pass
+  `ui/ui_scripts.test.ts`.
+
+---
+
+### 2. Architectural Considerations & Risks
+
+- **Risks:**
+  - Breaking active session extension (`extendSession`), revocation
+    (`revoke-btn`), or scope modal bindings if DOM element IDs or event listener
+    selectors are altered.
+  - Breaking mobile navigation sidebar drawer toggle (`openMobileMenu`,
+    `closeMobileMenu`).
+- **Mitigation:**
+  - Retain exact DOM IDs (`delegateDrawer`, `tabDirectPass`, `tabWorkshopPass`,
+    `sessionsMobileDeck`, etc.) and CSS selectors.
+
+### 3. Proposed Implementation
+
+1. **Layout Decomposition (`ui/components/layout/`):**
+   - `Navbar.tsx`: Top navigation header, logo, brand link, and desktop
+     navigation items.
+   - `MobileSidebar.tsx`: Mobile slide-out drawer navigation with route links.
+   - `UserMenu.tsx`: User profile trigger and popover dropdown.
+   - `AuthenticatedLayout.tsx`: Refactor to compose the extracted layout
+     components.
+
+2. **Sessions Decomposition (`ui/components/sessions/`):**
+   - `SessionTable.tsx`: Desktop table rendering for active interactive and
+     delegated sessions.
+   - `SessionDeck.tsx`: Mobile responsive card deck view (< 768px).
+   - `SessionsScript.tsx`: SSR JSX script component containing client-side event
+     handlers and tab switcher.
+   - `SessionsPage.tsx`: Assemble the subcomponents into the clean page shell.
+
+3. **Quality Gates & Validation:**
+   - Run `deno fmt`, `deno task lint`, `deno task check`.
+   - Run `deno test --allow-all` (specifically `ui/ui_scripts.test.ts`).
diff --git a/tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.ph2.md b/tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.ph2.md
new file mode 100644
index 0000000..a217d56
--- /dev/null
+++ b/tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.ph2.md
@@ -0,0 +1,52 @@
+# 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).
diff --git a/tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.ph3.md b/tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.ph3.md
new file mode 100644
index 0000000..6a7b9cd
--- /dev/null
+++ b/tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.ph3.md
@@ -0,0 +1,44 @@
+# TASK METADATA
+
+- **Target Files:** `ui/components/PasskeysPage.tsx`,
+  `ui/components/RegisterPage.tsx`, `ui/components/auth/PasskeyTable.tsx`,
+  `ui/components/auth/WebAuthnScript.tsx`,
+  `ui/public/ui/utils/bip39_wordlist.ts`, `ui/utils/bip39_wordlist.ts`,
+  `ui/ui_scripts.test.ts`
+- **Core Objective:** Phase 3 (WebAuthn Scripts & Asset Deduplication): Extract
+  shared WebAuthn client ceremony helper scripts into
+  `ui/components/auth/WebAuthnScript.tsx`, modularize `PasskeysPage.tsx`, and
+  delete the duplicate 2,051-line `ui/public/ui/utils/bip39_wordlist.ts` asset.
+- **Dependencies:**
+  `tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.md`
+- **Additional Important Notes:** Strictly 100% pure Hono SSR JSX. Preserve
+  WebAuthn challenge/verify ceremonies, passkey deletion, and verify all
+  wordlist imports point to `ui/utils/bip39_wordlist.ts`.
+
+---
+
+### 2. Architectural Considerations & Risks
+
+- **Risks:**
+  - Broken WebAuthn registration/login ceremony if base64url or credential
+    creation helpers are altered.
+  - Broken imports if files still reference the deleted
+    `ui/public/ui/utils/bip39_wordlist.ts`.
+- **Mitigation:**
+  - Verify with `deno task check` and `deno test --allow-all`.
+
+### 3. Proposed Implementation
+
+1. **Extract WebAuthn Components & Scripts (`ui/components/auth/`):**
+   - `PasskeyTable.tsx`: Passkeys list table and mobile deck rendering.
+   - `WebAuthnScript.tsx`: SSR JSX script component containing shared base64url
+     converters, biometric ceremony triggers, and challenge handlers.
+
+2. **Deduplicate Wordlist Asset:**
+   - Delete `ui/public/ui/utils/bip39_wordlist.ts`.
+   - Update any import statements to point directly to
+     `ui/utils/bip39_wordlist.ts`.
+
+3. **Quality Gates & Validation:**
+   - Run `deno fmt`, `deno task lint`, `deno task check`.
+   - Run `deno test --allow-all` (all 58 tests must pass).