phase 4

ui/detection-app/src/composables/useCheckpointLoader.ts

@@ -29,15 +29,37 @@ export function useCheckpointLoader(
     stripSelEndOverride.value ?? Math.max(0, checkpointFrames.value.length - 1),
   )
 
+  // Cache job_id → timeline_id mappings
+  const timelineCache = new Map<string, string>()
+
   // Track current frame from SSE
   source.on<{ frame_ref: number; jpeg_b64: string }>('frame_update', (e) => {
     currentFrameImage.value = e.jpeg_b64
     currentFrameRef.value = e.frame_ref
   })
 
+  async function resolveTimelineId(job: string): Promise<string | null> {
+    if (timelineCache.has(job)) return timelineCache.get(job)!
+
+    try {
+      const resp = await fetch(`/api/detect/timeline/${job}`)
+      if (!resp.ok) return null
+      const data = await resp.json()
+      const tid = data.timeline_id
+      if (tid) timelineCache.set(job, tid)
+      return tid
+    } catch {
+      return null
+    }
+  }
+
   async function loadCheckpoint(job: string, stage: string) {
     try {
-      const resp = await fetch(`/api/detect/checkpoints/${job}/${stage}`)
+      // Resolve timeline_id from job_id
+      const timelineId = await resolveTimelineId(job)
+      const lookupId = timelineId ?? job
+
+      const resp = await fetch(`/api/detect/checkpoints/${lookupId}/${stage}`)
       if (!resp.ok) return
 
       const data = await resp.json()
@@ -69,8 +91,6 @@ export function useCheckpointLoader(
   const { stages, checkpointStageFor } = useStageRegistry()
 
   // Auto-load checkpoint when entering editor mode.
-  // Also watches stages — the registry fetch is async, so on first load
-  // stages may be empty. When they arrive, re-evaluate.
   watch(
     () => [pipeline.layoutMode, pipeline.editorStage, jobId.value, stages.value.length] as const,
     ([mode, stage, job]) => {