CodeIssuesPull RequestsActionsSecurityInsights
✨ AI
More
Settings

Visual design audit: full-site ledger (every page viewed, 2026-08-08)#211

Openccantynz opened this issue 24d ago
ccantynzAuthorcommented 24d ago

STATUS: audit ledger only — nothing built. Decision needed: which defect classes to sweep first.

Audited in a real Chrome session at 1568px, signed in as owner. 32 surfaces viewed: health (reference), /, /dashboard, /explore, repo home, issues list + #200, pulls list + PR #5443 (+files), commits, discussions, wiki, repo settings, account settings, tokens, /connect/claude, /onboarding, /import, /import/bulk, /new, /marketplace, /help, /docs, /changelog, /building-itself, /admin, /admin/flags, /admin/spine, /billing/usage, /notifications, /features, /pricing. Reference: the repo Health page passes the Natural Light standard and was used to calibrate.

Severity: high = looks broken/unreadable · med = unprofessional · low = polish.


A. BUNCHING — cramped text, no clamping, wrong measure

  1. /ccantynz/Gluecron.com/pulls/5443 (conversation) — PR description renders edge-to-edge at ~1500px line length with tight leading; a wall of text with no max-width. high
  2. /ccantynz/Gluecron.com/issues/200 (issue body) — dense markdown lists crammed into a ~535px column (see B1); numbered/bulleted items nearly touching. high
  3. /dashboard — verom-ai-immigration-compliance card — description unclamped (~8 lines), and it renders meta-text ("The 'Professional & Trustworthy' (Best for B2B/Legal) Description: … Why it works: …") — no 2-line clamp, card towers over neighbours. high
  4. /dashboard — intelligent-plugin-conflict-detector card — 6-line unclamped description, same class. med
  5. /pricing — storage figures unhumanized: "1,024 MB", "10,240 MB", "51,200 MB", "512,000 MB storage" instead of 1/10/50/500 GB. low

B. LAYOUT IMBALANCE — half-empty pages, dead space

  1. /ccantynz/Gluecron.com/issues/200 — the entire issue detail (title card ~750px, comment column ~535px, sidebar ~200px) hugs the left; the right HALF of a 1568px viewport is blank white. Looks broken at desktop width. high
  2. /new — form column ~575px pinned left under a full-width hero; right 60% of the page empty. med
  3. /dashboard — Recent Activity — full-width rows with content only in the left quarter; vast empty right side per row. low
  4. Issues list, repo settings — long dead white region below the footer (page taller than content). low, verify

C. RAW DUMPS — unstyled data where design should be

  1. /notifications — top notification "8 items to action today" renders its body as a raw JSON blob: {"userId":"178253d1-…","generatedAt":"2026-08-08T03:54:45.836Z","headline":…. high
  2. /ccantynz/Gluecron.com/pulls/5443 — gluecron[bot] "AI review unavailable" comment prints the raw Anthropic 400 error envelope verbatim (incl. request_id) — on the very PR that shipped humanizeAiError(). The bot comment path clearly doesn't run through it. high
  3. /notifications — ~200 identical "PR #xxxx has gone quiet" rows, no grouping/collapse ("201 unread"). med
  4. /admin/spine — Customer-facing checks — 14 identical rows of "Green … 4s ago" with the CHECK name column EMPTY/invisible (see E2). high
  5. Repo settings — default branch select — raw list of all 89 branches incl. worktree-agent-/gatetest/auto-fix- noise. low
  6. /dashboard — Recent Activity — duplicate Merged/Opened pairs for the same PR back-to-back. low

D. INCONSISTENCY — off-system styling, purple/second-accent remnants

  1. /docs sidebar — active item "Overview" is a lavender/PURPLE pill with washed-out purple text (also reads as disabled). Direct "no purple ever" violation. med-high
  2. /ccantynz/Gluecron.com/pulls/5443 — "Live editing" presence avatars are pink/magenta circles. low
  3. Green→brown gradient buttons — wiki (+ New page, + Create the Home page), discussions (+ New discussion, + Start a discussion), marketplace (Agents →, + Register an app), onboarding (Add key). A competing second accent family. med
  4. Gold/brown gradient hero words — tokens ("automation"), connect ("Claude"), docs ("gluecron"), building-itself ("builds itself"), import ("GitHub"). If intentional, it's inconsistent with the one-evergreen-accent rule; decide and standardise. low
  5. /billing/usage — "Share your AI stats" chip in neon mint, off-palette. low
  6. /dashboard repo cards — blue-tinted "detected" chips (Node.js/TypeScript/etc.) introduce a third hue family. low

E. THEME LEAK / CONTRAST — dark values on the light page

  1. /admin/spine — "Errors last 24h", "Monitoring coverage", "Open incidents", "Customer-facing checks" panels render as near-black dark-mode cards inside the light page; their section titles are dark red/olive on dark (barely readable). Classic light-falls-through-to-dark-tokens bug. high
  2. /admin/spine — checks table — check names invisible (dark-on-dark or missing), so the table's key column is blank. Looks broken. high
  3. /ccantynz/Gluecron.com/pulls/5443?tab=files — diff syntax highlighting uses pastel pink/pale-blue/orange on light green add-rows; string literals in pink are near-illegible. med-high

F. STATE-BLINDNESS / FALSE LIVENESS

  1. /dashboard — LIVE ACTIVITY panel — header bar with a completely empty body; no rows, no empty-state copy. Advertises liveness, proves deadness. med
  2. /pulls/5443 — amber "Preview: Building" badge frozen forever on a PR merged 10h ago. med
  3. /pulls/5443 — "Live: 3 editing" (climbing to 4 between loads) with presence avatars on a merged PR. med
  4. /pulls/5443 — AI Triage comment — "(no summary)", "(no label suggestions)", "(no reviewer suggestions)" — a comment made entirely of placeholders. low
  5. /billing/usage — 30-day trend — empty white chart box with one flat line, no axes/labels/empty-state; also "Peak day: $0.01. 30-day total: $0.00." contradicts itself. med
  6. /changelog — newest section is "June 2026" on a platform that ships daily (today: Aug 2026). low-med

G. BROKEN TEXT / ENCODING

  1. /ccantynz/Gluecron.com/issues — search input placeholder literally displays Search issues… (unescaped unicode escape). high (trivially fixable, very visible)
  2. Repo home file list — CLAUDE.md commit message shows "278?99 lines" (mojibake where an arrow was). Data-level, but visible on the busiest page. low-med

H. RENDER/SCROLL GLITCHES (repeatable in captures; verify by hand)

  1. Sticky header repaints mid-viewport with a large dead white band above it after wheel scrolling — captured on /explore, /pulls, /commits, and the PR files tab. med, verify
  2. Repo settings + account settings intermittently paint fully blank frames (renderer stalls; screenshot capture repeatedly timed out only on these). info
  3. /explore mid-scroll shows a large blank band between card rows (lazy-render flash). low

Reference-page note: the Health page itself is clean; only a tiny floating scroll-indicator pill overlaps the right edge near the tab bar (also visible on repo pages). low

Data-trust note (already tracked in #203): repo /pulls shows "#24 · 1 open, 24 merged" while the same repo's PRs are #5443/#5456 elsewhere — global vs per-repo numbering shown inconsistently.


Worst five pages

  1. /ccantynz/Gluecron.com/issues/200 (issue detail template) — half-empty layout + cramped 535px body column (B1, A2)
  2. /admin/spine — dark-theme leak + invisible check names (E1, E2, C4)
  3. /notifications — raw JSON notification + ~200 ungrouped identical rows (C1, C3)
  4. /ccantynz/Gluecron.com/pulls/5443 (PR detail template) — raw error JSON, edge-to-edge text, frozen "Building" badge, false live presence, low-contrast diff (C2, A1, F2, F3, E3)
  5. /dashboard — unclamped card descriptions, empty LIVE ACTIVITY, duplicated activity rows (A3, A4, F1, C6)

Totals by class

A bunching: 5 · B layout: 4 · C raw dumps: 6 · D inconsistency: 6 · E theme/contrast: 3 · F state-blindness: 6 · G broken text: 2 · H render glitches: 3 — 35 occurrences

Urgent "looks actually broken" shortlist: G1 (… placeholder), E1/E2 (spine dark panels + invisible names), C1 (JSON notification), C2 (raw error envelope in bot comment), B1 (issue detail half-page).

ccantynzcommented 24d ago

Sweep verification — live on build 473ce55, all worst-five pages re-checked (browser + served-HTML/CSS):

  • ✅ Issue detail — centered (margin: 0 auto shipped in the served CSS); no more half-blank viewport
  • ✅ Issues list — literal fixed; spacing per standard
  • ✅ Notifications — grouped rows live ("15 PRs have gone quiet in dominat8.com", "120 issues… in Vapron" with Show-all expanders), raw JSON bodies replaced by readable digests, repo links populated, Dismiss route exists now
  • ✅ PR detail — historical raw error envelope renders humanized; Preview/Live chrome gone from merged PRs; diff palette tokenized; readable prose width
  • ✅ Dashboard — 2-line clamp live, journey-* probe card gone (also out of the stat boxes), live-activity honest empty state, feed collapse
  • ✅ /docs — purple-free (both instances)
  • ✅ Admin spine board — page-level dark hexes gone; remaining #161b22 etc. are the global dark-theme token block (correct)
  • ✅ Billing — single rounding policy, total ≥ max(daily) pinned by test
  • ✅ Banner — honest copy, suppressed for site admins

Remaining from the ledger (small): daily-digest notification rows show a noisy user id · generated at digest (headline already in the title — suppress body for that kind); verify-by-hand scroll-repaint items; changelog content staleness; verom repo-description meta-text (data cleanup).

Fixed via PRs #5458–#5463, consolidated + merge-safety incident recovery in #5464 (incident record: #212).

c comment · e edit title · x close/reopen · ? shortcuts