# 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;
    }