Main Workspace Layout
Relevant source files
The following files were used as context for generating this wiki page:
The Main Workspace Layout organizes the Agent Studio interface into a multi-pane environment for interacting with Large Language Models (LLMs), managing local files, and configuring Model Context Protocol (MCP) extensions. It provides a centralized hub for developer workflows, including chat sessions, filesystem exploration, and real-time visualization sandboxes.
The layout coordinates state between a persistent sidebar for navigation, a header for session status, and a dynamic main content area that swaps between different functional modules based on user selection.
Sources: src/screens/MainScreen.tsx:1-50, src/components/ChatArea.tsx:1-20
Component Architecture
The interface utilizes a three-tier hierarchical structure. The MainScreen serves as the root container, managing the visibility of specific panels like the ChatArea, ExplorerFS, and PluginMCP.
Layout Hierarchy and Data Flow
The following diagram illustrates how the MainScreen orchestrates the primary UI components and passes session data downward.
Global Navigation and Sidebar
The Sidebar provides the primary navigation index. It allows users to switch between dialogue streams, file mounts, prompt libraries, and plugin registries.
- Navigation Index: A button group that sets the
activePanelstate inMainScreen. - Active Conversations: A list of chat sessions where users can add, rename, or delete dialogue branches.
- Resource Monitor: Real-time displays for CPU, RAM, and VRAM utilization.
Sources: src/components/Sidebar.tsx:43-167
| Feature | Description | File Path |
|---|---|---|
| Dialogue Streams | Manages multiple LLM chat sessions and histories. | src/components/Sidebar.tsx |
| File Mounts | Accesses the virtual and mapped local filesystem. | src/components/ExplorerFS.tsx |
| Plugin Registry | Configures MCP servers and sandbox skills. | src/components/PluginMCP.tsx |
| Sync Cluster | Manages end-to-end encrypted device synchronization. | src/components/SyncCluster.tsx |
Chat Interface and Workflow
The ChatArea is the primary workspace for LLM interaction. It features a dual-pane layout when the Sandbox is active.
Interaction Flow
When a user sends a message, the ChatArea coordinates with the active LLM provider and MCP tools to generate a response.
Key Chat Components
- Model Configuration Bar: Allows selection of LLM providers (e.g., Ollama, LM Studio, OpenAI) and specific models.
- Autocomplete System: Triggers via symbols:
/for prompt presets,@for file attachments, and#for MCP tools. - Sandbox Workspace: A collapsible right-side panel that renders SVG diagrams, LaTeX formulas, or Python/JS code snippets detected in chat messages.
Sources: src/components/ChatArea.tsx:112-230, src/components/ChatArea.tsx:540-620
Filesystem Explorer
The ExplorerFS component provides a visual representation of the project's virtual and real mapped filesystem. It supports:
- File Management: Users can add, edit, or delete files directly within the UI.
- Inline Editor: A high-contrast code editor for modifying file buffers.
- Drag-and-Drop: Supports importing markdown, JSON, Python, and CSV files by dragging them into the browser window.
- Context Attachment: Files can be "attached" to chat sessions, allowing the LLM to read their contents.
Sources: src/components/ExplorerFS.tsx:25-150
Plugin and MCP Registry
The PluginMCP module manages extensions to the agent's capabilities. It differentiates between system-level tools and UI-level skills.
MCP (System Tools)
The application connects to local or remote MCP servers via URL endpoints.
- Service Registration: Users input a name, URL (e.g.,
http://localhost:3011), and description to register a new broker. - Tool Discovery: The system pings the endpoint to discover exposed tools and their JSON schemas.
Skills (Sandbox Renders)
Skills are reactive view canvas plugins that intercept LLM output.
- Visual SVG Sandbox: Renders complex vector drawings.
- LaTeX Typesetter: Formats mathematical equations.
- JS/Code Playground: Executes lightweight scripts in a secure runtime.
Sources: src/components/PluginMCP.tsx:60-140, src/components/PluginMCP.tsx:230-265
Title Bar and System Status
The TitleBar provides global application status and mock OS controls. It identifies the active LLM provider and model name, while displaying a "SERVICE LIVE" indicator if a local port is detected. It also shows a sync indicator when the Cloud Sync Cluster is active.
Sources: src/components/TitleBar.tsx:20-80
Summary
The Main Workspace Layout provides a highly modular environment designed for technical users. By separating concerns into distinct panels (Chat, Files, Plugins, and Sync), the system allows for complex AI workflows that integrate local machine context with powerful LLM reasoning. The layout ensures that internal state—such as file attachments and MCP tool connections—is clearly visualized and easily managed through the sidebar and autocomplete systems.