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.

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.

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.
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.
Quality Gates & Validation:
- Run deno fmt, deno task lint, deno task check.
- Run deno test --allow-all (specifically ui/ui_scripts.test.ts).