feat: separate Agent into independent module with dedicated page and route

src/renderer/src/Router.tsx

@@ -9,6 +9,7 @@ import { ErrorBoundary } from './components/ErrorBoundary'
 import TabsContainer from './components/Tab/TabContainer'
 import NavigationHandler from './handler/NavigationHandler'
 import { useNavbarPosition } from './hooks/useSettings'
+import AgentPage from './pages/agents/AgentPage'
 import CodeToolsPage from './pages/code/CodeToolsPage'
 import FilesPage from './pages/files/FilesPage'
 import HomePage from './pages/home/HomePage'
@@ -31,6 +32,7 @@ const Router: FC = () => {
       <ErrorBoundary>
         <Routes>
           <Route path="/" element={<HomePage />} />
+          <Route path="/agents" element={<AgentPage />} />
           <Route path="/store" element={<AssistantPresetsPage />} />
           <Route path="/paintings/*" element={<PaintingsRoutePage />} />
           <Route path="/translate" element={<TranslatePage />} />

src/renderer/src/components/Popups/agent/AgentModal.tsx

@@ -7,7 +7,7 @@ import { permissionModeCards } from '@renderer/config/agent'
 import { isWin } from '@renderer/config/constant'
 import { useAgents } from '@renderer/hooks/agents/useAgents'
 import { useUpdateAgent } from '@renderer/hooks/agents/useUpdateAgent'
-import SelectAgentBaseModelButton from '@renderer/pages/home/components/SelectAgentBaseModelButton'
+import SelectAgentBaseModelButton from '@renderer/pages/agents/components/SelectAgentBaseModelButton'
 import type {
   AddAgentForm,
   AgentEntity,

src/renderer/src/components/Tab/TabContainer.tsx

@@ -28,6 +28,7 @@ import {
   LayoutGrid,
   Monitor,
   Moon,
+  MousePointerClick,
   NotepadText,
   Palette,
   Settings,
@@ -86,9 +87,12 @@ const getTabIcon = (
     return <LayoutGrid size={14} />
   }
 
+  // TODO: Add TabId as type instead of string
   switch (tabId) {
     case 'home':
       return <Home size={14} />
+    case 'agents':
+      return <MousePointerClick size={14} />
     case 'store':
       return <Sparkle size={14} />
     case 'translate':

src/renderer/src/components/app/Sidebar.tsx

@@ -22,6 +22,7 @@ import {
   MessageSquare,
   Monitor,
   Moon,
+  MousePointerClick,
   NotepadText,
   Palette,
   Settings,
@@ -126,10 +127,11 @@ const MainMenus: FC = () => {
   const { theme } = useTheme()
 
   const isRoute = (path: string): string => (pathname === path && !minappShow ? 'active' : '')
-  const isRoutes = (path: string): string => (pathname.startsWith(path) && !minappShow ? 'active' : '')
+  const isRoutes = (path: string): string => (pathname.startsWith(path) && path !== '/' && !minappShow ? 'active' : '')
 
   const iconMap = {
     assistants: <MessageSquare size={18} className="icon" />,
+    agents: <MousePointerClick size={18} className="icon" />,
     store: <Sparkle size={18} className="icon" />,
     paintings: <Palette size={18} className="icon" />,
     translate: <Languages size={18} className="icon" />,
@@ -143,6 +145,7 @@ const MainMenus: FC = () => {
 
   const pathMap = {
     assistants: '/',
+    agents: '/agents',
     store: '/store',
     paintings: `/paintings/${defaultPaintingProvider}`,
     translate: '/translate',

src/renderer/src/config/sidebar.ts

@@ -6,6 +6,7 @@ import type { SidebarIcon } from '@renderer/types'
  */
 export const DEFAULT_SIDEBAR_ICONS: SidebarIcon[] = [
   'assistants',
+  'agents',
   'store',
   'paintings',
   'translate',

src/renderer/src/hooks/agents/useActiveAgent.ts

@@ -1,8 +1,24 @@
+import { useAppDispatch } from '@renderer/store'
+import { setActiveAgentId as setActiveAgentIdAction } from '@renderer/store/runtime'
+import { useCallback } from 'react'
+
 import { useRuntime } from '../useRuntime'
 import { useAgent } from './useAgent'
+import { useAgentSessionInitializer } from './useAgentSessionInitializer'
 
 export const useActiveAgent = () => {
   const { chat } = useRuntime()
   const { activeAgentId } = chat
-  return useAgent(activeAgentId)
+  const dispatch = useAppDispatch()
+  const { initializeAgentSession } = useAgentSessionInitializer()
+
+  const setActiveAgentId = useCallback(
+    async (id: string) => {
+      dispatch(setActiveAgentIdAction(id))
+      await initializeAgentSession(id)
+    },
+    [dispatch, initializeAgentSession]
+  )
+
+  return { ...useAgent(activeAgentId), setActiveAgentId }
 }

src/renderer/src/hooks/agents/useAgentSessionInitializer.ts

@@ -1,8 +1,8 @@
 import { loggerService } from '@logger'
 import { useRuntime } from '@renderer/hooks/useRuntime'
 import { useAppDispatch } from '@renderer/store'
-import { setActiveSessionIdAction, setActiveTopicOrSessionAction } from '@renderer/store/runtime'
-import { useCallback, useEffect } from 'react'
+import { setActiveSessionIdAction } from '@renderer/store/runtime'
+import { useCallback, useEffect, useRef } from 'react'
 
 import { useAgentClient } from './useAgentClient'
 
@@ -19,6 +19,10 @@ export const useAgentSessionInitializer = () => {
   const { chat } = useRuntime()
   const { activeAgentId, activeSessionIdMap } = chat
 
+  // Use a ref to keep the callback stable across activeSessionIdMap changes
+  const activeSessionIdMapRef = useRef(activeSessionIdMap)
+  activeSessionIdMapRef.current = activeSessionIdMap
+
   /**
    * Initialize session for the given agent by loading its sessions
    * and setting the latest one as active
@@ -28,11 +32,9 @@ export const useAgentSessionInitializer = () => {
       if (!agentId) return
 
       try {
-        // Check if this agent already has an active session
-        const currentSessionId = activeSessionIdMap[agentId]
-        if (currentSessionId) {
-          // Session already exists, just switch to session view
-          dispatch(setActiveTopicOrSessionAction('session'))
+        // Check if this agent has already been initialized (key exists in map)
+        if (agentId in activeSessionIdMapRef.current) {
+          // Already initialized, nothing to do
           return
         }
 
@@ -46,33 +48,28 @@ export const useAgentSessionInitializer = () => {
 
           // Set the latest session as active
           dispatch(setActiveSessionIdAction({ agentId, sessionId: latestSession.id }))
-          dispatch(setActiveTopicOrSessionAction('session'))
         } else {
-          // No sessions exist, we might want to create one
-          // But for now, just switch to session view and let the Sessions component handle it
-          dispatch(setActiveTopicOrSessionAction('session'))
+          // Mark as initialized with no session (null vs undefined distinction)
+          dispatch(setActiveSessionIdAction({ agentId, sessionId: null }))
         }
       } catch (error) {
         logger.error('Failed to initialize agent session:', error as Error)
-        // Even if loading fails, switch to session view
-        dispatch(setActiveTopicOrSessionAction('session'))
       }
     },
-    [client, dispatch, activeSessionIdMap]
+    [client, dispatch]
   )
 
   /**
    * Auto-initialize when activeAgentId changes
    */
   useEffect(() => {
     if (activeAgentId) {
-      // Check if we need to initialize this agent's session
-      const hasActiveSession = activeSessionIdMap[activeAgentId]
-      if (!hasActiveSession) {
+      // Check if we need to initialize this agent's session (key not yet in map)
+      if (!(activeAgentId in activeSessionIdMapRef.current)) {
         initializeAgentSession(activeAgentId)
       }
     }
-  }, [activeAgentId, activeSessionIdMap, initializeAgentSession])
+  }, [activeAgentId, initializeAgentSession])
 
   return {
     initializeAgentSession

src/renderer/src/hooks/agents/useCreateDefaultSession.ts

@@ -2,7 +2,7 @@ import { loggerService } from '@logger'
 import { useAgent } from '@renderer/hooks/agents/useAgent'
 import { useSessions } from '@renderer/hooks/agents/useSessions'
 import { useAppDispatch } from '@renderer/store'
-import { setActiveSessionIdAction, setActiveTopicOrSessionAction } from '@renderer/store/runtime'
+import { setActiveSessionIdAction } from '@renderer/store/runtime'
 import type { CreateSessionForm } from '@renderer/types'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -36,7 +36,6 @@ export const useCreateDefaultSession = (agentId: string | null) => {
 
       if (created) {
         dispatch(setActiveSessionIdAction({ agentId, sessionId: created.id }))
-        dispatch(setActiveTopicOrSessionAction('session'))
       }
 
       return created

src/renderer/src/i18n/label.ts

@@ -150,7 +150,8 @@ const titleKeyMap = {
   paintings: 'title.paintings',
   settings: 'title.settings',
   translate: 'title.translate',
-  openclaw: 'openclaw.title'
+  openclaw: 'openclaw.title',
+  agents: 'agent.sidebar_title'
 } as const
 
 export const getTitleLabel = (key: string): string => {
@@ -181,6 +182,7 @@ export const getThemeModeLabel = (key: string): string => {
 
 const sidebarIconKeyMap = {
   assistants: 'assistants.title',
+  agents: 'agent.sidebar_title',
   store: 'assistants.presets.title',
   paintings: 'paintings.title',
   translate: 'translate.title',

src/renderer/src/i18n/locales/en-us.json

@@ -295,6 +295,7 @@
         }
       }
     },
+    "sidebar_title": "Agents",
     "todo": {
       "panel": {
         "title": "{{completed}}/{{total}} tasks completed"
@@ -1385,6 +1386,7 @@
     "selected": "Selected",
     "selectedItems": "Selected {{count}} items",
     "selectedMessages": "Selected {{count}} messages",
+    "sessions": "Sessions",
     "settings": "Settings",
     "sort": {
       "pinyin": {

src/renderer/src/i18n/locales/zh-cn.json

@@ -295,6 +295,7 @@
         }
       }
     },
+    "sidebar_title": "智能体",
     "todo": {
       "panel": {
         "title": "已完成 {{completed}}/{{total}} 个任务"
@@ -1385,6 +1386,7 @@
     "selected": "已选择",
     "selectedItems": "已选择 {{count}} 项",
     "selectedMessages": "选中 {{count}} 条消息",
+    "sessions": "会话",
     "settings": "设置",
     "sort": {
       "pinyin": {

src/renderer/src/i18n/locales/zh-tw.json

@@ -295,6 +295,7 @@
         }
       }
     },
+    "sidebar_title": "[to be translated]:Agents",
     "todo": {
       "panel": {
         "title": "已完成 {{completed}}/{{total}} 個任務"
@@ -1385,6 +1386,7 @@
     "selected": "已選擇",
     "selectedItems": "已選擇 {{count}} 項",
     "selectedMessages": "已選取 {{count}} 則訊息",
+    "sessions": "[to be translated]:Sessions",
     "settings": "設定",
     "sort": {
       "pinyin": {

src/renderer/src/i18n/translate/de-de.json

@@ -295,6 +295,7 @@
         }
       }
     },
+    "sidebar_title": "[to be translated]:Agents",
     "todo": {
       "panel": {
         "title": "{{completed}}/{{total}} Aufgaben abgeschlossen"
@@ -1385,6 +1386,7 @@
     "selected": "Ausgewählt",
     "selectedItems": "{{count}} Elemente ausgewählt",
     "selectedMessages": "{{count}} Nachrichten ausgewählt",
+    "sessions": "[to be translated]:Sessions",
     "settings": "Einstellungen",
     "sort": {
       "pinyin": {

src/renderer/src/i18n/translate/el-gr.json

@@ -295,6 +295,7 @@
         }
       }
     },
+    "sidebar_title": "[to be translated]:Agents",
     "todo": {
       "panel": {
         "title": "{{completed}}/{{total}} εργασίες ολοκληρώθηκαν"
@@ -1385,6 +1386,7 @@
     "selected": "Επιλεγμένο",
     "selectedItems": "Επιλέχθηκαν {{count}} αντικείμενα",
     "selectedMessages": "Επιλέχθηκαν {{count}} μηνύματα",
+    "sessions": "[to be translated]:Sessions",
     "settings": "Ρυθμίσεις",
     "sort": {
       "pinyin": {

src/renderer/src/i18n/translate/es-es.json

@@ -295,6 +295,7 @@
         }
       }
     },
+    "sidebar_title": "[to be translated]:Agents",
     "todo": {
       "panel": {
         "title": "{{completed}}/{{total}} tareas completadas"
@@ -1385,6 +1386,7 @@
     "selected": "Seleccionado",
     "selectedItems": "{{count}} elementos seleccionados",
     "selectedMessages": "{{count}} mensajes seleccionados",
+    "sessions": "[to be translated]:Sessions",
     "settings": "Configuración",
     "sort": {
       "pinyin": {

src/renderer/src/i18n/translate/fr-fr.json

@@ -295,6 +295,7 @@
         }
       }
     },
+    "sidebar_title": "[to be translated]:Agents",
     "todo": {
       "panel": {
         "title": "{{completed}}/{{total}} tâches terminées"
@@ -1385,6 +1386,7 @@
     "selected": "Sélectionné",
     "selectedItems": "{{count}} éléments sélectionnés",
     "selectedMessages": "{{count}} messages sélectionnés",
+    "sessions": "[to be translated]:Sessions",
     "settings": "Paramètres",
     "sort": {
       "pinyin": {

src/renderer/src/i18n/translate/ja-jp.json

@@ -295,6 +295,7 @@
         }
       }
     },
+    "sidebar_title": "[to be translated]:Agents",
     "todo": {
       "panel": {
         "title": "{{completed}}/{{total}} タスク完了"
@@ -1385,6 +1386,7 @@
     "selected": "選択済み",
     "selectedItems": "{{count}}件の項目を選択しました",
     "selectedMessages": "{{count}}件のメッセージを選択しました",
+    "sessions": "[to be translated]:Sessions",
     "settings": "設定",
     "sort": {
       "pinyin": {

src/renderer/src/i18n/translate/pt-pt.json

@@ -295,6 +295,7 @@
         }
       }
     },
+    "sidebar_title": "[to be translated]:Agents",
     "todo": {
       "panel": {
         "title": "{{completed}}/{{total}} tarefas concluídas"
@@ -1385,6 +1386,7 @@
     "selected": "Selecionado",
     "selectedItems": "{{count}} itens selecionados",
     "selectedMessages": "{{count}} mensagens selecionadas",
+    "sessions": "[to be translated]:Sessions",
     "settings": "Configurações",
     "sort": {
       "pinyin": {