fix(ui): open the viewer on the timeline and the selected event's diff

[zz-plant]

The viewer should open on the timeline and the changes the user loaded it to read. Before this change, the first screen went to controls and an empty panel, and at 390px the page was 708px wide.

What changes

• Toolbar
  • The filter row wraps, so all nine type filters fit on screen at 390px and the page is 390px wide instead of 708px.
  • The three export buttons become one Export button with a format select.
• Filters
  • All and None are no longer highlighted alongside nine highlighted chips; each is disabled when clicking it would change nothing.
  • The chips are now buttons with aria-pressed, so a keyboard can reach and toggle them. They used to be click-only spans.
• Diff panel
  • The first listed event is selected on load, and again whenever a filter hides the selected event. The panel shows a change instead of "Click an event".
  • The diff reads as one run of text. Its word chunks used to be laid out in a two-column grid that split sentences.
• Layout
  • Diff, Citation churn and Model confidence stack beside the timeline, so the confidence chart sits in a 692px panel instead of a 1398px one.
  • The second row has three equal columns, and no panel stretches to match a taller neighbour.
• Source changes
  • The revision id moves to each row's tooltip, and Detail gets the rest of the row: 210px wide at 1440, up from 26px visible.
  • The panel is 245px tall instead of 886px.
• Security: table cells are now filled with textContent. They used innerHTML, and markup in an uploaded JSONL file (for example <img onerror> in a fact or section) ran as script. Both remaining innerHTML writes in src are fixed strings.
• Event schema: the panel says once that a field is present in every event. Only fields that some events lack show a percentage.
• Labels: the "Timeline" and "Changes" labels are removed; they repeated the panel titles below them.

Measured (Chromium, before → after)

	Before	After
Page width at 390px	708px	390px
Empty diff panel's share of the first screen at 1440px	16.4%	0% (it opens filled)
Detail column width at 1440px	26px	210px
Source changes panel height at 1440px	886px	245px
Toolbar controls	15	14
"100% present" repeats	10	0

Not changed

• Events shown twice: each event appears in the timeline and in one type-specific panel. Talk page activity is the closest to a duplicate, but none of the panels is clearly redundant, so that is left as a product call.
• Found, not fixed here:
  • The pre-commit hook fails any commit that touches a .md file: biome check --write exits with "No files were processed". Adding --no-errors-on-unmatched should fix it.
  • After filtering, the timeline count reads "N of N" instead of "N of 12".
  • Wording-change cards print an empty "−" or "+" line for a new or removed sentence.
  • var(--font-mono) is used in three components, but the variable is named --mono.

Checks

• bun run lint, tsc --noEmit, bun run test, bun run build and bun run assets:check pass.
• Interactions were checked in Chromium at 1440×900 and 390×844:
  • selection stays in sync with filters, All and None;
  • the chips toggle from the keyboard;
  • all three export formats download;
  • an upload with no eventIds works;
  • markup in uploaded text renders as text.

🤖 Generated with Claude Code

https://claude.ai/code/session_01EpGaiBuSk5nCSV2hKyD6PN

---

Generated by Claude Code