From e7ee7b74a0fe85b9dba4acbf6a62543324a13881 Mon Sep 17 00:00:00 2001
From: DigHuang <114602213+DigHuang@users.noreply.github.com>
Date: Fri, 19 Sep 2025 01:03:43 +0800
Subject: [PATCH 01/13] feat: fetch-based SSE client library

Introduces a TypeScript SSE client using fetch and ReadableStream, supporting custom headers, auto-reconnect, connection state tracking, and type-safe event handling. Includes usage example and comprehensive API for managing SSE connections.
---
 frontend/src/lib/sse-client.ts | 477 +++++++++++++++++++++++++++++++++
 1 file changed, 477 insertions(+)
 create mode 100644 frontend/src/lib/sse-client.ts

diff --git a/frontend/src/lib/sse-client.ts b/frontend/src/lib/sse-client.ts
new file mode 100644
index 000000000..d11ef44fd
--- /dev/null
+++ b/frontend/src/lib/sse-client.ts
@@ -0,0 +1,477 @@
+/**
+ * Fetch-based SSE client library
+ * Implements SSE using fetch + ReadableStream with custom headers, auto-reconnect, and type safety
+ */
+
+export interface SSEOptions {
+  /** SSE endpoint URL */
+  url: string;
+  /** Custom request headers */
+  headers?: Record<string, string>;
+  /** Enable automatic reconnection */
+  autoReconnect?: boolean;
+  /** Reconnection interval in milliseconds */
+  reconnectInterval?: number;
+  /** Maximum number of reconnection attempts */
+  maxReconnectAttempts?: number;
+  /** Connection timeout in milliseconds */
+  timeout?: number;
+  /** Additional fetch request options */
+  fetchOptions?: Omit<RequestInit, "headers" | "signal">;
+}
+
+export interface SSEEventHandlers<TEventMap = Record<string, unknown>> {
+  /** Called when an event is received */
+  onEvent?: <K extends keyof TEventMap>(
+    eventType: K,
+    data: TEventMap[K],
+  ) => void;
+  /** Called when connection is established */
+  onOpen?: () => void;
+  /** Called when an error occurs */
+  onError?: (error: Error) => void;
+  /** Called when connection is closed */
+  onClose?: () => void;
+  /** Called during reconnection attempts */
+  onReconnect?: (attempt: number) => void;
+}
+
+export enum SSEReadyState {
+  CONNECTING = 0,
+  OPEN = 1,
+  CLOSED = 2,
+}
+
+export class SSEClient<TEventMap = Record<string, unknown>> {
+  private options: Required<SSEOptions>;
+  private handlers: SSEEventHandlers<TEventMap> = {};
+  private reconnectCount = 0;
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  private isManualClose = false;
+  private readyState: SSEReadyState = SSEReadyState.CLOSED;
+  private abortController: AbortController | null = null;
+  private reader: ReadableStreamDefaultReader<Uint8Array> | null = null;
+
+  constructor(options: SSEOptions) {
+    this.options = {
+      autoReconnect: true,
+      reconnectInterval: 3000,
+      maxReconnectAttempts: 10,
+      timeout: 30000,
+      headers: {},
+      fetchOptions: {},
+      ...options,
+    };
+  }
+
+  /**
+   * Set event handlers for SSE events
+   */
+  setEventHandlers(handlers: SSEEventHandlers<TEventMap>): void {
+    this.handlers = { ...this.handlers, ...handlers };
+  }
+
+  /**
+   * Connect to the SSE endpoint
+   */
+  async connect(): Promise<void> {
+    if (this.readyState !== SSEReadyState.CLOSED) {
+      return;
+    }
+
+    this.isManualClose = false;
+    this.readyState = SSEReadyState.CONNECTING;
+    this.abortController = new AbortController();
+
+    try {
+      await this.startConnection();
+    } catch (error) {
+      this.readyState = SSEReadyState.CLOSED;
+      throw error;
+    }
+  }
+
+  /**
+   * Start the connection using fetch + ReadableStream
+   */
+  private async startConnection(): Promise<void> {
+    const timeoutId = setTimeout(() => {
+      this.abortController?.abort();
+    }, this.options.timeout);
+
+    try {
+      const response = await fetch(this.options.url, {
+        method: "GET",
+        signal: this.abortController?.signal,
+        ...this.options.fetchOptions,
+        headers: {
+          Accept: "text/event-stream",
+          "Cache-Control": "no-cache",
+          Connection: "keep-alive",
+          ...this.options.headers,
+        },
+      });
+
+      clearTimeout(timeoutId);
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      if (!response.body) {
+        throw new Error("Response body is empty");
+      }
+
+      // Connection established
+      this.readyState = SSEReadyState.OPEN;
+      this.reconnectCount = 0;
+      this.handlers.onOpen?.();
+
+      // Start reading the stream
+      await this.readStream(response.body);
+    } catch (error) {
+      clearTimeout(timeoutId);
+      this.readyState = SSEReadyState.CLOSED;
+
+      if (error instanceof Error && error.name === "AbortError") {
+        const timeoutError = new Error("Connection timeout");
+        this.handlers.onError?.(timeoutError);
+        throw timeoutError;
+      }
+
+      this.handlers.onError?.(error as Error);
+
+      if (!this.isManualClose && this.options.autoReconnect) {
+        this.scheduleReconnect();
+      }
+
+      throw error;
+    }
+  }
+
+  /**
+   * Read the response stream and process SSE events
+   */
+  private async readStream(body: ReadableStream<Uint8Array>): Promise<void> {
+    this.reader = body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+
+    try {
+      while (true) {
+        const { done, value } = await this.reader.read();
+
+        if (done) {
+          this.readyState = SSEReadyState.CLOSED;
+          if (!this.isManualClose && this.options.autoReconnect) {
+            this.scheduleReconnect();
+          } else {
+            this.handlers.onClose?.();
+          }
+          break;
+        }
+
+        buffer += decoder.decode(value, { stream: true });
+
+        // Process complete event blocks
+        let eventEnd: number = buffer.indexOf("\n\n");
+        while (eventEnd !== -1) {
+          const eventBlock = buffer.slice(0, eventEnd);
+          buffer = buffer.slice(eventEnd + 2);
+
+          if (eventBlock.trim()) {
+            this.processEvent(eventBlock);
+          }
+
+          eventEnd = buffer.indexOf("\n\n");
+        }
+      }
+    } catch (error) {
+      this.readyState = SSEReadyState.CLOSED;
+
+      if (!this.isManualClose) {
+        this.handlers.onError?.(error as Error);
+
+        if (this.options.autoReconnect) {
+          this.scheduleReconnect();
+        }
+      }
+    } finally {
+      this.reader?.releaseLock();
+      this.reader = null;
+    }
+  }
+
+  /**
+   * Process a single SSE event block
+   */
+  private processEvent(eventBlock: string): void {
+    const lines = eventBlock.split("\n");
+    let data = "";
+    let event: string | undefined;
+
+    for (const line of lines) {
+      if (line.startsWith("data:")) {
+        data += `${line.slice(5).trim()}\n`;
+      } else if (line.startsWith("id:")) {
+        // Skip id for now as it's not used in our event handling
+      } else if (line.startsWith("event:")) {
+        event = line.slice(6).trim();
+      }
+      // Ignore retry: field for simplicity
+    }
+
+    if (!data) return;
+
+    // Remove trailing newline
+    data = data.slice(0, -1);
+
+    try {
+      const parsedData = JSON.parse(data);
+
+      if (event && this.handlers.onEvent) {
+        this.handlers.onEvent(event as keyof TEventMap, parsedData);
+      }
+    } catch (error) {
+      // Only log JSON parsing errors, don't trigger connection-level error handling
+      console.warn("Failed to parse SSE message:", data, error);
+    }
+  }
+
+  /**
+   * Schedule a reconnection attempt
+   */
+  private scheduleReconnect(): void {
+    // Check if already reconnecting
+    if (this.reconnectTimer !== null) return;
+
+    // Check if reached max attempts
+    if (this.reconnectCount >= this.options.maxReconnectAttempts) {
+      console.error(
+        `SSE reconnection failed: reached max attempts (${this.options.maxReconnectAttempts})`,
+      );
+      this.handlers.onClose?.();
+      return;
+    }
+
+    this.reconnectCount++;
+    this.handlers.onReconnect?.(this.reconnectCount);
+
+    this.reconnectTimer = setTimeout(() => {
+      this.reconnectTimer = null;
+      console.log(`SSE reconnecting... (attempt ${this.reconnectCount})`);
+      this.connect().catch((error) => {
+        console.error("Reconnection failed:", error);
+      });
+    }, this.options.reconnectInterval);
+  }
+
+  /**
+   * Get current connection state
+   */
+  get state(): SSEReadyState {
+    return this.readyState;
+  }
+
+  /**
+   * Check if currently connected
+   */
+  get isConnected(): boolean {
+    return this.readyState === SSEReadyState.OPEN;
+  }
+
+  /**
+   * Check if currently connecting
+   */
+  get isConnecting(): boolean {
+    return this.readyState === SSEReadyState.CONNECTING;
+  }
+
+  /**
+   * Get number of reconnection attempts
+   */
+  get reconnectAttempts(): number {
+    return this.reconnectCount;
+  }
+
+  /**
+   * Close the SSE connection
+   */
+  close(): void {
+    this.isManualClose = true;
+    this.readyState = SSEReadyState.CLOSED;
+
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+
+    if (this.abortController) {
+      this.abortController.abort();
+      this.abortController = null;
+    }
+
+    if (this.reader) {
+      this.reader.cancel();
+      this.reader = null;
+    }
+
+    this.handlers.onClose?.();
+  }
+
+  /**
+   * Destroy the client instance and clean up all resources
+   */
+  destroy(): void {
+    this.close();
+    this.handlers = {};
+    this.reconnectCount = 0;
+  }
+}
+
+export default SSEClient;
+
+/*
+Usage Example:
+
+import SSEClient from './sse-client';
+
+// Define event map with type safety
+interface EventMap {
+  conversation_start: {
+    conversation_id: number;
+  };
+  message_chunk: {
+    message_id: number;
+    content: string;
+    conversation_id: number;
+  };
+  tool_call: {
+    message_id: number;
+    content: {
+      tool_call_id: number;
+      tool_name: string;
+      tool_result: string;
+    };
+    conversation_id: number;
+  };
+  tool_call_result: {
+    message_id: number;
+    content: {
+      tool_call_id: number;
+      tool_name: string;
+    };
+    conversation_id: number;
+  };
+  reasoning: {
+    message_id: number;
+    content: string;
+    conversation_id: number;
+  };
+  done: {
+    message_id: number;
+    conversation_id: number;
+  };
+}
+
+// Create client with type-safe event map
+const client = new SSEClient<EventMap>({
+  url: 'http://localhost:8080/api/chat/stream',
+  headers: {
+    Authorization: `Bearer ${token}`,
+    'Content-Type': 'application/json',
+  },
+  autoReconnect: true,
+  reconnectInterval: 3000,
+  maxReconnectAttempts: 5,
+  timeout: 30000,
+  fetchOptions: {
+    credentials: 'include',
+  },
+});
+
+// Set up event handlers with full type safety
+client.setEventHandlers({
+  onEvent: (eventType, data) => {
+    // eventType and data are fully typed based on EventMap
+    switch (eventType) {
+      case 'conversation_start':
+        // data is automatically typed as { conversation_id: number }
+        console.log(`Conversation started: ${data.conversation_id}`);
+        break;
+        
+      case 'message_chunk':
+        // data is automatically typed as { message_id: number; content: string; conversation_id: number }
+        console.log(`Message chunk: ${data.content}`);
+        appendToMessage(data.message_id, data.content);
+        break;
+        
+      case 'tool_call':
+        // data is automatically typed with correct tool_call structure
+        console.log(`Tool call: ${data.content.tool_name}`);
+        showToolExecution(data.content.tool_name, data.content.tool_call_id);
+        break;
+        
+      case 'tool_call_result':
+        console.log(`Tool result: ${data.content.tool_call_id}`);
+        updateToolResult(data.content.tool_call_id);
+        break;
+        
+      case 'reasoning':
+        console.log(`Reasoning: ${data.content}`);
+        showReasoning(data.message_id, data.content);
+        break;
+        
+      case 'done':
+        console.log(`Message ${data.message_id} completed`);
+        markMessageComplete(data.message_id);
+        break;
+    }
+  },
+  onOpen: () => console.log('SSE connection established'),
+  onError: (error) => console.error('SSE connection error:', error),
+  onClose: () => console.log('SSE connection closed'),
+  onReconnect: (attempt) => console.log(`Reconnecting (attempt ${attempt})`),
+});
+
+// Helper functions for UI updates
+function appendToMessage(messageId: number, content: string) {
+  const messageElement = document.getElementById(`message-${messageId}`);
+  if (messageElement) {
+    messageElement.textContent += content;
+  }
+}
+
+function showToolExecution(toolName: string, toolCallId: number) {
+  console.log(`Executing tool: ${toolName} (ID: ${toolCallId})`);
+}
+
+function updateToolResult(toolCallId: number) {
+  console.log(`Tool ${toolCallId} completed`);
+}
+
+function showReasoning(messageId: number, reasoning: string) {
+  console.log(`Reasoning for message ${messageId}: ${reasoning}`);
+}
+
+function markMessageComplete(messageId: number) {
+  console.log(`Message ${messageId} is complete`);
+}
+
+// Connect to stream
+await client.connect();
+
+// Check connection status
+console.log({
+  isConnected: client.isConnected,
+  isConnecting: client.isConnecting,
+  reconnectAttempts: client.reconnectAttempts,
+  state: client.state,
+});
+
+// Close connection when done
+// client.close();
+
+// Destroy instance to clean up resources
+// client.destroy();
+*/

From 41886995c910b81d0854a88b48b726c84385f442 Mon Sep 17 00:00:00 2001
From: DigHuang <114602213+DigHuang@users.noreply.github.com>
Date: Sun, 21 Sep 2025 23:16:49 +0800
Subject: [PATCH 02/13] refactor: route param typing and agent data types

Updated usage of useParams to leverage typed route parameters in agent and stock components. Refactored agentData to use a typed Record for improved type safety. Added .react-router/types to tsconfig.json rootDirs and include for better type resolution. Added redirect in AgentConfig if agentId is missing.
---
 frontend/src/app/agent/chat.tsx   |  3 ++-
 frontend/src/app/agent/config.tsx |  9 ++++++---
 frontend/src/app/home/stock.tsx   |  3 ++-
 frontend/src/mock/agent-data.tsx  | 10 +++++++++-
 frontend/tsconfig.json            |  7 ++++++-
 5 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/agent/chat.tsx b/frontend/src/app/agent/chat.tsx
index 015e6b84f..1a3a30091 100644
--- a/frontend/src/app/agent/chat.tsx
+++ b/frontend/src/app/agent/chat.tsx
@@ -1,7 +1,8 @@
 import { useParams } from "react-router";
+import type { Route } from "./+types/chat";
 
 export default function AgentChat() {
-  const { agentId } = useParams();
+  const { agentId } = useParams<Route.LoaderArgs["params"]>();
 
   return (
     <div className="flex min-h-screen items-center justify-center bg-[#eef0f3] p-4">
diff --git a/frontend/src/app/agent/config.tsx b/frontend/src/app/agent/config.tsx
index 4318e814d..fd5467592 100644
--- a/frontend/src/app/agent/config.tsx
+++ b/frontend/src/app/agent/config.tsx
@@ -1,14 +1,17 @@
 import { ArrowRight } from "lucide-react";
-import { Link, useParams } from "react-router";
+import { Link, Navigate, useParams } from "react-router";
 import BackButton from "@/components/valuecell/button/back-button";
 import PreviewMarkdown from "@/components/valuecell/markdown/preview-markdown";
 import ScrollContainer from "@/components/valuecell/scroll-container";
 import { agentData } from "@/mock/agent-data";
+import type { Route } from "./+types/config";
 
 export default function AgentConfig() {
-  const { agentId } = useParams();
+  const { agentId } = useParams<Route.LoaderArgs["params"]>();
 
-  const agent = agentData[agentId as keyof typeof agentData];
+  if (!agentId) return <Navigate to="/" replace />;
+
+  const agent = agentData[agentId];
 
   return (
     <div className="flex flex-1 flex-col gap-8 overflow-hidden py-8">
diff --git a/frontend/src/app/home/stock.tsx b/frontend/src/app/home/stock.tsx
index b1a4fb6b0..af26fb5fe 100644
--- a/frontend/src/app/home/stock.tsx
+++ b/frontend/src/app/home/stock.tsx
@@ -9,6 +9,7 @@ import { STOCK_BADGE_COLORS } from "@/constants/stock";
 import { formatChange, formatPrice, getChangeType } from "@/lib/utils";
 import { stockData } from "@/mock/stock-data";
 import type { SparklineData } from "@/types/chart";
+import type { Route } from "./+types/stock";
 
 // Generate historical price data in [timestamp, value] format
 function generateHistoricalData(
@@ -37,7 +38,7 @@ function generateHistoricalData(
 }
 
 const Stock = memo(function Stock() {
-  const { stockId } = useParams();
+  const { stockId } = useParams<Route.LoaderArgs["params"]>();
 
   // Find stock information from mock data
   const stockInfo = useMemo(() => {
diff --git a/frontend/src/mock/agent-data.tsx b/frontend/src/mock/agent-data.tsx
index 5725dd93f..7e4127c35 100644
--- a/frontend/src/mock/agent-data.tsx
+++ b/frontend/src/mock/agent-data.tsx
@@ -155,7 +155,15 @@ export const agentRecommendations: AgentRecommendation[] = [
   },
 ];
 
-export const agentData = {
+export const agentData: Record<
+  string,
+  {
+    name: string;
+    description: string;
+    avatar: React.ReactNode;
+    content: string;
+  }
+> = {
   "warren-buffett": {
     name: "Warren Buffett Agent",
     description:
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 940343519..e069a2bfc 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -33,10 +33,15 @@
     },
     "types": [
       "vite-plugin-svg-sprite/typings/vanilla"
+    ],
+    "rootDirs": [
+      ".",
+      "./.react-router/types"
     ]
   },
   "include": [
-    "src"
+    "src",
+    ".react-router/types/**/*"
   ],
   "references": [
     {

From e4398090c3230dcbd9cea88029ea92d895ccb29d Mon Sep 17 00:00:00 2001
From: DigHuang <114602213+DigHuang@users.noreply.github.com>
Date: Mon, 22 Sep 2025 00:09:09 +0800
Subject: [PATCH 03/13] feat: Implement agent chat UI

---
 frontend/src/app/agent/chat.tsx | 137 +++++++++++++++++++++++++++++---
 1 file changed, 126 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/agent/chat.tsx b/frontend/src/app/agent/chat.tsx
index 1a3a30091..a67481c3e 100644
--- a/frontend/src/app/agent/chat.tsx
+++ b/frontend/src/app/agent/chat.tsx
@@ -1,20 +1,135 @@
-import { useParams } from "react-router";
+import { ArrowUp, MessageCircle, Settings } from "lucide-react";
+import { useRef } from "react";
+import { Navigate, useParams } from "react-router";
+import { Button } from "@/components/ui/button";
+import ScrollContainer from "@/components/valuecell/scroll-container";
+import { agentData } from "@/mock/agent-data";
 import type { Route } from "./+types/chat";
 
 export default function AgentChat() {
   const { agentId } = useParams<Route.LoaderArgs["params"]>();
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  if (!agentId) return <Navigate to="/" replace />;
+
+  const agent = agentData[agentId];
+  if (!agent) return <Navigate to="/" replace />;
+
+  // Agent skills/tags
+  const agentSkills = [
+    "Hong Kong stocks",
+    "US stocks",
+    "Predictive analysis",
+    "Stock selection",
+  ];
+
+  const handleSendMessage = () => {
+    if (textareaRef.current?.value?.trim()) {
+      textareaRef.current.value = "";
+    }
+  };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-[#eef0f3] p-4">
-      <div className="w-full max-w-[1360px] rounded-[12px] bg-white shadow-lg">
-        <div className="flex h-full flex-col p-8">
-          <h1 className="font-medium text-3xl text-black leading-9">
-            Chat with Agent: {agentId}
-          </h1>
-          <div className="mt-8 flex-1">
-            {/* Chat interface will be implemented here */}
-            <div className="flex h-full items-center justify-center text-gray-500">
-              Chat interface coming soon...
+    <div className="flex size-full flex-col gap-2 rounded-tl-4 bg-white p-8">
+      {/* Header with agent info and actions */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          {/* Agent Avatar */}
+          <div className="relative size-14">
+            <div className="absolute inset-0 rounded-full bg-white" />
+            <div className="absolute inset-0 rounded-full bg-gradient-to-br from-gray-300 to-gray-400" />
+          </div>
+
+          {/* Agent Info */}
+          <div className="flex flex-col gap-1.5">
+            <p className="font-semibold text-base text-gray-950 leading-5.5">
+              AI hedge fund agent
+            </p>
+            <div className="flex items-center gap-1">
+              {agentSkills.map((skill) => (
+                <div
+                  key={skill}
+                  className="whitespace-nowrap rounded-lg bg-gray-100 px-3 py-1 text-gray-700 text-xs"
+                >
+                  {skill}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Action buttons */}
+        <div className="flex items-center gap-2.5">
+          <Button
+            variant="secondary"
+            size="icon"
+            className="size-8 rounded-lg bg-gray-100"
+          >
+            <MessageCircle size={16} className="text-gray-600" />
+          </Button>
+          <Button
+            variant="secondary"
+            size="icon"
+            className="size-8 rounded-lg bg-gray-100"
+          >
+            <Settings size={20} className="text-gray-600" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Main content area with background effects */}
+      <div className="relative flex flex-1 flex-col items-center justify-center pt-0 pb-10">
+        {/* Background blur effects */}
+        <div className="absolute inset-0 opacity-40">
+          <div className="-translate-y-1/2 absolute top-1/2 left-0 h-[332px] w-[411px]">
+            <div className="h-full w-full rounded-full bg-[#FFDFCD] blur-[150px]" />
+          </div>
+          <div className="-translate-y-1/2 absolute top-1/2 left-[229px] h-[332px] w-[411px]">
+            <div className="h-full w-full rounded-full bg-[#FFF8D7] blur-[150px]" />
+          </div>
+          <div className="-translate-y-1/2 absolute top-1/2 left-[458px] h-[332px] w-[332px]">
+            <div className="h-full w-full rounded-full bg-[#D3FFDA] blur-[150px]" />
+          </div>
+          <div className="-translate-y-1/2 absolute top-1/2 right-[243px] h-[332px] w-[411px]">
+            <div className="h-full w-full rounded-full bg-[#DCE8FF] blur-[150px]" />
+          </div>
+          <div className="-translate-y-1/2 absolute top-1/2 right-0 h-[332px] w-[332px]">
+            <div className="h-full w-full rounded-full bg-[#F1DCFF] blur-[150px]" />
+          </div>
+        </div>
+
+        {/* Welcome content */}
+        <div className="relative z-10 flex w-[800px] flex-col items-center gap-4">
+          <div className="flex flex-col items-center gap-4">
+            <h1 className="w-[523px] text-center font-semibold text-2xl text-gray-950 leading-12">
+              Welcome to AI hedge fund agent！
+            </h1>
+          </div>
+
+          {/* Input card */}
+          <div className="relative w-full rounded-2xl border border-gray-200 bg-white p-4">
+            {/* Shadow overlay */}
+            <div
+              aria-hidden="true"
+              className="pointer-events-none absolute inset-0 rounded-2xl border border-gray-200 border-solid"
+              style={{ boxShadow: "0px 4px 20px 8px rgba(17, 17, 17, 0.04)" }}
+            />
+
+            <div className="flex w-full flex-col gap-2">
+              <ScrollContainer className="max-h-[120px]">
+                <textarea
+                  ref={textareaRef}
+                  placeholder="You can inquire and analyze the trend of NVIDIA in the next three months"
+                  className="field-sizing-content w-full resize-none border-0 bg-transparent p-0 text-base leading-5.5 outline-none placeholder:text-gray-400"
+                />
+              </ScrollContainer>
+              <Button
+                size="icon"
+                className="size-8 cursor-pointer self-end rounded-full"
+                onClick={handleSendMessage}
+              >
+                <ArrowUp size={16} className="text-white" />
+              </Button>
             </div>
           </div>
         </div>

From 6e63748a03f1ce09f6f9093f82b18d03b056ad92 Mon Sep 17 00:00:00 2001
From: DigHuang <114602213+DigHuang@users.noreply.github.com>
Date: Mon, 22 Sep 2025 10:35:09 +0800
Subject: [PATCH 04/13] refactor: scroll components and enhance chat UI

Moved ScrollContainer to a dedicated scroll directory and updated imports across multiple files. Added a new ScrollTextarea component for improved input handling in the chat interface. Enhanced the agent chat UI with a new background effect, updated header, and improved input card styling and logic.
---
 frontend/src/app/agent/chat.tsx               | 196 +++++++++++-------
 frontend/src/app/agent/config.tsx             |   2 +-
 frontend/src/app/home/_layout.tsx             |   2 +-
 .../src/app/home/components/stock-list.tsx    |   2 +-
 .../home/components/stock-search-modal.tsx    |   2 +-
 .../{ => scroll}/scroll-container.tsx         |   0
 .../valuecell/scroll/scroll-textarea.tsx      | 106 ++++++++++
 7 files changed, 227 insertions(+), 83 deletions(-)
 rename frontend/src/components/valuecell/{ => scroll}/scroll-container.tsx (100%)
 create mode 100644 frontend/src/components/valuecell/scroll/scroll-textarea.tsx

diff --git a/frontend/src/app/agent/chat.tsx b/frontend/src/app/agent/chat.tsx
index a67481c3e..11d141947 100644
--- a/frontend/src/app/agent/chat.tsx
+++ b/frontend/src/app/agent/chat.tsx
@@ -1,18 +1,63 @@
 import { ArrowUp, MessageCircle, Settings } from "lucide-react";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { Navigate, useParams } from "react-router";
 import { Button } from "@/components/ui/button";
-import ScrollContainer from "@/components/valuecell/scroll-container";
+import ScrollTextarea, {
+  type ScrollTextareaRef,
+} from "@/components/valuecell/scroll/scroll-textarea";
+import { cn } from "@/lib/utils";
 import { agentData } from "@/mock/agent-data";
 import type { Route } from "./+types/chat";
 
+const ChatBackground = () => {
+  return (
+    <div className="-z-10 absolute inset-0 overflow-hidden opacity-30">
+      {[
+        {
+          position: "left-0",
+          size: "h-80 w-96",
+          colors: "from-orange-200 to-orange-300",
+        },
+        {
+          position: "left-56",
+          size: "h-80 w-96",
+          colors: "from-yellow-200 to-yellow-300",
+        },
+        {
+          position: "left-96",
+          size: "h-72 w-72",
+          colors: "from-green-200 to-green-300",
+        },
+        {
+          position: "right-56",
+          size: "h-80 w-96",
+          colors: "from-blue-200 to-blue-300",
+        },
+        {
+          position: "right-0",
+          size: "h-72 w-72",
+          colors: "from-purple-200 to-purple-300",
+        },
+      ].map((blur, index) => (
+        <div
+          key={`${blur.position}-${index}`}
+          className={`absolute top-1/2 ${blur.position} ${blur.size} -translate-y-1/2 transform`}
+        >
+          <div
+            className={`h-full w-full rounded-full bg-gradient-to-br ${blur.colors} blur-[100px]`}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
 export default function AgentChat() {
   const { agentId } = useParams<Route.LoaderArgs["params"]>();
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  if (!agentId) return <Navigate to="/" replace />;
+  const textareaRef = useRef<ScrollTextareaRef>(null);
+  const [inputValue, setInputValue] = useState("");
 
-  const agent = agentData[agentId];
+  const agent = agentData[agentId ?? ""];
   if (!agent) return <Navigate to="/" replace />;
 
   // Agent skills/tags
@@ -24,116 +69,109 @@ export default function AgentChat() {
   ];
 
   const handleSendMessage = () => {
-    if (textareaRef.current?.value?.trim()) {
-      textareaRef.current.value = "";
+    if (inputValue.trim()) {
+      // 这里处理发送消息的逻辑
+      console.log("Sending message:", inputValue);
+      setInputValue(""); // 清空输入
     }
   };
 
+  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInputValue(e.target.value);
+  };
+
   return (
-    <div className="flex size-full flex-col gap-2 rounded-tl-4 bg-white p-8">
+    <div className="flex flex-1 flex-col overflow-hidden">
       {/* Header with agent info and actions */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
+      <header className="flex items-center justify-between border-gray-100 border-b p-6">
+        <div className="flex items-center gap-4">
           {/* Agent Avatar */}
-          <div className="relative size-14">
-            <div className="absolute inset-0 rounded-full bg-white" />
-            <div className="absolute inset-0 rounded-full bg-gradient-to-br from-gray-300 to-gray-400" />
+          <div className="relative size-12">
+            <div className="absolute inset-0 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 shadow-lg" />
+            <div className="absolute inset-0.5 flex items-center justify-center rounded-full bg-white">
+              <span className="font-semibold text-gray-700 text-sm">AI</span>
+            </div>
           </div>
 
           {/* Agent Info */}
-          <div className="flex flex-col gap-1.5">
-            <p className="font-semibold text-base text-gray-950 leading-5.5">
-              AI hedge fund agent
-            </p>
-            <div className="flex items-center gap-1">
-              {agentSkills.map((skill) => (
-                <div
+          <div className="flex flex-col gap-1">
+            <h1 className="font-semibold text-gray-950 text-lg">
+              AI Hedge Fund Agent
+            </h1>
+            <div className="flex items-center gap-2">
+              {agentSkills.slice(0, 2).map((skill) => (
+                <span
                   key={skill}
-                  className="whitespace-nowrap rounded-lg bg-gray-100 px-3 py-1 text-gray-700 text-xs"
+                  className="inline-flex items-center rounded-full bg-blue-50 px-2.5 py-0.5 font-medium text-blue-700 text-xs"
                 >
                   {skill}
-                </div>
+                </span>
               ))}
+              {agentSkills.length > 2 && (
+                <span className="text-gray-500 text-xs">
+                  +{agentSkills.length - 2} more
+                </span>
+              )}
             </div>
           </div>
         </div>
 
         {/* Action buttons */}
-        <div className="flex items-center gap-2.5">
+        <div className="flex items-center gap-2">
           <Button
-            variant="secondary"
+            variant="ghost"
             size="icon"
-            className="size-8 rounded-lg bg-gray-100"
+            className="size-9 rounded-lg hover:bg-gray-100"
           >
-            <MessageCircle size={16} className="text-gray-600" />
+            <MessageCircle size={18} className="text-gray-600" />
           </Button>
           <Button
-            variant="secondary"
+            variant="ghost"
             size="icon"
-            className="size-8 rounded-lg bg-gray-100"
+            className="size-9 rounded-lg hover:bg-gray-100"
           >
-            <Settings size={20} className="text-gray-600" />
+            <Settings size={18} className="text-gray-600" />
           </Button>
         </div>
-      </div>
+      </header>
 
       {/* Main content area with background effects */}
-      <div className="relative flex flex-1 flex-col items-center justify-center pt-0 pb-10">
+      <main className="relative flex flex-1">
         {/* Background blur effects */}
-        <div className="absolute inset-0 opacity-40">
-          <div className="-translate-y-1/2 absolute top-1/2 left-0 h-[332px] w-[411px]">
-            <div className="h-full w-full rounded-full bg-[#FFDFCD] blur-[150px]" />
-          </div>
-          <div className="-translate-y-1/2 absolute top-1/2 left-[229px] h-[332px] w-[411px]">
-            <div className="h-full w-full rounded-full bg-[#FFF8D7] blur-[150px]" />
-          </div>
-          <div className="-translate-y-1/2 absolute top-1/2 left-[458px] h-[332px] w-[332px]">
-            <div className="h-full w-full rounded-full bg-[#D3FFDA] blur-[150px]" />
-          </div>
-          <div className="-translate-y-1/2 absolute top-1/2 right-[243px] h-[332px] w-[411px]">
-            <div className="h-full w-full rounded-full bg-[#DCE8FF] blur-[150px]" />
-          </div>
-          <div className="-translate-y-1/2 absolute top-1/2 right-0 h-[332px] w-[332px]">
-            <div className="h-full w-full rounded-full bg-[#F1DCFF] blur-[150px]" />
-          </div>
-        </div>
+        <ChatBackground />
 
         {/* Welcome content */}
-        <div className="relative z-10 flex w-[800px] flex-col items-center gap-4">
-          <div className="flex flex-col items-center gap-4">
-            <h1 className="w-[523px] text-center font-semibold text-2xl text-gray-950 leading-12">
-              Welcome to AI hedge fund agent！
-            </h1>
-          </div>
+        <div className="flex flex-1 flex-col items-center justify-center gap-4">
+          <h1 className="text-center font-semibold text-2xl text-gray-950 leading-12">
+            Welcome to AI hedge fund agent！
+          </h1>
 
           {/* Input card */}
-          <div className="relative w-full rounded-2xl border border-gray-200 bg-white p-4">
-            {/* Shadow overlay */}
-            <div
-              aria-hidden="true"
-              className="pointer-events-none absolute inset-0 rounded-2xl border border-gray-200 border-solid"
-              style={{ boxShadow: "0px 4px 20px 8px rgba(17, 17, 17, 0.04)" }}
+          <div
+            className={cn(
+              "flex w-2/3 min-w-[600px] flex-col gap-2 rounded-2xl bg-white p-4",
+              "border border-gray-200 shadow-[0px_4px_20px_8px_rgba(17,17,17,0.04)]",
+              "focus-within:border-gray-300 focus-within:shadow-[0px_4px_20px_8px_rgba(17,17,17,0.08)]",
+            )}
+          >
+            <ScrollTextarea
+              ref={textareaRef}
+              value={inputValue}
+              onInput={handleInputChange}
+              placeholder="You can inquire and analyze the trend of NVIDIA in the next three months"
+              maxHeight={120}
+              minHeight={24}
             />
-
-            <div className="flex w-full flex-col gap-2">
-              <ScrollContainer className="max-h-[120px]">
-                <textarea
-                  ref={textareaRef}
-                  placeholder="You can inquire and analyze the trend of NVIDIA in the next three months"
-                  className="field-sizing-content w-full resize-none border-0 bg-transparent p-0 text-base leading-5.5 outline-none placeholder:text-gray-400"
-                />
-              </ScrollContainer>
-              <Button
-                size="icon"
-                className="size-8 cursor-pointer self-end rounded-full"
-                onClick={handleSendMessage}
-              >
-                <ArrowUp size={16} className="text-white" />
-              </Button>
-            </div>
+            <Button
+              size="icon"
+              className="size-8 cursor-pointer self-end rounded-full"
+              onClick={handleSendMessage}
+            >
+              <ArrowUp size={16} className="text-white" />
+            </Button>
           </div>
         </div>
-      </div>
+      </main>
     </div>
   );
 }
diff --git a/frontend/src/app/agent/config.tsx b/frontend/src/app/agent/config.tsx
index fd5467592..8c7a17057 100644
--- a/frontend/src/app/agent/config.tsx
+++ b/frontend/src/app/agent/config.tsx
@@ -2,7 +2,7 @@ import { ArrowRight } from "lucide-react";
 import { Link, Navigate, useParams } from "react-router";
 import BackButton from "@/components/valuecell/button/back-button";
 import PreviewMarkdown from "@/components/valuecell/markdown/preview-markdown";
-import ScrollContainer from "@/components/valuecell/scroll-container";
+import ScrollContainer from "@/components/valuecell/scroll/scroll-container";
 import { agentData } from "@/mock/agent-data";
 import type { Route } from "./+types/config";
 
diff --git a/frontend/src/app/home/_layout.tsx b/frontend/src/app/home/_layout.tsx
index 0ab5596de..33e11076b 100644
--- a/frontend/src/app/home/_layout.tsx
+++ b/frontend/src/app/home/_layout.tsx
@@ -2,7 +2,7 @@ import { Plus } from "lucide-react";
 import { Outlet } from "react-router";
 import StockSearchModal from "@/app/home/components/stock-search-modal";
 import { Button } from "@/components/ui/button";
-import ScrollContainer from "@/components/valuecell/scroll-container";
+import ScrollContainer from "@/components/valuecell/scroll/scroll-container";
 import StockList from "./components/stock-list";
 
 export default function HomeLayout() {
diff --git a/frontend/src/app/home/components/stock-list.tsx b/frontend/src/app/home/components/stock-list.tsx
index 621b857ab..37ee57a2d 100644
--- a/frontend/src/app/home/components/stock-list.tsx
+++ b/frontend/src/app/home/components/stock-list.tsx
@@ -7,7 +7,7 @@ import {
   StockMenuHeader,
   StockMenuListItem,
 } from "@/components/valuecell/menus/stock-menus";
-import ScrollContainer from "@/components/valuecell/scroll-container";
+import ScrollContainer from "@/components/valuecell/scroll/scroll-container";
 import { stockData } from "@/mock/stock-data";
 
 function StockList() {
diff --git a/frontend/src/app/home/components/stock-search-modal.tsx b/frontend/src/app/home/components/stock-search-modal.tsx
index 04013e1fd..9fe9cc91e 100644
--- a/frontend/src/app/home/components/stock-search-modal.tsx
+++ b/frontend/src/app/home/components/stock-search-modal.tsx
@@ -10,7 +10,7 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
-import ScrollContainer from "@/components/valuecell/scroll-container";
+import ScrollContainer from "@/components/valuecell/scroll/scroll-container";
 import { useDebounce } from "@/hooks/use-debounce";
 
 interface StockSearchModalProps {
diff --git a/frontend/src/components/valuecell/scroll-container.tsx b/frontend/src/components/valuecell/scroll/scroll-container.tsx
similarity index 100%
rename from frontend/src/components/valuecell/scroll-container.tsx
rename to frontend/src/components/valuecell/scroll/scroll-container.tsx
diff --git a/frontend/src/components/valuecell/scroll/scroll-textarea.tsx b/frontend/src/components/valuecell/scroll/scroll-textarea.tsx
new file mode 100644
index 000000000..f33e80299
--- /dev/null
+++ b/frontend/src/components/valuecell/scroll/scroll-textarea.tsx
@@ -0,0 +1,106 @@
+import { useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "@/lib/utils";
+import ScrollContainer from "./scroll-container";
+
+export interface ScrollTextareaProps
+  extends Omit<
+    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    "style" | "onChange"
+  > {
+  /**
+   * Maximum height in pixels for the textarea container
+   * @default 120
+   */
+  maxHeight?: number;
+  /**
+   * Minimum height in pixels for the textarea
+   * @default 24
+   */
+  minHeight?: number;
+  /**
+   * Additional className for the ScrollContainer wrapper
+   */
+  containerClassName?: string;
+  /**
+   * Whether to auto-resize the textarea based on content
+   * @default true
+   */
+  autoResize?: boolean;
+  /**
+   * Ref object to access textarea methods
+   */
+  ref?: React.Ref<ScrollTextareaRef>;
+}
+
+export interface ScrollTextareaRef {
+  /**
+   * Focus the textarea
+   */
+  focus: () => void;
+  /**
+   * Get the current textarea value
+   */
+  getValue: () => string;
+}
+
+function ScrollTextarea({
+  className,
+  containerClassName,
+  maxHeight = 120,
+  minHeight = 24,
+  autoResize = true,
+  onInput,
+  ref,
+  ...props
+}: ScrollTextareaProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-resize textarea function
+  const adjustTextareaHeight = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea || !autoResize) return;
+
+    // Reset height to auto to get the correct scrollHeight
+    textarea.style.height = "auto";
+    textarea.style.height = `${Math.max(textarea.scrollHeight, minHeight)}px`;
+  }, [autoResize, minHeight]);
+
+  // Handle input events (for compatibility)
+  const handleInput = useCallback(
+    (e: React.FormEvent<HTMLTextAreaElement>) => {
+      onInput?.(e);
+      // Note: onChange will handle the height adjustment
+      adjustTextareaHeight();
+    },
+    [onInput, adjustTextareaHeight],
+  );
+
+  // Expose methods through ref
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      textareaRef.current?.focus();
+    },
+    getValue: () => {
+      return textareaRef.current?.value || "";
+    },
+  }));
+
+  return (
+    <ScrollContainer
+      className={containerClassName}
+      style={{ maxHeight: `${maxHeight}px` }}
+    >
+      <textarea
+        ref={textareaRef}
+        onInput={handleInput}
+        className={cn(
+          "w-full resize-none border-0 bg-transparent p-0 text-base leading-5.5 outline-none placeholder:text-gray-400",
+          className,
+        )}
+        {...props}
+      />
+    </ScrollContainer>
+  );
+}
+
+export default ScrollTextarea;

From 241b72f84e9f6bee8966b11fe7288f6c26c86e3e Mon Sep 17 00:00:00 2001
From: DigHuang <114602213+DigHuang@users.noreply.github.com>
Date: Mon, 22 Sep 2025 18:21:57 +0800
Subject: [PATCH 05/13] refactor: agent chat SSE and modular components

Reworked the agent chat to support real-time streaming via SSE, modularized the chat background into its own component, and added a custom useSSE React hook for managing SSE connections. Updated types and constants for agent events, message, and component handling. Improved chat UI to display streaming, tool calls, reasoning, and error states.
---
 frontend/src/app/agent/chat.tsx               | 780 +++++++++++++++---
 .../app/agent/components/chat-background.tsx  |  44 +
 frontend/src/app/agent/components/index.tsx   |   1 +
 frontend/src/hooks/use-sse.ts                 | 197 +++++
 frontend/src/lib/sse-client.ts                |  23 +-
 frontend/src/types/agent.ts                   | 152 ++++
 6 files changed, 1096 insertions(+), 101 deletions(-)
 create mode 100644 frontend/src/app/agent/components/chat-background.tsx
 create mode 100644 frontend/src/app/agent/components/index.tsx
 create mode 100644 frontend/src/hooks/use-sse.ts
 create mode 100644 frontend/src/types/agent.ts

diff --git a/frontend/src/app/agent/chat.tsx b/frontend/src/app/agent/chat.tsx
index 11d141947..95855628e 100644
--- a/frontend/src/app/agent/chat.tsx
+++ b/frontend/src/app/agent/chat.tsx
@@ -1,62 +1,413 @@
-import { ArrowUp, MessageCircle, Settings } from "lucide-react";
-import { useRef, useState } from "react";
+import {
+  AlertTriangle,
+  ArrowUp,
+  BarChart3,
+  Bot,
+  Brain,
+  CheckCircle,
+  Clock,
+  FileText,
+  MessageCircle,
+  Settings,
+  Table,
+  User,
+  Zap,
+} from "lucide-react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { Navigate, useParams } from "react-router";
 import { Button } from "@/components/ui/button";
 import ScrollTextarea, {
   type ScrollTextareaRef,
 } from "@/components/valuecell/scroll/scroll-textarea";
+import { useSSE } from "@/hooks/use-sse";
 import { cn } from "@/lib/utils";
 import { agentData } from "@/mock/agent-data";
+import type {
+  AgentEventMap,
+  AgentStreamRequest,
+  ChatMessage,
+  GeneratedComponent,
+} from "@/types/agent";
+import {
+  COMPONENT_TYPE,
+  type ComponentType,
+  MESSAGE_TYPE,
+  TOOL_CALL_STATUS,
+} from "@/types/agent";
 import type { Route } from "./+types/chat";
-
-const ChatBackground = () => {
-  return (
-    <div className="-z-10 absolute inset-0 overflow-hidden opacity-30">
-      {[
-        {
-          position: "left-0",
-          size: "h-80 w-96",
-          colors: "from-orange-200 to-orange-300",
-        },
-        {
-          position: "left-56",
-          size: "h-80 w-96",
-          colors: "from-yellow-200 to-yellow-300",
-        },
-        {
-          position: "left-96",
-          size: "h-72 w-72",
-          colors: "from-green-200 to-green-300",
-        },
-        {
-          position: "right-56",
-          size: "h-80 w-96",
-          colors: "from-blue-200 to-blue-300",
-        },
-        {
-          position: "right-0",
-          size: "h-72 w-72",
-          colors: "from-purple-200 to-purple-300",
-        },
-      ].map((blur, index) => (
-        <div
-          key={`${blur.position}-${index}`}
-          className={`absolute top-1/2 ${blur.position} ${blur.size} -translate-y-1/2 transform`}
-        >
-          <div
-            className={`h-full w-full rounded-full bg-gradient-to-br ${blur.colors} blur-[100px]`}
-          />
-        </div>
-      ))}
-    </div>
-  );
-};
+import { ChatBackground } from "./components";
 
 export default function AgentChat() {
   const { agentId } = useParams<Route.LoaderArgs["params"]>();
   const textareaRef = useRef<ScrollTextareaRef>(null);
   const [inputValue, setInputValue] = useState("");
 
+  // Simplified chat state - only essential state
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [conversationId, setConversationId] = useState<string | null>(null);
+  const [currentThreadId, setCurrentThreadId] = useState<string | null>(null);
+  const [userInputRequired, setUserInputRequired] = useState<string | null>(
+    null,
+  );
+
+  // Optimized message update helper
+  const updateOrCreateMessage = useCallback(
+    (
+      messageId: string,
+      content: string,
+      isComplete: boolean,
+      threadId: string,
+      taskId?: string,
+      subtaskId?: string,
+      isAppend = false,
+    ) => {
+      setMessages((prevMessages) => {
+        const updatedMessages = [...prevMessages];
+        const messageIndex = updatedMessages.findIndex(
+          (msg) => msg.id === messageId,
+        );
+
+        if (messageIndex >= 0) {
+          updatedMessages[messageIndex] = {
+            ...updatedMessages[messageIndex],
+            content: isAppend
+              ? updatedMessages[messageIndex].content + content
+              : content,
+            isComplete,
+          };
+        } else {
+          updatedMessages.push({
+            id: messageId,
+            content,
+            type: MESSAGE_TYPE.ASSISTANT,
+            isComplete,
+            threadId,
+            taskId,
+            subtaskId,
+          });
+        }
+
+        return updatedMessages;
+      });
+
+      setCurrentThreadId(threadId);
+    },
+    [],
+  );
+
+  // Handle SSE events with automatic type inference
+  const handleSSEEvent = useCallback(
+    <T extends keyof AgentEventMap>(eventType: T, data: AgentEventMap[T]) => {
+      switch (eventType) {
+        case "conversation_started": {
+          const payload = data as AgentEventMap["conversation_started"];
+          setConversationId(payload.conversation_id);
+          break;
+        }
+
+        case "message_chunk": {
+          const payload = data as AgentEventMap["message_chunk"];
+          const messageId = `${payload.conversation_id}-${payload.thread_id}`;
+          updateOrCreateMessage(
+            messageId,
+            payload.data.content,
+            false,
+            payload.thread_id,
+            payload.task_id,
+            payload.subtask_id,
+            true, // append content
+          );
+          break;
+        }
+
+        case "message": {
+          const payload = data as AgentEventMap["message"];
+          const messageId = `${payload.conversation_id}-${payload.thread_id}`;
+          updateOrCreateMessage(
+            messageId,
+            payload.data.content,
+            true,
+            payload.thread_id,
+            payload.task_id,
+            payload.subtask_id,
+            false, // replace content
+          );
+          break;
+        }
+
+        case "component_generator": {
+          const payload = data as AgentEventMap["component_generator"];
+          const componentMessage: ChatMessage = {
+            id: `component-${payload.conversation_id}-${payload.thread_id}-${Date.now()}`,
+            content: "",
+            type: MESSAGE_TYPE.COMPONENT,
+            isComplete: true,
+            threadId: payload.thread_id,
+            taskId: payload.task_id,
+            subtaskId: payload.subtask_id,
+            component: {
+              type: payload.data.component_type as ComponentType,
+              content: payload.data.content,
+            },
+          };
+
+          setMessages((prev) => [...prev, componentMessage]);
+          break;
+        }
+
+        case "plan_require_user_input": {
+          const payload = data as AgentEventMap["plan_require_user_input"];
+          setUserInputRequired(payload.data.content);
+          break;
+        }
+
+        case "tool_call_started":
+        case "tool_call_completed": {
+          const payload = data as
+            | AgentEventMap["tool_call_started"]
+            | AgentEventMap["tool_call_completed"];
+          const messageId = `${payload.conversation_id}-${payload.thread_id}`;
+          const isCompleted = eventType === "tool_call_completed";
+
+          setMessages((prevMessages) => {
+            const updatedMessages = [...prevMessages];
+            const messageIndex = updatedMessages.findIndex(
+              (msg) => msg.id === messageId,
+            );
+
+            if (messageIndex >= 0) {
+              const message = updatedMessages[messageIndex];
+              const toolCalls = [...(message.toolCalls || [])];
+              const toolCallIndex = toolCalls.findIndex(
+                (tc) => tc.id === payload.data.tool_call_id,
+              );
+
+              const toolCallData = {
+                id: payload.data.tool_call_id,
+                name: payload.data.tool_name,
+                status: isCompleted
+                  ? TOOL_CALL_STATUS.COMPLETED
+                  : TOOL_CALL_STATUS.STARTED,
+                startTime: new Date(),
+                ...(isCompleted && {
+                  result: (payload as AgentEventMap["tool_call_completed"]).data
+                    .tool_call_result,
+                  endTime: new Date(),
+                }),
+              };
+
+              if (toolCallIndex >= 0) {
+                toolCalls[toolCallIndex] = {
+                  ...toolCalls[toolCallIndex],
+                  ...toolCallData,
+                };
+              } else {
+                toolCalls.push(toolCallData);
+              }
+
+              updatedMessages[messageIndex] = { ...message, toolCalls };
+            }
+
+            return updatedMessages;
+          });
+          break;
+        }
+
+        case "reasoning": {
+          const payload = data as AgentEventMap["reasoning"];
+          const messageId = `${payload.conversation_id}-${payload.thread_id}`;
+
+          setMessages((prevMessages) => {
+            const updatedMessages = [...prevMessages];
+            const messageIndex = updatedMessages.findIndex(
+              (msg) => msg.id === messageId,
+            );
+
+            if (messageIndex >= 0) {
+              updatedMessages[messageIndex] = {
+                ...updatedMessages[messageIndex],
+                reasoning: payload.data.content,
+              };
+            }
+
+            return updatedMessages;
+          });
+          break;
+        }
+
+        case "plan_failed":
+        case "task_failed": {
+          const payload = data as
+            | AgentEventMap["plan_failed"]
+            | AgentEventMap["task_failed"];
+          const errorMessage: ChatMessage = {
+            id: `error-${payload.conversation_id}-${payload.thread_id}-${Date.now()}`,
+            content: payload.data.content,
+            type: MESSAGE_TYPE.ERROR,
+            isComplete: true,
+            threadId: payload.thread_id,
+          };
+
+          setMessages((prev) => [...prev, errorMessage]);
+          break;
+        }
+
+        case "done": {
+          const payload = data as AgentEventMap["done"];
+          setUserInputRequired(null);
+          setCurrentThreadId(payload.thread_id);
+          break;
+        }
+      }
+    },
+    [updateOrCreateMessage],
+  );
+
+  // Initialize SSE connection using the useSSE hook
+  const {
+    connect,
+    isConnected,
+    isConnecting,
+    error: sseError,
+  } = useSSE<AgentEventMap>({
+    options: {
+      url: "http://localhost:8001/api/v1/agents/stream",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      autoReconnect: true,
+      reconnectInterval: 3000,
+      maxReconnectAttempts: 5,
+      timeout: 30000,
+    },
+    handlers: {
+      onEvent: handleSSEEvent,
+      onOpen: () => {
+        console.log("SSE connection opened");
+      },
+      onError: (error) => {
+        console.error("SSE connection error:", error);
+      },
+      onClose: () => {
+        console.log("SSE connection closed");
+      },
+      onReconnect: (attempt) => {
+        console.log(`Reconnecting to agent stream (attempt ${attempt})`);
+      },
+    },
+  });
+
+  // Derived state - compute from existing state instead of maintaining separately
+  const isStreaming = isConnected && !userInputRequired;
+
+  // Send message to agent
+  const sendMessage = useCallback(
+    async (message: string) => {
+      const userMessage: ChatMessage = {
+        id: `user-${Date.now()}`,
+        content: message,
+        type: MESSAGE_TYPE.USER,
+        isComplete: true,
+      };
+
+      setMessages((prev) => [...prev, userMessage]);
+      setUserInputRequired(null);
+
+      try {
+        const request: AgentStreamRequest = {
+          query: message,
+          agent_name: "SecAgent", // You can make this dynamic based on the agent
+          conversation_id: conversationId || undefined,
+          thread_id: currentThreadId || undefined,
+        };
+
+        // Connect SSE client with request body to receive streaming response
+        await connect(JSON.stringify(request));
+      } catch (error) {
+        console.error("Failed to send message:", error);
+      }
+    },
+    [conversationId, currentThreadId, connect],
+  );
+
+  // Handle user input for plan_require_user_input events
+  const handleUserInputResponse = useCallback(
+    async (response: string) => {
+      await sendMessage(response);
+    },
+    [sendMessage],
+  );
+
+  const handleSendMessage = useCallback(() => {
+    const trimmedInput = inputValue.trim();
+    if (!trimmedInput || isConnecting) return;
+
+    const messageHandler = userInputRequired
+      ? handleUserInputResponse
+      : sendMessage;
+
+    messageHandler(trimmedInput);
+    setInputValue("");
+  }, [
+    inputValue,
+    isConnecting,
+    userInputRequired,
+    handleUserInputResponse,
+    sendMessage,
+  ]);
+
+  // Optimized component icon mapping
+  const componentIcons = useMemo(
+    () => ({
+      [COMPONENT_TYPE.REPORT]: <FileText size={16} className="text-blue-600" />,
+      [COMPONENT_TYPE.CHART]: (
+        <BarChart3 size={16} className="text-green-600" />
+      ),
+      [COMPONENT_TYPE.TABLE]: <Table size={16} className="text-purple-600" />,
+      [COMPONENT_TYPE.ANALYSIS]: (
+        <Brain size={16} className="text-orange-600" />
+      ),
+    }),
+    [],
+  );
+
+  // Optimized component renderer
+  const renderComponent = useCallback(
+    (component: GeneratedComponent) => {
+      const icon = componentIcons[component.type] || (
+        <FileText size={16} className="text-gray-600" />
+      );
+
+      return (
+        <div className="mt-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
+          <div className="mb-2 flex items-center gap-2">
+            {icon}
+            <span className="font-medium text-blue-900 text-sm capitalize">
+              {component.type} Generated
+            </span>
+          </div>
+          <div className="rounded bg-white p-3 text-gray-800 text-sm">
+            <pre className="whitespace-pre-wrap font-mono text-xs">
+              {component.content}
+            </pre>
+          </div>
+        </div>
+      );
+    },
+    [componentIcons],
+  );
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSendMessage();
+    }
+  };
+
   const agent = agentData[agentId ?? ""];
   if (!agent) return <Navigate to="/" replace />;
 
@@ -68,18 +419,6 @@ export default function AgentChat() {
     "Stock selection",
   ];
 
-  const handleSendMessage = () => {
-    if (inputValue.trim()) {
-      // 这里处理发送消息的逻辑
-      console.log("Sending message:", inputValue);
-      setInputValue(""); // 清空输入
-    }
-  };
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setInputValue(e.target.value);
-  };
-
   return (
     <div className="flex flex-1 flex-col overflow-hidden">
       {/* Header with agent info and actions */}
@@ -135,42 +474,297 @@ export default function AgentChat() {
         </div>
       </header>
 
-      {/* Main content area with background effects */}
-      <main className="relative flex flex-1">
-        {/* Background blur effects */}
-        <ChatBackground />
-
-        {/* Welcome content */}
-        <div className="flex flex-1 flex-col items-center justify-center gap-4">
-          <h1 className="text-center font-semibold text-2xl text-gray-950 leading-12">
-            Welcome to AI hedge fund agent！
-          </h1>
-
-          {/* Input card */}
-          <div
-            className={cn(
-              "flex w-2/3 min-w-[600px] flex-col gap-2 rounded-2xl bg-white p-4",
-              "border border-gray-200 shadow-[0px_4px_20px_8px_rgba(17,17,17,0.04)]",
-              "focus-within:border-gray-300 focus-within:shadow-[0px_4px_20px_8px_rgba(17,17,17,0.08)]",
-            )}
-          >
-            <ScrollTextarea
-              ref={textareaRef}
-              value={inputValue}
-              onInput={handleInputChange}
-              placeholder="You can inquire and analyze the trend of NVIDIA in the next three months"
-              maxHeight={120}
-              minHeight={24}
-            />
-            <Button
-              size="icon"
-              className="size-8 cursor-pointer self-end rounded-full"
-              onClick={handleSendMessage}
-            >
-              <ArrowUp size={16} className="text-white" />
-            </Button>
-          </div>
-        </div>
+      {/* Main content area */}
+      <main className="relative flex flex-1 flex-col">
+        {messages.length === 0 ? (
+          <>
+            {/* Background blur effects for welcome screen */}
+            <ChatBackground />
+
+            {/* Welcome content */}
+            <div className="flex flex-1 flex-col items-center justify-center gap-4">
+              <h1 className="text-center font-semibold text-2xl text-gray-950 leading-12">
+                Welcome to AI hedge fund agent！
+              </h1>
+
+              {/* Input card */}
+              <div
+                className={cn(
+                  "flex w-2/3 min-w-[600px] flex-col gap-2 rounded-2xl bg-white p-4",
+                  "border border-gray-200 shadow-[0px_4px_20px_8px_rgba(17,17,17,0.04)]",
+                  "focus-within:border-gray-300 focus-within:shadow-[0px_4px_20px_8px_rgba(17,17,17,0.08)]",
+                )}
+              >
+                <ScrollTextarea
+                  ref={textareaRef}
+                  value={inputValue}
+                  onInput={handleInputChange}
+                  onKeyDown={handleKeyDown}
+                  placeholder="You can inquire and analyze the trend of NVIDIA in the next three months"
+                  maxHeight={120}
+                  minHeight={24}
+                  disabled={isStreaming}
+                />
+                <Button
+                  size="icon"
+                  className="size-8 cursor-pointer self-end rounded-full"
+                  onClick={handleSendMessage}
+                  disabled={isStreaming || !inputValue.trim()}
+                >
+                  <ArrowUp size={16} className="text-white" />
+                </Button>
+              </div>
+
+              {/* Connection status */}
+              {sseError && (
+                <div className="flex items-center gap-2 text-red-600 text-sm">
+                  <span>⚠️ Connection error: {sseError.message}</span>
+                </div>
+              )}
+
+              {/* User input required prompt */}
+              {userInputRequired && (
+                <div className="flex items-center gap-2 rounded-lg border border-yellow-200 bg-yellow-50 p-3 text-sm text-yellow-800">
+                  <AlertTriangle size={16} className="text-yellow-600" />
+                  <span>{userInputRequired}</span>
+                </div>
+              )}
+            </div>
+          </>
+        ) : (
+          <>
+            {/* Chat messages */}
+            <div className="flex-1 space-y-6 overflow-y-auto p-6">
+              {messages.map((message) => (
+                <div
+                  key={message.id}
+                  className={cn(
+                    "flex gap-4",
+                    message.type === MESSAGE_TYPE.USER
+                      ? "justify-end"
+                      : "justify-start",
+                  )}
+                >
+                  {(message.type === MESSAGE_TYPE.ASSISTANT ||
+                    message.type === MESSAGE_TYPE.COMPONENT ||
+                    message.type === MESSAGE_TYPE.ERROR) && (
+                    <div className="size-8 flex-shrink-0">
+                      <div
+                        className={cn(
+                          "flex size-8 items-center justify-center rounded-full",
+                          message.type === MESSAGE_TYPE.ERROR
+                            ? "bg-gradient-to-br from-red-500 to-red-600"
+                            : "bg-gradient-to-br from-blue-500 to-purple-600",
+                        )}
+                      >
+                        {message.type === MESSAGE_TYPE.ERROR ? (
+                          <AlertTriangle size={16} className="text-white" />
+                        ) : (
+                          <Bot size={16} className="text-white" />
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  <div
+                    className={cn(
+                      "max-w-[80%] rounded-2xl px-4 py-3",
+                      message.type === MESSAGE_TYPE.USER
+                        ? "ml-auto bg-blue-600 text-white"
+                        : message.type === MESSAGE_TYPE.ERROR
+                          ? "bg-red-100 text-red-900"
+                          : "bg-gray-100 text-gray-900",
+                    )}
+                  >
+                    {/* Message content */}
+                    {message.type !== MESSAGE_TYPE.COMPONENT && (
+                      <div className="whitespace-pre-wrap break-words">
+                        {message.content}
+                        {!message.isComplete &&
+                          message.type === MESSAGE_TYPE.ASSISTANT && (
+                            <span className="ml-1 inline-block h-5 w-2 animate-pulse bg-gray-400" />
+                          )}
+                      </div>
+                    )}
+
+                    {/* Generated component */}
+                    {message.component && renderComponent(message.component)}
+
+                    {/* Tool calls */}
+                    {message.toolCalls && message.toolCalls.length > 0 && (
+                      <div className="mt-3 space-y-2">
+                        {message.toolCalls.map((toolCall) => (
+                          <div
+                            key={toolCall.id}
+                            className="flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 p-2"
+                          >
+                            {toolCall.status === TOOL_CALL_STATUS.STARTED ? (
+                              <Clock
+                                size={14}
+                                className="animate-pulse text-blue-600"
+                              />
+                            ) : (
+                              <CheckCircle
+                                size={14}
+                                className="text-green-600"
+                              />
+                            )}
+                            <span className="font-medium text-blue-900 text-sm">
+                              {toolCall.name}
+                            </span>
+                            {toolCall.status === TOOL_CALL_STATUS.STARTED && (
+                              <span className="text-blue-600 text-xs">
+                                Running...
+                              </span>
+                            )}
+                            {toolCall.result && (
+                              <span className="truncate text-gray-600 text-xs">
+                                {toolCall.result.substring(0, 50)}...
+                              </span>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+
+                    {/* Reasoning */}
+                    {message.reasoning && (
+                      <div className="mt-3 rounded-lg border border-yellow-200 bg-yellow-50 p-2">
+                        <div className="mb-1 flex items-center gap-2">
+                          <Zap size={14} className="text-yellow-600" />
+                          <span className="font-medium text-sm text-yellow-900">
+                            Reasoning
+                          </span>
+                        </div>
+                        <p className="text-sm text-yellow-800">
+                          {message.reasoning}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+
+                  {message.type === MESSAGE_TYPE.USER && (
+                    <div className="size-8 flex-shrink-0">
+                      <div className="flex size-8 items-center justify-center rounded-full bg-gray-600">
+                        <User size={16} className="text-white" />
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))}
+
+              {/* Streaming indicator */}
+              {isStreaming && (
+                <div className="flex items-center gap-2 text-gray-500 text-sm">
+                  <div className="flex space-x-1">
+                    <div
+                      className="h-2 w-2 animate-bounce rounded-full bg-gray-400"
+                      style={{ animationDelay: "0ms" }}
+                    />
+                    <div
+                      className="h-2 w-2 animate-bounce rounded-full bg-gray-400"
+                      style={{ animationDelay: "150ms" }}
+                    />
+                    <div
+                      className="h-2 w-2 animate-bounce rounded-full bg-gray-400"
+                      style={{ animationDelay: "300ms" }}
+                    />
+                  </div>
+                  <span>AI is thinking...</span>
+                </div>
+              )}
+            </div>
+
+            {/* Input area at bottom */}
+            <div className="border-gray-200 border-t p-4">
+              <div
+                className={cn(
+                  "flex w-full flex-col gap-2 rounded-2xl bg-white p-4",
+                  "border border-gray-200 shadow-[0px_4px_20px_8px_rgba(17,17,17,0.04)]",
+                  "focus-within:border-gray-300 focus-within:shadow-[0px_4px_20px_8px_rgba(17,17,17,0.08)]",
+                )}
+              >
+                <ScrollTextarea
+                  ref={textareaRef}
+                  value={inputValue}
+                  onInput={handleInputChange}
+                  onKeyDown={handleKeyDown}
+                  placeholder={
+                    userInputRequired
+                      ? "Agent is waiting for your response..."
+                      : "Type your message..."
+                  }
+                  maxHeight={120}
+                  minHeight={24}
+                  disabled={isStreaming}
+                />
+                <Button
+                  size="icon"
+                  className="size-8 cursor-pointer self-end rounded-full"
+                  onClick={handleSendMessage}
+                  disabled={isStreaming || !inputValue.trim()}
+                >
+                  <ArrowUp size={16} className="text-white" />
+                </Button>
+              </div>
+
+              {/* Status indicators */}
+              <div className="mt-2 flex items-center justify-between text-gray-500 text-xs">
+                <div className="flex items-center gap-4">
+                  <span
+                    className={cn(
+                      "flex items-center gap-1",
+                      isStreaming
+                        ? "text-green-600"
+                        : userInputRequired
+                          ? "text-yellow-600"
+                          : isConnecting
+                            ? "text-blue-600"
+                            : isConnected
+                              ? "text-green-600"
+                              : "text-red-600",
+                    )}
+                  >
+                    <div
+                      className={cn(
+                        "h-2 w-2 rounded-full",
+                        isStreaming
+                          ? "bg-green-500"
+                          : userInputRequired
+                            ? "animate-pulse bg-yellow-500"
+                            : isConnecting
+                              ? "animate-pulse bg-blue-500"
+                              : isConnected
+                                ? "bg-green-500"
+                                : "bg-red-500",
+                      )}
+                    />
+                    <span className="text-xs">
+                      {isStreaming
+                        ? "Streaming"
+                        : userInputRequired
+                          ? "Waiting for input"
+                          : isConnecting
+                            ? "Connecting"
+                            : isConnected
+                              ? "Ready"
+                              : "Disconnected"}
+                    </span>
+                  </span>
+                  {conversationId && <span>Session: {conversationId}</span>}
+                  {currentThreadId && <span>Thread: {currentThreadId}</span>}
+                </div>
+                <span>Press Enter to send, Shift+Enter for new line</span>
+              </div>
+
+              {sseError && (
+                <div className="mt-2 rounded border border-red-200 bg-red-50 p-2 text-red-600 text-sm">
+                  Error: {sseError.message}
+                </div>
+              )}
+            </div>
+          </>
+        )}
       </main>
     </div>
   );
diff --git a/frontend/src/app/agent/components/chat-background.tsx b/frontend/src/app/agent/components/chat-background.tsx
new file mode 100644
index 000000000..12ea8761e
--- /dev/null
+++ b/frontend/src/app/agent/components/chat-background.tsx
@@ -0,0 +1,44 @@
+function ChatBackground() {
+  return (
+    <div className="-z-10 absolute inset-0 overflow-hidden opacity-30">
+      {[
+        {
+          position: "left-0",
+          size: "h-80 w-96",
+          colors: "from-orange-200 to-orange-300",
+        },
+        {
+          position: "left-56",
+          size: "h-80 w-96",
+          colors: "from-yellow-200 to-yellow-300",
+        },
+        {
+          position: "left-96",
+          size: "h-72 w-72",
+          colors: "from-green-200 to-green-300",
+        },
+        {
+          position: "right-56",
+          size: "h-80 w-96",
+          colors: "from-blue-200 to-blue-300",
+        },
+        {
+          position: "right-0",
+          size: "h-72 w-72",
+          colors: "from-purple-200 to-purple-300",
+        },
+      ].map((blur, index) => (
+        <div
+          key={`${blur.position}-${index}`}
+          className={`absolute top-1/2 ${blur.position} ${blur.size} -translate-y-1/2 transform`}
+        >
+          <div
+            className={`h-full w-full rounded-full bg-gradient-to-br ${blur.colors} blur-[100px]`}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default ChatBackground;
diff --git a/frontend/src/app/agent/components/index.tsx b/frontend/src/app/agent/components/index.tsx
new file mode 100644
index 000000000..741e24e95
--- /dev/null
+++ b/frontend/src/app/agent/components/index.tsx
@@ -0,0 +1 @@
+export { default as ChatBackground } from "./chat-background";
\ No newline at end of file
diff --git a/frontend/src/hooks/use-sse.ts b/frontend/src/hooks/use-sse.ts
new file mode 100644
index 000000000..ea82a23d6
--- /dev/null
+++ b/frontend/src/hooks/use-sse.ts
@@ -0,0 +1,197 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import SSEClient, {
+  type SSEEventHandlers,
+  type SSEOptions,
+  SSEReadyState,
+} from "@/lib/sse-client";
+
+export interface UseSSEOptions<TEventMap = Record<string, unknown>> {
+  /** SSE connection options */
+  options: SSEOptions;
+  /** Event handlers */
+  handlers?: SSEEventHandlers<TEventMap>;
+  /** Whether to auto-connect on mount */
+  autoConnect?: boolean;
+  /** Request body for POST requests */
+  body?: BodyInit;
+}
+
+export interface UseSSEReturn<TEventMap = Record<string, unknown>> {
+  /** Current connection state */
+  state: SSEReadyState;
+  /** Whether the connection is open */
+  isConnected: boolean;
+  /** Whether the connection is connecting */
+  isConnecting: boolean;
+  /** Number of reconnection attempts */
+  reconnectAttempts: number;
+  /** Current error, if any */
+  error: Error | null;
+  /** Connect to the SSE endpoint */
+  connect: (body?: BodyInit) => Promise<void>;
+  /** Close the SSE connection */
+  close: () => void;
+  /** Update event handlers */
+  setEventHandlers: (handlers: SSEEventHandlers<TEventMap>) => void;
+  /** SSE client instance for advanced usage */
+  client: SSEClient<TEventMap> | null;
+}
+
+/**
+ * React hook for Server-Sent Events (SSE) using fetch-based SSEClient
+ *
+ * @example
+ * ```tsx
+ * interface ChatEventMap {
+ *   message_chunk: { content: string; messageId: number };
+ *   done: { messageId: number };
+ * }
+ *
+ * function ChatComponent() {
+ *   const { connect, close, isConnected, error } = useSSE<ChatEventMap>({
+ *     options: {
+ *       url: '/api/chat/stream',
+ *       headers: { 'Authorization': 'Bearer token' }
+ *     },
+ *     handlers: {
+ *       onEvent: (eventType, data) => {
+ *         if (eventType === 'message_chunk') {
+ *           console.log('New chunk:', data.content);
+ *         }
+ *       },
+ *       onError: (error) => console.error('SSE Error:', error)
+ *     },
+ *     autoConnect: true,
+ *     body: JSON.stringify({ conversationId: 123 })
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <p>Status: {isConnected ? 'Connected' : 'Disconnected'}</p>
+ *       {error && <p>Error: {error.message}</p>}
+ *       <button onClick={() => connect()}>Connect</button>
+ *       <button onClick={close}>Disconnect</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useSSE<TEventMap = Record<string, unknown>>({
+  options,
+  handlers,
+  autoConnect = false,
+  body,
+}: UseSSEOptions<TEventMap>): UseSSEReturn<TEventMap> {
+  const [error, setError] = useState<Error | null>(null);
+
+  const clientRef = useRef<SSEClient<TEventMap> | null>(null);
+  const handlersRef = useRef<SSEEventHandlers<TEventMap>>(handlers || {});
+  const bodyRef = useRef<BodyInit | undefined>(body);
+
+  // Force re-render when client state changes
+  const [, setForceUpdate] = useState({});
+  const triggerUpdate = useCallback(() => setForceUpdate({}), []);
+
+  // Update refs when props change
+  useEffect(() => {
+    handlersRef.current = handlers || {};
+  }, [handlers]);
+
+  useEffect(() => {
+    bodyRef.current = body;
+  }, [body]);
+
+  // Create internal handlers that combine state updates with user handlers
+  const createInternalHandlers = useCallback(
+    (): SSEEventHandlers<TEventMap> => ({
+      onEvent: (eventType, data) => {
+        handlersRef.current.onEvent?.(eventType, data);
+      },
+      onOpen: () => {
+        setError(null);
+        triggerUpdate();
+        handlersRef.current.onOpen?.();
+      },
+      onError: (err) => {
+        setError(err);
+        triggerUpdate();
+        handlersRef.current.onError?.(err);
+      },
+      onClose: () => {
+        triggerUpdate();
+        handlersRef.current.onClose?.();
+      },
+      onReconnect: (attempt) => {
+        triggerUpdate();
+        handlersRef.current.onReconnect?.(attempt);
+      },
+    }),
+    [triggerUpdate],
+  );
+
+  // Initialize client
+  useEffect(() => {
+    const client = new SSEClient<TEventMap>(options);
+    clientRef.current = client;
+
+    client.setEventHandlers(createInternalHandlers());
+
+    // Auto-connect if enabled
+    if (autoConnect) {
+      client.connect(bodyRef.current).catch((err) => {
+        console.error("Auto-connect failed:", err);
+      });
+    }
+
+    return () => {
+      client.destroy();
+    };
+  }, [options, autoConnect, createInternalHandlers]); // options object dependency for proper recreation
+
+  const connect = useCallback(async (connectBody?: BodyInit) => {
+    if (!clientRef.current) return;
+
+    setError(null);
+    try {
+      await clientRef.current.connect(connectBody ?? bodyRef.current);
+    } catch (err) {
+      setError(err as Error);
+      throw err;
+    }
+  }, []);
+
+  const close = useCallback(() => {
+    if (clientRef.current) {
+      clientRef.current.close();
+    }
+  }, []);
+
+  const setEventHandlers = useCallback(
+    (newHandlers: SSEEventHandlers<TEventMap>) => {
+      handlersRef.current = { ...handlersRef.current, ...newHandlers };
+
+      if (clientRef.current) {
+        clientRef.current.setEventHandlers(createInternalHandlers());
+      }
+    },
+    [createInternalHandlers],
+  );
+
+  // Get current state from client, not duplicate state
+  const currentState = clientRef.current?.state ?? SSEReadyState.CLOSED;
+  const currentReconnectAttempts = clientRef.current?.reconnectAttempts ?? 0;
+
+  return {
+    state: currentState,
+    isConnected: currentState === SSEReadyState.OPEN,
+    isConnecting: currentState === SSEReadyState.CONNECTING,
+    reconnectAttempts: currentReconnectAttempts,
+    error,
+    connect,
+    close,
+    setEventHandlers,
+    client: clientRef.current,
+  };
+}
+
+export default useSSE;
diff --git a/frontend/src/lib/sse-client.ts b/frontend/src/lib/sse-client.ts
index d11ef44fd..fc2fdfd1c 100644
--- a/frontend/src/lib/sse-client.ts
+++ b/frontend/src/lib/sse-client.ts
@@ -17,7 +17,7 @@ export interface SSEOptions {
   /** Connection timeout in milliseconds */
   timeout?: number;
   /** Additional fetch request options */
-  fetchOptions?: Omit<RequestInit, "headers" | "signal">;
+  fetchOptions?: Omit<RequestInit, "method" | "body" | "headers" | "signal">;
 }
 
 export interface SSEEventHandlers<TEventMap = Record<string, unknown>> {
@@ -44,6 +44,7 @@ export enum SSEReadyState {
 
 export class SSEClient<TEventMap = Record<string, unknown>> {
   private options: Required<SSEOptions>;
+  private currentBody?: BodyInit;
   private handlers: SSEEventHandlers<TEventMap> = {};
   private reconnectCount = 0;
   private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
@@ -74,11 +75,12 @@ export class SSEClient<TEventMap = Record<string, unknown>> {
   /**
    * Connect to the SSE endpoint
    */
-  async connect(): Promise<void> {
+  async connect(body?: BodyInit): Promise<void> {
     if (this.readyState !== SSEReadyState.CLOSED) {
       return;
     }
 
+    this.currentBody = body;
     this.isManualClose = false;
     this.readyState = SSEReadyState.CONNECTING;
     this.abortController = new AbortController();
@@ -101,7 +103,8 @@ export class SSEClient<TEventMap = Record<string, unknown>> {
 
     try {
       const response = await fetch(this.options.url, {
-        method: "GET",
+        method: "POST",
+        body: this.currentBody,
         signal: this.abortController?.signal,
         ...this.options.fetchOptions,
         headers: {
@@ -213,8 +216,6 @@ export class SSEClient<TEventMap = Record<string, unknown>> {
     for (const line of lines) {
       if (line.startsWith("data:")) {
         data += `${line.slice(5).trim()}\n`;
-      } else if (line.startsWith("id:")) {
-        // Skip id for now as it's not used in our event handling
       } else if (line.startsWith("event:")) {
         event = line.slice(6).trim();
       }
@@ -260,7 +261,7 @@ export class SSEClient<TEventMap = Record<string, unknown>> {
     this.reconnectTimer = setTimeout(() => {
       this.reconnectTimer = null;
       console.log(`SSE reconnecting... (attempt ${this.reconnectCount})`);
-      this.connect().catch((error) => {
+      this.connect(this.currentBody).catch((error) => {
         console.error("Reconnection failed:", error);
       });
     }, this.options.reconnectInterval);
@@ -458,8 +459,14 @@ function markMessageComplete(messageId: number) {
   console.log(`Message ${messageId} is complete`);
 }
 
-// Connect to stream
-await client.connect();
+// Connect to stream with POST body
+const requestBody = JSON.stringify({
+  message: 'Hello, how can you help me?',
+  conversation_id: 123,
+  // Add any other POST data you need
+});
+
+await client.connect(requestBody);
 
 // Check connection status
 console.log({
diff --git a/frontend/src/types/agent.ts b/frontend/src/types/agent.ts
new file mode 100644
index 000000000..028c27eb8
--- /dev/null
+++ b/frontend/src/types/agent.ts
@@ -0,0 +1,152 @@
+// Updated Agent SSE Event Map based on new API specification
+export interface AgentEventMap {
+  conversation_started: {
+    conversation_id: string;
+  };
+  message_chunk: {
+    data: {
+      content: string;
+    };
+    conversation_id: string;
+    thread_id: string;
+    task_id: string;
+    subtask_id: string;
+  };
+  message: {
+    data: {
+      content: string;
+    };
+    conversation_id: string;
+    thread_id: string;
+    task_id: string;
+    subtask_id: string;
+  };
+  component_generator: {
+    data: {
+      component_type: string;
+      content: string;
+    };
+    conversation_id: string;
+    thread_id: string;
+    task_id: string;
+    subtask_id: string;
+  };
+  plan_require_user_input: {
+    data: {
+      content: string;
+    };
+    conversation_id: string;
+    thread_id: string;
+  };
+  tool_call_started: {
+    data: {
+      tool_call_id: string;
+      tool_name: string;
+    };
+    conversation_id: string;
+    thread_id: string;
+    task_id: string;
+    subtask_id: string;
+  };
+  tool_call_completed: {
+    data: {
+      tool_call_id: string;
+      tool_name: string;
+      tool_call_result: string;
+    };
+    conversation_id: string;
+    thread_id: string;
+    task_id: string;
+    subtask_id: string;
+  };
+  reasoning: {
+    data: {
+      content: string;
+    };
+    conversation_id: string;
+    thread_id: string;
+    task_id: string;
+    subtask_id: string;
+  };
+  plan_failed: {
+    data: {
+      content: string;
+    };
+    conversation_id: string;
+    thread_id: string;
+  };
+  task_failed: {
+    data: {
+      content: string;
+    };
+    conversation_id: string;
+    thread_id: string;
+    task_id: string;
+    sub_task_id: string;
+  };
+  done: {
+    conversation_id: string;
+    thread_id: string;
+  };
+}
+
+// Updated constants
+export const TOOL_CALL_STATUS = {
+  STARTED: "started",
+  COMPLETED: "completed",
+} as const;
+
+export const MESSAGE_TYPE = {
+  USER: "user",
+  ASSISTANT: "assistant",
+  COMPONENT: "component",
+  ERROR: "error",
+} as const;
+
+export const COMPONENT_TYPE = {
+  REPORT: "report",
+  CHART: "chart",
+  TABLE: "table",
+  ANALYSIS: "analysis",
+} as const;
+
+export type ToolCallStatus =
+  (typeof TOOL_CALL_STATUS)[keyof typeof TOOL_CALL_STATUS];
+export type MessageType = (typeof MESSAGE_TYPE)[keyof typeof MESSAGE_TYPE];
+export type ComponentType =
+  (typeof COMPONENT_TYPE)[keyof typeof COMPONENT_TYPE];
+
+// Updated interfaces
+export interface ToolCall {
+  id: string;
+  name: string;
+  status: ToolCallStatus;
+  result?: string;
+  startTime: Date;
+  endTime?: Date;
+}
+
+export interface GeneratedComponent {
+  type: ComponentType;
+  content: string;
+}
+
+export interface ChatMessage {
+  id: string;
+  content: string;
+  type: MessageType;
+  isComplete: boolean;
+  toolCalls?: ToolCall[];
+  reasoning?: string;
+  component?: GeneratedComponent;
+  threadId?: string;
+  taskId?: string;
+  subtaskId?: string;
+}
+
+export interface AgentStreamRequest {
+  query: string;
+  agent_name: string;
+  conversation_id?: string;
+  thread_id?: string;
+}

From ad9fe6dd2c551ce142aeff93744d29e81c8b11e9 Mon Sep 17 00:00:00 2001
From: DigHuang <114602213+DigHuang@users.noreply.github.com>
Date: Tue, 23 Sep 2025 15:27:52 +0800
Subject: [PATCH 06/13] refactor: SSE event handling and agent types

Unified SSE event handling to use a single onData callback with a typed SSEData wrapper. Refactored agent event types for clarity and type safety, updated chat message structure, and simplified component and tool call rendering logic. Improves maintainability and extensibility for agent chat and SSE integration.
---
 frontend/src/app/agent/chat.tsx          | 316 ++++++++++++++---------
 frontend/src/hooks/use-sse.ts            |  74 +++---
 frontend/src/lib/sse-client.ts           | 214 ++++++++-------
 frontend/src/types/agent.ts              | 213 ++++++---------
 python/third_party/ai-hedge-fund/uv.lock | 257 ++++++++++++++++++
 5 files changed, 687 insertions(+), 387 deletions(-)

diff --git a/frontend/src/app/agent/chat.tsx b/frontend/src/app/agent/chat.tsx
index 95855628e..0f058b658 100644
--- a/frontend/src/app/agent/chat.tsx
+++ b/frontend/src/app/agent/chat.tsx
@@ -13,7 +13,7 @@ import {
   User,
   Zap,
 } from "lucide-react";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Navigate, useParams } from "react-router";
 import { Button } from "@/components/ui/button";
 import ScrollTextarea, {
@@ -22,33 +22,49 @@ import ScrollTextarea, {
 import { useSSE } from "@/hooks/use-sse";
 import { cn } from "@/lib/utils";
 import { agentData } from "@/mock/agent-data";
-import type {
-  AgentEventMap,
-  AgentStreamRequest,
-  ChatMessage,
-  GeneratedComponent,
-} from "@/types/agent";
-import {
-  COMPONENT_TYPE,
-  type ComponentType,
-  MESSAGE_TYPE,
-  TOOL_CALL_STATUS,
-} from "@/types/agent";
+import type { AgentEventMap, AgentStreamRequest, SSEData } from "@/types/agent";
 import type { Route } from "./+types/chat";
 import { ChatBackground } from "./components";
 
+// Extended chat message type with all possible fields
+type ExtendedChatMessage = {
+  id: string;
+  role: "user" | "system" | "agent";
+  isComplete: boolean;
+  // Base event fields (optional because user messages may not have them)
+  conversation_id?: string;
+  thread_id?: string;
+  task_id?: string;
+  subtask_id?: string;
+  // Content payload
+  payload?: { content: string; [key: string]: unknown };
+  // UI extension fields
+  component?: { type: string; content: string };
+  toolCalls?: Array<{
+    id: string;
+    name: string;
+    status: "started" | "completed";
+    result?: string;
+    startTime: Date;
+    endTime?: Date;
+  }>;
+  reasoning?: string;
+};
+
 export default function AgentChat() {
   const { agentId } = useParams<Route.LoaderArgs["params"]>();
   const textareaRef = useRef<ScrollTextareaRef>(null);
   const [inputValue, setInputValue] = useState("");
 
   // Simplified chat state - only essential state
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [messages, setMessages] = useState<ExtendedChatMessage[]>([]);
   const [conversationId, setConversationId] = useState<string | null>(null);
   const [currentThreadId, setCurrentThreadId] = useState<string | null>(null);
   const [userInputRequired, setUserInputRequired] = useState<string | null>(
     null,
   );
+  const [isSending, setIsSending] = useState(false); // Prevent duplicate sends
+  const [shouldClose, setShouldClose] = useState(false);
 
   // Optimized message update helper
   const updateOrCreateMessage = useCallback(
@@ -68,23 +84,28 @@ export default function AgentChat() {
         );
 
         if (messageIndex >= 0) {
+          const existingMessage = updatedMessages[messageIndex];
+          const existingContent = existingMessage.payload?.content || "";
+
           updatedMessages[messageIndex] = {
-            ...updatedMessages[messageIndex],
-            content: isAppend
-              ? updatedMessages[messageIndex].content + content
-              : content,
+            ...existingMessage,
+            payload: {
+              ...existingMessage.payload,
+              content: isAppend ? existingContent + content : content,
+            },
             isComplete,
           };
         } else {
           updatedMessages.push({
             id: messageId,
-            content,
-            type: MESSAGE_TYPE.ASSISTANT,
+            role: "agent",
             isComplete,
-            threadId,
-            taskId,
-            subtaskId,
-          });
+            conversation_id: "",
+            thread_id: threadId || "",
+            task_id: taskId || "",
+            subtask_id: subtaskId || "",
+            payload: { content },
+          } as ExtendedChatMessage);
         }
 
         return updatedMessages;
@@ -95,22 +116,25 @@ export default function AgentChat() {
     [],
   );
 
-  // Handle SSE events with automatic type inference
-  const handleSSEEvent = useCallback(
-    <T extends keyof AgentEventMap>(eventType: T, data: AgentEventMap[T]) => {
-      switch (eventType) {
+  // Handle SSE data events
+  const handleSSEData = useCallback(
+    (sseData: SSEData) => {
+      const { event, data } = sseData;
+
+      switch (event) {
         case "conversation_started": {
-          const payload = data as AgentEventMap["conversation_started"];
+          const payload =
+            data as unknown as AgentEventMap["conversation_started"];
           setConversationId(payload.conversation_id);
           break;
         }
 
         case "message_chunk": {
-          const payload = data as AgentEventMap["message_chunk"];
+          const payload = data as unknown as AgentEventMap["message_chunk"];
           const messageId = `${payload.conversation_id}-${payload.thread_id}`;
           updateOrCreateMessage(
             messageId,
-            payload.data.content,
+            payload.payload.content,
             false,
             payload.thread_id,
             payload.task_id,
@@ -121,11 +145,11 @@ export default function AgentChat() {
         }
 
         case "message": {
-          const payload = data as AgentEventMap["message"];
+          const payload = data as unknown as AgentEventMap["message"];
           const messageId = `${payload.conversation_id}-${payload.thread_id}`;
           updateOrCreateMessage(
             messageId,
-            payload.data.content,
+            payload.payload.content,
             true,
             payload.thread_id,
             payload.task_id,
@@ -136,18 +160,20 @@ export default function AgentChat() {
         }
 
         case "component_generator": {
-          const payload = data as AgentEventMap["component_generator"];
-          const componentMessage: ChatMessage = {
+          const payload =
+            data as unknown as AgentEventMap["component_generator"];
+          const componentMessage: ExtendedChatMessage = {
             id: `component-${payload.conversation_id}-${payload.thread_id}-${Date.now()}`,
-            content: "",
-            type: MESSAGE_TYPE.COMPONENT,
+            role: "agent",
             isComplete: true,
-            threadId: payload.thread_id,
-            taskId: payload.task_id,
-            subtaskId: payload.subtask_id,
+            conversation_id: payload.conversation_id,
+            thread_id: payload.thread_id,
+            task_id: payload.task_id,
+            subtask_id: payload.subtask_id,
+            payload: payload.payload,
             component: {
-              type: payload.data.component_type as ComponentType,
-              content: payload.data.content,
+              type: payload.payload.component_type,
+              content: payload.payload.content,
             },
           };
 
@@ -156,18 +182,19 @@ export default function AgentChat() {
         }
 
         case "plan_require_user_input": {
-          const payload = data as AgentEventMap["plan_require_user_input"];
-          setUserInputRequired(payload.data.content);
+          const payload =
+            data as unknown as AgentEventMap["plan_require_user_input"];
+          setUserInputRequired(payload.payload.content);
           break;
         }
 
         case "tool_call_started":
         case "tool_call_completed": {
-          const payload = data as
+          const payload = data as unknown as
             | AgentEventMap["tool_call_started"]
             | AgentEventMap["tool_call_completed"];
           const messageId = `${payload.conversation_id}-${payload.thread_id}`;
-          const isCompleted = eventType === "tool_call_completed";
+          const isCompleted = event === "tool_call_completed";
 
           setMessages((prevMessages) => {
             const updatedMessages = [...prevMessages];
@@ -179,19 +206,19 @@ export default function AgentChat() {
               const message = updatedMessages[messageIndex];
               const toolCalls = [...(message.toolCalls || [])];
               const toolCallIndex = toolCalls.findIndex(
-                (tc) => tc.id === payload.data.tool_call_id,
+                (tc) => tc.id === payload.payload.tool_call_id,
               );
 
               const toolCallData = {
-                id: payload.data.tool_call_id,
-                name: payload.data.tool_name,
+                id: payload.payload.tool_call_id,
+                name: payload.payload.tool_name,
                 status: isCompleted
-                  ? TOOL_CALL_STATUS.COMPLETED
-                  : TOOL_CALL_STATUS.STARTED,
+                  ? ("completed" as const)
+                  : ("started" as const),
                 startTime: new Date(),
                 ...(isCompleted && {
-                  result: (payload as AgentEventMap["tool_call_completed"]).data
-                    .tool_call_result,
+                  result: (payload as AgentEventMap["tool_call_completed"])
+                    .payload.tool_call_result,
                   endTime: new Date(),
                 }),
               };
@@ -214,7 +241,7 @@ export default function AgentChat() {
         }
 
         case "reasoning": {
-          const payload = data as AgentEventMap["reasoning"];
+          const payload = data as unknown as AgentEventMap["reasoning"];
           const messageId = `${payload.conversation_id}-${payload.thread_id}`;
 
           setMessages((prevMessages) => {
@@ -226,7 +253,7 @@ export default function AgentChat() {
             if (messageIndex >= 0) {
               updatedMessages[messageIndex] = {
                 ...updatedMessages[messageIndex],
-                reasoning: payload.data.content,
+                reasoning: payload.payload.content,
               };
             }
 
@@ -237,15 +264,20 @@ export default function AgentChat() {
 
         case "plan_failed":
         case "task_failed": {
-          const payload = data as
+          const payload = data as unknown as
             | AgentEventMap["plan_failed"]
             | AgentEventMap["task_failed"];
-          const errorMessage: ChatMessage = {
+          const errorMessage: ExtendedChatMessage = {
             id: `error-${payload.conversation_id}-${payload.thread_id}-${Date.now()}`,
-            content: payload.data.content,
-            type: MESSAGE_TYPE.ERROR,
+            role: "system",
             isComplete: true,
-            threadId: payload.thread_id,
+            conversation_id: payload.conversation_id,
+            thread_id: payload.thread_id,
+            ...(event === "task_failed" && {
+              task_id: (payload as AgentEventMap["task_failed"]).task_id,
+              subtask_id: (payload as AgentEventMap["task_failed"]).subtask_id,
+            }),
+            payload: payload.payload,
           };
 
           setMessages((prev) => [...prev, errorMessage]);
@@ -253,9 +285,10 @@ export default function AgentChat() {
         }
 
         case "done": {
-          const payload = data as AgentEventMap["done"];
+          const payload = data as unknown as AgentEventMap["done"];
           setUserInputRequired(null);
           setCurrentThreadId(payload.thread_id);
+          setShouldClose(true);
           break;
         }
       }
@@ -263,60 +296,90 @@ export default function AgentChat() {
     [updateOrCreateMessage],
   );
 
-  // Initialize SSE connection using the useSSE hook
-  const {
-    connect,
-    isConnected,
-    isConnecting,
-    error: sseError,
-  } = useSSE<AgentEventMap>({
-    options: {
-      url: "http://localhost:8001/api/v1/agents/stream",
+  // Stabilize SSE options to avoid infinite reconnects
+  const sseOptions = useMemo(
+    () => ({
+      url: "http://localhost:8000/api/v1/agents/stream",
       headers: {
         "Content-Type": "application/json",
       },
-      autoReconnect: true,
-      reconnectInterval: 3000,
-      maxReconnectAttempts: 5,
-      timeout: 30000,
-    },
-    handlers: {
-      onEvent: handleSSEEvent,
+      autoReconnect: false,
+      reconnectInterval: 5000,
+      maxReconnectAttempts: 3,
+      timeout: 60000, // Increase timeout to 60s
+    }),
+    [],
+  );
+
+  const sseHandlers = useMemo(
+    () => ({
+      onData: handleSSEData,
       onOpen: () => {
         console.log("SSE connection opened");
+        setIsSending(false); // Reset sending state on open
       },
-      onError: (error) => {
+      onError: (error: Error) => {
         console.error("SSE connection error:", error);
+        setIsSending(false); // Reset sending state on error
       },
       onClose: () => {
         console.log("SSE connection closed");
+        setIsSending(false); // Reset sending state on close
       },
-      onReconnect: (attempt) => {
-        console.log(`Reconnecting to agent stream (attempt ${attempt})`);
-      },
-    },
+    }),
+    [handleSSEData],
+  );
+
+  // Initialize SSE connection using the useSSE hook
+  const {
+    connect,
+    close,
+    isConnected,
+    isConnecting,
+    error: sseError,
+  } = useSSE({
+    options: sseOptions,
+    handlers: sseHandlers,
   });
 
+  useEffect(() => {
+    if (shouldClose) {
+      close();
+      setShouldClose(false);
+    }
+  }, [shouldClose, close]);
+
   // Derived state - compute from existing state instead of maintaining separately
   const isStreaming = isConnected && !userInputRequired;
 
   // Send message to agent
   const sendMessage = useCallback(
     async (message: string) => {
-      const userMessage: ChatMessage = {
-        id: `user-${Date.now()}`,
-        content: message,
-        type: MESSAGE_TYPE.USER,
-        isComplete: true,
-      };
+      // Prevent duplicate sends
+      if (isSending || isConnecting) {
+        console.log(
+          "Already sending or connecting, ignoring duplicate request",
+        );
+        return;
+      }
 
-      setMessages((prev) => [...prev, userMessage]);
-      setUserInputRequired(null);
+      setIsSending(true);
 
       try {
+        const userMessage: ExtendedChatMessage = {
+          id: `user-${Date.now()}`,
+          role: "user",
+          isComplete: true,
+          // Special structure for user message
+          payload: { content: message },
+        } as ExtendedChatMessage;
+
+        setMessages((prev) => [...prev, userMessage]);
+        setUserInputRequired(null);
+
         const request: AgentStreamRequest = {
           query: message,
-          agent_name: "SecAgent", // You can make this dynamic based on the agent
+          agent_name: "WarrenBuffettAgent", // You can make this dynamic based on the agent
           conversation_id: conversationId || undefined,
           thread_id: currentThreadId || undefined,
         };
@@ -325,9 +388,10 @@ export default function AgentChat() {
         await connect(JSON.stringify(request));
       } catch (error) {
         console.error("Failed to send message:", error);
+        setIsSending(false); // Reset immediately on error
       }
     },
-    [conversationId, currentThreadId, connect],
+    [conversationId, currentThreadId, connect, isSending, isConnecting],
   );
 
   // Handle user input for plan_require_user_input events
@@ -340,7 +404,11 @@ export default function AgentChat() {
 
   const handleSendMessage = useCallback(() => {
     const trimmedInput = inputValue.trim();
-    if (!trimmedInput || isConnecting) return;
+    // Prevent sending while connecting/sending or when input is empty
+    if (!trimmedInput || isConnecting || isSending) {
+      console.log("Cannot send: empty input, connecting, or already sending");
+      return;
+    }
 
     const messageHandler = userInputRequired
       ? handleUserInputResponse
@@ -351,6 +419,7 @@ export default function AgentChat() {
   }, [
     inputValue,
     isConnecting,
+    isSending,
     userInputRequired,
     handleUserInputResponse,
     sendMessage,
@@ -359,24 +428,20 @@ export default function AgentChat() {
   // Optimized component icon mapping
   const componentIcons = useMemo(
     () => ({
-      [COMPONENT_TYPE.REPORT]: <FileText size={16} className="text-blue-600" />,
-      [COMPONENT_TYPE.CHART]: (
-        <BarChart3 size={16} className="text-green-600" />
-      ),
-      [COMPONENT_TYPE.TABLE]: <Table size={16} className="text-purple-600" />,
-      [COMPONENT_TYPE.ANALYSIS]: (
-        <Brain size={16} className="text-orange-600" />
-      ),
+      report: <FileText size={16} className="text-blue-600" />,
+      chart: <BarChart3 size={16} className="text-green-600" />,
+      table: <Table size={16} className="text-purple-600" />,
+      analysis: <Brain size={16} className="text-orange-600" />,
     }),
     [],
   );
 
   // Optimized component renderer
   const renderComponent = useCallback(
-    (component: GeneratedComponent) => {
-      const icon = componentIcons[component.type] || (
-        <FileText size={16} className="text-gray-600" />
-      );
+    (component: { type: string; content: string }) => {
+      const icon = componentIcons[
+        component.type as keyof typeof componentIcons
+      ] || <FileText size={16} className="text-gray-600" />;
 
       return (
         <div className="mt-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
@@ -503,13 +568,13 @@ export default function AgentChat() {
                   placeholder="You can inquire and analyze the trend of NVIDIA in the next three months"
                   maxHeight={120}
                   minHeight={24}
-                  disabled={isStreaming}
+                  disabled={isStreaming || isSending}
                 />
                 <Button
                   size="icon"
                   className="size-8 cursor-pointer self-end rounded-full"
                   onClick={handleSendMessage}
-                  disabled={isStreaming || !inputValue.trim()}
+                  disabled={isStreaming || isSending || !inputValue.trim()}
                 >
                   <ArrowUp size={16} className="text-white" />
                 </Button>
@@ -540,24 +605,20 @@ export default function AgentChat() {
                   key={message.id}
                   className={cn(
                     "flex gap-4",
-                    message.type === MESSAGE_TYPE.USER
-                      ? "justify-end"
-                      : "justify-start",
+                    message.role === "user" ? "justify-end" : "justify-start",
                   )}
                 >
-                  {(message.type === MESSAGE_TYPE.ASSISTANT ||
-                    message.type === MESSAGE_TYPE.COMPONENT ||
-                    message.type === MESSAGE_TYPE.ERROR) && (
+                  {message.role !== "user" && (
                     <div className="size-8 flex-shrink-0">
                       <div
                         className={cn(
                           "flex size-8 items-center justify-center rounded-full",
-                          message.type === MESSAGE_TYPE.ERROR
+                          message.role === "system"
                             ? "bg-gradient-to-br from-red-500 to-red-600"
                             : "bg-gradient-to-br from-blue-500 to-purple-600",
                         )}
                       >
-                        {message.type === MESSAGE_TYPE.ERROR ? (
+                        {message.role === "system" ? (
                           <AlertTriangle size={16} className="text-white" />
                         ) : (
                           <Bot size={16} className="text-white" />
@@ -569,21 +630,20 @@ export default function AgentChat() {
                   <div
                     className={cn(
                       "max-w-[80%] rounded-2xl px-4 py-3",
-                      message.type === MESSAGE_TYPE.USER
+                      message.role === "user"
                         ? "ml-auto bg-blue-600 text-white"
-                        : message.type === MESSAGE_TYPE.ERROR
+                        : message.role === "system"
                           ? "bg-red-100 text-red-900"
                           : "bg-gray-100 text-gray-900",
                     )}
                   >
                     {/* Message content */}
-                    {message.type !== MESSAGE_TYPE.COMPONENT && (
+                    {!message.component && (
                       <div className="whitespace-pre-wrap break-words">
-                        {message.content}
-                        {!message.isComplete &&
-                          message.type === MESSAGE_TYPE.ASSISTANT && (
-                            <span className="ml-1 inline-block h-5 w-2 animate-pulse bg-gray-400" />
-                          )}
+                        {message.payload?.content || ""}
+                        {!message.isComplete && message.role === "agent" && (
+                          <span className="ml-1 inline-block h-5 w-2 animate-pulse bg-gray-400" />
+                        )}
                       </div>
                     )}
 
@@ -598,7 +658,7 @@ export default function AgentChat() {
                             key={toolCall.id}
                             className="flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 p-2"
                           >
-                            {toolCall.status === TOOL_CALL_STATUS.STARTED ? (
+                            {toolCall.status === "started" ? (
                               <Clock
                                 size={14}
                                 className="animate-pulse text-blue-600"
@@ -612,7 +672,7 @@ export default function AgentChat() {
                             <span className="font-medium text-blue-900 text-sm">
                               {toolCall.name}
                             </span>
-                            {toolCall.status === TOOL_CALL_STATUS.STARTED && (
+                            {toolCall.status === "started" && (
                               <span className="text-blue-600 text-xs">
                                 Running...
                               </span>
@@ -643,7 +703,7 @@ export default function AgentChat() {
                     )}
                   </div>
 
-                  {message.type === MESSAGE_TYPE.USER && (
+                  {message.role === "user" && (
                     <div className="size-8 flex-shrink-0">
                       <div className="flex size-8 items-center justify-center rounded-full bg-gray-600">
                         <User size={16} className="text-white" />
@@ -696,13 +756,13 @@ export default function AgentChat() {
                   }
                   maxHeight={120}
                   minHeight={24}
-                  disabled={isStreaming}
+                  disabled={isStreaming || isSending}
                 />
                 <Button
                   size="icon"
                   className="size-8 cursor-pointer self-end rounded-full"
                   onClick={handleSendMessage}
-                  disabled={isStreaming || !inputValue.trim()}
+                  disabled={isStreaming || isSending || !inputValue.trim()}
                 >
                   <ArrowUp size={16} className="text-white" />
                 </Button>
diff --git a/frontend/src/hooks/use-sse.ts b/frontend/src/hooks/use-sse.ts
index ea82a23d6..055337da5 100644
--- a/frontend/src/hooks/use-sse.ts
+++ b/frontend/src/hooks/use-sse.ts
@@ -1,22 +1,23 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import SSEClient, {
   type SSEEventHandlers,
   type SSEOptions,
   SSEReadyState,
 } from "@/lib/sse-client";
+import type { AgentEventMap } from "@/types/agent";
 
-export interface UseSSEOptions<TEventMap = Record<string, unknown>> {
+export interface UseSSEOptions<T = AgentEventMap[keyof AgentEventMap]> {
   /** SSE connection options */
   options: SSEOptions;
   /** Event handlers */
-  handlers?: SSEEventHandlers<TEventMap>;
+  handlers?: SSEEventHandlers<T>;
   /** Whether to auto-connect on mount */
   autoConnect?: boolean;
   /** Request body for POST requests */
   body?: BodyInit;
 }
 
-export interface UseSSEReturn<TEventMap = Record<string, unknown>> {
+export interface UseSSEReturn<T = AgentEventMap[keyof AgentEventMap]> {
   /** Current connection state */
   state: SSEReadyState;
   /** Whether the connection is open */
@@ -32,9 +33,9 @@ export interface UseSSEReturn<TEventMap = Record<string, unknown>> {
   /** Close the SSE connection */
   close: () => void;
   /** Update event handlers */
-  setEventHandlers: (handlers: SSEEventHandlers<TEventMap>) => void;
+  setEventHandlers: (handlers: SSEEventHandlers<T>) => void;
   /** SSE client instance for advanced usage */
-  client: SSEClient<TEventMap> | null;
+  client: SSEClient<T> | null;
 }
 
 /**
@@ -42,27 +43,33 @@ export interface UseSSEReturn<TEventMap = Record<string, unknown>> {
  *
  * @example
  * ```tsx
- * interface ChatEventMap {
- *   message_chunk: { content: string; messageId: number };
- *   done: { messageId: number };
- * }
+ * import { useSSE } from '@/hooks/use-sse';
+ * import type { AgentEventMap, SSEData } from '@/types/agent';
  *
  * function ChatComponent() {
- *   const { connect, close, isConnected, error } = useSSE<ChatEventMap>({
+ *   const { connect, close, isConnected, error } = useSSE<AgentEventMap[keyof AgentEventMap]>({
  *     options: {
  *       url: '/api/chat/stream',
  *       headers: { 'Authorization': 'Bearer token' }
  *     },
  *     handlers: {
- *       onEvent: (eventType, data) => {
- *         if (eventType === 'message_chunk') {
- *           console.log('New chunk:', data.content);
+ *       onData: (sseData: SSEData<AgentEventMap[keyof AgentEventMap]>) => {
+ *         const { event, data } = sseData;
+ *         if (event === 'message_chunk' || event === 'message') {
+ *           console.log('New message chunk:', data.payload.content);
+ *         } else if (event === 'tool_call_started') {
+ *           console.log('Tool call started:', data.payload.tool_name);
+ *         } else if (event === 'done') {
+ *           console.log('Conversation completed:', data.conversation_id);
  *         }
  *       },
  *       onError: (error) => console.error('SSE Error:', error)
  *     },
  *     autoConnect: true,
- *     body: JSON.stringify({ conversationId: 123 })
+ *     body: JSON.stringify({
+ *       message: 'Hello',
+ *       conversation_id: 'conv_123'
+ *     })
  *   });
  *
  *   return (
@@ -76,16 +83,16 @@ export interface UseSSEReturn<TEventMap = Record<string, unknown>> {
  * }
  * ```
  */
-export function useSSE<TEventMap = Record<string, unknown>>({
+export function useSSE<T = AgentEventMap[keyof AgentEventMap]>({
   options,
   handlers,
   autoConnect = false,
   body,
-}: UseSSEOptions<TEventMap>): UseSSEReturn<TEventMap> {
+}: UseSSEOptions<T>): UseSSEReturn<T> {
   const [error, setError] = useState<Error | null>(null);
 
-  const clientRef = useRef<SSEClient<TEventMap> | null>(null);
-  const handlersRef = useRef<SSEEventHandlers<TEventMap>>(handlers || {});
+  const clientRef = useRef<SSEClient<T> | null>(null);
+  const handlersRef = useRef<SSEEventHandlers<T>>(handlers || {});
   const bodyRef = useRef<BodyInit | undefined>(body);
 
   // Force re-render when client state changes
@@ -101,11 +108,11 @@ export function useSSE<TEventMap = Record<string, unknown>>({
     bodyRef.current = body;
   }, [body]);
 
-  // Create internal handlers that combine state updates with user handlers
-  const createInternalHandlers = useCallback(
-    (): SSEEventHandlers<TEventMap> => ({
-      onEvent: (eventType, data) => {
-        handlersRef.current.onEvent?.(eventType, data);
+  // Internal handlers referencing handlersRef to avoid re-binding
+  const internalHandlers: SSEEventHandlers<T> = useMemo(
+    () => ({
+      onData: (sseData) => {
+        handlersRef.current.onData?.(sseData);
       },
       onOpen: () => {
         setError(null);
@@ -131,10 +138,10 @@ export function useSSE<TEventMap = Record<string, unknown>>({
 
   // Initialize client
   useEffect(() => {
-    const client = new SSEClient<TEventMap>(options);
+    const client = new SSEClient<T>(options);
     clientRef.current = client;
 
-    client.setEventHandlers(createInternalHandlers());
+    client.setEventHandlers(internalHandlers);
 
     // Auto-connect if enabled
     if (autoConnect) {
@@ -146,7 +153,7 @@ export function useSSE<TEventMap = Record<string, unknown>>({
     return () => {
       client.destroy();
     };
-  }, [options, autoConnect, createInternalHandlers]); // options object dependency for proper recreation
+  }, [options, autoConnect, internalHandlers]); // Caller is responsible for options stability
 
   const connect = useCallback(async (connectBody?: BodyInit) => {
     if (!clientRef.current) return;
@@ -166,16 +173,9 @@ export function useSSE<TEventMap = Record<string, unknown>>({
     }
   }, []);
 
-  const setEventHandlers = useCallback(
-    (newHandlers: SSEEventHandlers<TEventMap>) => {
-      handlersRef.current = { ...handlersRef.current, ...newHandlers };
-
-      if (clientRef.current) {
-        clientRef.current.setEventHandlers(createInternalHandlers());
-      }
-    },
-    [createInternalHandlers],
-  );
+  const setEventHandlers = useCallback((newHandlers: SSEEventHandlers<T>) => {
+    handlersRef.current = { ...handlersRef.current, ...newHandlers };
+  }, []);
 
   // Get current state from client, not duplicate state
   const currentState = clientRef.current?.state ?? SSEReadyState.CLOSED;
diff --git a/frontend/src/lib/sse-client.ts b/frontend/src/lib/sse-client.ts
index fc2fdfd1c..9cb1b2bb4 100644
--- a/frontend/src/lib/sse-client.ts
+++ b/frontend/src/lib/sse-client.ts
@@ -20,12 +20,9 @@ export interface SSEOptions {
   fetchOptions?: Omit<RequestInit, "method" | "body" | "headers" | "signal">;
 }
 
-export interface SSEEventHandlers<TEventMap = Record<string, unknown>> {
-  /** Called when an event is received */
-  onEvent?: <K extends keyof TEventMap>(
-    eventType: K,
-    data: TEventMap[K],
-  ) => void;
+export interface SSEEventHandlers<T = Record<string, unknown>> {
+  /** Called when SSE data is received */
+  onData?: (data: SSEData<T>) => void;
   /** Called when connection is established */
   onOpen?: () => void;
   /** Called when an error occurs */
@@ -42,10 +39,10 @@ export enum SSEReadyState {
   CLOSED = 2,
 }
 
-export class SSEClient<TEventMap = Record<string, unknown>> {
+export class SSEClient<T = Record<string, unknown>> {
   private options: Required<SSEOptions>;
   private currentBody?: BodyInit;
-  private handlers: SSEEventHandlers<TEventMap> = {};
+  private handlers: SSEEventHandlers<T> = {};
   private reconnectCount = 0;
   private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
   private isManualClose = false;
@@ -55,7 +52,7 @@ export class SSEClient<TEventMap = Record<string, unknown>> {
 
   constructor(options: SSEOptions) {
     this.options = {
-      autoReconnect: true,
+      autoReconnect: false,
       reconnectInterval: 3000,
       maxReconnectAttempts: 10,
       timeout: 30000,
@@ -68,7 +65,7 @@ export class SSEClient<TEventMap = Record<string, unknown>> {
   /**
    * Set event handlers for SSE events
    */
-  setEventHandlers(handlers: SSEEventHandlers<TEventMap>): void {
+  setEventHandlers(handlers: SSEEventHandlers<T>): void {
     this.handlers = { ...this.handlers, ...handlers };
   }
 
@@ -76,10 +73,19 @@ export class SSEClient<TEventMap = Record<string, unknown>> {
    * Connect to the SSE endpoint
    */
   async connect(body?: BodyInit): Promise<void> {
-    if (this.readyState !== SSEReadyState.CLOSED) {
+    // Prevent duplicate connections
+    if (this.readyState === SSEReadyState.CONNECTING) {
+      console.log("Already connecting, ignoring duplicate connect request");
       return;
     }
 
+    if (this.readyState === SSEReadyState.OPEN) {
+      console.log(
+        "Already connected, closing existing connection before reconnecting",
+      );
+      this.close();
+    }
+
     this.currentBody = body;
     this.isManualClose = false;
     this.readyState = SSEReadyState.CONNECTING;
@@ -97,7 +103,9 @@ export class SSEClient<TEventMap = Record<string, unknown>> {
    * Start the connection using fetch + ReadableStream
    */
   private async startConnection(): Promise<void> {
+    let didTimeout = false;
     const timeoutId = setTimeout(() => {
+      didTimeout = true;
       this.abortController?.abort();
     }, this.options.timeout);
 
@@ -137,17 +145,31 @@ export class SSEClient<TEventMap = Record<string, unknown>> {
       this.readyState = SSEReadyState.CLOSED;
 
       if (error instanceof Error && error.name === "AbortError") {
-        const timeoutError = new Error("Connection timeout");
-        this.handlers.onError?.(timeoutError);
-        throw timeoutError;
+        // Manual close: do not emit error or reconnect
+        if (this.isManualClose) {
+          return;
+        }
+
+        // Timeout: emit error and optionally reconnect based on config
+        if (didTimeout) {
+          const timeoutError = new Error("Connection timeout");
+          this.handlers.onError?.(timeoutError);
+          if (this.options.autoReconnect) {
+            this.scheduleReconnect();
+          }
+          throw timeoutError;
+        }
+
+        // Other aborts (e.g., superseded by a new connect): treat as normal close
+        this.handlers.onClose?.();
+        return;
       }
 
+      // Other network/HTTP errors
       this.handlers.onError?.(error as Error);
-
       if (!this.isManualClose && this.options.autoReconnect) {
         this.scheduleReconnect();
       }
-
       throw error;
     }
   }
@@ -211,15 +233,12 @@ export class SSEClient<TEventMap = Record<string, unknown>> {
   private processEvent(eventBlock: string): void {
     const lines = eventBlock.split("\n");
     let data = "";
-    let event: string | undefined;
 
     for (const line of lines) {
       if (line.startsWith("data:")) {
         data += `${line.slice(5).trim()}\n`;
-      } else if (line.startsWith("event:")) {
-        event = line.slice(6).trim();
       }
-      // Ignore retry: field for simplicity
+      // Ignore event: and retry: fields for simplicity
     }
 
     if (!data) return;
@@ -230,8 +249,9 @@ export class SSEClient<TEventMap = Record<string, unknown>> {
     try {
       const parsedData = JSON.parse(data);
 
-      if (event && this.handlers.onEvent) {
-        this.handlers.onEvent(event as keyof TEventMap, parsedData);
+      // Pass through parsed payload without interpreting event names
+      if (this.handlers.onData) {
+        this.handlers.onData(parsedData as SSEData<T>);
       }
     } catch (error) {
       // Only log JSON parsing errors, don't trigger connection-level error handling
@@ -243,6 +263,7 @@ export class SSEClient<TEventMap = Record<string, unknown>> {
    * Schedule a reconnection attempt
    */
   private scheduleReconnect(): void {
+    if (this.isManualClose) return;
     // Check if already reconnecting
     if (this.reconnectTimer !== null) return;
 
@@ -332,51 +353,16 @@ export class SSEClient<TEventMap = Record<string, unknown>> {
 
 export default SSEClient;
 
+import type { SSEData } from "@/types/agent";
+
 /*
 Usage Example:
 
 import SSEClient from './sse-client';
+import type { AgentEventMap, SSEData } from '@/types/agent';
 
-// Define event map with type safety
-interface EventMap {
-  conversation_start: {
-    conversation_id: number;
-  };
-  message_chunk: {
-    message_id: number;
-    content: string;
-    conversation_id: number;
-  };
-  tool_call: {
-    message_id: number;
-    content: {
-      tool_call_id: number;
-      tool_name: string;
-      tool_result: string;
-    };
-    conversation_id: number;
-  };
-  tool_call_result: {
-    message_id: number;
-    content: {
-      tool_call_id: number;
-      tool_name: string;
-    };
-    conversation_id: number;
-  };
-  reasoning: {
-    message_id: number;
-    content: string;
-    conversation_id: number;
-  };
-  done: {
-    message_id: number;
-    conversation_id: number;
-  };
-}
-
-// Create client with type-safe event map
-const client = new SSEClient<EventMap>({
+// Create SSE client with type safety
+const client = new SSEClient<AgentEventMap[keyof AgentEventMap]>({
   url: 'http://localhost:8080/api/chat/stream',
   headers: {
     Authorization: `Bearer ${token}`,
@@ -393,39 +379,69 @@ const client = new SSEClient<EventMap>({
 
 // Set up event handlers with full type safety
 client.setEventHandlers({
-  onEvent: (eventType, data) => {
-    // eventType and data are fully typed based on EventMap
-    switch (eventType) {
-      case 'conversation_start':
-        // data is automatically typed as { conversation_id: number }
+  onData: (sseData: SSEData<AgentEventMap[keyof AgentEventMap]>) => {
+    // sseData contains { event: string, data: typed based on AgentEventMap }
+    const { event, data } = sseData;
+    
+    switch (event) {
+      case 'conversation_started':
         console.log(`Conversation started: ${data.conversation_id}`);
         break;
         
       case 'message_chunk':
-        // data is automatically typed as { message_id: number; content: string; conversation_id: number }
-        console.log(`Message chunk: ${data.content}`);
-        appendToMessage(data.message_id, data.content);
+      case 'message':
+        console.log(`Message chunk: ${data.payload.content}`);
+        appendToMessage(data.thread_id, data.payload.content);
+        break;
+        
+      case 'component_generator':
+        console.log(`Component generated: ${data.payload.component_type}`);
+        renderComponent(data.payload.component_type, data.payload.content);
         break;
         
-      case 'tool_call':
-        // data is automatically typed with correct tool_call structure
-        console.log(`Tool call: ${data.content.tool_name}`);
-        showToolExecution(data.content.tool_name, data.content.tool_call_id);
+      case 'plan_require_user_input':
+        console.log(`Plan requires user input: ${data.payload.content}`);
+        showUserInputPrompt(data.payload.content);
         break;
         
-      case 'tool_call_result':
-        console.log(`Tool result: ${data.content.tool_call_id}`);
-        updateToolResult(data.content.tool_call_id);
+      case 'tool_call_started':
+        console.log(`Tool call started: ${data.payload.tool_name}`);
+        showToolExecution(data.payload.tool_name, data.payload.tool_call_id);
+        break;
+        
+      case 'tool_call_completed':
+        console.log(`Tool call completed: ${data.payload.tool_call_id}`);
+        updateToolResult(data.payload.tool_call_id, data.payload.tool_call_result);
         break;
         
       case 'reasoning':
-        console.log(`Reasoning: ${data.content}`);
-        showReasoning(data.message_id, data.content);
+        console.log(`Reasoning: ${data.payload.content}`);
+        showReasoning(data.thread_id, data.payload.content);
+        break;
+        
+      case 'reasoning_started':
+        console.log(`Reasoning started for task: ${data.task_id}`);
+        showReasoningIndicator(data.thread_id, true);
+        break;
+        
+      case 'reasoning_completed':
+        console.log(`Reasoning completed for task: ${data.task_id}`);
+        showReasoningIndicator(data.thread_id, false);
+        break;
+        
+      case 'plan_failed':
+        console.log(`Plan failed: ${data.payload.content}`);
+        showError('plan', data.payload.content);
+        break;
+        
+      case 'task_failed':
+        console.log(`Task failed: ${data.payload.content}`);
+        showError('task', data.payload.content);
         break;
         
       case 'done':
-        console.log(`Message ${data.message_id} completed`);
-        markMessageComplete(data.message_id);
+        console.log(`Conversation ${data.conversation_id} completed`);
+        markConversationComplete(data.conversation_id);
         break;
     }
   },
@@ -436,27 +452,45 @@ client.setEventHandlers({
 });
 
 // Helper functions for UI updates
-function appendToMessage(messageId: number, content: string) {
-  const messageElement = document.getElementById(`message-${messageId}`);
+function appendToMessage(threadId: string, content: string) {
+  const messageElement = document.getElementById(`thread-${threadId}`);
   if (messageElement) {
     messageElement.textContent += content;
   }
 }
 
-function showToolExecution(toolName: string, toolCallId: number) {
+function renderComponent(componentType: string, content: string) {
+  console.log(`Rendering component: ${componentType}`);
+  // Implementation for rendering different component types
+}
+
+function showUserInputPrompt(content: string) {
+  console.log(`User input required: ${content}`);
+  // Show user input dialog
+}
+
+function showToolExecution(toolName: string, toolCallId: string) {
   console.log(`Executing tool: ${toolName} (ID: ${toolCallId})`);
 }
 
-function updateToolResult(toolCallId: number) {
-  console.log(`Tool ${toolCallId} completed`);
+function updateToolResult(toolCallId: string, result: string) {
+  console.log(`Tool ${toolCallId} completed with result: ${result}`);
+}
+
+function showReasoning(threadId: string, reasoning: string) {
+  console.log(`Reasoning for thread ${threadId}: ${reasoning}`);
+}
+
+function showReasoningIndicator(threadId: string, isActive: boolean) {
+  console.log(`Reasoning indicator for thread ${threadId}: ${isActive ? 'active' : 'inactive'}`);
 }
 
-function showReasoning(messageId: number, reasoning: string) {
-  console.log(`Reasoning for message ${messageId}: ${reasoning}`);
+function showError(type: 'plan' | 'task', content: string) {
+  console.error(`${type} error: ${content}`);
 }
 
-function markMessageComplete(messageId: number) {
-  console.log(`Message ${messageId} is complete`);
+function markConversationComplete(conversationId: string) {
+  console.log(`Conversation ${conversationId} is complete`);
 }
 
 // Connect to stream with POST body
diff --git a/frontend/src/types/agent.ts b/frontend/src/types/agent.ts
index 028c27eb8..4e617efbc 100644
--- a/frontend/src/types/agent.ts
+++ b/frontend/src/types/agent.ts
@@ -1,152 +1,101 @@
-// Updated Agent SSE Event Map based on new API specification
+// Agent communication types for SSE events and business logic
+
+// SSE data wrapper
+export interface SSEData<T = Record<string, unknown>> {
+  event: string;
+  data: T;
+}
+
+// Base event data structures
+interface BaseEventData {
+  conversation_id: string; // Top-level conversation session
+  thread_id: string; // Message chain within conversation
+  task_id: string; // Single agent execution unit
+  subtask_id: string; // Granular operation within task
+}
+
+// Payload wrapper for content events
+interface PayloadWrapper<T> {
+  payload: T;
+}
+
+// Agent SSE event mapping
 export interface AgentEventMap {
-  conversation_started: {
-    conversation_id: string;
-  };
-  message_chunk: {
-    data: {
+  // Lifecycle Events
+  conversation_started: Pick<BaseEventData, "conversation_id">;
+
+  done: Pick<BaseEventData, "conversation_id" | "thread_id">;
+
+  // Content Streaming Events
+  message_chunk: BaseEventData &
+    PayloadWrapper<{
       content: string;
-    };
-    conversation_id: string;
-    thread_id: string;
-    task_id: string;
-    subtask_id: string;
-  };
-  message: {
-    data: {
+    }>;
+
+  message: BaseEventData &
+    PayloadWrapper<{
       content: string;
-    };
-    conversation_id: string;
-    thread_id: string;
-    task_id: string;
-    subtask_id: string;
-  };
-  component_generator: {
-    data: {
+    }>;
+
+  // Component Generation
+  component_generator: BaseEventData &
+    PayloadWrapper<{
       component_type: string;
       content: string;
-    };
-    conversation_id: string;
-    thread_id: string;
-    task_id: string;
-    subtask_id: string;
-  };
-  plan_require_user_input: {
-    data: {
+    }>;
+
+  // User Interaction
+  plan_require_user_input: Pick<
+    BaseEventData,
+    "conversation_id" | "thread_id"
+  > &
+    PayloadWrapper<{
       content: string;
-    };
-    conversation_id: string;
-    thread_id: string;
-  };
-  tool_call_started: {
-    data: {
+    }>;
+
+  // Tool Execution Lifecycle
+  tool_call_started: BaseEventData &
+    PayloadWrapper<{
       tool_call_id: string;
       tool_name: string;
-    };
-    conversation_id: string;
-    thread_id: string;
-    task_id: string;
-    subtask_id: string;
-  };
-  tool_call_completed: {
-    data: {
+    }>;
+
+  tool_call_completed: BaseEventData &
+    PayloadWrapper<{
       tool_call_id: string;
       tool_name: string;
       tool_call_result: string;
-    };
-    conversation_id: string;
-    thread_id: string;
-    task_id: string;
-    subtask_id: string;
-  };
-  reasoning: {
-    data: {
-      content: string;
-    };
-    conversation_id: string;
-    thread_id: string;
-    task_id: string;
-    subtask_id: string;
-  };
-  plan_failed: {
-    data: {
-      content: string;
-    };
-    conversation_id: string;
-    thread_id: string;
-  };
-  task_failed: {
-    data: {
+    }>;
+
+  // Reasoning Process
+  reasoning: BaseEventData &
+    PayloadWrapper<{
       content: string;
-    };
-    conversation_id: string;
-    thread_id: string;
-    task_id: string;
-    sub_task_id: string;
-  };
-  done: {
-    conversation_id: string;
-    thread_id: string;
-  };
-}
+    }>;
 
-// Updated constants
-export const TOOL_CALL_STATUS = {
-  STARTED: "started",
-  COMPLETED: "completed",
-} as const;
-
-export const MESSAGE_TYPE = {
-  USER: "user",
-  ASSISTANT: "assistant",
-  COMPONENT: "component",
-  ERROR: "error",
-} as const;
-
-export const COMPONENT_TYPE = {
-  REPORT: "report",
-  CHART: "chart",
-  TABLE: "table",
-  ANALYSIS: "analysis",
-} as const;
-
-export type ToolCallStatus =
-  (typeof TOOL_CALL_STATUS)[keyof typeof TOOL_CALL_STATUS];
-export type MessageType = (typeof MESSAGE_TYPE)[keyof typeof MESSAGE_TYPE];
-export type ComponentType =
-  (typeof COMPONENT_TYPE)[keyof typeof COMPONENT_TYPE];
-
-// Updated interfaces
-export interface ToolCall {
-  id: string;
-  name: string;
-  status: ToolCallStatus;
-  result?: string;
-  startTime: Date;
-  endTime?: Date;
-}
+  reasoning_started: BaseEventData;
+  reasoning_completed: BaseEventData;
+
+  // Error Handling
+  plan_failed: Pick<BaseEventData, "conversation_id" | "thread_id"> &
+    PayloadWrapper<{
+      content: string;
+    }>;
 
-export interface GeneratedComponent {
-  type: ComponentType;
-  content: string;
+  task_failed: BaseEventData &
+    PayloadWrapper<{
+      content: string;
+    }>;
 }
 
-export interface ChatMessage {
-  id: string;
-  content: string;
-  type: MessageType;
+// Chat message with event data
+export type ChatMessage<T extends keyof AgentEventMap> = {
+  role: "user" | "system" | "agent";
   isComplete: boolean;
-  toolCalls?: ToolCall[];
-  reasoning?: string;
-  component?: GeneratedComponent;
-  threadId?: string;
-  taskId?: string;
-  subtaskId?: string;
-}
+} & AgentEventMap[T];
 
-export interface AgentStreamRequest {
+// Agent stream request
+export type AgentStreamRequest = {
   query: string;
   agent_name: string;
-  conversation_id?: string;
-  thread_id?: string;
-}
+} & Partial<Pick<BaseEventData, "conversation_id" | "thread_id">>;
diff --git a/python/third_party/ai-hedge-fund/uv.lock b/python/third_party/ai-hedge-fund/uv.lock
index ad16efa54..4623ce045 100644
--- a/python/third_party/ai-hedge-fund/uv.lock
+++ b/python/third_party/ai-hedge-fund/uv.lock
@@ -133,6 +133,15 @@ dev = [
     { name = "pytest", specifier = ">=7.4.0,<8" },
 ]
 
+[[package]]
+name = "aiofiles"
+version = "24.1.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/0b/03/a88171e277e8caa88a4c77808c20ebb04ba74cc4681bf1e9416c862de237/aiofiles-24.1.0.tar.gz", hash = "sha256:22a075c9e5a3810f0c2e48f3008c94d68c65d763b9b03857924c99e57355166c", size = 30247, upload-time = "2024-06-24T11:02:03.584Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/a5/45/30bb92d442636f570cb5651bc661f52b610e2eec3f891a5dc3a4c3667db0/aiofiles-24.1.0-py3-none-any.whl", hash = "sha256:b4ec55f4195e3eb5d7abd1bf7e061763e864dd4954231fb8539a0ef8bb8260e5", size = 15896, upload-time = "2024-06-24T11:02:01.529Z" },
+]
+
 [[package]]
 name = "aiohappyeyeballs"
 version = "2.6.1"
@@ -622,6 +631,36 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/55/e2/2537ebcff11c1ee1ff17d8d0b6f4db75873e3b0fb32c2d4a2ee31ecb310a/docstring_parser-0.17.0-py3-none-any.whl", hash = "sha256:cf2569abd23dce8099b300f9b4fa8191e9582dda731fd533daf54c4551658708", size = 36896, upload-time = "2025-07-21T07:35:00.684Z" },
 ]
 
+[[package]]
+name = "edgartools"
+version = "4.14.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "beautifulsoup4" },
+    { name = "httpx" },
+    { name = "httpxthrottlecache" },
+    { name = "humanize" },
+    { name = "jinja2" },
+    { name = "lxml" },
+    { name = "nest-asyncio" },
+    { name = "orjson" },
+    { name = "pandas" },
+    { name = "pyarrow" },
+    { name = "pydantic" },
+    { name = "rank-bm25" },
+    { name = "rapidfuzz" },
+    { name = "rich" },
+    { name = "stamina" },
+    { name = "tabulate" },
+    { name = "textdistance" },
+    { name = "tqdm" },
+    { name = "unidecode" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/10/91/ad084948dce69f7eebb37e34758196f3123348b227f9bdba3818de69c719/edgartools-4.14.0.tar.gz", hash = "sha256:3d2f430f0cfa245bcd83189bc7937f730fe081dede18f1016618a4f963fc1df7", size = 1518833, upload-time = "2025-09-19T18:40:03.338Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/d8/af/9f721f4c7238812fda698d41cad1dda7a5876f8a3caac6ab1cba2b55a378/edgartools-4.14.0-py3-none-any.whl", hash = "sha256:210a5a6fcec8cf0bec229126f973d007056f0b3304e37182a1ac1c620a5202f2", size = 1635812, upload-time = "2025-09-19T18:40:05.433Z" },
+]
+
 [[package]]
 name = "et-xmlfile"
 version = "2.0.0"
@@ -659,6 +698,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/a1/e6/5daefc851b514ce2287d8f5d358ae4341089185f78f3217a69d0ce3a390c/fastapi_cli-0.0.7-py3-none-any.whl", hash = "sha256:d549368ff584b2804336c61f192d86ddea080c11255f375959627911944804f4", size = 10705, upload-time = "2024-12-15T14:28:06.18Z" },
 ]
 
+[[package]]
+name = "filelock"
+version = "3.19.1"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/40/bb/0ab3e58d22305b6f5440629d20683af28959bf793d98d11950e305c1c326/filelock-3.19.1.tar.gz", hash = "sha256:66eda1888b0171c998b35be2bcc0f6d75c388a7ce20c3f3f37aa8e96c2dddf58", size = 17687, upload-time = "2025-08-14T16:56:03.016Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/42/14/42b2651a2f46b022ccd948bca9f2d5af0fd8929c4eec235b8d6d844fbe67/filelock-3.19.1-py3-none-any.whl", hash = "sha256:d38e30481def20772f5baf097c122c3babc4fcdb7e14e57049eb9d88c6dc017d", size = 15988, upload-time = "2025-08-14T16:56:01.633Z" },
+]
+
 [[package]]
 name = "filetype"
 version = "1.2.0"
@@ -995,6 +1043,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/04/4b/29cac41a4d98d144bf5f6d33995617b185d14b22401f75ca86f384e87ff1/h11-0.16.0-py3-none-any.whl", hash = "sha256:63cf8bbe7522de3bf65932fda1d9c2772064ffb3dae62d55932da54b31cb6c86", size = 37515, upload-time = "2025-04-24T03:35:24.344Z" },
 ]
 
+[[package]]
+name = "hishel"
+version = "0.1.3"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "httpx" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/3e/b5/c063cd3eab8154ddd61deb07b50497cf24010727eaeec4d78ed1a6262986/hishel-0.1.3.tar.gz", hash = "sha256:db3e07429cb739dcda851ff9b35b0f3e7589e21b90ee167df54336ac608b6ec3", size = 36649, upload-time = "2025-07-06T14:19:23.528Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/29/a5/bf3553b44a36e1c5d2aa0cd15478e02b466dcaecdc2983b07068999d2675/hishel-0.1.3-py3-none-any.whl", hash = "sha256:bae3ba9970ffc56f90014aea2b3019158fb0a5b0b635a56f414ba6b96651966e", size = 42518, upload-time = "2025-07-06T14:19:22.336Z" },
+]
+
 [[package]]
 name = "html5lib"
 version = "1.1"
@@ -1067,6 +1127,30 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/25/0a/6269e3473b09aed2dab8aa1a600c70f31f00ae1349bee30658f7e358a159/httpx_sse-0.4.1-py3-none-any.whl", hash = "sha256:cba42174344c3a5b06f255ce65b350880f962d99ead85e776f23c6618a377a37", size = 8054, upload-time = "2025-06-24T13:21:04.772Z" },
 ]
 
+[[package]]
+name = "httpxthrottlecache"
+version = "0.2.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "aiofiles" },
+    { name = "filelock" },
+    { name = "hishel" },
+    { name = "pyrate-limiter" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/bd/0e/4d9b3b695dd17d3701fba0a054adf6eb48db96ab0518af26a0a2c842421b/httpxthrottlecache-0.2.1.tar.gz", hash = "sha256:10b1754648673a17ec39a7c34a511961364c69f9e700d37ac0e7f7695f3a6806", size = 16831, upload-time = "2025-08-19T02:09:17.895Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/5d/a0/28923efa54c23b2cad1de0c574ba8553f95553f2919c1afa9383b6b6a985/httpxthrottlecache-0.2.1-py3-none-any.whl", hash = "sha256:986ba39215743f63dbd414728704efed7ececfa95139a2ff07009b3bc7bd936b", size = 15995, upload-time = "2025-08-19T02:09:16.557Z" },
+]
+
+[[package]]
+name = "humanize"
+version = "4.13.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/98/1d/3062fcc89ee05a715c0b9bfe6490c00c576314f27ffee3a704122c6fd259/humanize-4.13.0.tar.gz", hash = "sha256:78f79e68f76f0b04d711c4e55d32bebef5be387148862cb1ef83d2b58e7935a0", size = 81884, upload-time = "2025-08-25T09:39:20.04Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/1e/c7/316e7ca04d26695ef0635dc81683d628350810eb8e9b2299fc08ba49f366/humanize-4.13.0-py3-none-any.whl", hash = "sha256:b810820b31891813b1673e8fec7f1ed3312061eab2f26e3fa192c393d11ed25f", size = 128869, upload-time = "2025-08-25T09:39:18.54Z" },
+]
+
 [[package]]
 name = "idna"
 version = "3.10"
@@ -1094,6 +1178,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/d1/b3/8def84f539e7d2289a02f0524b944b15d7c75dab7628bedf1c4f0992029c/isort-5.13.2-py3-none-any.whl", hash = "sha256:8ca5e72a8d85860d5a3fa69b8745237f2939afe12dbf656afbcb47fe72d947a6", size = 92310, upload-time = "2023-12-13T20:37:23.244Z" },
 ]
 
+[[package]]
+name = "jinja2"
+version = "3.1.6"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "markupsafe" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/df/bf/f7da0350254c0ed7c72f3e33cef02e048281fec7ecec5f032d4aac52226b/jinja2-3.1.6.tar.gz", hash = "sha256:0137fb05990d35f1275a587e9aee6d56da821fc83491a0fb838183be43f66d6d", size = 245115, upload-time = "2025-03-05T20:05:02.478Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/62/a1/3d680cbfd5f4b8f15abc1d571870c5fc3e594bb582bc3b64ea099db13e56/jinja2-3.1.6-py3-none-any.whl", hash = "sha256:85ece4451f492d0c13c5dd7c13a64681a86afae63a5f347908daf103ce6d2f67", size = 134899, upload-time = "2025-03-05T20:05:00.369Z" },
+]
+
 [[package]]
 name = "jiter"
 version = "0.10.0"
@@ -2147,6 +2243,35 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/29/a9/8ce0ca222ef04d602924a1e099be93f5435ca6f3294182a30574d4159ca2/py_mini_racer-0.6.0-py2.py3-none-manylinux1_x86_64.whl", hash = "sha256:42896c24968481dd953eeeb11de331f6870917811961c9b26ba09071e07180e2", size = 5416149, upload-time = "2021-04-22T07:58:25.615Z" },
 ]
 
+[[package]]
+name = "pyarrow"
+version = "21.0.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/ef/c2/ea068b8f00905c06329a3dfcd40d0fcc2b7d0f2e355bdb25b65e0a0e4cd4/pyarrow-21.0.0.tar.gz", hash = "sha256:5051f2dccf0e283ff56335760cbc8622cf52264d67e359d5569541ac11b6d5bc", size = 1133487, upload-time = "2025-07-18T00:57:31.761Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/ca/d4/d4f817b21aacc30195cf6a46ba041dd1be827efa4a623cc8bf39a1c2a0c0/pyarrow-21.0.0-cp312-cp312-macosx_12_0_arm64.whl", hash = "sha256:3a302f0e0963db37e0a24a70c56cf91a4faa0bca51c23812279ca2e23481fccd", size = 31160305, upload-time = "2025-07-18T00:55:35.373Z" },
+    { url = "https://files.pythonhosted.org/packages/a2/9c/dcd38ce6e4b4d9a19e1d36914cb8e2b1da4e6003dd075474c4cfcdfe0601/pyarrow-21.0.0-cp312-cp312-macosx_12_0_x86_64.whl", hash = "sha256:b6b27cf01e243871390474a211a7922bfbe3bda21e39bc9160daf0da3fe48876", size = 32684264, upload-time = "2025-07-18T00:55:39.303Z" },
+    { url = "https://files.pythonhosted.org/packages/4f/74/2a2d9f8d7a59b639523454bec12dba35ae3d0a07d8ab529dc0809f74b23c/pyarrow-21.0.0-cp312-cp312-manylinux_2_28_aarch64.whl", hash = "sha256:e72a8ec6b868e258a2cd2672d91f2860ad532d590ce94cdf7d5e7ec674ccf03d", size = 41108099, upload-time = "2025-07-18T00:55:42.889Z" },
+    { url = "https://files.pythonhosted.org/packages/ad/90/2660332eeb31303c13b653ea566a9918484b6e4d6b9d2d46879a33ab0622/pyarrow-21.0.0-cp312-cp312-manylinux_2_28_x86_64.whl", hash = "sha256:b7ae0bbdc8c6674259b25bef5d2a1d6af5d39d7200c819cf99e07f7dfef1c51e", size = 42829529, upload-time = "2025-07-18T00:55:47.069Z" },
+    { url = "https://files.pythonhosted.org/packages/33/27/1a93a25c92717f6aa0fca06eb4700860577d016cd3ae51aad0e0488ac899/pyarrow-21.0.0-cp312-cp312-musllinux_1_2_aarch64.whl", hash = "sha256:58c30a1729f82d201627c173d91bd431db88ea74dcaa3885855bc6203e433b82", size = 43367883, upload-time = "2025-07-18T00:55:53.069Z" },
+    { url = "https://files.pythonhosted.org/packages/05/d9/4d09d919f35d599bc05c6950095e358c3e15148ead26292dfca1fb659b0c/pyarrow-21.0.0-cp312-cp312-musllinux_1_2_x86_64.whl", hash = "sha256:072116f65604b822a7f22945a7a6e581cfa28e3454fdcc6939d4ff6090126623", size = 45133802, upload-time = "2025-07-18T00:55:57.714Z" },
+    { url = "https://files.pythonhosted.org/packages/71/30/f3795b6e192c3ab881325ffe172e526499eb3780e306a15103a2764916a2/pyarrow-21.0.0-cp312-cp312-win_amd64.whl", hash = "sha256:cf56ec8b0a5c8c9d7021d6fd754e688104f9ebebf1bf4449613c9531f5346a18", size = 26203175, upload-time = "2025-07-18T00:56:01.364Z" },
+    { url = "https://files.pythonhosted.org/packages/16/ca/c7eaa8e62db8fb37ce942b1ea0c6d7abfe3786ca193957afa25e71b81b66/pyarrow-21.0.0-cp313-cp313-macosx_12_0_arm64.whl", hash = "sha256:e99310a4ebd4479bcd1964dff9e14af33746300cb014aa4a3781738ac63baf4a", size = 31154306, upload-time = "2025-07-18T00:56:04.42Z" },
+    { url = "https://files.pythonhosted.org/packages/ce/e8/e87d9e3b2489302b3a1aea709aaca4b781c5252fcb812a17ab6275a9a484/pyarrow-21.0.0-cp313-cp313-macosx_12_0_x86_64.whl", hash = "sha256:d2fe8e7f3ce329a71b7ddd7498b3cfac0eeb200c2789bd840234f0dc271a8efe", size = 32680622, upload-time = "2025-07-18T00:56:07.505Z" },
+    { url = "https://files.pythonhosted.org/packages/84/52/79095d73a742aa0aba370c7942b1b655f598069489ab387fe47261a849e1/pyarrow-21.0.0-cp313-cp313-manylinux_2_28_aarch64.whl", hash = "sha256:f522e5709379d72fb3da7785aa489ff0bb87448a9dc5a75f45763a795a089ebd", size = 41104094, upload-time = "2025-07-18T00:56:10.994Z" },
+    { url = "https://files.pythonhosted.org/packages/89/4b/7782438b551dbb0468892a276b8c789b8bbdb25ea5c5eb27faadd753e037/pyarrow-21.0.0-cp313-cp313-manylinux_2_28_x86_64.whl", hash = "sha256:69cbbdf0631396e9925e048cfa5bce4e8c3d3b41562bbd70c685a8eb53a91e61", size = 42825576, upload-time = "2025-07-18T00:56:15.569Z" },
+    { url = "https://files.pythonhosted.org/packages/b3/62/0f29de6e0a1e33518dec92c65be0351d32d7ca351e51ec5f4f837a9aab91/pyarrow-21.0.0-cp313-cp313-musllinux_1_2_aarch64.whl", hash = "sha256:731c7022587006b755d0bdb27626a1a3bb004bb56b11fb30d98b6c1b4718579d", size = 43368342, upload-time = "2025-07-18T00:56:19.531Z" },
+    { url = "https://files.pythonhosted.org/packages/90/c7/0fa1f3f29cf75f339768cc698c8ad4ddd2481c1742e9741459911c9ac477/pyarrow-21.0.0-cp313-cp313-musllinux_1_2_x86_64.whl", hash = "sha256:dc56bc708f2d8ac71bd1dcb927e458c93cec10b98eb4120206a4091db7b67b99", size = 45131218, upload-time = "2025-07-18T00:56:23.347Z" },
+    { url = "https://files.pythonhosted.org/packages/01/63/581f2076465e67b23bc5a37d4a2abff8362d389d29d8105832e82c9c811c/pyarrow-21.0.0-cp313-cp313-win_amd64.whl", hash = "sha256:186aa00bca62139f75b7de8420f745f2af12941595bbbfa7ed3870ff63e25636", size = 26087551, upload-time = "2025-07-18T00:56:26.758Z" },
+    { url = "https://files.pythonhosted.org/packages/c9/ab/357d0d9648bb8241ee7348e564f2479d206ebe6e1c47ac5027c2e31ecd39/pyarrow-21.0.0-cp313-cp313t-macosx_12_0_arm64.whl", hash = "sha256:a7a102574faa3f421141a64c10216e078df467ab9576684d5cd696952546e2da", size = 31290064, upload-time = "2025-07-18T00:56:30.214Z" },
+    { url = "https://files.pythonhosted.org/packages/3f/8a/5685d62a990e4cac2043fc76b4661bf38d06efed55cf45a334b455bd2759/pyarrow-21.0.0-cp313-cp313t-macosx_12_0_x86_64.whl", hash = "sha256:1e005378c4a2c6db3ada3ad4c217b381f6c886f0a80d6a316fe586b90f77efd7", size = 32727837, upload-time = "2025-07-18T00:56:33.935Z" },
+    { url = "https://files.pythonhosted.org/packages/fc/de/c0828ee09525c2bafefd3e736a248ebe764d07d0fd762d4f0929dbc516c9/pyarrow-21.0.0-cp313-cp313t-manylinux_2_28_aarch64.whl", hash = "sha256:65f8e85f79031449ec8706b74504a316805217b35b6099155dd7e227eef0d4b6", size = 41014158, upload-time = "2025-07-18T00:56:37.528Z" },
+    { url = "https://files.pythonhosted.org/packages/6e/26/a2865c420c50b7a3748320b614f3484bfcde8347b2639b2b903b21ce6a72/pyarrow-21.0.0-cp313-cp313t-manylinux_2_28_x86_64.whl", hash = "sha256:3a81486adc665c7eb1a2bde0224cfca6ceaba344a82a971ef059678417880eb8", size = 42667885, upload-time = "2025-07-18T00:56:41.483Z" },
+    { url = "https://files.pythonhosted.org/packages/0a/f9/4ee798dc902533159250fb4321267730bc0a107d8c6889e07c3add4fe3a5/pyarrow-21.0.0-cp313-cp313t-musllinux_1_2_aarch64.whl", hash = "sha256:fc0d2f88b81dcf3ccf9a6ae17f89183762c8a94a5bdcfa09e05cfe413acf0503", size = 43276625, upload-time = "2025-07-18T00:56:48.002Z" },
+    { url = "https://files.pythonhosted.org/packages/5a/da/e02544d6997037a4b0d22d8e5f66bc9315c3671371a8b18c79ade1cefe14/pyarrow-21.0.0-cp313-cp313t-musllinux_1_2_x86_64.whl", hash = "sha256:6299449adf89df38537837487a4f8d3bd91ec94354fdd2a7d30bc11c48ef6e79", size = 44951890, upload-time = "2025-07-18T00:56:52.568Z" },
+    { url = "https://files.pythonhosted.org/packages/e5/4e/519c1bc1876625fe6b71e9a28287c43ec2f20f73c658b9ae1d485c0c206e/pyarrow-21.0.0-cp313-cp313t-win_amd64.whl", hash = "sha256:222c39e2c70113543982c6b34f3077962b44fca38c0bd9e68bb6781534425c10", size = 26371006, upload-time = "2025-07-18T00:56:56.379Z" },
+]
+
 [[package]]
 name = "pyasn1"
 version = "0.6.1"
@@ -2284,6 +2409,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/05/e7/df2285f3d08fee213f2d041540fa4fc9ca6c2d44cf36d3a035bf2a8d2bcc/pyparsing-3.2.3-py3-none-any.whl", hash = "sha256:a749938e02d6fd0b59b356ca504a24982314bb090c383e3cf201c95ef7e2bfcf", size = 111120, upload-time = "2025-03-25T05:01:24.908Z" },
 ]
 
+[[package]]
+name = "pyrate-limiter"
+version = "3.9.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/ec/da/f682c5c5f9f0a5414363eb4397e6b07d84a02cde69c4ceadcbf32c85537c/pyrate_limiter-3.9.0.tar.gz", hash = "sha256:6b882e2c77cda07a241d3730975daea4258344b39c878f1dd8849df73f70b0ce", size = 289308, upload-time = "2025-07-30T14:36:58.659Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/04/af/d8bf0959ece9bc4679bd203908c31019556a421d76d8143b0c6871c7f614/pyrate_limiter-3.9.0-py3-none-any.whl", hash = "sha256:77357840c8cf97a36d67005d4e090787043f54000c12c2b414ff65657653e378", size = 33628, upload-time = "2025-07-30T14:36:57.71Z" },
+]
+
 [[package]]
 name = "pytest"
 version = "7.4.4"
@@ -2376,6 +2510,81 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/3c/26/1062c7ec1b053db9e499b4d2d5bc231743201b74051c973dadeac80a8f43/questionary-2.1.1-py3-none-any.whl", hash = "sha256:a51af13f345f1cdea62347589fbb6df3b290306ab8930713bfae4d475a7d4a59", size = 36753, upload-time = "2025-08-28T19:00:19.56Z" },
 ]
 
+[[package]]
+name = "rank-bm25"
+version = "0.2.2"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "numpy" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/fc/0a/f9579384aa017d8b4c15613f86954b92a95a93d641cc849182467cf0bb3b/rank_bm25-0.2.2.tar.gz", hash = "sha256:096ccef76f8188563419aaf384a02f0ea459503fdf77901378d4fd9d87e5e51d", size = 8347, upload-time = "2022-02-16T12:10:52.196Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/2a/21/f691fb2613100a62b3fa91e9988c991e9ca5b89ea31c0d3152a3210344f9/rank_bm25-0.2.2-py3-none-any.whl", hash = "sha256:7bd4a95571adadfc271746fa146a4bcfd89c0cf731e49c3d1ad863290adbe8ae", size = 8584, upload-time = "2022-02-16T12:10:50.626Z" },
+]
+
+[[package]]
+name = "rapidfuzz"
+version = "3.14.1"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/ed/fc/a98b616db9a42dcdda7c78c76bdfdf6fe290ac4c5ffbb186f73ec981ad5b/rapidfuzz-3.14.1.tar.gz", hash = "sha256:b02850e7f7152bd1edff27e9d584505b84968cacedee7a734ec4050c655a803c", size = 57869570, upload-time = "2025-09-08T21:08:15.922Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/df/77/2f4887c9b786f203e50b816c1cde71f96642f194e6fa752acfa042cf53fd/rapidfuzz-3.14.1-cp312-cp312-macosx_10_13_x86_64.whl", hash = "sha256:809515194f628004aac1b1b280c3734c5ea0ccbd45938c9c9656a23ae8b8f553", size = 1932216, upload-time = "2025-09-08T21:06:09.342Z" },
+    { url = "https://files.pythonhosted.org/packages/de/bd/b5e445d156cb1c2a87d36d8da53daf4d2a1d1729b4851660017898b49aa0/rapidfuzz-3.14.1-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:0afcf2d6cb633d0d4260d8df6a40de2d9c93e9546e2c6b317ab03f89aa120ad7", size = 1393414, upload-time = "2025-09-08T21:06:10.959Z" },
+    { url = "https://files.pythonhosted.org/packages/de/bd/98d065dd0a4479a635df855616980eaae1a1a07a876db9400d421b5b6371/rapidfuzz-3.14.1-cp312-cp312-manylinux_2_26_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:5c1c3d07d53dcafee10599da8988d2b1f39df236aee501ecbd617bd883454fcd", size = 1377194, upload-time = "2025-09-08T21:06:12.471Z" },
+    { url = "https://files.pythonhosted.org/packages/d3/8a/1265547b771128b686f3c431377ff1db2fa073397ed082a25998a7b06d4e/rapidfuzz-3.14.1-cp312-cp312-manylinux_2_26_ppc64le.manylinux_2_28_ppc64le.whl", hash = "sha256:6e9ee3e1eb0a027717ee72fe34dc9ac5b3e58119f1bd8dd15bc19ed54ae3e62b", size = 1669573, upload-time = "2025-09-08T21:06:14.016Z" },
+    { url = "https://files.pythonhosted.org/packages/a8/57/e73755c52fb451f2054196404ccc468577f8da023b3a48c80bce29ee5d4a/rapidfuzz-3.14.1-cp312-cp312-manylinux_2_26_s390x.manylinux_2_28_s390x.whl", hash = "sha256:70c845b64a033a20c44ed26bc890eeb851215148cc3e696499f5f65529afb6cb", size = 2217833, upload-time = "2025-09-08T21:06:15.666Z" },
+    { url = "https://files.pythonhosted.org/packages/20/14/7399c18c460e72d1b754e80dafc9f65cb42a46cc8f29cd57d11c0c4acc94/rapidfuzz-3.14.1-cp312-cp312-manylinux_2_27_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:26db0e815213d04234298dea0d884d92b9cb8d4ba954cab7cf67a35853128a33", size = 3159012, upload-time = "2025-09-08T21:06:17.631Z" },
+    { url = "https://files.pythonhosted.org/packages/f8/5e/24f0226ddb5440cabd88605d2491f99ae3748a6b27b0bc9703772892ced7/rapidfuzz-3.14.1-cp312-cp312-manylinux_2_31_armv7l.whl", hash = "sha256:6ad3395a416f8b126ff11c788531f157c7debeb626f9d897c153ff8980da10fb", size = 1227032, upload-time = "2025-09-08T21:06:21.06Z" },
+    { url = "https://files.pythonhosted.org/packages/40/43/1d54a4ad1a5fac2394d5f28a3108e2bf73c26f4f23663535e3139cfede9b/rapidfuzz-3.14.1-cp312-cp312-musllinux_1_2_aarch64.whl", hash = "sha256:61c5b9ab6f730e6478aa2def566223712d121c6f69a94c7cc002044799442afd", size = 2395054, upload-time = "2025-09-08T21:06:23.482Z" },
+    { url = "https://files.pythonhosted.org/packages/0c/71/e9864cd5b0f086c4a03791f5dfe0155a1b132f789fe19b0c76fbabd20513/rapidfuzz-3.14.1-cp312-cp312-musllinux_1_2_armv7l.whl", hash = "sha256:13e0ea3d0c533969158727d1bb7a08c2cc9a816ab83f8f0dcfde7e38938ce3e6", size = 2524741, upload-time = "2025-09-08T21:06:26.825Z" },
+    { url = "https://files.pythonhosted.org/packages/b2/0c/53f88286b912faf4a3b2619a60df4f4a67bd0edcf5970d7b0c1143501f0c/rapidfuzz-3.14.1-cp312-cp312-musllinux_1_2_ppc64le.whl", hash = "sha256:6325ca435b99f4001aac919ab8922ac464999b100173317defb83eae34e82139", size = 2785311, upload-time = "2025-09-08T21:06:29.471Z" },
+    { url = "https://files.pythonhosted.org/packages/53/9a/229c26dc4f91bad323f07304ee5ccbc28f0d21c76047a1e4f813187d0bad/rapidfuzz-3.14.1-cp312-cp312-musllinux_1_2_s390x.whl", hash = "sha256:07a9fad3247e68798424bdc116c1094e88ecfabc17b29edf42a777520347648e", size = 3303630, upload-time = "2025-09-08T21:06:31.094Z" },
+    { url = "https://files.pythonhosted.org/packages/05/de/20e330d6d58cbf83da914accd9e303048b7abae2f198886f65a344b69695/rapidfuzz-3.14.1-cp312-cp312-musllinux_1_2_x86_64.whl", hash = "sha256:f8ff5dbe78db0a10c1f916368e21d328935896240f71f721e073cf6c4c8cdedd", size = 4262364, upload-time = "2025-09-08T21:06:32.877Z" },
+    { url = "https://files.pythonhosted.org/packages/1f/10/2327f83fad3534a8d69fe9cd718f645ec1fe828b60c0e0e97efc03bf12f8/rapidfuzz-3.14.1-cp312-cp312-win32.whl", hash = "sha256:9c83270e44a6ae7a39fc1d7e72a27486bccc1fa5f34e01572b1b90b019e6b566", size = 1711927, upload-time = "2025-09-08T21:06:34.669Z" },
+    { url = "https://files.pythonhosted.org/packages/78/8d/199df0370133fe9f35bc72f3c037b53c93c5c1fc1e8d915cf7c1f6bb8557/rapidfuzz-3.14.1-cp312-cp312-win_amd64.whl", hash = "sha256:e06664c7fdb51c708e082df08a6888fce4c5c416d7e3cc2fa66dd80eb76a149d", size = 1542045, upload-time = "2025-09-08T21:06:36.364Z" },
+    { url = "https://files.pythonhosted.org/packages/b3/c6/cc5d4bd1b16ea2657c80b745d8b1c788041a31fad52e7681496197b41562/rapidfuzz-3.14.1-cp312-cp312-win_arm64.whl", hash = "sha256:6c7c26025f7934a169a23dafea6807cfc3fb556f1dd49229faf2171e5d8101cc", size = 813170, upload-time = "2025-09-08T21:06:38.001Z" },
+    { url = "https://files.pythonhosted.org/packages/0d/f2/0024cc8eead108c4c29337abe133d72ddf3406ce9bbfbcfc110414a7ea07/rapidfuzz-3.14.1-cp313-cp313-macosx_10_13_x86_64.whl", hash = "sha256:8d69f470d63ee824132ecd80b1974e1d15dd9df5193916901d7860cef081a260", size = 1926515, upload-time = "2025-09-08T21:06:39.834Z" },
+    { url = "https://files.pythonhosted.org/packages/12/ae/6cb211f8930bea20fa989b23f31ee7f92940caaf24e3e510d242a1b28de4/rapidfuzz-3.14.1-cp313-cp313-macosx_11_0_arm64.whl", hash = "sha256:6f571d20152fc4833b7b5e781b36d5e4f31f3b5a596a3d53cf66a1bd4436b4f4", size = 1388431, upload-time = "2025-09-08T21:06:41.73Z" },
+    { url = "https://files.pythonhosted.org/packages/39/88/bfec24da0607c39e5841ced5594ea1b907d20f83adf0e3ee87fa454a425b/rapidfuzz-3.14.1-cp313-cp313-manylinux_2_26_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:61d77e09b2b6bc38228f53b9ea7972a00722a14a6048be9a3672fb5cb08bad3a", size = 1375664, upload-time = "2025-09-08T21:06:43.737Z" },
+    { url = "https://files.pythonhosted.org/packages/f4/43/9f282ba539e404bdd7052c7371d3aaaa1a9417979d2a1d8332670c7f385a/rapidfuzz-3.14.1-cp313-cp313-manylinux_2_26_ppc64le.manylinux_2_28_ppc64le.whl", hash = "sha256:8b41d95ef86a6295d353dc3bb6c80550665ba2c3bef3a9feab46074d12a9af8f", size = 1668113, upload-time = "2025-09-08T21:06:45.758Z" },
+    { url = "https://files.pythonhosted.org/packages/7f/2f/0b3153053b1acca90969eb0867922ac8515b1a8a48706a3215c2db60e87c/rapidfuzz-3.14.1-cp313-cp313-manylinux_2_26_s390x.manylinux_2_28_s390x.whl", hash = "sha256:0591df2e856ad583644b40a2b99fb522f93543c65e64b771241dda6d1cfdc96b", size = 2212875, upload-time = "2025-09-08T21:06:47.447Z" },
+    { url = "https://files.pythonhosted.org/packages/f8/9b/623001dddc518afaa08ed1fbbfc4005c8692b7a32b0f08b20c506f17a770/rapidfuzz-3.14.1-cp313-cp313-manylinux_2_27_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:f277801f55b2f3923ef2de51ab94689a0671a4524bf7b611de979f308a54cd6f", size = 3161181, upload-time = "2025-09-08T21:06:49.179Z" },
+    { url = "https://files.pythonhosted.org/packages/ce/b7/d8404ed5ad56eb74463e5ebf0a14f0019d7eb0e65e0323f709fe72e0884c/rapidfuzz-3.14.1-cp313-cp313-manylinux_2_31_armv7l.whl", hash = "sha256:893fdfd4f66ebb67f33da89eb1bd1674b7b30442fdee84db87f6cb9074bf0ce9", size = 1225495, upload-time = "2025-09-08T21:06:51.056Z" },
+    { url = "https://files.pythonhosted.org/packages/2c/6c/b96af62bc7615d821e3f6b47563c265fd7379d7236dfbc1cbbcce8beb1d2/rapidfuzz-3.14.1-cp313-cp313-musllinux_1_2_aarch64.whl", hash = "sha256:fe2651258c1f1afa9b66f44bf82f639d5f83034f9804877a1bbbae2120539ad1", size = 2396294, upload-time = "2025-09-08T21:06:53.063Z" },
+    { url = "https://files.pythonhosted.org/packages/7f/b7/c60c9d22a7debed8b8b751f506a4cece5c22c0b05e47a819d6b47bc8c14e/rapidfuzz-3.14.1-cp313-cp313-musllinux_1_2_armv7l.whl", hash = "sha256:ace21f7a78519d8e889b1240489cd021c5355c496cb151b479b741a4c27f0a25", size = 2529629, upload-time = "2025-09-08T21:06:55.188Z" },
+    { url = "https://files.pythonhosted.org/packages/25/94/a9ec7ccb28381f14de696ffd51c321974762f137679df986f5375d35264f/rapidfuzz-3.14.1-cp313-cp313-musllinux_1_2_ppc64le.whl", hash = "sha256:cb5acf24590bc5e57027283b015950d713f9e4d155fda5cfa71adef3b3a84502", size = 2782960, upload-time = "2025-09-08T21:06:57.339Z" },
+    { url = "https://files.pythonhosted.org/packages/68/80/04e5276d223060eca45250dbf79ea39940c0be8b3083661d58d57572c2c5/rapidfuzz-3.14.1-cp313-cp313-musllinux_1_2_s390x.whl", hash = "sha256:67ea46fa8cc78174bad09d66b9a4b98d3068e85de677e3c71ed931a1de28171f", size = 3298427, upload-time = "2025-09-08T21:06:59.319Z" },
+    { url = "https://files.pythonhosted.org/packages/4a/63/24759b2a751562630b244e68ccaaf7a7525c720588fcc77c964146355aee/rapidfuzz-3.14.1-cp313-cp313-musllinux_1_2_x86_64.whl", hash = "sha256:44e741d785de57d1a7bae03599c1cbc7335d0b060a35e60c44c382566e22782e", size = 4267736, upload-time = "2025-09-08T21:07:01.31Z" },
+    { url = "https://files.pythonhosted.org/packages/18/a4/73f1b1f7f44d55f40ffbffe85e529eb9d7e7f7b2ffc0931760eadd163995/rapidfuzz-3.14.1-cp313-cp313-win32.whl", hash = "sha256:b1fe6001baa9fa36bcb565e24e88830718f6c90896b91ceffcb48881e3adddbc", size = 1710515, upload-time = "2025-09-08T21:07:03.16Z" },
+    { url = "https://files.pythonhosted.org/packages/6a/8b/a8fe5a6ee4d06fd413aaa9a7e0a23a8630c4b18501509d053646d18c2aa7/rapidfuzz-3.14.1-cp313-cp313-win_amd64.whl", hash = "sha256:83b8cc6336709fa5db0579189bfd125df280a554af544b2dc1c7da9cdad7e44d", size = 1540081, upload-time = "2025-09-08T21:07:05.401Z" },
+    { url = "https://files.pythonhosted.org/packages/ac/fe/4b0ac16c118a2367d85450b45251ee5362661e9118a1cef88aae1765ffff/rapidfuzz-3.14.1-cp313-cp313-win_arm64.whl", hash = "sha256:cf75769662eadf5f9bd24e865c19e5ca7718e879273dce4e7b3b5824c4da0eb4", size = 812725, upload-time = "2025-09-08T21:07:07.148Z" },
+    { url = "https://files.pythonhosted.org/packages/e2/cb/1ad9a76d974d153783f8e0be8dbe60ec46488fac6e519db804e299e0da06/rapidfuzz-3.14.1-cp313-cp313t-macosx_10_13_x86_64.whl", hash = "sha256:d937dbeda71c921ef6537c6d41a84f1b8112f107589c9977059de57a1d726dd6", size = 1945173, upload-time = "2025-09-08T21:07:08.893Z" },
+    { url = "https://files.pythonhosted.org/packages/d9/61/959ed7460941d8a81cbf6552b9c45564778a36cf5e5aa872558b30fc02b2/rapidfuzz-3.14.1-cp313-cp313t-macosx_11_0_arm64.whl", hash = "sha256:7a2d80cc1a4fcc7e259ed4f505e70b36433a63fa251f1bb69ff279fe376c5efd", size = 1413949, upload-time = "2025-09-08T21:07:11.033Z" },
+    { url = "https://files.pythonhosted.org/packages/7b/a0/f46fca44457ca1f25f23cc1f06867454fc3c3be118cd10b552b0ab3e58a2/rapidfuzz-3.14.1-cp313-cp313t-win32.whl", hash = "sha256:40875e0c06f1a388f1cab3885744f847b557e0b1642dfc31ff02039f9f0823ef", size = 1760666, upload-time = "2025-09-08T21:07:12.884Z" },
+    { url = "https://files.pythonhosted.org/packages/9b/d0/7a5d9c04446f8b66882b0fae45b36a838cf4d31439b5d1ab48a9d17c8e57/rapidfuzz-3.14.1-cp313-cp313t-win_amd64.whl", hash = "sha256:876dc0c15552f3d704d7fb8d61bdffc872ff63bedf683568d6faad32e51bbce8", size = 1579760, upload-time = "2025-09-08T21:07:14.718Z" },
+    { url = "https://files.pythonhosted.org/packages/4e/aa/2c03ae112320d0746f2c869cae68c413f3fe3b6403358556f2b747559723/rapidfuzz-3.14.1-cp313-cp313t-win_arm64.whl", hash = "sha256:61458e83b0b3e2abc3391d0953c47d6325e506ba44d6a25c869c4401b3bc222c", size = 832088, upload-time = "2025-09-08T21:07:17.03Z" },
+    { url = "https://files.pythonhosted.org/packages/d6/36/53debca45fbe693bd6181fb05b6a2fd561c87669edb82ec0d7c1961a43f0/rapidfuzz-3.14.1-cp314-cp314-macosx_10_13_x86_64.whl", hash = "sha256:e84d9a844dc2e4d5c4cabd14c096374ead006583304333c14a6fbde51f612a44", size = 1926336, upload-time = "2025-09-08T21:07:18.809Z" },
+    { url = "https://files.pythonhosted.org/packages/ae/32/b874f48609665fcfeaf16cbaeb2bbc210deef2b88e996c51cfc36c3eb7c3/rapidfuzz-3.14.1-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:40301b93b99350edcd02dbb22e37ca5f2a75d0db822e9b3c522da451a93d6f27", size = 1389653, upload-time = "2025-09-08T21:07:20.667Z" },
+    { url = "https://files.pythonhosted.org/packages/97/25/f6c5a1ff4ec11edadacb270e70b8415f51fa2f0d5730c2c552b81651fbe3/rapidfuzz-3.14.1-cp314-cp314-manylinux_2_26_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:fedd5097a44808dddf341466866e5c57a18a19a336565b4ff50aa8f09eb528f6", size = 1380911, upload-time = "2025-09-08T21:07:22.584Z" },
+    { url = "https://files.pythonhosted.org/packages/d8/f3/d322202ef8fab463759b51ebfaa33228100510c82e6153bd7a922e150270/rapidfuzz-3.14.1-cp314-cp314-manylinux_2_26_ppc64le.manylinux_2_28_ppc64le.whl", hash = "sha256:2e3e61c9e80d8c26709d8aa5c51fdd25139c81a4ab463895f8a567f8347b0548", size = 1673515, upload-time = "2025-09-08T21:07:24.417Z" },
+    { url = "https://files.pythonhosted.org/packages/8d/b9/6b2a97f4c6be96cac3749f32301b8cdf751ce5617b1c8934c96586a0662b/rapidfuzz-3.14.1-cp314-cp314-manylinux_2_26_s390x.manylinux_2_28_s390x.whl", hash = "sha256:da011a373722fac6e64687297a1d17dc8461b82cb12c437845d5a5b161bc24b9", size = 2219394, upload-time = "2025-09-08T21:07:26.402Z" },
+    { url = "https://files.pythonhosted.org/packages/11/bf/afb76adffe4406e6250f14ce48e60a7eb05d4624945bd3c044cfda575fbc/rapidfuzz-3.14.1-cp314-cp314-manylinux_2_27_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:5967d571243cfb9ad3710e6e628ab68c421a237b76e24a67ac22ee0ff12784d6", size = 3163582, upload-time = "2025-09-08T21:07:28.878Z" },
+    { url = "https://files.pythonhosted.org/packages/42/34/e6405227560f61e956cb4c5de653b0f874751c5ada658d3532d6c1df328e/rapidfuzz-3.14.1-cp314-cp314-manylinux_2_31_armv7l.whl", hash = "sha256:474f416cbb9099676de54aa41944c154ba8d25033ee460f87bb23e54af6d01c9", size = 1221116, upload-time = "2025-09-08T21:07:30.8Z" },
+    { url = "https://files.pythonhosted.org/packages/55/e6/5b757e2e18de384b11d1daf59608453f0baf5d5d8d1c43e1a964af4dc19a/rapidfuzz-3.14.1-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:ae2d57464b59297f727c4e201ea99ec7b13935f1f056c753e8103da3f2fc2404", size = 2402670, upload-time = "2025-09-08T21:07:32.702Z" },
+    { url = "https://files.pythonhosted.org/packages/43/c4/d753a415fe54531aa882e288db5ed77daaa72e05c1a39e1cbac00d23024f/rapidfuzz-3.14.1-cp314-cp314-musllinux_1_2_armv7l.whl", hash = "sha256:57047493a1f62f11354c7143c380b02f1b355c52733e6b03adb1cb0fe8fb8816", size = 2521659, upload-time = "2025-09-08T21:07:35.218Z" },
+    { url = "https://files.pythonhosted.org/packages/cd/28/d4e7fe1515430db98f42deb794c7586a026d302fe70f0216b638d89cf10f/rapidfuzz-3.14.1-cp314-cp314-musllinux_1_2_ppc64le.whl", hash = "sha256:4acc20776f225ee37d69517a237c090b9fa7e0836a0b8bc58868e9168ba6ef6f", size = 2788552, upload-time = "2025-09-08T21:07:37.188Z" },
+    { url = "https://files.pythonhosted.org/packages/4f/00/eab05473af7a2cafb4f3994bc6bf408126b8eec99a569aac6254ac757db4/rapidfuzz-3.14.1-cp314-cp314-musllinux_1_2_s390x.whl", hash = "sha256:4373f914ff524ee0146919dea96a40a8200ab157e5a15e777a74a769f73d8a4a", size = 3306261, upload-time = "2025-09-08T21:07:39.624Z" },
+    { url = "https://files.pythonhosted.org/packages/d1/31/2feb8dfcfcff6508230cd2ccfdde7a8bf988c6fda142fe9ce5d3eb15704d/rapidfuzz-3.14.1-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:37017b84953927807847016620d61251fe236bd4bcb25e27b6133d955bb9cafb", size = 4269522, upload-time = "2025-09-08T21:07:41.663Z" },
+    { url = "https://files.pythonhosted.org/packages/a3/99/250538d73c8fbab60597c3d131a11ef2a634d38b44296ca11922794491ac/rapidfuzz-3.14.1-cp314-cp314-win32.whl", hash = "sha256:c8d1dd1146539e093b84d0805e8951475644af794ace81d957ca612e3eb31598", size = 1745018, upload-time = "2025-09-08T21:07:44.313Z" },
+    { url = "https://files.pythonhosted.org/packages/c5/15/d50839d20ad0743aded25b08a98ffb872f4bfda4e310bac6c111fcf6ea1f/rapidfuzz-3.14.1-cp314-cp314-win_amd64.whl", hash = "sha256:f51c7571295ea97387bac4f048d73cecce51222be78ed808263b45c79c40a440", size = 1587666, upload-time = "2025-09-08T21:07:46.917Z" },
+    { url = "https://files.pythonhosted.org/packages/a3/ff/d73fec989213fb6f0b6f15ee4bbdf2d88b0686197951a06b036111cd1c7d/rapidfuzz-3.14.1-cp314-cp314-win_arm64.whl", hash = "sha256:01eab10ec90912d7d28b3f08f6c91adbaf93458a53f849ff70776ecd70dd7a7a", size = 835780, upload-time = "2025-09-08T21:07:49.256Z" },
+    { url = "https://files.pythonhosted.org/packages/b7/e7/f0a242687143cebd33a1fb165226b73bd9496d47c5acfad93de820a18fa8/rapidfuzz-3.14.1-cp314-cp314t-macosx_10_13_x86_64.whl", hash = "sha256:60879fcae2f7618403c4c746a9a3eec89327d73148fb6e89a933b78442ff0669", size = 1945182, upload-time = "2025-09-08T21:07:51.84Z" },
+    { url = "https://files.pythonhosted.org/packages/96/29/ca8a3f8525e3d0e7ab49cb927b5fb4a54855f794c9ecd0a0b60a6c96a05f/rapidfuzz-3.14.1-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:f94d61e44db3fc95a74006a394257af90fa6e826c900a501d749979ff495d702", size = 1413946, upload-time = "2025-09-08T21:07:53.702Z" },
+    { url = "https://files.pythonhosted.org/packages/b5/ef/6fd10aa028db19c05b4ac7fe77f5613e4719377f630c709d89d7a538eea2/rapidfuzz-3.14.1-cp314-cp314t-win32.whl", hash = "sha256:93b6294a3ffab32a9b5f9b5ca048fa0474998e7e8bb0f2d2b5e819c64cb71ec7", size = 1795851, upload-time = "2025-09-08T21:07:55.76Z" },
+    { url = "https://files.pythonhosted.org/packages/e4/30/acd29ebd906a50f9e0f27d5f82a48cf5e8854637b21489bd81a2459985cf/rapidfuzz-3.14.1-cp314-cp314t-win_amd64.whl", hash = "sha256:6cb56b695421538fdbe2c0c85888b991d833b8637d2f2b41faa79cea7234c000", size = 1626748, upload-time = "2025-09-08T21:07:58.166Z" },
+    { url = "https://files.pythonhosted.org/packages/c1/f4/dfc7b8c46b1044a47f7ca55deceb5965985cff3193906cb32913121e6652/rapidfuzz-3.14.1-cp314-cp314t-win_arm64.whl", hash = "sha256:7cd312c380d3ce9d35c3ec9726b75eee9da50e8a38e89e229a03db2262d3d96b", size = 853771, upload-time = "2025-09-08T21:08:00.816Z" },
+]
+
 [[package]]
 name = "regex"
 version = "2025.9.1"
@@ -2613,6 +2822,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/ef/10/c78f463b4ef22eef8491f218f692be838282cd65480f6e423d7730dfd1fb/sse_starlette-3.0.2-py3-none-any.whl", hash = "sha256:16b7cbfddbcd4eaca11f7b586f3b8a080f1afe952c15813455b162edea619e5a", size = 11297, upload-time = "2025-07-27T09:07:43.268Z" },
 ]
 
+[[package]]
+name = "stamina"
+version = "25.1.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "tenacity" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/fd/c4/d242d76ffc88aa1fd14214d3143b542857b32276db4a20f8d99669054a5e/stamina-25.1.0.tar.gz", hash = "sha256:ad674809796ae40512b3b6296cfade826efd63863ff2ca2f59f806342e91e94a", size = 561127, upload-time = "2025-03-12T09:37:08.217Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/14/ba/d03f7ee711391af1d5f4dd7c44f8abdd06bce247028af2441ba8f6ff329b/stamina-25.1.0-py3-none-any.whl", hash = "sha256:c08291da540e6f4243c20f7ee98f0ed0ac9101d639803c481a029b56d7e9b45d", size = 17323, upload-time = "2025-03-12T09:37:06.886Z" },
+]
+
 [[package]]
 name = "starlette"
 version = "0.47.3"
@@ -2644,6 +2865,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/e5/30/643397144bfbfec6f6ef821f36f33e57d35946c44a2352d3c9f0ae847619/tenacity-9.1.2-py3-none-any.whl", hash = "sha256:f77bf36710d8b73a50b2dd155c97b870017ad21afe6ab300326b0371b3b05138", size = 28248, upload-time = "2025-04-02T08:25:07.678Z" },
 ]
 
+[[package]]
+name = "textdistance"
+version = "4.6.3"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/01/68/97ac72dd781301d6a52140066c68400c96f1a91f69737959e414844749b0/textdistance-4.6.3.tar.gz", hash = "sha256:d6dabc50b4ea832cdcf0e1e6021bd0c7fcd9ade155888d79bb6a3c31fce2dc6f", size = 32710, upload-time = "2024-07-16T09:34:54.09Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/c6/c2/c62601c858010b0513a6434b9be19bd740533a6e861eddfd30b7258d92a0/textdistance-4.6.3-py3-none-any.whl", hash = "sha256:0cb1b2cc8e3339ddc3e0f8c870e49fb49de6ecc42a718917308b3c971f34aa56", size = 31263, upload-time = "2024-07-16T09:34:51.082Z" },
+]
+
 [[package]]
 name = "tiktoken"
 version = "0.11.0"
@@ -2784,6 +3014,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/5c/23/c7abc0ca0a1526a0774eca151daeb8de62ec457e77262b66b359c3c7679e/tzdata-2025.2-py2.py3-none-any.whl", hash = "sha256:1a403fada01ff9221ca8044d701868fa132215d84beb92242d9acd2147f667a8", size = 347839, upload-time = "2025-03-23T13:54:41.845Z" },
 ]
 
+[[package]]
+name = "unidecode"
+version = "1.4.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/94/7d/a8a765761bbc0c836e397a2e48d498305a865b70a8600fd7a942e85dcf63/Unidecode-1.4.0.tar.gz", hash = "sha256:ce35985008338b676573023acc382d62c264f307c8f7963733405add37ea2b23", size = 200149, upload-time = "2025-04-24T08:45:03.798Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/8f/b7/559f59d57d18b44c6d1250d2eeaa676e028b9c527431f5d0736478a73ba1/Unidecode-1.4.0-py3-none-any.whl", hash = "sha256:c3c7606c27503ad8d501270406e345ddb480a7b5f38827eafe4fa82a137f0021", size = 235837, upload-time = "2025-04-24T08:45:01.609Z" },
+]
+
 [[package]]
 name = "urllib3"
 version = "2.5.0"
@@ -2845,11 +3084,13 @@ dependencies = [
     { name = "a2a-sdk", extra = ["http-server"] },
     { name = "agno", extra = ["openai"] },
     { name = "akshare" },
+    { name = "edgartools" },
     { name = "fastapi" },
     { name = "pydantic" },
     { name = "python-dateutil" },
     { name = "pytz" },
     { name = "requests" },
+    { name = "sqlalchemy" },
     { name = "tushare" },
     { name = "uvicorn" },
     { name = "yfinance" },
@@ -2860,6 +3101,7 @@ requires-dist = [
     { name = "a2a-sdk", extras = ["http-server"], specifier = ">=0.3.4" },
     { name = "agno", extras = ["openai"], specifier = ">=1.8.2,<2.0" },
     { name = "akshare", specifier = ">=1.17.44" },
+    { name = "edgartools", specifier = ">=4.12.2" },
     { name = "fastapi", specifier = ">=0.104.0" },
     { name = "pydantic", specifier = ">=2.0.0" },
     { name = "pytest", marker = "extra == 'dev'", specifier = ">=7.4.0" },
@@ -2869,12 +3111,27 @@ requires-dist = [
     { name = "pytz", specifier = ">=2023.3" },
     { name = "requests", specifier = ">=2.32.5" },
     { name = "ruff", marker = "extra == 'dev'" },
+    { name = "sqlalchemy", specifier = ">=2.0.43" },
     { name = "tushare", specifier = ">=1.4.24" },
     { name = "uvicorn", specifier = ">=0.24.0" },
     { name = "yfinance", specifier = ">=0.2.65" },
 ]
 provides-extras = ["dev"]
 
+[package.metadata.requires-dev]
+dev = [
+    { name = "pytest", specifier = ">=7.4.0" },
+    { name = "pytest-asyncio", specifier = ">=1.0.0" },
+    { name = "pytest-cov", specifier = ">=4.1.0" },
+    { name = "ruff" },
+]
+lint = [{ name = "ruff" }]
+test = [
+    { name = "pytest", specifier = ">=7.4.0" },
+    { name = "pytest-asyncio", specifier = ">=1.0.0" },
+    { name = "pytest-cov", specifier = ">=4.1.0" },
+]
+
 [[package]]
 name = "watchfiles"
 version = "1.1.0"

From 7fba762a81b559ee91f11827ff9f8a702f2a8bfd Mon Sep 17 00:00:00 2001
From: DigHuang <114602213+DigHuang@users.noreply.github.com>
Date: Tue, 23 Sep 2025 18:33:45 +0800
Subject: [PATCH 07/13] refactor: SSE hooks

Replaces useRef-based client management in useSSE with useMemo and explicit state tracking via useState. Removes unused onReconnect handler from SSEEventHandlers. This improves reliability of state updates and simplifies client lifecycle management.
---
 frontend/src/app/agent/chat.tsx |   6 +-
 frontend/src/hooks/use-sse.ts   | 103 +++++------
 frontend/src/lib/sse-client.ts  | 302 ++------------------------------
 3 files changed, 58 insertions(+), 353 deletions(-)

diff --git a/frontend/src/app/agent/chat.tsx b/frontend/src/app/agent/chat.tsx
index 0f058b658..6c2b53476 100644
--- a/frontend/src/app/agent/chat.tsx
+++ b/frontend/src/app/agent/chat.tsx
@@ -20,6 +20,7 @@ import ScrollTextarea, {
   type ScrollTextareaRef,
 } from "@/components/valuecell/scroll/scroll-textarea";
 import { useSSE } from "@/hooks/use-sse";
+import { SSEReadyState } from "@/lib/sse-client";
 import { cn } from "@/lib/utils";
 import { agentData } from "@/mock/agent-data";
 import type { AgentEventMap, AgentStreamRequest, SSEData } from "@/types/agent";
@@ -334,8 +335,7 @@ export default function AgentChat() {
   const {
     connect,
     close,
-    isConnected,
-    isConnecting,
+    state,
     error: sseError,
   } = useSSE({
     options: sseOptions,
@@ -350,6 +350,8 @@ export default function AgentChat() {
   }, [shouldClose, close]);
 
   // Derived state - compute from existing state instead of maintaining separately
+  const isConnected = state === SSEReadyState.OPEN;
+  const isConnecting = state === SSEReadyState.CONNECTING;
   const isStreaming = isConnected && !userInputRequired;
 
   // Send message to agent
diff --git a/frontend/src/hooks/use-sse.ts b/frontend/src/hooks/use-sse.ts
index 055337da5..5fc160506 100644
--- a/frontend/src/hooks/use-sse.ts
+++ b/frontend/src/hooks/use-sse.ts
@@ -20,20 +20,12 @@ export interface UseSSEOptions<T = AgentEventMap[keyof AgentEventMap]> {
 export interface UseSSEReturn<T = AgentEventMap[keyof AgentEventMap]> {
   /** Current connection state */
   state: SSEReadyState;
-  /** Whether the connection is open */
-  isConnected: boolean;
-  /** Whether the connection is connecting */
-  isConnecting: boolean;
-  /** Number of reconnection attempts */
-  reconnectAttempts: number;
   /** Current error, if any */
   error: Error | null;
   /** Connect to the SSE endpoint */
   connect: (body?: BodyInit) => Promise<void>;
   /** Close the SSE connection */
   close: () => void;
-  /** Update event handlers */
-  setEventHandlers: (handlers: SSEEventHandlers<T>) => void;
   /** SSE client instance for advanced usage */
   client: SSEClient<T> | null;
 }
@@ -90,15 +82,10 @@ export function useSSE<T = AgentEventMap[keyof AgentEventMap]>({
   body,
 }: UseSSEOptions<T>): UseSSEReturn<T> {
   const [error, setError] = useState<Error | null>(null);
-
-  const clientRef = useRef<SSEClient<T> | null>(null);
+  const [state, setState] = useState<SSEReadyState>(SSEReadyState.CLOSED);
   const handlersRef = useRef<SSEEventHandlers<T>>(handlers || {});
   const bodyRef = useRef<BodyInit | undefined>(body);
 
-  // Force re-render when client state changes
-  const [, setForceUpdate] = useState({});
-  const triggerUpdate = useCallback(() => setForceUpdate({}), []);
-
   // Update refs when props change
   useEffect(() => {
     handlersRef.current = handlers || {};
@@ -116,81 +103,69 @@ export function useSSE<T = AgentEventMap[keyof AgentEventMap]>({
       },
       onOpen: () => {
         setError(null);
-        triggerUpdate();
+        setState(SSEReadyState.OPEN);
         handlersRef.current.onOpen?.();
       },
       onError: (err) => {
         setError(err);
-        triggerUpdate();
+        setState(SSEReadyState.CLOSED);
         handlersRef.current.onError?.(err);
       },
       onClose: () => {
-        triggerUpdate();
+        setState(SSEReadyState.CLOSED);
         handlersRef.current.onClose?.();
       },
-      onReconnect: (attempt) => {
-        triggerUpdate();
-        handlersRef.current.onReconnect?.(attempt);
-      },
     }),
-    [triggerUpdate],
+    [],
   );
 
-  // Initialize client
-  useEffect(() => {
-    const client = new SSEClient<T>(options);
-    clientRef.current = client;
-
-    client.setEventHandlers(internalHandlers);
-
-    // Auto-connect if enabled
-    if (autoConnect) {
-      client.connect(bodyRef.current).catch((err) => {
-        console.error("Auto-connect failed:", err);
-      });
-    }
+  // Create client instance (caller is responsible for options stability)
+  const client = useMemo(
+    () => new SSEClient<T>(options, internalHandlers),
+    [options, internalHandlers],
+  );
 
+  // Cleanup on unmount or client change
+  useEffect(() => {
     return () => {
       client.destroy();
     };
-  }, [options, autoConnect, internalHandlers]); // Caller is responsible for options stability
-
-  const connect = useCallback(async (connectBody?: BodyInit) => {
-    if (!clientRef.current) return;
+  }, [client]);
 
-    setError(null);
-    try {
-      await clientRef.current.connect(connectBody ?? bodyRef.current);
-    } catch (err) {
-      setError(err as Error);
-      throw err;
+  // Auto-connect if enabled
+  useEffect(() => {
+    if (autoConnect) {
+      setState(SSEReadyState.CONNECTING);
+      void client.connect(bodyRef.current);
     }
-  }, []);
+  }, [autoConnect, client]);
+
+  const connect = useCallback(
+    async (connectBody?: BodyInit) => {
+      setError(null);
+      try {
+        setState(SSEReadyState.CONNECTING);
+        await client.connect(connectBody ?? bodyRef.current);
+      } catch (err) {
+        setError(err as Error);
+        setState(SSEReadyState.CLOSED);
+        throw err;
+      }
+    },
+    [client],
+  );
 
   const close = useCallback(() => {
-    if (clientRef.current) {
-      clientRef.current.close();
-    }
-  }, []);
-
-  const setEventHandlers = useCallback((newHandlers: SSEEventHandlers<T>) => {
-    handlersRef.current = { ...handlersRef.current, ...newHandlers };
-  }, []);
-
-  // Get current state from client, not duplicate state
-  const currentState = clientRef.current?.state ?? SSEReadyState.CLOSED;
-  const currentReconnectAttempts = clientRef.current?.reconnectAttempts ?? 0;
+    client.close();
+    setState(SSEReadyState.CLOSED);
+  }, [client]);
 
   return {
-    state: currentState,
-    isConnected: currentState === SSEReadyState.OPEN,
-    isConnecting: currentState === SSEReadyState.CONNECTING,
-    reconnectAttempts: currentReconnectAttempts,
+    state,
     error,
     connect,
     close,
-    setEventHandlers,
-    client: clientRef.current,
+    client,
   };
 }
 
diff --git a/frontend/src/lib/sse-client.ts b/frontend/src/lib/sse-client.ts
index 9cb1b2bb4..de277604d 100644
--- a/frontend/src/lib/sse-client.ts
+++ b/frontend/src/lib/sse-client.ts
@@ -2,18 +2,13 @@
  * Fetch-based SSE client library
  * Implements SSE using fetch + ReadableStream with custom headers, auto-reconnect, and type safety
  */
+import type { SSEData } from "@/types/agent";
 
 export interface SSEOptions {
   /** SSE endpoint URL */
   url: string;
   /** Custom request headers */
   headers?: Record<string, string>;
-  /** Enable automatic reconnection */
-  autoReconnect?: boolean;
-  /** Reconnection interval in milliseconds */
-  reconnectInterval?: number;
-  /** Maximum number of reconnection attempts */
-  maxReconnectAttempts?: number;
   /** Connection timeout in milliseconds */
   timeout?: number;
   /** Additional fetch request options */
@@ -29,8 +24,6 @@ export interface SSEEventHandlers<T = Record<string, unknown>> {
   onError?: (error: Error) => void;
   /** Called when connection is closed */
   onClose?: () => void;
-  /** Called during reconnection attempts */
-  onReconnect?: (attempt: number) => void;
 }
 
 export enum SSEReadyState {
@@ -43,30 +36,18 @@ export class SSEClient<T = Record<string, unknown>> {
   private options: Required<SSEOptions>;
   private currentBody?: BodyInit;
   private handlers: SSEEventHandlers<T> = {};
-  private reconnectCount = 0;
-  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
   private isManualClose = false;
   private readyState: SSEReadyState = SSEReadyState.CLOSED;
   private abortController: AbortController | null = null;
-  private reader: ReadableStreamDefaultReader<Uint8Array> | null = null;
 
-  constructor(options: SSEOptions) {
+  constructor(options: SSEOptions, handlers?: SSEEventHandlers<T>) {
     this.options = {
-      autoReconnect: false,
-      reconnectInterval: 3000,
-      maxReconnectAttempts: 10,
       timeout: 30000,
       headers: {},
       fetchOptions: {},
       ...options,
     };
-  }
-
-  /**
-   * Set event handlers for SSE events
-   */
-  setEventHandlers(handlers: SSEEventHandlers<T>): void {
-    this.handlers = { ...this.handlers, ...handlers };
+    this.handlers = handlers ?? {};
   }
 
   /**
@@ -74,29 +55,18 @@ export class SSEClient<T = Record<string, unknown>> {
    */
   async connect(body?: BodyInit): Promise<void> {
     // Prevent duplicate connections
-    if (this.readyState === SSEReadyState.CONNECTING) {
-      console.log("Already connecting, ignoring duplicate connect request");
-      return;
-    }
+    if (this.readyState === SSEReadyState.CONNECTING) return;
 
-    if (this.readyState === SSEReadyState.OPEN) {
-      console.log(
-        "Already connected, closing existing connection before reconnecting",
-      );
-      this.close();
-    }
+    if (this.readyState === SSEReadyState.OPEN) this.close();
 
     this.currentBody = body;
     this.isManualClose = false;
     this.readyState = SSEReadyState.CONNECTING;
     this.abortController = new AbortController();
 
-    try {
-      await this.startConnection();
-    } catch (error) {
-      this.readyState = SSEReadyState.CLOSED;
-      throw error;
-    }
+    // Start connection in the background; errors are handled via event handlers
+    void this.startConnection().catch(() => {});
+    return;
   }
 
   /**
@@ -135,7 +105,6 @@ export class SSEClient<T = Record<string, unknown>> {
 
       // Connection established
       this.readyState = SSEReadyState.OPEN;
-      this.reconnectCount = 0;
       this.handlers.onOpen?.();
 
       // Start reading the stream
@@ -150,14 +119,11 @@ export class SSEClient<T = Record<string, unknown>> {
           return;
         }
 
-        // Timeout: emit error and optionally reconnect based on config
+        // Timeout: emit error
         if (didTimeout) {
           const timeoutError = new Error("Connection timeout");
           this.handlers.onError?.(timeoutError);
-          if (this.options.autoReconnect) {
-            this.scheduleReconnect();
-          }
-          throw timeoutError;
+          return;
         }
 
         // Other aborts (e.g., superseded by a new connect): treat as normal close
@@ -167,10 +133,7 @@ export class SSEClient<T = Record<string, unknown>> {
 
       // Other network/HTTP errors
       this.handlers.onError?.(error as Error);
-      if (!this.isManualClose && this.options.autoReconnect) {
-        this.scheduleReconnect();
-      }
-      throw error;
+      return;
     }
   }
 
@@ -178,21 +141,17 @@ export class SSEClient<T = Record<string, unknown>> {
    * Read the response stream and process SSE events
    */
   private async readStream(body: ReadableStream<Uint8Array>): Promise<void> {
-    this.reader = body.getReader();
+    const reader = body.getReader();
     const decoder = new TextDecoder();
     let buffer = "";
 
     try {
       while (true) {
-        const { done, value } = await this.reader.read();
+        const { done, value } = await reader.read();
 
         if (done) {
           this.readyState = SSEReadyState.CLOSED;
-          if (!this.isManualClose && this.options.autoReconnect) {
-            this.scheduleReconnect();
-          } else {
-            this.handlers.onClose?.();
-          }
+          this.handlers.onClose?.();
           break;
         }
 
@@ -213,17 +172,11 @@ export class SSEClient<T = Record<string, unknown>> {
       }
     } catch (error) {
       this.readyState = SSEReadyState.CLOSED;
-
       if (!this.isManualClose) {
         this.handlers.onError?.(error as Error);
-
-        if (this.options.autoReconnect) {
-          this.scheduleReconnect();
-        }
       }
     } finally {
-      this.reader?.releaseLock();
-      this.reader = null;
+      reader.releaseLock();
     }
   }
 
@@ -259,35 +212,6 @@ export class SSEClient<T = Record<string, unknown>> {
     }
   }
 
-  /**
-   * Schedule a reconnection attempt
-   */
-  private scheduleReconnect(): void {
-    if (this.isManualClose) return;
-    // Check if already reconnecting
-    if (this.reconnectTimer !== null) return;
-
-    // Check if reached max attempts
-    if (this.reconnectCount >= this.options.maxReconnectAttempts) {
-      console.error(
-        `SSE reconnection failed: reached max attempts (${this.options.maxReconnectAttempts})`,
-      );
-      this.handlers.onClose?.();
-      return;
-    }
-
-    this.reconnectCount++;
-    this.handlers.onReconnect?.(this.reconnectCount);
-
-    this.reconnectTimer = setTimeout(() => {
-      this.reconnectTimer = null;
-      console.log(`SSE reconnecting... (attempt ${this.reconnectCount})`);
-      this.connect(this.currentBody).catch((error) => {
-        console.error("Reconnection failed:", error);
-      });
-    }, this.options.reconnectInterval);
-  }
-
   /**
    * Get current connection state
    */
@@ -295,27 +219,6 @@ export class SSEClient<T = Record<string, unknown>> {
     return this.readyState;
   }
 
-  /**
-   * Check if currently connected
-   */
-  get isConnected(): boolean {
-    return this.readyState === SSEReadyState.OPEN;
-  }
-
-  /**
-   * Check if currently connecting
-   */
-  get isConnecting(): boolean {
-    return this.readyState === SSEReadyState.CONNECTING;
-  }
-
-  /**
-   * Get number of reconnection attempts
-   */
-  get reconnectAttempts(): number {
-    return this.reconnectCount;
-  }
-
   /**
    * Close the SSE connection
    */
@@ -323,21 +226,11 @@ export class SSEClient<T = Record<string, unknown>> {
     this.isManualClose = true;
     this.readyState = SSEReadyState.CLOSED;
 
-    if (this.reconnectTimer) {
-      clearTimeout(this.reconnectTimer);
-      this.reconnectTimer = null;
-    }
-
     if (this.abortController) {
       this.abortController.abort();
       this.abortController = null;
     }
 
-    if (this.reader) {
-      this.reader.cancel();
-      this.reader = null;
-    }
-
     this.handlers.onClose?.();
   }
 
@@ -347,172 +240,7 @@ export class SSEClient<T = Record<string, unknown>> {
   destroy(): void {
     this.close();
     this.handlers = {};
-    this.reconnectCount = 0;
   }
 }
 
 export default SSEClient;
-
-import type { SSEData } from "@/types/agent";
-
-/*
-Usage Example:
-
-import SSEClient from './sse-client';
-import type { AgentEventMap, SSEData } from '@/types/agent';
-
-// Create SSE client with type safety
-const client = new SSEClient<AgentEventMap[keyof AgentEventMap]>({
-  url: 'http://localhost:8080/api/chat/stream',
-  headers: {
-    Authorization: `Bearer ${token}`,
-    'Content-Type': 'application/json',
-  },
-  autoReconnect: true,
-  reconnectInterval: 3000,
-  maxReconnectAttempts: 5,
-  timeout: 30000,
-  fetchOptions: {
-    credentials: 'include',
-  },
-});
-
-// Set up event handlers with full type safety
-client.setEventHandlers({
-  onData: (sseData: SSEData<AgentEventMap[keyof AgentEventMap]>) => {
-    // sseData contains { event: string, data: typed based on AgentEventMap }
-    const { event, data } = sseData;
-    
-    switch (event) {
-      case 'conversation_started':
-        console.log(`Conversation started: ${data.conversation_id}`);
-        break;
-        
-      case 'message_chunk':
-      case 'message':
-        console.log(`Message chunk: ${data.payload.content}`);
-        appendToMessage(data.thread_id, data.payload.content);
-        break;
-        
-      case 'component_generator':
-        console.log(`Component generated: ${data.payload.component_type}`);
-        renderComponent(data.payload.component_type, data.payload.content);
-        break;
-        
-      case 'plan_require_user_input':
-        console.log(`Plan requires user input: ${data.payload.content}`);
-        showUserInputPrompt(data.payload.content);
-        break;
-        
-      case 'tool_call_started':
-        console.log(`Tool call started: ${data.payload.tool_name}`);
-        showToolExecution(data.payload.tool_name, data.payload.tool_call_id);
-        break;
-        
-      case 'tool_call_completed':
-        console.log(`Tool call completed: ${data.payload.tool_call_id}`);
-        updateToolResult(data.payload.tool_call_id, data.payload.tool_call_result);
-        break;
-        
-      case 'reasoning':
-        console.log(`Reasoning: ${data.payload.content}`);
-        showReasoning(data.thread_id, data.payload.content);
-        break;
-        
-      case 'reasoning_started':
-        console.log(`Reasoning started for task: ${data.task_id}`);
-        showReasoningIndicator(data.thread_id, true);
-        break;
-        
-      case 'reasoning_completed':
-        console.log(`Reasoning completed for task: ${data.task_id}`);
-        showReasoningIndicator(data.thread_id, false);
-        break;
-        
-      case 'plan_failed':
-        console.log(`Plan failed: ${data.payload.content}`);
-        showError('plan', data.payload.content);
-        break;
-        
-      case 'task_failed':
-        console.log(`Task failed: ${data.payload.content}`);
-        showError('task', data.payload.content);
-        break;
-        
-      case 'done':
-        console.log(`Conversation ${data.conversation_id} completed`);
-        markConversationComplete(data.conversation_id);
-        break;
-    }
-  },
-  onOpen: () => console.log('SSE connection established'),
-  onError: (error) => console.error('SSE connection error:', error),
-  onClose: () => console.log('SSE connection closed'),
-  onReconnect: (attempt) => console.log(`Reconnecting (attempt ${attempt})`),
-});
-
-// Helper functions for UI updates
-function appendToMessage(threadId: string, content: string) {
-  const messageElement = document.getElementById(`thread-${threadId}`);
-  if (messageElement) {
-    messageElement.textContent += content;
-  }
-}
-
-function renderComponent(componentType: string, content: string) {
-  console.log(`Rendering component: ${componentType}`);
-  // Implementation for rendering different component types
-}
-
-function showUserInputPrompt(content: string) {
-  console.log(`User input required: ${content}`);
-  // Show user input dialog
-}
-
-function showToolExecution(toolName: string, toolCallId: string) {
-  console.log(`Executing tool: ${toolName} (ID: ${toolCallId})`);
-}
-
-function updateToolResult(toolCallId: string, result: string) {
-  console.log(`Tool ${toolCallId} completed with result: ${result}`);
-}
-
-function showReasoning(threadId: string, reasoning: string) {
-  console.log(`Reasoning for thread ${threadId}: ${reasoning}`);
-}
-
-function showReasoningIndicator(threadId: string, isActive: boolean) {
-  console.log(`Reasoning indicator for thread ${threadId}: ${isActive ? 'active' : 'inactive'}`);
-}
-
-function showError(type: 'plan' | 'task', content: string) {
-  console.error(`${type} error: ${content}`);
-}
-
-function markConversationComplete(conversationId: string) {
-  console.log(`Conversation ${conversationId} is complete`);
-}
-
-// Connect to stream with POST body
-const requestBody = JSON.stringify({
-  message: 'Hello, how can you help me?',
-  conversation_id: 123,
-  // Add any other POST data you need
-});
-
-await client.connect(requestBody);
-
-// Check connection status
-console.log({
-  isConnected: client.isConnected,
-  isConnecting: client.isConnecting,
-  reconnectAttempts: client.reconnectAttempts,
-  state: client.state,
-});
-
-// Close connection when done
-// client.close();
-
-// Destroy instance to clean up resources
-// client.destroy();
-*/

From f608bbe42c73749d7531730252992b3214bcbacc Mon Sep 17 00:00:00 2001
From: DigHuang <114602213+DigHuang@users.noreply.github.com>
Date: Wed, 24 Sep 2025 01:07:57 +0800
Subject: [PATCH 08/13] refactor: SSE and agent types

Refactored SSE client and hook to remove generic event typing and simplify handler signatures. Updated agent types for improved clarity and reduced repetition. Added agent-store.ts to manage agent conversation state and event handling.
---
 frontend/src/hooks/use-sse.ts   |  28 +-
 frontend/src/lib/agent-store.ts | 532 ++++++++++++++++++++++++++++++++
 frontend/src/lib/sse-client.ts  |  21 +-
 frontend/src/types/agent.ts     | 136 +++++---
 4 files changed, 643 insertions(+), 74 deletions(-)
 create mode 100644 frontend/src/lib/agent-store.ts

diff --git a/frontend/src/hooks/use-sse.ts b/frontend/src/hooks/use-sse.ts
index 5fc160506..8a538341d 100644
--- a/frontend/src/hooks/use-sse.ts
+++ b/frontend/src/hooks/use-sse.ts
@@ -4,22 +4,23 @@ import SSEClient, {
   type SSEOptions,
   SSEReadyState,
 } from "@/lib/sse-client";
-import type { AgentEventMap } from "@/types/agent";
 
-export interface UseSSEOptions<T = AgentEventMap[keyof AgentEventMap]> {
+export interface UseSSEOptions {
   /** SSE connection options */
   options: SSEOptions;
   /** Event handlers */
-  handlers?: SSEEventHandlers<T>;
+  handlers?: SSEEventHandlers;
   /** Whether to auto-connect on mount */
   autoConnect?: boolean;
   /** Request body for POST requests */
   body?: BodyInit;
 }
 
-export interface UseSSEReturn<T = AgentEventMap[keyof AgentEventMap]> {
+export interface UseSSEReturn {
   /** Current connection state */
   state: SSEReadyState;
+  /** Whether the connection is open */
+  isConnected: boolean;
   /** Current error, if any */
   error: Error | null;
   /** Connect to the SSE endpoint */
@@ -27,7 +28,7 @@ export interface UseSSEReturn<T = AgentEventMap[keyof AgentEventMap]> {
   /** Close the SSE connection */
   close: () => void;
   /** SSE client instance for advanced usage */
-  client: SSEClient<T> | null;
+  client: SSEClient | null;
 }
 
 /**
@@ -36,16 +37,16 @@ export interface UseSSEReturn<T = AgentEventMap[keyof AgentEventMap]> {
  * @example
  * ```tsx
  * import { useSSE } from '@/hooks/use-sse';
- * import type { AgentEventMap, SSEData } from '@/types/agent';
+ * import type { SSEData } from '@/types/agent';
  *
  * function ChatComponent() {
- *   const { connect, close, isConnected, error } = useSSE<AgentEventMap[keyof AgentEventMap]>({
+ *   const { connect, close, isConnected, error } = useSSE({
  *     options: {
  *       url: '/api/chat/stream',
  *       headers: { 'Authorization': 'Bearer token' }
  *     },
  *     handlers: {
- *       onData: (sseData: SSEData<AgentEventMap[keyof AgentEventMap]>) => {
+ *       onData: (sseData: SSEData) => {
  *         const { event, data } = sseData;
  *         if (event === 'message_chunk' || event === 'message') {
  *           console.log('New message chunk:', data.payload.content);
@@ -75,15 +76,15 @@ export interface UseSSEReturn<T = AgentEventMap[keyof AgentEventMap]> {
  * }
  * ```
  */
-export function useSSE<T = AgentEventMap[keyof AgentEventMap]>({
+export function useSSE({
   options,
   handlers,
   autoConnect = false,
   body,
-}: UseSSEOptions<T>): UseSSEReturn<T> {
+}: UseSSEOptions): UseSSEReturn {
   const [error, setError] = useState<Error | null>(null);
   const [state, setState] = useState<SSEReadyState>(SSEReadyState.CLOSED);
-  const handlersRef = useRef<SSEEventHandlers<T>>(handlers || {});
+  const handlersRef = useRef<SSEEventHandlers>(handlers || {});
   const bodyRef = useRef<BodyInit | undefined>(body);
 
   // Update refs when props change
@@ -96,7 +97,7 @@ export function useSSE<T = AgentEventMap[keyof AgentEventMap]>({
   }, [body]);
 
   // Internal handlers referencing handlersRef to avoid re-binding
-  const internalHandlers: SSEEventHandlers<T> = useMemo(
+  const internalHandlers: SSEEventHandlers = useMemo(
     () => ({
       onData: (sseData) => {
         handlersRef.current.onData?.(sseData);
@@ -121,7 +122,7 @@ export function useSSE<T = AgentEventMap[keyof AgentEventMap]>({
 
   // Create client instance (caller is responsible for options stability)
   const client = useMemo(
-    () => new SSEClient<T>(options, internalHandlers),
+    () => new SSEClient(options, internalHandlers),
     [options, internalHandlers],
   );
 
@@ -162,6 +163,7 @@ export function useSSE<T = AgentEventMap[keyof AgentEventMap]>({
 
   return {
     state,
+    isConnected: state === SSEReadyState.OPEN,
     error,
     connect,
     close,
diff --git a/frontend/src/lib/agent-store.ts b/frontend/src/lib/agent-store.ts
new file mode 100644
index 000000000..dd6a2ab3d
--- /dev/null
+++ b/frontend/src/lib/agent-store.ts
@@ -0,0 +1,532 @@
+import type {
+  AgentComponentMessage,
+  AgentConversationsStore,
+  AgentEventMap,
+  AgentReasoningMessage,
+  AgentSSE,
+  AgentTextMessage,
+  AgentToolCallMessage,
+  ChatMessage,
+  ConversationView,
+  SystemMessage,
+  ThreadView,
+} from "@/types/agent";
+
+type AnyAgentEvent = AgentSSE;
+
+function cloneThread(thread: ThreadView): ThreadView {
+  return {
+    ...thread,
+    messages: [...thread.messages],
+  };
+}
+
+function ensureConversation(
+  store: AgentConversationsStore,
+  conversationId: string,
+): [AgentConversationsStore, ConversationView] {
+  const existing = store[conversationId];
+  if (!existing) {
+    const next: AgentConversationsStore = { ...store };
+    const conversation: ConversationView = { threads: {} };
+    next[conversationId] = conversation;
+    return [next, conversation];
+  }
+  // Shallow clone to preserve immutability
+  const next: AgentConversationsStore = { ...store };
+  const conversation: ConversationView = {
+    ...existing,
+    threads: { ...existing.threads },
+  };
+  next[conversationId] = conversation;
+  return [next, conversation];
+}
+
+function ensureThread(
+  conversation: ConversationView,
+  threadId: string,
+): [ConversationView, ThreadView] {
+  const existing = conversation.threads[threadId];
+  if (!existing) {
+    const thread: ThreadView = { messages: [], status: "idle" };
+    const nextConversation: ConversationView = {
+      ...conversation,
+      threads: { ...conversation.threads, [threadId]: thread },
+      currentThreadId: threadId,
+    };
+    return [nextConversation, thread];
+  }
+  const clonedThread = cloneThread(existing);
+  const nextConversation: ConversationView = {
+    ...conversation,
+    threads: { ...conversation.threads, [threadId]: clonedThread },
+    currentThreadId: threadId,
+  };
+  return [nextConversation, clonedThread];
+}
+
+function isAgentTextMessage(msg: ChatMessage): msg is AgentTextMessage {
+  return msg.role === "agent" && "payload" in msg;
+}
+
+function isAgentToolCallMessage(msg: ChatMessage): msg is AgentToolCallMessage {
+  return msg.role === "agent" && "toolCall" in msg;
+}
+
+function isAgentReasoningMessage(
+  msg: ChatMessage,
+): msg is AgentReasoningMessage {
+  return msg.role === "agent" && "reasoning" in msg;
+}
+
+function findLastOpenAgentTextIndex(
+  messages: ChatMessage[],
+  taskId: string,
+  subtaskId?: string,
+): number {
+  for (let i = messages.length - 1; i >= 0; i -= 1) {
+    const m = messages[i];
+    if (!isAgentTextMessage(m)) continue;
+    if (m.task_id !== taskId) continue;
+    if (typeof subtaskId === "string" && m.subtask_id !== subtaskId) continue;
+    if (m.isComplete) continue;
+    return i;
+  }
+  return -1;
+}
+
+function pushToolCall(
+  thread: ThreadView,
+  payload:
+    | AgentEventMap["tool_call_started"]
+    | AgentEventMap["tool_call_completed"],
+  status: "started" | "completed",
+): void {
+  const now = new Date();
+  const msg: AgentToolCallMessage = {
+    role: "agent",
+    isComplete: status === "completed",
+    createdAt: now,
+    updatedAt: now,
+    conversation_id: payload.conversation_id,
+    thread_id: payload.thread_id,
+    task_id: payload.task_id,
+    subtask_id: payload.subtask_id,
+    toolCall: {
+      id: payload.payload.tool_call_id,
+      name: payload.payload.tool_name,
+      status,
+      startTime: now,
+      ...(status === "completed"
+        ? {
+            result: (payload as AgentEventMap["tool_call_completed"]).payload
+              .tool_call_result,
+            endTime: now,
+          }
+        : {}),
+    },
+  };
+  thread.messages.push(msg);
+}
+
+function updateToolCallCompleted(
+  thread: ThreadView,
+  payload: AgentEventMap["tool_call_completed"],
+): boolean {
+  for (let i = thread.messages.length - 1; i >= 0; i -= 1) {
+    const m = thread.messages[i];
+    if (!isAgentToolCallMessage(m)) continue;
+    if (m.toolCall.id !== payload.payload.tool_call_id) continue;
+    m.toolCall.status = "completed";
+    m.toolCall.result = payload.payload.tool_call_result;
+    m.toolCall.endTime = new Date();
+    m.isComplete = true;
+    m.updatedAt = new Date();
+    return true;
+  }
+  return false;
+}
+
+function pushAgentText(
+  thread: ThreadView,
+  base: Pick<
+    AgentEventMap["message_chunk"],
+    "conversation_id" | "thread_id" | "task_id" | "subtask_id"
+  >,
+  content: string,
+  isComplete: boolean,
+): void {
+  const msg: AgentTextMessage = {
+    role: "agent",
+    isComplete,
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    conversation_id: base.conversation_id,
+    thread_id: base.thread_id,
+    task_id: base.task_id,
+    subtask_id: base.subtask_id,
+    payload: { content },
+  };
+  thread.messages.push(msg);
+}
+
+function pushAgentComponent(
+  thread: ThreadView,
+  payload: AgentEventMap["component_generator"],
+): void {
+  const msg: AgentComponentMessage = {
+    role: "agent",
+    isComplete: true,
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    conversation_id: payload.conversation_id,
+    thread_id: payload.thread_id,
+    task_id: payload.task_id,
+    subtask_id: payload.subtask_id,
+    component: {
+      type: payload.payload.component_type,
+      content: payload.payload.content,
+    },
+  };
+  thread.messages.push(msg);
+}
+
+function pushSystemMessage(
+  thread: ThreadView,
+  partial: {
+    conversation_id?: string;
+    thread_id?: string;
+    task_id?: string;
+    subtask_id?: string;
+    content: string;
+  },
+): void {
+  const msg: SystemMessage = {
+    role: "system",
+    isComplete: true,
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    payload: { content: partial.content },
+    ...(partial.conversation_id
+      ? { conversation_id: partial.conversation_id }
+      : {}),
+    ...(partial.thread_id ? { thread_id: partial.thread_id } : {}),
+    ...(partial.task_id ? { task_id: partial.task_id } : {}),
+    ...(partial.subtask_id ? { subtask_id: partial.subtask_id } : {}),
+  };
+  thread.messages.push(msg);
+}
+
+// (Removed) ensureTextHostMessage is no longer needed after splitting message kinds
+
+function findLastOpenReasoningIndex(
+  thread: ThreadView,
+  taskId: string,
+  subtaskId?: string,
+): number {
+  for (let i = thread.messages.length - 1; i >= 0; i -= 1) {
+    const m = thread.messages[i];
+    if (!isAgentReasoningMessage(m)) continue;
+    if (m.task_id !== taskId) continue;
+    if (typeof subtaskId === "string" && m.subtask_id !== subtaskId) continue;
+    if (m.isComplete) continue;
+    return i;
+  }
+  return -1;
+}
+
+function pushReasoning(
+  thread: ThreadView,
+  base: Pick<
+    AgentEventMap["reasoning"],
+    "conversation_id" | "thread_id" | "task_id" | "subtask_id"
+  >,
+  content: string,
+  isComplete: boolean,
+): void {
+  const now = new Date();
+  const msg: AgentReasoningMessage = {
+    role: "agent",
+    isComplete,
+    createdAt: now,
+    updatedAt: now,
+    conversation_id: base.conversation_id,
+    thread_id: base.thread_id,
+    task_id: base.task_id,
+    subtask_id: base.subtask_id,
+    reasoning: content,
+  };
+  thread.messages.push(msg);
+}
+
+export function updateAgentConversationsStore(
+  store: AgentConversationsStore,
+  sse: AnyAgentEvent,
+): AgentConversationsStore {
+  const { event } = sse;
+  const data = sse.data as AgentEventMap[keyof AgentEventMap];
+
+  switch (event) {
+    case "conversation_started": {
+      const { conversation_id } = data as AgentEventMap["conversation_started"];
+      const [store2] = ensureConversation(store, conversation_id);
+      return store2;
+    }
+
+    case "done": {
+      const { conversation_id, thread_id } = data as AgentEventMap["done"];
+      const [store2, conv] = ensureConversation(store, conversation_id);
+      const [conv2, thread] = ensureThread(conv, thread_id);
+      thread.status = "done";
+      thread.lastUpdated = Date.now();
+      const next: AgentConversationsStore = {
+        ...store2,
+        [conversation_id]: conv2,
+      };
+      return next;
+    }
+
+    case "message_chunk": {
+      const payload = data as AgentEventMap["message_chunk"];
+      const [store2, conv] = ensureConversation(store, payload.conversation_id);
+      const [conv2, thread] = ensureThread(conv, payload.thread_id);
+
+      const idx = findLastOpenAgentTextIndex(
+        thread.messages,
+        payload.task_id,
+        payload.subtask_id,
+      );
+      if (idx === -1) {
+        pushAgentText(
+          thread,
+          {
+            conversation_id: payload.conversation_id,
+            thread_id: payload.thread_id,
+            task_id: payload.task_id,
+            subtask_id: payload.subtask_id,
+          },
+          payload.payload.content,
+          false,
+        );
+      } else {
+        const msg = thread.messages[idx] as AgentTextMessage;
+        msg.payload = {
+          content: `${msg.payload.content}${payload.payload.content}`,
+        };
+        msg.isComplete = false;
+        msg.updatedAt = new Date();
+      }
+
+      thread.status = "streaming";
+      thread.lastUpdated = Date.now();
+      const next: AgentConversationsStore = {
+        ...store2,
+        [payload.conversation_id]: conv2,
+      };
+      return next;
+    }
+
+    case "message": {
+      const payload = data as AgentEventMap["message"];
+      const [store2, conv] = ensureConversation(store, payload.conversation_id);
+      const [conv2, thread] = ensureThread(conv, payload.thread_id);
+
+      const idx = findLastOpenAgentTextIndex(
+        thread.messages,
+        payload.task_id,
+        payload.subtask_id,
+      );
+      if (idx === -1) {
+        pushAgentText(
+          thread,
+          {
+            conversation_id: payload.conversation_id,
+            thread_id: payload.thread_id,
+            task_id: payload.task_id,
+            subtask_id: payload.subtask_id,
+          },
+          payload.payload.content,
+          true,
+        );
+      } else {
+        const msg = thread.messages[idx] as AgentTextMessage;
+        msg.payload = { content: payload.payload.content };
+        msg.isComplete = true;
+        msg.updatedAt = new Date();
+      }
+
+      // After final message we set to idle; "done" will set to done
+      thread.status = "idle";
+      thread.lastUpdated = Date.now();
+      const next: AgentConversationsStore = {
+        ...store2,
+        [payload.conversation_id]: conv2,
+      };
+      return next;
+    }
+
+    case "reasoning": {
+      const payload = data as AgentEventMap["reasoning"];
+      const [store2, conv] = ensureConversation(store, payload.conversation_id);
+      const [conv2, thread] = ensureThread(conv, payload.thread_id);
+
+      const idx = findLastOpenReasoningIndex(
+        thread,
+        payload.task_id,
+        payload.subtask_id,
+      );
+      if (idx === -1) {
+        pushReasoning(
+          thread,
+          {
+            conversation_id: payload.conversation_id,
+            thread_id: payload.thread_id,
+            task_id: payload.task_id,
+            subtask_id: payload.subtask_id,
+          },
+          payload.payload.content,
+          false,
+        );
+      } else {
+        const msg = thread.messages[idx] as AgentReasoningMessage;
+        msg.reasoning = `${msg.reasoning}${payload.payload.content}`;
+        msg.isComplete = false;
+        msg.updatedAt = new Date();
+      }
+
+      thread.lastUpdated = Date.now();
+      const next: AgentConversationsStore = {
+        ...store2,
+        [payload.conversation_id]: conv2,
+      };
+      return next;
+    }
+
+    case "tool_call_started": {
+      const payload = data as AgentEventMap["tool_call_started"];
+      const [store2, conv] = ensureConversation(store, payload.conversation_id);
+      const [conv2, thread] = ensureThread(conv, payload.thread_id);
+      pushToolCall(thread, payload, "started");
+      thread.status = "streaming";
+      thread.lastUpdated = Date.now();
+      const next: AgentConversationsStore = {
+        ...store2,
+        [payload.conversation_id]: conv2,
+      };
+      return next;
+    }
+
+    case "tool_call_completed": {
+      const payload = data as AgentEventMap["tool_call_completed"];
+      const [store2, conv] = ensureConversation(store, payload.conversation_id);
+      const [conv2, thread] = ensureThread(conv, payload.thread_id);
+      const updated = updateToolCallCompleted(thread, payload);
+      if (!updated) {
+        pushToolCall(thread, payload, "completed");
+      }
+      thread.lastUpdated = Date.now();
+      const next: AgentConversationsStore = {
+        ...store2,
+        [payload.conversation_id]: conv2,
+      };
+      return next;
+    }
+
+    case "component_generator": {
+      const payload = data as AgentEventMap["component_generator"];
+      const [store2, conv] = ensureConversation(store, payload.conversation_id);
+      const [conv2, thread] = ensureThread(conv, payload.thread_id);
+      pushAgentComponent(thread, payload);
+      thread.lastUpdated = Date.now();
+      const next: AgentConversationsStore = {
+        ...store2,
+        [payload.conversation_id]: conv2,
+      };
+      return next;
+    }
+
+    case "plan_failed": {
+      const payload = data as AgentEventMap["plan_failed"];
+      const [store2, conv] = ensureConversation(store, payload.conversation_id);
+      const [conv2, thread] = ensureThread(conv, payload.thread_id);
+      pushSystemMessage(thread, {
+        conversation_id: payload.conversation_id,
+        thread_id: payload.thread_id,
+        content: payload.payload.content,
+      });
+      thread.status = "idle";
+      thread.lastUpdated = Date.now();
+      const next: AgentConversationsStore = {
+        ...store2,
+        [payload.conversation_id]: conv2,
+      };
+      return next;
+    }
+
+    case "task_failed": {
+      const payload = data as AgentEventMap["task_failed"];
+      const [store2, conv] = ensureConversation(store, payload.conversation_id);
+      const [conv2, thread] = ensureThread(conv, payload.thread_id);
+      pushSystemMessage(thread, {
+        conversation_id: payload.conversation_id,
+        thread_id: payload.thread_id,
+        task_id: payload.task_id,
+        subtask_id: payload.subtask_id,
+        content: payload.payload.content,
+      });
+      thread.status = "idle";
+      thread.lastUpdated = Date.now();
+      const next: AgentConversationsStore = {
+        ...store2,
+        [payload.conversation_id]: conv2,
+      };
+      return next;
+    }
+
+    case "plan_require_user_input": {
+      const payload = data as AgentEventMap["plan_require_user_input"];
+      const [store2, conv] = ensureConversation(store, payload.conversation_id);
+      const [conv2, thread] = ensureThread(conv, payload.thread_id);
+      thread.status = "awaiting_user";
+      thread.lastUpdated = Date.now();
+      const next: AgentConversationsStore = {
+        ...store2,
+        [payload.conversation_id]: conv2,
+      };
+      return next;
+    }
+
+    case "reasoning_started": {
+      const payload = data as AgentEventMap["reasoning_started"];
+      const [store2, conv] = ensureConversation(store, payload.conversation_id);
+      const [conv2, thread] = ensureThread(conv, payload.thread_id);
+      thread.status = "streaming";
+      thread.lastUpdated = Date.now();
+      const next: AgentConversationsStore = {
+        ...store2,
+        [payload.conversation_id]: conv2,
+      };
+      return next;
+    }
+
+    case "reasoning_completed": {
+      const payload = data as AgentEventMap["reasoning_completed"];
+      const [store2, conv] = ensureConversation(store, payload.conversation_id);
+      const [conv2, thread] = ensureThread(conv, payload.thread_id);
+      // Keep status unchanged; it may still be streaming for message/tool calls
+      thread.lastUpdated = Date.now();
+      const next: AgentConversationsStore = {
+        ...store2,
+        [payload.conversation_id]: conv2,
+      };
+      return next;
+    }
+
+    default:
+      return store;
+  }
+}
+
+export function createEmptyConversationsStore(): AgentConversationsStore {
+  return {};
+}
diff --git a/frontend/src/lib/sse-client.ts b/frontend/src/lib/sse-client.ts
index de277604d..c453b5a9c 100644
--- a/frontend/src/lib/sse-client.ts
+++ b/frontend/src/lib/sse-client.ts
@@ -1,6 +1,6 @@
 /**
  * Fetch-based SSE client library
- * Implements SSE using fetch + ReadableStream with custom headers, auto-reconnect, and type safety
+ * Implements SSE using fetch + ReadableStream with custom headers and type safety
  */
 import type { SSEData } from "@/types/agent";
 
@@ -9,15 +9,15 @@ export interface SSEOptions {
   url: string;
   /** Custom request headers */
   headers?: Record<string, string>;
-  /** Connection timeout in milliseconds */
+  /** Handshake timeout in milliseconds */
   timeout?: number;
   /** Additional fetch request options */
   fetchOptions?: Omit<RequestInit, "method" | "body" | "headers" | "signal">;
 }
 
-export interface SSEEventHandlers<T = Record<string, unknown>> {
+export interface SSEEventHandlers {
   /** Called when SSE data is received */
-  onData?: (data: SSEData<T>) => void;
+  onData?: (data: SSEData) => void;
   /** Called when connection is established */
   onOpen?: () => void;
   /** Called when an error occurs */
@@ -32,15 +32,15 @@ export enum SSEReadyState {
   CLOSED = 2,
 }
 
-export class SSEClient<T = Record<string, unknown>> {
+export class SSEClient {
   private options: Required<SSEOptions>;
   private currentBody?: BodyInit;
-  private handlers: SSEEventHandlers<T> = {};
+  private handlers: SSEEventHandlers = {};
   private isManualClose = false;
   private readyState: SSEReadyState = SSEReadyState.CLOSED;
   private abortController: AbortController | null = null;
 
-  constructor(options: SSEOptions, handlers?: SSEEventHandlers<T>) {
+  constructor(options: SSEOptions, handlers?: SSEEventHandlers) {
     this.options = {
       timeout: 30000,
       headers: {},
@@ -88,7 +88,6 @@ export class SSEClient<T = Record<string, unknown>> {
         headers: {
           Accept: "text/event-stream",
           "Cache-Control": "no-cache",
-          Connection: "keep-alive",
           ...this.options.headers,
         },
       });
@@ -119,9 +118,9 @@ export class SSEClient<T = Record<string, unknown>> {
           return;
         }
 
-        // Timeout: emit error
+        // Handshake timeout: emit error
         if (didTimeout) {
-          const timeoutError = new Error("Connection timeout");
+          const timeoutError = new Error("Handshake timeout");
           this.handlers.onError?.(timeoutError);
           return;
         }
@@ -204,7 +203,7 @@ export class SSEClient<T = Record<string, unknown>> {
 
       // Pass through parsed payload without interpreting event names
       if (this.handlers.onData) {
-        this.handlers.onData(parsedData as SSEData<T>);
+        this.handlers.onData(parsedData as SSEData);
       }
     } catch (error) {
       // Only log JSON parsing errors, don't trigger connection-level error handling
diff --git a/frontend/src/types/agent.ts b/frontend/src/types/agent.ts
index 4e617efbc..5fe3fea97 100644
--- a/frontend/src/types/agent.ts
+++ b/frontend/src/types/agent.ts
@@ -1,11 +1,5 @@
 // Agent communication types for SSE events and business logic
 
-// SSE data wrapper
-export interface SSEData<T = Record<string, unknown>> {
-  event: string;
-  data: T;
-}
-
 // Base event data structures
 interface BaseEventData {
   conversation_id: string; // Top-level conversation session
@@ -19,80 +13,122 @@ interface PayloadWrapper<T> {
   payload: T;
 }
 
+// Helper types to reduce repetition
+type EventWithPayload<TEvent, TPayload> = TEvent & PayloadWrapper<TPayload>;
+type MessageWithRole<TRole extends string, TPayload> = BaseEventData & {
+  role: TRole;
+} & PayloadWrapper<TPayload>;
+
 // Agent SSE event mapping
 export interface AgentEventMap {
   // Lifecycle Events
   conversation_started: Pick<BaseEventData, "conversation_id">;
-
   done: Pick<BaseEventData, "conversation_id" | "thread_id">;
 
   // Content Streaming Events
-  message_chunk: BaseEventData &
-    PayloadWrapper<{
-      content: string;
-    }>;
-
-  message: BaseEventData &
-    PayloadWrapper<{
-      content: string;
-    }>;
+  message_chunk: EventWithPayload<BaseEventData, { content: string }>;
+  message: EventWithPayload<BaseEventData, { content: string }>;
 
   // Component Generation
-  component_generator: BaseEventData &
-    PayloadWrapper<{
+  component_generator: EventWithPayload<
+    BaseEventData,
+    {
       component_type: string;
       content: string;
-    }>;
+    }
+  >;
 
   // User Interaction
-  plan_require_user_input: Pick<
-    BaseEventData,
-    "conversation_id" | "thread_id"
-  > &
-    PayloadWrapper<{
-      content: string;
-    }>;
+  plan_require_user_input: EventWithPayload<
+    Pick<BaseEventData, "conversation_id" | "thread_id">,
+    { content: string }
+  >;
 
   // Tool Execution Lifecycle
-  tool_call_started: BaseEventData &
-    PayloadWrapper<{
+  tool_call_started: EventWithPayload<
+    BaseEventData,
+    {
       tool_call_id: string;
       tool_name: string;
-    }>;
+    }
+  >;
 
-  tool_call_completed: BaseEventData &
-    PayloadWrapper<{
+  tool_call_completed: EventWithPayload<
+    BaseEventData,
+    {
       tool_call_id: string;
       tool_name: string;
       tool_call_result: string;
-    }>;
+    }
+  >;
 
   // Reasoning Process
-  reasoning: BaseEventData &
-    PayloadWrapper<{
-      content: string;
-    }>;
-
+  reasoning: EventWithPayload<BaseEventData, { content: string }>;
   reasoning_started: BaseEventData;
   reasoning_completed: BaseEventData;
 
   // Error Handling
-  plan_failed: Pick<BaseEventData, "conversation_id" | "thread_id"> &
-    PayloadWrapper<{
-      content: string;
-    }>;
+  plan_failed: EventWithPayload<
+    Pick<BaseEventData, "conversation_id" | "thread_id">,
+    { content: string }
+  >;
+  task_failed: EventWithPayload<BaseEventData, { content: string }>;
+}
 
-  task_failed: BaseEventData &
-    PayloadWrapper<{
-      content: string;
-    }>;
+// Final chat message shapes used by UI
+export type AgentChunkMessage = MessageWithRole<
+  "agent" | "user" | "system",
+  { content: string }
+>;
+
+export type AgentComponentMessage = MessageWithRole<
+  "agent",
+  {
+    component_type: string;
+    content: string;
+  }
+>;
+
+export type AgentToolCallMessage = MessageWithRole<
+  "agent",
+  {
+    tool_call_id: string;
+    tool_name: string;
+    tool_call_result: string;
+  }
+>;
+
+export type AgentReasoningMessage = MessageWithRole<
+  "agent",
+  { content: string }
+>;
+
+export type ChatMessage =
+  | AgentComponentMessage
+  | AgentToolCallMessage
+  | AgentReasoningMessage
+  | AgentChunkMessage;
+
+export interface ThreadView {
+  messages: ChatMessage[];
+}
+
+export interface ConversationView {
+  threads: Record<string, ThreadView>;
+  currentThreadId?: string;
 }
 
-// Chat message with event data
-export type ChatMessage<T extends keyof AgentEventMap> = {
-  role: "user" | "system" | "agent";
-  isComplete: boolean;
-} & AgentEventMap[T];
+export type AgentConversationsStore = Record<string, ConversationView>;
+
+// SSE data wrapper with strongly-typed Agent events (discriminated union)
+export type SSEData = {
+  [E in keyof AgentEventMap]: {
+    /** Event type identifier */
+    event: E;
+    /** Event payload data */
+    data: AgentEventMap[E];
+  };
+}[keyof AgentEventMap];
 
 // Agent stream request
 export type AgentStreamRequest = {

From c2794f53a488369a5fc9f8046fe7c05dadad85ed Mon Sep 17 00:00:00 2001
From: DigHuang <114602213+DigHuang@users.noreply.github.com>
Date: Wed, 24 Sep 2025 02:02:48 +0800
Subject: [PATCH 09/13] refactor: agent-store to use mutative and simplify
 event handling

Replaces manual immutable update logic in agent-store.ts with mutative for concise state updates. Refactors event handling to a handler map, reducing code complexity and improving maintainability. Updates agent.ts types to split tool call messages and add explicit plan/task failure message types. Adds mutative dependency to package.json.
---
 frontend/bun.lock               |   3 +
 frontend/package.json           |   1 +
 frontend/src/lib/agent-store.ts | 625 +++++++-------------------------
 frontend/src/types/agent.ts     |  26 +-
 4 files changed, 158 insertions(+), 497 deletions(-)

diff --git a/frontend/bun.lock b/frontend/bun.lock
index 45be85ff4..5a2bc91cd 100644
--- a/frontend/bun.lock
+++ b/frontend/bun.lock
@@ -19,6 +19,7 @@
         "echarts": "^6.0.0",
         "isbot": "^5",
         "lucide-react": "^0.544.0",
+        "mutative": "^1.3.0",
         "overlayscrollbars": "^2.12.0",
         "overlayscrollbars-react": "^0.5.6",
         "react": "^19.1.1",
@@ -985,6 +986,8 @@
 
     "msw": ["msw@2.11.2", "https://registry.npmmirror.com/msw/-/msw-2.11.2.tgz", { "dependencies": { "@bundled-es-modules/cookie": "^2.0.1", "@bundled-es-modules/statuses": "^1.0.1", "@inquirer/confirm": "^5.0.0", "@mswjs/interceptors": "^0.39.1", "@open-draft/deferred-promise": "^2.2.0", "@open-draft/until": "^2.1.0", "@types/cookie": "^0.6.0", "@types/statuses": "^2.0.4", "graphql": "^16.8.1", "headers-polyfill": "^4.0.2", "is-node-process": "^1.2.0", "outvariant": "^1.4.3", "path-to-regexp": "^6.3.0", "picocolors": "^1.1.1", "rettime": "^0.7.0", "strict-event-emitter": "^0.5.1", "tough-cookie": "^6.0.0", "type-fest": "^4.26.1", "yargs": "^17.7.2" }, "peerDependencies": { "typescript": ">= 4.8.x" }, "optionalPeers": ["typescript"], "bin": { "msw": "cli/index.js" } }, "sha512-MI54hLCsrMwiflkcqlgYYNJJddY5/+S0SnONvhv1owOplvqohKSQyGejpNdUGyCwgs4IH7PqaNbPw/sKOEze9Q=="],
 
+    "mutative": ["mutative@1.3.0", "", {}, "sha512-8MJj6URmOZAV70dpFe1YnSppRTKC4DsMkXQiBDFayLcDI4ljGokHxmpqaBQuDWa4iAxWaJJ1PS8vAmbntjjKmQ=="],
+
     "mute-stream": ["mute-stream@2.0.0", "https://registry.npmmirror.com/mute-stream/-/mute-stream-2.0.0.tgz", {}, "sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA=="],
 
     "nanoid": ["nanoid@3.3.11", "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
diff --git a/frontend/package.json b/frontend/package.json
index 758e543dd..320bd3c55 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -25,6 +25,7 @@
     "echarts": "^6.0.0",
     "isbot": "^5",
     "lucide-react": "^0.544.0",
+    "mutative": "^1.3.0",
     "overlayscrollbars": "^2.12.0",
     "overlayscrollbars-react": "^0.5.6",
     "react": "^19.1.1",
diff --git a/frontend/src/lib/agent-store.ts b/frontend/src/lib/agent-store.ts
index dd6a2ab3d..4686b927c 100644
--- a/frontend/src/lib/agent-store.ts
+++ b/frontend/src/lib/agent-store.ts
@@ -1,532 +1,169 @@
+import { create } from "mutative";
 import type {
-  AgentComponentMessage,
   AgentConversationsStore,
   AgentEventMap,
-  AgentReasoningMessage,
-  AgentSSE,
-  AgentTextMessage,
-  AgentToolCallMessage,
-  ChatMessage,
   ConversationView,
-  SystemMessage,
+  SSEData,
   ThreadView,
 } from "@/types/agent";
 
-type AnyAgentEvent = AgentSSE;
-
-function cloneThread(thread: ThreadView): ThreadView {
-  return {
-    ...thread,
-    messages: [...thread.messages],
-  };
-}
-
+// Helper function: ensure conversation exists (for mutative draft)
 function ensureConversation(
-  store: AgentConversationsStore,
+  draft: AgentConversationsStore,
   conversationId: string,
-): [AgentConversationsStore, ConversationView] {
-  const existing = store[conversationId];
-  if (!existing) {
-    const next: AgentConversationsStore = { ...store };
-    const conversation: ConversationView = { threads: {} };
-    next[conversationId] = conversation;
-    return [next, conversation];
+): ConversationView {
+  if (!draft[conversationId]) {
+    draft[conversationId] = { threads: {} };
   }
-  // Shallow clone to preserve immutability
-  const next: AgentConversationsStore = { ...store };
-  const conversation: ConversationView = {
-    ...existing,
-    threads: { ...existing.threads },
-  };
-  next[conversationId] = conversation;
-  return [next, conversation];
+  return draft[conversationId];
 }
 
+// Helper function: ensure thread exists (for mutative draft)
 function ensureThread(
   conversation: ConversationView,
   threadId: string,
-): [ConversationView, ThreadView] {
-  const existing = conversation.threads[threadId];
-  if (!existing) {
-    const thread: ThreadView = { messages: [], status: "idle" };
-    const nextConversation: ConversationView = {
-      ...conversation,
-      threads: { ...conversation.threads, [threadId]: thread },
-      currentThreadId: threadId,
-    };
-    return [nextConversation, thread];
+): ThreadView {
+  if (!conversation.threads[threadId]) {
+    conversation.threads[threadId] = { messages: [] };
   }
-  const clonedThread = cloneThread(existing);
-  const nextConversation: ConversationView = {
-    ...conversation,
-    threads: { ...conversation.threads, [threadId]: clonedThread },
-    currentThreadId: threadId,
-  };
-  return [nextConversation, clonedThread];
+  conversation.currentThreadId = threadId;
+  return conversation.threads[threadId];
 }
 
-function isAgentTextMessage(msg: ChatMessage): msg is AgentTextMessage {
-  return msg.role === "agent" && "payload" in msg;
-}
+// Event handlers: one handler function per event type
+const eventHandlers = {
+  conversation_started: (
+    draft: AgentConversationsStore,
+    data: AgentEventMap["conversation_started"],
+  ) => {
+    ensureConversation(draft, data.conversation_id);
+  },
 
-function isAgentToolCallMessage(msg: ChatMessage): msg is AgentToolCallMessage {
-  return msg.role === "agent" && "toolCall" in msg;
-}
+  done: (draft: AgentConversationsStore, data: AgentEventMap["done"]) => {
+    const conversation = ensureConversation(draft, data.conversation_id);
+    ensureThread(conversation, data.thread_id);
+  },
 
-function isAgentReasoningMessage(
-  msg: ChatMessage,
-): msg is AgentReasoningMessage {
-  return msg.role === "agent" && "reasoning" in msg;
-}
+  message_chunk: (
+    draft: AgentConversationsStore,
+    data: AgentEventMap["message_chunk"],
+  ) => {
+    const conversation = ensureConversation(draft, data.conversation_id);
+    const thread = ensureThread(conversation, data.thread_id);
+    thread.messages.push({ role: "agent", ...data });
+  },
 
-function findLastOpenAgentTextIndex(
-  messages: ChatMessage[],
-  taskId: string,
-  subtaskId?: string,
-): number {
-  for (let i = messages.length - 1; i >= 0; i -= 1) {
-    const m = messages[i];
-    if (!isAgentTextMessage(m)) continue;
-    if (m.task_id !== taskId) continue;
-    if (typeof subtaskId === "string" && m.subtask_id !== subtaskId) continue;
-    if (m.isComplete) continue;
-    return i;
-  }
-  return -1;
-}
+  message: (draft: AgentConversationsStore, data: AgentEventMap["message"]) => {
+    const conversation = ensureConversation(draft, data.conversation_id);
+    const thread = ensureThread(conversation, data.thread_id);
+    thread.messages.push({ role: "agent", ...data });
+  },
 
-function pushToolCall(
-  thread: ThreadView,
-  payload:
-    | AgentEventMap["tool_call_started"]
-    | AgentEventMap["tool_call_completed"],
-  status: "started" | "completed",
-): void {
-  const now = new Date();
-  const msg: AgentToolCallMessage = {
-    role: "agent",
-    isComplete: status === "completed",
-    createdAt: now,
-    updatedAt: now,
-    conversation_id: payload.conversation_id,
-    thread_id: payload.thread_id,
-    task_id: payload.task_id,
-    subtask_id: payload.subtask_id,
-    toolCall: {
-      id: payload.payload.tool_call_id,
-      name: payload.payload.tool_name,
-      status,
-      startTime: now,
-      ...(status === "completed"
-        ? {
-            result: (payload as AgentEventMap["tool_call_completed"]).payload
-              .tool_call_result,
-            endTime: now,
-          }
-        : {}),
-    },
-  };
-  thread.messages.push(msg);
-}
+  reasoning: (
+    draft: AgentConversationsStore,
+    data: AgentEventMap["reasoning"],
+  ) => {
+    const conversation = ensureConversation(draft, data.conversation_id);
+    const thread = ensureThread(conversation, data.thread_id);
+    thread.messages.push({ role: "agent", ...data });
+  },
 
-function updateToolCallCompleted(
-  thread: ThreadView,
-  payload: AgentEventMap["tool_call_completed"],
-): boolean {
-  for (let i = thread.messages.length - 1; i >= 0; i -= 1) {
-    const m = thread.messages[i];
-    if (!isAgentToolCallMessage(m)) continue;
-    if (m.toolCall.id !== payload.payload.tool_call_id) continue;
-    m.toolCall.status = "completed";
-    m.toolCall.result = payload.payload.tool_call_result;
-    m.toolCall.endTime = new Date();
-    m.isComplete = true;
-    m.updatedAt = new Date();
-    return true;
-  }
-  return false;
-}
+  tool_call_started: (
+    draft: AgentConversationsStore,
+    data: AgentEventMap["tool_call_started"],
+  ) => {
+    const conversation = ensureConversation(draft, data.conversation_id);
+    const thread = ensureThread(conversation, data.thread_id);
+    thread.messages.push({
+      role: "agent",
+      ...data,
+    });
+  },
 
-function pushAgentText(
-  thread: ThreadView,
-  base: Pick<
-    AgentEventMap["message_chunk"],
-    "conversation_id" | "thread_id" | "task_id" | "subtask_id"
-  >,
-  content: string,
-  isComplete: boolean,
-): void {
-  const msg: AgentTextMessage = {
-    role: "agent",
-    isComplete,
-    createdAt: new Date(),
-    updatedAt: new Date(),
-    conversation_id: base.conversation_id,
-    thread_id: base.thread_id,
-    task_id: base.task_id,
-    subtask_id: base.subtask_id,
-    payload: { content },
-  };
-  thread.messages.push(msg);
-}
+  tool_call_completed: (
+    draft: AgentConversationsStore,
+    data: AgentEventMap["tool_call_completed"],
+  ) => {
+    const conversation = ensureConversation(draft, data.conversation_id);
+    const thread = ensureThread(conversation, data.thread_id);
+    thread.messages.push({ role: "agent", ...data });
+  },
 
-function pushAgentComponent(
-  thread: ThreadView,
-  payload: AgentEventMap["component_generator"],
-): void {
-  const msg: AgentComponentMessage = {
-    role: "agent",
-    isComplete: true,
-    createdAt: new Date(),
-    updatedAt: new Date(),
-    conversation_id: payload.conversation_id,
-    thread_id: payload.thread_id,
-    task_id: payload.task_id,
-    subtask_id: payload.subtask_id,
-    component: {
-      type: payload.payload.component_type,
-      content: payload.payload.content,
-    },
-  };
-  thread.messages.push(msg);
-}
+  component_generator: (
+    draft: AgentConversationsStore,
+    data: AgentEventMap["component_generator"],
+  ) => {
+    const conversation = ensureConversation(draft, data.conversation_id);
+    const thread = ensureThread(conversation, data.thread_id);
+    thread.messages.push({ role: "agent", ...data });
+  },
 
-function pushSystemMessage(
-  thread: ThreadView,
-  partial: {
-    conversation_id?: string;
-    thread_id?: string;
-    task_id?: string;
-    subtask_id?: string;
-    content: string;
+  plan_failed: (
+    draft: AgentConversationsStore,
+    data: AgentEventMap["plan_failed"],
+  ) => {
+    const conversation = ensureConversation(draft, data.conversation_id);
+    const thread = ensureThread(conversation, data.thread_id);
+    thread.messages.push({
+      role: "agent",
+      ...data,
+    });
   },
-): void {
-  const msg: SystemMessage = {
-    role: "system",
-    isComplete: true,
-    createdAt: new Date(),
-    updatedAt: new Date(),
-    payload: { content: partial.content },
-    ...(partial.conversation_id
-      ? { conversation_id: partial.conversation_id }
-      : {}),
-    ...(partial.thread_id ? { thread_id: partial.thread_id } : {}),
-    ...(partial.task_id ? { task_id: partial.task_id } : {}),
-    ...(partial.subtask_id ? { subtask_id: partial.subtask_id } : {}),
-  };
-  thread.messages.push(msg);
-}
 
-// (Removed) ensureTextHostMessage is no longer needed after splitting message kinds
+  plan_require_user_input: (
+    draft: AgentConversationsStore,
+    data: AgentEventMap["plan_require_user_input"],
+  ) => {
+    const conversation = ensureConversation(draft, data.conversation_id);
+    const thread = ensureThread(conversation, data.thread_id);
+    thread.messages.push({
+      role: "agent",
+      ...data,
+    });
+  },
 
-function findLastOpenReasoningIndex(
-  thread: ThreadView,
-  taskId: string,
-  subtaskId?: string,
-): number {
-  for (let i = thread.messages.length - 1; i >= 0; i -= 1) {
-    const m = thread.messages[i];
-    if (!isAgentReasoningMessage(m)) continue;
-    if (m.task_id !== taskId) continue;
-    if (typeof subtaskId === "string" && m.subtask_id !== subtaskId) continue;
-    if (m.isComplete) continue;
-    return i;
-  }
-  return -1;
-}
+  task_failed: (
+    draft: AgentConversationsStore,
+    data: AgentEventMap["task_failed"],
+  ) => {
+    const conversation = ensureConversation(draft, data.conversation_id);
+    const thread = ensureThread(conversation, data.thread_id);
+    thread.messages.push({ role: "agent", ...data });
+  },
 
-function pushReasoning(
-  thread: ThreadView,
-  base: Pick<
-    AgentEventMap["reasoning"],
-    "conversation_id" | "thread_id" | "task_id" | "subtask_id"
-  >,
-  content: string,
-  isComplete: boolean,
-): void {
-  const now = new Date();
-  const msg: AgentReasoningMessage = {
-    role: "agent",
-    isComplete,
-    createdAt: now,
-    updatedAt: now,
-    conversation_id: base.conversation_id,
-    thread_id: base.thread_id,
-    task_id: base.task_id,
-    subtask_id: base.subtask_id,
-    reasoning: content,
-  };
-  thread.messages.push(msg);
-}
+  reasoning_started: (
+    draft: AgentConversationsStore,
+    data: AgentEventMap["reasoning_started"],
+  ) => {
+    const conversation = ensureConversation(draft, data.conversation_id);
+    ensureThread(conversation, data.thread_id);
+  },
+
+  reasoning_completed: (
+    draft: AgentConversationsStore,
+    data: AgentEventMap["reasoning_completed"],
+  ) => {
+    const conversation = ensureConversation(draft, data.conversation_id);
+    ensureThread(conversation, data.thread_id);
+  },
+};
 
 export function updateAgentConversationsStore(
   store: AgentConversationsStore,
-  sse: AnyAgentEvent,
+  sseData: SSEData,
 ): AgentConversationsStore {
-  const { event } = sse;
-  const data = sse.data as AgentEventMap[keyof AgentEventMap];
-
-  switch (event) {
-    case "conversation_started": {
-      const { conversation_id } = data as AgentEventMap["conversation_started"];
-      const [store2] = ensureConversation(store, conversation_id);
-      return store2;
-    }
-
-    case "done": {
-      const { conversation_id, thread_id } = data as AgentEventMap["done"];
-      const [store2, conv] = ensureConversation(store, conversation_id);
-      const [conv2, thread] = ensureThread(conv, thread_id);
-      thread.status = "done";
-      thread.lastUpdated = Date.now();
-      const next: AgentConversationsStore = {
-        ...store2,
-        [conversation_id]: conv2,
-      };
-      return next;
-    }
-
-    case "message_chunk": {
-      const payload = data as AgentEventMap["message_chunk"];
-      const [store2, conv] = ensureConversation(store, payload.conversation_id);
-      const [conv2, thread] = ensureThread(conv, payload.thread_id);
-
-      const idx = findLastOpenAgentTextIndex(
-        thread.messages,
-        payload.task_id,
-        payload.subtask_id,
-      );
-      if (idx === -1) {
-        pushAgentText(
-          thread,
-          {
-            conversation_id: payload.conversation_id,
-            thread_id: payload.thread_id,
-            task_id: payload.task_id,
-            subtask_id: payload.subtask_id,
-          },
-          payload.payload.content,
-          false,
-        );
-      } else {
-        const msg = thread.messages[idx] as AgentTextMessage;
-        msg.payload = {
-          content: `${msg.payload.content}${payload.payload.content}`,
-        };
-        msg.isComplete = false;
-        msg.updatedAt = new Date();
-      }
-
-      thread.status = "streaming";
-      thread.lastUpdated = Date.now();
-      const next: AgentConversationsStore = {
-        ...store2,
-        [payload.conversation_id]: conv2,
-      };
-      return next;
-    }
-
-    case "message": {
-      const payload = data as AgentEventMap["message"];
-      const [store2, conv] = ensureConversation(store, payload.conversation_id);
-      const [conv2, thread] = ensureThread(conv, payload.thread_id);
-
-      const idx = findLastOpenAgentTextIndex(
-        thread.messages,
-        payload.task_id,
-        payload.subtask_id,
-      );
-      if (idx === -1) {
-        pushAgentText(
-          thread,
-          {
-            conversation_id: payload.conversation_id,
-            thread_id: payload.thread_id,
-            task_id: payload.task_id,
-            subtask_id: payload.subtask_id,
-          },
-          payload.payload.content,
-          true,
-        );
-      } else {
-        const msg = thread.messages[idx] as AgentTextMessage;
-        msg.payload = { content: payload.payload.content };
-        msg.isComplete = true;
-        msg.updatedAt = new Date();
-      }
-
-      // After final message we set to idle; "done" will set to done
-      thread.status = "idle";
-      thread.lastUpdated = Date.now();
-      const next: AgentConversationsStore = {
-        ...store2,
-        [payload.conversation_id]: conv2,
-      };
-      return next;
-    }
+  const { event, data } = sseData;
+  const handler = eventHandlers[event as keyof typeof eventHandlers];
 
-    case "reasoning": {
-      const payload = data as AgentEventMap["reasoning"];
-      const [store2, conv] = ensureConversation(store, payload.conversation_id);
-      const [conv2, thread] = ensureThread(conv, payload.thread_id);
-
-      const idx = findLastOpenReasoningIndex(
-        thread,
-        payload.task_id,
-        payload.subtask_id,
-      );
-      if (idx === -1) {
-        pushReasoning(
-          thread,
-          {
-            conversation_id: payload.conversation_id,
-            thread_id: payload.thread_id,
-            task_id: payload.task_id,
-            subtask_id: payload.subtask_id,
-          },
-          payload.payload.content,
-          false,
-        );
-      } else {
-        const msg = thread.messages[idx] as AgentReasoningMessage;
-        msg.reasoning = `${msg.reasoning}${payload.payload.content}`;
-        msg.isComplete = false;
-        msg.updatedAt = new Date();
-      }
-
-      thread.lastUpdated = Date.now();
-      const next: AgentConversationsStore = {
-        ...store2,
-        [payload.conversation_id]: conv2,
-      };
-      return next;
-    }
-
-    case "tool_call_started": {
-      const payload = data as AgentEventMap["tool_call_started"];
-      const [store2, conv] = ensureConversation(store, payload.conversation_id);
-      const [conv2, thread] = ensureThread(conv, payload.thread_id);
-      pushToolCall(thread, payload, "started");
-      thread.status = "streaming";
-      thread.lastUpdated = Date.now();
-      const next: AgentConversationsStore = {
-        ...store2,
-        [payload.conversation_id]: conv2,
-      };
-      return next;
-    }
-
-    case "tool_call_completed": {
-      const payload = data as AgentEventMap["tool_call_completed"];
-      const [store2, conv] = ensureConversation(store, payload.conversation_id);
-      const [conv2, thread] = ensureThread(conv, payload.thread_id);
-      const updated = updateToolCallCompleted(thread, payload);
-      if (!updated) {
-        pushToolCall(thread, payload, "completed");
-      }
-      thread.lastUpdated = Date.now();
-      const next: AgentConversationsStore = {
-        ...store2,
-        [payload.conversation_id]: conv2,
-      };
-      return next;
-    }
-
-    case "component_generator": {
-      const payload = data as AgentEventMap["component_generator"];
-      const [store2, conv] = ensureConversation(store, payload.conversation_id);
-      const [conv2, thread] = ensureThread(conv, payload.thread_id);
-      pushAgentComponent(thread, payload);
-      thread.lastUpdated = Date.now();
-      const next: AgentConversationsStore = {
-        ...store2,
-        [payload.conversation_id]: conv2,
-      };
-      return next;
-    }
-
-    case "plan_failed": {
-      const payload = data as AgentEventMap["plan_failed"];
-      const [store2, conv] = ensureConversation(store, payload.conversation_id);
-      const [conv2, thread] = ensureThread(conv, payload.thread_id);
-      pushSystemMessage(thread, {
-        conversation_id: payload.conversation_id,
-        thread_id: payload.thread_id,
-        content: payload.payload.content,
-      });
-      thread.status = "idle";
-      thread.lastUpdated = Date.now();
-      const next: AgentConversationsStore = {
-        ...store2,
-        [payload.conversation_id]: conv2,
-      };
-      return next;
-    }
-
-    case "task_failed": {
-      const payload = data as AgentEventMap["task_failed"];
-      const [store2, conv] = ensureConversation(store, payload.conversation_id);
-      const [conv2, thread] = ensureThread(conv, payload.thread_id);
-      pushSystemMessage(thread, {
-        conversation_id: payload.conversation_id,
-        thread_id: payload.thread_id,
-        task_id: payload.task_id,
-        subtask_id: payload.subtask_id,
-        content: payload.payload.content,
-      });
-      thread.status = "idle";
-      thread.lastUpdated = Date.now();
-      const next: AgentConversationsStore = {
-        ...store2,
-        [payload.conversation_id]: conv2,
-      };
-      return next;
-    }
-
-    case "plan_require_user_input": {
-      const payload = data as AgentEventMap["plan_require_user_input"];
-      const [store2, conv] = ensureConversation(store, payload.conversation_id);
-      const [conv2, thread] = ensureThread(conv, payload.thread_id);
-      thread.status = "awaiting_user";
-      thread.lastUpdated = Date.now();
-      const next: AgentConversationsStore = {
-        ...store2,
-        [payload.conversation_id]: conv2,
-      };
-      return next;
-    }
-
-    case "reasoning_started": {
-      const payload = data as AgentEventMap["reasoning_started"];
-      const [store2, conv] = ensureConversation(store, payload.conversation_id);
-      const [conv2, thread] = ensureThread(conv, payload.thread_id);
-      thread.status = "streaming";
-      thread.lastUpdated = Date.now();
-      const next: AgentConversationsStore = {
-        ...store2,
-        [payload.conversation_id]: conv2,
-      };
-      return next;
-    }
-
-    case "reasoning_completed": {
-      const payload = data as AgentEventMap["reasoning_completed"];
-      const [store2, conv] = ensureConversation(store, payload.conversation_id);
-      const [conv2, thread] = ensureThread(conv, payload.thread_id);
-      // Keep status unchanged; it may still be streaming for message/tool calls
-      thread.lastUpdated = Date.now();
-      const next: AgentConversationsStore = {
-        ...store2,
-        [payload.conversation_id]: conv2,
-      };
-      return next;
-    }
-
-    default:
-      return store;
+  if (!handler) {
+    return store; // Unknown event, return original state
   }
-}
 
-export function createEmptyConversationsStore(): AgentConversationsStore {
-  return {};
+  // Use mutative to create new state, reduced from 250 lines to 10 lines
+  return create(store, (draft) => {
+    // Type-safe event handling: SSEData guarantees event and data types match
+    (
+      handler as (draft: AgentConversationsStore, data: SSEData["data"]) => void
+    )(draft, data);
+  });
 }
diff --git a/frontend/src/types/agent.ts b/frontend/src/types/agent.ts
index 5fe3fea97..0389fda81 100644
--- a/frontend/src/types/agent.ts
+++ b/frontend/src/types/agent.ts
@@ -89,7 +89,15 @@ export type AgentComponentMessage = MessageWithRole<
   }
 >;
 
-export type AgentToolCallMessage = MessageWithRole<
+export type AgentToolCallStartedMessage = MessageWithRole<
+  "agent",
+  {
+    tool_call_id: string;
+    tool_name: string;
+  }
+>;
+
+export type AgentToolCallCompletedMessage = MessageWithRole<
   "agent",
   {
     tool_call_id: string;
@@ -103,11 +111,23 @@ export type AgentReasoningMessage = MessageWithRole<
   { content: string }
 >;
 
+export type AgentPlanRequireUserInputMessage = {
+  role: "agent";
+} & Pick<BaseEventData, "conversation_id" | "thread_id"> &
+  PayloadWrapper<{ content: string }>;
+
+export type AgentPlanFailedMessage = AgentPlanRequireUserInputMessage;
+export type AgentTaskFailedMessage = AgentPlanRequireUserInputMessage;
+
 export type ChatMessage =
   | AgentComponentMessage
-  | AgentToolCallMessage
+  | AgentToolCallStartedMessage
+  | AgentToolCallCompletedMessage
   | AgentReasoningMessage
-  | AgentChunkMessage;
+  | AgentChunkMessage
+  | AgentPlanRequireUserInputMessage
+  | AgentPlanFailedMessage
+  | AgentTaskFailedMessage;
 
 export interface ThreadView {
   messages: ChatMessage[];

From 17a022d9f214631c8a9fa314dbd836e773fbbed5 Mon Sep 17 00:00:00 2001
From: DigHuang <114602213+DigHuang@users.noreply.github.com>
Date: Wed, 24 Sep 2025 03:00:43 +0800
Subject: [PATCH 10/13] feat: chat state to use agent store

Replaces local chat message state with a centralized agent conversations store for improved state management and scalability. Updates message rendering logic to handle different message types based on payload structure. Adjusts types to support role in message_chunk events.
---
 frontend/src/app/agent/chat.tsx | 551 ++++++++++----------------------
 frontend/src/types/agent.ts     |   5 +-
 2 files changed, 171 insertions(+), 385 deletions(-)

diff --git a/frontend/src/app/agent/chat.tsx b/frontend/src/app/agent/chat.tsx
index 6c2b53476..7373ba01a 100644
--- a/frontend/src/app/agent/chat.tsx
+++ b/frontend/src/app/agent/chat.tsx
@@ -1,17 +1,13 @@
 import {
   AlertTriangle,
   ArrowUp,
-  BarChart3,
   Bot,
-  Brain,
   CheckCircle,
   Clock,
   FileText,
   MessageCircle,
   Settings,
-  Table,
   User,
-  Zap,
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Navigate, useParams } from "react-router";
@@ -20,282 +16,98 @@ import ScrollTextarea, {
   type ScrollTextareaRef,
 } from "@/components/valuecell/scroll/scroll-textarea";
 import { useSSE } from "@/hooks/use-sse";
+import { updateAgentConversationsStore } from "@/lib/agent-store";
 import { SSEReadyState } from "@/lib/sse-client";
 import { cn } from "@/lib/utils";
 import { agentData } from "@/mock/agent-data";
-import type { AgentEventMap, AgentStreamRequest, SSEData } from "@/types/agent";
+import type {
+  AgentConversationsStore,
+  AgentStreamRequest,
+  SSEData,
+} from "@/types/agent";
 import type { Route } from "./+types/chat";
 import { ChatBackground } from "./components";
 
-// Extended chat message type with all possible fields
-type ExtendedChatMessage = {
-  id: string;
-  role: "user" | "system" | "agent";
-  isComplete: boolean;
-  // Base event fields (optional because user messages may not have them)
-  conversation_id?: string;
-  thread_id?: string;
-  task_id?: string;
-  subtask_id?: string;
-  // Content payload
-  payload?: { content: string; [key: string]: unknown };
-  // UI extension fields
-  component?: { type: string; content: string };
-  toolCalls?: Array<{
-    id: string;
-    name: string;
-    status: "started" | "completed";
-    result?: string;
-    startTime: Date;
-    endTime?: Date;
-  }>;
-  reasoning?: string;
-};
-
 export default function AgentChat() {
   const { agentId } = useParams<Route.LoaderArgs["params"]>();
   const textareaRef = useRef<ScrollTextareaRef>(null);
   const [inputValue, setInputValue] = useState("");
 
-  // Simplified chat state - only essential state
-  const [messages, setMessages] = useState<ExtendedChatMessage[]>([]);
+  // Use agent store for state management
+  const [agentStore, setAgentStore] = useState<AgentConversationsStore>({});
   const [conversationId, setConversationId] = useState<string | null>(null);
   const [currentThreadId, setCurrentThreadId] = useState<string | null>(null);
   const [userInputRequired, setUserInputRequired] = useState<string | null>(
     null,
   );
-  const [isSending, setIsSending] = useState(false); // Prevent duplicate sends
+  const [isSending, setIsSending] = useState(false);
   const [shouldClose, setShouldClose] = useState(false);
 
-  // Optimized message update helper
-  const updateOrCreateMessage = useCallback(
-    (
-      messageId: string,
-      content: string,
-      isComplete: boolean,
-      threadId: string,
-      taskId?: string,
-      subtaskId?: string,
-      isAppend = false,
-    ) => {
-      setMessages((prevMessages) => {
-        const updatedMessages = [...prevMessages];
-        const messageIndex = updatedMessages.findIndex(
-          (msg) => msg.id === messageId,
-        );
-
-        if (messageIndex >= 0) {
-          const existingMessage = updatedMessages[messageIndex];
-          const existingContent = existingMessage.payload?.content || "";
-
-          updatedMessages[messageIndex] = {
-            ...existingMessage,
-            payload: {
-              ...existingMessage.payload,
-              content: isAppend ? existingContent + content : content,
-            },
-            isComplete,
-          };
-        } else {
-          updatedMessages.push({
-            id: messageId,
-            role: "agent",
-            isComplete,
-            conversation_id: "",
-            thread_id: threadId || "",
-            task_id: taskId || "",
-            subtask_id: subtaskId || "",
+  // Get current conversation and thread messages
+  const currentMessages = useMemo(() => {
+    if (!conversationId || !currentThreadId || !agentStore[conversationId]) {
+      return [];
+    }
+    const thread = agentStore[conversationId].threads[currentThreadId];
+    return thread?.messages || [];
+  }, [agentStore, conversationId, currentThreadId]);
+
+  // Add user message by triggering message_chunk event with role: "user"
+  const addUserMessage = useCallback(
+    (content: string) => {
+      if (!conversationId || !currentThreadId) return;
+
+      setAgentStore((prev) =>
+        updateAgentConversationsStore(prev, {
+          event: "message_chunk",
+          data: {
+            conversation_id: conversationId,
+            thread_id: currentThreadId,
+            task_id: "",
+            subtask_id: "",
             payload: { content },
-          } as ExtendedChatMessage);
-        }
-
-        return updatedMessages;
-      });
-
-      setCurrentThreadId(threadId);
+            role: "user",
+          },
+        }),
+      );
     },
-    [],
+    [conversationId, currentThreadId],
   );
 
-  // Handle SSE data events
-  const handleSSEData = useCallback(
-    (sseData: SSEData) => {
-      const { event, data } = sseData;
-
-      switch (event) {
-        case "conversation_started": {
-          const payload =
-            data as unknown as AgentEventMap["conversation_started"];
-          setConversationId(payload.conversation_id);
-          break;
-        }
-
-        case "message_chunk": {
-          const payload = data as unknown as AgentEventMap["message_chunk"];
-          const messageId = `${payload.conversation_id}-${payload.thread_id}`;
-          updateOrCreateMessage(
-            messageId,
-            payload.payload.content,
-            false,
-            payload.thread_id,
-            payload.task_id,
-            payload.subtask_id,
-            true, // append content
-          );
-          break;
-        }
-
-        case "message": {
-          const payload = data as unknown as AgentEventMap["message"];
-          const messageId = `${payload.conversation_id}-${payload.thread_id}`;
-          updateOrCreateMessage(
-            messageId,
-            payload.payload.content,
-            true,
-            payload.thread_id,
-            payload.task_id,
-            payload.subtask_id,
-            false, // replace content
-          );
-          break;
-        }
-
-        case "component_generator": {
-          const payload =
-            data as unknown as AgentEventMap["component_generator"];
-          const componentMessage: ExtendedChatMessage = {
-            id: `component-${payload.conversation_id}-${payload.thread_id}-${Date.now()}`,
-            role: "agent",
-            isComplete: true,
-            conversation_id: payload.conversation_id,
-            thread_id: payload.thread_id,
-            task_id: payload.task_id,
-            subtask_id: payload.subtask_id,
-            payload: payload.payload,
-            component: {
-              type: payload.payload.component_type,
-              content: payload.payload.content,
-            },
-          };
-
-          setMessages((prev) => [...prev, componentMessage]);
-          break;
-        }
-
-        case "plan_require_user_input": {
-          const payload =
-            data as unknown as AgentEventMap["plan_require_user_input"];
-          setUserInputRequired(payload.payload.content);
-          break;
-        }
-
-        case "tool_call_started":
-        case "tool_call_completed": {
-          const payload = data as unknown as
-            | AgentEventMap["tool_call_started"]
-            | AgentEventMap["tool_call_completed"];
-          const messageId = `${payload.conversation_id}-${payload.thread_id}`;
-          const isCompleted = event === "tool_call_completed";
-
-          setMessages((prevMessages) => {
-            const updatedMessages = [...prevMessages];
-            const messageIndex = updatedMessages.findIndex(
-              (msg) => msg.id === messageId,
-            );
-
-            if (messageIndex >= 0) {
-              const message = updatedMessages[messageIndex];
-              const toolCalls = [...(message.toolCalls || [])];
-              const toolCallIndex = toolCalls.findIndex(
-                (tc) => tc.id === payload.payload.tool_call_id,
-              );
-
-              const toolCallData = {
-                id: payload.payload.tool_call_id,
-                name: payload.payload.tool_name,
-                status: isCompleted
-                  ? ("completed" as const)
-                  : ("started" as const),
-                startTime: new Date(),
-                ...(isCompleted && {
-                  result: (payload as AgentEventMap["tool_call_completed"])
-                    .payload.tool_call_result,
-                  endTime: new Date(),
-                }),
-              };
-
-              if (toolCallIndex >= 0) {
-                toolCalls[toolCallIndex] = {
-                  ...toolCalls[toolCallIndex],
-                  ...toolCallData,
-                };
-              } else {
-                toolCalls.push(toolCallData);
-              }
-
-              updatedMessages[messageIndex] = { ...message, toolCalls };
-            }
-
-            return updatedMessages;
-          });
-          break;
-        }
+  // Handle SSE data events using agent store
+  const handleSSEData = useCallback((sseData: SSEData) => {
+    // Update agent store using the centralized function
+    setAgentStore((prev) => updateAgentConversationsStore(prev, sseData));
+
+    // Handle specific UI state updates
+    const { event, data } = sseData;
+    switch (event) {
+      case "conversation_started": {
+        setConversationId(data.conversation_id);
+        break;
+      }
 
-        case "reasoning": {
-          const payload = data as unknown as AgentEventMap["reasoning"];
-          const messageId = `${payload.conversation_id}-${payload.thread_id}`;
-
-          setMessages((prevMessages) => {
-            const updatedMessages = [...prevMessages];
-            const messageIndex = updatedMessages.findIndex(
-              (msg) => msg.id === messageId,
-            );
-
-            if (messageIndex >= 0) {
-              updatedMessages[messageIndex] = {
-                ...updatedMessages[messageIndex],
-                reasoning: payload.payload.content,
-              };
-            }
-
-            return updatedMessages;
-          });
-          break;
-        }
+      case "plan_require_user_input": {
+        setUserInputRequired(data.payload.content);
+        break;
+      }
 
-        case "plan_failed":
-        case "task_failed": {
-          const payload = data as unknown as
-            | AgentEventMap["plan_failed"]
-            | AgentEventMap["task_failed"];
-          const errorMessage: ExtendedChatMessage = {
-            id: `error-${payload.conversation_id}-${payload.thread_id}-${Date.now()}`,
-            role: "system",
-            isComplete: true,
-            conversation_id: payload.conversation_id,
-            thread_id: payload.thread_id,
-            ...(event === "task_failed" && {
-              task_id: (payload as AgentEventMap["task_failed"]).task_id,
-              subtask_id: (payload as AgentEventMap["task_failed"]).subtask_id,
-            }),
-            payload: payload.payload,
-          };
-
-          setMessages((prev) => [...prev, errorMessage]);
-          break;
-        }
+      case "done": {
+        setUserInputRequired(null);
+        setCurrentThreadId(data.thread_id);
+        setShouldClose(true);
+        break;
+      }
 
-        case "done": {
-          const payload = data as unknown as AgentEventMap["done"];
-          setUserInputRequired(null);
-          setCurrentThreadId(payload.thread_id);
-          setShouldClose(true);
-          break;
+      // All message-related events are handled by the store
+      default:
+        // Update current thread ID for message events
+        if ("thread_id" in data) {
+          setCurrentThreadId(data.thread_id);
         }
-      }
-    },
-    [updateOrCreateMessage],
-  );
+        break;
+    }
+  }, []);
 
   // Stabilize SSE options to avoid infinite reconnects
   const sseOptions = useMemo(
@@ -368,22 +180,23 @@ export default function AgentChat() {
       setIsSending(true);
 
       try {
-        const userMessage: ExtendedChatMessage = {
-          id: `user-${Date.now()}`,
-          role: "user",
-          isComplete: true,
-          // Special structure for user message
-          payload: { content: message },
-        } as ExtendedChatMessage;
-
-        setMessages((prev) => [...prev, userMessage]);
+        // For new conversation, we'll let the server assign IDs
+        const newConversationId = conversationId || `conv-${Date.now()}`;
+        const newThreadId = currentThreadId || `thread-${Date.now()}`;
+
+        // Set IDs if this is a new conversation
+        if (!conversationId) setConversationId(newConversationId);
+        if (!currentThreadId) setCurrentThreadId(newThreadId);
+
+        // Add user message to store
+        addUserMessage(message);
         setUserInputRequired(null);
 
         const request: AgentStreamRequest = {
           query: message,
-          agent_name: "WarrenBuffettAgent", // You can make this dynamic based on the agent
-          conversation_id: conversationId || undefined,
-          thread_id: currentThreadId || undefined,
+          agent_name: "WarrenBuffettAgent",
+          conversation_id: newConversationId,
+          thread_id: newThreadId,
         };
 
         // Connect SSE client with request body to receive streaming response
@@ -393,7 +206,14 @@ export default function AgentChat() {
         setIsSending(false); // Reset immediately on error
       }
     },
-    [conversationId, currentThreadId, connect, isSending, isConnecting],
+    [
+      conversationId,
+      currentThreadId,
+      addUserMessage,
+      connect,
+      isSending,
+      isConnecting,
+    ],
   );
 
   // Handle user input for plan_require_user_input events
@@ -427,43 +247,6 @@ export default function AgentChat() {
     sendMessage,
   ]);
 
-  // Optimized component icon mapping
-  const componentIcons = useMemo(
-    () => ({
-      report: <FileText size={16} className="text-blue-600" />,
-      chart: <BarChart3 size={16} className="text-green-600" />,
-      table: <Table size={16} className="text-purple-600" />,
-      analysis: <Brain size={16} className="text-orange-600" />,
-    }),
-    [],
-  );
-
-  // Optimized component renderer
-  const renderComponent = useCallback(
-    (component: { type: string; content: string }) => {
-      const icon = componentIcons[
-        component.type as keyof typeof componentIcons
-      ] || <FileText size={16} className="text-gray-600" />;
-
-      return (
-        <div className="mt-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
-          <div className="mb-2 flex items-center gap-2">
-            {icon}
-            <span className="font-medium text-blue-900 text-sm capitalize">
-              {component.type} Generated
-            </span>
-          </div>
-          <div className="rounded bg-white p-3 text-gray-800 text-sm">
-            <pre className="whitespace-pre-wrap font-mono text-xs">
-              {component.content}
-            </pre>
-          </div>
-        </div>
-      );
-    },
-    [componentIcons],
-  );
-
   const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setInputValue(e.target.value);
   };
@@ -543,7 +326,7 @@ export default function AgentChat() {
 
       {/* Main content area */}
       <main className="relative flex flex-1 flex-col">
-        {messages.length === 0 ? (
+        {currentMessages.length === 0 ? (
           <>
             {/* Background blur effects for welcome screen */}
             <ChatBackground />
@@ -602,9 +385,9 @@ export default function AgentChat() {
           <>
             {/* Chat messages */}
             <div className="flex-1 space-y-6 overflow-y-auto p-6">
-              {messages.map((message) => (
+              {currentMessages.map((message, index) => (
                 <div
-                  key={message.id}
+                  key={`${message.conversation_id}-${message.thread_id}-${index}`}
                   className={cn(
                     "flex gap-4",
                     message.role === "user" ? "justify-end" : "justify-start",
@@ -612,19 +395,8 @@ export default function AgentChat() {
                 >
                   {message.role !== "user" && (
                     <div className="size-8 flex-shrink-0">
-                      <div
-                        className={cn(
-                          "flex size-8 items-center justify-center rounded-full",
-                          message.role === "system"
-                            ? "bg-gradient-to-br from-red-500 to-red-600"
-                            : "bg-gradient-to-br from-blue-500 to-purple-600",
-                        )}
-                      >
-                        {message.role === "system" ? (
-                          <AlertTriangle size={16} className="text-white" />
-                        ) : (
-                          <Bot size={16} className="text-white" />
-                        )}
+                      <div className="flex size-8 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-purple-600">
+                        <Bot size={16} className="text-white" />
                       </div>
                     </div>
                   )}
@@ -634,75 +406,86 @@ export default function AgentChat() {
                       "max-w-[80%] rounded-2xl px-4 py-3",
                       message.role === "user"
                         ? "ml-auto bg-blue-600 text-white"
-                        : message.role === "system"
-                          ? "bg-red-100 text-red-900"
-                          : "bg-gray-100 text-gray-900",
+                        : "bg-gray-100 text-gray-900",
                     )}
                   >
-                    {/* Message content */}
-                    {!message.component && (
-                      <div className="whitespace-pre-wrap break-words">
-                        {message.payload?.content || ""}
-                        {!message.isComplete && message.role === "agent" && (
-                          <span className="ml-1 inline-block h-5 w-2 animate-pulse bg-gray-400" />
-                        )}
-                      </div>
-                    )}
-
-                    {/* Generated component */}
-                    {message.component && renderComponent(message.component)}
-
-                    {/* Tool calls */}
-                    {message.toolCalls && message.toolCalls.length > 0 && (
-                      <div className="mt-3 space-y-2">
-                        {message.toolCalls.map((toolCall) => (
-                          <div
-                            key={toolCall.id}
-                            className="flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 p-2"
-                          >
-                            {toolCall.status === "started" ? (
-                              <Clock
-                                size={14}
-                                className="animate-pulse text-blue-600"
-                              />
-                            ) : (
-                              <CheckCircle
-                                size={14}
-                                className="text-green-600"
-                              />
-                            )}
-                            <span className="font-medium text-blue-900 text-sm">
-                              {toolCall.name}
-                            </span>
-                            {toolCall.status === "started" && (
-                              <span className="text-blue-600 text-xs">
-                                Running...
-                              </span>
-                            )}
-                            {toolCall.result && (
-                              <span className="truncate text-gray-600 text-xs">
-                                {toolCall.result.substring(0, 50)}...
+                    {/* Render different message types based on payload structure */}
+                    {(() => {
+                      const payload = message.payload;
+                      if (!payload) return null;
+
+                      // Component generator message
+                      if ("component_type" in payload && "content" in payload) {
+                        return (
+                          <div>
+                            <div className="mt-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
+                              <div className="mb-2 flex items-center gap-2">
+                                <FileText size={16} className="text-blue-600" />
+                                <span className="font-medium text-blue-900 text-sm capitalize">
+                                  {payload.component_type} Generated
+                                </span>
+                              </div>
+                              <div className="rounded bg-white p-3 text-gray-800 text-sm">
+                                <pre className="whitespace-pre-wrap font-mono text-xs">
+                                  {payload.content}
+                                </pre>
+                              </div>
+                            </div>
+                          </div>
+                        );
+                      }
+
+                      // Tool call message
+                      if ("tool_call_id" in payload && "tool_name" in payload) {
+                        const hasResult =
+                          "tool_call_result" in payload &&
+                          payload.tool_call_result;
+                        return (
+                          <div>
+                            <div className="mt-3 flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 p-2">
+                              {hasResult ? (
+                                <CheckCircle
+                                  size={14}
+                                  className="text-green-600"
+                                />
+                              ) : (
+                                <Clock
+                                  size={14}
+                                  className="animate-pulse text-blue-600"
+                                />
+                              )}
+                              <span className="font-medium text-blue-900 text-sm">
+                                {payload.tool_name}
                               </span>
-                            )}
+                              {hasResult ? (
+                                <span className="truncate text-gray-600 text-xs">
+                                  {String(payload.tool_call_result).substring(
+                                    0,
+                                    50,
+                                  )}
+                                  ...
+                                </span>
+                              ) : (
+                                <span className="text-blue-600 text-xs">
+                                  Running...
+                                </span>
+                              )}
+                            </div>
                           </div>
-                        ))}
-                      </div>
-                    )}
+                        );
+                      }
+
+                      // Regular content message
+                      if ("content" in payload) {
+                        return (
+                          <div className="whitespace-pre-wrap break-words">
+                            {payload.content}
+                          </div>
+                        );
+                      }
 
-                    {/* Reasoning */}
-                    {message.reasoning && (
-                      <div className="mt-3 rounded-lg border border-yellow-200 bg-yellow-50 p-2">
-                        <div className="mb-1 flex items-center gap-2">
-                          <Zap size={14} className="text-yellow-600" />
-                          <span className="font-medium text-sm text-yellow-900">
-                            Reasoning
-                          </span>
-                        </div>
-                        <p className="text-sm text-yellow-800">
-                          {message.reasoning}
-                        </p>
-                      </div>
-                    )}
+                      return null;
+                    })()}
                   </div>
 
                   {message.role === "user" && (
diff --git a/frontend/src/types/agent.ts b/frontend/src/types/agent.ts
index 0389fda81..265298b2f 100644
--- a/frontend/src/types/agent.ts
+++ b/frontend/src/types/agent.ts
@@ -26,7 +26,10 @@ export interface AgentEventMap {
   done: Pick<BaseEventData, "conversation_id" | "thread_id">;
 
   // Content Streaming Events
-  message_chunk: EventWithPayload<BaseEventData, { content: string }>;
+  message_chunk: EventWithPayload<
+    BaseEventData & { role?: "user" | "agent" | "system" },
+    { content: string }
+  >;
   message: EventWithPayload<BaseEventData, { content: string }>;
 
   // Component Generation

From 6948ad0d6d7f2d117d7fb2d79fdf4d780148502e Mon Sep 17 00:00:00 2001
From: DigHuang <114602213+DigHuang@users.noreply.github.com>
Date: Wed, 24 Sep 2025 03:05:34 +0800
Subject: [PATCH 11/13] feat: chat rendering with memoized

Refactored chat message rendering by introducing a memoized MessageItem component for improved performance. Switched agent store state management from useState to useReducer for more efficient updates. Cleaned up message rendering logic and centralized message type handling.
---
 frontend/src/app/agent/chat.tsx | 278 +++++++++++++++++---------------
 1 file changed, 150 insertions(+), 128 deletions(-)

diff --git a/frontend/src/app/agent/chat.tsx b/frontend/src/app/agent/chat.tsx
index 7373ba01a..38e72ea21 100644
--- a/frontend/src/app/agent/chat.tsx
+++ b/frontend/src/app/agent/chat.tsx
@@ -9,7 +9,15 @@ import {
   Settings,
   User,
 } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from "react";
 import { Navigate, useParams } from "react-router";
 import { Button } from "@/components/ui/button";
 import ScrollTextarea, {
@@ -23,18 +31,137 @@ import { agentData } from "@/mock/agent-data";
 import type {
   AgentConversationsStore,
   AgentStreamRequest,
+  ChatMessage,
   SSEData,
 } from "@/types/agent";
 import type { Route } from "./+types/chat";
 import { ChatBackground } from "./components";
 
+// Optimized reducer for agent store management
+function agentStoreReducer(
+  state: AgentConversationsStore,
+  action: SSEData,
+): AgentConversationsStore {
+  return updateAgentConversationsStore(state, action);
+}
+
+// Memoized Message Component for better performance
+const MessageItem = memo<{
+  message: ChatMessage;
+  index: number;
+  conversationId: string;
+  threadId: string;
+}>(({ message }) => {
+  return (
+    <div
+      className={cn(
+        "flex gap-4",
+        message.role === "user" ? "justify-end" : "justify-start",
+      )}
+    >
+      {message.role !== "user" && (
+        <div className="size-8 flex-shrink-0">
+          <div className="flex size-8 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-purple-600">
+            <Bot size={16} className="text-white" />
+          </div>
+        </div>
+      )}
+
+      <div
+        className={cn(
+          "max-w-[80%] rounded-2xl px-4 py-3",
+          message.role === "user"
+            ? "ml-auto bg-blue-600 text-white"
+            : "bg-gray-100 text-gray-900",
+        )}
+      >
+        {/* Render different message types based on payload structure */}
+        {(() => {
+          const payload = message.payload;
+          if (!payload) return null;
+
+          // Component generator message
+          if ("component_type" in payload && "content" in payload) {
+            return (
+              <div>
+                <div className="mt-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
+                  <div className="mb-2 flex items-center gap-2">
+                    <FileText size={16} className="text-blue-600" />
+                    <span className="font-medium text-blue-900 text-sm capitalize">
+                      {payload.component_type} Generated
+                    </span>
+                  </div>
+                  <div className="rounded bg-white p-3 text-gray-800 text-sm">
+                    <pre className="whitespace-pre-wrap font-mono text-xs">
+                      {payload.content}
+                    </pre>
+                  </div>
+                </div>
+              </div>
+            );
+          }
+
+          // Tool call message
+          if ("tool_call_id" in payload && "tool_name" in payload) {
+            const hasResult =
+              "tool_call_result" in payload && payload.tool_call_result;
+            return (
+              <div>
+                <div className="mt-3 flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 p-2">
+                  {hasResult ? (
+                    <CheckCircle size={14} className="text-green-600" />
+                  ) : (
+                    <Clock size={14} className="animate-pulse text-blue-600" />
+                  )}
+                  <span className="font-medium text-blue-900 text-sm">
+                    {payload.tool_name}
+                  </span>
+                  {hasResult ? (
+                    <span className="truncate text-gray-600 text-xs">
+                      {String(payload.tool_call_result).substring(0, 50)}
+                      ...
+                    </span>
+                  ) : (
+                    <span className="text-blue-600 text-xs">Running...</span>
+                  )}
+                </div>
+              </div>
+            );
+          }
+
+          // Regular content message
+          if ("content" in payload) {
+            return (
+              <div className="whitespace-pre-wrap break-words">
+                {payload.content}
+              </div>
+            );
+          }
+
+          return null;
+        })()}
+      </div>
+
+      {message.role === "user" && (
+        <div className="size-8 flex-shrink-0">
+          <div className="flex size-8 items-center justify-center rounded-full bg-gray-600">
+            <User size={16} className="text-white" />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
+
+MessageItem.displayName = "MessageItem";
+
 export default function AgentChat() {
   const { agentId } = useParams<Route.LoaderArgs["params"]>();
   const textareaRef = useRef<ScrollTextareaRef>(null);
   const [inputValue, setInputValue] = useState("");
 
-  // Use agent store for state management
-  const [agentStore, setAgentStore] = useState<AgentConversationsStore>({});
+  // Use optimized reducer for state management
+  const [agentStore, dispatchAgentStore] = useReducer(agentStoreReducer, {});
   const [conversationId, setConversationId] = useState<string | null>(null);
   const [currentThreadId, setCurrentThreadId] = useState<string | null>(null);
   const [userInputRequired, setUserInputRequired] = useState<string | null>(
@@ -57,27 +184,25 @@ export default function AgentChat() {
     (content: string) => {
       if (!conversationId || !currentThreadId) return;
 
-      setAgentStore((prev) =>
-        updateAgentConversationsStore(prev, {
-          event: "message_chunk",
-          data: {
-            conversation_id: conversationId,
-            thread_id: currentThreadId,
-            task_id: "",
-            subtask_id: "",
-            payload: { content },
-            role: "user",
-          },
-        }),
-      );
+      dispatchAgentStore({
+        event: "message_chunk",
+        data: {
+          conversation_id: conversationId,
+          thread_id: currentThreadId,
+          task_id: "",
+          subtask_id: "",
+          payload: { content },
+          role: "user",
+        },
+      });
     },
     [conversationId, currentThreadId],
   );
 
   // Handle SSE data events using agent store
   const handleSSEData = useCallback((sseData: SSEData) => {
-    // Update agent store using the centralized function
-    setAgentStore((prev) => updateAgentConversationsStore(prev, sseData));
+    // Update agent store using the reducer
+    dispatchAgentStore(sseData);
 
     // Handle specific UI state updates
     const { event, data } = sseData;
@@ -383,119 +508,16 @@ export default function AgentChat() {
           </>
         ) : (
           <>
-            {/* Chat messages */}
+            {/* Chat messages with optimized rendering */}
             <div className="flex-1 space-y-6 overflow-y-auto p-6">
               {currentMessages.map((message, index) => (
-                <div
+                <MessageItem
                   key={`${message.conversation_id}-${message.thread_id}-${index}`}
-                  className={cn(
-                    "flex gap-4",
-                    message.role === "user" ? "justify-end" : "justify-start",
-                  )}
-                >
-                  {message.role !== "user" && (
-                    <div className="size-8 flex-shrink-0">
-                      <div className="flex size-8 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-purple-600">
-                        <Bot size={16} className="text-white" />
-                      </div>
-                    </div>
-                  )}
-
-                  <div
-                    className={cn(
-                      "max-w-[80%] rounded-2xl px-4 py-3",
-                      message.role === "user"
-                        ? "ml-auto bg-blue-600 text-white"
-                        : "bg-gray-100 text-gray-900",
-                    )}
-                  >
-                    {/* Render different message types based on payload structure */}
-                    {(() => {
-                      const payload = message.payload;
-                      if (!payload) return null;
-
-                      // Component generator message
-                      if ("component_type" in payload && "content" in payload) {
-                        return (
-                          <div>
-                            <div className="mt-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
-                              <div className="mb-2 flex items-center gap-2">
-                                <FileText size={16} className="text-blue-600" />
-                                <span className="font-medium text-blue-900 text-sm capitalize">
-                                  {payload.component_type} Generated
-                                </span>
-                              </div>
-                              <div className="rounded bg-white p-3 text-gray-800 text-sm">
-                                <pre className="whitespace-pre-wrap font-mono text-xs">
-                                  {payload.content}
-                                </pre>
-                              </div>
-                            </div>
-                          </div>
-                        );
-                      }
-
-                      // Tool call message
-                      if ("tool_call_id" in payload && "tool_name" in payload) {
-                        const hasResult =
-                          "tool_call_result" in payload &&
-                          payload.tool_call_result;
-                        return (
-                          <div>
-                            <div className="mt-3 flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 p-2">
-                              {hasResult ? (
-                                <CheckCircle
-                                  size={14}
-                                  className="text-green-600"
-                                />
-                              ) : (
-                                <Clock
-                                  size={14}
-                                  className="animate-pulse text-blue-600"
-                                />
-                              )}
-                              <span className="font-medium text-blue-900 text-sm">
-                                {payload.tool_name}
-                              </span>
-                              {hasResult ? (
-                                <span className="truncate text-gray-600 text-xs">
-                                  {String(payload.tool_call_result).substring(
-                                    0,
-                                    50,
-                                  )}
-                                  ...
-                                </span>
-                              ) : (
-                                <span className="text-blue-600 text-xs">
-                                  Running...
-                                </span>
-                              )}
-                            </div>
-                          </div>
-                        );
-                      }
-
-                      // Regular content message
-                      if ("content" in payload) {
-                        return (
-                          <div className="whitespace-pre-wrap break-words">
-                            {payload.content}
-                          </div>
-                        );
-                      }
-
-                      return null;
-                    })()}
-                  </div>
-
-                  {message.role === "user" && (
-                    <div className="size-8 flex-shrink-0">
-                      <div className="flex size-8 items-center justify-center rounded-full bg-gray-600">
-                        <User size={16} className="text-white" />
-                      </div>
-                    </div>
-                  )}
-                </div>
+                  message={message}
+                  index={index}
+                  conversationId={conversationId || ""}
+                  threadId={currentThreadId || ""}
+                />
               ))}
 
               {/* Streaming indicator */}

From bda8641b5798128f852047406e0c7120c9665232 Mon Sep 17 00:00:00 2001
From: DigHuang <114602213+DigHuang@users.noreply.github.com>
Date: Wed, 24 Sep 2025 10:16:26 +0800
Subject: [PATCH 12/13] refactor: chat message rendering and update
 dependencies

Extracted the chat message rendering logic into a new memoized ChatMessage component for improved modularity and performance. Removed user input required state and related logic from AgentChat, simplifying the message flow. Updated @react-router dependencies to version 7.9.1 in package.json and bun.lock.
---
 frontend/bun.lock                             |  30 +--
 frontend/package.json                         |   6 +-
 frontend/src/app/agent/chat.tsx               | 229 +++---------------
 .../src/app/agent/components/chat-message.tsx | 115 +++++++++
 4 files changed, 152 insertions(+), 228 deletions(-)
 create mode 100644 frontend/src/app/agent/components/chat-message.tsx

diff --git a/frontend/bun.lock b/frontend/bun.lock
index 5a2bc91cd..b47eefdd2 100644
--- a/frontend/bun.lock
+++ b/frontend/bun.lock
@@ -9,7 +9,7 @@
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tooltip": "^1.2.8",
-        "@react-router/node": "^7.8.2",
+        "@react-router/node": "^7.9.1",
         "@tanstack/react-query": "^5.89.0",
         "@tauri-apps/api": "^2.8.0",
         "@tauri-apps/plugin-opener": "^2.5.0",
@@ -29,8 +29,8 @@
       },
       "devDependencies": {
         "@biomejs/biome": "^2.2.4",
-        "@react-router/dev": "^7.8.2",
-        "@react-router/serve": "^7.8.2",
+        "@react-router/dev": "^7.9.1",
+        "@react-router/serve": "^7.9.1",
         "@tailwindcss/typography": "^0.5.16",
         "@tailwindcss/vite": "^4.1.13",
         "@tauri-apps/cli": "^2.8.4",
@@ -318,13 +318,13 @@
 
     "@radix-ui/rect": ["@radix-ui/rect@1.1.1", "https://registry.npmmirror.com/@radix-ui/rect/-/rect-1.1.1.tgz", {}, "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="],
 
-    "@react-router/dev": ["@react-router/dev@7.8.2", "", { "dependencies": { "@babel/core": "^7.27.7", "@babel/generator": "^7.27.5", "@babel/parser": "^7.27.7", "@babel/plugin-syntax-jsx": "^7.27.1", "@babel/preset-typescript": "^7.27.1", "@babel/traverse": "^7.27.7", "@babel/types": "^7.27.7", "@npmcli/package-json": "^4.0.1", "@react-router/node": "7.8.2", "@vitejs/plugin-rsc": "0.4.11", "arg": "^5.0.1", "babel-dead-code-elimination": "^1.0.6", "chokidar": "^4.0.0", "dedent": "^1.5.3", "es-module-lexer": "^1.3.1", "exit-hook": "2.2.1", "isbot": "^5.1.11", "jsesc": "3.0.2", "lodash": "^4.17.21", "pathe": "^1.1.2", "picocolors": "^1.1.1", "prettier": "^3.6.2", "react-refresh": "^0.14.0", "semver": "^7.3.7", "set-cookie-parser": "^2.6.0", "tinyglobby": "^0.2.14", "valibot": "^0.41.0", "vite-node": "^3.2.2" }, "peerDependencies": { "@react-router/serve": "^7.8.2", "react-router": "^7.8.2", "typescript": "^5.1.0", "vite": "^5.1.0 || ^6.0.0 || ^7.0.0", "wrangler": "^3.28.2 || ^4.0.0" }, "optionalPeers": ["@react-router/serve", "typescript", "wrangler"], "bin": { "react-router": "bin.js" } }, "sha512-9ilgQoNhvgvUyQKDapALt9qVO3GpSw9ng5X2BwIhLIwqh8CTyRM/jz5cK53p5yzGiVeyx9njXXfeuxUlvQgJuA=="],
+    "@react-router/dev": ["@react-router/dev@7.9.1", "", { "dependencies": { "@babel/core": "^7.27.7", "@babel/generator": "^7.27.5", "@babel/parser": "^7.27.7", "@babel/plugin-syntax-jsx": "^7.27.1", "@babel/preset-typescript": "^7.27.1", "@babel/traverse": "^7.27.7", "@babel/types": "^7.27.7", "@npmcli/package-json": "^4.0.1", "@react-router/node": "7.9.1", "arg": "^5.0.1", "babel-dead-code-elimination": "^1.0.6", "chokidar": "^4.0.0", "dedent": "^1.5.3", "es-module-lexer": "^1.3.1", "exit-hook": "2.2.1", "isbot": "^5.1.11", "jsesc": "3.0.2", "lodash": "^4.17.21", "pathe": "^1.1.2", "picocolors": "^1.1.1", "prettier": "^3.6.2", "react-refresh": "^0.14.0", "semver": "^7.3.7", "set-cookie-parser": "^2.6.0", "tinyglobby": "^0.2.14", "valibot": "^0.41.0", "vite-node": "^3.2.2" }, "peerDependencies": { "@react-router/serve": "^7.9.1", "@vitejs/plugin-rsc": "*", "react-router": "^7.9.1", "typescript": "^5.1.0", "vite": "^5.1.0 || ^6.0.0 || ^7.0.0", "wrangler": "^3.28.2 || ^4.0.0" }, "optionalPeers": ["@react-router/serve", "@vitejs/plugin-rsc", "typescript", "wrangler"], "bin": { "react-router": "bin.js" } }, "sha512-fW/qubsdHq1nsufHPLpXa6hiNvXXV9JBtWqRlJ02OOhFeaWERZw4rGoHjG1DCg8/QTTadgbzplmP97ZnzWPkcA=="],
 
-    "@react-router/express": ["@react-router/express@7.8.2", "", { "dependencies": { "@react-router/node": "7.8.2" }, "peerDependencies": { "express": "^4.17.1 || ^5", "react-router": "7.8.2", "typescript": "^5.1.0" }, "optionalPeers": ["typescript"] }, "sha512-AJUNsE5Q+vD8TsNlKTw2MGUUnp/QJGlRV1jG2ItV30lwIx2wE7d4NHx/jWkGZIEblHQBTpodcp6MFirZXbisJw=="],
+    "@react-router/express": ["@react-router/express@7.9.1", "", { "dependencies": { "@react-router/node": "7.9.1" }, "peerDependencies": { "express": "^4.17.1 || ^5", "react-router": "7.9.1", "typescript": "^5.1.0" }, "optionalPeers": ["typescript"] }, "sha512-d1sfsD3AJXZj+C5k3jAmxAD3vJXGfoh3lNmtSwxp0NdZFHI54zPC5S9o80cy3P8p6Gc7XzSEQJYk9k7fAM/AIw=="],
 
-    "@react-router/node": ["@react-router/node@7.8.2", "", { "dependencies": { "@mjackson/node-fetch-server": "^0.2.0" }, "peerDependencies": { "react-router": "7.8.2", "typescript": "^5.1.0" }, "optionalPeers": ["typescript"] }, "sha512-FNepNg4Aya6V0ZxD/+uObtqxtMXcsBGa0ax9PznUh5qr8g4M6Xo9IN+soLb1tghz6iS/F9djFyhJ/lDkF77dEw=="],
+    "@react-router/node": ["@react-router/node@7.9.1", "", { "dependencies": { "@mjackson/node-fetch-server": "^0.2.0" }, "peerDependencies": { "react-router": "7.9.1", "typescript": "^5.1.0" }, "optionalPeers": ["typescript"] }, "sha512-XfyVLM+sDUDB1frGNr7iqaKNglrPwBiUp8+sFdL4///bngy49pUb2RuEtn2J2Cy5yjL+IlKbjJFrsmfimLBmeg=="],
 
-    "@react-router/serve": ["@react-router/serve@7.8.2", "", { "dependencies": { "@react-router/express": "7.8.2", "@react-router/node": "7.8.2", "compression": "^1.7.4", "express": "^4.19.2", "get-port": "5.1.1", "morgan": "^1.10.0", "source-map-support": "^0.5.21" }, "peerDependencies": { "react-router": "7.8.2" }, "bin": { "react-router-serve": "bin.js" } }, "sha512-1AwKjBWmyWWA7dGCRjn2glWwO6cA7dDX7roP1tosFi5cu1EvqHaqelRH6K6MZSV10Tv6oPtFG7rgV+rCafJvyw=="],
+    "@react-router/serve": ["@react-router/serve@7.9.1", "", { "dependencies": { "@react-router/express": "7.9.1", "@react-router/node": "7.9.1", "compression": "^1.7.4", "express": "^4.19.2", "get-port": "5.1.1", "morgan": "^1.10.0", "source-map-support": "^0.5.21" }, "peerDependencies": { "react-router": "7.9.1" }, "bin": { "react-router-serve": "bin.js" } }, "sha512-yVBSb5KsNCdkSoOk186/M5GJtcIvKE32Ax9LhXySVpM+suCSjucI+p2TXDOJIYsBqr2aKcBl/bNBm5sIJxG/HA=="],
 
     "@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.0.0-beta.38", "https://registry.npmmirror.com/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-beta.38.tgz", { "os": "android", "cpu": "arm64" }, "sha512-AE3HFQrjWCKLFZD1Vpiy+qsqTRwwoil1oM5WsKPSmfQ5fif/A+ZtOZetF32erZdsR7qyvns6qHEteEsF6g6rsQ=="],
 
@@ -456,8 +456,6 @@
 
     "@ungap/structured-clone": ["@ungap/structured-clone@1.3.0", "https://registry.npmmirror.com/@ungap/structured-clone/-/structured-clone-1.3.0.tgz", {}, "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="],
 
-    "@vitejs/plugin-rsc": ["@vitejs/plugin-rsc@0.4.11", "", { "dependencies": { "@mjackson/node-fetch-server": "^0.7.0", "es-module-lexer": "^1.7.0", "estree-walker": "^3.0.3", "magic-string": "^0.30.17", "periscopic": "^4.0.2", "turbo-stream": "^3.1.0", "vitefu": "^1.1.1" }, "peerDependencies": { "react": "*", "react-dom": "*", "vite": "*" } }, "sha512-+4H4wLi+Y9yF58znBfKgGfX8zcqUGt8ngnmNgzrdGdF1SVz7EO0sg7WnhK5fFVHt6fUxsVEjmEabsCWHKPL1Tw=="],
-
     "@xmldom/xmldom": ["@xmldom/xmldom@0.9.8", "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.9.8.tgz", {}, "sha512-p96FSY54r+WJ50FIOsCOjyj/wavs8921hG5+kVMmZgKcvIKxMXHTrjNJvRgWa/zuX3B6t2lijLNFaOyuxUH+2A=="],
 
     "accepts": ["accepts@1.3.8", "", { "dependencies": { "mime-types": "~2.1.34", "negotiator": "0.6.3" } }, "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw=="],
@@ -666,8 +664,6 @@
 
     "estree-util-is-identifier-name": ["estree-util-is-identifier-name@3.0.0", "https://registry.npmmirror.com/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz", {}, "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg=="],
 
-    "estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
-
     "etag": ["etag@1.8.1", "", {}, "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="],
 
     "eventsource": ["eventsource@3.0.7", "https://registry.npmmirror.com/eventsource/-/eventsource-3.0.7.tgz", { "dependencies": { "eventsource-parser": "^3.0.1" } }, "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA=="],
@@ -812,8 +808,6 @@
 
     "is-promise": ["is-promise@4.0.0", "https://registry.npmmirror.com/is-promise/-/is-promise-4.0.0.tgz", {}, "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ=="],
 
-    "is-reference": ["is-reference@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.6" } }, "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw=="],
-
     "is-regexp": ["is-regexp@3.1.0", "https://registry.npmmirror.com/is-regexp/-/is-regexp-3.1.0.tgz", {}, "sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA=="],
 
     "is-stream": ["is-stream@4.0.1", "https://registry.npmmirror.com/is-stream/-/is-stream-4.0.1.tgz", {}, "sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A=="],
@@ -1060,8 +1054,6 @@
 
     "pathe": ["pathe@1.1.2", "", {}, "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ=="],
 
-    "periscopic": ["periscopic@4.0.2", "", { "dependencies": { "@types/estree": "*", "is-reference": "^3.0.2", "zimmerframe": "^1.0.0" } }, "sha512-sqpQDUy8vgB7ycLkendSKS6HnVz1Rneoc3Rc+ZBUCe2pbqlVuCC5vF52l0NJ1aiMg/r1qfYF9/myz8CZeI2rjA=="],
-
     "picocolors": ["picocolors@1.1.1", "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
     "picomatch": ["picomatch@4.0.3", "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.3.tgz", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="],
@@ -1254,8 +1246,6 @@
 
     "tslib": ["tslib@2.3.0", "", {}, "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="],
 
-    "turbo-stream": ["turbo-stream@3.1.0", "", {}, "sha512-tVI25WEXl4fckNEmrq70xU1XumxUwEx/FZD5AgEcV8ri7Wvrg2o7GEq8U7htrNx3CajciGm+kDyhRf5JB6t7/A=="],
-
     "tw-animate-css": ["tw-animate-css@1.3.8", "https://registry.npmmirror.com/tw-animate-css/-/tw-animate-css-1.3.8.tgz", {}, "sha512-Qrk3PZ7l7wUcGYhwZloqfkWCmaXZAoqjkdbIDvzfGshwGtexa/DAs9koXxIkrpEasyevandomzCBAV1Yyop5rw=="],
 
     "type-fest": ["type-fest@4.41.0", "https://registry.npmmirror.com/type-fest/-/type-fest-4.41.0.tgz", {}, "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA=="],
@@ -1318,8 +1308,6 @@
 
     "vite-tsconfig-paths": ["vite-tsconfig-paths@5.1.4", "https://registry.npmmirror.com/vite-tsconfig-paths/-/vite-tsconfig-paths-5.1.4.tgz", { "dependencies": { "debug": "^4.1.1", "globrex": "^0.1.2", "tsconfck": "^3.0.3" }, "peerDependencies": { "vite": "*" }, "optionalPeers": ["vite"] }, "sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w=="],
 
-    "vitefu": ["vitefu@1.1.1", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0" }, "optionalPeers": ["vite"] }, "sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ=="],
-
     "web-streams-polyfill": ["web-streams-polyfill@3.3.3", "https://registry.npmmirror.com/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz", {}, "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw=="],
 
     "which": ["which@4.0.0", "https://registry.npmmirror.com/which/-/which-4.0.0.tgz", { "dependencies": { "isexe": "^3.1.1" }, "bin": { "node-which": "bin/which.js" } }, "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg=="],
@@ -1344,8 +1332,6 @@
 
     "yoctocolors-cjs": ["yoctocolors-cjs@2.1.3", "https://registry.npmmirror.com/yoctocolors-cjs/-/yoctocolors-cjs-2.1.3.tgz", {}, "sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw=="],
 
-    "zimmerframe": ["zimmerframe@1.1.4", "", {}, "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ=="],
-
     "zod": ["zod@3.25.76", "https://registry.npmmirror.com/zod/-/zod-3.25.76.tgz", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
 
     "zod-to-json-schema": ["zod-to-json-schema@3.24.6", "https://registry.npmmirror.com/zod-to-json-schema/-/zod-to-json-schema-3.24.6.tgz", { "peerDependencies": { "zod": "^3.24.1" } }, "sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg=="],
@@ -1400,8 +1386,6 @@
 
     "@tybys/wasm-util/tslib": ["tslib@2.8.1", "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
-    "@vitejs/plugin-rsc/@mjackson/node-fetch-server": ["@mjackson/node-fetch-server@0.7.0", "", {}, "sha512-un8diyEBKU3BTVj3GzlTPA1kIjCkGdD+AMYQy31Gf9JCkfoZzwgJ79GUtHrF2BN3XPNMLpubbzPcxys+a3uZEw=="],
-
     "accepts/negotiator": ["negotiator@0.6.3", "", {}, "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="],
 
     "ansi-escapes/type-fest": ["type-fest@0.21.3", "https://registry.npmmirror.com/type-fest/-/type-fest-0.21.3.tgz", {}, "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w=="],
diff --git a/frontend/package.json b/frontend/package.json
index 320bd3c55..1074c9de6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,7 +15,7 @@
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@react-router/node": "^7.8.2",
+    "@react-router/node": "^7.9.1",
     "@tanstack/react-query": "^5.89.0",
     "@tauri-apps/api": "^2.8.0",
     "@tauri-apps/plugin-opener": "^2.5.0",
@@ -35,8 +35,8 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.2.4",
-    "@react-router/dev": "^7.8.2",
-    "@react-router/serve": "^7.8.2",
+    "@react-router/dev": "^7.9.1",
+    "@react-router/serve": "^7.9.1",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.1.13",
     "@tauri-apps/cli": "^2.8.4",
diff --git a/frontend/src/app/agent/chat.tsx b/frontend/src/app/agent/chat.tsx
index 38e72ea21..46b66e257 100644
--- a/frontend/src/app/agent/chat.tsx
+++ b/frontend/src/app/agent/chat.tsx
@@ -1,16 +1,5 @@
+import { ArrowUp, MessageCircle, Settings } from "lucide-react";
 import {
-  AlertTriangle,
-  ArrowUp,
-  Bot,
-  CheckCircle,
-  Clock,
-  FileText,
-  MessageCircle,
-  Settings,
-  User,
-} from "lucide-react";
-import {
-  memo,
   useCallback,
   useEffect,
   useMemo,
@@ -31,11 +20,11 @@ import { agentData } from "@/mock/agent-data";
 import type {
   AgentConversationsStore,
   AgentStreamRequest,
-  ChatMessage,
   SSEData,
 } from "@/types/agent";
 import type { Route } from "./+types/chat";
 import { ChatBackground } from "./components";
+import { ChatMessage as ChatMessageComponent } from "./components/chat-message";
 
 // Optimized reducer for agent store management
 function agentStoreReducer(
@@ -45,116 +34,6 @@ function agentStoreReducer(
   return updateAgentConversationsStore(state, action);
 }
 
-// Memoized Message Component for better performance
-const MessageItem = memo<{
-  message: ChatMessage;
-  index: number;
-  conversationId: string;
-  threadId: string;
-}>(({ message }) => {
-  return (
-    <div
-      className={cn(
-        "flex gap-4",
-        message.role === "user" ? "justify-end" : "justify-start",
-      )}
-    >
-      {message.role !== "user" && (
-        <div className="size-8 flex-shrink-0">
-          <div className="flex size-8 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-purple-600">
-            <Bot size={16} className="text-white" />
-          </div>
-        </div>
-      )}
-
-      <div
-        className={cn(
-          "max-w-[80%] rounded-2xl px-4 py-3",
-          message.role === "user"
-            ? "ml-auto bg-blue-600 text-white"
-            : "bg-gray-100 text-gray-900",
-        )}
-      >
-        {/* Render different message types based on payload structure */}
-        {(() => {
-          const payload = message.payload;
-          if (!payload) return null;
-
-          // Component generator message
-          if ("component_type" in payload && "content" in payload) {
-            return (
-              <div>
-                <div className="mt-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
-                  <div className="mb-2 flex items-center gap-2">
-                    <FileText size={16} className="text-blue-600" />
-                    <span className="font-medium text-blue-900 text-sm capitalize">
-                      {payload.component_type} Generated
-                    </span>
-                  </div>
-                  <div className="rounded bg-white p-3 text-gray-800 text-sm">
-                    <pre className="whitespace-pre-wrap font-mono text-xs">
-                      {payload.content}
-                    </pre>
-                  </div>
-                </div>
-              </div>
-            );
-          }
-
-          // Tool call message
-          if ("tool_call_id" in payload && "tool_name" in payload) {
-            const hasResult =
-              "tool_call_result" in payload && payload.tool_call_result;
-            return (
-              <div>
-                <div className="mt-3 flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 p-2">
-                  {hasResult ? (
-                    <CheckCircle size={14} className="text-green-600" />
-                  ) : (
-                    <Clock size={14} className="animate-pulse text-blue-600" />
-                  )}
-                  <span className="font-medium text-blue-900 text-sm">
-                    {payload.tool_name}
-                  </span>
-                  {hasResult ? (
-                    <span className="truncate text-gray-600 text-xs">
-                      {String(payload.tool_call_result).substring(0, 50)}
-                      ...
-                    </span>
-                  ) : (
-                    <span className="text-blue-600 text-xs">Running...</span>
-                  )}
-                </div>
-              </div>
-            );
-          }
-
-          // Regular content message
-          if ("content" in payload) {
-            return (
-              <div className="whitespace-pre-wrap break-words">
-                {payload.content}
-              </div>
-            );
-          }
-
-          return null;
-        })()}
-      </div>
-
-      {message.role === "user" && (
-        <div className="size-8 flex-shrink-0">
-          <div className="flex size-8 items-center justify-center rounded-full bg-gray-600">
-            <User size={16} className="text-white" />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-});
-
-MessageItem.displayName = "MessageItem";
-
 export default function AgentChat() {
   const { agentId } = useParams<Route.LoaderArgs["params"]>();
   const textareaRef = useRef<ScrollTextareaRef>(null);
@@ -164,9 +43,6 @@ export default function AgentChat() {
   const [agentStore, dispatchAgentStore] = useReducer(agentStoreReducer, {});
   const [conversationId, setConversationId] = useState<string | null>(null);
   const [currentThreadId, setCurrentThreadId] = useState<string | null>(null);
-  const [userInputRequired, setUserInputRequired] = useState<string | null>(
-    null,
-  );
   const [isSending, setIsSending] = useState(false);
   const [shouldClose, setShouldClose] = useState(false);
 
@@ -212,13 +88,7 @@ export default function AgentChat() {
         break;
       }
 
-      case "plan_require_user_input": {
-        setUserInputRequired(data.payload.content);
-        break;
-      }
-
       case "done": {
-        setUserInputRequired(null);
         setCurrentThreadId(data.thread_id);
         setShouldClose(true);
         break;
@@ -289,7 +159,8 @@ export default function AgentChat() {
   // Derived state - compute from existing state instead of maintaining separately
   const isConnected = state === SSEReadyState.OPEN;
   const isConnecting = state === SSEReadyState.CONNECTING;
-  const isStreaming = isConnected && !userInputRequired;
+  // isStreaming represents when AI is processing/responding, not related to user input requirements
+  const isStreaming = isConnected && isSending;
 
   // Send message to agent
   const sendMessage = useCallback(
@@ -315,7 +186,6 @@ export default function AgentChat() {
 
         // Add user message to store
         addUserMessage(message);
-        setUserInputRequired(null);
 
         const request: AgentStreamRequest = {
           query: message,
@@ -341,14 +211,6 @@ export default function AgentChat() {
     ],
   );
 
-  // Handle user input for plan_require_user_input events
-  const handleUserInputResponse = useCallback(
-    async (response: string) => {
-      await sendMessage(response);
-    },
-    [sendMessage],
-  );
-
   const handleSendMessage = useCallback(() => {
     const trimmedInput = inputValue.trim();
     // Prevent sending while connecting/sending or when input is empty
@@ -357,20 +219,10 @@ export default function AgentChat() {
       return;
     }
 
-    const messageHandler = userInputRequired
-      ? handleUserInputResponse
-      : sendMessage;
-
-    messageHandler(trimmedInput);
+    // Always use sendMessage - user input for plan_require_user_input is just normal conversation
+    sendMessage(trimmedInput);
     setInputValue("");
-  }, [
-    inputValue,
-    isConnecting,
-    isSending,
-    userInputRequired,
-    handleUserInputResponse,
-    sendMessage,
-  ]);
+  }, [inputValue, isConnecting, isSending, sendMessage]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setInputValue(e.target.value);
@@ -496,14 +348,6 @@ export default function AgentChat() {
                   <span>⚠️ Connection error: {sseError.message}</span>
                 </div>
               )}
-
-              {/* User input required prompt */}
-              {userInputRequired && (
-                <div className="flex items-center gap-2 rounded-lg border border-yellow-200 bg-yellow-50 p-3 text-sm text-yellow-800">
-                  <AlertTriangle size={16} className="text-yellow-600" />
-                  <span>{userInputRequired}</span>
-                </div>
-              )}
             </div>
           </>
         ) : (
@@ -511,7 +355,7 @@ export default function AgentChat() {
             {/* Chat messages with optimized rendering */}
             <div className="flex-1 space-y-6 overflow-y-auto p-6">
               {currentMessages.map((message, index) => (
-                <MessageItem
+                <ChatMessageComponent
                   key={`${message.conversation_id}-${message.thread_id}-${index}`}
                   message={message}
                   index={index}
@@ -524,18 +368,9 @@ export default function AgentChat() {
               {isStreaming && (
                 <div className="flex items-center gap-2 text-gray-500 text-sm">
                   <div className="flex space-x-1">
-                    <div
-                      className="h-2 w-2 animate-bounce rounded-full bg-gray-400"
-                      style={{ animationDelay: "0ms" }}
-                    />
-                    <div
-                      className="h-2 w-2 animate-bounce rounded-full bg-gray-400"
-                      style={{ animationDelay: "150ms" }}
-                    />
-                    <div
-                      className="h-2 w-2 animate-bounce rounded-full bg-gray-400"
-                      style={{ animationDelay: "300ms" }}
-                    />
+                    <div className="h-2 w-2 animate-bounce rounded-full bg-gray-400 delay-0" />
+                    <div className="h-2 w-2 animate-bounce rounded-full bg-gray-400 delay-150" />
+                    <div className="h-2 w-2 animate-bounce rounded-full bg-gray-400 delay-300" />
                   </div>
                   <span>AI is thinking...</span>
                 </div>
@@ -556,11 +391,7 @@ export default function AgentChat() {
                   value={inputValue}
                   onInput={handleInputChange}
                   onKeyDown={handleKeyDown}
-                  placeholder={
-                    userInputRequired
-                      ? "Agent is waiting for your response..."
-                      : "Type your message..."
-                  }
+                  placeholder="Type your message..."
                   maxHeight={120}
                   minHeight={24}
                   disabled={isStreaming || isSending}
@@ -583,13 +414,11 @@ export default function AgentChat() {
                       "flex items-center gap-1",
                       isStreaming
                         ? "text-green-600"
-                        : userInputRequired
-                          ? "text-yellow-600"
-                          : isConnecting
-                            ? "text-blue-600"
-                            : isConnected
-                              ? "text-green-600"
-                              : "text-red-600",
+                        : isConnecting
+                          ? "text-blue-600"
+                          : isConnected
+                            ? "text-green-600"
+                            : "text-red-600",
                     )}
                   >
                     <div
@@ -597,25 +426,21 @@ export default function AgentChat() {
                         "h-2 w-2 rounded-full",
                         isStreaming
                           ? "bg-green-500"
-                          : userInputRequired
-                            ? "animate-pulse bg-yellow-500"
-                            : isConnecting
-                              ? "animate-pulse bg-blue-500"
-                              : isConnected
-                                ? "bg-green-500"
-                                : "bg-red-500",
+                          : isConnecting
+                            ? "animate-pulse bg-blue-500"
+                            : isConnected
+                              ? "bg-green-500"
+                              : "bg-red-500",
                       )}
                     />
                     <span className="text-xs">
                       {isStreaming
                         ? "Streaming"
-                        : userInputRequired
-                          ? "Waiting for input"
-                          : isConnecting
-                            ? "Connecting"
-                            : isConnected
-                              ? "Ready"
-                              : "Disconnected"}
+                        : isConnecting
+                          ? "Connecting"
+                          : isConnected
+                            ? "Ready"
+                            : "Disconnected"}
                     </span>
                   </span>
                   {conversationId && <span>Session: {conversationId}</span>}
diff --git a/frontend/src/app/agent/components/chat-message.tsx b/frontend/src/app/agent/components/chat-message.tsx
new file mode 100644
index 000000000..031cda017
--- /dev/null
+++ b/frontend/src/app/agent/components/chat-message.tsx
@@ -0,0 +1,115 @@
+import { Bot, CheckCircle, Clock, FileText, User } from "lucide-react";
+import { memo } from "react";
+import { cn } from "@/lib/utils";
+import type { ChatMessage as ChatMessageType } from "@/types/agent";
+
+export interface ChatMessageProps {
+  message: ChatMessageType;
+  index: number;
+  conversationId: string;
+  threadId: string;
+}
+
+export const ChatMessage = memo<ChatMessageProps>(({ message }) => {
+  return (
+    <div
+      className={cn(
+        "flex gap-4",
+        message.role === "user" ? "justify-end" : "justify-start",
+      )}
+    >
+      {message.role !== "user" && (
+        <div className="size-8 flex-shrink-0">
+          <div className="flex size-8 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-purple-600">
+            <Bot size={16} className="text-white" />
+          </div>
+        </div>
+      )}
+
+      <div
+        className={cn(
+          "max-w-[80%] rounded-2xl px-4 py-3",
+          message.role === "user"
+            ? "ml-auto bg-blue-600 text-white"
+            : "bg-gray-100 text-gray-900",
+        )}
+      >
+        {/* Render different message types based on payload structure */}
+        {(() => {
+          const payload = message.payload;
+          if (!payload) return null;
+
+          // Component generator message
+          if ("component_type" in payload && "content" in payload) {
+            return (
+              <div>
+                <div className="mt-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
+                  <div className="mb-2 flex items-center gap-2">
+                    <FileText size={16} className="text-blue-600" />
+                    <span className="font-medium text-blue-900 text-sm capitalize">
+                      {payload.component_type} Generated
+                    </span>
+                  </div>
+                  <div className="rounded bg-white p-3 text-gray-800 text-sm">
+                    <pre className="whitespace-pre-wrap font-mono text-xs">
+                      {payload.content}
+                    </pre>
+                  </div>
+                </div>
+              </div>
+            );
+          }
+
+          // Tool call message
+          if ("tool_call_id" in payload && "tool_name" in payload) {
+            const hasResult =
+              "tool_call_result" in payload && payload.tool_call_result;
+            return (
+              <div>
+                <div className="mt-3 flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 p-2">
+                  {hasResult ? (
+                    <CheckCircle size={14} className="text-green-600" />
+                  ) : (
+                    <Clock size={14} className="animate-pulse text-blue-600" />
+                  )}
+                  <span className="font-medium text-blue-900 text-sm">
+                    {payload.tool_name}
+                  </span>
+                  {hasResult ? (
+                    <span className="truncate text-gray-600 text-xs">
+                      {String(payload.tool_call_result).substring(0, 50)}
+                      ...
+                    </span>
+                  ) : (
+                    <span className="text-blue-600 text-xs">Running...</span>
+                  )}
+                </div>
+              </div>
+            );
+          }
+
+          // Regular content message
+          if ("content" in payload) {
+            return (
+              <div className="whitespace-pre-wrap break-words">
+                {payload.content}
+              </div>
+            );
+          }
+
+          return null;
+        })()}
+      </div>
+
+      {message.role === "user" && (
+        <div className="size-8 flex-shrink-0">
+          <div className="flex size-8 items-center justify-center rounded-full bg-gray-600">
+            <User size={16} className="text-white" />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
+
+ChatMessage.displayName = "ChatMessage";

From 5c9569d15ecfd6e294ce08a9b87be0df4e152000 Mon Sep 17 00:00:00 2001
From: DigHuang <114602213+DigHuang@users.noreply.github.com>
Date: Wed, 24 Sep 2025 12:00:22 +0800
Subject: [PATCH 13/13] refactor: chat state and SSE hook for thread support

Replaces conversation/thread state with refs in AgentChat, updates SSE event handling to support thread_started, and improves rendering for multiple threads. Simplifies useSSE hook API, removes unnecessary memoization, and updates SSEClient to better handle options, headers, and connection lifecycle. Adds thread_started event type to agent types.
---
 frontend/src/app/agent/chat.tsx | 232 ++++++++++++++++----------------
 frontend/src/hooks/use-sse.ts   | 143 +++++---------------
 frontend/src/lib/sse-client.ts  |  37 +++--
 frontend/src/types/agent.ts     |   1 +
 4 files changed, 176 insertions(+), 237 deletions(-)

diff --git a/frontend/src/app/agent/chat.tsx b/frontend/src/app/agent/chat.tsx
index 46b66e257..aa940b6b4 100644
--- a/frontend/src/app/agent/chat.tsx
+++ b/frontend/src/app/agent/chat.tsx
@@ -14,6 +14,7 @@ import ScrollTextarea, {
 } from "@/components/valuecell/scroll/scroll-textarea";
 import { useSSE } from "@/hooks/use-sse";
 import { updateAgentConversationsStore } from "@/lib/agent-store";
+import { getServerUrl } from "@/lib/api-client";
 import { SSEReadyState } from "@/lib/sse-client";
 import { cn } from "@/lib/utils";
 import { agentData } from "@/mock/agent-data";
@@ -21,6 +22,7 @@ import type {
   AgentConversationsStore,
   AgentStreamRequest,
   SSEData,
+  ThreadView,
 } from "@/types/agent";
 import type { Route } from "./+types/chat";
 import { ChatBackground } from "./components";
@@ -41,112 +43,94 @@ export default function AgentChat() {
 
   // Use optimized reducer for state management
   const [agentStore, dispatchAgentStore] = useReducer(agentStoreReducer, {});
-  const [conversationId, setConversationId] = useState<string | null>(null);
-  const [currentThreadId, setCurrentThreadId] = useState<string | null>(null);
+  const curConversationId = useRef<string>("");
+  const curThreadId = useRef<string>("");
   const [isSending, setIsSending] = useState(false);
   const [shouldClose, setShouldClose] = useState(false);
 
-  // Get current conversation and thread messages
-  const currentMessages = useMemo(() => {
-    if (!conversationId || !currentThreadId || !agentStore[conversationId]) {
-      return [];
+  // Get current conversation
+  const threadEntries = useMemo(() => {
+    if (!curConversationId.current || !agentStore[curConversationId.current]) {
+      return null;
     }
-    const thread = agentStore[conversationId].threads[currentThreadId];
-    return thread?.messages || [];
-  }, [agentStore, conversationId, currentThreadId]);
-
-  // Add user message by triggering message_chunk event with role: "user"
-  const addUserMessage = useCallback(
-    (content: string) => {
-      if (!conversationId || !currentThreadId) return;
-
-      dispatchAgentStore({
-        event: "message_chunk",
-        data: {
-          conversation_id: conversationId,
-          thread_id: currentThreadId,
-          task_id: "",
-          subtask_id: "",
-          payload: { content },
-          role: "user",
-        },
-      });
-    },
-    [conversationId, currentThreadId],
-  );
+    const threads = agentStore[curConversationId.current].threads;
+    return threads
+      ? (Object.entries(threads) as Array<[string, ThreadView]>)
+      : [];
+  }, [agentStore]);
 
   // Handle SSE data events using agent store
-  const handleSSEData = useCallback((sseData: SSEData) => {
-    // Update agent store using the reducer
-    dispatchAgentStore(sseData);
-
-    // Handle specific UI state updates
-    const { event, data } = sseData;
-    switch (event) {
-      case "conversation_started": {
-        setConversationId(data.conversation_id);
-        break;
-      }
+  const handleSSEData = useCallback(
+    (sseData: SSEData) => {
+      console.log("🚀 ~ AgentChat ~ sseData:", sseData);
+      // Update agent store using the reducer
+      dispatchAgentStore(sseData);
+
+      // Handle specific UI state updates
+      const { event, data } = sseData;
+      switch (event) {
+        case "conversation_started": {
+          curConversationId.current = data.conversation_id;
+          break;
+        }
 
-      case "done": {
-        setCurrentThreadId(data.thread_id);
-        setShouldClose(true);
-        break;
-      }
+        case "thread_started": {
+          curThreadId.current = data.thread_id;
+          dispatchAgentStore({
+            event: "message_chunk",
+            data: {
+              conversation_id: curConversationId.current,
+              thread_id: data.thread_id,
+              task_id: "",
+              subtask_id: "",
+              payload: { content: inputValue.trim() },
+              role: "user",
+            },
+          });
+          break;
+        }
 
-      // All message-related events are handled by the store
-      default:
-        // Update current thread ID for message events
-        if ("thread_id" in data) {
-          setCurrentThreadId(data.thread_id);
+        case "done": {
+          curThreadId.current = data.thread_id;
+          setShouldClose(true);
+          break;
         }
-        break;
-    }
-  }, []);
-
-  // Stabilize SSE options to avoid infinite reconnects
-  const sseOptions = useMemo(
-    () => ({
-      url: "http://localhost:8000/api/v1/agents/stream",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      autoReconnect: false,
-      reconnectInterval: 5000,
-      maxReconnectAttempts: 3,
-      timeout: 60000, // Increase timeout to 60s
-    }),
-    [],
+
+        // All message-related events are handled by the store
+        default:
+          // Update current thread ID for message events
+          if ("thread_id" in data) {
+            curThreadId.current = data.thread_id;
+          }
+          break;
+      }
+    },
+    [inputValue],
   );
 
-  const sseHandlers = useMemo(
-    () => ({
+  // Initialize SSE connection using the useSSE hook
+  const {
+    connect,
+    close,
+    state,
+    error: sseError,
+  } = useSSE({
+    url: getServerUrl("/agents/stream"),
+    handlers: {
       onData: handleSSEData,
       onOpen: () => {
-        console.log("SSE connection opened");
+        console.log("✅ SSE connection opened");
         setIsSending(false); // Reset sending state on open
       },
       onError: (error: Error) => {
-        console.error("SSE connection error:", error);
+        console.error("❌ SSE connection error:", error);
         setIsSending(false); // Reset sending state on error
       },
       onClose: () => {
-        console.log("SSE connection closed");
+        console.log("🔌 SSE connection closed");
         setIsSending(false); // Reset sending state on close
       },
-    }),
-    [handleSSEData],
-  );
-
-  // Initialize SSE connection using the useSSE hook
-  const {
-    connect,
-    close,
-    state,
-    error: sseError,
-  } = useSSE({
-    options: sseOptions,
-    handlers: sseHandlers,
+    },
   });
 
   useEffect(() => {
@@ -154,7 +138,7 @@ export default function AgentChat() {
       close();
       setShouldClose(false);
     }
-  }, [shouldClose, close]);
+  }, [shouldClose]);
 
   // Derived state - compute from existing state instead of maintaining separately
   const isConnected = state === SSEReadyState.OPEN;
@@ -176,22 +160,10 @@ export default function AgentChat() {
       setIsSending(true);
 
       try {
-        // For new conversation, we'll let the server assign IDs
-        const newConversationId = conversationId || `conv-${Date.now()}`;
-        const newThreadId = currentThreadId || `thread-${Date.now()}`;
-
-        // Set IDs if this is a new conversation
-        if (!conversationId) setConversationId(newConversationId);
-        if (!currentThreadId) setCurrentThreadId(newThreadId);
-
-        // Add user message to store
-        addUserMessage(message);
-
         const request: AgentStreamRequest = {
           query: message,
           agent_name: "WarrenBuffettAgent",
-          conversation_id: newConversationId,
-          thread_id: newThreadId,
+          conversation_id: curConversationId.current,
         };
 
         // Connect SSE client with request body to receive streaming response
@@ -201,14 +173,7 @@ export default function AgentChat() {
         setIsSending(false); // Reset immediately on error
       }
     },
-    [
-      conversationId,
-      currentThreadId,
-      addUserMessage,
-      connect,
-      isSending,
-      isConnecting,
-    ],
+    [connect, isSending, isConnecting],
   );
 
   const handleSendMessage = useCallback(() => {
@@ -303,7 +268,7 @@ export default function AgentChat() {
 
       {/* Main content area */}
       <main className="relative flex flex-1 flex-col">
-        {currentMessages.length === 0 ? (
+        {!threadEntries?.length ? (
           <>
             {/* Background blur effects for welcome screen */}
             <ChatBackground />
@@ -354,15 +319,40 @@ export default function AgentChat() {
           <>
             {/* Chat messages with optimized rendering */}
             <div className="flex-1 space-y-6 overflow-y-auto p-6">
-              {currentMessages.map((message, index) => (
-                <ChatMessageComponent
-                  key={`${message.conversation_id}-${message.thread_id}-${index}`}
-                  message={message}
-                  index={index}
-                  conversationId={conversationId || ""}
-                  threadId={currentThreadId || ""}
-                />
-              ))}
+              {threadEntries.map(([threadId, thread], threadIndex) => {
+                if (!thread.messages.length) {
+                  return threadEntries.length > 1 ? (
+                    <div
+                      key={`${threadId}-empty`}
+                      className="flex items-center justify-center rounded-xl border border-gray-200 border-dashed bg-gray-50 p-6 text-gray-500 text-sm"
+                    >
+                      Thread {threadIndex + 1} 暂无消息
+                    </div>
+                  ) : null;
+                }
+
+                return (
+                  <div key={threadId} className="space-y-6">
+                    {threadEntries.length > 1 && (
+                      <div className="flex items-center gap-2 text-gray-400 text-xs uppercase tracking-wide">
+                        <span className="h-px flex-1 bg-gray-200" />
+                        <span>Thread {threadIndex + 1}</span>
+                        <span className="h-px flex-1 bg-gray-200" />
+                      </div>
+                    )}
+
+                    {thread.messages.map((message, index) => (
+                      <ChatMessageComponent
+                        key={`${message.conversation_id}-${threadId}-${index}`}
+                        message={message}
+                        index={index}
+                        conversationId={curConversationId.current}
+                        threadId={threadId}
+                      />
+                    ))}
+                  </div>
+                );
+              })}
 
               {/* Streaming indicator */}
               {isStreaming && (
@@ -443,8 +433,12 @@ export default function AgentChat() {
                             : "Disconnected"}
                     </span>
                   </span>
-                  {conversationId && <span>Session: {conversationId}</span>}
-                  {currentThreadId && <span>Thread: {currentThreadId}</span>}
+                  {curConversationId.current && (
+                    <span>Session: {curConversationId.current}</span>
+                  )}
+                  {curThreadId.current && (
+                    <span>Thread: {curThreadId.current}</span>
+                  )}
                 </div>
                 <span>Press Enter to send, Shift+Enter for new line</span>
               </div>
diff --git a/frontend/src/hooks/use-sse.ts b/frontend/src/hooks/use-sse.ts
index 8a538341d..8db2f2673 100644
--- a/frontend/src/hooks/use-sse.ts
+++ b/frontend/src/hooks/use-sse.ts
@@ -1,13 +1,11 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import SSEClient, {
   type SSEEventHandlers,
   type SSEOptions,
   SSEReadyState,
 } from "@/lib/sse-client";
 
-export interface UseSSEOptions {
-  /** SSE connection options */
-  options: SSEOptions;
+export interface UseSSEOptions extends SSEOptions {
   /** Event handlers */
   handlers?: SSEEventHandlers;
   /** Whether to auto-connect on mount */
@@ -27,139 +25,65 @@ export interface UseSSEReturn {
   connect: (body?: BodyInit) => Promise<void>;
   /** Close the SSE connection */
   close: () => void;
-  /** SSE client instance for advanced usage */
-  client: SSEClient | null;
 }
 
 /**
- * React hook for Server-Sent Events (SSE) using fetch-based SSEClient
- *
- * @example
- * ```tsx
- * import { useSSE } from '@/hooks/use-sse';
- * import type { SSEData } from '@/types/agent';
- *
- * function ChatComponent() {
- *   const { connect, close, isConnected, error } = useSSE({
- *     options: {
- *       url: '/api/chat/stream',
- *       headers: { 'Authorization': 'Bearer token' }
- *     },
- *     handlers: {
- *       onData: (sseData: SSEData) => {
- *         const { event, data } = sseData;
- *         if (event === 'message_chunk' || event === 'message') {
- *           console.log('New message chunk:', data.payload.content);
- *         } else if (event === 'tool_call_started') {
- *           console.log('Tool call started:', data.payload.tool_name);
- *         } else if (event === 'done') {
- *           console.log('Conversation completed:', data.conversation_id);
- *         }
- *       },
- *       onError: (error) => console.error('SSE Error:', error)
- *     },
- *     autoConnect: true,
- *     body: JSON.stringify({
- *       message: 'Hello',
- *       conversation_id: 'conv_123'
- *     })
- *   });
- *
- *   return (
- *     <div>
- *       <p>Status: {isConnected ? 'Connected' : 'Disconnected'}</p>
- *       {error && <p>Error: {error.message}</p>}
- *       <button onClick={() => connect()}>Connect</button>
- *       <button onClick={close}>Disconnect</button>
- *     </div>
- *   );
- * }
- * ```
+ * React hook for Server-Sent Events (SSE) - simplified version
  */
 export function useSSE({
-  options,
   handlers,
   autoConnect = false,
   body,
+  ...sseOptions
 }: UseSSEOptions): UseSSEReturn {
   const [error, setError] = useState<Error | null>(null);
-  const [state, setState] = useState<SSEReadyState>(SSEReadyState.CLOSED);
-  const handlersRef = useRef<SSEEventHandlers>(handlers || {});
-  const bodyRef = useRef<BodyInit | undefined>(body);
+  const clientRef = useRef<SSEClient | null>(null);
 
-  // Update refs when props change
-  useEffect(() => {
-    handlersRef.current = handlers || {};
-  }, [handlers]);
-
-  useEffect(() => {
-    bodyRef.current = body;
-  }, [body]);
-
-  // Internal handlers referencing handlersRef to avoid re-binding
-  const internalHandlers: SSEEventHandlers = useMemo(
-    () => ({
-      onData: (sseData) => {
-        handlersRef.current.onData?.(sseData);
+  // Initialize client once
+  if (!clientRef.current) {
+    clientRef.current = new SSEClient(sseOptions, {
+      ...handlers,
+      onError: (err: Error) => {
+        setError(err);
+        handlers?.onError?.(err);
       },
       onOpen: () => {
         setError(null);
-        setState(SSEReadyState.OPEN);
-        handlersRef.current.onOpen?.();
+        handlers?.onOpen?.();
       },
-      onError: (err) => {
-        setError(err);
-        setState(SSEReadyState.CLOSED);
-        handlersRef.current.onError?.(err);
-      },
-      onClose: () => {
-        setState(SSEReadyState.CLOSED);
-        handlersRef.current.onClose?.();
-      },
-    }),
-    [],
-  );
-
-  // Create client instance (caller is responsible for options stability)
-  const client = useMemo(
-    () => new SSEClient(options, internalHandlers),
-    [options, internalHandlers],
-  );
+    });
+  }
 
-  // Cleanup on unmount or client change
+  // Auto-connect and cleanup
   useEffect(() => {
-    return () => {
-      client.destroy();
-    };
-  }, [client]);
+    const client = clientRef.current!;
 
-  // Auto-connect if enabled
-  useEffect(() => {
     if (autoConnect) {
-      setState(SSEReadyState.CONNECTING);
-      void client.connect(bodyRef.current);
+      client.connect(body);
     }
-  }, [autoConnect, client]);
+
+    return () => {
+      client.destroy();
+      clientRef.current = null;
+    };
+  }, [autoConnect, body]);
 
   const connect = useCallback(
     async (connectBody?: BodyInit) => {
+      const client = clientRef.current;
+      if (!client) throw new Error("SSE client not initialized");
+
       setError(null);
-      try {
-        setState(SSEReadyState.CONNECTING);
-        await client.connect(connectBody ?? bodyRef.current);
-      } catch (err) {
-        setError(err as Error);
-        setState(SSEReadyState.CLOSED);
-        throw err;
-      }
+      await client.connect(connectBody || body);
     },
-    [client],
+    [body],
   );
 
   const close = useCallback(() => {
-    client.close();
-    setState(SSEReadyState.CLOSED);
-  }, [client]);
+    clientRef.current?.close();
+  }, []);
+
+  const state = clientRef.current?.state ?? SSEReadyState.CLOSED;
 
   return {
     state,
@@ -167,7 +91,6 @@ export function useSSE({
     error,
     connect,
     close,
-    client,
   };
 }
 
diff --git a/frontend/src/lib/sse-client.ts b/frontend/src/lib/sse-client.ts
index c453b5a9c..e3e292aab 100644
--- a/frontend/src/lib/sse-client.ts
+++ b/frontend/src/lib/sse-client.ts
@@ -41,15 +41,19 @@ export class SSEClient {
   private abortController: AbortController | null = null;
 
   constructor(options: SSEOptions, handlers?: SSEEventHandlers) {
-    this.options = {
-      timeout: 30000,
-      headers: {},
-      fetchOptions: {},
-      ...options,
-    };
+    this.options = this.resolveOptions(options);
     this.handlers = handlers ?? {};
   }
 
+  private resolveOptions(options: SSEOptions): Required<SSEOptions> {
+    return {
+      url: options.url,
+      timeout: options.timeout ?? 30 * 1000,
+      headers: { ...(options.headers ?? {}) },
+      fetchOptions: { ...(options.fetchOptions ?? {}) },
+    };
+  }
+
   /**
    * Connect to the SSE endpoint
    */
@@ -83,11 +87,12 @@ export class SSEClient {
       const response = await fetch(this.options.url, {
         method: "POST",
         body: this.currentBody,
-        signal: this.abortController?.signal,
+        // signal: this.abortController?.signal,
         ...this.options.fetchOptions,
         headers: {
           Accept: "text/event-stream",
           "Cache-Control": "no-cache",
+          "Content-Type": "application/json",
           ...this.options.headers,
         },
       });
@@ -218,10 +223,23 @@ export class SSEClient {
     return this.readyState;
   }
 
+  updateOptions(options: SSEOptions): void {
+    this.options = this.resolveOptions(options);
+  }
+
+  updateHandlers(handlers?: SSEEventHandlers): void {
+    this.handlers = handlers ?? {};
+  }
+
   /**
    * Close the SSE connection
    */
   close(): void {
+    // Only call onClose if we had an active connection
+    const wasConnected =
+      this.readyState === SSEReadyState.OPEN ||
+      this.readyState === SSEReadyState.CONNECTING;
+
     this.isManualClose = true;
     this.readyState = SSEReadyState.CLOSED;
 
@@ -230,7 +248,10 @@ export class SSEClient {
       this.abortController = null;
     }
 
-    this.handlers.onClose?.();
+    // Only trigger onClose callback if there was an actual connection
+    if (wasConnected) {
+      this.handlers.onClose?.();
+    }
   }
 
   /**
diff --git a/frontend/src/types/agent.ts b/frontend/src/types/agent.ts
index 265298b2f..c015e0cee 100644
--- a/frontend/src/types/agent.ts
+++ b/frontend/src/types/agent.ts
@@ -23,6 +23,7 @@ type MessageWithRole<TRole extends string, TPayload> = BaseEventData & {
 export interface AgentEventMap {
   // Lifecycle Events
   conversation_started: Pick<BaseEventData, "conversation_id">;
+  thread_started: Pick<BaseEventData, "thread_id">;
   done: Pick<BaseEventData, "conversation_id" | "thread_id">;
 
   // Content Streaming Events