Diff streaming improvement (#459)

* Diffs are PatchType

* Added files don't have old content

* Improve styles

* Lints

* Update readme

frontend/src/components/tasks/TaskDetails/DiffTab.tsx

@@ -1,5 +1,5 @@
 import { generateDiffFile } from '@git-diff-view/file';
-import { useDiffStream } from '@/hooks/useDiffStream';
+import { useDiffEntries } from '@/hooks/useDiffEntries';
 import { useMemo, useContext, useCallback, useState, useEffect } from 'react';
 import { TaskSelectedAttemptContext } from '@/components/context/taskDetailsContext.ts';
 import { Diff } from 'shared/types';
@@ -10,13 +10,13 @@ import DiffCard from '@/components/DiffCard';
 function DiffTab() {
   const { selectedAttempt } = useContext(TaskSelectedAttemptContext);
   const [loading, setLoading] = useState(true);
-  const { data, error } = useDiffStream(selectedAttempt?.id ?? null, true);
+  const { diffs, error } = useDiffEntries(selectedAttempt?.id ?? null, true);
 
   useEffect(() => {
-    if (data && Object.keys(data?.entries).length > 0 && loading) {
+    if (diffs.length > 0 && loading) {
       setLoading(false);
     }
-  }, [data]);
+  }, [diffs, loading]);
 
   const createDiffFile = useCallback((diff: Diff) => {
     const oldFileName = diff.oldFile?.fileName || 'old';
@@ -42,12 +42,10 @@ function DiffTab() {
   }, []);
 
   const diffFiles = useMemo(() => {
-    if (!data) return [];
-    return Object.values(data.entries)
-      .filter((e: any) => e?.type === 'DIFF')
-      .map((e: any) => createDiffFile(e.content as Diff))
+    return diffs
+      .map((diff) => createDiffFile(diff))
       .filter((diffFile) => diffFile !== null);
-  }, [data, createDiffFile]);
+  }, [diffs, createDiffFile]);
 
   if (error) {
     return (

frontend/src/hooks/useDiffEntries.ts

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import { useDiffStream } from './useDiffStream';
+import type { Diff, PatchType } from 'shared/types';
+
+interface UseDiffEntriesResult {
+  diffs: Diff[];
+  isConnected: boolean;
+  error: string | null;
+}
+
+export const useDiffEntries = (
+  attemptId: string | null,
+  enabled: boolean
+): UseDiffEntriesResult => {
+  const { data, isConnected, error } = useDiffStream(attemptId, enabled);
+
+  const diffs = useMemo(() => {
+    if (!data) return [];
+    return Object.values(data.entries)
+      .filter(
+        (e): e is Extract<PatchType, { type: 'DIFF' }> => e?.type === 'DIFF'
+      )
+      .map((e) => e.content);
+  }, [data]);
+
+  return { diffs, isConnected, error };
+};

frontend/src/hooks/useDiffStream.ts

@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
-import type { Diff } from 'shared/types';
+import type { PatchType } from 'shared/types';
 import { useJsonPatchStream } from './useJsonPatchStream';
 
 interface DiffState {
-  entries: Record<string, Diff>;
+  entries: Record<string, PatchType>;
 }
 
 interface UseDiffStreamResult {

frontend/src/styles/diff-style-overrides.css

@@ -366,7 +366,11 @@
   --diff-border--: var(--background);
   --diff-add-content--: hsl(var(--console-success) / 0.2);
   --diff-del-content--: hsl(var(--console-error) / 0.2);
-  --diff-add-lineNumber--: hsl(var(--console-success) / 0.2);
+  --diff-add-lineNumber--: color-mix(
+    in srgb,
+    hsl(var(--console-success)) 20%,
+    hsl(var(--background)) 80%
+  );
   --diff-del-lineNumber--: hsl(var(--console-error) / 0.2);
   --diff-plain-content--: hsl(var(--background));
   --diff-expand-content--: hsl(var(--background));