fix: loaded model double display, single image review fix

Author: Specthram

web/src/components/organisms/CaptionDetailPanel.tsx

@@ -50,6 +50,7 @@ export function CaptionDetailPanel() {
   const removeTag = useRemoveTag();
   const integrity = useIntegrityReview();
   const runReview = useRunReview();
+  const profiles = useProfiles();
   const setCaptionTab = useUiStore((state) => state.setCaptionTab);
   const setPendingReviewJob = useUiStore((state) => state.setPendingReviewJob);
   const openCaptionEditor = useUiStore((state) => state.openCaptionEditor);
@@ -177,8 +178,7 @@ export function CaptionDetailPanel() {
                   dataset_id: datasetId,
                   caption_type: captionType,
                   media_ids: [Number(data.key)],
-                  // null = judge with whatever model is already loaded.
-                  judge_profile_id: null,
+                  judge_profile_id: profiles.data?.judge_id ?? null,
                   scope: "single",
                 },
                 { onSuccess: (res) => setPendingReviewJob(res.job_id) },

web/src/components/organisms/CaptionLeftPanel.tsx

@@ -402,54 +402,6 @@ export function CaptionLeftPanel() {
         )}
       </Section>
       </div>
-
-      <div
-        style={{
-          flex: "none",
-          display: "flex",
-          alignItems: "center",
-          gap: 8,
-          padding: "10px 14px",
-          borderTop: `1px solid ${colors.border}`,
-          background: colors.panel,
-        }}
-        title={loaded ? (loadedProfile?.file ?? status.data?.name ?? "") : ""}
-      >
-        <span style={{ color: loaded ? colors.ok : colors.textFaint }}>
-          {loaded ? "●" : "○"}
-        </span>
-        <div style={{ flex: 1, minWidth: 0 }}>
-          <div
-            style={{
-              fontSize: 12,
-              fontWeight: 600,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              color: loaded ? colors.text : colors.textMuted,
-            }}
-          >
-            {loaded
-              ? (loadedProfile?.name ?? status.data?.name ?? "Model loaded")
-              : "No model loaded"}
-          </div>
-          <div
-            style={{
-              fontFamily: font.mono,
-              fontSize: 9.5,
-              color: colors.textFaint,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-            }}
-          >
-            {loaded
-              ? `${loadedProfile?.file ?? ""} · loaded`
-              : "unloaded — memory purged"}
-          </div>
-        </div>
-        {modelBusy && <Spinner size={11} />}
-      </div>
     </div>
   );
 }

web/src/components/organisms/Sidebar.tsx

@@ -10,7 +10,12 @@ import {
   Settings as SettingsIcon,
 } from "lucide-react";
 import type { ReactNode } from "react";
-import { useDatasets, useModelStatus, useNavCounts } from "../../api/hooks";
+import {
+  useDatasets,
+  useModelStatus,
+  useNavCounts,
+  useProfiles,
+} from "../../api/hooks";
 import type { ViewId } from "../../api/types";
 import { colors, font } from "../../design/tokens";
 import { useUiStore } from "../../store/uiStore";
@@ -49,8 +54,16 @@ export function Sidebar() {
   const datasets = useDatasets();
   const totals = useNavCounts();
   const status = useModelStatus();
+  const profiles = useProfiles();
   const running = useRunningCount();
 
+  // The loaded model shown as its profile (name + weights file); a model
+  // loaded outside profiles falls back to the loader's filename.
+  const loaded = status.data?.loaded ?? false;
+  const loadedProfile = profiles.data?.profiles.find(
+    (p) => p.id === profiles.data.loaded_id,
+  );
+
   // The Caption badge counts the dataset that tab is actually working on,
   // not the library: it is the size of the grid the user is about to see.
   const active = datasets.data?.datasets.find((row) => row.id === datasetId);
@@ -135,22 +148,40 @@ export function Sidebar() {
             display: "flex",
             alignItems: "center",
             gap: 8,
-            fontSize: 11.5,
-            color: colors.textSecondary,
             marginBottom: 10,
           }}
+          title={loaded ? (loadedProfile?.file ?? status.data?.name ?? "") : ""}
         >
-          <Dot color={status.data?.loaded ? colors.ok : colors.textFaint} />
-          <span
-            style={{
-              flex: 1,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-            }}
-          >
-            {status.data?.loaded ? status.data.name : "No model loaded"}
-          </span>
+          <Dot color={loaded ? colors.ok : colors.textFaint} />
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div
+              style={{
+                fontSize: 11.5,
+                color: colors.textSecondary,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {loaded
+                ? (loadedProfile?.name ?? status.data?.name ?? "Model loaded")
+                : "No model loaded"}
+            </div>
+            <div
+              style={{
+                fontFamily: font.mono,
+                fontSize: 9,
+                color: colors.textFaint,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {loaded
+                ? `${loadedProfile?.file ?? status.data?.name ?? ""} · loaded`
+                : "unloaded — memory purged"}
+            </div>
+          </div>
         </div>
         <button
           onClick={() => toggleJobs()}