feat: add Replay Mode

web/src/core/api/chat.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: MIT
 
 import type { MCPServerMetadata } from "../mcp";
+import { extractReplayIdFromURL } from "../replay/get-replay-id";
 import { fetchStream } from "../sse";
 import { sleep } from "../utils";
 
@@ -28,8 +29,8 @@ export function chatStream(
   },
   options: { abortSignal?: AbortSignal } = {},
 ) {
-  if (location.search.includes("mock")) {
-    return chatStreamMock(userMessage, params, options);
+  if (location.search.includes("mock") || location.search.includes("replay=")) {
+    return chatReplayStream(userMessage, params, options);
   }
   return fetchStream<ChatEvent>(resolveServiceURL("chat/stream"), {
     body: JSON.stringify({
@@ -40,7 +41,7 @@ export function chatStream(
   });
 }
 
-async function* chatStreamMock(
+async function* chatReplayStream(
   userMessage: string,
   params: {
     thread_id: string;
@@ -57,30 +58,51 @@ async function* chatStreamMock(
   },
   options: { abortSignal?: AbortSignal } = {},
 ): AsyncIterable<ChatEvent> {
-  const mockFile =
-    params.interrupt_feedback === "accepted"
-      ? "/mock-before-interrupt.txt"
-      : "/mock-after-interrupt.txt";
-  const res = await fetch(mockFile, {
+  const urlParams = new URLSearchParams(window.location.search);
+  let replayFilePath = "";
+  if (urlParams.has("mock")) {
+    replayFilePath =
+      params.interrupt_feedback === "accepted"
+        ? "/mock/before-interrupt.txt"
+        : "/mock/after-interrupt.txt";
+  } else {
+    const replayId = extractReplayIdFromURL();
+    if (replayId) {
+      replayFilePath = `/replay/${replayId}.txt`;
+    } else {
+      replayFilePath = "/mock/before-interrupt.txt";
+    }
+  }
+  const res = await fetch(replayFilePath, {
     signal: options.abortSignal,
   });
-  await sleep(500);
   const text = await res.text();
   const chunks = text.split("\n\n");
   for (const chunk of chunks) {
     const [eventRaw, dataRaw] = chunk.split("\n") as [string, string];
     const [, event] = eventRaw.split("event: ", 2) as [string, string];
     const [, data] = dataRaw.split("data: ", 2) as [string, string];
-    if (event === "message_chunk") {
-      await sleep(100);
-    } else if (event === "tool_call_result") {
-      await sleep(2000);
-    }
+
     try {
-      yield {
+      const chatEvent = {
         type: event,
         data: JSON.parse(data),
       } as ChatEvent;
+      if (chatEvent.type === "message_chunk") {
+        if (!chatEvent.data.finish_reason) {
+          await sleep(250 + Math.random() * 250);
+        }
+      } else if (chatEvent.type === "tool_call_result") {
+        await sleep(1500);
+      }
+      yield chatEvent;
+      if (chatEvent.type === "tool_call_result") {
+        await sleep(800);
+      } else if (chatEvent.type === "message_chunk") {
+        if (chatEvent.data.role === "user") {
+          await sleep(1000);
+        }
+      }
     } catch (e) {
       console.error(e);
     }

web/src/core/replay/get-replay-id.ts

@@ -0,0 +1,13 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
+export function extractReplayIdFromURL() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const urlParams = new URLSearchParams(window.location.search);
+  if (urlParams.has("replay")) {
+    return urlParams.get("replay");
+  }
+  return null;
+}

web/src/core/replay/hooks.ts

@@ -0,0 +1,13 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
+import { useMemo } from "react";
+
+import { extractReplayIdFromURL } from "./get-replay-id";
+
+export function useReplay() {
+  const replayId = useMemo(() => {
+    return extractReplayIdFromURL();
+  }, []);
+  return { isReplay: replayId != null, replayId };
+}

web/src/core/replay/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
+export * from "./hooks";

web/src/core/store/store.ts

@@ -39,7 +39,7 @@ export const useStore = create<{
 }));
 
 export async function sendMessage(
-  content: string,
+  content?: string,
   {
     interruptFeedback,
   }: {
@@ -47,13 +47,15 @@ export async function sendMessage(
   } = {},
   options: { abortSignal?: AbortSignal } = {},
 ) {
-  appendMessage({
-    id: nanoid(),
-    threadId: THREAD_ID,
-    role: "user",
-    content: content,
-    contentChunks: [content],
-  });
+  if (content !== undefined) {
+    appendMessage({
+      id: nanoid(),
+      threadId: THREAD_ID,
+      role: "user",
+      content: content,
+      contentChunks: [content],
+    });
+  }
 
   setResponding(true);
   try {
@@ -104,7 +106,7 @@ export async function sendMessage(
       };
     }
     const stream = chatStream(
-      content,
+      content ?? "[REPLAY]",
       {
         thread_id: THREAD_ID,
         auto_accepted_plan: generalSettings.autoAcceptedPlan,