ui/components/SessionsPage.tsx

@@ -28,11 +28,11 @@ export const SessionsPage = ({
     >
       <div
         id="status-banner"
-        role="status"
-        aria-live="polite"
         style="display: none; margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); font-size: 0.9rem;"
       />
 
+      <EventCockpitDeck eventPasses={eventPasses} />
+
       <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
         <div>
           <h1 style="font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem 0; color: var(--text-primary);">
@@ -57,8 +57,6 @@ export const SessionsPage = ({
         </div>
       </div>
 
-      <EventCockpitDeck eventPasses={eventPasses} />
-
       {/* Delegate Session Drawer */}
       <div
         id="delegateDrawer"
@@ -68,10 +66,7 @@ export const SessionsPage = ({
         <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem;">
           <div style="width: 100%;">
             <div style="display: flex; justify-content: space-between; align-items: center;">
-              <h3
+              <h3 style="margin: 0 0 0.25rem 0; color: var(--text-primary);">
-                id="delegateDrawerTitle"
-                style="margin: 0 0 0.25rem 0; color: var(--text-primary);"
-              >
                 Create New Pass / Session
               </h3>
               <button

ui/components/sessions/SessionsScript.tsx

@@ -22,15 +22,6 @@ export const SessionsScript = () => {
 
           function closeDelegateDrawer() {
             document.getElementById('delegateDrawer').style.display = 'none';
-            // Reset WorkshopDrawer 2-State Machine
-            const eventCreateState = document.getElementById('eventCreateState');
-            if (eventCreateState) eventCreateState.style.display = 'block';
-            const eventHandoffState = document.getElementById('eventHandoffState');
-            if (eventHandoffState) eventHandoffState.style.display = 'none';
-            const eventForm = document.getElementById('eventForm');
-            if (eventForm) eventForm.reset();
-            const drawerTitle = document.getElementById('delegateDrawerTitle');
-            if (drawerTitle) drawerTitle.textContent = 'Create New Pass / Session';
           }
 
           function switchDelegateTab(tabId) {
@@ -159,15 +150,11 @@ export const SessionsScript = () => {
               const data = await res.json();
               if (res.ok && data.success) {
                 const ev = data.event;
-                document.getElementById('createdEventTitle').textContent = ev.name + ' Live!';
+                document.getElementById('createdEventTitle').textContent = '🎟️ ' + ev.name + ' Live!';
                 document.getElementById('eventHandoffPin').textContent = ev.pin_code;
                 document.getElementById('eventHandoffLink').textContent = window.location.origin + '/e/' + ev.slug;
                 document.getElementById('eventHandoffCli').textContent = 'curl -sSL ' + window.location.origin + '/join/' + ev.slug + '?format=env | source /dev/stdin';
-
+                document.getElementById('eventHandoffModal').style.display = 'block';
-                document.getElementById('eventCreateState').style.display = 'none';
-                document.getElementById('eventHandoffState').style.display = 'block';
-                document.getElementById('delegateDrawerTitle').textContent = 'Event Pass Active';
-
                 showNotice('Workshop pass created: ' + ev.name, false);
               } else {
                 showNotice(data.error || 'Failed to create event pass', true);
@@ -190,7 +177,7 @@ export const SessionsScript = () => {
           }
 
           function closeEventHandoffModal() {
-            closeDelegateDrawer();
+            document.getElementById('eventHandoffModal').style.display = 'none';
             window.location.reload();
           }
 

ui/components/sessions/WorkshopDrawer.tsx

@@ -1,224 +1,217 @@
 export const WorkshopDrawer = ({ apps = [] }: { apps?: any[] }) => {
   return (
     <div id="tabWorkshopPass" style="display: none;">
-      <div id="eventCreateState" style="display: block;">
+      <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1rem 0;">
-        <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1rem 0;">
+        Generate a shared event pass with a universal 6-digit PIN, vanity link
-          Generate a shared event pass with a universal 6-digit PIN, vanity link
+        (<code style="font-size: 0.8rem;">/e/slug</code>), and CLI 1-liner for
-          (<code style="font-size: 0.8rem;">/e/slug</code>), and CLI 1-liner for
+        workshops, hackathons, and multi-user kiosks.
-          workshops, hackathons, and multi-user kiosks.
+      </p>
-        </p>
 
-        <form
+      <form
-          id="eventForm"
+        id="eventForm"
-          onsubmit="handleCreateEvent(event)"
+        onsubmit="handleCreateEvent(event)"
-          style="margin-top: 1rem;"
+        style="margin-top: 1rem;"
-        >
+      >
-          {/* Event Name */}
+        {/* Event Name */}
-          <div style="margin-bottom: 1.25rem;">
+        <div style="margin-bottom: 1.25rem;">
+          <label style="display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.875rem; color: var(--text-secondary);">
+            Workshop / Event Name *
+          </label>
+          <input
+            type="text"
+            id="eventName"
+            placeholder="e.g. Deno & SPIRE Zero-Trust Workshop, Elite Fleet Live Demo"
+            required
+            style="width: 100%;"
+          />
+        </div>
+
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.25rem;">
+          {/* Target App */}
+          <div>
             <label style="display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.875rem; color: var(--text-secondary);">
-              Workshop / Event Name *
+              Target App Destination
             </label>
-            <input
+            <select
-              type="text"
+              id="eventAppId"
-              id="eventName"
+              style="width: 100%; padding: 0.5rem 0.75rem; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.9rem;"
-              placeholder="e.g. Deno & SPIRE Zero-Trust Workshop, Elite Fleet Live Demo"
-              required
-              style="width: 100%;"
-            />
-          </div>
-
-          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.25rem;">
-            {/* Target App */}
-            <div>
-              <label style="display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.875rem; color: var(--text-secondary);">
-                Target App Destination
-              </label>
-              <select
-                id="eventAppId"
-                style="width: 100%; padding: 0.5rem 0.75rem; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.9rem;"
-              >
-                <option value="">Universal Sandbox (Default)</option>
-                {apps.map((app) => (
-                  <option value={app.id} key={app.id}>
-                    {app.name} ({app.domain || "Internal"})
-                  </option>
-                ))}
-              </select>
-            </div>
-
-            {/* Guest Role */}
-            <div>
-              <label style="display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.875rem; color: var(--text-secondary);">
-                Attendee Access Role
-              </label>
-              <select
-                id="eventRole"
-                style="width: 100%; padding: 0.5rem 0.75rem; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.9rem;"
-              >
-                <option value="viewer">Viewer (Read-Only Demo)</option>
-                <option value="operator">Operator (Workshop Actions)</option>
-                <option value="user">Standard User</option>
-              </select>
-            </div>
-          </div>
-
-          {/* Seat Capacity Presets */}
-          <div style="margin-bottom: 1.25rem;">
-            <label style="display: block; font-weight: 600; margin-bottom: 0.45rem; font-size: 0.875rem; color: var(--text-secondary);">
-              Seat Capacity Limit
-            </label>
-            <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
-              <button
-                type="button"
-                class="pill-btn seat-pill"
-                onclick="selectSeats(this, 25)"
-              >
-                25 Seats
-              </button>
-              <button
-                type="button"
-                class="pill-btn seat-pill active"
-                onclick="selectSeats(this, 50)"
-              >
-                50 Seats
-              </button>
-              <button
-                type="button"
-                class="pill-btn seat-pill"
-                onclick="selectSeats(this, 100)"
-              >
-                100 Seats
-              </button>
-              <button
-                type="button"
-                class="pill-btn seat-pill"
-                onclick="selectSeats(this, 0)"
-              >
-                ∞ Unlimited
-              </button>
-              <input
-                type="number"
-                id="eventMaxSeats"
-                value="50"
-                min="0"
-                max="10000"
-                style="width: 100px; padding: 0.35rem 0.5rem; text-align: center;"
-                title="Max seats (0 = unlimited)"
-              />
-            </div>
-          </div>
-
-          {/* Duration Presets */}
-          <div style="margin-bottom: 1.25rem;">
-            <label style="display: block; font-weight: 600; margin-bottom: 0.45rem; font-size: 0.875rem; color: var(--text-secondary);">
-              Event Duration & Expiration
-            </label>
-            <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
-              <button
-                type="button"
-                class="pill-btn event-lifespan-pill"
-                onclick="selectEventLifespan(this, 1)"
-              >
-                ⚡ 1 Hour
-              </button>
-              <button
-                type="button"
-                class="pill-btn event-lifespan-pill active"
-                onclick="selectEventLifespan(this, 3)"
-              >
-                🛠️ 3 Hours (Standard Workshop)
-              </button>
-              <button
-                type="button"
-                class="pill-btn event-lifespan-pill"
-                onclick="selectEventLifespan(this, 12)"
-              >
-                📅 12 Hours (All-Day Hackathon)
-              </button>
-              <button
-                type="button"
-                class="pill-btn event-lifespan-pill"
-                onclick="selectEventLifespan(this, 24)"
-              >
-                🗓️ 24 Hours
-              </button>
-            </div>
-            <input type="hidden" id="eventLifespanHours" value="3" />
-          </div>
-
-          {/* Custom Codes Accordion (Optional) */}
-          <details style="margin-bottom: 1.5rem; background: var(--surface-muted); padding: 0.75rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);">
-            <summary style="font-size: 0.875rem; font-weight: 600; color: var(--text-primary); cursor: pointer;">
-              ▸ Custom Vanity Slug & Custom PIN Code (Optional)
-            </summary>
-            <div style="margin-top: 0.75rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
-              <div>
-                <label style="display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.25rem;">
-                  Vanity Slug (e.g. /e/deno-lab)
-                </label>
-                <input
-                  type="text"
-                  id="eventSlug"
-                  placeholder="auto-generated if blank"
-                  style="width: 100%; font-size: 0.85rem;"
-                />
-              </div>
-              <div>
-                <label style="display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.25rem;">
-                  Custom 6-Digit PIN (e.g. 749-123)
-                </label>
-                <input
-                  type="text"
-                  id="eventPinCode"
-                  placeholder="auto-generated if blank"
-                  style="width: 100%; font-size: 0.85rem;"
-                />
-              </div>
-            </div>
-          </details>
-
-          <div style="display: flex; gap: 0.75rem;">
-            <button
-              type="submit"
-              id="submitEventBtn"
-              class="btn-primary"
-              style="min-height: 42px; background: var(--success); border-color: var(--success);"
             >
-              🎟️ Launch Workshop Pass
+              <option value="">Universal Sandbox (Default)</option>
+              {apps.map((app) => (
+                <option value={app.id} key={app.id}>
+                  {app.name} ({app.domain || "Internal"})
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Guest Role */}
+          <div>
+            <label style="display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.875rem; color: var(--text-secondary);">
+              Attendee Access Role
+            </label>
+            <select
+              id="eventRole"
+              style="width: 100%; padding: 0.5rem 0.75rem; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.9rem;"
+            >
+              <option value="viewer">Viewer (Read-Only Demo)</option>
+              <option value="operator">Operator (Workshop Actions)</option>
+              <option value="user">Standard User</option>
+            </select>
+          </div>
+        </div>
+
+        {/* Seat Capacity Presets */}
+        <div style="margin-bottom: 1.25rem;">
+          <label style="display: block; font-weight: 600; margin-bottom: 0.45rem; font-size: 0.875rem; color: var(--text-secondary);">
+            Seat Capacity Limit
+          </label>
+          <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
+            <button
+              type="button"
+              class="pill-btn seat-pill"
+              onclick="selectSeats(this, 25)"
+            >
+              25 Seats
             </button>
             <button
               type="button"
-              class="btn-outline"
+              class="pill-btn seat-pill active"
-              onclick="closeDelegateDrawer()"
+              onclick="selectSeats(this, 50)"
-              style="min-height: 42px;"
             >
-              Cancel
+              50 Seats
+            </button>
+            <button
+              type="button"
+              class="pill-btn seat-pill"
+              onclick="selectSeats(this, 100)"
+            >
+              100 Seats
+            </button>
+            <button
+              type="button"
+              class="pill-btn seat-pill"
+              onclick="selectSeats(this, 0)"
+            >
+              ∞ Unlimited
+            </button>
+            <input
+              type="number"
+              id="eventMaxSeats"
+              value="50"
+              min="0"
+              max="10000"
+              style="width: 100px; padding: 0.35rem 0.5rem; text-align: center;"
+              title="Max seats (0 = unlimited)"
+            />
+          </div>
+        </div>
+
+        {/* Duration Presets */}
+        <div style="margin-bottom: 1.25rem;">
+          <label style="display: block; font-weight: 600; margin-bottom: 0.45rem; font-size: 0.875rem; color: var(--text-secondary);">
+            Event Duration & Expiration
+          </label>
+          <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
+            <button
+              type="button"
+              class="pill-btn event-lifespan-pill"
+              onclick="selectEventLifespan(this, 1)"
+            >
+              ⚡ 1 Hour
+            </button>
+            <button
+              type="button"
+              class="pill-btn event-lifespan-pill active"
+              onclick="selectEventLifespan(this, 3)"
+            >
+              🛠️ 3 Hours (Standard Workshop)
+            </button>
+            <button
+              type="button"
+              class="pill-btn event-lifespan-pill"
+              onclick="selectEventLifespan(this, 12)"
+            >
+              📅 12 Hours (All-Day Hackathon)
+            </button>
+            <button
+              type="button"
+              class="pill-btn event-lifespan-pill"
+              onclick="selectEventLifespan(this, 24)"
+            >
+              🗓️ 24 Hours
             </button>
           </div>
-        </form>
+          <input type="hidden" id="eventLifespanHours" value="3" />
-      </div>
+        </div>
 
-      {/* Event Launch Success State */}
+        {/* Custom Codes Accordion (Optional) */}
+        <details style="margin-bottom: 1.5rem; background: var(--surface-muted); padding: 0.75rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);">
+          <summary style="font-size: 0.875rem; font-weight: 600; color: var(--text-primary); cursor: pointer;">
+            ▸ Custom Vanity Slug & Custom PIN Code (Optional)
+          </summary>
+          <div style="margin-top: 0.75rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
+            <div>
+              <label style="display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.25rem;">
+                Vanity Slug (e.g. /e/deno-lab)
+              </label>
+              <input
+                type="text"
+                id="eventSlug"
+                placeholder="auto-generated if blank"
+                style="width: 100%; font-size: 0.85rem;"
+              />
+            </div>
+            <div>
+              <label style="display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.25rem;">
+                Custom 6-Digit PIN (e.g. 749-123)
+              </label>
+              <input
+                type="text"
+                id="eventPinCode"
+                placeholder="auto-generated if blank"
+                style="width: 100%; font-size: 0.85rem;"
+              />
+            </div>
+          </div>
+        </details>
+
+        <div style="display: flex; gap: 0.75rem;">
+          <button
+            type="submit"
+            id="submitEventBtn"
+            class="btn-primary"
+            style="min-height: 42px; background: var(--success); border-color: var(--success);"
+          >
+            🎟️ Launch Workshop Pass
+          </button>
+          <button
+            type="button"
+            class="btn-outline"
+            onclick="closeDelegateDrawer()"
+            style="min-height: 42px;"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+
+      {/* Event Launch Success Modal / Card */}
       <div
-        id="eventHandoffState"
+        id="eventHandoffModal"
         style="display: none; margin-top: 1.5rem; padding: 1.25rem; background: var(--surface-card); border: 2px solid var(--success); border-radius: var(--radius-md); box-shadow: var(--shadow-md);"
       >
         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
-          <div style="display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0;">
+          <div style="display: flex; align-items: center; gap: 0.5rem;">
-            <span style="font-size: 1.3rem; flex-shrink: 0;">🎟️</span>
+            <span style="font-size: 1.3rem;">🎟️</span>
             <strong
               id="createdEventTitle"
-              style="color: var(--text-primary); font-size: 1.1rem; overflow-wrap: break-word; word-break: break-word; max-width: 100%; display: block;"
+              style="color: var(--text-primary); font-size: 1.1rem;"
             >
               Workshop Pass Live!
             </strong>
           </div>
-          <span
+          <span class="badge badge-success">Active Now</span>
-            class="badge badge-success"
-            style="flex-shrink: 0; margin-left: 0.5rem;"
-          >
-            Active Now
-          </span>
         </div>
 
         <p style="font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 1rem 0;">
@@ -242,7 +235,6 @@ export const WorkshopDrawer = ({ apps = [] }: { apps?: any[] }) => {
               <button
                 type="button"
                 class="btn-primary"
-                aria-label="Copy Universal PIN"
                 style="min-height: 36px; padding: 0 0.85rem; font-size: 0.8rem;"
                 onclick="copyEventHandoff('pin')"
               >
@@ -265,7 +257,6 @@ export const WorkshopDrawer = ({ apps = [] }: { apps?: any[] }) => {
               <button
                 type="button"
                 class="btn-outline"
-                aria-label="Copy Direct Link"
                 style="min-height: 36px; padding: 0 0.85rem; font-size: 0.8rem;"
                 onclick="copyEventHandoff('link')"
               >
@@ -288,7 +279,6 @@ export const WorkshopDrawer = ({ apps = [] }: { apps?: any[] }) => {
               <button
                 type="button"
                 class="btn-outline"
-                aria-label="Copy Terminal curl command"
                 style="min-height: 36px; padding: 0 0.85rem; font-size: 0.8rem;"
                 onclick="copyEventHandoff('cli')"
               >
@@ -304,7 +294,7 @@ export const WorkshopDrawer = ({ apps = [] }: { apps?: any[] }) => {
           style="width: 100%; min-height: 38px; justify-content: center; font-size: 0.85rem;"
           onclick="closeEventHandoffModal()"
         >
-          Dismiss
+          Done & Refresh Cockpit
         </button>
       </div>
     </div>