@tangle-network/sandbox-ui 0.2.0

package/dist/chunk-4EIWPJMJ.js

@@ -0,0 +1,545 @@
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Progress
+} from "./chunk-2UHPE5T7.js";
+import {
+  Button
+} from "./chunk-E6FS7R4X.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/dashboard/billing-dashboard.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var variantColors = {
+  sandbox: {
+    accent: "text-purple-400",
+    accentBg: "bg-purple-500/10",
+    border: "border-purple-500/20"
+  }
+};
+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__ */ jsxs(
+    "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__ */ jsx("title", { children: "Credit card icon" }),
+        /* @__PURE__ */ jsx("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }),
+        /* @__PURE__ */ jsx("line", { x1: "2", x2: "22", y1: "10", y2: "10" })
+      ]
+    }
+  );
+}
+function CoinsIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "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__ */ jsx("title", { children: "Coins icon" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6" }),
+        /* @__PURE__ */ jsx("path", { d: "M18.09 10.37A6 6 0 1 1 10.34 18" }),
+        /* @__PURE__ */ jsx("path", { d: "M7 6h1v4" }),
+        /* @__PURE__ */ jsx("path", { d: "m16.71 13.88.7.71-2.82 2.82" })
+      ]
+    }
+  );
+}
+function ChartIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "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__ */ jsx("title", { children: "Chart icon" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 3v18h18" }),
+        /* @__PURE__ */ jsx("path", { d: "m19 9-5 5-4-4-3 3" })
+      ]
+    }
+  );
+}
+function BillingDashboard({
+  subscription,
+  balance,
+  usage,
+  onManageSubscription,
+  onAddCredits,
+  variant = "sandbox"
+}) {
+  const colors = 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__ */ jsxs("div", { className: "grid gap-6 lg:grid-cols-3", children: [
+    /* @__PURE__ */ jsxs(Card, { variant, className: "lg:col-span-1", children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
+          /* @__PURE__ */ jsx(CreditCardIcon, { className: colors.accent }),
+          "Current Plan"
+        ] }),
+        subscription && /* @__PURE__ */ jsx(Badge, { variant: getStatusBadgeVariant(subscription.status), children: subscription.status })
+      ] }) }),
+      /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: subscription ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: cn("font-bold text-2xl", colors.accent), children: subscription.tierName }),
+          /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-sm", children: [
+            "Renews ",
+            formatDate(subscription.renewsAt)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            className: "w-full",
+            onClick: onManageSubscription,
+            children: "Manage Subscription"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "font-bold text-2xl text-muted-foreground", children: "No Active Plan" }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "Subscribe to get started" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant,
+            className: "w-full",
+            onClick: onManageSubscription,
+            children: "View Plans"
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { variant, className: "lg:col-span-1", children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
+          /* @__PURE__ */ jsx(CoinsIcon, { className: colors.accent }),
+          "Credit Balance"
+        ] }),
+        /* @__PURE__ */ jsxs(CardDescription, { children: [
+          formatCredits(balance.available),
+          " credits remaining"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Used" }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: formatCredits(balance.used) })
+          ] }),
+          /* @__PURE__ */ jsx(Progress, { value: usagePercent, variant, className: "h-3" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Available" }),
+            /* @__PURE__ */ jsx("span", { className: cn("font-medium", colors.accent), children: formatCredits(balance.available) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { variant, className: "w-full", onClick: onAddCredits, children: "Add Credits" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { variant, className: "lg:col-span-1", children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
+          /* @__PURE__ */ jsx(ChartIcon, { className: colors.accent }),
+          "Usage Breakdown"
+        ] }),
+        /* @__PURE__ */ jsx(CardDescription, { children: usage.period })
+      ] }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: "Total Usage" }),
+          /* @__PURE__ */ jsx("span", { className: cn("font-bold text-2xl", colors.accent), children: formatCredits(usage.total) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wider", children: "By Model" }),
+          /* @__PURE__ */ jsxs("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__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: model }),
+                  /* @__PURE__ */ jsx("span", { className: "ml-2 font-medium", children: formatCredits(credits) })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "h-full rounded-full transition-all",
+                      variant === "sandbox" && "bg-purple-500"
+                    ),
+                    style: { width: `${modelPercent}%` }
+                  }
+                ) })
+              ] }, model);
+            }),
+            sortedModels.length > 5 && /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-xs", children: [
+              "+",
+              sortedModels.length - 5,
+              " more models"
+            ] }),
+            sortedModels.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "No usage this period" })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/dashboard/pricing-page.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var variantColors2 = {
+  sandbox: {
+    accent: "text-purple-400",
+    border: "border-purple-500",
+    bg: "bg-purple-500/10",
+    ring: "ring-purple-500/50"
+  }
+};
+function formatPrice(cents) {
+  return (cents / 100).toLocaleString("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  });
+}
+function CheckIcon({ className }) {
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      className: cn("h-5 w-5", className),
+      children: [
+        /* @__PURE__ */ jsx2("title", { children: "Check icon" }),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            fillRule: "evenodd",
+            d: "M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z",
+            clipRule: "evenodd"
+          }
+        )
+      ]
+    }
+  );
+}
+function PricingPage({
+  tiers,
+  currentTierId,
+  billingPeriod,
+  onBillingPeriodChange,
+  onSelectTier,
+  variant = "sandbox",
+  loading = false
+}) {
+  const colors = variantColors2[variant];
+  return /* @__PURE__ */ jsxs2("div", { className: "w-full space-y-8", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-center gap-4", children: [
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          onClick: () => onBillingPeriodChange("monthly"),
+          className: cn(
+            "rounded-lg px-4 py-2 font-medium text-sm transition-all",
+            billingPeriod === "monthly" ? cn("bg-muted text-foreground", colors.ring, "ring-2") : "text-muted-foreground hover:text-foreground"
+          ),
+          children: "Monthly"
+        }
+      ),
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          onClick: () => onBillingPeriodChange("yearly"),
+          className: cn(
+            "rounded-lg px-4 py-2 font-medium text-sm transition-all",
+            billingPeriod === "yearly" ? cn("bg-muted text-foreground", colors.ring, "ring-2") : "text-muted-foreground hover:text-foreground"
+          ),
+          children: [
+            "Yearly",
+            /* @__PURE__ */ jsx2("span", { className: cn("ml-2 text-xs", colors.accent), children: "Save 20%" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: tiers.map((tier) => {
+      const isCurrentTier = tier.id === currentTierId;
+      const price = billingPeriod === "yearly" && tier.yearlyPriceCents !== void 0 ? tier.yearlyPriceCents : tier.monthlyPriceCents;
+      const displayPrice = billingPeriod === "yearly" ? Math.round(price / 12) : price;
+      return /* @__PURE__ */ jsxs2(
+        Card,
+        {
+          variant,
+          className: cn(
+            "relative flex flex-col",
+            tier.recommended && cn(colors.border, "border-2 ring-2", colors.ring),
+            isCurrentTier && "ring-2 ring-offset-2 ring-offset-background",
+            isCurrentTier && colors.ring
+          ),
+          children: [
+            tier.recommended && /* @__PURE__ */ jsx2("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx2(Badge, { variant, children: "Recommended" }) }),
+            isCurrentTier && /* @__PURE__ */ jsx2("div", { className: "absolute -top-3 right-4", children: /* @__PURE__ */ jsx2(Badge, { variant: "secondary", children: "Current Plan" }) }),
+            /* @__PURE__ */ jsxs2(CardHeader, { className: "text-center", children: [
+              /* @__PURE__ */ jsx2(CardTitle, { className: "text-xl", children: tier.name }),
+              /* @__PURE__ */ jsx2(CardDescription, { children: tier.description })
+            ] }),
+            /* @__PURE__ */ jsxs2(CardContent, { className: "flex-1 space-y-6", children: [
+              /* @__PURE__ */ jsxs2("div", { className: "text-center", children: [
+                /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline justify-center gap-1", children: [
+                  /* @__PURE__ */ jsx2("span", { className: cn("font-bold text-4xl", colors.accent), children: formatPrice(displayPrice) }),
+                  /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: "/mo" })
+                ] }),
+                billingPeriod === "yearly" && tier.yearlyPriceCents !== void 0 && /* @__PURE__ */ jsxs2("p", { className: "mt-1 text-muted-foreground text-sm", children: [
+                  formatPrice(tier.yearlyPriceCents),
+                  " billed annually"
+                ] })
+              ] }),
+              tier.creditsPerMonth !== void 0 && /* @__PURE__ */ jsxs2("div", { className: cn("rounded-lg p-3 text-center", colors.bg), children: [
+                /* @__PURE__ */ jsx2("span", { className: cn("font-semibold", colors.accent), children: tier.creditsPerMonth.toLocaleString() }),
+                /* @__PURE__ */ jsxs2("span", { className: "text-muted-foreground text-sm", children: [
+                  " ",
+                  "credits/month"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx2("ul", { className: "space-y-3", children: tier.features.map((feature) => /* @__PURE__ */ jsxs2("li", { className: "flex items-start gap-3", children: [
+                /* @__PURE__ */ jsx2(
+                  CheckIcon,
+                  {
+                    className: cn("mt-0.5 shrink-0", colors.accent)
+                  }
+                ),
+                /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground text-sm", children: feature })
+              ] }, feature)) })
+            ] }),
+            /* @__PURE__ */ jsx2(CardFooter, { children: /* @__PURE__ */ jsx2(
+              Button,
+              {
+                variant: isCurrentTier ? "outline" : variant,
+                className: "w-full",
+                disabled: isCurrentTier || loading,
+                loading,
+                onClick: () => onSelectTier(tier.id),
+                children: isCurrentTier ? "Current Plan" : currentTierId ? "Upgrade" : "Subscribe"
+              }
+            ) })
+          ]
+        },
+        tier.id
+      );
+    }) })
+  ] });
+}
+
+// src/dashboard/usage-chart.tsx
+import * as React from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var variantColors3 = {
+  agentrun: {
+    bar: "bg-gradient-to-t from-blue-600 to-blue-400",
+    barHover: "hover:from-blue-500 hover:to-blue-300",
+    text: "text-blue-400"
+  },
+  automateai: {
+    bar: "bg-gradient-to-t from-violet-600 to-violet-400",
+    barHover: "hover:from-violet-500 hover:to-violet-300",
+    text: "text-violet-400"
+  },
+  tradingbots: {
+    bar: "bg-gradient-to-t from-green-600 to-green-400",
+    barHover: "hover:from-green-500 hover:to-green-300",
+    text: "text-green-400"
+  },
+  sandbox: {
+    bar: "bg-gradient-to-t from-purple-600 to-purple-400",
+    barHover: "hover:from-purple-500 hover:to-purple-300",
+    text: "text-purple-400"
+  }
+};
+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,
+  variant = "agentrun"
+}) {
+  const colors = variantColors3[variant];
+  const maxValue = Math.max(...data.map((d) => d.value), 1);
+  const total = data.reduce((sum, d) => sum + d.value, 0);
+  const [hoveredIndex, setHoveredIndex] = React.useState(null);
+  return /* @__PURE__ */ jsxs3(Card, { children: [
+    /* @__PURE__ */ jsxs3(CardHeader, { className: "flex flex-row items-center justify-between pb-2", children: [
+      /* @__PURE__ */ jsx3(CardTitle, { className: "font-medium text-base", children: title }),
+      /* @__PURE__ */ jsxs3("div", { className: "text-right", children: [
+        /* @__PURE__ */ jsx3("span", { className: cn("font-bold text-2xl", colors.text), children: formatValue(total) }),
+        /* @__PURE__ */ jsx3("span", { className: "ml-1 text-muted-foreground text-sm", children: unit })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3(CardContent, { children: [
+      /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "absolute top-0 left-0 flex h-48 flex-col justify-between text-muted-foreground text-xs", children: [
+          /* @__PURE__ */ jsx3("span", { children: formatValue(maxValue) }),
+          /* @__PURE__ */ jsx3("span", { children: formatValue(Math.round(maxValue / 2)) }),
+          /* @__PURE__ */ jsx3("span", { children: "0" })
+        ] }),
+        /* @__PURE__ */ jsx3("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__ */ jsxs3(
+              "div",
+              {
+                className: "group relative flex flex-1 flex-col items-center",
+                onMouseEnter: () => setHoveredIndex(index),
+                onMouseLeave: () => setHoveredIndex(null),
+                children: [
+                  isHovered && /* @__PURE__ */ jsxs3("div", { className: "absolute -top-12 z-10 rounded-lg bg-popover px-3 py-1.5 text-sm shadow-lg", children: [
+                    /* @__PURE__ */ jsxs3("p", { className: "font-medium", children: [
+                      formatValue(point.value),
+                      " ",
+                      unit
+                    ] }),
+                    /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: formatDate2(point.date) })
+                  ] }),
+                  /* @__PURE__ */ jsx3(
+                    "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__ */ jsx3("div", { className: "mt-2 ml-10 flex gap-1", children: data.map((point, index) => /* @__PURE__ */ jsx3(
+          "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__ */ jsxs3("div", { className: "mt-4 grid grid-cols-3 gap-4 border-border border-t pt-4", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "Average" }),
+          /* @__PURE__ */ jsxs3("p", { className: "font-medium", children: [
+            formatValue(Math.round(total / data.length)),
+            " ",
+            unit
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "Peak" }),
+          /* @__PURE__ */ jsxs3("p", { className: "font-medium", children: [
+            formatValue(maxValue),
+            " ",
+            unit
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "Total" }),
+          /* @__PURE__ */ jsxs3("p", { className: cn("font-medium", colors.text), children: [
+            formatValue(total),
+            " ",
+            unit
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+export {
+  BillingDashboard,
+  PricingPage,
+  UsageChart
+};