feat(companion/ui): update ui design specification - #148
Conversation
- Refresh design document with latest UI/UX decisions - Update last refreshed date to 2026-07-23 - Incorporate Brainless component registry sources and review dates - Refine brand "avoid" list to include soft-elevation card stacks and mixed UI typography - Clarify product goal to let users choose Claude Code or Codex CLI experience - Update primary navigation description to "inset floating terminal tab bar" - Detail core screens for Activity report and Settings preferences - Refine content hierarchy for global inventory and screen-reader status - Update visual language for color, typography, spacing, shape, and elevation - Specify existing and new/changed components based on Brainless reference This update reflects the current design direction, emphasizing a terminal-native aesthetic and integrating Brainless components for a consistent user experience. It clarifies the visual language and component usage across the application.
|
Warning Review limit reached
Next review available in: 9 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (8)
📝 WalkthroughWalkthroughThe Companion app now uses fixed-dark Claude and Codex themes, a shared agent header and floating tab bar, theme-aware terminal task primitives, migrated preference storage, updated Settings and Activity views, and expanded UI/CSS contract tests. ChangesCompanion agent shell migration
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant CompanionApp
participant AgentTabs
participant SettingsPanel
participant PreferenceStore
User->>AgentTabs: Select Settings
AgentTabs->>CompanionApp: Emit settings view
CompanionApp->>SettingsPanel: Render current theme
User->>SettingsPanel: Select Claude or Codex
SettingsPanel->>CompanionApp: Emit theme preference update
CompanionApp->>PreferenceStore: Persist font and theme
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ed0cdfe53e
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/companion/tests/activity-calendar.test.tsx (1)
530-543: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winScope the CSS assertions to each theme and calendar selector.
The current checks can pass if
--cal-bg-1exists in only one theme, or ifvar(--cal-*)appears somewhere unrelated in the stylesheet. Assert bothmain[data-theme="claude"]andmain[data-theme="codex"], and verify the.cal-chip/.cal-sessionmappings directly.Also applies to: 554-569
🤖 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 `@apps/companion/tests/activity-calendar.test.tsx` around lines 530 - 543, Update the test around the theme and calendar fallback assertions to scope checks to both main[data-theme="claude"] and main[data-theme="codex"]. Verify each theme defines --cal-bg-1 and --cal-bg-2, and assert the .cal-chip and .cal-session data-color mappings directly rather than matching unrelated stylesheet content; apply the same scoping to the assertions in the additional referenced block.
🧹 Nitpick comments (3)
apps/companion/tests/app-shell.test.tsx (1)
143-152: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winTest doesn't actually verify the status stays visually hidden.
The title says "without a visible chip" but the assertions only check
.agent-controlsflex layout, not that.toolbar-status-sris visually hidden (e.g. clip/sr-only rule). Consider adding an assertion against the.toolbar-status-srrule itself so a future regression that makes the chip visible would be caught.🤖 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 `@apps/companion/tests/app-shell.test.tsx` around lines 143 - 152, The test named “keeps agent status available to assistive tech without a visible chip” only verifies agent-controls layout. Extend it to inspect the `.toolbar-status-sr` CSS rule and assert its screen-reader-only visual-hiding properties, while preserving the existing flex-layout assertions.apps/companion/src/styles/chrome.css (1)
13-22: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winHardcoded
border-radius: 6pxreplaces the--radiustoken.This drops the shared radius variable in favor of a magic number, compounding with the hardcoded
4px/6pxvalues already scattered inagent-shell.css. Consider reintroducing a shared--radiuscustom property referenced from all component stylesheets to keep shape consistent as the design system evolves.🤖 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 `@apps/companion/src/styles/chrome.css` around lines 13 - 22, Replace the hardcoded 6px border radius in the button/select rule with the shared --radius custom property, reusing the existing design-token definition rather than introducing another value.apps/companion/src/styles/themes.css (1)
15-16: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value
claude's--current-step-bgduplicates--emphasis-soft's literal value instead of referencing it.
codexreferencesvar(--emphasis-soft)for the same property (line 68);claudecould do the same for consistency.main[data-theme="claude"] { ... --emphasis-soft: rgba(192, 202, 245, 0.08); --task-selected-summary-bg: rgba(192, 202, 245, 0.06); ... - --current-step-bg: rgba(192, 202, 245, 0.08); + --current-step-bg: var(--emphasis-soft);Also applies to: 27-27
🤖 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 `@apps/companion/src/styles/themes.css` around lines 15 - 16, Update the claude theme’s --current-step-bg declaration to reference var(--emphasis-soft) instead of duplicating its rgba literal value, matching the existing codex theme declaration and preserving the same appearance.
🤖 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 `@apps/companion/src/styles/base.css`:
- Around line 4-6: Remove unnecessary quotation marks from the font-family names
SFMono-Regular, Menlo, Monaco, and Consolas in the base font stack, and apply
the same unquoted formatting to the duplicated --app-font-family declaration in
main. Keep Liberation Mono quoted because it contains whitespace.
- Around line 44-47: Reformat the padding-bottom calc expression in the base
stylesheet so the “+” operator starts the continued line rather than ending the
previous line, resolving the Stylelint formatting error without changing the
calculation.
In `@apps/companion/src/ui/AgentHeader.tsx`:
- Around line 12-18: Update AgentInventory to conditionally render singular or
plural labels for summary.projectCount and summary.taskCount, matching the
branching behavior used by ProjectGroup. Ensure counts of 1 display “project”
and “task”, while all other counts retain “projects” and “tasks”.
In `@DESIGN.md`:
- Line 106: Update the layout description in DESIGN.md to hyphenate “one-third”
in the phrase describing IDE, Terminal, and Finder occupying one-third of the
row; leave the surrounding wording unchanged.
- Line 66: Update the Codex secondary-text specification in DESIGN.md to use
`#949494`, matching the Codex --muted token defined in themes.css; keep the
existing theme implementation unchanged so the design contract and CSS share one
value.
- Line 95: Update the CSS architecture documentation around the token/component
ownership statement and the later style.css statement so they describe one
consistent ownership model. Clarify that style.css is the import manifest while
the imported files own the custom properties and component classes, or revise
both references to match the actual implementation.
In `@docs/plans/0045-companion-agent-shell-claude-codex-themes.md`:
- Line 788: Correct or defer all future-dated completion evidence in
docs/plans/0045-companion-agent-shell-claude-codex-themes.md: lines 788
(full-proof), 210 (system-mode cleanup), 800 (residue check), 821 (native visual
QA), 827 (migration proof), and 833 (archive readiness). Replace July 23, 2026
with the actual completion date where verified, or mark each entry pending until
its checks occur.
---
Outside diff comments:
In `@apps/companion/tests/activity-calendar.test.tsx`:
- Around line 530-543: Update the test around the theme and calendar fallback
assertions to scope checks to both main[data-theme="claude"] and
main[data-theme="codex"]. Verify each theme defines --cal-bg-1 and --cal-bg-2,
and assert the .cal-chip and .cal-session data-color mappings directly rather
than matching unrelated stylesheet content; apply the same scoping to the
assertions in the additional referenced block.
---
Nitpick comments:
In `@apps/companion/src/styles/chrome.css`:
- Around line 13-22: Replace the hardcoded 6px border radius in the
button/select rule with the shared --radius custom property, reusing the
existing design-token definition rather than introducing another value.
In `@apps/companion/src/styles/themes.css`:
- Around line 15-16: Update the claude theme’s --current-step-bg declaration to
reference var(--emphasis-soft) instead of duplicating its rgba literal value,
matching the existing codex theme declaration and preserving the same
appearance.
In `@apps/companion/tests/app-shell.test.tsx`:
- Around line 143-152: The test named “keeps agent status available to assistive
tech without a visible chip” only verifies agent-controls layout. Extend it to
inspect the `.toolbar-status-sr` CSS rule and assert its screen-reader-only
visual-hiding properties, while preserving the existing flex-layout assertions.
🪄 Autofix (Beta)
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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 6269c162-08fb-4f5f-aeba-a62ef38dc528
📒 Files selected for processing (39)
.gitignoreDESIGN.mdapps/companion/src/App.tsxapps/companion/src/activity/activity-calendar.cssapps/companion/src/application/preferences.tsapps/companion/src/application/systemThemeMode.tsapps/companion/src/application/themePreferences.tsapps/companion/src/style.cssapps/companion/src/styles/agent-shell.cssapps/companion/src/styles/base.cssapps/companion/src/styles/chrome.cssapps/companion/src/styles/settings.cssapps/companion/src/styles/status-groups.cssapps/companion/src/styles/task-actions.cssapps/companion/src/styles/task-details.cssapps/companion/src/styles/themes.cssapps/companion/src/ui/AgentHeader.tsxapps/companion/src/ui/AgentTabs.tsxapps/companion/src/ui/AgentThemePicker.tsxapps/companion/src/ui/AppSummary.tsxapps/companion/src/ui/AppToolbar.tsxapps/companion/src/ui/ProjectGroup.tsxapps/companion/src/ui/PromptLine.tsxapps/companion/src/ui/SettingsPanel.tsxapps/companion/src/ui/SettingsView.tsxapps/companion/src/ui/StatusToken.tsxapps/companion/src/ui/TaskActionIcon.tsxapps/companion/src/ui/TaskRow.tsxapps/companion/src/ui/TerminalPanel.tsxapps/companion/src/ui/ViewNav.tsxapps/companion/tests/activity-calendar.test.tsxapps/companion/tests/agent-primitives.test.tsxapps/companion/tests/agent-tabs.test.tsxapps/companion/tests/app-shell.test.tsxapps/companion/tests/preferences.test.tsapps/companion/tests/project-group.test.tsxapps/companion/tests/settings-panel.test.tsxapps/companion/tests/task-row.test.tsxdocs/plans/0045-companion-agent-shell-claude-codex-themes.md
💤 Files with no reviewable changes (5)
- apps/companion/src/ui/AppToolbar.tsx
- apps/companion/src/application/systemThemeMode.ts
- apps/companion/src/ui/TaskActionIcon.tsx
- apps/companion/src/ui/ViewNav.tsx
- apps/companion/src/ui/AppSummary.tsx
- Standardize Settings panel sections to use `fieldset`/`legend` anatomy - Correct pluralization for project and task counts in AgentHeader - Update font family declarations in `base.css` to remove quotes - Adjust `padding-bottom` calculation in `base.css` for clarity - Update secondary text color for Codex in `DESIGN.md` - Clarify layout adaptation description in `DESIGN.md` This commit refines the UI for consistency and readability, ensuring that the Settings panel adheres to a standardized structure and improving the accuracy of text displayed in the AgentHeader. Font declarations are cleaned up, and minor documentation updates are included for better clarity.
1 participant
This update reflects the current design direction, emphasizing a terminal-native aesthetic and integrating Brainless components for a consistent user experience. It clarifies the visual language and component usage across the application.
Summary by CodeRabbit
New Features
Style
Tests