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

## Proposed Implementation

### 1. Page Hierarchy Update (`ui/components/SessionsPage.tsx`)

- 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.

### 2. WorkshopDrawer 2-State Machine (`ui/components/sessions/WorkshopDrawer.tsx`)

- 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.

### 3. JavaScript Logic Update (`ui/components/sessions/SessionsScript.tsx`)

- **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.

### 4. Quality Gates

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