Design Exploration: Rebuild the site overview around summary cards - #4462
Draft
shaunandrews wants to merge 2 commits into
Draft
Design Exploration: Rebuild the site overview around summary cards#4462shaunandrews wants to merge 2 commits into
shaunandrews wants to merge 2 commits into
Conversation
…column layout Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
shaunandrews
changed the title
This was referenced Aug 6, 2026
bcotrim
added a commit
that referenced
this pull request
Aug 10, 2026
## Related issues - Related to #4462 ## How AI was used in this PR AI helped extract the Open in experience and overview shortcut styling from the larger site-overview prototype into an independently reviewable change. I reviewed the resulting diff and verified it independently. ## Proposed Changes <img width="1051" height="661" alt="SCR-20260806-nord" src="https://github.com/user-attachments/assets/54308c36-1dd1-4d0c-afc0-71cbb8afb709" /> - Bring the familiar Open in actions onto the Agentic UI site overview so users can hand a site off to Finder, their configured editor, or their terminal without first opening the preview menu. - Keep phpMyAdmin alongside those local development tools, matching the workflow available in the Classic Studio overview. - Present Customize, Open in…, and Manage as consistent responsive button grids that expand to three columns and collapse cleanly with the preview open. - Hide actions that are unavailable in the current host or have not been configured, avoiding controls that cannot complete successfully. - Match Classic's terminal failure handling with console logging, Sentry reporting, and a user-facing alert. ## Testing Instructions 1. Open a local site's Overview tab and confirm an Open in… section appears between Customize and Manage. 2. Confirm Finder, the configured editor, Terminal, and phpMyAdmin open the expected destination. 3. Clear the preferred editor and confirm its shortcut is omitted while the remaining actions stay available. 4. Hide and show the preview panel. Confirm all three shortcut sections use equal-width columns and reflow without clipping or wrapping labels. 5. Run the hosted UI and confirm the entire Open in… section is omitted where local OS integration is unavailable. 6. Check the overview in both Light and Dark appearances. Automated verification: - `npx eslint --fix` on all modified files - `npm run typecheck` - `npm test -- apps/ui/src/components/open-in-menu/index.test.tsx apps/ui/src/components/site-overview-view/index.test.tsx` - `npm run cli:build:ui` ## Pre-merge Checklist - [x] Have you checked for TypeScript, React or other console errors? --------- Co-authored-by: bcotrim <bernardo.cotrim@a8c.com>
bcotrim
added a commit
that referenced
this pull request
Aug 10, 2026
## Related issues - Related to #4462 - Stacked on #4469 ## How AI was used in this PR Codex helped extract this focused slice from the larger proof of concept, add the responsive layout and tests, and run the verification workflow. I reviewed the resulting scope and tested the UI in wide and narrow panels in both light and dark themes. ## Proposed Changes <img width="1392" height="782" alt="image" src="https://github.com/user-attachments/assets/2b47da15-6a20-4cd3-875c-785bbfb24207" /> <img width="1035" height="757" alt="image" src="https://github.com/user-attachments/assets/d0cbd1f2-4099-48a4-9b11-c4dc2c39c803" /> <img width="378" height="158" alt="image" src="https://github.com/user-attachments/assets/3d3148e1-913d-4cbc-af1f-43c3b4817ac9" /> - Give each local site a compact About summary with its cached site thumbnail, full active-theme name, and WordPress/PHP versions on one secondary line. - Restore Classic's browser affordance by making the thumbnail open the site externally, including an always-visible fallback action when no screenshot has been captured yet. - Introduce a responsive two-column Overview layout so site information sits beside its actions on wide panels while actions remain first when the preview narrows the panel. - Keep disk usage out of this PR so its filesystem measurement and breakdown can be reviewed as a separate, independently useful follow-up. ## Testing Instructions 1. Open a local site's Overview with the preview hidden and confirm About appears beside Customize, Open in…, and Manage. 2. Open the preview and confirm the action sections remain first, with About below them. 3. Confirm the theme name wraps instead of truncating and the versions read as `WP v… • PHP v…`. 4. Click the thumbnail and confirm the site opens in the external browser. Repeat with a site that has no cached screenshot and confirm the empty frame still offers “Open site.” 5. Repeat in light and dark appearance modes. Automated verification: - `npx eslint --fix` on all modified TypeScript/TSX files (CSS files are not covered by the ESLint configuration) - `npm test -- apps/ui/src/components/site-overview-view/index.test.tsx` (25 tests) - `npm run typecheck` - `npm run cli:build:ui` ## Pre-merge Checklist - [x] Have you checked for TypeScript, React or other console errors? --------- Co-authored-by: bcotrim <bernardo.cotrim@a8c.com>
bcotrim
added a commit
that referenced
this pull request
Aug 10, 2026
## Related issues - Related to #4462 ## How AI was used in this PR AI helped extract this focused slice from the larger overview exploration, implement the filesystem measurement and connector plumbing, and add tests. I reviewed the resulting diff and manually verified the rendered overview in both light and dark modes. ## Proposed Changes <img width="1354" height="912" alt="image" src="https://github.com/user-attachments/assets/5e9b8506-961e-45b8-bf03-8e1ecad8383c" /> <img width="339" height="190" alt="image" src="https://github.com/user-attachments/assets/9d1cc70f-7d9f-4fb9-87cb-4e0ba91e7da2" /> - Show each local site's total disk usage directly in the About card, with an accessible visual breakdown for Media, Plugins, Themes, Database, and Other files. - Measure storage without following symlinks or issuing unbounded filesystem work, so large local sites do not make the overview unnecessarily disruptive. - Keep the summary useful across both the desktop app and local browser UI; hosted sites gracefully omit local disk data. ## Testing Instructions - Open a local site's Overview and confirm the About card shows a Disk total. - Hover anywhere on the bar, then focus it with the keyboard, and confirm the floating legend shows every category with its color, size, and percentage. - Check the card in both light and dark appearance modes. - Verify sites with little or no data render without a broken or empty breakdown. Automated verification: - `npx eslint --fix <modified files>` - `npm run typecheck` - `npx vitest run packages/common/sites/storage-usage.test.ts --maxWorkers=1` - `npx vitest run apps/ui/src/components/site-overview-view/index.test.tsx --maxWorkers=1` - `npx vitest run apps/cli/tests/local-server.test.ts --maxWorkers=1` - `npm run cli:build:ui` ## Pre-merge Checklist - [x] Have you checked for TypeScript, React or other console errors?
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
1 participant
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.
Related issues
How AI was used in this PR
Built with Claude Code, working from a hand sketch and iterating on the design in the app. The disk-breakdown palette was generated and then checked with a colorblindness/contrast validator rather than picked by eye; the rest is ordinary implementation. I reviewed every file, and the Figma file (
Studio Agentic UI→ Site View) was updated alongside it with the layout plus seven state frames.Proposed Changes
The agentic UI's overview tab was mostly empty, and not really finished. This PR aims to finish it. The updated design is meant to look/feel more like the current Studio app, and serve as an anchor for those migrating from old-to-new, and for those we don't have agentic features.
--
Two bugs came out of it. The Customize shortcuts depend on whether the site runs a block theme, and when that answer wasn't known the screen guessed "classic" — hiding the Site Editor on what is almost always a block theme, then swapping the buttons out a moment later once the answer landed. It now shows placeholders while it resolves and assumes a block theme when nobody can tell it. That answer was also never available at all in
studio ui(the CLI never reported it), so the browser build showed the wrong shortcuts permanently; the CLI resolves theme details now and the desktop's already-persisted copy is reused when it exists.Testing Instructions
+in Connections), then check the sync recency, the pull/push menu, and that clicking the URL opens your real browser.+in Preview sites) and check the expiry copy and the quota beside the button.npm run cli:build:ui && node apps/cli/dist/cli/main.mjs ui --no-openand repeat 1–2 in the browser — the theme-dependent shortcuts should now be right there too.Pre-merge Checklist