Update Agent UI Verion

Dockerfile

@@ -1,66 +0,0 @@
-# Use Node.js 18 Alpine for smaller image size
-FROM node:18-alpine AS base
-
-# Install dependencies only when needed
-FROM base AS deps
-# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
-RUN apk add --no-cache libc6-compat
-WORKDIR /app
-
-# Install dependencies based on the preferred package manager
-COPY package*.json pnpm-lock.yaml* ./
-RUN \
-  if [ -f pnpm-lock.yaml ]; then \
-    corepack enable pnpm && pnpm i --frozen-lockfile; \
-  elif [ -f package-lock.json ]; then \
-    npm ci; \
-  else \
-    echo "Lockfile not found." && exit 1; \
-  fi
-
-# Rebuild the source code only when needed
-FROM base AS builder
-WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
-COPY . .
-
-# Build the Next.js application
-RUN \
-  if [ -f pnpm-lock.yaml ]; then \
-    corepack enable pnpm && pnpm run build; \
-  else \
-    npm run build; \
-  fi
-
-# Production image, copy all the files and run next
-FROM base AS runner
-WORKDIR /app
-
-ENV NODE_ENV production
-# Uncomment the following line in case you want to disable telemetry during runtime.
-# ENV NEXT_TELEMETRY_DISABLED 1
-
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
-COPY --from=builder /app/public ./public
-
-# Set the correct permission for prerender cache
-RUN mkdir .next
-RUN chown nextjs:nodejs .next
-
-# Automatically leverage output traces to reduce image size
-# https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-
-USER nextjs
-
-# Expose port 7860 (Hugging Face Spaces default)
-EXPOSE 7860
-
-ENV PORT 7860
-ENV HOSTNAME "0.0.0.0"
-
-# Run the application
-CMD ["node", "server.js"]

README.md

@@ -1,22 +1,12 @@
----
-title: SIFA Classification Agentic RAG Frontend
-emoji: 🤖
-colorFrom: blue
-colorTo: purple
-sdk: docker
-app_port: 7860
-pinned: false
-license: mit
----
-
 # Agent UI
 
-A modern chat interface for AI agents built with Next.js, Tailwind CSS, and TypeScript. This template provides a ready-to-use UI for interacting with Agno agents.
+A modern chat interface for AgentOS built with Next.js, Tailwind CSS, and TypeScript. This template provides a ready-to-use UI for connecting to and interacting with your AgentOS instances through the Agno platform.
 
-<img src="https://github.com/user-attachments/assets/7765fae5-a813-46cb-993b-904af9bc1672" alt="agent-ui" style="border-radius: 10px; width: 100%; max-width: 800px;" />
+<img src="https://agno-public.s3.us-east-1.amazonaws.com/assets/agent_ui_banner.svg" alt="agent-ui" style="border-radius: 10px; width: 100%; max-width: 800px;" />
 
 ## Features
 
+- 🔗 **AgentOS Integration**: Seamlessly connect to local and live AgentOS instances
 - 💬 **Modern Chat Interface**: Clean design with real-time streaming support
 - 🧩 **Tool Calls Support**: Visualizes agent tool calls and their results
 - 🧠 **Reasoning Steps**: Displays agent reasoning process (when available)
@@ -25,11 +15,18 @@ A modern chat interface for AI agents built with Next.js, Tailwind CSS, and Type
 - 🎨 **Customizable UI**: Built with Tailwind CSS for easy styling
 - 🧰 **Built with Modern Stack**: Next.js, TypeScript, shadcn/ui, Framer Motion, and more
 
+## Version Support
+
+- **Main Branch**: Supports Agno v2.x (recommended)
+- **v1 Branch**: Supports Agno v1.x for legacy compatibility
+
 ## Getting Started
 
 ### Prerequisites
 
-Before setting up Agent UI, you may want to have an Agno Playground running. If you haven't set up the Agno Playground yet, follow the [official guide](https://agno.link/agent-ui#connect-to-local-agents) to run the Playground locally.
+Before setting up Agent UI, you need a running AgentOS instance. If you haven't created one yet, check out our [Creating Your First OS](/agent-os/creating-your-first-os) guide.
+
+> **Note**: Agent UI connects to AgentOS instances through the Agno platform. Make sure your AgentOS is running before attempting to connect.
 
 ### Installation
 
@@ -62,11 +59,37 @@ pnpm dev
 
 4. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-## Connecting to an Agent Backend
+## Connecting to Your AgentOS
+
+Agent UI connects directly to your AgentOS instance, allowing you to interact with your agents through a modern chat interface.
+
+> **Prerequisites**: You need a running AgentOS instance before you can connect Agent UI to it. If you haven't created one yet, check out our [Creating Your First OS](https://docs.agno.com/agent-os/creating-your-first-os) guide.
+
+## Step-by-Step Connection Process
+
+### 1. Configure the Endpoint
+
+By default, Agent UI connects to `http://localhost:7777`. You can easily change this by:
+
+1. Hovering over the endpoint URL in the left sidebar
+2. Clicking the edit option to modify the connection settings
+
+### 2. Choose Your Environment
+
+- **Local Development**: Use `http://localhost:7777` (default) or your custom local port
+- **Production**: Enter your production AgentOS HTTPS URL
+
+> **Warning**: Make sure your AgentOS is actually running on the specified endpoint before attempting to connect.
+
+### 3. Test the Connection
+
+Once you've configured the endpoint:
+
+1. The Agent UI will automatically attempt to connect to your AgentOS
+2. If successful, you'll see your agents available in the chat interface
+3. If there are connection issues, check that your AgentOS is running and accessible. Check out the troubleshooting guide [here](https://docs.agno.com/faq/agentos-connection)
 
-By default Agent UI connects to `http://localhost:7777`. You can easily change this by hovering over the endpoint URL and clicking the edit option.
 
-The default endpoint works with the standard Agno Playground setup described in the [official documentation](https://agno.link/agent-ui#connect-to-local-agents).
 
 ## Contributing
 

next.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  output: 'standalone'
-}

next.config.ts

@@ -1,8 +1,7 @@
 import type { NextConfig } from 'next'
 
 const nextConfig: NextConfig = {
-  devIndicators: false,
-  output: 'standalone'
+  devIndicators: false
 }
 
 export default nextConfig

package.json

@@ -28,8 +28,8 @@
     "next-themes": "^0.4.4",
     "nuqs": "^2.3.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-markdown": "^9.0.3",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",

src/api/os.ts

@@ -0,0 +1,133 @@
+import { toast } from 'sonner'
+
+import { APIRoutes } from './routes'
+
+import { AgentDetails, Sessions, TeamDetails } from '@/types/os'
+
+export const getAgentsAPI = async (
+  endpoint: string
+): Promise<AgentDetails[]> => {
+  const url = APIRoutes.GetAgents(endpoint)
+  try {
+    const response = await fetch(url, { method: 'GET' })
+    if (!response.ok) {
+      toast.error(`Failed to fetch  agents: ${response.statusText}`)
+      return []
+    }
+    const data = await response.json()
+    return data
+  } catch {
+    toast.error('Error fetching  agents')
+    return []
+  }
+}
+
+export const getStatusAPI = async (base: string): Promise<number> => {
+  const response = await fetch(APIRoutes.Status(base), {
+    method: 'GET'
+  })
+  return response.status
+}
+
+export const getAllSessionsAPI = async (
+  base: string,
+  type: 'agent' | 'team',
+  componentId: string,
+  dbId: string
+): Promise<Sessions | { data: [] }> => {
+  try {
+    const url = new URL(APIRoutes.GetSessions(base))
+    url.searchParams.set('type', type)
+    url.searchParams.set('component_id', componentId)
+    url.searchParams.set('db_id', dbId)
+
+    const response = await fetch(url.toString(), {
+      method: 'GET'
+    })
+
+    if (!response.ok) {
+      if (response.status === 404) {
+        return { data: [] }
+      }
+      throw new Error(`Failed to fetch sessions: ${response.statusText}`)
+    }
+    return response.json()
+  } catch {
+    return { data: [] }
+  }
+}
+
+export const getSessionAPI = async (
+  base: string,
+  type: 'agent' | 'team',
+  sessionId: string,
+  dbId?: string
+) => {
+  // build query string
+  const queryParams = new URLSearchParams({ type })
+  if (dbId) queryParams.append('db_id', dbId)
+
+  const response = await fetch(
+    `${APIRoutes.GetSession(base, sessionId)}?${queryParams.toString()}`,
+    {
+      method: 'GET'
+    }
+  )
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch session: ${response.statusText}`)
+  }
+
+  return response.json()
+}
+
+export const deleteSessionAPI = async (
+  base: string,
+  dbId: string,
+  sessionId: string
+) => {
+  const queryParams = new URLSearchParams()
+  if (dbId) queryParams.append('db_id', dbId)
+  const response = await fetch(
+    `${APIRoutes.DeleteSession(base, sessionId)}?${queryParams.toString()}`,
+    {
+      method: 'DELETE'
+    }
+  )
+  return response
+}
+
+export const getTeamsAPI = async (endpoint: string): Promise<TeamDetails[]> => {
+  const url = APIRoutes.GetTeams(endpoint)
+  try {
+    const response = await fetch(url, { method: 'GET' })
+    if (!response.ok) {
+      toast.error(`Failed to fetch  teams: ${response.statusText}`)
+      return []
+    }
+    const data = await response.json()
+
+    return data
+  } catch {
+    toast.error('Error fetching  teams')
+    return []
+  }
+}
+
+export const deleteTeamSessionAPI = async (
+  base: string,
+  teamId: string,
+  sessionId: string
+) => {
+  const response = await fetch(
+    APIRoutes.DeleteTeamSession(base, teamId, sessionId),
+    {
+      method: 'DELETE'
+    }
+  )
+
+  if (!response.ok) {
+    throw new Error(`Failed to delete team session: ${response.statusText}`)
+  }
+  return response
+}

src/api/playground.ts

@@ -1,89 +0,0 @@
-import { toast } from 'sonner'
-
-import { APIRoutes } from './routes'
-
-import { Agent, ComboboxAgent, SessionEntry } from '@/types/playground'
-
-export const getPlaygroundAgentsAPI = async (
-  endpoint: string
-): Promise<ComboboxAgent[]> => {
-  const url = APIRoutes.GetPlaygroundAgents(endpoint)
-  try {
-    const response = await fetch(url, { method: 'GET' })
-    if (!response.ok) {
-      toast.error(`Failed to fetch playground agents: ${response.statusText}`)
-      return []
-    }
-    const data = await response.json()
-    // Transform the API response into the expected shape.
-    const agents: ComboboxAgent[] = data.map((item: Agent) => ({
-      value: item.agent_id || '',
-      label: item.name || '',
-      model: item.model || '',
-      storage: item.storage || false
-    }))
-    return agents
-  } catch {
-    toast.error('Error fetching playground agents')
-    return []
-  }
-}
-
-export const getPlaygroundStatusAPI = async (base: string): Promise<number> => {
-  const response = await fetch(APIRoutes.PlaygroundStatus(base), {
-    method: 'GET'
-  })
-  return response.status
-}
-
-export const getAllPlaygroundSessionsAPI = async (
-  base: string,
-  agentId: string
-): Promise<SessionEntry[]> => {
-  try {
-    const response = await fetch(
-      APIRoutes.GetPlaygroundSessions(base, agentId),
-      {
-        method: 'GET'
-      }
-    )
-    if (!response.ok) {
-      if (response.status === 404) {
-        // Return empty array when storage is not enabled
-        return []
-      }
-      throw new Error(`Failed to fetch sessions: ${response.statusText}`)
-    }
-    return response.json()
-  } catch {
-    return []
-  }
-}
-
-export const getPlaygroundSessionAPI = async (
-  base: string,
-  agentId: string,
-  sessionId: string
-) => {
-  const response = await fetch(
-    APIRoutes.GetPlaygroundSession(base, agentId, sessionId),
-    {
-      method: 'GET'
-    }
-  )
-  return response.json()
-}
-
-export const deletePlaygroundSessionAPI = async (
-  base: string,
-  agentId: string,
-  sessionId: string
-) => {
-  const response = await fetch(
-    APIRoutes.DeletePlaygroundSession(base, agentId, sessionId),
-    {
-      method: 'DELETE'
-    }
-  )
-  return response
-}

src/api/routes.ts

@@ -1,23 +1,17 @@
 export const APIRoutes = {
-  GetPlaygroundAgents: (PlaygroundApiUrl: string) =>
-    `${PlaygroundApiUrl}/v1/playground/agents`,
-  AgentRun: (PlaygroundApiUrl: string) =>
-    `${PlaygroundApiUrl}/v1/playground/agents/{agent_id}/runs`,
-  PlaygroundStatus: (PlaygroundApiUrl: string) =>
-    `${PlaygroundApiUrl}/v1/playground/status`,
-  GetPlaygroundSessions: (PlaygroundApiUrl: string, agentId: string) =>
-    `${PlaygroundApiUrl}/v1/playground/agents/${agentId}/sessions`,
-  GetPlaygroundSession: (
-    PlaygroundApiUrl: string,
-    agentId: string,
-    sessionId: string
-  ) =>
-    `${PlaygroundApiUrl}/v1/playground/agents/${agentId}/sessions/${sessionId}`,
+  GetAgents: (agentOSUrl: string) => `${agentOSUrl}/agents`,
+  AgentRun: (agentOSUrl: string) => `${agentOSUrl}/agents/{agent_id}/runs`,
+  Status: (agentOSUrl: string) => `${agentOSUrl}/health`,
+  GetSessions: (agentOSUrl: string) => `${agentOSUrl}/sessions`,
+  GetSession: (agentOSUrl: string, sessionId: string) =>
+    `${agentOSUrl}/sessions/${sessionId}/runs`,
 
-  DeletePlaygroundSession: (
-    PlaygroundApiUrl: string,
-    agentId: string,
-    sessionId: string
-  ) =>
-    `${PlaygroundApiUrl}/v1/playground/agents/${agentId}/sessions/${sessionId}`
+  DeleteSession: (agentOSUrl: string, sessionId: string) =>
+    `${agentOSUrl}/sessions/${sessionId}`,
+
+  GetTeams: (agentOSUrl: string) => `${agentOSUrl}/teams`,
+  TeamRun: (agentOSUrl: string, teamId: string) =>
+    `${agentOSUrl}/teams/${teamId}/runs`,
+  DeleteTeamSession: (agentOSUrl: string, teamId: string, sessionId: string) =>
+    `${agentOSUrl}/v1//teams/${teamId}/sessions/${sessionId}`
 }

src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client'
-import Sidebar from '@/components/playground/Sidebar/Sidebar'
-import { ChatArea } from '@/components/playground/ChatArea'
+import Sidebar from '@/components/chat/Sidebar/Sidebar'
+import { ChatArea } from '@/components/chat/ChatArea'
 import { Suspense } from 'react'
 
 export default function Home() {

src/components/{playground → chat}/ChatArea/ChatInput/ChatInput.tsx

@@ -3,18 +3,19 @@ import { useState } from 'react'
 import { toast } from 'sonner'
 import { TextArea } from '@/components/ui/textarea'
 import { Button } from '@/components/ui/button'
-import { usePlaygroundStore } from '@/store'
+import { useStore } from '@/store'
 import useAIChatStreamHandler from '@/hooks/useAIStreamHandler'
 import { useQueryState } from 'nuqs'
 import Icon from '@/components/ui/icon'
 
 const ChatInput = () => {
-  const { chatInputRef } = usePlaygroundStore()
+  const { chatInputRef } = useStore()
 
   const { handleStreamResponse } = useAIChatStreamHandler()
   const [selectedAgent] = useQueryState('agent')
+  const [teamId] = useQueryState('team')
   const [inputMessage, setInputMessage] = useState('')
-  const isStreaming = usePlaygroundStore((state) => state.isStreaming)
+  const isStreaming = useStore((state) => state.isStreaming)
   const handleSubmit = async () => {
     if (!inputMessage.trim()) return
 
@@ -50,12 +51,14 @@ const ChatInput = () => {
           }
         }}
         className="w-full border border-accent bg-primaryAccent px-4 text-sm text-primary focus:border-accent"
-        disabled={!selectedAgent}
+        disabled={!(selectedAgent || teamId)}
         ref={chatInputRef}
       />
       <Button
         onClick={handleSubmit}
-        disabled={!selectedAgent || !inputMessage.trim() || isStreaming}
+        disabled={
+          !(selectedAgent || teamId) || !inputMessage.trim() || isStreaming
+        }
         size="icon"
         className="rounded-xl bg-primary p-5 text-primaryAccent"
       >

src/components/{playground → chat}/ChatArea/MessageArea.tsx

@@ -1,12 +1,12 @@
 'use client'
 
-import { usePlaygroundStore } from '@/store'
+import { useStore } from '@/store'
 import Messages from './Messages'
-import ScrollToBottom from '@/components/playground/ChatArea/ScrollToBottom'
+import ScrollToBottom from '@/components/chat/ChatArea/ScrollToBottom'
 import { StickToBottom } from 'use-stick-to-bottom'
 
 const MessageArea = () => {
-  const { messages } = usePlaygroundStore()
+  const { messages } = useStore()
 
   return (
     <StickToBottom

src/components/{playground → chat}/ChatArea/Messages/ChatBlankState.tsx

@@ -8,7 +8,7 @@ import React, { useState } from 'react'
 
 const EXTERNAL_LINKS = {
   documentation: 'https://agno.link/agent-ui',
-  playground: 'https://app.agno.com/playground/agents',
+  agenOS: 'https://os.agno.com',
   agno: 'https://agno.com'
 }
 
@@ -172,7 +172,7 @@ const ChatBlankState = () => {
               </div>
             </span>
           </div>
-          <p>For the full experience, visit the Agent Playground.</p>
+          <p>For the full experience, visit the AgentOS</p>
         </motion.h1>
         <motion.div
           initial={{ opacity: 0, y: 10 }}
@@ -185,10 +185,7 @@ const ChatBlankState = () => {
             variant="primary"
             text="GO TO DOCS"
           />
-          <ActionButton
-            href={EXTERNAL_LINKS.playground}
-            text="VISIT AGENT PLAYGROUND"
-          />
+          <ActionButton href={EXTERNAL_LINKS.agenOS} text="VISIT AGENTOS" />
         </motion.div>
       </div>
     </section>

src/components/{playground → chat}/ChatArea/Messages/MessageItem.tsx

@@ -1,7 +1,7 @@
 import Icon from '@/components/ui/icon'
 import MarkdownRenderer from '@/components/ui/typography/MarkdownRenderer'
-import { usePlaygroundStore } from '@/store'
-import type { PlaygroundChatMessage } from '@/types/playground'
+import { useStore } from '@/store'
+import type { ChatMessage } from '@/types/os'
 import Videos from './Multimedia/Videos'
 import Images from './Multimedia/Images'
 import Audios from './Multimedia/Audios'
@@ -9,11 +9,11 @@ import { memo } from 'react'
 import AgentThinkingLoader from './AgentThinkingLoader'
 
 interface MessageProps {
-  message: PlaygroundChatMessage
+  message: ChatMessage
 }
 
 const AgentMessage = ({ message }: MessageProps) => {
-  const { streamingErrorMessage } = usePlaygroundStore()
+  const { streamingErrorMessage } = useStore()
   let messageContent
   if (message.streamingError) {
     messageContent = (
@@ -80,14 +80,12 @@ const AgentMessage = ({ message }: MessageProps) => {
 
 const UserMessage = memo(({ message }: MessageProps) => {
   return (
-    <div className="flex items-start pt-4 text-start max-md:break-words">
-      <div className="flex flex-row gap-x-3">
-        <p className="flex items-center gap-x-2 text-sm font-medium text-muted">
-          <Icon type="user" size="sm" />
-        </p>
-        <div className="text-md rounded-lg py-1 font-geist text-secondary">
-          {message.content}
-        </div>
+    <div className="flex items-start gap-4 pt-4 text-start max-md:break-words">
+      <div className="flex-shrink-0">
+        <Icon type="user" size="sm" />
+      </div>
+      <div className="text-md rounded-lg font-geist text-secondary">
+        {message.content}
       </div>
     </div>
   )

src/components/{playground → chat}/ChatArea/Messages/Messages.tsx

@@ -1,4 +1,4 @@
-import type { PlaygroundChatMessage } from '@/types/playground'
+import type { ChatMessage } from '@/types/os'
 
 import { AgentMessage, UserMessage } from './MessageItem'
 import Tooltip from '@/components/ui/tooltip'
@@ -9,17 +9,18 @@ import {
   ReasoningProps,
   ReferenceData,
   Reference
-} from '@/types/playground'
+} from '@/types/os'
 import React, { type FC } from 'react'
-import ChatBlankState from './ChatBlankState'
+
 import Icon from '@/components/ui/icon'
+import ChatBlankState from './ChatBlankState'
 
 interface MessageListProps {
-  messages: PlaygroundChatMessage[]
+  messages: ChatMessage[]
 }
 
 interface MessageWrapperProps {
-  message: PlaygroundChatMessage
+  message: ChatMessage
   isLastMessage: boolean
 }
 
@@ -93,7 +94,7 @@ const AgentMessageWrapper = ({ message }: MessageWrapperProps) => {
           </div>
         )}
       {message.tool_calls && message.tool_calls.length > 0 && (
-        <div className="flex items-center gap-3">
+        <div className="flex items-start gap-3">
           <Tooltip
             delayDuration={0}
             content={<p className="text-accent">Tool Calls</p>}

src/components/{playground → chat}/ChatArea/Messages/Multimedia/Audios/Audios.tsx

@@ -2,7 +2,7 @@
 
 import { memo, useMemo } from 'react'
 
-import { type AudioData } from '@/types/playground'
+import { type AudioData } from '@/types/os'
 import { decodeBase64Audio } from '@/lib/audio'
 
 /**

src/components/{playground → chat}/ChatArea/Messages/Multimedia/Images/Images.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react'
 
-import { type ImageData } from '@/types/playground'
+import { type ImageData } from '@/types/os'
 import { cn } from '@/lib/utils'
 
 const Images = ({ images }: { images: ImageData[] }) => (

src/components/{playground → chat}/ChatArea/Messages/Multimedia/Videos/Videos.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react'
 
 import { toast } from 'sonner'
 
-import { type VideoData } from '@/types/playground'
+import { type VideoData } from '@/types/os'
 import Icon from '@/components/ui/icon'
 
 const VideoItem = memo(({ video }: { video: VideoData }) => {

src/components/{playground/Sidebar/AgentSelector.tsx → chat/Sidebar/EntitySelector.tsx}

@@ -8,81 +8,99 @@ import {
   SelectContent,
   SelectItem
 } from '@/components/ui/select'
-import { usePlaygroundStore } from '@/store'
+import { useStore } from '@/store'
 import { useQueryState } from 'nuqs'
 import Icon from '@/components/ui/icon'
 import { useEffect } from 'react'
 import useChatActions from '@/hooks/useChatActions'
 
-export function AgentSelector() {
-  const { agents, setMessages, setSelectedModel, setHasStorage } =
-    usePlaygroundStore()
+export function EntitySelector() {
+  const { mode, agents, teams, setMessages, setSelectedModel } = useStore()
+
   const { focusChatInput } = useChatActions()
   const [agentId, setAgentId] = useQueryState('agent', {
     parse: (value) => value || undefined,
     history: 'push'
   })
+  const [teamId, setTeamId] = useQueryState('team', {
+    parse: (value) => value || undefined,
+    history: 'push'
+  })
   const [, setSessionId] = useQueryState('session')
 
-  // Set the model when the component mounts if an agent is already selected
+  const currentEntities = mode === 'team' ? teams : agents
+  const currentValue = mode === 'team' ? teamId : agentId
+  const placeholder = mode === 'team' ? 'Select Team' : 'Select Agent'
+
   useEffect(() => {
-    if (agentId && agents.length > 0) {
-      const agent = agents.find((agent) => agent.value === agentId)
-      if (agent) {
-        setSelectedModel(agent.model.provider || '')
-        setHasStorage(!!agent.storage)
-        if (agent.model.provider) {
+    if (currentValue && currentEntities.length > 0) {
+      const entity = currentEntities.find((item) => item.id === currentValue)
+      if (entity) {
+        setSelectedModel(entity.model?.model || '')
+        if (mode === 'team') {
+          setTeamId(entity.id)
+        }
+        if (entity.model?.model) {
           focusChatInput()
         }
-      } else {
-        setAgentId(agents[0].value)
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [agentId, agents, setSelectedModel])
+  }, [currentValue, currentEntities, setSelectedModel, mode])
 
   const handleOnValueChange = (value: string) => {
-    const newAgent = value === agentId ? '' : value
-    const selectedAgent = agents.find((agent) => agent.value === newAgent)
-    setSelectedModel(selectedAgent?.model.provider || '')
-    setHasStorage(!!selectedAgent?.storage)
-    setAgentId(newAgent)
+    const newValue = value === currentValue ? null : value
+    const selectedEntity = currentEntities.find((item) => item.id === newValue)
+
+    setSelectedModel(selectedEntity?.model?.provider || '')
+
+    if (mode === 'team') {
+      setTeamId(newValue)
+      setAgentId(null)
+    } else {
+      setAgentId(newValue)
+      setTeamId(null)
+    }
+
     setMessages([])
     setSessionId(null)
-    if (selectedAgent?.model.provider) {
+
+    if (selectedEntity?.model?.provider) {
       focusChatInput()
     }
   }
 
+  if (currentEntities.length === 0) {
+    return (
+      <Select disabled>
+        <SelectTrigger className="h-9 w-full rounded-xl border border-primary/15 bg-primaryAccent text-xs font-medium uppercase opacity-50">
+          <SelectValue placeholder={`No ${mode}s Available`} />
+        </SelectTrigger>
+      </Select>
+    )
+  }
+
   return (
     <Select
-      value={agentId || ''}
+      value={currentValue || ''}
       onValueChange={(value) => handleOnValueChange(value)}
     >
       <SelectTrigger className="h-9 w-full rounded-xl border border-primary/15 bg-primaryAccent text-xs font-medium uppercase">
-        <SelectValue placeholder="Select Agent" />
+        <SelectValue placeholder={placeholder} />
       </SelectTrigger>
       <SelectContent className="border-none bg-primaryAccent font-dmmono shadow-lg">
-        {agents.map((agent, index) => (
+        {currentEntities.map((entity, index) => (
           <SelectItem
             className="cursor-pointer"
-            key={`${agent.value}-${index}`}
-            value={agent.value}
+            key={`${entity.id}-${index}`}
+            value={entity.id}
           >
             <div className="flex items-center gap-3 text-xs font-medium uppercase">
-              <Icon type={'agent'} size="xs" />
-              {agent.label}
+              <Icon type={'user'} size="xs" />
+              {entity.name || entity.id}
             </div>
           </SelectItem>
         ))}
-        {agents.length === 0 && (
-          <SelectItem
-            value="no-agents"
-            className="cursor-not-allowed select-none text-center"
-          >
-            No agents found
-          </SelectItem>
-        )}
       </SelectContent>
     </Select>
   )

src/components/chat/Sidebar/ModeSelector.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import * as React from 'react'
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem
+} from '@/components/ui/select'
+import { useStore } from '@/store'
+import { useQueryState } from 'nuqs'
+import useChatActions from '@/hooks/useChatActions'
+
+export function ModeSelector() {
+  const { mode, setMode, setMessages, setSelectedModel } = useStore()
+  const { clearChat } = useChatActions()
+  const [, setAgentId] = useQueryState('agent')
+  const [, setTeamId] = useQueryState('team')
+  const [, setSessionId] = useQueryState('session')
+
+  const handleModeChange = (newMode: 'agent' | 'team') => {
+    if (newMode === mode) return
+
+    setMode(newMode)
+
+    setAgentId(null)
+    setTeamId(null)
+    setSelectedModel('')
+    setMessages([])
+    setSessionId(null)
+    clearChat()
+  }
+
+  return (
+    <>
+      <Select
+        defaultValue={mode}
+        value={mode}
+        onValueChange={(value) => handleModeChange(value as 'agent' | 'team')}
+      >
+        <SelectTrigger className="h-9 w-full rounded-xl border border-primary/15 bg-primaryAccent text-xs font-medium uppercase">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent className="border-none bg-primaryAccent font-dmmono shadow-lg">
+          <SelectItem value="agent" className="cursor-pointer">
+            <div className="text-xs font-medium uppercase">Agent</div>
+          </SelectItem>
+
+          <SelectItem value="team" className="cursor-pointer">
+            <div className="text-xs font-medium uppercase">Team</div>
+          </SelectItem>
+        </SelectContent>
+      </Select>
+    </>
+  )
+}

src/components/{playground → chat}/Sidebar/NewChatButton.tsx

@@ -3,11 +3,11 @@
 import { Button } from '@/components/ui/button'
 import Icon from '@/components/ui/icon'
 import useChatActions from '@/hooks/useChatActions'
-import { usePlaygroundStore } from '@/store'
+import { useStore } from '@/store'
 
 function NewChatButton() {
   const { clearChat } = useChatActions()
-  const { messages } = usePlaygroundStore()
+  const { messages } = useStore()
   return (
     <Button
       className="z-10 cursor-pointer rounded bg-brand px-4 py-2 font-bold text-primary hover:bg-brand/80 disabled:cursor-not-allowed disabled:opacity-50"

src/components/{playground → chat}/Sidebar/Sessions/SessionBlankState.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import { usePlaygroundStore } from '@/store'
+import { useStore } from '@/store'
 import { useQueryState } from 'nuqs'
-import Link from 'next/link'
 
 const HistoryBlankStateIcon = () => (
   <svg
@@ -87,8 +86,7 @@ const HistoryBlankStateIcon = () => (
 )
 
 const SessionBlankState = () => {
-  const { selectedEndpoint, isEndpointActive, hasStorage } =
-    usePlaygroundStore()
+  const { selectedEndpoint, isEndpointActive } = useStore()
   const [agentId] = useQueryState('agent')
 
   const errorMessage = (() => {
@@ -99,20 +97,6 @@ const SessionBlankState = () => {
         return 'Select an endpoint to see the history.'
       case !agentId:
         return 'Select an agent to see the history.'
-      case !hasStorage:
-        return (
-          <>
-            Connect{' '}
-            <Link
-              className="underline"
-              href={'https://docs.agno.com/storage'}
-              target="_blank"
-            >
-              storage
-            </Link>{' '}
-            to your agent to see sessions.{' '}
-          </>
-        )
       default:
         return 'No session records yet. Start a conversation to create one.'
     }

src/components/{playground → chat}/Sidebar/Sessions/SessionItem.tsx

@@ -1,9 +1,9 @@
 import { useQueryState } from 'nuqs'
-import { SessionEntry } from '@/types/playground'
+import { SessionEntry } from '@/types/os'
 import { Button } from '../../../ui/button'
 import useSessionLoader from '@/hooks/useSessionLoader'
-import { deletePlaygroundSessionAPI } from '@/api/playground'
-import { usePlaygroundStore } from '@/store'
+import { deleteSessionAPI } from '@/api/os'
+import { useStore } from '@/store'
 import { toast } from 'sonner'
 import Icon from '@/components/ui/icon'
 import { useState } from 'react'
@@ -13,62 +13,83 @@ import { truncateText, cn } from '@/lib/utils'
 
 type SessionItemProps = SessionEntry & {
   isSelected: boolean
+  currentSessionId: string | null
   onSessionClick: () => void
 }
 const SessionItem = ({
-  title,
+  session_name: title,
   session_id,
   isSelected,
+  currentSessionId,
   onSessionClick
 }: SessionItemProps) => {
   const [agentId] = useQueryState('agent')
-  const { getSession } = useSessionLoader()
+  const [teamId] = useQueryState('team')
+  const [dbId] = useQueryState('db_id')
   const [, setSessionId] = useQueryState('session')
-  const { selectedEndpoint, sessionsData, setSessionsData } =
-    usePlaygroundStore()
+  const { getSession } = useSessionLoader()
+  const { selectedEndpoint, sessionsData, setSessionsData, mode } = useStore()
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
   const { clearChat } = useChatActions()
 
   const handleGetSession = async () => {
-    if (agentId) {
-      onSessionClick()
-      await getSession(session_id, agentId)
-      setSessionId(session_id)
-    }
+    if (!(agentId || teamId || dbId)) return
+
+    onSessionClick()
+    await getSession(
+      {
+        entityType: mode,
+        agentId,
+        teamId,
+        dbId: dbId ?? ''
+      },
+      session_id
+    )
+    setSessionId(session_id)
   }
 
   const handleDeleteSession = async () => {
-    if (agentId) {
-      try {
-        const response = await deletePlaygroundSessionAPI(
-          selectedEndpoint,
-          agentId,
-          session_id
-        )
-        if (response.status === 200 && sessionsData) {
-          setSessionsData(
-            sessionsData.filter((session) => session.session_id !== session_id)
-          )
+    if (!(agentId || teamId || dbId)) return
+    setIsDeleting(true)
+    try {
+      const response = await deleteSessionAPI(
+        selectedEndpoint,
+        dbId ?? '',
+        session_id
+      )
+
+      if (response?.ok && sessionsData) {
+        setSessionsData(sessionsData.filter((s) => s.session_id !== session_id))
+        // If the deleted session was the active one, clear the chat
+        if (currentSessionId === session_id) {
+          setSessionId(null)
           clearChat()
-          toast.success('Session deleted')
-        } else {
-          toast.error('Failed to delete session')
         }
-      } catch {
-        toast.error('Failed to delete session')
-      } finally {
-        setIsDeleteModalOpen(false)
+        toast.success('Session deleted')
+      } else {
+        const errorMsg = await response?.text()
+        toast.error(
+          `Failed to delete session: ${response?.statusText || 'Unknown error'} ${errorMsg || ''}`
+        )
       }
+    } catch (error) {
+      toast.error(
+        `Failed to delete session: ${error instanceof Error ? error.message : String(error)}`
+      )
+    } finally {
+      setIsDeleteModalOpen(false)
+      setIsDeleting(false)
     }
   }
   return (
     <>
       <div
         className={cn(
-          'group flex h-11 w-full cursor-pointer items-center justify-between rounded-lg px-3 py-2 transition-colors duration-200',
+          'group flex h-11 w-full items-center justify-between rounded-lg px-3 py-2 transition-colors duration-200',
           isSelected
             ? 'cursor-default bg-primary/10'
-            : 'bg-background-secondary hover:bg-background-secondary/80'
+            : 'cursor-pointer bg-background-secondary hover:bg-background-secondary/80'
         )}
         onClick={handleGetSession}
       >
@@ -95,7 +116,7 @@ const SessionItem = ({
         isOpen={isDeleteModalOpen}
         onClose={() => setIsDeleteModalOpen(false)}
         onDelete={handleDeleteSession}
-        isDeleting={false}
+        isDeleting={isDeleting}
       />
     </>
   )

src/components/{playground → chat}/Sidebar/Sessions/Sessions.tsx

@@ -1,74 +1,65 @@
 'use client'
 
-import { useEffect, useMemo, useState, useRef, useCallback } from 'react'
-import dayjs from 'dayjs'
-import utc from 'dayjs/plugin/utc'
-
-import { usePlaygroundStore } from '@/store'
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useQueryState } from 'nuqs'
-import SessionItem from './SessionItem'
-import SessionBlankState from './SessionBlankState'
+
+import { useStore } from '@/store'
 import useSessionLoader from '@/hooks/useSessionLoader'
 
-import { cn } from '@/lib/utils'
-import { FC } from 'react'
+import SessionItem from './SessionItem'
+import SessionBlankState from './SessionBlankState'
 import { Skeleton } from '@/components/ui/skeleton'
+import { cn } from '@/lib/utils'
 
 interface SkeletonListProps {
   skeletonCount: number
 }
-
 const SkeletonList: FC<SkeletonListProps> = ({ skeletonCount }) => {
-  const skeletons = useMemo(
+  const list = useMemo(
     () => Array.from({ length: skeletonCount }, (_, i) => i),
     [skeletonCount]
   )
 
-  return skeletons.map((skeleton, index) => (
+  return list.map((k, idx) => (
     <Skeleton
-      key={skeleton}
+      key={k}
       className={cn(
         'mb-1 h-11 rounded-lg px-3 py-2',
-        index > 0 && 'bg-background-secondary'
+        idx > 0 && 'bg-background-secondary'
       )}
     />
   ))
 }
 
-dayjs.extend(utc)
-
-const formatDate = (
-  timestamp: number,
-  format: 'natural' | 'full' = 'full'
-): string => {
-  const date = dayjs.unix(timestamp).utc()
-  return format === 'natural'
-    ? date.format('HH:mm')
-    : date.format('YYYY-MM-DD HH:mm:ss')
-}
-
 const Sessions = () => {
   const [agentId] = useQueryState('agent', {
-    parse: (value) => value || undefined,
+    parse: (v) => v || undefined,
     history: 'push'
   })
+  const [teamId] = useQueryState('team')
   const [sessionId] = useQueryState('session')
+  const [dbId] = useQueryState('db_id')
+
   const {
     selectedEndpoint,
+    mode,
     isEndpointActive,
     isEndpointLoading,
-    sessionsData,
     hydrated,
-    hasStorage,
-    setSessionsData
-  } = usePlaygroundStore()
+    sessionsData,
+    setSessionsData,
+    isSessionsLoading
+  } = useStore()
+
+  console.log({ sessionsData })
+
   const [isScrolling, setIsScrolling] = useState(false)
   const [selectedSessionId, setSelectedSessionId] = useState<string | null>(
     null
   )
-  const { getSession, getSessions } = useSessionLoader()
+
+  const { getSessions, getSession } = useSessionLoader()
   const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null)
-  const { isSessionsLoading } = usePlaygroundStore()
 
   const handleScroll = () => {
     setIsScrolling(true)
@@ -91,54 +82,48 @@ const Sessions = () => {
     }
   }, [])
 
-  // Load a session on render if a session id exists in url
   useEffect(() => {
-    if (sessionId && agentId && selectedEndpoint && hydrated) {
-      getSession(sessionId, agentId)
+    if (hydrated && sessionId && selectedEndpoint && (agentId || teamId)) {
+      const entityType = agentId ? 'agent' : 'team'
+      getSession({ entityType, agentId, teamId, dbId }, sessionId)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hydrated])
+  }, [hydrated, sessionId, selectedEndpoint, agentId, teamId, dbId])
 
   useEffect(() => {
-    if (!selectedEndpoint || !agentId || !hasStorage) {
-      setSessionsData(() => null)
+    if (!selectedEndpoint || isEndpointLoading) return
+    if (!(agentId || teamId || dbId)) {
+      setSessionsData([])
       return
     }
-    if (!isEndpointLoading) {
-      setSessionsData(() => null)
-      getSessions(agentId)
-    }
+    setSessionsData([])
+    getSessions({
+      entityType: mode,
+      agentId,
+      teamId,
+      dbId
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     selectedEndpoint,
     agentId,
-    getSessions,
+    teamId,
+    mode,
     isEndpointLoading,
-    hasStorage,
-    setSessionsData
+    getSessions,
+    dbId
   ])
 
   useEffect(() => {
-    if (sessionId) {
-      setSelectedSessionId(sessionId)
-    }
+    if (sessionId) setSelectedSessionId(sessionId)
   }, [sessionId])
 
-  const formattedSessionsData = useMemo(() => {
-    if (!sessionsData || !Array.isArray(sessionsData)) return []
-
-    return sessionsData.map((entry) => ({
-      ...entry,
-      created_at: entry.created_at,
-      formatted_time: formatDate(entry.created_at, 'natural')
-    }))
-  }, [sessionsData])
-
   const handleSessionClick = useCallback(
     (id: string) => () => setSelectedSessionId(id),
     []
   )
 
-  if (isSessionsLoading || isEndpointLoading)
+  if (isSessionsLoading || isEndpointLoading) {
     return (
       <div className="w-full">
         <div className="mb-2 text-xs font-medium uppercase">Sessions</div>
@@ -147,27 +132,36 @@ const Sessions = () => {
         </div>
       </div>
     )
+  }
+
   return (
     <div className="w-full">
       <div className="mb-2 w-full text-xs font-medium uppercase">Sessions</div>
       <div
-        className={`h-[calc(100vh-345px)] overflow-y-auto font-geist transition-all duration-300 [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar]:transition-opacity [&::-webkit-scrollbar]:duration-300 ${isScrolling ? '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-background [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:opacity-0' : '[&::-webkit-scrollbar]:opacity-100'}`}
+        className={`h-[calc(100vh-345px)] overflow-y-auto font-geist transition-all duration-300 [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar]:transition-opacity [&::-webkit-scrollbar]:duration-300 ${
+          isScrolling
+            ? '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-background [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:opacity-0'
+            : '[&::-webkit-scrollbar]:opacity-100'
+        }`}
         onScroll={handleScroll}
         onMouseOver={() => setIsScrolling(true)}
         onMouseLeave={handleScroll}
       >
         {!isEndpointActive ||
-        !hasStorage ||
-        (!isSessionsLoading && (!sessionsData || sessionsData.length === 0)) ? (
+        (!isSessionsLoading &&
+          (!sessionsData || sessionsData?.length === 0)) ? (
           <SessionBlankState />
         ) : (
           <div className="flex flex-col gap-y-1 pr-1">
-            {formattedSessionsData.map((entry, index) => (
+            {sessionsData?.map((entry, idx) => (
               <SessionItem
-                key={`${entry.session_id}-${index}`}
-                {...entry}
-                isSelected={selectedSessionId === entry.session_id}
-                onSessionClick={handleSessionClick(entry.session_id)}
+                key={`${entry?.session_id}-${idx}`}
+                currentSessionId={selectedSessionId}
+                isSelected={selectedSessionId === entry?.session_id}
+                onSessionClick={handleSessionClick(entry?.session_id)}
+                session_name={entry?.session_name ?? '-'}
+                session_id={entry?.session_id}
+                created_at={entry?.created_at}
               />
             ))}
           </div>

src/components/{playground → chat}/Sidebar/Sidebar.tsx

@@ -1,8 +1,9 @@
 'use client'
 import { Button } from '@/components/ui/button'
-import { AgentSelector } from '@/components/playground/Sidebar/AgentSelector'
+import { ModeSelector } from '@/components/chat/Sidebar/ModeSelector'
+import { EntitySelector } from '@/components/chat/Sidebar/EntitySelector'
 import useChatActions from '@/hooks/useChatActions'
-import { usePlaygroundStore } from '@/store'
+import { useStore } from '@/store'
 import { motion, AnimatePresence } from 'framer-motion'
 import { useState, useEffect } from 'react'
 import Icon from '@/components/ui/icon'
@@ -13,6 +14,7 @@ import { toast } from 'sonner'
 import { useQueryState } from 'nuqs'
 import { truncateText } from '@/lib/utils'
 import { Skeleton } from '@/components/ui/skeleton'
+
 const ENDPOINT_PLACEHOLDER = 'NO ENDPOINT ADDED'
 const SidebarHeader = () => (
   <div className="flex items-center gap-2">
@@ -57,8 +59,8 @@ const Endpoint = () => {
     setAgents,
     setSessionsData,
     setMessages
-  } = usePlaygroundStore()
-  const { initializePlayground } = useChatActions()
+  } = useStore()
+  const { initialize } = useChatActions()
   const [isEditing, setIsEditing] = useState(false)
   const [endpointValue, setEndpointValue] = useState('')
   const [isMounted, setIsMounted] = useState(false)
@@ -107,13 +109,13 @@ const Endpoint = () => {
 
   const handleRefresh = async () => {
     setIsRotating(true)
-    await initializePlayground()
+    await initialize()
     setTimeout(() => setIsRotating(false), 500)
   }
 
   return (
     <div className="flex flex-col items-start gap-2">
-      <div className="text-xs font-medium uppercase text-primary">Endpoint</div>
+      <div className="text-xs font-medium uppercase text-primary">AgentOS</div>
       {isEditing ? (
         <div className="flex w-full items-center gap-1">
           <input
@@ -153,7 +155,7 @@ const Endpoint = () => {
                   transition={{ duration: 0.2 }}
                 >
                   <p className="flex items-center gap-2 whitespace-nowrap text-xs font-medium text-primary">
-                    <Icon type="edit" size="xxs" /> EDIT ENDPOINT
+                    <Icon type="edit" size="xxs" /> EDIT AGENTOS
                   </p>
                 </motion.div>
               ) : (
@@ -168,8 +170,8 @@ const Endpoint = () => {
                   <p className="text-xs font-medium text-muted">
                     {isMounted
                       ? truncateText(selectedEndpoint, 21) ||
-                      ENDPOINT_PLACEHOLDER
-                      : process.env.LINK}
+                        ENDPOINT_PLACEHOLDER
+                      : 'http://localhost:7777'}
                   </p>
                   <div
                     className={`size-2 shrink-0 rounded-full ${getStatusColor(isEndpointActive)}`}
@@ -200,25 +202,31 @@ const Endpoint = () => {
 
 const Sidebar = () => {
   const [isCollapsed, setIsCollapsed] = useState(false)
-  const { clearChat, focusChatInput, initializePlayground } = useChatActions()
+  const { clearChat, focusChatInput, initialize } = useChatActions()
   const {
     messages,
     selectedEndpoint,
     isEndpointActive,
     selectedModel,
     hydrated,
-    isEndpointLoading
-  } = usePlaygroundStore()
+    isEndpointLoading,
+    mode
+  } = useStore()
   const [isMounted, setIsMounted] = useState(false)
   const [agentId] = useQueryState('agent')
+  const [teamId] = useQueryState('team')
+
   useEffect(() => {
     setIsMounted(true)
-    if (hydrated) initializePlayground()
-  }, [selectedEndpoint, initializePlayground, hydrated])
+
+    if (hydrated) initialize()
+  }, [selectedEndpoint, initialize, hydrated, mode])
+
   const handleNewChat = () => {
     clearChat()
     focusChatInput()
   }
+
   return (
     <motion.aside
       className="relative flex h-screen shrink-0 grow-0 flex-col overflow-hidden px-2 py-3 font-dmmono"
@@ -265,11 +273,11 @@ const Sidebar = () => {
                   transition={{ duration: 0.5, ease: 'easeInOut' }}
                 >
                   <div className="text-xs font-medium uppercase text-primary">
-                    Agent
+                    Mode
                   </div>
                   {isEndpointLoading ? (
                     <div className="flex w-full flex-col gap-2">
-                      {Array.from({ length: 2 }).map((_, index) => (
+                      {Array.from({ length: 3 }).map((_, index) => (
                         <Skeleton
                           key={index}
                           className="h-9 w-full rounded-xl"
@@ -278,8 +286,9 @@ const Sidebar = () => {
                     </div>
                   ) : (
                     <>
-                      <AgentSelector />
-                      {selectedModel && agentId && (
+                      <ModeSelector />
+                      <EntitySelector />
+                      {selectedModel && (agentId || teamId) && (
                         <ModelDisplay model={selectedModel} />
                       )}
                     </>

src/components/ui/typography/MarkdownRenderer/inlineStyles.tsx

@@ -159,16 +159,16 @@ const Img = ({ src, alt }: ImgProps) => {
         <div className="flex h-40 flex-col items-center justify-center gap-2 rounded-md bg-secondary/50 text-muted">
           <Paragraph className="text-primary">Image unavailable</Paragraph>
           <Link
-            href={typeof src === 'string' ? src : '#'}
+            href={src}
             target="_blank"
             className="max-w-md truncate underline"
           >
-            {typeof src === 'string' ? src : 'Invalid source'}
+            {src}
           </Link>
         </div>
       ) : (
         <Image
-          src={typeof src === 'string' ? src : ''}
+          src={src}
           width={96}
           height={56}
           alt={alt ?? 'Rendered image'}

src/components/ui/typography/MarkdownRenderer/styles.tsx

@@ -66,7 +66,10 @@ const OrderedList = ({ className, ...props }: OrderedListProps) => (
 )
 
 const Paragraph = ({ className, ...props }: ParagraphProps) => (
-  <p className={cn(className, PARAGRAPH_SIZES.body)} {...filterProps(props)} />
+  <div
+    className={cn(className, PARAGRAPH_SIZES.body)}
+    {...filterProps(props)}
+  />
 )
 
 const EmphasizedText = ({ className, ...props }: EmphasizedTextProps) => (
@@ -183,16 +186,16 @@ const Img = ({ src, alt }: ImgProps) => {
         <div className="flex h-40 flex-col items-center justify-center gap-2 rounded-md bg-secondary/50 text-muted">
           <Paragraph className="text-primary">Image unavailable</Paragraph>
           <Link
-            href={typeof src === 'string' ? src : '#'}
+            href={src}
             target="_blank"
             className="max-w-md truncate underline"
           >
-            {typeof src === 'string' ? src : 'Invalid source'}
+            {src}
           </Link>
         </div>
       ) : (
         <Image
-          src={typeof src === 'string' ? src : ''}
+          src={src}
           width={1280}
           height={720}
           alt={alt ?? 'Rendered image'}

src/hooks/useAIResponseStream.tsx

@@ -1,18 +1,68 @@
+import { RunResponseContent } from '@/types/os'
 import { useCallback } from 'react'
-import { type RunResponse } from '@/types/playground'
 
 /**
  * Processes a single JSON chunk by passing it to the provided callback.
- * @param chunk - A parsed JSON object of type RunResponse.
+ * @param chunk - A parsed JSON object of type RunResponseContent.
  * @param onChunk - Callback to handle the chunk.
  */
 function processChunk(
-  chunk: RunResponse,
-  onChunk: (chunk: RunResponse) => void
+  chunk: RunResponseContent,
+  onChunk: (chunk: RunResponseContent) => void
 ) {
   onChunk(chunk)
 }
 
+// TODO: Make new format the default and phase out legacy format
+
+/**
+ * Detects if the incoming data is in the legacy format (direct RunResponseContent)
+ * @param data - The parsed data object
+ * @returns true if it's in the legacy format, false if it's in the new format
+ */
+function isLegacyFormat(data: RunResponseContent): boolean {
+  return (
+    typeof data === 'object' &&
+    data !== null &&
+    'event' in data &&
+    !('data' in data) &&
+    typeof data.event === 'string'
+  )
+}
+
+interface NewFormatData {
+  event: string
+  data: string | Record<string, unknown>
+}
+
+type LegacyEventFormat = RunResponseContent & { event: string }
+
+function convertNewFormatToLegacy(
+  newFormatData: NewFormatData
+): LegacyEventFormat {
+  const { event, data } = newFormatData
+
+  // Parse the data field if it's a string
+  let parsedData: Record<string, unknown>
+  if (typeof data === 'string') {
+    try {
+      // First try to parse as JSON
+      parsedData = JSON.parse(data)
+    } catch {
+      parsedData = {}
+    }
+  } else {
+    parsedData = data
+  }
+
+  const { ...cleanData } = parsedData
+
+  // Convert to legacy format by flattening the structure
+  return {
+    event: event,
+    ...cleanData
+  } as LegacyEventFormat
+}
 /**
  * Parses a string buffer to extract complete JSON objects.
  *
@@ -30,66 +80,97 @@ function processChunk(
  */
 function parseBuffer(
   buffer: string,
-  onChunk: (chunk: RunResponse) => void
+  onChunk: (chunk: RunResponseContent) => void
 ): string {
-  let jsonStartIndex = buffer.indexOf('{')
-  let jsonEndIndex = -1
+  let currentIndex = 0
+  let jsonStartIndex = buffer.indexOf('{', currentIndex)
 
-  while (jsonStartIndex !== -1) {
+  // Process as many complete JSON objects as possible.
+  while (jsonStartIndex !== -1 && jsonStartIndex < buffer.length) {
     let braceCount = 0
     let inString = false
+    let escapeNext = false
+    let jsonEndIndex = -1
+    let i = jsonStartIndex
 
-    // Iterate through the buffer to find the end of the JSON object
-    for (let i = jsonStartIndex; i < buffer.length; i++) {
+    // Walk through the string to find the matching closing brace.
+    for (; i < buffer.length; i++) {
       const char = buffer[i]
 
-      // Check if the character is a double quote and the previous character is not a backslash
-      // This is to handle escaped quotes in JSON strings
-      if (char === '"' && buffer[i - 1] !== '\\') {
-        inString = !inString
-      }
-
-      // If the character is not inside a string, count the braces
-      if (!inString) {
-        if (char === '{') braceCount++
-        if (char === '}') braceCount--
-      }
-
-      // If the brace count is 0, we have found the end of the JSON object
-      if (braceCount === 0) {
-        jsonEndIndex = i
-        break
+      if (inString) {
+        if (escapeNext) {
+          escapeNext = false
+        } else if (char === '\\') {
+          escapeNext = true
+        } else if (char === '"') {
+          inString = false
+        }
+      } else {
+        if (char === '"') {
+          inString = true
+        } else if (char === '{') {
+          braceCount++
+        } else if (char === '}') {
+          braceCount--
+          if (braceCount === 0) {
+            jsonEndIndex = i
+            break
+          }
+        }
       }
     }
 
-    // If we found a complete JSON object, process it
+    // If we found a complete JSON object, try to parse it.
     if (jsonEndIndex !== -1) {
       const jsonString = buffer.slice(jsonStartIndex, jsonEndIndex + 1)
+
       try {
-        const parsed = JSON.parse(jsonString) as RunResponse
-        processChunk(parsed, onChunk)
+        const parsed = JSON.parse(jsonString)
+
+        // Check if it's in the legacy format - use as is
+        if (isLegacyFormat(parsed)) {
+          processChunk(parsed, onChunk)
+        } else {
+          // New format - convert to legacy format for compatibility
+          const legacyChunk = convertNewFormatToLegacy(parsed)
+          processChunk(legacyChunk, onChunk)
+        }
       } catch {
-        // Skip invalid JSON, continue accumulating
-        break
+        // Move past the starting brace to avoid re-parsing the same invalid JSON.
+        jsonStartIndex = buffer.indexOf('{', jsonStartIndex + 1)
+        continue
       }
-      buffer = buffer.slice(jsonEndIndex + 1).trim()
-      jsonStartIndex = buffer.indexOf('{')
-      jsonEndIndex = -1
+
+      // Move currentIndex past the parsed JSON and trim any leading whitespace.
+      currentIndex = jsonEndIndex + 1
+      buffer = buffer.slice(currentIndex).trim()
+
+      // Reset currentIndex and search for the next JSON object.
+      currentIndex = 0
+      jsonStartIndex = buffer.indexOf('{', currentIndex)
     } else {
-      // No complete JSON found, wait for the next chunk
+      // If a complete JSON object is not found, break out and wait for more data.
       break
     }
   }
 
+  // Return any unprocessed (partial) data.
   return buffer
 }
 
 /**
  * Custom React hook to handle streaming API responses as JSON objects.
  *
- * This hook:
+ * This hook supports two streaming formats:
+ * 1. Legacy format: Direct JSON objects matching RunResponseContent interface
+ * 2. New format: Event/data structure with { event: string, data: string|object }
+ *
+ * The hook:
  * - Accumulates partial JSON data from streaming responses.
  * - Extracts complete JSON objects and processes them via onChunk.
+ * - Automatically detects new format and converts it to legacy format for compatibility.
+ * - Parses stringified data field if it's a string (supports both JSON and Python dict syntax).
+ * - Removes redundant event field from data object during conversion.
  * - Handles errors via onError and signals completion with onComplete.
  *
  * @returns An object containing the streamResponse function.
@@ -100,7 +181,7 @@ export default function useAIResponseStream() {
       apiUrl: string
       headers?: Record<string, string>
       requestBody: FormData | Record<string, unknown>
-      onChunk: (chunk: RunResponse) => void
+      onChunk: (chunk: RunResponseContent) => void
       onError: (error: Error) => void
       onComplete: () => void
     }): Promise<void> => {
@@ -136,7 +217,6 @@ export default function useAIResponseStream() {
           const errorData = await response.json()
           throw errorData
         }
-
         if (!response.body) {
           throw new Error('No response body')
         }

src/hooks/useAIStreamHandler.tsx

@@ -3,30 +3,27 @@ import { useCallback } from 'react'
 import { APIRoutes } from '@/api/routes'
 
 import useChatActions from '@/hooks/useChatActions'
-import { usePlaygroundStore } from '../store'
-import { RunEvent, type RunResponse } from '@/types/playground'
+import { useStore } from '../store'
+import { RunEvent, RunResponseContent, type RunResponse } from '@/types/os'
 import { constructEndpointUrl } from '@/lib/constructEndpointUrl'
 import useAIResponseStream from './useAIResponseStream'
-import { ToolCall } from '@/types/playground'
+import { ToolCall } from '@/types/os'
 import { useQueryState } from 'nuqs'
 import { getJsonMarkdown } from '@/lib/utils'
 
-/**
- * useAIChatStreamHandler is responsible for making API calls and handling the stream response.
- * For now, it only streams message content and updates the messages state.
- */
 const useAIChatStreamHandler = () => {
-  const setMessages = usePlaygroundStore((state) => state.setMessages)
+  const setMessages = useStore((state) => state.setMessages)
   const { addMessage, focusChatInput } = useChatActions()
   const [agentId] = useQueryState('agent')
+  const [teamId] = useQueryState('team')
   const [sessionId, setSessionId] = useQueryState('session')
-  const selectedEndpoint = usePlaygroundStore((state) => state.selectedEndpoint)
-  const setStreamingErrorMessage = usePlaygroundStore(
+  const selectedEndpoint = useStore((state) => state.selectedEndpoint)
+  const mode = useStore((state) => state.mode)
+  const setStreamingErrorMessage = useStore(
     (state) => state.setStreamingErrorMessage
   )
-  const setIsStreaming = usePlaygroundStore((state) => state.setIsStreaming)
-  const setSessionsData = usePlaygroundStore((state) => state.setSessionsData)
-  const hasStorage = usePlaygroundStore((state) => state.hasStorage)
+  const setIsStreaming = useStore((state) => state.setIsStreaming)
+  const setSessionsData = useStore((state) => state.setSessionsData)
   const { streamResponse } = useAIResponseStream()
 
   const updateMessagesWithErrorState = useCallback(() => {
@@ -40,6 +37,67 @@ const useAIChatStreamHandler = () => {
     })
   }, [setMessages])
 
+  /**
+   * Processes a new tool call and adds it to the message
+   * @param toolCall - The tool call to add
+   * @param prevToolCalls - The previous tool calls array
+   * @returns Updated tool calls array
+   */
+  const processToolCall = useCallback(
+    (toolCall: ToolCall, prevToolCalls: ToolCall[] = []) => {
+      const toolCallId =
+        toolCall.tool_call_id || `${toolCall.tool_name}-${toolCall.created_at}`
+
+      const existingToolCallIndex = prevToolCalls.findIndex(
+        (tc) =>
+          (tc.tool_call_id && tc.tool_call_id === toolCall.tool_call_id) ||
+          (!tc.tool_call_id &&
+            toolCall.tool_name &&
+            toolCall.created_at &&
+            `${tc.tool_name}-${tc.created_at}` === toolCallId)
+      )
+      if (existingToolCallIndex >= 0) {
+        const updatedToolCalls = [...prevToolCalls]
+        updatedToolCalls[existingToolCallIndex] = {
+          ...updatedToolCalls[existingToolCallIndex],
+          ...toolCall
+        }
+        return updatedToolCalls
+      } else {
+        return [...prevToolCalls, toolCall]
+      }
+    },
+    []
+  )
+
+  /**
+   * Processes tool calls from a chunk, handling both single tool object and tools array formats
+   * @param chunk - The chunk containing tool call data
+   * @param existingToolCalls - The existing tool calls array
+   * @returns Updated tool calls array
+   */
+  const processChunkToolCalls = useCallback(
+    (
+      chunk: RunResponseContent | RunResponse,
+      existingToolCalls: ToolCall[] = []
+    ) => {
+      let updatedToolCalls = [...existingToolCalls]
+      // Handle new single tool object format
+      if (chunk.tool) {
+        updatedToolCalls = processToolCall(chunk.tool, updatedToolCalls)
+      }
+      // Handle legacy tools array format
+      if (chunk.tools && chunk.tools.length > 0) {
+        for (const toolCall of chunk.tools) {
+          updatedToolCalls = processToolCall(toolCall, updatedToolCalls)
+        }
+      }
+
+      return updatedToolCalls
+    },
+    [processToolCall]
+  )
+
   const handleStreamResponse = useCallback(
     async (input: string | FormData) => {
       setIsStreaming(true)
@@ -83,33 +141,46 @@ const useAIChatStreamHandler = () => {
       try {
         const endpointUrl = constructEndpointUrl(selectedEndpoint)
 
-        if (!agentId) return
-        const playgroundRunUrl = APIRoutes.AgentRun(endpointUrl).replace(
-          '{agent_id}',
-          agentId
-        )
+        let RunUrl: string | null = null
+
+        if (mode === 'team' && teamId) {
+          RunUrl = APIRoutes.TeamRun(endpointUrl, teamId)
+        } else if (mode === 'agent' && agentId) {
+          RunUrl = APIRoutes.AgentRun(endpointUrl).replace(
+            '{agent_id}',
+            agentId
+          )
+        }
+
+        if (!RunUrl) {
+          updateMessagesWithErrorState()
+          setStreamingErrorMessage('Please select an agent or team first.')
+          setIsStreaming(false)
+          return
+        }
 
         formData.append('stream', 'true')
         formData.append('session_id', sessionId ?? '')
 
         await streamResponse({
-          apiUrl: playgroundRunUrl,
+          apiUrl: RunUrl,
           requestBody: formData,
           onChunk: (chunk: RunResponse) => {
             if (
               chunk.event === RunEvent.RunStarted ||
-              chunk.event === RunEvent.ReasoningStarted
+              chunk.event === RunEvent.TeamRunStarted ||
+              chunk.event === RunEvent.ReasoningStarted ||
+              chunk.event === RunEvent.TeamReasoningStarted
             ) {
               newSessionId = chunk.session_id as string
               setSessionId(chunk.session_id as string)
               if (
-                hasStorage &&
                 (!sessionId || sessionId !== chunk.session_id) &&
                 chunk.session_id
               ) {
                 const sessionData = {
                   session_id: chunk.session_id as string,
-                  title: formData.get('message') as string,
+                  session_name: formData.get('message') as string,
                   created_at: chunk.created_at
                 }
                 setSessionsData((prevSessionsData) => {
@@ -122,7 +193,27 @@ const useAIChatStreamHandler = () => {
                   return [sessionData, ...(prevSessionsData ?? [])]
                 })
               }
-            } else if (chunk.event === RunEvent.RunResponse) {
+            } else if (
+              chunk.event === RunEvent.ToolCallStarted ||
+              chunk.event === RunEvent.TeamToolCallStarted ||
+              chunk.event === RunEvent.ToolCallCompleted ||
+              chunk.event === RunEvent.TeamToolCallCompleted
+            ) {
+              setMessages((prevMessages) => {
+                const newMessages = [...prevMessages]
+                const lastMessage = newMessages[newMessages.length - 1]
+                if (lastMessage && lastMessage.role === 'agent') {
+                  lastMessage.tool_calls = processChunkToolCalls(
+                    chunk,
+                    lastMessage.tool_calls
+                  )
+                }
+                return newMessages
+              })
+            } else if (
+              chunk.event === RunEvent.RunContent ||
+              chunk.event === RunEvent.TeamRunContent
+            ) {
               setMessages((prevMessages) => {
                 const newMessages = [...prevMessages]
                 const lastMessage = newMessages[newMessages.length - 1]
@@ -135,10 +226,11 @@ const useAIChatStreamHandler = () => {
                   lastMessage.content += uniqueContent
                   lastContent = chunk.content
 
-                  const toolCalls: ToolCall[] = [...(chunk.tools ?? [])]
-                  if (toolCalls.length > 0) {
-                    lastMessage.tool_calls = toolCalls
-                  }
+                  // Handle tool calls streaming
+                  lastMessage.tool_calls = processChunkToolCalls(
+                    chunk,
+                    lastMessage.tool_calls
+                  )
                   if (chunk.extra_data?.reasoning_steps) {
                     lastMessage.extra_data = {
                       ...lastMessage.extra_data,
@@ -187,11 +279,54 @@ const useAIChatStreamHandler = () => {
                 }
                 return newMessages
               })
-            } else if (chunk.event === RunEvent.RunError) {
+            } else if (
+              chunk.event === RunEvent.ReasoningStep ||
+              chunk.event === RunEvent.TeamReasoningStep
+            ) {
+              setMessages((prevMessages) => {
+                const newMessages = [...prevMessages]
+                const lastMessage = newMessages[newMessages.length - 1]
+                if (lastMessage && lastMessage.role === 'agent') {
+                  const existingSteps =
+                    lastMessage.extra_data?.reasoning_steps ?? []
+                  const incomingSteps = chunk.extra_data?.reasoning_steps ?? []
+                  lastMessage.extra_data = {
+                    ...lastMessage.extra_data,
+                    reasoning_steps: [...existingSteps, ...incomingSteps]
+                  }
+                }
+                return newMessages
+              })
+            } else if (
+              chunk.event === RunEvent.ReasoningCompleted ||
+              chunk.event === RunEvent.TeamReasoningCompleted
+            ) {
+              setMessages((prevMessages) => {
+                const newMessages = [...prevMessages]
+                const lastMessage = newMessages[newMessages.length - 1]
+                if (lastMessage && lastMessage.role === 'agent') {
+                  if (chunk.extra_data?.reasoning_steps) {
+                    lastMessage.extra_data = {
+                      ...lastMessage.extra_data,
+                      reasoning_steps: chunk.extra_data.reasoning_steps
+                    }
+                  }
+                }
+                return newMessages
+              })
+            } else if (
+              chunk.event === RunEvent.RunError ||
+              chunk.event === RunEvent.TeamRunError ||
+              chunk.event === RunEvent.TeamRunCancelled
+            ) {
               updateMessagesWithErrorState()
-              const errorContent = chunk.content as string
+              const errorContent =
+                (chunk.content as string) ||
+                (chunk.event === RunEvent.TeamRunCancelled
+                  ? 'Run cancelled'
+                  : 'Error during run')
               setStreamingErrorMessage(errorContent)
-              if (hasStorage && newSessionId) {
+              if (newSessionId) {
                 setSessionsData(
                   (prevSessionsData) =>
                     prevSessionsData?.filter(
@@ -199,7 +334,16 @@ const useAIChatStreamHandler = () => {
                     ) ?? null
                 )
               }
-            } else if (chunk.event === RunEvent.RunCompleted) {
+            } else if (
+              chunk.event === RunEvent.UpdatingMemory ||
+              chunk.event === RunEvent.TeamMemoryUpdateStarted ||
+              chunk.event === RunEvent.TeamMemoryUpdateCompleted
+            ) {
+              // No-op for now; could surface a lightweight UI indicator in the future
+            } else if (
+              chunk.event === RunEvent.RunCompleted ||
+              chunk.event === RunEvent.TeamRunCompleted
+            ) {
               setMessages((prevMessages) => {
                 const newMessages = prevMessages.map((message, index) => {
                   if (
@@ -219,10 +363,10 @@ const useAIChatStreamHandler = () => {
                     return {
                       ...message,
                       content: updatedContent,
-                      tool_calls:
-                        chunk.tools && chunk.tools.length > 0
-                          ? [...chunk.tools]
-                          : message.tool_calls,
+                      tool_calls: processChunkToolCalls(
+                        chunk,
+                        message.tool_calls
+                      ),
                       images: chunk.images ?? message.images,
                       videos: chunk.videos ?? message.videos,
                       response_audio: chunk.response_audio,
@@ -246,7 +390,7 @@ const useAIChatStreamHandler = () => {
           onError: (error) => {
             updateMessagesWithErrorState()
             setStreamingErrorMessage(error.message)
-            if (hasStorage && newSessionId) {
+            if (newSessionId) {
               setSessionsData(
                 (prevSessionsData) =>
                   prevSessionsData?.filter(
@@ -262,7 +406,7 @@ const useAIChatStreamHandler = () => {
         setStreamingErrorMessage(
           error instanceof Error ? error.message : String(error)
         )
-        if (hasStorage && newSessionId) {
+        if (newSessionId) {
           setSessionsData(
             (prevSessionsData) =>
               prevSessionsData?.filter(
@@ -282,13 +426,15 @@ const useAIChatStreamHandler = () => {
       selectedEndpoint,
       streamResponse,
       agentId,
+      teamId,
+      mode,
       setStreamingErrorMessage,
       setIsStreaming,
       focusChatInput,
       setSessionsData,
       sessionId,
       setSessionId,
-      hasStorage
+      processChunkToolCalls
     ]
   )
 

src/hooks/useChatActions.ts

@@ -1,33 +1,30 @@
 import { useCallback } from 'react'
 import { toast } from 'sonner'
 
-import { usePlaygroundStore } from '../store'
+import { useStore } from '../store'
 
-import { ComboboxAgent, type PlaygroundChatMessage } from '@/types/playground'
-import {
-  getPlaygroundAgentsAPI,
-  getPlaygroundStatusAPI
-} from '@/api/playground'
+import { AgentDetails, TeamDetails, type ChatMessage } from '@/types/os'
+import { getAgentsAPI, getStatusAPI, getTeamsAPI } from '@/api/os'
 import { useQueryState } from 'nuqs'
 
 const useChatActions = () => {
-  const { chatInputRef } = usePlaygroundStore()
-  const selectedEndpoint = usePlaygroundStore((state) => state.selectedEndpoint)
+  const { chatInputRef } = useStore()
+  const selectedEndpoint = useStore((state) => state.selectedEndpoint)
   const [, setSessionId] = useQueryState('session')
-  const setMessages = usePlaygroundStore((state) => state.setMessages)
-  const setIsEndpointActive = usePlaygroundStore(
-    (state) => state.setIsEndpointActive
-  )
-  const setIsEndpointLoading = usePlaygroundStore(
-    (state) => state.setIsEndpointLoading
-  )
-  const setAgents = usePlaygroundStore((state) => state.setAgents)
-  const setSelectedModel = usePlaygroundStore((state) => state.setSelectedModel)
+  const setMessages = useStore((state) => state.setMessages)
+  const setIsEndpointActive = useStore((state) => state.setIsEndpointActive)
+  const setIsEndpointLoading = useStore((state) => state.setIsEndpointLoading)
+  const setAgents = useStore((state) => state.setAgents)
+  const setTeams = useStore((state) => state.setTeams)
+  const setSelectedModel = useStore((state) => state.setSelectedModel)
+  const setMode = useStore((state) => state.setMode)
   const [agentId, setAgentId] = useQueryState('agent')
+  const [teamId, setTeamId] = useQueryState('team')
+  const [, setDbId] = useQueryState('db_id')
 
   const getStatus = useCallback(async () => {
     try {
-      const status = await getPlaygroundStatusAPI(selectedEndpoint)
+      const status = await getStatusAPI(selectedEndpoint)
       return status
     } catch {
       return 503
@@ -36,7 +33,7 @@ const useChatActions = () => {
 
   const getAgents = useCallback(async () => {
     try {
-      const agents = await getPlaygroundAgentsAPI(selectedEndpoint)
+      const agents = await getAgentsAPI(selectedEndpoint)
       return agents
     } catch {
       toast.error('Error fetching agents')
@@ -44,6 +41,16 @@ const useChatActions = () => {
     }
   }, [selectedEndpoint])
 
+  const getTeams = useCallback(async () => {
+    try {
+      const teams = await getTeamsAPI(selectedEndpoint)
+      return teams
+    } catch {
+      toast.error('Error fetching teams')
+      return []
+    }
+  }, [selectedEndpoint])
+
   const clearChat = useCallback(() => {
     setMessages([])
     setSessionId(null)
@@ -58,44 +65,113 @@ const useChatActions = () => {
   }, [])
 
   const addMessage = useCallback(
-    (message: PlaygroundChatMessage) => {
+    (message: ChatMessage) => {
       setMessages((prevMessages) => [...prevMessages, message])
     },
     [setMessages]
   )
 
-  const initializePlayground = useCallback(async () => {
+  const initialize = useCallback(async () => {
     setIsEndpointLoading(true)
     try {
       const status = await getStatus()
-      let agents: ComboboxAgent[] = []
+      let agents: AgentDetails[] = []
+      let teams: TeamDetails[] = []
       if (status === 200) {
         setIsEndpointActive(true)
+        teams = await getTeams()
         agents = await getAgents()
-        if (agents.length > 0 && !agentId) {
-          const firstAgent = agents[0]
-          setAgentId(firstAgent.value)
-          setSelectedModel(firstAgent.model.provider || '')
+        console.log(' is active', teams, agents)
+
+        if (!agentId && !teamId) {
+          const currentMode = useStore.getState().mode
+          console.log('Current mode:', currentMode)
+
+          if (currentMode === 'team' && teams.length > 0) {
+            const firstTeam = teams[0]
+            setTeamId(firstTeam.id)
+            setSelectedModel(firstTeam.model?.provider || '')
+            setDbId(firstTeam.db_id || '')
+            setAgentId(null)
+            setTeams(teams)
+          } else if (currentMode === 'agent' && agents.length > 0) {
+            const firstAgent = agents[0]
+            setMode('agent')
+            setAgentId(firstAgent.id)
+            setSelectedModel(firstAgent.model?.model || '')
+            setDbId(firstAgent.db_id || '')
+            setAgents(agents)
+          }
+        } else {
+          setAgents(agents)
+          setTeams(teams)
+          if (agentId) {
+            const agent = agents.find((a) => a.id === agentId)
+            if (agent) {
+              setMode('agent')
+              setSelectedModel(agent.model?.model || '')
+              setDbId(agent.db_id || '')
+              setTeamId(null)
+            } else if (agents.length > 0) {
+              const firstAgent = agents[0]
+              setMode('agent')
+              setAgentId(firstAgent.id)
+              setSelectedModel(firstAgent.model?.model || '')
+              setDbId(firstAgent.db_id || '')
+              setTeamId(null)
+            }
+          } else if (teamId) {
+            const team = teams.find((t) => t.id === teamId)
+            if (team) {
+              setMode('team')
+              setSelectedModel(team.model?.provider || '')
+              setDbId(team.db_id || '')
+              setAgentId(null)
+            } else if (teams.length > 0) {
+              const firstTeam = teams[0]
+              setMode('team')
+              setTeamId(firstTeam.id)
+              setSelectedModel(firstTeam.model?.provider || '')
+              setDbId(firstTeam.db_id || '')
+              setAgentId(null)
+            }
+          }
         }
       } else {
         setIsEndpointActive(false)
+        setMode('agent')
+        setSelectedModel('')
+        setAgentId(null)
+        setTeamId(null)
       }
-      setAgents(agents)
-      return agents
-    } catch {
-      setIsEndpointLoading(false)
+      return { agents, teams }
+    } catch (error) {
+      console.error('Error initializing :', error)
+      setIsEndpointActive(false)
+      setMode('agent')
+      setSelectedModel('')
+      setAgentId(null)
+      setTeamId(null)
+      setAgents([])
+      setTeams([])
     } finally {
       setIsEndpointLoading(false)
     }
   }, [
     getStatus,
     getAgents,
+    getTeams,
     setIsEndpointActive,
     setIsEndpointLoading,
     setAgents,
+    setTeams,
     setAgentId,
     setSelectedModel,
-    agentId
+    setMode,
+    setTeamId,
+    setDbId,
+    agentId,
+    teamId
   ])
 
   return {
@@ -103,7 +179,8 @@ const useChatActions = () => {
     addMessage,
     getAgents,
     focusChatInput,
-    initializePlayground
+    getTeams,
+    initialize
   }
 }
 

src/hooks/useSessionLoader.tsx

@@ -1,16 +1,8 @@
 import { useCallback } from 'react'
-import {
-  getPlaygroundSessionAPI,
-  getAllPlaygroundSessionsAPI
-} from '@/api/playground'
-import { usePlaygroundStore } from '../store'
+import { getSessionAPI, getAllSessionsAPI } from '@/api/os'
+import { useStore } from '../store'
 import { toast } from 'sonner'
-import {
-  PlaygroundChatMessage,
-  ToolCall,
-  ReasoningMessage,
-  ChatEntry
-} from '@/types/playground'
+import { ChatMessage, ToolCall, ReasoningMessage, ChatEntry } from '@/types/os'
 import { getJsonMarkdown } from '@/lib/utils'
 
 interface SessionResponse {
@@ -25,26 +17,38 @@ interface SessionResponse {
   agent_data: Record<string, unknown>
 }
 
+interface LoaderArgs {
+  entityType: 'agent' | 'team' | null
+  agentId?: string | null
+  teamId?: string | null
+  dbId: string | null
+}
+
 const useSessionLoader = () => {
-  const setMessages = usePlaygroundStore((state) => state.setMessages)
-  const selectedEndpoint = usePlaygroundStore((state) => state.selectedEndpoint)
-  const setIsSessionsLoading = usePlaygroundStore(
-    (state) => state.setIsSessionsLoading
-  )
-  const setSessionsData = usePlaygroundStore((state) => state.setSessionsData)
+  const setMessages = useStore((state) => state.setMessages)
+  const selectedEndpoint = useStore((state) => state.selectedEndpoint)
+  const setIsSessionsLoading = useStore((state) => state.setIsSessionsLoading)
+  const setSessionsData = useStore((state) => state.setSessionsData)
 
   const getSessions = useCallback(
-    async (agentId: string) => {
-      if (!agentId || !selectedEndpoint) return
+    async ({ entityType, agentId, teamId, dbId }: LoaderArgs) => {
+      const selectedId = entityType === 'agent' ? agentId : teamId
+      if (!selectedEndpoint || !entityType || !selectedId || !dbId) return
+
       try {
         setIsSessionsLoading(true)
-        const sessions = await getAllPlaygroundSessionsAPI(
+
+        const sessions = await getAllSessionsAPI(
           selectedEndpoint,
-          agentId
+          entityType,
+          selectedId,
+          dbId
         )
-        setSessionsData(sessions)
+        console.log('Fetched sessions:', sessions)
+        setSessionsData(sessions.data ?? [])
       } catch {
         toast.error('Error loading sessions')
+        setSessionsData([])
       } finally {
         setIsSessionsLoading(false)
       }
@@ -53,39 +57,46 @@ const useSessionLoader = () => {
   )
 
   const getSession = useCallback(
-    async (sessionId: string, agentId: string) => {
-      if (!sessionId || !agentId || !selectedEndpoint) {
-        return null
-      }
+    async (
+      { entityType, agentId, teamId, dbId }: LoaderArgs,
+      sessionId: string
+    ) => {
+      const selectedId = entityType === 'agent' ? agentId : teamId
+      if (
+        !selectedEndpoint ||
+        !sessionId ||
+        !entityType ||
+        !selectedId ||
+        !dbId
+      )
+        return
+      console.log(entityType)
 
       try {
-        const response = (await getPlaygroundSessionAPI(
+        const response: SessionResponse = await getSessionAPI(
           selectedEndpoint,
-          agentId,
-          sessionId
-        )) as SessionResponse
-
-        if (response && response.memory) {
-          const sessionHistory = response.runs
-            ? response.runs
-            : response.memory.runs
-
-          if (sessionHistory && Array.isArray(sessionHistory)) {
-            const messagesForPlayground = sessionHistory.flatMap((run) => {
-              const filteredMessages: PlaygroundChatMessage[] = []
+          entityType,
+          sessionId,
+          dbId
+        )
+        console.log('Fetched session:', response)
+        if (response) {
+          if (Array.isArray(response)) {
+            const messagesFor = response.flatMap((run) => {
+              const filteredMessages: ChatMessage[] = []
 
-              if (run.message) {
+              if (run) {
                 filteredMessages.push({
                   role: 'user',
-                  content: run.message.content ?? '',
-                  created_at: run.message.created_at
+                  content: run.run_input ?? '',
+                  created_at: run.created_at
                 })
               }
 
-              if (run.response) {
+              if (run) {
                 const toolCalls = [
-                  ...(run.response.tools ?? []),
-                  ...(run.response.extra_data?.reasoning_messages ?? []).reduce(
+                  ...(run.tools ?? []),
+                  ...(run.extra_data?.reasoning_messages ?? []).reduce(
                     (acc: ToolCall[], msg: ReasoningMessage) => {
                       if (msg.role === 'tool') {
                         acc.push({
@@ -108,21 +119,21 @@ const useSessionLoader = () => {
 
                 filteredMessages.push({
                   role: 'agent',
-                  content: (run.response.content as string) ?? '',
+                  content: (run.content as string) ?? '',
                   tool_calls: toolCalls.length > 0 ? toolCalls : undefined,
-                  extra_data: run.response.extra_data,
-                  images: run.response.images,
-                  videos: run.response.videos,
-                  audio: run.response.audio,
-                  response_audio: run.response.response_audio,
-                  created_at: run.response.created_at
+                  extra_data: run.extra_data,
+                  images: run.images,
+                  videos: run.videos,
+                  audio: run.audio,
+                  response_audio: run.response_audio,
+                  created_at: run.created_at
                 })
               }
               return filteredMessages
             })
 
-            const processedMessages = messagesForPlayground.map(
-              (message: PlaygroundChatMessage) => {
+            const processedMessages = messagesFor.map(
+              (message: ChatMessage) => {
                 if (Array.isArray(message.content)) {
                   const textContent = message.content
                     .filter((item: { type: string }) => item.type === 'text')

src/store.ts

@@ -2,32 +2,25 @@ import { create } from 'zustand'
 import { persist, createJSONStorage } from 'zustand/middleware'
 
 import {
-  type PlaygroundChatMessage,
-  type SessionEntry
-} from '@/types/playground'
+  AgentDetails,
+  SessionEntry,
+  TeamDetails,
+  type ChatMessage
+} from '@/types/os'
 
-interface Agent {
-  value: string
-  label: string
-  model: {
-    provider: string
-  }
-  storage?: boolean
-}
-
-interface PlaygroundStore {
+interface Store {
   hydrated: boolean
   setHydrated: () => void
   streamingErrorMessage: string
   setStreamingErrorMessage: (streamingErrorMessage: string) => void
   endpoints: {
     endpoint: string
-    id_playground_endpoint: string
+    id__endpoint: string
   }[]
   setEndpoints: (
     endpoints: {
       endpoint: string
-      id_playground_endpoint: string
+      id__endpoint: string
     }[]
   ) => void
   isStreaming: boolean
@@ -36,21 +29,21 @@ interface PlaygroundStore {
   setIsEndpointActive: (isActive: boolean) => void
   isEndpointLoading: boolean
   setIsEndpointLoading: (isLoading: boolean) => void
-  messages: PlaygroundChatMessage[]
+  messages: ChatMessage[]
   setMessages: (
-    messages:
-      | PlaygroundChatMessage[]
-      | ((prevMessages: PlaygroundChatMessage[]) => PlaygroundChatMessage[])
+    messages: ChatMessage[] | ((prevMessages: ChatMessage[]) => ChatMessage[])
   ) => void
-  hasStorage: boolean
-  setHasStorage: (hasStorage: boolean) => void
   chatInputRef: React.RefObject<HTMLTextAreaElement | null>
   selectedEndpoint: string
   setSelectedEndpoint: (selectedEndpoint: string) => void
-  agents: Agent[]
-  setAgents: (agents: Agent[]) => void
+  agents: AgentDetails[]
+  setAgents: (agents: AgentDetails[]) => void
+  teams: TeamDetails[]
+  setTeams: (teams: TeamDetails[]) => void
   selectedModel: string
   setSelectedModel: (model: string) => void
+  mode: 'agent' | 'team'
+  setMode: (mode: 'agent' | 'team') => void
   sessionsData: SessionEntry[] | null
   setSessionsData: (
     sessionsData:
@@ -61,7 +54,7 @@ interface PlaygroundStore {
   setIsSessionsLoading: (isSessionsLoading: boolean) => void
 }
 
-export const usePlaygroundStore = create<PlaygroundStore>()(
+export const useStore = create<Store>()(
   persist(
     (set) => ({
       hydrated: false,
@@ -85,17 +78,18 @@ export const usePlaygroundStore = create<PlaygroundStore>()(
           messages:
             typeof messages === 'function' ? messages(state.messages) : messages
         })),
-      hasStorage: false,
-      setHasStorage: (hasStorage) => set(() => ({ hasStorage })),
       chatInputRef: { current: null },
-      selectedEndpoint:
-        'https://sifa-classification-agentic-rag-99329044472.asia-south1.run.app',
+      selectedEndpoint: 'http://localhost:7777',
       setSelectedEndpoint: (selectedEndpoint) =>
         set(() => ({ selectedEndpoint })),
       agents: [],
       setAgents: (agents) => set({ agents }),
+      teams: [],
+      setTeams: (teams) => set({ teams }),
       selectedModel: '',
       setSelectedModel: (selectedModel) => set(() => ({ selectedModel })),
+      mode: 'agent',
+      setMode: (mode) => set(() => ({ mode })),
       sessionsData: null,
       setSessionsData: (sessionsData) =>
         set((state) => ({

src/types/{playground.ts → os.ts}

@@ -69,6 +69,14 @@ export interface Agent {
   storage?: boolean
 }
 
+export interface Team {
+  team_id: string
+  name: string
+  description: string
+  model: Model
+  storage?: boolean
+}
+
 interface MessageContext {
   query: string
   docs?: Array<Record<string, object>>
@@ -77,16 +85,36 @@ interface MessageContext {
 
 export enum RunEvent {
   RunStarted = 'RunStarted',
-  RunResponse = 'RunResponse',
+  RunContent = 'RunContent',
   RunCompleted = 'RunCompleted',
+  RunError = 'RunError',
+  RunOutput = 'RunOutput',
+  UpdatingMemory = 'UpdatingMemory',
   ToolCallStarted = 'ToolCallStarted',
   ToolCallCompleted = 'ToolCallCompleted',
-  UpdatingMemory = 'UpdatingMemory',
+  MemoryUpdateStarted = 'MemoryUpdateStarted',
+  MemoryUpdateCompleted = 'MemoryUpdateCompleted',
   ReasoningStarted = 'ReasoningStarted',
   ReasoningStep = 'ReasoningStep',
   ReasoningCompleted = 'ReasoningCompleted',
-  RunError = 'RunError'
+  RunCancelled = 'RunCancelled',
+  RunPaused = 'RunPaused',
+  RunContinued = 'RunContinued',
+  // Team Events
+  TeamRunStarted = 'TeamRunStarted',
+  TeamRunContent = 'TeamRunContent',
+  TeamRunCompleted = 'TeamRunCompleted',
+  TeamRunError = 'TeamRunError',
+  TeamRunCancelled = 'TeamRunCancelled',
+  TeamToolCallStarted = 'TeamToolCallStarted',
+  TeamToolCallCompleted = 'TeamToolCallCompleted',
+  TeamReasoningStarted = 'TeamReasoningStarted',
+  TeamReasoningStep = 'TeamReasoningStep',
+  TeamReasoningCompleted = 'TeamReasoningCompleted',
+  TeamMemoryUpdateStarted = 'TeamMemoryUpdateStarted',
+  TeamMemoryUpdateCompleted = 'TeamMemoryUpdateCompleted'
 }
+
 export interface ResponseAudio {
   id?: string
   content?: string
@@ -94,6 +122,33 @@ export interface ResponseAudio {
   channels?: number
   sample_rate?: number
 }
+
+export interface NewRunResponse {
+  status: 'RUNNING' | 'PAUSED' | 'CANCELLED'
+}
+
+export interface RunResponseContent {
+  content?: string | object
+  content_type: string
+  context?: MessageContext[]
+  event: RunEvent
+  event_data?: object
+  messages?: ModelMessage[]
+  metrics?: object
+  model?: string
+  run_id?: string
+  agent_id?: string
+  session_id?: string
+  tool?: ToolCall
+  tools?: Array<ToolCall>
+  created_at: number
+  extra_data?: AgentExtraData
+  images?: ImageData[]
+  videos?: VideoData[]
+  audio?: AudioData[]
+  response_audio?: ResponseAudio
+}
+
 export interface RunResponse {
   content?: string | object
   content_type: string
@@ -106,9 +161,10 @@ export interface RunResponse {
   run_id?: string
   agent_id?: string
   session_id?: string
+  tool?: ToolCall
+  tools?: Array<ToolCall>
   created_at: number
-  tools?: ToolCall[]
-  extra_data?: PlaygroundAgentExtraData
+  extra_data?: AgentExtraData
   images?: ImageData[]
   videos?: VideoData[]
   audio?: AudioData[]
@@ -121,7 +177,7 @@ export interface AgentExtraData {
   references?: ReferenceData[]
 }
 
-export interface PlaygroundAgentExtraData extends AgentExtraData {
+export interface AgentExtraData {
   reasoning_messages?: ReasoningMessage[]
   references?: ReferenceData[]
 }
@@ -138,7 +194,7 @@ export interface ReasoningMessage {
   }
   created_at?: number
 }
-export interface PlaygroundChatMessage {
+export interface ChatMessage {
   role: 'user' | 'agent' | 'system' | 'tool'
   content: string
   streamingError?: boolean
@@ -155,14 +211,23 @@ export interface PlaygroundChatMessage {
   response_audio?: ResponseAudio
 }
 
-export interface ComboboxAgent {
-  value: string
-  label: string
-  model: {
-    provider: string
-  }
-  storage?: boolean
+export interface AgentDetails {
+  id: string
+  name?: string
+  db_id?: string
+  // Model
+  model?: Model
 }
+
+export interface TeamDetails {
+  id: string
+  name?: string
+  db_id?: string
+
+  // Model
+  model?: Model
+}
+
 export interface ImageData {
   revised_prompt: string
   url: string
@@ -201,8 +266,21 @@ export interface Reference {
 
 export interface SessionEntry {
   session_id: string
-  title: string
+  session_name: string
   created_at: number
+  updated_at?: number
+}
+
+export interface Pagination {
+  page: number
+  limit: number
+  total_pages: number
+  total_count: number
+}
+
+export interface Sessions extends SessionEntry {
+  data: SessionEntry[]
+  meta: Pagination
 }
 
 export interface ChatEntry {

workflows/validate.yml

@@ -1,21 +0,0 @@
-name: Validate Build
-
-on:
-  push:
-
-jobs:
-  validate:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: latest
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Run validate script
-        run: pnpm run validate