@hugpy/video-intelligence-ui 0.3.2 → 0.3.4

package/src/video/jobTracker.ts

@@ -25,9 +25,10 @@ import { useSyncExternalStore } from "react";
 import { getSessionId } from "../session";
 import { isCanned } from "../demo/mode";
 import { installDemoTransport } from "../demo/demoFetch";
-import { jobStatusUrl, jobCancelUrl } from "../config";
+import { jobCancelUrl, videoJobUrl } from "../config";
 import { request, okValue } from "../transport/client";
 import { addToLibrary } from "./mediaLibrary";
+import { subscribeJobStream, type JobEvent } from "./jobStream";
 import {
   jobRecordSchema,
   isTerminal,
@@ -38,12 +39,6 @@ import {
   type AnyProgress,
 } from "./contract";
 import type { SpatialRegion, TemporalRegion } from "../regions/types";
-import {
-  GENERATE_POLL_CAP_MS,
-  JOB_POLL_CAP_MS,
-  generateScenePollCapMs,
-  generateMoviePollCapMs,
-} from "../stations/pollCaps";
 
 /** The job kinds this arm enqueues, one poll-parse branch per kind. */
 export type JobKind =
@@ -52,7 +47,8 @@ export type JobKind =
   | "audio_extract"
   | "generate_image"
   | "generate_scene"
-  | "generate_movie";
+  | "generate_movie"
+  | "studio_i2v";
 
 /** The station a job belongs to — also the library origin for crop pushes.
  *  "video-crop" (Studio slice 2b) is the dedicated id for the one-pass spatial+
@@ -69,7 +65,8 @@ export type StationId =
   | "frames"
   | "generate"
   | "generate-tester"
-  | "generate-scene-parts";
+  | "generate-scene-parts"
+  | "studio";
 
 /**
  * One tracked job. Persisted to sessionStorage, so — because a record may be
@@ -172,9 +169,6 @@ export interface TrackedJob {
 /** The single sessionStorage key prefix (build marker — must reach the bundle). */
 const KEY_PREFIX = "vi.jobTracker.v1";
 
-/** Module poll cadence — matches the retired per-hook POLL_MS exactly. */
-const POLL_MS = 800;
-
 // Session-scoped key so two tabs keep independent trackers, and the persisted
 // list travels with the same session id the uploads/jobs are tagged by.
 //
@@ -199,7 +193,9 @@ function storageKey(): string {
 let cache: TrackedJob[] | null = null;
 const listeners = new Set<() => void>();
 let storageBound = false;
-let pollTimer: number | null = null;
+// The shared job-stream unsubscribe while ≥1 tracked job is active (null = not
+// subscribed). The tracker no longer polls; it applies pushed rows by job_id.
+let streamUnsub: (() => void) | null = null;
 
 function readStorage(): TrackedJob[] {
   try {
@@ -253,36 +249,6 @@ function anyActive(): boolean {
   return ensureLoaded().some(isJobActive);
 }
 
-function capFor(
-  kind: JobKind,
-  nFrames?: number | null,
-  chain?: boolean | null,
-  segments?: number | null,
-): number {
-  if (kind === "generate_movie")
-    return generateMoviePollCapMs(segments ?? 1, nFrames ?? undefined, chain ?? false);
-  if (kind === "generate_scene")
-    return generateScenePollCapMs(nFrames ?? 1, chain ?? false);
-  return kind === "generate_image" ? GENERATE_POLL_CAP_MS : JOB_POLL_CAP_MS;
-}
-
-function opFor(kind: JobKind): string {
-  switch (kind) {
-    case "crop":
-      return "crop.poll";
-    case "frame_extract":
-      return "frame_extract.poll";
-    case "audio_extract":
-      return "audio_extract.poll";
-    case "generate_image":
-      return "generate_image.poll";
-    case "generate_scene":
-      return "generate_scene.poll";
-    case "generate_movie":
-      return "generate_movie.poll";
-  }
-}
-
 function failMsgFor(kind: JobKind): string {
   switch (kind) {
     case "crop":
@@ -297,6 +263,8 @@ function failMsgFor(kind: JobKind): string {
       return "Scene generation failed.";
     case "generate_movie":
       return "Movie generation failed.";
+    case "studio_i2v":
+      return "Clip generation failed.";
   }
 }
 
@@ -383,6 +351,11 @@ function pushOutputs(rec: TrackedJob, outputs: MediaRef[]): void {
     });
     return;
   }
+  if (rec.kind === "studio_i2v") {
+    const out = outputs.find((m) => m.kind === "video");
+    if (out) addToLibrary(out, "studio", rec.libLabel ?? "studio clip");
+    return;
+  }
   // audio_extract: intermediate (feeds the temporal editor) — never pushed.
 }
 
@@ -432,51 +405,57 @@ function applyPoll(rec: TrackedJob, raw: unknown): void {
   }
 }
 
-// One module-level tick: poll every active record, cap the overrun ones. A
-// transport error is transient (matches the hooks) — skip and retry next tick.
-async function pollTick(): Promise<void> {
-  for (const rec of ensureLoaded()) {
-    if (!isJobActive(rec)) continue;
-    if (
-      Date.now() - rec.startedAt >
-      capFor(rec.kind, rec.nFrames, rec.chain, rec.segments)
-    ) {
-      // Cap reached — pause polling THIS record, but DON'T fail it.
-      mutate(rec.jobId, { capped: true });
-      continue;
+// Apply one pushed row to its tracked record. The stream event carries `job` —
+// the GET /video/jobs/<id> view applyPoll already parses — so a transition is
+// applied the moment a worker reports it, with no poll. Events for untracked or
+// already-terminal ids are ignored; a burst self-coalesces (each is cheap).
+function onStreamEvent(ev: JobEvent): void {
+  if (ev.stage === "stream.ready") {
+    for (const rec of ensureLoaded().filter((row) => !isJobTerminal(row))) {
+      void request<unknown>(videoJobUrl(rec.jobId), {
+        meta: { specKey: rec.station, operation: "video.job.reconcile" },
+      }).then((res) => {
+        const current = ensureLoaded().find((row) => row.jobId === rec.jobId);
+        if (res.ok && current && !isJobTerminal(current))
+          applyPoll(current, okValue(res));
+        disarmIfIdle();
+      });
     }
-    const r = await request<unknown>(jobStatusUrl(rec.jobId), {
-      meta: { specKey: rec.station, operation: opFor(rec.kind) },
-    });
-    if (!r.ok) continue; // transient — retry on the next tick
-    applyPoll(rec, okValue(r));
+    return;
+  }
+  const jobId = ev.job_id;
+  if (!jobId) return;
+  const rec = ensureLoaded().find((r) => r.jobId === jobId);
+  if (!rec || !isJobActive(rec)) return;
+  if (ev.job == null) {
+    // The server no longer holds this job (gone) — mark expired, stop watching it.
+    mutate(rec.jobId, { expired: true });
+  } else {
+    applyPoll(rec, ev.job);
   }
   disarmIfIdle();
 }
 
-// Arm the single interval while ≥1 record is active; a no-op if already armed or
-// nothing is active. Fires an immediate tick (matches the retired hooks).
+// Subscribe to the shared job stream while ≥1 record is active; a no-op if
+// already subscribed or nothing is active. Replaces the retired poll interval —
+// there is no timer anywhere now; rows arrive on push.
 function armPolling(): void {
   if (typeof window === "undefined") return;
-  if (pollTimer != null) return;
+  if (streamUnsub != null) return;
   if (!anyActive()) return;
-  // Ordering guard for the canned demo: this module's initTracker() runs at IMPORT
-  // time (before entry.tsx's installVideoDemo()), and on a reload it rehydrates any
-  // persisted in-flight record and immediately polls it. If the fetch shim isn't up
-  // yet, that first poll would hit the REAL backend (a 401 + a live wire hit — the
-  // brochure must never do that). installDemoTransport is idempotent, so calling it
-  // here guarantees the shim is installed before ANY canned poll fires, whatever the
-  // module import order. No-op outside canned mode.
+  // Ordering guard for the canned demo: initTracker() runs at IMPORT time (before
+  // entry.tsx's installVideoDemo()); installDemoTransport is idempotent and also
+  // shims EventSource, so calling it here guarantees the canned stream shim is up
+  // before we subscribe, whatever the module import order. No-op outside canned mode.
   if (isCanned()) installDemoTransport();
-  pollTimer = window.setInterval(() => void pollTick(), POLL_MS);
-  void pollTick();
+  streamUnsub = subscribeJobStream(onStreamEvent);
 }
 
-// Clear the interval once no record is active (keeps it alive for others).
+// Drop the subscription once no record is active (reopened by armPolling later).
 function disarmIfIdle(): void {
-  if (pollTimer != null && !anyActive()) {
-    window.clearInterval(pollTimer);
-    pollTimer = null;
+  if (streamUnsub != null && !anyActive()) {
+    streamUnsub();
+    streamUnsub = null;
   }
 }
 
@@ -547,6 +526,13 @@ export function trackJob(input: TrackJobInput): void {
   writeStorage(cache);
   emit();
   armPolling();
+  void request<unknown>(videoJobUrl(input.jobId), {
+    meta: { specKey: "studio", operation: "video.job.seed" },
+  }).then((res) => {
+    const active = ensureLoaded().find((row) => row.jobId === input.jobId);
+    if (res.ok && active && isJobActive(active)) applyPoll(active, okValue(res));
+    disarmIfIdle();
+  });
 }
 
 /**
@@ -645,6 +631,10 @@ function bindStorageOnce(): void {
     cache = readStorage();
     emit();
     armPolling();
+    onStreamEvent({ stage: "stream.ready" });
+  });
+  window.addEventListener("focus", () => {
+    onStreamEvent({ stage: "stream.ready" });
   });
 }
 
@@ -697,6 +687,7 @@ function initTracker(): void {
     writeStorage(cache);
   }
   armPolling();
+  onStreamEvent({ stage: "stream.ready" });
 }
 
 initTracker();

package/src/video/modelsFeed.ts

@@ -0,0 +1,105 @@
+// SHARED model catalog feed (2026-10-05) — the models twin of jobStream.ts.
+// Every model picker on the page SEEDS from ONE shared GET of /v1/models and
+// /prompt/tasks (the first hook to ask fetches; the rest reuse that answer), then
+// subscribes here. One EventSource on /api/llm/models/rows/stream (core pushes a
+// row the moment a box's `models` / `residents` row changes — DB trigger ->
+// pg_notify) marks the cached answer stale and tells subscribers to re-read it.
+// No focus/visibility revalidation and no timer: the catalog moves only when the
+// DB says it moved. Same reconnect rule as jobStream: re-attach only after a
+// stream that HAD opened drops (the server caps it at an hour).
+import { hugpyConfig } from "../config";
+import { request } from "../transport/client";
+
+type Result = Awaited<ReturnType<typeof request<unknown>>>;
+type Listener = () => void;
+
+const cache = new Map<string, Promise<Result>>();
+const listeners = new Set<Listener>();
+let es: EventSource | null = null;
+let refs = 0;
+let everOpened = false;
+let retryTimer: ReturnType<typeof setTimeout> | null = null;
+let notifyTimer: ReturnType<typeof setTimeout> | null = null;
+const RETRY_MS = 5000;
+const COALESCE_MS = 500; // one action touches several rows; re-read once
+
+/** The shared answer for `url` (one request for the whole page until the DB
+ *  reports a change). A failed answer is not kept, so the next caller retries. */
+export function sharedRequest(url: string, meta: Record<string, string>): Promise<Result> {
+  let p = cache.get(url);
+  if (!p) {
+    p = request<unknown>(url, { meta } as Parameters<typeof request>[1]);
+    cache.set(url, p);
+    p.then((r) => {
+      if (!r.ok && cache.get(url) === p) cache.delete(url);
+    });
+  }
+  return p;
+}
+
+function changed(): void {
+  if (notifyTimer) return;
+  notifyTimer = setTimeout(() => {
+    notifyTimer = null;
+    cache.clear();
+    for (const fn of listeners) {
+      try {
+        fn();
+      } catch {
+        /* one bad subscriber must not stall the rest */
+      }
+    }
+  }, COALESCE_MS);
+}
+
+function openStream(): void {
+  if (es || typeof window === "undefined" || typeof EventSource === "undefined") return;
+  let source: EventSource;
+  try {
+    source = new EventSource(`${hugpyConfig.apiBase}/llm/models/rows/stream`, {
+      withCredentials: true,
+    });
+  } catch {
+    return; // no EventSource — pickers keep their one-time seed
+  }
+  es = source;
+  source.onopen = () => {
+    everOpened = true;
+  };
+  source.onmessage = (e: MessageEvent) => {
+    let ev: { stage?: string };
+    try {
+      ev = JSON.parse(e.data);
+    } catch {
+      return;
+    }
+    if (ev.stage === "stream.ready") return; // transport hello, not a row
+    changed();
+  };
+  source.onerror = () => {
+    source.close();
+    es = null;
+    if (!everOpened || refs === 0 || retryTimer) return; // absent endpoint: stay on the seed
+    retryTimer = setTimeout(() => {
+      retryTimer = null;
+      if (refs > 0) openStream();
+    }, RETRY_MS);
+  };
+}
+
+/** Call `fn` whenever the DB reports a model-row change. Returns the unsubscribe. */
+export function subscribeModelChanges(fn: Listener): () => void {
+  listeners.add(fn);
+  refs += 1;
+  openStream();
+  return () => {
+    listeners.delete(fn);
+    refs -= 1;
+    if (refs <= 0) {
+      refs = 0;
+      es?.close();
+      es = null;
+      everOpened = false;
+    }
+  };
+}

package/src/video/studioOracle.ts

@@ -0,0 +1,48 @@
+import { hugpyConfig } from "../config";
+import { request, okValue, errorOf, describeAppError } from "../transport/client";
+
+export type OracleSettings = {
+  model_id?: string;
+  width?: number;
+  height?: number;
+  fps?: number;
+  frames?: number;
+  steps?: number;
+  cfg?: number;
+  seed?: number;
+};
+
+export async function planStudioSettings(
+  capability: "t2v" | "i2v",
+  prompt: string,
+  settings: OracleSettings,
+  explicit: string[],
+): Promise<OracleSettings> {
+  const res = await request<unknown>(hugpyConfig.studioPlanUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ capability, prompt, settings, explicit_settings: explicit }),
+    meta: { specKey: "studio", operation: "studio.oracle.plan" },
+  });
+  if (!res.ok) throw new Error(describeAppError(errorOf(res)));
+  const result = okValue(res) as { settings?: OracleSettings };
+  if (!result || !result.settings || !result.settings.model_id) {
+    throw new Error("Oracle returned no executable Studio settings plan.");
+  }
+  return result.settings;
+}
+
+export async function planStudioMovie(body: Record<string, unknown>): Promise<Record<string, unknown>> {
+  const res = await request<unknown>(hugpyConfig.studioPlanUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+    meta: { specKey: "studio", operation: "studio.oracle.movie.plan" },
+  });
+  if (!res.ok) throw new Error(describeAppError(errorOf(res)));
+  const result = okValue(res) as { body?: Record<string, unknown>; planning?: unknown[] };
+  if (!result || !result.body || !Array.isArray(result.planning)) {
+    throw new Error("Oracle returned no executable Cinema plan.");
+  }
+  return result.body;
+}

package/src/video/useMediaJobs.ts

@@ -12,13 +12,13 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { hugpyConfig } from "../config";
 import { request, okValue } from "../transport/client";
+import { subscribeJobStream } from "./jobStream";
 // The stage-timeline + failure shapes are the SAME wire objects the studio tab
 // already renders through `ProcessTimeline`; reusing its types (and, in the panel,
 // the component itself) keeps one renderer for "what it did / where it broke"
 // instead of a second, divergent one for the console-wide view.
 import type { StageEntry, JobFailure } from "../stations/studio/studioShared";
 
-const POLL_MS = 2000;
 const IN_FLIGHT = new Set(["queued", "claimed", "running", "cancelling"]);
 
 /** The numbers behind the bar (omit-when-unset on the wire). */
@@ -230,13 +230,27 @@ export function useMediaJobs(
     setJobs(parseJobs(okValue(r), includeTerminal));
   }, [includeTerminal]);
 
+  // Seed ONCE, then refresh on PUSH: a worker-reported transition arrives on the
+  // shared job stream and we re-read the catalog projection once (coalesced), so
+  // placement / stage-log / phase stay the server's list shape — never a timer.
   useEffect(() => {
     mounted.current = true;
     void load();
-    const id = window.setInterval(() => void load(), POLL_MS);
+    let coalesce: number | null = null;
+    const unsub = subscribeJobStream(() => {
+      if (coalesce != null) return; // already a reload pending this burst
+      coalesce = window.setTimeout(() => {
+        coalesce = null;
+        void load();
+      }, 300);
+    });
+    const onFocus = () => { void load(); };
+    window.addEventListener("focus", onFocus);
     return () => {
       mounted.current = false;
-      window.clearInterval(id);
+      if (coalesce != null) window.clearTimeout(coalesce);
+      unsub();
+      window.removeEventListener("focus", onFocus);
     };
   }, [load]);
 

package/src/video/useModels.ts

@@ -7,8 +7,7 @@
 // Staleness fix: the registry is no longer fetched only once on mount. Models
 // adopted MID-SESSION (e.g. ae ComfyUI checkpoints that appear once ComfyUI comes
 // up) must enter the picker WITHOUT a full page reload, so the hook now
-// stale-while-revalidates — it re-fetches on window focus / tab visibility, on a
-// gentle background interval (skipped while the tab is hidden), and on demand via
+// stale-while-revalidates — it re-fetches on window focus / tab visibility and on demand via
 // the exposed `refresh()`. Background revalidations never blank a working picker:
 // `loading` flips only for the very first load, and a failed poll keeps the last
 // good list. The public surface gained `refresh` (additive — existing consumers
@@ -17,6 +16,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { z } from "zod";
 import { request, okValue, errorOf, describeAppError } from "../transport/client";
 import { hugpyConfig } from "../config";
+import { sharedRequest, subscribeModelChanges } from "./modelsFeed";
 
 export interface ModelOption {
   /** The model id sent to the backend. */
@@ -119,10 +119,6 @@ function nonTargetReason(m: z.infer<typeof modelEntrySchema>): string {
   return "Unclassified — no task derived from this model's files yet.";
 }
 
-// Gentle background revalidation cadence (ms). Cheap same-origin GET; only ONE
-// picker instance is mounted at a time (studio sub-tabs share one WorkbenchStation),
-// and polls are skipped while the tab is hidden.
-const REFRESH_INTERVAL_MS = 45_000;
 
 // Capability = the FULL `tasks` list; the single `task` (primary) is only the
 // fallback for older payloads. Exported so task-specific pickers (e.g. the Movie
@@ -167,7 +163,7 @@ export function useImageModels(): ImageModelsState {
   });
 
   // `mounted` gates setState after unmount; `inFlight` collapses overlapping
-  // revalidations (interval + focus + manual) into one; `ctrlRef` lets every
+  // revalidations (focus + manual) into one; `ctrlRef` lets every
   // trigger — including a manual refresh — abort on unmount.
   const mounted = useRef(true);
   const inFlight = useRef(false);
@@ -176,17 +172,10 @@ export function useImageModels(): ImageModelsState {
   const load = useCallback(async (background: boolean) => {
     if (inFlight.current) return;
     inFlight.current = true;
-    const signal = ctrlRef.current?.signal;
     try {
       const [mRes, tRes] = await Promise.all([
-        request<unknown>(hugpyConfig.modelsUrl, {
-          signal,
-          meta: { specKey: "frames", operation: "models.list" },
-        }),
-        request<unknown>(hugpyConfig.promptTasksUrl, {
-          signal,
-          meta: { specKey: "frames", operation: "prompt.tasks" },
-        }),
+        sharedRequest(hugpyConfig.modelsUrl, { specKey: "frames", operation: "models.list" }),
+        sharedRequest(hugpyConfig.promptTasksUrl, { specKey: "frames", operation: "prompt.tasks" }),
       ]);
       if (!mounted.current) return;
 
@@ -284,28 +273,13 @@ export function useImageModels(): ImageModelsState {
     // Foreground load (the only one that toggles `loading` / surfaces an error).
     void load(false);
 
-    // Revalidate when the tab/window regains focus or becomes visible — a
-    // returning operator sees models adopted while they were away, no reload.
-    const revalidate = () => {
-      if (document.visibilityState === "hidden") return;
-      void load(true);
-    };
-    window.addEventListener("focus", revalidate);
-    document.addEventListener("visibilitychange", revalidate);
-
-    // Gentle interval backstop for the same-tab case (ComfyUI comes up while the
-    // operator is looking at the station). Skipped while the tab is hidden.
-    const timer = setInterval(() => {
-      if (document.visibilityState === "hidden") return;
-      void load(true);
-    }, REFRESH_INTERVAL_MS);
+    // Re-read only when the DB reports a model-row change (modelsFeed).
+    const off = subscribeModelChanges(() => void load(true));
 
     return () => {
       mounted.current = false;
       ctrl.abort();
-      window.removeEventListener("focus", revalidate);
-      document.removeEventListener("visibilitychange", revalidate);
-      clearInterval(timer);
+      off();
     };
   }, [load]);
 
@@ -328,7 +302,7 @@ export interface TaskModelsState {
  * task — the generic sibling of useImageModels for non-generation pickers. The
  * Movie director's judge-model select uses it with "image-text-to-text" to surface
  * the vision-language models that can SCORE a segment. Same tolerant fetch +
- * stale-while-revalidate posture (focus / visibility / interval / manual refresh);
+ * stale-while-revalidate posture (focus / visibility / manual refresh);
  * a failed background revalidation keeps the last good list. No task-defaults fetch
  * (there is no canonical default for an arbitrary task) — the caller supplies its
  * own default and keeps it selectable even when the list is empty.
@@ -348,12 +322,8 @@ export function useModelsByTask(task: string): TaskModelsState {
     async (background: boolean) => {
       if (inFlight.current) return;
       inFlight.current = true;
-      const signal = ctrlRef.current?.signal;
       try {
-        const mRes = await request<unknown>(hugpyConfig.modelsUrl, {
-          signal,
-          meta: { specKey: "generate", operation: "models.list" },
-        });
+        const mRes = await sharedRequest(hugpyConfig.modelsUrl, { specKey: "generate", operation: "models.list" });
         if (!mounted.current) return;
         if (!mRes.ok) {
           if (background) return;
@@ -386,22 +356,11 @@ export function useModelsByTask(task: string): TaskModelsState {
     const ctrl = new AbortController();
     ctrlRef.current = ctrl;
     void load(false);
-    const revalidate = () => {
-      if (document.visibilityState === "hidden") return;
-      void load(true);
-    };
-    window.addEventListener("focus", revalidate);
-    document.addEventListener("visibilitychange", revalidate);
-    const timer = setInterval(() => {
-      if (document.visibilityState === "hidden") return;
-      void load(true);
-    }, REFRESH_INTERVAL_MS);
+    const off = subscribeModelChanges(() => void load(true));
     return () => {
       mounted.current = false;
       ctrl.abort();
-      window.removeEventListener("focus", revalidate);
-      document.removeEventListener("visibilitychange", revalidate);
-      clearInterval(timer);
+      off();
     };
   }, [load]);
 

package/src/video/useMovieSessions.ts

@@ -23,10 +23,7 @@ import {
   studioMovieResumeUrl,
 } from "../config";
 import { request, okValue, errorOf, describeAppError } from "../transport/client";
-
-// 6s — the same background cadence useStudioClips polls the clip catalog at. A movie
-// segment takes minutes, so anything faster only costs a filesystem walk.
-const POLL_MS = 6000;
+import { subscribeJobStream } from "./jobStream";
 
 // The bus statuses that mean "this session's job is still going to do something" —
 // the client-side mirror of the route's _MOVIE_INFLIGHT_STATES, used to decide
@@ -223,11 +220,23 @@ export function useMovieSessions(active: boolean): MovieSessionsState {
     }
   }, []);
 
+  // Seed once when the panel opens, then re-read the movies root only when a
+  // worker reports a job transition (coalesced) — no 6s filesystem-walk poll.
   useEffect(() => {
     if (!active) return;
     void load();
-    const id = window.setInterval(() => void load(), POLL_MS);
-    return () => window.clearInterval(id);
+    let coalesce: number | null = null;
+    const unsub = subscribeJobStream(() => {
+      if (coalesce != null) return;
+      coalesce = window.setTimeout(() => {
+        coalesce = null;
+        void load();
+      }, 400);
+    });
+    return () => {
+      if (coalesce != null) window.clearTimeout(coalesce);
+      unsub();
+    };
   }, [active, load]);
 
   // Pause and resume differ only in their url and their telemetry op, so they share