@robhowley/pi-openrouter 0.1.0 → 0.3.1

package/extensions/openrouter/overlay.ts

@@ -1,12 +1,46 @@
 import { matchesKey, truncateToWidth } from '@mariozechner/pi-tui';
 import type { Theme } from '@mariozechner/pi-coding-agent';
-import type { UsageSummary } from './types.js';
+import type { ModelStats, ProviderStats, UsageSummary } from './types.js';
+import { renderSpendBarChart } from './chart.js';
 import { usageCache } from './cache.js';
 
 const MIN_WIDTH = 44;
-const MAX_WIDTH = 80;
+
+// Formatting utilities (shared, not class methods)
+function fmtTokens(n: number): string {
+  if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)}B`;
+  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 n.toString();
+}
+
+function fmtCount(n: number): string {
+  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 n.toString();
+}
 
 export class UsageOverlayComponent {
+  // Column width constants (shared across all tables for alignment)
+  private static readonly COLS = {
+    model: 30,
+    spend: 9,
+    tokens: 9,
+    costPerM: 8,
+    reqs: 7,
+  };
+
+  private static readonly TABLE_INNER_WIDTH =
+    UsageOverlayComponent.COLS.model +
+    2 +
+    UsageOverlayComponent.COLS.spend +
+    2 +
+    UsageOverlayComponent.COLS.tokens +
+    2 +
+    UsageOverlayComponent.COLS.costPerM +
+    2 +
+    UsageOverlayComponent.COLS.reqs;
+
   private lines: string[];
   private theme: Theme;
   private onClose: () => void;
@@ -60,6 +94,7 @@ export class UsageOverlayComponent {
 
   render(width: number): string[] {
     // Center the overlay if terminal is wider
+    // Width includes 2 extra characters for visual padding (1 space on each side)
     const padding = Math.max(0, Math.floor((width - this.width) / 2));
     const pad = ' '.repeat(padding);
 
@@ -71,50 +106,16 @@ export class UsageOverlayComponent {
     // Rebuild lines to update "last refreshed" time from fresh cached data
     const freshSummary = usageCache.get('usage');
     this.lines = this.buildLines(freshSummary || this.summary, this.error, this.cachedMinutesAgo);
-    this.requestRender();
-  }
-
-  private calculateWidth(summary: UsageSummary | null): number {
-    if (!summary) return MIN_WIDTH;
-
-    let maxWidth = MIN_WIDTH;
-
-    // Calculate width needed for top models table
-    if (summary.topModels7d.length > 0 || summary.topModels30d.length > 0) {
-      const allModelNames = [
-        ...summary.topModels7d.map((m) => m.name),
-        ...summary.topModels30d.map((m) => m.name),
-      ];
-      const maxModelNameLen = allModelNames.reduce((max, name) => Math.max(max, name.length), 0);
-      const amountWidth = 8; // "$X.XX" + padding
-      const rowWidth = 2 + maxModelNameLen + 2 + amountWidth + 2 + amountWidth + 2;
-      maxWidth = Math.max(maxWidth, rowWidth);
-    }
-
-    // Calculate width needed for provider table
-    if (summary.byKey && Object.keys(summary.byKey).length > 0) {
-      const maxProviderLen = Object.keys(summary.byKey).reduce(
-        (max, name) => Math.max(max, name.length),
-        0,
-      );
-      const amountWidth = 8;
-      const rowWidth = 2 + maxProviderLen + 2 + amountWidth + 2;
-      maxWidth = Math.max(maxWidth, rowWidth);
-    }
-
-    // Calculate width needed for by-day table
-    if (summary.byDay && Object.keys(summary.byDay).length > 0) {
-      maxWidth = Math.max(maxWidth, 21);
+    // Only request render if still not disposed after potential async work
+    if (!this.isDisposed) {
+      this.requestRender();
     }
+  }
 
-    // Ensure we have room for main stats
-    // "Month $X.XX / $X.XX cap (XX%)" - max ~35 chars
-    // "burn ~$X.XX" = 13 chars + space + "Today $X.XX" = 11
-    // Need: 35 + 1 + 13 + 2 (borders) = 51, or 35 + 1 + 11 + 2 = 49
-    // Use 46 as it fits both cases with proper padding
-    maxWidth = Math.max(maxWidth, 46);
-
-    return Math.min(maxWidth, MAX_WIDTH);
+  private calculateWidth(_summary: UsageSummary | null): number {
+    // Use fixed table width for consistent layout across all views
+    const innerWidth = UsageOverlayComponent.TABLE_INNER_WIDTH;
+    return Math.max(MIN_WIDTH, innerWidth + 4) + 6; // +4 for borders, +6 for visual padding (3 on each side)
   }
 
   private buildLines(
@@ -127,7 +128,9 @@ export class UsageOverlayComponent {
 
     if (error) {
       lines.push(boxTop(this.width));
-      lines.push(row('OpenRouter Usage', this.width));
+      lines.push(
+        row(th.fg('accent', th.bold(' ◈ OpenRouter Usage  ·  /openrouter-usage')), this.width),
+      );
       lines.push(emptyRow(this.width));
       lines.push(row(th.fg('error', error), this.width));
       if (cachedMinutesAgo !== null) {
@@ -142,7 +145,9 @@ export class UsageOverlayComponent {
 
     if (!summary) {
       lines.push(boxTop(this.width));
-      lines.push(row('OpenRouter Usage', this.width));
+      lines.push(
+        row(th.fg('accent', th.bold(' ◈ OpenRouter Usage  ·  /openrouter-usage')), this.width),
+      );
       lines.push(emptyRow(this.width));
       lines.push(row(th.fg('dim', 'No usage data available.'), this.width));
       lines.push(boxBottom(this.width));
@@ -152,183 +157,305 @@ export class UsageOverlayComponent {
 
     // Summary view (subcommand views TODO)
     lines.push(boxTop(this.width));
-    lines.push(row('OpenRouter Usage', this.width));
+    lines.push(
+      row(th.fg('accent', th.bold(' ◈ OpenRouter Usage  ·  /openrouter-usage')), this.width),
+    );
     lines.push(emptyRow(this.width));
 
     // Month row: amount stays with label, cap percentage right-aligned
-    const monthLeftBase = `Month $${fmt(summary.month)} / $${fmt(summary.cap)}`;
-    const monthRight = `cap (${summary.cap > 0 ? Math.round((summary.month / summary.cap) * 100) : 0}%)`;
-    lines.push(rowRightAligned(monthLeftBase, monthRight, this.width));
-
-    // 7d row: amount stays with label, burn rate right-aligned
-    const weekLeftBase = `7d    $${fmt(summary.week)}`;
-    const weekRight = `burn ~$${fmt(summary.burnRate)}`;
-    lines.push(rowRightAligned(weekLeftBase, weekRight, this.width));
+    const monthLeftBase = ` Month $${fmt(summary.month)} / $${fmt(summary.cap)}`;
+    const monthPercent = summary.cap > 0 ? Math.round((summary.month / summary.cap) * 100) : 0;
+    const monthRightText = `cap (${monthPercent}%)`;
+    const monthColor = monthPercent < 60 ? 'success' : monthPercent < 100 ? 'warning' : 'error';
+    const monthRight =
+      monthPercent >= 100
+        ? th.bold(th.fg('error', monthRightText))
+        : th.fg(monthColor, monthRightText);
+    lines.push(rowRightAligned(monthLeftBase, monthRight + '  ', this.width));
+
+    // 7d row: amount stays with label, burn rate right-aligned with color coding
+    const weekLeftBase = ` 7d    $${fmt(summary.week)}`;
+    const burnRatio = summary.cap > 0 ? summary.burnRate / summary.cap : 0;
+    let weekRight: string;
+    if (burnRatio < 0.9) {
+      weekRight = th.fg('success', `burn ~$${fmt(summary.burnRate)}`);
+    } else if (burnRatio < 1.5) {
+      weekRight = th.fg('warning', `burn ~$${fmt(summary.burnRate)}`);
+    } else if (burnRatio < 2.0) {
+      weekRight = th.fg('error', `burn ~$${fmt(summary.burnRate)}`);
+    } else {
+      weekRight = th.bold(th.fg('error', `burn ~$${fmt(summary.burnRate)}`));
+    }
+    lines.push(rowRightAligned(weekLeftBase, weekRight + '  ', this.width));
 
     // Today row on its own line
-    const todayContent = `Today $${fmt(summary.today)}`;
-    lines.push(rowRightAligned(todayContent, '', this.width));
+    const todayContent = ` Today $${fmt(summary.today)}`;
+    lines.push(rowRightAligned(todayContent, '  ', this.width));
     lines.push(emptyRow(this.width));
 
-    // Top models - 7d and 30d as columns
-    if (summary.topModels7d.length > 0 || summary.topModels30d.length > 0) {
-      // Calculate column widths
-      const allModelNames = [
-        ...summary.topModels7d.map((m) => m.name),
-        ...summary.topModels30d.map((m) => m.name),
-      ];
-      const maxModelNameLen = allModelNames.reduce((max, name) => Math.max(max, name.length), 0);
-      const headerModelWidth = Math.max(7, maxModelNameLen);
-      const amountWidth = 8; // "$X.XX" + padding
-
-      lines.push(row('Top models', this.width));
-      lines.push(
-        row(
-          `  Model${' '.repeat(headerModelWidth - 5)}  ${'7d'.padStart(amountWidth)}  ${'30d'.padStart(amountWidth)}`,
-          this.width,
-        ),
-      );
-      lines.push(
-        row(
-          `  ${'-'.repeat(headerModelWidth)}  ${'-'.repeat(amountWidth)}  ${'-'.repeat(amountWidth)}`,
-          this.width,
-        ),
-      );
+    // Top models (7d table)
+    if (summary.topModels.length > 0) {
+      lines.push(...this.buildModelTableHeader('7d', th));
+      lines.push(...this.buildModelTableRows(summary.topModels, '7d'));
+      lines.push(emptyRow(this.width));
+    }
 
-      // Build spend map from 7d data
-      const spendMap = new Map<string, { spend7d: number; spend30d: number }>();
-      for (const m of summary.topModels7d) {
-        spendMap.set(m.name, { spend7d: m.spend, spend30d: 0 });
-      }
-      // Add/update with 30d data
-      for (const m of summary.topModels30d) {
-        const existing = spendMap.get(m.name);
-        spendMap.set(m.name, {
-          spend7d: existing?.spend7d ?? 0,
-          spend30d: m.spend,
-        });
-      }
+    // Top models (30d table)
+    if (summary.topModels.length > 0) {
+      lines.push(...this.buildModelTableHeader('30d', th));
+      lines.push(...this.buildModelTableRows(summary.topModels, '30d'));
+      lines.push(emptyRow(this.width));
+    }
 
-      // Sort by 30d spend (primary), then 7d (secondary)
-      const sortedModels = Array.from(spendMap.entries())
-        .sort((a, b) => b[1].spend30d - a[1].spend30d || b[1].spend7d - a[1].spend7d)
-        .slice(0, 6); // Show top 6 models
+    // By provider (30d table with tokens)
+    if (summary.byProvider.length > 0) {
+      lines.push(...this.buildProviderTable(summary.byProvider, th));
+      lines.push(emptyRow(this.width));
+    }
 
-      for (const [name, spends] of sortedModels) {
-        const spend7dStr = spends.spend7d > 0 ? `$${fmt(spends.spend7d)}` : '-';
-        const spend30dStr = spends.spend30d > 0 ? `$${fmt(spends.spend30d)}` : '-';
-        const modelLabel = name; // Don't truncate - let the row function handle it
-        lines.push(
-          row(
-            `  ${modelLabel}${' '.repeat(Math.max(0, headerModelWidth - name.length))}  ${spend7dStr.padStart(amountWidth)}  ${spend30dStr.padStart(amountWidth)}`,
-            this.width,
-          ),
-        );
+    // Usage by Day (30d bar chart)
+    if (summary.byDay && Object.keys(summary.byDay).length > 0) {
+      const chartOutput = renderSpendBarChart(summary.byDay, this.width);
+      lines.push(row(` Daily spend (30d)`, this.width));
+      // Split multi-line chart output and add each line
+      for (const chartLine of chartOutput.split('\n')) {
+        lines.push(row(chartLine, this.width));
       }
       lines.push(emptyRow(this.width));
     }
 
-    // Usage by Provider
-    if (summary.byKey && Object.keys(summary.byKey).length > 0) {
-      const sortedProviders = Object.entries(summary.byKey)
-        .sort((a, b) => b[1] - a[1])
-        .slice(0, 6);
-      const maxProviderLen = sortedProviders.reduce((max, [name]) => Math.max(max, name.length), 0);
-
-      lines.push(row('By provider', this.width));
-      lines.push(row(`  Provider${' '.repeat(maxProviderLen - 8)}  30d`, this.width));
-      lines.push(row(`  ${'-'.repeat(maxProviderLen)}  ------`, this.width));
+    // Last refresh time at the bottom
+    if (summary?.timestamp) {
+      const refreshDate = new Date(summary.timestamp);
+      const timestampStr = refreshDate.toLocaleTimeString();
+      lines.push(row(` Last refreshed: ${timestampStr}`, this.width));
+      lines.push(emptyRow(this.width));
 
-      for (const [provider, spend] of sortedProviders) {
+      // Warning if data is limited due to missing management key
+      if (!summary.hasActivityData) {
         lines.push(
           row(
-            `  ${provider}${' '.repeat(maxProviderLen - provider.length)}  $${fmt(spend)}`,
+            th.fg('warning', ' Data limited - use management key for model breakdowns'),
             this.width,
           ),
         );
+        lines.push(emptyRow(this.width));
       }
-      lines.push(emptyRow(this.width));
     }
 
-    // Usage by Day (7d)
-    if (summary.byDay && Object.keys(summary.byDay).length > 0) {
-      const sortedDays = Object.entries(summary.byDay)
-        .sort((a, b) => a[0].localeCompare(b[0]))
-        .slice(-7); // Last 7 days
-      const maxDateLen = sortedDays.reduce((max, [date]) => Math.max(max, date.length), 0);
+    lines.push(boxBottom(this.width));
+    lines.push(plainRow(th.fg('dim', 'Esc to close'), this.width));
+    return lines;
+  }
 
-      lines.push(row('By day', this.width));
-      lines.push(row(`  Date${' '.repeat(maxDateLen - 4)}  Amount`, this.width));
-      lines.push(row(`  ${'-'.repeat(maxDateLen)}  ------`, this.width));
+  // Formatting utilities
 
-      for (const [day, spend] of sortedDays) {
-        lines.push(
-          row(`  ${day}${' '.repeat(maxDateLen - day.length)}  $${fmt(spend)}`, this.width),
-        );
-      }
-      lines.push(emptyRow(this.width));
+  private fmtCostPerM(spend: number, tokens: number): string {
+    if (tokens === 0) return '-';
+    return `$${((spend / tokens) * 1_000_000).toFixed(2)}`;
+  }
+
+  // Shared table row builder
+  private buildTableRow<T>(data: T[], renderRow: (item: T) => string, theme?: Theme): string[] {
+    const { COLS } = UsageOverlayComponent;
+    const lines: string[] = [];
+
+    if (theme) {
+      lines.push(
+        row(
+          `    ${theme.fg('dim', '-'.repeat(COLS.model))}  ${theme.fg('dim', '-'.repeat(COLS.spend))}  ` +
+            `${theme.fg('dim', '-'.repeat(COLS.tokens))}  ${theme.fg('dim', '-'.repeat(COLS.costPerM))}  ` +
+            `${theme.fg('dim', '-'.repeat(COLS.reqs))}`,
+          this.width,
+        ),
+      );
     }
 
-    // Last refresh time at the bottom
-    if (summary?.timestamp) {
-      const refreshDate = new Date(summary.timestamp);
-      const timestampStr = refreshDate.toLocaleTimeString();
-      lines.push(row(`Last refreshed: ${timestampStr}`, this.width));
-      lines.push(emptyRow(this.width));
+    // Data rows
+    for (const item of data) {
+      lines.push(row(renderRow(item), this.width));
     }
 
-    lines.push(boxBottom(this.width));
-    lines.push(plainRow(th.fg('dim', 'Esc to close'), this.width));
     return lines;
   }
+
+  // Model table header builder
+  private buildModelTableHeader(label: '7d' | '30d', theme: Theme): string[] {
+    const { COLS } = UsageOverlayComponent;
+    const lines: string[] = [];
+
+    lines.push(row(` Top models (${label})`, this.width));
+    lines.push(
+      row(
+        `    ${'Model'.padEnd(COLS.model)}  ${`${label} $`.padStart(COLS.spend)}  ` +
+          `${`${label} tok`.padStart(COLS.tokens)}  ${'$/M'.padStart(COLS.costPerM)}  ` +
+          `${'reqs'.padStart(COLS.reqs)}`,
+        this.width,
+      ),
+    );
+    lines.push(
+      row(
+        `    ${theme.fg('dim', '-'.repeat(COLS.model))}  ${theme.fg('dim', '-'.repeat(COLS.spend))}  ` +
+          `${theme.fg('dim', '-'.repeat(COLS.tokens))}  ${theme.fg('dim', '-'.repeat(COLS.costPerM))}  ` +
+          `${theme.fg('dim', '-'.repeat(COLS.reqs))}`,
+        this.width,
+      ),
+    );
+
+    return lines;
+  }
+
+  // Model table row builder
+  private buildModelTableRows(models: ModelStats[], period: '7d' | '30d'): string[] {
+    const { COLS } = UsageOverlayComponent;
+    const is7d = period === '7d';
+
+    // Filter to models with spend in this period, sort by spend desc, limit to 4
+    const sorted = models
+      .filter((m) => (is7d ? m.spend7d > 0 : m.spend30d > 0))
+      .sort((a, b) => (is7d ? b.spend7d - a.spend7d : b.spend30d - a.spend30d))
+      .slice(0, 4);
+
+    const renderRow = (m: ModelStats) => {
+      const spend = is7d ? m.spend7d : m.spend30d;
+      const tokens = is7d ? m.tokens7d.total : m.tokens30d.total;
+      const reqs = is7d ? m.requests7d : m.requests30d;
+
+      return (
+        `    ${truncate(m.name, COLS.model).padEnd(COLS.model)}  ` +
+        `${`$${fmt(spend)}`.padStart(COLS.spend)}  ` +
+        `${fmtTokens(tokens).padStart(COLS.tokens)}  ` +
+        `${this.fmtCostPerM(spend, tokens).padStart(COLS.costPerM)}  ` +
+        `${fmtCount(reqs).padStart(COLS.reqs)}`
+      );
+    };
+
+    return this.buildTableRow(sorted, renderRow);
+  }
+
+  // Provider table builder
+  private buildProviderTable(providers: ProviderStats[], theme: Theme): string[] {
+    const { COLS } = UsageOverlayComponent;
+    const lines: string[] = [];
+
+    // Header
+    lines.push(row(` By provider (30d)`, this.width));
+    lines.push(
+      row(
+        `    ${'Provider'.padEnd(COLS.model)}  ${'$'.padStart(COLS.spend)}  ` +
+          `${'tok'.padStart(COLS.tokens)}  ${'$/M'.padStart(COLS.costPerM)}  ` +
+          `${'reqs'.padStart(COLS.reqs)}`,
+        this.width,
+      ),
+    );
+
+    // Data rows - top 4 providers
+    const sorted = providers.filter((p) => p.spend > 0).slice(0, 4);
+
+    const renderRow = (p: ProviderStats) => {
+      return (
+        `    ${truncate(p.name, COLS.model).padEnd(COLS.model)}  ` +
+        `${`$${fmt(p.spend)}`.padStart(COLS.spend)}  ` +
+        `${fmtTokens(p.tokens.total).padStart(COLS.tokens)}  ` +
+        `${this.fmtCostPerM(p.spend, p.tokens.total).padStart(COLS.costPerM)}  ` +
+        `${fmtCount(p.requests).padStart(COLS.reqs)}`
+      );
+    };
+
+    return [...lines, ...this.buildTableRow(sorted, renderRow, theme)];
+  }
 }
 
 // Helper functions
 function boxTop(width: number): string {
-  return `┌${'─'.repeat(width - 2)}┐`;
+  return `┌─${'─'.repeat(width - 4)}─┐`;
 }
 
 function boxBottom(width: number): string {
-  return `└${'─'.repeat(width - 2)}┘`;
+  return `└─${'─'.repeat(width - 4)}─┘`;
 }
 
 function emptyRow(width: number): string {
-  return `│${' '.repeat(width - 2)}│`;
+  return `│ ${' '.repeat(width - 4)} │`;
+}
+
+// Truncate string to visible width, skipping ANSI escape codes
+function truncateToVisibleWidth(str: string, maxVisibleWidth: number): string {
+  let visibleSoFar = 0;
+  let i = 0;
+
+  while (i < str.length && visibleSoFar < maxVisibleWidth) {
+    const char = str[i];
+
+    if (char === '\x1b') {
+      // Skip ANSI escape sequence
+      // eslint-disable-next-line no-control-regex
+      const ansiMatch = str.slice(i).match(/^\x1b\[[0-9;]*m/);
+      if (ansiMatch) {
+        i += ansiMatch[0].length;
+        continue;
+      }
+    }
+    visibleSoFar++;
+    i++;
+  }
+  return str.slice(0, i);
 }
 
 function row(content: string, width: number): string {
-  const truncated = content.length > width - 2 ? content.slice(0, width - 2) : content;
-  return `│${truncated}${' '.repeat(width - 2 - truncated.length)}│`;
+  const innerWidth = width - 4; // -4 for box borders + padding spaces
+  const truncated = truncateToVisibleWidth(content, innerWidth);
+  return `│ ${truncated}${' '.repeat(innerWidth - getVisibleWidth(truncated))} │`;
 }
 
 function plainRow(content: string, width: number): string {
-  const truncated = content.length > width - 2 ? content.slice(0, width - 2) : content;
-  return ` ${truncated}${' '.repeat(width - 1 - truncated.length)} `;
+  const innerWidth = width - 2; // -2 for outer spaces
+  const truncated = truncateToVisibleWidth(content, innerWidth);
+  return ` ${truncated}${' '.repeat(innerWidth - getVisibleWidth(truncated))} `;
 }
 
 // Helper to create a row with left content padded to align right content
 function rowRightAligned(leftContent: string, rightContent: string, width: number): string {
-  const boxInnerWidth = width - 2; // -2 for box borders
-  const rightWidth = rightContent.length;
+  const innerWidth = width - 4; // -4 for box borders + padding spaces
+  const rightVisibleWidth = getVisibleWidth(rightContent);
 
-  if (rightWidth === 0) {
+  if (rightVisibleWidth === 0) {
     // No right content - just pad left to full width
-    const leftPadded = leftContent.padEnd(boxInnerWidth, ' ');
+    const leftPadded = leftContent.padEnd(innerWidth, ' ');
     return row(leftPadded, width);
   }
 
   // Account for the space between left and right content
-  const remainingWidth = boxInnerWidth - rightWidth - 1;
+  const remainingWidth = innerWidth - rightVisibleWidth - 1;
+
+  // Get visible version of left content for truncation check
+  const leftVisible = getVisibleWidth(leftContent);
 
   // Pad left content to align right content
   const leftPadded =
-    leftContent.length > remainingWidth
+    leftVisible > remainingWidth
       ? leftContent.slice(0, remainingWidth - 3) + '...'
       : leftContent.padEnd(remainingWidth, ' ');
 
   return row(`${leftPadded} ${rightContent}`, width);
 }
 
+// Calculate visible width of a string, excluding ANSI escape codes
+function getVisibleWidth(str: string): number {
+  // Remove ANSI escape codes - handles CSI sequences (ESC [ ... m)
+  // eslint-disable-next-line no-control-regex
+  const ansiRegex = /\x1b\[[0-9;]*m/g;
+  const cleanStr = str.replace(ansiRegex, '');
+  return cleanStr.length;
+}
+
 function fmt(value: number): string {
   return value.toFixed(2);
 }
+
+// Truncate string to max length, adding ellipsis if needed
+function truncate(str: string, maxLen: number): string {
+  if (str.length <= maxLen) return str;
+  if (maxLen <= 3) return str.slice(0, maxLen);
+  return str.slice(0, maxLen - 3) + '...';
+}

package/extensions/openrouter/types.ts

@@ -1,15 +1,38 @@
+export interface TokenStats {
+  input: number;
+  output: number;
+  reasoning: number;
+  total: number;
+}
+
+export interface ModelStats {
+  name: string;
+  spend7d: number;
+  spend30d: number;
+  tokens7d: TokenStats;
+  tokens30d: TokenStats;
+  requests7d: number;
+  requests30d: number;
+}
+
+export interface ProviderStats {
+  name: string;
+  spend: number;
+  tokens: TokenStats;
+  requests: number;
+}
+
 export interface UsageSummary {
   today: number;
   week: number;
   month: number;
   cap: number;
   burnRate: number;
-  topModels7d: { name: string; spend: number }[];
-  topModels30d: { name: string; spend: number }[];
-  byModel?: Record<string, number>;
-  byKey?: Record<string, number>;
-  byDay?: Record<string, number>;
+  topModels: ModelStats[];
+  byProvider: ProviderStats[];
+  byDay: Record<string, number>;
   timestamp: number;
+  hasActivityData: boolean;
 }
 
 export interface CacheEntry<T> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robhowley/pi-openrouter",
-  "version": "0.1.0",
+  "version": "0.3.1",
   "type": "module",
   "description": "Terminal overlay for OpenRouter usage: caps, spend, burn rate, and model breakdowns.",
   "files": [
@@ -18,7 +18,8 @@
   "pi": {
     "extensions": [
       "./extensions/openrouter"
-    ]
+    ],
+    "image": "https://raw.githubusercontent.com/robhowley/pi-userland/main/packages/pi-openrouter/img/openrouter-usage-tui.png"
   },
   "repository": {
     "type": "git",