Living Dashboard

The most commercially exciting feature. A React app in the company filesystem that agents edit in real time. Custom widgets, theme overrides, layout config, custom pages. No deployment.

Your agents build your internal tools. In real time. No deploy.

The dashboard is not a static build. It is not a pin viewer. It is a React app living in the company filesystem where agents create custom widgets, custom pages, theme overrides, and layout configurations. Changes appear instantly via HMR. The company builds its own operating surface through agents.

the difference

Traditional SaaS:   Build -> Deploy -> Users see changes (hours/days)
Retool:             Drag-and-drop -> Deploy -> Users see changes (minutes)
Living Dashboard:   Agent edits file -> Vite HMR -> User sees change (seconds)

Why This Matters

Internal tool building is a multi-billion dollar market (Retool, Appsmith, etc.). Autopilot does it through agents, not drag-and-drop. You say "I need a sprint burndown chart on the dashboard." An agent writes widget.tsx, registers it in layout.yaml, and it appears. You say "Build me a weekly report page." Agent creates pages/reports/page.tsx. Instantly live.

Nobody else has this. CrewAI has no UI. Devin has no dashboard. n8n has a fixed UI.

Immutable Core vs Customizable Layer

architecture

+---------------------------------------------------+
|  IMMUTABLE CORE (npm package)                      |
|  @questpie/autopilot-dashboard                     |
|  Base components, hooks, API client, router        |
|  Agent CANNOT edit -- always resettable            |
+---------------------------------------------------+
                       | imports
+---------------------------------------------------+
|  COMPANY LAYER (in company filesystem)             |
|  company/dashboard/                                |
|  +-- overrides/     Custom CSS, theme, branding    |
|  +-- widgets/       Custom dashboard widgets       |
|  +-- pages/         Custom pages                   |
|  +-- layouts/       Custom layout config           |
+---------------------------------------------------+

The core is an immutable npm package -- agents cannot break it. Overrides are always optional. Every widget has its own error boundary. If something goes wrong, autopilot dashboard reset restores defaults.

Widgets

Widgets are custom React components rendered inside the dashboard. Each widget is a directory with a widget.tsx component and widget.yaml metadata file.

company/dashboard/widgets/sprint-progress/widget.yaml

name: sprint-progress
title: "Sprint Progress"
description: "Burndown chart for current sprint"
size: medium
refresh: 30000
position: overview
created_by: designer

company/dashboard/widgets/sprint-progress/widget.tsx

export default function SprintProgress() {
  const { data } = useQuery({
    queryKey: ['tasks'],
    queryFn: () => fetch('/api/tasks').then(r => r.json()),
    refetchInterval: 30000,
  })

  const done = data?.filter(t => t.status === 'done').length ?? 0
  const total = data?.length ?? 0

  return (
    <div className="p-4 border border-border">
      <h3 className="font-ui text-xs uppercase tracking-wider text-muted-foreground mb-2">
        Sprint Progress
      </h3>
      <div className="text-3xl font-bold text-foreground">
        {done}/{total}
      </div>
    </div>
  )
}

Every widget runs inside an error boundary and a Suspense wrapper. If a widget crashes, the rest of the dashboard keeps working.

Theme Overrides

Override design tokens by editing company/dashboard/overrides/theme.css:

company/dashboard/overrides/theme.css

:root {
  /* Change accent from purple to blue */
  --primary: oklch(0.6 0.2 250);
  --ring: oklch(0.6 0.2 250);

  /* Custom company font */
  --font-sans: 'CustomFont', 'Inter', sans-serif;

  /* Rounded corners instead of brutalist */
  --radius: 0.5rem;
}

Layout Configuration

Control which widgets appear where by editing company/dashboard/overrides/layout.yaml:

company/dashboard/overrides/layout.yaml

dashboard:
  sections:
    - id: overview
      title: "Overview"
      widgets: [sprint-progress, team-velocity, budget-tracker]
      layout: grid
      columns: 3

    - id: tasks
      title: "Active Work"
      component: task-list

Custom Pages

Add entirely new pages to the dashboard:

company/dashboard/pages/registry.yaml

pages:
  - id: reports
    title: "Weekly Reports"
    path: /reports
    icon: chart-bar
    file: reports/page.tsx
    nav: true

Dev vs Prod Mode

Feature	Dev Mode	Prod Mode
Server	Vite dev server with HMR	Static build via Bun.serve
Changes	Instant via HMR	Auto-build on file change
RAM	~200MB (Vite)	~20MB (static files)
Use case	Agent editing dashboard	Default -- always-on

CLI Commands

terminal

autopilot dashboard              # Open in browser
autopilot dashboard dev          # Start dev mode (HMR)
autopilot dashboard build        # Build for prod
autopilot dashboard reset        # Reset to default
autopilot dashboard widgets      # List custom widgets

Safety & Reset

The core is immutable. Agents edit the company layer only. If anything breaks:

terminal

$ autopilot dashboard reset
Deleted: overrides/, widgets/, pages/
Dashboard restored to default state.

Real-World Example

You say: "I need a client management page on the dashboard."

Agent creates company/dashboard/pages/clients/page.tsx
Agent registers it in company/dashboard/pages/registry.yaml
Page appears in dashboard navigation immediately
Agent adds a widget for "recent clients" to the overview section
Widget starts fetching data from your API via the knowledge-based integration pattern

Total time: seconds. Total deployments: zero.

Living Dashboard

On this page