Agentic Sidebar: Polish Site Rows, Chat Indicators, and Action Alignment

[shaunandrews]

Before	After

How AI was used in this PR

Used Codex to iteratively implement requested visual refinements to the new agentic sidebar and run verification after the changes.

Proposed Changes

Sidebar Header

• Removed the "Studio" label; we don't need it, as the application menu and icon exist at the OS level.
• Reducing the padding on the right to align actions with those below for sites and appearance. I also removed the dimming behavior, so the buttons are the same color as all the others.

Site List

• Increased the row height to better fit the icon buttons and other indicators with equal spacing all around.
• Site icons are now always visible and slightly bigger. The icons allow for customization and help with scanning long lists.
• Site Icons now dim when the site is stopped.
• Adjusted row spacing so site icons, chat status indicators, and action buttons align consistently. Running and pending chat indicators now use a smaller shared status slot, with the pending state shown as a compact triangle indicator with improved light/dark contrast.
• Tightened chat status indicators so they feel less visually heavy next to site icons and chat titles.
• Reduced font-weight for chat titles.

Sidebar Footer

• Adjusted the spacing to align the Gravatar with the site icons.

Testing Instructions

• Run npm run typecheck.
• Run npm test -- apps/ui/src.
• In the new agentic UI sidebar, verify site icons appear for all sites, stopped sites render grayscale, site/chat/user text columns align, top action buttons align with site row actions, and pending/running chat indicators have comfortable spacing.
• Check the sidebar in both light and dark color schemes.

Pre-merge Checklist

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

[wpmobilebot]

📊 Performance Test Results

Comparing dbb591d vs trunk

app-size

Metric	trunk	dbb591d	Diff	Change
App Size (Mac)	2344.38 MB	2344.38 MB	+0.00 MB	⚪ 0.0%

site-editor

Metric	trunk	dbb591d	Diff	Change
load	728 ms	1102 ms	+374 ms	🔴 51.4%

site-startup

Metric	trunk	dbb591d	Diff	Change
siteCreation	6502 ms	6517 ms	+15 ms	⚪ 0.0%
siteStartup	6567 ms	6567 ms	0 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

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

[bcotrim]

Reviewed locally on the branch — really nice polish 👏 The alignment system holds up: site icons + footer gravatar share the leading column, and site titles + chat labels + display name land on the next.

Ran it: eslint ✅, typecheck ✅, site-list test ✅ (2/2), vite build ✅. Dark mode looks great.

RTL doesn't mirror — but this is a pre-existing apps/ui gap, not this PR. apps/ui loads translations (setLocaleData in main.tsx) yet never sets document.documentElement.dir, the way apps/studio does in use-localization-support.ts. So strings localize but the layout stays LTR. This PR is actually RTL-ready (logical properties throughout — the only physical bit is the macOS traffic-light padding, which should stay physical). Worth a separate issue to wire dir=rtl across apps/ui; shouldn't block here.

Left a few inline notes — one cleanup plus a couple of NITs/confirmations. Nothing blocking.

⚠️ Visual change: still needs a light-mode pass (dark ✅ confirmed).

[bcotrim]

Confirming intent: the header no longer renders the 'Studio' title, so the app name does not appear in the sidebar anymore — just the create/hide buttons now. 👍 if deliberate (it is not called out in the PR description, so flagging).

[katinthehatsite]

I actually quite liked having the title there but that might be a personal preference

[shaunandrews]

Yup, this was an intentional design decision to remove the Studio title. Its not very common to see apps that have this on macOS, as the app's name appears in the Dock and the Menubar. Windows and Linux both show a title bar, which includes the "Studio" label.

[bcotrim]

NIT: along with the alignment change, the action buttons lost their resting opacity: 0.65 (and hover/focus → 1) and are now always full opacity. Assuming that's intended alongside 'Align Actions' — just confirming the dimming was dropped on purpose.

[shaunandrews]

Also intentional. With the opacity, the top action buttons were lighter than all the other actions in the sidebar. Removing the opacity makes all actions the same color.

[bcotrim]

LGTM 👍

[katinthehatsite]

The changes look good 👍