Agentic UI: Simplify Sidebar with new Site-Centric Focus by shaunandrews · Pull Request #3998 · Automattic/studio

shaunandrews · 2026-06-30T03:40:09Z

Related issues

None

How AI was used in this PR

Codex helped extract and iterate on the site-centric Agentic UI sidebar, then verified the final branch with linting, typecheck, targeted tests, and a running local app session. Claude Code later ported the latest sidebar-relevant refinements from the exploration branch (explore-site-centric-conversation-chrome) and re-verified with lint, typecheck, and the targeted tests. The PR remains draft because it is a visual/navigation change that needs human review in the app.

Executive summary

This PR simplifies Agentic UI around sites as the primary object. The sidebar no longer behaves like a chat list; it focuses on local sites, their status, and their latest conversation. Chat creation and chat history moved into the chat panel footer so previous conversations remain reachable without making the sidebar carry two navigation models.

Site rows now open the latest chat, or start a new site chat when no chat exists. Site settings remain available through the existing settings route.

Proposed Changes

Makes the Agentic UI sidebar site-centric, with site rows focused on site names, run state, activity, and latest chat navigation.
Adds chat-panel footer controls for chat history and new chat, including tooltips and the New Chat keyboard shortcut.
Keeps the sidebar collapsed/open toggle aligned with the same footer control row and removes opacity/hover complexity from the sidebar footer account/toggle controls.
Keeps the preview panel governed by the user's preview toggle on preview-capable chat routes.
Replaces the site list's hand-rolled drag-reorder machinery with a shared, generic ReorderableList component (same behavior, less code, reusable for future sidebar groups).
Returns the user to their last visited chat or site on launch, instead of always landing on the first site in the list.
Wraps the delete-site dialog body in Dialog.Content for correct popup spacing, and gives the sidebar's create button a visible hover tint in both color schemes.

Review guide

Review the sidebar behavior first: selecting a site should open its latest active chat, stopped/running site controls should still work, and settings-context styling should not make the site row look like the active chat.
Review the new chat/history footer controls in narrow and wide chat panels, with the sidebar open and closed. The controls should align with nearby footer controls and should not collide with the composer.
Review keyboard and tooltip behavior for New Chat and Chat History.
Review light and dark appearances because this is primarily layout and visual polish.

Okay to skim

Mechanical cleanup of no-longer-used route, connector, query, and type plumbing.
CSS cleanup that only removes styles for deleted sidebar-row affordances.

Diff breakdown

Sidebar and site list: site-centric rows, row action cleanup, footer alignment updates.
Chat panel: footer actions for history and new chat, plus tests for ordering, labels, tooltips, timestamps, and shortcut behavior.
Routing/data: simplified site navigation and removed unused data paths.
Tests: updated site list and footer action coverage around the new navigation model.
Reorderable list: new shared apps/ui/src/components/reorderable-list component; the site list now consumes it. Existing drag-reorder tests cover the swap unchanged.
Last visited: new apps/ui/src/lib/last-visited.ts helper, recorded by the dashboard layout and read by the / index route.

Known tradeoffs and follow-ups

Any additional site-level actions should move into clear existing surfaces rather than adding another sidebar navigation mode.
The PR is still visual-heavy; reviewers should do a hands-on pass in both color schemes.
Existing local runtime noise was observed during app launch, including the known allowpopups warning. No new typecheck or targeted test failures were observed.

Safety checklist

Feature-flag/gating: limited to Agentic UI paths in apps/ui.
Data migrations or persistence changes: none.
API compatibility: only unused Agentic UI data plumbing was removed.
Default UI impact: changes Agentic UI navigation and footer controls only.
Performance: removes an unused site-details data path.
Security and privacy: no new data collection or credential handling.
Rollback plan: revert this PR or the final refinement commit to restore the previous sidebar/chat behavior.
Human visual review completed in light and dark mode.

Testing Instructions

Run npm run typecheck.
Run npm test -- apps/ui/src/components/site-list/index.test.tsx apps/ui/src/components/user-menu/index.test.tsx apps/ui/src/components/sidebar-layout/index.test.tsx apps/ui/src/ui-classic/components/session-view/session-chat-actions.test.tsx.
Run npm start and confirm Studio launches from this branch.
In the app, review the site-centric sidebar, site run controls, collapsed/open sidebar toggle, chat history control, New chat control, and composer/footer alignment in both light and dark appearances.

Pre-merge Checklist

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

Removes the dead toggleSpacer markup and now-unused agent-run hooks, dedupes findActiveSiteKey via findSessionSiteKey, measures drag slot boundaries once at drag start instead of per pointermove, stabilizes the New chat shortcut handler, reverts the stray allowpopups cast, and simplifies the floating-toggle CSS. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Drops the local Tooltip.Provider delay={ 0 } wrappers on the chat footer, composer toolbar, and site dropdown so every tooltip inherits the app-wide provider's default hover delay and shares its hover group. Moves the zero delay into the composer test harness to keep those assertions deterministic. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…-sidebar # Conflicts: # apps/ui/src/components/sidebar-header/index.tsx # apps/ui/src/components/sidebar-layout/index.tsx # apps/ui/src/components/sidebar-layout/style.module.css # apps/ui/src/components/site-settings-view/index.tsx # apps/ui/src/components/site-settings-view/style.module.css # apps/ui/src/components/user-menu/index.tsx # apps/ui/src/ui-classic/components/session-view/index.tsx # apps/ui/src/ui-classic/components/session-view/style.module.css

…toggle Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

wpmobilebot · 2026-07-03T18:44:34Z

📊 Performance Test Results

Comparing f027d2d vs trunk

app-size

Metric	trunk	`f027d2d`	Diff	Change
App Size (Mac)	1412.01 MB	1344.91 MB	67.11 MB	🟢 -4.8%

site-editor

Metric	trunk	`f027d2d`	Diff	Change
load	749 ms	1119 ms	+370 ms	🔴 49.4%

site-startup

Metric	trunk	`f027d2d`	Diff	Change
siteCreation	6499 ms	6502 ms	+3 ms	⚪ 0.0%
siteStartup	2399 ms	1863 ms	536 ms	🟢 -22.3%

Results are median values from multiple test runs.

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

… tokens

Extract site-centric sidebar changes

62af8f5

github-actions Bot assigned shaunandrews Jun 30, 2026

shaunandrews added Proof of Concept and removed Proof of Concept labels Jun 30, 2026

shaunandrews changed the title ~~Extract site-centric sidebar changes~~ Agentic UI: Simplify Sidebar with new Site-Centric Focus Jun 30, 2026

shaunandrews and others added 9 commits June 30, 2026 16:03

Refine site-centric agentic UI

515b007

Merge trunk into site-centric sidebar

aa642cb

Polish site-centric Agentic UI controls

0f66639

Extract the sidebar's drag-reorder into a shared ReorderableList

cbddbce

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Return to the last visited session instead of the first site

9cb160d

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Wrap delete dialog body in Dialog.Content for proper popup spacing

1c04a56

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Give the sidebar create button a visible hover tint

4db939e

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

shaunandrews marked this pull request as ready for review July 3, 2026 18:13

shaunandrews and others added 2 commits July 3, 2026 14:21

Fix sidebar-header and sidebar-layout tests for trunk's header-based …

d7a2679

…toggle Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

bcotrim added 2 commits July 7, 2026 18:04

Persist sidebar site order via existing appdata sortOrder

88b5142

Replace hardcoded status hex colors with shared --studio-color-status…

f027d2d

… tokens

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Agentic UI: Simplify Sidebar with new Site-Centric Focus#3998

Agentic UI: Simplify Sidebar with new Site-Centric Focus#3998
shaunandrews wants to merge 14 commits into
trunkfrom
extract-site-centric-sidebar

shaunandrews commented Jun 30, 2026 •

edited

Loading

Uh oh!

wpmobilebot commented Jul 3, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

shaunandrews commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

How AI was used in this PR

Executive summary

Proposed Changes

Review guide

Okay to skim

Diff breakdown

Known tradeoffs and follow-ups

Safety checklist

Testing Instructions

Pre-merge Checklist

Uh oh!

wpmobilebot commented Jul 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Performance Test Results

app-size

site-editor

site-startup

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

shaunandrews commented Jun 30, 2026 •

edited

Loading

wpmobilebot commented Jul 3, 2026 •

edited

Loading