@tangle-network/sandbox-ui 0.2.0

package/dist/pages.js

@@ -0,0 +1,1181 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  EmptyState,
+  Input,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "./chunk-NI2EI43H.js";
+import {
+  BillingDashboard,
+  PricingPage,
+  UsageChart
+} from "./chunk-4EIWPJMJ.js";
+import {
+  Badge,
+  Card,
+  Skeleton,
+  SkeletonCard
+} from "./chunk-2UHPE5T7.js";
+import {
+  Button
+} from "./chunk-E6FS7R4X.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/pages/billing-page.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultBillingData = {
+  subscription: null,
+  balance: { available: 0, used: 0 },
+  usage: { period: "This Month", total: 0, byModel: {} },
+  usageHistory: [],
+  tiers: []
+};
+async function fetchBillingDataFromApi(apiBasePath) {
+  const [subscriptionRes, balanceRes, usageRes, tiersRes] = await Promise.all([
+    fetch(`${apiBasePath}/v1/billing/subscription`),
+    fetch(`${apiBasePath}/v1/billing/balance`),
+    fetch(`${apiBasePath}/v1/billing/usage`),
+    fetch(`${apiBasePath}/v1/billing/tiers`)
+  ]);
+  if (!subscriptionRes.ok && subscriptionRes.status !== 404) {
+    throw new Error("Failed to fetch subscription data");
+  }
+  if (!balanceRes.ok) {
+    throw new Error("Failed to fetch balance data");
+  }
+  if (!usageRes.ok) {
+    throw new Error("Failed to fetch usage data");
+  }
+  if (!tiersRes.ok) {
+    throw new Error("Failed to fetch pricing tiers");
+  }
+  const subscription = subscriptionRes.status === 404 ? null : await subscriptionRes.json();
+  const balance = await balanceRes.json();
+  const usageData = await usageRes.json();
+  const tiers = await tiersRes.json();
+  return {
+    subscription,
+    balance,
+    usage: {
+      period: usageData.period || "This Month",
+      total: usageData.total || 0,
+      byModel: usageData.byModel || {}
+    },
+    usageHistory: usageData.history || [],
+    tiers: tiers.tiers || tiers
+  };
+}
+function BillingPageSkeleton({
+  variant: _variant = "sandbox"
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-6 lg:grid-cols-3", children: [
+      /* @__PURE__ */ jsx(SkeletonCard, {}),
+      /* @__PURE__ */ jsx(SkeletonCard, {}),
+      /* @__PURE__ */ jsx(SkeletonCard, {})
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4 rounded-xl border border-border bg-card p-6", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-48" }),
+      /* @__PURE__ */ jsx("div", { className: "h-48", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full" }) })
+    ] })
+  ] });
+}
+function BillingPageError({
+  message,
+  onRetry
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center space-y-4 rounded-xl border border-destructive/20 bg-destructive/5 p-8 text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "rounded-full bg-destructive/10 p-3", children: /* @__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: "h-6 w-6 text-destructive",
+        children: [
+          /* @__PURE__ */ jsx("title", { children: "Error icon" }),
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+          /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+          /* @__PURE__ */ jsx("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg", children: "Failed to load billing data" }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: message })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onRetry,
+        className: "rounded-lg bg-primary px-4 py-2 font-medium text-primary-foreground text-sm transition-colors hover:bg-primary/90",
+        children: "Try Again"
+      }
+    )
+  ] });
+}
+function BillingPage({
+  variant = "sandbox",
+  initialData,
+  apiBasePath = "",
+  onManageSubscription,
+  onAddCredits,
+  onSelectTier,
+  fetchBillingData
+}) {
+  const [state, setState] = React.useState({
+    data: initialData || null,
+    loading: !initialData,
+    error: null,
+    billingPeriod: "monthly",
+    selectingTier: false
+  });
+  const loadData = React.useCallback(async () => {
+    setState((prev) => ({ ...prev, loading: true, error: null }));
+    try {
+      const data2 = fetchBillingData ? await fetchBillingData() : await fetchBillingDataFromApi(apiBasePath);
+      setState((prev) => ({ ...prev, data: data2, loading: false }));
+    } catch (err) {
+      setState((prev) => ({
+        ...prev,
+        loading: false,
+        error: err instanceof Error ? err.message : "An unknown error occurred"
+      }));
+    }
+  }, [apiBasePath, fetchBillingData]);
+  React.useEffect(() => {
+    if (!initialData) {
+      loadData();
+    }
+  }, [initialData, loadData]);
+  const handleManageSubscription = React.useCallback(() => {
+    if (onManageSubscription) {
+      onManageSubscription();
+    } else {
+      window.location.href = `${apiBasePath}/v1/billing/portal`;
+    }
+  }, [apiBasePath, onManageSubscription]);
+  const handleAddCredits = React.useCallback(() => {
+    if (onAddCredits) {
+      onAddCredits();
+    } else {
+      window.location.href = `${apiBasePath}/v1/billing/credits`;
+    }
+  }, [apiBasePath, onAddCredits]);
+  const handleSelectTier = React.useCallback(
+    async (tierId) => {
+      if (onSelectTier) {
+        onSelectTier(tierId);
+        return;
+      }
+      setState((prev) => ({ ...prev, selectingTier: true }));
+      try {
+        const res = await fetch(`${apiBasePath}/v1/billing/subscribe`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            tierId,
+            billingPeriod: state.billingPeriod
+          })
+        });
+        if (!res.ok) {
+          throw new Error("Failed to initiate subscription");
+        }
+        const { checkoutUrl } = await res.json();
+        if (checkoutUrl) {
+          window.location.href = checkoutUrl;
+        } else {
+          loadData();
+        }
+      } catch (err) {
+        setState((prev) => ({
+          ...prev,
+          selectingTier: false,
+          error: err instanceof Error ? err.message : "Failed to select tier"
+        }));
+      }
+    },
+    [apiBasePath, state.billingPeriod, onSelectTier, loadData]
+  );
+  const handleBillingPeriodChange = React.useCallback(
+    (period) => {
+      setState((prev) => ({ ...prev, billingPeriod: period }));
+    },
+    []
+  );
+  if (state.loading) {
+    return /* @__PURE__ */ jsx(BillingPageSkeleton, { variant });
+  }
+  if (state.error) {
+    return /* @__PURE__ */ jsx(BillingPageError, { message: state.error, onRetry: loadData });
+  }
+  const data = state.data || defaultBillingData;
+  return /* @__PURE__ */ jsx("div", { className: "space-y-8", children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "overview", className: "w-full", children: [
+    /* @__PURE__ */ jsxs(TabsList, { className: "mb-6", children: [
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "overview", children: "Overview" }),
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "plans", children: "Plans" }),
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "usage", children: "Usage History" })
+    ] }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "overview", className: "space-y-6", children: /* @__PURE__ */ jsx(
+      BillingDashboard,
+      {
+        subscription: data.subscription,
+        balance: data.balance,
+        usage: data.usage,
+        onManageSubscription: handleManageSubscription,
+        onAddCredits: handleAddCredits,
+        variant
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "plans", children: /* @__PURE__ */ jsx(
+      PricingPage,
+      {
+        tiers: data.tiers,
+        currentTierId: data.subscription?.tierName,
+        billingPeriod: state.billingPeriod,
+        onBillingPeriodChange: handleBillingPeriodChange,
+        onSelectTier: handleSelectTier,
+        variant,
+        loading: state.selectingTier
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "usage", children: data.usageHistory.length > 0 ? /* @__PURE__ */ jsx(
+      UsageChart,
+      {
+        data: data.usageHistory,
+        title: "Credit Usage History",
+        unit: "credits",
+        variant
+      }
+    ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center rounded-xl border border-border bg-card p-12 text-center", children: [
+      /* @__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: "mb-4 h-12 w-12 text-muted-foreground",
+          children: [
+            /* @__PURE__ */ jsx("title", { children: "No usage data icon" }),
+            /* @__PURE__ */ jsx("path", { d: "M3 3v18h18" }),
+            /* @__PURE__ */ jsx("path", { d: "m19 9-5 5-4-4-3 3" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg", children: "No usage data yet" }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "Start using credits to see your usage history here." })
+    ] }) })
+  ] }) });
+}
+
+// src/pages/pricing-page.tsx
+import * as React2 from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var variantColors = {
+  sandbox: {
+    accent: "text-purple-400",
+    gradientFrom: "from-purple-600",
+    gradientTo: "to-purple-400"
+  }
+};
+async function fetchTiersFromApi(apiBasePath) {
+  const res = await fetch(`${apiBasePath}/v1/billing/tiers`);
+  if (!res.ok) {
+    throw new Error("Failed to fetch pricing tiers");
+  }
+  const data = await res.json();
+  return data.tiers || data;
+}
+function PricingPageSkeleton() {
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-center gap-4", children: [
+      /* @__PURE__ */ jsx2(Skeleton, { className: "h-10 w-24" }),
+      /* @__PURE__ */ jsx2(Skeleton, { className: "h-10 w-24" })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: [
+      /* @__PURE__ */ jsx2(SkeletonCard, { className: "h-96" }),
+      /* @__PURE__ */ jsx2(SkeletonCard, { className: "h-96" }),
+      /* @__PURE__ */ jsx2(SkeletonCard, { className: "h-96" })
+    ] })
+  ] });
+}
+function PricingPageError({
+  message,
+  onRetry
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center space-y-4 rounded-xl border border-destructive/20 bg-destructive/5 p-8 text-center", children: [
+    /* @__PURE__ */ jsx2("div", { className: "rounded-full bg-destructive/10 p-3", children: /* @__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: "h-6 w-6 text-destructive",
+        children: [
+          /* @__PURE__ */ jsx2("title", { children: "Error icon" }),
+          /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "10" }),
+          /* @__PURE__ */ jsx2("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+          /* @__PURE__ */ jsx2("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-lg", children: "Failed to load pricing" }),
+      /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground text-sm", children: message })
+    ] }),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        onClick: onRetry,
+        className: "rounded-lg bg-primary px-4 py-2 font-medium text-primary-foreground text-sm transition-colors hover:bg-primary/90",
+        children: "Try Again"
+      }
+    )
+  ] });
+}
+function StandalonePricingPage({
+  variant = "sandbox",
+  initialTiers,
+  apiBasePath = "",
+  onSelectTier,
+  fetchTiers,
+  title = "Simple, transparent pricing",
+  subtitle = "Choose the plan that fits your needs. Upgrade or downgrade at any time."
+}) {
+  const colors = variantColors[variant];
+  const [state, setState] = React2.useState({
+    tiers: initialTiers || [],
+    loading: !initialTiers,
+    error: null,
+    billingPeriod: "monthly",
+    selectingTier: false
+  });
+  const loadTiers = React2.useCallback(async () => {
+    setState((prev) => ({ ...prev, loading: true, error: null }));
+    try {
+      const tiers = fetchTiers ? await fetchTiers() : await fetchTiersFromApi(apiBasePath);
+      setState((prev) => ({ ...prev, tiers, loading: false }));
+    } catch (err) {
+      setState((prev) => ({
+        ...prev,
+        loading: false,
+        error: err instanceof Error ? err.message : "An unknown error occurred"
+      }));
+    }
+  }, [apiBasePath, fetchTiers]);
+  React2.useEffect(() => {
+    if (!initialTiers) {
+      loadTiers();
+    }
+  }, [initialTiers, loadTiers]);
+  const handleSelectTier = React2.useCallback(
+    async (tierId) => {
+      if (onSelectTier) {
+        onSelectTier(tierId, state.billingPeriod);
+        return;
+      }
+      setState((prev) => ({ ...prev, selectingTier: true }));
+      try {
+        const res = await fetch(`${apiBasePath}/v1/billing/subscribe`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            tierId,
+            billingPeriod: state.billingPeriod
+          })
+        });
+        if (!res.ok) {
+          throw new Error("Failed to initiate subscription");
+        }
+        const { checkoutUrl, loginUrl } = await res.json();
+        if (loginUrl) {
+          window.location.href = loginUrl;
+        } else if (checkoutUrl) {
+          window.location.href = checkoutUrl;
+        }
+      } catch (err) {
+        setState((prev) => ({
+          ...prev,
+          selectingTier: false,
+          error: err instanceof Error ? err.message : "Failed to select tier"
+        }));
+      }
+    },
+    [apiBasePath, state.billingPeriod, onSelectTier]
+  );
+  const handleBillingPeriodChange = React2.useCallback(
+    (period) => {
+      setState((prev) => ({ ...prev, billingPeriod: period }));
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxs2("div", { className: "w-full space-y-12", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "space-y-4 text-center", children: [
+      /* @__PURE__ */ jsx2(
+        "h1",
+        {
+          className: cn(
+            "font-bold text-4xl tracking-tight sm:text-5xl",
+            "bg-gradient-to-r bg-clip-text text-transparent",
+            colors.gradientFrom,
+            colors.gradientTo
+          ),
+          children: title
+        }
+      ),
+      /* @__PURE__ */ jsx2("p", { className: "mx-auto max-w-2xl text-lg text-muted-foreground", children: subtitle })
+    ] }),
+    state.loading ? /* @__PURE__ */ jsx2(PricingPageSkeleton, {}) : state.error ? /* @__PURE__ */ jsx2(PricingPageError, { message: state.error, onRetry: loadTiers }) : /* @__PURE__ */ jsx2(
+      PricingPage,
+      {
+        tiers: state.tiers,
+        billingPeriod: state.billingPeriod,
+        onBillingPeriodChange: handleBillingPeriodChange,
+        onSelectTier: handleSelectTier,
+        variant,
+        loading: state.selectingTier
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { className: "mx-auto max-w-3xl space-y-6 border-border border-t pt-8", children: [
+      /* @__PURE__ */ jsx2("h2", { className: "text-center font-semibold text-xl", children: "Frequently Asked Questions" }),
+      /* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs2("details", { className: "group rounded-lg border border-border bg-card p-4", children: [
+          /* @__PURE__ */ jsxs2("summary", { className: "flex cursor-pointer list-none items-center justify-between font-medium", children: [
+            "What are credits?",
+            /* @__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: "h-4 w-4 transition-transform group-open:rotate-180",
+                children: [
+                  /* @__PURE__ */ jsx2("title", { children: "Toggle icon" }),
+                  /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2("p", { className: "mt-3 text-muted-foreground text-sm", children: "Credits are used to pay for AI model usage. Different models consume different amounts of credits based on their complexity and the length of your requests." })
+        ] }),
+        /* @__PURE__ */ jsxs2("details", { className: "group rounded-lg border border-border bg-card p-4", children: [
+          /* @__PURE__ */ jsxs2("summary", { className: "flex cursor-pointer list-none items-center justify-between font-medium", children: [
+            "Can I change plans later?",
+            /* @__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: "h-4 w-4 transition-transform group-open:rotate-180",
+                children: [
+                  /* @__PURE__ */ jsx2("title", { children: "Toggle icon" }),
+                  /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2("p", { className: "mt-3 text-muted-foreground text-sm", children: "Yes! You can upgrade or downgrade your plan at any time. When you upgrade, you will be charged the prorated difference. When you downgrade, the change takes effect at the end of your billing cycle." })
+        ] }),
+        /* @__PURE__ */ jsxs2("details", { className: "group rounded-lg border border-border bg-card p-4", children: [
+          /* @__PURE__ */ jsxs2("summary", { className: "flex cursor-pointer list-none items-center justify-between font-medium", children: [
+            "Do unused credits roll over?",
+            /* @__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: "h-4 w-4 transition-transform group-open:rotate-180",
+                children: [
+                  /* @__PURE__ */ jsx2("title", { children: "Toggle icon" }),
+                  /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2("p", { className: "mt-3 text-muted-foreground text-sm", children: "Monthly credits do not roll over to the next month. However, purchased credit packs never expire and can be used at any time." })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/pages/profiles-page.tsx
+import {
+  AlertCircle,
+  ChevronRight,
+  Copy,
+  Edit2,
+  Loader2,
+  Plus,
+  Search,
+  Settings2,
+  Trash2
+} from "lucide-react";
+import * as React3 from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var TIER_LIMITS = {
+  free: 3,
+  starter: 10,
+  pro: 50,
+  enterprise: Number.POSITIVE_INFINITY
+};
+function ProfilesPage({
+  apiClient,
+  tier = "free",
+  maxProfiles,
+  onCompareClick,
+  title = "Profiles"
+}) {
+  const [builtinProfiles, setBuiltinProfiles] = React3.useState([]);
+  const [customProfiles, setCustomProfiles] = React3.useState([]);
+  const [loading, setLoading] = React3.useState(true);
+  const [error, setError] = React3.useState(null);
+  const [searchQuery, setSearchQuery] = React3.useState("");
+  const [createDialogOpen, setCreateDialogOpen] = React3.useState(false);
+  const [editingProfile, setEditingProfile] = React3.useState(
+    null
+  );
+  const [deletingProfile, setDeletingProfile] = React3.useState(
+    null
+  );
+  const [detailProfile, setDetailProfile] = React3.useState(
+    null
+  );
+  const profileLimit = maxProfiles ?? TIER_LIMITS[tier] ?? 3;
+  const canCreateMore = customProfiles.length < profileLimit;
+  const loadProfiles = React3.useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await apiClient.listProfiles();
+      setBuiltinProfiles(data.builtin);
+      setCustomProfiles(data.custom);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load profiles");
+    } finally {
+      setLoading(false);
+    }
+  }, [apiClient]);
+  React3.useEffect(() => {
+    loadProfiles();
+  }, [loadProfiles]);
+  const filteredBuiltin = builtinProfiles.filter(
+    (p) => p.name.toLowerCase().includes(searchQuery.toLowerCase()) || p.description?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+  const filteredCustom = customProfiles.filter(
+    (p) => p.name.toLowerCase().includes(searchQuery.toLowerCase()) || p.description?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+  return /* @__PURE__ */ jsxs3("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("h1", { className: "font-semibold text-2xl", children: title }),
+        /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground", children: "Customize agent behavior with system prompts, models, and instructions" })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
+        onCompareClick && customProfiles.length >= 2 && /* @__PURE__ */ jsx3(
+          Button,
+          {
+            variant: "outline",
+            onClick: () => onCompareClick(customProfiles),
+            children: "Compare Profiles"
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          Button,
+          {
+            onClick: () => setCreateDialogOpen(true),
+            disabled: !canCreateMore,
+            children: [
+              /* @__PURE__ */ jsx3(Plus, { className: "mr-2 h-4 w-4" }),
+              "Create Profile"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    !canCreateMore && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-3 text-sm text-yellow-400", children: [
+      /* @__PURE__ */ jsx3(AlertCircle, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsxs3("span", { children: [
+        "You've reached your profile limit (",
+        profileLimit,
+        " profiles). Upgrade your plan to create more."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "relative max-w-md", children: [
+      /* @__PURE__ */ jsx3(Search, { className: "absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx3(
+        Input,
+        {
+          placeholder: "Search profiles...",
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.target.value),
+          className: "pl-9"
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-red-400 text-sm", children: [
+      /* @__PURE__ */ jsx3(AlertCircle, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx3("span", { children: error }),
+      /* @__PURE__ */ jsx3(Button, { variant: "ghost", size: "sm", onClick: loadProfiles, children: "Retry" })
+    ] }),
+    loading && /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx3(Loader2, { className: "h-8 w-8 animate-spin text-muted-foreground" }) }),
+    !loading && /* @__PURE__ */ jsxs3("div", { className: "space-y-8", children: [
+      /* @__PURE__ */ jsxs3("section", { children: [
+        /* @__PURE__ */ jsx3("div", { className: "mb-3 flex items-center justify-between", children: /* @__PURE__ */ jsxs3("h2", { className: "font-medium text-lg", children: [
+          "Your Profiles (",
+          customProfiles.length,
+          "/",
+          profileLimit === Number.POSITIVE_INFINITY ? "inf" : profileLimit,
+          ")"
+        ] }) }),
+        filteredCustom.length === 0 ? /* @__PURE__ */ jsx3(
+          EmptyState,
+          {
+            icon: /* @__PURE__ */ jsx3(Settings2, { className: "h-8 w-8" }),
+            title: "No custom profiles yet",
+            description: "Create a profile to customize agent behavior",
+            action: canCreateMore ? /* @__PURE__ */ jsxs3(Button, { onClick: () => setCreateDialogOpen(true), children: [
+              /* @__PURE__ */ jsx3(Plus, { className: "mr-2 h-4 w-4" }),
+              "Create Profile"
+            ] }) : void 0
+          }
+        ) : /* @__PURE__ */ jsx3("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: filteredCustom.map((profile) => /* @__PURE__ */ jsx3(
+          ProfileCard,
+          {
+            profile,
+            onView: () => setDetailProfile(profile),
+            onEdit: () => setEditingProfile(profile),
+            onDelete: () => setDeletingProfile(profile)
+          },
+          profile.id
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs3("section", { children: [
+        /* @__PURE__ */ jsx3("div", { className: "mb-3 flex items-center justify-between", children: /* @__PURE__ */ jsxs3("h2", { className: "font-medium text-lg", children: [
+          "Built-in Profiles (",
+          builtinProfiles.length,
+          ")"
+        ] }) }),
+        filteredBuiltin.length === 0 ? /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-sm", children: "No matching built-in profiles" }) : /* @__PURE__ */ jsx3("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: filteredBuiltin.map((profile) => /* @__PURE__ */ jsx3(
+          ProfileCard,
+          {
+            profile,
+            onView: () => setDetailProfile(profile),
+            isBuiltin: true
+          },
+          profile.id
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3(
+      ProfileFormDialog,
+      {
+        open: createDialogOpen || !!editingProfile,
+        onClose: () => {
+          setCreateDialogOpen(false);
+          setEditingProfile(null);
+        },
+        profile: editingProfile,
+        builtinProfiles,
+        apiClient,
+        onSuccess: () => {
+          setCreateDialogOpen(false);
+          setEditingProfile(null);
+          loadProfiles();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      DeleteProfileDialog,
+      {
+        profile: deletingProfile,
+        onClose: () => setDeletingProfile(null),
+        apiClient,
+        onSuccess: () => {
+          setDeletingProfile(null);
+          loadProfiles();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      ProfileDetailDialog,
+      {
+        profile: detailProfile,
+        onClose: () => setDetailProfile(null),
+        onEdit: detailProfile && !detailProfile.is_builtin ? () => {
+          setDetailProfile(null);
+          setEditingProfile(detailProfile);
+        } : void 0,
+        onDuplicate: canCreateMore ? () => {
+          setDetailProfile(null);
+          setEditingProfile({
+            ...detailProfile,
+            id: "",
+            name: `${detailProfile?.name}-copy`,
+            is_builtin: false
+          });
+        } : void 0
+      }
+    )
+  ] });
+}
+function ProfileCard({
+  profile,
+  onView,
+  onEdit,
+  onDelete,
+  isBuiltin
+}) {
+  return /* @__PURE__ */ jsxs3(
+    Card,
+    {
+      className: "cursor-pointer p-4 transition-colors hover:border-border/80",
+      onClick: onView,
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx3("h3", { className: "font-medium", children: profile.name }),
+              isBuiltin && /* @__PURE__ */ jsx3(Badge, { variant: "secondary", className: "border-0 text-xs", children: "Built-in" }),
+              profile.is_public && !isBuiltin && /* @__PURE__ */ jsx3(Badge, { className: "border-0 bg-blue-500/10 text-blue-400 text-xs", children: "Public" })
+            ] }),
+            profile.description && /* @__PURE__ */ jsx3("p", { className: "mt-1 line-clamp-2 text-muted-foreground text-sm", children: profile.description })
+          ] }),
+          !isBuiltin && /* @__PURE__ */ jsxs3("div", { className: "flex gap-1", onClick: (e) => e.stopPropagation(), children: [
+            onEdit && /* @__PURE__ */ jsx3(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                onClick: onEdit,
+                "aria-label": "Edit profile",
+                children: /* @__PURE__ */ jsx3(Edit2, { className: "h-4 w-4" })
+              }
+            ),
+            onDelete && /* @__PURE__ */ jsx3(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                onClick: onDelete,
+                "aria-label": "Delete profile",
+                children: /* @__PURE__ */ jsx3(Trash2, { className: "h-4 w-4 text-red-400" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "mt-3 flex flex-wrap gap-2", children: [
+          profile.extends && /* @__PURE__ */ jsxs3(Badge, { variant: "outline", className: "text-xs", children: [
+            "extends ",
+            profile.extends
+          ] }),
+          profile.model && /* @__PURE__ */ jsx3(Badge, { variant: "outline", className: "text-xs", children: profile.model.split("/").pop() })
+        ] }),
+        profile.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs3("div", { className: "mt-3 flex gap-4 border-border border-t pt-3 text-muted-foreground text-xs", children: [
+          /* @__PURE__ */ jsxs3("span", { children: [
+            profile.metrics.total_runs,
+            " runs"
+          ] }),
+          /* @__PURE__ */ jsxs3("span", { children: [
+            profile.metrics.success_rate.toFixed(0),
+            "% success"
+          ] }),
+          /* @__PURE__ */ jsxs3("span", { children: [
+            "~",
+            (profile.metrics.avg_duration_ms / 1e3).toFixed(1),
+            "s avg"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function ProfileFormDialog({
+  open,
+  onClose,
+  profile,
+  builtinProfiles,
+  apiClient,
+  onSuccess
+}) {
+  const isEditing = !!profile?.id;
+  const [formData, setFormData] = React3.useState({
+    name: "",
+    description: "",
+    extends: "",
+    model: "",
+    system_prompt: "",
+    instructions: [],
+    tags: [],
+    is_public: false
+  });
+  const [saving, setSaving] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  React3.useEffect(() => {
+    if (profile) {
+      setFormData({
+        name: profile.name,
+        description: profile.description ?? "",
+        extends: profile.extends ?? "",
+        model: profile.model ?? "",
+        system_prompt: profile.system_prompt ?? "",
+        instructions: profile.instructions ?? [],
+        tags: profile.tags ?? [],
+        is_public: profile.is_public ?? false
+      });
+    } else {
+      setFormData({
+        name: "",
+        description: "",
+        extends: "",
+        model: "",
+        system_prompt: "",
+        instructions: [],
+        tags: [],
+        is_public: false
+      });
+    }
+  }, [profile]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setSaving(true);
+    try {
+      const cleanData = {
+        name: formData.name,
+        ...formData.description && { description: formData.description },
+        ...formData.extends && { extends: formData.extends },
+        ...formData.model && { model: formData.model },
+        ...formData.system_prompt && {
+          system_prompt: formData.system_prompt
+        },
+        ...formData.instructions?.length && {
+          instructions: formData.instructions
+        },
+        ...formData.tags?.length && { tags: formData.tags },
+        is_public: formData.is_public
+      };
+      if (isEditing) {
+        await apiClient.updateProfile(profile.id, cleanData);
+      } else {
+        await apiClient.createProfile(cleanData);
+      }
+      onSuccess();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save profile");
+    } finally {
+      setSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsx3(Dialog, { open, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ jsxs3(DialogContent, { className: "max-w-2xl", children: [
+    /* @__PURE__ */ jsxs3(DialogHeader, { children: [
+      /* @__PURE__ */ jsx3(DialogTitle, { children: isEditing ? "Edit Profile" : "Create Profile" }),
+      /* @__PURE__ */ jsx3(DialogDescription, { children: isEditing ? "Update your custom profile configuration" : "Create a new profile to customize agent behavior" })
+    ] }),
+    /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+      error && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-red-400 text-sm", children: [
+        /* @__PURE__ */ jsx3(AlertCircle, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx3("span", { children: error })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("label", { className: "mb-1 block font-medium text-sm", children: "Name *" }),
+        /* @__PURE__ */ jsx3(
+          Input,
+          {
+            value: formData.name,
+            onChange: (e) => setFormData((d) => ({ ...d, name: e.target.value })),
+            placeholder: "my-custom-profile",
+            required: true,
+            pattern: "^[a-zA-Z0-9_-]+$",
+            title: "Only letters, numbers, hyphens, and underscores"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("label", { className: "mb-1 block font-medium text-sm", children: "Description" }),
+        /* @__PURE__ */ jsx3(
+          Input,
+          {
+            value: formData.description,
+            onChange: (e) => setFormData((d) => ({ ...d, description: e.target.value })),
+            placeholder: "A brief description of this profile"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("label", { className: "mb-1 block font-medium text-sm", children: "Extends (base profile)" }),
+        /* @__PURE__ */ jsxs3(
+          "select",
+          {
+            value: formData.extends,
+            onChange: (e) => setFormData((d) => ({ ...d, extends: e.target.value })),
+            className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm",
+            children: [
+              /* @__PURE__ */ jsx3("option", { value: "", children: "None (start from scratch)" }),
+              builtinProfiles.map((p) => /* @__PURE__ */ jsxs3("option", { value: p.name, children: [
+                p.name,
+                " - ",
+                p.description ?? "Built-in profile"
+              ] }, p.id))
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("label", { className: "mb-1 block font-medium text-sm", children: "Model" }),
+        /* @__PURE__ */ jsx3(
+          Input,
+          {
+            value: formData.model,
+            onChange: (e) => setFormData((d) => ({ ...d, model: e.target.value })),
+            placeholder: "anthropic/claude-sonnet-4"
+          }
+        ),
+        /* @__PURE__ */ jsx3("p", { className: "mt-1 text-muted-foreground text-xs", children: "Format: provider/model-id (e.g., anthropic/claude-sonnet-4)" })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("label", { className: "mb-1 block font-medium text-sm", children: "System Prompt" }),
+        /* @__PURE__ */ jsx3(
+          "textarea",
+          {
+            value: formData.system_prompt,
+            onChange: (e) => setFormData((d) => ({ ...d, system_prompt: e.target.value })),
+            placeholder: "Custom system prompt for the agent...",
+            rows: 4,
+            className: "w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("label", { className: "mb-1 block font-medium text-sm", children: "Tags" }),
+        /* @__PURE__ */ jsx3(
+          Input,
+          {
+            value: formData.tags?.join(", "),
+            onChange: (e) => setFormData((d) => ({
+              ...d,
+              tags: e.target.value.split(",").map((t) => t.trim()).filter(Boolean)
+            })),
+            placeholder: "trading, aggressive, experimental"
+          }
+        ),
+        /* @__PURE__ */ jsx3("p", { className: "mt-1 text-muted-foreground text-xs", children: "Comma-separated tags for organization" })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            type: "checkbox",
+            id: "is_public",
+            checked: formData.is_public,
+            onChange: (e) => setFormData((d) => ({ ...d, is_public: e.target.checked })),
+            className: "rounded border-border"
+          }
+        ),
+        /* @__PURE__ */ jsx3("label", { htmlFor: "is_public", className: "text-sm", children: "Make this profile public (visible to other users)" })
+      ] }),
+      /* @__PURE__ */ jsxs3(DialogFooter, { children: [
+        /* @__PURE__ */ jsx3(Button, { type: "button", variant: "outline", onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsxs3(Button, { type: "submit", disabled: saving || !formData.name, children: [
+          saving && /* @__PURE__ */ jsx3(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
+          isEditing ? "Save Changes" : "Create Profile"
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+function DeleteProfileDialog({
+  profile,
+  onClose,
+  apiClient,
+  onSuccess
+}) {
+  const [deleting, setDeleting] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const handleDelete = async () => {
+    if (!profile) return;
+    setError(null);
+    setDeleting(true);
+    try {
+      await apiClient.deleteProfile(profile.id);
+      onSuccess();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete profile");
+    } finally {
+      setDeleting(false);
+    }
+  };
+  return /* @__PURE__ */ jsx3(Dialog, { open: !!profile, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ jsxs3(DialogContent, { children: [
+    /* @__PURE__ */ jsxs3(DialogHeader, { children: [
+      /* @__PURE__ */ jsx3(DialogTitle, { children: "Delete Profile" }),
+      /* @__PURE__ */ jsxs3(DialogDescription, { children: [
+        'Are you sure you want to delete "',
+        profile?.name,
+        '"? This action cannot be undone.'
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-red-400 text-sm", children: [
+      /* @__PURE__ */ jsx3(AlertCircle, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx3("span", { children: error })
+    ] }),
+    profile?.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs3("div", { className: "rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-3 text-sm text-yellow-400", children: [
+      "This profile has ",
+      profile.metrics.total_runs,
+      " recorded runs. Deleting it will lose all performance metrics."
+    ] }),
+    /* @__PURE__ */ jsxs3(DialogFooter, { children: [
+      /* @__PURE__ */ jsx3(Button, { variant: "outline", onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ jsxs3(
+        Button,
+        {
+          variant: "destructive",
+          onClick: handleDelete,
+          disabled: deleting,
+          children: [
+            deleting && /* @__PURE__ */ jsx3(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
+            "Delete Profile"
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
+function ProfileDetailDialog({
+  profile,
+  onClose,
+  onEdit,
+  onDuplicate
+}) {
+  if (!profile) return null;
+  return /* @__PURE__ */ jsx3(Dialog, { open: !!profile, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ jsxs3(DialogContent, { className: "max-w-2xl", children: [
+    /* @__PURE__ */ jsxs3(DialogHeader, { children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx3(DialogTitle, { children: profile.name }),
+        profile.is_builtin && /* @__PURE__ */ jsx3(Badge, { variant: "secondary", className: "border-0", children: "Built-in" }),
+        profile.is_public && !profile.is_builtin && /* @__PURE__ */ jsx3(Badge, { className: "border-0 bg-blue-500/10 text-blue-400", children: "Public" })
+      ] }),
+      profile.description && /* @__PURE__ */ jsx3(DialogDescription, { children: profile.description })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+        profile.extends && /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsx3("label", { className: "font-medium text-muted-foreground text-xs", children: "Extends" }),
+          /* @__PURE__ */ jsx3("p", { className: "text-sm", children: profile.extends })
+        ] }),
+        profile.model && /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsx3("label", { className: "font-medium text-muted-foreground text-xs", children: "Model" }),
+          /* @__PURE__ */ jsx3("p", { className: "text-sm", children: profile.model })
+        ] })
+      ] }),
+      profile.tags && profile.tags.length > 0 && /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("label", { className: "font-medium text-muted-foreground text-xs", children: "Tags" }),
+        /* @__PURE__ */ jsx3("div", { className: "mt-1 flex flex-wrap gap-1", children: profile.tags.map((tag) => /* @__PURE__ */ jsx3(Badge, { variant: "outline", className: "text-xs", children: tag }, tag)) })
+      ] }),
+      profile.system_prompt && /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("label", { className: "font-medium text-muted-foreground text-xs", children: "System Prompt" }),
+        /* @__PURE__ */ jsxs3("div", { className: "relative mt-1", children: [
+          /* @__PURE__ */ jsx3("pre", { className: "max-h-48 overflow-auto rounded-lg bg-muted p-3 font-mono text-sm", children: profile.system_prompt }),
+          /* @__PURE__ */ jsx3(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "absolute top-2 right-2",
+              onClick: () => navigator.clipboard.writeText(profile.system_prompt),
+              "aria-label": "Copy system prompt",
+              children: /* @__PURE__ */ jsx3(Copy, { className: "h-4 w-4" })
+            }
+          )
+        ] })
+      ] }),
+      profile.instructions && profile.instructions.length > 0 && /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("label", { className: "font-medium text-muted-foreground text-xs", children: "Instructions" }),
+        /* @__PURE__ */ jsx3("ul", { className: "mt-1 space-y-1", children: profile.instructions.map((inst, i) => /* @__PURE__ */ jsxs3("li", { className: "flex items-start gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx3(ChevronRight, { className: "mt-0.5 h-4 w-4 text-muted-foreground" }),
+          inst
+        ] }, i)) })
+      ] }),
+      profile.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs3("div", { className: "rounded-lg border border-border p-4", children: [
+        /* @__PURE__ */ jsx3("label", { className: "font-medium text-muted-foreground text-xs", children: "Performance Metrics" }),
+        /* @__PURE__ */ jsxs3("div", { className: "mt-2 grid grid-cols-2 gap-4 sm:grid-cols-4", children: [
+          /* @__PURE__ */ jsxs3("div", { children: [
+            /* @__PURE__ */ jsx3("p", { className: "font-medium text-2xl", children: profile.metrics.total_runs }),
+            /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "Total Runs" })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { children: [
+            /* @__PURE__ */ jsxs3("p", { className: "font-medium text-2xl", children: [
+              profile.metrics.success_rate.toFixed(0),
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "Success Rate" })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { children: [
+            /* @__PURE__ */ jsxs3("p", { className: "font-medium text-2xl", children: [
+              (profile.metrics.avg_duration_ms / 1e3).toFixed(1),
+              "s"
+            ] }),
+            /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "Avg Duration" })
+          ] }),
+          profile.metrics.avg_tokens_used && /* @__PURE__ */ jsxs3("div", { children: [
+            /* @__PURE__ */ jsx3("p", { className: "font-medium text-2xl", children: profile.metrics.avg_tokens_used.toLocaleString() }),
+            /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "Avg Tokens" })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3(DialogFooter, { children: [
+      /* @__PURE__ */ jsx3(Button, { variant: "outline", onClick: onClose, children: "Close" }),
+      onDuplicate && /* @__PURE__ */ jsxs3(Button, { variant: "outline", onClick: onDuplicate, children: [
+        /* @__PURE__ */ jsx3(Copy, { className: "mr-2 h-4 w-4" }),
+        "Duplicate"
+      ] }),
+      onEdit && /* @__PURE__ */ jsxs3(Button, { onClick: onEdit, children: [
+        /* @__PURE__ */ jsx3(Edit2, { className: "mr-2 h-4 w-4" }),
+        "Edit"
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  BillingPage,
+  ProfilesPage,
+  StandalonePricingPage
+};