Visualisation Dashboard

Cross-agent cost, code-impact, performance, and workflow intelligence for Claude Code, Codex CLI, OpenClaw, and Hermes.

Visualisation Dashboard turns the local JSONL transcripts written by agent CLIs into one private, read-only view of what your subscriptions actually delivered. It values token usage at public API rates, reconstructs code edits, finds churn and correction loops, and compares agents on normalized units of work—not raw token volume.

No proxy, SDK wrapper, database, or vendor account connection is required. The server binds to localhost and never writes to an agent state directory.

Why this exists

Vendor usage pages answer “how many tokens did I use?” They do not answer:

• Was my monthly plan worth it at API-equivalent prices?
• What code did those tokens buy?
• Which files keep getting reworked across sessions?
• Is Claude Code or Codex more efficient on my actual workload?
• How often do I correct an agent, abandon a run, or wait for its first edit?

Visualisation Dashboard answers those questions across vendors from the data already stored on your machine.

Highlights

Cost intelligence and plan ROI

• Prices each recognized model with separate input, output, cache-read, and cache-write rates.
• Shows API-equivalent cost per session, per edit, and per 100 changed lines.
• Compares equivalent usage with editable per-agent plan costs: for example, $412 of API-equivalent usage / two $20 plans = 10.3× ROI.
• Reports pricing coverage and leaves unknown models visibly unpriced instead of silently guessing.

Code impact, not token volume

• Reconstructs daily additions and removals from edit, write, notebook, string replacement, and patch payloads.
• Ranks the files and directories agents touch most.
• Builds an AI-written-code risk map from repeat sessions, edit count, churn, and changed lines.
• Detects files edited repeatedly within a session or across many sessions.

Agent head-to-head

Compares Claude Code, Codex, and other detected sources using:

• edits per session;
• output tokens per edit;
• tool error rate;
• median tool latency;
• cache efficiency;
• API-equivalent cost per edit and per 100 changed lines.

Workflow intelligence

• Same-file rework loops.
• Sessions that end without a final assistant response.
• Corrective follow-ups such as “wrong,” “undo,” or “you missed…”.
• Median time from the first user request to the first parseable edit.
• Coaching notes based on the strongest signals in the selected window.

Session trajectories and Wrapped

• Complete user, assistant, reasoning, tool, result, duration, and error timeline for every session.
• Reconstructed sub-agent spawn trees and parent/child breadcrumbs.
• Shareable Wrapped slides with tokens, code output, API-equivalent value, and plan ROI.

Supported sources

Source	Auto-discovered location	Notes
OpenClaw	~/.openclaw	Also reads legacy ~/.clawdbot and ~/.moltbot; links sessions_spawn children
Claude Code	~/.claude/projects	Supports $CLAUDE_CONFIG_DIR; Task sidechains become child sessions
Codex CLI	~/.codex/sessions	Supports $CODEX_HOME; understands current nested functions.exec patches and legacy rollouts
Hermes	~/.hermes	Supports $HERMES_STATE_DIR; best-effort tolerant parser

Quick start

Requirements: Node.js 18 or newer. There are no runtime dependencies and no build step.

npm start

Open http://127.0.0.1:4477.

The default scan covers all supported sources from the last 30 days. Parsed transcripts are cached by file modification time, so refreshes only re-read changed files.

Try it with sample data

No agent CLI installed? Run the bundled, synthetic dataset:

npm run sample

The sample includes sub-agents, edits, cross-session churn, a correction, an abandoned trajectory, and a failed tool call. It does not read your local agent history.

Command-line options

node server.mjs [options]

  --days <n>                activity window; default: 30
  --all                     include full discovered history
  --sources <list>          comma-separated sources, e.g. codex,claude-code
  --dir <path>              read one OpenClaw-layout state directory only
  --pricing <path>          use a custom per-model pricing JSON file
  --port <number>           localhost port; default: 4477

Environment equivalents:

Variable	Purpose
PORT	Server port
OPENCLAW_STATE_DIR	Explicit OpenClaw-layout state directory
VISUALISATION_DASHBOARD_PRICING	Custom pricing table path
OPENCLAW_VIS_PRICING	Legacy alias for the custom pricing path
CLAUDE_CONFIG_DIR	Claude Code configuration root
CODEX_HOME	Codex configuration root
HERMES_STATE_DIR	Hermes state root

Pricing

pricing.json is an editable table in USD per million tokens. Each row contains a regular-expression model pattern and input, output, cacheRead, and optional cacheWrite rates.

The bundled rates were checked on 2026-07-19 against the public OpenAI model catalog and Claude API pricing.

API-equivalent cost is an estimate, not an invoice. It does not include every vendor-specific server tool charge, regional multiplier, long-context premium, or negotiated discount. A session with an unknown model remains unpriced and reduces the displayed coverage percentage.

Plan names and monthly spend are saved per agent source only in browser local storage. Claude and Codex default to $20/month each, so the combined view uses $40/month while either filtered view uses $20/month. Plan spend is scaled to the selected reporting window.

How impact and workflow signals are calculated

Impact is reconstructed from Edit, Write, NotebookEdit, MultiEdit, str_replace_editor, and apply_patch payloads. Patches nested inside modern Codex functions.exec JavaScript strings are decoded without executing them.

A Write payload contains the new content but not necessarily the file it replaced, so visible lines are counted as additions when the old content is unavailable.

Signal	Definition
Rework loop	Another edit to the same file in the same session
Churn	Repeat file touches within or across sessions
Abandoned	A non-live, user-started trajectory ending without a final assistant response
Correction	A later user message matching an explainable negative-correction phrase
Time to first edit	First user message to first parseable edit operation
Cache efficiency	Cache-read tokens divided by total input tokens

These are coaching heuristics, not claims about code authorship or correctness. Open a session trajectory to inspect the source events behind a signal.

Privacy and security

• The HTTP server listens on 127.0.0.1, not on the public network.
• Agent state directories are read-only; the dashboard never modifies them.
• Transcript content is served only to the local browser.
• There is no telemetry, cloud database, analytics SDK, or third-party runtime dependency.
• Screenshots in this repository are generated from the synthetic sample data.

Treat your own screenshots and exported API responses as sensitive: session labels, prompts, tool arguments, results, and local file paths may contain private information.

Architecture

agent JSONL files
      │
      ▼
adapters.mjs        source discovery + normalized session/event model
      │
      ▼
analytics.mjs       pricing, edit parsing, risk, scoreboard, workflow signals
      │
      ▼
server.mjs          cached read-only API + localhost static server
      │
      ▼
public/             dependency-free HTML, CSS, SVG charts, and JavaScript UI

Development

npm test
node --check server.mjs
node --check adapters.mjs
node --check analytics.mjs
node --check public/app.js

The analytics tests cover multi-file patches, Claude edits, nested Codex patches, cache-aware pricing, code impact, churn, corrections, rework, latency, abandonment, and explicit handling of unknown models.

Add another agent CLI

Add an adapter in adapters.mjs with:

1. findFiles() to discover transcripts;
2. parseFile() to return normalized sessions;
3. registration in makeAdapters().

The shared helpers handle tolerant JSONL parsing, tool/result linking, usage accounting, labels, and spawn candidates. The Codex adapter is a useful template for custom rollout formats.

License

MIT