@agenthippo-ai/agenthippo 0.1.0

package/out/scripts/analytics/token-cost-trend-widget.js

@@ -0,0 +1,1062 @@
+#!/usr/bin/env node
+/* Copyright (c) AgentHippo.ai. All rights reserved. */
+/* eslint-disable no-console */
+const fs = require('fs');
+const path = require('path');
+
+const MAX_TRACE_FILES = 36;
+const MAX_ROWS = 45_000;
+const MOVING_AVG_WINDOW = 6;
+const MAX_SPIKES = 10;
+
+const TOKEN_KEYS_IN = [
+  'gen_ai.usage.input_tokens',
+  'llm.usage.prompt_tokens',
+  'llm.token_count.prompt',
+];
+const TOKEN_KEYS_OUT = [
+  'gen_ai.usage.output_tokens',
+  'llm.usage.completion_tokens',
+  'llm.token_count.completion',
+];
+const COST_KEYS = [
+  'gen_ai.cost.total_cost',
+  'llm.cost.total_cost',
+  'cost',
+];
+const MODEL_KEYS = [
+  'gen_ai.request.model',
+  'gen_ai.response.model',
+  'model',
+];
+
+function isOutputDisabled(filename) {
+  const raw = String(process.env.AGENTIDE_DISABLED_CHARTS || '').trim();
+  if (!raw) {
+    return false;
+  }
+  const disabled = new Set(
+    raw
+      .split(',')
+      .map((entry) => path.basename(entry.trim()).toLowerCase())
+      .filter(Boolean),
+  );
+  return disabled.has(path.basename(filename).toLowerCase());
+}
+
+function listTraceFiles(tracesDir) {
+  let entries = [];
+  try {
+    entries = fs.readdirSync(tracesDir, { withFileTypes: true });
+  } catch {
+    return [];
+  }
+
+  return entries
+    .filter((entry) => entry.isFile() && entry.name.endsWith('.jsonl'))
+    .map((entry) => path.join(tracesDir, entry.name))
+    .map((filePath) => ({
+      filePath,
+      mtime: fs.statSync(filePath).mtimeMs,
+    }))
+    .sort((a, b) => b.mtime - a.mtime)
+    .slice(0, MAX_TRACE_FILES)
+    .map((row) => row.filePath);
+}
+
+function toNumber(value) {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+  return 0;
+}
+
+function parseAttributeValue(value) {
+  if (!value || typeof value !== 'object') {
+    return null;
+  }
+  if (typeof value.stringValue === 'string') {
+    return value.stringValue;
+  }
+  if (value.intValue !== undefined) {
+    return toNumber(value.intValue);
+  }
+  if (value.doubleValue !== undefined) {
+    return toNumber(value.doubleValue);
+  }
+  if (typeof value.boolValue === 'boolean') {
+    return value.boolValue ? 1 : 0;
+  }
+  return null;
+}
+
+function attrsToMap(attributes) {
+  const out = Object.create(null);
+  if (!Array.isArray(attributes)) {
+    return out;
+  }
+  for (const item of attributes) {
+    if (!item || typeof item !== 'object') {
+      continue;
+    }
+    const key = String(item.key || '').trim();
+    if (!key) {
+      continue;
+    }
+    out[key] = parseAttributeValue(item.value);
+  }
+  return out;
+}
+
+function firstNumber(attrs, keys) {
+  for (const key of keys) {
+    const value = toNumber(attrs[key]);
+    if (value > 0) {
+      return value;
+    }
+  }
+  return 0;
+}
+
+function firstString(attrs, keys) {
+  for (const key of keys) {
+    const value = attrs[key];
+    if (typeof value === 'string' && value.trim()) {
+      return value.trim();
+    }
+  }
+  return '';
+}
+
+function extractFromRegex(raw, pattern) {
+  const text = typeof raw === 'string' ? raw : '';
+  if (!text) {
+    return '';
+  }
+  const match = text.match(pattern);
+  return match ? String(match[1] || '').trim() : '';
+}
+
+function extractAgentId(attrs) {
+  const explicit = firstString(attrs, [
+    'agent_id',
+    'gen_ai.agent.id',
+    'metadata.agent_id',
+  ]);
+  if (explicit) {
+    return explicit;
+  }
+
+  const headers = firstString(attrs, ['metadata.requester_custom_headers']);
+  const metadata = firstString(attrs, ['metadata.requester_metadata']);
+  return (
+    extractFromRegex(headers, /x-litellm-metadata-agent-id'?:\s*'([^']+)'/i) ||
+    extractFromRegex(metadata, /agent_id'?:\s*'([^']+)'/i) ||
+    ''
+  );
+}
+
+function extractSessionId(attrs) {
+  const headers = firstString(attrs, ['metadata.requester_custom_headers']);
+  const metadata = firstString(attrs, ['metadata.requester_metadata']);
+  return (
+    extractFromRegex(headers, /x-litellm-metadata-session-id'?:\s*'([^']+)'/i) ||
+    extractFromRegex(metadata, /session_id'?:\s*'([^']+)'/i) ||
+    ''
+  );
+}
+
+function chooseBucketSizeMs(rangeMs) {
+  const hour = 60 * 60 * 1000;
+  const day = 24 * hour;
+  if (rangeMs <= 36 * hour) {
+    return 15 * 60 * 1000;
+  }
+  if (rangeMs <= 14 * day) {
+    return hour;
+  }
+  if (rangeMs <= 90 * day) {
+    return 6 * hour;
+  }
+  return day;
+}
+
+function bucketLabel(ms, stepMs) {
+  const date = new Date(ms);
+  const hour = 60 * 60 * 1000;
+  const day = 24 * hour;
+  if (stepMs < day) {
+    return date.toLocaleString();
+  }
+  return date.toLocaleDateString();
+}
+
+function movingAverage(values, windowSize) {
+  const out = [];
+  let rollingSum = 0;
+  for (let i = 0; i < values.length; i++) {
+    rollingSum += values[i];
+    if (i >= windowSize) {
+      rollingSum -= values[i - windowSize];
+    }
+    const width = Math.min(windowSize, i + 1);
+    out.push(width > 0 ? rollingSum / width : 0);
+  }
+  return out;
+}
+
+function median(values) {
+  if (!values.length) {
+    return 0;
+  }
+  const sorted = [...values].sort((a, b) => a - b);
+  const half = Math.floor(sorted.length / 2);
+  if (sorted.length % 2 === 0) {
+    return (sorted[half - 1] + sorted[half]) / 2;
+  }
+  return sorted[half];
+}
+
+function loadRows(tracesDir, agentFilterId) {
+  const files = listTraceFiles(tracesDir);
+  const rows = [];
+  let tracesSeen = 0;
+  const traceSeenSet = new Set();
+
+  for (const filePath of files) {
+    if (rows.length >= MAX_ROWS) {
+      break;
+    }
+    let raw = '';
+    try {
+      raw = fs.readFileSync(filePath, 'utf8');
+    } catch {
+      continue;
+    }
+
+    for (const line of raw.split(/\r?\n/)) {
+      if (rows.length >= MAX_ROWS) {
+        break;
+      }
+      const trimmed = String(line || '').trim();
+      if (!trimmed) {
+        continue;
+      }
+      let parsed;
+      try {
+        parsed = JSON.parse(trimmed);
+      } catch {
+        continue;
+      }
+
+      const resourceSpans = Array.isArray(parsed?.resourceSpans) ? parsed.resourceSpans : [];
+      for (const resourceSpan of resourceSpans) {
+        const scopeSpans = Array.isArray(resourceSpan?.scopeSpans) ? resourceSpan.scopeSpans : [];
+        for (const scopeSpan of scopeSpans) {
+          const spans = Array.isArray(scopeSpan?.spans) ? scopeSpan.spans : [];
+          for (const span of spans) {
+            if (!span || typeof span !== 'object') {
+              continue;
+            }
+            const attrs = attrsToMap(span.attributes);
+            const inputTokens = firstNumber(attrs, TOKEN_KEYS_IN);
+            const outputTokens = firstNumber(attrs, TOKEN_KEYS_OUT);
+            const cost = firstNumber(attrs, COST_KEYS);
+            if (inputTokens <= 0 && outputTokens <= 0 && cost <= 0) {
+              continue;
+            }
+
+            const agentId = extractAgentId(attrs);
+            if (agentFilterId && agentId && agentId !== agentFilterId) {
+              continue;
+            }
+            if (agentFilterId && !agentId) {
+              continue;
+            }
+
+            const timestampMs = Math.round(toNumber(span.startTimeUnixNano) / 1_000_000);
+            if (!Number.isFinite(timestampMs) || timestampMs <= 0) {
+              continue;
+            }
+
+            const traceId = String(span.traceId || '').trim();
+            if (traceId && !traceSeenSet.has(traceId)) {
+              traceSeenSet.add(traceId);
+              tracesSeen += 1;
+            }
+
+            rows.push({
+              timestampMs,
+              traceId,
+              spanName: String(span.name || '(span)').trim() || '(span)',
+              model: firstString(attrs, MODEL_KEYS) || 'unknown',
+              agentId: agentId || 'unknown',
+              sessionId: extractSessionId(attrs) || '',
+              inputTokens,
+              outputTokens,
+              totalTokens: inputTokens + outputTokens,
+              cost,
+            });
+          }
+        }
+      }
+    }
+  }
+
+  rows.sort((a, b) => a.timestampMs - b.timestampMs);
+  return {
+    rows,
+    traceCount: tracesSeen,
+    fileCount: files.length,
+  };
+}
+
+function aggregateRows(rows) {
+  if (!rows.length) {
+    return null;
+  }
+  const minTs = rows[0].timestampMs;
+  const maxTs = rows[rows.length - 1].timestampMs;
+  const rangeMs = Math.max(1, maxTs - minTs);
+  const bucketSizeMs = chooseBucketSizeMs(rangeMs);
+  const start = Math.floor(minTs / bucketSizeMs) * bucketSizeMs;
+  const end = Math.ceil(maxTs / bucketSizeMs) * bucketSizeMs;
+
+  /** @type {Map<number, any>} */
+  const byBucket = new Map();
+  for (let t = start; t <= end; t += bucketSizeMs) {
+    byBucket.set(t, {
+      bucketStartMs: t,
+      inputTokens: 0,
+      outputTokens: 0,
+      totalTokens: 0,
+      cost: 0,
+      requests: 0,
+      traceIds: new Set(),
+      modelCounts: new Map(),
+      sessionCounts: new Map(),
+    });
+  }
+
+  for (const row of rows) {
+    const bucketStartMs = Math.floor(row.timestampMs / bucketSizeMs) * bucketSizeMs;
+    const bucket = byBucket.get(bucketStartMs);
+    if (!bucket) {
+      continue;
+    }
+    bucket.inputTokens += row.inputTokens;
+    bucket.outputTokens += row.outputTokens;
+    bucket.totalTokens += row.totalTokens;
+    bucket.cost += row.cost;
+    bucket.requests += 1;
+    if (row.traceId) {
+      bucket.traceIds.add(row.traceId);
+    }
+    bucket.modelCounts.set(row.model, (bucket.modelCounts.get(row.model) || 0) + row.totalTokens);
+    if (row.sessionId) {
+      bucket.sessionCounts.set(row.sessionId, (bucket.sessionCounts.get(row.sessionId) || 0) + row.totalTokens);
+    }
+  }
+
+  const buckets = [...byBucket.values()]
+    .sort((a, b) => a.bucketStartMs - b.bucketStartMs)
+    .map((bucket) => {
+      const topModel = [...bucket.modelCounts.entries()].sort((a, b) => b[1] - a[1])[0]?.[0] || 'unknown';
+      const topSession = [...bucket.sessionCounts.entries()].sort((a, b) => b[1] - a[1])[0]?.[0] || '';
+      return {
+        bucketStartMs: bucket.bucketStartMs,
+        label: bucketLabel(bucket.bucketStartMs, bucketSizeMs),
+        inputTokens: Math.round(bucket.inputTokens),
+        outputTokens: Math.round(bucket.outputTokens),
+        totalTokens: Math.round(bucket.totalTokens),
+        cost: Number(bucket.cost.toFixed(6)),
+        requests: Math.round(bucket.requests),
+        traceCount: bucket.traceIds.size,
+        topModel,
+        topSession,
+      };
+    });
+
+  const tokenSeries = buckets.map((bucket) => bucket.totalTokens);
+  const costSeries = buckets.map((bucket) => bucket.cost);
+  const tokenMa = movingAverage(tokenSeries, MOVING_AVG_WINDOW);
+  const costMa = movingAverage(costSeries, MOVING_AVG_WINDOW);
+  let cumulativeCost = 0;
+
+  for (let i = 0; i < buckets.length; i++) {
+    cumulativeCost += buckets[i].cost;
+    buckets[i].cumulativeCost = Number(cumulativeCost.toFixed(6));
+    buckets[i].tokenMovingAvg = Math.round(tokenMa[i]);
+    buckets[i].costMovingAvg = Number(costMa[i].toFixed(6));
+    if (i > 0) {
+      const previous = buckets[i - 1];
+      buckets[i].tokenDelta = buckets[i].totalTokens - previous.totalTokens;
+      buckets[i].costDelta = Number((buckets[i].cost - previous.cost).toFixed(6));
+    } else {
+      buckets[i].tokenDelta = 0;
+      buckets[i].costDelta = 0;
+    }
+  }
+
+  const nonZeroTokens = tokenSeries.filter((value) => value > 0);
+  const nonZeroCosts = costSeries.filter((value) => value > 0);
+  const tokenMedian = median(nonZeroTokens);
+  const costMedian = median(nonZeroCosts);
+  const tokenSpikeThreshold = tokenMedian > 0 ? tokenMedian * 2.2 : 0;
+  const costSpikeThreshold = costMedian > 0 ? costMedian * 2.2 : 0;
+
+  const spikes = buckets
+    .map((bucket, index) => {
+      const tokenSpike = tokenSpikeThreshold > 0 && bucket.totalTokens >= tokenSpikeThreshold;
+      const costSpike = costSpikeThreshold > 0 && bucket.cost >= costSpikeThreshold;
+      if (!tokenSpike && !costSpike) {
+        return null;
+      }
+      const score = (bucket.totalTokens / Math.max(1, tokenMedian)) + (bucket.cost / Math.max(0.000001, costMedian));
+      return {
+        index,
+        label: bucket.label,
+        bucketStartMs: bucket.bucketStartMs,
+        totalTokens: bucket.totalTokens,
+        cost: bucket.cost,
+        requests: bucket.requests,
+        topModel: bucket.topModel,
+        topSession: bucket.topSession,
+        tokenSpike,
+        costSpike,
+        score,
+      };
+    })
+    .filter(Boolean)
+    .sort((a, b) => b.score - a.score)
+    .slice(0, MAX_SPIKES);
+
+  const totalInputTokens = buckets.reduce((sum, bucket) => sum + bucket.inputTokens, 0);
+  const totalOutputTokens = buckets.reduce((sum, bucket) => sum + bucket.outputTokens, 0);
+  const totalCost = Number(buckets.reduce((sum, bucket) => sum + bucket.cost, 0).toFixed(6));
+  const totalRequests = buckets.reduce((sum, bucket) => sum + bucket.requests, 0);
+
+  return {
+    buckets,
+    bucketSizeMs,
+    tokenMedian,
+    costMedian,
+    tokenSpikeThreshold,
+    costSpikeThreshold,
+    spikes,
+    totals: {
+      inputTokens: totalInputTokens,
+      outputTokens: totalOutputTokens,
+      totalTokens: totalInputTokens + totalOutputTokens,
+      totalCost,
+      totalRequests,
+    },
+  };
+}
+
+function buildFallbackHtml(message) {
+  return `<!doctype html><html><head><meta charset="utf-8"><title>Token + Cost Trend</title></head><body style="font-family:ui-sans-serif,system-ui;background:#0f111a;color:#e5e7eb;margin:0;padding:20px;"><h2 style="margin:0 0 8px;">Token + Cost Trend</h2><p style="opacity:.85;">${message}</p></body></html>`;
+}
+
+function buildHtml(payload) {
+  const safeJson = JSON.stringify(payload)
+    .replace(/</g, '\\u003c')
+    .replace(/>/g, '\\u003e')
+    .replace(/&/g, '\\u0026')
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029');
+
+  return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Token + Cost Trend</title>
+  <style>
+    :root {
+      color-scheme: dark;
+      --bg: #0b1220;
+      --panel: #101a2f;
+      --soft: #16243c;
+      --border: #253a59;
+      --text: #e2e8f0;
+      --muted: #9ab0cf;
+      --token: #38bdf8;
+      --cost: #f59e0b;
+      --ma: #a78bfa;
+      --spike: #ef4444;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: var(--bg);
+      color: var(--text);
+      font: 13px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    }
+    .root {
+      display: grid;
+      grid-template-columns: minmax(620px, 1fr) minmax(280px, 360px);
+      gap: 10px;
+      min-height: 96vh;
+      padding: 12px;
+    }
+    .card {
+      border: 1px solid var(--border);
+      background: var(--panel);
+      border-radius: 12px;
+      overflow: hidden;
+    }
+    .head {
+      padding: 10px 12px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .title { font-size: 14px; font-weight: 700; }
+    .meta { color: var(--muted); font-size: 11px; margin-top: 2px; }
+    .pill {
+      border: 1px solid #2d5f8f;
+      color: #bfdbfe;
+      background: #112845;
+      border-radius: 999px;
+      padding: 2px 8px;
+      font-size: 11px;
+      white-space: nowrap;
+    }
+    .plot-wrap {
+      padding: 8px;
+      height: min(76vh, 840px);
+      overflow: auto;
+      background: #091224;
+    }
+    svg {
+      width: 100%;
+      min-height: 420px;
+      border-radius: 10px;
+      border: 1px solid #1f3151;
+      background: #071121;
+      display: block;
+    }
+    .legend {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      flex-wrap: wrap;
+      padding: 8px 12px;
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 11px;
+    }
+    .sw {
+      display: inline-block;
+      width: 11px;
+      height: 11px;
+      border-radius: 2px;
+      margin-right: 5px;
+      vertical-align: -1px;
+    }
+    .side {
+      display: grid;
+      grid-template-rows: auto auto 1fr auto;
+      min-height: 0;
+    }
+    .block {
+      padding: 10px 12px;
+      border-bottom: 1px solid var(--border);
+    }
+    .block:last-child { border-bottom: none; }
+    .stats {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 6px;
+    }
+    .stat {
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      background: var(--soft);
+      padding: 6px;
+      min-width: 0;
+    }
+    .k {
+      color: var(--muted);
+      text-transform: uppercase;
+      letter-spacing: .4px;
+      font-size: 10px;
+    }
+    .v {
+      margin-top: 2px;
+      font-weight: 700;
+      font-size: 13px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .row {
+      margin-top: 8px;
+      color: var(--muted);
+      font-size: 12px;
+      word-break: break-word;
+    }
+    .spikes {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: grid;
+      gap: 7px;
+      max-height: 34vh;
+      overflow: auto;
+    }
+    .spikes li {
+      border: 1px solid #2a3f60;
+      border-radius: 8px;
+      background: #11203a;
+      padding: 7px;
+      font-size: 11px;
+      line-height: 1.35;
+      color: #dbeafe;
+      cursor: pointer;
+    }
+    .spikes li:hover {
+      border-color: #3b82f6;
+    }
+    .tag {
+      display: inline-block;
+      border: 1px solid #7f1d1d;
+      background: #450a0a;
+      color: #fca5a5;
+      border-radius: 999px;
+      font-size: 10px;
+      padding: 1px 6px;
+      margin-right: 5px;
+      margin-top: 3px;
+    }
+    button {
+      border: 1px solid #315685;
+      background: #122642;
+      color: #dbeafe;
+      border-radius: 8px;
+      padding: 7px 10px;
+      font-size: 12px;
+      cursor: pointer;
+    }
+    button:hover { border-color: #60a5fa; }
+    button:disabled { opacity: .55; cursor: not-allowed; }
+    @media (max-width: 1080px) {
+      .root { grid-template-columns: 1fr; }
+      .plot-wrap { height: min(56vh, 560px); }
+      .spikes { max-height: 24vh; }
+    }
+  </style>
+</head>
+<body>
+  <div class="root">
+    <section class="card">
+      <div class="head">
+        <div>
+          <div class="title">Token + Cost Growth Over Time</div>
+          <div class="meta" id="chart-meta"></div>
+        </div>
+        <span class="pill">Interactive SVG</span>
+      </div>
+      <div class="plot-wrap">
+        <svg id="trend-svg" role="img" aria-label="Token and cost trend over time"></svg>
+      </div>
+      <div class="legend">
+        <span><span class="sw" style="background:var(--token)"></span>Tokens</span>
+        <span><span class="sw" style="background:var(--cost)"></span>Cost</span>
+        <span><span class="sw" style="background:var(--ma)"></span>Moving Avg</span>
+        <span><span class="sw" style="background:var(--spike)"></span>Spike</span>
+      </div>
+    </section>
+
+    <aside class="card side">
+      <div class="block">
+        <div class="title">Selected Bucket</div>
+        <div class="row" id="selected-label">Click any point on the chart.</div>
+        <div class="stats" id="selected-stats"></div>
+      </div>
+      <div class="block">
+        <button id="ask-ai-btn" type="button" disabled>Ask AI about this growth point</button>
+      </div>
+      <div class="block">
+        <div class="title">Detected Spikes</div>
+        <ul id="spike-list" class="spikes"></ul>
+      </div>
+      <div class="block">
+        <div class="meta">Tip: click spike rows to jump highlight in chart.</div>
+      </div>
+    </aside>
+  </div>
+
+  <script>
+    const payload = ${safeJson};
+    const buckets = Array.isArray(payload.buckets) ? payload.buckets : [];
+    const spikes = Array.isArray(payload.spikes) ? payload.spikes : [];
+
+    const svg = document.getElementById('trend-svg');
+    const chartMetaEl = document.getElementById('chart-meta');
+    const selectedLabelEl = document.getElementById('selected-label');
+    const selectedStatsEl = document.getElementById('selected-stats');
+    const spikeListEl = document.getElementById('spike-list');
+    const askAiBtn = document.getElementById('ask-ai-btn');
+
+    const num = (value) => Number(value || 0);
+    const fmtNum = (value) => num(value).toLocaleString();
+    const fmtMoney = (value) => '$' + num(value).toFixed(5);
+    const esc = (value) => String(value ?? '')
+      .replaceAll('&', '&amp;')
+      .replaceAll('<', '&lt;')
+      .replaceAll('>', '&gt;')
+      .replaceAll('"', '&quot;')
+      .replaceAll("'", '&#39;');
+
+    const state = {
+      selectedIndex: buckets.length > 0 ? buckets.length - 1 : -1,
+    };
+
+    function renderMeta() {
+      chartMetaEl.textContent =
+        buckets.length + ' buckets (' + payload.bucketLabel + ') | ' +
+        fmtNum(payload.totals.totalTokens) + ' tokens | ' +
+        fmtMoney(payload.totals.totalCost) + ' total cost';
+    }
+
+    function setSelected(index) {
+      if (index < 0 || index >= buckets.length) {
+        state.selectedIndex = -1;
+        selectedLabelEl.textContent = 'Click any point on the chart.';
+        selectedStatsEl.innerHTML = '';
+        askAiBtn.disabled = true;
+        return;
+      }
+      state.selectedIndex = index;
+      const bucket = buckets[index];
+      selectedLabelEl.textContent = bucket.label;
+      selectedStatsEl.innerHTML = [
+        '<div class="stat"><div class="k">Tokens</div><div class="v">' + esc(fmtNum(bucket.totalTokens)) + '</div></div>',
+        '<div class="stat"><div class="k">Cost</div><div class="v">' + esc(fmtMoney(bucket.cost)) + '</div></div>',
+        '<div class="stat"><div class="k">Delta Tokens</div><div class="v">' + esc((bucket.tokenDelta > 0 ? '+' : '') + fmtNum(bucket.tokenDelta)) + '</div></div>',
+        '<div class="stat"><div class="k">Delta Cost</div><div class="v">' + esc((bucket.costDelta > 0 ? '+' : '') + fmtMoney(bucket.costDelta)) + '</div></div>',
+        '<div class="stat"><div class="k">Requests</div><div class="v">' + esc(fmtNum(bucket.requests)) + '</div></div>',
+        '<div class="stat"><div class="k">Top Model</div><div class="v">' + esc(bucket.topModel || 'unknown') + '</div></div>',
+      ].join('');
+      askAiBtn.disabled = false;
+      renderChart();
+    }
+
+    function drawPath(points) {
+      if (!points.length) return '';
+      let d = 'M ' + points[0].x + ' ' + points[0].y;
+      for (let i = 1; i < points.length; i++) {
+        d += ' L ' + points[i].x + ' ' + points[i].y;
+      }
+      return d;
+    }
+
+    function renderChart() {
+      const width = Math.max(720, svg.clientWidth || 940);
+      const height = Math.max(420, svg.clientHeight || 520);
+      const margin = { top: 22, right: 62, bottom: 50, left: 72 };
+      const innerWidth = Math.max(220, width - margin.left - margin.right);
+      const innerHeight = Math.max(180, height - margin.top - margin.bottom);
+
+      svg.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
+      svg.innerHTML = '';
+      if (!buckets.length) {
+        return;
+      }
+
+      const maxTokens = Math.max(1, ...buckets.map((bucket) => num(bucket.totalTokens)), ...buckets.map((bucket) => num(bucket.tokenMovingAvg)));
+      const maxCost = Math.max(0.000001, ...buckets.map((bucket) => num(bucket.cost)), ...buckets.map((bucket) => num(bucket.costMovingAvg)));
+
+      const sx = (index) => margin.left + (index / Math.max(1, buckets.length - 1)) * innerWidth;
+      const syTokens = (value) => margin.top + innerHeight - (num(value) / maxTokens) * innerHeight;
+      const syCost = (value) => margin.top + innerHeight - (num(value) / maxCost) * innerHeight;
+
+      const make = (name) => document.createElementNS('http://www.w3.org/2000/svg', name);
+
+      const bg = make('rect');
+      bg.setAttribute('x', String(margin.left));
+      bg.setAttribute('y', String(margin.top));
+      bg.setAttribute('width', String(innerWidth));
+      bg.setAttribute('height', String(innerHeight));
+      bg.setAttribute('fill', '#081224');
+      bg.setAttribute('stroke', '#223452');
+      svg.appendChild(bg);
+
+      const xAxis = make('line');
+      xAxis.setAttribute('x1', String(margin.left));
+      xAxis.setAttribute('y1', String(margin.top + innerHeight));
+      xAxis.setAttribute('x2', String(margin.left + innerWidth));
+      xAxis.setAttribute('y2', String(margin.top + innerHeight));
+      xAxis.setAttribute('stroke', '#3a4f72');
+      svg.appendChild(xAxis);
+
+      const yAxisLeft = make('line');
+      yAxisLeft.setAttribute('x1', String(margin.left));
+      yAxisLeft.setAttribute('y1', String(margin.top));
+      yAxisLeft.setAttribute('x2', String(margin.left));
+      yAxisLeft.setAttribute('y2', String(margin.top + innerHeight));
+      yAxisLeft.setAttribute('stroke', '#3a4f72');
+      svg.appendChild(yAxisLeft);
+
+      const yAxisRight = make('line');
+      yAxisRight.setAttribute('x1', String(margin.left + innerWidth));
+      yAxisRight.setAttribute('y1', String(margin.top));
+      yAxisRight.setAttribute('x2', String(margin.left + innerWidth));
+      yAxisRight.setAttribute('y2', String(margin.top + innerHeight));
+      yAxisRight.setAttribute('stroke', '#3a4f72');
+      svg.appendChild(yAxisRight);
+
+      const tokenPoints = buckets.map((bucket, index) => ({ x: sx(index), y: syTokens(bucket.totalTokens) }));
+      const tokenMaPoints = buckets.map((bucket, index) => ({ x: sx(index), y: syTokens(bucket.tokenMovingAvg) }));
+      const costPoints = buckets.map((bucket, index) => ({ x: sx(index), y: syCost(bucket.cost) }));
+      const costMaPoints = buckets.map((bucket, index) => ({ x: sx(index), y: syCost(bucket.costMovingAvg) }));
+
+      const tokenPath = make('path');
+      tokenPath.setAttribute('d', drawPath(tokenPoints));
+      tokenPath.setAttribute('fill', 'none');
+      tokenPath.setAttribute('stroke', 'var(--token)');
+      tokenPath.setAttribute('stroke-width', '2');
+      svg.appendChild(tokenPath);
+
+      const costPath = make('path');
+      costPath.setAttribute('d', drawPath(costPoints));
+      costPath.setAttribute('fill', 'none');
+      costPath.setAttribute('stroke', 'var(--cost)');
+      costPath.setAttribute('stroke-width', '2');
+      svg.appendChild(costPath);
+
+      const maPath = make('path');
+      maPath.setAttribute('d', drawPath(tokenMaPoints));
+      maPath.setAttribute('fill', 'none');
+      maPath.setAttribute('stroke', 'var(--ma)');
+      maPath.setAttribute('stroke-width', '1.8');
+      maPath.setAttribute('stroke-dasharray', '5 4');
+      svg.appendChild(maPath);
+
+      const maCostPath = make('path');
+      maCostPath.setAttribute('d', drawPath(costMaPoints));
+      maCostPath.setAttribute('fill', 'none');
+      maCostPath.setAttribute('stroke', '#fcd34d');
+      maCostPath.setAttribute('stroke-width', '1.4');
+      maCostPath.setAttribute('stroke-dasharray', '3 4');
+      svg.appendChild(maCostPath);
+
+      for (let i = 0; i < buckets.length; i++) {
+        const bucket = buckets[i];
+        const x = sx(i);
+        const active = i === state.selectedIndex;
+        const spike = spikes.some((row) => row.index === i);
+
+        const hit = make('rect');
+        hit.setAttribute('x', String(x - 5));
+        hit.setAttribute('y', String(margin.top));
+        hit.setAttribute('width', '10');
+        hit.setAttribute('height', String(innerHeight));
+        hit.setAttribute('fill', 'transparent');
+        hit.style.cursor = 'pointer';
+        hit.addEventListener('click', () => setSelected(i));
+        svg.appendChild(hit);
+
+        const tokenDot = make('circle');
+        tokenDot.setAttribute('cx', String(x));
+        tokenDot.setAttribute('cy', String(syTokens(bucket.totalTokens)));
+        tokenDot.setAttribute('r', active ? '4' : '2.8');
+        tokenDot.setAttribute('fill', 'var(--token)');
+        if (active) {
+          tokenDot.setAttribute('stroke', '#ffffff');
+          tokenDot.setAttribute('stroke-width', '1.2');
+        }
+        const title = make('title');
+        title.textContent = bucket.label + '\\nTokens: ' + fmtNum(bucket.totalTokens) + '\\nCost: ' + fmtMoney(bucket.cost);
+        tokenDot.appendChild(title);
+        svg.appendChild(tokenDot);
+
+        const costDot = make('circle');
+        costDot.setAttribute('cx', String(x));
+        costDot.setAttribute('cy', String(syCost(bucket.cost)));
+        costDot.setAttribute('r', active ? '3.8' : '2.6');
+        costDot.setAttribute('fill', 'var(--cost)');
+        svg.appendChild(costDot);
+
+        if (spike) {
+          const marker = make('line');
+          marker.setAttribute('x1', String(x));
+          marker.setAttribute('y1', String(margin.top));
+          marker.setAttribute('x2', String(x));
+          marker.setAttribute('y2', String(margin.top + innerHeight));
+          marker.setAttribute('stroke', 'var(--spike)');
+          marker.setAttribute('stroke-opacity', active ? '0.7' : '0.35');
+          marker.setAttribute('stroke-dasharray', '2 4');
+          svg.appendChild(marker);
+        }
+      }
+
+      const leftLabel = make('text');
+      leftLabel.setAttribute('x', '16');
+      leftLabel.setAttribute('y', String(margin.top + innerHeight / 2));
+      leftLabel.setAttribute('transform', 'rotate(-90 16 ' + (margin.top + innerHeight / 2) + ')');
+      leftLabel.setAttribute('text-anchor', 'middle');
+      leftLabel.setAttribute('fill', '#9fb1cc');
+      leftLabel.setAttribute('font-size', '11');
+      leftLabel.textContent = 'Tokens';
+      svg.appendChild(leftLabel);
+
+      const rightLabel = make('text');
+      rightLabel.setAttribute('x', String(width - 14));
+      rightLabel.setAttribute('y', String(margin.top + innerHeight / 2));
+      rightLabel.setAttribute('transform', 'rotate(90 ' + (width - 14) + ' ' + (margin.top + innerHeight / 2) + ')');
+      rightLabel.setAttribute('text-anchor', 'middle');
+      rightLabel.setAttribute('fill', '#9fb1cc');
+      rightLabel.setAttribute('font-size', '11');
+      rightLabel.textContent = 'Cost';
+      svg.appendChild(rightLabel);
+
+      const xLabel = make('text');
+      xLabel.setAttribute('x', String(margin.left + innerWidth / 2));
+      xLabel.setAttribute('y', String(height - 14));
+      xLabel.setAttribute('text-anchor', 'middle');
+      xLabel.setAttribute('fill', '#9fb1cc');
+      xLabel.setAttribute('font-size', '11');
+      xLabel.textContent = 'Time';
+      svg.appendChild(xLabel);
+    }
+
+    function renderSpikeList() {
+      if (!spikes.length) {
+        spikeListEl.innerHTML = '<li>No major spikes detected for current window.</li>';
+        return;
+      }
+      spikeListEl.innerHTML = spikes.map((spike) => {
+        const tags = [
+          spike.tokenSpike ? '<span class="tag">TOKEN SPIKE</span>' : '',
+          spike.costSpike ? '<span class="tag">COST SPIKE</span>' : '',
+        ].join('');
+        return '<li data-index="' + spike.index + '">' +
+          '<div>' + esc(spike.label) + '</div>' +
+          '<div>tokens ' + esc(fmtNum(spike.totalTokens)) + ' | cost ' + esc(fmtMoney(spike.cost)) + '</div>' +
+          '<div>requests ' + esc(fmtNum(spike.requests)) + ' | model ' + esc(spike.topModel || 'unknown') + '</div>' +
+          tags +
+        '</li>';
+      }).join('');
+
+      spikeListEl.querySelectorAll('li[data-index]').forEach((item) => {
+        item.addEventListener('click', () => {
+          const index = Number(item.getAttribute('data-index') || '-1');
+          if (Number.isFinite(index) && index >= 0) {
+            setSelected(index);
+          }
+        });
+      });
+    }
+
+    askAiBtn.addEventListener('click', () => {
+      if (state.selectedIndex < 0 || state.selectedIndex >= buckets.length) {
+        return;
+      }
+      const bucket = buckets[state.selectedIndex];
+      const prompt = [
+        'Investigate token/cost growth point:',
+        '- Bucket: ' + bucket.label,
+        '- Tokens: ' + fmtNum(bucket.totalTokens),
+        '- Cost: ' + fmtMoney(bucket.cost),
+        '- Token delta vs previous: ' + (bucket.tokenDelta > 0 ? '+' : '') + fmtNum(bucket.tokenDelta),
+        '- Cost delta vs previous: ' + (bucket.costDelta > 0 ? '+' : '') + fmtMoney(bucket.costDelta),
+        '- Requests: ' + fmtNum(bucket.requests),
+        '- Top model: ' + (bucket.topModel || 'unknown'),
+        '- Top session: ' + (bucket.topSession || '(none)'),
+        '',
+        'Context:',
+        '- Bucket size: ' + payload.bucketLabel,
+        '- Median tokens per bucket: ' + fmtNum(payload.tokenMedian),
+        '- Median cost per bucket: ' + fmtMoney(payload.costMedian),
+        '',
+        'Please identify likely causes for this growth and propose concrete code-level optimizations to reduce token/cost while preserving output quality.',
+      ].join('\\n');
+      window.parent.postMessage({
+        source: 'agentide-wow-widget',
+        type: 'openChatWithPrompt',
+        prompt,
+      }, '*');
+      askAiBtn.textContent = 'Prompt sent';
+      setTimeout(() => {
+        askAiBtn.textContent = 'Ask AI about this growth point';
+      }, 1300);
+    });
+
+    renderMeta();
+    renderSpikeList();
+    setSelected(state.selectedIndex);
+    renderChart();
+    window.addEventListener('resize', () => renderChart());
+  </script>
+</body>
+</html>`;
+}
+
+function main() {
+  const home = process.env.HOME || '';
+  const tracesDir = process.env.AGENTIDE_TRACES_DIR || path.join(home, '.agent-hippo', 'analytics', 'traces');
+  const chartDir = process.env.AGENTIDE_CHART_DIR || path.join(home, '.agent-hippo', 'analytics', 'views', 'global', '__all', '__all', 'charts');
+  const outputPath = path.join(chartDir, 'token-cost-trend-widget.html');
+  const agentFilterId = String(process.env.AGENTIDE_ANALYTICS_AGENT_ID || '').trim();
+
+  fs.mkdirSync(chartDir, { recursive: true });
+  if (isOutputDisabled('token-cost-trend-widget.html')) {
+    try {
+      fs.unlinkSync(outputPath);
+    } catch {
+      // ignore missing file
+    }
+    return;
+  }
+
+  const { rows, traceCount, fileCount } = loadRows(tracesDir, agentFilterId);
+  if (!rows.length) {
+    const reason = agentFilterId
+      ? `No token/cost trace rows found for agent "${agentFilterId}".`
+      : 'No token/cost trace rows found yet.';
+    fs.writeFileSync(outputPath, buildFallbackHtml(reason), 'utf8');
+    return;
+  }
+
+  const aggregated = aggregateRows(rows);
+  if (!aggregated || !aggregated.buckets.length) {
+    fs.writeFileSync(outputPath, buildFallbackHtml('Trace rows were found, but no time buckets could be generated.'), 'utf8');
+    return;
+  }
+
+  const payload = {
+    version: 1,
+    generatedAt: new Date().toISOString(),
+    agentFilterId: agentFilterId || null,
+    rowCount: rows.length,
+    traceCount,
+    fileCount,
+    bucketSizeMs: aggregated.bucketSizeMs,
+    bucketLabel: aggregated.bucketSizeMs >= 24 * 60 * 60 * 1000
+      ? `${Math.round(aggregated.bucketSizeMs / (24 * 60 * 60 * 1000))} day`
+      : `${Math.round(aggregated.bucketSizeMs / (60 * 60 * 1000))} hour`,
+    totals: aggregated.totals,
+    tokenMedian: Math.round(aggregated.tokenMedian),
+    costMedian: Number(aggregated.costMedian.toFixed(6)),
+    tokenSpikeThreshold: Math.round(aggregated.tokenSpikeThreshold),
+    costSpikeThreshold: Number(aggregated.costSpikeThreshold.toFixed(6)),
+    spikes: aggregated.spikes,
+    buckets: aggregated.buckets,
+  };
+
+  fs.writeFileSync(outputPath, buildHtml(payload), 'utf8');
+}
+
+main();