# TASK METADATA

- **Target Files:**
  - `ui/components/SessionsPage.tsx`
  - `ui/ui_scripts.test.ts`
- **Core Objective:** Redesign the Sessions management page header and drawer to
  eliminate dual competing top buttons, restoring the clean single
  `[+ Delegate Session]` header action, and unifying both pass creation
  workflows (1:1 Direct Pass vs. Multi-Claim Workshop Pass) into clean internal
  drawer tabs.
- **Dependencies:** None.
- **Additional Important Notes:** Must maintain 100% compliance with
  zero-framework SSR JSX standards and pass `ui/ui_scripts.test.ts` without
  client-side syntax errors.

---

## Architectural Considerations & Risks

- **Risks:** The primary risk involves introducing JavaScript syntax errors when
  consolidating the drawer forms and adding the tab-switching logic. Since this
  is an SSR JSX environment without a framework like React, all DOM manipulation
  and state management (like toggling tabs) rely on raw inline or embedded
  `<script>` blocks. A syntax error here could break the page interactions and
  fail the `ui/ui_scripts.test.ts` gate.
- **Alternatives:** We could keep the forms completely separate, but this
  violates the core objective of eliminating cognitive clutter and unified
  navigation. The proposed vanilla JavaScript tab toggle is the most native and
  compliant approach for this specific architectural boundary.
- **UX Consistency:** The Event Cockpit Deck must remain rendered _above_ the
  Active Sessions table to ensure real-time visibility for workshop hosts.

## Proposed Implementation

### 1. Header Consolidation

- In `ui/components/SessionsPage.tsx`, locate the top header section.
- Remove the `[🎟️ + Create Workshop Pass]` button completely.
- Retain only the single, primary `[🔑 + Delegate Session]` button (and ensure
  it triggers `openDelegateDrawer()`).

### 2. Drawer Consolidation (`#delegateDrawer`)

- Remove the entire `#eventDrawer` DOM node.
- Inside `#delegateDrawer`, introduce a segmented flexbox tab selector at the
  top of the form area.
- Add the following styling for the tab container:
  `display: flex; background: var(--surface-muted); padding: 4px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); gap: 4px;`
- Add styling for the tab buttons:
  `flex: 1; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); border: none; font-weight: 600; cursor: pointer; transition: all 0.15s;`
  (Use an `.active` class with
  `background: var(--surface-card); color: var(--primary); box-shadow: var(--shadow-xs);`).
- Wrap the existing 1:1 Direct Pass form fields inside a
  `<div id="tabDirectPass">`.
- Move the fields from the deleted `#eventDrawer` into a new
  `<div id="tabWorkshopPass" style="display: none;">` inside `#delegateDrawer`.

### 3. JavaScript Tab-Switching Logic

- Add vanilla JavaScript functions to the embedded `<script>` block in
  `SessionsPage.tsx` to handle tab switching.
- Implement a function (e.g., `switchDelegateTab(tabId)`) that:
  - Toggles `display: block` and `display: none` between `#tabDirectPass` and
    `#tabWorkshopPass`.
  - Updates the active state styling on the corresponding tab buttons.

### 4. Code Cleanup

- Remove the `openEventDrawer()` and `closeEventDrawer()` functions from the
  `<script>` block.
- Ensure `closeDelegateDrawer()` correctly resets the forms or hides the drawer.

### 5. Quality Gates

- Run `deno fmt` and `deno task lint` to ensure code style compliance.
- Run `deno task test` to ensure `ui/ui_scripts.test.ts` passes, verifying there
  are no syntax errors in the newly consolidated `<script>` block.