Google Search Console in the dashboard

Mockups for spec docs/specs/0.82.search-console-connect.md (M1–M3), sample site Harbor Physio · harborphysio.com, owner Sara Lind. Today = 10 Oct, Google data up to 7 Oct. Static HTML built from the real tokens (dashboard/app/app.css) and the real component classes (SubNav, StatTile, SectionCard, EmptyState, Badge, Dialog, LaunchChecklist, NeedsYouRail). Click a picture for the PNG, the title for the live HTML. URL switches on every page: ?mobile=1 ?dark=1 ?plan=free ?role=member ?menu=1 ?tip=1 ?notes=0. Notes, options and open questions: NOTES.md.

Recommendation: Option B — the spec's order, every card full width, and Pages to improve as a list of fixes (one sentence, numbers underneath, one “Copy prompt” each) instead of a 7-column table. It reads on a phone without a second layout, matches the Health tab's “Needs attention” rows, and stays honest on Free (3 rows + one line).

D · Performance, connected (Core) — layout options

Option B ★ recommended · fix list, full width

1440 · 390 mobile · … menu · dark + tooltip

Option A · spec stack, fixes as a table (Luka's research layout)

1440

Option C · joined totals strip, Indexing in a side column

1440

Connect flow

A · Not connected, owner

owner · non-owner

B · Ownership notice before Google

C · Connecting checklist

we verify · already in Search Console

Plans, states, disconnect

E · Connected, Free plan (one upgrade line)

F · No numbers yet · reconnect · moved workspace · address changed · stale · failed · blocked · www pair

G · Disconnect dialog

Elsewhere in the site

H · SEO › Health inspector, “On Google”

Core · Free

I1 · Overview before publish: checklist step

I2 · After publish, not connected: rail step

I3 · Connected: Search card in the main column

I4 · Search card, needs reconnect

Re-shoot: cd tools/editor-harness && PLAYWRIGHT_BROWSERS_PATH="$LOCALAPPDATA/ms-playwright" node ../../docs/mockups/search-console/shoot.mjs (also checks every shot for horizontal overflow and page errors).