Implementation:Microsoft Autogen Studio Run View

Sources	python/packages/autogen-studio/frontend/src/components/views/playground/chat/runview.tsx
Domains	Frontend, React Component, Message Display, Replay
Last Updated	2026-02-11

Overview

RunView is a comprehensive React component that displays a single conversation run with messages, status indicators, agent flow visualization, input request handling, and a replay feature for completed runs.

Description

RunView orchestrates the display of a complete run lifecycle with rich interactive features. Key capabilities include:

Message Display: Renders all messages using RenderMessage with filtering based on settings
Status Visualization: Color-coded status badges (active, complete, error, stopped, awaiting_input)
Agent Flow Integration: Embedded AgentFlow component showing agent communication patterns
Expandable/Collapsible: Header-based expand/collapse for managing screen space
Replay System: Play/pause/reset controls to replay message sequences at variable speeds (0.5x, 1x, 2x, 4x)
Input Request Handling: InputRequestView for awaiting_input status
Streaming Support: Real-time streaming message display with cursor animation
LLM Events Toggle: Show/hide low-level LLM call events based on user settings
Flow Visibility Control: Toggle agent flow diagram visibility

The component uses extensive React hooks including useState for UI state, useRef for DOM references, useEffect for side effects, and useMemo for performance optimization. The replay feature creates a virtual run that progressively reveals messages with configurable speed, maintaining a separate originalRun state. It implements automatic scrolling to keep latest messages visible and provides dropdown menus for replay speed selection.

Usage

RunView is called from ChatView for each run in the conversation history. It can display both active runs (with real-time updates) and completed runs (with replay capability).

Code Reference

Source Location: /tmp/kapso_repo_2mr4n2g4/python/packages/autogen-studio/frontend/src/components/views/playground/chat/runview.tsx

Signature:

interface RunViewProps {
  run: Run;
  teamConfig?: Component<TeamConfig>;
  onInputResponse?: (response: string) => void;
  onCancel?: () => void;
  isFirstRun?: boolean;
  streamingContent?: {
    runId: number;
    content: string;
    source: string;
  } | null;
}

const RunView: React.FC<RunViewProps> = ({
  run,
  onInputResponse,
  onCancel,
  teamConfig,
  isFirstRun = false,
  streamingContent,
}) => { /* ... */ }

export default RunView;

Import:

import RunView from './runview';

I/O Contract

Props/Inputs

Prop	Type	Required	Description
run	Run	Yes	Run object containing messages, status, and metadata
teamConfig	Component<TeamConfig>	No	Team configuration for agent flow visualization
onInputResponse	(response: string) => void	No	Callback when user responds to input request
onCancel	() => void	No	Callback to cancel active run
isFirstRun	boolean	No	Indicates if this is the first run (affects styling)
streamingContent	null	No	Current streaming message content

Key Types

interface Run {
  id: number;
  status: RunStatus;
  messages: Message[];
  error_message?: string;
  created_at: string;
  updated_at: string;
  task?: any;
}

type RunStatus = "active" | "awaiting_input" | "complete" | "error" | "stopped";

interface StreamingMessageProps {
  content: string;
  source: string;
}

Replay Controls

Function	Description
startReplay()	Begins replay from first message
pauseReplay()	Pauses current replay
resetReplay()	Resets replay to initial state
changeReplaySpeed(speed)	Changes replay speed (0.5x, 1x, 2x, 4x)

Outputs

Event	Payload	Description
onInputResponse	response: string	User input sent back to chat system
onCancel	void	Cancellation request for active run

Usage Examples

Basic usage:

import RunView from './runview';

const ChatView = ({ runs, teamConfig }) => {
  return (
    <div>
      {runs.map(run => (
        <RunView
          key={run.id}
          run={run}
          teamConfig={teamConfig}
        />
      ))}
    </div>
  );
};

With input request handling:

const handleInputResponse = async (response: string) => {
  // Send response via WebSocket
  if (activeSocket?.readyState === WebSocket.OPEN) {
    activeSocket.send(JSON.stringify({
      type: "input_response",
      response: response
    }));
  }
};

<RunView
  run={currentRun}
  teamConfig={teamConfig}
  onInputResponse={handleInputResponse}
  onCancel={handleCancelRun}
/>

With streaming content:

const [streamingContent, setStreamingContent] = useState(null);

// Update streaming content from WebSocket
const handleMessageChunk = (chunk: ModelClientStreamingChunkEvent) => {
  setStreamingContent({
    runId: currentRun.id,
    content: chunk.content,
    source: chunk.source
  });
};

<RunView
  run={currentRun}
  streamingContent={streamingContent}
/>
// Displays: "AssistantAgent" with blinking cursor and streamed text

Replay controls usage:

// Component automatically provides replay UI for completed runs
// User interactions:
// 1. Click play button → startReplay() called
// 2. Click pause → pauseReplay() called
// 3. Click reset → resetReplay() called
// 4. Select speed from dropdown → changeReplaySpeed(newSpeed) called

// Replay speeds available:
const speeds = [
  { label: "0.5x", value: 0.5 },
  { label: "1x", value: 1 },
  { label: "2x", value: 2 },
  { label: "4x", value: 4 }
];

Filtering messages:

// Component respects uiSettings.show_llm_call_events
const visibleMessages = useMemo(() => {
  if (uiSettings.show_llm_call_events) {
    return displayRun.messages; // Show all messages
  }
  return displayRun.messages.filter(
    msg => msg.config.source !== "llm_call_event"
  );
}, [displayRun.messages, uiSettings.show_llm_call_events]);

Status badge rendering:

// Status determines badge color and icon:
// active → blue badge with Loader2 spinning icon
// awaiting_input → yellow badge with MessageSquare icon
// complete → green badge with CheckCircle icon
// error → red badge with AlertTriangle icon
// stopped → gray badge with StopCircle icon

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment