Agentic UI: Add Connections to site overview

[shaunandrews]

Related issues

• Related to Design Exploration: Rebuild the site overview around summary cards #4462

How AI was used in this PR

AI helped extract the Connections slice from the larger overview exploration, adapt it to the current stacked branches, and build coverage for its user states and actions. I reviewed the diff and manually verified the resulting card in light and dark modes.

Proposed Changes

• Show the remote sites connected to the selected local site directly in its overview, including the most recent pull or push status.
• Give signed-in users a complete connect, pull, push, open, and copy flow without leaving the overview.
• Give signed-out and not-yet-connected users useful next actions instead of an empty card.
• Reflect sync work started elsewhere in Studio so the overview cannot offer conflicting actions while a pull or push is already running.

Testing Instructions

• Open a local site's Overview and confirm the Connections section appears below About and Disk.
• When signed in without a connection, confirm the empty state and plus action are available.
• With a connected WordPress.com site, confirm its address and last-sync state render and that the Sync menu offers pull and push.
• Start a sync from another Studio surface and confirm the overview shows the matching in-progress state.
• Check signed-out, offline, light, and dark states.

Automated verification:

• npx eslint --fix <modified files>
• npm run typecheck
• npx vitest run apps/ui/src/components/site-overview-view/index.test.tsx --maxWorkers=1
• npm run cli:build:ui

Pre-merge Checklist

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