@tangle-network/sandbox-ui 0.14.0 → 0.15.2

package/dist/chunk-ENMWGVDL.js

@@ -0,0 +1,858 @@
+import {
+  cn
+} from "./chunk-EI44GEQ5.js";
+
+// src/dashboard/model-picker.tsx
+import * as React from "react";
+import { ChevronDown, Search, Sparkles, Zap, Brain, Star, Loader2 } from "lucide-react";
+import * as Popover from "@radix-ui/react-dropdown-menu";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function canonicalModelId(model) {
+  const id = model.id;
+  if (id.includes("/")) return id;
+  const provider = model._provider ?? model.provider;
+  return provider ? `${provider}/${id}` : id;
+}
+function formatPricing(pricing) {
+  const prompt = Number(pricing?.prompt ?? 0);
+  const completion = Number(pricing?.completion ?? 0);
+  if (!prompt && !completion) return null;
+  const fmt = (n) => {
+    const perM = n * 1e6;
+    if (perM === 0) return "0";
+    if (perM >= 1) return `$${perM.toFixed(2)}`;
+    return `$${perM.toFixed(2)}`;
+  };
+  return `${fmt(prompt)} / ${fmt(completion)} per 1M`;
+}
+function formatContext(ctx) {
+  if (!ctx) return null;
+  if (ctx >= 1e6) return `${(ctx / 1e6).toFixed(1)}M ctx`;
+  if (ctx >= 1e3) return `${Math.round(ctx / 1e3)}k ctx`;
+  return `${ctx} ctx`;
+}
+var DEFAULT_PRESETS = [
+  {
+    id: "fast",
+    label: "Fast",
+    hint: "Cheapest, lowest latency",
+    icon: Zap,
+    match: (models) => {
+      const ids = models.map(canonicalModelId);
+      return ids.find((m) => /gpt-5\.\d+-mini$/.test(m)) ?? ids.find((m) => /gpt-5-mini$/.test(m)) ?? ids.find((m) => m.endsWith("/claude-haiku-4.5")) ?? ids.find((m) => /haiku/.test(m));
+    }
+  },
+  {
+    id: "balanced",
+    label: "Balanced",
+    hint: "Best value for most chat",
+    icon: Sparkles,
+    match: (models) => {
+      const ids = models.map(canonicalModelId);
+      return ids.find((m) => /^openai\/gpt-5\.\d+$/.test(m)) ?? ids.find((m) => /^openai\/gpt-5$/.test(m)) ?? ids.find((m) => m.endsWith("/claude-sonnet-4-6")) ?? ids.find((m) => /sonnet/.test(m));
+    }
+  },
+  {
+    id: "best",
+    label: "Best",
+    hint: "Hardest reasoning, highest quality",
+    icon: Brain,
+    match: (models) => {
+      const ids = models.map(canonicalModelId);
+      return ids.find((m) => /^openai\/gpt-5\.\d+-pro$/.test(m)) ?? ids.find((m) => /^openai\/o3$/.test(m)) ?? ids.find((m) => m.endsWith("/claude-opus-4-7")) ?? ids.find((m) => /opus/.test(m));
+    }
+  }
+];
+function ModelPicker({
+  value,
+  onChange,
+  models,
+  loading = false,
+  recents,
+  presets = DEFAULT_PRESETS,
+  excludeProviders,
+  modalities,
+  variant = "field",
+  label = "Model",
+  placeholder = "Choose a model",
+  className,
+  triggerClassName,
+  disabled
+}) {
+  const [query, setQuery] = React.useState("");
+  const [open, setOpen] = React.useState(false);
+  const filtered = React.useMemo(() => {
+    const excluded = new Set((excludeProviders ?? []).map((p) => p.toLowerCase()));
+    const allowedModalities = modalities ? new Set(modalities) : null;
+    const q = query.trim().toLowerCase();
+    return models.filter((m) => {
+      const provider = (m._provider ?? m.provider ?? "").toLowerCase();
+      if (excluded.has(provider)) return false;
+      if (allowedModalities && m.architecture?.modality && !allowedModalities.has(m.architecture.modality)) return false;
+      if (!q) return true;
+      const id = canonicalModelId(m).toLowerCase();
+      const name = (m.name ?? "").toLowerCase();
+      return id.includes(q) || name.includes(q) || provider.includes(q);
+    });
+  }, [models, query, modalities, excludeProviders]);
+  const grouped = React.useMemo(() => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const m of filtered) {
+      const provider = m._provider ?? m.provider ?? "other";
+      const list = groups.get(provider);
+      if (list) list.push(m);
+      else groups.set(provider, [m]);
+    }
+    return Array.from(groups.entries()).sort(([a], [b]) => a.localeCompare(b));
+  }, [filtered]);
+  const current = React.useMemo(
+    () => models.find((m) => canonicalModelId(m) === value),
+    [models, value]
+  );
+  const currentLabel = current?.name ?? current?.id ?? value;
+  const recentIds = React.useMemo(() => {
+    if (!recents?.length) return [];
+    const lookup = new Map(models.map((m) => [canonicalModelId(m), m]));
+    return recents.map((id) => lookup.get(id)).filter((m) => Boolean(m)).slice(0, 4);
+  }, [recents, models]);
+  const handleSelect = (id) => {
+    onChange(id);
+    setOpen(false);
+    setQuery("");
+  };
+  const trigger = variant === "pill" ? /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled,
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-full border border-border bg-card",
+        "px-2.5 py-1 text-xs font-medium text-foreground",
+        "transition-colors duration-[var(--transition-fast)]",
+        "hover:border-primary/30 hover:bg-accent/30",
+        "focus:outline-none focus:border-primary/40",
+        "data-[state=open]:border-primary/40 data-[state=open]:bg-accent/30",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        className,
+        triggerClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Sparkles, { className: "h-3 w-3 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate max-w-[160px]", children: currentLabel || placeholder }),
+        /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 text-muted-foreground transition-transform data-[state=open]:rotate-180" })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled,
+      className: cn(
+        "flex w-full items-center justify-between gap-2 rounded-[var(--radius-md)]",
+        "border border-border bg-card px-3 py-2.5 text-sm text-left",
+        "transition-colors duration-[var(--transition-fast)]",
+        "hover:border-primary/20 hover:bg-accent/30",
+        "focus:outline-none focus:border-primary/30",
+        "data-[state=open]:border-primary/30 data-[state=open]:bg-accent/30",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        className,
+        triggerClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("truncate", current ? "text-foreground font-medium" : "text-muted-foreground"), children: currentLabel || placeholder }),
+        /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform data-[state=open]:rotate-180" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn(variant === "field" ? "space-y-1.5" : "inline-flex", variant === "field" ? className : void 0), children: [
+    variant === "field" && label && /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-muted-foreground uppercase tracking-[0.06em]", children: label }),
+    /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+        Popover.Content,
+        {
+          sideOffset: 4,
+          align: variant === "pill" ? "start" : "start",
+          className: cn(
+            "z-50 w-[var(--radix-dropdown-menu-trigger-width)] min-w-[320px] max-w-[460px]",
+            "max-h-[440px] overflow-hidden flex flex-col",
+            "rounded-[var(--radius-md)] border border-border bg-card shadow-[var(--shadow-dropdown)]",
+            "data-[state=open]:animate-in data-[state=closed]:animate-out",
+            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [
+              /* @__PURE__ */ jsx(Search, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  value: query,
+                  onChange: (e) => setQuery(e.target.value),
+                  placeholder: "Search models...",
+                  autoFocus: true,
+                  className: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+                }
+              ),
+              loading && /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-muted-foreground" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+              !query && presets.length > 0 && /* @__PURE__ */ jsx(Section, { label: "Presets", children: presets.map((preset) => {
+                const Icon = preset.icon ?? Star;
+                const matchedId = preset.match(models);
+                if (!matchedId) return null;
+                const matched = models.find((m) => canonicalModelId(m) === matchedId);
+                const isCurrent = matchedId === value;
+                return /* @__PURE__ */ jsxs(
+                  PickerItem,
+                  {
+                    onSelect: () => handleSelect(matchedId),
+                    active: isCurrent,
+                    children: [
+                      /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 text-[var(--accent-text)]" }),
+                      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: preset.label }),
+                          /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground truncate", children: [
+                            "\u2192 ",
+                            matched?.name ?? matchedId
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: preset.hint })
+                      ] })
+                    ]
+                  },
+                  preset.id
+                );
+              }) }),
+              !query && recentIds.length > 0 && /* @__PURE__ */ jsx(Section, { label: "Recent", children: recentIds.map((m) => /* @__PURE__ */ jsx(
+                ModelRow,
+                {
+                  model: m,
+                  active: canonicalModelId(m) === value,
+                  onSelect: handleSelect
+                },
+                `recent-${canonicalModelId(m)}`
+              )) }),
+              grouped.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: loading ? "Loading models..." : query ? "No models match." : "No models available." }) : grouped.map(([provider, list]) => /* @__PURE__ */ jsx(Section, { label: provider, children: list.map((m) => /* @__PURE__ */ jsx(
+                ModelRow,
+                {
+                  model: m,
+                  active: canonicalModelId(m) === value,
+                  onSelect: handleSelect
+                },
+                canonicalModelId(m)
+              )) }, provider))
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "border-t border-border px-3 py-1.5 text-[10px] text-muted-foreground", children: [
+              filtered.length,
+              " of ",
+              models.length,
+              " model",
+              models.length === 1 ? "" : "s"
+            ] })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+function Section({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-3 pt-1.5 pb-0.5 text-[10px] font-mono uppercase tracking-widest text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("div", { children })
+  ] });
+}
+function PickerItem({
+  onSelect,
+  active,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    Popover.Item,
+    {
+      onSelect: (e) => {
+        e.preventDefault();
+        onSelect();
+      },
+      className: cn(
+        "flex cursor-pointer items-start gap-2 px-3 py-2 outline-none",
+        "transition-colors duration-[var(--transition-fast)]",
+        "hover:bg-accent/40 focus:bg-accent/40",
+        active && "bg-[var(--accent-surface-soft)] text-[var(--accent-text)]"
+      ),
+      children
+    }
+  );
+}
+function ModelRow({
+  model,
+  active,
+  onSelect
+}) {
+  const id = canonicalModelId(model);
+  const pricing = formatPricing(model.pricing);
+  const ctx = formatContext(model.context_length);
+  return /* @__PURE__ */ jsx(PickerItem, { onSelect: () => onSelect(id), active, children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: model.name ?? model.id }),
+      ctx && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: ctx })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[11px] text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: id }),
+      pricing && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "shrink-0", children: "\xB7" }),
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono", children: pricing })
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/dashboard/billing-dashboard.tsx
+import { Button } from "@tangle-network/ui/primitives";
+import { Badge } from "@tangle-network/ui/primitives";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "@tangle-network/ui/primitives";
+import { Progress } from "@tangle-network/ui/primitives";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var variantColors = {
+  sandbox: {
+    accent: "text-[var(--accent-text)]",
+    accentBg: "bg-[var(--accent-surface-soft)]",
+    border: "border-[var(--border-accent)]",
+    progress: "bg-[image:var(--accent-gradient-strong)]"
+  }
+};
+function formatCredits(value) {
+  if (value >= 1e6) {
+    return `${(value / 1e6).toFixed(1)}M`;
+  }
+  if (value >= 1e3) {
+    return `${(value / 1e3).toFixed(1)}K`;
+  }
+  return value.toLocaleString();
+}
+function formatDate(dateStr) {
+  const date = new Date(dateStr);
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function getStatusBadgeVariant(status) {
+  switch (status.toLowerCase()) {
+    case "active":
+      return "success";
+    case "trialing":
+    case "past_due":
+      return "warning";
+    case "canceled":
+    case "unpaid":
+      return "error";
+    default:
+      return "secondary";
+  }
+}
+function CreditCardIcon({ className }) {
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: cn("h-5 w-5", className),
+      children: [
+        /* @__PURE__ */ jsx2("title", { children: "Credit card icon" }),
+        /* @__PURE__ */ jsx2("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }),
+        /* @__PURE__ */ jsx2("line", { x1: "2", x2: "22", y1: "10", y2: "10" })
+      ]
+    }
+  );
+}
+function CoinsIcon({ className }) {
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: cn("h-5 w-5", className),
+      children: [
+        /* @__PURE__ */ jsx2("title", { children: "Coins icon" }),
+        /* @__PURE__ */ jsx2("circle", { cx: "8", cy: "8", r: "6" }),
+        /* @__PURE__ */ jsx2("path", { d: "M18.09 10.37A6 6 0 1 1 10.34 18" }),
+        /* @__PURE__ */ jsx2("path", { d: "M7 6h1v4" }),
+        /* @__PURE__ */ jsx2("path", { d: "m16.71 13.88.7.71-2.82 2.82" })
+      ]
+    }
+  );
+}
+function ChartIcon({ className }) {
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: cn("h-5 w-5", className),
+      children: [
+        /* @__PURE__ */ jsx2("title", { children: "Chart icon" }),
+        /* @__PURE__ */ jsx2("path", { d: "M3 3v18h18" }),
+        /* @__PURE__ */ jsx2("path", { d: "m19 9-5 5-4-4-3 3" })
+      ]
+    }
+  );
+}
+function BillingDashboard({
+  subscription,
+  balance,
+  usage,
+  onManageSubscription,
+  onAddCredits,
+  variant = "sandbox",
+  className,
+  cardClassName
+}) {
+  const colors2 = variantColors[variant];
+  const totalCredits = balance.available + balance.used;
+  const usagePercent = totalCredits > 0 ? balance.used / totalCredits * 100 : 0;
+  const sortedModels = Object.entries(usage.byModel).sort(
+    ([, a], [, b]) => b - a
+  );
+  return /* @__PURE__ */ jsxs2("div", { className: cn("grid gap-6 lg:grid-cols-3", className), children: [
+    /* @__PURE__ */ jsxs2(Card, { variant, className: cn("lg:col-span-1", cardClassName), children: [
+      /* @__PURE__ */ jsx2(CardHeader, { children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs2(CardTitle, { className: "flex items-center gap-2 text-base", children: [
+          /* @__PURE__ */ jsx2(CreditCardIcon, { className: colors2.accent }),
+          "Current Plan"
+        ] }),
+        subscription && /* @__PURE__ */ jsx2(Badge, { variant: getStatusBadgeVariant(subscription.status), children: subscription.status })
+      ] }) }),
+      /* @__PURE__ */ jsx2(CardContent, { className: "space-y-4", children: subscription ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx2("p", { className: cn("font-bold text-2xl", colors2.accent), children: subscription.tierName }),
+          /* @__PURE__ */ jsxs2("p", { className: "text-muted-foreground text-sm", children: [
+            "Renews ",
+            formatDate(subscription.renewsAt)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          Button,
+          {
+            variant: "outline",
+            className: "w-full",
+            onClick: onManageSubscription,
+            children: "Manage Subscription"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx2("p", { className: "font-bold text-2xl text-muted-foreground", children: "No Active Plan" }),
+          /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground text-sm", children: "Subscribe to get started" })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          Button,
+          {
+            variant,
+            className: "w-full",
+            onClick: onManageSubscription,
+            children: "View Plans"
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs2(Card, { variant, className: cn("lg:col-span-1", cardClassName), children: [
+      /* @__PURE__ */ jsxs2(CardHeader, { children: [
+        /* @__PURE__ */ jsxs2(CardTitle, { className: "flex items-center gap-2 text-base", children: [
+          /* @__PURE__ */ jsx2(CoinsIcon, { className: colors2.accent }),
+          "Credit Balance"
+        ] }),
+        /* @__PURE__ */ jsxs2(CardDescription, { children: [
+          formatCredits(balance.available),
+          " credits remaining"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between text-sm", children: [
+            /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: "Used" }),
+            /* @__PURE__ */ jsx2("span", { className: "font-medium", children: formatCredits(balance.used) })
+          ] }),
+          /* @__PURE__ */ jsx2(Progress, { value: usagePercent, variant, className: "h-3" }),
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between text-sm", children: [
+            /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: "Available" }),
+            /* @__PURE__ */ jsx2("span", { className: cn("font-medium", colors2.accent), children: formatCredits(balance.available) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2(Button, { variant, className: "w-full", onClick: onAddCredits, children: "Add Credits" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2(Card, { variant, className: cn("lg:col-span-1", cardClassName), children: [
+      /* @__PURE__ */ jsxs2(CardHeader, { children: [
+        /* @__PURE__ */ jsxs2(CardTitle, { className: "flex items-center gap-2 text-base", children: [
+          /* @__PURE__ */ jsx2(ChartIcon, { className: colors2.accent }),
+          "Usage Breakdown"
+        ] }),
+        /* @__PURE__ */ jsx2(CardDescription, { children: usage.period })
+      ] }),
+      /* @__PURE__ */ jsxs2(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline justify-between", children: [
+          /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground text-sm", children: "Total Usage" }),
+          /* @__PURE__ */ jsx2("span", { className: cn("font-bold text-2xl", colors2.accent), children: formatCredits(usage.total) })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx2("p", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wider", children: "By Model" }),
+          /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+            sortedModels.slice(0, 5).map(([model, credits]) => {
+              const modelPercent = usage.total > 0 ? credits / usage.total * 100 : 0;
+              return /* @__PURE__ */ jsxs2("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between text-sm", children: [
+                  /* @__PURE__ */ jsx2("span", { className: "truncate text-muted-foreground", children: model }),
+                  /* @__PURE__ */ jsx2("span", { className: "ml-2 font-medium", children: formatCredits(credits) })
+                ] }),
+                /* @__PURE__ */ jsx2("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    className: cn(
+                      "h-full rounded-full transition-all",
+                      variant === "sandbox" && colors2.progress
+                    ),
+                    style: { width: `${modelPercent}%` }
+                  }
+                ) })
+              ] }, model);
+            }),
+            sortedModels.length > 5 && /* @__PURE__ */ jsxs2("p", { className: "text-muted-foreground text-xs", children: [
+              "+",
+              sortedModels.length - 5,
+              " more models"
+            ] }),
+            sortedModels.length === 0 && /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground text-sm", children: "No usage this period" })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/dashboard/pricing-page.tsx
+import { Check, Zap as Zap2 } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function formatPrice(cents) {
+  if (!Number.isFinite(cents) || cents < 0) return "$0";
+  return cents % 100 === 0 ? `$${cents / 100}` : `$${(cents / 100).toFixed(2)}`;
+}
+function PricingPage({
+  tiers,
+  currentTierId,
+  billingPeriod,
+  onBillingPeriodChange,
+  onSelectTier,
+  loading = false,
+  className
+}) {
+  const tiersWithRecommended = tiers.map((tier, i) => ({
+    ...tier,
+    recommended: tier.recommended ?? (tiers.length === 3 && i === 1)
+  }));
+  return /* @__PURE__ */ jsxs3("div", { className: cn("w-full space-y-10", className), children: [
+    /* @__PURE__ */ jsx3("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs3("div", { className: "inline-flex items-center rounded-full border border-border bg-muted/50 p-1", children: [
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          onClick: () => onBillingPeriodChange("monthly"),
+          className: cn(
+            "rounded-full px-5 py-2 text-sm font-medium transition-all",
+            billingPeriod === "monthly" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+          ),
+          children: "Monthly"
+        }
+      ),
+      /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          type: "button",
+          onClick: () => onBillingPeriodChange("yearly"),
+          className: cn(
+            "rounded-full px-5 py-2 text-sm font-medium transition-all",
+            billingPeriod === "yearly" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+          ),
+          children: [
+            "Yearly",
+            /* @__PURE__ */ jsx3("span", { className: "ml-2 rounded-full bg-[var(--surface-success-bg)] px-2 py-0.5 text-[10px] font-bold text-[var(--surface-success-text)]", children: "Save 20%" })
+          ]
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-1 gap-6 lg:grid-cols-3 items-start", children: tiersWithRecommended.map((tier) => {
+      const isCurrentTier = tier.id === currentTierId;
+      const isRecommended = tier.recommended;
+      const isFree = tier.monthlyPriceCents === 0;
+      const price = billingPeriod === "yearly" && tier.yearlyPriceCents !== void 0 ? tier.yearlyPriceCents : tier.monthlyPriceCents;
+      const displayPrice = billingPeriod === "yearly" ? Math.round(price / 12) : price;
+      return /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          className: cn(
+            "relative flex flex-col rounded-2xl border transition-all",
+            isRecommended ? "border-primary shadow-[var(--shadow-glow)] scale-[1.02] z-10" : "border-border hover:border-primary/30"
+          ),
+          children: [
+            isRecommended && /* @__PURE__ */ jsx3("div", { className: "absolute -top-4 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-primary px-4 py-1.5 text-xs font-bold text-primary-foreground shadow-sm", children: [
+              /* @__PURE__ */ jsx3(Zap2, { className: "h-3 w-3" }),
+              "Most Popular"
+            ] }) }),
+            isCurrentTier && !isRecommended && /* @__PURE__ */ jsx3("div", { className: "absolute -top-4 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx3("span", { className: "inline-flex items-center rounded-full bg-muted border border-border px-4 py-1.5 text-xs font-bold text-foreground", children: "Current Plan" }) }),
+            /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col p-8", isRecommended && "pt-10"), children: [
+              /* @__PURE__ */ jsxs3("div", { className: "mb-6", children: [
+                /* @__PURE__ */ jsx3("h3", { className: "text-lg font-bold text-foreground", children: tier.name }),
+                /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm text-muted-foreground", children: tier.description })
+              ] }),
+              /* @__PURE__ */ jsxs3("div", { className: "mb-8", children: [
+                /* @__PURE__ */ jsxs3("div", { className: "flex items-baseline gap-1", children: [
+                  /* @__PURE__ */ jsx3("span", { className: cn("text-5xl font-extrabold tracking-tight", isRecommended ? "text-primary" : "text-foreground"), children: isFree ? "Free" : formatPrice(displayPrice) }),
+                  !isFree && /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground text-sm font-medium", children: "/mo" })
+                ] }),
+                billingPeriod === "yearly" && tier.yearlyPriceCents !== void 0 && !isFree && /* @__PURE__ */ jsxs3("p", { className: "mt-1 text-xs text-muted-foreground", children: [
+                  formatPrice(tier.yearlyPriceCents),
+                  " billed annually"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onSelectTier(tier.id),
+                  disabled: isCurrentTier || loading,
+                  className: cn(
+                    "w-full rounded-xl py-3 text-sm font-bold transition-all active:scale-[0.98] disabled:opacity-50",
+                    isRecommended ? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm" : isCurrentTier ? "bg-muted text-muted-foreground border border-border cursor-default" : "bg-card text-foreground border border-border hover:border-primary/50 hover:bg-muted"
+                  ),
+                  children: isCurrentTier ? "Current Plan" : isFree ? "Get Started" : "Subscribe"
+                }
+              ),
+              /* @__PURE__ */ jsx3("div", { className: "my-8 border-t border-border" }),
+              /* @__PURE__ */ jsx3("ul", { className: "space-y-3.5 flex-1", children: tier.features.map((feature) => /* @__PURE__ */ jsxs3("li", { className: "flex items-start gap-3", children: [
+                /* @__PURE__ */ jsx3("div", { className: cn(
+                  "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full",
+                  isRecommended ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
+                ), children: /* @__PURE__ */ jsx3(Check, { className: "h-3 w-3" }) }),
+                /* @__PURE__ */ jsx3("span", { className: "text-sm text-foreground/80", children: feature })
+              ] }, feature)) })
+            ] })
+          ]
+        },
+        tier.id
+      );
+    }) })
+  ] });
+}
+
+// src/dashboard/usage-chart.tsx
+import * as React2 from "react";
+import { Card as Card2, CardContent as CardContent2, CardHeader as CardHeader2, CardTitle as CardTitle2 } from "@tangle-network/ui/primitives";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var colors = {
+  bar: "bg-[image:var(--accent-gradient-strong)]",
+  barHover: "hover:brightness-110",
+  text: "text-[var(--accent-text)]"
+};
+function formatDate2(dateStr) {
+  const date = new Date(dateStr);
+  return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+function formatValue(value) {
+  if (value >= 1e6) {
+    return `${(value / 1e6).toFixed(1)}M`;
+  }
+  if (value >= 1e3) {
+    return `${(value / 1e3).toFixed(1)}K`;
+  }
+  return value.toLocaleString();
+}
+function UsageChart({ data, title, unit, className }) {
+  const maxValue = Math.max(...data.map((d) => d.value), 1);
+  const total = data.reduce((sum, d) => sum + d.value, 0);
+  const [hoveredIndex, setHoveredIndex] = React2.useState(null);
+  return /* @__PURE__ */ jsxs4(Card2, { className, children: [
+    /* @__PURE__ */ jsxs4(CardHeader2, { className: "flex flex-row items-center justify-between pb-2", children: [
+      /* @__PURE__ */ jsx4(CardTitle2, { className: "font-medium text-base", children: title }),
+      /* @__PURE__ */ jsxs4("div", { className: "text-right", children: [
+        /* @__PURE__ */ jsx4("span", { className: cn("font-bold text-2xl", colors.text), children: formatValue(total) }),
+        /* @__PURE__ */ jsx4("span", { className: "ml-1 text-muted-foreground text-sm", children: unit })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4(CardContent2, { children: [
+      /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "absolute top-0 left-0 flex h-48 flex-col justify-between text-muted-foreground text-xs", children: [
+          /* @__PURE__ */ jsx4("span", { children: formatValue(maxValue) }),
+          /* @__PURE__ */ jsx4("span", { children: formatValue(Math.round(maxValue / 2)) }),
+          /* @__PURE__ */ jsx4("span", { children: "0" })
+        ] }),
+        /* @__PURE__ */ jsx4("div", { className: "ml-10 flex h-48 items-end gap-1", children: data.map((point, index) => {
+          const heightPercent = point.value / maxValue * 100;
+          const isHovered = hoveredIndex === index;
+          return (
+            // biome-ignore lint/a11y/noStaticElementInteractions: chart bar uses hover for tooltip display
+            /* @__PURE__ */ jsxs4(
+              "div",
+              {
+                className: "group relative flex flex-1 flex-col items-center",
+                onMouseEnter: () => setHoveredIndex(index),
+                onMouseLeave: () => setHoveredIndex(null),
+                children: [
+                  isHovered && /* @__PURE__ */ jsxs4("div", { className: "absolute -top-12 z-10 rounded-lg bg-popover px-3 py-1.5 text-sm shadow-lg", children: [
+                    /* @__PURE__ */ jsxs4("p", { className: "font-medium", children: [
+                      formatValue(point.value),
+                      " ",
+                      unit
+                    ] }),
+                    /* @__PURE__ */ jsx4("p", { className: "text-muted-foreground text-xs", children: formatDate2(point.date) })
+                  ] }),
+                  /* @__PURE__ */ jsx4(
+                    "div",
+                    {
+                      className: cn(
+                        "min-h-[2px] w-full rounded-t-sm transition-all duration-200",
+                        colors.bar,
+                        colors.barHover,
+                        isHovered && "opacity-80"
+                      ),
+                      style: { height: `${Math.max(heightPercent, 1)}%` }
+                    }
+                  )
+                ]
+              },
+              point.date
+            )
+          );
+        }) }),
+        /* @__PURE__ */ jsx4("div", { className: "mt-2 ml-10 flex gap-1", children: data.map((point, index) => /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: cn(
+              "flex-1 truncate text-center text-muted-foreground text-xs",
+              hoveredIndex === index && colors.text
+            ),
+            children: data.length <= 7 || index % Math.ceil(data.length / 7) === 0 ? formatDate2(point.date) : ""
+          },
+          point.date
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { className: "mt-4 grid grid-cols-3 gap-4 border-border border-t pt-4", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx4("p", { className: "text-muted-foreground text-xs", children: "Average" }),
+          /* @__PURE__ */ jsxs4("p", { className: "font-medium", children: [
+            formatValue(Math.round(total / data.length)),
+            " ",
+            unit
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx4("p", { className: "text-muted-foreground text-xs", children: "Peak" }),
+          /* @__PURE__ */ jsxs4("p", { className: "font-medium", children: [
+            formatValue(maxValue),
+            " ",
+            unit
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx4("p", { className: "text-muted-foreground text-xs", children: "Total" }),
+          /* @__PURE__ */ jsxs4("p", { className: cn("font-medium", colors.text), children: [
+            formatValue(total),
+            " ",
+            unit
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/dashboard/template-card.tsx
+import { ArrowRight } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function TemplateCard({ template, onUseTemplate, className }) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: cn(
+        "group relative flex flex-col justify-between rounded-2xl border border-border bg-card p-6 transition-all hover:border-primary/30 hover:shadow-md",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx5("div", { className: "mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-muted border border-border", children: template.icon ?? /* @__PURE__ */ jsx5("span", { className: "text-lg font-bold text-primary", children: template.name.charAt(0).toUpperCase() }) }),
+          /* @__PURE__ */ jsx5("h3", { className: "mb-1 text-base font-bold text-foreground", children: template.name }),
+          /* @__PURE__ */ jsx5("p", { className: "text-sm text-muted-foreground leading-relaxed line-clamp-2", children: template.description }),
+          template.tags && template.tags.length > 0 && /* @__PURE__ */ jsx5("div", { className: "mt-3 flex flex-wrap gap-1.5", children: template.tags.map((tag, i) => /* @__PURE__ */ jsx5(
+            "span",
+            {
+              className: "rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground",
+              children: tag
+            },
+            `${tag}-${i}`
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            type: "button",
+            onClick: () => onUseTemplate(template.id),
+            className: "mt-5 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-primary/10 border border-primary/20 px-4 py-2.5 text-sm font-bold text-primary transition-colors hover:bg-primary hover:text-primary-foreground active:scale-[0.98]",
+            children: [
+              "Use Template",
+              /* @__PURE__ */ jsx5(ArrowRight, { className: "h-4 w-4 transition-transform group-hover:translate-x-0.5" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/dashboard/info-panel.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function InfoPanel({ label, title, description, className }) {
+  return /* @__PURE__ */ jsxs6("div", { className: cn("rounded-lg bg-[var(--brand-strong)] p-5 text-[var(--brand-strong-text)] relative overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs6("div", { className: "relative z-10", children: [
+      /* @__PURE__ */ jsx6("p", { className: "text-[10px] font-bold uppercase tracking-widest text-[var(--brand-strong-text-dim)]", children: label }),
+      /* @__PURE__ */ jsx6("h3", { className: "mt-1 text-lg font-bold", children: title }),
+      /* @__PURE__ */ jsx6("p", { className: "mt-1 text-sm text-[var(--brand-strong-text-muted)]", children: description })
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "absolute right-0 top-0 h-full w-1/3 bg-white/5 -skew-x-12 translate-x-12 pointer-events-none" })
+  ] });
+}
+
+export {
+  canonicalModelId,
+  formatPricing,
+  formatContext,
+  ModelPicker,
+  BillingDashboard,
+  formatPrice,
+  PricingPage,
+  UsageChart,
+  TemplateCard,
+  InfoPanel
+};