@hugpy/video-intelligence-ui 0.3.2 → 0.3.3

package/src/stations/oracle/PerformanceComposer.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useState } from "react";
+
+import { hugpyConfig } from "../../config";
+import { describeAppError, errorOf, okValue, request } from "../../transport/client";
+
+type EnqueueResult = { job_id?: string; error?: string };
+type PerformanceProbe = { ready: boolean; bound?: string[]; unbound?: Array<{ seam: string; requirement: string }> };
+type Stage = "authority" | "snapshot" | "audio" | "lock" | "segments" | "keyframes" | "clips" | "assembly";
+
+/** The small, explicit entry point for the Oracle's durable performance job. */
+export function PerformanceComposer({ onEnqueued }: { onEnqueued: (jobId: string) => void }) {
+  const [prompt, setPrompt] = useState("");
+  const [dialogue, setDialogue] = useState("");
+  const [speaker, setSpeaker] = useState("narrator");
+  const [voiceId, setVoiceId] = useState("narrator");
+  const [rawRef, setRawRef] = useState("");
+  const [quality, setQuality] = useState("balanced");
+  const [stopAfter, setStopAfter] = useState<Stage | "">("segments");
+  const [tts, setTts] = useState(3);
+  const [keyframes, setKeyframes] = useState(3);
+  const [clips, setClips] = useState(3);
+  const [maxSeconds, setMaxSeconds] = useState("");
+  const [seed, setSeed] = useState(0);
+  const [negative, setNegative] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [message, setMessage] = useState("");
+  const [probe, setProbe] = useState<PerformanceProbe | null>(null);
+  const [probeGap, setProbeGap] = useState("");
+
+  useEffect(() => {
+    let active = true;
+    void (async () => {
+      const result = await request<PerformanceProbe>(`${hugpyConfig.apiBase}/video/performance/probe`, {
+        meta: { specKey: "oracle", operation: "oracle.performance.probe" },
+      });
+      if (!active) return;
+      if (result.ok) setProbe(okValue(result));
+      else setProbeGap(describeAppError(errorOf(result)));
+    })();
+    return () => { active = false; };
+  }, []);
+
+  async function enqueue() {
+    const lines = dialogue.split("\n").map((text) => text.trim()).filter(Boolean);
+    if (!prompt.trim() || !lines.length || !speaker.trim() || !voiceId.trim() || !rawRef.trim()) {
+      setMessage("Add the goal, at least one dialogue line, speaker, voice ID, and raw request reference.");
+      return;
+    }
+    const body = {
+      goal: { objective: prompt.trim(), raw_prompt: prompt, quality, planner_mode: "local_only" },
+      dialogue: { locked: true, lines: lines.map((text, i) => ({ line_id: `line-${i + 1}`, speaker: speaker.trim(), text })) },
+      casting: [[speaker.trim(), { voice_id: voiceId.trim(), kind: "synthetic" }]],
+      raw_request_ref: rawRef.trim(),
+      tts_candidates: tts,
+      keyframe_candidates: keyframes,
+      clip_candidates: clips,
+      seed_salt: seed,
+      negative_prompt: negative.trim() || null,
+      max_seconds: maxSeconds ? Number(maxSeconds) : null,
+      stop_after: stopAfter || null,
+    };
+    setBusy(true);
+    setMessage("");
+    const result = await request<EnqueueResult>(`${hugpyConfig.apiBase}/video/jobs/performance`, {
+      method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body),
+      meta: { specKey: "oracle", operation: "oracle.performance.enqueue" },
+    });
+    setBusy(false);
+    if (!result.ok) {
+      setMessage(describeAppError(errorOf(result)));
+      return;
+    }
+    const jobId = okValue(result).job_id;
+    if (!jobId) {
+      setMessage("The server answered without a job id.");
+      return;
+    }
+    setMessage(`Queued ${jobId}`);
+    onEnqueued(jobId);
+  }
+
+  return <section className="vi-oracle-panel vi-oracle-composer" aria-label="New performance">
+    <h3>New performance <span className="vi-oracle-sub">audio first · durable media job · inspect each stage below</span></h3>
+    <div className="vi-oracle-fields">
+      <label className="vi-oracle-field vi-oracle-wide">Goal / visual direction
+        <textarea value={prompt} onChange={(e) => setPrompt(e.target.value)} rows={3} placeholder="Describe the film, characters, setting and action" />
+      </label>
+      <label className="vi-oracle-field vi-oracle-wide">Locked dialogue · one line per utterance
+        <textarea value={dialogue} onChange={(e) => setDialogue(e.target.value)} rows={3} placeholder="The words to speak" />
+      </label>
+      <label className="vi-oracle-field">Speaker <input value={speaker} onChange={(e) => setSpeaker(e.target.value)} /></label>
+      <label className="vi-oracle-field">Synthetic voice ID <input value={voiceId} onChange={(e) => setVoiceId(e.target.value)} /></label>
+      <label className="vi-oracle-field vi-oracle-wide">Raw request reference
+        <input value={rawRef} onChange={(e) => setRawRef(e.target.value)} placeholder="A durable reference to the original request" />
+      </label>
+      <label className="vi-oracle-field">Quality
+        <select value={quality} onChange={(e) => setQuality(e.target.value)}><option value="preview">Preview</option><option value="balanced">Balanced</option><option value="best">Best</option></select>
+      </label>
+      <label className="vi-oracle-field">Stop after
+        <select value={stopAfter} onChange={(e) => setStopAfter(e.target.value as Stage | "")}>
+          <option value="">Full run</option>{(["authority", "snapshot", "audio", "lock", "segments", "keyframes", "clips", "assembly"] as Stage[]).map((s) => <option key={s} value={s}>{s}</option>)}
+        </select>
+      </label>
+      <label className="vi-oracle-field">TTS candidates <input type="number" min={1} max={16} value={tts} onChange={(e) => setTts(Number(e.target.value))} /></label>
+      <label className="vi-oracle-field">Keyframe candidates <input type="number" min={1} max={16} value={keyframes} onChange={(e) => setKeyframes(Number(e.target.value))} /></label>
+      <label className="vi-oracle-field">Clip candidates <input type="number" min={1} max={16} value={clips} onChange={(e) => setClips(Number(e.target.value))} /></label>
+      <label className="vi-oracle-field">Max seconds <input type="number" min={1} value={maxSeconds} onChange={(e) => setMaxSeconds(e.target.value)} placeholder="No limit" /></label>
+      <label className="vi-oracle-field">Seed salt <input type="number" min={0} value={seed} onChange={(e) => setSeed(Number(e.target.value))} /></label>
+      <label className="vi-oracle-field vi-oracle-wide">Negative prompt <input value={negative} onChange={(e) => setNegative(e.target.value)} placeholder="Optional exclusions" /></label>
+    </div>
+    <div className="vi-oracle-note" role="status">
+      {probe ? <>
+        <strong>{probe.ready ? "Full recipe wired" : "Staged runs available; full recipe has gaps"}</strong>
+        {probe.unbound?.length ? <ul className="vi-oracle-limits">{probe.unbound.map((gap) => <li key={gap.seam}><code>{gap.seam}</code>: {gap.requirement}</li>)}</ul> : null}
+      </> : probeGap ? <>Could not read performance capability probe: {probeGap}</> : "Checking performance capabilities…"}
+    </div>
+    <div className="vi-oracle-row"><button type="button" className="vi-btn vi-btn-accent" disabled={busy} onClick={() => void enqueue()}>{busy ? "Queuing…" : "Queue performance"}</button>{message && <span role="status">{message}</span>}</div>
+  </section>;
+}

package/src/stations/oracle/oracle.css

@@ -22,6 +22,39 @@
   min-width: 0;
 }
 
+.vi-oracle-fields {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.vi-oracle-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  min-width: 0;
+  color: var(--vi-text-dim);
+  font-size: 0.76rem;
+}
+
+.vi-oracle-wide { grid-column: 1 / -1; }
+
+.vi-oracle-field input,
+.vi-oracle-field textarea,
+.vi-oracle-field select {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.48rem 0.58rem;
+  border: 1px solid var(--vi-border);
+  border-radius: 6px;
+  background: var(--vi-surface);
+  color: var(--vi-text);
+  font: inherit;
+}
+
+.vi-oracle-field textarea { resize: vertical; }
+
 .vi-oracle-panel > h3 {
   margin: 0 0 0.6rem;
   font-family: var(--vi-mono);

package/src/stations/scriptFirst.css

@@ -348,3 +348,26 @@
     grid-template-columns: 1fr;
   }
 }
+
+/* ---- Template steps panel (TemplateStepsPanel.tsx) ---- */
+.vi-template-steps {
+  margin: 0.5rem 0 0;
+  padding-left: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+.vi-template-step-head {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+.vi-template-step-head > select {
+  max-width: 24rem;
+}
+.vi-template-step-desc {
+  margin: 0.15rem 0 0;
+  font-size: 0.85em;
+  opacity: 0.75;
+}

package/src/stations/studio/IdentitiesStation.tsx

@@ -34,7 +34,7 @@ import * as THREE from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { request, okValue, errorOf, describeAppError } from "../../transport/client";
-import { mediaBytesUrl, identityGenerateUrl, identityMeshStatusUrl, videoJobUrl } from "../../config";
+import { hugpyConfig, mediaBytesUrl, identityGenerateUrl, identityMeshStatusUrl, videoJobUrl } from "../../config";
 import { useMediaLibrary } from "../../video/mediaLibrary";
 import type { LibraryItem } from "../../video/mediaLibrary";
 import type { MediaRef, IdentityReconstruction, IdentityAngleView } from "../../video/contract";
@@ -2149,6 +2149,17 @@ type IdTab = "active" | "session" | "settings";
 
 export function IdentitiesStation({ spec }: { spec: StationSpec }) {
   void spec;
+  const [serviceProbe, setServiceProbe] = useState<{ configured: boolean; reachable: boolean; reason?: string; version?: string; capabilities?: Record<string, unknown> } | null>(null);
+  useEffect(() => {
+    let active = true;
+    void (async () => {
+      const result = await request<typeof serviceProbe>(`${hugpyConfig.apiBase}/video/identity-render/probe`, {
+        meta: { specKey: "identities", operation: "identity.render.probe" },
+      });
+      if (active && result.ok) setServiceProbe(okValue(result));
+    })();
+    return () => { active = false; };
+  }, []);
   const {
     profiles,
     loading,
@@ -2225,6 +2236,14 @@ export function IdentitiesStation({ spec }: { spec: StationSpec }) {
   return (
     <section className="station-wide vi-identities vi-identities-md" aria-label="Identities workspace"
       style={{ display: "grid", gridTemplateColumns: "300px minmax(0, 1fr)", gap: "1rem", alignItems: "start" }}>
+      <div role="status" style={{ gridColumn: "1 / -1", padding: "0.55rem 0.75rem", border: "1px solid var(--vi-border)", borderRadius: "0.5rem", fontSize: "0.8rem" }}>
+        <strong>Identity render service:</strong>{" "}
+        {!serviceProbe ? "checking…" : serviceProbe.reachable
+          ? `online${serviceProbe.version ? ` · ${serviceProbe.version}` : ""}`
+          : serviceProbe.reason || "unavailable"}
+        {serviceProbe?.reachable && serviceProbe.capabilities ?
+          <span> · {Object.entries(serviceProbe.capabilities).filter(([, value]) => Boolean(value)).map(([name]) => name).join(", ")}</span> : null}
+      </div>
       {/* ── SIDEBAR: tab filter + master list (wireframe b/c/d/f/e) ────────── */}
       <aside className="vi-id-sidebar" aria-label="Identity list"
         style={{ border: "1px solid var(--vi-border)", borderRadius: "0.5rem", padding: "0.5rem", position: "sticky", top: "0.5rem" }}>
@@ -2379,4 +2398,4 @@ export function IdentitiesStation({ spec }: { spec: StationSpec }) {
       </div>
     </section>
   );
-}
+}

package/src/stations/studio/StudioGenerateTab.tsx

@@ -416,6 +416,11 @@ export function StudioGenerateSurface({
       height?: number;
       fps?: number;
       seed?: number;
+      startImage?: string;
+      steps?: number;
+      cfg?: number;
+      requestedFrames?: number;
+      negative?: string;
     }) => {
       const p = prompt.trim();
       if (!p) {
@@ -430,6 +435,11 @@ export function StudioGenerateSurface({
         if (opts.height != null) body.height = opts.height;
         if (opts.fps != null) body.fps = opts.fps;
         if (opts.seed != null) body.seed = opts.seed;
+        if (opts.startImage) body.start_image = opts.startImage;
+        if (opts.steps != null) body.steps = opts.steps;
+        if (opts.cfg != null) body.cfg = opts.cfg;
+        if (opts.requestedFrames != null) body.requested_frames = opts.requestedFrames;
+        if (opts.negative) body.negative = opts.negative;
         if (opts.models.length > 0) body.models = opts.models;
         const res = await request<unknown>(hugpyConfig.studioTesterUrl, {
           method: "POST",
@@ -2813,10 +2823,13 @@ export function StudioGenerateSurface({
         </div>
         {clipTesterOpen && (
           <div className="vi-gen-tester-actions">
+            {!isT2V && !(isI2V && hasImage) && (
+              <span className="vi-knob-hint" role="note">The current sweep supports text-to-video and image-to-video with a start image. Choose one of those shapes to run it.</span>
+            )}
             <button
               type="button"
               className="vi-btn vi-btn-sm vi-btn-tester"
-              disabled={testerBusy || !prompt.trim()}
+              disabled={testerBusy || !prompt.trim() || (!isT2V && !(isI2V && hasImage))}
               onClick={() =>
                 void onTestAllModels({
                   category: surfaceMode,
@@ -2825,9 +2838,14 @@ export function StudioGenerateSurface({
                   height,
                   fps,
                   seed,
+                  startImage: isI2V ? startImages[0]?.uri : undefined,
+                  steps: steps.trim() ? Number(steps) : undefined,
+                  cfg: cfg.trim() ? Number(cfg) : undefined,
+                  requestedFrames: requestedFrames.trim() ? Number(requestedFrames) : undefined,
+                  negative: negative.trim() || undefined,
                 })
               }
-              title="Run this prompt across every model that FITS THE CURRENT FILTER (this surface's capability + geometry) — one row per model in the log below (a battery). Falls back to the whole roster when none match."
+              title={!isT2V && !(isI2V && hasImage) ? "This sweep currently supports text-to-video or image-to-video with a start image." : "Run this prompt across each model that fits the current filter; one battery row per model."}
             >
               {testerBusy ? "Starting…" : "🧪 Test all models"}
             </button>

package/src/stations/studio/StudioMovieSessions.tsx

@@ -326,7 +326,7 @@ function SessionRowBody({
 
 /** The panel body — split out so the poll it drives exists ONLY while the panel is
  *  open (mounting is the visibility signal; see the `active` gate below). */
-function SessionsBody() {
+export function SessionsBody() {
   const [expanded, setExpanded] = useState<Set<string>>(new Set());
   // A hidden browser tab is not a visible panel: pause the walk of the movies root
   // while the console is in the background, and reload the moment it comes back.
@@ -419,7 +419,7 @@ const SESSION_CATEGORIES: ReadonlyArray<{
     id: "cinema",
     label: "Cinema",
     kinds: ["generate_studio_movie"],
-    hint: "movies on disk — resume, pause, or watch what already rendered",
+    hint: "cinema movies",
   },
 ];
 
@@ -450,7 +450,6 @@ function CategoryJobsBody({
       <p className="vi-knob-hint">
         No {label.toLowerCase()} builds in the feed — live ones appear here with
         progress and Cancel; tick “Show finished” above for recent history.
-        (Durable resumable sessions exist for Cinema today.)
       </p>
     );
   }
@@ -491,7 +490,7 @@ export function SessionsPanel({
   cancelBusy: Set<string>;
   onCancel: (id: string) => void;
 }) {
-  const [open, setOpen] = useState<Set<string>>(() => new Set(["cinema"]));
+  const [open, setOpen] = useState<Set<string>>(() => new Set());
   const toggle = (id: string) =>
     setOpen((prev) => {
       const next = new Set(prev);
@@ -504,7 +503,7 @@ export function SessionsPanel({
       <p className="vi-knob-headline" style={{ margin: "0.8rem 0 0.2rem" }}>
         Sessions{" "}
         <span className="vi-knob-headline-sub">
-          previous & in-flight work, per surface — Cinema sessions resume from disk
+          previous & in-flight work, per surface
         </span>
       </p>
       {SESSION_CATEGORIES.map((cat) => {
@@ -526,24 +525,18 @@ export function SessionsPanel({
                 {cat.label}{" "}
                 <span className="vi-knob-headline-sub">
                   {cat.hint}
-                  {cat.id !== "cinema" && catJobs.length > 0
-                    ? ` · ${catJobs.length} in feed`
-                    : ""}
+                  {catJobs.length > 0 ? ` · ${catJobs.length} in feed` : ""}
                 </span>
               </span>
             </button>
             {isOpen ? (
-              cat.id === "cinema" ? (
-                <SessionsBody />
-              ) : (
-                <CategoryJobsBody
-                  jobs={catJobs}
-                  nowMs={nowMs}
-                  cancelBusy={cancelBusy}
-                  onCancel={onCancel}
-                  label={cat.label}
-                />
-              )
+              <CategoryJobsBody
+                jobs={catJobs}
+                nowMs={nowMs}
+                cancelBusy={cancelBusy}
+                onCancel={onCancel}
+                label={cat.label}
+              />
             ) : null}
           </div>
         );

package/src/stations/studio/StudioPlane.tsx

@@ -111,6 +111,9 @@ export function StudioPlane({ registerBridge = false, lockedSurfaceMode }: Studi
   const [pinned, setPinned] = useState(false);
 
   const topRef = useRef<HTMLDivElement | null>(null);
+  const monitorRef = useRef<HTMLDivElement | null>(null);
+  const binRef = useRef<HTMLDivElement | null>(null);
+  const renderRef = useRef<HTMLDivElement | null>(null);
 
   // Round 9: fold into the ONE shell sidebar — reveal its guarded Settings tab (knobs +
   // template dropdown portal there). registerSettings is stable, so this runs once per
@@ -275,10 +278,24 @@ export function StudioPlane({ registerBridge = false, lockedSurfaceMode }: Studi
 
   return (
     <div className="vi-studio-workbench" ref={topRef}>
+      <nav className="vi-studio-workflow" aria-label="Studio workflow">
+        <button type="button" onClick={() => monitorRef.current?.scrollIntoView({ behavior: "smooth", block: "start" })}>
+          <span className="vi-studio-workflow-step">01 · Monitor</span>
+          <span>Review the current take</span>
+        </button>
+        <button type="button" onClick={() => binRef.current?.scrollIntoView({ behavior: "smooth", block: "start" })}>
+          <span className="vi-studio-workflow-step">02 · Shot bin</span>
+          <span>{items.length} staged {items.length === 1 ? "item" : "items"}</span>
+        </button>
+        <button type="button" onClick={() => renderRef.current?.scrollIntoView({ behavior: "smooth", block: "start" })}>
+          <span className="vi-studio-workflow-step">03 · Render</span>
+          <span>Clip or cinema</span>
+        </button>
+      </nav>
       {/* CENTER, movie skeleton: viewer on top → generator below. Viewer header controls
           (Play from library / Clear / follow-newest toggle) are wired here so both
           plane mounts get them for free — see the `pinned` note above. */}
-      <StudioViewer
+      <div ref={monitorRef} className="vi-studio-workflow-target"><StudioViewer
         clips={clipsState.clips}
         library={libraryMedia}
         selected={selected}
@@ -286,7 +303,7 @@ export function StudioPlane({ registerBridge = false, lockedSurfaceMode }: Studi
         onPick={pickViewerClip}
         onClear={clearViewer}
         onToggleFollow={toggleFollowNewest}
-      />
+      /></div>
 
       {/* Slice 2b: the staged studio items as a strip of first-class cards with inline
           per-item ops. Additive — it sits ABOVE the generate surface and does not touch
@@ -294,7 +311,8 @@ export function StudioPlane({ registerBridge = false, lockedSurfaceMode }: Studi
           mounts identically (this is the one shared StudioPlane). Each card is wrapped in
           a keyed intrinsic <div> so the map key never lands on a component (which the
           bare-tsc env flags as a spurious prop). */}
-      {items.length > 0 && (
+      <div ref={binRef} className="vi-studio-workflow-target" aria-label="Shot bin">
+      {items.length > 0 ? (
         <div className="vi-studio-item-strip" aria-label="Studio items">
           {items.map((it) => (
             <div className="vi-studio-item-cell" key={it.key}>
@@ -308,8 +326,10 @@ export function StudioPlane({ registerBridge = false, lockedSurfaceMode }: Studi
             </div>
           ))}
         </div>
-      )}
+      ) : <p className="vi-studio-bin-empty">Staged media will appear here. Send a library item to Studio or add a source in the render desk.</p>}
+      </div>
 
+      <div ref={renderRef} className="vi-studio-workflow-target">
       <StudioGenerateSurface
         presets={presets}
         presetsLoading={presetsLoading}
@@ -322,6 +342,7 @@ export function StudioPlane({ registerBridge = false, lockedSurfaceMode }: Studi
         settingsHost={reg.settingsHost}
         lockedSurfaceMode={lockedSurfaceMode}
       />
+      </div>
       {/* STUDIO-ASSIST LIVE LOG → portaled into the sidebar's ACTIVE (Active
           Processes) tab via the registry's activeExtra host (operator correction
           2026-08-05: "active tab" = Active Processes). Single mount, shared stream. */}

package/src/style/app.css

@@ -3406,6 +3406,55 @@ button.vi-studio-src-thumb {
   min-width: 0;
 }
 
+.vi-studio-workflow {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5rem;
+  border-bottom: 1px solid var(--vi-border);
+  padding-bottom: 0.7rem;
+}
+
+.vi-studio-workflow button {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  text-align: left;
+  min-width: 0;
+  padding: 0.65rem 0.75rem;
+  border: 1px solid var(--vi-border);
+  border-radius: 8px;
+  background: var(--vi-surface-raised);
+  color: var(--vi-text-dim);
+  cursor: pointer;
+}
+
+.vi-studio-workflow button:hover,
+.vi-studio-workflow button:focus-visible {
+  border-color: var(--vi-accent);
+  color: var(--vi-text);
+}
+
+.vi-studio-workflow-step {
+  color: var(--vi-text);
+  font-family: var(--vi-mono);
+  font-size: 0.76rem;
+  font-weight: 600;
+}
+
+.vi-studio-workflow-target { scroll-margin-top: 1rem; min-width: 0; }
+.vi-studio-bin-empty {
+  margin: 0;
+  padding: 0.7rem 0.85rem;
+  border: 1px dashed var(--vi-border);
+  border-radius: 8px;
+  color: var(--vi-text-dim);
+  font-size: 0.78rem;
+}
+
+@media (max-width: 35rem) {
+  .vi-studio-workflow { grid-template-columns: 1fr; }
+}
+
 /* Round 9: the studio no longer carries its OWN sidebar — it folds into the arm shell's
    ONE left sidebar (Settings / Active / Library, via the sidebar registry). So the
    workbench is a SINGLE centre column (viewer on top → generator below), the Movie

package/src/video/PromptAssistButtons.tsx

@@ -71,12 +71,14 @@ export function PromptAssistButtons({
         >
           <option value="">fleet default</option>
           {models.map((m) => (
-            // "· cold" is not decoration: a non-seated model pays a load on first use,
-            // which is minutes, not milliseconds. Saying so up front stops that reading
-            // as a hang.
+            // Not decoration (canonical STATE-MODEL.md #4): a non-ready model pays a
+            // load on first use. `hot` = already on a worker drive (a t_load, seconds);
+            // `cold` = central only (a download THEN a load). "cold" is reserved for
+            // not-on-hot-drive, so it never mislabels a hot or loaded model.
             <option key={m.model} value={m.model}>
               {m.model}
-              {m.serving ? "" : " · cold"}
+              {m.state === "serving" || m.state === "loaded" ? ""
+                : m.state === "hot" ? " · hot (loads)" : " · cold (downloads)"}
             </option>
           ))}
         </select>