Dashboard
20-page interactive dashboard for project analytics, session intelligence, and build management
The Bootspring Dashboard is a 20-page web interface that gives you full visibility into your project's build progress, session analytics, cost tracking, and agent intelligence — all from your browser.
Getting Started
The dashboard runs locally at http://localhost:3927 by default, connecting to both local state and the Bootspring API.
Page Inventory
The dashboard ships with 20 pages organized into five categories.
Overview
| Page | Path | Description |
|---|---|---|
| Home | / | Project health summary, recent activity, quick actions |
| Getting Started | /getting-started | Onboarding checklist and setup wizard |
Build Management
| Page | Path | Description |
|---|---|---|
| Build Status | /build | Task queue, progress bar, current/next task details |
| Task Board | /build/board | Kanban-style board with drag-and-drop task management |
| Build Timeline | /build/timeline | Visual timeline of completed tasks with duration metrics |
| Planning | /planning | Master plan viewer with phase breakdown |
Intelligence
| Page | Path | Description |
|---|---|---|
| Session Analytics | /intelligence/sessions | Live session metrics, token usage, tool frequency |
| Efficiency Score | /intelligence/efficiency | 6-dimension radar chart with composite score (0-100) |
| Pattern Detection | /intelligence/patterns | Anti-pattern alerts with remediation guidance |
| Cost Center | /intelligence/cost | Spending by model, burn rate projection, budget tracking |
| Trends | /intelligence/trends | Time series charts for all tracked metrics |
Tools & Agents
| Page | Path | Description |
|---|---|---|
| Agent Catalog | /agents | Browse 44 agent types with invocation counts |
| Skill Browser | /skills | Search and filter 37 skills across all categories |
| Workflow Runner | /workflows | Start, monitor, and inspect workflow executions |
| Pipeline Viewer | /pipeline | Module dependency graph with execution trace |
Settings & Admin
| Page | Path | Description |
|---|---|---|
| Settings | /settings | API keys, provider config, preferences |
| Profile | /settings/profile | Account details and subscription tier |
| Telemetry | /settings/telemetry | Telemetry opt-in/out and data export |
| API Explorer | /api-explorer | Interactive API documentation with try-it-now |
| Logs | /logs | Filterable event log with full-text search |
UI Components
The dashboard is built with 20 reusable components.
| Component | Description |
|---|---|
MetricCard | Displays a single metric with label, value, trend indicator, and sparkline |
ProgressRing | Circular progress indicator with percentage and label |
TaskCard | Task summary with status badge, assignee, and acceptance criteria |
KanbanColumn | Draggable column for the task board with count badge |
TimelineEntry | Horizontal timeline node with expandable details |
RadarChart | 6-axis radar chart for efficiency scoring |
SparklineChart | Inline mini chart for metric trends |
CostBreakdown | Stacked bar chart showing cost by model/provider |
PatternAlert | Dismissable alert card with severity icon and remediation steps |
AgentAvatar | Agent icon with name, type badge, and invocation count |
SkillTile | Skill card with category tag, description, and usage stats |
WorkflowStepper | Multi-step progress indicator for active workflows |
PipelineGraph | Interactive DAG visualization of pipeline modules |
LogTable | Virtualized table with filtering, sorting, and full-text search |
CodePreview | Syntax-highlighted code block with copy button |
StatusBadge | Colored badge for task/workflow/agent status |
SearchBar | Global search with keyboard shortcut and recent queries |
Sidebar | Collapsible navigation with nested page groups |
ThemeToggle | Dark/light mode switch with system preference detection |
LoadingSkeleton | Animated placeholder matching each component's layout |
Dark Mode
The dashboard supports three appearance modes:
- Light — Default. High-contrast on white backgrounds.
- Dark — Reduced eye strain with dark backgrounds and muted accent colors.
- System — Follows your operating system preference automatically.
Toggle modes from the sidebar footer or with the keyboard shortcut Shift + D.
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
Ctrl/Cmd + K | Open global search |
Ctrl/Cmd + B | Toggle sidebar |
Shift + D | Toggle dark mode |
Ctrl/Cmd + 1 | Go to Home |
Ctrl/Cmd + 2 | Go to Build Status |
Ctrl/Cmd + 3 | Go to Session Analytics |
Ctrl/Cmd + 4 | Go to Agent Catalog |
Ctrl/Cmd + 5 | Go to Settings |
? | Show keyboard shortcut help |
Escape | Close modals and overlays |
J / K | Navigate list items (down/up) |
Enter | Open selected item |
Responsive Design
The dashboard adapts to all screen sizes:
- Desktop (1024px+) — Full sidebar, multi-column layouts, expanded charts
- Tablet (768px-1023px) — Collapsed sidebar, stacked columns, touch-friendly targets
- Mobile (< 768px) — Bottom navigation, single-column layout, swipe gestures for the task board
Mobile-specific features:
- Pull-to-refresh on list pages
- Swipe left/right to navigate task board columns
- Tap-and-hold to expand metric cards
- Bottom sheet for action menus
Loading Skeletons and Empty States
Every page implements both loading and empty states:
Loading skeletons mirror the exact layout of the page content, preventing layout shift when data loads. Each component has a corresponding skeleton variant that pulses with a subtle animation.
Empty states provide contextual guidance when no data exists:
| Page | Empty State Message |
|---|---|
| Build Status | "No build initialized. Run bootspring build start to begin." |
| Session Analytics | "No session data yet. Start using Bootspring to see analytics." |
| Agent Catalog | "No agents invoked. Try: bootspring agent list" |
| Skill Browser | "No skills found. Check your configuration." |
| Workflow Runner | "No workflows executed. Start one from the CLI or MCP." |
Error Boundaries
Each dashboard page is wrapped in an error boundary that:
- Catches rendering errors without crashing the entire app
- Displays a fallback UI with the error message and a retry button
- Logs the error to the local telemetry store
- Allows navigation to other pages while the broken page recovers
API Integration
The dashboard communicates with two backends:
Local state — Reads planning/BUILD_STATE.json, planning/TODO.md, and .bootspring/ directly from disk for build progress and task data. File watchers trigger real-time updates.
Bootspring API — Connects to https://bootspring.com/api/v1/ for:
| Endpoint | Dashboard Page |
|---|---|
GET /sessions | Session Analytics |
GET /sessions/:id/metrics | Efficiency Score, Cost Center |
GET /agents | Agent Catalog |
GET /skills | Skill Browser |
GET /workflows | Workflow Runner |
GET /pipeline/status | Pipeline Viewer |
POST /telemetry/export | Telemetry Settings |
Authentication uses the same JWT token from bootspring auth login. If the token expires, the dashboard shows a re-authentication prompt.