Sidebar & TitleBar Components
Relevant source files
The following files were used as context for generating this wiki page:
The Sidebar and TitleBar components constitute the primary navigation and status interface for the Agent Studio MCP Engine. The Sidebar manages session streams, workspace panel switching, and resource monitoring, while the TitleBar provides application-level branding, connection status, and window controls.
These components work in tandem with the MainScreen to orchestrate user transitions between different workspace modules, such as Dialogue Streams, File Mounts, and Plugin Registry.
Sidebar Component
The Sidebar serves as the vertical navigation hub. It enables users to switch between major functional panels and manage active chat sessions.
Sidebar Navigation and Panels
The Sidebar uses a NAVIGATION INDEX to switch the activePanel state in the main application. It tracks the number of active sessions via badges.
The component facilitates navigation through five primary modules:
- Dialogue Streams: Manages chat sessions.
- File Mounts: Accesses the virtual file system explorer.
- Prompt Studio: Configures system instructions.
- Plugin Registry: Manages MCP servers and sandbox skills.
- Sync Cluster: Handles cross-device synchronization.
Sources: [src/components/Sidebar.tsx:42-53], [src/screens/MainScreen.tsx:28-29]
Session Management
When the chats panel is active, the Sidebar renders the ACTIVE CONVERSATIONS list. Users can perform the following actions:
- Add Session: Creates a new "branch" or conversation stream.
- Select Session: Sets the current active session ID for the
ChatArea. - Rename Session: Updates the title of an existing session via an inline input field.
- Delete Session: Purges the dialogue history of a specific session.
Sources: [src/components/Sidebar.tsx:75-156], [src/screens/MainScreen.tsx:78-88]
Resource Monitor
The Sidebar footer includes a real-time monitor for local system resources, providing visual progress bars for:
- CPU: Percentage of processor usage.
- RAM: Current memory allocation (e.g., 4.2 / 16 GB).
- VRAM: Video memory usage for local LLM inference.
Sources: [src/components/Sidebar.tsx:180-205]
TitleBar Component
The TitleBar is a persistent horizontal header that provides application identity, LLM connectivity status, and native window controls.
Connection Status & Branding
The TitleBar displays the active LLM provider and model name. A status indicator signifies if the service is live (e.g., "SERVICE LIVE (3000)").
| Element | Description | Source |
|---|---|---|
| Window Icon | A Bot icon with a pulse animation for branding. | [src/components/TitleBar.tsx:30-34] |
| Version Badge | Displays current app version (e.g., win-v1.2). | [src/components/TitleBar.tsx:37-39] |
| Status Bar | Shows providerName and activeModelName (e.g., Ollama: llama3.1:8b). | [src/components/TitleBar.tsx:45-56] |
Sync and Window Controls
The component tracks the synchronization state and handles mock window operations typical of desktop environments.
Sync Indicator*: Displays a spinning icon and "Syncing cluster..." text when the isSyncing prop is true.
- Window State: Tracks
normalvsmaximizedstates to toggle between "Maximize Workspace" and "Restore Window" icons. - Exit Logic: Instead of closing, the component triggers a slide-out alert notifying the user that the core process remains active in the system tray to maintain MCP mappings.
Sources: [src/components/TitleBar.tsx:59-108], [src/components/ChatArea.tsx:143-155]
Component Data Flow
The MainScreen acts as the controller, passing state down to these components and handling their emitted events.
Sources: [src/screens/MainScreen.tsx:76-110], [src/components/ChatArea.tsx:162-177]
Summary
The Sidebar and TitleBar provide the structural framework for the Agent Studio interface. The Sidebar manages complex navigation and resource tracking, ensuring users can switch between chat, file management, and plugin configuration. The TitleBar maintains visibility of the LLM backend status and handles application lifecycle events, ensuring persistent connectivity for MCP tools and sync services.