Chapter 6

The Dashboard

9 tabs. Real-time execution monitoring, cost tracking, session replay, and one-click actions.

Starting the Dashboard

The dashboard is part of the MCP server. Start it, then open your browser:

Terminal

# Full MCP server (stdio + HTTP + WebSocket)
node pforge-mcp/server.mjs

# Dashboard + REST API only (no MCP stdio)
node pforge-mcp/server.mjs --dashboard-only

Open localhost:3100/dashboard. The dashboard connects via WebSocket on port 3101 for real-time updates.

Auto-start: If you have .vscode/mcp.json configured (created during setup), the MCP server starts automatically when Copilot uses a forge tool. The dashboard is always available at port 3100 while the server runs.

Progress Tab

The default view during plan execution. This is where you watch your plan come to life — real-time slice status via WebSocket updates:

Slice 1

Auth Models + Migration

✅ passed · 42s · $0.08

Slice 2

Repository Layer

✅ passed · 39s · $0.07

Slice 3

Service Layer

⏳ executing...

Slice 4

API Controller

⏸ queued

Each card shows: slice title, status (queued → executing → passed/failed), duration, model used, token count, and cost. Cards update in real-time as events arrive over WebSocket.

Runs Tab

History of all plan executions. Each row shows:

Column	Content
Plan	Plan file path (clickable → shows slice detail)
Status	✅ Complete, ❌ Failed, 🟡 Partial
Slices	Passed / Total count
Duration	Total wall-clock time
Cost	Total USD across all slices
Model	Primary model used
Date	Execution timestamp

Click any row to expand slice-by-slice detail: per-slice tokens, duration, model, and pass/fail status.

Dashboard Runs tab showing run history with plan names, slice counts, durations, and costs

Cost Tab

Two visualizations:

Doughnut chart — spend breakdown by model (which models cost the most)
Bar chart — monthly trend (cost over time, spot anomalies)

Data comes from .forge/cost-history.json which is updated automatically after each run. The cost tab supports a 23-model pricing table — including Claude, GPT, Grok, Gemini, and custom API providers.

Dashboard Cost tab showing total spend, doughnut chart by model, monthly spend bar chart, and model performance table with pass rates

Cost anomaly detection: If a run costs >2× the historical average, the Runs tab shows a warning badge. Use pforge run-plan --estimate to predict costs before executing.

Actions Tab

One-click buttons for common operations — no terminal needed:

🔨 Smith

Environment diagnostics

🔍 Sweep

Find TODO/FIXME markers

📊 Analyze

Consistency scoring

📋 Status

Phase status from roadmap

✅ Validate

Setup file validation

🧩 Extensions

Browse extension catalog

Each button calls the corresponding REST endpoint (/api/smith, /api/sweep, etc.) and displays results inline.

Dashboard Actions tab showing one-click buttons for Smith, Sweep, Analyze, Status, Validate, and Extensions

Replay Tab

Browse agent session logs from past executions. Each run's .forge/runs/<timestamp>/ directory contains per-slice logs. The Replay tab renders them with:

Slice selector — pick which slice's log to view
Error highlighting — errors and warnings highlighted in red/amber
File filter — filter log entries by file path patterns
Search — free-text search within the session log

Use this to diagnose why a slice failed — the full agent conversation, including tool calls, is captured.

Dashboard Replay tab showing session log viewer with slice selector, error highlighting, and search

Extensions Tab

Visual catalog browser with search. Shows all community extensions from extensions/catalog.json:

Extension name, version, author, category
What it provides (instruction files, agents, prompts)
Tags and Spec Kit compatibility
One-click install button

Equivalent to pforge ext search + pforge ext add but with a visual interface.

Dashboard Extensions tab showing visual catalog browser with search, install buttons, and extension details

Config Tab

Visual editor for .forge.json. Edit without touching the file directly:

Model routing — set default, execution, and review models from a dropdown
Image generation model — Grok Aurora or DALL-E for plan art
Agent toggles — enable/disable specific reviewer agents
Quorum threshold — complexity level that triggers multi-model consensus
Escalation chain — model failover order

Changes save directly to .forge.json via the REST API.

Dashboard Config tab showing visual editor for .forge.json with model routing, agent toggles, and quorum settings

Traces Tab

OTLP trace waterfall view. Every plan execution emits OpenTelemetry spans:

Span	What It Captures
run (root)	Plan file, total duration, slice count, model
└ slice-N	Slice title, status, tokens in/out, cost, gate result
└ gate	Gate command, exit code, output
└ escalation	If a model failed and escalated to the next in chain

Click any span to expand: duration, resource attributes (project, version, preset), severity. Traces are stored in .forge/runs/<timestamp>/traces.json and can be exported to any OTLP-compatible backend (Jaeger, Grafana Tempo, etc.).

Dashboard Traces tab showing OTLP trace waterfall view

Skills Tab

Monitor skill executions triggered via forge_run_skill or /slash-command. Shows:

Recent skill runs — skill name, start time, status, duration
Step-level detail — each skill step with pass/fail, output, timing
Event log — WebSocket events (skill-started, skill-step-completed, skill-completed)

Dashboard Skills tab showing recent skill runs with step-level detail and event log

Port Reference

Port	Protocol	Purpose
`3100`	HTTP	Dashboard UI + REST API
`3101`	WebSocket	Real-time events (slice progress, run completion)

Port conflict? If another service uses 3100/3101, set PORT and WS_PORT environment variables, or use --port flag: node pforge-mcp/server.mjs --port 4100.

📄 Full reference: capabilities.md, EVENTS.md (WebSocket event types)