From e16e04f1237af308a33385ae33fa17a14688b93a Mon Sep 17 00:00:00 2001
From: Jaret Burkett <jaretburkett@gmail.com>
Date: Wed, 12 Aug 2026 17:32:48 -0600
Subject: [PATCH] On the ui, keep the last caption job bar visible at the
 bottom of a dataset so it can be viewed and edited

---
 ui/src/components/CaptionMonitor.tsx   | 12 +++++++-----
 ui/src/components/DatasetImageCard.tsx |  8 +++++++-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/CaptionMonitor.tsx b/ui/src/components/CaptionMonitor.tsx
index e7be152..f7ac8c5 100644
--- a/ui/src/components/CaptionMonitor.tsx
+++ b/ui/src/components/CaptionMonitor.tsx
@@ -20,7 +20,8 @@ interface CaptionMonitorProps {
 // info, and the live log.
 export default function CaptionMonitor({ datasetPath, onHeightChange }: CaptionMonitorProps) {
   const { job, status, refreshJob } = useJobByRef(datasetPath, 3000);
-  const [collapsed, setCollapsed] = useState(false);
+  // Start collapsed; an active run pops it open via the effect below.
+  const [collapsed, setCollapsed] = useState(true);
 
   const isActive = !!(job && (job.status === 'running' || job.status === 'queued'));
 
@@ -68,12 +69,13 @@ export default function CaptionMonitor({ datasetPath, onHeightChange }: CaptionM
   }, [log, isScrolledToBottom]);
 
   // Animate the docked height instead of translating, so the collapsed panel
-  // never extends below the container and adds scroll. Inactive -> 0 (hidden),
-  // collapsed -> just the header bar, expanded -> full panel.
+  // never extends below the container and adds scroll. No job for this
+  // dataset -> 0 (hidden), collapsed -> just the header bar, expanded ->
+  // full panel. The most recent captioning job is shown even when finished.
   const HEADER_HEIGHT = 44;
   const PANEL_HEIGHT = 300;
   let height = 0;
-  if (isActive) height = collapsed ? HEADER_HEIGHT : PANEL_HEIGHT;
+  if (job) height = collapsed ? HEADER_HEIGHT : PANEL_HEIGHT;
 
   useEffect(() => {
     onHeightChange?.(height);
@@ -107,7 +109,7 @@ export default function CaptionMonitor({ datasetPath, onHeightChange }: CaptionM
               </span>
             </div>
           )}
-          <div className="flex items-center gap-3 flex-shrink-0">
+          <div className="flex items-center gap-3 flex-shrink-0 ml-auto">
             {job && <JobActionBar job={job} onRefresh={refreshJob} autoStartQueue={true} menuAnchor="top end" />}
             <button
               onClick={() => setCollapsed(c => !c)}
diff --git a/ui/src/components/DatasetImageCard.tsx b/ui/src/components/DatasetImageCard.tsx
index 8e8f55e..5d280d6 100644
--- a/ui/src/components/DatasetImageCard.tsx
+++ b/ui/src/components/DatasetImageCard.tsx
@@ -119,6 +119,12 @@ const DatasetImageCard: React.FC<DatasetImageCardProps> = ({
   const [savedCaption, setSavedCaption] = useState<string>('');
   const dirtyRef = useRef<boolean>(false);
 
+  // Cards are keyed by image path, so this never needs resetting. Once loaded,
+  // keep the textarea mounted through poll refreshes — swapping in the
+  // "Loading caption..." placeholder unmounts it and resets scroll.
+  const hasLoadedCaptionRef = useRef(false);
+  if (isCaptionLoaded) hasLoadedCaptionRef.current = true;
+
   // Sync from the fetched caption, but don't clobber unsaved local edits.
   useEffect(() => {
     if (!isCaptionLoaded) return;
@@ -265,7 +271,7 @@ const DatasetImageCard: React.FC<DatasetImageCardProps> = ({
           'border-transparent border-2': isCaptionCurrent,
         })}
       >
-        {isCaptionLoaded ? (
+        {isCaptionLoaded || hasLoadedCaptionRef.current ? (
           <form
             onSubmit={e => {
               e.preventDefault();