16 KiB
16 KiB
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 <details><summary> 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 <summary> 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 <details> 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/jointo block botnet PIN brute-forcing. - 📁 Expired Events Archive & 1-Click Reopen: Collapsible
<details>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.