The Nerve Center: Building a Real-Time Dashboard for AI Agents

Narrative 12 min read

By day 4 of building our agent system, we had 20+ agents running, 10 cron jobs firing, 6 life domains generating data, and absolutely no way to see what was happening. The logs were scattered across a dozen files. The state was spread across YAML, JSON, and markdown. We were flying blind.

We needed a single pane of glass. What we built was Nerve Center v5.

---

The Vision: A CEO Dashboard for Your Life

The mental model was a CEO’s executive dashboard — but instead of tracking business units, it tracks life domains. Family, School, Work, Consulting, Growth, Health. Each domain has its own metrics, alerts, and status. The CEO (you) sees everything at a glance.

Design-wise, we went with cyberpunk glassmorphism: dark backgrounds, frosted glass panels, neon accents that match each domain’s color. A particle field in the background shifts color based on time of day. It’s extra, but when you’re staring at a dashboard at midnight debugging cron jobs, aesthetics matter.

The Stack

• Next.js 16 with React 19 and the App Router
• Tailwind v4 for styling
• Framer Motion for animations
• SWR for data fetching with auto-refresh
• Vercel for deployment

The 11 core components:

Component	What It Does
PulseOrb	Animated heartbeat — green when healthy, red when something’s wrong
ParticleField	Ambient background animation, color-shifts with time of day
GlassPanel	Reusable glassmorphism container for all cards
DomainCard	Domain status: metrics, alerts, last heartbeat
CommandPalette	Cmd+K search across all domains and pages
VitalsBar	Top HUD: active agents, daily spend, cron status, alert count
TimelineStrip	Horizontal event timeline for the day
ChatSlideOver	Slide-over chat panel with domain-aware AI
NeonBadge	Glowing status badges
HudStat	Single metric with trend arrow
Sidebar	Navigation organized by domain

14+ Pages, Each With Purpose

The dashboard isn’t just an overview. Each domain gets a dedicated page with domain-specific visualizations:

• School — Grade bars with threat pulses (red glow when a grade is dropping), assignment countdown timers, a priority stack, and a GPA simulator
• Family — Budget envelopes, habit trackers, chore lists, calendar view, birthday countdown
• Consulting — Pipeline kanban board, revenue tracking, contact cards, funnel visualization
• Growth — Content calendar, social analytics, newsletter performance, news feed
• Health — Body composition charts, strength goals, nutrition widget, habit streaks
• System — MCP server health grid, cron job status, budget gauge, living org chart

Plus cross-cutting pages: CRM (132 contacts), Activity Timeline (7-day log), Projects (25 tracked), Goals (cross-domain), and Nutrition (calorie and macro tracking).

The Hardest Problem: Vercel Can’t Read Your Filesystem

Here’s the fundamental tension: all our data lives on the Mac Mini filesystem — YAML configs, markdown reports, JSON state files. But Vercel runs in the cloud. It has no access to ~/clawd/domains/ or ~/agent-system/state/.

We considered several approaches:

1. API server on the Mac Mini — adds latency, requires port forwarding, security concerns
2. Database sync — complex, another moving part to maintain
3. Build-time snapshots — simple, stateless, works with Vercel’s model

We chose option 3. A prebuild script (snapshot-state.sh) reads all filesystem state and bundles it into JSON snapshots stored in the repo. API routes try live filesystem reads first (works in local dev), then fall back to snapshots (works on Vercel).

Filesystem (Mac Mini)
  └── configs, reports, state files
       │
       ▼ (snapshot-state.sh at build time)
       │
  src/data/snapshots/*.json  ← bundled into deploy
       │
       ▼
  API routes: filesystem first, snapshots as fallback
       │
       ▼ (SWR, 60-120s refresh)
       │
  React components

A cron job runs every 4 hours to rebuild snapshots and redeploy to Vercel. Data is at most 4 hours stale in production, and real-time in local dev.

Tip

This pattern — filesystem-first with snapshot fallback — is surprisingly powerful for personal dashboards. You get the simplicity of file-based state with the reach of cloud deployment. No database to maintain.

Domain Chat: Every Domain Has a Personality

Each domain page has a floating chat button. Tap it, and a slide-over panel opens with a domain-specific AI assistant. The chat system:

1. Loads the domain’s SOUL.md for personality context
2. Loads live state (grades, pipeline, habits) as system context
3. Streams responses via SSE from a /api/chat/[domain] route
4. Uses Claude Sonnet for responses
5. Tracks token cost per message
6. Persists the last 10 messages in localStorage
7. Rate-limited to 20 messages per minute per domain

The School domain chat knows your current grades and upcoming deadlines. The Consulting chat knows your pipeline and recent interactions. The Family chat knows about chores and upcoming birthdays. Context makes these chats genuinely useful rather than generic.

The 10 API Routes

Endpoint	What It Reads
/api/domains	All domain configs + latest reports
/api/domains/[id]	Per-domain state (grades, pipeline, habits)
/api/system	Health state, MCP health, crontab status
/api/calendar	Google Calendar via MCP
/api/todos	Domain task files
/api/chat/[domain]	Claude API streaming with domain context
/api/crm	132 contacts from CRM directory
/api/activity	Task logs from the last 7 days
/api/projects	Project registry YAML
/api/agents/stream	Real-time agent event stream (SSE)

The stream endpoint is bidirectional: agents POST events to it (via the Nerve Stream MCP server), and the dashboard GETs them via Server-Sent Events. This creates a real-time activity feed on the CEO overview page.

Lessons Learned

1. Snapshot + fallback beats live API every time for personal dashboards. The added complexity of a live API server on your home machine isn’t worth it. Snapshots are simple, reliable, and Vercel-native.

2. Domain-specific colors create instant context. When everything is blue, you have to read labels. When School is blue and Family is amber and Consulting is purple, you know where you are instantly.

3. Animations are worth it. The PulseOrb, particle field, and Framer Motion transitions aren’t just decoration. They communicate system health intuitively. A slow, green pulse means everything’s fine. A fast, red pulse means something needs attention.

4. Chat needs context to be useful. A generic AI chat is useless in a dashboard. But a chat that knows your current grades, your pipeline, your family’s schedule — that’s a tool you actually use.

5. Build for mobile first. You’ll check this on your phone more than your desktop. Every component needs to work at 375px wide.

---

For the full technical architecture, see the Nerve Center v5 Architecture reference.

Enjoyed this? Get weekly agent architecture insights.

Subscribe and get a free Agent Architecture Cheatsheet.

Subscribe