Skip to content

Agentic UI: Make the sidebar site-centric#4191

Merged
bcotrim merged 8 commits into
trunkfrom
make-sidebar-site-centric
Jul 16, 2026
Merged

Agentic UI: Make the sidebar site-centric#4191
bcotrim merged 8 commits into
trunkfrom
make-sidebar-site-centric

Conversation

@bcotrim

@bcotrim bcotrim commented Jul 14, 2026

Copy link
Copy Markdown
Contributor

Related issues

How AI was used in this PR

Claude (Fable 5) extracted and adapted this change from the #3998 reference branch under close direction, preserving Shaun Andrews' original work via co-authored commits, and re-verified the result (typecheck, unit tests, light/dark visual pass in the browser UI). Code was human-reviewed throughout.

Proposed Changes

This is the capstone of the site-centric sidebar work: the sidebar becomes a flat list of sites, with no per-site chat sublists.

  • Clicking a site opens its most recent (non-archived) chat, or starts a new chat when the site has none. Chat history is no longer browsed from the sidebar — that moved below the composer in Add chat history and New chat controls below the composer #4133.
  • Each site row carries a single activity indicator that aggregates all of the site's sessions, with priority: live-site sync > needs an answer > working > new message. This keeps long site lists calm while still surfacing what needs attention.
  • Row quick actions (site actions menu + start/stop status button) appear on hover/focus; drag-to-reorder from Add drag-to-reorder for sites in the agentic UI sidebar #4134 keeps working on the flat rows.
  • Status colors move to shared --studio-color-status-* tokens: the wpds palette has no vivid status colors (--wpds-color-fg-content-success resolves to near-black at dot size), which also fixes the session header's running dot rendering almost black.
  • Chrome polish: full-bleed 44px site icon with overlaid status badge in the site dropdown, flattened site icons, a visible hover tint on the sidebar create button, the floating sidebar toggle moved to the bottom-left, and aligned settings-header padding.

Two product decisions to be aware of (intentional for now):

  • Unread "new message" badges are in-memory only — they reset (seed as all-seen) on every launch.
  • The current chat is indicated via aria-current + active-row styling, not the literal "Current chat" label from the mockups.

Testing Instructions

  • Start Studio with npm start and enable the Agentic UI feature flag.
  • Confirm the sidebar shows a flat list of sites (no chat sublists): clicking a site with chats opens its latest chat; a site without chats opens the new-chat view.
  • Hover a row: the site actions menu and start/stop button appear; right side shows a green dot for running sites, a play affordance for stopped ones.
  • Send a prompt on one site, switch to another: the first row shows a working spinner, then a "New message" badge when the turn completes; answering a pending question clears the "Needs an answer" indicator.
  • Drag a site row to reorder; the order persists across restarts.
  • Delete a site you're currently viewing and confirm you land back on the home view.
  • Check the sidebar and site dropdown in both light and dark mode.

Pre-merge Checklist

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

🤖 Generated with Claude Code

bcotrim and others added 3 commits July 14, 2026 11:47
@bcotrim @shaunandrews
Make the agentic UI sidebar site-centric
b975a7d 
Replace the sidebar's site+chat sublists with a flat list of site rows.
Clicking a row opens the site's latest non-archived chat (or a new-chat
route when it has none); chats no longer render in the sidebar. Each row
aggregates its sessions' agent activity into one indicator with priority
sync > pending question > working > new message. Extracts DeleteSiteDialog
into its own component with an onDeleted callback, and forwards
onClick/onPointerDown through Menu.Popup so menu clicks don't bubble into
row navigation.

Co-authored-by: Shaun Andrews <191598+shaunandrews@users.noreply.github.com>
@bcotrim @shaunandrews
Polish site-centric sidebar chrome
03172be 
Full-bleed 44px site icon with overlaid status badge in the site dropdown,
flattened site-icon (no border/inner shadow), visible hover tint on the
sidebar create button, floating sidebar toggle moved to the bottom-left of
the main area, and settings-header padding aligned with the new layout.

Co-authored-by: Shaun Andrews <191598+shaunandrews@users.noreply.github.com>
@bcotrim
Replace hardcoded status hex colors with shared --studio-color-status…
57068bd 
… tokens
bcotrim and others added 4 commits July 14, 2026 17:46
@bcotrim @shaunandrews
Use the pixel-grid AgentWorkingIndicator for the sidebar working state
61792c4 
Brings over the exploration's AgentWorkingIndicator — a 2×3 grid of
brand-blue pixels breathing out of phase — and uses it instead of the
generic spinner for a site row's working state, matching the design
exploration.

Co-authored-by: Shaun Andrews <191598+shaunandrews@users.noreply.github.com>
@bcotrim
Trim review-flagged over-engineering from the site-centric sidebar
4c2d20e 
Inline the UUID-safe settings-path check and single-caller helpers,
require hasUnreadUpdate at the call site, drop the unused presentational
prop from AgentWorkingIndicator, and collapse the four row-background
aliases into one --sidebar-row-background var.
@bcotrim
Merge remote-tracking branch 'origin/trunk' into make-sidebar-site-ce…
eca79b5 
…ntric

# Conflicts:
#	apps/ui/src/components/site-list/style.module.css
@bcotrim
Only mark chats seen when the chat itself is open
f161549 
The seen/unread bookkeeping keyed off the siteId route param, so sitting
on a site's settings page suppressed its unread badge even though the
chat wasn't visible. Key it off the open session's site instead, and
derive the settings-route outline directly from the route param.
@bcotrim
bcotrim requested review from a team and katinthehatsite July 15, 2026 10:26
@bcotrim
bcotrim marked this pull request as ready for review July 15, 2026 10:26
@katinthehatsite

katinthehatsite commented Jul 15, 2026

Copy link
Copy Markdown
Contributor

I think this mostly looks good but one bit that I am finding strange is that the New chat button essentially seems to do nothing when you already have a chat:

Screen.Recording.2026-07-15.at.8.32.05.PM.mov

When you click it at the bottom, it restarts the chat and opens a new one whivh makes sense but the New chat from the dropdown does not seem to do much. What do you think?

katinthehatsite
katinthehatsite reviewed Jul 15, 2026
View reviewed changes

@katinthehatsite katinthehatsite left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Additionally, when I select a site and delete it, I remain on its chat view and can keep on sending messages:

Image

@bcotrim

bcotrim commented Jul 15, 2026

Copy link
Copy Markdown
Contributor Author

I think this mostly looks good but one bit that I am finding strange is that the New chat button essentially seems to do nothing when you already have a chat:
Screen.Recording.2026-07-15.at.8.32.05.PM.mov

When you click it at the bottom, it restarts the chat and opens a new one whivh makes sense but the New chat from the dropdown does not seem to do much. What do you think?

That button is going away with #4177

@bcotrim

bcotrim commented Jul 15, 2026

Copy link
Copy Markdown
Contributor Author

Additionally, when I select a site and delete it, I remain on its chat view and can keep on sending messages:
Image

Behavior when deleting site will be addressed by #4132

@bcotrim
bcotrim requested a review from katinthehatsite July 16, 2026 08:21
katinthehatsite
katinthehatsite approved these changes Jul 16, 2026
View reviewed changes

@katinthehatsite katinthehatsite left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

If the issues that I mentioned will be addressed in separate PRs, then the changes look good to me 👍 I did not spot any regressions

Maybe some styling comments could be cleaned up but I think overall, it looks fine 👍

@bcotrim
Merge remote-tracking branch 'origin/trunk' into make-sidebar-site-ce…
83d0e3b 
…ntric

# Conflicts:
#	apps/ui/src/components/sidebar-header/index.test.tsx
@bcotrim

bcotrim commented Jul 16, 2026

Copy link
Copy Markdown
Contributor Author

Maybe some styling comments could be cleaned up but I think overall, it looks fine 👍

Could you share those in a Linear issue to ensure we don't miss that cleanup as a follow-up, please? 🙇

@bcotrim
bcotrim enabled auto-merge (squash) July 16, 2026 09:21
@wpmobilebot

wpmobilebot commented Jul 16, 2026

Copy link
Copy Markdown
Collaborator

📊 Performance Test Results

Comparing 83d0e3b vs trunk

app-size

Metric trunk 83d0e3b Diff Change
App Size (Mac) 1352.92 MB 1352.92 MB 0.00 MB ⚪ 0.0%

site-editor

Metric trunk 83d0e3b Diff Change
load 1041 ms 1086 ms +45 ms ⚪ 0.0%

site-startup

Metric trunk 83d0e3b Diff Change
siteCreation 6991 ms 6986 ms 5 ms ⚪ 0.0%
siteStartup 2353 ms 2355 ms +2 ms ⚪ 0.0%

Results are median values from multiple test runs.

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

@bcotrim
bcotrim merged commit 69fcc1a into trunk Jul 16, 2026
12 checks passed
@bcotrim
bcotrim deleted the make-sidebar-site-centric branch July 16, 2026 09:49
This was referenced Jul 16, 2026
Open
Open
Open
Open
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@katinthehatsite katinthehatsite katinthehatsite approved these changes

Assignees

@bcotrim bcotrim

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@bcotrim @katinthehatsite @wpmobilebot