Skip to content

Agentic UI: Add site overview view - #4258

Merged
bcotrim merged 9 commits into
trunkfrom
stu-1927-add-site-overview-view
Jul 21, 2026
Merged

Agentic UI: Add site overview view#4258
bcotrim merged 9 commits into
trunkfrom
stu-1927-add-site-overview-view

Conversation

@bcotrim

@bcotrim bcotrim commented Jul 20, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Related issues

How AI was used in this PR

AI ported and adapted the implementation from the #3975 exploration branch, with scope, UX decisions, and visual review (light + dark) done by me.

Proposed Changes

Sites in the Agentic UI get a proper home beyond the chat panel. Each sidebar site row now shows a settings icon that opens a Site Overview — a Studio-style screen with:

  • Customize shortcuts (Site Editor, Styles, Patterns… for block themes; Customizer, Menus, Widgets for classic ones, plus Media Library) that open inside the in-app preview, auto-logged-in, starting the site first if it's stopped.
  • Manage actions: Duplicate, Export, Export DB, Delete.
  • Settings and Debugging as tabs, replacing the standalone "Site settings" screen. Old /sites/:id/settings links redirect here, tab included, and unsaved edits survive switching between the tabs.

Alongside that:

  • The three-dots row menu is gone; its actions now open on right-click of the site row, so the row hover stays down to two controls (gear + start/stop).
  • While signed out (agentic features unavailable), clicking a site lands on the overview instead of the old settings page.
  • The sign-in banner was restyled to sit comfortably above the overview sections.
Light Dark
image image

Testing Instructions

  1. npm start, then hover a site row in the sidebar → a gear icon appears next to the start/stop control.
  2. Click the gear → the Site Overview replaces the chat panel; the preview panel stays available (footer toggle).
  3. Click Customize shortcuts with the site stopped → the site starts, then the wp-admin screen opens in the preview, logged in. Verify block-theme vs classic-theme shortcut sets.
  4. Try Manage: Duplicate / Export / Export DB / Delete (confirmation dialog).
  5. Switch to the Settings tab, edit a value, hop to Debugging and back (edits persist), Save, and confirm the site updates.
  6. Right-click a site row → the old actions menu (Start/Stop, Site settings, Open folder/editor/terminal, phpMyAdmin, WP admin, exports, Delete).
  7. Sign out → clicking a site opens the overview with the sign-in banner; logging in returns to chat.
  8. Verify light and dark mode.

Pre-merge Checklist

  • Have you checked for TypeScript, React or other console errors?
@bcotrim bcotrim changed the title Agentic UI: Add site overview view with embedded settings (STU-1927) Jul 20, 2026
@bcotrim
bcotrim marked this pull request as ready for review July 20, 2026 16:11
@bcotrim
bcotrim requested review from nightnei and sejas July 20, 2026 16:11
@wpmobilebot

wpmobilebot commented Jul 20, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

📊 Performance Test Results

Comparing eabfe48 vs trunk

app-size

Metric trunk eabfe48 Diff Change
App Size (Mac) 1361.84 MB 1355.71 MB 6.12 MB 🟢 -0.4%

site-editor

Metric trunk eabfe48 Diff Change
load 1099 ms 1089 ms 10 ms ⚪ 0.0%

site-startup

Metric trunk eabfe48 Diff Change
siteCreation 6988 ms 7020 ms +32 ms ⚪ 0.0%
siteStartup 2356 ms 2364 ms +8 ms ⚪ 0.0%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)
bcotrim added 2 commits July 21, 2026 11:24
@bcotrim
Merge remote-tracking branch 'origin/trunk' into stu-1927-add-site-ov…
f26f267 
…erview-view

# Conflicts:
#	apps/ui/src/components/site-settings-view/index.tsx
@bcotrim
Merge remote-tracking branch 'origin/stu-1927-add-site-overview-view'…
cf3b941 
… into stu-1927-add-site-overview-view
@nightnei

nightnei commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

npm start, then hover a site row in the sidebar → a gear icon appears next to the start/stop control
There is no effect on hover, and there is no gear. But I see kinda Settings icon by default. Is it right?

Screenshot 2026-07-21 at 12 32 34
@nightnei

nightnei commented Jul 21, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Export and Export DB - I got an error for the newly created website. Is it known issues or regression?

Screenshot 2026-07-21 at 12 35 06
nightnei
nightnei approved these changes Jul 21, 2026
View reviewed changes

@nightnei nightnei 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.

I shallowly reviewd - LGTM.
And works perfectly.
Only two things, which can be fized in this or follow up PR:

  1. I think it's better to have WP version as a dropdown, similar to what we have in Studio Classic:
    Screenshot 2026-07-21 at 14 53 51

  2. I think we should add icon to the site in the left sidebar, when Xdebug is turned on

Screenshot 2026-07-21 at 14 55 20 Screenshot 2026-07-21 at 14 56 15 Screenshot 2026-07-21 at 14 56 42
@bcotrim
bcotrim merged commit 4152382 into trunk Jul 21, 2026
13 checks passed
@bcotrim
bcotrim deleted the stu-1927-add-site-overview-view branch July 21, 2026 14:21
This was referenced Jul 21, 2026
Merged
Merged
bcotrim added a commit that referenced this pull request Jul 22, 2026
@bcotrim
Agentic UI: Show an Xdebug indicator for the Xdebug-enabled site (#4285)
c997a44 
## Related issues

- Related to
[STU-1927](https://linear.app/a8c/issue/STU-1927/explore-preferences-view-in-place-of-sidebar-menu)
- Follow-up to #4258 — item 2 of [nightnei's
review](#4258 (review))

## How AI was used in this PR

AI (Claude Code) implemented the indicator and iterated on its placement
(name-adjacent badge → status button → site-card badge experiment →
dropdown), with me directing each step and visually reviewing the
attempts in the running app.

## Proposed Changes

Only one site can have Xdebug enabled at a time, but the agentic UI gave
no hint of which site holds that slot — you had to open each site's
settings to find out. Studio Classic solves this with an Xdebug icon in
place of the site's status circle; this PR brings the same affordance to
the agentic UI:

- The Xdebug-enabled site's sidebar row swaps the status dot for
Classic's Xdebug bug glyph, inside the same start/stop button — hover
still crossfades to the play/stop action, and the transitioning state
still blinks. The color follows the status palette (green running, amber
transitioning, grey stopped).
- Unlike other stopped rows (which hide the status button until hover),
the Xdebug site keeps its greyed glyph visible while stopped, so the
Xdebug slot is always spottable at a glance.
- The site dropdown (opened from the collapsed-sidebar site card) shows
the same glyph next to the **Studio** row label with an "Xdebug enabled"
tooltip. The card's tiny corner badge stays a plain status dot — we
tried the glyph there and it was illegible at that size.
- Status tooltips/aria labels on the Xdebug site now read e.g. "Site
status: Running. Xdebug enabled. Stop site".

| Stopped | Running | Stopped (sidebar closed) | Running (sidebar
closed) |
|--------|--------|--------|--------|
| <img width="3248" height="2122" alt="image"
src="https://github.com/user-attachments/assets/c3a1268b-955d-4183-9d40-aa3fecdd798e"
/> | <img width="3248" height="2122" alt="image"
src="https://github.com/user-attachments/assets/5386f8db-d4f8-4a64-b48e-488131d478d4"
/> | <img width="3248" height="2122" alt="image"
src="https://github.com/user-attachments/assets/ff3db723-f6c6-4ef5-a488-a971862d8f86"
/> | <img width="3248" height="2122" alt="image"
src="https://github.com/user-attachments/assets/51214bb0-ed68-4763-9a09-208d152ebb9a"
/> |

## Testing Instructions

1. In the agentic UI, open a site's overview → **Settings** tab and
enable Xdebug.
2. In the sidebar, the site's status dot becomes the green Xdebug bug.
Hovering the button still crossfades to the stop action; clicking still
stops the site.
3. Stop the site: the bug stays visible (greyed) without hovering, while
other stopped sites still hide their status button until hover.
4. Collapse the sidebar, click the floating site card: the dropdown's
**Studio** row shows the bug next to the label (green running / grey
stopped) with an "Xdebug enabled" tooltip. The card's corner badge
itself is unchanged.
5. Verify other sites' rows and live mode are unaffected, and check
everything in both light and dark mode.

## Pre-merge Checklist

- [x] Have you checked for TypeScript, React or other console errors?

🤖 Generated with [Claude Code](https://claude.com/claude-code)
bcotrim added a commit that referenced this pull request Jul 23, 2026
@bcotrim
Agentic UI: Make the site settings WordPress version field a dropdown (…
0e1a4bc 
…#4284)

## Related issues

- Related to STU-1927
- Follow-up to #4258, addressing item 1 of [this
review](#4258 (review))

## How AI was used in this PR

Implemented with Claude: reused the existing `useWordPressVersions`
query and `wpVersionField` select support, then extended them for the
settings form and ported the legacy version-selector semantics. Code and
tests reviewed by me.

## Proposed Changes

The WordPress version field in the agentic UI site settings was a
free-text input, so you could type anything (including invalid
versions). It's now a dropdown of the actually available WordPress
versions, with the same semantics as Studio Classic:

- **"latest"** (auto-update) is the first option and is preselected for
auto-updating sites. Picking it saves the site as auto-updating, with no
version forwarded.
- Picking a specific version (stable, beta, or nightly) pins the site:
`isWpAutoUpdating: false` and the version is applied on save.
- **Pinned sites show their actual installed version**, read from the
site's files like Classic does (new `getWpVersion` connector method: IPC
handler on desktop, a `/sites/:id/wp-version` route on the local
server). If the installed version is older than the fetched offers, it's
inserted into the list in the right position so it stays selectable.
- The version is **only forwarded on save when the user actually changed
it** — matching Classic's settings modal. Previously any unrelated save
of a pinned site forwarded a version and could trigger a WordPress
reinstall/upgrade.
- **Offline, the field locks to "latest"** — the only version we can
apply without a download — and is disabled, with the explanation shown
as a hover tooltip like the legacy selector. The field always stays a
dropdown: when the version list can't be fetched it offers "latest"
(plus the site's installed version) instead of degrading to free text.
- The dropdown uses the **same grouping as the legacy selector**:
Auto-updating / Beta & Nightly / Stable Versions.

| Online | Offline |
|--------|--------|
| <img width="3248" height="2122" alt="image"
src="https://github.com/user-attachments/assets/9de857f5-f22b-4092-820c-a4b3c560611d"
/> | <img width="3248" height="2122" alt="image"
src="https://github.com/user-attachments/assets/636956c7-5d2b-4908-8a20-f9f0b901296b"
/> |

## Testing Instructions

1. Launch Studio with the agentic UI and open a site's overview →
**Settings** tab.
2. Check the WordPress version field is a dropdown with "latest"
preselected, followed by beta/nightly and stable versions.
3. Pick a specific version and save — the site should restart pinned to
that version (auto-updates disabled).
4. Reopen Settings: the field shows the pinned site's actual installed
version.
5. Change an unrelated field (e.g. site name) on the pinned site and
save — WordPress should not be reinstalled or upgraded.
6. Switch the version back to "latest" and save — the site should be
auto-updating again.
7. Go offline (e.g. turn off Wi-Fi): the field forces "latest", is
disabled, and hovering it shows a tooltip explaining that changing the
version requires an internet connection.
8. Create-site form: confirm its WordPress version dropdown still
behaves as before (no changes intended there).
9. Verify the Settings tab in both light and dark mode.

## Pre-merge Checklist

- [x] Have you checked for TypeScript, React or other console errors?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

3 participants

@bcotrim @wpmobilebot @nightnei