auth-yes/tasks/new/2026-0826.01.jul.feat.ui.sessions-layout-drawer-machine-2156.md

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.