CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## v0.16.1 — 2026-09-19 14:00
+- **Smooth client-side sim clock with per-snapshot re-sync (ISS-007).** The left-pane "Time" display used to jump once per 1 s poll because it rendered the snapshot's `clockMs` verbatim. It now ticks smoothly on the client between polls: new hook `lib/useSimClock.ts` keeps an anchor `{clockMs, at, timeScale, paused}` and re-derives the display clock every ~100 ms as `anchor.clockMs + (now − at) × timeScale` — exactly the server's own tick model (`tickOnce`: real-time × timeScale), so client extrapolation mirrors authoritative game time. Every new snapshot re-anchors to server truth, bounding any drift by network latency only; while paused the display is frozen at the anchor value (advance 0). The pure core `advanceSimClock(anchor, nowMs)` is exported and unit-tested in node
+- **LeftPane consumes it for the `sim-clock` paragraph ONLY** (`components/LeftPane.tsx`): fed with EFFECTIVE controls `{timeScale: pendingScale ?? snapshot scale, paused}` so a slider drag or pause click takes effect on click/drag without waiting for a confirming snapshot; the `(paused)` suffix keeps coming from the effective paused flag. Right-pane deadline/penalty previews are untouched — they stay computed from the snapshot's `clockMs` (deterministic against server truth)
+- No server or OpenAPI changes — display-only client work
+- Tests: unit — new suite in `lib/useSimClock.test.ts` pins the extrapolation math (exact elapsed × scale advance, frozen while paused at any scale, zero-elapsed identity, clock-skew clamp never goes backwards, mirrors the tickOnce formula under the 2 s clamp). e2e (`panes.spec.ts`) — new test: at scale 1000 sample `sim-clock` three times ~1.3 s apart real time and assert the displayed clock strictly advances between CONSECUTIVE samples (with poll-only rendering a pair could straddle zero snapshots and not change), plus format check and a total-advance sanity bound
+- Verified: `tsc --noEmit` clean; unit suite green locally; e2e not run locally by design — CI verifies against an isolated stack
+
 ## v0.16.0 — 2026-09-19 12:18
 - **Weight-proportional fuel burn (ISS-005, part A).** Fuel no longer burns at a constant L/km — the instantaneous rate is proportional to total weight, `r(F) = k·(We + ρF)` L/km with We the empty weight and ρ = 0.8 kg/L (Jet-A1), so a heavier plane burns more per km and a tank gets lighter as it empties. The constant `k` is calibrated so a FULL tank burns exactly the catalog's old `burnPerKm`, keeping full-tank departure behavior identical to before; divergence only grows in flight as fuel drops off. Closed forms of `dF/dx = −k(We + ρF)` live in `lib/sim/movement.ts` (single source of truth):
   - `fuelAtWeighted(startFuel, burnPerKm, emptyWeightKg, maxFuel, distanceKm, progress)` — fuel remaining after flying `progress` of the leg (replaces the old constant-rate `fuelAt`, which is removed)

components/LeftPane.tsx

@@ -5,6 +5,7 @@ import type { PlaneState, StateSnapshot } from '@/lib/game/state';
 import { PLANE_TYPES } from '@/lib/game/catalog';
 import { formatCash, formatFuel, formatSimClock } from '@/lib/format';
 import { TIME_SCALES, scaleToSlider, sliderToScale } from '@/lib/timeScale';
+import { useSimClock } from '@/lib/useSimClock';
 import type { HoverTarget } from './hoverTypes';
 
 interface LeftPaneProps {
@@ -167,6 +168,12 @@ export default function LeftPane({ state, loading, error, onRefresh, onHover }:
 
   const displayedScale = pendingScale ?? timeScale;
 
+  // ISS-007: the clock ticks client-side between polls, re-syncing to server truth on every
+  // snapshot. Fed with EFFECTIVE controls so a scale drag / pause click takes effect immediately,
+  // not when the confirming snapshot lands. Only the sim-clock paragraph uses this — deadline and
+  // penalty previews stay snapshot-based (deterministic against the server clock).
+  const simClockMs = useSimClock(state, { timeScale: displayedScale, paused });
+
   return (
     <aside data-testid="left-pane" className="pane left-pane">
       <h2 className="pane-title">Assets</h2>
@@ -221,7 +228,7 @@ export default function LeftPane({ state, loading, error, onRefresh, onHover }:
           <section className="pane-section">
             <h3 className="pane-heading">Time</h3>
             <p data-testid="sim-clock" className="sim-clock">
-              {formatSimClock(state.simState.clockMs)}
+              {simClockMs !== null && formatSimClock(simClockMs)}
               {paused ? ' (paused)' : ''}
             </p>
             <div className="time-controls">

e2e/panes.spec.ts

@@ -4,6 +4,8 @@ import { test, expect, type Page } from '@playwright/test';
 // The panes render from the shell's single /api/state poll (lib/useGameState.ts); time
 // controls POST to /api/sim and refetch immediately, so UI assertions settle within a tick.
 
+const SCALE = 1000; // fastest sim speed — top of the v0.14.0 ladder (same convention as e2e/sim.spec.ts)
+
 interface SimState {
   clockMs: number;
   timeScale: number;
@@ -104,6 +106,40 @@ test('time controls: pause freezes the sim and the ladder slider sets timeScale'
   expect(after.simState.paused).toBe(false);
 });
 
+test('sim clock ticks smoothly between polls — seconds advance without waiting for a snapshot (ISS-007)', async ({ page }) => {
+  await page.goto('/');
+  const clock = page.getByTestId('sim-clock');
+  await expect(clock).toBeVisible({ timeout: 15_000 });
+
+  // Fastest scale so game seconds move visibly inside the sampling window.
+  const post = await page.request.post('/api/sim', { data: { timeScale: SCALE, paused: false } });
+  expect(post.status()).toBe(200);
+
+  // "YYYY-MM-DD HH:MM:SS UTC" → epoch ms (UTC). While running there is no "(paused)" suffix.
+  const sample = async () => {
+    const text = ((await clock.textContent()) ?? '').trim();
+    expect(text, `clock format: ${text}`).toMatch(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2} UTC$/);
+    return Date.parse(text.replace(' ', 'T').replace(' UTC', 'Z'));
+  };
+
+  // Three samples ~1.3 s apart real time: at scale 1000 each gap is ≈1300 game seconds, so the
+  // displayed clock must strictly advance between CONSECUTIVE samples — with the old poll-only
+  // rendering a sample pair could straddle zero snapshot updates and show no change at all.
+  const t0 = await sample();
+  await new Promise((r) => setTimeout(r, 1_300));
+  const t1 = await sample();
+  await new Promise((r) => setTimeout(r, 1_300));
+  const t2 = await sample();
+
+  expect(t1).toBeGreaterThan(t0);
+  expect(t2).toBeGreaterThan(t1);
+  // Sanity: ~2.6 s real × 1000 ≈ 2.6 M game ms — generous bounds keep slow CI boxes safe while
+  // still catching a frozen or wildly mis-scaled clock.
+  const total = t2 - t0;
+  expect(total).toBeGreaterThanOrEqual(1_000_000);
+  expect(total).toBeLessThanOrEqual(6_000_000);
+});
+
 test('slider commit keeps the chosen scale on screen until confirmed — no snap-back (ISS-001)', async ({ page }) => {
   test.setTimeout(60_000);
   await page.goto('/');

lib/useSimClock.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest';
+import { advanceSimClock, type SimClockAnchor } from './useSimClock';
+
+// ISS-007 (v0.16.1) — the pure extrapolation core of lib/useSimClock.ts. The hook itself is a
+// thin setInterval + re-sync wrapper covered by e2e (panes.spec.ts "ticks smoothly between polls");
+// this suite pins the math: game time advances real-time × timeScale, frozen while paused.
+
+const anchor = (over: Partial<SimClockAnchor> = {}): SimClockAnchor => ({
+  clockMs: 1_750_000_000_000,
+  at: 1_000_000,
+  timeScale: 1,
+  paused: false,
+  ...over,
+});
+
+describe('advanceSimClock', () => {
+  it('advances by exactly elapsed real-time × timeScale while running', () => {
+    expect(advanceSimClock(anchor(), 1_001_000)).toBe(1_750_000_000_000 + 1_000); // scale 1: 1 s real = 1 s game
+    expect(advanceSimClock(anchor({ timeScale: 25 }), 1_002_500)).toBe(1_750_000_000_000 + 62_500);
+    // The e2e scenario: scale 1000, 2.5 s real → 2 500 game seconds.
+    expect(advanceSimClock(anchor({ timeScale: 1000 }), 1_002_500)).toBe(1_750_000_000_000 + 2_500_000);
+  });
+
+  it('returns the anchor value exactly at zero elapsed', () => {
+    expect(advanceSimClock(anchor({ timeScale: 1000 }), 1_000_000)).toBe(1_750_000_000_000);
+  });
+
+  it('is frozen while paused regardless of elapsed or scale', () => {
+    const a = anchor({ timeScale: 1000, paused: true });
+    expect(advanceSimClock(a, 1_000_000)).toBe(1_750_000_000_000);
+    expect(advanceSimClock(a, 2_000_000)).toBe(1_750_000_000_000); // a full second later — still frozen
+  });
+
+  it('clamps to the anchor value when nowMs is before the anchor (clock skew), never backwards', () => {
+    expect(advanceSimClock(anchor({ timeScale: 1000 }), 999_999)).toBe(1_750_000_000_000);
+    expect(advanceSimClock(anchor({ paused: true }), 999_999)).toBe(1_750_000_000_000);
+  });
+
+  it('mirrors the server tick model (tickOnce): advance = elapsed × timeScale while actively polled', () => {
+    // lib/sim/engine.ts: clockMs += min(now − lastRealTickMs, MAX_TICK_ELAPSED_MS) × timeScale.
+    // For gaps under the 2 s clamp the client extrapolation is exactly the server's own formula.
+    const scale = 50;
+    for (const gap of [1, 250, 999, 1_999]) {
+      expect(advanceSimClock(anchor({ timeScale: scale }), 1_000_000 + gap)).toBe(
+        1_750_000_000_000 + gap * scale,
+      );
+    }
+  });
+});

lib/useSimClock.ts

@@ -0,0 +1,68 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import type { StateSnapshot } from './game/state';
+
+// ISS-007 (v0.16.1): the sim clock ticks smoothly on the CLIENT between polls instead of
+// jumping once per snapshot. The server's authoritative rate is exactly real-time × timeScale
+// (tickOnce in lib/sim/engine.ts: advance = min(elapsed, MAX_TICK_ELAPSED_MS) × timeScale), so
+// client-side extrapolation mirrors the server's own model. Every new snapshot re-anchors to
+// server truth, bounding any drift by network latency only.
+
+export interface SimClockAnchor {
+  // Server truth at anchor time — the snapshot's simState.clockMs.
+  clockMs: number;
+  // Date.now() when that snapshot was received.
+  at: number;
+  timeScale: number;
+  paused: boolean;
+}
+
+// Pure core of the extrapolation — mirrors tickOnce: while running, game time advances by
+// real-time × timeScale; while paused it is frozen (advance 0). nowMs before `at` clamps to
+// the anchor value instead of going backwards. Unit-testable in node.
+export function advanceSimClock(anchor: SimClockAnchor, nowMs: number): number {
+  if (anchor.paused) return anchor.clockMs;
+  return anchor.clockMs + Math.max(0, nowMs - anchor.at) * anchor.timeScale;
+}
+
+// ~10 fps display refresh — smooth for a seconds-precision wall clock without busy re-renders.
+const DISPLAY_TICK_MS = 100;
+
+export interface SimClockControls {
+  // EFFECTIVE controls (optimistic pending scale / current pause), not the snapshot's:
+  // UI changes take effect on click/drag without waiting for a confirming snapshot.
+  timeScale: number;
+  paused: boolean;
+}
+
+// Returns the display clockMs to render, or null until the first snapshot arrives.
+export function useSimClock(snapshot: StateSnapshot | null, controls: SimClockControls): number | null {
+  const anchorRef = useRef<SimClockAnchor | null>(null);
+  const [displayMs, setDisplayMs] = useState<number | null>(null);
+
+  // Re-sync on every snapshot AND effective-control change: snap to server truth. The snapshot
+  // object is fresh per poll (useGameState), so this runs once per poll cycle as well.
+  useEffect(() => {
+    if (!snapshot) return;
+    anchorRef.current = {
+      clockMs: snapshot.simState.clockMs,
+      at: Date.now(),
+      timeScale: controls.timeScale,
+      paused: controls.paused,
+    };
+    setDisplayMs(advanceSimClock(anchorRef.current, Date.now()));
+  }, [snapshot, controls.timeScale, controls.paused]);
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      const anchor = anchorRef.current;
+      if (anchor) setDisplayMs(advanceSimClock(anchor, Date.now()));
+    }, DISPLAY_TICK_MS);
+    return () => clearInterval(id);
+  }, []);
+
+  // First paint after a snapshot arrives happens before the re-sync effect runs — show the
+  // snapshot value directly so the clock never blanks for a frame.
+  return displayMs ?? (snapshot ? snapshot.simState.clockMs : null);
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flight-ops",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",