Section 17 · Audit

Current app · diagnosis.

A frank look at the MVP build against the system this manual proposes. The point is not to embarrass the build — it shipped, that's the whole game — it's to put the deltas in writing so the cleanup is small commits, not a rewrite.

Methodology

Two screenshots from the live MVP, annotated. Each callout points at a divergence and links the canonical page in this manual. Severity is graded:

P0brand-breaking · users will feel the seam · fix this sprint

P1visible inconsistency · slot into the next refactor of that surface

P2subtle · backlog · do when touching adjacent code

Screen 1 · Probe editor

Surface palette is off-system. Background hue drifts toward blue-grey; ours is green-tinged near-black. Pull --vp-color-bg, --vp-color-bg-2, --vp-color-bg-3 from tokens.css and remove all hardcoded greys.

Method dropdown uses Vuetify default chip. Pill shape, wrong typography. Replace with our protocol tag (Badges & tags) or a ghost button — but not VChip.

Send button uses Material elevation, not our glow. See Vuetify integration override #3 — kill the elevation, add the neon-glow shadow.

Tab labels are upper-case. We're sentence-case. Add text-transform: none to .v-tab globally.

Headers grid uses body font, not mono. URL/header content is structural — see Inputs. Apply .is-mono class to those VTextFields.

Sidebar item indicator is a left bar; ours is the same — but it's blue. Should be --vp-color-neon. One CSS var change.

Spacing rhythm is uniform 16px. Step it: 12 inside cards, 16 between cards, 24 between sections. See Spacing.

Screen 2 · MITM proxy

Status column is centred. Numbers and codes right-align; everything else left-aligns. Never centre. See Tables.

Row uses zebra stripes. Borders alone do that job. Remove the alternating background; keep border-bottom: 1px solid var(--vp-color-line).

Status pills are coloured backgrounds. Ours are foreground colour + 12% tint + matching border (see Badges). Solid red for 5xx is too loud — it visually dominates a fast-scrolling log.

Method column shows full method names in body weight. Should be Geist Mono 12.5px with method-coloured letters (POST=warn, DELETE=danger, others=protocol-http blue).

Live indicator is a static green square. See pulse dot — small filled circle with the radial pulse animation. Required wherever "streaming" is implied.

Header row is regular weight, sentence case. Should be 10.5px Mono 600 uppercase with 0.08em tracking — that's how the eye recognises "this is a column header" without reading the words.

Empty filter input has no help text. A "type to filter · regex with /…/" hint below sets expectations. Inputs.

Cross-cutting (both screens)

Body font is system-ui. Should be Geist. One <link> tag in the entrypoint, then update --vp-font-body.
No display font in evidence. Empty-state titles, modal headings, panel headers — Chakra Petch 600.
Focus ring is browser default. Apply the system ring globally (see Accessibility).
Phosphor icons mixed weights. Some Regular, some Bold. Pin to Regular at the plugin level.

Suggested fix order

Day 1: wire tokens.css + Geist + Chakra Petch + Geist Mono. Set the Vuetify theme from page 15. ~80% of P0s evaporate.
Day 2: apply the vuetify-overrides.css file. Tabs / buttons / inputs / cards align without component changes.
Day 3: swap VChip → custom protocol tag and status badge components. Hand-roll the pulse dot.
Day 4: table pass — strip stripes, fix alignment, mono cells, header tracking.
Day 5: walk-through with this manual side-by-side. Nothing escapes.