Mobile field HUD: non-competing point readout, transmission sheet, toolbar, and twilight rail

[Jesssullivan]

Linear: https://linear.app/tinyland/issue/TIN-1734/mobile-field-hud-layout-contract-for-non-competing-readout

Problem

The mobile field UI has several independently positioned surfaces competing for the lower viewport:

• PointReadout.svelte fixed readout near the lower right / lower center.
• TransmissionSheet.svelte mobile bottom sheet for atmospheric transmission.
• EphemerisGantt.svelte bottom twilight rail with current-time staff marker and phase labels.
• MapToolbar.svelte lower-right hardware/control buttons.
• Attribution and layer affordances near the same visual field.

Each piece is useful by itself, but the app lacks one mobile HUD arbitration contract. The user-facing symptom is a dashboard-like field tool where point data, atmospheric transmission, dusk/sun-up context, and phone hardware controls compete rather than compose.

Evidence from read-only inventory

• src/app.css defines --field-bottom-reserve and --map-toolbar-inset-rem, plus a stacking comment for the map overlays, but this is not yet a full layout owner.
• TransmissionSheet.svelte is a full-width mobile bottom sheet at bottom: 0, z-index: 12.
• PointReadout.svelte has its own mobile bottom offset and right inset, z-index: 11.
• EphemerisGantt.svelte has a static toolbar inset and fixed bottom rail, z-index: 6.
• MapToolbar.svelte is fixed lower-right; the comment says it publishes toolbar sizing, but the implementation currently relies on static CSS vars rather than measured layout state.
• docs/sprint-ui-polish.md described an earlier lower-right collision track. Parts landed, but the point-readout + transmission + twilight + toolbar combination needs a product-level mobile field HUD pass.

Live local browser capture was intentionally not performed here because this workstation lacks the Playwright browser binary and the repo posture is remote execution only. Regression evidence for this issue should come from CI / GloriousFlywheel browser proof, not local test/build/check execution.

Scope

• Define a single map-overlay layout owner, either CSS-token first or a small Svelte/Effect layout coordinator, for reserved regions: bottom rail, right toolbar, bottom sheet, point readout, attribution, and transient popovers.
• Coordinate point readout and atmospheric transmission instead of independently stacking by z-index. Candidate patterns: tabbed bottom sheet, stacked sheet states, or a compact collapsed summary with one expanded panel at a time.
• Keep the twilight rail visible and tappable in normal field mode. It may be intentionally covered only by an explicit expanded sheet state.
• Ensure lower-right hardware controls do not compete with bottom sheets or point data. Candidate patterns: measured toolbar inset, top/right relocation while sheets are open, or a compact overflow toolbar on phone widths.
• Preserve Skeleton popover behavior and keep help/provenance popovers inside the visible viewport on touch devices.
• Integrate with the Effect/runes lifecycle direction so measured resize/orientation/safe-area/device-state cleanup is scoped and regression-safe.

Acceptance

• At 375x667, 390x844, 430x932, and 844x390, the point readout, transmission sheet, lower-right controls, twilight rail, and attribution do not visually collide in default and active states.
• Touch targets remain at least 44px where practical; no control is hidden behind another overlay.
• The user can open point readout, open/close transmission, operate compass/location controls, and tap/scrub the twilight rail without losing map context.
• Expanded sheet states deliberately reserve or cover space; collapsed states leave the twilight rail and core controls available.
• Regression evidence is produced through remote CI / GloriousFlywheel browser evidence.
• Atmospheric modeling tickets remain separate: this issue owns layout arbitration, not PM2.5 model correctness or GIBS no-data semantics.

Related

• Real-device twilight rail phase popover and redraw QA on mobile #272 twilight rail real-device popover/redraw QA.
• Expose compass heading on phone layouts and add mobile orientation coverage #260 mobile compass/GPS affordance.
• Adopt scoped Effect lifecycle helpers for map, GPS, compass, and timers #251 scoped Effect lifecycle helpers.
• PM2.5 modeled provenance popovers across readout, layer rail, and transmission sheet #305 modeled provenance popovers.
• PR-H: Transmission widget — (i) chevron on atmospheric rows → bottom sheet with T(λ) chart #158 transmission widget bottom sheet.
• Add frequency-specific atmospheric analysis requests for laser/RTX planning #250 frequency-specific atmospheric analysis.
• Sample active atmospheric overlays into transmission inputs at the selected point #253 active overlays into transmission inputs.
• Define atmospheric observation provenance and no-data semantics before transmission auto-fill #271 atmospheric provenance/no-data semantics.
• Effect PM2.5 field service: cached OpenAQ viewport sensors plus point kernel sample #304 PM2.5 field service.
• Transmission AOD source modes: manual versus OpenAQ-derived PM2.5 estimate #306 transmission AOD source modes.
• V2: explicit PM2.5 kernel-diffusion field feeding the transmission estimator #275 V2 PM2.5 kernel-diffusion field.
• Closed context: Mobile twilight rail: dusk, sun-up, current-time staff marker, and touch scrubber #121, Mobile regression suite for overlay collisions and device IO fallbacks #123, Mobile point readout bottom sheet for field taps #125, Fix mobile Gantt and attribution overlap #265, Clear mobile field overlays above twilight strip #267, fix(ui): keep layer help popovers mobile-safe #301.

[Jesssullivan]

Implementation PR opened: #315

This first pass keeps the patch page-level to avoid conflicts with the existing spectral/transmission worktree: it adds a field-hud state wrapper, mobile slot variables, transmission/readout/toolbar arbitration, and hides the low-priority credits link while high-priority mobile panels are active. Local validation was intentionally not run under the remote-execution-only posture; CI/remote browser evidence should be the proof.

[Jesssullivan]

PR #315 remote CI is green now:

• build-and-test: pass
• bazel-graph: pass
• secrets-scan: pass
• container image: pass
• lane-env: skipped as expected

Current residual gap: this repo has Playwright e2e specs, including mobile/overflow coverage, but the PR CI workflow currently runs just check + just build, not just test-e2e. No remote screenshot/browser proof was produced for this PR yet.

[Jesssullivan]

Related implementation PR opened: #318

Sequencing note: #318 changes the transmission entry point from LayerRail to selected PointReadout. #315 owns the mobile HUD arbitration layer. These should be reviewed together before landing so the point-readout CTA, transmission sheet, lower-right toolbar, and twilight rail do not regress into competing overlays again.

Remote-only validation posture remains: no local tests/builds/checks were run.

[Jesssullivan]

Fresh GF browser proof evidence for this layout ticket:

While building the point-readout browser-RBE smoke, run https://github.com/tinyland-inc/GloriousFlywheel/actions/runs/26705594247 reached real remote Chromium/RBE and failed because the point readout data was present but not visible at mobile viewport size:

• target: //:playwright_point_readout_smoke
• remote executor: grpc://gf-reapi-cell.gf-rbe.svc.cluster.local:8980
• failure: getByRole('dialog', { name: /point readout/i }).getByText(/VIIRS pixel/i) timed out waiting for visibility
• Playwright diagnostic: locator resolved repeatedly to hidden <h4>VIIRS pixel</h4>
• remote evidence: 1806 processes: 1 action cache hit, 740 remote cache hit, 1060 internal, 6 remote

PR #332 kept the enrolled smoke focused on the data-path contract by waiting for attached readout payload fields, and it merged green. The visual/mobile-HUD arbitration remains here: point readout content can be DOM-present but not visibility-safe on phone-sized field layouts. No local browser/check/test/build was used.

[Jesssullivan]

Implementation proof update from PR #315:

• Current PR head: bc5a34de0ce6f1e2b772e6c13a97223b13201bfc
• GitHub CI is green for build-and-test, bazel-graph, container, and secrets-scan.
• Mobile HUD regression coverage is now a first-class GF browser-RBE target: //:playwright_mobile_hud_smoke.
• GF proof run: https://github.com/tinyland-inc/GloriousFlywheel/actions/runs/26707021436
  • remote execution summary: 1806 processes: 741 remote cache hit, 1060 internal, 5 remote
  • smoke target passed: //:playwright_mobile_hud_smoke PASSED in 3.6s
  • proof artifact verified with digest bee90e038a1a59d338d1d150c7e4dc418bafdde0597b6e5bec55549c0499fe7b

This was validated through remote GitHub/GF execution only; no local test/build/check/browser execution was used.

[Jesssullivan]

PR #315 landed the first implementation slice for this layout contract:

• Merged at 70cecdad73b266a3334332c820969f3945a20342.
• Current main head c25bd8c3340abe66143445a469b3ce96f3dc821a is green for CI, Container, Public smoke, and Staging deploy.
• //:playwright_mobile_hud_smoke is now proved through GF browser-RBE for the 390x844 mobile readout/transmission/toolbar/twilight arbitration path.

Leaving this issue open because the acceptance matrix is broader than the first smoke target: 375x667, 430x932, and landscape 844x390 still need explicit remote browser evidence.

[Jesssullivan]

PR #337 completes the explicit mobile HUD viewport matrix proof for this tracker:

• 375x667, 390x844, 430x932, 844x390
• target: //:playwright_mobile_hud_matrix_smoke
• GF proof: https://github.com/tinyland-inc/GloriousFlywheel/actions/runs/26708074397
• result: //:playwright_mobile_hud_matrix_smoke PASSED in 9.6s
• proof artifact digest: bf6d669e72c2cf9854484744f6ab042c8c22c64b3439254df1a1dbbc2cade1bf

The remote proof exposed and drove fixes for a 375x667 transmission-toolbar collision and the 844x390 short-landscape breakpoint. PR CI is also green. No local tests/builds/checks/browser execution was used.

[Jesssullivan]

Landed via #337 (dbe744d4542a8c3e28fae759388e4955539d78cc).

This adds the remote-only Bazel/Playwright mobile HUD matrix smoke target for the competing HUD surfaces across 375x667, 390x844, 430x932, and 844x390, plus the mobile/short-landscape layout fixes found by GF proof iterations.

Exact-head GF proof for PR head b746b7208ed8c4007359552e11c96c5a43151e02: https://github.com/tinyland-inc/GloriousFlywheel/actions/runs/26708202786

Evidence: countable_remote_execution=true, remote_processes=6, //:playwright_mobile_hud_matrix_smoke PASSED in 9.6s, artifact digest 82f5c0bab102400cf7d57deba0bd1cf8f84b83d9526e4d978c2f290d2cfb60ce.

No local tests, builds, checks, browser runs, or branch switches were used.