OpenCode Model Optimizer Dashboard

Real-time dashboard for monitoring OpenCode model routing decisions and optimization metrics.

Features

• 🎯 Live Model Distribution Chart - Real-time visualization of Haiku/Sonnet/Opus routing decisions
• 📊 20% Gridlines - Y-axis percentage labels from 0%-100% for easy metric reading
• 📋 Recent Routing Log - Last 50+ routing decisions with timestamps and costs
• 🟢 Live Status Indicator - Shows active/inactive status
• ⚡ No Polling - Dashboard loads once on page visit, zero continuous polling overhead
• 🔍 Health Check - Built-in health endpoint to verify dashboard status

Installation

npm install opencode-model-optimizer-dashboard

Or add to your OpenCode config:

{
  "plugin": ["opencode-model-optimizer-dashboard"]
}

Quick Start

Once installed, the dashboard will automatically start on OpenCode launch.

Access the dashboard:

http://localhost:8766

What It Tracks

The dashboard monitors and displays:

• Total Messages: Count of all routing decisions
• Haiku Usage: Percentage of cheap tier-1/2 model routing
• Sonnet Usage: Percentage of medium tier-3 model routing
• Opus Usage: Percentage of expensive tier-4 model routing
• Cost Breakdown: Estimated cost per model tier
• Recent Decisions: Log of last routing decisions with models used

Architecture

opencode-model-optimizer-dashboard/
├── dist/
│   └── index.js              # Plugin entry point (Node.js wrapper)
├── src/
│   ├── server.py            # Python HTTP server
│   └── index.py             # Python utilities
├── public/
│   └── index.html           # Dashboard UI (served from ~/.config/opencode/model-optimizer/)
├── plugin.json              # Plugin metadata
├── package.json             # NPM package info
└── README.md                # This file

How It Works

1. Plugin Activation (dist/index.js)

   • Node.js wrapper spawns Python server process
   • Listens on port 8766
   • Logs activation status

2. Python Server (src/server.py)

   • Serves dashboard.html on / and /dashboard routes
   • Provides /log endpoint returning JSONL routing data
   • Includes /health endpoint for status checks
   • Uses SO_REUSEADDR for reliable port binding

3. Dashboard (public/index.html)

   • Loads once on page visit
   • Fetches routing log data via /log endpoint
   • Displays live metrics and charts
   • Updates status indicator

4. Logging (via opencode-model-optimizer)

   • Separate npm package logs routing decisions
   • Writes to ~/.config/opencode/model-optimizer/routing_log.jsonl
   • Dashboard reads this JSONL file

Dashboard URL

http://localhost:8766

Available Endpoints

• GET / - Serve dashboard HTML
• GET /dashboard - Serve dashboard HTML (alias)
• GET /log - Return routing log (JSONL format)
• GET /health - Health check JSON

Configuration

The dashboard uses these default locations:

• Dashboard HTML: ~/.config/opencode/model-optimizer/dashboard.html
• Routing Log: ~/.config/opencode/model-optimizer/routing_log.jsonl
• Server Port: 8766

Troubleshooting

Dashboard Not Loading

Check if server is running:

curl -s http://localhost:8766/health | jq .

Check for running processes:

ps aux | grep python3 | grep server

Port Already in Use

The server uses SO_REUSEADDR, so it should recover automatically after restart. If not:

# Kill the process
pkill -f "server.py"
sleep 2

# Restart OpenCode
pkill -9 opencode
opencode

No Routing Data

Ensure the logging is active by checking:

tail -f ~/.config/opencode/model-optimizer/routing_log.jsonl

If file is empty, make sure:

1. opencode-model-optimizer npm package is installed
2. You've made routing decisions (asked OpenCode questions)
3. Logging directory exists: ~/.config/opencode/model-optimizer/

Development

Local Development

Clone and install locally:

cd ~/.config/opencode/plugins/opencode-model-optimizer-dashboard
npm install
npm run dev

Key Files to Edit

• Dashboard UI: public/index.html - Modify charts, metrics, styling
• Server: src/server.py - Add new endpoints, change port
• Plugin Logic: dist/index.js - Update spawn/activation logic

Dashboard Features Explained

Model Distribution Chart

Shows the percentage breakdown of routing decisions:

• Haiku (Tier 1-2): Green - Fastest, cheapest models
• Sonnet (Tier 3): Orange - Balanced models
• Opus (Tier 4): Red - Most capable, most expensive

Gridlines

Horizontal lines at 20% increments make it easy to read exact percentages (0%, 20%, 40%, 60%, 80%, 100%).

Y-Axis Labels

Clear percentage labels on the left side for quick reference.

Recent Routing Log

Lists the last routing decisions with:

• Timestamp (when decision was made)
• Tier (1, 2, 3, or 4)
• Model Used (haiku, sonnet, opus, etc.)
• Task Summary (first 50 chars of task)
• Estimated Cost (USD)

Version History

v1.0.0

• Initial release
• Live dashboard with 20% gridlines
• Y-axis percentage labels (0%-100%)
• Version number in header
• NO polling (load-once design)
• SO_REUSEADDR socket fix for reliable port binding

License

MIT

Support

For issues or feature requests, visit: https://github.com/anomalyco/opencode/issues

Related Packages

• opencode-model-optimizer - Handles routing logic and logging
• opencode - Main CLI and plugin system