vibezcheck 0.5.7 → 0.5.9

package/README.md

@@ -1,133 +1,148 @@
 # ✦ VibezCheck
 
-> **The 1-Line Token Meter & Real-Time Billing Engine for AI.**  
-> Track tokens, compute real-time micro-costs, set profit margins, and bill customers with **0ms added latency** across Vercel AI SDK (v4, v5, v6, v7) and native LLM SDKs.
+> **Track AI token spend and bill users in real time. Setup in 1 line.**  
+> No database needed. No added latency.
 
 [![npm version](https://img.shields.io/npm/v/vibezcheck.svg?color=cb3837)](https://npmjs.org/package/vibezcheck)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 [![TypeScript](https://img.shields.io/badge/TypeScript-Strict-blue.svg)](https://www.typescriptlang.org/)
-[![Tests](https://img.shields.io/badge/Tests-94%20Passed-brightgreen.svg)]()
+[![Tests](https://img.shields.io/badge/Tests-95%20Passed-brightgreen.svg)]()
 [![Latency](https://img.shields.io/badge/Latency-0ms%20Added-orange.svg)]()
 
 ---
 
-### The 2-Line Promise
+### The 1-Line Setup
 
+**1. On your server:** wrap your model to track spending and set a profit margin
 ```typescript
-// 1. Server: Wrap your model with billing & inject telemetry into stream
-const model = vibezcheck('openai/gpt-4o-mini', { customer: 'cus_alex', pricing: { margin: 1.3 } });
-return vibezcheck.toResponse(result);
+const model = vibezcheck(openai('gpt-4o-mini'), { pricing: { margin: 1.3 } });
+```
 
-// 2. Client: Drop in zero-prop financial HUD & micro-receipts
-<VibezReceipt message={message} />
+**2. On your frontend:** drop in the component to see spendings in real time
+```tsx
 <VibezCheck messages={messages} />
 ```
 
+That’s it. You get real-time token tracking, live dollar costs, runaway loop protection, and a sleek spending HUD.
+
 ---
 
-## ⚡ What's New in v0.5.6
+## What VibezCheck does for you
 
-* **🪄 Zero-Prop Client UIs**: `<VibezReceipt message={message} />` and `<VibezCheck messages={messages} />` auto-derive model slugs, exact tokens, dollar micro-costs, profit margins (`+30% Margin`), and latency straight from the telemetry stream. No manual `model`, `margin`, or `cost` props required.
-* **📡 Universal Stream Injector (`vibezcheck.toResponse`)**: Intercepts AI SDK stream completion chunks to attach verified telemetry (`data-vibezcheck` & `message-metadata` SSE for v5/v6/v7, or `2:[{...}]` annotations for v4) with **0ms TTFB overhead**.
-* **🛡️ Zero Context Window Pollution**: Telemetry travels out-of-band. When AI SDK's `convertToModelMessages(messages)` prepares future conversation turns, metadata parts are automatically omitted—keeping your LLM context pure and preventing runaway token loops.
-* **🎨 Scoped Zero-Config Styling**: Built-in inline fallback styles guarantee that receipts and HUD components look polished out-of-the-box, even if your Tailwind configuration ignores `node_modules`.
+When you build an AI app, chatbot, or agent:
 
----
+* **👀 See spending in real time**: You and your users can see the exact cost (e.g. `$0.0014`) and token count for every turn as it streams in.
+* **🛡️ Never get a surprise $500 bill**: A built-in `$0.50` circuit breaker stops runaway prompts or infinite agent loops automatically before they drain your credit card.
+* **💰 Turn costs into profit**: Add `pricing: { margin: 1.3 }` to mark up wholesale API prices by 30%. You make money on every message without writing custom billing code.
+* **🤖 Works with multiple models**: If a conversation uses GPT-4o-mini, Claude 3.5, or Gemini, VibezCheck automatically breaks down the spending per model.
+* **🆓 Zero database required**: Test locally on `localhost:3000` with zero database tables and zero Stripe keys. It runs straight in memory.
+* **⚡ 0ms added latency**: Streaming is direct and transparent. Spending telemetry attaches cleanly at the very end of the stream without delaying first-token response time.
+* **🧹 Clean context window**: Telemetry stays out of your prompts. When messages get sent back to the model on the next turn, telemetry is automatically stripped so you never waste tokens.
 
-## 🚀 Key Features
+---
 
-* **⚡ 0ms Added Latency**: Direct transparent proxy stream; no external server redirects, no pre-buffering, and zero impact on first-token response time.
-* **🛡️ Built-in $0.50 Circuit Breaker**: Auto-trips if an agent or query exceeds the safety fuse box, preventing infinite loops and surprise $1,000 bills.
-* **🛟 In-Flight Abort Trapper**: Accurately meters and debits tokens even if the client closes their laptop lid or navigates away mid-stream.
-* **🪙 BigInt Nano-USD Precision**: Sub-cent financial math ($1 = $10^9$ Nano-USD) eliminating IEEE 754 floating-point drift.
-* **💰 1-Line Profit Margins**: Turn wholesale API costs into retail revenue with `pricing: { margin: 1.3 }` (+30% markup).
-* **🆓 Zero-DB Dev Mode**: Run locally on `localhost:3000` with NO database and NO Stripe keys required.
-* **💳 Pluggable SaaS Billing**: Credit wallets, top-ups, checkout sessions, customer portal, and user API keys (`vz_live_...`).
-* **🤖 Multi-Tool Agent Sessions**: Cumulative session budgets across multiple LLM steps, Python sandboxes, and web scrapers.
-* **🔄 100% Drop-In Polyfills**: Direct replacement for `@stripe/ai-sdk/meter`, `@stripe/ai-sdk/provider`, and `@stripe/token-meter`.
+## 🚀 End-to-End Chatbot Example (Next.js App Router)
 
----
+Here is a complete, copy-paste ready AI chatbot with live per-message spending receipts and the floating financial HUD:
 
-## 📦 Installation
+### 1. Install Dependencies
 
 ```bash
 npm install vibezcheck ai @ai-sdk/openai @ai-sdk/react stripe
 ```
 
----
-
-## ⚡ 1-Minute Quickstart: Next.js App Router
-
-### 1. Server Route (`app/api/chat/route.ts`)
-
-Wrap any model with `vibezcheck()`, and return the response using `vibezcheck.toResponse()`:
+### 2. Server Route (`app/api/chat/route.ts`)
 
 ```typescript
-import { streamText } from 'ai';
+import { convertToModelMessages, streamText, UIMessage } from 'ai';
 import { openai } from '@ai-sdk/openai';
 import { vibezcheck } from 'vibezcheck';
 
 export const maxDuration = 30;
 
 export async function POST(req: Request) {
-  const { messages } = await req.json();
+  const { messages }: { messages: UIMessage[] } = await req.json();
 
   const result = streamText({
-    // Wrap any provider (OpenAI, Anthropic, Google, DeepSeek, etc.)
+    // ✦ 1 Line: track costs, add 30% profit margin, and set $0.50 runaway safety fuse
     model: vibezcheck(openai('gpt-4o-mini'), {
-      customer: 'cus_alex',      // Stripe customer ID or user email
-      pricing: { margin: 1.3 },   // +30% profit margin
-      maxCostPerCallUSD: 0.50,    // Safety fuse box ($0.50 cap)
+      customer: 'user_alex@example.com', // User email or Stripe customer ID
+      pricing: { margin: 1.3 },         // +30% profit margin
+      maxCostPerCallUSD: 0.50,          // Auto-stops if call exceeds $0.50
     }),
-    messages,
+    instructions: 'You are a helpful AI assistant.',
+    messages: await convertToModelMessages(messages),
   });
 
-  // ✦ Universal telemetry stream injector (works with v4, v5, v6, and v7)
+  // ✦ Transmits stream with verified spending telemetry attached
   return vibezcheck.toResponse(result);
 }
 ```
 
-### 2. Frontend Client (`app/page.tsx`)
-
-Render message bubbles with `<VibezReceipt />` and float the aggregated `<VibezCheck />` HUD:
+### 3. Frontend Client (`app/page.tsx`)
 
 ```tsx
 'use client';
 
 import { useChat } from '@ai-sdk/react';
+import { DefaultChatTransport } from 'ai';
 import { useState } from 'react';
 import { VibezReceipt, VibezCheck } from 'vibezcheck/ui';
 
 export default function ChatPage() {
   const [input, setInput] = useState('');
-  const { messages, sendMessage } = useChat();
+  const { messages, sendMessage, status } = useChat({
+    transport: new DefaultChatTransport({
+      api: '/api/chat',
+    }),
+  });
 
   return (
-    <main className="flex flex-col w-full max-w-lg py-20 mx-auto px-4 min-h-screen">
-      <div className="flex-1 space-y-4 mb-24">
+    <div className="flex flex-col w-full max-w-lg py-20 mx-auto px-4 min-h-screen">
+      {/* Messages Stream */}
+      <div className="flex-1 space-y-4 mb-28">
         {messages.map((message) => (
-          <div key={message.id} className="p-3 rounded-xl border border-zinc-200 dark:border-zinc-800">
-            <div className="text-xs font-semibold uppercase tracking-wider text-zinc-400 mb-1">
+          <div
+            key={message.id}
+            className={`p-4 rounded-2xl border ${
+              message.role === 'user'
+                ? 'bg-zinc-100 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 ml-10'
+                : 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 mr-10 shadow-sm'
+            }`}
+          >
+            <div className="text-xs font-semibold uppercase tracking-wider text-zinc-400 mb-1.5">
               {message.role === 'user' ? 'You' : 'Assistant'}
             </div>
 
-            {/* Display message content */}
-            <div className="text-sm whitespace-pre-wrap">
+            {/* Message Text */}
+            <div className="text-sm whitespace-pre-wrap leading-relaxed">
               {message.parts
-                ? message.parts.map((part, i) => (part.type === 'text' ? part.text : null))
+                ? message.parts.map((part, index) => {
+                    switch (part.type) {
+                      case 'text':
+                        return <span key={index}>{part.text}</span>;
+                      default:
+                        return null;
+                    }
+                  })
                 : message.content}
             </div>
 
-            {/* ✦ Zero-Prop Micro-Receipt: auto-derives tokens, micro-cost, model, & latency */}
+            {/* ✦ 1 Line: Micro-Receipt showing tokens, micro-cost, model, and latency */}
             {message.role === 'assistant' && (
-              <div className="mt-2 flex justify-end">
+              <div className="mt-3 flex justify-end">
                 <VibezReceipt message={message} />
               </div>
             )}
           </div>
         ))}
+
+        {status === 'streaming' && (
+          <div className="text-xs text-zinc-400 italic">Assistant is typing...</div>
+        )}
       </div>
 
+      {/* Input Form */}
       <form
         onSubmit={(e) => {
           e.preventDefault();
@@ -135,242 +150,89 @@ export default function ChatPage() {
           sendMessage({ text: input });
           setInput('');
         }}
-        className="fixed bottom-0 left-0 right-0 p-4 bg-background/80 backdrop-blur-md"
+        className="fixed bottom-0 left-0 right-0 p-4 bg-white/80 dark:bg-zinc-950/80 backdrop-blur-md border-t border-zinc-200 dark:border-zinc-800"
       >
-        <div className="max-w-lg mx-auto">
+        <div className="max-w-lg mx-auto flex gap-2">
           <input
-            className="w-full p-3 rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 shadow-sm"
+            className="flex-1 p-3 text-sm rounded-xl border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 shadow-sm focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-100"
             value={input}
-            placeholder="Ask something..."
+            placeholder="Type your prompt..."
             onChange={(e) => setInput(e.target.value)}
           />
+          <button
+            type="submit"
+            disabled={status === 'streaming' || !input.trim()}
+            className="px-5 py-3 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 text-sm font-semibold rounded-xl hover:opacity-90 disabled:opacity-50 transition"
+          >
+            Send
+          </button>
         </div>
       </form>
 
-      {/* ✦ Zero-Prop Financial HUD: aggregated conversation tokens, cost, & active model */}
+      {/* ✦ 1 Line: Floating HUD showing real-time spending and tokens */}
       <VibezCheck messages={messages} />
-    </main>
+    </div>
   );
 }
 ```
 
----
-
-## 🧩 Zero-Prop Client Components
-
-Import from either `vibezcheck/ui` or `vibezcheck/react`:
-
-### 1. `<VibezReceipt />` (Per-Message Micro-Badge)
-
-Displays verified tokens, cost in USD, model slug, and latency under individual assistant messages.
-
-```tsx
-<VibezReceipt message={message} />
-```
-
-* **Zero Required Props**: Reads telemetry from `message.parts` (`data-vibezcheck`), `message.annotations`, and `message.metadata`.
-* **Variants**: `variant="pill"` (default), `variant="minimal"`, or `variant="card"`.
-* **Scoped Styling**: Ships with inline fallback styling so it never breaks even without Tailwind CSS.
-
-### 2. `<VibezCheck />` (Global Conversation HUD)
-
-Floating pill and expandable popover showing real-time conversation metrics.
+### 4. Environment Variables (`.env.local`)
 
-```tsx
-<VibezCheck messages={messages} />
+```env
+OPENAI_API_KEY=sk-...
 ```
 
-* **Aggregated Metrics**: Automatically sums input, output, and reasoning tokens across all messages.
-* **Auto-Derived Model & Margin**: Displays the active model badge (e.g. `gpt-4o-mini`) and configured markup (e.g. `+30% Margin`).
-* **Optional Top-Up**: Pass `onTopUp={() => openBillingModal()}` to display an integrated credit top-up button.
-
 ---
 
-## 🔄 Multi-Version Vercel AI SDK Compatibility
-
-`vibezcheck` provides seamless compatibility across every major generation of the Vercel AI SDK:
-
-### AI SDK v5, v6 & v7 (UI Message Stream)
-
-```typescript
-import { createUIMessageStreamResponse, toUIMessageStream, streamText } from 'ai';
-import { openai } from '@ai-sdk/openai';
-import { vibezcheck } from 'vibezcheck';
+## The UI Components (Zero Props Needed)
 
-export async function POST(req: Request) {
-  const { messages } = await req.json();
+Import from `vibezcheck/ui` or `vibezcheck/react`:
 
-  const result = streamText({
-    model: vibezcheck(openai('gpt-4o-mini'), { customer: 'cus_123' }),
-    messages,
-  });
+### 1. `<VibezCheck messages={messages} />`
 
-  // Recommended: pass result directly
-  return vibezcheck.toResponse(result);
+A floating financial HUD and expandable card:
+* **⇅ Unit Swap**: Click the `⇅` icon to switch between **Dollar Cost** (`$0.0028`) and **Tokens** (`1,420 tok`).
+* **Session vs Turn**: Switch between `[Session]` (total conversation spend) and `[Latest Turn]` (last reply).
+* **Multi-Model Breakdown**: If you use multiple models in one chat, it shows the exact split for each model.
+* **Customer Privacy by Default**: End-users only see their billed cost. Your wholesale costs and profit margins are hidden by default.
 
-  // Or wrap custom UI message stream responses:
-  // return vibezcheck.toResponse(
-  //   createUIMessageStreamResponse({
-  //     stream: toUIMessageStream({ stream: result.stream }),
-  //   })
-  // );
-}
-```
-
-### AI SDK v4 (Data Stream Protocol)
-
-```typescript
-import { streamText } from 'ai';
-import { openai } from '@ai-sdk/openai';
-import { vibezcheck } from 'vibezcheck';
-
-export async function POST(req: Request) {
-  const { messages } = await req.json();
-
-  const result = streamText({
-    model: vibezcheck(openai('gpt-4o'), { customer: 'cus_123' }),
-    messages,
-  });
-
-  // Automatically emits 2:[{"type":"vibezcheck", ...}] data stream annotations
-  return vibezcheck.toResponse(result);
-}
-```
-
----
-
-## 🛡️ Context Window Hygiene: How It Works
-
-A frequent hazard in LLM streaming is "telemetry leakage"—where usage data sent to the client gets accidentally included in subsequent conversation turns, causing runaway context growth and unnecessary token costs.
-
-VibezCheck prevents this by design:
-1. **Server Injection**: `vibezcheck.toResponse` injects telemetry out-of-band right before stream completion (`data-vibezcheck` and `message-metadata` SSE events).
-2. **Client Ingestion**: `<VibezReceipt />` and `<VibezCheck />` extract telemetry from message parts without mutating textual content.
-3. **Next Request**: When `convertToModelMessages(messages)` runs on subsequent requests, the AI SDK automatically discards transient metadata and data parts. **Zero telemetry tokens are sent to the LLM.**
-
----
-
-## 💳 Commercial SaaS Billing
-
-### 1. Stripe Top-Up Sessions (`BillingHelper`)
-
-Allow users to purchase pre-paid AI credits with Stripe Checkout:
-
-```typescript
-import { BillingHelper } from 'vibezcheck';
-
-const billing = new BillingHelper({ apiKey: process.env.STRIPE_SECRET_KEY });
-
-export async function POST(req: Request) {
-  const { customerId } = await req.json();
-
-  const checkoutUrl = await billing.createTopUpSession({
-    customerId,
-    amountCents: 2000, // $20.00
-    returnUrl: 'https://myapp.com/dashboard',
-  });
-
-  return Response.json({ url: checkoutUrl });
-}
-```
-
-### 2. Customer API Keys (`ApiKeyAuth`)
-
-Issue customer API keys (`vz_live_...`) backed by Stripe customer metadata—zero database required:
-
-```typescript
-import { ApiKeyAuth } from 'vibezcheck';
-import Stripe from 'stripe';
-
-const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
-const auth = new ApiKeyAuth(stripe);
-
-// 1. Generate key for customer
-const { apiKey } = await auth.createKey({
-  customerId: 'cus_123',
-  name: 'Production Key',
-});
-// => "vz_live_9f83b2..."
-
-// 2. Authenticate API requests in middleware
-export async function middleware(req: Request) {
-  const token = req.headers.get('Authorization')?.replace('Bearer ', '');
-  const verification = await auth.verifyKey(token);
-
-  if (!verification.valid) {
-    return new Response('Unauthorized', { status: 401 });
-  }
-
-  // verification.customerId is verified against Stripe!
-}
+```tsx
+<VibezCheck
+  messages={messages}
+  remainingBalanceUSD={10.00}
+  onTopUp={(amount) => console.log('User wants to top up credits:', amount)}
+/>
 ```
 
-### 3. Multi-Tool Agent Sessions (`AgentSession`)
-
-Set a hard $1.00 session budget across multiple LLM steps and external tools:
+### 2. `<VibezReceipt message={message} />`
 
-```typescript
-import { AgentSession, wrapTool } from 'vibezcheck';
-import { openai } from '@ai-sdk/openai';
-
-const session = new AgentSession({
-  customer: 'cus_agent_user',
-  sessionBudgetUSD: 1.00, // Hard ceiling for entire session
-});
-
-// Wrap external tools with financial tracking
-const webSearchTool = wrapTool({
-  name: 'web_search',
-  costUSD: 0.01,
-  execute: async ({ query }) => fetchSearch(query),
-});
-
-// Run LLM model bound to this session
-const sessionModel = session.model(openai('gpt-4o'));
+A small, elegant badge under each assistant message:
+```tsx
+<VibezReceipt message={message} />
+// Renders: ✦ $0.0001 · 31 tok · gpt-4o-mini
 ```
 
 ---
 
-## 🔄 100% Drop-In Compatibility with `@stripe/ai-sdk`
-
-If you are migrating from `@stripe/ai-sdk` or `@stripe/token-meter`, swap your imports:
+## Multi-Model Sessions (Automatic Breakdown)
 
-```typescript
-// Replace: import { meteredModel } from '@stripe/ai-sdk/meter';
-import { meteredModel } from 'vibezcheck/stripe/meter';
+If your app routes between different models (e.g. `gpt-4o-mini` for quick chat and `claude-3-5-sonnet` for coding):
 
-// Replace: import { stripe } from '@stripe/ai-sdk/provider';
-import { stripe } from 'vibezcheck/stripe/provider';
+VibezCheck automatically detects every model used and lists them in the HUD:
+* `gpt-4o-mini (1 turn)`: 31 tok · $0.0001
+* `claude-3-5-sonnet (1 turn)`: 420 tok · $0.0068
 
-// Replace: import { createTokenMeter } from '@stripe/token-meter';
-import { createTokenMeter } from 'vibezcheck/stripe/token-meter';
-```
+Click any model to see its specific spending.
 
 ---
 
-## 🛡️ Route Auditor CLI
-
-Audit your codebase to detect unmetered AI endpoints before shipping to production:
-
-```bash
-npx vibezcheck audit
-```
-
-### CI/CD Mode
-Fail the build if unmetered AI routes are detected:
-```bash
-npx vibezcheck audit --ci
-```
-
----
+## Need Stripe Billing? (Optional)
 
-## 📂 Examples
+When you want to charge real money, VibezCheck has built-in Stripe helpers:
 
-* **[Next.js App Router + OpenAI](examples/nextjs-app-router-openai)**: Modern AI SDK App Router implementation with 1-line token metering and `<VibezCheck />`.
-* **[Next.js 15 AI SaaS Starter](examples/nextjs-saas-starter)**: Complete SaaS template with Stripe Checkout, Top-Up Modal, and `<VibezReceipt />`.
-* **[Local Cost Meter](examples/01-local-cost-meter.ts)**: Offline micro-transaction calculations with BigInt Nano-USD precision.
-* **[Native OpenAI Streaming](examples/03-native-openai-stream.ts)**: Zero-latency stream wrapper for the official `openai` Node SDK.
-* **[Claude 3.7 Reasoning Tokens](examples/04-claude-thinking.ts)**: Tracking hidden thought tokens with Anthropic SDK.
+* **Prepaid Credits**: Let users buy credit balance with Stripe Checkout (`BillingHelper.createTopUpSession`).
+* **Customer API Keys**: Issue `vz_live_...` keys saved in Stripe customer metadata (`ApiKeyAuth`).
+* **Agent Session Ceilings**: Limit a multi-step agent to a hard $1.00 budget with `AgentSession`.
 
 ---
 

package/dist/react/index.d.mts

@@ -214,28 +214,19 @@ interface VibezReceiptProps {
 }
 declare const VibezReceipt: React__default.FC<VibezReceiptProps>;
 
-interface VibezBillingNotice {
-    status?: 'requires_payment' | 'limit_reached' | 'upgrade_required';
-    customerId?: string;
-    customerEmail?: string;
-    checkoutUrl?: string;
-    tokensUsed?: number;
-    costUSD?: number;
-    message?: string;
-}
-interface VibezBillingModalProps {
-    notice?: VibezBillingNotice | null;
-    isOpen?: boolean;
-    onClose?: () => void;
-    onSuccess?: () => void;
-    theme?: 'light' | 'dark';
-    testMode?: boolean;
+interface ModelUsageDetail {
+    model: string;
+    displayName: string;
+    tokens: number;
+    promptTokens: number;
+    completionTokens: number;
+    reasoningTokens: number;
+    cachedTokens: number;
+    billedUSD: number;
+    wholesaleUSD: number;
+    profitUSD: number;
+    turns: number;
 }
-/**
- * Intuitive React Modal for Stripe Top-Up, Card Registration & Paywall
- */
-declare const VibezBillingModal: React__default.FC<VibezBillingModalProps>;
-
 interface VibezCheckProps {
     /** Messages array from AI SDK useChat() — automatically aggregates tokens & costs */
     messages?: any[];
@@ -280,6 +271,7 @@ interface VibezCheckProps {
         profitUSD: number;
         totalTokens: number;
         isDevMode: boolean;
+        byModel?: Record<string, ModelUsageDetail>;
     }) => void;
     /** Whether popover is initially open (default: false) */
     defaultOpen?: boolean;
@@ -289,6 +281,8 @@ interface VibezCheckProps {
  *
  * An ultra-modern, interactive fintech AI financial HUD inspired by Aztec Web3 design.
  * Features:
+ * - Precise token accounting with zero double counting (server telemetry is authoritative)
+ * - Multi-model session breakdown (details and distributions across models)
  * - Huge hero typography with interactive USD ⇄ Token unit toggle (⇅)
  * - Segmented Session ⇄ Latest Turn pill switcher
  * - Interactive preset pills ([$5] [$10] [$25] [Max])
@@ -298,4 +292,4 @@ interface VibezCheckProps {
 declare function VibezCheck({ messages, events, model, margin, showWholesale, showMargin, totalCostUSD: manualCost, totalTokens: manualTokens, remainingBalanceUSD, position, theme, devMode, className, title, onTopUp, onCostUpdate, defaultOpen, }: VibezCheckProps): React__default.JSX.Element;
 declare const VibezPill: typeof VibezCheck;
 
-export { type CustomStorageAdapter, type SessionPersistenceMode, type SessionState, type SessionTurnRecord, type UseVibezChatOptions, VibezBillingModal, type VibezBillingModalProps, type VibezBillingNotice, type VibezChatMessage, VibezCheck, type VibezCheckProps, VibezPill, VibezReceipt, type VibezReceiptProps, VibezSessionBadge, type VibezSessionBadgeProps, VibezSessionContext, type VibezSessionContextValue, VibezSessionProvider, type VibezSessionProviderProps, VibezSessionWidget, type VibezSessionWidgetProps, useVibez, useVibezChat, useVibezSession };
+export { type CustomStorageAdapter, type ModelUsageDetail, type SessionPersistenceMode, type SessionState, type SessionTurnRecord, type UseVibezChatOptions, type VibezChatMessage, VibezCheck, type VibezCheckProps, VibezPill, VibezReceipt, type VibezReceiptProps, VibezSessionBadge, type VibezSessionBadgeProps, VibezSessionContext, type VibezSessionContextValue, VibezSessionProvider, type VibezSessionProviderProps, VibezSessionWidget, type VibezSessionWidgetProps, useVibez, useVibezChat, useVibezSession };

package/dist/react/index.d.ts

@@ -214,28 +214,19 @@ interface VibezReceiptProps {
 }
 declare const VibezReceipt: React__default.FC<VibezReceiptProps>;
 
-interface VibezBillingNotice {
-    status?: 'requires_payment' | 'limit_reached' | 'upgrade_required';
-    customerId?: string;
-    customerEmail?: string;
-    checkoutUrl?: string;
-    tokensUsed?: number;
-    costUSD?: number;
-    message?: string;
-}
-interface VibezBillingModalProps {
-    notice?: VibezBillingNotice | null;
-    isOpen?: boolean;
-    onClose?: () => void;
-    onSuccess?: () => void;
-    theme?: 'light' | 'dark';
-    testMode?: boolean;
+interface ModelUsageDetail {
+    model: string;
+    displayName: string;
+    tokens: number;
+    promptTokens: number;
+    completionTokens: number;
+    reasoningTokens: number;
+    cachedTokens: number;
+    billedUSD: number;
+    wholesaleUSD: number;
+    profitUSD: number;
+    turns: number;
 }
-/**
- * Intuitive React Modal for Stripe Top-Up, Card Registration & Paywall
- */
-declare const VibezBillingModal: React__default.FC<VibezBillingModalProps>;
-
 interface VibezCheckProps {
     /** Messages array from AI SDK useChat() — automatically aggregates tokens & costs */
     messages?: any[];
@@ -280,6 +271,7 @@ interface VibezCheckProps {
         profitUSD: number;
         totalTokens: number;
         isDevMode: boolean;
+        byModel?: Record<string, ModelUsageDetail>;
     }) => void;
     /** Whether popover is initially open (default: false) */
     defaultOpen?: boolean;
@@ -289,6 +281,8 @@ interface VibezCheckProps {
  *
  * An ultra-modern, interactive fintech AI financial HUD inspired by Aztec Web3 design.
  * Features:
+ * - Precise token accounting with zero double counting (server telemetry is authoritative)
+ * - Multi-model session breakdown (details and distributions across models)
  * - Huge hero typography with interactive USD ⇄ Token unit toggle (⇅)
  * - Segmented Session ⇄ Latest Turn pill switcher
  * - Interactive preset pills ([$5] [$10] [$25] [Max])
@@ -298,4 +292,4 @@ interface VibezCheckProps {
 declare function VibezCheck({ messages, events, model, margin, showWholesale, showMargin, totalCostUSD: manualCost, totalTokens: manualTokens, remainingBalanceUSD, position, theme, devMode, className, title, onTopUp, onCostUpdate, defaultOpen, }: VibezCheckProps): React__default.JSX.Element;
 declare const VibezPill: typeof VibezCheck;
 
-export { type CustomStorageAdapter, type SessionPersistenceMode, type SessionState, type SessionTurnRecord, type UseVibezChatOptions, VibezBillingModal, type VibezBillingModalProps, type VibezBillingNotice, type VibezChatMessage, VibezCheck, type VibezCheckProps, VibezPill, VibezReceipt, type VibezReceiptProps, VibezSessionBadge, type VibezSessionBadgeProps, VibezSessionContext, type VibezSessionContextValue, VibezSessionProvider, type VibezSessionProviderProps, VibezSessionWidget, type VibezSessionWidgetProps, useVibez, useVibezChat, useVibezSession };
+export { type CustomStorageAdapter, type ModelUsageDetail, type SessionPersistenceMode, type SessionState, type SessionTurnRecord, type UseVibezChatOptions, type VibezChatMessage, VibezCheck, type VibezCheckProps, VibezPill, VibezReceipt, type VibezReceiptProps, VibezSessionBadge, type VibezSessionBadgeProps, VibezSessionContext, type VibezSessionContextValue, VibezSessionProvider, type VibezSessionProviderProps, VibezSessionWidget, type VibezSessionWidgetProps, useVibez, useVibezChat, useVibezSession };