+
+ {footer}
+
+ );
+}
+
+export function OnboardingFlow({
+ onFinished,
+ initialStep = 'welcome',
+}: {
+ onFinished: () => void;
+ initialStep?: OnboardingStep;
+}) {
+ const [step, setStep] = useState
+
+ );
+}
diff --git a/ui/src/components/onboarding/index.ts b/ui/src/components/onboarding/index.ts
new file mode 100644
index 00000000..9c30b5fa
--- /dev/null
+++ b/ui/src/components/onboarding/index.ts
@@ -0,0 +1 @@
+export { OnboardingFlow, type OnboardingStep } from './OnboardingFlow';
diff --git a/ui/src/components/panel/LivePanel.test.tsx b/ui/src/components/panel/LivePanel.test.tsx
index 56f099ae..3254bc2d 100644
--- a/ui/src/components/panel/LivePanel.test.tsx
+++ b/ui/src/components/panel/LivePanel.test.tsx
@@ -3,6 +3,7 @@ import { fileURLToPath } from 'node:url';
import { renderToString } from 'react-dom/server';
import { describe, expect, it } from 'vitest';
import type { Shot } from '../../types/shot';
+import { useLiveViewStore } from '../../stores/useLiveViewStore';
import { LivePanel } from './LivePanel';
/** React SSR splits interpolated text with comment markers; drop them. */
@@ -42,8 +43,10 @@ function render(
shot: Shot | null,
shots: Shot[] = shot ? [shot] : [],
selectedMetricId: string | null = null,
- isNewShot = false
+ isNewShot = false,
+ mode: 'tiles' | 'timed' | 'sticky' = 'tiles'
) {
+ useLiveViewStore.setState({ mode, durationMs: 10000 });
return text(
renderToString(
+ {step === 'welcome' ? (
+
+
+ {step !== 'welcome' ? (
+
+
+
+ ) : null}
+
+ {step === 'language' ? (
+ <>
+ 
+ + {t('onboarding.welcomeTitle')} +
+ ++ {t('onboarding.languageTitle')} +
+
+ {LOCALES.map((option) => (
+ setLocale(option.id)}
+ />
+ ))}
+
+ {t('onboarding.unitsTitle')}
+
+ setUnitSystem('imperial')} />
+ setUnitSystem('metric')} />
+
+
+ ) : null}
+
+ {step === 'theme' ? (
+ <>
+ + {t('onboarding.themeTitle')} +
+
+
+
+ ) : null}
+
+ {step === 'live' ? (
+ <>
+ + {t('onboarding.liveViewTitle')} +
+
+ {LIVE_MODES.map((option) => (
+
+
+ ) : null}
+
+ {step === 'done' ? (
+
+ {LIVE_VIEW_DURATIONS_MS.map((ms) => (
+
+ ))}
+
+ ) : null
+ }
+ />
+ ))}
+
+
+ ) : null}
+ + {t('onboarding.doneTitle')} +
+{t('onboarding.doneDetail')}
+
+
+
+ ) : null}
+
+ {STEPS.map((id, index) => (
+
+ ))}
+
+ {step === 'done' ? (
+
+ ) : (
+
+ )}
+
{ballWarning}
{isPlayersNewShot ? : null}
+ {spotlightOpen && selected ? (
+
+ ) : null}
Change club} />);
+ const actions = html.match(/panel-header__actions[\s\S]*<\/div>/)?.[0];
+
+ expect(html).toContain('panel-header__power');
+ expect(html).toContain('aria-label="Shut down"');
+ expect(actions).toBeDefined();
+ expect(actions).toContain('Change club');
+ expect(actions).toContain('panel-header__divider');
+ expect(actions!.indexOf('Change club')).toBeLessThan(actions!.indexOf('panel-header__divider'));
+ expect(actions!.indexOf('panel-header__divider')).toBeLessThan(actions!.indexOf('panel-header__power'));
+ });
+
+ it('keeps shutdown on the right without a divider when there are no other actions', () => {
+ const html = renderToString(;
/**
* Force the status menu open or closed. Omit to toggle from the LED + title
* tap (the path the kiosk uses).
@@ -47,9 +50,11 @@ function IdentityPart({ children, className }: { children: ReactNode; className:
}
/**
- * Page chrome: title plus a connection LED. Tapping the LED and title opens a
- * status menu (server, radar, ball detection). Five taps still toggle Launch
- * Daddy, which used to live on this LED alone.
+ * Page chrome: title plus a connection LED on the left, and shutdown on the
+ * right. Tapping the LED and title opens a status menu (server, radar, ball
+ * detection, simulators). Five taps still toggle Launch Daddy, which used to live on this
+ * LED alone. Header actions sit to the left of shutdown, separated by a
+ * hairline divider.
*/
export function PanelHeader({
title,
@@ -59,18 +64,21 @@ export function PanelHeader({
connected: connectedProp,
radarConnected: radarConnectedProp,
cameraStatus: cameraStatusProp,
+ simStatuses: simStatusesProp,
statusMenuOpen: statusMenuOpenProp,
}: PanelHeaderProps) {
const { t } = useI18n();
const storeConnected = useSystemStore((state) => state.connected);
const storeRadarConnected = useDebugStore((state) => state.triggerStatus.radar_connected);
const storeCameraStatus = useCameraStore((state) => state.cameraStatus);
+ const storeSimStatuses = useSystemStore((state) => state.simStatuses);
const handleSecretTap = useLaunchDaddyStore((state) => state.handleSecretTap);
const [internalOpen, setInternalOpen] = useState(false);
const connected = connectedProp ?? storeConnected;
const radarConnected = radarConnectedProp ?? storeRadarConnected;
const cameraStatus = cameraStatusProp ?? storeCameraStatus;
+ const simStatuses = simStatusesProp ?? storeSimStatuses;
const menuOpen = statusMenuOpenProp ?? internalOpen;
const status = connected ? 'connected' : 'disconnected';
const statusLabel = connected ? t('header.serverConnected') : t('header.serverDisconnected');
@@ -99,12 +107,32 @@ export function PanelHeader({
{subtitle ? {subtitle} : null}
{club ? {club} : null}
- {actions ?
{metrics.map((metric) => (
{}} onShutdown={() => {}} />);
+ return renderToString( {}} />);
}
describe('MenuSheet players', () => {
@@ -54,3 +57,50 @@ describe('MenuSheet battery', () => {
useSystemStore.setState({ powerStatus: null });
});
});
+
+describe('MenuSheet live view', () => {
+ it('offers live view modes and hides duration unless timed', () => {
+ useLiveViewStore.setState({ mode: 'tiles', durationMs: 10000 });
+ const html = renderMenu();
+
+ expect(html).toContain('menu-sheet__section-title">Live view');
+ expect(html).toContain('>Tiles<');
+ expect(html).toContain('>Timed<');
+ expect(html).toContain('>Hold<');
+ expect(html).not.toContain('>5s<');
+ });
+
+ it('does not show system, ball detection, or simulators', () => {
+ const html = renderMenu();
+
+ expect(html).not.toContain('menu-sheet__section-title">System');
+ expect(html).not.toContain('Ball detection');
+ expect(html).not.toContain('Simulators');
+ });
+
+ it('shows duration chips when timed is selected', () => {
+ useLiveViewStore.setState({ mode: 'timed', durationMs: 10000 });
+ const html = renderMenu();
+
+ expect(html).toContain('>5s<');
+ expect(html).toContain('>10s<');
+ expect(html).toContain('>15s<');
+ });
+
+ it('owns vertical drag scrolling so Timed duration chips can be reached', () => {
+ const src = readFileSync(fileURLToPath(new URL('./MenuSheet.tsx', import.meta.url)), 'utf8');
+ const css = readFileSync(fileURLToPath(new URL('./panel.css', import.meta.url)), 'utf8');
+
+ expect(src).toContain('useDragScroll');
+ expect(css).toMatch(/\.menu-sheet \{[^}]*touch-action:\s*none/);
+ expect(css).toMatch(/\.menu-sheet \.segmented-control__button \{[^}]*touch-action:\s*none/);
+ });
+});
+
+describe('MenuSheet shutdown', () => {
+ it('does not offer shut down in the sheet', () => {
+ const html = renderMenu();
+ expect(html).not.toContain('menu-sheet__shutdown');
+ expect(html).not.toContain('Shut down');
+ });
+});
diff --git a/ui/src/components/panel/MenuSheet.tsx b/ui/src/components/panel/MenuSheet.tsx
index 787d0b20..9f3bc178 100644
--- a/ui/src/components/panel/MenuSheet.tsx
+++ b/ui/src/components/panel/MenuSheet.tsx
@@ -1,42 +1,51 @@
+import { useRef } from 'react';
import { LOCALES, type LocaleId } from '../../i18n';
import { useI18n } from '../../i18n/useI18n';
-import { useSystemStore } from '../../stores/useSystemStore';
-import { useCameraStore } from '../../stores/useCameraStore';
+import { useDragScroll } from '../../hooks/useDragScroll';
import { useThemeStore } from '../../stores/useThemeStore';
import { useLocaleStore } from '../../stores/useLocaleStore';
+import { isLiveViewDurationMs, useLiveViewStore } from '../../stores/useLiveViewStore';
import { useUnitPreference } from '../../state/useUnitPreference';
-import { socketService } from '../../services/socketService';
-import { ballDetectionStatusLabel } from '../../utils/ballDetectionStatus';
import { SegmentedControl } from '../ui/SegmentedControl';
-import { SimStatus } from '../SimStatus';
interface MenuSheetProps {
onClose: () => void;
- onShutdown: () => void;
}
/**
* The sheet behind the footer logo button (design doc 6a `menuOpen6`).
*
- * 6a draws Units / Shut down. Players live on their own panel. The System
- * block is an addition: the mockup replaced the old top header, and simulator
- * and ball-detection state had nowhere else to go. Battery lives in the footer.
- * Socket connection lives on the panel header LED.
+ * 6a draws Units / Shut down. Players live on their own panel. Battery lives
+ * in the footer. Socket connection lives on the panel header LED. Shutdown is
+ * the header power button. Ball detection and simulators stay in the header
+ * status menu.
*/
-export function MenuSheet({ onClose, onShutdown }: MenuSheetProps) {
- const simStatuses = useSystemStore((state) => state.simStatuses);
- const cameraStatus = useCameraStore((state) => state.cameraStatus);
+export function MenuSheet({ onClose }: MenuSheetProps) {
const { t } = useI18n();
const { unitSystem, setUnitSystem } = useUnitPreference();
const { theme, setTheme } = useThemeStore();
const { locale, setLocale } = useLocaleStore();
-
- const ballDetectionValue = ballDetectionStatusLabel(cameraStatus);
+ useLiveViewStore((state) => state.mode);
+ useLiveViewStore((state) => state.durationMs);
+ const { mode, durationMs, setMode, setDurationMs } = useLiveViewStore.getState();
+ const sheetRef = useRef(null);
+ const dragScroll = useDragScroll(sheetRef);
return (
<>
-
);
}
diff --git a/ui/src/components/panel/PanelHeader.test.tsx b/ui/src/components/panel/PanelHeader.test.tsx
index 8eb50a58..d2114126 100644
--- a/ui/src/components/panel/PanelHeader.test.tsx
+++ b/ui/src/components/panel/PanelHeader.test.tsx
@@ -1,3 +1,5 @@
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
import { describe, expect, it } from 'vitest';
import { renderToString } from 'react-dom/server';
import { PanelHeader } from './PanelHeader';
@@ -60,6 +62,23 @@ describe('PanelHeader', () => {
expect(html).toContain('>Ball detection<');
expect(html).toContain('>Connected<');
expect(html).toContain('>Ball 91%<');
+ expect(html).not.toContain('GSPro');
+ });
+
+ it('shows simulator statuses in the open status menu', () => {
+ const html = renderToString(
+
+
{t('menu.units')}
- {t('menu.system')}
- {
+ const next = Number(id);
+ if (isLiveViewDurationMs(next)) {
+ setDurationMs(next);
+ }
+ }}
+ />
) : null}
-
-
);
diff --git a/ui/src/components/panel/PanelFooter.test.tsx b/ui/src/components/panel/PanelFooter.test.tsx
index 4db73231..824c13de 100644
--- a/ui/src/components/panel/PanelFooter.test.tsx
+++ b/ui/src/components/panel/PanelFooter.test.tsx
@@ -20,7 +20,6 @@ function render(
ballDetected={false}
debugRecording={false}
powerStatus={powerStatus}
- onShutdown={() => {}}
/>
).replace(//g, '');
}
@@ -58,14 +57,14 @@ describe('PanelFooter', () => {
}
});
- it('hides units and battery on Players, Camera, and Debug while keeping shutdown visible', () => {
+ it('hides units, battery, and shutdown on Players, Camera, and Debug', () => {
for (const view of ['players', 'camera', 'debug'] as const) {
const html = render(view, 4, null);
- expect(html).toContain('panel-footer__meta');
+ expect(html).not.toContain('panel-footer__meta');
expect(html).not.toContain('mph / yds');
expect(html).not.toContain('power-status');
- expect(html).toContain('panel-footer__power');
+ expect(html).not.toContain('panel-footer__power');
}
});
@@ -96,12 +95,12 @@ describe('PanelFooter', () => {
expect(html).toContain('41%');
});
- it('keeps the shutdown power control visible on every panel without battery telemetry', () => {
+ it('does not keep shutdown in the footer on any panel', () => {
for (const view of ['live', 'stats', 'shots', 'camera', 'players', 'debug'] as const) {
const html = render(view, 0, null);
- expect(html).toContain('panel-footer__power');
- expect(html).toContain('aria-label="Shut down"');
+ expect(html).not.toContain('panel-footer__power');
+ expect(html).not.toContain('aria-label="Shut down"');
}
});
diff --git a/ui/src/components/panel/PanelFooter.tsx b/ui/src/components/panel/PanelFooter.tsx
index 91b90ad5..ba0dbcc5 100644
--- a/ui/src/components/panel/PanelFooter.tsx
+++ b/ui/src/components/panel/PanelFooter.tsx
@@ -15,7 +15,6 @@ interface PanelFooterProps {
currentView: PanelView;
onChangeView: (view: PanelView) => void;
onOpenMenu: () => void;
- onShutdown: () => void;
menuOpen: boolean;
shotCount: number;
cameraStreaming: boolean;
@@ -34,7 +33,7 @@ const VIEWS_WITH_UNITS: ReadonlySet = new Set(['live', 'stats', 'shot
/**
* Bottom bar: menu button, divider-separated panel tabs, and view meta on the
- * right. Panel actions live in `PanelHeader`.
+ * right. Panel actions and shutdown live in `PanelHeader`.
*
* The mockup footer shows four tabs; Players and Debug are extra working
* screens. Burying either behind a gesture makes them unreachable on the kiosk.
@@ -43,7 +42,6 @@ export function PanelFooter({
currentView,
onChangeView,
onOpenMenu,
- onShutdown,
menuOpen,
shotCount,
cameraStreaming,
@@ -110,22 +108,12 @@ export function PanelFooter({
/>
-
- {t('menu.ballDetection')}
- {ballDetectionValue}
- {cameraStatus.available ? (
-
- ) : null}
-
- {Object.keys(simStatuses).length > 0 ? (
-
- {t('menu.simulators')}
-
+ {t('menu.liveView')}
+
- {showUnits ? {unitsLabel} : null}
- {powerStatus ?
+ {showUnits || powerStatus ? (
+
+ {showUnits ? {unitsLabel} : null}
+ {powerStatus ?
+ ) : null}
{actions}
: null}
+
+ {actions ? (
+ <>
+ {actions}
+
+
+ ) : null}
+
+
{menuOpen ? (
+ {t('menu.simulators')}
+
+ ) : null}
);
diff --git a/ui/src/components/panel/liveMetrics.test.ts b/ui/src/components/panel/liveMetrics.test.ts
index c30c90a1..13500861 100644
--- a/ui/src/components/panel/liveMetrics.test.ts
+++ b/ui/src/components/panel/liveMetrics.test.ts
@@ -1,4 +1,5 @@
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it } from 'vitest';
+import { setActiveLocale } from '../../i18n';
import type { Shot, SwingSpeedStats } from '../../types/shot';
import {
buildLiveMetrics,
@@ -51,6 +52,10 @@ function byId(metrics: LiveMetric[], id: string): LiveMetric {
}
describe('buildLiveMetrics', () => {
+ afterEach(() => {
+ setActiveLocale('en');
+ });
+
it('returns a fixed ten metrics for a ball-strike shot, including club AoA', () => {
const metrics = buildLiveMetrics(makeShot(), 'imperial', emptySwingStats);
@@ -171,17 +176,19 @@ describe('buildLiveMetrics', () => {
expect(byId(metrics, 'club_aoa')).toMatchObject({
value: '-4.2',
unit: '°',
- subtext: 'camera fused',
+ subtext: 'Fused',
confidence: 'medium',
- confidenceLabel: 'experimental',
+ experimental: true,
});
expect(byId(metrics, 'club_path')).toMatchObject({
value: '+3.1',
unit: '°',
- subtext: 'camera fused',
+ subtext: 'Fused',
confidence: 'high',
- confidenceLabel: 'experimental',
+ experimental: true,
});
+ expect(byId(metrics, 'club_aoa').confidenceLabel).toBeUndefined();
+ expect(byId(metrics, 'club_path').confidenceLabel).toBeUndefined();
});
it('keeps camera-fusion rejection status but hides superseded radar candidates', () => {
@@ -200,12 +207,14 @@ describe('buildLiveMetrics', () => {
expect(byId(metrics, 'club_aoa')).toMatchObject({
value: NO_VALUE,
subtext: 'rejected: no impact',
- confidence: 'experimental',
+ confidence: null,
+ experimental: true,
});
expect(byId(metrics, 'club_path')).toMatchObject({
value: NO_VALUE,
subtext: 'rejected: no impact',
- confidence: 'experimental',
+ confidence: null,
+ experimental: true,
});
});
@@ -217,11 +226,31 @@ describe('buildLiveMetrics', () => {
);
expect(byId(metrics, 'launch_h')).toMatchObject({
- subtext: 'camera assisted',
- confidenceLabel: 'experimental',
+ subtext: 'Camera',
+ experimental: true,
});
});
+ it('translates camera provenance in the active locale', () => {
+ setActiveLocale('es');
+ const metrics = buildLiveMetrics(
+ makeShot({
+ club_angle_deg: null,
+ club_path_deg: null,
+ launch_angle_horizontal_source: 'camera_assisted_experimental',
+ experimental_fused_attack_angle_deg: -4.2,
+ experimental_fused_club_path_deg: 3.1,
+ experimental_fused_status: 'approach_mixed',
+ }),
+ 'imperial',
+ emptySwingStats
+ );
+
+ expect(byId(metrics, 'launch_h').subtext).toBe('Cámara');
+ expect(byId(metrics, 'club_path').subtext).toBe('Fusión');
+ expect(byId(metrics, 'club_aoa').subtext).toBe('Fusión');
+ });
+
it('marks estimated launch and spin with a flag, not provenance subtext', () => {
const measured = buildLiveMetrics(makeShot(), 'imperial', emptySwingStats);
expect(byId(measured, 'launch_v').subtext).toBeUndefined();
diff --git a/ui/src/components/panel/liveMetrics.ts b/ui/src/components/panel/liveMetrics.ts
index bcb3cc24..fe99d650 100644
--- a/ui/src/components/panel/liveMetrics.ts
+++ b/ui/src/components/panel/liveMetrics.ts
@@ -18,6 +18,8 @@ export interface LiveMetric {
/** True when the value is modeled rather than measured. Rendered as an icon. */
estimated?: boolean;
confidence?: SpinQuality | null;
+ /** Camera/radar preview. Rendered as an icon, not caption text. */
+ experimental?: boolean;
/** Override confidence copy while preserving its dot level. */
confidenceLabel?: string;
}
@@ -66,8 +68,8 @@ function markEstimated(isEstimated: boolean): true | undefined {
return isEstimated ? true : undefined;
}
-function experimentalStatus(status: string | null | undefined): string {
- if (!status || status === 'candidate_available') return 'candidate';
+function experimentalStatus(status: string | null | undefined): string | undefined {
+ if (!status || status === 'candidate_available') return undefined;
return status.replace(/^rejected_/, 'rejected: ').replaceAll('_', ' ');
}
@@ -140,10 +142,10 @@ function buildBallStrikeMetrics(shot: Shot, unitSystem: UnitSystem): LiveMetric[
label: t('metric.hLaunch'),
value: formatOptionalAngle(shot.launch_angle_horizontal, true),
unit: angleUnit(shot.launch_angle_horizontal),
- subtext: horizontalLaunchIsCameraAssisted ? 'camera assisted' : undefined,
+ subtext: horizontalLaunchIsCameraAssisted ? t('metric.cameraAssisted') : undefined,
estimated: markEstimated(shot.launch_angle_horizontal !== null && angleEstimated),
confidence: shot.launch_angle_horizontal === null ? null : angleConfidence,
- confidenceLabel: horizontalLaunchIsCameraAssisted ? 'experimental' : undefined,
+ experimental: horizontalLaunchIsCameraAssisted || undefined,
},
{
id: 'spin',
@@ -170,13 +172,13 @@ function buildBallStrikeMetrics(shot: Shot, unitSystem: UnitSystem): LiveMetric[
? undefined
: fusedDeliveryAttempted
? shot.experimental_fused_club_path_deg != null
- ? 'camera fused'
+ ? t('metric.cameraFused')
: experimentalStatus(shot.experimental_fused_status)
: clubPathIsExperimental
? experimentalStatus(shot.experimental_club_path_status)
: undefined,
- confidence: clubPathIsExperimental ? (shot.experimental_fused_club_path_confidence ?? 'experimental') : null,
- confidenceLabel: shot.experimental_fused_club_path_confidence ? 'experimental' : undefined,
+ confidence: clubPathIsExperimental ? (shot.experimental_fused_club_path_confidence ?? null) : null,
+ experimental: clubPathIsExperimental || undefined,
},
{
id: 'club_aoa',
@@ -188,13 +190,13 @@ function buildBallStrikeMetrics(shot: Shot, unitSystem: UnitSystem): LiveMetric[
? undefined
: fusedDeliveryAttempted
? shot.experimental_fused_attack_angle_deg != null
- ? 'camera fused'
+ ? t('metric.cameraFused')
: experimentalStatus(shot.experimental_fused_status)
: attackIsExperimental
? experimentalStatus(shot.experimental_attack_angle_status)
: undefined,
- confidence: attackIsExperimental ? (shot.experimental_fused_attack_angle_confidence ?? 'experimental') : null,
- confidenceLabel: shot.experimental_fused_attack_angle_confidence ? 'experimental' : undefined,
+ confidence: attackIsExperimental ? (shot.experimental_fused_attack_angle_confidence ?? null) : null,
+ experimental: attackIsExperimental || undefined,
},
];
}
diff --git a/ui/src/components/panel/panel.css b/ui/src/components/panel/panel.css
index 7f63ba19..01518c9a 100644
--- a/ui/src/components/panel/panel.css
+++ b/ui/src/components/panel/panel.css
@@ -152,6 +152,13 @@
color: var(--color-text);
}
+.panel-header__status-sims {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding-top: 4px;
+}
+
.panel-header__title {
font-weight: 700;
font-size: 0.6875rem;
@@ -195,6 +202,47 @@
flex-shrink: 0;
}
+.panel-header__actions > .panel-header__divider {
+ height: 18px;
+}
+
+.panel-header__power {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ box-sizing: border-box;
+ flex: 0 0 var(--panel-control-height, 32px);
+ width: var(--panel-control-height, 32px);
+ height: var(--panel-control-height, 32px);
+ padding: 0;
+ border: 1px solid var(--color-border);
+ border-radius: 8px;
+ background: transparent;
+ color: var(--color-text-muted);
+ cursor: pointer;
+}
+
+.panel-header__power::after {
+ content: '';
+ position: absolute;
+ inset: calc((44px - var(--panel-control-height, 32px)) / -2);
+}
+
+.panel-header__power:hover,
+.panel-header__power:focus-visible {
+ border-color: var(--color-danger);
+ color: var(--color-danger);
+}
+
+.panel-header__power svg {
+ width: 1.05rem;
+ height: 1.05rem;
+ stroke-width: 2;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+}
+
.panel-header__actions .panel-action {
height: var(--panel-control-height, 32px);
padding: 0 14px;
@@ -365,40 +413,6 @@
border-right: 1px solid var(--color-border);
}
-.panel-footer__meta > .power-status--chrome {
- padding-right: 0.9vw;
- border-right: 1px solid var(--color-border);
-}
-
-.panel-footer__power {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- flex: 0 0 44px;
- width: 44px;
- height: 44px;
- padding: 0;
- border: 1px solid var(--color-border);
- border-radius: var(--radius);
- background: transparent;
- color: var(--color-text-muted);
- cursor: pointer;
-}
-
-.panel-footer__power:hover,
-.panel-footer__power:focus-visible {
- border-color: var(--color-danger);
- color: var(--color-danger);
-}
-
-.panel-footer__power svg {
- width: 1.05rem;
- height: 1.05rem;
- stroke-width: 2;
- stroke-linecap: round;
- stroke-linejoin: round;
-}
-
/* Shutdown confirmation is app chrome, so it lives with the panel shell. */
.shutdown-overlay {
position: fixed;
@@ -534,10 +548,82 @@
min-height: 0;
}
+.live-panel__spotlight {
+ position: absolute;
+ inset: 0;
+ z-index: 2;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: 0 2rem;
+ border: none;
+ background: var(--color-bg);
+ color: inherit;
+ font: inherit;
+ cursor: pointer;
+ -webkit-appearance: none;
+ appearance: none;
+}
+
+.live-panel__spotlight-label {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.75rem;
+ font-weight: 700;
+ font-size: 1.8rem;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--color-accent);
+}
+
+.live-panel__spotlight .metric-card__estimated svg {
+ width: 1.75rem;
+ height: 1.125rem;
+}
+
+.live-panel__spotlight .metric-card__experimental svg {
+ width: 1.75rem;
+ height: 1.75rem;
+}
+
+.live-panel__spotlight-value-row {
+ display: flex;
+ align-items: baseline;
+ justify-content: center;
+ gap: 1rem;
+}
+
+.live-panel__spotlight-value {
+ font-weight: 700;
+ font-size: clamp(6rem, 42vh, 20rem);
+ line-height: 0.95;
+ letter-spacing: -0.03em;
+ color: var(--color-text);
+}
+
+.live-panel__spotlight-unit {
+ font-weight: 500;
+ font-size: clamp(1.5rem, 6vh, 3rem);
+ color: var(--color-text-muted);
+}
+
+.live-panel__spotlight-subtext {
+ margin-top: 1rem;
+ font-weight: 600;
+ font-size: 1.5rem;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--color-text-muted);
+}
+
.shot-flash {
position: absolute;
inset: 0;
- z-index: 0;
+ /* Above the timed/hold metric overlay so a new shot still flashes. */
+ z-index: 3;
pointer-events: none;
animation: shot-impact 0.65s ease-out forwards;
}
@@ -624,12 +710,14 @@
.live-panel__grid .metric-card__label,
.live-panel__grid .metric-card__meta,
-.live-panel__grid .metric-card__subtext {
+.live-panel__grid .metric-card__subtext,
+.live-panel__grid .metric-card__confidence-label {
min-width: 0;
max-width: 100%;
}
-.live-panel__grid .metric-card__subtext {
+.live-panel__grid .metric-card__subtext,
+.live-panel__grid .metric-card__confidence-label {
display: block;
font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
line-height: 1.15;
@@ -640,10 +728,15 @@
}
.live-panel__grid .metric-card__confidence {
+ flex-wrap: wrap;
min-width: 0;
max-width: 100%;
}
+.live-panel__grid .metric-card__confidence-label {
+ flex: 1 1 0;
+}
+
.live-panel__grid .metric-card__value-row {
width: 100%;
min-width: 0;
@@ -1133,6 +1226,7 @@
width: 320px;
max-height: calc(100% - 86px);
overflow-y: auto;
+ overscroll-behavior: contain;
background: var(--color-surface);
border: 0px;
border-radius: var(--radius);
@@ -1141,11 +1235,24 @@
flex-direction: column;
gap: 16px;
z-index: 21;
+ /* Own the gesture so Pi mouse-drags scroll instead of tapping segments. */
+ touch-action: none;
+ user-select: none;
+ -webkit-user-select: none;
+}
+
+.menu-sheet .segmented-control__button {
+ touch-action: none;
+}
+
+.menu-sheet__select {
+ touch-action: none;
}
.menu-sheet__section {
display: flex;
flex-direction: column;
+ min-width: 0;
gap: 8px;
}
diff --git a/ui/src/components/panel/useShotSpotlight.test.ts b/ui/src/components/panel/useShotSpotlight.test.ts
new file mode 100644
index 00000000..6a37a313
--- /dev/null
+++ b/ui/src/components/panel/useShotSpotlight.test.ts
@@ -0,0 +1,58 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { createSpotlightController, shouldOpenSpotlight } from './useShotSpotlight';
+
+describe('shouldOpenSpotlight', () => {
+ it('never opens for tiles', () => {
+ expect(shouldOpenSpotlight('tiles', true)).toBe(false);
+ expect(shouldOpenSpotlight('tiles', false)).toBe(false);
+ });
+
+ it('opens timed and sticky only for a new shot', () => {
+ expect(shouldOpenSpotlight('timed', true)).toBe(true);
+ expect(shouldOpenSpotlight('sticky', true)).toBe(true);
+ expect(shouldOpenSpotlight('timed', false)).toBe(false);
+ expect(shouldOpenSpotlight('sticky', false)).toBe(false);
+ });
+});
+
+describe('createSpotlightController', () => {
+ afterEach(() => {
+ vi.useRealTimers();
+ });
+
+ it('timed controller fires hide after durationMs', () => {
+ vi.useFakeTimers();
+ const hide = vi.fn();
+ const { openInitially, start } = createSpotlightController('timed', 5000, true, hide);
+ expect(openInitially).toBe(true);
+ const stop = start();
+ vi.advanceTimersByTime(4999);
+ expect(hide).not.toHaveBeenCalled();
+ vi.advanceTimersByTime(1);
+ expect(hide).toHaveBeenCalledTimes(1);
+ stop();
+ });
+
+ it('sticky controller never starts a timer', () => {
+ vi.useFakeTimers();
+ const hide = vi.fn();
+ const { start } = createSpotlightController('sticky', 5000, true, hide);
+ start();
+ vi.advanceTimersByTime(60_000);
+ expect(hide).not.toHaveBeenCalled();
+ });
+
+ it('keeps mode and duration frozen on the instance', () => {
+ vi.useFakeTimers();
+ const hide = vi.fn();
+ const { openInitially, start } = createSpotlightController('timed', 10000, true, hide);
+ expect(openInitially).toBe(true);
+ start();
+ // A later store change to 5s / sticky is never passed into this instance.
+ createSpotlightController('sticky', 5000, true, hide);
+ vi.advanceTimersByTime(5000);
+ expect(hide).not.toHaveBeenCalled();
+ vi.advanceTimersByTime(5000);
+ expect(hide).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/ui/src/components/panel/useShotSpotlight.ts b/ui/src/components/panel/useShotSpotlight.ts
new file mode 100644
index 00000000..3aeadb5d
--- /dev/null
+++ b/ui/src/components/panel/useShotSpotlight.ts
@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import type { LiveViewMode } from '../../stores/useLiveViewStore';
+
+export function shouldOpenSpotlight(mode: LiveViewMode, isNewShot: boolean): boolean {
+ return isNewShot && mode !== 'tiles';
+}
+
+export function createSpotlightController(
+ mode: LiveViewMode,
+ durationMs: number,
+ isNewShot: boolean,
+ hide: () => void
+): { openInitially: boolean; start: () => () => void } {
+ const openInitially = shouldOpenSpotlight(mode, isNewShot);
+ return {
+ openInitially,
+ start: () => {
+ if (!openInitially || mode !== 'timed') {
+ return () => {};
+ }
+ const timer = setTimeout(hide, durationMs);
+ return () => clearTimeout(timer);
+ },
+ };
+}
+
+export function useShotSpotlight(mode: LiveViewMode, durationMs: number, isNewShot: boolean) {
+ const [open, setOpen] = useState(() => shouldOpenSpotlight(mode, isNewShot));
+ // Freeze mode/duration for this hook instance. LivePanel remounts on a new
+ // shot, so menu changes apply then; an overlay already on screen is left alone.
+ const [controller] = useState(() => createSpotlightController(mode, durationMs, isNewShot, () => setOpen(false)));
+
+ useEffect(() => {
+ return controller.start();
+ }, [controller]);
+
+ return { open, dismiss: () => setOpen(false) };
+}
diff --git a/ui/src/components/ui/MetricCard.css b/ui/src/components/ui/MetricCard.css
index d894881c..fffce717 100644
--- a/ui/src/components/ui/MetricCard.css
+++ b/ui/src/components/ui/MetricCard.css
@@ -113,7 +113,8 @@
gap: 4px;
}
-.metric-card__estimated {
+.metric-card__estimated,
+.metric-card__experimental {
position: relative;
display: inline-flex;
align-items: center;
@@ -121,16 +122,19 @@
flex-shrink: 0;
}
-.metric-card__estimated svg {
+.metric-card__estimated svg,
+.metric-card__experimental svg {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 1.7;
fill: none;
stroke-linecap: round;
+ stroke-linejoin: round;
}
-.metric-card__estimated-label {
+.metric-card__estimated-label,
+.metric-card__experimental-label {
position: absolute;
width: 1px;
height: 1px;
@@ -177,6 +181,9 @@
letter-spacing: 0.08em;
color: var(--color-text-muted);
white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 100%;
}
.metric-card__confidence {
@@ -201,18 +208,6 @@
background: var(--color-accent);
}
-.metric-card__confidence--experimental {
- width: fit-content;
- margin-top: 4px;
- padding: 2px 7px;
- border: 1px solid var(--color-border-emphasis);
- border-radius: var(--radius);
-}
-
-.metric-card__confidence--experimental .metric-card__confidence-label {
- color: var(--color-accent);
-}
-
@media (max-height: 700px) {
.metric-card {
padding: var(--space-xs) var(--space-sm);
@@ -234,10 +229,6 @@
.metric-card--label-above .metric-card__label {
margin-top: 0;
}
-
- .metric-card__confidence--experimental {
- margin-top: 2px;
- }
}
@media (max-height: 500px) {
@@ -257,9 +248,4 @@
.metric-card--label-above .metric-card__label {
margin-top: 0;
}
-
- .metric-card__confidence--experimental {
- margin-top: 1px;
- padding: 1px 5px;
- }
}
diff --git a/ui/src/components/ui/MetricCard.test.tsx b/ui/src/components/ui/MetricCard.test.tsx
index 141e0e92..eb0aa6ae 100644
--- a/ui/src/components/ui/MetricCard.test.tsx
+++ b/ui/src/components/ui/MetricCard.test.tsx
@@ -1,12 +1,17 @@
import { readFileSync } from 'node:fs';
import { fileURLToPath } from 'node:url';
import { renderToString } from 'react-dom/server';
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it } from 'vitest';
+import { setActiveLocale } from '../../i18n';
import { MetricCard } from './MetricCard';
const css = readFileSync(fileURLToPath(new URL('./MetricCard.css', import.meta.url)), 'utf8');
describe('MetricCard', () => {
+ afterEach(() => {
+ setActiveLocale('en');
+ });
+
it('renders value, unit, and label', () => {
const html = renderToString(
- {confidence !== 'experimental' ? (
-
-
-
-
-
- ) : null}
- {confidenceLabel ?? confidence}
+ {measuredConfidence ? (
+ ({
className={`segmented-control__button${active ? ' segmented-control__button--active' : ''}`}
aria-pressed={active}
onClick={() => onChange(option.id)}
+ title={option.label}
>
- {option.label}
+ {option.label}
);
})}
diff --git a/ui/src/i18n/en.ts b/ui/src/i18n/en.ts
index 596e736c..b247bbdd 100644
--- a/ui/src/i18n/en.ts
+++ b/ui/src/i18n/en.ts
@@ -69,6 +69,9 @@ export const en = {
'metric.readingsCount': '{count} readings',
'metric.trigger': '{speed} {unit} trigger',
'metric.estimated': 'Estimated',
+ 'metric.experimental': 'Experimental',
+ 'metric.cameraAssisted': 'Camera',
+ 'metric.cameraFused': 'Fused',
'shape.fade': 'Fade',
'shape.draw': 'Draw',
'shape.straight': 'Straight',
@@ -157,6 +160,33 @@ export const en = {
'menu.enable': 'Enable',
'menu.shutdown': 'Shut down',
+ 'onboarding.getStarted': 'Get started',
+ 'onboarding.welcomeTitle': 'OpenFlight',
+ 'onboarding.continue': 'Continue',
+ 'onboarding.back': 'Back',
+ 'onboarding.start': 'Start',
+ 'onboarding.languageTitle': 'Language',
+ 'onboarding.unitsTitle': 'Units',
+ 'onboarding.themeTitle': 'Theme',
+ 'onboarding.liveViewTitle': 'Live view',
+ 'onboarding.liveTiles': 'Tiles',
+ 'onboarding.liveTilesDetail': 'All metrics. No large preview.',
+ 'onboarding.liveTimed': 'Timed preview',
+ 'onboarding.liveTimedDetail': 'Large selected metric, then tiles.',
+ 'onboarding.liveHold': 'Hold preview',
+ 'onboarding.liveHoldDetail': 'Large selected metric until you tap.',
+ 'onboarding.duration': 'Preview duration',
+ 'onboarding.duration5': '5s',
+ 'onboarding.duration10': '10s',
+ 'onboarding.duration15': '15s',
+ 'onboarding.doneTitle': "You're ready",
+ 'onboarding.doneDetail': 'Driver is selected. Change club anytime from Live.',
+ 'onboarding.step': 'Step {current} of {total}',
+ 'menu.liveView': 'Live view',
+ 'menu.liveTiles': 'Tiles',
+ 'menu.liveTimed': 'Timed',
+ 'menu.liveHold': 'Hold',
+
'app.changeImplement': 'Change implement',
'app.changeClub': 'Change club',
'app.clearSession': 'Clear session',
diff --git a/ui/src/i18n/es.ts b/ui/src/i18n/es.ts
index 1e7ac06e..e3f86740 100644
--- a/ui/src/i18n/es.ts
+++ b/ui/src/i18n/es.ts
@@ -71,6 +71,9 @@ export const es: Messages = {
'metric.readingsCount': '{count} lecturas',
'metric.trigger': 'umbral {speed} {unit}',
'metric.estimated': 'Estimado',
+ 'metric.experimental': 'Experimental',
+ 'metric.cameraAssisted': 'Cámara',
+ 'metric.cameraFused': 'Fusión',
'shape.fade': 'Fade',
'shape.draw': 'Draw',
'shape.straight': 'Recto',
@@ -159,6 +162,33 @@ export const es: Messages = {
'menu.enable': 'Activar',
'menu.shutdown': 'Apagar',
+ 'onboarding.getStarted': 'Empezar',
+ 'onboarding.welcomeTitle': 'OpenFlight',
+ 'onboarding.continue': 'Continuar',
+ 'onboarding.back': 'Atrás',
+ 'onboarding.start': 'Comenzar',
+ 'onboarding.languageTitle': 'Idioma',
+ 'onboarding.unitsTitle': 'Unidades',
+ 'onboarding.themeTitle': 'Tema',
+ 'onboarding.liveViewTitle': 'Vista en vivo',
+ 'onboarding.liveTiles': 'Mosaicos',
+ 'onboarding.liveTilesDetail': 'Todas las métricas. Sin vista grande.',
+ 'onboarding.liveTimed': 'Vista temporizada',
+ 'onboarding.liveTimedDetail': 'Métrica grande, luego mosaicos.',
+ 'onboarding.liveHold': 'Vista fija',
+ 'onboarding.liveHoldDetail': 'Métrica grande hasta que toques.',
+ 'onboarding.duration': 'Duración de la vista',
+ 'onboarding.duration5': '5s',
+ 'onboarding.duration10': '10s',
+ 'onboarding.duration15': '15s',
+ 'onboarding.doneTitle': 'Listo',
+ 'onboarding.doneDetail': 'Driver está seleccionado. Cambia el palo cuando quieras desde En vivo.',
+ 'onboarding.step': 'Paso {current} de {total}',
+ 'menu.liveView': 'Vista en vivo',
+ 'menu.liveTiles': 'Mosaicos',
+ 'menu.liveTimed': 'Tiempo',
+ 'menu.liveHold': 'Fijo',
+
'app.changeImplement': 'Cambiar implemento',
'app.changeClub': 'Cambiar palo',
'app.clearSession': 'Borrar sesión',
diff --git a/ui/src/i18n/fr.ts b/ui/src/i18n/fr.ts
index 4737647d..164b5657 100644
--- a/ui/src/i18n/fr.ts
+++ b/ui/src/i18n/fr.ts
@@ -71,6 +71,9 @@ export const fr: Messages = {
'metric.readingsCount': '{count} lectures',
'metric.trigger': 'seuil {speed} {unit}',
'metric.estimated': 'Estimé',
+ 'metric.experimental': 'Expérimental',
+ 'metric.cameraAssisted': 'Caméra',
+ 'metric.cameraFused': 'Fusion',
'shape.fade': 'Fade',
'shape.draw': 'Draw',
'shape.straight': 'Droit',
@@ -159,6 +162,33 @@ export const fr: Messages = {
'menu.enable': 'Activer',
'menu.shutdown': 'Éteindre',
+ 'onboarding.getStarted': 'Commencer',
+ 'onboarding.welcomeTitle': 'OpenFlight',
+ 'onboarding.continue': 'Continuer',
+ 'onboarding.back': 'Retour',
+ 'onboarding.start': 'C’est parti',
+ 'onboarding.languageTitle': 'Langue',
+ 'onboarding.unitsTitle': 'Unités',
+ 'onboarding.themeTitle': 'Thème',
+ 'onboarding.liveViewTitle': 'Vue Direct',
+ 'onboarding.liveTiles': 'Tuiles',
+ 'onboarding.liveTilesDetail': 'Toutes les métriques. Pas de grand aperçu.',
+ 'onboarding.liveTimed': 'Aperçu minuté',
+ 'onboarding.liveTimedDetail': 'Grande métrique, puis tuiles.',
+ 'onboarding.liveHold': 'Aperçu fixe',
+ 'onboarding.liveHoldDetail': 'Grande métrique jusqu’au toucher.',
+ 'onboarding.duration': 'Durée de l’aperçu',
+ 'onboarding.duration5': '5s',
+ 'onboarding.duration10': '10s',
+ 'onboarding.duration15': '15s',
+ 'onboarding.doneTitle': 'Vous êtes prêt',
+ 'onboarding.doneDetail': 'Le driver est sélectionné. Changez de club depuis Direct à tout moment.',
+ 'onboarding.step': 'Étape {current} sur {total}',
+ 'menu.liveView': 'Vue Direct',
+ 'menu.liveTiles': 'Tuiles',
+ 'menu.liveTimed': 'Minuté',
+ 'menu.liveHold': 'Fixe',
+
'app.changeImplement': 'Changer d’outil',
'app.changeClub': 'Changer de club',
'app.clearSession': 'Effacer la session',
diff --git a/ui/src/i18n/pt.ts b/ui/src/i18n/pt.ts
index b80ed0d8..b2a05411 100644
--- a/ui/src/i18n/pt.ts
+++ b/ui/src/i18n/pt.ts
@@ -71,6 +71,9 @@ export const pt: Messages = {
'metric.readingsCount': '{count} leituras',
'metric.trigger': 'limite {speed} {unit}',
'metric.estimated': 'Estimado',
+ 'metric.experimental': 'Experimental',
+ 'metric.cameraAssisted': 'Câmera',
+ 'metric.cameraFused': 'Fusão',
'shape.fade': 'Fade',
'shape.draw': 'Draw',
'shape.straight': 'Reto',
@@ -159,6 +162,33 @@ export const pt: Messages = {
'menu.enable': 'Ativar',
'menu.shutdown': 'Desligar',
+ 'onboarding.getStarted': 'Começar',
+ 'onboarding.welcomeTitle': 'OpenFlight',
+ 'onboarding.continue': 'Continuar',
+ 'onboarding.back': 'Voltar',
+ 'onboarding.start': 'Iniciar',
+ 'onboarding.languageTitle': 'Idioma',
+ 'onboarding.unitsTitle': 'Unidades',
+ 'onboarding.themeTitle': 'Tema',
+ 'onboarding.liveViewTitle': 'Visão ao vivo',
+ 'onboarding.liveTiles': 'Mosaicos',
+ 'onboarding.liveTilesDetail': 'Todas as métricas. Sem prévia grande.',
+ 'onboarding.liveTimed': 'Prévia cronometrada',
+ 'onboarding.liveTimedDetail': 'Métrica grande, depois mosaicos.',
+ 'onboarding.liveHold': 'Prévia fixa',
+ 'onboarding.liveHoldDetail': 'Métrica grande até você tocar.',
+ 'onboarding.duration': 'Duração da prévia',
+ 'onboarding.duration5': '5s',
+ 'onboarding.duration10': '10s',
+ 'onboarding.duration15': '15s',
+ 'onboarding.doneTitle': 'Tudo pronto',
+ 'onboarding.doneDetail': 'O driver está selecionado. Troque o taco quando quiser em Ao vivo.',
+ 'onboarding.step': 'Passo {current} de {total}',
+ 'menu.liveView': 'Visão ao vivo',
+ 'menu.liveTiles': 'Mosaicos',
+ 'menu.liveTimed': 'Tempo',
+ 'menu.liveHold': 'Fixa',
+
'app.changeImplement': 'Trocar implemento',
'app.changeClub': 'Trocar taco',
'app.clearSession': 'Limpar sessão',
diff --git a/ui/src/stores/useLiveViewStore.test.ts b/ui/src/stores/useLiveViewStore.test.ts
new file mode 100644
index 00000000..8e8422cb
--- /dev/null
+++ b/ui/src/stores/useLiveViewStore.test.ts
@@ -0,0 +1,111 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const STORAGE_KEY = 'openflight.live-view:v1';
+
+function installBrowser(initial: Record = {}, options: { failWrites?: boolean } = {}) {
+ const store = { ...initial };
+ const localStorage = {
+ getItem: (key: string) => store[key] ?? null,
+ setItem: (key: string, value: string) => {
+ if (options.failWrites) {
+ throw new Error('quota exceeded');
+ }
+ store[key] = value;
+ },
+ removeItem: (key: string) => {
+ delete store[key];
+ },
+ };
+ vi.stubGlobal('localStorage', localStorage);
+ vi.stubGlobal('window', { localStorage });
+ return store;
+}
+
+async function loadStore() {
+ const module = await import('./useLiveViewStore');
+ return module.useLiveViewStore;
+}
+
+describe('useLiveViewStore', () => {
+ beforeEach(() => {
+ vi.resetModules();
+ });
+
+ afterEach(() => {
+ vi.unstubAllGlobals();
+ });
+
+ it('defaults to tiles and 10s', async () => {
+ installBrowser();
+ const useLiveViewStore = await loadStore();
+
+ expect(useLiveViewStore.getState().mode).toBe('tiles');
+ expect(useLiveViewStore.getState().durationMs).toBe(10000);
+ });
+
+ it('restores a valid stored choice', async () => {
+ installBrowser({ [STORAGE_KEY]: JSON.stringify({ mode: 'sticky', durationMs: 5000 }) });
+ const useLiveViewStore = await loadStore();
+
+ expect(useLiveViewStore.getState().mode).toBe('sticky');
+ expect(useLiveViewStore.getState().durationMs).toBe(5000);
+ });
+
+ it('falls back when JSON is invalid', async () => {
+ installBrowser({ [STORAGE_KEY]: '{not-json' });
+ const useLiveViewStore = await loadStore();
+
+ expect(useLiveViewStore.getState().mode).toBe('tiles');
+ expect(useLiveViewStore.getState().durationMs).toBe(10000);
+ });
+
+ it('falls back when mode or duration is unknown', async () => {
+ installBrowser({ [STORAGE_KEY]: JSON.stringify({ mode: 'hero', durationMs: 2500 }) });
+ const useLiveViewStore = await loadStore();
+
+ expect(useLiveViewStore.getState().mode).toBe('tiles');
+ expect(useLiveViewStore.getState().durationMs).toBe(10000);
+ });
+
+ it('restores mixed-validity storage per field', async () => {
+ installBrowser({ [STORAGE_KEY]: JSON.stringify({ mode: 'sticky', durationMs: 2500 }) });
+ const useLiveViewStore = await loadStore();
+
+ expect(useLiveViewStore.getState().mode).toBe('sticky');
+ expect(useLiveViewStore.getState().durationMs).toBe(10000);
+
+ vi.resetModules();
+ installBrowser({ [STORAGE_KEY]: JSON.stringify({ mode: 'hero', durationMs: 5000 }) });
+ const useLiveViewStoreAgain = await loadStore();
+
+ expect(useLiveViewStoreAgain.getState().mode).toBe('tiles');
+ expect(useLiveViewStoreAgain.getState().durationMs).toBe(5000);
+ });
+
+ it('persists mode without clearing duration', async () => {
+ const store = installBrowser();
+ const useLiveViewStore = await loadStore();
+
+ useLiveViewStore.getState().setDurationMs(15000);
+ useLiveViewStore.getState().setMode('timed');
+
+ expect(useLiveViewStore.getState().durationMs).toBe(15000);
+ expect(JSON.parse(store[STORAGE_KEY])).toEqual({ mode: 'timed', durationMs: 15000 });
+ });
+
+ it('keeps the choice when storage rejects the write', async () => {
+ installBrowser({}, { failWrites: true });
+ const useLiveViewStore = await loadStore();
+
+ expect(() => useLiveViewStore.getState().setMode('sticky')).not.toThrow();
+ expect(useLiveViewStore.getState().mode).toBe('sticky');
+ });
+
+ it('falls back when there is no window', async () => {
+ vi.stubGlobal('window', undefined);
+ const useLiveViewStore = await loadStore();
+
+ expect(useLiveViewStore.getState().mode).toBe('tiles');
+ expect(useLiveViewStore.getState().durationMs).toBe(10000);
+ });
+});
diff --git a/ui/src/stores/useLiveViewStore.ts b/ui/src/stores/useLiveViewStore.ts
new file mode 100644
index 00000000..df8243be
--- /dev/null
+++ b/ui/src/stores/useLiveViewStore.ts
@@ -0,0 +1,78 @@
+import { create } from 'zustand';
+
+export const LIVE_VIEW_STORAGE_KEY = 'openflight.live-view:v1';
+export const LIVE_VIEW_DURATIONS_MS = [5000, 10000, 15000] as const;
+
+export type LiveViewMode = 'tiles' | 'timed' | 'sticky';
+export type LiveViewDurationMs = (typeof LIVE_VIEW_DURATIONS_MS)[number];
+
+const MODES = new Set(['tiles', 'timed', 'sticky']);
+const DURATIONS = new Set(LIVE_VIEW_DURATIONS_MS);
+
+export function isLiveViewMode(value: unknown): value is LiveViewMode {
+ return typeof value === 'string' && MODES.has(value as LiveViewMode);
+}
+
+export function isLiveViewDurationMs(value: unknown): value is LiveViewDurationMs {
+ return typeof value === 'number' && DURATIONS.has(value);
+}
+
+interface StoredLiveView {
+ mode: LiveViewMode;
+ durationMs: LiveViewDurationMs;
+}
+
+function readStoredLiveView(): StoredLiveView {
+ const fallback: StoredLiveView = { mode: 'tiles', durationMs: 10000 };
+ if (typeof window === 'undefined') {
+ return fallback;
+ }
+
+ try {
+ const raw = window.localStorage.getItem(LIVE_VIEW_STORAGE_KEY);
+ if (!raw) {
+ return fallback;
+ }
+ const parsed: unknown = JSON.parse(raw);
+ if (!parsed || typeof parsed !== 'object') {
+ return fallback;
+ }
+ const { mode, durationMs } = parsed as { mode?: unknown; durationMs?: unknown };
+ return {
+ mode: isLiveViewMode(mode) ? mode : fallback.mode,
+ durationMs: isLiveViewDurationMs(durationMs) ? durationMs : fallback.durationMs,
+ };
+ } catch {
+ return fallback;
+ }
+}
+
+function persist(state: StoredLiveView): void {
+ if (typeof window === 'undefined') {
+ return;
+ }
+ try {
+ window.localStorage.setItem(LIVE_VIEW_STORAGE_KEY, JSON.stringify(state));
+ } catch {
+ // Storage can be unavailable; the choice still applies for this session.
+ }
+}
+
+interface LiveViewState extends StoredLiveView {
+ setMode: (mode: LiveViewMode) => void;
+ setDurationMs: (durationMs: LiveViewDurationMs) => void;
+}
+
+export const useLiveViewStore = create((set, get) => ({
+ ...readStoredLiveView(),
+ setMode: (mode) => {
+ const next = { mode, durationMs: get().durationMs };
+ persist(next);
+ set(next);
+ },
+ setDurationMs: (durationMs) => {
+ const next = { mode: get().mode, durationMs };
+ persist(next);
+ set(next);
+ },
+}));
diff --git a/ui/src/stores/useOnboardingStore.test.ts b/ui/src/stores/useOnboardingStore.test.ts
new file mode 100644
index 00000000..f14c0bda
--- /dev/null
+++ b/ui/src/stores/useOnboardingStore.test.ts
@@ -0,0 +1,67 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const STORAGE_KEY = 'openflight.onboarding.completed:v1';
+
+function installBrowser(initial: Record = {}, options: { failWrites?: boolean } = {}) {
+ const store = { ...initial };
+ const localStorage = {
+ getItem: (key: string) => store[key] ?? null,
+ setItem: (key: string, value: string) => {
+ if (options.failWrites) {
+ throw new Error('quota exceeded');
+ }
+ store[key] = value;
+ },
+ };
+ vi.stubGlobal('localStorage', localStorage);
+ vi.stubGlobal('window', { localStorage });
+ return store;
+}
+
+async function loadStore() {
+ const module = await import('./useOnboardingStore');
+ return module.useOnboardingStore;
+}
+
+describe('useOnboardingStore', () => {
+ beforeEach(() => {
+ vi.resetModules();
+ });
+
+ afterEach(() => {
+ vi.unstubAllGlobals();
+ });
+
+ it('starts incomplete when nothing is stored', async () => {
+ installBrowser();
+ const useOnboardingStore = await loadStore();
+ expect(useOnboardingStore.getState().completed).toBe(false);
+ });
+
+ it('restores a completed flag', async () => {
+ installBrowser({ [STORAGE_KEY]: '1' });
+ const useOnboardingStore = await loadStore();
+ expect(useOnboardingStore.getState().completed).toBe(true);
+ });
+
+ it('writes the flag on complete', async () => {
+ const store = installBrowser();
+ const useOnboardingStore = await loadStore();
+ useOnboardingStore.getState().complete();
+ expect(useOnboardingStore.getState().completed).toBe(true);
+ expect(store[STORAGE_KEY]).toBe('1');
+ });
+
+ it('keeps completed true when storage rejects the write', async () => {
+ installBrowser({}, { failWrites: true });
+ const useOnboardingStore = await loadStore();
+ expect(() => useOnboardingStore.getState().complete()).not.toThrow();
+ expect(useOnboardingStore.getState().completed).toBe(true);
+ });
+
+ it('starts incomplete when there is no window', async () => {
+ vi.stubGlobal('window', undefined);
+ const useOnboardingStore = await loadStore();
+ expect(useOnboardingStore.getState().completed).toBe(false);
+ });
+});
diff --git a/ui/src/stores/useOnboardingStore.ts b/ui/src/stores/useOnboardingStore.ts
new file mode 100644
index 00000000..bb80c1eb
--- /dev/null
+++ b/ui/src/stores/useOnboardingStore.ts
@@ -0,0 +1,33 @@
+import { create } from 'zustand';
+
+export const ONBOARDING_STORAGE_KEY = 'openflight.onboarding.completed:v1';
+
+function readCompleted(): boolean {
+ if (typeof window === 'undefined') {
+ return false;
+ }
+ try {
+ return window.localStorage.getItem(ONBOARDING_STORAGE_KEY) === '1';
+ } catch {
+ return false;
+ }
+}
+
+interface OnboardingState {
+ completed: boolean;
+ complete: () => void;
+}
+
+export const useOnboardingStore = create((set) => ({
+ completed: readCompleted(),
+ complete: () => {
+ if (typeof window !== 'undefined') {
+ try {
+ window.localStorage.setItem(ONBOARDING_STORAGE_KEY, '1');
+ } catch {
+ // Storage can be unavailable; this session still counts as complete.
+ }
+ }
+ set({ completed: true });
+ },
+}));
diff --git a/ui/src/stores/useSystemStore.ts b/ui/src/stores/useSystemStore.ts
index 4c9599ad..11bf3fe7 100644
--- a/ui/src/stores/useSystemStore.ts
+++ b/ui/src/stores/useSystemStore.ts
@@ -13,6 +13,7 @@ interface SystemState {
serverClub: string | null;
serverPlayerName: string | null;
powerStatus: PowerStatus | null;
+ shutdownDialogOpen: boolean;
setConnected: (connected: boolean) => void;
setMockMode: (mockMode: boolean) => void;
setDebugMode: (debugMode: boolean) => void;
@@ -22,6 +23,8 @@ interface SystemState {
setServerClub: (club: string | null) => void;
setServerPlayerName: (playerName: string | null) => void;
setPowerStatus: (status: PowerStatus) => void;
+ openShutdownDialog: () => void;
+ closeShutdownDialog: () => void;
}
export const useSystemStore = create((set) => ({
@@ -35,6 +38,7 @@ export const useSystemStore = create((set) => ({
serverClub: null,
serverPlayerName: null,
powerStatus: null,
+ shutdownDialogOpen: false,
setConnected: (connected) => set({ connected }),
setMockMode: (mockMode) => set({ mockMode }),
setDebugMode: (debugMode) => set({ debugMode }),
@@ -50,4 +54,6 @@ export const useSystemStore = create((set) => ({
setServerClub: (serverClub) => set({ serverClub }),
setServerPlayerName: (serverPlayerName) => set({ serverPlayerName }),
setPowerStatus: (status) => set({ powerStatus: status }),
+ openShutdownDialog: () => set({ shutdownDialogOpen: true }),
+ closeShutdownDialog: () => set({ shutdownDialogOpen: false }),
}));
diff --git a/ui/tests/e2e/helpers.ts b/ui/tests/e2e/helpers.ts
index 766d1e69..d9e7a5d8 100644
--- a/ui/tests/e2e/helpers.ts
+++ b/ui/tests/e2e/helpers.ts
@@ -86,7 +86,17 @@ export async function resetSession(socket: Socket) {
}
}
-export async function gotoApp(page: Page, path = '/') {
+export async function gotoApp(
+ page: Page,
+ path = '/',
+ options: { onboarded?: boolean } = {}
+) {
+ const onboarded = options.onboarded ?? true;
+ if (onboarded) {
+ await page.addInitScript(() => {
+ window.localStorage.setItem('openflight.onboarding.completed:v1', '1');
+ });
+ }
await page.goto(`${UI_URL}${path}`);
}
diff --git a/ui/tests/e2e/onboarding.spec.ts b/ui/tests/e2e/onboarding.spec.ts
new file mode 100644
index 00000000..9c990e51
--- /dev/null
+++ b/ui/tests/e2e/onboarding.spec.ts
@@ -0,0 +1,142 @@
+import { test } from '@playwright/test';
+import { expect, gotoApp, simulateShot, withControlSocket } from './helpers';
+
+test('first visit shows welcome, not the club picker', async ({ page }) => {
+ await gotoApp(page, '/', { onboarded: false });
+ await expect(page.getByRole('button', { name: 'Get started' })).toBeVisible();
+ await expect(page.getByRole('dialog', { name: 'Select club' })).toHaveCount(0);
+ await expect(page.getByRole('button', { name: 'Live' })).toHaveCount(0);
+});
+
+test('walks setup and lands on Live with Driver and no picker', async ({ page }) => {
+ await gotoApp(page, '/', { onboarded: false });
+ await page.getByRole('button', { name: 'Get started' }).click();
+ await page.getByRole('button', { name: 'Español' }).click();
+ await expect(page.getByRole('button', { name: 'Continuar' })).toBeVisible();
+ await page.getByRole('button', { name: 'English' }).click();
+ await page.getByRole('button', { name: 'KMH / M' }).click();
+ await page.getByRole('button', { name: 'MPH / YDS' }).click();
+ await page.getByRole('button', { name: 'Continue' }).click();
+ await page.getByRole('button', { name: 'Light' }).click();
+ await page.getByRole('button', { name: 'Dark' }).click();
+ await page.getByRole('button', { name: 'Continue' }).click();
+ await expect(page.getByRole('button', { name: '5s', exact: true })).toHaveCount(0);
+ await page.getByRole('button', { name: 'Timed preview' }).click();
+ await expect(page.getByRole('button', { name: '5s', exact: true })).toBeVisible();
+ await page.getByRole('button', { name: /^Tiles/ }).click();
+ await page.getByRole('button', { name: 'Continue' }).click();
+ await page.getByRole('button', { name: 'Start' }).click();
+ await expect(page.getByRole('dialog', { name: 'Select club' })).toHaveCount(0);
+ await expect(page.locator('.panel-header__club')).toContainText('Driver');
+ await expect(page.getByRole('button', { name: 'Live' })).toBeVisible();
+});
+
+test('later launch opens the club picker', async ({ page }) => {
+ await gotoApp(page, '/', { onboarded: false });
+ await page.getByRole('button', { name: 'Get started' }).click();
+ await page.getByRole('button', { name: 'Continue' }).click();
+ await page.getByRole('button', { name: 'Continue' }).click();
+ await page.getByRole('button', { name: 'Continue' }).click();
+ await page.getByRole('button', { name: 'Start' }).click();
+ await page.reload();
+ await expect(page.getByRole('dialog', { name: 'Select club' })).toBeVisible();
+});
+
+test('display route never shows onboarding', async ({ page }) => {
+ await gotoApp(page, '/display', { onboarded: false });
+ await expect(page.getByText('OpenFlight Display')).toBeVisible();
+ await expect(page.getByRole('button', { name: 'Get started' })).toHaveCount(0);
+});
+
+test('menu has live view and no shutdown; header still shuts down', async ({ page }) => {
+ await gotoApp(page);
+ await page.getByRole('button', { name: 'Close Select club' }).click();
+ await page.getByRole('button', { name: 'Open menu' }).click();
+ const menu = page.getByRole('dialog', { name: 'Menu' });
+ await expect(menu.getByText('Live view', { exact: true })).toBeVisible();
+ await expect(menu.getByRole('button', { name: 'Tiles', exact: true })).toBeVisible();
+ await expect(menu.getByRole('button', { name: 'Timed', exact: true })).toBeVisible();
+ await expect(menu.getByRole('button', { name: 'Hold', exact: true })).toBeVisible();
+ await expect(menu.getByText('System', { exact: true })).toHaveCount(0);
+ await expect(menu.getByRole('button', { name: 'Shut down' })).toHaveCount(0);
+ await page.getByRole('button', { name: 'Close menu' }).click();
+ await page.locator('.panel-header__power').click();
+ await expect(page.getByRole('dialog', { name: 'Shut down OpenFlight?' })).toBeVisible();
+});
+
+test.describe('menu live view at 800×400', () => {
+ test.use({ viewport: { width: 800, height: 400 } });
+
+ test('scrolls the menu by dragging so duration chips can be selected', async ({ page }) => {
+ await gotoApp(page);
+ await page.getByRole('button', { name: 'Close Select club' }).click();
+ await page.getByRole('button', { name: 'Open menu' }).click();
+ const menu = page.getByRole('dialog', { name: 'Menu' });
+ await menu.getByRole('button', { name: 'Timed', exact: true }).click();
+
+ await expect.poll(async () => menu.evaluate((node) => node.scrollHeight > node.clientHeight)).toBe(true);
+
+ const before = await menu.evaluate((node) => node.scrollTop);
+ const box = await menu.boundingBox();
+ expect(box).toBeTruthy();
+
+ await page.mouse.move(box!.x + box!.width / 2, box!.y + box!.height - 24);
+ await page.mouse.down();
+ await page.mouse.move(box!.x + box!.width / 2, box!.y + 24, { steps: 12 });
+ await page.mouse.up();
+
+ await expect.poll(async () => menu.evaluate((node) => node.scrollTop)).toBeGreaterThan(before);
+ await expect(menu.getByRole('button', { name: 'Timed', exact: true })).toHaveAttribute('aria-pressed', 'true');
+ await menu.getByRole('button', { name: '5s', exact: true }).click();
+ await expect(menu.getByRole('button', { name: '5s', exact: true })).toHaveAttribute('aria-pressed', 'true');
+ });
+});
+
+test.describe('menu on a touchscreen at 800×400', () => {
+ test.use({ hasTouch: true, viewport: { width: 800, height: 400 } });
+
+ test('taps Timed without a drag', async ({ page }) => {
+ await gotoApp(page);
+ await page.getByRole('button', { name: 'Close Select club' }).click();
+ await page.getByRole('button', { name: 'Open menu' }).click();
+ const menu = page.getByRole('dialog', { name: 'Menu' });
+
+ await menu.getByRole('button', { name: 'Timed', exact: true }).tap();
+ await expect(menu.getByRole('button', { name: 'Timed', exact: true })).toHaveAttribute('aria-pressed', 'true');
+ await expect(menu.getByRole('button', { name: '5s', exact: true })).toHaveCount(1);
+ });
+});
+
+test('timed overlay hides after the chosen duration; hold stays until tap', async ({ page }) => {
+ await page.clock.install();
+ await gotoApp(page);
+ await page.getByRole('button', { name: 'Close Select club' }).click();
+
+ await withControlSocket(async (socket) => {
+ await simulateShot(socket);
+ });
+ await expect(page.locator('.live-panel__spotlight')).toHaveCount(0);
+
+ await page.getByRole('button', { name: 'Open menu' }).click();
+ await page.getByRole('button', { name: 'Timed', exact: true }).click();
+ await page.getByRole('button', { name: '5s', exact: true }).click();
+ await page.getByRole('button', { name: 'Close menu' }).click();
+
+ await withControlSocket(async (socket) => {
+ await simulateShot(socket);
+ });
+ await expect(page.locator('.live-panel__spotlight')).toBeVisible();
+ await page.clock.fastForward(5000);
+ await expect(page.locator('.live-panel__spotlight')).toHaveCount(0);
+
+ await page.getByRole('button', { name: 'Open menu' }).click();
+ await page.getByRole('button', { name: 'Hold', exact: true }).click();
+ await page.getByRole('button', { name: 'Close menu' }).click();
+
+ await withControlSocket(async (socket) => {
+ await simulateShot(socket);
+ });
+ await expect(page.locator('.live-panel__spotlight')).toBeVisible();
+ await page.locator('.live-panel__spotlight').click();
+ await expect(page.locator('.live-panel__spotlight')).toHaveCount(0);
+});
+
+
+
+
+
+ {isExperimental ? null : (
+ {confidenceLabel ?? measuredConfidence}
+ )}
) : null}
diff --git a/ui/src/components/ui/SegmentedControl.css b/ui/src/components/ui/SegmentedControl.css
index 6a3021d1..4a6a446c 100644
--- a/ui/src/components/ui/SegmentedControl.css
+++ b/ui/src/components/ui/SegmentedControl.css
@@ -1,6 +1,7 @@
.segmented-control {
display: flex;
width: 100%;
+ min-width: 0;
align-items: stretch;
gap: 3px;
padding: 3px;
@@ -10,10 +11,11 @@
}
.segmented-control__button {
- flex: 1;
+ flex: 1 1 0;
min-width: 0;
min-height: 44px;
- padding: var(--space-xs) var(--space-md);
+ padding: var(--space-xs) var(--space-sm);
+ overflow: hidden;
background: transparent;
border: none;
border-radius: 8px;
@@ -36,6 +38,13 @@
outline: none;
}
+.segmented-control__label {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
.segmented-control__button--active {
background: var(--color-accent-block);
color: var(--color-accent-fg);
diff --git a/ui/src/components/ui/SegmentedControl.test.tsx b/ui/src/components/ui/SegmentedControl.test.tsx
index 634a0617..b2eae192 100644
--- a/ui/src/components/ui/SegmentedControl.test.tsx
+++ b/ui/src/components/ui/SegmentedControl.test.tsx
@@ -16,6 +16,7 @@ describe('SegmentedControl', () => {
/>
);
expect(html).toContain('DARK');
+ expect(html).toContain('segmented-control__label');
expect(html).toContain('aria-pressed="true"');
expect(html).toContain('segmented-control__button--active');
expect(html).toContain('aria-pressed="false"');
diff --git a/ui/src/components/ui/SegmentedControl.tsx b/ui/src/components/ui/SegmentedControl.tsx
index ab2529fc..cc81cbd9 100644
--- a/ui/src/components/ui/SegmentedControl.tsx
+++ b/ui/src/components/ui/SegmentedControl.tsx
@@ -22,8 +22,9 @@ export function SegmentedControl