feat(ui): redesign companion app layout and summary#108
Conversation
- Update `DESIGN.md` to reflect new UI architecture - Introduce `AppSummary` component for global inventory and status rollup - Replace flat task list with `ProjectGroup` components - Remove `memoEdit`, `memoClear`, `notiClear`, and `copyPath` actions - Update `commandForTaskAction` to reflect removed actions - Refine terminology and microcopy in `DESIGN.md` This redesign aims to improve the information hierarchy and visual clarity of the companion app. Grouping tasks by project and providing a global status summary makes it easier for users to quickly grasp the state of their work. The removal of certain actions simplifies the interface, focusing on core task management and navigation.
|
Warning Review limit reached
More reviews will be available in 47 minutes and 49 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?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 credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate. 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, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe companion popover is restructured from a flat title + row list to a project-grouped layout. ChangesCompanion Project-Grouped UI and Action Surface Narrowing
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
docs/plans/0037-companion-settings-cli-theme.md (2)
251-255: 💤 Low valueNon-goals section has repeated sentence beginnings; improve readability.
Lines ~251–255 list four non-goals, each starting with "Do not", which LanguageTool flags as awkward repetition. Restructure for variety or use a bullet list without the repeated prefix.
Suggested revision for non-goals section
## Non-goals -- Do not add task lifecycle mutation UI. -- Do not add arbitrary custom theme editor or arbitrary font input. -- Do not introduce Tailwind/shadcn/Radix. -- Do not change `workbranch list --json` / `list --global --json` schemaVersion 1. -Do not merge this work back into 0036; 0036 should remain independently implementable. +- Task lifecycle mutation UI is out of scope. +- Custom theme editors and arbitrary font inputs are not included. +- Tailwind, shadcn, and Radix are not adopted. +- The CLI contract (`workbranch list --json` / `list --global --json` schemaVersion 1) remains unchanged. +- This work is not merged back into 0036; 0036 remains independently implementable.🤖 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 `@docs/plans/0037-companion-settings-cli-theme.md` around lines 251 - 255, The Non-goals section has repetitive sentence structure with each bullet point starting with "Do not", which creates awkward readability. Restructure these bullet points to vary the sentence beginnings and improve readability. You can either rephrase some items using alternative verbs like "Avoid", "Skip", or "Do not merge" to break up the monotony, or convert them to noun-phrase style bullets (e.g., "Task lifecycle mutation UI" instead of "Do not add task lifecycle mutation UI") while maintaining clarity about what should not be included or changed.
192-201: ⚖️ Poor tradeoffCSS variable naming and theme class structure should be prescribed upfront.
Task 6 specifies that root uses
var(--app-font-family)but does not define the full CSS variable namespace for theme tokens (e.g.,--theme-foreground,--theme-background, etc.) or the class/attribute naming pattern (e.g.,data-theme="terminal-dark"vsclass="theme-terminal-dark"). Define these patterns now to avoid rework during implementation.Suggested CSS structure guidance for Task 6
- [ ] Replace proportional root stack with `var(--app-font-family)` defaulting to fixed-width. - [ ] Add root classes or data attributes for `font-*` and `theme-*` preferences. - [ ] Define theme variables for the four presets. +- [ ] Use CSS custom properties for all theme colors: `--color-bg`, `--color-fg`, `--color-accent`, `--color-border`, `--color-focus-ring`. +- [ ] Use `data-theme="terminal-dark" | "amber-crt" | "green-mono" | "high-contrast"` on `:root` to select theme. +- [ ] Use `data-font="system-mono" | "sf-mono" | ...` on `:root` to select font stack. +- [ ] Define theme presets as `:root[data-theme="..."]` blocks in CSS.🤖 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 `@docs/plans/0037-companion-settings-cli-theme.md` around lines 192 - 201, Task 6 specifies using CSS variables and theme presets but lacks prescriptive guidance on the variable naming namespace and the structural pattern for applying themes. Update the Task 6 section to define upfront the complete CSS variable naming convention for theme tokens (e.g., the specific variable names like --theme-foreground, --theme-background, etc.) and the exact class or data-attribute naming pattern to use for theme selection (e.g., data-theme="terminal-dark" or class="theme-terminal-dark"). This will prevent ambiguity and rework during implementation.
🤖 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 `@docs/plans/0037-companion-settings-cli-theme.md`:
- Around line 164-175: The Task 4 specification for the SettingsPanel lacks
accessibility structure requirements that should guide implementation. Add a new
subsection titled "Accessibility Requirements" or expand the existing checklist
in Task 4 to explicitly define the HTML semantic structure: require fieldset
elements with legend children for the Startup, Font, and Theme sections; mandate
aria-label attributes on the toolbar icon button that opens the settings panel;
specify that each form control (launch-at-login toggle, font select, theme
select) must have an associated label element using the for/id pattern; clarify
keyboard focus order starting from the settings panel opener through all
controls; and note that state changes (e.g., toggle activation, preference
updates) must be announced to screen readers using appropriate ARIA live regions
or role changes. This ensures implementers understand the complete a11y contract
from the specification rather than discovering gaps during review.
- Around line 177-190: The error handling strategy in the planned tasks is
incomplete. While line 189 specifies that launch-at-login toggle failures set
the footer/status message, Tasks 4 and 5 do not define error handling for font
and theme selector changes (such as store write failures or sanitization edge
cases). Add clarification to both tasks about how errors from preference updates
will be handled - either specify that font/theme changes should also surface
errors via the footer/status message pattern, or explicitly document that these
operations are assumed to never fail and why that assumption is safe. Ensure the
error handling strategy is consistent across all preference update operations.
---
Nitpick comments:
In `@docs/plans/0037-companion-settings-cli-theme.md`:
- Around line 251-255: The Non-goals section has repetitive sentence structure
with each bullet point starting with "Do not", which creates awkward
readability. Restructure these bullet points to vary the sentence beginnings and
improve readability. You can either rephrase some items using alternative verbs
like "Avoid", "Skip", or "Do not merge" to break up the monotony, or convert
them to noun-phrase style bullets (e.g., "Task lifecycle mutation UI" instead of
"Do not add task lifecycle mutation UI") while maintaining clarity about what
should not be included or changed.
- Around line 192-201: Task 6 specifies using CSS variables and theme presets
but lacks prescriptive guidance on the variable naming namespace and the
structural pattern for applying themes. Update the Task 6 section to define
upfront the complete CSS variable naming convention for theme tokens (e.g., the
specific variable names like --theme-foreground, --theme-background, etc.) and
the exact class or data-attribute naming pattern to use for theme selection
(e.g., data-theme="terminal-dark" or class="theme-terminal-dark"). This will
prevent ambiguity and rework during implementation.
🪄 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: c7157237-4190-4120-aa1d-7357db7d9bdf
📒 Files selected for processing (12)
DESIGN.mdapps/workbranch-companion/src/App.tsxapps/workbranch-companion/src/application/state.tsapps/workbranch-companion/src/infrastructure/tauriClient.tsapps/workbranch-companion/src/style.cssapps/workbranch-companion/src/ui/ProjectGroup.tsxapps/workbranch-companion/src/ui/TaskRow.tsxapps/workbranch-companion/tests/acl.test.tsapps/workbranch-companion/tests/project-group.test.tsxapps/workbranch-companion/tests/task-row.test.tsxdocs/plans/0036-companion-project-grouped-ui.mddocs/plans/0037-companion-settings-cli-theme.md
1 participant
DESIGN.mdto reflect new UI architectureAppSummarycomponent for global inventory and status rollupProjectGroupcomponentsmemoEdit,memoClear,notiClear, andcopyPathactionscommandForTaskActionto reflect removed actionsDESIGN.mdThis redesign aims to improve the information hierarchy and visual clarity of the companion app. Grouping tasks by project and providing a global status summary makes it easier for users to quickly grasp the state of their work. The removal of certain actions simplifies the interface, focusing on core task management and navigation.
Summary by CodeRabbit
New Features
Refactor
Documentation