TASK METADATA

Target Files: ui/components/SessionsPage.tsx, ui/components/sessions/WorkshopDrawer.tsx, ui/components/sessions/SessionsScript.tsx, ui/ui_scripts.test.ts
Core Objective: Overhaul visual hierarchy of /dashboard/sessions and enforce strict 2-state mutually exclusive rendering in WorkshopDrawer.tsx.
Dependencies: None.
Additional Important Notes: Must use pure vanilla JavaScript for DOM manipulation (no React/framework state). Ensure copy pills trigger accessible notifications (aria-live/toast) with explicit aria-label tags. Fix double emoji bug in JS. Ensure mobile title wrapping. All changes must pass ui/ui_scripts.test.ts.

2. Architectural Considerations & Risks

Risks:
- DOM Manipulation Regression: Because this UI operates strictly on vanilla JavaScript, changing the layout and grouping DOM elements within new containers (#eventCreateState and #eventHandoffState) risks breaking existing DOM ID bindings in SessionsScript.tsx. All existing DOM IDs must be preserved.
- Test Compatibility: Client scripts are validated via hermetic execution in ui/ui_scripts.test.ts. Script modifications must remain structurally valid and strictly avoid any external framework dependencies.
- Mobile Layout Breakage: When fixing long titles to wrap correctly, CSS properties overflow-wrap: break-word and word-break: break-word must be paired with bounded max-widths to prevent horizontal container stretching.
Alternatives:
- The container-based 2-state machine approach for WorkshopDrawer.tsx is native and robust. Using a class-based toggle was considered, but explicit element display manipulation is clearer for the specific 2-state requirement.

Header Block Relocation: Move the main header block (<h1>Active Sessions & Passes</h1>, subtitle, and [ 🔑 Delegate Session ] button) to be the uppermost visible element below the #status-banner.
Section Hierarchy:
- Section 1: EventCockpitDeck (Event Passes cards). If 0 event passes exist, render a clean empty state or let the deck cleanly return null without an orphaned section heading.
- Section 2: SessionTable / SessionDeck (Active Sessions).

State 1 (#eventCreateState): Wrap the initial creation form (#eventForm), inputs, submit button, and cancel button in <div id="eventCreateState" style="display: block;">.
State 2 (#eventHandoffState): Wrap the credential cards in <div id="eventHandoffState" style="display: none;">.
- Render the 3 distinct cards (PIN + /join, Direct Link, CLI 1-Liner).
- Add explicit aria-label on copy buttons ("Copy Universal PIN", "Copy Direct Link", "Copy Terminal curl command").
- Render a single "Dismiss" button at the bottom of #eventHandoffState.
Drawer Title Transition: Add id="eventDrawerHeaderTitle" to the top header so JavaScript can transition it from "New Event Pass" \rightarrow "Event Pass Active".
Mobile Title Wrapping: Ensure createdEventTitle has overflow-wrap: break-word; word-break: break-word; with safe max-width.

State Toggling: Update handleCreateEvent so that upon successful creation:
- Sets document.getElementById('eventCreateState').style.display = 'none'.
- Sets document.getElementById('eventHandoffState').style.display = 'block'.
- Updates document.getElementById('eventDrawerHeaderTitle').textContent = 'Event Pass Active'.
Drawer Reset: When the drawer is closed or dismissed, reset state back:
- #eventCreateState.style.display = 'block'
- #eventHandoffState.style.display = 'none'
- Reset form inputs and restore header to 'New Event Pass'.
Emoji Fix: Remove the hardcoded '🎟️ ' prefix from the event title injection line: document.getElementById('createdEventTitle').textContent = ev.name + ' Live!';

Run deno fmt and deno task lint.
Run Deno tests: deno test --allow-all (specifically validating ui/ui_scripts.test.ts).