fix(beats): show beat count during streaming, fix premature completion label

The progress bar now shows "Loading… 42 beats from 3/5 repos" during
streaming instead of the misleading "All repositories loaded" that
appeared when isComplete was set before isStreaming was cleared.

Only shows "All repositories loaded" after the stream has fully ended.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: acartine

src/app/beats/__tests__/use-beats-query-streaming.test.ts

@@ -19,6 +19,7 @@ function simulateStreamingFetch(
   let progress: StreamingProgress = {
     totalRepos: 0,
     loadedRepos: [],
+    loadedBeatsCount: 0,
     isStreaming: false,
     isComplete: false,
   };
@@ -27,6 +28,7 @@ function simulateStreamingFetch(
   progress = {
     totalRepos: repoCount,
     loadedRepos: [],
+    loadedBeatsCount: 0,
     isStreaming: true,
     isComplete: false,
   };
@@ -95,6 +97,7 @@ describe(
         const idle: StreamingProgress = {
           totalRepos: 0,
           loadedRepos: [],
+          loadedBeatsCount: 0,
           isStreaming: false,
           isComplete: false,
         };

src/app/beats/__tests__/use-streaming-progress.test.ts

@@ -12,6 +12,7 @@ import type { StreamingProgress } from
 const EMPTY: StreamingProgress = {
   totalRepos: 0,
   loadedRepos: [],
+  loadedBeatsCount: 0,
   isStreaming: false,
   isComplete: false,
 };
@@ -22,6 +23,7 @@ function applyStreamStart(
   return {
     totalRepos: total,
     loadedRepos: [],
+    loadedBeatsCount: 0,
     isStreaming: true,
     isComplete: false,
   };
@@ -56,6 +58,7 @@ describe("streaming progress transitions", () => {
     expect(EMPTY).toEqual({
       totalRepos: 0,
       loadedRepos: [],
+      loadedBeatsCount: 0,
       isStreaming: false,
       isComplete: false,
     });

src/app/beats/use-beats-query.ts

@@ -199,7 +199,9 @@ interface StreamingFetchArgs {
   setQueryData: SetQueryData;
   getQueryData: () => QueryData | undefined;
   onStreamStart: (total: number) => void;
-  onRepoLoaded: (repo: string) => void;
+  onRepoLoaded: (
+    repo: string, beatsCount: number,
+  ) => void;
   onStreamComplete: () => void;
 }
 
@@ -268,7 +270,7 @@ async function fetchBeatsWithStreaming(
             data: [...prev, ...beats],
           };
         });
-        onRepoLoaded(repo);
+        onRepoLoaded(repo, beats.length);
       },
     }),
     () => ({

src/app/beats/use-streaming-progress.ts

@@ -9,6 +9,8 @@ export interface StreamingProgress {
   totalRepos: number;
   /** Repo paths that have finished loading. */
   loadedRepos: string[];
+  /** Running count of beats received so far. */
+  loadedBeatsCount: number;
   /** True while the streaming fetch is in flight. */
   isStreaming: boolean;
   /** True once all repos have responded. */
@@ -18,14 +20,17 @@ export interface StreamingProgress {
 const EMPTY_PROGRESS: StreamingProgress = {
   totalRepos: 0,
   loadedRepos: [],
+  loadedBeatsCount: 0,
   isStreaming: false,
   isComplete: false,
 };
 
 export interface StreamingProgressHandle {
   progress: StreamingProgress;
   onStreamStart: (totalRepos: number) => void;
-  onRepoLoaded: (repoPath: string) => void;
+  onRepoLoaded: (
+    repoPath: string, beatsCount: number,
+  ) => void;
   onStreamComplete: () => void;
   resetProgress: () => void;
 }
@@ -48,6 +53,7 @@ export function useStreamingProgress():
       setProgress({
         totalRepos,
         loadedRepos: [],
+        loadedBeatsCount: 0,
         isStreaming: true,
         isComplete: false,
       });
@@ -56,16 +62,14 @@ export function useStreamingProgress():
   );
 
   const onRepoLoaded = useCallback(
-    (repoPath: string) => {
+    (repoPath: string, beatsCount: number) => {
       setProgress((prev) => {
         const loaded = [...prev.loadedRepos, repoPath];
-        const complete =
-          loaded.length >= totalRef.current;
         return {
           ...prev,
           loadedRepos: loaded,
-          isComplete: complete,
-          isStreaming: !complete,
+          loadedBeatsCount:
+            prev.loadedBeatsCount + beatsCount,
         };
       });
     },

src/components/__tests__/streaming-progress-bar.test.ts

@@ -8,9 +8,15 @@ import type { StreamingProgress } from
  */
 
 function deriveLabel(p: StreamingProgress): string {
-  if (p.isComplete) return "All repositories loaded";
-  return `Loaded ${p.loadedRepos.length}`
-    + `/${p.totalRepos} repositories`;
+  if (!p.isStreaming && p.isComplete) {
+    return "All repositories loaded";
+  }
+  if (p.loadedBeatsCount > 0) {
+    return `Loading\u2026 ${p.loadedBeatsCount} beats`
+      + ` from ${p.loadedRepos.length}`
+      + `/${p.totalRepos} repos`;
+  }
+  return `Loading ${p.totalRepos} repositories\u2026`;
 }
 
 function derivePct(p: StreamingProgress): number {
@@ -32,32 +38,35 @@ describe("streaming progress bar logic", () => {
   const base: StreamingProgress = {
     totalRepos: 5,
     loadedRepos: [],
+    loadedBeatsCount: 0,
     isStreaming: true,
     isComplete: false,
   };
 
-  it("shows 0/5 at start", () => {
+  it("shows loading at start", () => {
     expect(derivePct(base)).toBe(0);
     expect(deriveLabel(base)).toBe(
-      "Loaded 0/5 repositories",
+      "Loading 5 repositories\u2026",
     );
   });
 
-  it("shows 60% at 3/5", () => {
+  it("shows beat count at 3/5 repos", () => {
     const p = {
       ...base,
       loadedRepos: ["/a", "/b", "/c"],
+      loadedBeatsCount: 42,
     };
     expect(derivePct(p)).toBe(60);
     expect(deriveLabel(p)).toBe(
-      "Loaded 3/5 repositories",
+      "Loading\u2026 42 beats from 3/5 repos",
     );
   });
 
   it("shows completion label", () => {
     const p: StreamingProgress = {
       totalRepos: 5,
       loadedRepos: ["/a", "/b", "/c", "/d", "/e"],
+      loadedBeatsCount: 50,
       isStreaming: false,
       isComplete: true,
     };
@@ -93,6 +102,7 @@ describe("streaming progress bar logic", () => {
     const idle: StreamingProgress = {
       totalRepos: 0,
       loadedRepos: [],
+      loadedBeatsCount: 0,
       isStreaming: false,
       isComplete: false,
     };
@@ -103,6 +113,7 @@ describe("streaming progress bar logic", () => {
     const empty: StreamingProgress = {
       totalRepos: 0,
       loadedRepos: [],
+      loadedBeatsCount: 0,
       isStreaming: true,
       isComplete: false,
     };

src/components/streaming-progress-bar.tsx

@@ -54,10 +54,13 @@ export function StreamingProgressBar({
     )
     : 0;
 
-  const label = progress.isComplete
+  const label = !progress.isStreaming && progress.isComplete
     ? "All repositories loaded"
-    : `Loaded ${progress.loadedRepos.length}`
-      + `/${progress.totalRepos} repositories`;
+    : progress.loadedBeatsCount > 0
+      ? `Loading\u2026 ${progress.loadedBeatsCount} beats`
+        + ` from ${progress.loadedRepos.length}`
+        + `/${progress.totalRepos} repos`
+      : `Loading ${progress.totalRepos} repositories\u2026`;
 
   return (
     <div