fix(security): smooth the scan-end visual transition

[graydawnc]

What

Eliminates the one-frame "shake" SecurityPage produced when a manual rescan ended. The user reported it as a small but persistent visual judder that survived several iterations of the obvious fixes — the actual cause turned out to be four overlapping problems that all had to land together for the transition to feel like state morphing instead of a banner swap.

Why

After PR #350 (scan-worker enqueue burst batch) merged, manual verification on the dev archive surfaced a separate UX seam at the OTHER end of the burst — scan completion. Walked the codepath one fix at a time, with the user verifying each iteration, and converged on a four-layer fix:

1. Two React commits at the busy → idle edge — the manual-rescan branch flipped displayBusy(false) + rescanInFlight(false) synchronously, then set scanResult after an await refresh() a few ms later. Two commits = one intermediate frame with neither banner mounted.
2. Geometric column-width mismatch — ScanBanner's right column was 0 px (empty span); ScanResultBanner's right column was 20 px (dismiss button). Under grid-template-columns: auto 1fr auto the middle column gained / lost 20 px across the swap. Verified via Playwright getBoundingClientRect: pre-fix the middle column had 646 / 626 px in the two modes; post-fix both are 626 px (pixel-perfect).
3. Banner appearance was an instant pop — no entry animation when the result banner mounted.
4. Two separate React components at separate JSX positions — even after batching and geometry fixes, React saw "unmount ScanBanner, mount ScanResultBanner": two distinct subtrees swap-replacing each other. The pinging amber dot's animate-ping cut mid-animation; the amber background flipped to warm-surface in one paint frame; the 2 px amber progress strip vanished mid-interpolation. Cumulatively read as "the banner just shook".

How

1. Batch the busy → idle flip

setDisplayBusy(false) is now deferred into the same async block as setScanResult so React 18 auto-batches them into one commit. A try / catch falls back to riskRef.current so a refresh failure doesn't strand the user in a permanent busy state.

2. Width-matched columns

Added a <span aria-hidden className=\"inline-block w-5 h-5\" /> placeholder in the scanning state. The grid auto 1fr auto now resolves to the same column widths in both modes.

3. Fade-in entry

Both banner modes get animate-in fade-in duration-200 so the banner enters gradually rather than snapping in.

4. Unified ScanStatusBanner

Replaced ScanBanner + ScanResultBanner with a single ScanStatusBanner driven by a discriminated state: { kind: 'scanning' } | { kind: 'complete' } union. Because the JSX position and component type are the same across the state swap, React reconciles the outer div in place — no remount. transition-colors duration-300 morphs the background + border from amber to warm-surface smoothly. The icon, text, and right column all swap their inner JSX without touching the parent box. The progress strip is rendered in BOTH states with transition-[width,opacity] duration-300; on completion it slides to 100 % and fades to 0 in the same beat, giving the natural "completed and dissipates" feel rather than blinking off mid-animation.

How it connects

• Follows the same surface as PR perf(security): batch scan-worker enqueue burst into one status publish #350 (scan-worker burst). perf(security): batch scan-worker enqueue burst into one status publish #350 fixed the front of the burst (eliminate per-session IPC events when clicking Rescan all); this PR fixes the back of the burst (smooth the burst → result-banner transition).
• The unified ScanStatusBanner keeps both legacy data-testid selectors (security-scan-banner, security-scan-result-banner) — they toggle based on the active state, so existing e2e specs (security-manual-rescan-ack, security-mute-refresh, security-empty-detector-settings) continue to select correctly.

Verification

• pnpm vitest run in packages/app — 338 passed (no test relied on the two banners coexisting).
• pnpm exec tsc --noEmit in packages/app — clean.
• Playwright getBoundingClientRect on the two banners' grid columns confirmed pixel-perfect alignment (16 / 626 / 20 in both modes).
• Manual on a live dev archive at each of the four iterations the user verified the perceived improvement and the final feel.

Notes / non-goals

• Behavior trade-off worth flagging: the old shape rendered both banners independently so a result banner could persist VISIBLY while a follow-up auto burst started ("ACK stays put while Spool rescans in the background"). The unified ternary prioritises scanning, so a follow-up auto burst temporarily replaces the ACK with the scanning state. scanResult is preserved in component state, so when that burst finishes the banner returns to its complete mode with the original counts intact — the ACK is paused, not lost. The morph between scanning ↔ complete is in-place CSS now, so the auto-burst interruption itself feels smooth.
• No core / IPC / worker code touched. Renderer-only change.