From 96f8f7e08ea0bc2453439ab5254357b3cfbe4b24 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 13 Apr 2026 23:41:13 +0000
Subject: [PATCH 1/4] Initial plan


From 32d304bb7631363520c70fa28a8ac369140189e8 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 14 Apr 2026 00:09:16 +0000
Subject: [PATCH 2/4] Add speed history tracking and trend chart to all games;
 add getSpeedHistory tests

Agent-Logs-Url: https://github.com/acrosman/BrainSpeedExercises/sessions/60497adb-33a4-4f98-9fc7-52414d0e292d

Co-authored-by: acrosman <2972053+acrosman@users.noreply.github.com>
---
 .../tests/trendChartService.test.js           | 156 ++++++++++++++++++
 app/components/trendChartService.js           |  84 ++++++++++
 app/games/directional-processing/game.js      |  20 +++
 app/games/directional-processing/index.js     |  23 +++
 .../directional-processing/interface.html     |  13 ++
 .../directional-processing/tests/game.test.js |  33 ++++
 .../tests/index.test.js                       |   1 +
 app/games/fast-piggie/game.js                 |  19 +++
 app/games/fast-piggie/index.js                |  24 +++
 app/games/fast-piggie/interface.html          |  13 ++
 app/games/fast-piggie/tests/game.test.js      |  43 +++++
 app/games/fast-piggie/tests/index.test.js     |   1 +
 app/games/field-of-view/interface.html        |   8 +-
 app/games/field-of-view/render.js             |  45 ++---
 app/games/high-speed-memory/game.js           |  19 +++
 app/games/high-speed-memory/index.js          |  25 +++
 app/games/high-speed-memory/interface.html    |  13 ++
 .../high-speed-memory/tests/game.test.js      |  38 +++++
 .../high-speed-memory/tests/index.test.js     |   1 +
 app/games/object-track/game.js                |  16 ++
 app/games/object-track/index.js               |  25 +++
 app/games/object-track/interface.html         |  13 ++
 app/games/object-track/tests/game.test.js     |  32 ++++
 app/games/object-track/tests/index.test.js    |   1 +
 app/games/orbit-sprite-memory/game.js         |  19 +++
 app/games/orbit-sprite-memory/index.js        |  24 +++
 app/games/orbit-sprite-memory/interface.html  |  13 ++
 .../orbit-sprite-memory/tests/game.test.js    |  38 +++++
 .../orbit-sprite-memory/tests/index.test.js   |   1 +
 app/games/otter-stop/game.js                  |  19 +++
 app/games/otter-stop/index.js                 |  23 +++
 app/games/otter-stop/interface.html           |  13 ++
 app/games/otter-stop/tests/game.test.js       |  32 ++++
 app/games/otter-stop/tests/index.test.js      |   1 +
 app/games/sound-sweep/game.js                 |  20 +++
 app/games/sound-sweep/index.js                |  23 +++
 app/games/sound-sweep/interface.html          |  13 ++
 app/games/sound-sweep/tests/game.test.js      |  33 ++++
 app/games/sound-sweep/tests/index.test.js     |   1 +
 app/style.css                                 |  38 +++++
 40 files changed, 940 insertions(+), 37 deletions(-)
 create mode 100644 app/components/tests/trendChartService.test.js
 create mode 100644 app/components/trendChartService.js

diff --git a/app/components/tests/trendChartService.test.js b/app/components/tests/trendChartService.test.js
new file mode 100644
index 0000000..33d3f12
--- /dev/null
+++ b/app/components/tests/trendChartService.test.js
@@ -0,0 +1,156 @@
+/** @jest-environment jsdom */
+/**
+ * trendChartService.test.js — Unit tests for the centralized trend chart service.
+ *
+ * Exercises buildPolylinePoints and renderTrendChart against simple inputs,
+ * edge cases, and null-element guards.
+ *
+ * @file Tests for app/components/trendChartService.js
+ */
+
+import { describe, test, expect } from '@jest/globals';
+import { buildPolylinePoints, renderTrendChart } from '../trendChartService.js';
+
+// ── buildPolylinePoints ───────────────────────────────────────────────────────
+
+describe('buildPolylinePoints', () => {
+  test('returns empty string for an empty array', () => {
+    expect(buildPolylinePoints([])).toBe('');
+  });
+
+  test('returns empty string for null input', () => {
+    expect(buildPolylinePoints(null)).toBe('');
+  });
+
+  test('returns empty string for undefined input', () => {
+    expect(buildPolylinePoints(undefined)).toBe('');
+  });
+
+  test('returns a single point string for a one-element array', () => {
+    const result = buildPolylinePoints([300]);
+    expect(result).not.toBe('');
+    expect(result.split(' ').length).toBe(1);
+  });
+
+  test('returns three coordinate pairs for a three-element array', () => {
+    const result = buildPolylinePoints([200, 150, 100]);
+    expect(result.split(' ').length).toBe(3);
+  });
+
+  test('each coordinate pair contains an x and y value separated by a comma', () => {
+    const result = buildPolylinePoints([100, 200]);
+    result.split(' ').forEach((pair) => {
+      expect(pair).toMatch(/^-?\d+(\.\d+)?,-?\d+(\.\d+)?$/);
+    });
+  });
+
+  test('uses the full chart width between first and last point', () => {
+    const result = buildPolylinePoints([100, 200]);
+    const pairs = result.split(' ').map((p) => p.split(',').map(Number));
+    // With CHART_PAD=10 and CHART_WIDTH=300, first x should be ~10, last x ~290
+    expect(pairs[0][0]).toBeCloseTo(10, 1);
+    expect(pairs[1][0]).toBeCloseTo(290, 1);
+  });
+
+  test('places a single entry at leftmost x position', () => {
+    const result = buildPolylinePoints([500]);
+    const [x] = result.split(',').map(Number);
+    expect(x).toBeCloseTo(10, 1);
+  });
+
+  test('handles all-identical values without division errors', () => {
+    expect(() => buildPolylinePoints([100, 100, 100])).not.toThrow();
+    const result = buildPolylinePoints([100, 100, 100]);
+    expect(result.split(' ').length).toBe(3);
+  });
+
+  test('larger values produce higher y coordinates (lower on SVG = larger value)', () => {
+    // With values [100, 200]: value 100 (min) → lower y, value 200 (max) → higher y
+    const result = buildPolylinePoints([100, 200]);
+    const pairs = result.split(' ').map((p) => p.split(',').map(Number));
+    // value 100 is at min: y should be near bottom (large y number)
+    // value 200 is at max: y should be near top (small y number)
+    expect(pairs[0][1]).toBeGreaterThan(pairs[1][1]);
+  });
+});
+
+// ── renderTrendChart ──────────────────────────────────────────────────────────
+
+describe('renderTrendChart', () => {
+  test('updates lineEl points attribute for a non-empty values array', () => {
+    const lineEl = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+    const emptyEl = document.createElement('p');
+    const latestEl = document.createElement('strong');
+
+    renderTrendChart({ lineEl, emptyEl, latestEl }, [200, 150, 100], 500);
+
+    expect(lineEl.getAttribute('points')).not.toBe('');
+    expect(emptyEl.hidden).toBe(true);
+    expect(latestEl.textContent).toBe('100');
+  });
+
+  test('clears the lineEl and shows emptyEl when values array is empty', () => {
+    const lineEl = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+    lineEl.setAttribute('points', '10,10 20,20');
+    const emptyEl = document.createElement('p');
+    const latestEl = document.createElement('strong');
+
+    renderTrendChart({ lineEl, emptyEl, latestEl }, [], 400);
+
+    expect(lineEl.getAttribute('points')).toBe('');
+    expect(emptyEl.hidden).toBe(false);
+    expect(latestEl.textContent).toBe('400');
+  });
+
+  test('uses currentValue for latestEl when values array is empty', () => {
+    const latestEl = document.createElement('strong');
+    renderTrendChart(
+      { lineEl: null, emptyEl: null, latestEl },
+      [],
+      '350',
+    );
+    expect(latestEl.textContent).toBe('350');
+  });
+
+  test('uses the last value in the array as the latest value', () => {
+    const latestEl = document.createElement('strong');
+    renderTrendChart(
+      { lineEl: null, emptyEl: null, latestEl },
+      [500, 450, 380],
+      500,
+    );
+    expect(latestEl.textContent).toBe('380');
+  });
+
+  test('tolerates null lineEl without throwing', () => {
+    expect(() => renderTrendChart(
+      { lineEl: null, emptyEl: null, latestEl: null },
+      [100, 200],
+      300,
+    )).not.toThrow();
+  });
+
+  test('tolerates null emptyEl without throwing', () => {
+    const lineEl = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+    expect(() => renderTrendChart(
+      { lineEl, emptyEl: null, latestEl: null },
+      [100, 200],
+      300,
+    )).not.toThrow();
+  });
+
+  test('tolerates null latestEl without throwing', () => {
+    const lineEl = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+    expect(() => renderTrendChart(
+      { lineEl, emptyEl: null, latestEl: null },
+      [],
+      300,
+    )).not.toThrow();
+  });
+
+  test('renders empty string for latestEl when currentValue is null and values is empty', () => {
+    const latestEl = document.createElement('strong');
+    renderTrendChart({ lineEl: null, emptyEl: null, latestEl }, [], null);
+    expect(latestEl.textContent).toBe('');
+  });
+});
diff --git a/app/components/trendChartService.js b/app/components/trendChartService.js
new file mode 100644
index 0000000..eaac0cb
--- /dev/null
+++ b/app/components/trendChartService.js
@@ -0,0 +1,84 @@
+/**
+ * trendChartService.js — Centralized trend chart service for BrainSpeedExercises.
+ *
+ * Provides shared SVG polyline chart generation and rendering utilities used by
+ * all game plugins to display a speed/difficulty metric history during gameplay.
+ * Each game tracks its own history array and passes it here for rendering.
+ *
+ * @file Centralized trend chart rendering service.
+ */
+
+// ── Chart geometry constants ───────────────────────────────────────────────────
+
+/** SVG viewBox width in user units. */
+const CHART_WIDTH = 300;
+
+/** SVG viewBox height in user units. */
+const CHART_HEIGHT = 120;
+
+/** Padding from each edge of the SVG in user units. */
+const CHART_PAD = 10;
+
+// ── Core chart helpers ────────────────────────────────────────────────────────
+
+/**
+ * Build an SVG polyline `points` attribute string from an array of numeric values.
+ *
+ * Maps each value onto an (x, y) coordinate within the padded SVG viewBox.
+ * The x axis represents progression over time (left = first, right = last);
+ * the y axis is scaled so the minimum value sits near the bottom and the
+ * maximum near the top (lower values appear lower on the chart).
+ *
+ * @param {number[]} values - Ordered array of numeric metric values to plot.
+ * @returns {string} Space-separated `"x,y"` coordinate pairs, or `""` when
+ *   the array is empty or falsy.
+ */
+export function buildPolylinePoints(values) {
+  if (!values || values.length === 0) {
+    return '';
+  }
+
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const span = Math.max(max - min, 1);
+  const denominator = Math.max(values.length - 1, 1);
+
+  return values.map((value, index) => {
+    const x = CHART_PAD + ((CHART_WIDTH - CHART_PAD * 2) * index) / denominator;
+    const normalized = (value - min) / span;
+    const y = CHART_HEIGHT - CHART_PAD - normalized * (CHART_HEIGHT - CHART_PAD * 2);
+    return `${x.toFixed(2)},${y.toFixed(2)}`;
+  }).join(' ');
+}
+
+/**
+ * Render (or update) a speed/difficulty trend chart with the supplied history.
+ *
+ * Accepts a plain object of nullable element references so callers can pass
+ * whatever subset of the chart elements they have wired up without crashing.
+ *
+ * @param {{
+ *   lineEl: SVGPolylineElement|null,
+ *   emptyEl: HTMLElement|null,
+ *   latestEl: HTMLElement|null,
+ * }} els - References to the chart's key DOM nodes.
+ * @param {number[]} values - Ordered array of numeric metric values to plot.
+ * @param {number|string} currentValue - The value to display when `values` is
+ *   empty (typically the metric's starting/default value).
+ */
+export function renderTrendChart(els, values, currentValue) {
+  const latest = values.length > 0 ? values[values.length - 1] : currentValue;
+
+  if (els.latestEl) {
+    els.latestEl.textContent = latest != null ? String(latest) : '';
+  }
+
+  if (!els.lineEl) return;
+
+  const points = buildPolylinePoints(values);
+  els.lineEl.setAttribute('points', points);
+
+  if (els.emptyEl) {
+    els.emptyEl.hidden = points.length > 0;
+  }
+}
diff --git a/app/games/directional-processing/game.js b/app/games/directional-processing/game.js
index 6faa04d..66e79d4 100644
--- a/app/games/directional-processing/game.js
+++ b/app/games/directional-processing/game.js
@@ -68,6 +68,13 @@ let consecutiveCorrect = 0;
 /** @type {number} */
 let consecutiveWrong = 0;
 
+/**
+ * Session history of display durations in ms, one entry per completed trial.
+ * Used to render the in-game speed trend chart.
+ * @type {number[]}
+ */
+let speedHistory = [];
+
 // ── Exported functions ────────────────────────────────────────────────────────
 
 /**
@@ -82,6 +89,7 @@ export function initGame() {
   trialsCompleted = 0;
   consecutiveCorrect = 0;
   consecutiveWrong = 0;
+  speedHistory = [];
 }
 
 /**
@@ -157,6 +165,8 @@ export function recordTrial({ success }) {
     }
   }
 
+  speedHistory.push(LEVELS[currentLevel].displayDurationMs);
+
   return { level: currentLevel, consecutiveCorrect, consecutiveWrong };
 }
 
@@ -222,3 +232,13 @@ export function getConsecutiveWrong() {
 export function isRunning() {
   return running;
 }
+
+/**
+ * Get the session speed history as an array of display durations in ms.
+ * One entry is appended per completed trial after any staircase adjustment.
+ *
+ * @returns {number[]}
+ */
+export function getSpeedHistory() {
+  return [...speedHistory];
+}
diff --git a/app/games/directional-processing/index.js b/app/games/directional-processing/index.js
index ad023d7..dfec98a 100644
--- a/app/games/directional-processing/index.js
+++ b/app/games/directional-processing/index.js
@@ -16,6 +16,7 @@ import { playFeedbackSound } from '../../components/audioService.js';
 import { returnToMainMenu } from '../../components/gameUtils.js';
 import { saveScore } from '../../components/scoreService.js';
 import * as timerService from '../../components/timerService.js';
+import { renderTrendChart } from '../../components/trendChartService.js';
 
 /** Game identifier used for progress persistence (must match manifest.json id). */
 const GAME_ID = 'directional-processing';
@@ -57,6 +58,12 @@ let _trialsEl = null;
 let _streakEl = null;
 /** @type {HTMLElement|null} */
 let _sessionTimerEl = null;
+/** @type {SVGPolylineElement|null} */
+let _trendLineEl = null;
+/** @type {HTMLElement|null} */
+let _trendEmptyEl = null;
+/** @type {HTMLElement|null} */
+let _trendLatestEl = null;
 /** @type {HTMLElement|null} */
 let _finalLevelEl = null;
 /** @type {HTMLElement|null} */
@@ -178,6 +185,17 @@ export function updateStats() {
   if (_streakEl) _streakEl.textContent = String(streak);
 }
 
+/**
+ * Render the speed trend chart with the latest display-duration history.
+ */
+export function updateTrendChart() {
+  renderTrendChart(
+    { lineEl: _trendLineEl, emptyEl: _trendEmptyEl, latestEl: _trendLatestEl },
+    game.getSpeedHistory(),
+    game.getCurrentLevelConfig().displayDurationMs,
+  );
+}
+
 /**
  * Apply a brief colored flash to the stage to indicate correct/incorrect.
  *
@@ -328,6 +346,7 @@ export function handleDirectionResponse(direction) {
   game.recordTrial({ success });
 
   updateStats();
+  updateTrendChart();
   playFeedbackSound(success);
   flashStageFeedback(success);
 
@@ -419,6 +438,9 @@ function init(gameContainer) {
   _trialsEl       = _container.querySelector('#dp-trials');
   _streakEl       = _container.querySelector('#dp-streak');
   _sessionTimerEl = _container.querySelector('#dp-session-timer');
+  _trendLineEl    = _container.querySelector('#dp-trend-line');
+  _trendEmptyEl   = _container.querySelector('#dp-trend-empty');
+  _trendLatestEl  = _container.querySelector('#dp-trend-latest');
   _finalLevelEl   = _container.querySelector('#dp-final-level');
   _finalScoreEl   = _container.querySelector('#dp-final-score');
   _finalTrialsEl  = _container.querySelector('#dp-final-trials');
@@ -530,6 +552,7 @@ function reset() {
   clearDirectionHighlights();
   setDirectionButtonsEnabled(false);
   updateStats();
+  updateTrendChart();
 }
 
 export default {
diff --git a/app/games/directional-processing/interface.html b/app/games/directional-processing/interface.html
index b39956c..71c7a8b 100644
--- a/app/games/directional-processing/interface.html
+++ b/app/games/directional-processing/interface.html
@@ -69,6 +69,19 @@ <h3>How to Play</h3>
     <!-- Live feedback region (correct / incorrect). -->
     <div id="dp-feedback" class="dp-feedback" role="status" aria-live="polite"></div>
 
+    <!-- Speed trend chart -->
+    <section class="game-trend" aria-labelledby="dp-trend-title">
+      <h4 id="dp-trend-title">Speed Trend (ms)</h4>
+      <svg id="dp-trend-chart" class="game-trend__chart" viewBox="0 0 300 120" role="img"
+        aria-label="Display time trend over recent trials">
+        <polyline id="dp-trend-line" fill="none" stroke="currentColor" stroke-width="2" points=""></polyline>
+      </svg>
+      <p id="dp-trend-empty" class="game-trend__empty">Complete a trial to populate chart.</p>
+      <p class="game-trend__meta">
+        Latest: <strong id="dp-trend-latest">--</strong> ms
+      </p>
+    </section>
+
     <div class="dp-controls">
       <button id="dp-stop-btn" type="button" class="game-btn game-btn--secondary">
         End Game
diff --git a/app/games/directional-processing/tests/game.test.js b/app/games/directional-processing/tests/game.test.js
index 28f0f53..9fa285a 100644
--- a/app/games/directional-processing/tests/game.test.js
+++ b/app/games/directional-processing/tests/game.test.js
@@ -28,6 +28,7 @@ import {
   getConsecutiveCorrect,
   getConsecutiveWrong,
   isRunning,
+  getSpeedHistory,
 } from '../game.js';
 
 beforeEach(() => {
@@ -277,3 +278,35 @@ describe('getCurrentLevelConfig', () => {
     expect(getCurrentLevelConfig()).toEqual(LEVELS[1]);
   });
 });
+
+// ── getSpeedHistory ───────────────────────────────────────────────────────────
+
+describe('getSpeedHistory', () => {
+  test('returns empty array before any trials', () => {
+    expect(getSpeedHistory()).toEqual([]);
+  });
+
+  test('appends one entry per completed trial', () => {
+    startGame();
+    recordTrial({ success: true });
+    recordTrial({ success: false });
+    const history = getSpeedHistory();
+    expect(history).toHaveLength(2);
+    history.forEach((v) => expect(typeof v).toBe('number'));
+  });
+
+  test('returns a copy so external mutations do not affect state', () => {
+    startGame();
+    recordTrial({ success: true });
+    const h = getSpeedHistory();
+    h.pop();
+    expect(getSpeedHistory()).toHaveLength(1);
+  });
+
+  test('resets to empty after initGame', () => {
+    startGame();
+    recordTrial({ success: true });
+    initGame();
+    expect(getSpeedHistory()).toEqual([]);
+  });
+});
diff --git a/app/games/directional-processing/tests/index.test.js b/app/games/directional-processing/tests/index.test.js
index 97dbab0..18ad091 100644
--- a/app/games/directional-processing/tests/index.test.js
+++ b/app/games/directional-processing/tests/index.test.js
@@ -36,6 +36,7 @@ jest.unstable_mockModule('../game.js', () => ({
   getConsecutiveCorrect: jest.fn(() => 1),
   getConsecutiveWrong:   jest.fn(() => 0),
   isRunning:           jest.fn(() => true),
+  getSpeedHistory:     jest.fn(() => []),
 }));
 
 jest.unstable_mockModule('../gabor.js', () => ({
diff --git a/app/games/fast-piggie/game.js b/app/games/fast-piggie/game.js
index 2c82ac6..d371635 100644
--- a/app/games/fast-piggie/game.js
+++ b/app/games/fast-piggie/game.js
@@ -51,6 +51,13 @@ let mostRounds = 0;
 let mostGuineaPigs = 0;
 let topSpeedMs = null; // Lower is better
 
+/**
+ * Session history of display durations in ms, one entry per round.
+ * Used to render the in-game speed trend chart.
+ * @type {number[]}
+ */
+let speedHistory = [];
+
 /**
  * Initialize (or reset) all game state.
  */
@@ -64,6 +71,7 @@ export function initGame() {
   speedIncreaseNext = false;
   consecutiveCorrect = 0;
   consecutiveWrong = 0;
+  speedHistory = [];
 }
 
 /**
@@ -229,6 +237,7 @@ export function addScore(guineaPigsThisRound, answerSpeedMs) {
   if (typeof answerSpeedMs === 'number' && (topSpeedMs === null || answerSpeedMs < topSpeedMs)) {
     topSpeedMs = answerSpeedMs;
   }
+  speedHistory.push(calculateDisplayDuration(speedLevel));
 }
 
 /**
@@ -251,6 +260,7 @@ export function addMiss(guineaPigsThisRound) {
   if (typeof guineaPigsThisRound === 'number' && guineaPigsThisRound > mostGuineaPigs) {
     mostGuineaPigs = guineaPigsThisRound;
   }
+  speedHistory.push(calculateDisplayDuration(speedLevel));
 }
 
 /**
@@ -331,3 +341,12 @@ export function getConsecutiveWrong() {
 export function isRunning() {
   return running;
 }
+
+/**
+ * Get the session speed history as an array of display durations in ms.
+ * One entry is appended per round (correct or missed) after any staircase adjustment.
+ * @returns {number[]}
+ */
+export function getSpeedHistory() {
+  return [...speedHistory];
+}
diff --git a/app/games/fast-piggie/index.js b/app/games/fast-piggie/index.js
index 7190abd..e81e2fe 100644
--- a/app/games/fast-piggie/index.js
+++ b/app/games/fast-piggie/index.js
@@ -12,6 +12,7 @@ import { playSuccessSound, playFailureSound } from '../../components/audioServic
 import * as timerService from '../../components/timerService.js';
 import { saveScore } from '../../components/scoreService.js';
 import { returnToMainMenu } from '../../components/gameUtils.js';
+import { renderTrendChart } from '../../components/trendChartService.js';
 
 /** Number of pixels to trim from each side of the sprite-sheet centre seam. */
 const SPRITE_INSET = 2;
@@ -204,6 +205,13 @@ let _finalHighScoreEl = null;
 /** @type {HTMLElement|null} */
 let _sessionTimerEl = null;
 
+/** @type {SVGPolylineElement|null} */
+let _trendLineEl = null;
+/** @type {HTMLElement|null} */
+let _trendEmptyEl = null;
+/** @type {HTMLElement|null} */
+let _trendLatestEl = null;
+
 // Game state
 let _images = null; // [commonImage, outlierImage]
 let _currentRound = null; // { wedgeCount, displayDurationMs, outlierWedgeIndex, slotAssignment }
@@ -221,6 +229,17 @@ function _updateStats() {
   if (_displayTimeEl) _displayTimeEl.textContent = game.getCurrentDifficulty().displayDurationMs;
 }
 
+/**
+ * Renders the speed trend chart with the latest history.
+ */
+function _updateTrendChart() {
+  renderTrendChart(
+    { lineEl: _trendLineEl, emptyEl: _trendEmptyEl, latestEl: _trendLatestEl },
+    game.getSpeedHistory(),
+    game.getCurrentDifficulty().displayDurationMs,
+  );
+}
+
 /**
  * Triggers a visual flash for correct/wrong answers.
  * @param {string} type - 'correct' or 'wrong'
@@ -480,6 +499,7 @@ function _resolveRound(wedge) {
   }
 
   _updateStats();
+  _updateTrendChart();
   // Auto-advance to next round after a short delay.
   if (game.isRunning()) {
     setTimeout(() => {
@@ -517,6 +537,9 @@ export default {
     _finalScoreEl = container.querySelector('#fp-final-score');
     _finalHighScoreEl = container.querySelector('#fp-final-high-score');
     _sessionTimerEl = container.querySelector('#fp-session-timer');
+    _trendLineEl = container.querySelector('#fp-trend-line');
+    _trendEmptyEl = container.querySelector('#fp-trend-empty');
+    _trendLatestEl = container.querySelector('#fp-trend-latest');
 
     // Pre-load images
     const base = new URL('../fast-piggie/images/', import.meta.url).href;
@@ -622,6 +645,7 @@ export default {
       _ctx.clearRect(0, 0, _canvas.width, _canvas.height);
     }
     _updateStats();
+    _updateTrendChart();
     _feedbackEl.textContent = '';
     _stopBtn.hidden = false;
     if (_instructionsEl) _instructionsEl.hidden = false;
diff --git a/app/games/fast-piggie/interface.html b/app/games/fast-piggie/interface.html
index 13df62f..dec3151 100644
--- a/app/games/fast-piggie/interface.html
+++ b/app/games/fast-piggie/interface.html
@@ -47,6 +47,19 @@ <h3>How to Play</h3>
     <!-- Screen-reader-only feedback region: assertive = interrupts immediately -->
     <div id="fp-feedback" role="status" aria-live="assertive" aria-atomic="true" class="fp-feedback sr-only"></div>
 
+    <!-- Speed trend chart -->
+    <section class="game-trend" aria-labelledby="fp-trend-title">
+      <h4 id="fp-trend-title">Speed Trend (ms)</h4>
+      <svg id="fp-trend-chart" class="game-trend__chart" viewBox="0 0 300 120" role="img"
+        aria-label="Display time trend over recent rounds">
+        <polyline id="fp-trend-line" fill="none" stroke="currentColor" stroke-width="2" points=""></polyline>
+      </svg>
+      <p id="fp-trend-empty" class="game-trend__empty">Complete a round to populate chart.</p>
+      <p class="game-trend__meta">
+        Latest: <strong id="fp-trend-latest">--</strong> ms
+      </p>
+    </section>
+
     <!-- Controls -->
     <div class="fp-controls">
       <button id="fp-stop-btn" class="game-btn game-btn--secondary">
diff --git a/app/games/fast-piggie/tests/game.test.js b/app/games/fast-piggie/tests/game.test.js
index 44c97cd..43a777b 100644
--- a/app/games/fast-piggie/tests/game.test.js
+++ b/app/games/fast-piggie/tests/game.test.js
@@ -19,6 +19,7 @@ import {
   getConsecutiveWrong,
   getCurrentDifficulty,
   isRunning,
+  getSpeedHistory,
 } from '../game.js';
 
 beforeEach(() => {
@@ -599,3 +600,45 @@ describe('getBestStats()', () => {
     expect(stats.mostRounds).toBeGreaterThanOrEqual(2);
   });
 });
+
+// ── getSpeedHistory ───────────────────────────────────────────────────────────
+
+describe('getSpeedHistory()', () => {
+  it('returns empty array before any rounds', () => {
+    expect(getSpeedHistory()).toEqual([]);
+  });
+
+  it('appends an entry after addScore()', () => {
+    startGame();
+    generateRound();
+    addScore(3, 0);
+    const history = getSpeedHistory();
+    expect(history).toHaveLength(1);
+    expect(typeof history[0]).toBe('number');
+  });
+
+  it('appends an entry after addMiss()', () => {
+    startGame();
+    generateRound();
+    addMiss(0);
+    const history = getSpeedHistory();
+    expect(history).toHaveLength(1);
+  });
+
+  it('returns a copy so mutations do not affect internal state', () => {
+    startGame();
+    generateRound();
+    addScore(3, 0);
+    const h = getSpeedHistory();
+    h.pop();
+    expect(getSpeedHistory()).toHaveLength(1);
+  });
+
+  it('resets to empty after initGame()', () => {
+    startGame();
+    generateRound();
+    addScore(3, 0);
+    initGame();
+    expect(getSpeedHistory()).toEqual([]);
+  });
+});
diff --git a/app/games/fast-piggie/tests/index.test.js b/app/games/fast-piggie/tests/index.test.js
index d9d30b4..24844ab 100644
--- a/app/games/fast-piggie/tests/index.test.js
+++ b/app/games/fast-piggie/tests/index.test.js
@@ -43,6 +43,7 @@ jest.unstable_mockModule('../game.js', () => ({
     displayDurationMs: 2000,
   })),
   isRunning: jest.fn(() => true),
+  getSpeedHistory: jest.fn(() => []),
   getBestStats: jest.fn(() => ({
     maxScore: 3,
     mostRounds: 5,
diff --git a/app/games/field-of-view/interface.html b/app/games/field-of-view/interface.html
index b9b3fc3..35cb08c 100644
--- a/app/games/field-of-view/interface.html
+++ b/app/games/field-of-view/interface.html
@@ -61,14 +61,14 @@ <h4 class="fov-location-header">Which Square Was the Toy In</h4>
 
     <div id="fov-feedback" class="fov-feedback" role="status" aria-live="polite"></div>
 
-    <section class="fov-trend" aria-labelledby="fov-trend-title">
+    <section class="game-trend" aria-labelledby="fov-trend-title">
       <h4 id="fov-trend-title">Threshold Trend (ms)</h4>
-      <svg id="fov-trend-chart" class="fov-trend__chart" viewBox="0 0 300 120" role="img"
+      <svg id="fov-trend-chart" class="game-trend__chart" viewBox="0 0 300 120" role="img"
         aria-label="Threshold trend over recent trials">
         <polyline id="fov-trend-line" fill="none" stroke="currentColor" stroke-width="2" points=""></polyline>
       </svg>
-      <p id="fov-trend-empty" class="fov-trend__empty">Complete a trial to populate chart.</p>
-      <p class="fov-trend__meta">
+      <p id="fov-trend-empty" class="game-trend__empty">Complete a trial to populate chart.</p>
+      <p class="game-trend__meta">
         Latest: <strong id="fov-trend-latest">500</strong> ms
       </p>
     </section>
diff --git a/app/games/field-of-view/render.js b/app/games/field-of-view/render.js
index cc5be20..3d113a9 100644
--- a/app/games/field-of-view/render.js
+++ b/app/games/field-of-view/render.js
@@ -9,6 +9,8 @@
  * @file Field of View rendering helpers.
  */
 
+import { buildPolylinePoints, renderTrendChart } from '../../components/trendChartService.js';
+
 /** Path to Field of View image assets from renderer root. */
 export const IMAGES_BASE_PATH = 'games/field-of-view/images/';
 
@@ -65,6 +67,9 @@ export function createStimulusImage(icon) {
 /**
  * Build SVG point string for threshold history polyline.
  *
+ * Delegates to the centralized trendChartService so all games share
+ * the same chart geometry logic.
+ *
  * @param {Array<{ thresholdMs: number }>} history
  * @returns {string}
  */
@@ -72,24 +77,7 @@ export function buildTrendPolylinePoints(history) {
   if (!history || history.length === 0) {
     return '';
   }
-
-  const width = 300;
-  const height = 120;
-  const pad = 10;
-
-  const values = history.map((entry) => entry.thresholdMs);
-  const min = Math.min(...values);
-  const max = Math.max(...values);
-  const span = Math.max(max - min, 1);
-
-  const denominator = Math.max(history.length - 1, 1);
-
-  return history.map((entry, index) => {
-    const x = pad + ((width - pad * 2) * index) / denominator;
-    const normalized = (entry.thresholdMs - min) / span;
-    const y = height - pad - normalized * (height - pad * 2);
-    return `${x.toFixed(2)},${y.toFixed(2)}`;
-  }).join(' ');
+  return buildPolylinePoints(history.map((entry) => entry.thresholdMs));
 }
 
 /**
@@ -166,13 +154,13 @@ export function updateStats(els, stats) {
  * @param {number} currentSoaMs - Current SOA used when history is empty.
  */
 export function renderThresholdTrend(els, history, currentSoaMs) {
-  const latest = history.length > 0
-    ? history[history.length - 1].thresholdMs
-    : currentSoaMs;
+  const values = history.map((entry) => entry.thresholdMs);
 
-  if (els.trendLatestEl) {
-    els.trendLatestEl.textContent = formatMs(latest);
-  }
+  renderTrendChart(
+    { lineEl: els.trendLineEl, emptyEl: els.trendEmptyEl, latestEl: els.trendLatestEl },
+    values,
+    formatMs(currentSoaMs),
+  );
 
   if (els.finalBestThresholdEl) {
     const best = history.length > 0
@@ -180,15 +168,6 @@ export function renderThresholdTrend(els, history, currentSoaMs) {
       : currentSoaMs;
     els.finalBestThresholdEl.textContent = formatMs(best);
   }
-
-  if (!els.trendLineEl) return;
-
-  const points = buildTrendPolylinePoints(history);
-  els.trendLineEl.setAttribute('points', points);
-
-  if (els.trendEmptyEl) {
-    els.trendEmptyEl.hidden = points.length > 0;
-  }
 }
 
 /**
diff --git a/app/games/high-speed-memory/game.js b/app/games/high-speed-memory/game.js
index 3292a7b..74af5c8 100644
--- a/app/games/high-speed-memory/game.js
+++ b/app/games/high-speed-memory/game.js
@@ -73,6 +73,13 @@ let running = false;
 /** @type {number|null} */
 let startTime = null;
 
+/**
+ * Session history of display durations in ms, one entry per completed round.
+ * Used to render the in-game speed trend chart.
+ * @type {number[]}
+ */
+let speedHistory = [];
+
 /**
  * Initialize (or reset) all game state.
  */
@@ -84,6 +91,7 @@ export function initGame() {
   consecutiveWrongRounds = 0;
   running = false;
   startTime = null;
+  speedHistory = [];
 }
 
 /**
@@ -204,6 +212,7 @@ export function completeRound() {
     level += 1;
     consecutiveCorrectRounds = 0;
   }
+  speedHistory.push(getDisplayDurationMs(level));
 }
 
 /**
@@ -218,6 +227,7 @@ export function resetConsecutiveRounds() {
     level = Math.max(0, level - 2);
     consecutiveWrongRounds = 0;
   }
+  speedHistory.push(getDisplayDurationMs(level));
 }
 
 /**
@@ -269,3 +279,12 @@ export function getConsecutiveWrongRounds() {
 export function isRunning() {
   return running;
 }
+
+/**
+ * Get the session speed history as an array of display durations in ms.
+ * One entry is appended per completed or failed round after any staircase adjustment.
+ * @returns {number[]}
+ */
+export function getSpeedHistory() {
+  return [...speedHistory];
+}
diff --git a/app/games/high-speed-memory/index.js b/app/games/high-speed-memory/index.js
index 2577e30..6e381c7 100644
--- a/app/games/high-speed-memory/index.js
+++ b/app/games/high-speed-memory/index.js
@@ -12,6 +12,7 @@ import { playFailureSound } from '../../components/audioService.js';
 import * as timerService from '../../components/timerService.js';
 import { saveScore } from '../../components/scoreService.js';
 import { returnToMainMenu } from '../../components/gameUtils.js';
+import { renderTrendChart } from '../../components/trendChartService.js';
 
 /**
  * Delay in ms before a wrongly-clicked Distractor card flips back face-down.
@@ -80,6 +81,13 @@ let _displayTimeEl = null;
 /** @type {HTMLElement|null} */
 let _sessionTimerEl = null;
 
+/** @type {SVGPolylineElement|null} */
+let _trendLineEl = null;
+/** @type {HTMLElement|null} */
+let _trendEmptyEl = null;
+/** @type {HTMLElement|null} */
+let _trendLatestEl = null;
+
 // ── Round state (reset each round) ────────────────────────────────────────────
 
 /**
@@ -136,6 +144,17 @@ export function updateStats() {
   }
 }
 
+/**
+ * Render the speed trend chart with the latest history.
+ */
+export function updateTrendChart() {
+  renderTrendChart(
+    { lineEl: _trendLineEl, emptyEl: _trendEmptyEl, latestEl: _trendLatestEl },
+    game.getSpeedHistory(),
+    game.getDisplayDurationMs(game.getLevel()),
+  );
+}
+
 /**
  * Update the "Found: x/3" counter display.
  */
@@ -312,6 +331,7 @@ export function handleCardClick(cardId) {
     markCardWrong(cardId);
     playFailureSound();
     updateStats();
+    updateTrendChart();
     announce('Wrong guess! The round will restart.');
 
     _flipLock = true;
@@ -330,6 +350,7 @@ export function handleCardClick(cardId) {
 function onRoundComplete() {
   game.completeRound();
   updateStats();
+  updateTrendChart();
 
   // After completeRound: consecutiveCorrectRounds resets to 0 on level advance
   const leveledUp = game.getConsecutiveCorrectRounds() === 0;
@@ -408,6 +429,9 @@ function init(gameContainer) {
   _streakEl = _container.querySelector('#hsm-streak');
   _displayTimeEl = _container.querySelector('#hsm-display-time');
   _sessionTimerEl = _container.querySelector('#hsm-session-timer');
+  _trendLineEl = _container.querySelector('#hsm-trend-line');
+  _trendEmptyEl = _container.querySelector('#hsm-trend-empty');
+  _trendLatestEl = _container.querySelector('#hsm-trend-latest');
 
   if (_startBtn) {
     _startBtn.addEventListener('click', () => start());
@@ -492,6 +516,7 @@ function reset() {
 
   updateStats();
   updateFoundDisplay();
+  updateTrendChart();
 }
 
 export default {
diff --git a/app/games/high-speed-memory/interface.html b/app/games/high-speed-memory/interface.html
index 3ace017..df0761a 100644
--- a/app/games/high-speed-memory/interface.html
+++ b/app/games/high-speed-memory/interface.html
@@ -65,6 +65,19 @@ <h3>How to Play</h3>
       aria-atomic="true"
     ></div>
 
+    <!-- Speed trend chart -->
+    <section class="game-trend" aria-labelledby="hsm-trend-title">
+      <h4 id="hsm-trend-title">Speed Trend (ms)</h4>
+      <svg id="hsm-trend-chart" class="game-trend__chart" viewBox="0 0 300 120" role="img"
+        aria-label="Display time trend over recent rounds">
+        <polyline id="hsm-trend-line" fill="none" stroke="currentColor" stroke-width="2" points=""></polyline>
+      </svg>
+      <p id="hsm-trend-empty" class="game-trend__empty">Complete a round to populate chart.</p>
+      <p class="game-trend__meta">
+        Latest: <strong id="hsm-trend-latest">--</strong> ms
+      </p>
+    </section>
+
     <!-- Controls -->
     <div class="hsm-controls">
       <button id="hsm-stop-btn" type="button" class="game-btn game-btn--secondary">
diff --git a/app/games/high-speed-memory/tests/game.test.js b/app/games/high-speed-memory/tests/game.test.js
index 3277da9..bb9355d 100644
--- a/app/games/high-speed-memory/tests/game.test.js
+++ b/app/games/high-speed-memory/tests/game.test.js
@@ -27,6 +27,7 @@ import {
   getConsecutiveCorrectRounds,
   getConsecutiveWrongRounds,
   isRunning,
+  getSpeedHistory,
 } from '../game.js';
 
 beforeEach(() => {
@@ -470,3 +471,40 @@ describe('isRunning', () => {
     expect(isRunning()).toBe(false);
   });
 });
+
+// ── getSpeedHistory ───────────────────────────────────────────────────────────
+
+describe('getSpeedHistory', () => {
+  test('returns empty array before any rounds', () => {
+    expect(getSpeedHistory()).toEqual([]);
+  });
+
+  test('appends an entry after completeRound', () => {
+    startGame();
+    completeRound();
+    const history = getSpeedHistory();
+    expect(history).toHaveLength(1);
+    expect(typeof history[0]).toBe('number');
+  });
+
+  test('appends an entry after resetConsecutiveRounds', () => {
+    startGame();
+    resetConsecutiveRounds();
+    expect(getSpeedHistory()).toHaveLength(1);
+  });
+
+  test('returns a copy so external mutations do not affect state', () => {
+    startGame();
+    completeRound();
+    const h = getSpeedHistory();
+    h.pop();
+    expect(getSpeedHistory()).toHaveLength(1);
+  });
+
+  test('resets to empty after initGame', () => {
+    startGame();
+    completeRound();
+    initGame();
+    expect(getSpeedHistory()).toEqual([]);
+  });
+});
diff --git a/app/games/high-speed-memory/tests/index.test.js b/app/games/high-speed-memory/tests/index.test.js
index 1160d6f..e104dc5 100644
--- a/app/games/high-speed-memory/tests/index.test.js
+++ b/app/games/high-speed-memory/tests/index.test.js
@@ -47,6 +47,7 @@ jest.unstable_mockModule('../game.js', () => ({
   getRoundsCompleted: jest.fn(() => 6),
   getConsecutiveCorrectRounds: jest.fn(() => 1),
   isRunning: jest.fn(() => false),
+  getSpeedHistory: jest.fn(() => []),
 }));
 
 const pluginModule = await import('../index.js');
diff --git a/app/games/object-track/game.js b/app/games/object-track/game.js
index 5a8269c..a1a3f0d 100644
--- a/app/games/object-track/game.js
+++ b/app/games/object-track/game.js
@@ -62,6 +62,13 @@ let roundsPlayed = 0;
 /** @type {Array<object>} Current circle state array. */
 let circles = [];
 
+/**
+ * Session history of speed values (px/sec) at the end of each round.
+ * Used to render the in-game speed trend chart.
+ * @type {number[]}
+ */
+let speedHistory = [];
+
 // ── Level configuration ───────────────────────────────────────────────────────
 
 /**
@@ -295,6 +302,7 @@ export function recordRoundResult(correct) {
     levelDelta = -LEVELS_TO_DROP;
   }
   roundsPlayed++;
+  speedHistory.push(getLevelConfig(level).speedPxPerSec);
   return { levelDelta, newLevel: level };
 }
 
@@ -363,6 +371,7 @@ export function initGame() {
   startTimeMs = 0;
   roundsPlayed = 0;
   circles = [];
+  speedHistory = [];
 }
 
 /**
@@ -408,3 +417,10 @@ export function getConsecutiveWrong() { return consecutiveWrong; }
 
 /** @returns {number} Total rounds played this session. */
 export function getRoundsPlayed() { return roundsPlayed; }
+
+/**
+ * Get the session speed history as an array of circle speed values (px/sec).
+ * One entry is appended per completed round after any staircase adjustment.
+ * @returns {number[]}
+ */
+export function getSpeedHistory() { return [...speedHistory]; }
diff --git a/app/games/object-track/index.js b/app/games/object-track/index.js
index 88d12fc..18cc45a 100644
--- a/app/games/object-track/index.js
+++ b/app/games/object-track/index.js
@@ -12,6 +12,7 @@ import { saveScore } from '../../components/scoreService.js';
 import * as timerService from '../../components/timerService.js';
 import { playSuccessSound, playFailureSound } from '../../components/audioService.js';
 import { returnToMainMenu } from '../../components/gameUtils.js';
+import { renderTrendChart } from '../../components/trendChartService.js';
 
 // ── Exported constants ────────────────────────────────────────────────────────
 
@@ -83,6 +84,12 @@ let _finalLevelEl = null;
 let _finalRoundsEl = null;
 /** @type {HTMLElement|null} */
 let _sessionTimerEl = null;
+/** @type {SVGPolylineElement|null} */
+let _trendLineEl = null;
+/** @type {HTMLElement|null} */
+let _trendEmptyEl = null;
+/** @type {HTMLElement|null} */
+let _trendLatestEl = null;
 
 // ── Private state ─────────────────────────────────────────────────────────────
 
@@ -153,6 +160,19 @@ export function updateStats() {
   if (_roundEl) _roundEl.textContent = String(game.getRoundsPlayed() + 1);
 }
 
+/**
+ * Render the speed trend chart with the latest speed history.
+ *
+ * @returns {void}
+ */
+export function updateTrendChart() {
+  renderTrendChart(
+    { lineEl: _trendLineEl, emptyEl: _trendEmptyEl, latestEl: _trendLatestEl },
+    game.getSpeedHistory(),
+    game.getLevelConfig(game.getLevel()).speedPxPerSec,
+  );
+}
+
 // ── Arena background ──────────────────────────────────────────────────────────
 
 /**
@@ -370,6 +390,7 @@ export async function submitResponse() {
   const evalResult = game.evaluateResponse(currentCircles, _selectedIds);
   game.recordRoundResult(evalResult.correct);
   updateStats();
+  updateTrendChart();
 
   currentCircles.forEach((c) => {
     if (!_arenaEl) return;
@@ -483,6 +504,9 @@ function init(gameContainer) {
   _finalLevelEl = q('#mot-final-level');
   _finalRoundsEl = q('#mot-final-rounds');
   _sessionTimerEl = q('#mot-session-timer');
+  _trendLineEl = q('#mot-trend-line');
+  _trendEmptyEl = q('#mot-trend-empty');
+  _trendLatestEl = q('#mot-trend-latest');
 
   if (_startBtn) _startBtn.addEventListener('click', () => start());
   if (_stopBtn) _stopBtn.addEventListener('click', () => stop());
@@ -562,6 +586,7 @@ function reset() {
   if (_instructionsEl) _instructionsEl.hidden = false;
   if (_playAreaEl) _playAreaEl.hidden = true;
   if (_endPanelEl) _endPanelEl.hidden = true;
+  updateTrendChart();
 }
 
 export default {
diff --git a/app/games/object-track/interface.html b/app/games/object-track/interface.html
index 75c96dc..c40f962 100644
--- a/app/games/object-track/interface.html
+++ b/app/games/object-track/interface.html
@@ -37,6 +37,19 @@ <h3>How to Play</h3>
     <div id="mot-feedback" class="sr-only" role="status" aria-live="polite" aria-atomic="true">
     </div>
 
+    <!-- Speed trend chart -->
+    <section class="game-trend" aria-labelledby="mot-trend-title">
+      <h4 id="mot-trend-title">Speed Trend (px/s)</h4>
+      <svg id="mot-trend-chart" class="game-trend__chart" viewBox="0 0 300 120" role="img"
+        aria-label="Circle speed trend over recent rounds">
+        <polyline id="mot-trend-line" fill="none" stroke="currentColor" stroke-width="2" points=""></polyline>
+      </svg>
+      <p id="mot-trend-empty" class="game-trend__empty">Complete a round to populate chart.</p>
+      <p class="game-trend__meta">
+        Latest: <strong id="mot-trend-latest">--</strong> px/s
+      </p>
+    </section>
+
     <div class="mot-game__controls" role="group" aria-label="Game controls">
       <button type="button" id="mot-stop" class="game-btn game-btn--secondary">
         End Game
diff --git a/app/games/object-track/tests/game.test.js b/app/games/object-track/tests/game.test.js
index 5a82ecf..c6f8100 100644
--- a/app/games/object-track/tests/game.test.js
+++ b/app/games/object-track/tests/game.test.js
@@ -39,6 +39,7 @@ import {
   getConsecutiveCorrect,
   getConsecutiveWrong,
   getRoundsPlayed,
+  getSpeedHistory,
 } from '../game.js';
 
 beforeEach(() => {
@@ -559,3 +560,34 @@ describe('getters', () => {
     expect(getConsecutiveWrong()).toBe(2);
   });
 });
+
+// ── getSpeedHistory ───────────────────────────────────────────────────────────
+
+describe('getSpeedHistory', () => {
+  test('returns empty array before any rounds', () => {
+    expect(getSpeedHistory()).toEqual([]);
+  });
+
+  test('appends an entry after recordRoundResult', () => {
+    startGame();
+    recordRoundResult(true);
+    const history = getSpeedHistory();
+    expect(history).toHaveLength(1);
+    expect(typeof history[0]).toBe('number');
+  });
+
+  test('returns a copy so external mutations do not affect state', () => {
+    startGame();
+    recordRoundResult(false);
+    const h = getSpeedHistory();
+    h.pop();
+    expect(getSpeedHistory()).toHaveLength(1);
+  });
+
+  test('resets to empty after initGame', () => {
+    startGame();
+    recordRoundResult(true);
+    initGame();
+    expect(getSpeedHistory()).toEqual([]);
+  });
+});
diff --git a/app/games/object-track/tests/index.test.js b/app/games/object-track/tests/index.test.js
index 005b4e9..9b78f46 100644
--- a/app/games/object-track/tests/index.test.js
+++ b/app/games/object-track/tests/index.test.js
@@ -90,6 +90,7 @@ jest.unstable_mockModule('../game.js', () => ({
   getConsecutiveCorrect: jest.fn(() => 0),
   getConsecutiveWrong: jest.fn(() => 0),
   getRoundsPlayed: jest.fn(() => 10),
+  getSpeedHistory: jest.fn(() => []),
 }));
 
 // ── 3. Dynamic imports ────────────────────────────────────────────────────────
diff --git a/app/games/orbit-sprite-memory/game.js b/app/games/orbit-sprite-memory/game.js
index fc7c1fc..967bd4b 100644
--- a/app/games/orbit-sprite-memory/game.js
+++ b/app/games/orbit-sprite-memory/game.js
@@ -61,6 +61,13 @@ let running = false;
 /** @type {number|null} */
 let startTime = null;
 
+/**
+ * Session history of display durations in ms, one entry per completed round.
+ * Used to render the in-game speed trend chart.
+ * @type {number[]}
+ */
+let speedHistory = [];
+
 /**
  * Resets all gameplay state.
  */
@@ -72,6 +79,7 @@ export function initGame() {
   consecutiveWrong = 0;
   running = false;
   startTime = null;
+  speedHistory = [];
 }
 
 /**
@@ -279,6 +287,7 @@ export function recordCorrectRound() {
     level += 1;
     consecutiveCorrect = 0;
   }
+  speedHistory.push(getDisplayDurationMs(level));
 }
 
 /**
@@ -293,6 +302,7 @@ export function recordIncorrectRound() {
     level = Math.max(0, level - 2);
     consecutiveWrong = 0;
   }
+  speedHistory.push(getDisplayDurationMs(level));
 }
 
 /**
@@ -344,3 +354,12 @@ export function getConsecutiveWrong() {
 export function isRunning() {
   return running;
 }
+
+/**
+ * Get the session speed history as an array of display durations in ms.
+ * One entry is appended per completed round after any staircase adjustment.
+ * @returns {number[]}
+ */
+export function getSpeedHistory() {
+  return [...speedHistory];
+}
diff --git a/app/games/orbit-sprite-memory/index.js b/app/games/orbit-sprite-memory/index.js
index 840f159..5ba8a14 100644
--- a/app/games/orbit-sprite-memory/index.js
+++ b/app/games/orbit-sprite-memory/index.js
@@ -11,6 +11,7 @@ import { playSuccessSound, playFailureSound } from '../../components/audioServic
 import * as timerService from '../../components/timerService.js';
 import { saveScore } from '../../components/scoreService.js';
 import { returnToMainMenu } from '../../components/gameUtils.js';
+import { renderTrendChart } from '../../components/trendChartService.js';
 
 /** Delay before automatically starting the next round after answer submit. */
 const NEXT_ROUND_DELAY_MS = 900;
@@ -86,6 +87,12 @@ let _finalBestScoreEl = null;
 
 /** @type {HTMLElement|null} */
 let _sessionTimerEl = null;
+/** @type {SVGPolylineElement|null} */
+let _trendLineEl = null;
+/** @type {HTMLElement|null} */
+let _trendEmptyEl = null;
+/** @type {HTMLElement|null} */
+let _trendLatestEl = null;
 
 /** @type {ReturnType<typeof setTimeout>[]} */
 let _timers = [];
@@ -179,6 +186,17 @@ export function updateStats() {
   }
 }
 
+/**
+ * Renders the speed trend chart with the latest display-duration history.
+ */
+export function updateTrendChart() {
+  renderTrendChart(
+    { lineEl: _trendLineEl, emptyEl: _trendEmptyEl, latestEl: _trendLatestEl },
+    game.getSpeedHistory(),
+    game.getDisplayDurationMs(game.getLevel()),
+  );
+}
+
 /**
  * Updates the displayed all-time best stats for this game.
  *
@@ -400,12 +418,14 @@ export function submitSelection() {
   if (isCorrect) {
     game.recordCorrectRound();
     updateStats();
+    updateTrendChart();
     flashBoard('success');
     playSuccessSound();
     announce('Correct. Reviewing positions before the next round.');
   } else {
     game.recordIncorrectRound();
     updateStats();
+    updateTrendChart();
     flashBoard('failure');
     playFailureSound();
     announce('Incorrect. Reviewing positions before the next round.');
@@ -473,6 +493,9 @@ function init(gameContainer) {
   _finalBestLevelEl = _container.querySelector('#osm-final-best-level');
   _finalBestScoreEl = _container.querySelector('#osm-final-best-score');
   _sessionTimerEl = _container.querySelector('#osm-session-timer');
+  _trendLineEl = _container.querySelector('#osm-trend-line');
+  _trendEmptyEl = _container.querySelector('#osm-trend-empty');
+  _trendLatestEl = _container.querySelector('#osm-trend-latest');
 
   if (_startBtn) _startBtn.addEventListener('click', () => start());
   if (_stopBtn) _stopBtn.addEventListener('click', () => stop());
@@ -558,6 +581,7 @@ function reset() {
   clearRevealSprites();
   loadBestStatsFromProgress();
   updateStats();
+  updateTrendChart();
 }
 
 export default {
diff --git a/app/games/orbit-sprite-memory/interface.html b/app/games/orbit-sprite-memory/interface.html
index 8bff827..dd0bfe1 100644
--- a/app/games/orbit-sprite-memory/interface.html
+++ b/app/games/orbit-sprite-memory/interface.html
@@ -42,6 +42,19 @@ <h3>How to Play</h3>
     <div class="osm-controls">
       <button id="osm-stop-btn" type="button" class="game-btn game-btn--secondary">End Game</button>
     </div>
+
+    <!-- Speed trend chart -->
+    <section class="game-trend" aria-labelledby="osm-trend-title">
+      <h4 id="osm-trend-title">Speed Trend (ms)</h4>
+      <svg id="osm-trend-chart" class="game-trend__chart" viewBox="0 0 300 120" role="img"
+        aria-label="Display time trend over recent rounds">
+        <polyline id="osm-trend-line" fill="none" stroke="currentColor" stroke-width="2" points=""></polyline>
+      </svg>
+      <p id="osm-trend-empty" class="game-trend__empty">Complete a round to populate chart.</p>
+      <p class="game-trend__meta">
+        Latest: <strong id="osm-trend-latest">--</strong> ms
+      </p>
+    </section>
   </div>
 
   <div id="osm-end-panel" class="osm-panel game-end-panel" hidden>
diff --git a/app/games/orbit-sprite-memory/tests/game.test.js b/app/games/orbit-sprite-memory/tests/game.test.js
index a0f0d8c..ef3299e 100644
--- a/app/games/orbit-sprite-memory/tests/game.test.js
+++ b/app/games/orbit-sprite-memory/tests/game.test.js
@@ -37,6 +37,7 @@ import {
   getConsecutiveCorrect,
   getConsecutiveWrong,
   isRunning,
+  getSpeedHistory,
 } from '../game.js';
 
 beforeEach(() => {
@@ -262,3 +263,40 @@ describe('selection and scoring', () => {
     expect(getConsecutiveWrong()).toBe(2);
   });
 });
+
+// ── getSpeedHistory ───────────────────────────────────────────────────────────
+
+describe('getSpeedHistory', () => {
+  test('returns empty array before any rounds', () => {
+    expect(getSpeedHistory()).toEqual([]);
+  });
+
+  test('appends an entry after recordCorrectRound', () => {
+    startGame();
+    recordCorrectRound();
+    const history = getSpeedHistory();
+    expect(history).toHaveLength(1);
+    expect(typeof history[0]).toBe('number');
+  });
+
+  test('appends an entry after recordIncorrectRound', () => {
+    startGame();
+    recordIncorrectRound();
+    expect(getSpeedHistory()).toHaveLength(1);
+  });
+
+  test('returns a copy so external mutations do not affect state', () => {
+    startGame();
+    recordCorrectRound();
+    const h = getSpeedHistory();
+    h.pop();
+    expect(getSpeedHistory()).toHaveLength(1);
+  });
+
+  test('resets to empty after initGame', () => {
+    startGame();
+    recordCorrectRound();
+    initGame();
+    expect(getSpeedHistory()).toEqual([]);
+  });
+});
diff --git a/app/games/orbit-sprite-memory/tests/index.test.js b/app/games/orbit-sprite-memory/tests/index.test.js
index d952adc..22528c1 100644
--- a/app/games/orbit-sprite-memory/tests/index.test.js
+++ b/app/games/orbit-sprite-memory/tests/index.test.js
@@ -70,6 +70,7 @@ jest.unstable_mockModule('../game.js', () => ({
   getRoundsPlayed: jest.fn(() => 6),
   getConsecutiveCorrect: jest.fn(() => 2),
   isRunning: jest.fn(() => false),
+  getSpeedHistory: jest.fn(() => []),
 }));
 
 const pluginModule = await import('../index.js');
diff --git a/app/games/otter-stop/game.js b/app/games/otter-stop/game.js
index cb21b5e..43f7945 100644
--- a/app/games/otter-stop/game.js
+++ b/app/games/otter-stop/game.js
@@ -98,6 +98,13 @@ let consecutiveCorrect = 0;
 /** Consecutive wrong-response streak. */
 let consecutiveWrong = 0;
 
+/**
+ * Session history of interval values in ms, one entry per completed trial.
+ * Used to render the in-game speed trend chart.
+ * @type {number[]}
+ */
+let speedHistory = [];
+
 /**
  * Whether the next trial must be a go image (forced after any wrong outcome).
  * Ensures the player gets a fair chance to respond correctly before facing
@@ -122,6 +129,7 @@ export function initGame() {
   consecutiveCorrect = 0;
   consecutiveWrong = 0;
   forceGoNext = false;
+  speedHistory = [];
 }
 
 /**
@@ -246,6 +254,8 @@ export function recordResponse(isNoGo, spacePressed) {
     consecutiveWrong = 0;
   }
 
+  speedHistory.push(getCurrentIntervalMs());
+
   return correct ? 'correct' : 'wrong';
 }
 
@@ -342,3 +352,12 @@ export function getForceGoNext() {
 export function isRunning() {
   return running;
 }
+
+/**
+ * Get the session speed history as an array of interval values in ms.
+ * One entry is appended per completed trial after any staircase adjustment.
+ * @returns {number[]}
+ */
+export function getSpeedHistory() {
+  return [...speedHistory];
+}
diff --git a/app/games/otter-stop/index.js b/app/games/otter-stop/index.js
index 2ebcc9c..54cdb39 100644
--- a/app/games/otter-stop/index.js
+++ b/app/games/otter-stop/index.js
@@ -13,6 +13,7 @@ import { playSuccessSound, playFailureSound } from '../../components/audioServic
 import * as timerService from '../../components/timerService.js';
 import { saveScore } from '../../components/scoreService.js';
 import { returnToMainMenu } from '../../components/gameUtils.js';
+import { renderTrendChart } from '../../components/trendChartService.js';
 
 /** Human-readable name returned as part of the plugin contract. */
 const name = 'Otter Stop!';
@@ -81,6 +82,12 @@ let _intervalEl = null;
 
 /** @type {HTMLElement|null} */
 let _sessionTimerEl = null;
+/** @type {SVGPolylineElement|null} */
+let _trendLineEl = null;
+/** @type {HTMLElement|null} */
+let _trendEmptyEl = null;
+/** @type {HTMLElement|null} */
+let _trendLatestEl = null;
 
 /** @type {HTMLElement|null} */
 let _finalScoreEl = null;
@@ -155,6 +162,17 @@ export function updateStats() {
   if (_intervalEl) _intervalEl.textContent = game.getCurrentIntervalMs();
 }
 
+/**
+ * Render the speed trend chart with the latest interval history.
+ */
+export function updateTrendChart() {
+  renderTrendChart(
+    { lineEl: _trendLineEl, emptyEl: _trendEmptyEl, latestEl: _trendLatestEl },
+    game.getSpeedHistory(),
+    game.getCurrentIntervalMs(),
+  );
+}
+
 /**
  * Show the image for a given image key in the stimulus area.
  *
@@ -260,6 +278,7 @@ export function endTrial() {
 
   const outcome = game.recordResponse(_currentIsNoGo, _spacePressedThisTrial);
   updateStats();
+  updateTrendChart();
 
   const wasNoGo = _currentIsNoGo;
   _currentImageKey = null;
@@ -398,6 +417,9 @@ function init(container) {
   _nogoHitsEl = container.querySelector('#os-nogo-hits');
   _intervalEl = container.querySelector('#os-interval');
   _sessionTimerEl = container.querySelector('#os-session-timer');
+  _trendLineEl = container.querySelector('#os-trend-line');
+  _trendEmptyEl = container.querySelector('#os-trend-empty');
+  _trendLatestEl = container.querySelector('#os-trend-latest');
   _finalScoreEl = container.querySelector('#os-final-score');
   _finalBestEl = container.querySelector('#os-final-best');
   _finalNogoEl = container.querySelector('#os-final-nogo');
@@ -508,6 +530,7 @@ function reset() {
   if (_instructionsEl) _instructionsEl.hidden = false;
 
   updateStats();
+  updateTrendChart();
 }
 
 export default {
diff --git a/app/games/otter-stop/interface.html b/app/games/otter-stop/interface.html
index b4ae889..1e5b898 100644
--- a/app/games/otter-stop/interface.html
+++ b/app/games/otter-stop/interface.html
@@ -67,6 +67,19 @@ <h3 class="os-instructions__subheading">How to Play</h3>
       </button>
     </div>
 
+    <!-- Speed trend chart -->
+    <section class="game-trend" aria-labelledby="os-trend-title">
+      <h4 id="os-trend-title">Speed Trend (ms)</h4>
+      <svg id="os-trend-chart" class="game-trend__chart" viewBox="0 0 300 120" role="img"
+        aria-label="Display interval trend over recent trials">
+        <polyline id="os-trend-line" fill="none" stroke="currentColor" stroke-width="2" points=""></polyline>
+      </svg>
+      <p id="os-trend-empty" class="game-trend__empty">Complete a trial to populate chart.</p>
+      <p class="game-trend__meta">
+        Latest: <strong id="os-trend-latest">--</strong> ms
+      </p>
+    </section>
+
   </div>
 
   <!-- ── End panel (shown after game ends) ── -->
diff --git a/app/games/otter-stop/tests/game.test.js b/app/games/otter-stop/tests/game.test.js
index 5f4cf0e..1fcbdfc 100644
--- a/app/games/otter-stop/tests/game.test.js
+++ b/app/games/otter-stop/tests/game.test.js
@@ -23,6 +23,7 @@ import {
   NO_GO_KEY,
   GO_KEYS,
   setGoKeys,
+  getSpeedHistory,
 } from '../game.js';
 
 /** Default go keys used by the test suite (matches built-in defaults). */
@@ -583,3 +584,34 @@ describe('isRunning()', () => {
     expect(isRunning()).toBe(false);
   });
 });
+
+// ── getSpeedHistory ───────────────────────────────────────────────────────────
+
+describe('getSpeedHistory()', () => {
+  it('returns empty array before any trials', () => {
+    expect(getSpeedHistory()).toEqual([]);
+  });
+
+  it('appends an entry after recordResponse', () => {
+    startGame();
+    recordResponse(false, true);
+    const history = getSpeedHistory();
+    expect(history).toHaveLength(1);
+    expect(typeof history[0]).toBe('number');
+  });
+
+  it('returns a copy so external mutations do not affect state', () => {
+    startGame();
+    recordResponse(false, true);
+    const h = getSpeedHistory();
+    h.pop();
+    expect(getSpeedHistory()).toHaveLength(1);
+  });
+
+  it('resets to empty after initGame', () => {
+    startGame();
+    recordResponse(false, true);
+    initGame();
+    expect(getSpeedHistory()).toEqual([]);
+  });
+});
diff --git a/app/games/otter-stop/tests/index.test.js b/app/games/otter-stop/tests/index.test.js
index 22d2f7c..fb0f338 100644
--- a/app/games/otter-stop/tests/index.test.js
+++ b/app/games/otter-stop/tests/index.test.js
@@ -42,6 +42,7 @@ jest.unstable_mockModule('../game.js', () => ({
   getSessionBestScore: jest.fn(() => 5),
   isRunning: jest.fn(() => true),
   setGoKeys: jest.fn(),
+  getSpeedHistory: jest.fn(() => []),
   IMAGE_KEYS: ['go-1.png', 'go-2.png', 'go-3.png', 'no-go'],
   NO_GO_KEY: 'no-go',
 }));
diff --git a/app/games/sound-sweep/game.js b/app/games/sound-sweep/game.js
index 1a0df6e..3772800 100644
--- a/app/games/sound-sweep/game.js
+++ b/app/games/sound-sweep/game.js
@@ -73,6 +73,13 @@ let consecutiveCorrect = 0;
 /** @type {number} */
 let consecutiveWrong = 0;
 
+/**
+ * Session history of sweep durations in ms, one entry per completed trial.
+ * Used to render the in-game speed trend chart.
+ * @type {number[]}
+ */
+let speedHistory = [];
+
 // ── Exported functions ────────────────────────────────────────────────────────
 
 /**
@@ -87,6 +94,7 @@ export function initGame() {
   trialsCompleted = 0;
   consecutiveCorrect = 0;
   consecutiveWrong = 0;
+  speedHistory = [];
 }
 
 /**
@@ -162,6 +170,8 @@ export function recordTrial({ success }) {
     }
   }
 
+  speedHistory.push(LEVELS[currentLevel].sweepDurationMs);
+
   return { level: currentLevel, consecutiveCorrect, consecutiveWrong };
 }
 
@@ -227,3 +237,13 @@ export function getConsecutiveWrong() {
 export function isRunning() {
   return running;
 }
+
+/**
+ * Get the session speed history as an array of sweep durations in ms.
+ * One entry is appended per completed trial after any staircase adjustment.
+ *
+ * @returns {number[]}
+ */
+export function getSpeedHistory() {
+  return [...speedHistory];
+}
diff --git a/app/games/sound-sweep/index.js b/app/games/sound-sweep/index.js
index fc758d8..6db3f53 100644
--- a/app/games/sound-sweep/index.js
+++ b/app/games/sound-sweep/index.js
@@ -15,6 +15,7 @@ import { playSweepPair, playFeedbackSound } from '../../components/audioService.
 import { saveScore } from '../../components/scoreService.js';
 import { returnToMainMenu } from '../../components/gameUtils.js';
 import * as timerService from '../../components/timerService.js';
+import { renderTrendChart } from '../../components/trendChartService.js';
 
 /** Game identifier used for progress persistence (must match manifest.json id). */
 const GAME_ID = 'sound-sweep';
@@ -54,6 +55,12 @@ let _trialsEl = null;
 let _streakEl = null;
 /** @type {HTMLElement|null} */
 let _sessionTimerEl = null;
+/** @type {SVGPolylineElement|null} */
+let _trendLineEl = null;
+/** @type {HTMLElement|null} */
+let _trendEmptyEl = null;
+/** @type {HTMLElement|null} */
+let _trendLatestEl = null;
 /** @type {HTMLElement|null} */
 let _finalLevelEl = null;
 /** @type {HTMLElement|null} */
@@ -145,6 +152,17 @@ export function updateStats() {
   if (_streakEl) _streakEl.textContent = String(game.getConsecutiveCorrect());
 }
 
+/**
+ * Render the speed trend chart with the latest sweep-duration history.
+ */
+export function updateTrendChart() {
+  renderTrendChart(
+    { lineEl: _trendLineEl, emptyEl: _trendEmptyEl, latestEl: _trendLatestEl },
+    game.getSpeedHistory(),
+    game.getCurrentLevelConfig().sweepDurationMs,
+  );
+}
+
 /**
  * Cancel and clear all outstanding timer handles.
  */
@@ -216,6 +234,7 @@ export function handleSequenceResponse(response) {
   game.recordTrial({ success });
 
   updateStats();
+  updateTrendChart();
   playFeedbackSound(success);
 
   // Write result feedback directly to the polite live region (#ss-feedback)
@@ -321,6 +340,9 @@ function init(gameContainer) {
   _trialsEl        = _container.querySelector('#ss-trials');
   _streakEl        = _container.querySelector('#ss-streak');
   _sessionTimerEl  = _container.querySelector('#ss-session-timer');
+  _trendLineEl     = _container.querySelector('#ss-trend-line');
+  _trendEmptyEl    = _container.querySelector('#ss-trend-empty');
+  _trendLatestEl   = _container.querySelector('#ss-trend-latest');
   _finalLevelEl    = _container.querySelector('#ss-final-level');
   _finalScoreEl    = _container.querySelector('#ss-final-score');
   _finalTrialsEl   = _container.querySelector('#ss-final-trials');
@@ -437,6 +459,7 @@ function reset() {
 
   setResponseButtonsEnabled(false);
   updateStats();
+  updateTrendChart();
 }
 
 export default {
diff --git a/app/games/sound-sweep/interface.html b/app/games/sound-sweep/interface.html
index 39abd0f..d040f40 100644
--- a/app/games/sound-sweep/interface.html
+++ b/app/games/sound-sweep/interface.html
@@ -85,6 +85,19 @@ <h3>How to Play</h3>
     <!-- Live feedback region (correct / incorrect messages). -->
     <div id="ss-feedback" class="ss-feedback" role="status" aria-live="polite"></div>
 
+    <!-- Speed trend chart -->
+    <section class="game-trend" aria-labelledby="ss-trend-title">
+      <h4 id="ss-trend-title">Speed Trend (ms)</h4>
+      <svg id="ss-trend-chart" class="game-trend__chart" viewBox="0 0 300 120" role="img"
+        aria-label="Sweep duration trend over recent trials">
+        <polyline id="ss-trend-line" fill="none" stroke="currentColor" stroke-width="2" points=""></polyline>
+      </svg>
+      <p id="ss-trend-empty" class="game-trend__empty">Complete a trial to populate chart.</p>
+      <p class="game-trend__meta">
+        Latest: <strong id="ss-trend-latest">--</strong> ms
+      </p>
+    </section>
+
     <div class="ss-controls">
       <button id="ss-stop-btn" type="button" class="game-btn game-btn--secondary">
         End Game
diff --git a/app/games/sound-sweep/tests/game.test.js b/app/games/sound-sweep/tests/game.test.js
index 9f39e1f..f58d0a7 100644
--- a/app/games/sound-sweep/tests/game.test.js
+++ b/app/games/sound-sweep/tests/game.test.js
@@ -28,6 +28,7 @@ import {
   getConsecutiveCorrect,
   getConsecutiveWrong,
   isRunning,
+  getSpeedHistory,
 } from '../game.js';
 
 beforeEach(() => {
@@ -275,3 +276,35 @@ describe('getCurrentLevelConfig', () => {
     expect(getCurrentLevelConfig()).toEqual(LEVELS[1]);
   });
 });
+
+// ── getSpeedHistory ───────────────────────────────────────────────────────────
+
+describe('getSpeedHistory', () => {
+  test('returns empty array before any trials', () => {
+    expect(getSpeedHistory()).toEqual([]);
+  });
+
+  test('appends one entry per completed trial', () => {
+    startGame();
+    recordTrial({ success: true });
+    recordTrial({ success: false });
+    const history = getSpeedHistory();
+    expect(history).toHaveLength(2);
+    history.forEach((v) => expect(typeof v).toBe('number'));
+  });
+
+  test('returns a copy so external mutations do not affect state', () => {
+    startGame();
+    recordTrial({ success: true });
+    const h = getSpeedHistory();
+    h.pop();
+    expect(getSpeedHistory()).toHaveLength(1);
+  });
+
+  test('resets to empty after initGame', () => {
+    startGame();
+    recordTrial({ success: true });
+    initGame();
+    expect(getSpeedHistory()).toEqual([]);
+  });
+});
diff --git a/app/games/sound-sweep/tests/index.test.js b/app/games/sound-sweep/tests/index.test.js
index bad1ae2..23ad9bb 100644
--- a/app/games/sound-sweep/tests/index.test.js
+++ b/app/games/sound-sweep/tests/index.test.js
@@ -45,6 +45,7 @@ jest.unstable_mockModule('../game.js', () => ({
   getConsecutiveCorrect: jest.fn(() => 1),
   getConsecutiveWrong:   jest.fn(() => 0),
   isRunning:             jest.fn(() => true),
+  getSpeedHistory:       jest.fn(() => []),
 }));
 
 jest.unstable_mockModule('../../../components/audioService.js', () => ({
diff --git a/app/style.css b/app/style.css
index 20b0716..449e3a3 100644
--- a/app/style.css
+++ b/app/style.css
@@ -622,3 +622,41 @@ footer {
   background: #922b21;
 }
 
+/* ── Shared Game Trend Chart ────────────────────────────────────────────── */
+/*
+ * .game-trend — shared speed/difficulty trend chart used across all games.
+ * Wrap the SVG polyline chart and meta text in an element with this class.
+ * Used inside the active game area to display real-time metric history.
+ */
+.game-trend {
+  margin-top: 0.75rem;
+  border: 1px solid #c1c9d2;
+  border-radius: 8px;
+  padding: 0.5rem 0.6rem;
+  background: #eef2f6;
+  color: #19324a;
+}
+
+.game-trend h4 {
+  margin: 0;
+  font-size: 0.95rem;
+}
+
+.game-trend__chart {
+  display: block;
+  width: 100%;
+  max-width: 320px;
+  height: auto;
+  min-height: 72px;
+  margin-top: 0.35rem;
+  border: 1px solid #9eabb8;
+  border-radius: 6px;
+  background: linear-gradient(180deg, #f8fafc 0%, #e5edf5 100%);
+}
+
+.game-trend__empty,
+.game-trend__meta {
+  margin: 0.5rem 0 0;
+  font-size: 0.875rem;
+}
+

From a920d392bf6e89686cb2b668c91f651dad43d60d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 14 Apr 2026 00:11:31 +0000
Subject: [PATCH 3/4] Fix renderThresholdTrend to pass raw currentSoaMs to
 renderTrendChart for consistent display

Agent-Logs-Url: https://github.com/acrosman/BrainSpeedExercises/sessions/60497adb-33a4-4f98-9fc7-52414d0e292d

Co-authored-by: acrosman <2972053+acrosman@users.noreply.github.com>
---
 app/games/field-of-view/render.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/games/field-of-view/render.js b/app/games/field-of-view/render.js
index 3d113a9..b503b22 100644
--- a/app/games/field-of-view/render.js
+++ b/app/games/field-of-view/render.js
@@ -159,7 +159,7 @@ export function renderThresholdTrend(els, history, currentSoaMs) {
   renderTrendChart(
     { lineEl: els.trendLineEl, emptyEl: els.trendEmptyEl, latestEl: els.trendLatestEl },
     values,
-    formatMs(currentSoaMs),
+    currentSoaMs,
   );
 
   if (els.finalBestThresholdEl) {

From 7b62a177b50a34c9cfde0442aa5c91f5578df0db Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 14 Apr 2026 02:26:44 +0000
Subject: [PATCH 4/4] Remove redundant blank-input tests per review feedback

Agent-Logs-Url: https://github.com/acrosman/BrainSpeedExercises/sessions/9e7c898a-74ec-4650-aa74-670dd4f30641

Co-authored-by: acrosman <2972053+acrosman@users.noreply.github.com>
---
 app/components/tests/trendChartService.test.js      | 4 ----
 app/games/directional-processing/tests/game.test.js | 4 ----
 app/games/fast-piggie/tests/game.test.js            | 4 ----
 app/games/high-speed-memory/tests/game.test.js      | 4 ----
 app/games/object-track/tests/game.test.js           | 4 ----
 app/games/orbit-sprite-memory/tests/game.test.js    | 4 ----
 app/games/otter-stop/tests/game.test.js             | 4 ----
 app/games/sound-sweep/tests/game.test.js            | 4 ----
 8 files changed, 32 deletions(-)

diff --git a/app/components/tests/trendChartService.test.js b/app/components/tests/trendChartService.test.js
index 33d3f12..0c335bf 100644
--- a/app/components/tests/trendChartService.test.js
+++ b/app/components/tests/trendChartService.test.js
@@ -22,10 +22,6 @@ describe('buildPolylinePoints', () => {
     expect(buildPolylinePoints(null)).toBe('');
   });
 
-  test('returns empty string for undefined input', () => {
-    expect(buildPolylinePoints(undefined)).toBe('');
-  });
-
   test('returns a single point string for a one-element array', () => {
     const result = buildPolylinePoints([300]);
     expect(result).not.toBe('');
diff --git a/app/games/directional-processing/tests/game.test.js b/app/games/directional-processing/tests/game.test.js
index 9fa285a..b0b445e 100644
--- a/app/games/directional-processing/tests/game.test.js
+++ b/app/games/directional-processing/tests/game.test.js
@@ -282,10 +282,6 @@ describe('getCurrentLevelConfig', () => {
 // ── getSpeedHistory ───────────────────────────────────────────────────────────
 
 describe('getSpeedHistory', () => {
-  test('returns empty array before any trials', () => {
-    expect(getSpeedHistory()).toEqual([]);
-  });
-
   test('appends one entry per completed trial', () => {
     startGame();
     recordTrial({ success: true });
diff --git a/app/games/fast-piggie/tests/game.test.js b/app/games/fast-piggie/tests/game.test.js
index 43a777b..17a5d7a 100644
--- a/app/games/fast-piggie/tests/game.test.js
+++ b/app/games/fast-piggie/tests/game.test.js
@@ -604,10 +604,6 @@ describe('getBestStats()', () => {
 // ── getSpeedHistory ───────────────────────────────────────────────────────────
 
 describe('getSpeedHistory()', () => {
-  it('returns empty array before any rounds', () => {
-    expect(getSpeedHistory()).toEqual([]);
-  });
-
   it('appends an entry after addScore()', () => {
     startGame();
     generateRound();
diff --git a/app/games/high-speed-memory/tests/game.test.js b/app/games/high-speed-memory/tests/game.test.js
index bb9355d..1ef04b3 100644
--- a/app/games/high-speed-memory/tests/game.test.js
+++ b/app/games/high-speed-memory/tests/game.test.js
@@ -475,10 +475,6 @@ describe('isRunning', () => {
 // ── getSpeedHistory ───────────────────────────────────────────────────────────
 
 describe('getSpeedHistory', () => {
-  test('returns empty array before any rounds', () => {
-    expect(getSpeedHistory()).toEqual([]);
-  });
-
   test('appends an entry after completeRound', () => {
     startGame();
     completeRound();
diff --git a/app/games/object-track/tests/game.test.js b/app/games/object-track/tests/game.test.js
index c6f8100..3448182 100644
--- a/app/games/object-track/tests/game.test.js
+++ b/app/games/object-track/tests/game.test.js
@@ -564,10 +564,6 @@ describe('getters', () => {
 // ── getSpeedHistory ───────────────────────────────────────────────────────────
 
 describe('getSpeedHistory', () => {
-  test('returns empty array before any rounds', () => {
-    expect(getSpeedHistory()).toEqual([]);
-  });
-
   test('appends an entry after recordRoundResult', () => {
     startGame();
     recordRoundResult(true);
diff --git a/app/games/orbit-sprite-memory/tests/game.test.js b/app/games/orbit-sprite-memory/tests/game.test.js
index ef3299e..6f349b3 100644
--- a/app/games/orbit-sprite-memory/tests/game.test.js
+++ b/app/games/orbit-sprite-memory/tests/game.test.js
@@ -267,10 +267,6 @@ describe('selection and scoring', () => {
 // ── getSpeedHistory ───────────────────────────────────────────────────────────
 
 describe('getSpeedHistory', () => {
-  test('returns empty array before any rounds', () => {
-    expect(getSpeedHistory()).toEqual([]);
-  });
-
   test('appends an entry after recordCorrectRound', () => {
     startGame();
     recordCorrectRound();
diff --git a/app/games/otter-stop/tests/game.test.js b/app/games/otter-stop/tests/game.test.js
index 1fcbdfc..4c12d8f 100644
--- a/app/games/otter-stop/tests/game.test.js
+++ b/app/games/otter-stop/tests/game.test.js
@@ -588,10 +588,6 @@ describe('isRunning()', () => {
 // ── getSpeedHistory ───────────────────────────────────────────────────────────
 
 describe('getSpeedHistory()', () => {
-  it('returns empty array before any trials', () => {
-    expect(getSpeedHistory()).toEqual([]);
-  });
-
   it('appends an entry after recordResponse', () => {
     startGame();
     recordResponse(false, true);
diff --git a/app/games/sound-sweep/tests/game.test.js b/app/games/sound-sweep/tests/game.test.js
index f58d0a7..1d5511d 100644
--- a/app/games/sound-sweep/tests/game.test.js
+++ b/app/games/sound-sweep/tests/game.test.js
@@ -280,10 +280,6 @@ describe('getCurrentLevelConfig', () => {
 // ── getSpeedHistory ───────────────────────────────────────────────────────────
 
 describe('getSpeedHistory', () => {
-  test('returns empty array before any trials', () => {
-    expect(getSpeedHistory()).toEqual([]);
-  });
-
   test('appends one entry per completed trial', () => {
     startGame();
     recordTrial({ success: true });