Application Shell Setup
Relevant source files
The following files were used as context for generating this wiki page:
The Application Shell Setup defines the foundational layout, configuration, and entry points for the Agent Studio MCP Engine. It establishes a cross-platform environment using Vite, React, and Tauri (for desktop) or Capacitor (for mobile) to provide a consistent user interface across Windows, macOS, Android, and iOS.
The shell manages the primary navigation index, window controls, and the orchestration of functional panels such as dialogue streams, file mounts, and plugin registries. It ensures the application remains responsive and maintains local system mappings even when the main window is minimized.
Core Entry and Configuration
The application initializes through a standard web entry point that Vite bundles into platform-specific distributions.
Web Entry Point
The index.html file serves as the root container. It sets a dark theme color (#09090b) and configures viewport settings for mobile compatibility, including apple-mobile-web-app-capable for iOS.
Sources: index.html:1-16
Desktop Environment (Tauri)
The desktop shell is configured via src-tauri/tauri.conf.json. It defines a window with a default resolution of 1280x800 and specifies build commands that link the Vite dev server (http://localhost:3000) to the native shell.
Sources: src-tauri/tauri.conf.json:7-29
Build and Platform Matrix
The project uses package.json to manage cross-platform scripts and dependencies.
| Script | Action | Target |
|---|---|---|
npm run dev | Starts Vite dev server on port 3000 | Web Browser |
npm run tauri:dev | Opens native window with HMR | Desktop Dev |
npm run tauri:build | Generates .msi, .exe, or .dmg | Desktop Production |
npm run cap:android | Syncs assets and opens Android Studio | Android |
npm run cap:ios | Syncs assets and opens Xcode | iOS |
Sources: package.json:7-22, BUILDING.md:4-13
Visual Architecture and Layout
The MainScreen component acts as the primary layout controller. It divides the interface into a persistent sidebar and a dynamic main content area.
The diagram shows how the MainScreen orchestrates the Sidebar and Main Content areas.
Sources: src/screens/MainScreen.tsx:44-142
Sidebar Navigation Index
The Sidebar provides a navigation index for switching between application modules. It includes a resource monitor that tracks CPU, RAM, and VRAM usage of the local system.
Sources: src/components/Sidebar.tsx:48-73, src/components/Sidebar.tsx:168-195
Header and Window Controls
The TitleBar component provides custom window decorations and connection status. It includes a specific behavior for the "Close" button: instead of exiting, it minimizes the core process to the system tray to maintain Model Context Protocol (MCP) mappings and remote sync subscriptions.
Sources: src/components/TitleBar.tsx:32-113
Component Hierarchy
The shell dynamically mounts components based on the activePanel state managed in MainScreen.
| Component | Responsibility | Relevant File |
|---|---|---|
Sidebar | Panel switching and session management | src/components/Sidebar.tsx |
TitleBar | System status and window controls | src/components/TitleBar.tsx |
ChatArea | Primary interaction interface | src/components/ChatArea.tsx |
ExplorerFS | Virtual and mapped filesystem explorer | src/components/ExplorerFS.tsx |
PluginMCP | Registry for MCP tools and Sandbox skills | src/components/PluginMCP.tsx |
Sources: src/screens/MainScreen.tsx:106-140
Initialization Logic
When the application loads, MainScreen performs the following initialization steps:
- Validates the authentication state via
useAuth. - Checks for existing user sessions.
- If no sessions exist, it calls
createSession()to establish a default dialogue branch. - Sets the first available session as the
activeSessionId.
Sources: src/screens/MainScreen.tsx:28-42
Summary
The Application Shell Setup provides a robust, cross-platform container for Agent Studio. By leveraging Tauri and Capacitor, it integrates native system capabilities—such as filesystem access and system tray persistence—into a modern React-based interface. This setup ensures that the local LLM network and MCP drivers remain active and accessible across different operating environments.