feat(web): Redesign the setup page with the usage dashboard style

[4ndreello]

Summary

The /setup page of codedeck ui was hard to read. "Preview changes" dumped the whole API envelope into a <pre>, including the full proposed config and the inert legacy profiles block, and the "Current" lines printed JSON.stringify output. This restyles the page with the brand from the usage redesign (#115) and replaces the dump with a readable preview.

• Brand: BRAND_CSS, the logo favicon and the shared top bar, with Setup marked active. Cards, pills, buttons and inputs follow the usage page (black surfaces, #0070f3 primary, mono model ids). No native control renders light.
• Current state at a glance: each role card shows harness pill, model id and effort, or "not set". The orchestrator shows the preset name (balanced) or "custom" with its fields in words. Sandbox shows the literal value (workspace-write), autocompact shows on/off.
• "Keep current / Change" replaces the "Skip this role" checkbox. Every role opens in Keep current, so the preview only lists what you touched. Change shows the fields, prefilled with the current harness:model and effort. Effort stays hidden for opencode.
• Preview: a status banner from resultado ("Preview only, nothing written", "Saved", unchanged, error), one row per change (reviewer · effort low → high, with added/removed marked), validation pills, and the raw response inside a collapsed <details>. The full config and legacy profiles are no longer printed by default. The preview re-renders only when the response changes, so an open raw block stays open while you edit.
• Sticky action bar with the status on the left ("1 role set to change", in-flight text). Preview and Apply are disabled while a request runs.
• Nav: ui.ts builds the setup routes once and shares one page list, so /setup links Home/Review/Setup/Usage and the home page still lists only Review/Setup/Usage. The standalone codedeck setup server shows only Setup, so it never links to pages it does not serve.

Unchanged: buildSetupSelection, the controller API, element ids, the off-catalog confirm, the 403 expired message and the /api/setup/* shapes. The envelope's Portuguese keys stay as they are because codedeck setup also prints them.

Spec, tasks and validation: .specs/features/web-setup-redesign/.

Testing

• npx vitest run tests/setup-page.test.ts tests/setup-web.test.ts tests/web-cli.test.ts: 3 files, 43 tests passed.
• npx vitest run tests/usage-page.test.ts tests/usage-web.test.ts tests/web-brand.test.ts tests/web-pages.test.ts tests/web-server.test.ts: 5 files, 67 tests passed.
• npx tsc --noEmit -p . and npm run build pass.
• Headless Chromium against the built UI with a temp config that holds bindings and a legacy profiles block: no console errors. All roles start in Keep current. Switching only the reviewer to effort high gives exactly one change row reviewer · effort low → high. The raw response stays open while typing. At 390px, scrollWidth is 390 and cards stack in one column.
• Mutation probes: the change list dropping the before value, the prefill defaulting to Change, and the preview re-rendering on every form event were each caught by a test. 3 killed, 0 survived.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud