Workbench Layout
Relevant source files
The following files were used as context for generating this wiki page:
The Workbench Layout serves as the primary integrated development environment (IDE) interface within the application. It provides a specialized workspace where users can view, edit, and preview the code generated by the AI agent. The layout is designed to be highly responsive, featuring a slide-out transition and a split-view system that toggles between code editing and live application previews.
Managed primarily through the WorkbenchStore, this system coordinates the synchronization between the WebContainer filesystem, the CodeMirror editor, and the terminal instances. It allows for real-time interaction with full-stack Node.js environments directly in the browser.
Sources: app/components/workbench/Workbench.client.tsx:55-155, app/lib/stores/workbench.ts:31-48
Core Architecture and Component Hierarchy
The Workbench is a client-side component that utilizes framer-motion for transitions and nanostores for state management. It is composed of a header containing view toggles and a main content area that switches between the EditorPanel and the Preview components.
Layout Structure Diagram
The following diagram illustrates the structural relationship between the Workbench and its primary sub-components.
View Management
The Workbench supports two primary view modes: code and preview. This state is persisted in the WorkbenchStore and can be programmatically changed, such as automatically switching to 'preview' when a new web server port becomes active.
| View Type | Description | Component |
|---|---|---|
code | Displays the file explorer, code editor, and integrated terminals. | EditorPanel |
preview | Displays an iframe-based browser preview of the running application. | Preview |
Sources: app/lib/stores/workbench.ts:29-45, app/components/workbench/Workbench.client.tsx:32-42
Editor Panel System
The EditorPanel is a complex layout component that utilizes react-resizable-panels to provide a flexible user interface. It is divided into three main zones:
- Sidebar: Contains the
FileTreefor project navigation. - Editor: Houses the
CodeMirrorEditorfor file manipulation andFileBreadcrumbfor path visualization. - Terminal Area: A collapsible bottom section supporting multiple terminal instances (up to 3).
Terminal Management Logic
The terminal section is integrated into the vertical panel group. It can be collapsed or expanded via UI buttons or keyboard shortcuts.
State Synchronization and Data Flow
The WorkbenchStore acts as the central orchestrator, delegating specific concerns to specialized stores:
FilesStore: Manages the WebContainer filesystem.EditorStore: Tracks document states, scroll positions, and selected files.TerminalStore: Handles terminal attachments and resizing.
Document Update Sequence
When a user edits a file in the CodeMirror editor, the following sequence ensures data integrity:
Navigation and File Management
The FileTree component builds a hierarchical representation of the project files. It supports:
- Filtering out system directories like
node_modulesand.next. - Depth-first traversal for flat-list rendering of the tree.
- Visual indicators for unsaved changes (orange circle icons).
- Alphabetical sorting with folders prioritized over files.
Sorting Logic Implementation
Nodes are compared based on their kind (Folder vs File) and then by their numeric/alphabetical name.
Sources: app/components/workbench/FileTree.tsx:142-205, app/components/workbench/FileTree.tsx:340-346
Preview and Port Handling
The Preview component manages the application output. It monitors the previews store for available ports. If multiple ports are active (e.g., a frontend on 3000 and a backend on 8080), it provides a PortDropdown for switching.
Conclusion
The Workbench Layout is a highly integrated system that bridges the gap between a browser-based UI and a full-stack development environment. By leveraging a centralized store pattern and modular React components, it maintains synchronization between the AI's generated actions, the user's manual edits, and the live runtime execution within WebContainers.