fix(web): ignore log catch-up replay frames

apps/web/src/hooks/use-logs.test.ts

@@ -130,4 +130,39 @@ describe("useLogs", () => {
     const contents = result.current.logs.map((l) => l.content);
     expect(contents).toEqual(["historical-1", "duplicate", "live-only"]);
   });
+
+  it("ignores catchUp WebSocket frames while appending normal live frames", async () => {
+    let logHandler: ((event: any) => void) | undefined;
+    mockOn.mockImplementation((eventType: string, handler: (event: any) => void) => {
+      if (eventType === "task:log") {
+        logHandler = handler;
+      }
+      return () => {};
+    });
+    mockGetTaskLogs.mockResolvedValue({
+      logs: [{ content: "historical", stream: "stdout", timestamp: "2025-06-01T00:00:00Z" }],
+    });
+
+    const { result } = renderHook(() => useLogs("task-1"));
+
+    await waitFor(() => {
+      expect(result.current.logs).toHaveLength(1);
+    });
+
+    act(() => {
+      logHandler?.({
+        content: "catch-up frame",
+        stream: "stdout",
+        timestamp: "2025-06-01T00:00:01Z",
+        catchUp: true,
+      });
+      logHandler?.({
+        content: "live frame",
+        stream: "stdout",
+        timestamp: "2025-06-01T00:00:02Z",
+      });
+    });
+
+    expect(result.current.logs.map((l) => l.content)).toEqual(["historical", "live frame"]);
+  });
 });

apps/web/src/hooks/use-logs.ts

@@ -36,6 +36,10 @@ export function useLogs(taskId: string) {
     clientRef.current = client;
 
     client.on("task:log", (event) => {
+      // The WebSocket replays recent logs with `catchUp: true` on connect.
+      // REST history is canonical, so ignore those replay frames.
+      if (event.catchUp) return;
+
       const entry: LogEntry = {
         content: event.content,
         stream: event.stream,

apps/web/src/hooks/use-pr-review-logs.test.ts

@@ -0,0 +1,120 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook, waitFor, act } from "@testing-library/react";
+
+const mockListPrReviewLogs = vi.fn();
+vi.mock("@/lib/api-client", () => ({
+  api: {
+    listPrReviewLogs: (...args: any[]) => mockListPrReviewLogs(...args),
+  },
+}));
+
+const mockConnect = vi.fn();
+const mockDisconnect = vi.fn();
+let wsHandler: ((event: any) => void) | null = null;
+vi.mock("@/lib/ws-client", () => ({
+  createPrReviewLogClient: () => ({
+    on: (_event: string, handler: (event: any) => void) => {
+      wsHandler = handler;
+    },
+    connect: mockConnect,
+    disconnect: mockDisconnect,
+  }),
+}));
+
+vi.mock("@/lib/ws-auth", () => ({
+  getWsTokenProvider: () => undefined,
+}));
+
+import { usePrReviewLogs } from "./use-pr-review-logs";
+
+describe("usePrReviewLogs", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    wsHandler = null;
+    mockListPrReviewLogs.mockResolvedValue({
+      logs: [
+        {
+          content: "Historical review log",
+          stream: "stdout",
+          timestamp: "2025-06-01T00:00:00Z",
+          logType: "text",
+          metadata: null,
+        },
+      ],
+    });
+  });
+
+  it("fetches historical logs on mount", async () => {
+    const { result } = renderHook(() => usePrReviewLogs("review-1"));
+
+    await waitFor(() => {
+      expect(result.current.logs).toHaveLength(1);
+    });
+
+    expect(mockListPrReviewLogs).toHaveBeenCalledWith("review-1");
+    expect(result.current.logs[0].content).toBe("Historical review log");
+  });
+
+  it("appends live WebSocket frames after historical logs", async () => {
+    const { result } = renderHook(() => usePrReviewLogs("review-1"));
+
+    await waitFor(() => {
+      expect(result.current.logs).toHaveLength(1);
+    });
+
+    act(() => {
+      wsHandler?.({
+        content: "Live review log",
+        stream: "stdout",
+        timestamp: "2025-06-01T00:00:01Z",
+        logType: "text",
+      });
+    });
+
+    expect(result.current.logs.map((l) => l.content)).toEqual([
+      "Historical review log",
+      "Live review log",
+    ]);
+  });
+
+  it("ignores catchUp WebSocket frames while appending normal live frames", async () => {
+    const { result } = renderHook(() => usePrReviewLogs("review-1"));
+
+    await waitFor(() => {
+      expect(result.current.logs).toHaveLength(1);
+    });
+
+    act(() => {
+      wsHandler?.({
+        content: "Catch-up review log",
+        stream: "stdout",
+        timestamp: "2025-06-01T00:00:01Z",
+        logType: "text",
+        catchUp: true,
+      });
+      wsHandler?.({
+        content: "Live review log",
+        stream: "stdout",
+        timestamp: "2025-06-01T00:00:02Z",
+        logType: "text",
+      });
+    });
+
+    expect(result.current.logs.map((l) => l.content)).toEqual([
+      "Historical review log",
+      "Live review log",
+    ]);
+  });
+
+  it("disconnects WebSocket on unmount", async () => {
+    const { unmount } = renderHook(() => usePrReviewLogs("review-1"));
+
+    await waitFor(() => {
+      expect(mockConnect).toHaveBeenCalled();
+    });
+
+    unmount();
+
+    expect(mockDisconnect).toHaveBeenCalled();
+  });
+});

apps/web/src/hooks/use-pr-review-logs.ts

@@ -34,6 +34,10 @@ export function usePrReviewLogs(prReviewId: string) {
     clientRef.current = client;
 
     client.on("pr_review_run:log", (event) => {
+      // The WebSocket replays recent logs with `catchUp: true` on connect.
+      // REST history is canonical, so ignore those replay frames.
+      if (event.catchUp) return;
+
       const entry: LogEntry = {
         content: event.content,
         stream: event.stream,

apps/web/src/hooks/use-workflow-run-logs.test.ts

@@ -105,6 +105,36 @@ describe("useWorkflowRunLogs", () => {
     expect(result.current.logs[2].content).toBe("New live event");
   });
 
+  it("ignores catchUp WebSocket frames while appending normal live frames", async () => {
+    const { result } = renderHook(() => useWorkflowRunLogs("run-1", true));
+
+    await waitFor(() => {
+      expect(result.current.logs).toHaveLength(2);
+    });
+
+    act(() => {
+      wsHandler?.({
+        content: "catch-up frame",
+        stream: "stdout",
+        timestamp: "2025-06-01T00:00:02Z",
+        logType: "text",
+        catchUp: true,
+      });
+      wsHandler?.({
+        content: "live frame",
+        stream: "stdout",
+        timestamp: "2025-06-01T00:00:03Z",
+        logType: "text",
+      });
+    });
+
+    expect(result.current.logs.map((l) => l.content)).toEqual([
+      "Starting agent",
+      "Running tool",
+      "live frame",
+    ]);
+  });
+
   it("deduplicates identical events", async () => {
     const { result } = renderHook(() => useWorkflowRunLogs("run-1", true));
 

apps/web/src/hooks/use-workflow-run-logs.ts

@@ -29,6 +29,10 @@ export function useWorkflowRunLogs(runId: string, isActive: boolean) {
     clientRef.current = client;
 
     client.on("workflow_run:log", (event) => {
+      // The WebSocket replays recent logs with `catchUp: true` on connect.
+      // REST history is canonical, so ignore those replay frames.
+      if (event.catchUp) return;
+
       const entry: LogEntry = {
         content: event.content,
         stream: event.stream,