@burdenoff/microfe-subscriberbot 2026.706.2 → 2026.710.1

package/dist/subscriberbot/pages/relationships/RelationshipDetailPage.js

@@ -3,16 +3,18 @@ import { PageLayout as t } from "../../components/PageLayout.js";
 import { formatCurrency as n, formatDate 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 { ErrorView as c, LoadingView as l, Section as u } from "../../components/StateViews.js";
-import { useCancelRelationship as d, useCreateAsset as f, useCreateEntitlement as p, useFileDownloadUrl as m, usePlans as h, useProviders as g, useRelationship as _, useTransitionRelationship as v, useUpdateRelationship as y, useUploadFile as b } from "../../hooks/useSubscriberBotApi.js";
-import { Modal as x } from "../../components/Modal.js";
-import { useState as S } from "react";
-import { Activity as C, ArrowLeft as w, Building2 as T, CalendarClock as E, CreditCard as D, Download as O, Paperclip as k, Pencil as A, Plus as j, ShieldCheck as M, Tag as N } from "lucide-react";
-import { useParams as P } from "react-router-dom";
-import { jsx as F, jsxs as I } from "react/jsx-runtime";
-import { GlassCard as L } from "@burdenoff/fe-libs/ui";
+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, Timeline as m } from "../../components/viz.js";
+import "../../components/index.js";
+import { useCancelRelationship as h, useCreateAsset as g, useCreateEntitlement as _, useFileDownloadUrl as v, usePlans as y, useProviders as b, useRelationship as x, useTransitionRelationship as S, useUpdateRelationship as C, useUploadFile as w } from "../../hooks/useSubscriberBotApi.js";
+import { useState as T } from "react";
+import { Activity as E, ArrowLeft as D, Ban as O, CalendarClock as k, CreditCard as A, Download as j, Paperclip as M, Pause as N, Pencil as P, Play as F, Plus as I, ShieldCheck as L, Tag as ee, Wallet as te } from "lucide-react";
+import { useParams as ne } from "react-router-dom";
+import { Fragment as R, jsx as z, jsxs as B } from "react/jsx-runtime";
+import { GlassCard as V } from "@burdenoff/fe-libs/ui";
 //#region src/subscriberbot/pages/relationships/RelationshipDetailPage.tsx
-var R = "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)]", z = "mb-1 block text-xs font-medium text-text-secondary", B = [
+var H = "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)]", U = "mb-1 block text-xs font-medium text-text-secondary", W = [
 	"MONTHLY",
 	"YEARLY",
 	"QUARTERLY",
@@ -21,14 +23,14 @@ var R = "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 t
 	"USAGE_BASED",
 	"LIFETIME",
 	"FREE"
-], V = [
+], G = [
 	"FEATURE_ACCESS",
 	"SEAT",
 	"USAGE_QUOTA",
 	"CONTENT",
 	"DISCOUNT",
 	"SUPPORT_TIER"
-], H = [
+], K = [
 	"RECEIPT",
 	"INVOICE",
 	"CONTRACT",
@@ -37,38 +39,56 @@ var R = "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 t
 	"CERTIFICATE",
 	"WARRANTY",
 	"DOMAIN"
-], U = [
+], q = [
 	{
 		status: "ACTIVE",
-		label: "Activate"
+		label: "Activate",
+		icon: F
 	},
 	{
 		status: "PAUSED",
-		label: "Pause"
+		label: "Pause",
+		icon: N
 	},
 	{
 		status: "EXPIRED",
-		label: "Mark expired"
+		label: "Mark expired",
+		icon: O
 	}
 ];
-function W(e) {
+function J({ label: e, value: t }) {
+	return /* @__PURE__ */ B("div", {
+		className: "flex items-center justify-between gap-3 border-b border-border-subtle/60 py-2.5 last:border-0 last:pb-0",
+		children: [/* @__PURE__ */ z("span", {
+			className: "shrink-0 text-sm text-text-secondary",
+			children: e
+		}), /* @__PURE__ */ z("span", {
+			className: "min-w-0 truncate text-right text-sm font-medium text-text-primary",
+			children: t
+		})]
+	});
+}
+function re(e) {
+	return e == null ? "accent" : e >= 66 ? "positive" : e >= 33 ? "warning" : "negative";
+}
+function Y(e) {
 	if (!e) return "";
 	let t = new Date(e);
 	return Number.isNaN(t.getTime()) ? "" : t.toISOString().slice(0, 10);
 }
-function G({ relationship: e, onClose: t }) {
-	let n = y(), r = g({ pagination: {
+function ie({ relationship: e, onClose: t }) {
+	let n = C(), r = b({ pagination: {
 		limit: 100,
 		offset: 0
-	} }), [i, a] = S(e.label), [o, s] = S(e.providerId ?? ""), [c, l] = S(e.planId ?? ""), [u, d] = S(String(e.amount ?? "")), [f, p] = S(e.currency), [m, _] = S(e.interval), [v, b] = S(W(e.renewsAt)), [C, w] = S(e.autoRenew), [T, E] = S(e.healthScore == null ? "" : String(e.healthScore)), [D, O] = S(e.notes ?? ""), [k, A] = S(null), j = h(o || void 0), M = (() => {
+	} }), [i, a] = T(e.label), [o, s] = T(e.providerId ?? ""), [l, u] = T(e.planId ?? ""), [d, f] = T(String(e.amount ?? "")), [p, m] = T(e.currency), [h, g] = T(e.interval), [_, v] = T(Y(e.renewsAt)), [x, S] = T(e.autoRenew), [w, E] = T(e.healthScore == null ? "" : String(e.healthScore)), [D, O] = T(e.notes ?? ""), [k, A] = T(null), j = y(o || void 0), M = (() => {
 		let t = r.data?.items ?? [];
 		return e.provider && !t.some((t) => t.id === e.provider?.id) ? [e.provider, ...t] : t;
 	})(), N = j.data ?? [];
-	return /* @__PURE__ */ F(x, {
+	return /* @__PURE__ */ z(c, {
 		title: "Edit relationship",
 		onClose: t,
 		maxWidthClassName: "max-w-2xl",
-		children: /* @__PURE__ */ I("form", {
+		children: /* @__PURE__ */ B("form", {
 			onSubmit: (r) => {
 				if (r.preventDefault(), A(null), !i.trim()) {
 					A("A label is required.");
@@ -76,15 +96,15 @@ function G({ relationship: e, onClose: t }) {
 				}
 				let a = {
 					label: i.trim(),
-					interval: m,
-					autoRenew: C,
-					currency: f.trim() || "USD",
+					interval: h,
+					autoRenew: x,
+					currency: p.trim() || "USD",
 					notes: D.trim(),
 					...o ? { providerId: o } : {},
-					...c ? { planId: c } : {},
-					...u.trim() ? { amount: Number(u) } : {},
-					...T.trim() ? { healthScore: Number(T) } : {},
-					...v ? { renewsAt: new Date(v).toISOString() } : {}
+					...l ? { planId: l } : {},
+					...d.trim() ? { amount: Number(d) } : {},
+					...w.trim() ? { healthScore: Number(w) } : {},
+					..._ ? { renewsAt: new Date(_).toISOString() } : {}
 				};
 				n.mutate({
 					id: e.id,
@@ -96,168 +116,168 @@ function G({ relationship: e, onClose: t }) {
 			},
 			className: "space-y-4",
 			children: [
-				k && /* @__PURE__ */ F("div", {
+				k && /* @__PURE__ */ z("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: k
 				}),
-				/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ I("label", {
+				/* @__PURE__ */ B("div", { children: [/* @__PURE__ */ B("label", {
 					htmlFor: "edit-label",
-					className: z,
-					children: ["Label ", /* @__PURE__ */ F("span", {
+					className: U,
+					children: ["Label ", /* @__PURE__ */ z("span", {
 						className: "text-status-error-text",
 						children: "*"
 					})]
-				}), /* @__PURE__ */ F("input", {
+				}), /* @__PURE__ */ z("input", {
 					id: "edit-label",
 					type: "text",
 					value: i,
 					onChange: (e) => a(e.target.value),
-					className: R,
+					className: H,
 					required: !0
 				})] }),
-				/* @__PURE__ */ I("div", {
+				/* @__PURE__ */ B("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-					children: [/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
+					children: [/* @__PURE__ */ B("div", { children: [/* @__PURE__ */ z("label", {
 						htmlFor: "edit-provider",
-						className: z,
+						className: U,
 						children: "Provider"
-					}), /* @__PURE__ */ I("select", {
+					}), /* @__PURE__ */ B("select", {
 						id: "edit-provider",
 						value: o,
 						onChange: (e) => {
-							s(e.target.value), l("");
+							s(e.target.value), u("");
 						},
-						className: R,
-						children: [/* @__PURE__ */ F("option", {
+						className: H,
+						children: [/* @__PURE__ */ z("option", {
 							value: "",
 							children: "— None —"
-						}), M.map((e) => /* @__PURE__ */ F("option", {
+						}), M.map((e) => /* @__PURE__ */ z("option", {
 							value: e.id,
 							children: e.name
 						}, e.id))]
-					})] }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
+					})] }), /* @__PURE__ */ B("div", { children: [/* @__PURE__ */ z("label", {
 						htmlFor: "edit-plan",
-						className: z,
+						className: U,
 						children: "Plan"
-					}), /* @__PURE__ */ I("select", {
+					}), /* @__PURE__ */ B("select", {
 						id: "edit-plan",
-						value: c,
-						onChange: (e) => l(e.target.value),
-						className: R,
+						value: l,
+						onChange: (e) => u(e.target.value),
+						className: H,
 						disabled: !o || N.length === 0,
-						children: [/* @__PURE__ */ F("option", {
+						children: [/* @__PURE__ */ z("option", {
 							value: "",
 							children: "— None —"
-						}), N.map((e) => /* @__PURE__ */ F("option", {
+						}), N.map((e) => /* @__PURE__ */ z("option", {
 							value: e.id,
 							children: e.name
 						}, e.id))]
 					})] })]
 				}),
-				/* @__PURE__ */ I("div", {
+				/* @__PURE__ */ B("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
 					children: [
-						/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
+						/* @__PURE__ */ B("div", { children: [/* @__PURE__ */ z("label", {
 							htmlFor: "edit-amount",
-							className: z,
+							className: U,
 							children: "Amount"
-						}), /* @__PURE__ */ F("input", {
+						}), /* @__PURE__ */ z("input", {
 							id: "edit-amount",
 							type: "number",
 							min: "0",
 							step: "0.01",
-							value: u,
-							onChange: (e) => d(e.target.value),
-							className: R
+							value: d,
+							onChange: (e) => f(e.target.value),
+							className: H
 						})] }),
-						/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
+						/* @__PURE__ */ B("div", { children: [/* @__PURE__ */ z("label", {
 							htmlFor: "edit-currency",
-							className: z,
+							className: U,
 							children: "Currency"
-						}), /* @__PURE__ */ F("input", {
+						}), /* @__PURE__ */ z("input", {
 							id: "edit-currency",
 							type: "text",
-							value: f,
-							onChange: (e) => p(e.target.value.toUpperCase()),
+							value: p,
+							onChange: (e) => m(e.target.value.toUpperCase()),
 							maxLength: 3,
-							className: R
+							className: H
 						})] }),
-						/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
+						/* @__PURE__ */ B("div", { children: [/* @__PURE__ */ z("label", {
 							htmlFor: "edit-interval",
-							className: z,
+							className: U,
 							children: "Billing interval"
-						}), /* @__PURE__ */ F("select", {
+						}), /* @__PURE__ */ z("select", {
 							id: "edit-interval",
-							value: m,
-							onChange: (e) => _(e.target.value),
-							className: R,
-							children: B.map((e) => /* @__PURE__ */ F("option", {
+							value: h,
+							onChange: (e) => g(e.target.value),
+							className: H,
+							children: W.map((e) => /* @__PURE__ */ z("option", {
 								value: e,
 								children: e.replace(/_/g, " ")
 							}, e))
 						})] })
 					]
 				}),
-				/* @__PURE__ */ I("div", {
+				/* @__PURE__ */ B("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
 					children: [
-						/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
+						/* @__PURE__ */ B("div", { children: [/* @__PURE__ */ z("label", {
 							htmlFor: "edit-renews",
-							className: z,
+							className: U,
 							children: "Renews on"
-						}), /* @__PURE__ */ F("input", {
+						}), /* @__PURE__ */ z("input", {
 							id: "edit-renews",
 							type: "date",
-							value: v,
-							onChange: (e) => b(e.target.value),
-							className: R
+							value: _,
+							onChange: (e) => v(e.target.value),
+							className: H
 						})] }),
-						/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
+						/* @__PURE__ */ B("div", { children: [/* @__PURE__ */ z("label", {
 							htmlFor: "edit-health",
-							className: z,
+							className: U,
 							children: "Health score (0–100)"
-						}), /* @__PURE__ */ F("input", {
+						}), /* @__PURE__ */ z("input", {
 							id: "edit-health",
 							type: "number",
 							min: "0",
 							max: "100",
-							value: T,
+							value: w,
 							onChange: (e) => E(e.target.value),
-							className: R
+							className: H
 						})] }),
-						/* @__PURE__ */ F("div", {
+						/* @__PURE__ */ z("div", {
 							className: "flex items-end",
-							children: /* @__PURE__ */ I("label", {
+							children: /* @__PURE__ */ B("label", {
 								className: "flex items-center gap-2 text-sm text-text-primary",
-								children: [/* @__PURE__ */ F("input", {
+								children: [/* @__PURE__ */ z("input", {
 									type: "checkbox",
-									checked: C,
-									onChange: (e) => w(e.target.checked),
+									checked: x,
+									onChange: (e) => S(e.target.checked),
 									className: "size-4 rounded border-border-subtle"
 								}), "Auto-renews"]
 							})
 						})
 					]
 				}),
-				/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
+				/* @__PURE__ */ B("div", { children: [/* @__PURE__ */ z("label", {
 					htmlFor: "edit-notes",
-					className: z,
+					className: U,
 					children: "Notes"
-				}), /* @__PURE__ */ F("textarea", {
+				}), /* @__PURE__ */ z("textarea", {
 					id: "edit-notes",
 					value: D,
 					onChange: (e) => O(e.target.value),
 					rows: 3,
-					className: R
+					className: H
 				})] }),
-				/* @__PURE__ */ I("div", {
+				/* @__PURE__ */ B("div", {
 					className: "flex justify-end gap-3",
-					children: [/* @__PURE__ */ F("button", {
+					children: [/* @__PURE__ */ z("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__ */ F("button", {
+					}), /* @__PURE__ */ z("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",
@@ -268,12 +288,12 @@ function G({ relationship: e, onClose: t }) {
 		})
 	});
 }
-function K({ relationshipId: e, onClose: t }) {
-	let n = p(), [r, i] = S(""), [a, o] = S("FEATURE_ACCESS"), [s, c] = S(""), [l, u] = S(""), [d, f] = S(""), [m, h] = S(null);
-	return /* @__PURE__ */ F(x, {
+function ae({ relationshipId: e, onClose: t }) {
+	let n = _(), [r, i] = T(""), [a, o] = T("FEATURE_ACCESS"), [s, l] = T(""), [u, d] = T(""), [f, p] = T(""), [m, h] = T(null);
+	return /* @__PURE__ */ z(c, {
 		title: "Add entitlement",
 		onClose: t,
-		children: /* @__PURE__ */ I("form", {
+		children: /* @__PURE__ */ B("form", {
 			onSubmit: (i) => {
 				if (i.preventDefault(), h(null), !r.trim()) {
 					h("An entitlement name is required.");
@@ -284,8 +304,8 @@ function K({ relationshipId: e, onClose: t }) {
 					name: r.trim(),
 					type: a,
 					...s.trim() ? { quota: Number(s) } : {},
-					...l.trim() ? { unit: l.trim() } : {},
-					...d.trim() ? { description: d.trim() } : {}
+					...u.trim() ? { unit: u.trim() } : {},
+					...f.trim() ? { description: f.trim() } : {}
 				}, {
 					onSuccess: () => t(),
 					onError: (e) => h(e instanceof Error ? e.message : "Could not add entitlement.")
@@ -293,89 +313,89 @@ function K({ relationshipId: e, onClose: t }) {
 			},
 			className: "space-y-4",
 			children: [
-				m && /* @__PURE__ */ F("div", {
+				m && /* @__PURE__ */ z("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: m
 				}),
-				/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ I("label", {
+				/* @__PURE__ */ B("div", { children: [/* @__PURE__ */ B("label", {
 					htmlFor: "ent-name",
-					className: z,
-					children: ["Name ", /* @__PURE__ */ F("span", {
+					className: U,
+					children: ["Name ", /* @__PURE__ */ z("span", {
 						className: "text-status-error-text",
 						children: "*"
 					})]
-				}), /* @__PURE__ */ F("input", {
+				}), /* @__PURE__ */ z("input", {
 					id: "ent-name",
 					type: "text",
 					value: r,
 					onChange: (e) => i(e.target.value),
 					placeholder: "e.g. Seats, API calls, Priority support",
-					className: R,
+					className: H,
 					required: !0
 				})] }),
-				/* @__PURE__ */ I("div", {
+				/* @__PURE__ */ B("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
 					children: [
-						/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
+						/* @__PURE__ */ B("div", { children: [/* @__PURE__ */ z("label", {
 							htmlFor: "ent-type",
-							className: z,
+							className: U,
 							children: "Type"
-						}), /* @__PURE__ */ F("select", {
+						}), /* @__PURE__ */ z("select", {
 							id: "ent-type",
 							value: a,
 							onChange: (e) => o(e.target.value),
-							className: R,
-							children: V.map((e) => /* @__PURE__ */ F("option", {
+							className: H,
+							children: G.map((e) => /* @__PURE__ */ z("option", {
 								value: e,
 								children: e.replace(/_/g, " ")
 							}, e))
 						})] }),
-						/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
+						/* @__PURE__ */ B("div", { children: [/* @__PURE__ */ z("label", {
 							htmlFor: "ent-quota",
-							className: z,
+							className: U,
 							children: "Quota"
-						}), /* @__PURE__ */ F("input", {
+						}), /* @__PURE__ */ z("input", {
 							id: "ent-quota",
 							type: "number",
 							min: "0",
 							value: s,
-							onChange: (e) => c(e.target.value),
+							onChange: (e) => l(e.target.value),
 							placeholder: "e.g. 5",
-							className: R
+							className: H
 						})] }),
-						/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
+						/* @__PURE__ */ B("div", { children: [/* @__PURE__ */ z("label", {
 							htmlFor: "ent-unit",
-							className: z,
+							className: U,
 							children: "Unit"
-						}), /* @__PURE__ */ F("input", {
+						}), /* @__PURE__ */ z("input", {
 							id: "ent-unit",
 							type: "text",
-							value: l,
-							onChange: (e) => u(e.target.value),
+							value: u,
+							onChange: (e) => d(e.target.value),
 							placeholder: "e.g. seats, GB",
-							className: R
+							className: H
 						})] })
 					]
 				}),
-				/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
+				/* @__PURE__ */ B("div", { children: [/* @__PURE__ */ z("label", {
 					htmlFor: "ent-desc",
-					className: z,
+					className: U,
 					children: "Description"
-				}), /* @__PURE__ */ F("textarea", {
+				}), /* @__PURE__ */ z("textarea", {
 					id: "ent-desc",
-					value: d,
-					onChange: (e) => f(e.target.value),
+					value: f,
+					onChange: (e) => p(e.target.value),
 					rows: 2,
-					className: R
+					className: H
 				})] }),
-				/* @__PURE__ */ I("div", {
+				/* @__PURE__ */ B("div", {
 					className: "flex justify-end gap-3",
-					children: [/* @__PURE__ */ F("button", {
+					children: [/* @__PURE__ */ z("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__ */ F("button", {
+					}), /* @__PURE__ */ z("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",
@@ -386,99 +406,99 @@ function K({ relationshipId: e, onClose: t }) {
 		})
 	});
 }
-function q({ relationshipId: e, onClose: t }) {
-	let n = f(), { uploadFile: r, progress: i, isUploading: a } = b(), [o, s] = S(""), [c, l] = S("RECEIPT"), [u, d] = S(null), [p, m] = S(""), [h, g] = S(null), _ = a || n.isPending;
-	return /* @__PURE__ */ F(x, {
+function oe({ relationshipId: e, onClose: t }) {
+	let n = g(), { uploadFile: r, progress: i, isUploading: a } = w(), [o, s] = T(""), [l, u] = T("RECEIPT"), [d, f] = T(null), [p, m] = T(""), [h, _] = T(null), v = a || n.isPending;
+	return /* @__PURE__ */ z(c, {
 		title: "Attach asset",
 		onClose: t,
-		children: /* @__PURE__ */ I("form", {
+		children: /* @__PURE__ */ B("form", {
 			onSubmit: async (i) => {
-				if (i.preventDefault(), g(null), !u) {
-					g("Choose a file to attach.");
+				if (i.preventDefault(), _(null), !d) {
+					_("Choose a file to attach.");
 					return;
 				}
 				try {
-					let { fileId: i, fileName: a } = await r(u);
+					let { fileId: i, fileName: a } = await r(d);
 					await n.mutateAsync({
 						relationshipId: e,
 						name: o.trim() || a,
-						type: c,
+						type: l,
 						fileId: i,
 						...p ? { expiresAt: new Date(p).toISOString() } : {}
 					}), t();
 				} catch (e) {
-					g(e instanceof Error ? e.message : "Could not attach the asset.");
+					_(e instanceof Error ? e.message : "Could not attach the asset.");
 				}
 			},
 			className: "space-y-4",
 			children: [
-				h && /* @__PURE__ */ F("div", {
+				h && /* @__PURE__ */ z("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: h
 				}),
-				/* @__PURE__ */ I("div", { children: [
-					/* @__PURE__ */ I("label", {
+				/* @__PURE__ */ B("div", { children: [
+					/* @__PURE__ */ B("label", {
 						htmlFor: "asset-file",
-						className: z,
-						children: ["File ", /* @__PURE__ */ F("span", {
+						className: U,
+						children: ["File ", /* @__PURE__ */ z("span", {
 							className: "text-status-error-text",
 							children: "*"
 						})]
 					}),
-					/* @__PURE__ */ F("input", {
+					/* @__PURE__ */ z("input", {
 						id: "asset-file",
 						type: "file",
 						onChange: (e) => {
 							let t = e.target.files?.[0] ?? null;
-							d(t), t && !o.trim() && s(t.name);
+							f(t), t && !o.trim() && s(t.name);
 						},
 						className: "w-full text-sm text-text-secondary file:mr-3 file:rounded-lg file:border file:border-border-subtle file:bg-bg-surface file:px-3 file:py-1.5 file:text-sm file:font-medium file:text-text-primary hover:file:bg-bg-sunken"
 					}),
-					/* @__PURE__ */ F("p", {
+					/* @__PURE__ */ z("p", {
 						className: "mt-1 text-xs text-text-secondary",
 						children: "Stored securely in files — only a reference is kept here."
 					})
 				] }),
-				/* @__PURE__ */ I("div", {
+				/* @__PURE__ */ B("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-					children: [/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
+					children: [/* @__PURE__ */ B("div", { children: [/* @__PURE__ */ z("label", {
 						htmlFor: "asset-name",
-						className: z,
+						className: U,
 						children: "Name"
-					}), /* @__PURE__ */ F("input", {
+					}), /* @__PURE__ */ z("input", {
 						id: "asset-name",
 						type: "text",
 						value: o,
 						onChange: (e) => s(e.target.value),
 						placeholder: "Defaults to the file name",
-						className: R
-					})] }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
+						className: H
+					})] }), /* @__PURE__ */ B("div", { children: [/* @__PURE__ */ z("label", {
 						htmlFor: "asset-type",
-						className: z,
+						className: U,
 						children: "Type"
-					}), /* @__PURE__ */ F("select", {
+					}), /* @__PURE__ */ z("select", {
 						id: "asset-type",
-						value: c,
-						onChange: (e) => l(e.target.value),
-						className: R,
-						children: H.map((e) => /* @__PURE__ */ F("option", {
+						value: l,
+						onChange: (e) => u(e.target.value),
+						className: H,
+						children: K.map((e) => /* @__PURE__ */ z("option", {
 							value: e,
 							children: e.replace(/_/g, " ")
 						}, e))
 					})] })]
 				}),
-				/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
+				/* @__PURE__ */ B("div", { children: [/* @__PURE__ */ z("label", {
 					htmlFor: "asset-expires",
-					className: z,
+					className: U,
 					children: "Expires on"
-				}), /* @__PURE__ */ F("input", {
+				}), /* @__PURE__ */ z("input", {
 					id: "asset-expires",
 					type: "date",
 					value: p,
 					onChange: (e) => m(e.target.value),
-					className: R
+					className: H
 				})] }),
-				a && /* @__PURE__ */ I("p", {
+				a && /* @__PURE__ */ B("p", {
 					className: "text-xs text-text-secondary",
 					children: [
 						"Uploading… ",
@@ -486,46 +506,46 @@ function q({ relationshipId: e, onClose: t }) {
 						"%"
 					]
 				}),
-				/* @__PURE__ */ I("div", {
+				/* @__PURE__ */ B("div", {
 					className: "flex justify-end gap-3",
-					children: [/* @__PURE__ */ F("button", {
+					children: [/* @__PURE__ */ z("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__ */ F("button", {
+					}), /* @__PURE__ */ z("button", {
 						type: "submit",
-						disabled: _,
+						disabled: v,
 						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",
-						children: _ ? "Attaching…" : "Attach asset"
+						children: v ? "Attaching…" : "Attach asset"
 					})]
 				})
 			]
 		})
 	});
 }
-function J({ asset: e }) {
-	let t = m(), [n, a] = S(!1);
-	return /* @__PURE__ */ I("div", {
+function se({ asset: e }) {
+	let t = v(), [n, a] = T(!1);
+	return /* @__PURE__ */ B("div", {
 		className: "flex items-center justify-between gap-3 p-3",
-		children: [/* @__PURE__ */ I("div", {
+		children: [/* @__PURE__ */ B("div", {
 			className: "flex min-w-0 items-center gap-2",
-			children: [/* @__PURE__ */ F(k, { className: "h-4 w-4 shrink-0 text-text-secondary" }), /* @__PURE__ */ I("div", {
+			children: [/* @__PURE__ */ z(M, { className: "h-4 w-4 shrink-0 text-text-secondary" }), /* @__PURE__ */ B("div", {
 				className: "min-w-0",
-				children: [/* @__PURE__ */ F("p", {
+				children: [/* @__PURE__ */ z("p", {
 					className: "truncate text-sm font-medium text-text-primary",
 					children: e.name
-				}), /* @__PURE__ */ F("p", {
+				}), /* @__PURE__ */ z("p", {
 					className: "text-xs text-text-secondary",
 					children: i(e.type)
 				})]
 			})]
-		}), /* @__PURE__ */ I("div", {
+		}), /* @__PURE__ */ B("div", {
 			className: "flex shrink-0 items-center gap-3",
-			children: [e.expiresAt && /* @__PURE__ */ I("span", {
+			children: [e.expiresAt && /* @__PURE__ */ B("span", {
 				className: "text-xs text-text-secondary",
 				children: ["Expires ", r(e.expiresAt)]
-			}), e.file?.id && /* @__PURE__ */ I("button", {
+			}), e.file?.id && /* @__PURE__ */ B("button", {
 				type: "button",
 				onClick: async () => {
 					if (e.file?.id) {
@@ -541,7 +561,7 @@ function J({ asset: e }) {
 				disabled: n,
 				className: "inline-flex items-center gap-1 rounded-lg border border-border-subtle px-2.5 py-1 text-xs font-medium text-text-primary hover:bg-bg-sunken disabled:opacity-50",
 				children: [
-					/* @__PURE__ */ F(O, { className: "h-3.5 w-3.5" }),
+					/* @__PURE__ */ z(j, { className: "h-3.5 w-3.5" }),
 					" ",
 					n ? "Opening…" : "Download"
 				]
@@ -549,296 +569,390 @@ function J({ asset: e }) {
 		})]
 	});
 }
-function Y() {
-	let { id: f } = P(), { navigateTo: p } = e(), { data: m, isLoading: h, isError: g, refetch: y } = _(f), b = v(), x = d(), [O, k] = S(null), [R, z] = S(!1), [B, V] = S(!1), [H, W] = S(!1);
-	if (h) return /* @__PURE__ */ F(t, {
+function X() {
+	let { id: c } = ne(), { navigateTo: g } = e(), { data: _, isLoading: v, isError: y, refetch: b } = x(c), C = S(), w = h(), [j, M] = T(null), [N, F] = T(!1), [H, U] = T(!1), [W, G] = T(!1);
+	if (v) return /* @__PURE__ */ z(t, {
 		title: "Relationship",
-		children: /* @__PURE__ */ F(l, { label: "Loading relationship…" })
+		children: /* @__PURE__ */ z(u, { label: "Loading relationship…" })
 	});
-	if (g) return /* @__PURE__ */ F(t, {
+	if (y) return /* @__PURE__ */ z(t, {
 		title: "Relationship",
-		children: /* @__PURE__ */ F(c, {
+		children: /* @__PURE__ */ z(l, {
 			message: "Could not load this relationship.",
-			onRetry: () => void y()
+			onRetry: () => void b()
 		})
 	});
-	if (!m) return /* @__PURE__ */ F(t, {
+	if (!_) return /* @__PURE__ */ z(t, {
 		title: "Relationship",
-		children: /* @__PURE__ */ F(s, {
+		children: /* @__PURE__ */ z(s, {
 			illustration: "empty-data",
 			title: "Relationship not found",
 			description: "It may have been removed, or you may not have access to it.",
-			action: /* @__PURE__ */ F("button", {
+			action: /* @__PURE__ */ z("button", {
 				type: "button",
-				onClick: () => p("/relationships"),
+				onClick: () => g("/relationships"),
 				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 relationships"
 			})
 		})
 	});
-	let Y = m, X = b.isPending || x.isPending, Z = (e) => {
-		k(null), b.mutate({
-			id: Y.id,
+	let K = _, Y = C.isPending || w.isPending, X = (e) => {
+		M(null), C.mutate({
+			id: K.id,
 			status: e
-		}, { onError: (e) => k(e instanceof Error ? e.message : "Transition failed") });
-	};
-	return /* @__PURE__ */ I(t, {
-		title: Y.label,
-		description: Y.provider?.name ?? i(Y.kind),
-		actions: /* @__PURE__ */ I("div", {
+		}, { onError: (e) => M(e instanceof Error ? e.message : "Transition failed") });
+	}, ce = () => {
+		M(null), w.mutate(K.id, { onError: (e) => M(e instanceof Error ? e.message : "Cancel failed") });
+	}, Z = [...K.renewalEvents ?? []].sort((e, t) => new Date(e.occursAt).getTime() - new Date(t.occursAt).getTime()).map((e) => {
+		let t = new Date(e.occursAt).getTime(), a = !Number.isNaN(t) && t > Date.now();
+		return {
+			title: i(e.eventType),
+			sub: `${r(e.occursAt)}${e.detail ? ` · ${e.detail}` : ""}`,
+			meta: e.amount == null ? void 0 : n(e.amount, e.currency ?? K.currency),
+			tone: a ? "warning" : "muted"
+		};
+	}), Q = K.autoRenew ? /* @__PURE__ */ z("span", {
+		className: "inline-flex items-center rounded-full bg-status-success-bg-subtle px-2 py-0.5 text-xs font-medium text-status-success-text",
+		children: "On"
+	}) : /* @__PURE__ */ z("span", {
+		className: "inline-flex items-center rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary",
+		children: "Off"
+	}), le = q.filter((e) => e.status !== K.status), $ = K.plan?.features ?? [];
+	return /* @__PURE__ */ B(t, {
+		title: K.label,
+		description: K.provider?.name ?? i(K.kind),
+		actions: /* @__PURE__ */ B("div", {
 			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ I("button", {
+			children: [/* @__PURE__ */ B("button", {
 				type: "button",
-				onClick: () => z(!0),
+				onClick: () => F(!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__ */ F(A, { className: "h-4 w-4" }), " Edit"]
-			}), /* @__PURE__ */ I("button", {
+				children: [/* @__PURE__ */ z(P, { className: "h-4 w-4" }), " Edit"]
+			}), /* @__PURE__ */ B("button", {
 				type: "button",
-				onClick: () => p("/relationships"),
+				onClick: () => g("/relationships"),
 				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__ */ F(w, { className: "h-4 w-4" }), " Back"]
+				children: [/* @__PURE__ */ z(D, { className: "h-4 w-4" }), " Back"]
 			})]
 		}),
 		children: [
-			/* @__PURE__ */ I("div", {
-				className: "flex flex-wrap items-center gap-3",
-				children: [
-					/* @__PURE__ */ F(o, { status: Y.status }),
-					/* @__PURE__ */ F("span", {
-						className: "text-sm text-text-secondary",
-						children: i(Y.kind)
-					}),
-					/* @__PURE__ */ F("span", {
-						className: "text-sm text-text-secondary",
-						children: "·"
-					}),
-					/* @__PURE__ */ I("span", {
-						className: "text-sm font-semibold text-text-primary",
-						children: [n(Y.amount, Y.currency), /* @__PURE__ */ F("span", {
-							className: "text-xs font-normal text-text-secondary",
-							children: a(Y.interval)
-						})]
-					}),
-					Y.autoRenew && /* @__PURE__ */ F("span", {
-						className: "text-xs text-text-secondary",
-						children: "Auto-renews"
-					})
-				]
-			}),
-			O && /* @__PURE__ */ F("div", {
-				className: "mt-4 rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-4 py-2 text-sm text-status-error-text",
-				children: O
-			}),
-			/* @__PURE__ */ I("div", {
-				className: "mt-5 flex flex-wrap gap-2",
-				children: [U.filter((e) => e.status !== Y.status).map((e) => /* @__PURE__ */ F("button", {
-					type: "button",
-					disabled: X,
-					onClick: () => Z(e.status),
-					className: "rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken disabled:opacity-50",
-					children: e.label
-				}, e.status)), Y.status !== "CANCELLED" && /* @__PURE__ */ F("button", {
-					type: "button",
-					disabled: X,
-					onClick: () => {
-						k(null), x.mutate(Y.id, { onError: (e) => k(e instanceof Error ? e.message : "Cancel failed") });
-					},
-					className: "rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-3 py-1.5 text-xs font-medium text-status-error-text hover:opacity-90 disabled:opacity-50",
-					children: "Cancel relationship"
-				})]
-			}),
-			/* @__PURE__ */ I("div", {
-				className: "mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-				children: [
-					/* @__PURE__ */ I(L, {
-						treatment: "metric",
-						className: "p-4",
-						children: [/* @__PURE__ */ I("div", {
-							className: "flex items-center gap-2 text-xs font-medium text-text-secondary",
-							children: [/* @__PURE__ */ F(T, { className: "h-3.5 w-3.5" }), " Provider"]
-						}), /* @__PURE__ */ F("p", {
-							className: "mt-1.5 text-sm text-text-primary",
-							children: Y.provider?.name ?? "—"
-						})]
-					}),
-					/* @__PURE__ */ I(L, {
-						treatment: "metric",
-						className: "p-4",
-						children: [/* @__PURE__ */ I("div", {
-							className: "flex items-center gap-2 text-xs font-medium text-text-secondary",
-							children: [/* @__PURE__ */ F(D, { className: "h-3.5 w-3.5" }), " Plan"]
-						}), /* @__PURE__ */ F("p", {
-							className: "mt-1.5 text-sm text-text-primary",
-							children: Y.plan?.name ?? "—"
-						})]
-					}),
-					/* @__PURE__ */ I(L, {
-						treatment: "metric",
-						className: "p-4",
-						children: [/* @__PURE__ */ I("div", {
-							className: "flex items-center gap-2 text-xs font-medium text-text-secondary",
-							children: [/* @__PURE__ */ F(E, { className: "h-3.5 w-3.5" }), " Next renewal"]
-						}), /* @__PURE__ */ F("p", {
-							className: "mt-1.5 text-sm text-text-primary",
-							children: Y.renewsAt ? r(Y.renewsAt) : "—"
-						})]
-					}),
-					/* @__PURE__ */ I(L, {
-						treatment: "metric",
-						className: "p-4",
-						children: [/* @__PURE__ */ I("div", {
-							className: "flex items-center gap-2 text-xs font-medium text-text-secondary",
-							children: [/* @__PURE__ */ F(C, { className: "h-3.5 w-3.5" }), " Health score"]
-						}), /* @__PURE__ */ F("p", {
-							className: "mt-1.5 text-sm text-text-primary",
-							children: Y.healthScore == null ? "—" : `${Y.healthScore}/100`
-						})]
-					}),
-					/* @__PURE__ */ I(L, {
-						treatment: "metric",
-						className: "p-4",
-						children: [/* @__PURE__ */ I("div", {
-							className: "flex items-center gap-2 text-xs font-medium text-text-secondary",
-							children: [/* @__PURE__ */ F(M, { className: "h-3.5 w-3.5" }), " Discovery"]
-						}), /* @__PURE__ */ F("p", {
-							className: "mt-1.5 text-sm text-text-primary",
-							children: i(Y.discoverySource)
-						})]
-					}),
-					/* @__PURE__ */ I(L, {
-						treatment: "metric",
-						className: "p-4",
-						children: [/* @__PURE__ */ I("div", {
-							className: "flex items-center gap-2 text-xs font-medium text-text-secondary",
-							children: [/* @__PURE__ */ F(E, { className: "h-3.5 w-3.5" }), " Started"]
-						}), /* @__PURE__ */ F("p", {
-							className: "mt-1.5 text-sm text-text-primary",
-							children: Y.startedAt ? r(Y.startedAt) : "—"
-						})]
-					})
-				]
-			}),
-			Y.tags.length > 0 && /* @__PURE__ */ I("div", {
-				className: "mt-5 flex flex-wrap items-center gap-2",
-				children: [/* @__PURE__ */ F(N, { className: "h-3.5 w-3.5 text-text-secondary" }), Y.tags.map((e) => /* @__PURE__ */ F("span", {
-					className: "rounded-full bg-bg-sunken px-2.5 py-0.5 text-xs text-text-secondary",
-					children: e
-				}, e))]
-			}),
-			Y.notes && /* @__PURE__ */ I("div", {
-				className: "mt-5 rounded-lg border border-border-subtle bg-bg-surface p-4",
-				children: [/* @__PURE__ */ F("p", {
-					className: "text-xs font-medium text-text-secondary",
-					children: "Notes"
-				}), /* @__PURE__ */ F("p", {
-					className: "mt-1 whitespace-pre-wrap text-sm text-text-primary",
-					children: Y.notes
-				})]
-			}),
-			/* @__PURE__ */ F(u, {
-				title: "Entitlements",
-				description: "What this relationship grants you",
-				action: /* @__PURE__ */ I("button", {
-					type: "button",
-					onClick: () => V(!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__ */ F(j, { className: "h-3.5 w-3.5" }), " Add entitlement"]
-				}),
-				children: !Y.entitlements || Y.entitlements.length === 0 ? /* @__PURE__ */ F(s, {
-					illustration: "empty-data",
-					title: "No entitlements",
-					description: "Entitlements (seats, quotas, feature access) will appear here."
-				}) : /* @__PURE__ */ F("div", {
-					className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",
-					children: Y.entitlements.map((e) => /* @__PURE__ */ I("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
+			/* @__PURE__ */ z(V, {
+				treatment: "glass",
+				glow: !0,
+				className: "p-5 sm:p-6",
+				children: /* @__PURE__ */ B("div", {
+					className: "flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between",
+					children: [/* @__PURE__ */ B("div", {
+						className: "min-w-0",
 						children: [
-							/* @__PURE__ */ I("div", {
-								className: "flex items-start justify-between gap-2",
-								children: [/* @__PURE__ */ F("p", {
-									className: "text-sm font-medium text-text-primary",
-									children: e.name
-								}), /* @__PURE__ */ F(o, { status: e.isActive ? "ACTIVE" : "DISABLED" })]
+							/* @__PURE__ */ z("p", {
+								className: "text-xs font-medium uppercase tracking-wide text-text-secondary",
+								children: i(K.kind)
 							}),
-							/* @__PURE__ */ F("p", {
-								className: "mt-1 text-xs text-text-secondary",
-								children: i(e.type)
+							/* @__PURE__ */ B("div", {
+								className: "mt-2 flex flex-wrap items-center gap-3",
+								children: [/* @__PURE__ */ B("span", {
+									className: "text-3xl font-bold tabular-nums text-text-primary",
+									children: [n(K.amount, K.currency), /* @__PURE__ */ z("span", {
+										className: "text-base font-normal text-text-secondary",
+										children: a(K.interval)
+									})]
+								}), /* @__PURE__ */ z(o, { status: K.status })]
 							}),
-							e.quota != null && /* @__PURE__ */ I("p", {
-								className: "mt-2 text-xs text-text-secondary",
+							/* @__PURE__ */ B("div", {
+								className: "mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-text-secondary",
 								children: [
-									"Used ",
-									e.used,
-									" of ",
-									e.quota,
-									e.unit ? ` ${e.unit}` : ""
+									/* @__PURE__ */ B("span", {
+										className: "inline-flex items-center gap-1.5",
+										children: [/* @__PURE__ */ z(k, { className: "h-3.5 w-3.5" }), K.renewsAt ? `Renews ${r(K.renewsAt)}` : "No renewal scheduled"]
+									}),
+									/* @__PURE__ */ B("span", {
+										className: "inline-flex items-center gap-1.5",
+										children: [/* @__PURE__ */ z(L, { className: "h-3.5 w-3.5" }), i(K.discoverySource)]
+									}),
+									/* @__PURE__ */ B("span", {
+										className: "inline-flex items-center gap-1.5",
+										children: ["Auto-renew ", Q]
+									})
 								]
+							}),
+							K.tags.length > 0 && /* @__PURE__ */ B("div", {
+								className: "mt-3 flex flex-wrap items-center gap-2",
+								children: [/* @__PURE__ */ z(ee, { className: "h-3.5 w-3.5 text-text-secondary" }), K.tags.map((e) => /* @__PURE__ */ z("span", {
+									className: "rounded-full bg-bg-sunken px-2.5 py-0.5 text-xs text-text-secondary",
+									children: e
+								}, e))]
 							})
 						]
-					}, e.id))
+					}), /* @__PURE__ */ B("div", {
+						className: "flex shrink-0 flex-wrap gap-2 lg:flex-col lg:items-stretch",
+						children: [le.map((e) => {
+							let t = e.icon;
+							return /* @__PURE__ */ B("button", {
+								type: "button",
+								disabled: Y,
+								onClick: () => X(e.status),
+								className: "inline-flex items-center justify-center gap-1.5 rounded-lg border border-border-subtle bg-bg-surface px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken disabled:opacity-50",
+								children: [
+									/* @__PURE__ */ z(t, { className: "h-3.5 w-3.5" }),
+									" ",
+									e.label
+								]
+							}, e.status);
+						}), K.status !== "CANCELLED" && /* @__PURE__ */ B("button", {
+							type: "button",
+							disabled: Y,
+							onClick: ce,
+							className: "inline-flex items-center justify-center gap-1.5 rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-3 py-1.5 text-xs font-medium text-status-error-text hover:opacity-90 disabled:opacity-50",
+							children: [/* @__PURE__ */ z(O, { className: "h-3.5 w-3.5" }), " Cancel"]
+						})]
+					})]
 				})
 			}),
-			/* @__PURE__ */ F(u, {
-				title: "Assets",
-				description: "Invoices, contracts, licenses and credentials",
-				action: /* @__PURE__ */ I("button", {
-					type: "button",
-					onClick: () => W(!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__ */ F(j, { className: "h-3.5 w-3.5" }), " Attach asset"]
-				}),
-				children: !Y.assets || Y.assets.length === 0 ? /* @__PURE__ */ F(s, {
-					illustration: "empty-data",
-					title: "No assets attached",
-					description: "Attach invoices, contracts, licenses or receipts to this relationship."
-				}) : /* @__PURE__ */ F("div", {
-					className: "divide-y divide-border-subtle rounded-lg border border-border-subtle bg-bg-surface",
-					children: Y.assets.map((e) => /* @__PURE__ */ F(J, { asset: e }, e.id))
-				})
+			j && /* @__PURE__ */ z("div", {
+				className: "mt-4 rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-4 py-2 text-sm text-status-error-text",
+				children: j
 			}),
-			/* @__PURE__ */ F(u, {
-				title: "Renewal timeline",
-				description: "Detected renewals and price changes",
-				children: !Y.renewalEvents || Y.renewalEvents.length === 0 ? /* @__PURE__ */ F(s, {
-					illustration: "empty-calendar",
-					title: "No renewal events",
-					description: "Renewals and price changes detected for this relationship will appear here."
-				}) : /* @__PURE__ */ F("div", {
-					className: "divide-y divide-border-subtle rounded-lg border border-border-subtle bg-bg-surface",
-					children: Y.renewalEvents.map((e) => /* @__PURE__ */ I("div", {
-						className: "flex items-center justify-between gap-3 p-3",
-						children: [/* @__PURE__ */ I("div", {
-							className: "min-w-0",
-							children: [/* @__PURE__ */ F("p", {
-								className: "truncate text-sm font-medium text-text-primary",
-								children: i(e.eventType)
-							}), /* @__PURE__ */ I("p", {
-								className: "text-xs text-text-secondary",
-								children: [r(e.occursAt), e.detail ? ` · ${e.detail}` : ""]
+			/* @__PURE__ */ B("div", {
+				className: "mt-6 grid grid-cols-1 gap-4 lg:grid-cols-3",
+				children: [/* @__PURE__ */ B("div", {
+					className: "space-y-4 lg:col-span-2",
+					children: [
+						/* @__PURE__ */ B("div", {
+							className: "grid grid-cols-1 gap-4 md:grid-cols-2",
+							children: [/* @__PURE__ */ B(V, {
+								treatment: "metric",
+								className: "p-5",
+								children: [
+									/* @__PURE__ */ B("div", {
+										className: "flex items-center gap-2 text-sm font-semibold text-text-primary",
+										children: [/* @__PURE__ */ z(A, { className: "h-4 w-4 text-text-secondary" }), " Plan & pricing"]
+									}),
+									/* @__PURE__ */ B("div", {
+										className: "mt-3",
+										children: [
+											/* @__PURE__ */ z(J, {
+												label: "Plan",
+												value: K.plan?.name ?? "—"
+											}),
+											/* @__PURE__ */ z(J, {
+												label: "Price",
+												value: /* @__PURE__ */ B(R, { children: [n(K.amount, K.currency), /* @__PURE__ */ z("span", {
+													className: "font-normal text-text-secondary",
+													children: a(K.interval)
+												})] })
+											}),
+											/* @__PURE__ */ z(J, {
+												label: "Billing interval",
+												value: i(K.interval)
+											}),
+											/* @__PURE__ */ z(J, {
+												label: "Provider",
+												value: K.provider?.name ?? "—"
+											})
+										]
+									}),
+									$.length > 0 && /* @__PURE__ */ z("div", {
+										className: "mt-3 flex flex-wrap gap-1.5",
+										children: $.map((e) => /* @__PURE__ */ z("span", {
+											className: "rounded-full bg-bg-sunken px-2.5 py-0.5 text-xs text-text-secondary",
+											children: e
+										}, e))
+									})
+								]
+							}), /* @__PURE__ */ B(V, {
+								treatment: "metric",
+								className: "p-5",
+								children: [/* @__PURE__ */ B("div", {
+									className: "flex items-center gap-2 text-sm font-semibold text-text-primary",
+									children: [/* @__PURE__ */ z(te, { className: "h-4 w-4 text-text-secondary" }), " Payment & billing"]
+								}), /* @__PURE__ */ B("div", {
+									className: "mt-3",
+									children: [
+										/* @__PURE__ */ z(J, {
+											label: "Currency",
+											value: K.currency
+										}),
+										/* @__PURE__ */ z(J, {
+											label: "Auto-renew",
+											value: Q
+										}),
+										/* @__PURE__ */ z(J, {
+											label: "Next renewal",
+											value: K.renewsAt ? r(K.renewsAt) : "—"
+										}),
+										/* @__PURE__ */ z(J, {
+											label: "Started",
+											value: K.startedAt ? r(K.startedAt) : "—"
+										}),
+										K.trialEndsAt && /* @__PURE__ */ z(J, {
+											label: "Trial ends",
+											value: r(K.trialEndsAt)
+										})
+									]
+								})]
+							})]
+						}),
+						/* @__PURE__ */ z(d, {
+							className: "mt-0",
+							title: "Entitlements",
+							description: "What this relationship grants you",
+							action: /* @__PURE__ */ B("button", {
+								type: "button",
+								onClick: () => U(!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__ */ z(I, { className: "h-3.5 w-3.5" }), " Add entitlement"]
+							}),
+							children: !K.entitlements || K.entitlements.length === 0 ? /* @__PURE__ */ z(s, {
+								illustration: "empty-data",
+								title: "No entitlements",
+								description: "Entitlements (seats, quotas, feature access) will appear here."
+							}) : /* @__PURE__ */ z("div", {
+								className: "grid grid-cols-1 gap-3 sm:grid-cols-2",
+								children: K.entitlements.map((e) => {
+									let t = e.quota != null && e.quota > 0;
+									return /* @__PURE__ */ B(V, {
+										treatment: "plain",
+										className: "p-4",
+										children: [
+											/* @__PURE__ */ B("div", {
+												className: "flex items-start justify-between gap-2",
+												children: [/* @__PURE__ */ z("p", {
+													className: "min-w-0 truncate text-sm font-medium text-text-primary",
+													children: e.name
+												}), /* @__PURE__ */ z(o, { status: e.isActive ? "ACTIVE" : "DISABLED" })]
+											}),
+											/* @__PURE__ */ z("p", {
+												className: "mt-1 text-xs text-text-secondary",
+												children: i(e.type)
+											}),
+											t && /* @__PURE__ */ B("div", {
+												className: "mt-3",
+												children: [/* @__PURE__ */ B("div", {
+													className: "flex items-center justify-between text-xs text-text-secondary",
+													children: [/* @__PURE__ */ B("span", { children: [
+														e.used,
+														" / ",
+														e.quota,
+														e.unit ? ` ${e.unit}` : ""
+													] }), /* @__PURE__ */ B("span", {
+														className: "tabular-nums",
+														children: [Math.round(e.used / e.quota * 100), "%"]
+													})]
+												}), /* @__PURE__ */ z(p, {
+													value: e.used,
+													max: e.quota,
+													tone: e.used / e.quota >= .9 ? "negative" : e.used / e.quota >= .7 ? "warning" : "accent",
+													className: "mt-1.5"
+												})]
+											})
+										]
+									}, e.id);
+								})
+							})
+						}),
+						/* @__PURE__ */ z(d, {
+							className: "mt-0",
+							title: "Assets",
+							description: "Invoices, contracts, licenses and credentials",
+							action: /* @__PURE__ */ B("button", {
+								type: "button",
+								onClick: () => G(!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__ */ z(I, { className: "h-3.5 w-3.5" }), " Attach asset"]
+							}),
+							children: !K.assets || K.assets.length === 0 ? /* @__PURE__ */ z(s, {
+								illustration: "empty-data",
+								title: "No assets attached",
+								description: "Attach invoices, contracts, licenses or receipts to this relationship."
+							}) : /* @__PURE__ */ z(V, {
+								treatment: "plain",
+								className: "divide-y divide-border-subtle p-0",
+								children: K.assets.map((e) => /* @__PURE__ */ z(se, { asset: e }, e.id))
+							})
+						}),
+						K.notes && /* @__PURE__ */ B(V, {
+							treatment: "plain",
+							className: "p-4",
+							children: [/* @__PURE__ */ z("p", {
+								className: "text-xs font-medium text-text-secondary",
+								children: "Notes"
+							}), /* @__PURE__ */ z("p", {
+								className: "mt-1 whitespace-pre-wrap text-sm text-text-primary",
+								children: K.notes
+							})]
+						})
+					]
+				}), /* @__PURE__ */ B("div", {
+					className: "space-y-4",
+					children: [/* @__PURE__ */ B(V, {
+						treatment: "metric",
+						className: "p-5",
+						children: [/* @__PURE__ */ B("div", {
+							className: "flex items-center gap-2 text-sm font-semibold text-text-primary",
+							children: [/* @__PURE__ */ z(E, { className: "h-4 w-4 text-text-secondary" }), " Health score"]
+						}), K.healthScore == null ? /* @__PURE__ */ z("p", {
+							className: "mt-4 text-sm text-text-secondary",
+							children: "Not scored yet. A health score appears once Subscriber Bot has enough signal."
+						}) : /* @__PURE__ */ B("div", {
+							className: "mt-4 flex flex-col items-center",
+							children: [/* @__PURE__ */ z(f, {
+								value: K.healthScore,
+								max: 100,
+								size: 160,
+								label: "of 100"
+							}), /* @__PURE__ */ z("div", {
+								className: "mt-2 w-full",
+								children: /* @__PURE__ */ z(p, {
+									value: K.healthScore,
+									max: 100,
+									tone: re(K.healthScore)
+								})
 							})]
-						}), e.amount != null && /* @__PURE__ */ F("span", {
-							className: "shrink-0 text-sm font-semibold tabular-nums text-text-primary",
-							children: n(e.amount, e.currency ?? Y.currency)
 						})]
-					}, e.id))
-				})
+					}), /* @__PURE__ */ B(V, {
+						treatment: "metric",
+						className: "p-5",
+						children: [
+							/* @__PURE__ */ B("div", {
+								className: "flex items-center gap-2 text-sm font-semibold text-text-primary",
+								children: [/* @__PURE__ */ z(k, { className: "h-4 w-4 text-text-secondary" }), " Renewal timeline"]
+							}),
+							/* @__PURE__ */ z("p", {
+								className: "mt-0.5 text-xs text-text-secondary",
+								children: "Detected renewals and price changes"
+							}),
+							Z.length === 0 ? /* @__PURE__ */ z("div", {
+								className: "mt-4",
+								children: /* @__PURE__ */ z(s, {
+									illustration: "empty-calendar",
+									title: "No renewal events",
+									description: "Renewals and price changes will appear here as they're detected."
+								})
+							}) : /* @__PURE__ */ z(m, {
+								items: Z,
+								className: "mt-4"
+							})
+						]
+					})]
+				})]
 			}),
-			R && /* @__PURE__ */ F(G, {
-				relationship: Y,
-				onClose: () => z(!1)
+			N && /* @__PURE__ */ z(ie, {
+				relationship: K,
+				onClose: () => F(!1)
 			}),
-			B && /* @__PURE__ */ F(K, {
-				relationshipId: Y.id,
-				onClose: () => V(!1)
+			H && /* @__PURE__ */ z(ae, {
+				relationshipId: K.id,
+				onClose: () => U(!1)
 			}),
-			H && /* @__PURE__ */ F(q, {
-				relationshipId: Y.id,
-				onClose: () => W(!1)
+			W && /* @__PURE__ */ z(oe, {
+				relationshipId: K.id,
+				onClose: () => G(!1)
 			})
 		]
 	});
 }
 //#endregion
-export { Y as RelationshipDetailPage };
+export { X as RelationshipDetailPage };
 
 //# sourceMappingURL=RelationshipDetailPage.js.map