SHOT QUEUE
{liveCount} live · {queuedCount} queued
IMAGE
{visImg.map(r => (
{r.shotLabel || r.id}
{/* v07zw — Show completed checkmark / failed cross / live
ETA in the right slot instead of disappearing the row. */}
{r.status === "completed" ? "✓ done"
: r.status === "failed" ? "✕ failed"
: r.status === "cancelled" ? "✕ cancelled"
: r.eta}
{r.stage}
VIDEO
{visVid.map(r => (
{r.shotLabel || r.id}
{r.status === "completed" ? "✓ done"
: r.status === "failed" ? "✕ failed"
: r.status === "cancelled" ? "✕ cancelled"
: r.eta}
{r.model}
{(r.status || "").toUpperCase()}
DEPTH
{visDep.map(r => (
{r.shotLabel || r.id}
{r.status === "completed" ? "✓ done"
: r.status === "failed" ? "✕ failed"
: r.status === "cancelled" ? "✕ cancelled"
: r.eta}
{r.depthOf ? (r.depthIsVideo ? "Video " : "Frame ") + r.depthOf : r.stage}
+{moreCount} more · click to expand
)}
{modalOpen && ReactDOM.createPortal(
{ e.stopPropagation(); setModalOpen(false); }}>
,
document.getElementById("modal-root") || document.body
)}
e.stopPropagation()}>
{/* v1063 — DEPTH QUEUE (Hugo: "the Depth video should appear in the video queue,
as a Depth section"). Every depth job — of a video or of a frame — lands here
instead of in IMAGE QUEUE. The DEPTH OF cell names the source version, the
same thing the depth file's name now carries. No Restart button: the generic
retry cannot start a depth job — re-run it from the shot's depth button. */}
{/* v07zw — Archive section. Rows the user X-ed out of their
main image/video sections land here. Collapsed by default;
"Show archive" chip in the section head opens it. */}
{(archivedCount) > 0 && showArchive && (
)}
SHOT QUEUE
{inFlightCount} JOBS IN FLIGHT
{imgActive} image · {vidActive} video · {depActive} depth
{SQMIcon.bars}
{imgActive}
IMAGE JOBS
{SQMIcon.clock}
{vidActive}
VIDEO JOBS
{SQMIcon.layers}
{depActive}
DEPTH JOBS
IMAGE QUEUE
{/* v07zz116 — Bulk-archive every finished row at once. */}
{terminalRows.length > 0 && (
)}
{/* v07zz10 — Archive toggle moved to the LEFT of the
Rendering / Waiting / Submitting chips so it
reads as a UI control first, status second. */}
{(archivedCount) > 0 && (
)}
{imgCounts.rendering} Rendering
{imgCounts.waiting} Waiting
{imgCounts.submitting} Submitting
{/* v07zz31 — Hugo: kill SEQ, surface USER as its own
column (was a tiny sub-line under the shot id).
Same column order across image + video queue so
the eye doesn't have to retrain between sections. */}
SHOTTHUMBUSERMODELSTAGEPROGRESSSTATUSETAACTIONS
{/* v952 — ONE row per shot. v958 — collapsed by default: only the
NEWEST job's line shows; click the card to expand the rest. */}
{_groupByShot(image).map(g => (
1 ? " sqm-row--expandable" : "")}
key={"g:" + g.key}
onClick={g.jobs.length > 1 ? (e) => { if (!e.target.closest("button, select, a")) toggleGroup(g.key); } : undefined}>
{g.jobs.length > 1 && {openGroups.has(g.key) ? "▾" : "▸"}}
{g.label}
{g.jobs.length > 1 && ×{g.jobs.length}}
{(() => { const _qt = _queueThumb(g.id); return (
{_qt
? 
: }
); })()}
))}
{image.length === 0 &&
{(openGroups.has(g.key) ? g.jobs : g.jobs.slice(0, 1)).map(r => (
{r.submitted_by || "—"}
{r.model}
{r.status === "submitting" ? "Initializing" : r.stage}
{/* PROGRESS column: just the bar (or empty for waiting/etc) */}
{r.status === "rendering" && (
<>
{r.pct}%
)}
{r.status === "completed" && (
)}
{r.status === "submitting" &&
))}
No image jobs in flight.
}
VIDEO QUEUE
{/* v07zz31 — Video queue now uses the same 8-column grid as
the image queue. STAGE shows a video-specific label
(Encoding / Rendering / Submitted / …) instead of an
image stage. SUBMITTED + QUEUE columns are gone — the
ETA already carries the time-since-submission for
active rows and the when_finished for terminal rows,
matching how image queue works. */}
{vidCounts.rendering} Rendering
{vidCounts.waiting} Waiting
{vidCounts.submitting} Submitting
SHOTTHUMBUSERMODELSTAGEPROGRESSSTATUSETAACTIONS
{/* v952 — grouped like the image queue. v958 — collapsed to the newest
job's line; click to expand. */}
{_groupByShot(video).map(g => (
1 ? " sqm-row--expandable" : "")}
key={"g:" + g.key}
onClick={g.jobs.length > 1 ? (e) => { if (!e.target.closest("button, select, a")) toggleGroup(g.key); } : undefined}>
{g.jobs.length > 1 && {openGroups.has(g.key) ? "▾" : "▸"}}
{g.label}
{g.jobs.length > 1 && ×{g.jobs.length}}
{(() => { const _qt = _queueThumb(g.id); return (
{_qt
?
: }
); })()}
))}
{video.length === 0 &&
{(openGroups.has(g.key) ? g.jobs : g.jobs.slice(0, 1)).map(r => {
// Video stage label per status. Falls back to whatever
// the server sent in r.stage if it isn't one of the
// known status states (lets the worker surface custom
// labels like "Awaiting frames" without a UI change).
const stageText = r.stage
|| (r.status === "pending" ? "Awaiting send"
: r.status === "submitting" ? "Initializing"
: r.status === "waiting" ? "Queued"
: r.status === "rendering" ? "Encoding"
: r.status === "completed" ? "Done"
: r.status === "failed" ? "Errored"
: "—");
// v07perf — Pending pill is clickable for video rows;
// each click advances status (pending → rendering →
// completed). Title tells Hugo what the next state will
// be so the affordance is discoverable.
const isCycleable = r.is_manual_external && (r.status === "pending" || r.status === "rendering");
const nextLabel = r.status === "pending" ? "RENDERING"
: r.status === "rendering" ? "COMPLETE"
: null;
return (
{r.submitted_by || "—"}
{r.model}
{stageText}
{r.status === "rendering" && (
<>
{r.pct}%
)}
{r.status === "completed" && (
)}
{r.status === "submitting" &&
);
})}
No video jobs in flight.
}
DEPTH QUEUE
{depCounts.rendering} Rendering
{depCounts.waiting} Waiting
{depCounts.submitting} Submitting
SHOTTHUMBUSERDEPTH OFSTAGEPROGRESSSTATUSETAACTIONS
{_groupByShot(depth).map(g => {
// Own key space: expanding SH0190 here must not also expand SH0190's
// image or video group (openGroups is shared by every section).
const gk = "depth:" + g.key;
return (
1 ? " sqm-row--expandable" : "")}
key={"g:" + gk}
onClick={g.jobs.length > 1 ? (e) => { if (!e.target.closest("button, select, a")) toggleGroup(gk); } : undefined}>
{g.jobs.length > 1 && {openGroups.has(gk) ? "▾" : "▸"}}
{g.label}
{g.jobs.length > 1 && ×{g.jobs.length}}
{(() => { const _qt = _queueThumb(g.id); return (
{_qt
?
: }
); })()}
);
})}
{depth.length === 0 &&
{(openGroups.has(gk) ? g.jobs : g.jobs.slice(0, 1)).map(r => (
{r.submitted_by || "—"}
{r.depthOf ? (r.depthIsVideo ? "Video " : "Frame ") + r.depthOf : r.model}
{r.status === "submitting" ? "Initializing" : r.stage}
{r.status === "rendering" && (
<>
{r.pct}%
)}
{r.status === "completed" && (
)}
{r.status === "submitting" &&
))}
No depth jobs in flight.
}
ARCHIVE · {archivedCount}
SHOTTHUMBUSERMODELSTAGEPROGRESSSTATUSWHENACTIONS
{/* v07zz36 — Hugo: archive order should be latest on top
to oldest at the bottom. Previously we just
concatenated image-then-video, so a brand-new failed
video sat below a week-old completed image. Sort the
merged list by sort_ts (completed_at || started_at,
added on the row in QueueBreakdown._toQueueRow)
descending. Rows missing a timestamp sink to the
bottom. */}
{[...archivedImage, ...archivedVideo, ...archivedDepth].sort((a, b) => {
const at = a && a.sort_ts ? new Date(a.sort_ts).getTime() : 0;
const bt = b && b.sort_ts ? new Date(b.sort_ts).getTime() : 0;
return bt - at;
}).map(r => (
{r.shotLabel || r.id}
{(() => { const _qt = _queueThumb(r.id); return (
{_qt
?
: }
); })()}
{r.submitted_by || "—"}
{r.model}
{r.stage || "—"}
{r.status === "completed" && (
)}
{(r.status || "").toUpperCase()}
{r.when_finished}
))}