feat(gui): migrate workspace controls and remove template UI patterns by MisterWanted · Pull Request #197 · GroepOnline/opencodex

MisterWanted · 2026-09-06T20:25:45Z

Summary

Continue the existing OCX interface migration in the same application; no provider/authentication/backend/release changes. Replace the rejected mint/ink template direction with a neutral workspace and preserve current routes.
Add official shadcn Base UI primitives (Sheet, Button, Empty, ToggleGroup) with a semantic Tailwind adapter to the existing tokens, no preflight and no global preset. Settings retains EN/NL and theme choices; remove misleading legacy skin choices without deleting their stored values.
Fix nested Select Escape propagation, dialog focus return, mobile navigation reachability, unknown-versus-zero readings, false empty-success states, provider name clipping, and traffic cell overlap. Add behavioral regressions and durable component ownership.

Head: 174f152960ab06c649797b2d8be943d3d331508d. This is deliberately DRAFT: the full visual redesign, provider detail migration, public landing and deployment acceptance are not complete. The earlier Orbit visual proposal was rejected; this PR does not claim user design approval.

Verification

GUI isolated suite re-run on committed head 174f152960ab06c649797b2d8be943d3d331508d: 474 pass, 0 fail, 2059 assertions. GitHub CI still required; the local evidence is not a GitHub approval.
GUI lint, i18n lint and production build passed. Root typecheck and privacy scan passed. Documentation build passed: 156 pages.
Existing Brave session: desktop 1440, intermediate actual 1023 CSS px, mobile 390; native Tab/Shift+Tab focus wrap, Escape listbox then Sheet, opener focus restore, locale round trip, and no overflow in inspected mobile navigation/traffic. Populated screenshots use explicitly marked synthetic fixtures, NOT live proxy evidence.
Bounded independent dependency inspection: all 44 added lock entries match npm integrity metadata; eight downloaded archives checked by SHA-512; Bun/npm/OSV returned no known advisories. No added install hooks or suppressions. Maintainer security approval remains required; attestations were not cryptographically verified.
Premium static audit remains NON-PASS: 19 hits, zero unresolved owners. Eleven authored-Select case-insensitive scanner hits, five action-detection hits (including working anchor-rendered shadcn Buttons), three legacy vertically resizable textareas. No suppressions or functionality removal to force green. DESIGN lint: zero errors, one warning because the established markdown contract is not YAML-token export.
Exact-head mandatory pre-push: 6814 pass, 2 skip, 0 fail, 33713 assertions across 504 files (218.03s). Typecheck, GUI lint, privacy scan and React Doctor passed; no Doctor issues. Push succeeded without bypass. The first pass found a quote-format assertion; the fix retains the exact Vite host value while accepting either valid quote style. Cross-platform GitHub CI remains separate. No deployment, release or merge performed.

Linear

Issue: GRO2-1560 (existing OCX redesign/release campaign).

Checklist

Scope stays focused and avoids unrelated cleanup.
Docs or release notes were updated when needed.
Required exact-head CI and maintainer/security approvals.
Full design acceptance and remaining migration.

Summary by CodeRabbit

New Features
- Redesigned dashboard with responsive navigation, clearer metrics, empty states, and improved loading/error feedback.
- Added a model catalog workspace with global search, provider filtering, model inspection, visibility controls, provenance details, and custom model management.
- Added responsive layouts, reduced-motion support, accessible settings, theme controls, and improved keyboard focus behavior.
- Added reusable interface controls, alerts, forms, drawers, accordions, and loading indicators.
Documentation
- Updated quickstart, dashboard, sub-agent, and design documentation with current interface guidance.
Tests
- Expanded coverage for dashboard states, model workflows, navigation, settings, accessibility, and failure handling.

…patterns

coderabbitai · 2026-09-06T20:25:54Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Team

Run ID: 1aa0f7a7-f7e1-4b31-945c-009de898cb70

📥 Commits

Reviewing files that changed from the base of the PR and between fafaa3f and bac9579.

⛔ Files ignored due to path filters (1)

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

📒 Files selected for processing (70)

docs-site/src/content/docs/getting-started/quickstart.md
docs-site/src/content/docs/guides/sub-agent-surface.md
docs-site/src/content/docs/guides/web-dashboard.md
gui/AGENTS.md
gui/DESIGN.md
gui/UX-CONTRACT.md
gui/components.json
gui/package.json
gui/premium-ui.json
gui/public/third-party-notices.txt
gui/src/App.tsx
gui/src/components/MatrixMark.tsx
gui/src/components/MetricList.tsx
gui/src/components/SettingsSheet.tsx
gui/src/components/WorkspaceNavigation.tsx
gui/src/components/primitives/accordion.tsx
gui/src/components/primitives/alert.tsx
gui/src/components/primitives/badge.tsx
gui/src/components/primitives/button.tsx
gui/src/components/primitives/empty.tsx
gui/src/components/primitives/field.tsx
gui/src/components/primitives/input-group.tsx
gui/src/components/primitives/input.tsx
gui/src/components/primitives/label.tsx
gui/src/components/primitives/select.tsx
gui/src/components/primitives/separator.tsx
gui/src/components/primitives/sheet.tsx
gui/src/components/primitives/spinner.tsx
gui/src/components/primitives/switch.tsx
gui/src/components/primitives/textarea.tsx
gui/src/components/primitives/toggle-group.tsx
gui/src/components/primitives/toggle-variants.ts
gui/src/components/primitives/toggle.tsx
gui/src/i18n/en.ts
gui/src/i18n/nl.ts
gui/src/main.tsx
gui/src/pages/Dashboard.tsx
gui/src/pages/ModelInspector.tsx
gui/src/pages/Models.tsx
gui/src/pages/models-advanced-controls.tsx
gui/src/pages/models-combos-summary.tsx
gui/src/pages/models-modals.tsx
gui/src/pages/models-provider-card.tsx
gui/src/pages/models-shared.ts
gui/src/styles-models-workspace.css
gui/src/styles.css
gui/src/styles/app-base.css
gui/src/styles/model-catalog.css
gui/src/styles/primitives.css
gui/src/styles/workspace-orbit.css
gui/src/ui.tsx
gui/tests/dashboard-data-states.test.tsx
gui/tests/field-error.test.tsx
gui/tests/frontend-component-coverage.test.tsx
gui/tests/grok-page.test.ts
gui/tests/matrix-mark.test.tsx
gui/tests/models-empty-provider.test.tsx
gui/tests/models-provider-head.test.ts
gui/tests/models-workspace-selection.test.tsx
gui/tests/settings-sheet.test.tsx
gui/tests/sidebar-codex-auth.test.ts
gui/tests/workspace-navigation.test.tsx
gui/tsconfig.app.json
gui/tsconfig.json
gui/vite.config.ts
tests/claude-messages-endpoint.test.ts
tests/install-scripts.test.ts
tests/rate-limit-reset-credits.test.ts
tests/server-combo-failover-e2e.test.ts
tests/server-live.test.ts

Disabled knowledge base sources:

Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.

📝 Walkthrough

Walkthrough

The PR redesigns the GUI shell and Models workspace, adds reusable Base UI primitives and responsive styling, updates dashboard loading states, expands accessibility behavior, adds documentation and configuration, and introduces broad GUI and server test coverage.

Changes

GUI redesign

Layer / File(s)	Summary
Contracts and tooling `gui/UX-CONTRACT.md`, `gui/components.json`, `gui/package.json`, `gui/vite.config.ts`, `gui/src/i18n/*`	Adds UX ownership rules, Base UI and Tailwind configuration, dependencies, aliases, build integration, and English/Dutch strings.
Workspace shell and settings `gui/src/App.tsx`, `gui/src/components/WorkspaceNavigation.tsx`, `gui/src/components/SettingsSheet.tsx`, `gui/src/styles/workspace-orbit.css`	Adds icon navigation, translated titles, motion-aware selection, accessible confirmation controls, and a Base UI settings sheet with focus restoration.
Reusable primitives and styles `gui/src/components/primitives/*`, `gui/src/styles/primitives.css`, `gui/src/styles/model-catalog.css`	Adds Base UI wrappers for buttons, fields, sheets, selects, toggles, alerts, accordions, inputs, and empty states, with responsive and reduced-motion styling.
Dashboard and Models workspace `gui/src/pages/Dashboard.tsx`, `gui/src/pages/Models.tsx`, `gui/src/pages/models-*.tsx`, `gui/src/pages/ModelInspector.tsx`	Adds explicit dashboard loading and failure states, global catalog search, provider filtering, selection-driven inspection, visibility controls, custom-model dialogs, advanced controls, and responsive catalog layout.
Validation and maintenance `gui/tests/`, `tests/`	Adds GUI behavior tests and updates existing tests for DOM isolation, typed fixtures, timer cleanup, stricter routing assertions, and endpoint probes.

Documentation

Layer / File(s)	Summary
Dashboard and catalog documentation `docs-site/src/content/docs/getting-started/quickstart.md`, `docs-site/src/content/docs/guides/web-dashboard.md`, `docs-site/src/content/docs/guides/sub-agent-surface.md`	Documents responsive navigation, dashboard data states, the pending catalog redesign, and planned control placement.
Design and attribution records `gui/DESIGN.md`, `gui/AGENTS.md`, `gui/premium-ui.json`, `gui/public/third-party-notices.txt`	Updates design authority, validation commands, UI contract metadata, and third-party notices.

Estimated code review effort: 5 (Critical) | ~120 minutes

Suggested reviewers: groeponline

Sequence Diagram(s)

sequenceDiagram
  participant Operator
  participant App
  participant Models
  participant ModelInspector
  participant API
  Operator->>App: Open Models workspace
  App->>Models: Render catalog and controls
  Models->>API: Load catalog and provider data
  API-->>Models: Return models and visibility state
  Operator->>Models: Search, filter, or select model
  Models->>ModelInspector: Show provider-qualified model details
  Operator->>ModelInspector: Toggle visibility or copy model ID
  ModelInspector->>API: Persist visibility when changed
  API-->>ModelInspector: Return success or failure state

✨ 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 feat/ocx-interface-redesign-20260906

Warning

Some tools did not complete. Review the errors below.

🔧 Biome (2.5.8)

gui/src/styles/primitives.css

File contains syntax errors that prevent linting: Line 7: Tailwind-specific syntax is disabled.

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

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

socket-security · 2026-09-06T20:26:53Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	class-variance-authority@0.7.1
	@base-ui/react@1.8.0
	cn@0.2.6
	lucide-react@1.41.0
	@fontsource-variable/manrope@5.3.0
	tailwindcss@4.3.3
	@tailwindcss/vite@4.3.3
	motion@13.2.0

View full report

socket-security · 2026-09-06T20:26:54Z

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert (click "▶" to expand/collapse)
Warn		License policy violation: npm `@fontsource-variable/manrope` under OFL-1.1 License: OFL-1.1 - The applicable license policy does not permit this license (5) (npm metadata) License: OFL-1.1 - The applicable license policy does not permit this license (5) (package/package.json) License: OFL-1.1 - The applicable license policy does not permit this license (5) (package/LICENSE) From: gui/package.json → `npm/@fontsource-variable/manrope@5.3.0` ℹ Read more on: This package \| This alert \| What is a license policy violation? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at `support@socket.dev`. Suggestion: Find a package that does not violate your license policy or adjust your policy to allow this package's license. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment `@SocketSecurity ignore npm/@fontsource-variable/manrope@5.3.0`. You can also ignore all packages with `@SocketSecurity ignore-all`. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

MisterWanted · 2026-09-06T21:47:03Z

Model workspace and interaction polish

This continues the existing draft redesign, not a new release or production cutover.

Replace provider rail/hover cards with a searchable catalog and persistent model inspector.
Preserve provider-qualified selection, native/routed visibility semantics, custom-model confirmation, provider bulk scope, and saved collapse preferences.
Clear removed selections on refresh and restore focus without stealing focus from unrelated controls.
Refine desktop geometry: single appbar on wide screens, underlined subtabs, aligned metadata, less rounded chrome, and a separated inspector. Mobile remains list-or-detail with an explicit Back action.
Add exact model-ID copy with scoped success/failure feedback through the existing clipboard hook.
Apply the requested Kinetics/sv-matrix/Beam references as bounded patterns: decorative center-out matrix and monochrome copy-success boundary feedback, no new dependency or ambient loop. Reduced motion and keyboard activation remain supported.
Repair a formatting-sensitive CSS assertion without relaxing its layout expectations.

Validation on the final content:

Pushed exact head: 27cffd5daa0d0ff173d26ce08235c541f7c06007.
Mandatory pre-push: 6814 passed, 2 existing skips, 0 failed, 33719 assertions,
504 files, 249.19s. Typecheck, GUI lint, privacy scan and changed-scope React Doctor passed.
One GitHub snapshot after push: required CI and Socket PR Alerts still running;
Socket Project Report succeeded. No CI-green or deployment claim.
GUI: 492 passed, 0 failed; 2267 assertions across 97 files.
GUI lint/i18n/TypeScript+Vite build passed. Docs: 156 pages built.
Bounded read-only behavior reviews found no remaining actionable selection/header/clipboard regression after the removed-selection fix. This is not maintainer approval.
Visual fixtures verified the initial catalog slice and the 1920×1080 polish geometry. The browser connection disappeared before the final reference pass could be captured; final-head light/dark/mobile/motion visual acceptance is still open. Fixture catalog values are not live provider/model evidence.

The draft remains pending full visual acceptance, remaining screen/landing migration, exact-head required CI and maintainer/security approval. No merge or deployment claim.

MisterWanted · 2026-09-06T23:04:32Z

Library component adoption — 7 September

Continues this PR on the existing redesign branch. Component migration in
76bdcb8db, follow-up validation fixes in fcee9c21e and 92ac1e311.
Quality/component composition follow-up: edbf5655f.

Imported 12 actual shadcn Base UI registry component files into the existing
shared primitive layer. Models/inspector now use Button, InputGroup, Select,
Badge, Switch, Accordion, Field, Alert, Empty, Separator and Spinner; global
navigation uses the existing shared Button as well.
Spinners represent real pending catalog-load/provider-refresh/custom-save
work. Reduced motion disables rotation and the new transitions. Touch switches
expose a 44px target. Existing semantic monochrome tokens and no-preflight
boundary are retained; no new blue/purple palette.
Selection, visibility mutations, focus/search clear, provider filter,
disclosure independence and success/error pending states have regression tests.
Added real DOM identity tests for stable FieldError message keys.
The only added dependency is exact lucide-react@1.41.0, no transitive
additions or install scripts. Registry tarball integrity matches the lock;
Bun/npm/OSV checks returned no advisory findings. This evidence is not a
maintainer security approval. Upstream license notices ship in GUI output.
Addressed the 25 CodeFactor annotations from 92ac1e311: extracted focused
controlled model/provider/settings/modal components with state and API ownership
retained in the page; eight duplicate CSS selectors consolidated with equivalent
final declarations; eleven test-fixture any annotations replaced by wire shapes;
complex test dispatchers split without changing their 259 assertion expressions.
Local complexity <=15 passes on the extracted components; remote CodeFactor
status remains SHA-scoped and is recorded below rather than assumed green.
Full-gate investigation found an SSE test timer surviving cancellation and
unsolicited localhost GET / discovery probes inflating catch-all fixture
counters. Timer ownership and explicit protocol fixture routing are fixed;
deterministic GET / rejection regressions preserve legitimate duplicate-POST
detection and all deadline assertions. No production provider/auth changes.

GUI: 499 tests passed, 0 failed, 2338 assertions; GUI build, docs build, privacy
and changed-scope React Doctor verified. Targeted protocol fixtures: 68 passed,
0 failed, 373 assertions. Full exact-head push-gate outcome is recorded below.

Browser evidence: real existing Brave with intercepted synthetic fixtures,
1920x1080 desktop and 390x844 mobile; no horizontal overflow, reduced-motion
switch behavior, opened provider dropdown/accordion and native Enter/Escape
focus return. These are NOT production model availability or deployment proofs.

Durable handoff:
/home/joep/Overleg/chefgroep/2026-09-07-ocx-library-components-handoff.md

PR remains draft. Remaining gates: exact-head maintainer/security review,
terminal required CI, remaining-screen visual acceptance and the existing
release/canary path. No merge or deployment claimed.

Final push evidence

GitHub head confirmed: edbf5655fc1456f4f4d7476ad63652d0c538b3ce, base main,
draft OPEN. Normal pre-push succeeded without bypass: 6814 pass, 2 existing
skips, 0 fail, 33723 assertions, 504 files, 229.85s. Typecheck, GUI lint,
privacy and changed-scope React Doctor (including new tracked components) passed.

One exact-head GitHub snapshot: Socket Project Report success, CodeRabbit success;
CodeFactor, Socket PR Alerts and required Actions checks queued/in progress.
PR image publish skipped. No terminal all-green CI or maintainer approval claim.
Fresh post-extraction desktop/mobile fixture screenshots are in the handoff.
Owned preview tab/server stopped; worktree clean.

# Conflicts: # gui/bun.lock # gui/package.json

MisterWanted added 4 commits September 6, 2026 21:25

feat(gui): establish Orbit workspace identity and motion navigation

2891af3

test(gui): preserve Grok route assertion across JSX formatting

340d23a

feat(gui): adopt shadcn primitives and correct workspace interaction …

261ca85

…patterns

fix(gui): stabilize shared controls and preserve preview contract checks

174f152

github-actions Bot added the enhancement label Sep 6, 2026

MisterWanted added 2 commits September 6, 2026 23:18

feat(gui): replace model hover cards with a searchable workspace

ab7d352

feat(gui): refine workspace proportions and bounded interaction feedback

27cffd5

MisterWanted added 4 commits September 7, 2026 00:21

feat(gui): adopt shadcn controls and pending-state motion in models

76bdcb8

fix(tests): clean up delayed streams and stabilize field errors

fcee9c2

test: isolate protocol fixtures from localhost discovery probes

92ac1e3

refactor(gui): compose model controls and close quality findings

edbf565

Merge remote-tracking branch 'origin/main' into pr197-gui-review

bac9579

# Conflicts: # gui/bun.lock # gui/package.json

MisterWanted marked this pull request as ready for review September 8, 2026 00:11

MisterWanted merged commit 2ce7b15 into main Sep 8, 2026
22 of 24 checks passed

MisterWanted mentioned this pull request Sep 8, 2026

release: prepare v1.4.0 and finish review execution fixes #205

Merged

Navigation Menu

Uh oh!

feat(gui): migrate workspace controls and remove template UI patterns - #197

feat(gui): migrate workspace controls and remove template UI patterns#197
MisterWanted merged 11 commits into
mainfrom
feat/ocx-interface-redesign-20260906

MisterWanted commented Sep 6, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Sep 6, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

socket-security Bot commented Sep 6, 2026 •

edited

Loading

Uh oh!

socket-security Bot commented Sep 6, 2026 •

edited

Loading

Uh oh!

MisterWanted commented Sep 6, 2026

Uh oh!

MisterWanted commented Sep 6, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

MisterWanted commented Sep 6, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Verification

Linear

Checklist

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Sep 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

socket-security Bot commented Sep 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

socket-security Bot commented Sep 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MisterWanted commented Sep 6, 2026

Model workspace and interaction polish

Uh oh!

MisterWanted commented Sep 6, 2026

Library component adoption — 7 September

Final push evidence

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

MisterWanted commented Sep 6, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Sep 6, 2026 •

edited

Loading

socket-security Bot commented Sep 6, 2026 •

edited

Loading

socket-security Bot commented Sep 6, 2026 •

edited

Loading