[tech-debt] ConnectionQualityIndicator polish (Wave 2a E1 follow-up)

Follow-ups from Wave 2a Cluster E1 (#219 connection-quality indicator). Code-quality review flagged 2 substantive minors.

Tasks

• Add AbortController for in-flight fetch on visibility/unmount transitions — app/src/components/ConnectionQualityIndicator.tsx:38-52. When the tab transitions visible → hidden while a ping's await fetch(ENDPOINT) is mid-flight, stopInterval() cancels future intervals but the live request continues. When it resolves, cancelled is still false (only set on unmount), so 3 setState calls fire while the tab is hidden — wasted work and an extra state churn on the next visible event. Fix: thread an AbortController into fetch, call controller.abort() from stopInterval() AND the cleanup function; treat AbortError as silent in catch.

• Align a11y semantics with sibling indicators — app/src/components/ConnectionQualityIndicator.tsx:88-93 uses role="img" + aria-label, but sibling AgentDot components in the same header icon group have no a11y semantics (silent dots). Screen readers will announce 1 dynamic indicator + 3 silent dots — inconsistent reading. Options: (a) lift AgentDot to role="img" with aria-label, OR (b) add aria-live="polite" to the indicator for state transitions so SR users hear "Backend reachable (45ms)" → "Unreachable" announcements.

• Add flicker test for rapid visible → hidden → visible transitions — ConnectionQualityIndicator.test.tsx. Current tests cover visible-only, hidden-on-mount, unmount cleanup, but not the flicker case where handleVisibility fires multiple times in quick succession while a ping is still pending. Behavior is correct by inspection (idempotent startInterval/stopInterval) but a test would lock the contract.

Source

Wave 2a Cluster E1 code-quality review (6 minors total — top 3 bundled here, others skipped as polish-only).

Priority

Low — indicator works correctly today; these are robustness polish.

Start with app/src/components/ConnectionQualityIndicator.tsx:38-52 and the existing visibility and cleanup logic, then read ConnectionQualityIndicator.test.tsx. Trace the in-flight fetch behavior during visible/hidden transitions and review the sibling AgentDot semantics at lines 88-93. Done means aborted requests are silent, the indicator semantics are aligned with the chosen accessibility approach, and rapid visibility flicker has a regression test.