feat(gui): improve models workspace layout stability#438
Merged
Conversation
Adds a workspace layout for the Models tab following the Providers workspace DNA. The left rail lists an All-providers entry plus each provider with its active/total count; the main pane renders the controls, the selected provider's model group (or all groups), and the empty state. The per-group render, controls, combos, empty state, and modals are extracted into shared blocks so classic and workspace views behave identically. Classic view stays available behind a toggle persisted in localStorage (ocx-models-view). New i18n keys for the rail header and All-providers entry in all six locales.
Adds a Workspace/Classic toggle to the sidebar footer that switches the whole app's view preference at once. It writes every tab's ocx-*-view localStorage key and bumps a render key so the current page remounts and re-reads its preference immediately. Per-page toggles keep working, and the sidebar label re-reads the preference on navigation so it stays accurate. Future tabs only need to register their key in WORKSPACE_VIEW_KEYS. Also fills in the 10 missing sub.workspace.* keys in ja.ts that the rebase onto dev surfaced. New i18n key app.viewMode in all six locales; reuses existing pws.workspaceToggle/classicToggle labels.
…d placement, drop orderHint)
The v2Applied status message leaked the internal config key multi_agent_v2 (with underscore) to users. Use the localized Sub-agent label instead, across all six locales.
Add a reusable Tooltip primitive (glass material, border, radius, fade-in) matching the design system, and use it for the Shadow Call Intercept info icon on the Models tab instead of the unstyleable browser title attribute.
# Conflicts: # gui/src/App.tsx # gui/src/pages/Models.tsx
# Conflicts: # gui/src/App.tsx # gui/src/styles.css
Keep models workspace controls on a stable top row and remove empty gaps so Sub-agent mode, shadow-call controls, and context-cap spacing remain consistent across model label lengths. Also loosen dashboard sidecar select sizing to reserve space without forcing oversized dropdowns.
📝 WalkthroughWalkthroughThe Models page now supports an optional workspace view with provider filtering, collapse-all controls, shared rendering blocks, responsive styling, tooltips, synchronized view-mode routing, and updated localization across six languages. ChangesModels workspace UI
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant App
participant RouteState
participant Models
participant Tooltip
participant localStorage
App->>RouteState: resolve view mode from route hash
RouteState->>Models: pass viewMode
Models->>Tooltip: render delayed control hints
Models->>localStorage: persist collapsed provider IDs
Models-->>App: render workspace or standard layout
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Resolve review findings for Models workspace behavior and accessibility: keep empty routed provider groups correctly classified, reconcile stale selected provider state after polling, localize the shadow-call warning label, and replace nested main landmarks with a labeled section. Also align locale terminology updates, document shared control CSS scope, improve control responsiveness at medium widths, and make tooltip content screen-reader associated with Escape-to-dismiss support.
Move provider-selection reconciliation into models reload so we avoid set-state-in-effect while keeping stale selections safe, and memoize route hash handlers so hook dependencies are explicit and lint-clean.
Use a models-workspace container query so the provider rail stacks before actions clip beside the desktop sidebar, and wrap provider header actions with Models-specific classes.
Collaborator
Author
|
@coderabbitai review |
✅ Action performedReview finished.
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@gui/src/pages/Models.tsx`:
- Around line 585-586: Replace the clickable provider header div in the Models
component with a dedicated focusable toggle button using
aria-expanded={isCollapsed ? false : true}, and keep the existing
provider-collapse behavior through toggleCollapse(provider). Structure
.models-provider-actions as a sibling rather than nesting its action buttons
inside the toggle button, while preserving the current collapsed/open styling.
🪄 Autofix (Beta)
❌ Autofix failed (check again to retry)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 883c77eb-daa1-4210-8cf1-e497dcd8ad60
📒 Files selected for processing (3)
gui/src/pages/Models.tsxgui/src/styles-models-workspace.cssgui/tests/models-provider-head.test.ts
Comment on lines
+585
to
+586
| <div onClick={() => toggleCollapse(provider)} | ||
| className={`row group-head models-provider-head${isCollapsed ? "" : " open"}`}> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Make the provider-collapse control keyboard-operable.
Line 585 places collapse behavior on a non-focusable div, so keyboard users cannot expand or collapse provider groups. Use a dedicated toggle <button aria-expanded={...}> for the header summary, with .models-provider-actions as its sibling; nesting the existing action buttons inside a button would be invalid.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@gui/src/pages/Models.tsx` around lines 585 - 586, Replace the clickable
provider header div in the Models component with a dedicated focusable toggle
button using aria-expanded={isCollapsed ? false : true}, and keep the existing
provider-collapse behavior through toggleCollapse(provider). Structure
.models-provider-actions as a sibling rather than nesting its action buttons
inside the toggle button, while preserving the current collapsed/open styling.
|
Note Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it. An unexpected error occurred while generating fixes: Not Found - https://docs.github.com/rest/git/refs#get-a-reference |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Test plan
bun run build:gui/#modelsfor Shadow Call + Sub-agent row alignment and reduced gap above Context cap/#dashboardsidecar dropdown behavior (no forced always-wide trigger)bun run testbun run typecheckSummary by CodeRabbit