You are an expert AI assistant tasked with generating a single-page React application for a cloud platform designed for AI Coding Agents, inspired by the concept of 'Freestyle'. The application should allow users to create, manage, and fork sandboxed environments for their agents with exceptional speed and state persistence capabilities.
**1. PROJECT OVERVIEW:**
- **Purpose:** To provide AI Coding Agents with highly efficient, fast-starting, and forkable cloud-based sandboxes.
- **Problem Solved:** Existing solutions are too slow to start or don't offer instantaneous, memory-level forking, hindering the agility of AI agents in complex tasks.
- **Value Proposition:** Enable AI agents to leverage the full power of a computer with near-instantaneous environment duplication and state snapshotting, dramatically improving development and execution speed for AI-driven workflows.
**2. TECH STACK:**
- **Frontend Framework:** React (using Vite for fast development server)
- **Styling:** Tailwind CSS (with Headless UI for accessible components)
- **State Management:** Zustand (for simple and efficient global state management)
- **API Client:** Axios (or native fetch API)
- **Routing:** React Router DOM (if needed for potential future expansion, but for a SPA, keep it minimal)
- **Utilities:** clsx for conditional class names, lodash (optional, for utility functions).
**3. CORE FEATURES:**
- **Dashboard:** The main view where users can see their existing sandboxes, create new ones, and access management options.
- **Sandbox Creation:** A modal or dedicated section to initiate the creation of a new sandbox. This involves selecting configurations (e.g., basic resource allocation) and triggering the backend process.
- *User Flow:* User clicks 'New Sandbox' -> Fills in optional details (name) -> Clicks 'Create' -> A loading state appears briefly -> New sandbox appears on the dashboard.
- **Sandbox Management:** Displaying a list of sandboxes with their status (running, stopped, creating), name, and key metrics.
- *User Flow:* User sees a list of sandboxes -> Can view details, start/stop, fork, or delete.
- **Instant Forking:** A key feature allowing users to duplicate an existing sandbox's state almost instantly.
- *User Flow:* User selects a running sandbox -> Clicks 'Fork' -> A new sandbox entry appears in the list within seconds, reflecting the exact state of the original at the time of forking.
- **State Snapshotting:** Ability to save the current state of a running sandbox.
- *User Flow:* User selects a running sandbox -> Clicks 'Snapshot' -> State is saved on the backend -> User can later 'Restore' from this snapshot.
- **Sandbox Details View:** A dedicated page or modal to view detailed information about a specific sandbox, including logs, resource usage, and management options (start, stop, fork, snapshot, restore, delete).
**4. UI/UX DESIGN:**
- **Layout:** A clean, single-page application layout. A persistent sidebar for navigation (Dashboard, New Sandbox, Settings - future) and a main content area.
- **Color Palette:** Modern and professional. Primary: Dark grey/charcoal background (`#1a1a1a`). Accent: A vibrant electric blue (`#007bff`) or teal (`#17a2b8`) for interactive elements, buttons, and highlights. Secondary: Lighter greys for text (`#e0e0e0`) and subtle UI elements (`#444`). Use sparingly for status indicators (e.g., green for running, red for error).
- **Typography:** Sans-serif fonts like Inter or Poppins for a clean, readable interface. Use varied weights and sizes for hierarchy.
- **Component Design:** Use clear visual hierarchy. Interactive elements should be easily identifiable. Utilize cards for sandbox summaries. Loading indicators should be non-intrusive but noticeable.
- **Responsive Design:** Mobile-first approach. The layout should adapt fluidly to different screen sizes. Sidebar might collapse into a hamburger menu on smaller screens. Ensure usability across devices.
**5. DATA MODEL:**
- **`Sandbox` Interface/Type:**
```typescript
interface SandboxState {
id: string;
name: string;
status: 'creating' | 'running' | 'stopped' | 'error' | 'snapshotting';
createdAt: string; // ISO timestamp
lastActiveAt: string; // ISO timestamp
resources: {
cpu: number;
memory: string; // e.g., '2Gi'
disk: string; // e.g., '50Gi'
};
snapshotId?: string; // ID of the latest snapshot
// Potentially add IP address, region, etc.
}
```
- **Global State (Zustand):**
```javascript
// store.js
import create from 'zustand';
const useStore = create(set => ({
sandboxes: [], // Array of SandboxState
isLoading: false,
error: null,
fetchSandboxes: async () => {
set({ isLoading: true });
try {
// Simulate API call
const response = await fakeApi.get('/sandboxes');
set({ sandboxes: response.data, isLoading: false });
} catch (err) {
set({ error: 'Failed to load sandboxes', isLoading: false });
}
},
createSandbox: async (name) => {
set({ isLoading: true });
try {
// Simulate API call
const response = await fakeApi.post('/sandboxes', { name });
set(state => ({ sandboxes: [...state.sandboxes, response.data], isLoading: false }));
} catch (err) {
set({ error: 'Failed to create sandbox', isLoading: false });
}
},
forkSandbox: async (sandboxId) => {
// ... similar logic for forking
},
// ... other actions: deleteSandbox, snapshotSandbox, restoreSandbox
}));
export default useStore;
```
- **Mock API:** Simulate API responses using a simple array or a mock service.
**6. COMPONENT BREAKDOWN:**
- **`App.jsx`:** Main application component, sets up routing (if any) and global layout.
- **`Layout.jsx`:** Contains the persistent sidebar and main content area.
- **`Sidebar.jsx`:** Navigation menu component. Props: `navItems` (array of objects with label and path).
- **`DashboardPage.jsx`:** Main content area for the dashboard. Fetches and displays sandboxes.
- **`SandboxList.jsx`:** Renders the list of sandbox cards. Props: `sandboxes` (array), `onAction` (function to handle actions like fork, delete).
- **`SandboxCard.jsx`:** Represents a single sandbox in the list. Props: `sandbox` (SandboxState object), `onFork`, `onDelete`, `onSnapshot`, `onStart`, `onStop`.
- **`SandboxDetailModal.jsx`:** Modal for viewing and managing a single sandbox. Props: `sandbox` (SandboxState object), `isOpen`, `onClose`, `onFork`, `onSnapshot`, `onRestore`, etc.
- **`CreateSandboxModal.jsx`:** Modal for creating a new sandbox. Props: `isOpen`, `onClose`, `onCreateSandbox`.
- **`LoadingSpinner.jsx`:** Reusable loading indicator component.
- **`Button.jsx`:** Reusable button component with styling.
- **`StatusIndicator.jsx`:** Displays the status of a sandbox with appropriate color coding.
**7. ANIMATIONS & INTERACTIONS:**
- **Page Transitions:** Subtle fade-in/out transitions for route changes (if using React Router) or when modals appear/disappear.
- **Button Hovers:** Slight scale or background color change on button hover.
- **Sandbox Card Hover:** A subtle shadow or border highlight when hovering over a sandbox card.
- **Loading States:** Use `LoadingSpinner` components within cards or sections where data is being fetched or an action is in progress. Simulate the ~400ms fork and ~500ms create delays visually.
- **Forking Animation:** When forking, the new sandbox card could briefly flash or animate in, emphasizing its rapid creation.
- **Notifications:** Use a toast notification system (e.g., `react-toastify`) for success/error messages after actions.
**8. EDGE CASES:**
- **Empty State:** The `SandboxList` should display a friendly message and a call-to-action (e.g., 'Create your first sandbox') when there are no sandboxes.
- **Error Handling:** Display user-friendly error messages for API failures (e.g., 'Failed to create sandbox. Please try again.'). Handle network errors gracefully.
- **Validation:** Basic validation for sandbox naming (e.g., not empty, character limits) in `CreateSandboxModal`.
- **Permissions:** (Future Consideration) Role-based access control.
- **Resource Limits:** Clearly indicate or prevent actions that exceed user quotas (if applicable).
- **Accessibility (a11y):** Use semantic HTML, ensure proper ARIA attributes, keyboard navigation, and sufficient color contrast.
**9. SAMPLE DATA:**
```json
[
{
"id": "sbx_123abc",
"name": "Agent-Alpha-Dev",
"status": "running",
"createdAt": "2023-10-26T10:00:00Z",
"lastActiveAt": "2023-10-26T14:30:00Z",
"resources": {
"cpu": 2,
"memory": "4Gi",
"disk": "100Gi"
},
"snapshotId": "snap_789xyz"
},
{
"id": "sbx_456def",
"name": "Agent-Beta-Testing",
"status": "stopped",
"createdAt": "2023-10-25T09:00:00Z",
"lastActiveAt": "2023-10-25T11:00:00Z",
"resources": {
"cpu": 4,
"memory": "8Gi",
"disk": "200Gi"
}
},
{
"id": "sbx_789ghi",
"name": "Quick-Test-Sandbox",
"status": "creating",
"createdAt": "2023-10-26T15:00:00Z",
"lastActiveAt": "2023-10-26T15:00:00Z",
"resources": {
"cpu": 1,
"memory": "2Gi",
"disk": "50Gi"
}
},
{
"id": "sbx_101jkl",
"name": "Data-Processing-Agent",
"status": "snapshotting",
"createdAt": "2023-10-24T12:00:00Z",
"lastActiveAt": "2023-10-26T16:00:00Z",
"resources": {
"cpu": 8,
"memory": "16Gi",
"disk": "500Gi"
},
"snapshotId": "snap_111pqr"
}
]
```
**10. DEPLOYMENT NOTES:**
- **Build Tool:** Vite is recommended for its speed.
- **Environment Variables:** Use `.env` files for API endpoints (`VITE_API_URL`), feature flags, etc.
- **Build Command:** `npm run build` or `yarn build`.
- **Static Hosting:** The built app can be deployed to any static hosting provider (Netlify, Vercel, AWS S3/CloudFront).
- **Performance:** Optimize bundle size, use code splitting if the app grows, lazy load components, and optimize image/asset loading. Ensure efficient state management updates to avoid unnecessary re-renders.
- **Backend Integration:** This prompt focuses on the frontend. The actual backend service managing the sandboxes (handling creation, forking, state persistence, resource allocation) needs to be built separately, exposing a RESTful API (or GraphQL) for the frontend to consume.