The Daytona Dashboard serves as the primary management interface for developers to interact with sandboxes, monitor resources, and configure environment settings. It is built as a React-based web application that integrates telemetry data, lifecycle management, and administrative configurations into a unified workspace.

The UI architecture follows a modular pattern using shared components, specialized pages for workflows like onboarding and webhooks, and advanced telemetry views for real-time observability. It leverages a sidebar-driven layout with supporting utilities such as a command palette for rapid navigation and action execution.
Sources: apps/dashboard/src/pages/Dashboard.tsx, apps/dashboard/src/pages/Onboarding.tsx

Core Layout and Navigation

The dashboard layout is managed by the Dashboard component, which acts as the root wrapper for the authenticated application experience. It provides the structural foundation including the sidebar, announcement banners, and toast notifications.

Navigation and Commands

The system employs a SidebarProvider and SidebarInset to manage the responsive layout. For power users, it integrates a CommandPalette that registers global and context-specific commands such as theme toggling or documentation searching.
Sources: apps/dashboard/src/pages/Dashboard.tsx:88-124

Generating architecture diagram...

The diagram shows the hierarchical layout of the dashboard shell and its primary UI utilities.
Sources: apps/dashboard/src/pages/Dashboard.tsx:30-80

Sandbox Management

Sandboxes are the central resource in Daytona. The UI provides comprehensive tools for creating, configuring, and inspecting these environments.

Creation Workflow

The CreateSandboxSheet provides a form-driven interface for provisioning new sandboxes. It supports two primary sources:

Snapshots: Provisioning from a saved state.
Images: Provisioning from a container image (e.g., ubuntu:22.04).

The creation form includes validation for resource allocation (CPU, Memory, Disk) based on organization-level limits and lifecycle settings like auto-stop and ephemeral status.
Sources: apps/dashboard/src/components/Sandbox/CreateSandboxSheet.tsx:64-165

Information Panel

The SandboxInfoPanel provides a detailed breakdown of an existing sandbox's state.

Section	Description
General	Displays the Target region and Snapshot source.
Resources	Visualizes CPU, Memory, and Disk allocation using chips.
Lifecycle	Shows intervals for auto-stop, auto-archive, and auto-delete.
Labels	Lists key-value pairs attached to the sandbox metadata.
Timestamps	Provides relative time strings for creation and last update.

Sources: apps/dashboard/src/components/sandboxes/SandboxInfoPanel.tsx:55-136

Telemetry and Observability

Daytona provides integrated observability through dedicated tabs within the sandbox view, focusing on metrics and logs.

Metrics Visualization

The MetricsTab and SandboxMetricsTab render time-series data using recharts. Metrics are grouped into CPU, Memory, and Filesystem categories.

CPU: Tracks utilization percentage.
Memory/Disk: Supports toggling between percentage (%) and absolute units (GiB).
Data Transformation: Raw byte values from the API are converted to GiB by dividing by $1024^3$.
Sources: apps/dashboard/src/components/telemetry/MetricsTab.tsx:33-140, apps/dashboard/src/components/sandboxes/SandboxMetricsTab.tsx:32-135

Log Management

The LogsTab allows developers to inspect sandbox execution logs. It features severity-based filtering (DEBUG, INFO, WARN, ERROR) and full-text search. Individual log entries can be expanded to reveal metadata such as traceId, spanId, and custom logAttributes.
Sources: apps/dashboard/src/components/telemetry/LogsTab.tsx:21-70

Generating architecture diagram...

The sequence shows the data flow from user interaction in the Logs Tab to the backend API.
Sources: apps/dashboard/src/components/telemetry/LogsTab.tsx:40-140

Onboarding and Developer Experience

The dashboard includes a specialized Onboarding page designed to guide new users through SDK installation and their first sandbox creation.

Onboarding Steps

SDK Installation: Shows commands for npm or pip.
API Key Creation: Allows users to generate keys with specific permissions (e.g., WRITE_SANDBOXES).
Code Example: Provides a copyable snippet in TypeScript or Python that uses the newly created key to initialize a sandbox.
Execution: Instructions to run the provided example.
Sources: apps/dashboard/src/pages/Onboarding.tsx:141-210

Billing and Usage Tracking

The usage interface provides transparency into resource consumption through aggregated charts.

Usage Components

UsageSummary: Displays total cost (formatted as currency) and total sandbox count using NumberFlow for animated transitions.
ResourceUsageBreakdown: Uses a segmented progress bar to show the relative distribution of CPU, RAM, and Disk consumption.
Sources: apps/dashboard/src/components/spending/AggregatedUsageChart.tsx:45-120

Metric	Formatted Units
Time (CPU)	Seconds, Minutes, or Hours based on magnitude.
Volume (RAM/Disk)	GB-seconds or GB-hours.

Sources: apps/dashboard/src/components/spending/AggregatedUsageChart.tsx:22-30

Webhook Integration

The Webhooks page manages external integrations via svix. It allows users to define endpoints for receiving Daytona event notifications.

Functional Capabilities

Endpoint Management: Users can create, disable, and delete webhook endpoints.
Message Inspection: A "Messages" tab provides a history of sent webhook payloads to verify integration success.
Documentation Access: Direct links to API documentation are provided for webhook configuration.
Sources: apps/dashboard/src/pages/Webhooks.tsx:28-115

Summary

The Dashboard & UI Components of Daytona provide a robust, data-rich environment for managing isolated development environments. By combining infrastructure management (Create Sandbox) with real-time observability (Metrics/Logs) and financial transparency (Usage Charts), the UI enables a complete "Sandbox-as-a-Service" experience. The modular architecture ensures that complex features like onboarding and webhooks are integrated seamlessly into the core developer workflow.
Sources: apps/dashboard/src/pages/Dashboard.tsx, apps/dashboard/src/components/Sandbox/CreateSandboxSheet.tsx

Resources

AI code review
Bug Bench
AI coding statistics
Coding standards
Agents
Wikis

View on GitHub

Back to directory

Repository

daytonaio/daytona

Overview

Welcome to Daytona Getting Started & Quick Start Contributing Guidelines Security & Vulnerability Policy

System Architecture

High-Level Architecture Proxy & SSH Gateway Runner Service & Docker Integration Telemetry & Observability

Core Features

Sandbox Lifecycle Management Snapshot & Volume Management Daemon Toolbox & Process Execution Computer Use & UI Interaction Recording Git Integrations

Backend Systems

API Services Overview Authentication, Authorization, & RBAC Audit Logging System Webhooks & Event Notifications Organizations, Roles & Billing API

Frontend Components

Dashboard & UI Components AI Playground Interface

Data Management & Flow

Database Schema & Migrations Object Storage Integration

Developer Tools & Extensibility

Daytona Command Line Interface Model Context Protocol (MCP) Server Python & TypeScript SDKs Go & Ruby SDKs

Model Integration

AI Framework Guides & Integrations

Deployment & Infrastructure

Docker Deployment & Infrastructure Publishing & Packaging SDKs

Dashboard & UI Components

Relevant source files

The following files were used as context for generating this wiki page:

apps/dashboard/src/pages/Dashboard.tsx
apps/dashboard/src/pages/Onboarding.tsx
apps/dashboard/src/components/Sandbox/CreateSandboxSheet.tsx
apps/dashboard/src/components/telemetry/MetricsTab.tsx
apps/dashboard/src/components/telemetry/LogsTab.tsx
apps/dashboard/src/components/sandboxes/SandboxInfoPanel.tsx
apps/dashboard/src/pages/Webhooks.tsx
apps/dashboard/src/components/spending/AggregatedUsageChart.tsx

Core Layout and Navigation

Navigation and Commands

Generating architecture diagram...

The diagram shows the hierarchical layout of the dashboard shell and its primary UI utilities.
Sources: apps/dashboard/src/pages/Dashboard.tsx:30-80

Sandbox Management

Sandboxes are the central resource in Daytona. The UI provides comprehensive tools for creating, configuring, and inspecting these environments.

Creation Workflow

The CreateSandboxSheet provides a form-driven interface for provisioning new sandboxes. It supports two primary sources:

Snapshots: Provisioning from a saved state.
Images: Provisioning from a container image (e.g., ubuntu:22.04).

Information Panel

The SandboxInfoPanel provides a detailed breakdown of an existing sandbox's state.

Section	Description
General	Displays the Target region and Snapshot source.
Resources	Visualizes CPU, Memory, and Disk allocation using chips.
Lifecycle	Shows intervals for auto-stop, auto-archive, and auto-delete.
Labels	Lists key-value pairs attached to the sandbox metadata.
Timestamps	Provides relative time strings for creation and last update.

Sources: apps/dashboard/src/components/sandboxes/SandboxInfoPanel.tsx:55-136

Telemetry and Observability

Daytona provides integrated observability through dedicated tabs within the sandbox view, focusing on metrics and logs.

Metrics Visualization

The MetricsTab and SandboxMetricsTab render time-series data using recharts. Metrics are grouped into CPU, Memory, and Filesystem categories.

CPU: Tracks utilization percentage.
Memory/Disk: Supports toggling between percentage (%) and absolute units (GiB).
Data Transformation: Raw byte values from the API are converted to GiB by dividing by $1024^3$.
Sources: apps/dashboard/src/components/telemetry/MetricsTab.tsx:33-140, apps/dashboard/src/components/sandboxes/SandboxMetricsTab.tsx:32-135

Log Management

Generating architecture diagram...

The sequence shows the data flow from user interaction in the Logs Tab to the backend API.
Sources: apps/dashboard/src/components/telemetry/LogsTab.tsx:40-140

Onboarding and Developer Experience

The dashboard includes a specialized Onboarding page designed to guide new users through SDK installation and their first sandbox creation.

Onboarding Steps

SDK Installation: Shows commands for npm or pip.
API Key Creation: Allows users to generate keys with specific permissions (e.g., WRITE_SANDBOXES).
Code Example: Provides a copyable snippet in TypeScript or Python that uses the newly created key to initialize a sandbox.
Execution: Instructions to run the provided example.
Sources: apps/dashboard/src/pages/Onboarding.tsx:141-210

Billing and Usage Tracking

The usage interface provides transparency into resource consumption through aggregated charts.

Usage Components

UsageSummary: Displays total cost (formatted as currency) and total sandbox count using NumberFlow for animated transitions.
ResourceUsageBreakdown: Uses a segmented progress bar to show the relative distribution of CPU, RAM, and Disk consumption.
Sources: apps/dashboard/src/components/spending/AggregatedUsageChart.tsx:45-120

Metric	Formatted Units
Time (CPU)	Seconds, Minutes, or Hours based on magnitude.
Volume (RAM/Disk)	GB-seconds or GB-hours.

Sources: apps/dashboard/src/components/spending/AggregatedUsageChart.tsx:22-30

Webhook Integration

The Webhooks page manages external integrations via svix. It allows users to define endpoints for receiving Daytona event notifications.

Functional Capabilities

Endpoint Management: Users can create, disable, and delete webhook endpoints.
Message Inspection: A "Messages" tab provides a history of sent webhook payloads to verify integration success.
Documentation Access: Direct links to API documentation are provided for webhook configuration.
Sources: apps/dashboard/src/pages/Webhooks.tsx:28-115

Summary

Resources

AI code review
Bug Bench
AI coding statistics
Coding standards
Agents
Wikis

View on GitHub