Refine sidebar spacing, alignment, and transitions in the agentic UI

[shaunandrews]

Related issues

• Related to design feedback on the new agentic UI sidebar

How AI was used in this PR

Implemented with Claude Code from design direction and feedback; each change was specified and visually reviewed by the author.

Proposed Changes

A polish pass on the sidebar so it scans better, aligns consistently, and feels faster to react:

• Tighter spacing. The site list's side padding and the space above it were too generous; the list now sits closer to the sidebar edges with less dead space under the header.
• Site icons always show. Icons previously only appeared on the active site. They now show for every site to help with scanning and recognition, with a bit more breathing room between icon and title.
• One selection at a time. Selecting a chat no longer also highlights its site row, and site rows no longer get a hover background — they're toggles, not navigable items, so they shouldn't read as two selected rows.
• Chats align with titles. Chat labels indent to the same text column as site titles, so the running spinner and "needs an answer" indicator land centered under the site icon column.
• Header and footer align with the rows. The sidebar toggle and new-site buttons line up with the rows' status/actions column, as does the appearance toggle; the gravatar centers on the site icon column and the user name starts on the same text column as titles and chats.
• Snappier feel. Faster open/close transition for a site's chat list and a faster hover color on chat rows; drag-resizing the sidebar no longer animates width, so the panel tracks the cursor 1:1 instead of feeling sluggish (collapse/expand keeps its transition).

Testing Instructions

• npm start and open the agentic UI sidebar.
• Check the site list: every site shows its icon, with clear spacing before the title; chat labels line up with site titles.
• Hover a site row: no background highlight appears (the chevron/actions still reveal); hover a chat row: background + text color react quickly.
• Select a chat: only the chat row is highlighted, not its site. Open a site's settings: the site row is highlighted.
• Expand/collapse a site's chat list: the animation is quick.
• Drag the sidebar resize handle: the panel follows the cursor with no lag. Collapse and reopen the sidebar: still animated.
• Eyeball the vertical columns: sidebar toggle ↔ site status squares ↔ appearance toggle; site icons ↔ gravatar; site titles ↔ chat text ↔ user name.
• Verify in both light and dark mode.

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[wpmobilebot]

📊 Performance Test Results

Comparing e436366 vs trunk

app-size

Metric	trunk	e436366	Diff	Change
App Size (Mac)	1354.74 MB	1354.75 MB	+0.00 MB	⚪ 0.0%

site-editor

Metric	trunk	e436366	Diff	Change
load	1658 ms	1647 ms	11 ms	⚪ 0.0%

site-startup

Metric	trunk	e436366	Diff	Change
siteCreation	8511 ms	9020 ms	+509 ms	🔴 6.0%
siteStartup	3891 ms	4423 ms	+532 ms	🔴 13.7%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

[katinthehatsite]

The changes look good to me 👍

It might not be directly related but I am finding that sometimes the transition to open a chat is almost too fast:

Screen.Recording.2026-06-16.at.10.46.54.AM.mov

From my observation, it seems to happen mostly when a site has no previous chats and when you click the + button to open the chat without switching to a site first.

[katinthehatsite]

I am aoproving the PR regardless of my previous comment because I think the rest of the changes look good 👍

One sidenote is that I wish the user settings were somehow more distinct from the sites in the list because they almost look like another site entry:

Visually, they are distinguished by a round icon and slightly lighter font.