Dashboard

Dashboard

Sandcastle ships with a full-featured React dashboard - 20 pages, 29,600+ lines of TypeScript, built with React 18, Vite, and Tailwind CSS v4.

Access it at http://localhost:8080 after running sandcastle serve.

---

Pages

Overview

The home page. Real-time metrics at a glance:

• Active runs, queued runs, completed today
• Success rate and average duration
• Cost tracking (today, this week, this month)
• Recent activity feed with live SSE updates
• Quick actions: run workflow, create schedule, view templates

Workflows

List of all workflow YAML files in the workflows/ directory. For each workflow:

• Name, description, step count
• Version info (draft, production)
• DAG visualization (interactive graph)
• Run, edit in builder, view versions

Workflow Builder

Visual DAG editor for creating workflows:

• Drag-and-drop step creation
• Visual dependency wiring between steps
• Model selection per step (dropdown with all 7 models)
• Prompt editing with syntax highlighting
• Template browser (browse and import from 118 templates)
• Live YAML preview and export
• Direct "Save & Run" workflow

Templates

Gallery of 118 built-in workflow templates:

• Packs view - Organized by category (Marketing, Sales, Engineering, etc.) with featured pack highlight
• All templates - Flat list with tag filtering
• By Integration - Grouped by which tools they use
• Community - Browse 118 community templates from the hub
• One-click preview, install, or run
• Input form auto-generated from template's input_schema

Runs

Paginated list of all workflow executions:

• Status badges (queued, running, completed, failed, cancelled)
• Duration, cost, model used
• Quick actions: view details, replay, fork, compare, cancel
• Bulk operations

Run Detail

Deep dive into a single run:

• Step-by-step timeline with real-time SSE streaming
• Per-step: status, duration, token count, cost, model used
• Expandable output for each step
• Input data viewer
• DAG visualization with step status overlay
• Export to PDF
• Replay from any step, fork with modifications

Run Comparison

Side-by-side comparison of two runs:

• Step-by-step output diff
• Metric comparison (duration, cost, tokens)
• Useful for A/B testing different models or prompts

Schedules

Cron-based workflow scheduling:

• Visual cron builder (every hour, daily, weekly, custom)
• Pause/resume individual schedules
• Next run time display
• Execution history per schedule

Approvals

Queue for human-in-the-loop approval steps:

• Pending approvals with context and step details
• Approve, reject, or skip with optional notes
• Timeout indicator
• History of past decisions

Integrations

Browse and manage all 56 connectors:

• Organized by 9 categories with icons
• Connection status (configured, not configured)
• Credential management per tool
• Which workflows use each integration
• Task-oriented UX: "What do you want to automate?"

API Keys

API key management:

• Create keys with optional expiry
• Rotate keys with configurable grace period
• IP allowlist per key (CIDR notation, IPv4 + IPv6)
• Usage tracking
• Admin guard for key creation

Settings

Runtime configuration:

• License status (tier, licensee, expiry)
• Sandbox backend selection
• Model preferences
• Notification settings
• Theme selection (dark/light)

System Health

Backend diagnostics:

• Database connectivity and size
• Queue status (Redis or in-process)
• Sandbox backend availability
• Memory system status
• API response times
• Disk usage

Cost Optimizer

Spending analytics and optimization:

• Cost per workflow, per model, per day
• Model downgrade suggestions (e.g., "This step could use Haiku instead of Sonnet")
• Budget alerts and thresholds
• Historical cost trends

AutoPilot

A/B testing for workflows:

• Create experiments comparing workflow variants
• Traffic splitting (percentage-based)
• Automatic rollout advancement based on metrics
• Deploy, pause, reset experiments
• Statistical significance tracking

Evaluations

Quality testing framework:

• Define eval suites with test cases
• Run evals against specific workflows
• Score tracking over time
• Compare quality across model changes
• Regression detection

Dead Letter Queue

Failed runs management:

• View failed runs with error details
• One-click retry
• Resolve (acknowledge and archive)
• Automatic DLQ routing for transient failures

Policy Violations

Guardrail enforcement log:

• Which steps triggered policy rules
• Severity levels (warning, error, critical)
• Rule details and remediation suggestions
• Violation trends over time

Onboarding

First-time user experience:

• 6-step guided wizard
• API key setup
• First workflow creation
• Template exploration

---

Technical stack

Technology	Version	Purpose
React	18	UI framework
TypeScript	5.x	Type safety
Vite	6.x	Build tool
Tailwind CSS	v4	Styling
@xyflow/react	-	DAG visualization
Recharts	-	Charts and metrics
Sonner	-	Toast notifications
Lucide	-	Icon library

Mock mode

When the backend is unavailable, the dashboard automatically falls back to mock mode with demo data. This powers the GitHub Pages demo - a fully interactive dashboard preview without any backend.