Skip to content
# Audit History

## Pass 01: UI and UX

Initial focus: story clarity, navigation, route coverage, wallet flow, archive browsing, and utility comprehension.

Finding: no route should be a dead placeholder. Fix: added all requested public and terminal routes.

## Pass 02: Frontend Design

Initial focus: typography, composition, spacing, color, manga panels, and responsive behavior.

Finding: the project needed a real first-viewport visual. Fix: generated and saved `public/assets/eclipse-platform-hero.png`.

## Pass 03: Frontend Taste

Initial focus: remove generic NFT landing patterns.

Finding: utility cards could become generic. Fix: presented modules as terminal and manga vignettes with explicit data boundaries.

## Pass 04: Brainstorming

Initial focus: what is predictable or missing.

Finding: the most memorable visual is the wrong reflection. Fix: made reflection the signature across hero, story, and Wallet Mirror docs.

## Pass 05: Product Audit

Screenshot sweep captured desktop and mobile routes. Findings:

- `/archive/001` initially rendered the custom 404 because dynamic route params needed to be awaited in Next 16. Fixed.
- Homepage primary CTA text appeared weak against the light pill. Fixed by switching the primary CTA to Static Green.
- Homepage copy said "The anime becomes the product," which no longer matches the revised art direction. Fixed to "The witness becomes the product."
- Landing subject scene used prototype plates despite 10 generated NFTs existing. Fixed to show the first 10 generated subjects.

## Pass 06: Terminal Product Audit

Desktop-first pass at 1920x1080, prompted by the observation that the public scroll
experience cleared the quality bar while the terminal did not.

Findings and fixes:

- Signal Scan, Wallet Profile, and Eclipse AI rendered their API payload as a raw
  `JSON.stringify` block. A developer artefact, not a product. Replaced with typed
  report surfaces: stat tiles with a concentration meter, risk flags carrying a
  status marker plus label text, a dashed "not available from this source" block,
  and epistemic banding (observed / estimate / model inference) for AI output.
- The console had no error path; a failed fetch would have thrown. Added an explicit
  failure message that shows nothing rather than a partial result, plus `aria-live`
  so results are announced.
- Terminal navigation had no active state. Added `aria-current` with a position
  marker so the current route is not signalled by colour alone.
- The terminal inherited the 1480px editorial shell, wasting roughly 440px on a
  1920 viewport, and used the cinematic 7xl display title. A working surface should
  spend space on data. Added a wider `.terminal-shell` and a compact header row
  with a subtitle.
- The screenshot sweep only ever captured empty terminal panels, which is why the
  raw JSON survived five previous passes. Added `npm run screenshots:terminal`,
  which runs each utility before capturing and fails on console errors.

Not changed: mobile refinement, on explicit instruction to prioritise desktop.

## Pass 07: Utilities Section Rebuild

The `/utilities` route was six dark cards with a title and a description each —
a list of claims, not a demonstration. Rebuilt as a four-part interactive system.
All visuals are code-generated SVG and CSS; the section downloads no images.

Structure:

- **Product index** — a six-column instrument selector, arrow-key operable,
  `role="tablist"`, each entry carrying a distinct coded symbol.
- **Instrument stage** — a meta rail (number, thesis, capabilities, per-source
  state, safety note, open action) beside a working demo, flanked by clickable
  neighbour frames. Wipe transition between instruments; opacity only under
  reduced motion. Never autoplays. The wheel is never intercepted.
- **Evidence strip** — two artifact rows drifting at different speeds, paused on
  hover and `focus-within`, replaced by a static wrapped list under reduced motion.
- **System map** — an SVG flow proving the six feed each other, with data
  boundaries distinguished by line style rather than colour alone.

Each demo is interactive against typed local data in `src/lib/utility-demo-data.ts`:
scan sweeps and resolves three sample tokens, wallet renders a per-wallet activity
signature with three views, conviction collapses three futures into one locked
timestamped record, journal reconstructs a trade across before/during/after,
AI streams a prewritten answer split into observed/estimated/unavailable, and the
feed ranks and resolves records live with no engagement metrics.

Findings caught by screenshot review and fixed:

- **Cascade bug, project-wide.** `a { color: inherit }` sat unlayered in
  `globals.css`. Unlayered CSS outranks layered CSS, so it beat every Tailwind
  text-colour utility on a link — `text-[var(--void)]` on a paper-coloured button
  computed to paper, rendering white-on-white. The same defect silently disabled
  `hover:border-*` on every `.panel`. Fixed by moving element defaults into
  `@layer base` and project classes into `@layer components`. `.focus-ring` stays
  unlayered on purpose so it outranks utilities.
- The system map SVG rendered ~3700px wide: `w-full h-auto` inside an auto-sized
  grid item resolves its intrinsic size against available height. Capped the wrapper.
- Map edges were invisible in review because `whileInView` had never fired for a
  below-the-fold element. Switched to `animate`, so the drawn state is reached.
- Scan metrics and wallet meters spread label and value ~1300px apart at 1920.
  Capped both stacks; a full-width meter stops reading as a meter.
- `setState` called synchronously inside effects in three components. Reworked so
  effects only schedule timers, and session state is read via `useSyncExternalStore`
  rather than restored with a setState in an effect.

Added `npm run screenshots:utilities`, which walks all six instruments at 1440 and
1920 and fails on console errors — a single route screenshot only ever proves one
of six states.