# AI Command Center Dashboard

A real-time dashboard for monitoring OpenCode AI usage, FARoom proxy statistics, and command center metrics.

## Features

- **Real-time Balance Tracking**: Monitor your Claude API credit balance before and after each request
- **Cost Analysis**: Detailed breakdown of costs with caching and compression savings
- **Request Table**: Per-request cost analysis showing balance changes
- **OpenCode Stats**: Integration with `opencode stats` command output (sessions, messages, costs, tool usage)
- **FARoom Proxy Metrics**: Request metrics, token breakdown, cache hit rates
- **Live Charts**: Balance trends and savings history over time
- **2-Second Auto-Refresh**: Automatic updates via polling

## Setup

### 1. Install Dependencies

```bash
npm install
```

### 2. Configure your client (for Anthropic/Claude models only)

> **Important:** The proxy works **only with Anthropic/Claude models**.
> GPT, Gemini, and other models are not routed through it.

Point your client (Cursor, OpenCode, etc.) **directly** at the local proxy — no
Windows/system proxy and no public cloud URL required. In Cursor, go to
**Settings → Models** and set:

| Field | Value |
|---|---|
| **OpenAI API Key** | *(toggle ON)* — paste your **Anthropic API key** here |
| **Override OpenAI Base URL** | *(toggle ON)* — `https://127.0.0.1:7979/v1` |
| **Anthropic API Key** | *(leave OFF — do NOT fill in)* |

> **Direct, no system proxy.** The proxy listens on `127.0.0.1:7979` and serves
> requests whose baseURL points straight at it (`https://127.0.0.1:7979/v1`).
> You do **not** need to set it as the Windows system proxy / `HTTPS_PROXY`.
> The first time it runs it generates a local root CA (`%LOCALAPPDATA%\AISaver\mitm\aisaver-ca.crt`)
> and trusts it in your user store so the self-signed TLS cert is accepted.

> **Note:** Despite the "OpenAI" label, this is where Cursor routes requests
> when a custom base URL is set. You must put your **Anthropic API key** into
> the **OpenAI API Key** field (not an actual OpenAI key) — the proxy forwards
> it to Anthropic. Leave the separate **Anthropic API Key** field toggled
> **OFF**, otherwise Cursor will bypass the proxy for Claude models.

### 3. Start the Stats Server

The stats server exposes the `opencode stats` command as JSON via HTTP:

```bash
node stats-server.js
```

This will start on `http://127.0.0.1:9876` (binding on `0.0.0.0`) and provide `/agent-metrics` endpoint. It also proxies AISaver's `/stats` and `/stats-history` (fetched locally from `https://127.0.0.1:7979`) so the browser dashboard never talks to the proxy's TLS port directly.

**Note**: Requires `opencode` CLI to be installed and available in PATH.

### 3. Open Dashboard

Open `index.html` in a web browser (or use Live Server):

```bash
# Using Python 3
python -m http.server 8000

# Using Node http-server
npx http-server
```

Then navigate to `http://localhost:8000` (or your configured port).

## Configuration

### Starting Balance

Set your initial Claude API credit balance in the balance banner input field (default: $5.33). This is persisted in localStorage.

### Refresh Interval

Edit `app.js` and modify `CONFIG.REFRESH_INTERVAL` (default: 2000ms).

## Files

- **index.html** - Dashboard layout and structure
- **styles.css** - Cyberpunk/glassmorphism UI theme with animations
- **app.js** - Compiled JavaScript logic (ready to use)
- **app.ts** - TypeScript source code
- **stats-server.js** - Node.js backend that exposes `opencode stats` as JSON API
- **tsconfig.json** - TypeScript compiler configuration

## Data Sources

The dashboard connects to three sources:

1. **AISaver Proxy** (`https://127.0.0.1:7979`, HTTPS/self-signed)
   - `/stats` - Current session statistics
   - `/stats-history` - Historical data
   - Fetched locally by the stats-server (below); the browser does not hit this port directly.

2. **Stats Server** (`http://127.0.0.1:9876`)
   - `/agent-metrics` - Parsed `opencode stats` command output
   - `/usage-metrics`, `/usage-history` - AISaver data re-exposed over plain HTTP for the browser

3. **Claude Platform** (via proxy)
   - Starting balance configuration (manually set)

## Cost Calculation

**Full Price** = cost without any optimizations (proxy disabled)
**Actual Cost** = cost after caching and compression
**Savings** = cache discount + compression discount

Per-request costs are calculated using model-specific pricing:
- Input tokens: varies by model ($0.80-$15.00 per 1M)
- Output tokens: varies by model ($4.00-$75.00 per 1M)
- Cache read: 90% discount on input (provider-native)
- Cache write: 25% premium on input (first-time cache write)

## Browser Compatibility

- Chrome/Edge 90+
- Firefox 88+
- Safari 14+

Requires ES6+ JavaScript and Canvas API.

## Troubleshooting

### Stats server won't start

```
Error: command not found: opencode
```

Ensure `opencode` CLI is installed and in your PATH:

```bash
which opencode  # Check if installed
opencode --version
```

### Dashboard shows "Connection Failed"

1. Verify AISaver proxy is running: `curl -sk https://127.0.0.1:7979/stats`
2. Verify stats server is running: `curl http://127.0.0.1:9876/agent-metrics`
3. Check browser console (F12) for CORS errors
4. Ensure ports 9876, 7979 are not in use

### Balance not updating

- Check that starting balance is set (input field in balance banner)
- Verify requests are being made through the proxy
- Check browser localStorage is enabled

## Performance Notes

- Dashboard updates every 2 seconds (configurable)
- Stats server caches results for 2 seconds to reduce `opencode stats` overhead
- Charts maintain max 50 data points for smooth rendering
- Glassmorphism effects use CSS backdrop-filter (GPU-accelerated)

## License

MIT
