@@ -1064,13 +1076,6 @@ export default function MonitorDashboard({ taskId }: { taskId: number }) {
)
}
- // Full raw series (no more slice(-60)) -- SeriesChart downsamples evenly to 600 points internally when rendering
- const lrSeries = lrHistory.map((l) => ({ step: l.step, value: l.lr }))
- const dSeries = optimizerMetricsHistory
- .map((m) => ({ step: m.step, d: m.d }))
- .filter((m): m is { step: number; d: number } => typeof m.d === 'number')
- .map((m) => ({ step: m.step, value: m.d }))
-
return (
{/* Connection status + progress */}
@@ -1165,7 +1170,7 @@ export default function MonitorDashboard({ taskId }: { taskId: number }) {
({ step: l.step, value: l.loss }))}
+ data={lossSeries}
rawColor="color-mix(in srgb, var(--fg-secondary) 35%, transparent)"
smoothColor="var(--accent)"
fillColor="var(--accent-soft)"
@@ -1190,19 +1195,11 @@ export default function MonitorDashboard({ taskId }: { taskId: number }) {
/>
{
const w = e.currentTarget.naturalWidth
const h = e.currentTarget.naturalHeight
@@ -75,6 +80,7 @@ export default function ZoomableImage({
transformOrigin: '0 0',
maxWidth: 'none',
maxHeight: 'none',
+ willChange: 'transform',
visibility: nat ? 'visible' : 'hidden',
}}
/>
diff --git a/studio/web/src/lib/useEventStream.ts b/studio/web/src/lib/useEventStream.ts
index e98708d..74820e7 100644
--- a/studio/web/src/lib/useEventStream.ts
+++ b/studio/web/src/lib/useEventStream.ts
@@ -58,6 +58,27 @@ function _maybeClose(): void {
}
}
+/**
+ * Non-hook subscription to the same shared stream, for module-level stores that
+ * outlive any single component. onOpen fires on every (re)connect, and right away
+ * when the shared connection is already open. Returns the unsubscribe function.
+ */
+export function subscribeEventStream(onEvent: Listener, onOpen?: OpenListener): () => void {
+ if (typeof EventSource === 'undefined') return () => {}
+ const openHandler: OpenListener = () => onOpen?.()
+ _listeners.add(onEvent)
+ _openListeners.add(openHandler)
+ _ensureOpen()
+ if (_es && _es.readyState === EventSource.OPEN) {
+ try { onOpen?.() } catch { /* ignore */ }
+ }
+ return () => {
+ _listeners.delete(onEvent)
+ _openListeners.delete(openHandler)
+ _maybeClose()
+ }
+}
+
/**
* Subscribes to the /api/events SSE stream. The callback fires once per event.
* Reconnects automatically on disconnect (this is just EventSource's built-in behavior).
diff --git a/studio/web/src/lib/useMonitorProgress.ts b/studio/web/src/lib/useMonitorProgress.ts
index 91f2754..e3bfde8 100644
--- a/studio/web/src/lib/useMonitorProgress.ts
+++ b/studio/web/src/lib/useMonitorProgress.ts
@@ -15,9 +15,9 @@
* cross-task views, which don't subscribe when nothing is running). Changing
* taskId clears state and refetches the snapshot.
*/
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useSyncExternalStore } from 'react'
import { api, type MonitorState } from '../api/client'
-import { useEventStream } from './useEventStream'
+import { subscribeEventStream } from './useEventStream'
interface MonitorProgressDelta {
step?: number
@@ -100,53 +100,93 @@ export interface MonitorProgress {
refetch: () => Promise
}
-export function useMonitorProgress(taskId: number | null): MonitorProgress {
- const [state, setState] = useState(null)
- const [connected, setConnected] = useState(false)
- const lastUpdateRef = useRef(0)
- // Store taskId in a ref for the event handler's closure, to avoid resubscribing SSE on every taskId change
- const taskIdRef = useRef(taskId)
- taskIdRef.current = taskId
-
- const refetch = useCallback(async () => {
- const tid = taskIdRef.current
- if (tid == null) return
+// ── shared per-task store ───────────────────────────────────────────────────
+// Topbar, Sidebar, the queue page, the task page and its dashboard all watch the
+// same running task at once. Each used to fetch its own full snapshot (tens of
+// thousands of loss points, several MB of JSON) and merge every delta into its own
+// copy; now there is one entry per task: one snapshot fetch, one merge per delta,
+// and every subscriber reads the same object. Topbar / Sidebar stay mounted across
+// pages, so the entry survives navigation while the task runs.
+
+interface Snap { state: MonitorState | null; connected: boolean }
+interface Entry {
+ snap: Snap
+ lastUpdate: number
+ subs: Set<() => void>
+ inflight: Promise | null
+ unsubscribe: () => void
+}
+
+const _entries = new Map()
+const IDLE: Snap = { state: null, connected: false }
+
+function _set(e: Entry, next: Partial): void {
+ e.snap = { ...e.snap, ...next }
+ for (const cb of e.subs) cb()
+}
+
+function _refetch(tid: number): Promise {
+ const e = _entries.get(tid)
+ if (!e) return Promise.resolve()
+ if (e.inflight) return e.inflight
+ e.inflight = (async () => {
try {
const s = await api.getMonitorState(tid)
- setState(s)
- setConnected(true)
- lastUpdateRef.current = Date.now()
+ e.lastUpdate = Date.now()
+ _set(e, { state: s, connected: true })
} catch {
- if (Date.now() - lastUpdateRef.current > 5000) setConnected(false)
+ if (Date.now() - e.lastUpdate > 5000) _set(e, { connected: false })
+ } finally {
+ e.inflight = null
}
- }, [])
-
- // taskId changes -> clear state + refetch
- useEffect(() => {
- setState(null)
- if (taskId == null) {
- setConnected(false)
- return
+ })()
+ return e.inflight
+}
+
+function _acquire(tid: number): Entry {
+ const existing = _entries.get(tid)
+ if (existing) return existing
+ const entry: Entry = { snap: IDLE, lastUpdate: 0, subs: new Set(), inflight: null, unsubscribe: () => {} }
+ _entries.set(tid, entry)
+ entry.unsubscribe = subscribeEventStream((evt) => {
+ if (evt.type !== 'monitor_progress') return
+ if (String(evt.task_id) !== String(tid)) return
+ const delta = evt.delta as MonitorProgressDelta | undefined
+ if (!delta) return
+ entry.lastUpdate = Date.now()
+ _set(entry, { state: mergeDelta(entry.snap.state, delta), connected: true })
+ }, () => { void _refetch(tid) })
+ void _refetch(tid)
+ return entry
+}
+
+function _release(tid: number): void {
+ const e = _entries.get(tid)
+ if (!e || e.subs.size > 0) return
+ e.unsubscribe()
+ _entries.delete(tid)
+}
+
+export function useMonitorProgress(taskId: number | null): MonitorProgress {
+ const subscribe = useCallback((cb: () => void) => {
+ if (taskId == null) return () => {}
+ const e = _acquire(taskId)
+ e.subs.add(cb)
+ return () => {
+ e.subs.delete(cb)
+ _release(taskId)
}
- void refetch()
- }, [taskId, refetch])
-
- useEventStream(
- (evt) => {
- const tid = taskIdRef.current
- if (tid == null) return
- if (evt.type !== 'monitor_progress') return
- if (String(evt.task_id) !== String(tid)) return
- const delta = evt.delta as MonitorProgressDelta | undefined
- if (!delta) return
- setState((prev) => mergeDelta(prev, delta))
- setConnected(true)
- lastUpdateRef.current = Date.now()
- },
- { onOpen: () => void refetch() },
+ }, [taskId])
+ const getSnap = useCallback(
+ () => (taskId == null ? IDLE : _entries.get(taskId)?.snap ?? IDLE),
+ [taskId],
)
-
- return { state, connected, refetch }
+ const snap = useSyncExternalStore(subscribe, getSnap, getSnap)
+ const refetch = useCallback(
+ () => (taskId == null ? Promise.resolve() : _refetch(taskId)),
+ [taskId],
+ )
+ return { state: snap.state, connected: snap.connected, refetch }
}
// exposed for tests
diff --git a/studio/web/src/lib/useZoomPan.ts b/studio/web/src/lib/useZoomPan.ts
index 9dadafb..e94a578 100644
--- a/studio/web/src/lib/useZoomPan.ts
+++ b/studio/web/src/lib/useZoomPan.ts
@@ -28,7 +28,7 @@
* the pan/zoom hot path never goes through React rendering; only zoomPct
* (for the readout) goes through state
*/
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
export interface ZoomPanView {
scale: number
@@ -140,8 +140,9 @@ export function useZoomPan({
}
}, [])
- // Auto-fit when switching images / on initial readiness
- useEffect(() => {
+ // Auto-fit when switching images / on initial readiness. Layout effect: the new
+ // transform lands before the browser paints, so the image never shows a frame at the old scale.
+ useLayoutEffect(() => {
fit()
}, [fit])
diff --git a/studio/web/src/pages/QueueDetail.tsx b/studio/web/src/pages/QueueDetail.tsx
index 0632182..d6c0f0c 100644
--- a/studio/web/src/pages/QueueDetail.tsx
+++ b/studio/web/src/pages/QueueDetail.tsx
@@ -665,7 +665,7 @@ function SamplesCard({ taskId, live, onRender, canRender }: { taskId: number; li
{shown.map((s, i) => (
))}
@@ -683,6 +683,9 @@ function SamplesCard({ taskId, live, onRender, canRender }: { taskId: number; li
onClose={() => setZoom(null)}
onPrev={() => setZoom((z) => (z != null && z > 0 ? z - 1 : z))}
onNext={() => setZoom((z) => (z != null && z < items.length - 1 ? z + 1 : z))}
+ preload={[items[zoom - 1], items[zoom + 1]]
+ .filter((x): x is TaskSample => !!x)
+ .map((x) => api.sampleImageUrl(x.filename, taskId))}
/>
)}