Only pull the new log bytes from the ui to improve performance

ui/src/hooks/useJobLog.tsx

@@ -17,6 +17,9 @@ const clean = (text: string): string => {
 export default function useJobLog(jobID: string, reloadInterval: null | number = null) {
   const [log, setLog] = useState<string>('');
   const didInitialLoadRef = useRef(false);
+  // Byte offset into the log file that we've already consumed. Sent to the
+  // server so it only returns newly appended content.
+  const offsetRef = useRef<number | null>(null);
   const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error' | 'refreshing'>('idle');
 
   const refresh = () => {
@@ -25,13 +28,19 @@ export default function useJobLog(jobID: string, reloadInterval: null | number =
       loadStatus = 'refreshing';
     }
     setStatus(loadStatus);
+    const offset = offsetRef.current;
     apiClient
-      .get(`/api/jobs/${jobID}/log`)
+      .get(`/api/jobs/${jobID}/log`, offset !== null ? { params: { offset } } : undefined)
       .then(res => res.data)
       .then(data => {
-        if (data.log) {
-          let cleanLog = clean(data.log);
+        offsetRef.current = data.offset ?? null;
+        const cleanLog = clean(data.log ?? '');
+        if (data.reset) {
+          // Log was reset/truncated (or initial load) — replace everything.
           setLog(cleanLog);
+        } else if (cleanLog) {
+          // Incremental — append only the new content.
+          setLog(prev => prev + cleanLog);
         }
         setStatus('success');
         didInitialLoadRef.current = true;
@@ -43,6 +52,10 @@ export default function useJobLog(jobID: string, reloadInterval: null | number =
   };
 
   useEffect(() => {
+    // New job — start fresh.
+    offsetRef.current = null;
+    didInitialLoadRef.current = false;
+    setLog('');
     refresh();
 
     if (reloadInterval) {