vibezcheck 0.1.0 → 0.2.0

package/dist/react/index.mjs

@@ -0,0 +1,642 @@
+// src/react/context.tsx
+import { createContext, useState, useEffect, useCallback, useMemo } from "react";
+
+// src/pricing/table.ts
+var MODEL_PRICING_TABLE = {
+  // --- OpenAI ---
+  "gpt-5.6-sol": { inputPer1M: 4, outputPer1M: 20, cachedInputPer1M: 0.4 },
+  "gpt-5.6-terra": { inputPer1M: 2, outputPer1M: 12, cachedInputPer1M: 0.2 },
+  "gpt-5.6-luna": { inputPer1M: 0.2, outputPer1M: 1.2, cachedInputPer1M: 0.02 },
+  "gpt-5": { inputPer1M: 4, outputPer1M: 20, cachedInputPer1M: 0.4 },
+  "gpt-5-mini": { inputPer1M: 0.2, outputPer1M: 1.2, cachedInputPer1M: 0.02 },
+  "o1": { inputPer1M: 15, outputPer1M: 60, cachedInputPer1M: 7.5 },
+  "o1-mini": { inputPer1M: 1.1, outputPer1M: 4.4, cachedInputPer1M: 0.55 },
+  "o3": { inputPer1M: 15, outputPer1M: 60, cachedInputPer1M: 7.5 },
+  "o3-mini": { inputPer1M: 1.1, outputPer1M: 4.4, cachedInputPer1M: 0.55 },
+  "gpt-4o": { inputPer1M: 2.5, outputPer1M: 10, cachedInputPer1M: 1.25 },
+  "gpt-4o-mini": { inputPer1M: 0.15, outputPer1M: 0.6, cachedInputPer1M: 0.075 },
+  "gpt-4.1": { inputPer1M: 2, outputPer1M: 8, cachedInputPer1M: 1 },
+  "gpt-4.1-nano": { inputPer1M: 0.1, outputPer1M: 0.4, cachedInputPer1M: 0.05 },
+  "text-embedding-3-small": { inputPer1M: 0.02, outputPer1M: 0 },
+  "text-embedding-3-large": { inputPer1M: 0.13, outputPer1M: 0 },
+  // --- Anthropic ---
+  "claude-3-7-sonnet": { inputPer1M: 0.59, outputPer1M: 2.93, cachedInputPer1M: 0.3 },
+  "claude-sonnet-5": { inputPer1M: 2, outputPer1M: 10, cachedInputPer1M: 0.3 },
+  "claude-3-5-sonnet": { inputPer1M: 3, outputPer1M: 15, cachedInputPer1M: 0.3 },
+  "claude-3-5-haiku": { inputPer1M: 0.8, outputPer1M: 4, cachedInputPer1M: 0.08 },
+  "haiku-4.5": { inputPer1M: 1, outputPer1M: 5, cachedInputPer1M: 0.1 },
+  "claude-opus-5": { inputPer1M: 5, outputPer1M: 25, cachedInputPer1M: 1.5 },
+  "claude-3-opus": { inputPer1M: 15, outputPer1M: 75, cachedInputPer1M: 1.5 },
+  // --- Google Gemini ---
+  "gemini-3.7-flash": { inputPer1M: 0.75, outputPer1M: 3.75, cachedInputPer1M: 0.18 },
+  "gemini-3.1-pro": { inputPer1M: 2, outputPer1M: 12, cachedInputPer1M: 0.5 },
+  "gemini-3.5-flash": { inputPer1M: 1.5, outputPer1M: 9, cachedInputPer1M: 0.38 },
+  "gemini-3.1-flash-lite": { inputPer1M: 0.25, outputPer1M: 1.5, cachedInputPer1M: 0.06 },
+  "gemini-2.0-flash": { inputPer1M: 0.1, outputPer1M: 0.4, cachedInputPer1M: 0.025 },
+  "gemini-1.5-pro": { inputPer1M: 1.25, outputPer1M: 5, cachedInputPer1M: 0.3125 },
+  "gemini-1.5-flash": { inputPer1M: 0.075, outputPer1M: 0.3, cachedInputPer1M: 0.01875 },
+  // --- xAI Grok ---
+  "grok-4.6": { inputPer1M: 3, outputPer1M: 15 },
+  "grok-2": { inputPer1M: 2, outputPer1M: 10 },
+  "grok-2-vision": { inputPer1M: 2, outputPer1M: 10 },
+  "grok-beta": { inputPer1M: 5, outputPer1M: 15 },
+  // --- Mistral ---
+  "mistral-large-3": { inputPer1M: 2, outputPer1M: 6 },
+  "mistral-large-latest": { inputPer1M: 2, outputPer1M: 6 },
+  "codestral-latest": { inputPer1M: 0.3, outputPer1M: 0.9 },
+  "mistral-small-latest": { inputPer1M: 0.2, outputPer1M: 0.6 },
+  "ministral-8b-latest": { inputPer1M: 0.1, outputPer1M: 0.1 },
+  // --- Groq LPUs ---
+  "llama-3.3-70b-versatile": { inputPer1M: 0.59, outputPer1M: 0.79 },
+  "llama-3.1-8b-instant": { inputPer1M: 0.05, outputPer1M: 0.08 },
+  "deepseek-r1-distill-llama-70b": { inputPer1M: 0.75, outputPer1M: 0.99 },
+  "qwen-2.5-32b": { inputPer1M: 0.29, outputPer1M: 0.39 },
+  // --- DeepSeek ---
+  "deepseek-v4-pro": { inputPer1M: 0.66, outputPer1M: 1.98, cachedInputPer1M: 0.15 },
+  "deepseek-v4-flash": { inputPer1M: 0.22, outputPer1M: 0.66, cachedInputPer1M: 0.05 },
+  "deepseek-chat": { inputPer1M: 0.22, outputPer1M: 0.66, cachedInputPer1M: 0.05 },
+  "deepseek-reasoner": { inputPer1M: 0.66, outputPer1M: 1.98, cachedInputPer1M: 0.15 },
+  // --- Cohere ---
+  "command-r-plus": { inputPer1M: 2.5, outputPer1M: 10 },
+  "command-r": { inputPer1M: 0.15, outputPer1M: 0.6 }
+};
+var customPricingRegistry = {};
+function normalizeModelKey(rawModel) {
+  if (!rawModel) return "unknown";
+  let model = rawModel.toLowerCase().trim();
+  if (model.includes("/")) {
+    model = model.split("/")[1] || model;
+  }
+  model = model.replace(/-\d{8}$/, "");
+  model = model.replace(/-\d{4}-\d{2}-\d{2}$/, "");
+  return model;
+}
+function getModelPricing(modelName) {
+  const normalized = normalizeModelKey(modelName);
+  if (customPricingRegistry[normalized]) {
+    return customPricingRegistry[normalized];
+  }
+  if (customPricingRegistry[modelName]) {
+    return customPricingRegistry[modelName];
+  }
+  if (MODEL_PRICING_TABLE[normalized]) {
+    return MODEL_PRICING_TABLE[normalized];
+  }
+  if (MODEL_PRICING_TABLE[modelName]) {
+    return MODEL_PRICING_TABLE[modelName];
+  }
+  return {
+    inputPer1M: 1,
+    outputPer1M: 3,
+    cachedInputPer1M: 0.5
+  };
+}
+
+// src/pricing/calculator.ts
+function calculateCost(params) {
+  const rates = getModelPricing(params.model);
+  const inputTokens = params.inputTokens ?? 0;
+  const outputTokens = params.outputTokens ?? 0;
+  const reasoningTokens = params.reasoningTokens ?? 0;
+  const cachedTokens = params.cachedTokens ?? 0;
+  const regularInputTokens = Math.max(0, inputTokens - cachedTokens);
+  const regularInputCost = regularInputTokens / 1e6 * rates.inputPer1M;
+  const cachedRate = rates.cachedInputPer1M ?? rates.inputPer1M * 0.5;
+  const cachedInputCost = cachedTokens / 1e6 * cachedRate;
+  const inputCostUSD = regularInputCost + cachedInputCost;
+  const outputCostUSD = outputTokens / 1e6 * rates.outputPer1M;
+  const reasoningRate = rates.reasoningPer1M ?? rates.outputPer1M;
+  const reasoningCostUSD = reasoningTokens / 1e6 * reasoningRate;
+  const standardCacheCost = cachedTokens / 1e6 * rates.inputPer1M;
+  const cachedDiscountUSD = Math.max(0, standardCacheCost - cachedInputCost);
+  const totalUSD = inputCostUSD + outputCostUSD;
+  const markup = params.markupMultiplier ?? 1;
+  const retailUSD = markup !== 1 ? totalUSD * markup : void 0;
+  return {
+    inputCostUSD: Number(inputCostUSD.toFixed(8)),
+    outputCostUSD: Number(outputCostUSD.toFixed(8)),
+    reasoningCostUSD: reasoningTokens > 0 ? Number(reasoningCostUSD.toFixed(8)) : void 0,
+    cachedDiscountUSD: cachedTokens > 0 ? Number(cachedDiscountUSD.toFixed(8)) : void 0,
+    totalUSD: Number(totalUSD.toFixed(8)),
+    retailUSD: retailUSD ? Number(retailUSD.toFixed(8)) : void 0,
+    currency: rates.currency || "USD"
+  };
+}
+function calculateUsageCost(model, usage, markupMultiplier) {
+  return calculateCost({
+    model,
+    inputTokens: usage.inputTokens,
+    outputTokens: usage.outputTokens,
+    reasoningTokens: usage.reasoningTokens,
+    cachedTokens: usage.cachedTokens,
+    cacheWriteTokens: usage.cacheWriteTokens,
+    markupMultiplier
+  });
+}
+
+// src/react/context.tsx
+import { jsx } from "react/jsx-runtime";
+var INITIAL_USAGE = {
+  inputTokens: 0,
+  outputTokens: 0,
+  totalTokens: 0,
+  reasoningTokens: 0,
+  visibleOutputTokens: 0,
+  cachedTokens: 0
+};
+var INITIAL_COST = {
+  inputCostUSD: 0,
+  outputCostUSD: 0,
+  reasoningCostUSD: 0,
+  cachedDiscountUSD: 0,
+  totalUSD: 0,
+  currency: "USD"
+};
+var VibezSessionContext = createContext(null);
+function generateId() {
+  return "sess_" + Math.random().toString(36).substring(2, 11) + "_" + Date.now().toString(36);
+}
+var VibezSessionProvider = ({
+  children,
+  sessionId: customSessionId,
+  persist = "memory",
+  storage,
+  storageKey = "vibez_session_",
+  markupMultiplier,
+  onTurnRecorded
+}) => {
+  const [sessionId, setSessionId] = useState(() => customSessionId || generateId());
+  const [turnCount, setTurnCount] = useState(0);
+  const [sessionUsage, setSessionUsage] = useState(INITIAL_USAGE);
+  const [sessionCost, setSessionCost] = useState(INITIAL_COST);
+  const [byModel, setByModel] = useState({});
+  const [history, setHistory] = useState([]);
+  const fullStorageKey = useMemo(() => `${storageKey}${sessionId}`, [storageKey, sessionId]);
+  useEffect(() => {
+    if (persist === "memory") return;
+    try {
+      if (persist === "sessionStorage" && typeof window !== "undefined" && window.sessionStorage) {
+        const data = window.sessionStorage.getItem(fullStorageKey);
+        if (data) {
+          const parsed = JSON.parse(data);
+          setTurnCount(parsed.turnCount);
+          setSessionUsage(parsed.sessionUsage);
+          setSessionCost(parsed.sessionCost);
+          setByModel(parsed.byModel);
+          setHistory(parsed.history);
+        }
+      } else if (persist === "localStorage" && typeof window !== "undefined" && window.localStorage) {
+        const data = window.localStorage.getItem(fullStorageKey);
+        if (data) {
+          const parsed = JSON.parse(data);
+          setTurnCount(parsed.turnCount);
+          setSessionUsage(parsed.sessionUsage);
+          setSessionCost(parsed.sessionCost);
+          setByModel(parsed.byModel);
+          setHistory(parsed.history);
+        }
+      } else if (persist === "custom" && storage) {
+        const res = storage.getItem(fullStorageKey);
+        if (res instanceof Promise) {
+          res.then((data) => {
+            if (data) {
+              const parsed = JSON.parse(data);
+              setTurnCount(parsed.turnCount);
+              setSessionUsage(parsed.sessionUsage);
+              setSessionCost(parsed.sessionCost);
+              setByModel(parsed.byModel);
+              setHistory(parsed.history);
+            }
+          });
+        } else if (res) {
+          const parsed = JSON.parse(res);
+          setTurnCount(parsed.turnCount);
+          setSessionUsage(parsed.sessionUsage);
+          setSessionCost(parsed.sessionCost);
+          setByModel(parsed.byModel);
+          setHistory(parsed.history);
+        }
+      }
+    } catch {
+    }
+  }, [persist, fullStorageKey, storage]);
+  const saveState = useCallback(
+    (newState) => {
+      if (persist === "memory") return;
+      try {
+        const json = JSON.stringify(newState);
+        if (persist === "sessionStorage" && typeof window !== "undefined" && window.sessionStorage) {
+          window.sessionStorage.setItem(fullStorageKey, json);
+        } else if (persist === "localStorage" && typeof window !== "undefined" && window.localStorage) {
+          window.localStorage.setItem(fullStorageKey, json);
+        } else if (persist === "custom" && storage) {
+          storage.setItem(fullStorageKey, json);
+        }
+      } catch {
+      }
+    },
+    [persist, fullStorageKey, storage]
+  );
+  const recordTurn = useCallback(
+    ({ model, usage: rawUsage, metadata }) => {
+      const inputTokens = rawUsage.promptTokens ?? rawUsage.inputTokens ?? 0;
+      const outputTokens = rawUsage.completionTokens ?? rawUsage.outputTokens ?? 0;
+      const reasoningTokens = rawUsage.reasoningTokens ?? rawUsage.completionTokensDetails?.reasoning_tokens ?? 0;
+      const cachedTokens = rawUsage.cachedTokens ?? rawUsage.promptTokensDetails?.cached_tokens ?? 0;
+      const cacheWriteTokens = rawUsage.cacheWriteTokens ?? 0;
+      const turnUsage = {
+        inputTokens,
+        outputTokens,
+        totalTokens: rawUsage.totalTokens ?? inputTokens + outputTokens,
+        reasoningTokens: reasoningTokens > 0 ? reasoningTokens : void 0,
+        visibleOutputTokens: Math.max(0, outputTokens - reasoningTokens),
+        cachedTokens: cachedTokens > 0 ? cachedTokens : void 0,
+        cacheWriteTokens: cacheWriteTokens > 0 ? cacheWriteTokens : void 0
+      };
+      const turnCost = calculateUsageCost(model, turnUsage, markupMultiplier);
+      const record = {
+        id: "turn_" + Math.random().toString(36).substring(2, 9) + "_" + Date.now().toString(36),
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        model,
+        usage: turnUsage,
+        cost: turnCost,
+        metadata
+      };
+      const newTurnCount = turnCount + 1;
+      setTurnCount(newTurnCount);
+      const newUsage = {
+        inputTokens: sessionUsage.inputTokens + inputTokens,
+        outputTokens: sessionUsage.outputTokens + outputTokens,
+        totalTokens: sessionUsage.totalTokens + turnUsage.totalTokens,
+        reasoningTokens: (sessionUsage.reasoningTokens ?? 0) + (turnUsage.reasoningTokens ?? 0),
+        visibleOutputTokens: (sessionUsage.visibleOutputTokens ?? 0) + (turnUsage.visibleOutputTokens ?? outputTokens),
+        cachedTokens: (sessionUsage.cachedTokens ?? 0) + (turnUsage.cachedTokens ?? 0),
+        cacheWriteTokens: (sessionUsage.cacheWriteTokens ?? 0) + (turnUsage.cacheWriteTokens ?? 0)
+      };
+      setSessionUsage(newUsage);
+      const newCost = {
+        inputCostUSD: Number((sessionCost.inputCostUSD + turnCost.inputCostUSD).toFixed(6)),
+        outputCostUSD: Number((sessionCost.outputCostUSD + turnCost.outputCostUSD).toFixed(6)),
+        reasoningCostUSD: turnCost.reasoningCostUSD !== void 0 || sessionCost.reasoningCostUSD !== void 0 ? Number(
+          ((sessionCost.reasoningCostUSD ?? 0) + (turnCost.reasoningCostUSD ?? 0)).toFixed(6)
+        ) : void 0,
+        cachedDiscountUSD: turnCost.cachedDiscountUSD !== void 0 || sessionCost.cachedDiscountUSD !== void 0 ? Number(
+          ((sessionCost.cachedDiscountUSD ?? 0) + (turnCost.cachedDiscountUSD ?? 0)).toFixed(6)
+        ) : void 0,
+        totalUSD: Number((sessionCost.totalUSD + turnCost.totalUSD).toFixed(6)),
+        retailUSD: turnCost.retailUSD !== void 0 || sessionCost.retailUSD !== void 0 ? Number(((sessionCost.retailUSD ?? 0) + (turnCost.retailUSD ?? 0)).toFixed(6)) : void 0,
+        currency: turnCost.currency || "USD"
+      };
+      setSessionCost(newCost);
+      const prevModelStats = byModel[model] || {
+        turns: 0,
+        usage: { ...INITIAL_USAGE },
+        cost: { ...INITIAL_COST }
+      };
+      const newModelStats = {
+        turns: prevModelStats.turns + 1,
+        usage: {
+          inputTokens: prevModelStats.usage.inputTokens + inputTokens,
+          outputTokens: prevModelStats.usage.outputTokens + outputTokens,
+          totalTokens: prevModelStats.usage.totalTokens + turnUsage.totalTokens,
+          reasoningTokens: (prevModelStats.usage.reasoningTokens ?? 0) + (turnUsage.reasoningTokens ?? 0),
+          visibleOutputTokens: (prevModelStats.usage.visibleOutputTokens ?? 0) + (turnUsage.visibleOutputTokens ?? outputTokens),
+          cachedTokens: (prevModelStats.usage.cachedTokens ?? 0) + (turnUsage.cachedTokens ?? 0)
+        },
+        cost: {
+          inputCostUSD: Number(
+            (prevModelStats.cost.inputCostUSD + turnCost.inputCostUSD).toFixed(6)
+          ),
+          outputCostUSD: Number(
+            (prevModelStats.cost.outputCostUSD + turnCost.outputCostUSD).toFixed(6)
+          ),
+          totalUSD: Number((prevModelStats.cost.totalUSD + turnCost.totalUSD).toFixed(6)),
+          currency: turnCost.currency || "USD"
+        }
+      };
+      const newByModel = {
+        ...byModel,
+        [model]: newModelStats
+      };
+      setByModel(newByModel);
+      const newHistory = [...history, record];
+      setHistory(newHistory);
+      const updatedState = {
+        sessionId,
+        turnCount: newTurnCount,
+        sessionUsage: newUsage,
+        sessionCost: newCost,
+        byModel: newByModel,
+        history: newHistory
+      };
+      saveState(updatedState);
+      if (onTurnRecorded) {
+        onTurnRecorded(record, updatedState);
+      }
+      return record;
+    },
+    [
+      turnCount,
+      sessionUsage,
+      sessionCost,
+      byModel,
+      history,
+      sessionId,
+      markupMultiplier,
+      onTurnRecorded,
+      saveState
+    ]
+  );
+  const resetSession = useCallback(
+    (newSessionId) => {
+      const nextId = newSessionId || generateId();
+      setSessionId(nextId);
+      setTurnCount(0);
+      setSessionUsage(INITIAL_USAGE);
+      setSessionCost(INITIAL_COST);
+      setByModel({});
+      setHistory([]);
+      if (persist === "sessionStorage" && typeof window !== "undefined" && window.sessionStorage) {
+        window.sessionStorage.removeItem(fullStorageKey);
+      } else if (persist === "localStorage" && typeof window !== "undefined" && window.localStorage) {
+        window.localStorage.removeItem(fullStorageKey);
+      } else if (persist === "custom" && storage) {
+        storage.removeItem(fullStorageKey);
+      }
+    },
+    [persist, fullStorageKey, storage]
+  );
+  const value = useMemo(
+    () => ({
+      sessionId,
+      turnCount,
+      sessionUsage,
+      sessionCost,
+      byModel,
+      history,
+      recordTurn,
+      resetSession
+    }),
+    [sessionId, turnCount, sessionUsage, sessionCost, byModel, history, recordTurn, resetSession]
+  );
+  return /* @__PURE__ */ jsx(VibezSessionContext.Provider, { value, children });
+};
+
+// src/react/hooks.ts
+import { useContext } from "react";
+function useVibezSession() {
+  const context = useContext(VibezSessionContext);
+  if (!context) {
+    throw new Error(
+      "[vibezcheck/react] useVibezSession must be used within a <VibezSessionProvider>."
+    );
+  }
+  return context;
+}
+var useVibez = useVibezSession;
+
+// src/react/widget.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var VibezSessionWidget = ({
+  position = "bottom-right",
+  showCost = true,
+  showTokens = true,
+  showReasoning = true,
+  theme = "auto",
+  className,
+  style
+}) => {
+  const { sessionUsage, sessionCost, turnCount, byModel } = useVibezSession();
+  const [expanded, setExpanded] = useState2(false);
+  const hasUsage = sessionUsage.totalTokens > 0;
+  const isDark = theme === "dark" || theme === "auto" && typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+  const colors = {
+    bg: isDark ? "#171717" : "#ffffff",
+    text: isDark ? "#f5f5f5" : "#171717",
+    subtext: isDark ? "#a3a3a3" : "#737373",
+    border: isDark ? "#262626" : "#e5e5e5",
+    accent: "#8b5cf6",
+    reasoningBg: isDark ? "#2e1065" : "#f3e8ff",
+    reasoningText: isDark ? "#c084fc" : "#7c3aed"
+  };
+  const getPositionStyles = () => {
+    if (position === "inline") return {};
+    const base = { position: "fixed", zIndex: 9999 };
+    switch (position) {
+      case "bottom-right":
+        return { ...base, bottom: "20px", right: "20px" };
+      case "bottom-left":
+        return { ...base, bottom: "20px", left: "20px" };
+      case "top-right":
+        return { ...base, top: "20px", right: "20px" };
+      case "top-left":
+        return { ...base, top: "20px", left: "20px" };
+      default:
+        return base;
+    }
+  };
+  const formatTokens = (num) => {
+    if (num >= 1e6) return (num / 1e6).toFixed(1) + "M";
+    if (num >= 1e3) return (num / 1e3).toFixed(1) + "k";
+    return num.toString();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        ...getPositionStyles(),
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+        fontSize: "13px",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onClick: () => setExpanded(!expanded),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              padding: "8px 14px",
+              backgroundColor: colors.bg,
+              color: colors.text,
+              border: `1px solid ${colors.border}`,
+              borderRadius: "9999px",
+              boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
+              cursor: "pointer",
+              userSelect: "none",
+              transition: "all 0.15s ease"
+            },
+            children: [
+              /* @__PURE__ */ jsx2("span", { style: { color: colors.accent, fontWeight: "bold" }, children: "\u26A1" }),
+              showTokens && /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600 }, children: [
+                formatTokens(sessionUsage.totalTokens),
+                " tokens"
+              ] }),
+              showCost && /* @__PURE__ */ jsxs("span", { style: { color: colors.subtext }, children: [
+                "($",
+                sessionCost.totalUSD.toFixed(4),
+                ")"
+              ] }),
+              showReasoning && sessionUsage.reasoningTokens > 0 && /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  style: {
+                    fontSize: "11px",
+                    padding: "2px 6px",
+                    borderRadius: "6px",
+                    backgroundColor: colors.reasoningBg,
+                    color: colors.reasoningText,
+                    fontWeight: 500
+                  },
+                  children: [
+                    "\u{1F9E0} ",
+                    formatTokens(sessionUsage.reasoningTokens)
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx2("span", { style: { color: colors.subtext, fontSize: "10px" }, children: expanded ? "\u25B2" : "\u25BC" })
+            ]
+          }
+        ),
+        expanded && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginTop: "8px",
+              padding: "14px",
+              backgroundColor: colors.bg,
+              color: colors.text,
+              border: `1px solid ${colors.border}`,
+              borderRadius: "12px",
+              boxShadow: "0 10px 25px rgba(0,0,0,0.15)",
+              width: "260px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    fontWeight: 600,
+                    marginBottom: "8px",
+                    paddingBottom: "6px",
+                    borderBottom: `1px solid ${colors.border}`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx2("span", { children: "Live Session Usage" }),
+                    /* @__PURE__ */ jsxs("span", { style: { color: colors.subtext }, children: [
+                      turnCount,
+                      " turns"
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px", fontSize: "12px" }, children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                  /* @__PURE__ */ jsx2("span", { style: { color: colors.subtext }, children: "Prompt Input:" }),
+                  /* @__PURE__ */ jsx2("span", { children: sessionUsage.inputTokens.toLocaleString() })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                  /* @__PURE__ */ jsx2("span", { style: { color: colors.subtext }, children: "Output Tokens:" }),
+                  /* @__PURE__ */ jsx2("span", { children: sessionUsage.outputTokens.toLocaleString() })
+                ] }),
+                sessionUsage.reasoningTokens > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: colors.reasoningText }, children: [
+                  /* @__PURE__ */ jsx2("span", { children: "\u{1F9E0} Thinking Tokens:" }),
+                  /* @__PURE__ */ jsx2("span", { children: sessionUsage.reasoningTokens.toLocaleString() })
+                ] }),
+                sessionUsage.cachedTokens > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "#10b981" }, children: [
+                  /* @__PURE__ */ jsx2("span", { children: "\u26A1 Cached Tokens:" }),
+                  /* @__PURE__ */ jsx2("span", { children: sessionUsage.cachedTokens.toLocaleString() })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      justifyContent: "space-between",
+                      fontWeight: 600,
+                      marginTop: "6px",
+                      paddingTop: "6px",
+                      borderTop: `1px solid ${colors.border}`
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx2("span", { children: "Session Cost:" }),
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        "$",
+                        sessionCost.totalUSD.toFixed(5),
+                        " ",
+                        sessionCost.currency
+                      ] })
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/react/badge.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var VibezSessionBadge = ({
+  showCost = true,
+  showTokens = true,
+  className,
+  style
+}) => {
+  const { sessionUsage, sessionCost } = useVibezSession();
+  const formatTokens = (num) => {
+    if (num >= 1e6) return (num / 1e6).toFixed(1) + "M";
+    if (num >= 1e3) return (num / 1e3).toFixed(1) + "k";
+    return num.toString();
+  };
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      className,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "5px",
+        padding: "3px 8px",
+        fontSize: "11px",
+        fontWeight: 500,
+        borderRadius: "9999px",
+        backgroundColor: "rgba(139, 92, 246, 0.1)",
+        color: "#8b5cf6",
+        border: "1px solid rgba(139, 92, 246, 0.2)",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx3("span", { children: "\u26A1" }),
+        showTokens && /* @__PURE__ */ jsxs2("span", { children: [
+          formatTokens(sessionUsage.totalTokens),
+          " tok"
+        ] }),
+        showCost && /* @__PURE__ */ jsxs2("span", { children: [
+          "($",
+          sessionCost.totalUSD.toFixed(4),
+          ")"
+        ] })
+      ]
+    }
+  );
+};
+export {
+  VibezSessionBadge,
+  VibezSessionContext,
+  VibezSessionProvider,
+  VibezSessionWidget,
+  useVibez,
+  useVibezSession
+};
+//# sourceMappingURL=index.mjs.map