added working scriptable widget for ai api usage info
This commit is contained in:
William Stuckey
@@ -1,336 +0,0 @@
|
||||
o# Usage API Enhancements Plan
|
||||
|
||||
## Goal
|
||||
Enhance the `/usage` API endpoint to provide complete data for a dashboard widget, including models with zero usage, daily breakdowns, provider health, and lifetime token totals.
|
||||
|
||||
## All changes in `proxy.mjs` only — zero new dependencies.
|
||||
|
||||
---
|
||||
|
||||
## Pre-existing Bug to Fix
|
||||
|
||||
**`buildUsageResponse()` line 232 has an unresolved Promise bug:**
|
||||
|
||||
```js
|
||||
const balances = fetchProviderBalances(); // Start fetching but don't await
|
||||
```
|
||||
|
||||
This assigns a Promise to `balances`, then on line 303:
|
||||
```js
|
||||
if (!balances.anthropic) { // always undefined — checking property on a Promise object
|
||||
```
|
||||
|
||||
The notes about balances always fire incorrectly. The actual await happens later in the `/usage` handler (line 557). **Fix**: Remove the balance-related code from `buildUsageResponse()` entirely since it's handled in the request handler already. Move the notes logic to after balances are resolved in the `/usage` handler.
|
||||
|
||||
---
|
||||
|
||||
## Change 1: Seed All Configured Models (Must Have)
|
||||
|
||||
**What**: Ensure every route in `MODEL_ROUTES` appears in the response even with zero usage.
|
||||
|
||||
**Where**: `buildUsageResponse()` — add a loop after the existing `usageData.models` iteration (after line ~282).
|
||||
|
||||
**Logic**:
|
||||
```
|
||||
For each [requestedModel, route] in MODEL_ROUTES:
|
||||
providerName = route.provider
|
||||
if providers[providerName].models[requestedModel] does NOT exist:
|
||||
add it with:
|
||||
routesTo: route.rewriteModel || requestedModel
|
||||
total/monthly/today: all zeros
|
||||
costUsd: null for flat-rate, 0 for token-based
|
||||
```
|
||||
|
||||
**Result**: The widget sees all available routes including zero-usage models like:
|
||||
```json
|
||||
"deepseek": {
|
||||
"models": {
|
||||
"claude-haiku-4-5": { "routesTo": "deepseek-chat", ... },
|
||||
"claude-haiku-4-5-20251001": { "routesTo": "deepseek-chat", ... },
|
||||
"deepseek-chat": { "routesTo": "deepseek-chat", ... }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The widget can deduplicate by `routesTo` if it wants to show only unique upstream models.
|
||||
|
||||
---
|
||||
|
||||
## Change 2: Daily Usage Tracking (Nice to Have)
|
||||
|
||||
**What**: Track per-day usage alongside existing total and monthly tracking.
|
||||
|
||||
### 2a. Add `getCurrentDate()` helper (new function, near `getCurrentPeriod()` at line 82)
|
||||
|
||||
```js
|
||||
function getCurrentDate() {
|
||||
const now = new Date();
|
||||
return now.toISOString().slice(0, 10); // "2026-03-27"
|
||||
}
|
||||
```
|
||||
|
||||
### 2b. Extend `recordUsage()` (line 117)
|
||||
|
||||
After the monthly period rollover check (line 133), add daily rollover:
|
||||
```js
|
||||
const todayStr = getCurrentDate();
|
||||
if (!modelData.daily || modelData.daily.date !== todayStr) {
|
||||
modelData.daily = { date: todayStr, inputTokens: 0, outputTokens: 0, requests: 0 };
|
||||
}
|
||||
modelData.daily.inputTokens += inputTokens || 0;
|
||||
modelData.daily.outputTokens += outputTokens || 0;
|
||||
modelData.daily.requests += 1;
|
||||
```
|
||||
|
||||
### 2c. Backward compatibility
|
||||
|
||||
Existing `usage-data.json` entries won't have `daily`. In `buildUsageResponse()`, check for its existence:
|
||||
```js
|
||||
const daily = modelData.daily?.date === getCurrentDate() ? modelData.daily : null;
|
||||
```
|
||||
If `daily` is null or stale date, use zeros.
|
||||
|
||||
### 2d. Schema addition to `usage-data.json` (auto-updated on next request)
|
||||
|
||||
```json
|
||||
{
|
||||
"daily": { "date": "2026-03-27", "inputTokens": 0, "outputTokens": 0, "requests": 0 }
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Change 3: Provider Status Tracking (Nice to Have)
|
||||
|
||||
**What**: In-memory map tracking last request outcome per provider. Resets to `"idle"` on restart.
|
||||
|
||||
### 3a. Declare `providerStatus` (new module-level const, after line ~78)
|
||||
|
||||
```js
|
||||
const providerStatus = {};
|
||||
for (const name of Object.keys(PROVIDERS)) {
|
||||
providerStatus[name] = { status: "idle", lastSeen: null, lastError: null };
|
||||
}
|
||||
```
|
||||
|
||||
### 3b. Update status in `handleMessages()` — three insertion points:
|
||||
|
||||
1. **Streaming success** (after line ~475, after usage extraction in streaming path):
|
||||
```js
|
||||
providerStatus[route.provider] = { status: "ok", lastSeen: new Date().toISOString(), lastError: null };
|
||||
```
|
||||
|
||||
2. **Non-streaming response** (after line ~487, inside the non-streaming else branch):
|
||||
- If `statusCode >= 200 && statusCode < 300`: status `"ok"`
|
||||
- Else: status `"degraded"` with `lastError: "HTTP " + statusCode`
|
||||
|
||||
3. **Fetch failure** (inside catch at line ~505):
|
||||
```js
|
||||
providerStatus[route.provider] = { status: "error", lastSeen: new Date().toISOString(), lastError: fetchErr.message };
|
||||
```
|
||||
|
||||
### 3c. Include in `buildUsageResponse()` output
|
||||
|
||||
For each provider, add `status`, `lastSeen`, `lastError` from the in-memory map.
|
||||
|
||||
---
|
||||
|
||||
## Change 4: Lifetime Token Totals in `totals` (Low Priority)
|
||||
|
||||
**What**: Add `totalInputTokens`, `totalOutputTokens`, `monthlyInputTokens`, `monthlyOutputTokens` to the `totals` response object.
|
||||
|
||||
**Where**: `buildUsageResponse()` aggregation loop (line ~248). Add four new accumulators initialized to 0, incremented alongside existing `totalRequests`/`monthlyRequests`.
|
||||
|
||||
**New fields in `totals`**:
|
||||
```json
|
||||
{
|
||||
"totalInputTokens": 105000,
|
||||
"totalOutputTokens": 262000,
|
||||
"monthlyInputTokens": 105000,
|
||||
"monthlyOutputTokens": 262000
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Change 5: Per-Model Pricing (Low Priority)
|
||||
|
||||
**What**: Include pricing info on each model entry so the widget doesn't have to cross-reference provider pricing.
|
||||
|
||||
**Where**: `buildUsageResponse()` — when building each model's output object.
|
||||
|
||||
**Logic**:
|
||||
```js
|
||||
const pricing = config.pricing?.[providerName] || DEFAULT_PRICING[providerName];
|
||||
modelEntry.pricing = pricing?.type === "flat" ? "flat_rate" : { inputPerMTok: pricing.inputPerMTok, outputPerMTok: pricing.outputPerMTok };
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Change 6: Today's Aggregates in `totals` (Nice to Have)
|
||||
|
||||
**What**: Add `todayRequests`, `todayCostUsd`, `todayInputTokens`, `todayOutputTokens` to the `totals` object.
|
||||
|
||||
**Where**: `buildUsageResponse()` — aggregate daily data across all models. Depends on Change 2 (daily tracking).
|
||||
|
||||
**New accumulators**: `todayRequests`, `todayCost`, `todayInputTokens`, `todayOutputTokens` — sum of all models' `today` values.
|
||||
|
||||
---
|
||||
|
||||
## Proposed `/usage` Response Shape (complete)
|
||||
|
||||
```json
|
||||
{
|
||||
"service": "ein-ai-proxy",
|
||||
"generatedAt": "2026-03-27T15:51:00.000Z",
|
||||
"currentPeriod": "2026-03",
|
||||
"providers": {
|
||||
"anthropic": {
|
||||
"status": "ok",
|
||||
"lastSeen": "2026-03-27T14:30:00.000Z",
|
||||
"lastError": null,
|
||||
"balance": null,
|
||||
"pricingNote": "No balance API available - check console.anthropic.com",
|
||||
"pricing": { "inputPerMTok": 15, "outputPerMTok": 75 },
|
||||
"models": {
|
||||
"claude-opus-4-6": {
|
||||
"routesTo": "claude-opus-4-6",
|
||||
"pricing": { "inputPerMTok": 15, "outputPerMTok": 75 },
|
||||
"total": { "inputTokens": 5000, "outputTokens": 12000, "requests": 3, "costUsd": 0.975 },
|
||||
"monthly": { "period": "2026-03", "inputTokens": 5000, "outputTokens": 12000, "requests": 3, "costUsd": 0.975 },
|
||||
"today": { "date": "2026-03-27", "inputTokens": 2000, "outputTokens": 5000, "requests": 1, "costUsd": 0.405 }
|
||||
},
|
||||
"claude-opus-4-5": {
|
||||
"routesTo": "claude-opus-4-5",
|
||||
"pricing": { "inputPerMTok": 15, "outputPerMTok": 75 },
|
||||
"total": { "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": 0 },
|
||||
"monthly": { "period": "2026-03", "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": 0 },
|
||||
"today": { "date": "2026-03-27", "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": 0 }
|
||||
},
|
||||
"claude-opus-4-5-20251101": {
|
||||
"routesTo": "claude-opus-4-5-20251101",
|
||||
"pricing": { "inputPerMTok": 15, "outputPerMTok": 75 },
|
||||
"total": { "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": 0 },
|
||||
"monthly": { "period": "2026-03", "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": 0 },
|
||||
"today": { "date": "2026-03-27", "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": 0 }
|
||||
}
|
||||
}
|
||||
},
|
||||
"deepseek": {
|
||||
"status": "idle",
|
||||
"lastSeen": null,
|
||||
"lastError": null,
|
||||
"balance": { "totalBalance": "4.51", "currency": "USD" },
|
||||
"pricing": { "inputPerMTok": 0.27, "outputPerMTok": 1.10 },
|
||||
"models": {
|
||||
"claude-haiku-4-5-20251001": {
|
||||
"routesTo": "deepseek-chat",
|
||||
"pricing": { "inputPerMTok": 0.27, "outputPerMTok": 1.10 },
|
||||
"total": { "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": 0 },
|
||||
"monthly": { "period": "2026-03", "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": 0 },
|
||||
"today": { "date": "2026-03-27", "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": 0 }
|
||||
},
|
||||
"claude-haiku-4-5": {
|
||||
"routesTo": "deepseek-chat",
|
||||
"pricing": { "inputPerMTok": 0.27, "outputPerMTok": 1.10 },
|
||||
"total": { "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": 0 },
|
||||
"monthly": { "period": "2026-03", "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": 0 },
|
||||
"today": { "date": "2026-03-27", "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": 0 }
|
||||
},
|
||||
"deepseek-chat": {
|
||||
"routesTo": "deepseek-chat",
|
||||
"pricing": { "inputPerMTok": 0.27, "outputPerMTok": 1.10 },
|
||||
"total": { "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": 0 },
|
||||
"monthly": { "period": "2026-03", "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": 0 },
|
||||
"today": { "date": "2026-03-27", "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": 0 }
|
||||
}
|
||||
}
|
||||
},
|
||||
"zai": {
|
||||
"status": "ok",
|
||||
"lastSeen": "2026-03-27T15:00:00.000Z",
|
||||
"lastError": null,
|
||||
"balance": null,
|
||||
"pricingNote": "Flat-rate subscription, no balance API available",
|
||||
"pricing": "flat_rate",
|
||||
"monthlyCostUsd": 10,
|
||||
"models": {
|
||||
"claude-sonnet-4-6": {
|
||||
"routesTo": "glm-4.7",
|
||||
"pricing": "flat_rate",
|
||||
"total": { "inputTokens": 100000, "outputTokens": 250000, "requests": 50, "costUsd": null },
|
||||
"monthly": { "period": "2026-03", "inputTokens": 100000, "outputTokens": 250000, "requests": 50, "costUsd": null },
|
||||
"today": { "date": "2026-03-27", "inputTokens": 10000, "outputTokens": 25000, "requests": 5, "costUsd": null }
|
||||
},
|
||||
"claude-sonnet-4-5": {
|
||||
"routesTo": "glm-4.7",
|
||||
"pricing": "flat_rate",
|
||||
"total": { "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": null },
|
||||
"monthly": { "period": "2026-03", "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": null },
|
||||
"today": { "date": "2026-03-27", "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": null }
|
||||
},
|
||||
"claude-sonnet-4-5-20250929": {
|
||||
"routesTo": "glm-4.7",
|
||||
"pricing": "flat_rate",
|
||||
"total": { "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": null },
|
||||
"monthly": { "period": "2026-03", "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": null },
|
||||
"today": { "date": "2026-03-27", "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": null }
|
||||
},
|
||||
"glm-4.7": {
|
||||
"routesTo": "glm-4.7",
|
||||
"pricing": "flat_rate",
|
||||
"total": { "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": null },
|
||||
"monthly": { "period": "2026-03", "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": null },
|
||||
"today": { "date": "2026-03-27", "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": null }
|
||||
},
|
||||
"glm-4.5-air": {
|
||||
"routesTo": "glm-4.5-air",
|
||||
"pricing": "flat_rate",
|
||||
"total": { "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": null },
|
||||
"monthly": { "period": "2026-03", "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": null },
|
||||
"today": { "date": "2026-03-27", "inputTokens": 0, "outputTokens": 0, "requests": 0, "costUsd": null }
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"totals": {
|
||||
"totalRequests": 53,
|
||||
"monthlyRequests": 53,
|
||||
"todayRequests": 6,
|
||||
"totalInputTokens": 105000,
|
||||
"totalOutputTokens": 262000,
|
||||
"monthlyInputTokens": 105000,
|
||||
"monthlyOutputTokens": 262000,
|
||||
"todayInputTokens": 12000,
|
||||
"todayOutputTokens": 30000,
|
||||
"totalCostUsd": 0.975,
|
||||
"monthlyCostUsd": 0.975,
|
||||
"todayCostUsd": 0.405,
|
||||
"note": "Cost excludes flat-rate provider(s). Z.ai costs $10/mo regardless of usage. Anthropic has no public balance API - check console.anthropic.com. Z.ai is flat-rate; no balance API available."
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Implementation Order
|
||||
|
||||
The changes should be applied in this order to minimize conflicts:
|
||||
|
||||
1. **Bug fix**: Remove stale `balances` variable and balance-related notes from `buildUsageResponse()`. Move notes logic to `/usage` handler.
|
||||
2. **`getCurrentDate()` helper**: Add near `getCurrentPeriod()`.
|
||||
3. **`providerStatus` map**: Add module-level constant.
|
||||
4. **`recordUsage()` changes**: Add daily tracking field.
|
||||
5. **`handleMessages()` changes**: Add provider status updates at the 3 insertion points.
|
||||
6. **`buildUsageResponse()` rewrite**: The big change — model seeding, daily/today aggregation, lifetime token totals, per-model pricing, provider status inclusion.
|
||||
7. **`/usage` handler update**: Updated notes logic after balances resolve.
|
||||
|
||||
---
|
||||
|
||||
## Files Modified
|
||||
|
||||
| File | Change |
|
||||
|------|--------|
|
||||
| `proxy.mjs` | All code changes (6 changes + 1 bug fix) |
|
||||
|
||||
No config changes. No new files. No new dependencies. Backward-compatible with existing `usage-data.json`.
|
||||
@@ -0,0 +1,482 @@
|
||||
// =======================
|
||||
// AI Proxy Usage Widget
|
||||
// =======================
|
||||
// Scriptable widget for https://ai.ein-softworks.com/usage
|
||||
// Supports: Small, Medium, Large sizes
|
||||
|
||||
const API_URL = "https://ai.ein-softworks.com/usage";
|
||||
|
||||
// -- Color Palette --
|
||||
const COLORS = {
|
||||
bg: new Color("#0d1117"),
|
||||
surface: new Color("#161b22"),
|
||||
border: new Color("#30363d"),
|
||||
title: new Color("#e6edf3"),
|
||||
label: new Color("#8b949e"),
|
||||
value: new Color("#e6edf3"),
|
||||
accent: new Color("#58a6ff"),
|
||||
green: new Color("#3fb950"),
|
||||
yellow: new Color("#d29922"),
|
||||
red: new Color("#f85149"),
|
||||
purple: new Color("#bc8cff"),
|
||||
dim: new Color("#484f58"),
|
||||
};
|
||||
|
||||
// -- Fetch --
|
||||
async function fetchUsage() {
|
||||
try {
|
||||
let req = new Request(API_URL);
|
||||
req.timeoutInterval = 10;
|
||||
return await req.loadJSON();
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// -- Helpers --
|
||||
function fmt$(n) {
|
||||
if (n == null) return "—";
|
||||
if (n === 0) return "$0.00";
|
||||
if (n < 0.01) return "<$0.01";
|
||||
if (n < 1) return "$" + n.toFixed(3);
|
||||
return "$" + n.toFixed(2);
|
||||
}
|
||||
|
||||
function fmtTok(n) {
|
||||
if (n == null) return "—";
|
||||
if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
|
||||
if (n >= 1_000) return (n / 1_000).toFixed(1) + "k";
|
||||
return String(n);
|
||||
}
|
||||
|
||||
function fmtPeriod(p) {
|
||||
if (!p) return "—";
|
||||
let parts = p.split("-");
|
||||
if (parts.length === 2) return parseInt(parts[1], 10) + "/" + parts[0];
|
||||
return p;
|
||||
}
|
||||
|
||||
function fmtTime(iso) {
|
||||
let d = iso ? new Date(iso) : new Date();
|
||||
return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
|
||||
}
|
||||
|
||||
function provColor(name) {
|
||||
return { anthropic: COLORS.accent, deepseek: COLORS.green, zai: COLORS.purple }[name] || COLORS.label;
|
||||
}
|
||||
|
||||
function pl(n, s) { return n + " " + s + (n === 1 ? "" : "s"); }
|
||||
|
||||
// Aggregate monthly stats for a provider by summing all its models
|
||||
function providerMonthly(prov) {
|
||||
let cost = 0, reqs = 0, inTok = 0, outTok = 0;
|
||||
for (let m of Object.values(prov.models || {})) {
|
||||
let mo = m.monthly || {};
|
||||
reqs += mo.requests || 0;
|
||||
inTok += mo.inputTokens || 0;
|
||||
outTok += mo.outputTokens || 0;
|
||||
cost += mo.costUsd || 0;
|
||||
}
|
||||
return { cost, reqs, inTok, outTok };
|
||||
}
|
||||
|
||||
// Aggregate monthly/today stats for all models that route to a given target
|
||||
function findModelStats(data, providerName, modelName) {
|
||||
let prov = data.providers?.[providerName];
|
||||
if (!prov) return null;
|
||||
|
||||
// Sum all models whose routesTo matches, OR whose key matches
|
||||
let monthly = { inputTokens: 0, outputTokens: 0, requests: 0, costUsd: 0 };
|
||||
let today = { inputTokens: 0, outputTokens: 0, requests: 0, costUsd: 0 };
|
||||
let total = { inputTokens: 0, outputTokens: 0, requests: 0, costUsd: 0 };
|
||||
let found = false;
|
||||
|
||||
for (let [key, m] of Object.entries(prov.models || {})) {
|
||||
if (m.routesTo === modelName || key === modelName) {
|
||||
found = true;
|
||||
let mo = m.monthly || {};
|
||||
monthly.inputTokens += mo.inputTokens || 0;
|
||||
monthly.outputTokens += mo.outputTokens || 0;
|
||||
monthly.requests += mo.requests || 0;
|
||||
monthly.costUsd += mo.costUsd || 0;
|
||||
|
||||
let td = m.today || {};
|
||||
today.inputTokens += td.inputTokens || 0;
|
||||
today.outputTokens += td.outputTokens || 0;
|
||||
today.requests += td.requests || 0;
|
||||
today.costUsd += td.costUsd || 0;
|
||||
|
||||
let tt = m.total || {};
|
||||
total.inputTokens += tt.inputTokens || 0;
|
||||
total.outputTokens += tt.outputTokens || 0;
|
||||
total.requests += tt.requests || 0;
|
||||
total.costUsd += tt.costUsd || 0;
|
||||
}
|
||||
}
|
||||
|
||||
if (!found) return null;
|
||||
return { monthly, today, total };
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// SMALL WIDGET
|
||||
// ========================================
|
||||
function buildSmall(w, data) {
|
||||
w.setPadding(12, 12, 12, 12);
|
||||
|
||||
// Header
|
||||
let hdr = w.addStack();
|
||||
hdr.layoutHorizontally();
|
||||
hdr.centerAlignContent();
|
||||
addText(hdr, "AI Proxy", Font.boldMonospacedSystemFont(13), COLORS.title);
|
||||
hdr.addSpacer();
|
||||
addText(hdr, fmtPeriod(data.currentPeriod), Font.mediumMonospacedSystemFont(10), COLORS.label);
|
||||
|
||||
w.addSpacer(6);
|
||||
|
||||
// Monthly cost
|
||||
let c = w.addText(fmt$(data.totals?.monthlyCostUsd));
|
||||
c.font = Font.boldMonospacedSystemFont(26);
|
||||
c.textColor = COLORS.accent;
|
||||
c.minimumScaleFactor = 0.6;
|
||||
addText(w, "monthly spend", Font.systemFont(10), COLORS.label);
|
||||
|
||||
w.addSpacer(4);
|
||||
|
||||
// Today
|
||||
let todayReqs = data.totals?.todayRequests ?? 0;
|
||||
let tRow = w.addStack();
|
||||
tRow.layoutHorizontally();
|
||||
addText(tRow, "today", Font.systemFont(10), COLORS.label);
|
||||
tRow.addSpacer();
|
||||
addText(tRow, todayReqs > 0 ? fmt$(data.totals.todayCostUsd) : "no usage",
|
||||
Font.mediumMonospacedSystemFont(11), todayReqs > 0 ? COLORS.value : COLORS.dim);
|
||||
|
||||
w.addSpacer(3);
|
||||
|
||||
// DeepSeek balance
|
||||
let dsBal = data.providers?.deepseek?.balance?.totalBalance;
|
||||
let bRow = w.addStack();
|
||||
bRow.layoutHorizontally();
|
||||
addText(bRow, "deepseek", Font.systemFont(10), COLORS.label);
|
||||
bRow.addSpacer();
|
||||
addText(bRow, dsBal ? "$" + dsBal : "—", Font.mediumMonospacedSystemFont(11), COLORS.green);
|
||||
|
||||
w.addSpacer();
|
||||
addFooter(w, data);
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// MEDIUM WIDGET
|
||||
// ========================================
|
||||
function buildMedium(w, data) {
|
||||
w.setPadding(12, 14, 12, 14);
|
||||
|
||||
// Header
|
||||
let hdr = w.addStack();
|
||||
hdr.layoutHorizontally();
|
||||
hdr.centerAlignContent();
|
||||
addText(hdr, "AI Proxy Usage", Font.boldMonospacedSystemFont(13), COLORS.title);
|
||||
hdr.addSpacer();
|
||||
addText(hdr, fmtPeriod(data.currentPeriod), Font.mediumMonospacedSystemFont(11), COLORS.label);
|
||||
|
||||
w.addSpacer(6);
|
||||
|
||||
let body = w.addStack();
|
||||
body.layoutHorizontally();
|
||||
|
||||
// -- Left: cost + stats --
|
||||
let left = body.addStack();
|
||||
left.layoutVertically();
|
||||
|
||||
let c = left.addText(fmt$(data.totals?.monthlyCostUsd));
|
||||
c.font = Font.boldMonospacedSystemFont(26);
|
||||
c.textColor = COLORS.accent;
|
||||
c.minimumScaleFactor = 0.6;
|
||||
addText(left, "monthly spend", Font.systemFont(10), COLORS.label);
|
||||
|
||||
left.addSpacer(5);
|
||||
addText(left, pl(data.totals?.monthlyRequests ?? 0, "request"),
|
||||
Font.mediumMonospacedSystemFont(11), COLORS.value);
|
||||
|
||||
left.addSpacer(3);
|
||||
|
||||
// Today summary
|
||||
let tReqs = data.totals?.todayRequests ?? 0;
|
||||
let tStr = tReqs > 0
|
||||
? "today: " + fmt$(data.totals.todayCostUsd) + " / " + pl(tReqs, "req")
|
||||
: "today: no usage";
|
||||
addText(left, tStr, Font.regularMonospacedSystemFont(9), COLORS.dim);
|
||||
|
||||
body.addSpacer();
|
||||
|
||||
// -- Right: providers --
|
||||
let right = body.addStack();
|
||||
right.layoutVertically();
|
||||
|
||||
let provs = data.providers || {};
|
||||
for (let name of ["zai", "anthropic", "deepseek"]) {
|
||||
let prov = provs[name];
|
||||
if (!prov) continue;
|
||||
|
||||
let row = right.addStack();
|
||||
row.layoutHorizontally();
|
||||
row.centerAlignContent();
|
||||
|
||||
addText(row, "●", Font.systemFont(8), provColor(name));
|
||||
row.addSpacer(4);
|
||||
let nm = addText(row, name, Font.mediumMonospacedSystemFont(11), COLORS.value);
|
||||
nm.lineLimit = 1;
|
||||
row.addSpacer(6);
|
||||
|
||||
let detail = "";
|
||||
let stats = providerMonthly(prov);
|
||||
if (name === "zai") {
|
||||
detail = "$" + (prov.monthlyCostUsd || 10) + "/mo flat";
|
||||
} else if (stats.reqs > 0) {
|
||||
detail = fmt$(stats.cost);
|
||||
} else if (name === "deepseek" && prov.balance?.totalBalance) {
|
||||
detail = "$" + prov.balance.totalBalance + " bal";
|
||||
} else if (name === "anthropic") {
|
||||
detail = "see console";
|
||||
} else {
|
||||
detail = "no usage";
|
||||
}
|
||||
|
||||
let dt = addText(row, detail, Font.regularMonospacedSystemFont(10), COLORS.label);
|
||||
dt.lineLimit = 1;
|
||||
right.addSpacer(3);
|
||||
}
|
||||
|
||||
w.addSpacer();
|
||||
addFooter(w, data);
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// LARGE WIDGET
|
||||
// ========================================
|
||||
function buildLarge(w, data) {
|
||||
w.setPadding(12, 14, 12, 14);
|
||||
|
||||
// Header
|
||||
let hdr = w.addStack();
|
||||
hdr.layoutHorizontally();
|
||||
hdr.centerAlignContent();
|
||||
addText(hdr, "AI Proxy Usage", Font.boldMonospacedSystemFont(15), COLORS.title);
|
||||
hdr.addSpacer();
|
||||
addText(hdr, fmtPeriod(data.currentPeriod), Font.mediumMonospacedSystemFont(12), COLORS.label);
|
||||
|
||||
w.addSpacer(6);
|
||||
|
||||
// Summary row
|
||||
let sum = w.addStack();
|
||||
sum.layoutHorizontally();
|
||||
|
||||
let costCol = sum.addStack();
|
||||
costCol.layoutVertically();
|
||||
let cv = costCol.addText(fmt$(data.totals?.monthlyCostUsd));
|
||||
cv.font = Font.boldMonospacedSystemFont(28);
|
||||
cv.textColor = COLORS.accent;
|
||||
cv.minimumScaleFactor = 0.5;
|
||||
addText(costCol, "monthly spend", Font.systemFont(10), COLORS.label);
|
||||
|
||||
sum.addSpacer();
|
||||
|
||||
let statsCol = sum.addStack();
|
||||
statsCol.layoutVertically();
|
||||
addKVRow(statsCol, "requests", pl(data.totals?.monthlyRequests ?? 0, "req"), COLORS.value);
|
||||
statsCol.addSpacer(3);
|
||||
addKVRow(statsCol, "all-time", fmt$(data.totals?.totalCostUsd), COLORS.yellow);
|
||||
statsCol.addSpacer(3);
|
||||
let tReqs = data.totals?.todayRequests ?? 0;
|
||||
let todayVal = tReqs > 0
|
||||
? fmt$(data.totals.todayCostUsd) + " / " + pl(tReqs, "req")
|
||||
: "no usage";
|
||||
addKVRow(statsCol, "today", todayVal, tReqs > 0 ? COLORS.value : COLORS.dim);
|
||||
|
||||
w.addSpacer(8);
|
||||
addDivider(w);
|
||||
w.addSpacer(6);
|
||||
|
||||
// -- Per-provider sections using routing data --
|
||||
let routing = data.routing || {};
|
||||
let providers = data.providers || {};
|
||||
|
||||
for (let name of ["zai", "anthropic", "deepseek"]) {
|
||||
let prov = providers[name];
|
||||
if (!prov) continue;
|
||||
|
||||
// Provider header
|
||||
let phdr = w.addStack();
|
||||
phdr.layoutHorizontally();
|
||||
phdr.centerAlignContent();
|
||||
addText(phdr, "●", Font.systemFont(9), provColor(name));
|
||||
phdr.addSpacer(5);
|
||||
addText(phdr, name.toUpperCase(), Font.boldMonospacedSystemFont(11), COLORS.value);
|
||||
phdr.addSpacer();
|
||||
|
||||
// Provider-level info (balance / flat rate / console note)
|
||||
if (name === "deepseek" && prov.balance?.totalBalance) {
|
||||
addText(phdr, "$" + prov.balance.totalBalance + " balance", Font.regularMonospacedSystemFont(10), COLORS.green);
|
||||
} else if (name === "zai") {
|
||||
addText(phdr, "$" + (prov.monthlyCostUsd || 10) + "/mo flat", Font.regularMonospacedSystemFont(10), COLORS.purple);
|
||||
} else if (name === "anthropic") {
|
||||
addText(phdr, "see console", Font.regularMonospacedSystemFont(10), COLORS.label);
|
||||
}
|
||||
|
||||
// Show status if error
|
||||
if (prov.status === "error") {
|
||||
phdr.addSpacer(6);
|
||||
addText(phdr, "ERROR", Font.boldMonospacedSystemFont(9), COLORS.red);
|
||||
}
|
||||
|
||||
w.addSpacer(3);
|
||||
|
||||
// Find routes that belong to this provider
|
||||
let provRoutes = [];
|
||||
for (let [tier, route] of Object.entries(routing)) {
|
||||
if (tier === "default") continue;
|
||||
if (route.provider === name) {
|
||||
provRoutes.push({ tier, ...route });
|
||||
}
|
||||
}
|
||||
|
||||
if (provRoutes.length === 0) {
|
||||
let noRow = w.addStack();
|
||||
noRow.setPadding(2, 18, 2, 8);
|
||||
addText(noRow, "No active routes", Font.regularMonospacedSystemFont(10), COLORS.dim);
|
||||
} else {
|
||||
for (let route of provRoutes) {
|
||||
let modelData = findModelStats(data, name, route.model);
|
||||
let mo = modelData?.monthly || {};
|
||||
let hasUsage = (mo.requests || 0) > 0 || (mo.inputTokens || 0) > 0 || (mo.outputTokens || 0) > 0;
|
||||
|
||||
let card = w.addStack();
|
||||
card.layoutHorizontally();
|
||||
card.centerAlignContent();
|
||||
card.setPadding(4, 18, 4, 8);
|
||||
card.backgroundColor = COLORS.surface;
|
||||
card.cornerRadius = 6;
|
||||
|
||||
// Left: tier + model + stats
|
||||
let lc = card.addStack();
|
||||
lc.layoutVertically();
|
||||
|
||||
// Tier label + actual model
|
||||
let tierRow = lc.addStack();
|
||||
tierRow.layoutHorizontally();
|
||||
tierRow.centerAlignContent();
|
||||
addText(tierRow, route.tier, Font.boldMonospacedSystemFont(11), COLORS.value);
|
||||
tierRow.addSpacer(6);
|
||||
let arrow = addText(tierRow, "→ " + route.model, Font.regularMonospacedSystemFont(10), COLORS.label);
|
||||
arrow.lineLimit = 1;
|
||||
arrow.minimumScaleFactor = 0.7;
|
||||
|
||||
if (hasUsage) {
|
||||
let tokStr = fmtTok(mo.inputTokens) + " in / " + fmtTok(mo.outputTokens) + " out tokens";
|
||||
addText(lc, tokStr, Font.regularMonospacedSystemFont(10), COLORS.label);
|
||||
addText(lc, pl(mo.requests, "request"), Font.regularMonospacedSystemFont(10), COLORS.dim);
|
||||
} else {
|
||||
addText(lc, "no usage this period", Font.regularMonospacedSystemFont(10), COLORS.dim);
|
||||
}
|
||||
|
||||
card.addSpacer();
|
||||
|
||||
// Right: cost or token count for flat rate
|
||||
if (name === "zai") {
|
||||
if (hasUsage) {
|
||||
addText(card, pl(mo.requests, "req"), Font.mediumMonospacedSystemFont(12), COLORS.purple);
|
||||
}
|
||||
} else if (hasUsage) {
|
||||
addText(card, fmt$(mo.costUsd), Font.boldMonospacedSystemFont(14), provColor(name));
|
||||
} else {
|
||||
addText(card, "$0.00", Font.regularMonospacedSystemFont(12), COLORS.dim);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
w.addSpacer(5);
|
||||
}
|
||||
|
||||
w.addSpacer();
|
||||
addFooter(w, data);
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// Shared UI helpers
|
||||
// ========================================
|
||||
function addText(parent, str, font, color) {
|
||||
let t = parent.addText(str);
|
||||
t.font = font;
|
||||
t.textColor = color;
|
||||
return t;
|
||||
}
|
||||
|
||||
function addKVRow(stack, label, value, color) {
|
||||
let row = stack.addStack();
|
||||
row.layoutHorizontally();
|
||||
addText(row, label + " ", Font.systemFont(10), COLORS.label);
|
||||
row.addSpacer();
|
||||
addText(row, value, Font.boldMonospacedSystemFont(11), color);
|
||||
}
|
||||
|
||||
function addDivider(w) {
|
||||
let ctx = new DrawContext();
|
||||
ctx.opaque = false;
|
||||
ctx.respectScreenScale = true;
|
||||
ctx.size = new Size(320, 1);
|
||||
ctx.setFillColor(COLORS.border);
|
||||
ctx.fillRect(new Rect(0, 0, 320, 1));
|
||||
let img = w.addImage(ctx.getImage());
|
||||
img.imageSize = new Size(320, 1);
|
||||
}
|
||||
|
||||
function addFooter(w, data) {
|
||||
let f = w.addStack();
|
||||
f.layoutHorizontally();
|
||||
f.addSpacer();
|
||||
addText(f, "updated " + fmtTime(data.generatedAt), Font.regularMonospacedSystemFont(9), COLORS.dim);
|
||||
}
|
||||
|
||||
// -- Error --
|
||||
function buildError(w, msg) {
|
||||
w.setPadding(12, 12, 12, 12);
|
||||
addText(w, "AI Proxy Usage", Font.boldMonospacedSystemFont(12), COLORS.title);
|
||||
w.addSpacer(8);
|
||||
let e = addText(w, msg, Font.systemFont(11), COLORS.red);
|
||||
e.minimumScaleFactor = 0.7;
|
||||
}
|
||||
|
||||
// -- Main --
|
||||
async function main() {
|
||||
let w = new ListWidget();
|
||||
|
||||
let grad = new LinearGradient();
|
||||
grad.locations = [0, 1];
|
||||
grad.colors = [COLORS.bg, new Color("#0a0e14")];
|
||||
w.backgroundGradient = grad;
|
||||
w.url = API_URL;
|
||||
|
||||
let data = await fetchUsage();
|
||||
|
||||
if (!data) {
|
||||
buildError(w, "Failed to reach API");
|
||||
} else {
|
||||
let family = config.widgetFamily;
|
||||
if (family === "small") buildSmall(w, data);
|
||||
else if (family === "large") buildLarge(w, data);
|
||||
else buildMedium(w, data);
|
||||
}
|
||||
|
||||
w.refreshAfterDate = new Date(Date.now() + 30 * 60 * 1000);
|
||||
|
||||
if (config.runsInWidget) {
|
||||
Script.setWidget(w);
|
||||
} else {
|
||||
await w.presentLarge();
|
||||
}
|
||||
|
||||
Script.complete();
|
||||
}
|
||||
|
||||
await main();
|
||||
Reference in New Issue
Block a user