@burdenoff/microfe-subscriberbot 2026.706.2 → 2026.706.3

package/dist/subscriberbot/pages/providers/ProviderDetailPage.js

@@ -1,18 +1,21 @@
 import { useSubscriberBot as e } from "../../context/SubscriberBotContext.js";
-import { PageLayout as t } from "../../components/PageLayout.js";
-import { formatCurrency as n, formatEnumLabel as r, formatIntervalSuffix as i } from "../../utils/formatters.js";
-import { StatusBadge as a } from "../../components/StatusBadge.js";
-import { EmptyState as o } from "../../components/EmptyState.js";
-import { ErrorView as s, LoadingView as c, Section as l } from "../../components/StateViews.js";
-import { useArchiveProvider as u, useCreatePlan as d, useProvider as f, useUpdateProvider as p } from "../../hooks/useSubscriberBotApi.js";
-import { Modal as m } from "../../components/Modal.js";
-import { useState as h } from "react";
-import { Archive as g, ArrowLeft as _, Building2 as v, Globe as y, Pencil as b, Plus as x, ShieldCheck as S, Tag as C, TrendingDown as w } from "lucide-react";
-import { useParams as T } from "react-router-dom";
-import { jsx as E, jsxs as D } from "react/jsx-runtime";
-import { GlassCard as O } from "@burdenoff/fe-libs/ui";
+import { cn as t } from "../../utils/cn.js";
+import { PageLayout as n } from "../../components/PageLayout.js";
+import { formatCurrency as r, formatEnumLabel as i, formatIntervalSuffix as a } from "../../utils/formatters.js";
+import { StatusBadge as o } from "../../components/StatusBadge.js";
+import { EmptyState as s } from "../../components/EmptyState.js";
+import { Modal as c } from "../../components/Modal.js";
+import { ErrorView as l, LoadingView as u, Section as d } from "../../components/StateViews.js";
+import { Gauge as f, MiniProgress as p } from "../../components/viz.js";
+import "../../components/index.js";
+import { useArchiveProvider as m, useCreatePlan as h, useProvider as g, useUpdateProvider as _ } from "../../hooks/useSubscriberBotApi.js";
+import { useState as v } from "react";
+import { Archive as y, ArrowLeft as b, Building2 as x, Check as S, Globe as C, Layers as w, Pencil as T, Plus as E, ShieldCheck as D, Sparkles as O, Tag as k, TrendingDown as A } from "lucide-react";
+import { useParams as j } from "react-router-dom";
+import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";
+import { GlassCard as F } from "@burdenoff/fe-libs/ui";
 //#region src/subscriberbot/pages/providers/ProviderDetailPage.tsx
-var k = "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]", A = "mb-1 block text-xs font-medium text-text-secondary", j = [
+var I = "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]", L = "mb-1 block text-xs font-medium text-text-secondary", R = [
 	"SAAS",
 	"AI_SERVICE",
 	"STREAMING",
@@ -29,12 +32,12 @@ var k = "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 t
 	"LICENSE",
 	"CONTRACT",
 	"OTHER"
-], M = [
+], z = [
 	"UNVERIFIED",
 	"VERIFIED",
 	"CLAIMED",
 	"DEPRECATED"
-], N = [
+], B = [
 	"MONTHLY",
 	"YEARLY",
 	"QUARTERLY",
@@ -44,27 +47,54 @@ var k = "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 t
 	"LIFETIME",
 	"FREE"
 ];
-function P({ provider: e, onClose: t }) {
-	let n = p(), [r, i] = h(e.name), [a, o] = h(e.category), [s, c] = h(e.status), [l, u] = h(e.description ?? ""), [d, f] = h(e.industry ?? ""), [g, _] = h(e.region ?? ""), [v, y] = h(e.language ?? ""), [b, x] = h(e.websiteUrl ?? ""), [S, C] = h(e.churnRiskScore == null ? "" : String(e.churnRiskScore)), [w, T] = h(e.vendorHealthScore == null ? "" : String(e.vendorHealthScore)), [O, N] = h(e.tags.join(", ")), [P, F] = h(null);
-	return /* @__PURE__ */ E(m, {
+function V(e) {
+	return e >= 70 ? {
+		label: "Healthy",
+		cls: "bg-status-success-bg-subtle text-status-success-text"
+	} : e >= 45 ? {
+		label: "Fair",
+		cls: "bg-status-warning-bg-subtle text-status-warning-text"
+	} : {
+		label: "At risk",
+		cls: "bg-status-error-bg-subtle text-status-error-text"
+	};
+}
+function H(e) {
+	return e >= 67 ? {
+		label: "High",
+		chip: "bg-status-error-bg-subtle text-status-error-text",
+		tone: "negative"
+	} : e >= 34 ? {
+		label: "Moderate",
+		chip: "bg-status-warning-bg-subtle text-status-warning-text",
+		tone: "warning"
+	} : {
+		label: "Low",
+		chip: "bg-status-success-bg-subtle text-status-success-text",
+		tone: "positive"
+	};
+}
+function U({ provider: e, onClose: t }) {
+	let n = _(), [r, i] = v(e.name), [a, o] = v(e.category), [s, l] = v(e.status), [u, d] = v(e.description ?? ""), [f, p] = v(e.industry ?? ""), [m, h] = v(e.region ?? ""), [g, y] = v(e.language ?? ""), [b, x] = v(e.websiteUrl ?? ""), [S, C] = v(e.churnRiskScore == null ? "" : String(e.churnRiskScore)), [w, T] = v(e.vendorHealthScore == null ? "" : String(e.vendorHealthScore)), [E, D] = v(e.tags.join(", ")), [O, k] = v(null);
+	return /* @__PURE__ */ N(c, {
 		title: "Edit provider",
 		onClose: t,
 		maxWidthClassName: "max-w-2xl",
-		children: /* @__PURE__ */ D("form", {
+		children: /* @__PURE__ */ P("form", {
 			onSubmit: (i) => {
-				if (i.preventDefault(), F(null), !r.trim()) {
-					F("A provider name is required.");
+				if (i.preventDefault(), k(null), !r.trim()) {
+					k("A provider name is required.");
 					return;
 				}
-				let o = O.split(",").map((e) => e.trim()).filter(Boolean), c = {
+				let o = E.split(",").map((e) => e.trim()).filter(Boolean), c = {
 					name: r.trim(),
 					category: a,
 					status: s,
-					description: l.trim(),
+					description: u.trim(),
 					tags: o,
-					...d.trim() ? { industry: d.trim() } : {},
-					...g.trim() ? { region: g.trim() } : {},
-					...v.trim() ? { language: v.trim() } : {},
+					...f.trim() ? { industry: f.trim() } : {},
+					...m.trim() ? { region: m.trim() } : {},
+					...g.trim() ? { language: g.trim() } : {},
 					...b.trim() ? { websiteUrl: b.trim() } : {},
 					...S.trim() ? { churnRiskScore: Number(S) } : {},
 					...w.trim() ? { vendorHealthScore: Number(w) } : {}
@@ -74,171 +104,171 @@ function P({ provider: e, onClose: t }) {
 					input: c
 				}, {
 					onSuccess: () => t(),
-					onError: (e) => F(e instanceof Error ? e.message : "Could not update provider.")
+					onError: (e) => k(e instanceof Error ? e.message : "Could not update provider.")
 				});
 			},
 			className: "space-y-4",
 			children: [
-				P && /* @__PURE__ */ E("div", {
+				O && /* @__PURE__ */ N("div", {
 					className: "rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-4 py-2 text-sm text-status-error-text",
-					children: P
+					children: O
 				}),
-				/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ D("label", {
+				/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ P("label", {
 					htmlFor: "prov-edit-name",
-					className: A,
-					children: ["Name ", /* @__PURE__ */ E("span", {
+					className: L,
+					children: ["Name ", /* @__PURE__ */ N("span", {
 						className: "text-status-error-text",
 						children: "*"
 					})]
-				}), /* @__PURE__ */ E("input", {
+				}), /* @__PURE__ */ N("input", {
 					id: "prov-edit-name",
 					type: "text",
 					value: r,
 					onChange: (e) => i(e.target.value),
-					className: k,
+					className: I,
 					required: !0
 				})] }),
-				/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ P("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-					children: [/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("label", {
+					children: [/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 						htmlFor: "prov-edit-category",
-						className: A,
+						className: L,
 						children: "Category"
-					}), /* @__PURE__ */ E("select", {
+					}), /* @__PURE__ */ N("select", {
 						id: "prov-edit-category",
 						value: a,
 						onChange: (e) => o(e.target.value),
-						className: k,
-						children: j.map((e) => /* @__PURE__ */ E("option", {
+						className: I,
+						children: R.map((e) => /* @__PURE__ */ N("option", {
 							value: e,
 							children: e.replace(/_/g, " ")
 						}, e))
-					})] }), /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("label", {
+					})] }), /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 						htmlFor: "prov-edit-status",
-						className: A,
+						className: L,
 						children: "Status"
-					}), /* @__PURE__ */ E("select", {
+					}), /* @__PURE__ */ N("select", {
 						id: "prov-edit-status",
 						value: s,
-						onChange: (e) => c(e.target.value),
-						className: k,
-						children: M.map((e) => /* @__PURE__ */ E("option", {
+						onChange: (e) => l(e.target.value),
+						className: I,
+						children: z.map((e) => /* @__PURE__ */ N("option", {
 							value: e,
 							children: e.replace(/_/g, " ")
 						}, e))
 					})] })]
 				}),
-				/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ P("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
 					children: [
-						/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("label", {
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 							htmlFor: "prov-edit-industry",
-							className: A,
+							className: L,
 							children: "Industry"
-						}), /* @__PURE__ */ E("input", {
+						}), /* @__PURE__ */ N("input", {
 							id: "prov-edit-industry",
 							type: "text",
-							value: d,
-							onChange: (e) => f(e.target.value),
-							className: k
+							value: f,
+							onChange: (e) => p(e.target.value),
+							className: I
 						})] }),
-						/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("label", {
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 							htmlFor: "prov-edit-region",
-							className: A,
+							className: L,
 							children: "Region"
-						}), /* @__PURE__ */ E("input", {
+						}), /* @__PURE__ */ N("input", {
 							id: "prov-edit-region",
 							type: "text",
-							value: g,
-							onChange: (e) => _(e.target.value),
-							className: k
+							value: m,
+							onChange: (e) => h(e.target.value),
+							className: I
 						})] }),
-						/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("label", {
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 							htmlFor: "prov-edit-language",
-							className: A,
+							className: L,
 							children: "Language"
-						}), /* @__PURE__ */ E("input", {
+						}), /* @__PURE__ */ N("input", {
 							id: "prov-edit-language",
 							type: "text",
-							value: v,
+							value: g,
 							onChange: (e) => y(e.target.value),
-							className: k
+							className: I
 						})] })
 					]
 				}),
-				/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("label", {
+				/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 					htmlFor: "prov-edit-website",
-					className: A,
+					className: L,
 					children: "Website"
-				}), /* @__PURE__ */ E("input", {
+				}), /* @__PURE__ */ N("input", {
 					id: "prov-edit-website",
 					type: "url",
 					value: b,
 					onChange: (e) => x(e.target.value),
 					placeholder: "https://…",
-					className: k
+					className: I
 				})] }),
-				/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("label", {
+				/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 					htmlFor: "prov-edit-desc",
-					className: A,
+					className: L,
 					children: "Description"
-				}), /* @__PURE__ */ E("textarea", {
+				}), /* @__PURE__ */ N("textarea", {
 					id: "prov-edit-desc",
-					value: l,
-					onChange: (e) => u(e.target.value),
+					value: u,
+					onChange: (e) => d(e.target.value),
 					rows: 3,
-					className: k
+					className: I
 				})] }),
-				/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ P("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-					children: [/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("label", {
+					children: [/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 						htmlFor: "prov-edit-churn",
-						className: A,
+						className: L,
 						children: "Churn risk (0–100)"
-					}), /* @__PURE__ */ E("input", {
+					}), /* @__PURE__ */ N("input", {
 						id: "prov-edit-churn",
 						type: "number",
 						min: "0",
 						max: "100",
 						value: S,
 						onChange: (e) => C(e.target.value),
-						className: k
-					})] }), /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("label", {
+						className: I
+					})] }), /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 						htmlFor: "prov-edit-health",
-						className: A,
+						className: L,
 						children: "Vendor health (0–100)"
-					}), /* @__PURE__ */ E("input", {
+					}), /* @__PURE__ */ N("input", {
 						id: "prov-edit-health",
 						type: "number",
 						min: "0",
 						max: "100",
 						value: w,
 						onChange: (e) => T(e.target.value),
-						className: k
+						className: I
 					})] })]
 				}),
-				/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ D("label", {
+				/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ P("label", {
 					htmlFor: "prov-edit-tags",
-					className: A,
-					children: ["Tags ", /* @__PURE__ */ E("span", {
+					className: L,
+					children: ["Tags ", /* @__PURE__ */ N("span", {
 						className: "text-text-secondary",
 						children: "(comma-separated)"
 					})]
-				}), /* @__PURE__ */ E("input", {
+				}), /* @__PURE__ */ N("input", {
 					id: "prov-edit-tags",
 					type: "text",
-					value: O,
-					onChange: (e) => N(e.target.value),
-					className: k
+					value: E,
+					onChange: (e) => D(e.target.value),
+					className: I
 				})] }),
-				/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ P("div", {
 					className: "flex justify-end gap-3",
-					children: [/* @__PURE__ */ E("button", {
+					children: [/* @__PURE__ */ N("button", {
 						type: "button",
 						onClick: t,
 						className: "rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
 						children: "Cancel"
-					}), /* @__PURE__ */ E("button", {
+					}), /* @__PURE__ */ N("button", {
 						type: "submit",
 						disabled: n.isPending,
 						className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 disabled:opacity-50",
@@ -249,23 +279,23 @@ function P({ provider: e, onClose: t }) {
 		})
 	});
 }
-function F({ providerId: e, onClose: t }) {
-	let n = d(), [r, i] = h(""), [a, o] = h(""), [s, c] = h("USD"), [l, u] = h("MONTHLY"), [f, p] = h(""), [g, _] = h(""), [v, y] = h(!0), [b, x] = h(null);
-	return /* @__PURE__ */ E(m, {
+function W({ providerId: e, onClose: t }) {
+	let n = h(), [r, i] = v(""), [a, o] = v(""), [s, l] = v("USD"), [u, d] = v("MONTHLY"), [f, p] = v(""), [m, g] = v(""), [_, y] = v(!0), [b, x] = v(null);
+	return /* @__PURE__ */ N(c, {
 		title: "Add plan",
 		onClose: t,
 		maxWidthClassName: "max-w-xl",
-		children: /* @__PURE__ */ D("form", {
+		children: /* @__PURE__ */ P("form", {
 			onSubmit: (i) => {
 				if (i.preventDefault(), x(null), !r.trim()) {
 					x("A plan name is required.");
 					return;
 				}
-				let o = g.split("\n").map((e) => e.trim()).filter(Boolean);
+				let o = m.split("\n").map((e) => e.trim()).filter(Boolean);
 				n.mutate({
 					providerId: e,
 					name: r.trim(),
-					interval: l,
+					interval: u,
 					currency: s.trim() || "USD",
 					...a.trim() ? { amount: Number(a) } : {},
 					...f.trim() ? { description: f.trim() } : {},
@@ -277,34 +307,34 @@ function F({ providerId: e, onClose: t }) {
 			},
 			className: "space-y-4",
 			children: [
-				b && /* @__PURE__ */ E("div", {
+				b && /* @__PURE__ */ N("div", {
 					className: "rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-4 py-2 text-sm text-status-error-text",
 					children: b
 				}),
-				/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ D("label", {
+				/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ P("label", {
 					htmlFor: "plan-name",
-					className: A,
-					children: ["Name ", /* @__PURE__ */ E("span", {
+					className: L,
+					children: ["Name ", /* @__PURE__ */ N("span", {
 						className: "text-status-error-text",
 						children: "*"
 					})]
-				}), /* @__PURE__ */ E("input", {
+				}), /* @__PURE__ */ N("input", {
 					id: "plan-name",
 					type: "text",
 					value: r,
 					onChange: (e) => i(e.target.value),
 					placeholder: "e.g. Pro, Team, Enterprise",
-					className: k,
+					className: I,
 					required: !0
 				})] }),
-				/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ P("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
 					children: [
-						/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("label", {
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 							htmlFor: "plan-amount",
-							className: A,
+							className: L,
 							children: "Amount"
-						}), /* @__PURE__ */ E("input", {
+						}), /* @__PURE__ */ N("input", {
 							id: "plan-amount",
 							type: "number",
 							min: "0",
@@ -312,79 +342,79 @@ function F({ providerId: e, onClose: t }) {
 							value: a,
 							onChange: (e) => o(e.target.value),
 							placeholder: "0.00",
-							className: k
+							className: I
 						})] }),
-						/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("label", {
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 							htmlFor: "plan-currency",
-							className: A,
+							className: L,
 							children: "Currency"
-						}), /* @__PURE__ */ E("input", {
+						}), /* @__PURE__ */ N("input", {
 							id: "plan-currency",
 							type: "text",
 							value: s,
-							onChange: (e) => c(e.target.value.toUpperCase()),
+							onChange: (e) => l(e.target.value.toUpperCase()),
 							maxLength: 3,
-							className: k
+							className: I
 						})] }),
-						/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("label", {
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 							htmlFor: "plan-interval",
-							className: A,
+							className: L,
 							children: "Interval"
-						}), /* @__PURE__ */ E("select", {
+						}), /* @__PURE__ */ N("select", {
 							id: "plan-interval",
-							value: l,
-							onChange: (e) => u(e.target.value),
-							className: k,
-							children: N.map((e) => /* @__PURE__ */ E("option", {
+							value: u,
+							onChange: (e) => d(e.target.value),
+							className: I,
+							children: B.map((e) => /* @__PURE__ */ N("option", {
 								value: e,
 								children: e.replace(/_/g, " ")
 							}, e))
 						})] })
 					]
 				}),
-				/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("label", {
+				/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 					htmlFor: "plan-desc",
-					className: A,
+					className: L,
 					children: "Description"
-				}), /* @__PURE__ */ E("textarea", {
+				}), /* @__PURE__ */ N("textarea", {
 					id: "plan-desc",
 					value: f,
 					onChange: (e) => p(e.target.value),
 					rows: 2,
-					className: k
+					className: I
 				})] }),
-				/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ D("label", {
+				/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ P("label", {
 					htmlFor: "plan-features",
-					className: A,
-					children: ["Features ", /* @__PURE__ */ E("span", {
+					className: L,
+					children: ["Features ", /* @__PURE__ */ N("span", {
 						className: "text-text-secondary",
 						children: "(one per line)"
 					})]
-				}), /* @__PURE__ */ E("textarea", {
+				}), /* @__PURE__ */ N("textarea", {
 					id: "plan-features",
-					value: g,
-					onChange: (e) => _(e.target.value),
+					value: m,
+					onChange: (e) => g(e.target.value),
 					rows: 3,
 					placeholder: "Unlimited projects\nPriority support\nSSO",
-					className: k
+					className: I
 				})] }),
-				/* @__PURE__ */ D("label", {
+				/* @__PURE__ */ P("label", {
 					className: "flex items-center gap-2 text-sm text-text-primary",
-					children: [/* @__PURE__ */ E("input", {
+					children: [/* @__PURE__ */ N("input", {
 						type: "checkbox",
-						checked: v,
+						checked: _,
 						onChange: (e) => y(e.target.checked),
 						className: "size-4 rounded border-border-subtle"
 					}), "Active"]
 				}),
-				/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ P("div", {
 					className: "flex justify-end gap-3",
-					children: [/* @__PURE__ */ E("button", {
+					children: [/* @__PURE__ */ N("button", {
 						type: "button",
 						onClick: t,
 						className: "rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
 						children: "Cancel"
-					}), /* @__PURE__ */ E("button", {
+					}), /* @__PURE__ */ N("button", {
 						type: "submit",
 						disabled: n.isPending,
 						className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 disabled:opacity-50",
@@ -395,37 +425,37 @@ function F({ providerId: e, onClose: t }) {
 		})
 	});
 }
-function I({ provider: t, onClose: n }) {
-	let { navigateTo: r } = e(), i = u(), [a, o] = h(null);
-	return /* @__PURE__ */ E(m, {
+function G({ provider: t, onClose: n }) {
+	let { navigateTo: r } = e(), i = m(), [a, o] = v(null);
+	return /* @__PURE__ */ N(c, {
 		title: "Archive provider",
 		onClose: n,
-		children: /* @__PURE__ */ D("div", {
+		children: /* @__PURE__ */ P("div", {
 			className: "space-y-4",
 			children: [
-				a && /* @__PURE__ */ E("div", {
+				a && /* @__PURE__ */ N("div", {
 					className: "rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-4 py-2 text-sm text-status-error-text",
 					children: a
 				}),
-				/* @__PURE__ */ D("p", {
+				/* @__PURE__ */ P("p", {
 					className: "text-sm text-text-secondary",
 					children: [
 						"Archive ",
-						/* @__PURE__ */ E("span", {
+						/* @__PURE__ */ N("span", {
 							className: "font-medium text-text-primary",
 							children: t.name
 						}),
 						"? It will be removed from the active registry. This can be reversed by an administrator."
 					]
 				}),
-				/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ P("div", {
 					className: "flex justify-end gap-3",
-					children: [/* @__PURE__ */ E("button", {
+					children: [/* @__PURE__ */ N("button", {
 						type: "button",
 						onClick: n,
 						className: "rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
 						children: "Cancel"
-					}), /* @__PURE__ */ E("button", {
+					}), /* @__PURE__ */ N("button", {
 						type: "button",
 						onClick: () => {
 							o(null), i.mutate(t.id, {
@@ -442,205 +472,308 @@ function I({ provider: t, onClose: n }) {
 		})
 	});
 }
-function L() {
-	let { id: u } = T(), { navigateTo: d } = e(), { data: p, isLoading: m, isError: k, refetch: A } = f(u), [j, M] = h(!1), [N, L] = h(!1), [R, z] = h(!1);
-	if (m) return /* @__PURE__ */ E(t, {
+function K() {
+	let { id: c } = j(), { navigateTo: m } = e(), { data: h, isLoading: _, isError: I, refetch: L } = g(c), [R, z] = v(!1), [B, K] = v(!1), [q, J] = v(!1);
+	if (_) return /* @__PURE__ */ N(n, {
 		title: "Provider",
-		children: /* @__PURE__ */ E(c, { label: "Loading provider…" })
+		children: /* @__PURE__ */ N(u, { label: "Loading provider…" })
 	});
-	if (k) return /* @__PURE__ */ E(t, {
+	if (I) return /* @__PURE__ */ N(n, {
 		title: "Provider",
-		children: /* @__PURE__ */ E(s, {
+		children: /* @__PURE__ */ N(l, {
 			message: "Could not load this provider.",
-			onRetry: () => void A()
+			onRetry: () => void L()
 		})
 	});
-	if (!p) return /* @__PURE__ */ E(t, {
+	if (!h) return /* @__PURE__ */ N(n, {
 		title: "Provider",
-		children: /* @__PURE__ */ E(o, {
+		children: /* @__PURE__ */ N(s, {
 			illustration: "empty-data",
 			title: "Provider not found",
 			description: "It may have been removed, or you may not have access to it.",
-			action: /* @__PURE__ */ E("button", {
+			action: /* @__PURE__ */ N("button", {
 				type: "button",
-				onClick: () => d("/providers"),
+				onClick: () => m("/providers"),
 				className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90",
 				children: "Back to providers"
 			})
 		})
 	});
-	let B = p, V = B.websiteUrl && /^https?:\/\//i.test(B.websiteUrl) ? B.websiteUrl : null;
-	return /* @__PURE__ */ D(t, {
-		title: B.name,
-		description: r(B.category),
-		actions: /* @__PURE__ */ D("div", {
+	let Y = h, X = Y.websiteUrl && /^https?:\/\//i.test(Y.websiteUrl) ? Y.websiteUrl : null, Z = Y.plans && Y.plans.length > 1 ? Y.plans.filter((e) => e.isActive && e.amount > 0).reduce((e, t) => e === null || t.amount < e.amount ? t : e, null)?.id ?? null : null;
+	return /* @__PURE__ */ P(n, {
+		title: Y.name,
+		description: i(Y.category),
+		actions: /* @__PURE__ */ P("div", {
 			className: "flex items-center gap-2",
 			children: [
-				/* @__PURE__ */ D("button", {
+				/* @__PURE__ */ P("button", {
 					type: "button",
-					onClick: () => M(!0),
+					onClick: () => z(!0),
 					className: "inline-flex items-center gap-2 rounded-lg border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
-					children: [/* @__PURE__ */ E(b, { className: "h-4 w-4" }), " Edit"]
+					children: [/* @__PURE__ */ N(T, { className: "h-4 w-4" }), " Edit"]
 				}),
-				/* @__PURE__ */ D("button", {
+				/* @__PURE__ */ P("button", {
 					type: "button",
-					onClick: () => z(!0),
+					onClick: () => J(!0),
 					className: "inline-flex items-center gap-2 rounded-lg border border-status-error-text/30 px-3 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg-subtle",
-					children: [/* @__PURE__ */ E(g, { className: "h-4 w-4" }), " Archive"]
+					children: [/* @__PURE__ */ N(y, { className: "h-4 w-4" }), " Archive"]
 				}),
-				/* @__PURE__ */ D("button", {
+				/* @__PURE__ */ P("button", {
 					type: "button",
-					onClick: () => d("/providers"),
+					onClick: () => m("/providers"),
 					className: "inline-flex items-center gap-2 rounded-lg border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
-					children: [/* @__PURE__ */ E(_, { className: "h-4 w-4" }), " Back"]
+					children: [/* @__PURE__ */ N(b, { className: "h-4 w-4" }), " Back"]
 				})
 			]
 		}),
 		children: [
-			/* @__PURE__ */ D("div", {
+			/* @__PURE__ */ P("div", {
 				className: "flex flex-wrap items-center gap-3",
 				children: [
-					/* @__PURE__ */ E("span", {
-						className: "flex size-10 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
-						children: /* @__PURE__ */ E(v, { className: "h-5 w-5" })
+					/* @__PURE__ */ N("span", {
+						className: "flex size-11 items-center justify-center rounded-xl bg-[var(--color-accent-soft)] text-text-primary",
+						children: /* @__PURE__ */ N(x, { className: "h-5 w-5" })
+					}),
+					/* @__PURE__ */ N(o, { status: Y.status }),
+					Y.industry && /* @__PURE__ */ N("span", {
+						className: "text-sm text-text-secondary",
+						children: Y.industry
 					}),
-					/* @__PURE__ */ E(a, { status: B.status }),
-					B.region && /* @__PURE__ */ E("span", {
+					Y.region && /* @__PURE__ */ P("span", {
 						className: "text-sm text-text-secondary",
-						children: B.region
+						children: ["· ", Y.region]
 					}),
-					V && /* @__PURE__ */ D("a", {
-						href: V,
+					X && /* @__PURE__ */ P("a", {
+						href: X,
 						target: "_blank",
 						rel: "noopener noreferrer",
 						className: "inline-flex items-center gap-1 text-sm text-text-link hover:underline",
-						children: [/* @__PURE__ */ E(y, { className: "h-3.5 w-3.5" }), " Website"]
+						children: [/* @__PURE__ */ N(C, { className: "h-3.5 w-3.5" }), " Website"]
 					})
 				]
 			}),
-			B.description && /* @__PURE__ */ E("p", {
-				className: "mt-4 max-w-3xl text-sm text-text-secondary",
-				children: B.description
-			}),
-			/* @__PURE__ */ D("div", {
-				className: "mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
-				children: [
-					/* @__PURE__ */ D(O, {
-						treatment: "metric",
-						className: "p-4",
-						children: [/* @__PURE__ */ D("div", {
-							className: "flex items-center gap-2 text-xs font-medium text-text-secondary",
-							children: [/* @__PURE__ */ E(S, { className: "h-3.5 w-3.5" }), " Vendor health"]
-						}), /* @__PURE__ */ E("p", {
-							className: "mt-1.5 text-lg font-semibold tabular-nums text-text-primary",
-							children: B.vendorHealthScore == null ? "—" : `${B.vendorHealthScore}/100`
-						})]
-					}),
-					/* @__PURE__ */ D(O, {
-						treatment: "metric",
-						className: "p-4",
-						children: [/* @__PURE__ */ D("div", {
-							className: "flex items-center gap-2 text-xs font-medium text-text-secondary",
-							children: [/* @__PURE__ */ E(w, { className: "h-3.5 w-3.5" }), " Churn risk"]
-						}), /* @__PURE__ */ E("p", {
-							className: "mt-1.5 text-lg font-semibold tabular-nums text-text-primary",
-							children: B.churnRiskScore == null ? "—" : `${B.churnRiskScore}/100`
-						})]
-					}),
-					/* @__PURE__ */ D(O, {
-						treatment: "metric",
-						className: "p-4",
-						children: [/* @__PURE__ */ E("div", {
-							className: "flex items-center gap-2 text-xs font-medium text-text-secondary",
-							children: "Industry"
-						}), /* @__PURE__ */ E("p", {
-							className: "mt-1.5 text-sm text-text-primary",
-							children: B.industry ?? "—"
-						})]
-					}),
-					/* @__PURE__ */ D(O, {
-						treatment: "metric",
-						className: "p-4",
-						children: [/* @__PURE__ */ E("div", {
-							className: "flex items-center gap-2 text-xs font-medium text-text-secondary",
-							children: "Language"
-						}), /* @__PURE__ */ E("p", {
-							className: "mt-1.5 text-sm text-text-primary",
-							children: B.language ?? "—"
-						})]
-					})
-				]
+			Y.description && /* @__PURE__ */ N("p", {
+				className: "mt-4 max-w-3xl text-sm leading-relaxed text-text-secondary",
+				children: Y.description
 			}),
-			B.tags.length > 0 && /* @__PURE__ */ D("div", {
-				className: "mt-5 flex flex-wrap items-center gap-2",
-				children: [/* @__PURE__ */ E(C, { className: "h-3.5 w-3.5 text-text-secondary" }), B.tags.map((e) => /* @__PURE__ */ E("span", {
+			Y.tags.length > 0 && /* @__PURE__ */ P("div", {
+				className: "mt-4 flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ N(k, { className: "h-3.5 w-3.5 text-text-secondary" }), Y.tags.map((e) => /* @__PURE__ */ N("span", {
 					className: "rounded-full bg-bg-sunken px-2.5 py-0.5 text-xs text-text-secondary",
 					children: e
 				}, e))]
 			}),
-			/* @__PURE__ */ E(l, {
-				title: "Plans",
-				description: "Pricing this provider publishes",
-				action: /* @__PURE__ */ D("button", {
-					type: "button",
-					onClick: () => L(!0),
-					className: "inline-flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken",
-					children: [/* @__PURE__ */ E(x, { className: "h-3.5 w-3.5" }), " Add plan"]
-				}),
-				children: !B.plans || B.plans.length === 0 ? /* @__PURE__ */ E(o, {
-					illustration: "empty-data",
-					title: "No published plans",
-					description: "When this provider publishes plans, they'll appear here."
-				}) : /* @__PURE__ */ E("div", {
-					className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-					children: B.plans.map((e) => /* @__PURE__ */ D("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
-						children: [
-							/* @__PURE__ */ D("div", {
-								className: "flex items-start justify-between gap-2",
-								children: [/* @__PURE__ */ E("p", {
-									className: "text-sm font-semibold text-text-primary",
-									children: e.name
-								}), /* @__PURE__ */ E(a, { status: e.isActive ? "ACTIVE" : "DISABLED" })]
-							}),
-							/* @__PURE__ */ D("p", {
-								className: "mt-2 text-lg font-bold tabular-nums text-text-primary",
-								children: [n(e.amount, e.currency), /* @__PURE__ */ E("span", {
-									className: "text-xs font-normal text-text-secondary",
-									children: i(e.interval)
+			/* @__PURE__ */ P("div", {
+				className: "mt-6 grid grid-cols-1 gap-6 lg:grid-cols-3",
+				children: [/* @__PURE__ */ N("div", {
+					className: "lg:col-span-2",
+					children: /* @__PURE__ */ N(d, {
+						title: "Plans",
+						description: "Pricing this provider publishes",
+						action: /* @__PURE__ */ P("button", {
+							type: "button",
+							onClick: () => K(!0),
+							className: "inline-flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken",
+							children: [/* @__PURE__ */ N(E, { className: "h-3.5 w-3.5" }), " Add plan"]
+						}),
+						children: !Y.plans || Y.plans.length === 0 ? /* @__PURE__ */ N(s, {
+							illustration: "empty-data",
+							title: "No published plans",
+							description: "When this provider publishes plans, they'll appear here.",
+							action: /* @__PURE__ */ N("button", {
+								type: "button",
+								onClick: () => K(!0),
+								className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90",
+								children: "Add plan"
+							})
+						}) : /* @__PURE__ */ N("div", {
+							className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+							children: Y.plans.map((e) => {
+								let t = e.id === Z && Y.plans.length > 1;
+								return /* @__PURE__ */ P(F, {
+									treatment: t ? "insight" : "metric",
+									glow: t,
+									className: "flex flex-col p-5",
+									children: [
+										/* @__PURE__ */ P("div", {
+											className: "flex items-start justify-between gap-2",
+											children: [/* @__PURE__ */ N("p", {
+												className: "text-sm font-semibold text-text-primary",
+												children: e.name
+											}), t ? /* @__PURE__ */ P("span", {
+												className: "inline-flex items-center gap-1 rounded-full bg-status-success-bg-subtle px-2 py-0.5 text-[11px] font-medium text-status-success-text",
+												children: [/* @__PURE__ */ N(O, { className: "h-3 w-3" }), " Best value"]
+											}) : /* @__PURE__ */ N(o, { status: e.isActive ? "ACTIVE" : "DISABLED" })]
+										}),
+										/* @__PURE__ */ P("p", {
+											className: "mt-3 text-2xl font-bold tabular-nums text-text-primary",
+											children: [r(e.amount, e.currency), /* @__PURE__ */ N("span", {
+												className: "text-sm font-normal text-text-secondary",
+												children: a(e.interval)
+											})]
+										}),
+										e.description && /* @__PURE__ */ N("p", {
+											className: "mt-2 text-xs leading-relaxed text-text-secondary",
+											children: e.description
+										}),
+										e.features.length > 0 && /* @__PURE__ */ P("ul", {
+											className: "mt-4 space-y-2 border-t border-border-subtle pt-4",
+											children: [e.features.slice(0, 6).map((e) => /* @__PURE__ */ P("li", {
+												className: "flex items-start gap-2 text-xs text-text-secondary",
+												children: [/* @__PURE__ */ N(S, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-status-success-text" }), /* @__PURE__ */ N("span", { children: e })]
+											}, e)), e.features.length > 6 && /* @__PURE__ */ P("li", {
+												className: "pl-6 text-[11px] text-text-secondary",
+												children: [
+													"+",
+													e.features.length - 6,
+													" more"
+												]
+											})]
+										})
+									]
+								}, e.id);
+							})
+						})
+					})
+				}), /* @__PURE__ */ P("div", {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ P(F, {
+							treatment: "metric",
+							className: "p-5",
+							children: [/* @__PURE__ */ P("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ P("span", {
+									className: "inline-flex items-center gap-2 text-sm font-medium text-text-primary",
+									children: [/* @__PURE__ */ N(D, { className: "h-4 w-4 text-text-secondary" }), " Vendor health"]
+								}), Y.vendorHealthScore != null && /* @__PURE__ */ N("span", {
+									className: t("rounded-full px-2 py-0.5 text-[11px] font-medium", V(Y.vendorHealthScore).cls),
+									children: V(Y.vendorHealthScore).label
+								})]
+							}), Y.vendorHealthScore == null ? /* @__PURE__ */ N("p", {
+								className: "mt-4 text-sm text-text-secondary",
+								children: "No health score yet."
+							}) : /* @__PURE__ */ N("div", {
+								className: "mt-2 flex flex-col items-center",
+								children: /* @__PURE__ */ N(f, {
+									value: Y.vendorHealthScore,
+									max: 100,
+									size: 168,
+									label: "out of 100"
+								})
+							})]
+						}),
+						/* @__PURE__ */ P(F, {
+							treatment: "metric",
+							className: "p-5",
+							children: [/* @__PURE__ */ P("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ P("span", {
+									className: "inline-flex items-center gap-2 text-sm font-medium text-text-primary",
+									children: [/* @__PURE__ */ N(A, { className: "h-4 w-4 text-text-secondary" }), " Churn risk"]
+								}), Y.churnRiskScore != null && /* @__PURE__ */ N("span", {
+									className: t("rounded-full px-2 py-0.5 text-[11px] font-medium", H(Y.churnRiskScore).chip),
+									children: H(Y.churnRiskScore).label
 								})]
-							}),
-							e.description && /* @__PURE__ */ E("p", {
-								className: "mt-1 text-xs text-text-secondary",
-								children: e.description
-							}),
-							e.features.length > 0 && /* @__PURE__ */ E("ul", {
-								className: "mt-3 space-y-1",
-								children: e.features.slice(0, 5).map((e) => /* @__PURE__ */ D("li", {
+							}), Y.churnRiskScore == null ? /* @__PURE__ */ N("p", {
+								className: "mt-4 text-sm text-text-secondary",
+								children: "No churn signal yet."
+							}) : /* @__PURE__ */ P(M, { children: [/* @__PURE__ */ P("div", {
+								className: "mt-3 flex items-baseline justify-between",
+								children: [/* @__PURE__ */ N("span", {
+									className: "text-2xl font-bold tabular-nums text-text-primary",
+									children: Y.churnRiskScore
+								}), /* @__PURE__ */ N("span", {
 									className: "text-xs text-text-secondary",
-									children: ["• ", e]
-								}, e))
-							})
-						]
-					}, e.id))
-				})
+									children: "/ 100"
+								})]
+							}), /* @__PURE__ */ N(p, {
+								value: Y.churnRiskScore,
+								tone: H(Y.churnRiskScore).tone,
+								className: "mt-2"
+							})] })]
+						}),
+						/* @__PURE__ */ P(F, {
+							treatment: "metric",
+							className: "p-5",
+							children: [/* @__PURE__ */ P("span", {
+								className: "inline-flex items-center gap-2 text-sm font-medium text-text-primary",
+								children: [/* @__PURE__ */ N(w, { className: "h-4 w-4 text-text-secondary" }), " At a glance"]
+							}), /* @__PURE__ */ P("dl", {
+								className: "mt-3 space-y-2.5 text-sm",
+								children: [
+									/* @__PURE__ */ P("div", {
+										className: "flex items-center justify-between gap-2",
+										children: [/* @__PURE__ */ N("dt", {
+											className: "text-text-secondary",
+											children: "Category"
+										}), /* @__PURE__ */ N("dd", {
+											className: "font-medium text-text-primary",
+											children: i(Y.category)
+										})]
+									}),
+									/* @__PURE__ */ P("div", {
+										className: "flex items-center justify-between gap-2",
+										children: [/* @__PURE__ */ N("dt", {
+											className: "text-text-secondary",
+											children: "Industry"
+										}), /* @__PURE__ */ N("dd", {
+											className: "font-medium text-text-primary",
+											children: Y.industry ?? "—"
+										})]
+									}),
+									/* @__PURE__ */ P("div", {
+										className: "flex items-center justify-between gap-2",
+										children: [/* @__PURE__ */ N("dt", {
+											className: "text-text-secondary",
+											children: "Region"
+										}), /* @__PURE__ */ N("dd", {
+											className: "font-medium text-text-primary",
+											children: Y.region ?? "—"
+										})]
+									}),
+									/* @__PURE__ */ P("div", {
+										className: "flex items-center justify-between gap-2",
+										children: [/* @__PURE__ */ N("dt", {
+											className: "text-text-secondary",
+											children: "Language"
+										}), /* @__PURE__ */ N("dd", {
+											className: "font-medium text-text-primary",
+											children: Y.language ?? "—"
+										})]
+									}),
+									/* @__PURE__ */ P("div", {
+										className: "flex items-center justify-between gap-2",
+										children: [/* @__PURE__ */ N("dt", {
+											className: "text-text-secondary",
+											children: "Published plans"
+										}), /* @__PURE__ */ N("dd", {
+											className: "font-medium tabular-nums text-text-primary",
+											children: Y.plans?.length ?? 0
+										})]
+									})
+								]
+							})]
+						})
+					]
+				})]
 			}),
-			j && /* @__PURE__ */ E(P, {
-				provider: B,
-				onClose: () => M(!1)
+			R && /* @__PURE__ */ N(U, {
+				provider: Y,
+				onClose: () => z(!1)
 			}),
-			N && /* @__PURE__ */ E(F, {
-				providerId: B.id,
-				onClose: () => L(!1)
+			B && /* @__PURE__ */ N(W, {
+				providerId: Y.id,
+				onClose: () => K(!1)
 			}),
-			R && /* @__PURE__ */ E(I, {
-				provider: B,
-				onClose: () => z(!1)
+			q && /* @__PURE__ */ N(G, {
+				provider: Y,
+				onClose: () => J(!1)
 			})
 		]
 	});
 }
 //#endregion
-export { L as ProviderDetailPage };
+export { K as ProviderDetailPage };
 
 //# sourceMappingURL=ProviderDetailPage.js.map