Mission Control Dashboard

A JARVIS-inspired real-time dashboard for monitoring and interacting with your agent teams. Built with Next.js 16, React 19, Zustand, and Tailwind CSS v4.

Overview

The Mission Control dashboard provides seven core views for monitoring agent activity, exploring hierarchy, chatting with your orchestrator, tracking tasks, visualizing knowledge, inspecting agent memory, and managing scheduled jobs. It connects to the Maximus server via REST API (initial state sync) and WebSocket (real-time event streaming).

Framework
Next.js 16 + React 19
State
Zustand store
Styling
Tailwind CSS v4

Layout

The shell consists of three regions:

Header Bar fixed, top

Displays the Maximus branding, active agent count, running task count, and a WebSocket connection status indicator dot (green = connected, amber pulsing = reconnecting, red = disconnected). When reconnecting, a banner appears below the header.

Sidebar fixed, left

A narrow 48px icon rail with seven navigation buttons: Operations, Org Chart, Chat, Tasks, Knowledge Graph, Agent Memory, and Jobs. The active view is highlighted with an accent color and a left-edge accent bar. Icons are sourced from lucide-react.

Content Area

The active view fills the remaining space to the right of the sidebar and below the header. Client-side view routing is managed through Zustand state rather than URL routes.

Views 7 Views

Operations

Real-time activity feed of agent events displayed newest-first in a scrollable list. Each event is rendered as an EventCard showing a colored icon, agent name, event summary, and relative timestamp. Events arrive via WebSocket and are capped at 500 in the Zustand store.

Features: Filter by event type (toggle chips), filter by agent name (text input), expand any event card to see full JSON payload.

Event Types

Event Type Icon Color
agent:message MessageSquare accent (cyan)
agent:tool_call Wrench warning (amber)
agent:tool_result CheckCircle success (green)
agent:delegation Send accent (cyan)
agent:completion CheckCheck success (green)
agent:error AlertTriangle destructive (red)
session:start Play success (green)
session:end Square secondary (gray)
task:created PlusCircle accent (cyan)
task:assigned UserCheck accent (cyan)
task:completed CircleCheckBig success (green)
task:failed XCircle destructive (red)

Org Chart

Canvas-based visualization of your agent hierarchy as a top-down tree. The orchestrator sits at the top, managers below, and workers at the bottom.

Agent Nodes
Each node shows agent name, status badge (idle / active / error), and current task prompt if in-progress. Active agents have a glowing accent-colored border.
Status Derivation
Derived by scanning the last 100 events newest-first. The first status-determining event per agent wins: session:start = active, session:end = idle, agent:error = error.
Connection Lines
Vertical and horizontal lines connect parent to children. Recent delegation events cause the connection line to glow with an accent shadow effect.
Detail Panel
Click any node to open a slide-out panel showing agent description, skills list, recent activity (last 5 events), and active tasks.

Chat

Direct messaging interface to the orchestrator agent with SSE streaming responses.

Messaging
Type in the textarea and press Enter to send. Messages route to the orchestrator (agent with no reportsTo). Shift+Enter inserts a newline.
Streaming
Responses stream via SSE with data: lines. The message bubble glows during streaming with a pulsing cursor bar.
Markdown
Assistant messages render with react-markdown supporting code blocks, inline code, lists, and links.
Auto-scroll
The message list auto-scrolls to the bottom on new messages. Send button is disabled while input is empty or response is streaming.

Tasks

Sortable, filterable table displaying all tasks. Columns: Task ID, Agent, Status, Trace ID, Created, Updated. Click any column header to toggle ascending/descending sort.

Filters: Filter by agent name (text input), trace ID (text input), or status (dropdown: All, created, assigned, in-progress, completed, failed).

Expandable rows: Click any row to see full prompt text, parent task ID, result or error, and token usage count.

Status Badges

Status Color Badge
created gray (text-secondary) created
assigned cyan (accent) assigned
in-progress amber (warning) in-progress
completed green (success) completed
failed red (destructive) failed

Knowledge Graph

Force-directed graph visualization of entities and relationships extracted from agent sessions. Supports scope filtering (agent, team, global) to narrow the visible graph. Nodes represent entities and edges represent predicates between them.

Agent Memory

Split-panel view for inspecting agent memory. The left panel lists agents with memory enabled; the right panel displays episodes, knowledge graph entries, and performance trends for the selected agent. Episodes are shown newest-first with timestamps and distilled summaries.

Jobs

Full CRUD interface for managing scheduled jobs. Create, edit, and delete jobs with cron expressions. View run history with status indicators (success, failure, running) and timestamps. Jobs are persisted server-side and execute on the configured schedule.

Connection Handling

The dashboard manages the WebSocket connection automatically via the useWebSocket hook. No user action is required — the entire reconnection flow is fully automatic.

Auto-connect
On page load, the dashboard opens a WebSocket connection to the server automatically.
Status Indicator
green connected · amber reconnecting · red disconnected
Exponential Backoff
On disconnect, reconnection attempts start at 1s and double each attempt (1s, 2s, 4s, 8s, 16s...) capped at 30 seconds.
State Resync
On reconnect, the syncState function fetches the full agent list and task list from /api/org-chart and /api/tasks.

While reconnecting, a banner reading "Reconnecting to server..." appears below the header with a warning color background. The event store (capped at 500 events) continues accumulating events once the connection is restored.

Running the Dashboard

The dashboard is served from the Maximus server on port 4100. Start the server and open http://localhost:4100 in your browser.

# Start the Maximus server (serves dashboard on port 4100)
maximus server start

# Or run in foreground
maximus server start --foreground

# Open in browser
open http://localhost:4100

The dashboard defaults to the Operations view on load.

Configuration

The dashboard reads two environment variables at build time:

Variable Default Description
NEXT_PUBLIC_API_URL http://localhost:4100 Base URL for the Maximus REST API server
NEXT_PUBLIC_WS_URL ws://localhost:4100/ws WebSocket endpoint for real-time event streaming

Set these in a .env.local file in packages/dashboard/ or export them before building.