Agentic UI: Integrate the site overview, sharing, and sync progress

[shaunandrews]

Related issues

• Builds on Agentic UI: Add Connections to site overview #4474, Agentic UI: Add preview sites to site overview #4483, and Design Exploration: Replace the site dropdown with a permanent site header #4400.
• Related to the admin credentials UI introduced in Agentic UI: Add copy button for admin credentials #4570.

How AI was used in this PR

Built and iterated with Claude Code and Codex across repeated design, implementation, test, and live-browser passes. I directed the hierarchy and interaction details, reviewed each rendered revision, and used the combined branch to reconcile the four overlapping explorations.

Proposed Changes

This is the top integration layer of a stacked design exploration.

Stack order:

1. Agentic UI: Add Connections to site overview #4474 — Connections on the overview
2. Agentic UI: Add preview sites to site overview #4483 — Preview sites on the overview
3. Design Exploration: Replace the site dropdown with a permanent site header #4400 — Persistent site header with Share and Sync dialogs
4. Agentic UI: Integrate the site overview, sharing, and sync progress #4601 — Integrated overview polish, reusable sharing controls, and operation progress (this PR)

This layer turns the lower-level explorations into one coherent site-management experience.

Overview hierarchy

• Give About, Connections, and Preview sites separate cards with headings outside each card.
• Keep the detail column readable with a smaller max width and delay the stacked responsive layout so About, connections, and previews stay visible sooner.
• Move Open in to the shared site header and remove the duplicated Overview section.
• Put creation actions in card footers, use WPDS buttons/badges/tooltips, and keep empty-state copy free of orphaned final words.
• Add loading states so Connections and Preview sites do not flash their empty states while data resolves.

About and admin access

• Replace the oversized WP Admin card with compact username/password controls inside About.
• Show the real site thumbnail and reveal Open site on hover/focus.
• Load real theme metadata and thumbnails through both browser and desktop connectors.
• Group password visibility under a menu section with explicit Hide and Show choices.

Connections and Sync

• Present Push, Pull, and Copy URL in the same order as the Sync dialog.
• Open the same selective Sync dialog from the connection row, preselected to that site and direction.
• Support multiple live-site connections without hiding them behind a single menu.
• Show the active connection's message, percentage/indeterminate bar, and Pushing/Pulling badge.
• Keep a persistent sidebar notice updated through the full push/pull lifecycle, then resolve it to success, cancellation, or failure.

Preview sites and Share

• Reuse one Preview sites list and action implementation in both Overview and the Share dialog.
• Clarify actions with Open, Update/Republish, Copy URL, Delete, and Delete all expired.
• Remove Copy URL from expired previews and place New preview in the card/dialog footer.
• Show an optimistic in-list publishing row plus the same persistent progress notice while a preview is created or updated.

Current integrated UI

The progress screenshot stages the same 42% push state used by the automated coverage: the matching connection row and persistent sidebar notice show the same status. Every image below is a native Retina capture rather than an enlarged browser thumbnail.

Overview · light	Overview · dark

Site header	Connections

Shared Preview sites list in Share

Light	Dark

Selective Sync

Light	Dark

Testing Instructions

1. Run npm run cli:build:ui && node apps/cli/dist/cli/main.mjs ui --no-open and open http://localhost:8081.
2. Open Overview for sites with zero, one, and multiple connections/previews.
3. Confirm loading states appear before data and empty states appear only after an empty result.
4. Exercise Connect site, New preview, Delete, Delete all expired, and every row tooltip.
5. Open Share from the header and confirm it renders the same preview rows and actions as Overview.
6. Open Sync from the header and from both Push and Pull row actions. Confirm the target/direction and selective file/database choices match.
7. Start preview and sync work. Confirm the row progress and persistent notice stay in agreement until success, cancellation, or error.
8. Check wide and narrow layouts in light, dark, and a representative RTL locale.

Automated verification on this integrated head:

• npx eslint --fix on the modified files
• npm run typecheck
• 132 focused overview, toolbar, connector, preview, sync-activity, and local-server tests
• npm run cli:build:ui
• Live browser verification in light, dark, and Hebrew RTL at 100% zoom

Pre-merge Checklist

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

[katinthehatsite]

I like the minimalistic design and thanks for adjusting it, I was mostly going rogue and adding functionality when adding the initial PR 🙈

I see a couple of minor things. For example, when the Hide password is activated and the checkmark goes away, it looks like the option is mistaligned because of the gap in front:

Also, I am finding it a bit strange that the email for login and the admin password are split in the UI. This is the information that usually goes together and the user uses together to log in etc. What do you think?