# TASK METADATA

- **Target Files:** `ui/components/SessionsPage.tsx`,
  `ui/components/sessions/EventCockpitDeck.tsx`,
  `ui/components/sessions/DirectPassDrawer.tsx`,
  `ui/components/sessions/WorkshopDrawer.tsx`,
  `ui/components/sessions/ScopeModal.tsx`, `ui/ui_scripts.test.ts`
- **Core Objective:** Phase 1 (UI Sessions Decomposition): Refactor the
  monolithic `SessionsPage.tsx` (~1,500 lines) by extracting sub-sections into
  clean, dedicated subcomponents under `ui/components/sessions/` while
  preserving zero-framework SSR JSX purity and client script integrity.
- **Dependencies:**
  `tasks/new/2026-0825.01.jul.story.arch.monolith-decomposition-roadmap-1845.md`
- **Additional Important Notes:** Must pass `ui/ui_scripts.test.ts` with zero
  client-side syntax errors.

---

### 2. Architectural Considerations & Risks

- **Risks:**
  - Client-side script breakage or broken DOM element bindings if IDs/forms are
    altered during component extraction.
  - HTML5 form validation collisions if form elements are improperly nested.
- **Alternatives:**
  - Extracting to static external JS files; deferred to maintain hermetic SSR
    script validation within `ui_scripts.test.ts`.

### 3. Proposed Implementation

1. **Create Subcomponents (`ui/components/sessions/`):**
   - `EventCockpitDeck.tsx`: The Event Cockpit banner and live active event
     cards.
   - `DirectPassDrawer.tsx`: The 1:1 Direct Pass delegation form, presets, and
     `#handoffModal`.
   - `WorkshopDrawer.tsx`: The Multi-Claim Workshop Pass form, seat presets,
     vanity slug/PIN inputs, and `#eventHandoffModal`.
   - `ScopeModal.tsx`: The custom scope editor modal dialog.
2. **Refactor `ui/components/SessionsPage.tsx`:**
   - Import and assemble the subcomponents cleanly into the main page shell.
   - Retain the single header button (`[+ Delegate Session]`), segmented flexbox
     tab switcher, and Active Sessions table.
3. **Quality Gates & Validation:**
   - Run `deno fmt`, `deno task lint`, `deno task check`.
   - Run `deno test --allow-all` (specifically `ui/ui_scripts.test.ts`).