refactor(sessions): extract sessions component and update hook to use agentId

Move sessions rendering logic to a separate component and modify useSessions hook to work with agentId instead of full agent entity. This improves code organization and simplifies the hook interface.

src/renderer/src/hooks/agents/useSessions.ts

@@ -1,64 +1,72 @@
-import { AgentEntity, CreateSessionForm, UpdateSessionForm } from '@renderer/types'
+import { CreateSessionForm, UpdateSessionForm } from '@renderer/types'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 
 import { useAgentClient } from './useAgentClient'
 
-export const useSessions = (agent: AgentEntity) => {
+export const useSessions = (agentId: string) => {
   const { t } = useTranslation()
   const client = useAgentClient()
-  const key = client.agentPaths.base
+  const key = client.getSessionPaths(agentId).base
+
   const fetcher = async () => {
-    const data = await client.listSessions(agent.id)
+    if (!agentId) {
+      return []
+    }
+    const data = await client.listSessions(agentId)
     return data.data
   }
   const { data, error, isLoading, mutate } = useSWR(key, fetcher)
 
   const createSession = useCallback(
     async (form: CreateSessionForm) => {
+      if (!agentId) return
       try {
-        const result = await client.createSession(agent.id, form)
+        const result = await client.createSession(agentId, form)
         mutate((prev) => [...(prev ?? []), result])
       } catch (error) {
         window.toast.error(t('agent.session.create.error.failed'))
       }
     },
-    [agent.id, client, mutate, t]
+    [agentId, client, mutate, t]
   )
 
   // TODO: including messages field
   const getSession = useCallback(
     async (id: string) => {
-      const result = await client.getSession(agent.id, id)
+      if (!agentId) return
+      const result = await client.getSession(agentId, id)
       mutate((prev) => prev?.map((session) => (session.id === result.id ? result : session)))
       return result
     },
-    [agent.id, client, mutate]
+    [agentId, client, mutate]
   )
 
   const deleteSession = useCallback(
     async (id: string) => {
+      if (!agentId) return
       try {
-        await client.deleteSession(agent.id, id)
+        await client.deleteSession(agentId, id)
         mutate((prev) => prev?.filter((session) => session.id !== id))
       } catch (error) {
         window.toast.error(t('agent.session.delete.error.failed'))
       }
     },
-    [agent.id, client, mutate, t]
+    [agentId, client, mutate, t]
   )
 
   const updateSession = useCallback(
     async (id: string, form: UpdateSessionForm) => {
+      if (!agentId) return
       try {
-        const result = await client.updateSession(agent.id, id, form)
+        const result = await client.updateSession(agentId, id, form)
         mutate((prev) => prev?.map((session) => (session.id === id ? result : session)))
       } catch (error) {
         window.toast.error(t('agent.session.update.error.failed'))
       }
     },
-    [agent.id, client, mutate, t]
+    [agentId, client, mutate, t]
   )
 
   return {

src/renderer/src/pages/home/Tabs/SessionsTab.tsx

@@ -1,32 +1,22 @@
 import { useRuntime } from '@renderer/hooks/useRuntime'
-import { AgentSessionEntity } from '@renderer/types'
 import { FC, memo } from 'react'
 
-interface AssistantsTabProps {}
+import Sessions from './components/Sessions'
 
-const SessionsTab: FC<AssistantsTabProps> = () => {
+interface SessionsTabProps {}
+
+const SessionsTab: FC<SessionsTabProps> = () => {
   const { chat } = useRuntime()
   const { activeAgentId } = chat
-  const mockData: AgentSessionEntity[] = [
+
-    {
+  if (!activeAgentId) {
-      accessible_paths: [],
+    return <div> No active agent.</div>
-      model: '',
+  }
-      id: 'test',
-      agent_id: '',
-      agent_type: 'claude-code',
-      created_at: '',
-      updated_at: ''
-    }
-  ]
 
   return (
-    <div className="agents-tab h-full w-full p-2">
+    <>
-      {/* TODO: Add session button */}
+      <Sessions agentId={activeAgentId} />
-      Active Agent ID: {activeAgentId}
+    </>
-      {mockData.map((session) => (
-        <div key={session.id}>Not implemented</div>
-      ))}
-    </div>
   )
 }
 

src/renderer/src/pages/home/Tabs/components/Sessions.tsx

@@ -0,0 +1,26 @@
+import { loggerService } from '@logger'
+import { useSessions } from '@renderer/hooks/agents/useSessions'
+import { memo } from 'react'
+
+const logger = loggerService.withContext('SessionsTab')
+
+interface SessionsProps {
+  agentId: string
+}
+
+const Sessions: React.FC<SessionsProps> = ({ agentId }) => {
+  const { sessions } = useSessions(agentId)
+  logger.debug('Sessions', sessions)
+
+  return (
+    <div className="agents-tab h-full w-full p-2">
+      {/* TODO: Add session button */}
+      Active Agent ID: {agentId}
+      {sessions.map((session) => (
+        <div key={session.id}>Not implemented</div>
+      ))}
+    </div>
+  )
+}
+
+export default memo(Sessions)