TokenPak Dashboard — Web Component Embed

Drop this custom element into any HTML page to embed the TokenPak telemetry dashboard.

Usage

<script src="/dashboard/static/embed/tokenpak-dashboard.js"></script>
<tokenpak-dashboard 
  data-source="http://localhost:17888"
  view="finops"
  theme="dark"
  date-range="7d"
  provider="anthropic">
</tokenpak-dashboard>

JavaScript API

const dashboard = document.querySelector('tokenpak-dashboard');

// Listen for events
dashboard.addEventListener('tp-ready', e => console.log('Ready:', e.detail));
dashboard.addEventListener('tp-filter-change', e => console.log('Filters:', e.detail));

// Programmatic control
dashboard.setFilters({ provider: 'anthropic', model: 'claude-sonnet-4-5' });
dashboard.refresh();
dashboard.setView('engineering');
console.log(dashboard.getState());

Theme Customization

tokenpak-dashboard {
  --tp-bg-primary: #0a0a0a;
  --tp-bg-card: #1a1a1a;
  --tp-text-primary: #e2e8f0;
  --tp-text-muted: #94a3b8;
  --tp-accent: #6366f1;
  --tp-positive: #22c55e;
  --tp-danger: #ef4444;
}