feat: workflow和chat分离

1，增加了创建workflow的页面
2.删除了event

frontend/src/App.tsx

@@ -1,16 +1,18 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { TopBar } from './components/Layout/TopBar';
 import { CollapsibleSidebar } from './components/Layout/CollapsibleSidebar';
 import { SettingsLayout } from './components/Settings/SettingsLayout';
 import { AgentLayout } from './components/Agent/AgentLayout';
-import { PluginLayout } from './components/Plugin/PluginLayout'; // Will rename to PluginLayout soon
+import { PluginLayout } from './components/Plugin/PluginLayout';
 import { LeftPanel } from './components/Chat/LeftPanel';
 import { ChatPanel } from './components/Chat/ChatPanel';
 import { RightPanel } from './components/Chat/RightPanel';
 import { WorkflowListView } from './components/Chat/WorkflowListView';
+import { NewWorkflowDialog } from './components/Chat/NewWorkflowDialog';
 import { AuthPage } from './components/Auth/AuthPage';
+import apiClient from './api/client';
+import type { ChatSessionDB } from './types';
 
-// For Chat Module State Persistence
 export interface Message {
   id: string;
   role: 'user' | 'assistant' | 'system';
@@ -25,33 +27,43 @@ export interface ChatSession {
   updatedAt: number;
 }
 
+function mapSessionFromDB(s: ChatSessionDB): ChatSession {
+  return {
+    id: s.chat_id,
+    title: s.title,
+    messages: [],
+    updatedAt: new Date(s.updated_at).getTime(),
+  };
+}
+
 function App() {
   const [isAuthenticated, setIsAuthenticated] = useState(false);
 
-  // Layout State
   const [mode, setMode] = useState<'work' | 'agent'>('work');
   const [showSettings, setShowSettings] = useState(false);
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
-  // Module Sub-navigation States
-  // Work Mode
   const [workTab, setWorkTab] = useState<'chat' | 'workflow'>('chat');
   const [selectedWorkflow, setSelectedWorkflow] = useState<string | null>(null);
 
-  // Agent Mode
   const [agentTab, setAgentTab] = useState<'plugin' | 'agents'>('plugin');
-
-  // Settings Sub-tab
   const [settingsTab, setSettingsTab] = useState('users');
-
-  // Inner Agent Tab (temporary until full Agent layout rewrite)
   const [innerAgentTab, setInnerAgentTab] = useState('worker');
   const [resourceTab, setResourceTab] = useState('skill');
 
-  // Chat State Hoisted for Persistence
   const [chatSessions, setChatSessions] = useState<ChatSession[]>([]);
   const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
 
+  const loadChatSessions = useCallback(async () => {
+    try {
+      const response = await apiClient.get('/api/v1/chat');
+      const sessions: ChatSessionDB[] = response.data?.sessions || [];
+      setChatSessions(sessions.map(mapSessionFromDB));
+    } catch (error) {
+      console.error('Failed to load chat sessions', error);
+    }
+  }, []);
+
   useEffect(() => {
     const token = localStorage.getItem('token');
     if (token) {
@@ -59,13 +71,18 @@ function App() {
     }
   }, []);
 
+  useEffect(() => {
+    if (isAuthenticated) {
+      loadChatSessions();
+    }
+  }, [isAuthenticated, loadChatSessions]);
+
   if (!isAuthenticated) {
     return <AuthPage onLoginSuccess={() => setIsAuthenticated(true)} />;
   }
 
   return (
     <div className="flex flex-col h-screen w-screen bg-slate-50 text-slate-800 font-sans overflow-hidden">
-      {/* 1. Top Bar */}
       <TopBar
         mode={mode}
         setMode={setMode}
@@ -73,13 +90,11 @@ function App() {
         setShowSettings={setShowSettings}
       />
 
-      {/* 2. Main Content Area */}
       <div className="flex flex-1 overflow-hidden relative">
         {showSettings ? (
           <SettingsLayout settingsTab={settingsTab} setSettingsTab={setSettingsTab} />
         ) : (
           <>
-            {/* Collapsible Main Sidebar */}
             <CollapsibleSidebar
               mode={mode}
               isOpen={isSidebarOpen}
@@ -90,7 +105,6 @@ function App() {
               setAgentTab={setAgentTab}
             />
 
-            {/* Dynamic View based on Mode and Tab */}
             <div className="flex-1 flex overflow-hidden">
               {mode === 'work' && workTab === 'chat' && (
                 <div className="flex-1 p-6 flex overflow-hidden">
@@ -99,17 +113,18 @@ function App() {
                       activeTab="chats"
                       selectedWorkflow={null}
                       setSelectedWorkflow={() => {}}
-                      // Pass hoisted state down
                       chatSessions={chatSessions}
                       setChatSessions={setChatSessions}
                       activeSessionId={activeSessionId}
                       setActiveSessionId={setActiveSessionId}
+                      onSessionsChanged={loadChatSessions}
                     />
                     <ChatPanel
                       chatSessions={chatSessions}
                       setChatSessions={setChatSessions}
                       activeSessionId={activeSessionId}
                       setActiveSessionId={setActiveSessionId}
+                      onSessionsChanged={loadChatSessions}
                     />
                   </div>
                 </div>
@@ -117,7 +132,19 @@ function App() {
 
               {mode === 'work' && workTab === 'workflow' && (
                 <>
-                  {selectedWorkflow ? (
+                  {selectedWorkflow === 'new' ? (
+                    <>
+                      <LeftPanel
+                        activeTab="workflows"
+                        selectedWorkflow={selectedWorkflow}
+                        setSelectedWorkflow={setSelectedWorkflow}
+                      />
+                      <NewWorkflowDialog
+                        onClose={() => setSelectedWorkflow(null)}
+                        onSuccess={(traceId: string) => setSelectedWorkflow(traceId)}
+                      />
+                    </>
+                  ) : selectedWorkflow ? (
                     <>
                       <LeftPanel
                         activeTab="workflows"