docs(tasks): establish discrete phase task files ph1 through ph3 for ui decomposition roadmap
This commit is contained in:
parent
f40a731ab4
commit
dc2b5488c8
@ -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`).
|
||||
@ -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).
|
||||
@ -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).
|
||||
Loading…
x
Reference in New Issue
Block a user