Web Dashboard
Relevant source files
The following files were used as context for generating this wiki page:
The Web Dashboard serves as the primary visual interface for the Token Optimizer project, providing users with a comprehensive overview of token usage, cost analysis, and waste detection across various agent systems. It transforms raw JSONL session logs and SQLite database records into actionable insights, enabling developers to identify context window waste and implement tiered optimization plans. The dashboard is designed as a standalone, zero-dependency HTML application that can be served locally or opened directly as a file.
Sources: skills/token-optimizer/SKILL.md, openclaw/src/dashboard.ts:10-15, plugins/token-optimizer/skills/fleet-auditor/scripts/fleet.py:20-25
Architecture and Generation Flow
The dashboard generation process follows a structured pipeline that aggregates data from multiple sources, including historical trends, context audits, and waste pattern findings. Depending on the runtime environment (Claude Code, OpenClaw, or OpenCode), different generators are invoked to produce a tailored HTML view.
Generation Pipeline
The generation logic is typically divided into two main layers: Data Aggregation (RL1) and HTML Generation (RL2). The aggregator collects metrics such as total runs, total cost, and quality scores, while the generator injects this data into a template-driven HTML structure.
The diagram shows the flow from raw data sources through runtime-specific generators to the final HTML output.
Sources: openclaw/src/dashboard.ts:143-150, opencode/src/dashboard/generator.ts:40-50, plugins/token-optimizer/skills/fleet-auditor/scripts/fleet.py:1088-1100
Core Components
| Component | Description | Source File |
|---|---|---|
| Data Aggregator | Computes totals, daily buckets, and per-agent cost breakdowns. | openclaw/src/dashboard.ts:60 |
| HTML Generator | Constructs the DOM structure and injects CSS/JS assets. | opencode/src/dashboard/generator.ts:70 |
| Fleet Auditor | Cross-platform auditor for multi-agent system waste. | plugins/token-optimizer/skills/fleet-auditor/scripts/fleet.py |
| Theme Bootstrapper | Inline script to prevent FOUC and handle light/dark mode. | openclaw/src/dashboard.ts:890 |
Key Features and Visualizations
The dashboard is organized into several views, each focusing on a specific aspect of token optimization.
Overview and Hero Metrics
The Overview provides a high-level summary of the "Fleet Token Audit," displaying metrics like total runs, total cost, active days, and potential monthly savings. In OpenClaw and OpenCode, this view also includes "Resource Health" and "Session Efficiency" grades ranging from S to F.
Sources: openclaw/src/dashboard.ts:310-330, opencode/src/dashboard/generator.ts:160-180
Context Window Breakdown
A critical visualization showing how much of the context window is consumed by fixed overhead (CLAUDE.md, MEMORY.md, Skills, MCP tool definitions). It uses a log-scale bar width to make small-but-significant values visible.
Sources: openclaw/src/dashboard.ts:250-270, openclaw/src/dashboard.ts:410-430
Waste Pattern Findings
Identified waste patterns are presented with severity levels (Critical, High, Medium, Low), confidence scores, and "Copy Fix" buttons. These buttons allow users to quickly copy CLI commands to archive skills or disable MCP servers.
Sources: openclaw/src/dashboard.ts:500-530, plugins/token-optimizer/skills/fleet-auditor/scripts/fleet.py:1180-1195
Realized Savings Counterfactual
This view compares the actual monthly cost against a "counterfactual" estimate (what the cost would have been without optimization). It tracks the baseline building progress over an early window of sessions.
Sources: openclaw/src/dashboard.ts:630-660, opencode/src/dashboard/generator.ts:210-240
Data Models and Pricing
The dashboard utilizes a sophisticated pricing model to calculate USD costs based on token types (Input, Output, Cache Read, Cache Write 5m/1h).
Pricing Tiers
The system supports multiple pricing tiers, including "Tier 1" for Claude-specific models. Pricing is loaded from a central rate card but can be overridden by a local pricing.json.
The diagram represents the relationship between agent runs, token counts, and waste detection findings.
Sources: plugins/token-optimizer/skills/fleet-auditor/scripts/fleet.py:127-160, openclaw/src/dashboard.ts:40-55
Deployment and Usage
The dashboard is generated as a persistent file and can optionally be served via a local daemon for a bookmarkable URL.
Serving the Dashboard
Users can invoke the dashboard through runtime-specific CLI commands:
- Claude Code:
python3 $MEASURE_PY dashboard --coord-path $COORD_PATH - Fleet Auditor:
python3 fleet.py dashboard [--serve] - OpenClaw/OpenCode: Through the respective plugin interfaces.
Persistent URL vs. Local File
| Access Method | Description | Path/URL |
|---|---|---|
| Local File | Standard HTML file opened in the default browser. | ~/.claude/_backups/token-optimizer/dashboard.html |
| Served URL | Requires a running background daemon. | http://localhost:24842/token-optimizer |
| Fleet URL | Specific to the cross-platform fleet auditor. | http://127.0.0.1:8080/fleet-dashboard.html |
Sources: skills/token-optimizer/references/presentation-workflow.md:38-60, plugins/token-optimizer/skills/fleet-auditor/scripts/fleet.py:1070-1085
Summary
The Web Dashboard is the central hub for Token Optimizer, providing a visual layer for complex token analytics. By integrating per-message overhead breakdowns, historical trends, and automated fix suggestions, it enables users to reclaim context window space and reduce API costs efficiently across Claude Code, Codex, and other agent platforms.