# 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`).