redesign(gui): adopt ChefGroep design language (warm palette, blue accent, shadcn + skins)

[OnlineChef]

Summary

Re-skins the opencodex gui/ dashboard to the OnlineChefGroep/design-system v2 "Devin-richting" language, per PLAN.md, and adds a typography + motion refinement pass plus a living taste/design guide. Presentation-only — no proxy/runtime/API changes.

Rebased onto current dev (was branched from main and conflicted). Diff is now 7 GUI files only.

Changes

• Tokens: gui/src/styles.css :root (light + dark) → warm off-white surfaces, one blue accent split from the monochrome primary action, reserved green/amber/red, tighter radii, design easing. Removed the ambient gradient wash, glass/backdrop-blur and heavy shadows for a flat matte surface (modals are now opaque cards, not frosted glass).
• Typography: one modular type ladder (--text-micro…--text-display), calmer leading, --tracking-tight on headings, uppercase micro .caps stat labels, tabular figures (.num) on all numeric data so columns align, .prose measure, better rendering (optimizeLegibility, grayscale smoothing). Provider-overview cards realigned to the same tokens for cross-page consistency.
• Fonts: Archivo Variable (UI, free General Sans equivalent) + JetBrains Mono (data), bundled via @fontsource. Dropped unused @fontsource/ibm-plex-mono.
• Components: shadcn-style .btn (rounded-rect + scale(0.97) press), sans pill .badge, blue input focus ring, blue toggles, blue active-nav/selected-tab.
• Motion: matte modal that rises in, broadened press-physics on rows/tabs/chips/segments, spinner→calm blue "ripple", shared easing + duration tokens, a keyed per-page reveal, and a reduced-motion guard that disables all of it with zero information loss.
• Skins: data-style="strak" (cooler, sharper) alongside default warm devin, applied at boot from ?style= or a saved choice.
• Docs: new gui/DESIGN.md — the taste + design guide with a token reference and a concrete "how to extend" section.

Verification

• bun run typecheck — green
• bun --bun run lint:gui — green
• bun run privacy:scan — green
• GUI tests: 399 pass / 0 fail
• Locale detection left as on dev (en default; no forced Dutch — dev has no nl locale, and forcing it broke number-format tests on the earlier main-based branch)

Notes

• The per-navigation page-reveal is implemented and applied but reads as subtle because pages fetch data async — the keyed container animates before content arrives. The clearly-visible motions are the modal rise, ripple, press-physics, and focus ring.
• Still draft; ready for review once CI on the rebased tip is green.

  

---

^{Need help on this PR? Tag @codesmith-bot with what you need. Autofix is enabled.}

Summary by CodeRabbit

• New Features

  • Added a refreshed dashboard design with updated colors, typography, spacing, controls, cards, buttons, and modals.
  • Added support for switching between the default and alternate visual styles.
  • Added self-hosted Archivo and JetBrains Mono fonts.
  • Added page transition animations with reduced-motion support.
  • Improved dashboard summary card readability and number formatting.

• Documentation

  • Added the dashboard design language and extension guidelines.

Greptile Summary

This change refreshes the GUI with ChefGroep skins, typography, component styling, bundled fonts, reduced-motion-aware animation, a design guide, and page-reveal transitions.

The Combos page was rendered with populated data at a 1440×900 viewport. The new page-reveal wrapper causes the workspace to grow to its content height while the main area remains a clipped viewport-height container. The detail panel no longer receives the intended internal scrollbar, leaving lower combo details inaccessible.

Do not merge until the Combos workspace height constraint is restored.

Confidence Score: 3/5

T-Rex Logs

What T-Rex did

• T-Rex produced a proof for the posted P1 finding and attached media artifacts to support it.
• T-Rex produced a second finding-proof for another P1 finding, with no additional artifacts attached.
• T-Rex validated the contract for the candidate workspace and documented that width is preserved but scrolling and clipping are incorrect due to layout; the captures, metrics, and the script output were uploaded.

_{Ran code and verified through T-Rex}

Comments Outside Diff (1)

1. General comment

   Combos page-reveal wrapper disables the workspace height constraint

   • Bug
     • At desktop 1440×900 with a populated Combos route, the candidate wrapper makes .page-reveal, .combos-workspace-shell, .combos-workspace-root, and .combos-workspace-detail 2176px high. The intended scrollable detail panel therefore has scrollHeight === clientHeight === 2176, while .main-inner--combos remains 900px tall with overflow: hidden; content below the visible area is inaccessible through the intended panel scroll path.
   • Cause
     • The rule at gui/src/styles.css:417 only applies when .combos-workspace-shell is a direct child of .main-inner--combos. The wrapper inserted at gui/src/App.tsx:291 becomes the direct child but has no equivalent flex: 1, min-height: 0, height: 100%, or flex-column sizing, so its content-driven height propagates into the workspace.
   • Fix
     • Either preserve the direct-child relationship for Combos, or add the equivalent constrained flex sizing to .main-inner--combos > .page-reveal and make it a flex column with flex: 1 1 auto, min-height: 0, and height: 100% (then ensure its shell child fills it).

   _{Ran code and verified through T-Rex}

Prompt To Fix All With AI

### Issue 1
gui/src/App.tsx:291
**Combos workspace loses its height constraint**

The reveal wrapper becomes the direct child of `.main-inner--combos`, so `.combos-workspace-shell` no longer matches the direct-child sizing rule in `styles.css`. With populated Combos data, the wrapper and workspace expand to their content height while the fixed-height main container clips overflow. The intended detail-panel scrollbar has no overflow to scroll, leaving content below the viewport inaccessible. Keep the Combos shell as the direct child, or give the wrapper the same constrained flex sizing behavior.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

_{Reviews (1): Last reviewed commit: "chore(gui): drop unused ibm-plex-mono af..." | Re-trigger Greptile}

Greptile also left 1 inline comment on this PR.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: d1c28267-beb0-4526-a46c-d7f6927a5bcf

📥 Commits

Reviewing files that changed from the base of the PR and between 63a4157 and 59f4fd5.

⛔ Files ignored due to path filters (1)

• gui/bun.lock is excluded by !**/*.lock

📒 Files selected for processing (6)

• gui/DESIGN.md
• gui/package.json
• gui/src/App.tsx
• gui/src/main.tsx
• gui/src/styles.css
• gui/src/styles/provider-overview-dashboard.css

---

📝 Walkthrough

Walkthrough

The dashboard adopts a tokenized design language with new typography, colors, skins, controls, component styling, motion, modal transitions, and self-hosted fonts. Skin selection is initialized from the URL or local storage, and page content is wrapped for reveal animation.

Changes

Dashboard design language

Layer / File(s)	Summary
Design language contract gui/DESIGN.md	Defines token-driven color, typography, motion, skinning, extension, and prohibited UI patterns.
Theme and typography foundation gui/src/styles.css	Updates theme tokens, typography, controls, utility classes, color schemes, and the strak skin override.
Font and skin initialization gui/package.json, gui/src/main.tsx	Adds Archivo and JetBrains Mono packages, imports their styles, and initializes data-style from the query string or local storage.
Component styling and motion gui/src/App.tsx, gui/src/styles.css, gui/src/styles/provider-overview-dashboard.css	Updates component states, statistics, loading visuals, page reveals, modal transitions, and dashboard-card typography.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Suggested reviewers: wibias, lidge-jun

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cursor/redesign-all-in-6d5f

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

✅ Target branch corrected

This pull request now targets dev.

The [WRONG BRANCH] title prefix has been removed. Its existing draft status has been preserved.

[OnlineChef]

Retargeted from main → dev (fork contribution path). Please rebase onto current dev before review; [WRONG BRANCH] prefix removed from the title.

[greptile-apps]

Combos workspace loses its height constraint

The reveal wrapper becomes the direct child of .main-inner--combos, so .combos-workspace-shell no longer matches the direct-child sizing rule in styles.css. With populated Combos data, the wrapper and workspace expand to their content height while the fixed-height main container clips overflow. The intended detail-panel scrollbar has no overflow to scroll, leaving content below the viewport inaccessible. Keep the Combos shell as the direct child, or give the wrapper the same constrained flex sizing behavior.

Artifacts

▶ Recording of the check

• Playwright renders the prior direct-child workspace, selects a combo, and scrolls the constrained detail panel; the workspace remains viewport-height and usable.

Poster frame of the prior direct-child Combos workspace

• The pre-change workspace fills the 900px main area and keeps scrolling inside its detail region.

▶ Recording of the check

• Playwright renders the candidate wrapper path and shows the workspace expanding beyond the clipped main viewport instead of maintaining the intended inner scrolling.

Poster frame of the candidate Combos workspace after page-reveal wrapper insertion

• The candidate view demonstrates the affected wrapper path after its reveal animation has settled.

Evidence from the check

• This executable fixture script serves the populated Combos route, compares direct-child and wrapper structures, performs a scroll attempt, and records layout metrics.

Command output from the check

• The actual command output records exit code 0 and shows baseline 900px sizing versus candidate 2176px wrapper and workspace sizing, confirming the clipping and scrolling failure.

Evidence from the check

• The generated metrics provide the exact computed boxes, overflow values, and scroll dimensions for the matched before and candidate runs.

_{Ran code and verified through T-Rex}

Prompt To Fix With AI

This is a comment left during a code review.
Path: gui/src/App.tsx
Line: 291

Comment:
**Combos workspace loses its height constraint**

The reveal wrapper becomes the direct child of `.main-inner--combos`, so `.combos-workspace-shell` no longer matches the direct-child sizing rule in `styles.css`. With populated Combos data, the wrapper and workspace expand to their content height while the fixed-height main container clips overflow. The intended detail-panel scrollbar has no overflow to scroll, leaving content below the viewport inaccessible. Keep the Combos shell as the direct child, or give the wrapper the same constrained flex sizing behavior.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.