feat(ui): bridge-console rehaul (Refs #100)

[ScottyVenable]

UI rehaul: bridge-console identity (Refs #100)

Director: this is a draft PR. The big visual decisions (typography
pairing, amber-as-primary, left-rail tab position) are flagged below as
open questions before promotion to a normal review PR.

Scope

The mandate from #100 was a quality pass on visual identity, layout
density, and PC-vs-mobile differentiation. Four headline priorities,
plus two bundled improvements I committed to up front.

#	Priority	Status
1	Visual identity (typography, colour, surface treatment)	done
2	Desktop bridge layout distinct from mobile	done
3	Mobile portrait one-handed UX preserved and improved	done
4	UX polish (focus states, tap targets, density)	done
a	Settings modal (font scale / density / motion)	done
c	Breadcrumb / contextual help line on every screen	done

Design rationale

Typography pairing. Chakra Petch (display) + Space Grotesk (body) +
JetBrains Mono (numerics). Chakra Petch reads as authentic sci-fi
without Orbitron's all-caps stiffness ΓÇö letters keep proportional
spacing so headings don't shout. Space Grotesk gives body copy more
character than Inter while staying highly legible at small sizes.
JetBrains Mono is the workhorse for all credit / hull / fuel / day
numerics. All three are self-hosted via @fontsource so there is no
runtime CDN call.

Amber as the primary action. Bright amber (#f5b942) is reserved for
"the next thing the captain should do" ΓÇö Launch Campaign, active tab on
desktop, panel corner brackets. Soft neon green is the "nominal /
active" channel. Red is exclusively for danger / illegal / hull damage.
This is opinionated; flag in Open questions if you want primary to
stay green.

Distinct desktop layout. At >= 960px the same React tree reshapes
into:

• A full HUD strip across the top (brand, stardate, callsign, hull /
  fuel / cargo bars, credits, net worth, log + settings buttons).
• A vertical console-button rail on the left with iconography and Fn
  hotkey hints.
• The active screen rendered inside a "viewport frame" ╬ô├ç├╢ thin border
  with corner brackets, faint scanline overlay, fades in on
  navigation.
• A right rail with callsign, hold contents, and a live news ticker.

Mobile preserved. At < 960px the same components collapse back to
the existing portrait stack. The bottom tab bar gains the new icon set
and active-state glow. Every screen still has a 44px minimum tap
target. The breadcrumb adds context without taking real estate.

Motion budget. Two animations only ΓÇö a 220ms fade-in on screen
change and a 360ms HUD flicker on first paint. Both gated behind
prefers-reduced-motion: no-preference and overridable via the new
Settings modal.

Bundled improvements

1. Settings modal (gear icon, top-right on desktop / inline on
   mobile). Three controls today:
   • Font scale (Small 90% / Standard / Large 110% / XL 125%)
   • Density (Comfortable / Compact)
   • Motion (System / Reduce / Full)
     Persisted to localStorage under stellar-reach-settings-v1,
     independent of the game save.
2. Breadcrumb / contextual help rendered at the top of every
   screen viewport. Format: SECTION / one-line context … FN0X.

Screenshots

After (1280)

Title	Market	Helm

Ship	Crew (375)	News

Market (375)	Missions (960)

Before / after

Title ΓÇö before	Title ΓÇö after

Market 1280 ΓÇö before	Market 1280 ΓÇö after

Market 375 ΓÇö before	Market 375 ΓÇö after

Helm ΓÇö before	Helm ΓÇö after

Full set (24 baseline + 24 after at 375 / 960 / 1280) is captured by
scripts/ui-screenshots.mjs into screenshots/baseline-ui-rehaul/
and screenshots/pr-feat-sol-ui-rehaul/. Both are gitignored; only
the curated *-attachments/ subset is committed.

Open questions for review

1. Typography pairing. Comfortable with Chakra Petch + Space
   Grotesk? Alternatives I considered: Orbitron (rejected ΓÇö stiffness),
   Rajdhani (rejected ΓÇö too narrow at small sizes), Inter (acceptable
   but generic).
2. Amber-as-primary vs green-as-primary. Currently amber draws the
   eye toward primary actions; green is reserved for nominal/active.
   Easy to swap if you want green-as-primary back.
3. Tab-rail position on desktop. Currently left. Right would make
   it land under the hand on a typical mouse setup. Either is one CSS
   grid-template-areas change.

Validation

• npm run typecheck ╬ô├ç├╢ clean
• npm run lint ╬ô├ç├╢ clean (--max-warnings 0)
• npm run build ╬ô├ç├╢ 234 KB JS / 66 KB CSS, gzip 76 / 28
• All existing class names in global.css preserved; legacy screens
  render unchanged
• 44px tap-target minimum verified on mobile
• Screen-fade and HUD-flicker animations gated behind reduced-motion
  preference

Save format

No save format change. UI settings live in a separate localStorage key
(stellar-reach-settings-v1) so existing saves continue to load.

ΓÇö Sol

---

Pass 2 ΓÇö AAA polish iteration

Verdict on pass 1: Assess the screenshots and improve more in depth - AAA style UI. Acknowledged. Iteration on the same branch and the same draft PR.

What changed visually

• Layered surfaces. Panels and HUD cells now have inset bezel highlights, outer drop shadows, gradient washes, and clip-path bevel cuts at the top-right and bottom-left corners. Cards read as physical bridge consoles, not website cards.
• Segmented status readouts. Vessel hull / fuel / cargo are 12-segment meters with per-tone glow (green / amber / red / cyan), driven by the new StatusBar.tsx and used in both the desktop HUD strip and the mobile pull-up sheet.
• Tab-rail active-state language. Active tabs get an amber bracket on the inside edge, a brighter gradient wash, and an animated scanline sweep (gated behind prefers-reduced-motion). Mobile tabs gain a top amber border and icon glow.
• Real button press feedback. :active swaps to inset-shadow + reversed gradient for a 60ms snap.
• Currency presentation. Credits now use the generic-currency glyph (U+00A4) with three-digit-grouped tabular numerals, eight-digit padded; mobile uses a compact K/M variant.
• Mobile pull-up status sheet. MobileSheet.tsx restores the HUD content the cramped mobile topbar can no longer fit (callsign / vessel readouts / hold / wire). Handle docked above the bottom tab bar; ESC dismisses.
• Title screen rebuilt. Deterministic 110-star CSS starfield (Starfield.tsx, seeded via createRng('STELLAR-REACH-TITLE') ΓÇö no Math.random), perspective horizon grid, vignette, animated wordmark with tracked-out letter spacing, four-action stack (New Voyage, Patch Notes, Settings, Quit if Electron) clipped into arrows, and a footer with channel-coloured version chip + SYSTEMS NOMINAL indicator.
• Audio hook stub. useSfx() returns a stable no-op callback today; ready for a real audio layer to drop in without touching component code.

What changed under the hood

• Pass-1 desktop screenshots all rendered the Market screen because the script matched tabs by textContent === 'Market', but tab buttons render the label plus an Fn hint span ("MarketF1"). Tabs now expose data-screen and the screenshot script queries that. Pass-2 screenshots correctly show each screen.
• Screenshot capture extended to four viewports: 375, 960, 1280, 1920.
• All new keyframes gated behind prefers-reduced-motion: no-preference and the [data-motion='reduce'] Settings override.

Pass 2 screenshots

Title (1280)

Market ΓÇö desktop (1280)

Helm ΓÇö desktop (1280)

Ship ΓÇö desktop (1280)

Crew ΓÇö desktop (1280)

News ΓÇö desktop (1280)

Title (1920) ΓÇö to confirm scale-up does not collapse

Market ΓÇö mobile (375)

Title ΓÇö mobile (375)

Decisions made unilaterally ΓÇö flag for human override

• No icon library added. Reused the existing inline SVG Icon.tsx rather than pulling in lucide-react or phosphor-react. Reasoning: bundle size and visual consistency with the existing tab icons. The brief allowed "your choice." Easy to swap in a follow-up if you want denser iconography.
• Currency glyph is U+00A4 (generic currency mark), not cr text or ¢. Sci-fi worlds rarely use cents.
• Quit button is Electron-only (UA sniff). Web/PWA users see no Quit button on the title screen.
• Mobile sheet uses tap-to-toggle, not swipe gestures. Pointer-events handling is left for a follow-up if you want true drag dismiss.
• Starfield is render-once on mount, deterministic, no parallax. Cheap, fits the calm-density pillar.
• Patch Notes added as a second top-level title action (not just the version-chip click target it was in pass 1).

Status

• Branch: feat/sol-ui-rehaul. PR target: development. Still draft.
• npm run typecheck / npm run lint / npm run build all green locally.
• No emojis introduced. No Math.random introduced. Save format unchanged. No internal-doc verbatim text.

ΓÇö Sol

---

Pass 3 — Helm and trade-flow UX

Summary

• Helm now uses a desktop 3:1 center layout: map on the left, destinations on the right, matching heights, internal destination scrolling, and no buried inspection card below the list.
• Destination selection now opens an overlay plot panel with route profile, fuel, distance, cargo context, trade opportunities, Esc close, close button, and click-outside dismissal.
• Mobile Helm keeps the handheld datapad stack, but destination details open as a bottom sheet over the map instead of sitting under the list.
• HUD credits and vessel meters have more vertical room and line-height so credits, hull, fuel, and cargo readouts no longer clip at 1280x720.
• Market rows keep the number input and add -, +, and Max quantity controls. Holding - or + repeats after a short delay and accelerates while held; timers clean up on release, pointer cancel, pointer leave, blur, and unmount.
• Market and Helm now show compact station / cargo / fuel context so trading and route planning require less screen-hopping.

Screenshots

Helm desktop layout (1280x720)	Helm destination modal (1280x720)

Helm mobile destination sheet (375x812)	Market desktop quantity controls (1280x720)

HUD desktop unclipped (1280x720)	Market mobile quantity controls (375x812)

Follow-up backlog

• Expanded tooltip system tracked in Expanded tooltips: nested keyword inspection system #103: Expanded tooltips: nested keyword inspection system #103
• Larger Helm map interaction ideas remain out of this PR: click-drag panning, route particles, animated routes, and destination hover previews.

Validation

• npm run typecheck - clean
• npm run lint - clean (--max-warnings 0; existing TypeScript parser support warning only)
• npm run build - clean
• Visual checks captured at 1280x720 and 375x812 into screenshots/pr-feat-sol-ui-rehaul-pass3/ and committed curated attachments under screenshots/pr-feat-sol-ui-rehaul-attachments/pass3/.

— Sol

[Copilot]

Pull request overview

Draft UI overhaul aligning the app with the “bridge console” identity from #100: new desktop HUD/rails, refreshed title screen, new settings persistence, and several UX affordances (breadcrumb + mobile status sheet + market steppers).

Changes:

• Introduces bridge-console layout components (HudStrip, RightRail refresh, TabBar icon rail, Breadcrumb, MobileSheet) and title-screen rebuild (Starfield + new actions).
• Adds UI-only settings persisted separately from saves (stellar-reach-settings-v1) and applied via <html> dataset/CSS variables.
• Improves trade-flow UX (market quantity stepper w/ hold-to-repeat; helm destination details modal).

Reviewed changes

Copilot reviewed 22 out of 54 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/ui/screens/TitleScreen.tsx	Rebuilt title screen (Starfield, actions, settings + changelog modals, Electron-only Quit).
src/ui/screens/MarketScreen.tsx	Adds hold-to-repeat quantity controls and a compact trade status summary.
src/ui/screens/HelmScreen.tsx	Refactors helm layout and adds destination detail modal with route options + close handling.
src/ui/hooks/useSfx.ts	Adds stable no-op SFX hook stub for future audio pass.
src/ui/components/TopBar.tsx	Mobile topbar redesign; integrates HudStrip on desktop; adds compact credit formatting.
src/ui/components/TabBar.tsx	Console-button styling, icons, F-key hints, data-screen attribute, and SFX on tab change.
src/ui/components/StatusBar.tsx	Adds segmented status readout component for hull/fuel/cargo.
src/ui/components/Starfield.tsx	Adds deterministic, seeded title starfield (no Math.random).
src/ui/components/SettingsModal.tsx	Adds settings modal UI (font scale, density, motion) wired to store.
src/ui/components/RightRail.tsx	Refactors desktop right rail to callsign/hold/news panels.
src/ui/components/PanelHeader.tsx	Extends status variants and adds status dot/text rendering.
src/ui/components/MobileSheet.tsx	Adds mobile pull-up status sheet for callsign/vitals/hold/news.
src/ui/components/Icon.tsx	Adds inline SVG icon set for tabs and HUD actions.
src/ui/components/HudStrip.tsx	Adds desktop HUD strip with credits/net worth and segmented vessel meters.
src/ui/components/Breadcrumb.tsx	Adds breadcrumb/context strip for all screens.
src/ui/App.tsx	Integrates new layout pieces, breadcrumb framing, mobile sheet, and settings application to <html>.
src/state/store.ts	Adds persisted UI settings + setters alongside existing game store.
src/main.tsx	Imports self-hosted fonts via @fontsource/*.
src/data/changelog.generated.json	Regenerates in-game changelog data to reflect UI overhaul entries.
scripts/ui-screenshots.mjs	Adds Playwright capture script updated to use data-screen tab targeting.
screenshots/pr-feat-sol-ui-rehaul-attachments/before-title-1280.png	Adds PR attachment screenshot artifact.
package.json	Adds @fontsource dependencies for the new typography pairing.
package-lock.json	Locks new @fontsource dependencies.
CHANGELOG.md	Adds Unreleased entries describing the UI overhaul + settings modal + pass 2/3 improvements.
.gitignore	Adjusts screenshot ignore rules to allow committed PR attachment subfolders.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 8293c1447d

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[ScottyVenable]

@copilot apply changes based on the comments in this thread

[Copilot]

@copilot apply changes based on the comments in this thread

All five issues from the review thread addressed in 41e503b:

• TopBar formatCreditsCompact — replaced toFixed(0) with Math.floor(v / 1000) so 999,999 always renders "999K", never "1000K".
• App.tsx dead branch — removed the unreachable SettingsModal from the !game branch; TitleScreen already owns and renders its own settings modal.
• MobileSheet aria-modal — added aria-modal="true" to the role="dialog" backdrop.
• SettingsModal radio ARIA — replaced role="radiogroup" / role="radio" / aria-checked with role="group" / aria-pressed buttons so screen readers get correct toggle semantics without misleading radio-key expectations.
• CHANGELOG spelling — "rehaul" → "overhaul" in all three entries; changelog.generated.json regenerated to match.