From 48d9806307e9c44955bd1ff7d97cc436329a125e Mon Sep 17 00:00:00 2001
From: alexander-akait <4567934+alexander-akait@users.noreply.github.com>
Date: Sat, 26 Sep 2026 13:50:40 +0000
Subject: [PATCH 1/3] feat(client): let `progress` choose between the badge and
 a bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

webpack-dev-server's `client.progress` takes `"linear"` and `"circular"`
as well as a boolean, and renders a visibly different indicator for each.
This package took a boolean only, so those two values would have silently
collapsed into one shape — a value that used to mean something quietly
meaning nothing is worse than a value that errors.

`"circular"` is the badge this package has always shown, and stays what
`true` selects, so nothing changes for anyone already using it.
`"linear"` renders a thin bar across the top of the viewport, measured by
the percentage the progress payloads carry and sweeping when there is no
percentage to measure — the same choice the badge makes between its ring
and its pulsing dot. Built through the CSSOM and the Web Animations API,
with no `<style>` element, so a strict `style-src` still allows it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UjuMAuk9o6UazjHzcAQCTA
---
 .changeset/progress-linear.md |   5 ++
 client-src/index.js           |  12 +++-
 client-src/indicator.js       | 123 +++++++++++++++++++++++++++++++++-
 test/e2e/indicator.test.js    |  63 +++++++++++++++++
 4 files changed, 199 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/progress-linear.md

diff --git a/.changeset/progress-linear.md b/.changeset/progress-linear.md
new file mode 100644
index 000000000..81f7a5181
--- /dev/null
+++ b/.changeset/progress-linear.md
@@ -0,0 +1,5 @@
+---
+"webpack-dev-middleware": minor
+---
+
+`progress` now takes `"circular"` and `"linear"` as well as a boolean, the same values as webpack-dev-server's `client.progress`. `"circular"` is the badge this package has always shown, and what `true` still selects; `"linear"` renders a thin bar across the top of the viewport
diff --git a/client-src/index.js b/client-src/index.js
index 876af591e..e492fe445 100644
--- a/client-src/index.js
+++ b/client-src/index.js
@@ -46,7 +46,7 @@ import stripAnsi from "./utils/strip-ansi.js";
  * @property {string} name limit updates to this compilation name
  * @property {boolean} autoConnect connect immediately when the entry runs
  * @property {number=} reconnect how many times to reconnect before giving up, unset to use the transport's default
- * @property {boolean} progress show a small badge while a rebuild is in progress
+ * @property {boolean | "circular" | "linear"} progress show an indicator while a rebuild is in progress — `true` and `"circular"` a small badge, `"linear"` a thin bar across the top of the viewport
  */
 
 /** @type {ClientOptions} */
@@ -187,7 +187,12 @@ function setOverrides(overrides) {
   }
 
   if (overrides.progress) {
-    options.progress = overrides.progress !== "false";
+    // Same values as webpack-dev-server's `client.progress`, so the shape it
+    // puts in this query needs no translating.
+    options.progress =
+      overrides.progress === "linear" || overrides.progress === "circular"
+        ? overrides.progress
+        : overrides.progress !== "false";
   }
 
   if (overrides.dynamicPublicPath && overrides.dynamicPublicPath !== "false") {
@@ -594,6 +599,9 @@ if (typeof window !== "undefined") {
   }
   reporter = window[REPORTER_KEY];
 
+  // `true` keeps the badge this package has always shown.
+  indicator.configure(options.progress === "linear" ? "linear" : "circular");
+
   // Only what the transport in use needs has to exist: asking for a WebSocket
   // on a browser without `EventSource` is fine, and so is the reverse. An
   // injected client speaks for itself, so nothing is required of the browser
diff --git a/client-src/indicator.js b/client-src/indicator.js
index 72e28b3e7..d509105c6 100644
--- a/client-src/indicator.js
+++ b/client-src/indicator.js
@@ -12,13 +12,20 @@ const RING_LENGTH = 2 * Math.PI * 6;
 // eslint-disable-next-line jsdoc/reject-any-type
 /** @typedef {any} EXPECTED_ANY */
 
+/**
+ * @typedef {"circular" | "linear"} IndicatorType
+ */
+
 /**
  * @typedef {object} IndicatorState
  * @property {HTMLElement | null} host badge host element
+ * @property {IndicatorType} type which indicator is rendered
  * @property {HTMLElement | null} label label inside the badge
  * @property {HTMLElement | null} dot pulsing dot (indeterminate mode)
  * @property {SVGSVGElement | null} ring progress ring (determinate mode)
  * @property {SVGCircleElement | null} ringValue ring value circle
+ * @property {HTMLElement | null} bar filled part of the linear indicator
+ * @property {EXPECTED_ANY} barAnimation the indeterminate animation, so it can be stopped
  * @property {Record<string, true>} building sources with a build in progress — the badge hides only when every source finished
  */
 
@@ -26,10 +33,13 @@ const RING_LENGTH = 2 * Math.PI * 6;
 function createIndicatorState() {
   return {
     host: null,
+    type: "circular",
     label: null,
     dot: null,
     ring: null,
     ringValue: null,
+    bar: null,
+    barAnimation: null,
     building: {},
   };
 }
@@ -76,6 +86,32 @@ function applyStyle(element, style) {
   }
 }
 
+/**
+ * Build the linear indicator: a thin bar across the top of the viewport, the
+ * shape `progress: "linear"` selects in webpack-dev-server.
+ * @param {ShadowRoot} root the host's shadow root
+ */
+function buildBar(root) {
+  applyStyle(/** @type {HTMLElement} */ (state.host), {
+    position: "fixed",
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: "4px",
+    zIndex: 2147483645,
+    pointerEvents: "none",
+  });
+
+  state.bar = document.createElement("div");
+  applyStyle(state.bar, {
+    width: "0%",
+    height: "4px",
+    background: theme.accent,
+  });
+
+  root.appendChild(state.bar);
+}
+
 /**
  * Create (or reuse) the indicator host element.
  */
@@ -92,6 +128,16 @@ function ensureIndicator() {
 
   state.host = document.createElement("div");
   state.host.id = INDICATOR_ID;
+
+  const root = state.host.attachShadow({ mode: "open" });
+
+  if (state.type === "linear") {
+    buildBar(root);
+    document.body.appendChild(state.host);
+
+    return;
+  }
+
   applyStyle(state.host, {
     position: "fixed",
     right: "16px",
@@ -100,8 +146,6 @@ function ensureIndicator() {
     pointerEvents: "none",
   });
 
-  const root = state.host.attachShadow({ mode: "open" });
-
   const badge = document.createElement("div");
   applyStyle(badge, {
     display: "flex",
@@ -170,6 +214,45 @@ function ensureIndicator() {
   document.body.appendChild(state.host);
 }
 
+/**
+ * Drive the linear indicator. A percent sets the width; without one there is
+ * nothing to measure, so the bar sweeps instead — the same choice the badge
+ * makes between its ring and its pulsing dot.
+ * @param {number=} percent compilation progress (0-100)
+ */
+function showBar(percent) {
+  // Built by `ensureIndicator`, so missing only in the document-less case it
+  // already guards.
+  /* istanbul ignore next -- @preserve */
+  if (!state.bar) {
+    return;
+  }
+
+  if (typeof percent === "number") {
+    if (state.barAnimation) {
+      state.barAnimation.cancel();
+      state.barAnimation = null;
+    }
+
+    state.bar.style.width = `${Math.min(100, Math.max(0, percent))}%`;
+
+    return;
+  }
+
+  state.bar.style.width = "40%";
+
+  if (state.barAnimation || typeof state.bar.animate !== "function") {
+    return;
+  }
+
+  // Web Animations rather than a stylesheet: a strict `style-src` refuses a
+  // `<style>` element, which is why nothing here has one.
+  state.barAnimation = state.bar.animate(
+    [{ transform: "translateX(-100%)" }, { transform: "translateX(250%)" }],
+    { duration: 1400, iterations: Number.POSITIVE_INFINITY },
+  );
+}
+
 /**
  * Show the indicator (idempotent). With a percent the badge renders a
  * progress ring; without one it renders a pulsing dot.
@@ -182,6 +265,12 @@ export function show(text, percent, source = "") {
   state.building[source] = true;
   ensureIndicator();
 
+  if (state.type === "linear") {
+    showBar(percent);
+
+    return;
+  }
+
   // `ensureIndicator` above builds the label, so it is missing only in the
   // document-less case that function already guards.
   /* istanbul ignore next -- @preserve */
@@ -229,6 +318,11 @@ export function hide(source) {
     }
   }
 
+  if (state.barAnimation) {
+    state.barAnimation.cancel();
+    state.barAnimation = null;
+  }
+
   if (state.host && state.host.parentNode) {
     /** @type {ParentNode & Node} */
     (state.host.parentNode).removeChild(state.host);
@@ -239,5 +333,30 @@ export function hide(source) {
   state.dot = null;
   state.ring = null;
   state.ringValue = null;
+  state.bar = null;
   state.building = {};
 }
+
+/**
+ * Choose which indicator is rendered. `"circular"` is the badge this package
+ * has always shown; `"linear"` is the thin bar across the top of the viewport,
+ * so `progress` can carry the same values as webpack-dev-server's.
+ * @param {IndicatorType} type which indicator to render
+ */
+export function configure(type) {
+  if (type === state.type) {
+    return;
+  }
+
+  state.type = type;
+
+  // The two are different elements, so anything already on screen has to go;
+  // the next event rebuilds in the new shape. Which sources are mid-build is
+  // kept, so the indicator still hides only once they have all finished.
+  if (state.host) {
+    const building = state.building;
+
+    hide();
+    state.building = building;
+  }
+}
diff --git a/test/e2e/indicator.test.js b/test/e2e/indicator.test.js
index a0289ec9e..e4d5885f2 100644
--- a/test/e2e/indicator.test.js
+++ b/test/e2e/indicator.test.js
@@ -108,6 +108,69 @@ describe("building indicator (browser)", () => {
 
     expect(await page.evaluate(() => globalThis.__badgeSeen)).toBe(false);
   });
+
+  it("renders a bar across the top for progress=linear", async () => {
+    hotApp = await createHotApp({
+      query: "?progress=linear",
+      code: acceptedApp("v1"),
+      hot: { progress: true },
+    });
+    ({ page, browser } = await runBrowser());
+
+    await page.goto(hotApp.url);
+    await waitForAppText(page, "v1");
+
+    // Sampled from inside the page: the indicator only exists while a build
+    // is running, which can be shorter than a round trip from the test.
+    await page.evaluate((id) => {
+      globalThis.__shapes = [];
+
+      const record = () => {
+        const host = document.getElementById(id);
+
+        if (!host || !host.shadowRoot) {
+          return;
+        }
+
+        const child = host.shadowRoot.firstElementChild;
+
+        globalThis.__shapes.push({
+          top: host.style.top,
+          width: host.style.width,
+          right: host.style.right,
+          childWidth: child ? child.style.width : null,
+        });
+      };
+
+      new MutationObserver(record).observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+      setInterval(record, 10);
+    }, INDICATOR_ID);
+
+    hotApp.edit(acceptedApp("v2"));
+    await waitForAppText(page, "v2");
+
+    const shapes = await page.evaluate(() => globalThis.__shapes);
+
+    expect(shapes.length).toBeGreaterThan(0);
+    // Pinned to the top edge and spanning the viewport, rather than the
+    // badge's bottom-right corner.
+    expect(shapes[0].top).toBe("0px");
+    expect(shapes[0].width).toBe("100%");
+    expect(shapes[0].right).toBe("");
+    // A percentage arrives with the progress payloads, so the filled part is
+    // measured rather than sweeping.
+    expect(
+      shapes.some(
+        (shape) =>
+          shape.childWidth &&
+          shape.childWidth !== "40%" &&
+          shape.childWidth.endsWith("%"),
+      ),
+    ).toBe(true);
+  });
 });
 
 describe("indicator shared state across bundled copies (browser)", () => {

From 9abc39f99564b5621b43ab259780358f1412c951 Mon Sep 17 00:00:00 2001
From: alexander-akait <4567934+alexander-akait@users.noreply.github.com>
Date: Sat, 26 Sep 2026 14:26:48 +0000
Subject: [PATCH 2/3] fix(client): do not animate the indicator when motion is
 declined
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review finding. The bar's sweep ran regardless of
`prefers-reduced-motion`, which webpack-dev-server's linear indicator
honors in its own stylesheet — so the shape this PR adds for parity was
missing the part of it that matters most to the people it matters to.

The badge's pulsing dot ignored the preference too, which predates this
branch. Both go through one guard now rather than leaving the older one
wrong: nothing starts while motion is declined, anything already running
stops if the preference changes mid-build, and the listener that watches
for it is dropped when the indicator goes away. Without a sweep the bar
says a build is running by sitting still at full width, so the state is
still visible.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UjuMAuk9o6UazjHzcAQCTA
---
 client-src/indicator.js    | 114 +++++++++++++++++++++++++++++++------
 test/e2e/indicator.test.js |  50 ++++++++++++++++
 2 files changed, 147 insertions(+), 17 deletions(-)

diff --git a/client-src/indicator.js b/client-src/indicator.js
index d509105c6..9ec8f6bcb 100644
--- a/client-src/indicator.js
+++ b/client-src/indicator.js
@@ -25,7 +25,9 @@ const RING_LENGTH = 2 * Math.PI * 6;
  * @property {SVGSVGElement | null} ring progress ring (determinate mode)
  * @property {SVGCircleElement | null} ringValue ring value circle
  * @property {HTMLElement | null} bar filled part of the linear indicator
- * @property {EXPECTED_ANY} barAnimation the indeterminate animation, so it can be stopped
+ * @property {EXPECTED_ANY} barAnimation the bar's sweep, when one is running
+ * @property {EXPECTED_ANY[]} animations every running animation, so motion can be stopped on request
+ * @property {EXPECTED_ANY} motionListener what watches for motion being declined mid-build
  * @property {Record<string, true>} building sources with a build in progress — the badge hides only when every source finished
  */
 
@@ -40,6 +42,8 @@ function createIndicatorState() {
     ringValue: null,
     bar: null,
     barAnimation: null,
+    animations: [],
+    motionListener: null,
     building: {},
   };
 }
@@ -76,6 +80,84 @@ const state = (() => {
   return holder[INDICATOR_STATE_KEY];
 })();
 
+/**
+ * @returns {EXPECTED_ANY} the reduced-motion query, or null where there is none
+ */
+function motionQuery() {
+  /* istanbul ignore next -- @preserve */
+  if (
+    typeof window === "undefined" ||
+    typeof window.matchMedia !== "function"
+  ) {
+    return null;
+  }
+
+  return window.matchMedia("(prefers-reduced-motion: reduce)");
+}
+
+/**
+ * Stop every animation this module started, and stop listening for the
+ * preference that would have stopped them.
+ */
+function stopAnimations() {
+  for (const animation of state.animations) {
+    animation.cancel();
+  }
+
+  state.animations = [];
+
+  const query = motionQuery();
+
+  if (query && state.motionListener) {
+    if (typeof query.removeEventListener === "function") {
+      query.removeEventListener("change", state.motionListener);
+    } else if (typeof query.removeListener === "function") {
+      query.removeListener(state.motionListener);
+    }
+  }
+
+  state.motionListener = null;
+}
+
+/**
+ * Start a looping animation, unless the viewer asked not to see motion — and
+ * stop it if they ask while it is running. Every animation started this way is
+ * tracked, so `hide` can stop them and drop the listener with them.
+ * @param {EXPECTED_ANY} element what to animate
+ * @param {EXPECTED_ANY} keyframes keyframes
+ * @param {EXPECTED_ANY} options animation options
+ * @returns {EXPECTED_ANY} the animation, or null when none was started
+ */
+function animate(element, keyframes, options) {
+  const query = motionQuery();
+
+  if ((query && query.matches) || typeof element.animate !== "function") {
+    return null;
+  }
+
+  const animation = element.animate(keyframes, options);
+
+  state.animations.push(animation);
+
+  // Asked for mid-build: stop what is already moving rather than wait it out.
+  if (query && !state.motionListener) {
+    state.motionListener = () => {
+      if (query.matches) {
+        stopAnimations();
+      }
+    };
+
+    if (typeof query.addEventListener === "function") {
+      query.addEventListener("change", state.motionListener);
+    } else if (typeof query.addListener === "function") {
+      // Safari below 14 has only the deprecated spelling.
+      query.addListener(state.motionListener);
+    }
+  }
+
+  return animation;
+}
+
 /**
  * @param {EXPECTED_ANY} element element
  * @param {Record<string, string | number>} style style map
@@ -170,12 +252,10 @@ function ensureIndicator() {
   });
 
   // Pulse through the Web Animations API — no <style> element involved.
-  if (typeof state.dot.animate === "function") {
-    state.dot.animate([{ opacity: 1 }, { opacity: 0.2 }, { opacity: 1 }], {
-      duration: 1000,
-      iterations: Number.POSITIVE_INFINITY,
-    });
-  }
+  animate(state.dot, [{ opacity: 1 }, { opacity: 0.2 }, { opacity: 1 }], {
+    duration: 1000,
+    iterations: Number.POSITIVE_INFINITY,
+  });
 
   // Determinate mode: a progress ring drawn with SVG presentation attributes.
   state.ring = document.createElementNS(SVG_NS, "svg");
@@ -230,7 +310,7 @@ function showBar(percent) {
 
   if (typeof percent === "number") {
     if (state.barAnimation) {
-      state.barAnimation.cancel();
+      stopAnimations();
       state.barAnimation = null;
     }
 
@@ -239,18 +319,20 @@ function showBar(percent) {
     return;
   }
 
-  state.bar.style.width = "40%";
-
-  if (state.barAnimation || typeof state.bar.animate !== "function") {
+  if (state.barAnimation) {
     return;
   }
 
   // Web Animations rather than a stylesheet: a strict `style-src` refuses a
-  // `<style>` element, which is why nothing here has one.
-  state.barAnimation = state.bar.animate(
+  // `<style>` element, which is why nothing here has one. With motion declined
+  // nothing sweeps, so the bar states that a build is running by sitting still
+  // at full width instead.
+  state.barAnimation = animate(
+    state.bar,
     [{ transform: "translateX(-100%)" }, { transform: "translateX(250%)" }],
     { duration: 1400, iterations: Number.POSITIVE_INFINITY },
   );
+  state.bar.style.width = state.barAnimation ? "40%" : "100%";
 }
 
 /**
@@ -318,10 +400,8 @@ export function hide(source) {
     }
   }
 
-  if (state.barAnimation) {
-    state.barAnimation.cancel();
-    state.barAnimation = null;
-  }
+  stopAnimations();
+  state.barAnimation = null;
 
   if (state.host && state.host.parentNode) {
     /** @type {ParentNode & Node} */
diff --git a/test/e2e/indicator.test.js b/test/e2e/indicator.test.js
index e4d5885f2..a056bf65d 100644
--- a/test/e2e/indicator.test.js
+++ b/test/e2e/indicator.test.js
@@ -171,6 +171,56 @@ describe("building indicator (browser)", () => {
       ),
     ).toBe(true);
   });
+
+  it("does not sweep the bar when motion is declined", async () => {
+    hotApp = await createHotApp({
+      query: "?progress=linear",
+      code: acceptedApp("v1"),
+    });
+    ({ page, browser } = await runBrowser());
+
+    await page.emulateMediaFeatures([
+      { name: "prefers-reduced-motion", value: "reduce" },
+    ]);
+    await page.goto(hotApp.url);
+    await waitForAppText(page, "v1");
+
+    await page.evaluate((id) => {
+      globalThis.__animated = [];
+
+      const record = () => {
+        const host = document.getElementById(id);
+        const child =
+          host && host.shadowRoot && host.shadowRoot.firstElementChild;
+
+        if (child) {
+          globalThis.__animated.push({
+            running: child.getAnimations
+              ? child.getAnimations().length
+              : "unsupported",
+            width: child.style.width,
+          });
+        }
+      };
+
+      new MutationObserver(record).observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+      setInterval(record, 10);
+    }, INDICATOR_ID);
+
+    hotApp.edit(acceptedApp("v2"));
+    await waitForAppText(page, "v2");
+
+    const samples = await page.evaluate(() => globalThis.__animated);
+
+    expect(samples.length).toBeGreaterThan(0);
+    // Nothing moving, and the bar says a build is running by being full
+    // instead of by sweeping.
+    expect(samples.every((sample) => sample.running === 0)).toBe(true);
+    expect(samples.some((sample) => sample.width === "100%")).toBe(true);
+  });
 });
 
 describe("indicator shared state across bundled copies (browser)", () => {

From 2a7737088e36ff7a0dbfe030323dd4a35809603d Mon Sep 17 00:00:00 2001
From: alexander-akait <4567934+alexander-akait@users.noreply.github.com>
Date: Sat, 26 Sep 2026 15:10:25 +0000
Subject: [PATCH 3/3] fix(client): drop the motion listener from the query that
 holds it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two review findings, both in the reduced-motion guard added a commit ago.

`matchMedia` returns a new `MediaQueryList` for every call, so removing the
listener from a freshly built one called `removeEventListener` and changed
nothing: the object that actually held it kept it, one per build, for the
life of the page. Verified in the browser the suite runs rather than from
the specification alone. The query the listener was registered on is kept
and removed from.

Cancelling a sweep left `barAnimation` pointing at the cancelled animation
and the bar frozen at the 40% a sweep starts from — so it read as progress
that had stalled, and every later call returned early on the stale
reference and could never put it right. Declining motion now clears the
reference and puts the bar at the width it uses when it cannot move.

The first test written for the listener passed against the bug, because it
counted calls rather than what stayed attached; it tracks listeners per
query object now, and fails when the removal is aimed at the wrong one.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UjuMAuk9o6UazjHzcAQCTA
---
 client-src/indicator.js    |  27 +++++++++-
 test/e2e/indicator.test.js | 108 +++++++++++++++++++++++++++++++++++++
 2 files changed, 133 insertions(+), 2 deletions(-)

diff --git a/client-src/indicator.js b/client-src/indicator.js
index 9ec8f6bcb..6c942514f 100644
--- a/client-src/indicator.js
+++ b/client-src/indicator.js
@@ -28,6 +28,7 @@ const RING_LENGTH = 2 * Math.PI * 6;
  * @property {EXPECTED_ANY} barAnimation the bar's sweep, when one is running
  * @property {EXPECTED_ANY[]} animations every running animation, so motion can be stopped on request
  * @property {EXPECTED_ANY} motionListener what watches for motion being declined mid-build
+ * @property {EXPECTED_ANY} motionMediaQuery the query that listener sits on, which is the only object it can be removed from
  * @property {Record<string, true>} building sources with a build in progress — the badge hides only when every source finished
  */
 
@@ -44,6 +45,7 @@ function createIndicatorState() {
     barAnimation: null,
     animations: [],
     motionListener: null,
+    motionMediaQuery: null,
     building: {},
   };
 }
@@ -106,7 +108,10 @@ function stopAnimations() {
 
   state.animations = [];
 
-  const query = motionQuery();
+  // The query the listener was registered on, not a fresh one: `matchMedia`
+  // returns a new `MediaQueryList` for every call, so removing from another
+  // object silently does nothing and the listeners pile up one per build.
+  const query = state.motionMediaQuery;
 
   if (query && state.motionListener) {
     if (typeof query.removeEventListener === "function") {
@@ -117,6 +122,23 @@ function stopAnimations() {
   }
 
   state.motionListener = null;
+  state.motionMediaQuery = null;
+}
+
+/**
+ * Stop the motion, and leave what was moving in a state that still reads as a
+ * build in progress — a sweep cancelled where it happens to be would otherwise
+ * look like progress that stalled.
+ */
+function declineMotion() {
+  const wasSweeping = Boolean(state.barAnimation);
+
+  stopAnimations();
+  state.barAnimation = null;
+
+  if (wasSweeping && state.bar) {
+    state.bar.style.width = "100%";
+  }
 }
 
 /**
@@ -141,9 +163,10 @@ function animate(element, keyframes, options) {
 
   // Asked for mid-build: stop what is already moving rather than wait it out.
   if (query && !state.motionListener) {
+    state.motionMediaQuery = query;
     state.motionListener = () => {
       if (query.matches) {
-        stopAnimations();
+        declineMotion();
       }
     };
 
diff --git a/test/e2e/indicator.test.js b/test/e2e/indicator.test.js
index a056bf65d..0d1be6fe9 100644
--- a/test/e2e/indicator.test.js
+++ b/test/e2e/indicator.test.js
@@ -252,6 +252,114 @@ describe("indicator shared state across bundled copies (browser)", () => {
     ({ browser, app: hotApp } = await closeE2e(browser, hotApp));
   });
 
+  it("stops a sweep when motion is declined mid-build, and recovers", async () => {
+    await start();
+    await page.goto(hotApp.url);
+
+    const bar = async () =>
+      page.evaluate((id) => {
+        const host = document.getElementById(id);
+        const child =
+          host && host.shadowRoot && host.shadowRoot.firstElementChild;
+
+        return child
+          ? { width: child.style.width, running: child.getAnimations().length }
+          : null;
+      }, INDICATOR_ID);
+
+    await page.evaluate(() => {
+      globalThis.indicatorA.configure("linear");
+      // No percent, so the bar sweeps rather than measuring.
+      globalThis.indicatorA.show();
+    });
+
+    expect(await bar()).toEqual({ width: "40%", running: 1 });
+
+    // Declined while it is moving.
+    await page.emulateMediaFeatures([
+      { name: "prefers-reduced-motion", value: "reduce" },
+    ]);
+    await page.waitForFunction(
+      (id) =>
+        document.getElementById(id).shadowRoot.firstElementChild.getAnimations()
+          .length === 0,
+      { timeout: 30000 },
+      INDICATOR_ID,
+    );
+
+    // A sweep cancelled where it happened to be would sit at 40% looking like
+    // progress that stalled, and the stale animation reference would make
+    // every later call a no-op.
+    expect(await bar()).toEqual({ width: "100%", running: 0 });
+
+    await page.evaluate(() => {
+      globalThis.indicatorA.show();
+    });
+
+    expect(await bar()).toEqual({ width: "100%", running: 0 });
+  });
+
+  it("does not pile up preference listeners across builds", async () => {
+    await start();
+
+    // Tracked per query object rather than as a total, because that is where
+    // the mistake hides: `matchMedia` hands back a new `MediaQueryList` every
+    // call, so removing from a fresh one still *calls* `removeEventListener`
+    // and still leaves the listener attached to the object that has it.
+    // Installed before any page script runs, so the client's own calls count.
+    await page.evaluateOnNewDocument(() => {
+      globalThis.__attached = new Map();
+
+      const real = globalThis.matchMedia.bind(globalThis);
+
+      globalThis.matchMedia = (query) => {
+        const list = real(query);
+        const add = list.addEventListener.bind(list);
+        const remove = list.removeEventListener.bind(list);
+        const tally = (delta) => {
+          globalThis.__attached.set(
+            list,
+            (globalThis.__attached.get(list) || 0) + delta,
+          );
+        };
+
+        list.addEventListener = (...args) => {
+          tally(1);
+
+          return add(...args);
+        };
+        list.removeEventListener = (...args) => {
+          tally(-1);
+
+          return remove(...args);
+        };
+
+        return list;
+      };
+    });
+    await page.goto(hotApp.url);
+
+    const left = await page.evaluate(() => {
+      for (let i = 0; i < 3; i++) {
+        globalThis.indicatorA.show("Rebuilding…");
+        globalThis.indicatorA.hide();
+      }
+
+      let worst = 0;
+
+      for (const count of globalThis.__attached.values()) {
+        worst = Math.max(worst, count);
+      }
+
+      return { worst, queries: globalThis.__attached.size };
+    });
+
+    // Three builds registered on three query objects; none may still be
+    // holding a listener afterwards.
+    expect(left.queries).toBeGreaterThan(0);
+    expect(left.worst).toBe(0);
+  });
+
   it("drives a single badge from a second bundled copy", async () => {
     await start();
     await page.goto(hotApp.url);