Agentic UI: Foundation

[shaunandrews]

This PR aims to improve the new Agentic UI for Studio, including the visual balance, user experience, and usability. It serves as a foundation for a series of other PRs: #3717 #3737 #3738

Proposed Changes

• Increased base UI font-size to 14px.
• Drag handles for panels (like the sidebar menu and the browser preview) are now integrated into the border for the panel, no longer affecting the layout.
• Added smoother panel behavior, including animated site preview open/close and improved split-view layout.
• Removes the placeholder "Dashboard" and "Skills" menus and screen.
• A redesigned sidebar menu includes larger site icons, compact timestamps, clearer active states, consistent action placement, running-chat indicators, and an Unassigned group for chats that don't belong to a site.
• Clicking on a site in the sidebar shows a new site detail screen. Click the site avatar to manually toggle all active chats for a site.
• Sidebar chats now filter archived conversations out of the regular list.
• Added site overview and unassigned overview routes with active and archive chat lists, and a way to start a new chat.
• Studio's browser gets buttons for back, forward, and refresh, a page title display, and moves the annotation feature into the toolbar. The browser is also now shown by default. The OS View menu includes a toggle, and users can still use the keyboard shortcut to toggle.
• You can now add images to your chat messages.
• Included follow-up compatibility and hardening fixes for React 19 / @wordpress/ui, Base UI submenu behavior, markup sanitization, and CodeQL feedback.

Screenshots

[wpmobilebot]

📊 Performance Test Results

Comparing a4e0429 vs trunk

app-size

Metric	trunk	a4e0429	Diff	Change
App Size (Mac)	1384.37 MB	1384.45 MB	+0.09 MB	⚪ 0.0%

site-editor

Metric	trunk	a4e0429	Diff	Change
load	1670 ms	1660 ms	10 ms	⚪ 0.0%

site-startup

Metric	trunk	a4e0429	Diff	Change
siteCreation	9011 ms	9031 ms	+20 ms	⚪ 0.0%
siteStartup	4428 ms	4408 ms	20 ms	⚪ 0.0%

ui-classic-panels

Metric	trunk	a4e0429	Diff	Change

---

Results are median values from multiple test runs.

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

[Copilot]

Pull request overview

This PR refreshes Studio’s Agentic UI across the shared apps/ui renderer and the Electron/CLI backends, adding richer session metadata, image attachments, keyboard shortcuts, and updated navigation/layout primitives to support the new multi-site + split-preview experience.

Changes:

• Adds session title/description metadata (user + generated) and threads it through shared config, UI, and CLI listing/resume flows.
• Introduces image attachments for chat prompts (validation, transport via IPC/CLI, and UI rendering of previews).
• Adds a keyboard shortcut system and updates layouts/menus/routes (new “All sites” entry point, preview split frame, sidebar/menu UX tweaks).

Reviewed changes

Copilot reviewed 123 out of 123 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
tools/common/lib/user-settings/message-send-shortcut.ts	Defines message send shortcut enum + validation helper.
tools/common/lib/tests/shared-config.test.ts	Updates shared-config tests for new session metadata fields + trimming behavior.
tools/common/lib/shared-config.ts	Extends session metadata schema; prunes/normalizes new title/description fields.
tools/common/ai/tests/chat-images.test.ts	Adds unit tests for image attachment validation.
tools/common/ai/sessions/types.ts	Extends session metadata + summary types with title/description fields.
tools/common/ai/sessions/entry-types.ts	Adds optional image attachments to studio.user_prompt custom entry payload.
tools/common/ai/chat-images.ts	Implements attachment types + size/type/dimension validation helpers.
apps/ui/vitest.setup.ts	Adds jsdom shims needed for Base UI pointer/resize behavior in tests.
apps/ui/src/ui-desks/widgets/site-shortcuts/component/index.test.tsx	Updates desks widget test to include new user preference field.
apps/ui/src/ui-desks/chrome/user-menu/index.tsx	Renames “switch UI” menu action to “old UI” wording.
apps/ui/src/ui-desks/chrome/user-menu/index.test.tsx	Adds test for “Switch to old Studio UI” menu action.
apps/ui/src/ui-desks/chrome/header/style.module.css	Removes unused fixed title styling.
apps/ui/src/ui-desks/chrome/header/index.tsx	Removes “Studio” title rendering/import from header chrome.
apps/ui/src/ui-desks/chats/panel/index.tsx	Prefers computed session title/description in chat panel list.
apps/ui/src/ui-classic/router/router.tsx	Replaces dashboard route with sites/overview/unassigned routes in classic router tree.
apps/ui/src/ui-classic/router/route-unassigned-overview/index.tsx	Adds /unassigned overview route.
apps/ui/src/ui-classic/router/route-site-overview/index.tsx	Adds /sites/$siteId overview route.
apps/ui/src/ui-classic/router/route-session-detail/index.tsx	Adds search validation + auto-focus composer support.
apps/ui/src/ui-classic/router/route-new-session/index.tsx	Preserves focusComposer across redirect when creating new session.
apps/ui/src/ui-classic/router/route-index/index.tsx	Redirects app index to /sites.
apps/ui/src/ui-classic/router/route-dashboard/index.tsx	Removes placeholder “Dashboard” route.
apps/ui/src/ui-classic/router/layout-onboarding/index.tsx	Updates onboarding close navigation to /sites.
apps/ui/src/ui-classic/router/layout-dashboard/index.tsx	Wraps classic layout with split preview + session preview state provider.
apps/ui/src/ui-classic/router/focus-composer-search.ts	Adds typed search validator for focusComposer.
apps/ui/src/ui-classic/router/focus-composer-search.test.ts	Tests focusComposer search validation behavior.
apps/ui/src/ui-classic/components/session-view/style.module.css	Updates classic session layout for sticky header/composer + preview slot/resizing.
apps/ui/src/ui-classic/components/session-view/empty-background/style.module.css	Improves empty background containment + interaction styling.
apps/ui/src/ui-classic/components/session-view/conversation/style.module.css	Adds attachment grid styling and overflow-wrap improvements.
apps/ui/src/ui-classic/components/session-view/conversation/index.tsx	Renders user image attachments and associates them to prompts in transcript.
apps/ui/src/ui-classic/components/session-view/conversation/index.test.ts	Tests mapping image blocks to prompt attachment previews.
apps/ui/src/ui-classic/components/session-view/composer/style.module.css	Adds attachment UI styling, focus ring, and hidden file input styling.
apps/ui/src/ui-classic/components/session-view/composer/environment-pill.tsx	Adds tooltip labeling + explicit open-state handling for environment menu.
apps/ui/src/ui-classic/components/session-view/composer/environment-pill.test.tsx	Tests menu closes after selecting environment.
apps/ui/src/lib/keyboard-shortcuts.ts	Introduces keyboard shortcut definitions + matching/label helpers.
apps/ui/src/lib/keyboard-shortcuts.test.ts	Tests shortcut formatting/matching and message-send keydown behavior.
apps/ui/src/lib/icons.tsx	Adds refresh icon.
apps/ui/src/lib/format-relative-time.ts	Switches relative time formatting to compact now/2m/3h/4d style.
apps/ui/src/index.css	Bumps base typography md size to 14px for legibility.
apps/ui/src/hooks/use-session-ui.test.tsx	Adds tests for session preview state behavior (tabs, navigation, nesting).
apps/ui/src/hooks/use-resizable-panel.ts	Adds disabled option and guards for resize handlers/effects.
apps/ui/src/hooks/use-keyboard-shortcut.ts	Adds document-level shortcut hook with capture + stable callback ref.
apps/ui/src/data/queries/use-sessions.ts	Extends metadata patching and derives computed title/description in cache merges.
apps/ui/src/data/queries/use-agent-run.tsx	Adds image support for prompts + introduces useIsSessionRunning and pending question helper.
apps/ui/src/data/core/types.ts	Extends connector contract/types for metadata patches, images, and user preferences.
apps/ui/src/data/core/index.ts	Re-exports newly added types (session metadata, images, wpAdmin target, shortcuts).
apps/ui/src/data/core/connectors/ipc/index.ts	Adds IPC reads/writes for new user preferences fields.
apps/ui/src/components/user-menu/style.module.css	Restyles sidebar user menu row and active/hover states.
apps/ui/src/components/user-menu/index.tsx	Switches user menu row to link into Settings account tab.
apps/ui/src/components/user-menu/index.test.tsx	Tests active highlighting for settings tabs and non-settings routes.
apps/ui/src/components/unassigned-overview-view/style.module.css	Adds styling for unassigned chats overview page.
apps/ui/src/components/unassigned-overview-view/index.tsx	Adds unassigned chats overview view.
apps/ui/src/components/spinner/style.module.css	Adds small inline spinner styles.
apps/ui/src/components/spinner/index.tsx	Adds accessible inline spinner component.
apps/ui/src/components/site-settings-view/style.module.css	Supports embedded vs standalone layout styling for site settings.
apps/ui/src/components/site-settings-view/index.tsx	Refactors to SiteSettingsForm and supports embedded rendering.
apps/ui/src/components/site-preview/tab-icons.test.ts	Adds tests for WordPress path → tab icon/title mapping.
apps/ui/src/components/site-preview/inspector-script.ts	Updates inspector bridge to report state + handle browser shortcut commands.
apps/ui/src/components/site-preview/index.test.tsx	Tests tab editing behavior and refresh behavior in preview component.
apps/ui/src/components/site-preview-toggle-button/style.module.css	Adds fixed-position browser toggle control styling.
apps/ui/src/components/site-preview-toggle-button/index.tsx	Adds portal-based browser toggle button with tooltip + shortcut metadata.
apps/ui/src/components/site-icon/style.module.css	Adds grayscale filter class for icons.
apps/ui/src/components/site-icon/index.tsx	Adds grayscale prop and improves image-error retry behavior.
apps/ui/src/components/site-icon/index.test.tsx	Tests icon image fallback and retry when src changes.
apps/ui/src/components/site-dropdown/style.module.css	Adjusts dropdown popup sizing for responsiveness.
apps/ui/src/components/site-dropdown/popover-row.module.css	Adds padding/borders and tweaks typography for dropdown rows.
apps/ui/src/components/site-dropdown/main-view.module.css	Adds compact action styling, url link styling, and submenu affordances.
apps/ui/src/components/site-dropdown/index.tsx	Adds shortcut to toggle site menu and supports settings click callback.
apps/ui/src/components/site-dropdown/dropdown-trigger.tsx	Wraps trigger with tooltip and adds status badge + shortcut metadata.
apps/ui/src/components/site-dropdown/dropdown-trigger.module.css	Restyles dropdown trigger, status badge, and responsive URL hiding.
apps/ui/src/components/site-dropdown/disconnect-site-dialog.tsx	Wraps dialog body in Dialog.Content for structure/styling.
apps/ui/src/components/sidebar-nav/style.module.css	Restyles sidebar nav rows and adds action affordance container.
apps/ui/src/components/sidebar-nav/index.tsx	Replaces legacy nav with “All sites” + create menu actions.
apps/ui/src/components/sidebar-layout/style.module.css	Integrates resize handle into border and adds always-available sidebar toggle control.
apps/ui/src/components/sidebar-layout/index.tsx	Adds global shortcuts (sidebar toggle/settings), IPC listener hook, and new toggle placement.
apps/ui/src/components/sidebar-header/style.module.css	Removes title/actions styling; updates padding for new layout rhythm.
apps/ui/src/components/sidebar-header/index.tsx	Removes header content (now empty drag region shell).
apps/ui/src/components/sidebar-button/style.module.css	Fixes text alignment regression with @wordpress/ui button centering changes.
apps/ui/src/components/settings-view/style.module.css	Adds new account/keyboard panel layouts and shortcut list styling.
apps/ui/src/components/settings-view/index.test.tsx	Adds coverage for moved account actions + updated preference fields.
apps/ui/src/components/resize-handle/style.module.css	Slims resize handle visuals and makes indicator full-height.
apps/ui/src/components/progressive-blur/style.module.css	Adds multi-layer progressive blur scrim with reduced-transparency support.
apps/ui/src/components/progressive-blur/index.tsx	Adds ProgressiveBlur component wrapper.
apps/ui/src/components/preview-split-frame/style.module.css	Adds split frame layout styles (content + preview overlay + resizing).
apps/ui/src/components/preview-split-frame/index.test.tsx	Tests split frame measurement and resize persistence behaviors.
apps/ui/src/components/menu/index.tsx	Exposes submenu components and adds SubmenuTrigger wrapper styling.
apps/ui/src/components/markdown/style.module.css	Improves overflow wrapping and sizing constraints for markdown blocks.
apps/studio/src/storage/user-data.ts	Adds new safe keys for persisted user preferences.
apps/studio/src/storage/storage-types.ts	Adds stored preference types for send shortcut + WP Admin open target.
apps/studio/src/preload.ts	Adds IPC API bindings for new user preferences.
apps/studio/src/modules/user-settings/lib/ipc-handlers.ts	Implements save/get handlers for message send shortcut + WP Admin open target.
apps/studio/src/modules/ai-agent/tests/session-metadata.test.ts	Adds tests for auto-generating session title/description metadata.
apps/studio/src/modules/ai-agent/session-metadata.ts	Adds metadata generation logic for titles/descriptions from prompts/preview.
apps/studio/src/modules/ai-agent/run-manager.ts	Adds image payload file support and triggers metadata generation on successful runs.
apps/studio/src/menu.ts	Removes old accelerator binding for add-site menu item.
apps/studio/src/main-window.ts	Adds zoom shortcuts at webContents level when app menu is absent.
apps/studio/src/ipc-handlers.ts	Hydrates session summaries with new metadata; validates images before continuing session.
apps/cli/commands/ai/sessions/resume.ts	Adds hidden --input-payload support and validates/loads images for resumes.
apps/cli/commands/ai/sessions/helpers.ts	Uses computed session title in session list output.
apps/cli/commands/ai/index.ts	Adds image support for initial turns and persists attachment metadata in session entries.
apps/cli/ai/runtimes/pi/index.ts	Plumbs image blocks into PI runtime session.prompt call.
AGENTS.md	Documents apps/ui verification constraints and expands UI package architecture notes.
.codex/config.toml	Adds Codex MCP server config for wpcom API.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.