auth-yes/tasks/new/2026-0826.01.jul.story.arch.event-delegation-and-session-ux-overhaul-1440.md

4.5 KiB

TASK METADATA

  • Target Files:
    • server/routes/auth_forward.ts
    • server/routes/events.ts
    • ui/db_queries.ts
    • ui/components/LoginPage.tsx
    • ui/components/EventJoinPage.tsx
    • ui/components/SessionsPage.tsx
    • ui/components/sessions/WorkshopDrawer.tsx
    • ui/components/sessions/EventCockpitDeck.tsx
    • ui/components/sessions/EventAttendeesDrawer.tsx
    • ui/components/sessions/SessionsScript.tsx
    • server/tests/forward_auth.test.ts
    • server/tests/events.test.ts
  • Core Objective: Execute a comprehensive 4-phase architectural and UX overhaul of Event Passes, attendee join flows, ForwardAuth guest ingress, session management hierarchies, and live attendee roster controls.
  • Dependencies: None.
  • Additional Important Notes:
    • Strictly 100% pure Hono SSR JSX (React-free).
    • Must preserve zero-trust boundary: guest accounts must remain strictly quarantined from /admin and primary user mutations.
    • Must pass all quality gates (deno fmt, deno task lint, deno task check, and deno test --allow-all).

Architectural Considerations & Risks

Risks

  1. Ingress Privilege Escalation: Broadening ForwardAuth to support guest accounts could accidentally grant unauthorized access to non-scoped apps.
    • Mitigation: Explicitly enforce that account_status: 'guest' ONLY grants ingress if auth.customScopes contains the specific app:<appName> grant.
  2. State Machine Confusion in Drawer: Concurrently showing creation inputs and success handoffs leads to phantom cancellations.
    • Mitigation: Ensure strict 2-state mutually exclusive rendering in WorkshopDrawer.tsx.
  3. NAT Seat Depletion: Limiting joins strictly by IP locks out legitimate users on shared conference/office WiFi.
    • Mitigation: Implement cookie/session token-based idempotent seat re-use rather than aggressive raw IP bans.

Alternatives Considered

  • Dedicated Event Dashboard Route (/dashboard/events/:id): Evaluated and rejected in favor of the Slide-Out Attendee Drawer pattern to eliminate jarring page reloads and context loss during live event management.

Proposed Implementation (4-Phase Architecture)

Phase 1: Backend Core & Guest Ingress (.ph1.md)

  • ForwardAuth Guest Ingress (server/routes/auth_forward.ts): Allow account_status === 'guest' and validate app:<appName> custom scope.
  • Launchpad Scopes (ui/db_queries.ts): Update getDashboardApps to evaluate session customScopes and return authorized app cards for guests.
  • Audit Logging on Join (server/routes/events.ts): Wire auditLog in POST /api/join for event_seat_claimed.
  • Test Harness (server/tests/forward_auth.test.ts, server/tests/events.test.ts): Add unit tests for guest ForwardAuth and audit event logging.

Phase 2: Login Discovery, PIN Normalization & Anti-DoS (.ph2.md)

  • Discovery Link (ui/components/LoginPage.tsx): Add Join with PIN link in /login footer.
  • Input Normalization (server/routes/events.ts, ui/components/EventJoinPage.tsx): Strip hyphens/spaces and lowercase slugs (LOWER(slug)).
  • Anti-DoS & Rate Limiting (server/routes/events.ts): Mount tiered Valkey rate limiting and NAT-safe cookie seat re-use.
  • Test Harness: Add unit tests for PIN formatting tolerance and rate limits.

Phase 3: Sessions Layout & Drawer State Machine (.ph3.md)

  • Page Hierarchy (ui/components/SessionsPage.tsx): Standardize top heading to Active Sessions & Passes with [ 🔑 Delegate Session ] button.
  • Subsections: Event Passes cards above, Active Sessions table below.
  • 2-State Drawer (ui/components/sessions/WorkshopDrawer.tsx): Hide creation form on success; render 3 distinct visible cards (PIN, URL, CLI) + Dismiss.
  • Emoji & Header Fixes: Fix double emoji (🎟️ 🎟️) and mobile title wrapping.

Phase 4: Attendee Drawer & Live Event Controls (.ph4.md)

  • Card Enhancements (ui/components/sessions/EventCockpitDeck.tsx): Add ⏳ Xh Ym left countdown badge, accessible <details> CLI expander, and [ End Event ] with aria-label.
  • Attendee Roster Drawer (ui/components/sessions/EventAttendeesDrawer.tsx): Add slide-out drawer on [ 👥 Manage Attendees (N) ] to inspect guest seats.
  • Session Pausing: Introduce non-destructive is_paused session state with instant Pause/Resume toggles.
  • Live Controls: Add [ 🔄 Rotate PIN ] and [ +5 Seats ] on event cards.