From 0249938459a7ef34132708c2bfda64c2f9ba12a4 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 26 Aug 2026 05:46:56 +0000
Subject: [PATCH] chore: Create UI Component Decomposition Roadmap task spec

Creates `tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.md` containing the architectural analysis and phased execution plan for modularizing `ui/` monoliths into pure SSR JSX components while maintaining testability.

Co-authored-by: mrteye <1945243+mrteye@users.noreply.github.com>
---
 ...tory.arch.ui-decomposition-roadmap-2300.md | 92 +++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.md

diff --git a/tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.md b/tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.md
new file mode 100644
index 0000000..3a01918
--- /dev/null
+++ b/tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.md
@@ -0,0 +1,92 @@
+# TASK METADATA
+
+- **Target Files:** `ui/components/SessionsPage.tsx`,
+  `ui/components/AdminInvitesPage.tsx`,
+  `ui/components/AdminUserDetailsPage.tsx`, `ui/components/AdminRolesPage.tsx`,
+  `ui/components/AdminAppsPage.tsx`, `ui/components/PasskeysPage.tsx`,
+  `ui/components/RegisterPage.tsx`, `ui/components/AuthenticatedLayout.tsx`,
+  `ui/public/ui/utils/bip39_wordlist.ts`, `ui/utils/bip39_wordlist.ts`
+- **Core Objective:** Conduct a deep architectural investigation of the `ui/`
+  directory and draft a comprehensive, phased UI Component Decomposition &
+  Client Script Modularization Roadmap to eliminate remaining monoliths (> 350
+  lines).
+- **Dependencies:** None.
+- **Additional Important Notes:**
+  - Strictly 100% pure Hono SSR JSX (zero React or virtual DOM).
+  - Client scripts must be extracted as pure SSR JSX script components (e.g.,
+    rendering `<script dangerouslySetInnerHTML={{ __html: ... }}>`) to prevent
+    static asset race conditions and maintain testability.
+  - Must preserve all existing HTML DOM IDs, CSS classes, and form bindings.
+  - Must pass all quality gates (`deno fmt`, `deno task lint`,
+    `deno task check`, and `ui/ui_scripts.test.ts`).
+
+---
+
+## Architectural Considerations & Risks
+
+- **Risks:**
+  - **DOM Binding Breakage:** Extracting structural components (e.g., Drawers,
+    Navbars) alongside their corresponding Vanilla JS controller scripts carries
+    a high risk of breaking DOM IDs, CSS class selectors, or form bindings if
+    not done synchronously.
+  - **Script Scope Leaks & Reference Errors:** Since `ui_scripts.test.ts`
+    validates syntax in-memory, extracting monolithic scripts into modular SSR
+    JSX script blocks could introduce undeclared variables if inter-script
+    dependencies are broken.
+  - **Validation Collision:** In zero-framework forms (especially in tabs or
+    drawers), ensuring distinct HTML5 `<form>` elements are preserved during
+    extraction is critical to avoid 'required' field validation collisions.
+
+- **Alternatives:**
+  - Instead of extracting `.js` as static HTTP assets (which could improve
+    caching but introduce loading race conditions and break
+    `ui_scripts.test.ts`), we deliberately chose **SSR JSX Script Components**.
+    This approach encapsulates the vanilla JS alongside the component,
+    preserving hermetic testing capability and avoiding external browser network
+    overhead.
+
+## Proposed Implementation
+
+### Phase 1: Sessions & Layout Extraction (Targeting `AuthenticatedLayout.tsx` and `SessionsPage.tsx`)
+
+- **Layout Componentization:**
+  - Create `ui/components/layout/Navbar.tsx`.
+  - Create `ui/components/layout/MobileSidebar.tsx`.
+  - Create `ui/components/layout/UserMenu.tsx`.
+  - Refactor `AuthenticatedLayout.tsx` to compose these modular components.
+- **Sessions Componentization:**
+  - Create `ui/components/sessions/` directory.
+  - Extract the active session table and deck rendering logic into distinct
+    subcomponents (e.g., `SessionTable.tsx`, `SessionDeck.tsx`).
+  - Extract the embedded Vanilla JS block from `SessionsPage.tsx` into
+    `ui/components/sessions/SessionsScript.tsx` using the
+    `dangerouslySetInnerHTML` pattern.
+
+### Phase 2: Admin Drawers Modularization (Targeting `Admin*Page.tsx`)
+
+- **Drawer Componentization:**
+  - Create `ui/components/admin/drawers/` directory.
+  - Extract `InviteDrawer.tsx` from `AdminInvitesPage.tsx`.
+  - Extract `GrantDrawer.tsx` from `AdminUserDetailsPage.tsx`.
+  - Extract `RoleEditorDrawer.tsx` from `AdminRolesPage.tsx`.
+  - Extract `AppDrawer.tsx` from `AdminAppsPage.tsx`.
+- **Script Modularization:**
+  - Extract the embedded client scripts from each admin page into dedicated SSR
+    JSX script components (e.g., `AdminInvitesScript.tsx`,
+    `AdminAppsScript.tsx`) within `ui/components/admin/`.
+
+### Phase 3: WebAuthn Client Scripts & Asset Deduplication (Targeting `PasskeysPage.tsx`, `RegisterPage.tsx`, and assets)
+
+- **WebAuthn Script Extraction:**
+  - Create `ui/components/auth/` directory.
+  - Consolidate and extract the shared WebAuthn client ceremony helper scripts
+    (`webauthn.client.js` equivalent) from both `PasskeysPage.tsx` and
+    `RegisterPage.tsx` into `ui/components/auth/WebAuthnScript.tsx`.
+  - Move related structural subcomponents (like a `PasskeyTable.tsx`) to
+    `ui/components/auth/` as needed.
+- **Wordlist Asset Deduplication:**
+  - Delete `ui/public/ui/utils/bip39_wordlist.ts`.
+  - Update any import statements referencing the deleted file to point to the
+    canonical `ui/utils/bip39_wordlist.ts`.
+  - Verify that `deno task check` and `deno test` still pass to ensure all
+    references are correctly updated.