Implementation:Microsoft Autogen Studio Playground Manager

Sources	https://github.com/microsoft/autogen/blob/main/python/packages/autogen-studio/frontend/src/components/views/playground/manager.tsx
Domains	React Component, Session Management, UI State Management
Last Updated	2026-02-11

Overview

The SessionManager component is the main orchestrator for the AutoGen Studio playground interface, managing sessions, teams, chat views, and comparison mode.

Description

The SessionManager component serves as the central hub for the playground view in AutoGen Studio. It coordinates multiple concerns:

• Session lifecycle management: Creating, updating, selecting, and deleting chat sessions
• Team integration: Fetching available teams and enabling quick-start sessions with pre-configured teams
• Sidebar state: Managing the collapsible sidebar with localStorage persistence
• Comparison mode: Supporting side-by-side session comparison for analyzing different chat runs
• URL synchronization: Syncing the active session with browser URL parameters and handling browser navigation
• Loading states: Coordinating async operations and displaying appropriate feedback

The component uses React hooks extensively for state management (useState), side effects (useEffect), memoization (useCallback), and context consumption (useContext). It integrates with the global config store (useConfigStore) and gallery store (useGalleryStore) for cross-component state sharing.

The layout consists of a collapsible sidebar (12px collapsed, 64px expanded) on the left, and a flexible main content area that displays either a single ChatView or two ChatViews in comparison mode. When no session is selected, it shows a helpful placeholder message.

Usage

The SessionManager is typically mounted as the main component for the playground route. It requires an authenticated user context (appContext) to be available. On mount, it:

1. Fetches the user's sessions and teams from the API
2. Checks URL parameters for a sessionId and loads that session if present
3. Creates a default team from the gallery if no teams exist
4. Persists sidebar state to localStorage for user preference retention

Users can interact with the component to create new sessions, switch between sessions, edit session metadata, delete sessions, and compare two sessions side-by-side.

Code Reference

Source Location: python/packages/autogen-studio/frontend/src/components/views/playground/manager.tsx

Signature:

export const SessionManager: React.FC = () => {
  // State management
  const [teams, setTeams] = useState<Team[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isEditorOpen, setIsEditorOpen] = useState(false);
  const [editingSession, setEditingSession] = useState<Session | undefined>();
  const [isSidebarOpen, setIsSidebarOpen] = useState(() => {
    if (typeof window !== "undefined") {
      const stored = localStorage.getItem("sessionSidebar");
      return stored !== null ? JSON.parse(stored) : true;
    }
    return true;
  });
  const [isCompareMode, setIsCompareMode] = useState(false);
  const [comparisonSession, setComparisonSession] = useState<Session | null>(null);

  // Context and store hooks
  const { user } = useContext(appContext);
  const { session, setSession, sessions, setSessions } = useConfigStore();
  const galleryStore = useGalleryStore();
  const [messageApi, contextHolder] = message.useMessage();

  // ... handler functions and effects

  return (
    <div className="relative flex h-full w-full">
      <Sidebar ... />
      <div className="flex-1">
        <ChatView ... />
      </div>
      <SessionEditor ... />
    </div>
  );
};

Import:

import { SessionManager } from "./components/views/playground/manager";

I/O Contract

Props

Name	Type	Required	Description
(none)	-	-	SessionManager is a zero-props component that gets its data from context and stores

Outputs

Type	Description
JSX.Element	Renders the complete playground interface with sidebar, chat view(s), and session editor modal

State Dependencies

Store/Context	Properties Used	Description
appContext	user	Current authenticated user object with id field
useConfigStore	session, setSession, sessions, setSessions	Global session state management
useGalleryStore	fetchGalleries, getSelectedGallery	Access to team templates from gallery
localStorage	"sessionSidebar"	Persists sidebar open/closed state across sessions
URL params	sessionId	Deep linking to specific sessions via query parameter

API Interactions

API Method	Description	When Called
sessionAPI.listSessions(userId)	Fetches all sessions for user	On mount and after user changes
sessionAPI.getSession(id, userId)	Fetches single session details	When selecting a session or loading from URL
sessionAPI.createSession(data, userId)	Creates a new session	Quick start or manual creation
sessionAPI.updateSession(id, data, userId)	Updates existing session	Session editor save
sessionAPI.deleteSession(id, userId)	Deletes a session	User delete action
teamAPI.listTeams(userId)	Fetches available teams	On mount
teamAPI.createTeam(data, userId)	Creates default team	When no teams exist

Usage Examples

Example 1: Basic Integration

import { SessionManager } from "./components/views/playground/manager";
import { AppProvider } from "./hooks/provider";

function PlaygroundRoute() {
  return (
    <AppProvider>
      <SessionManager />
    </AppProvider>
  );
}

Example 2: Deep Linking to a Session

// URL: /playground?sessionId=42
// The SessionManager will automatically:
// 1. Parse the sessionId parameter
// 2. Fetch session with id=42
// 3. Set it as the active session
// 4. Display the chat view for that session

// Programmatic navigation:
window.history.pushState({}, "", "?sessionId=42");
// The SessionManager's popstate listener will handle the change

Example 3: Comparison Mode Flow

// User clicks compare button in ChatView
// ChatView calls: onCompareClick()

// SessionManager.handleCompareClick():
// 1. Finds another session (first one that isn't current)
// 2. Sets comparisonSession state
// 3. Activates isCompareMode
// 4. Renders two ChatView components side by side

// To exit comparison:
// User clicks exit in secondary ChatView
// ChatView calls: onExitCompare()
// SessionManager.handleExitCompare() resets comparison state

Example 4: Quick Start Session

// User selects team from sidebar and clicks "Start Session"
// Sidebar calls: onStartSession(teamId, teamName)

// SessionManager.handleQuickStart(teamId, teamName):
const defaultName = `${teamName.substring(0, 20)} - ${new Date().toLocaleString()} Session`;
const created = await sessionAPI.createSession({
  name: defaultName,
  team_id: teamId,
}, userId);

// New session is added to list and set as active
setSessions([created, ...sessions]);
setSession(created);

Example 5: Handling Missing Teams

// On mount, if no teams exist:
// SessionManager.fetchTeams():

if (teamsData.length === 0) {
  // Fetch galleries and get default gallery
  await galleryStore.fetchGalleries(userId);
  const defaultGallery = galleryStore.getSelectedGallery();

  // Create team from first sample team in gallery
  const sampleTeam = defaultGallery?.config.components.teams[0];
  if (sampleTeam) {
    const defaultTeam = await teamAPI.createTeam({
      component: sampleTeam,
    }, userId);
    setTeams([defaultTeam]);
  }
}

Related Pages

• Studio_Chat_View - The chat interface component rendered by SessionManager
• Studio_Sidebar - The collapsible sidebar for session and team management
• Studio_Session_Editor - Modal for creating/editing session metadata
• Studio_Session_API - API client for session CRUD operations
• Studio_Config_Store - Zustand store for global session state
• Studio_Gallery_Store - Store for managing team templates and galleries
• Types_Datamodel - TypeScript definitions for Session and Team types