Agentic UI: Design Preview - #3975
Draft
shaunandrews wants to merge 267 commits into
Draft
Conversation
shaunandrews
changed the title
# Conflicts: # apps/ui/src/components/settings-view/style.module.css # apps/ui/src/components/sidebar-layout/style.module.css # apps/ui/src/components/site-list/index.test.tsx # apps/ui/src/components/site-list/index.tsx # apps/ui/src/components/site-list/style.module.css # apps/ui/src/components/user-menu/index.tsx # apps/ui/src/components/user-menu/style.module.css
…-conversation-chrome # Conflicts: # apps/cli/ai/sessions/replay.ts # apps/studio/src/menu.ts # apps/studio/src/modules/sync/lib/ipc-handlers.ts # apps/ui/src/components/sidebar-layout/index.test.tsx # apps/ui/src/components/sidebar-layout/index.tsx # apps/ui/src/components/sidebar-layout/style.module.css # apps/ui/src/components/site-dropdown/dropdown-trigger.module.css # apps/ui/src/components/site-dropdown/dropdown-trigger.tsx # apps/ui/src/components/site-dropdown/index.tsx # apps/ui/src/components/site-dropdown/main-view.module.css # apps/ui/src/components/site-dropdown/main-view.tsx # apps/ui/src/components/site-dropdown/trigger-secondary.test.ts # apps/ui/src/components/site-dropdown/trigger-secondary.ts # apps/ui/src/components/site-settings-view/index.tsx # apps/ui/src/components/site-settings-view/style.module.css # apps/ui/src/data/core/connectors/ipc/index.ts # apps/ui/src/data/core/types.ts # apps/ui/src/data/queries/use-sessions.test.ts # apps/ui/src/data/queries/use-sessions.ts # apps/ui/src/ui-classic/components/session-view/composer/index.test.tsx # apps/ui/src/ui-classic/components/session-view/composer/index.tsx # apps/ui/src/ui-classic/components/session-view/composer/style.module.css # apps/ui/src/ui-classic/components/session-view/conversation/index.test.ts # apps/ui/src/ui-classic/components/session-view/conversation/index.tsx # apps/ui/src/ui-classic/components/session-view/index.tsx # apps/ui/src/ui-classic/components/session-view/queued-prompts/index.test.tsx # apps/ui/src/ui-classic/components/session-view/queued-prompts/index.tsx # apps/ui/src/ui-classic/components/session-view/style.module.css # apps/ui/src/ui-classic/components/session-view/thinking-indicator/style.module.css # apps/ui/src/ui-classic/router/layout-dashboard/index.tsx # apps/ui/src/ui-classic/router/route-new-session/index.tsx
shaunandrews
changed the title
(cherry picked from commit 515b007)
(cherry picked from commit 0f66639)
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> (cherry picked from commit c2980fc)
# Conflicts: # apps/cli/ai/runtimes/pi/index.ts # apps/ui/src/components/site-dropdown/main-view.tsx # packages/data-liberation-agent/dist/mcp-server.bundle.mjs
# Conflicts: # apps/studio/src/components/studio-code-session/conversation/index.tsx # apps/ui/src/components/settings-view/usage-panel.tsx
# Conflicts: # apps/studio/src/site-server.ts # apps/ui/src/components/site-preview/index.test.tsx # apps/ui/src/components/site-preview/index.tsx # apps/ui/src/components/site-preview/style.module.css # apps/ui/src/lib/icons.tsx
bcotrim
added a commit
that referenced
this pull request
Jul 30, 2026
…eview state (#4364) ## Related issues <!-- Link a related issue to this PR. If the PR does not immediately resolve the issue, for example, it requires a separate deployment to production, avoid using the "Fixes" keyword and use "Related to" instead. --> - Fixes STU-2088 ## How AI was used in this PR <!-- Help reviewers understand what to look for and verify that you've reviewed the code yourself. --> Implemented with Claude Code: ported the stopped-state Preview treatment from the `explore-site-centric-conversation-chrome` exploration branch (#3975) to trunk, including the connector plumbing and test coverage, then verified lint, typecheck, and unit tests. Tested and reviewed manually ## Proposed Changes <!-- Explain the intent of this PR: - What problem does it solve, or what need does it address? - How does it affect the user (new capability, fix, performance, accessibility, etc.)? - Note any user-visible behavior changes or trade-offs. Focus on the "why" and the user impact. Avoid listing modified files or describing implementation mechanics — the diff already shows that. --> - New layout for the preview of a stopped-site - If a thumbnail exists for that site it is displayed | Light | Dark | No Thumbnail | |--------|--------|--------| | <img width="1750" height="1191" alt="image" src="https://github.com/user-attachments/assets/709193cd-cd10-4c25-9a0e-6978111e13d0" /> | <img width="1750" height="1191" alt="image" src="https://github.com/user-attachments/assets/e43b39c4-ff29-4bc4-bf7e-6dcad0ca3494" /> | <img width="1750" height="1191" alt="image" src="https://github.com/user-attachments/assets/1e1c3ab5-537f-433d-96ac-80022bbbf7d9" /> | ## Testing Instructions <!-- Add as many details as possible to help others reproduce the issue and test the fix. "Before / After" screenshots can also be very helpful when the change is visual. --> 1. Run `npm start` and switch to the agentic UI. 2. Open a site and stop it. 3. The Preview shows the dot-grid texture with the site's thumbnail as a 4:3 card above "Start the site to see a live preview." and the **Start site** button. 4. Click **Start site** — the live preview returns as before. 5. Stop a freshly created site that never produced a thumbnail — the stopped state shows just the grid, copy, and button (no broken image) - you can create one site like this in the CLI with the `--no-start` option 6. Verify the stopped state in both light and dark mode ## Pre-merge Checklist <!-- Complete applicable items on this checklist **before** merging into trunk. Inapplicable items can be left unchecked. Both the PR author and reviewer are responsible for ensuring the checklist is completed. --> - [ ] Have you checked for TypeScript, React or other console errors?
# Conflicts: # apps/studio/src/preload.ts # apps/studio/src/updates.ts # apps/ui/src/components/site-preview/address-bar.module.css # apps/ui/src/components/site-preview/address-bar.test.tsx # apps/ui/src/components/site-preview/address-bar.tsx # apps/ui/src/data/core/index.ts # apps/ui/src/data/core/types.ts # apps/ui/src/hooks/use-customize-links.ts # apps/ui/src/ui-classic/components/session-view/composer/style.module.css # package-lock.json
1 task
# Conflicts: # apps/ui/src/ui-classic/components/session-view/empty-background/index.tsx # apps/ui/src/ui-classic/components/session-view/suggested-prompts/style.module.css
# Conflicts: # apps/ui/src/components/create-site-form/index.tsx
1 task
bcotrim
added a commit
that referenced
this pull request
Aug 4, 2026
## Related issues - Fixes STU-2086 ## How AI was used in this PR Claude Code ported `open-in-menu/` from the Design Preview exploration (`45fd6fb4c`, #3975) and wrote the tests. I reviewed the diff and tested in the app. ## Proposed Changes The preview toolbar's external-link icon becomes an **Open in…** split button: the left half repeats the last destination (persisted), the chevron opens Browser, Finder/File Explorer, editor, terminal, phpMyAdmin. Browser opens the page currently shown in the preview, and is the only destination disabled while the site is stopped. The control itself stays in the toolbar in **every** state, including stopped — unlike the button it replaces, which #4366 moved inside the `canPreview` guard — so files, editor and terminal are reachable without starting the site first. | Running | Stopped | |--------|--------| | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/f4cdf989-33ec-4bf5-95fe-8aea44dbb000" /> | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/4f9273bc-2aa4-458f-ab07-3dbd478f9004" /> | | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/9ee2d477-5b3e-4946-8b26-65fbe558da1e" /> | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/a068a9d2-ab38-4749-a42d-f322341bb794" /> | ## Testing Instructions Needs agentic features enabled. 1. Running site: try each destination from the chevron menu. The main half repeats the last one and persists across restarts. 2. Navigate inside the preview, then click the main half on **Browser** — opens that page, not the site root. 3. Stop the site: the control stays, **Browser** and is disabled, the rest still work. 4. Check light + dark, and RTL. ## Pre-merge Checklist - [x] Have you checked for TypeScript, React or other console errors? 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Antonio Sejas <antonio.sejas@automattic.com>
bcotrim
added a commit
that referenced
this pull request
Aug 4, 2026
…4368) ## Related issues - Fixes STU-2089 ## How AI was used in this PR Implemented with Claude Code, ported from the Design Preview exploration (#3975). I reviewed the code and verified manually in the app. ## Proposed Changes - New **More options (⋮) menu** in the preview toolbar with a **Responsive mode** group: Fit pane (default), Mobile · 390×844, Tablet · 768×1024, and Desktop · 1440×900. Mobile adds a **Mobile orientation** group (Portrait / Landscape). - Presets render as fixed-size device frames on a dot-grid letterbox, scaled to fit the pane — browser responsive-design-mode style. Mobile uses real device emulation (CDP), so responsive themes behave like on-device. - The chosen mode is remembered per site for the session. - The menu is modal, so clicking anywhere outside — including the preview page — closes it. | Fit | Mobile | Tablet | Desktop | |--------|--------|--------|--------| | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/37440481-899a-41d9-9c51-7ede51bc51ae" /> | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/e21a7c4f-23bb-44b3-bbaa-1174215ed370" /> | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/6b934f94-ff35-4309-b0b9-0df808e4c8d0" /> | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/d7878c82-cfd7-48e1-9634-aaedea942ba6" /> | | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/7116cbed-7290-433f-9815-d85d338a0772" /> | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/b50a09d2-eec8-42ed-890e-9dac13969e25" /> | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/5010f393-b8ff-42e5-9749-ea4da7abc2c4" /> | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/2dfb556d-73e1-41d6-9bec-121dc13d8709" /> | ## Testing Instructions Full app restart (new main-process IPC handler), agentic UI, a running site. 1. Preview → **⋮** → try each mode; resize the panel — frames re-fit live. 2. Mobile: orientation group appears, Landscape flips to 844×390, and a responsive theme shows its phone layout. 3. Pick a mode, switch to another site (starts at Fit pane), switch back — your mode is restored. 4. With the menu open, click the preview page → it closes. ⋮ is hidden while the site is stopped. 5. Check light + dark. ## Pre-merge Checklist - [x] Have you checked for TypeScript, React or other console errors? 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Antonio Sejas <antonio.sejas@automattic.com>
bcotrim
added a commit
that referenced
this pull request
Aug 4, 2026
…le comparison (#4423) ## Related issues - Related to STU-2089 ## How AI was used in this PR Implemented with Claude Code, ported from the Design Preview exploration (#3975). I reviewed the code and verified manually in the app. ## Proposed Changes - **Full preview** — a new item in the preview's **•••** menu hands the whole window to the preview, hiding the sidebar and chat. The chat stays mounted, so nothing is lost on the way in or out. Leaving is the same menu item, or the usual sidebar toggle. - **Desktop + Mobile is back.** It was cut in review because a desktop page beside a phone is unreadable in the narrow panel; it now travels with full preview, where there's room for both. Picking it goes full preview, and leaving full preview drops back to Fit pane rather than squeezing two frames into the panel. | Full Preview | Desktop + mobile | Shortcuts | |--------|--------|--------| | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/e890fc64-bac0-4566-a666-94f2120ca68c" /> | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/21ae4aa2-ca24-4860-831d-552588dd85ed" /> | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/462c44b5-ff90-4d51-b981-064d21634f70" /> | | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/95b7f1bb-ea34-4ac0-ab5d-db5a8846694f" /> | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/0b8902a1-3518-4f88-8d98-a6f8124dd21c" /> | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/fd54f83a-4c44-42ee-ad89-999a6f96639e" /> | ## Testing Instructions Agentic UI, a running site. 1. Preview → **•••** → **Full preview**: sidebar and chat give way to the preview. The same item (now **Exit full preview**) brings them back, as does the sidebar toggle. 2. **•••** → **Desktop + Mobile**: goes full preview and shows both frames, the phone following the desktop pane's navigation. Try **Landscape** in the orientation group. 3. Leave full preview from the comparison → back to Fit pane in the normal split. 4. Resize the window in each: frames re-fit live. 5. Try the preview keyboard shortcuts to confirm they work 6. Check light + dark. ## Pre-merge Checklist - [x] Have you checked for TypeScript, React or other console errors?
# Conflicts: # apps/studio/src/preload.ts # apps/ui/src/components/menu/index.tsx # apps/ui/src/components/menu/style.module.css # apps/ui/src/components/open-in-menu/index.test.tsx # apps/ui/src/components/open-in-menu/index.tsx # apps/ui/src/components/open-in-menu/use-open-in-destinations.tsx # apps/ui/src/components/preview-split-frame/index.test.tsx # apps/ui/src/components/preview-split-frame/index.tsx # apps/ui/src/components/preview-split-frame/style.module.css # apps/ui/src/components/settings-view/keyboard-panel.tsx # apps/ui/src/components/sidebar-layout/index.test.tsx # apps/ui/src/components/sidebar-layout/index.tsx # apps/ui/src/components/site-preview/index.test.tsx # apps/ui/src/components/site-preview/index.tsx # apps/ui/src/components/site-preview/inspector-script.ts # apps/ui/src/components/site-preview/location-omnibox.tsx # apps/ui/src/components/site-preview/style.module.css # apps/ui/src/data/core/connectors/ipc/index.ts # apps/ui/src/data/core/types.ts # apps/ui/src/hooks/use-session-ui.tsx # apps/ui/src/ui-classic/router/layout-dashboard/index.tsx # package-lock.json # packages/data-liberation-agent/dist/mcp-server.bundle.mjs
# Conflicts: # apps/ui/src/components/settings-view/account-section.test.tsx # apps/ui/src/components/settings-view/account-section.tsx
# Conflicts: # apps/studio/src/modules/user-settings/lib/ipc-handlers.ts
# Conflicts: # apps/studio/src/components/studio-code-session/conversation/index.tsx # apps/studio/src/components/studio-code-session/index.tsx # apps/ui/src/components/settings-view/usage-panel.test.tsx # apps/ui/src/components/settings-view/usage-panel.tsx # apps/ui/src/components/site-preview/index.test.tsx # apps/ui/src/components/site-preview/index.tsx # apps/ui/src/data/core/connectors/ipc/index.ts # apps/ui/src/data/core/types.ts # apps/ui/src/ui-classic/components/session-view/conversation/index.tsx # apps/ui/src/ui-classic/components/session-view/index.tsx
bcotrim
added a commit
that referenced
this pull request
Aug 6, 2026
## Related issues - Fixes STU-2019 ## How AI was used in this PR Claude ported the design from the exploration branch (`explore-site-centric-conversation-chrome`, #3975) onto current trunk, and I reviewed every screen in the running app. Worth a close look at two things the AI changed rather than copied: - The exploration cross-imports `welcomeStyles` into connect and tour for the feature card and auth buttons. That's extracted into shared components instead — which surfaced real drift, e.g. the tour used `variant="outline"` for Log in while welcome used `solid`, under a comment claiming they matched. - `EmptyBackground` is parameterized on top of trunk's version rather than taking the exploration's copy, since f61ebe7 changed that component after the branch forked. ## Proposed Changes Second pass on the first-run flow: welcome → concept tour → Add a site. Each screen now owns one story instead of three screens repeating the same pitch. - The welcome leads with what a WordPress.com account unlocks (Studio Code, sync, previews) and asks for login once, with a reason. - Two tour screens introduce local sites and Studio Code. The last doubles as the second and final login prompt for people who skipped, since the agent needs an account. - Terminology follows one verb map: *create* a local site, *connect* a live one, *import* a backup, *build* reserved for Studio Code. Account auth is always "log in with". | Welcome | Step 1 | Step | |--------|--------|--------| | <img width="1203" height="1011" alt="image" src="https://github.com/user-attachments/assets/b73ea5e7-4971-45f8-8dc3-ac2c958efae7" /> | <img width="1203" height="1011" alt="image" src="https://github.com/user-attachments/assets/e0ecc6c6-c987-4ca4-acbc-a063779ee2fe" /> | <img width="1203" height="1011" alt="image" src="https://github.com/user-attachments/assets/9b02ab67-128c-424c-bc90-efd475f6060b" /> | | <img width="1203" height="1011" alt="image" src="https://github.com/user-attachments/assets/5b951afb-22ac-4085-8a78-848bde51ebaa" /> | <img width="1203" height="1011" alt="image" src="https://github.com/user-attachments/assets/88825d13-934d-488c-bcc8-ebc4730fabd7" /> | <img width="1203" height="1011" alt="image" src="https://github.com/user-attachments/assets/7cd4285f-0633-4dd0-96a6-3b4ff0671987" /> | ## Testing Instructions The welcome only shows with zero sites, so point the app at an empty config rather than deleting yours: ``` DEV_CONFIG_DIR=/tmp/nux npm start ``` 1. Walk welcome → tour → tour step 2 → Add a site. Back should retrace it. 2. Skip login on the welcome; step 2 should offer Sign up / Log in and a "Skip log in" primary action. 3. Log in from the welcome — it should advance on its own. 5. Check both color schemes ## Pre-merge Checklist - [x] Have you checked for TypeScript, React or other console errors?
# Conflicts: # apps/ui/src/components/app-toasts/index.tsx
# Conflicts: # apps/studio/src/ipc-handlers.ts # apps/ui/src/components/open-in-menu/index.test.tsx # apps/ui/src/components/open-in-menu/use-open-in-destinations.tsx # apps/ui/src/components/site-dropdown/main-view.tsx # apps/ui/src/components/site-list/index.test.tsx # apps/ui/src/components/site-list/index.tsx # apps/ui/src/components/site-overview-view/index.test.tsx # apps/ui/src/components/site-overview-view/index.tsx # apps/ui/src/components/site-preview/index.test.tsx # apps/ui/src/components/site-preview/index.tsx # apps/ui/src/components/site-settings-view/index.test.tsx # apps/ui/src/data/core/connectors/ipc/index.ts # apps/ui/src/data/core/types.ts # apps/ui/src/ui-classic/app.tsx # apps/ui/src/ui-classic/components/session-view/conversation/index.tsx # apps/ui/src/ui-classic/components/session-view/index.tsx # apps/ui/src/ui-classic/router/route-site-overview/index.tsx # package-lock.json
# Conflicts: # apps/cli/ai/runtimes/pi/index.ts # apps/cli/ai/tests/pi-runtime.test.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR is a collection of changes aiming to serve as a preview of upcoming design updates.