Draw the settings sliders instead of shipping the browser's

[dovvnloading]

The problem

The generation controls were input[type="range"] with a single line of CSS:

input[type="range"] { width: 100%; accent-color: var(--accent); }

So Settings rendered whatever rail the host browser draws by default — in WebView2, which is what Cortex actually ships in, the stock grey Chromium control. On top of that:

• each slider spanned the full pane, giving a 0–2 range about a thousand pixels of travel
• the current value floated above the track via float: right
• the toggles were <input type="checkbox"> sized to 42x23, which renders as a stretched checkbox, not a switch
• one flat stack of controls with no grouping, so the panel needed scrolling

The fix

A RangeField control with a real track and thumb. The filled portion comes from a --range-fill percentage published by the component, because only Firefox paints that natively (::-moz-range-progress) and WebKit has no equivalent — doing it in pure CSS would have looked right in one engine and wrong in the one we ship.

• Sampling controls sit in two columns instead of one long stack
• The value reads as a chip on the label's baseline, not a floated span
• Grouped into Sampling / Context / System prompt, each with a rule and a sentence of explanation
• Toggles are painted as switches but remain checkboxes underneath, so role, keyboard behaviour, and label association are unchanged — the existing tests query them by role and pass untouched
• The whole panel now fits one screen

Verification

• ./scripts/check.ps1 — 6/6 green (506 backend, 163 frontend, types, lint, contracts)
• Both themes checked. The track and thumb draw from --line-strong and --surface rather than fixed colours, so light mode was verified separately rather than assumed.
• README settings capture regenerated; it no longer needs to scroll to show the panel.

🤖 Generated with Claude Code