Skip to content

UI overhaul: redesign chat, sessions, and nav#120

Merged
arul28 merged 2 commits intomainfrom
ui-overhaul
Apr 2, 2026
Merged

UI overhaul: redesign chat, sessions, and nav#120
arul28 merged 2 commits intomainfrom
ui-overhaul

Conversation

@arul28
Copy link
Copy Markdown
Owner

@arul28 arul28 commented Apr 1, 2026

Summary

  • Redesign chat composer footer, message list, and pane layouts for cleaner visual hierarchy
  • Overhaul session cards and session list pane with improved styling and layout
  • Reorder tab nav to prioritize Work and Lanes tabs
  • Update design tokens, global CSS, and app store defaults to support the new layout

Test plan

  • Verify chat composer renders correctly with new footer layout
  • Verify message list and pane layouts display properly
  • Verify session cards and session list show correct visual hierarchy
  • Verify tab nav ordering reflects Work > Lanes > Files > Run > Graph > PRs > History
  • Verify no regressions in existing functionality

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features

    • Time-based session grouping (Today / Yesterday / Older).
    • Compact session search/filter panel and improved filtering controls.
    • Mode-switcher pills to choose Chat/CLI/Shell and lane-colored indicators on session cards.
  • Style

    • Dark theme palette and UI surface refinements for improved consistency.
    • Redesigned chat composer/footer and message list visuals; artifacts moved to a right-side panel.
    • Refined session card and list layouts for cleaner presentation.
  • Tests

    • Updated UI tests to match simplified footer and label changes.

… 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>
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 1, 2026

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

Project Deployment Actions Updated (UTC)
ade Ready Ready Preview, Comment Apr 2, 2026 0:31am

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 1, 2026

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

Restructures 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

Cohort / File(s) Summary
Chat UI components
apps/desktop/src/renderer/components/chat/AgentChatComposer.tsx, apps/desktop/src/renderer/components/chat/AgentChatMessageList.tsx, apps/desktop/src/renderer/components/chat/AgentChatPane.tsx
Composer footer changed to a single-row layout with resized controls and textarea constraints; message-list colors and copy button positioning updated; pane header condensed and proof UI moved to a right-side artifacts panel.
Terminal / Work area
apps/desktop/src/renderer/components/terminals/SessionCard.tsx, .../SessionListPane.tsx, .../TerminalsPage.tsx, .../WorkStartSurface.tsx, .../WorkViewArea.tsx, .../useWorkSessions.ts, apps/desktop/src/renderer/components/lanes/LaneWorkPane.tsx
Added lane-colored indicator and meta row to session cards; introduced time-based grouping ("by-time") and UI for bucketing sessions; added ModeSwitcherPills and threaded showingDraft/onShowDraftKind props; adjusted session-list toolbar/filter panel and default grouping state.
Design tokens & theming
apps/desktop/src/renderer/components/lanes/laneDesignTokens.ts, apps/desktop/src/renderer/index.css
Updated COLORS hex values and dark-theme CSS variables across backgrounds, surfaces, text, accents, shadows, and chat-related tokens to a revised palette.
Navigation & small UI
apps/desktop/src/renderer/components/app/TabNav.tsx, apps/desktop/src/renderer/state/appStore.ts
Reordered TabNav main items; extended WorkSessionListOrganization union with "by-time" and set it as the new default in project view state.
Tests updated
apps/desktop/src/renderer/components/chat/AgentChatComposer.test.tsx, AgentChatPane.submit.test.tsx, apps/desktop/src/renderer/components/lanes/laneDesignTokens.test.ts, apps/desktop/src/renderer/components/prs/shared/prVisuals.test.ts
Adjusted tests to match layout/text changes: reduced UI detail assertions, renamed handoff button expectations, removed certain design-token and PR-color assertion blocks.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • fix codex chat #80 — Modifies the same chat UI components (AgentChatComposer, AgentChatMessageList, AgentChatPane) with overlapping layout and styling changes.
  • runnign automate and finalzie #85 — Touches renderer files around chat UI and session organization including "by-time", overlapping code paths with this PR.
  • chat tool calling #111 — Adjusts AgentChatComposer textarea sizing, which may conflict with this PR's textarea constraint changes.

Suggested labels

desktop

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'UI overhaul: redesign chat, sessions, and nav' directly and accurately summarizes the main changes across the pull request, which include redesigning chat components, sessions UI, and navigation ordering.

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

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch ui-overhaul

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.

❤️ Share

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

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 | 🟠 Major

Add missing useMemo dependency for work.showDraftKind.

Line 88 passes onShowDraftKind={work.showDraftKind} to WorkViewArea, but the dependency array (lines 93–107) omits work.showDraftKind. This can cause the memoized component to use a stale callback if work.showDraftKind changes.

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 | 🟠 Major

Don't drop the existing draft/status controls without a replacement.

This refactor stops using onShowDraftKind and setFilterStatus, but SessionListPane still receives those props and apps/desktop/src/renderer/components/terminals/TerminalsPage.tsx Lines 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

📥 Commits

Reviewing files that changed from the base of the PR and between 2d164df and 9f7c7bd.

⛔ Files ignored due to path filters (1)
  • .ade/cto/identity.yaml is excluded by !.ade/**
📒 Files selected for processing (13)
  • apps/desktop/src/renderer/components/app/TabNav.tsx
  • apps/desktop/src/renderer/components/chat/AgentChatComposer.tsx
  • apps/desktop/src/renderer/components/chat/AgentChatMessageList.tsx
  • apps/desktop/src/renderer/components/chat/AgentChatPane.tsx
  • apps/desktop/src/renderer/components/lanes/laneDesignTokens.ts
  • apps/desktop/src/renderer/components/terminals/SessionCard.tsx
  • apps/desktop/src/renderer/components/terminals/SessionListPane.tsx
  • apps/desktop/src/renderer/components/terminals/TerminalsPage.tsx
  • apps/desktop/src/renderer/components/terminals/WorkStartSurface.tsx
  • apps/desktop/src/renderer/components/terminals/WorkViewArea.tsx
  • apps/desktop/src/renderer/components/terminals/useWorkSessions.ts
  • apps/desktop/src/renderer/index.css
  • apps/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">
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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.

- 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>
@arul28 arul28 merged commit 6d2387f into main Apr 2, 2026
20 of 21 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant