feature: strategy agent

frontend/biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.3.1/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.3.3/schema.json",
   "files": {
     "includes": [
       "src/**/*.{ts,tsx,js,jsx}",

frontend/package.json

@@ -17,29 +17,34 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@react-router/node": "^7.9.4",
+    "@tanstack/react-form": "^1.23.8",
     "@tanstack/react-query": "^5.90.5",
     "@tauri-apps/api": "^2.9.0",
     "@tauri-apps/plugin-opener": "^2.5.1",
     "best-effort-json-parser": "^1.2.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "dayjs": "^1.11.18",
     "echarts": "^6.0.0",
     "isbot": "5.1.31",
-    "lucide-react": "^0.548.0",
+    "lucide-react": "^0.552.0",
     "mutative": "^1.3.0",
     "next-themes": "^0.4.6",
     "overlayscrollbars": "^2.12.0",
@@ -51,10 +56,11 @@
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
+    "zod": "^4.1.12",
     "zustand": "^5.0.8"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.3.1",
+    "@biomejs/biome": "^2.3.3",
     "@react-router/dev": "^7.9.4",
     "@react-router/serve": "^7.9.4",
     "@tailwindcss/typography": "^0.5.19",

frontend/src/api/strategy.ts

@@ -0,0 +1,108 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { API_QUERY_KEYS } from "@/constants/api";
+import { type ApiResponse, apiClient } from "@/lib/api-client";
+import type {
+  CreateStrategyRequest,
+  LlmConfig,
+  Position,
+  Strategy,
+  Trade,
+} from "@/types/strategy";
+
+export const useGetStrategyList = () => {
+  return useQuery({
+    queryKey: API_QUERY_KEYS.STRATEGY.strategyList,
+    queryFn: () =>
+      apiClient.get<
+        ApiResponse<{
+          strategies: Strategy[];
+        }>
+      >("/strategies"),
+    select: (data) => data.data.strategies,
+    refetchInterval: 15 * 1000,
+  });
+};
+
+export const useGetStrategyTrades = (strategyId?: string) => {
+  return useQuery({
+    queryKey: API_QUERY_KEYS.STRATEGY.strategyTrades([strategyId ?? ""]),
+    queryFn: () =>
+      apiClient.get<ApiResponse<Trade[]>>(
+        `/strategies/detail?id=${strategyId}`,
+      ),
+    select: (data) => data.data,
+    refetchInterval: 15 * 1000,
+    enabled: !!strategyId,
+  });
+};
+
+export const useGetStrategyHoldings = (strategyId?: string) => {
+  return useQuery({
+    queryKey: API_QUERY_KEYS.STRATEGY.strategyHoldings([strategyId ?? ""]),
+    queryFn: () =>
+      apiClient.get<ApiResponse<Position[]>>(
+        `/strategies/holding?id=${strategyId}`,
+      ),
+    select: (data) => data.data,
+    refetchInterval: 15 * 1000,
+    enabled: !!strategyId,
+  });
+};
+
+export const useGetStrategyPriceCurve = (strategyId?: string) => {
+  return useQuery({
+    queryKey: API_QUERY_KEYS.STRATEGY.strategyPriceCurve([strategyId ?? ""]),
+    queryFn: () =>
+      apiClient.get<ApiResponse<Array<Array<string | number>>>>(
+        `/strategies/holding_price_curve?id=${strategyId}`,
+      ),
+    select: (data) => data.data,
+    refetchInterval: 15 * 1000,
+    enabled: !!strategyId,
+  });
+};
+
+export const useCreateStrategy = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: CreateStrategyRequest) =>
+      apiClient.post<ApiResponse<{ strategy_id: string }>>(
+        "/strategies/create",
+        data,
+      ),
+    onSuccess: () => {
+      // Invalidate strategy list to refetch
+      queryClient.invalidateQueries({
+        queryKey: API_QUERY_KEYS.STRATEGY.strategyList,
+      });
+    },
+  });
+};
+
+export const useGetStrategyApiKey = () => {
+  return useQuery({
+    queryKey: API_QUERY_KEYS.STRATEGY.strategyApiKey,
+    queryFn: () =>
+      apiClient.get<ApiResponse<LlmConfig[]>>("/models/llm/config"),
+    select: (data) => data.data,
+    staleTime: 0,
+  });
+};
+
+export const useStopStrategy = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (strategyId: string) =>
+      apiClient.post<ApiResponse<{ message: string }>>(
+        `/strategies/stop?id=${strategyId}`,
+      ),
+    onSuccess: () => {
+      // Invalidate strategy list to refetch
+      queryClient.invalidateQueries({
+        queryKey: API_QUERY_KEYS.STRATEGY.strategyList,
+      });
+    },
+  });
+};

frontend/src/app/agent/chat.tsx

@@ -1,174 +1,23 @@
-import { useQueryClient } from "@tanstack/react-query";
-import { useCallback, useEffect } from "react";
-import {
-  Navigate,
-  useLocation,
-  useNavigate,
-  useParams,
-  useSearchParams,
-} from "react-router";
-import { toast } from "sonner";
-import { useGetAgentInfo } from "@/api/agent";
-import { useGetConversationHistory, usePollTaskList } from "@/api/conversation";
-import { API_QUERY_KEYS } from "@/constants/api";
-import { useSSE } from "@/hooks/use-sse";
-import { getServerUrl } from "@/lib/api-client";
-import {
-  useAgentStoreActions,
-  useCurrentConversation,
-} from "@/store/agent-store";
-import type { AgentStreamRequest, SSEData } from "@/types/agent";
+import { Navigate, useParams } from "react-router";
 import type { Route } from "./+types/chat";
-import ChatConversationArea from "./components/chat-conversation/chat-conversation-area";
+import CommonAgentArea from "./components/agent-view/common-agent-area";
+import StrategyAgentArea from "./components/agent-view/strategy-agent-area";
 
 export default function AgentChat() {
   const { agentName } = useParams<Route.LoaderArgs["params"]>();
-  const conversationId = useSearchParams()[0].get("id") ?? "";
-  const navigate = useNavigate();
-  const inputValue = useLocation().state?.inputValue;
 
-  // Use optimized hooks with built-in shallow comparison
-  const { curConversation, curConversationId } = useCurrentConversation();
-  const {
-    dispatchAgentStore,
-    setCurConversationId,
-    dispatchAgentStoreHistory,
-  } = useAgentStoreActions();
-
-  const queryClient = useQueryClient();
-  const { data: agent, isLoading: isLoadingAgent } = useGetAgentInfo({
-    agentName: agentName ?? "",
-  });
-  const { data: conversationHistory } =
-    useGetConversationHistory(conversationId);
-  const { data: taskList } = usePollTaskList(conversationId);
-
-  // Load conversation history (only once when conversation changes)
-  useEffect(() => {
-    if (
-      !conversationId ||
-      !conversationHistory ||
-      conversationHistory.length === 0
-    )
-      return;
-
-    dispatchAgentStoreHistory(conversationId, conversationHistory, true);
-  }, [conversationId, conversationHistory, dispatchAgentStoreHistory]);
-
-  // Update task list (polls every 30s)
-  useEffect(() => {
-    if (!conversationId || !taskList || taskList.length === 0) return;
-
-    dispatchAgentStoreHistory(conversationId, taskList);
-  }, [conversationId, taskList, dispatchAgentStoreHistory]);
-
-  // Initialize SSE connection using the useSSE hook
-  const { connect, close, isStreaming } = useSSE({
-    url: getServerUrl("/agents/stream"),
-    handlers: {
-      onData: (sseData: SSEData) => {
-        // Update agent store using the reducer
-        dispatchAgentStore(sseData);
-
-        // Handle specific UI state updates
-        const { event, data } = sseData;
-        switch (event) {
-          case "conversation_started":
-            navigate(`/agent/${agentName}?id=${data.conversation_id}`, {
-              replace: true,
-            });
-            queryClient.invalidateQueries({
-              queryKey: API_QUERY_KEYS.CONVERSATION.conversationList,
-            });
-            break;
-
-          case "component_generator":
-            if (data.payload.component_type === "subagent_conversation") {
-              queryClient.invalidateQueries({
-                queryKey: API_QUERY_KEYS.CONVERSATION.conversationList,
-              });
-            }
-            break;
-
-          case "system_failed":
-            // Handle system errors in UI layer
-            toast.error(data.payload.content, {
-              closeButton: true,
-              duration: 30 * 1000,
-            });
-            break;
-
-          case "done":
-            close();
-            break;
-
-          // All message-related events are handled by the store
-          default:
-            break;
-        }
-      },
-      onOpen: () => {
-        console.log("✅ SSE connection opened");
-      },
-      onError: (error: Error) => {
-        console.error("❌ SSE connection error:", error);
-      },
-      onClose: () => {
-        console.log("🔌 SSE connection closed");
-      },
-    },
-  });
-
-  // Send message to agent
-  // biome-ignore lint/correctness/useExhaustiveDependencies: connect is no need to be in dependencies
-  const sendMessage = useCallback(
-    async (message: string) => {
-      try {
-        const request: AgentStreamRequest = {
-          query: message,
-          agent_name: agentName ?? "",
-          conversation_id: conversationId,
-        };
-
-        // Connect SSE client with request body to receive streaming response
-        await connect(JSON.stringify(request));
-      } catch (error) {
-        console.error("Failed to send message:", error);
-      }
-    },
-    [agentName, conversationId],
-  );
-
-  useEffect(() => {
-    if (curConversationId !== conversationId) {
-      setCurConversationId(conversationId);
-    }
-
-    if (inputValue) {
-      sendMessage(inputValue);
-      // Clear the state after using it once to prevent re-triggering on page refresh
-      navigate(".", { replace: true, state: {} });
-    }
-  }, [
-    conversationId,
-    inputValue,
-    sendMessage,
-    setCurConversationId,
-    curConversationId,
-    navigate,
-  ]);
-
-  if (isLoadingAgent) return null;
-  if (!agent) return <Navigate to="/" replace />;
+  if (!agentName) return <Navigate to="/" replace />;
 
   return (
     <main className="relative flex flex-1 flex-col overflow-hidden">
-      <ChatConversationArea
-        agent={agent}
-        currentConversation={curConversation}
-        isStreaming={isStreaming}
-        sendMessage={sendMessage}
-      />
+      {(() => {
+        switch (agentName) {
+          case "StrategyAgent":
+            return <StrategyAgentArea agentName={agentName} />;
+          default:
+            return <CommonAgentArea agentName={agentName} />;
+        }
+      })()}
     </main>
   );
 }