TASK METADATA

Target Files: ui/components/SessionsPage.tsx, ui/components/sessions/WorkshopDrawer.tsx, ui/components/sessions/SessionsScript.tsx
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). Fix double emoji bug in JS. Ensure mobile title wrapping. All changes must pass ui/ui_scripts.test.ts.

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 (like #eventCreateState and #eventHandoffState) risks breaking existing DOM ID bindings in SessionsScript.tsx if IDs are changed or misplaced. We must strictly preserve all existing DOM IDs.
- Test Compatibility: The client-side scripts are tested via hermetic new Function() execution in ui/ui_scripts.test.ts (validateJsSyntax). The script modifications must remain structurally valid and strictly avoid any unsupported syntax or external framework dependencies.
- Mobile Layout Breakage: When fixing the long titles to wrap correctly, we must ensure CSS properties like word-break: break-word and overflow-wrap: break-word don't inadvertently stretch flex containers horizontally on small screens.
Alternatives:
- The proposed container-based 2-state machine approach for WorkshopDrawer.tsx is native and robust. It's the most appropriate solution given our constraints (no client-side frameworks). Using a class-based toggle could also work, but explicit element display manipulation is clearer for the specific 2-state requirement.

Relocate the main header block (containing <h1>Active Sessions & Passes</h1> and the [ 🔑 Delegate Session ] button) to be the uppermost visible element below the #status-banner.
Move the EventCockpitDeck component to render below the new header block.
Keep the SessionTable and SessionDeck at the bottom.

Wrap the initial creation form (#eventForm), including inputs, submit button, and cancel button, into a new container div with id="eventCreateState". Default this container to display: block.
Rename or wrap the #eventHandoffModal content into a new container div with id="eventHandoffState". Default this container to display: none.
In #eventHandoffState, ensure it contains the 3 cards (PIN + /join, Direct Link, CLI 1-Liner) and update the final button to be a single "Dismiss" button.
Ensure createdEventTitle has overflow-wrap: break-word and word-break: break-word along with a max-width to allow long titles to wrap cleanly on mobile screens.

State Toggling: Update handleCreateEvent so that upon successful creation, it sets document.getElementById('eventCreateState').style.display = 'none' and document.getElementById('eventHandoffState').style.display = 'block'.
Drawer Reset: Ensure when the delegate drawer is closed (via closeDelegateDrawer or the new Dismiss button), the states are reset: #eventCreateState to block, #eventHandoffState to none.
Emoji Fix: Remove the hardcoded '🎟️ ' prefix from the event title injection line: document.getElementById('createdEventTitle').textContent = ev.name + ' Live!';
Accessibility / Toast: Ensure copyEventHandoff function already triggers showNotice (which acts as a toast). Verify ARIA roles for the banner if necessary, or just rely on the existing showNotice function which is already in place.

Run Deno tests: deno test --allow-all (specifically validating ui/ui_scripts.test.ts).
Run code formatting: deno fmt.