Skip to content
This repository was archived by the owner on Oct 13, 2026. It is now read-only.

Flatten the viewer's styling, name its panels for what they plot, and correct the README - #1

Merged
zz-plant merged 2 commits into
mainfrom
claude/vibecoded-ui-copy-audit-g3mj8p
Sep 24, 2026
Merged

zz-plant merged 2 commits into
mainfrom
claude/vibecoded-ui-copy-audit-g3mj8p

Conversation

@zz-plant

Copy link
Copy Markdown
Contributor

An audit for UI and copy that reads as model-generated. Two commits.

a10e449 style: visual

  • The 🔍 emoji favicon becomes a small inline SVG triangle, dark on light tabs and the text colour in dark mode.
  • The Syne + Manrope + Recursive Google Fonts are replaced by the system sans and monospace stacks. The Recursive-only font-variation-settings and font-weight: 350 are removed with them.
  • Removed from main.css:
    • the body::before radial gradient;
    • the 12px panel backdrop blur;
    • the staggered panelFadeIn on load;
    • the glow on the confidence dots.
  • Layout and colour tokens are unchanged. Before and after screenshots at 1440 and 390 match in layout.

6b0dffb fix: copy

  • The title "Refract — Observation UI" is now "Refract event viewer". The subtitle "Observation Engine — Timeline Viewer" is now "Event viewer for Refract JSONL exports".
  • Panel titles are sentence case, and some are renamed for what they show:
    • "Certainty Over Time" is now "Model confidence". It plots modelInterpretation.confidence, not the engine's certaintyProfile.
    • "Edit Velocity" is now "Events per day", because it counts all events.
    • "Diff Viewer" is now "Diff".
    • "Event Schema Inspector" is now "Event schema".
  • TimelineView.formatEventType now produces sentence case, so fallback summaries no longer read "Sentence First Seen in Lead".
  • README:
    • The header GIF is removed. It animated a "citation graph viewer" the app does not have.
    • Four claims are corrected against the code:
      • the citation table is not sortable;
      • the wording panel shows sentence_* events, not claim_*;
      • the timeline keeps file order rather than sorting;
      • "works fully offline after first load" had no service worker behind it.

Checks

  • bun run build and bun run test pass.
  • bun run lint exits 1 on a single error: docs/assets/source.svg noSvgWithoutTitle. This branch doesn't touch that file, and main fails lint with the same error.
  • Hook bypass on 6b0dffb. That commit was made with --no-verify. The pre-commit hook (.lintstagedrc.json) sends *.md to biome check --write. With the pinned biome, that fails on any staged Markdown file: "No files were processed in the specified paths … These paths were provided but ignored: README.md". I reproduced this on the repo's own install. biome check src/ was run separately and is clean. The fix is to drop md from the second lint-staged glob; it is not included here.

Not changed, noted for a follow-up

  • On mobile the page already overflowed horizontally before this change: #toolbar > div has no flex-wrap, so the filter row is about 708px wide at 390px.
  • Components use var(--font-mono), which is never defined (the CSS defines --mono), so some labels never render in monospace.
  • The "Source changes" table is already clipped on the right at 1440.
  • The replaced GIF and its generator scripts are still in the repo, unreferenced.

🤖 Generated with Claude Code

https://claude.ai/code/session_01EpGaiBuSk5nCSV2hKyD6PN


Generated by Claude Code

…m the viewer

The page loaded Syne, Manrope and Recursive from Google Fonts and drew a
radial gradient behind the dashboard, a 12px backdrop blur on every panel,
a staggered fade-in on load and a glow on the confidence dots. It now uses
the system sans and monospace stacks, flat panels in the existing
--bg-panel colour, and keeps only the hover transitions. The emoji favicon
is replaced by an inline SVG triangle that follows the colour scheme.
Layout, colour tokens and spacing are unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EpGaiBuSk5nCSV2hKyD6PN
…ME against the components

- index.html: the subtitle "Observation Engine — Timeline Viewer" and the
  title "Refract — Observation UI" now say what the page is: an event
  viewer for Refract JSONL exports.
- Panel titles are sentence case. "Certainty Over Time" plots
  modelInterpretation.confidence for model_interpretation events, which
  the engine's own certaintyProfile field is easily confused with, so it
  is "Model confidence". "Edit Velocity" counts every event per day, so it
  is "Events per day". "Diff Viewer" and "Event Schema Inspector" drop the
  filler word. Timeline event types are sentence case too, which also
  fixes the Title Case fallback summary ("Sentence First Seen in Lead").
- README: the header GIF was a generated animation of labelled circles
  ("events", "diffs", "breakdown") showing a citation graph the app does
  not have; it is removed. The citation table is not sortable, the
  wording panel shows sentence_* events rather than claim_reworded/
  strengthened/softened (types the importer rejects), the timeline keeps
  file order rather than sorting, and "works fully offline after first
  load" had no service worker behind it; each line now says what the
  code does.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EpGaiBuSk5nCSV2hKyD6PN

Copy link
Copy Markdown
Contributor Author

check is red, but the cause is already on main, not in this PR.

  • Failing step: bun run lint, with the single error docs/assets/source.svg:2:1 lint/a11y/noSvgWithoutTitle ("Alternative text title element cannot be empty"). The SVG has no <title> element.
  • Why it isn't this PR's: this branch doesn't touch docs/assets/source.svg. The last CI run on main (run 31919951149, 2026-08-16, commit 0ec3d06) fails the same step with the same output ("Found 1 error. Found 2 infos."). bun run test and bun run build pass on this branch locally, but CI never reaches them because lint runs first.
  • Fix: no fix exists on main or in another open PR. The smallest one is a title as the SVG's first child:
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200" width="400" height="200">
+  <title>Refract UI wordmark</title>
   <defs>

It's left out of this PR to keep the PR to its stated scope. It could go in here or separately; that's the maintainer's call.

I haven't re-run the job. The error is deterministic and already reproduces on main, so a re-run would give the same result.


Generated by Claude Code

@zz-plant
zz-plant merged commit 5d50686 into main Sep 24, 2026
1 check failed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants