Reconcile app styling to the setup-wizard design language (normal modes)

[itlackey]

Goal

Bring the normal user-facing modes onto one consistent, friendly, low-density design language modeled on the setup wizard. Admin/Advanced stay denser by design.

Route changes (0.13.0 — coordinate with runtime modes plan)

The runtime modes refactor (docs/technical/ui-runtime-modes-plan.md) changes the route structure this issue targets:

Old route	New route	Notes
/splash	Split into /chat, /host, /attention, /connections/new	/splash is removed
/admin/*	/host/*	Direct rename, no alias
(none)	/connections	New — connection management
(none)	/assistant/settings	New — assistant-owned settings

Implication: this issue should target the new routes, not /splash. The wizard design language should propagate to /chat (empty state + framing), /connections, and /attention.

Scope

• Chat — reconcile chat empty-state and shell chrome to wizard design language (calm, low-density). Message list/composer functional density unchanged.
• /connections — new route; should feel like an extension of the wizard (same language, not an admin panel).
• /attention — migration/blocking landing; use wizard shell + eyebrow/title/lede typography.
• Wizard component adoption (absorbs Setup wizard: extract remaining bespoke components (.pcard / .model-opt / .toggle-card) into shared components #458) — wizard steps still use inline classes; refactor onto shared components (SelectableCard, SettingToggle, RadioRow, FormField, Panel) so the extraction is real.
• Shared design vocabulary — wiz-eyebrow / wiz-title / wiz-lede become documented shared classes used by all normal-mode routes, not just the wizard.
• Splash — already migrated in 0.12.0; will be removed in 0.13.0 as part of the route split. Carry the design language forward to the successor routes.

Out of scope

• /host/* (admin) and /advanced — denser by design, not targeted here.

Acceptance

• Normal modes read as one family (wizard ↔ chat ↔ connections ↔ attention).
• Wizard steps consume shared components; no duplicated inline card/toggle CSS.
• Changes clear the web-UX gate (npm run ux:audit + 3-judge panel) per docs/technical/ui-design-rubric.md, width sweep + light/dark.

References

• docs/technical/ui-runtime-modes-plan.md — route structure this issue must coordinate with
• Splash landing rebuild (0.12.0): packages/ui/src/routes/splash/+page.svelte
• Wizard design language: app.css + packages/ui/src/routes/setup/steps/
• Shared components: packages/ui/src/lib/components/common/
• UX gate / rubric: docs/technical/ui-design-rubric.md
• Supersedes/absorbs Setup wizard: extract remaining bespoke components (.pcard / .model-opt / .toggle-card) into shared components #458.

[fwdslsh-dev]

Coordination note (2026-07-06 re-scope, docs/technical/ui-client-split-assessment.md): the route targets in this issue are unchanged for 0.13.0, but two things affect where the work lands:

• The shared design vocabulary this issue formalizes (wiz-eyebrow/wiz-title/wiz-lede, SelectableCard, SettingToggle, etc.) becomes the seed of packages/ui-kit (Extract packages/client (@openpalm/client) + packages/ui-kit — thin static client app (Phase 5) #555) — normal-mode routes (/chat, /connections, /attention) later move to packages/client and consume it from there. Extracting these into cleanly shareable components now makes the Phase 5 move file relocation instead of surgery.
• The "admin/advanced stay denser by design" split maps 1:1 onto the host-app/client-app boundary, which should make the two design languages easier to keep apart.

---

Generated by Claude Code

[itlackey]

Status after merged PR #559 (merge commit c1eadbd): the shared UI foundation landed through packages/ui-kit, extracted tokens/components, and the host/client route split.\n\nLeaving this open because the full design-language acceptance criteria are broader than #559: normal-mode polish across chat/connections/attention, wizard component adoption, and the explicit UX audit/gate still need their own verification pass.

[itlackey]

Verification pass on synced main after PR #559 merge (c1eadbd30e107f76b71aa933b71edcaedaadba46).

Current state:

• Shared design tokens now live in packages/ui-kit/src/lib/theme/tokens.css and include the wizard vocabulary classes (wiz-eyebrow, wiz-title, wiz-lede).
• The route split landed: host/admin is under /host, client normal surfaces are under packages/client (/chat, /connections).
• This means the reusable foundation exists, but the issue acceptance criteria are not fully verified or complete.

Remaining work to complete this issue:

• Audit /chat, /connections, /connections/new, /assistant/settings, and any /attention or blocking-state route against the setup-wizard visual language.
• Move remaining duplicated wizard card/toggle/form styles into shared ui-kit components such as SelectableCard, SettingToggle, RadioRow, FormField, and Panel, or explicitly decide a smaller component set and update this issue.
• Keep /host/* intentionally denser; do not force the admin console into the normal-mode visual language.
• Add screenshots or DOM/a11y checks for the normal-mode surfaces in light and dark themes at mobile, tablet, and desktop widths.

Suggested verification gate:

• Run the UI checks plus a browser smoke of /chat, /connections, /connections/new, and setup.
• Capture and inspect the rendered pages, not just test output.
• Confirm no normal-mode surface regresses to raw admin styling or unshared one-off wizard CSS.
• If npm run ux:audit / judge-panel tooling is still part of the release gate, run it and paste the exact results here before closing.