54 lines
16 KiB
Markdown
54 lines
16 KiB
Markdown
# 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:**<br>1. **Button Copy:** Handoff button says `"Done (Session is Active)"` instead of standardized **`[ OK ]`**.<br>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`.<br>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.<br>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:**<br>1. Native `<details><summary>` already renders a disclosure triangle. Hardcoding `▸` in the text produces a broken double arrow (`> >`).<br>2. Clean up accordion text while explicitly retaining the `(Optional)` tag. | **Action Item:**<br>• Remove hardcoded `▸` character from all `<summary>` blocks.<br>• 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:**<br>1. Power users creating multiple sessions or workshop passes need an instant way to mint a second token without closing and reopening the drawer.<br>2. Switching tabs while in a handoff state reveals stale inputs from the other mode. | **Action Item (Dual Actions + Handoff Tab Lock):**<br>• 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).<br>• 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:**<br>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".<br>2. The Guest Drawer header does not dynamically update its countdown timer or expiration badge when an event is extended. | **Action Item:**<br>• Wrap `res.json()` defensively and surface true backend error payloads.<br>• 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/join` to 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.
|