Conversation
… ordering Rework the chat composer footer, message list, and pane layouts for a cleaner look. Redesign session cards and list pane with improved visual hierarchy. Reorder tab nav to prioritize Work and Lanes. Update design tokens, global CSS, and app store defaults to support the new layout. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Caution Review failedPull request was closed or merged during review 📝 WalkthroughWalkthroughRestructures chat UI and composer layout, introduces time-based session grouping and a draft-mode switcher, refactors terminal session cards and list layout, updates dark-theme design tokens/CSS, and propagates draft visibility/handlers through work view components. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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 |
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/desktop/src/renderer/components/terminals/TerminalsPage.tsx (1)
73-108:⚠️ Potential issue | 🟠 MajorAdd missing
useMemodependency forwork.showDraftKind.Line 88 passes
onShowDraftKind={work.showDraftKind}toWorkViewArea, but the dependency array (lines 93–107) omitswork.showDraftKind. This can cause the memoized component to use a stale callback ifwork.showDraftKindchanges.Suggested fix
const workViewArea = useMemo( @@ [ sortedLanes, work.sessions, work.visibleSessions, work.activeItemId, work.viewMode, work.draftKind, + work.showDraftKind, work.setViewMode, work.setActiveItemId, work.closeTab, work.launchPtySession, work.closingPtyIds, handleOpenChatSession, handleContextMenu, ], );🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/desktop/src/renderer/components/terminals/TerminalsPage.tsx` around lines 73 - 108, The memo for workViewArea passes onShowDraftKind={work.showDraftKind} to WorkViewArea but omits work.showDraftKind from the dependency array, risking a stale callback; update the useMemo dependency array for the computed workViewArea to include work.showDraftKind (alongside the existing work.* entries) so the memo recalculates when work.showDraftKind changes.apps/desktop/src/renderer/components/terminals/SessionListPane.tsx (1)
78-85:⚠️ Potential issue | 🟠 MajorDon't drop the existing draft/status controls without a replacement.
This refactor stops using
onShowDraftKindandsetFilterStatus, butSessionListPanestill receives those props andapps/desktop/src/renderer/components/terminals/TerminalsPage.tsxLines 146-172 still passes them in. Grouping by status is not equivalent to filtering by one status, and after selecting a session there is no longer a sidebar control to return to the draft/new-session view.Also applies to: 250-320
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/desktop/src/renderer/components/terminals/SessionListPane.tsx` around lines 78 - 85, SessionListPane currently stops using onShowDraftKind and setFilterStatus while TerminalsPage still passes them; restore handling so the draft/status controls remain functional: in SessionListPane locate props filterStatus, setFilterStatus, draftKind, showingDraft and onShowDraftKind and reintroduce UI elements or handlers that call setFilterStatus(...) to perform single-status filtering (distinct from grouping) and call onShowDraftKind(...) / toggle showingDraft to return to the draft/new-session view after selecting a session; ensure the component preserves both grouping behavior and the explicit filter/status and draft controls so TerminalsPage’s existing prop usage continues to work.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/desktop/src/renderer/components/chat/AgentChatComposer.tsx`:
- Around line 1125-1150: The compact footer buttons lack explicit accessible
names for screen readers; add aria-label attributes (or aria-labelledby) to each
icon/symbol-only button in this component—specifically the buttons that call
setAttachmentPickerOpen, openUploadPicker, and the slash-command handler that
references textareaRef, setSlashPickerOpen, setSlashQuery, and
setSlashCursor—e.g., aria-label="Attach files", aria-label="Upload file",
aria-label="Commands" (and similarly for the other symbol-only buttons at the
later ranges) so each control has a clear, programmatic name for assistive tech.
- Line 1303: Textarea padding was changed to py-2.5 but the ghost suggestion
overlay still uses py-3, causing the placeholder to jump; make both use the same
vertical padding. Edit the AgentChatComposer component: find the textarea class
string ("min-h-[44px] max-h-[200px] w-full resize-none bg-transparent px-4
py-2.5 ...") and the ghost suggestion overlay class (the one using py-3) and
change the overlay to py-2.5 (or extract a shared padding/class constant and use
it in both places) so their vertical padding is identical.
In `@apps/desktop/src/renderer/components/chat/AgentChatPane.tsx`:
- Line 2349: The chat column's wrapper div using className "flex min-h-0 min-w-0
flex-1 flex-col overflow-hidden" allows it to shrink to zero, letting the
Artifacts panel consume the whole split; update that wrapper to enforce a
sensible minimum width (e.g., replace "min-w-0" with "min-w-[280px]" or
"min-w-[320px]") so the message list remains visible, and apply the same change
where the chat column is defined around the Artifacts panel (the div with
className containing "flex-1" at the other occurrence noted) to keep consistent
behavior.
In `@apps/desktop/src/renderer/components/terminals/SessionCard.tsx`:
- Around line 95-99: In SessionCard.tsx, make the lane label shrink by adding a
truncation utility to the element that renders session.laneName (e.g., add
className="truncate" or wrap in an element with overflow-hidden text-ellipsis
and ensure parent has min-w-0) so long names don't force layout; and change the
delta badge rendering logic (the code that produces the plus/minus chips near
the lane, referenced by session.delta or similar) to conditionally render each
chip only when its numeric value is non-zero (e.g., render +N only if increase
!== 0 and render -N only if decrease !== 0) to prevent +0/-0 badges from
showing.
In `@apps/desktop/src/renderer/components/terminals/SessionListPane.tsx`:
- Around line 328-338: The empty-state is currently hidden when isByTime is
true; update the conditional in SessionListPane.tsx so the empty message shows
for the default by-time view as well by removing the !isByTime check (i.e.,
render the empty-state when !hasAnySessions && !isByLane). Keep the existing
branches using isByTime and byTimeList/isByLane so the rest of the UI behavior
is unchanged.
---
Outside diff comments:
In `@apps/desktop/src/renderer/components/terminals/SessionListPane.tsx`:
- Around line 78-85: SessionListPane currently stops using onShowDraftKind and
setFilterStatus while TerminalsPage still passes them; restore handling so the
draft/status controls remain functional: in SessionListPane locate props
filterStatus, setFilterStatus, draftKind, showingDraft and onShowDraftKind and
reintroduce UI elements or handlers that call setFilterStatus(...) to perform
single-status filtering (distinct from grouping) and call onShowDraftKind(...) /
toggle showingDraft to return to the draft/new-session view after selecting a
session; ensure the component preserves both grouping behavior and the explicit
filter/status and draft controls so TerminalsPage’s existing prop usage
continues to work.
In `@apps/desktop/src/renderer/components/terminals/TerminalsPage.tsx`:
- Around line 73-108: The memo for workViewArea passes
onShowDraftKind={work.showDraftKind} to WorkViewArea but omits
work.showDraftKind from the dependency array, risking a stale callback; update
the useMemo dependency array for the computed workViewArea to include
work.showDraftKind (alongside the existing work.* entries) so the memo
recalculates when work.showDraftKind changes.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 3d847c11-4251-42ec-8214-36cd7e99f2ea
⛔ Files ignored due to path filters (1)
.ade/cto/identity.yamlis excluded by!.ade/**
📒 Files selected for processing (13)
apps/desktop/src/renderer/components/app/TabNav.tsxapps/desktop/src/renderer/components/chat/AgentChatComposer.tsxapps/desktop/src/renderer/components/chat/AgentChatMessageList.tsxapps/desktop/src/renderer/components/chat/AgentChatPane.tsxapps/desktop/src/renderer/components/lanes/laneDesignTokens.tsapps/desktop/src/renderer/components/terminals/SessionCard.tsxapps/desktop/src/renderer/components/terminals/SessionListPane.tsxapps/desktop/src/renderer/components/terminals/TerminalsPage.tsxapps/desktop/src/renderer/components/terminals/WorkStartSurface.tsxapps/desktop/src/renderer/components/terminals/WorkViewArea.tsxapps/desktop/src/renderer/components/terminals/useWorkSessions.tsapps/desktop/src/renderer/index.cssapps/desktop/src/renderer/state/appStore.ts
| <div className="flex h-full min-h-0 flex-col overflow-hidden"> | ||
| <div className="flex h-full min-h-0 overflow-hidden"> | ||
| {/* Chat column */} | ||
| <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden"> |
There was a problem hiding this comment.
Keep the Artifacts panel from consuming the whole split.
Line 2374 pins the panel to w-[40%] min-w-[280px], while Line 2349 lets the chat column shrink all the way down with flex-1 min-w-0. In a narrow work-pane split, opening Artifacts can effectively collapse the message list out of view.
Also applies to: 2373-2375
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/desktop/src/renderer/components/chat/AgentChatPane.tsx` at line 2349,
The chat column's wrapper div using className "flex min-h-0 min-w-0 flex-1
flex-col overflow-hidden" allows it to shrink to zero, letting the Artifacts
panel consume the whole split; update that wrapper to enforce a sensible minimum
width (e.g., replace "min-w-0" with "min-w-[280px]" or "min-w-[320px]") so the
message list remains visible, and apply the same change where the chat column is
defined around the Artifacts panel (the div with className containing "flex-1"
at the other occurrence noted) to keep consistent behavior.
apps/desktop/src/renderer/components/terminals/SessionListPane.tsx
Outdated
Show resolved
Hide resolved
- Fix typecheck: add missing showingDraft/onShowDraftKind props to LaneWorkPane
- Fix useMemo dep: add work.showDraftKind to TerminalsPage dependency array
- Add aria-labels to icon-only buttons in AgentChatComposer
- Align ghost suggestion overlay padding with textarea (py-3 → py-2.5)
- Add min-w-[280px] to chat column to prevent Artifacts panel collapse
- Truncate lane labels and suppress zero-value delta chips in SessionCard
- Show empty state in by-time view in SessionListPane
- Update handoff button name in tests ("Chat handoff" → "Handoff")
- Remove low-value constant-assertion tests (design tokens, color mappings)
- Remove fragile text-content assertions from composer mode tests
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Summary
Test plan
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Style
Tests