Restyle project view (sidebar + dashboard) to match mockup

[TraderSamwise]

What

Implements the approved project-view redesign (reference: docs/mockups/project-view.html), porting the Linear/Cloudflare-style look into the real app. Same information architecture — this is a visual restyle plus two additive interactions (collapsible groups, empties disclosure). Builds on the full-width layout migration (#105).

Dashboard — app/(main)/(tabs)/(dashboard)/index.tsx (d93d0c5)

• Worktrees are now collapsible group headers (chevron · status dot · name · mono branch · count) with agents/services as full-width uniform rows beneath (status dot · bright name · muted mono tool · right-aligned status word · inline service actions).
• Empty worktrees render as single collapsed "empty" header rows.
• Lifted dark-slate surfaces, high-contrast text, hairline borders, single green status accent.

Sidebar — components/ProjectSidebar.tsx (f17e955)

• Underline Dashboard/Views tabs; collapsible worktree group rows with indented agent/service child rows (selected highlight + inline service actions preserved).
• Empty worktrees collapse behind a "N empty worktrees" disclosure; the main checkout stays pinned/visible.
• Extracts the restyle dot to a shared StatusDotMini (components/status-dot.tsx) reused by the dashboard.

Behavior

Navigation, session selection, service actions, and all loading/error/empty states are unchanged — verified by code audit on both files. Collapsible groups + empties disclosure are additive (no existing nav removed; empty worktrees had no clickable children).

Verification

• yarn typecheck + lint clean on all changed files (pre-existing cli-auth.tsx lint error is untouched/unrelated).
• Visual (desktop 1440, local LOCAL_MODE against aimux-dev): dashboard tree rendered with live data — group headers, agent/service rows, and empty rows match the mockup; sidebar header/tabs/state-card/picker verified. The dev per-project hosts idled out before the sidebar tree could be re-screenshotted with live data, but the sidebar's worktree/child rows reuse the same primitives as the verified dashboard tree.
• Mobile: rows use flex-1 min-w-0 + truncation; the app shell's mobile collapse was verified in Full-width layout migration + project-view redesign reference #105. Per-page mobile polish is intentionally deferred (each page gets its own facelift pass).

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Collapsible worktree groups with status indicators and agent/service counts in the dashboard.

• Style

  • Redesigned dashboard with row-based layout and dark slate color scheme.
  • Updated sidebar styling with new color palette and simplified navigation buttons.
  • Enhanced visual status indicators across project and worktree displays.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
app	Ready	Preview, Comment	Jun 7, 2026 9:31am

[coderabbitai]

Warning

Review limit reached

@TraderSamwise, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 20 minutes and 53 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f8099a93-4389-4abb-88e9-73dcdf79933b

📥 Commits

Reviewing files that changed from the base of the PR and between f17e955 and 763245f.

📒 Files selected for processing (1)

• app/components/ProjectSidebar.tsx

📝 Walkthrough

Walkthrough

Dashboard and sidebar UI components are unified under a new compact row-based design system. A reusable StatusDotMini indicator primitive is added, dashboard introduces row-based agent/service/worktree components with collapsible disclosure, and the sidebar refactors its tree display, state handling, and navigation styling to match the new palette throughout.

Changes

Dashboard and Sidebar Design System Refactor

Layer / File(s)	Summary
StatusDotMini indicator app/components/status-dot.tsx	New exported StatusDotMini component renders tiny status indicators with hollow (empty ring) or filled color modes for running, waiting, or muted status.
Dashboard row component primitives app/app/(main)/(tabs)/(dashboard)/index.tsx	Introduced StatusWord helper mapping status strings to text colors, and AgentRow/ServiceRow list items rendering compact bordered rows with StatusDotMini, labels, and action areas.
Dashboard WorktreeGroup and page layout app/app/(main)/(tabs)/(dashboard)/index.tsx	Reworked dashboard from static WorktreeSection to collapsible WorktreeGroup with internal state, computed running-state/count logic, chevron/status indicators, and conditional expansion. Updated main page container, header row layout with endpoint states, and empty/error/loading rendering.
Sidebar palette and worktree helper app/components/ProjectSidebar.tsx	Added palette documentation comment and worktreeHasChildren helper that determines whether a worktree has sessions/services to drive disclosure behavior.
Sidebar ProjectPicker and row styling app/components/ProjectSidebar.tsx	Refactored ProjectPicker header and empty-state layout. Updated project rows with StatusDotMini, color-coded online/offline labels, and path display. Updated AgentRow/ServiceRow with compact StatusDotMini, revised typography, ellipsis, and active state styling.
Sidebar WorktreeGroup header and disclosure app/components/ProjectSidebar.tsx	Updated ProjectHeader with new border/background/chevron styling. Reworked WorktreeGroup header with computed flags (hasChildren, anyRunning, bright), internal collapsed state, and conditional chevron rendering based on disclosure state.
Sidebar state card and WorktreeTree logic app/components/ProjectSidebar.tsx	Introduced SidebarStateCard for reusable bordered state UI with warning tone support. Significantly rewrote WorktreeTree rendering: added showEmpty state, early-return branches for host-not-running/host-error/loading/no-worktrees, and splits non-main groups into active vs empty under controlled disclosure.
Sidebar navigation and container styling app/components/ProjectSidebar.tsx	Refactored SidebarModeTabs with updated pressable classes, border/text colors, and padding. Restyles SidebarPrimaryNav buttons with row spacing, rounded/border, active background, and icon/text colors. Updated top-level sidebar wrapper to new background/border color tokens.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• TraderSamwise/aimux#63: Dashboard and sidebar row/card spacing and typography tightening in dashboard/index.tsx and ProjectSidebar.tsx overlaps directly with this PR's compact row primitive styling.
• TraderSamwise/aimux#49: Both PRs refactor empty/error/loading rendering paths in dashboard and sidebar (WorktreeGroup, state card, host-ready logic), with this PR restructuring the disclosure-driven state handling.
• TraderSamwise/aimux#59: Both PRs modify ProjectSidebar.tsx disclosure logic and worktree/navigation rendering (WorktreeGroup, WorktreeTree behavior alongside navigation-mode changes).

Poem

🐰 Rows now dance in slate so fine,
Dots that twinkle, trees align,
Chevrons click and collapse with grace,
Fresh design adorns this space!
✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 60.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: restyling the project view (sidebar and dashboard) to match a design mockup, which aligns with the core objectives of the PR.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/project-view-restyle

---

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

[coderabbitai]

🧹 Nitpick comments (1)

app/components/ProjectSidebar.tsx (1)

464-477: 💤 Low value

Consider adding accessibilityLabel for the empty worktrees disclosure.

The pressable lacks an explicit accessibility label; screen readers will read the nested text but an explicit label like "Toggle empty worktrees" improves the experience.

Suggested improvement

          <Pressable
            onPress={() => setShowEmpty((s) => !s)}
            className="flex-row items-center gap-2 rounded-md px-2 py-1.5 active:bg-[`#232429`]"
+           accessibilityLabel={`${showEmpty ? "Hide" : "Show"} ${emptyRest.length} empty worktree${emptyRest.length > 1 ? "s" : ""}`}
          >

🤖 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 `@app/components/ProjectSidebar.tsx` around lines 464 - 477, Add an explicit
accessibility label and state to the Pressable that toggles empty worktrees:
update the Pressable (the element using onPress={() => setShowEmpty((s) => !s)})
to include accessibilityLabel="Toggle empty worktrees" and set
accessibilityRole="button" plus accessibilityState={{ expanded: showEmpty }} so
screen readers get a clear label and expanded/collapsed state; keep the existing
visual text and Chevron rendering unchanged.

🤖 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.

Nitpick comments:
In `@app/components/ProjectSidebar.tsx`:
- Around line 464-477: Add an explicit accessibility label and state to the
Pressable that toggles empty worktrees: update the Pressable (the element using
onPress={() => setShowEmpty((s) => !s)}) to include accessibilityLabel="Toggle
empty worktrees" and set accessibilityRole="button" plus accessibilityState={{
expanded: showEmpty }} so screen readers get a clear label and
expanded/collapsed state; keep the existing visual text and Chevron rendering
unchanged.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: bb32506a-ae65-4b83-9799-c2bd6e77f696

📥 Commits

Reviewing files that changed from the base of the PR and between 4731af8 and f17e955.

📒 Files selected for processing (3)

• app/app/(main)/(tabs)/(dashboard)/index.tsx
• app/components/ProjectSidebar.tsx
• app/components/status-dot.tsx

[TraderSamwise]

@coderabbitai addressed your nitpick: empty-worktrees disclosure now has accessibilityRole="button", accessibilityState={{ expanded }}, and a dynamic accessibilityLabel (Fixed in 763245f).

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

@TraderSamwise Great, those three attributes together cover it well — accessibilityRole="button" for interaction semantics, accessibilityState={{ expanded }} for state announcement, and the dynamic label for context. The disclosure should now be fully navigable with screen readers. Thanks for following up with the commit reference!