feat(web): make the instance Config screen navigable — section rail + live filter

[edspencer]

The instance Config screen rendered ~47 fields in 10 groups as one narrow
column of label-then-field rows: 5,508px — seven screenfuls — with no way to
reach a known setting except scrolling past everything else, and no hierarchy
(driveMode and webDist had identical visual weight).

Why a rail and not tabs

Tabs were the obvious move and are the wrong one: tabs partition, and
partitioning is exactly what defeats a search. With tabs, "find every field
mentioning token" either can't cross a tab boundary or has to blow the tabs
away to show results — and then the tabs are lying about where you are.

This follows VS Code's settings screen instead: a rail of section links
scroll-spying over one document. "Jump to Branding" and "filter everything"
are both available at once, and neither disables the other.

What's in it

• Section rail (lg+) with per-group counts, scroll-spy, and a dot marking
  groups that hold unsaved edits. Clicking scrolls; it never switches panes.
• Live filter over label, dotted key, help text, env var and enum values — so
  an operator who thinks in PADDOCK_* names finds a field by typing one. A
  group whose own label matches keeps all its fields, so "branding" acts like a
  jump. Takes focus on load, gated to (min-width: 1024px) so a phone doesn't
  get the on-screen keyboard thrown over the page. Escape empties it rather than
  blurring, so the way back to the full list is the key you already reached for.
• "Modified only" lens — just what differs from the built-in default. On a
  real instance that's a handful of rows.
• Env overrides became a chip + the variable name, with the explanation
  stated once in a legend. Repeating the same two-line amber paragraph beside
  twenty fields was the single largest source of the length on a containerized
  instance.
• Locked fields are no longer input-shaped. Fourteen dashed boxes in
  "Advanced" read as a form you were being denied rather than a list of facts.
• Booleans are a switch on the label line, not a checkbox stranded at the far
  right of a 672px row. Short fields pair into two columns; only prompts, lists
  and long paths span.
• Section boundaries carried by three cues together — a rule, a step in
  vertical rhythm, and a heading that outranks a field label — because any one
  alone still read as a divider inside a list rather than between sections.

5,508px → 3,811px, and reachable by name.

Scope

Client-only. GET /api/instance-config already returns label, key, help, env var
and default per field, so no server change was needed. Behaviour is unchanged:
same dirty-tracking, same patch payload, same restart-required semantics.

Testing

• Typecheck clean; 949/949 web tests pass, including 6 new ones covering the
  filter (by label, by PADDOCK_* name, empty state), the "Modified only" lens,
  and autofocus — the latter as a pair, since the test that it does not focus
  on a small screen is what stops someone quietly deleting the gate.
• Two existing assertions were rewritten deliberately: a group label now appears
  in both the rail and the heading (so it matches the heading role, not bare
  text), and the per-field env paragraph became a chip.
• E2E was not run locally. The suite fails wholesale on the dev box — and
  fails identically on unmodified main, which I checked by stashing and
  rebuilding, so it's environmental rather than this branch. Leaving that to CI.

🤖 Generated with Claude Code

[cloudflare-workers-and-pages]

Deploying paddock with    Cloudflare Pages

Latest commit:	0675ec3
Status:	✅  Deploy successful!
Preview URL:	https://b6f9fc42.paddock-7u2.pages.dev
Branch Preview URL:	https://feat-config-ui-redesign.paddock-7u2.pages.dev

View logs