# UI & UX Live Audit Log — Round 4 (`ui-audit-4.md`) **Date:** 2026-08-27 (Session: 10:45)\ **Target Environments:** `https://auth.atyg.org` | `https://ed-droid.atyg.org`\ **Scope:** Live verification of Phase 7 & 8 Deliverables (Attendee Relational Decoupling, Sticky Action Bar, Dynamic Credential Rotation DOM Sync, Guest Drawer Event Meta Payload, Legacy DB Migration Backfills) and discovery/triage of new Round 4 defects. --- ## 1. Core Verification Focus Areas | # | Feature / Flow | Target Behavior | Status | | :---- | :-------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------- | :----------------- | | **1** | **Sticky Action Bar** | Pinned `Sessions & Events` header and `[ Delegate Session ]` trigger stick cleanly to top viewport on deep scroll without clipping cards. | ⏳ Ready for Audit | | **2** | **Live Credential Rotation Sync** | Clicking `[ 🔄 Rotate ]` hot-swaps the numeric PIN, Slug, Direct Link, and CLI command in DOM (Grid & Compact) preserving proxy origin. | ⏳ Ready for Audit | | **3** | **Guest Drawer Live Meta** | Guest Drawer renders live countdown (`⏳ Xh Ym left`) and accurate seat fraction (`N / Max Seats`) with zero `0 / 0` placeholders. | ⏳ Ready for Audit | | **4** | **Relational Session Revocation** | Revoking or ending an event pass cleanly terminates only matching attendee sessions without string `LIKE` leakage or orphan records. | ⏳ Ready for Audit | | **5** | **Legacy Pass Compatibility** | Pre-existing guest accounts seamlessly bind to `event_pass_id` via the backfill migration so older passes can be revoked/extended. | ⏳ Ready for Audit | --- ## 2. Live Observation & Findings Log _Record live observations, visual feedback, quirks, UI anomalies, and proposed action items here._ | Timestamp | Scenario / Screen | Component / Flow | Observation / Finding | Resolution / Action Item | | :-------- | :---------------------------------------- | :------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `10:45` | Setup | System | Opened `ui-audit-4.md` log for Round 4 live verification and defect triage. | Ready for live observation inputs. | | `11:17` | Layout & Viewport Collision | `SessionsPage.tsx` vs `AuthenticatedLayout.tsx` | **Sticky Sub-Header Overwrites Main Navigation:** The `Sessions & Events` sub-header has `position: sticky; top: 0; z-index: 40;`, which collides directly with the fixed `.top-bar` navbar (also at `top: 0`), overwriting the brand badge, nav links, and user menu on scroll. | **Action Item:** Offset sub-header to `top: var(--top-bar-height, 57px); z-index: 30;` so it docks cleanly right beneath the main top bar without clipping or obscuring navigation. | | `11:20` | Information Architecture & Parity | `DirectPassDrawer.tsx` vs `WorkshopDrawer.tsx` | **Single Session Minting Lacks Phase 6/8 UX Parity:**
1. **Button Copy:** Handoff button says `"Done (Session is Active)"` instead of standardized **`[ OK ]`**.
2. **Copy Button Styling:** 1-Click link copy button is solid blue `btn-primary` while CLI/cURL are `btn-outline`. Standardize all to uniform `btn-outline`.
3. **Form Does Not Hide on Mint:** Creating a single session keeps `#delegateForm` visible above the handoff card, leaving the stale `[ Cancel ]` button visible after creation.
4. **Action Button Phrasing:** Use explicit, confidence-building submit labels: **`[ Create Session ]`** for Single Pass and **`[ Create Event ]`** for Multi-User Workshop. | **Action Item:** Bring `DirectPassDrawer.tsx` to 100% parity with `WorkshopDrawer.tsx` by hiding `#delegateForm` upon generation, displaying a dedicated handoff card with uniform `btn-outline` copy buttons, and standardized `[ Create Session ]` / `[ OK ]` triggers. | | `11:23` | Visual Glitch & Redundant Copy | `DirectPassDrawer.tsx` & `WorkshopDrawer.tsx` | **Double Arrow (`> >`) & Wordy Accordion Titles:**
1. Native `
` already renders a disclosure triangle. Hardcoding `▸` in the text produces a broken double arrow (`> >`).
2. Clean up accordion text while explicitly retaining the `(Optional)` tag. | **Action Item:**
• Remove hardcoded `▸` character from all `` blocks.
• Label as **`"Customize App Permissions & Scopes (Optional)"`** in Single Pass and **`"Custom Vanity Slug & PIN Code (Optional)"`** in Workshop Pass. | | `11:26` | Workflow Architecture & State Transitions | `SessionsScript.tsx` & Drawers | **Rapid Creation Workflow & Tab Locking in Handoff:**
1. Power users creating multiple sessions or workshop passes need an instant way to mint a second token without closing and reopening the drawer.
2. Switching tabs while in a handoff state reveals stale inputs from the other mode. | **Action Item (Dual Actions + Handoff Tab Lock):**
• In both single and event handoff screens, provide two text buttons: **`[ Create Another ]`** (`btn-outline`, resets form to State 1 in 1 click) and **`[ OK ]`** (`btn-primary`, closes drawer).
• Disable/lock the top tab switcher while in the Handoff state so users cannot switch tabs until they either click `[ Create Another ]` or close the drawer. | | `13:11` | Backend SQL Bug & 500 Error | `server/routes/events.ts` (`/extend`) | **SQL Syntax Error on `+1h Extend`:** In `server/routes/events.ts:227` and `245`, `interval '${extendHours} hours'` inside tagged SQL literals evaluates to invalid parameterized SQL (`$1` inside quotes), throwing a Postgres syntax error and returning 500 ("Network error extending event"). | **Action Item:** Replace `interval '${extendHours} hours'` with valid parameterized PostgreSQL interval multiplication: `INTERVAL '1 hour' * ${extendHours}`. | | `13:13` | Telemetry & Ingress API | `server/routes/events.ts` (`/attendees`) & Script | **"Network Error Loading Attendees" & Stale Drawer Expiration:**
1. In `openAttendeesDrawer()`, if the endpoint returns an error or non-JSON payload, `res.json()` throws a SyntaxError which surfaces as a misleading "Network error".
2. The Guest Drawer header does not dynamically update its countdown timer or expiration badge when an event is extended. | **Action Item:**
• Wrap `res.json()` defensively and surface true backend error payloads.
• Update `guestDrawerExpiresAt` and trigger `updateAllCountdowns()` when extending an event. | | `13:15` | IA & Lifecycle Completeness | `EventCockpitDeck.tsx` & Queries | **Missing Expired Events Accordion:** Expired event passes currently remain mixed or hidden rather than cleanly archived in a dedicated collapsible `
` section with a 1-click `[ 🔄 Reopen (+1h) ]` button. | **Action Item:** Integrate the `[ 📁 Expired Passes (N) ]` collapsible accordion into `EventCockpitDeck.tsx` with instant 1-click reopen capability (`GREATEST(expires_at, NOW()) + 1h`). | | `13:17` | Architecture & Data Model | `SessionsPage.tsx` | **Events vs. Sessions List Separation:** Multi-claim event passes live in the top `Events` Cockpit deck, while individual 1:1 sessions (passkeys, device logins, agent tokens) live in the bottom `Sessions` table/deck. Guest attendee sessions live inside each event's `[ 👥 Manage Guests ]` drawer. | **Status / Clarification:** Clarified architectural separation between Event pass factories (top deck) vs individual session tokens (bottom table). | --- ## 3. Retained Action & Security Backlog - [ ] **🛡️ Peer-to-Peer Vouching (Web of Trust):** Opt-in quarantine state for event attendees with QR/3-Emoji neighbor verification and cascade revocation. - [ ] **⚡ Transparent Client Proof-of-Work (PoW):** Background WebCrypto SHA-256 challenge on `/api/join` to block botnet PIN brute-forcing. - [ ] **📁 Expired Events Archive & 1-Click Reopen:** Collapsible `
` section for expired passes with instant `[ 🔄 Reopen (+1h) ]` button. - [ ] **📊 Rich Attendee Telemetry:** Display last activity action, relative time, and device/agent badge in guest drawer cards.