feat: Repair Panel main-window redesign (single centered card)

[JG2547]

Summary

The main workspace is now one centered, rounded "Repair Panel" card — the dominant visual object of the window. The same stable card hosts every wizard state (checking, fix-available, action-needed, repairing, success, failure/retry, and the Zoom guided-recovery state). The header (product mark + summary badge) sits above it; the footer stays restrained below.

This is a UI/UX-only change. No repair IPC, elevation, support-service, updater, profile-safety, diagnostics, accessibility, or honest UNKNOWN/error logic was touched — verified by the passing npm test suite and the existing zoom-recovery capture harness. Nothing was flattened into a reassuring success for visual convenience.

Problems fixed

Excessive dead space · weak vertical centering · large header→content and content→footer gaps · detached status info · misaligned "Action needed" state · inconsistent panel geometry · content jumping/resizing between states — all addressed by fixing spacing and hierarchy, not by hiding information.

Rendered states (harness render, mocked electronAPI — not the packaged app; 1000×760)

Checking	Fix available

Action needed	Repairing

Success	Error

Bonus — the tallest pane, Zoom guided recovery (blocked), rendered inside the card with its content scrolling internally, never the window:

Render → critique → adjust loop

Iteration 1 (card introduced, content-sized): the card rendered and centered, but its height swung 226px→400px across states (action-needed 226, checking 332, repairing 400, error 362). Concrete defect: the card visibly grew/shrank and re-positioned (top moved 200→287px) as the state changed — a direct violation of "geometry stable across states."

Adjustment: gave .repair-panel a fixed min-height: 416px (just above the measured tallest pane, the 400px repairing rail) and vertically centered its content.

Iteration 2 (measured): every state now occupies an identical box — h=416, top=192, optically centered (≈3px high, deliberate optical center) — at 1000×760. Success and error no longer resize or reposition the workspace. Also collapsed the empty Advanced-details region out of the flex flow so it adds no content→footer gap unless it actually has content (the failure "Copy error details" link or an expanded panel).

Cross-size verification: no window vertical/horizontal scroll and no clipping from the 720×640 minimum window (card top=132, bottom=548) through 900×700, 1000×760, up to 1280×860.

Acceptance criteria (verified against the screenshots + measured DOM metrics, not assertion)

• ✅ No unintended vertical scrollbar (scrollH == innerH at every size)
• ✅ No horizontal overflow (scrollW == innerW)
• ✅ No clipping (verified visually in all 7 shots)
• ✅ Repair card optically centered (left/right margins 220/220; vertical delta ≈3px high)
• ✅ Primary actions visible and dominant (one filled primary per state; quiet secondary row)
• ✅ Status understandable (header badge echoes the card's title/explanation, now adjacent to the actions)
• ✅ Header/footer do not dominate
• ✅ Geometry stable across states (identical card box for all states)
• ✅ Success/error do not radically resize/reposition the workspace

Not-met / caveats (honest): For states with no primary CTA (action-needed, checking), the fixed card leaves some intentional internal whitespace as content centers within the stable box — this is the deliberate trade-off for non-jumping geometry, favored per the task. The screenshots are harness renders with a mocked electronAPI (real page code/styles/copy, mocked scan/fix data); packaged-app visual inspection on real Win11 remains a separate step.

Files changed

• index.html — CSS for the card + centering; wrap wizard/adv/action in .repair-panel.
• tools/repair-panel-capture.js — new evidence harness (headless Chromium via global Playwright) driving the real renderer through each main state.
• .audit/repair-panel/*.png + manifest.json — captured state evidence.

Test / CI

• npm test — PASS (exit 0): all 12 smoke suites incl. ui-state, messages, electron-security, updater-channel, release-identity.
• Existing tools/ui-state-capture.js (zoom-recovery) — all 25 new-tree captures PASS (the single "old-blocked" FAIL is only because --base HEAD was used, so the "old" tree legitimately already has the card; not a regression).
• CI on the PR will run the repo workflows; results will appear below.

[JG2547]

#182 is the designated Repair Panel survivor. Before closing this one I checked whether it actually contains this PR's intended behavior, rather than assuming it. The UI behavior is covered. One thing is not, so I am leaving this open rather than closing it.

Covered by #182

This PR's stated intent is a single centered card with one stable geometry for every state. #182 implements the same thing in src/preload/compact-shell.js, at the same measurements:

This PR (index.html)	#182 (compact-shell.js)
.main { justify-content: center; align-items: center }	body.compact-shell-enabled > .main { display: flex !important; justify-content: center }
.workspace { max-width: 560px } (down from 640px)	.workspace { width: min(560px, 100%) }
.repair-panel { align-items: center; justify-content: center }	.workspace { align-items: center; justify-content: center }
overflow: hidden — the window never scrolls	overflow: hidden !important on both .main and .workspace

Same 560px, same centering, same "only an inner pane scrolls, never the window" rule. #182 reaches it by injecting CSS over the existing shell instead of editing index.html, which is why the two branches would conflict and why only one can survive.

#182 additionally has the cooperative-cancellation work (src/main/fix-cancel.js, tools/fix-cancel-smoke.js) that this PR does not, so it is the correct survivor.

NOT covered by #182

tools/repair-panel-capture.js (283 lines) and .audit/repair-panel/ — a 7-state capture harness with a manifest.

I verified this directly against the branch contents rather than the PR description:

• tools/ on feat/compact-four-state-redesign: compact-shell-smoke.js, ui-state-capture.js
• tools/ on main: ui-state-capture.js
• .audit/ on feat/compact-four-state-redesign: 404 — does not exist

So the capture harness is unique to this branch and would be lost. compact-shell-smoke.js (60 lines) is a smoke test, not a state-capture harness, and the pre-existing ui-state-capture.js covers the Zoom-recovery card rather than the repair panel's seven states.

Why I have not closed this

The rule I was given is to close this only after proving #182 contains every intended unique behavior. The behavior is proven above. The capture harness is tooling rather than behavior, but it is real unique value and closing this PR would discard it.

I have also not pushed the harness onto #182's branch: feat/compact-four-state-redesign currently has substantial uncommitted work in progress, and moving files onto another lane's active branch is exactly the kind of two-owners-one-file conflict worth avoiding.

Recommended resolution, whichever you prefer:

1. Port tools/repair-panel-capture.js onto the feat: compact four-state Repair Panel with real cooperative cancellation #182 lane when that branch is quiet, then close this PR; or
2. Land this PR's harness as its own small tooling-only PR (no index.html), then close this PR; or
3. Confirm the harness is genuinely redundant with ui-state-capture.js and close this PR as-is.

Say which and I will execute it. The index.html half of this PR is superseded either way.

[JG2547]

Decision recorded: tooling-only preservation. This PR's index.html redesign is superseded by #182 and will not be merged. Its capture capability will be preserved as a separate tooling-only PR. This PR stays open until that exists.

Sequencing, deliberately in this order:

1. feat: compact four-state Repair Panel with real cooperative cancellation #182 merges first. The harness has to drive feat: compact four-state Repair Panel with real cooperative cancellation #182's real compact state machine and its cooperative cancellation — not the seven states this branch's index.html produced. Building it against a UI that is about to be replaced would preserve the file and lose the capability.
2. A new clean tooling branch, not a push onto feat/compact-four-state-redesign. That branch has substantial uncommitted work in progress and two owners on one file is how this convergence got tangled in the first place.
3. Cover the states that genuinely exist in feat: compact four-state Repair Panel with real cooperative cancellation #182 — checking, ready, fixing stages, cancelling, cancelled, success, failure/retry, and exit-during-fix confirmation where applicable.
4. Assert, not just capture: stable geometry across states, no window scrolling, internal overflow confined to the pane that should scroll, actions visible, and honest state transitions. A harness that only writes PNGs is a screenshot script, not a regression test.
5. Screenshots as CI artifacts, not committed evidence, unless repository policy requires otherwise.
6. No superseded Repair Panel CSS or markup in that PR.

I will not describe the original seven-state harness as "preserved" if the replacement cannot drive #182's actual state model — that would be a claim about a file rather than about behaviour.

Tracked as L-08 in docs/1132-WINDOWS-LANE.md, and on the portfolio board as Blocked / P2.

Verified evidence behind the supersession call, taken from branch contents rather than PR descriptions:

• tools/ on feat/compact-four-state-redesign: compact-shell-smoke.js, ui-state-capture.js
• .audit/ on feat/compact-four-state-redesign: 404 — does not exist

So the harness is genuinely unique to this branch, which is why this PR is not being closed yet.