@burdenoff/microfe-subscriberbot 2026.706.2 → 2026.706.3

package/dist/subscriberbot/pages/InboxPage.js

@@ -1,21 +1,22 @@
 import { useSubscriberBot as e } from "../context/SubscriberBotContext.js";
 import { cn as t } from "../utils/cn.js";
 import { PageLayout as n } from "../components/PageLayout.js";
-import { formatEnumLabel as r, formatRelativeTime 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 { useChannels as u, useCreateChannel as d, useInboxMessages as f, useIngestMessage as p, useMarkMessageRead as m, useVerifyChannel as h } from "../hooks/useSubscriberBotApi.js";
-import { Modal as g } from "../components/Modal.js";
-import { useState as _ } from "react";
-import { AlertTriangle as v, BadgeCheck as y, Inbox as b, Mail as x, MailOpen as S, Plus as C, Radio as w, Send as T } from "lucide-react";
-import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
-import { PagePurpose as k } from "@burdenoff/fe-libs/ui";
+import { formatDateTime as r, formatEnumLabel as i, formatRelativeTime 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 { MiniProgress as f } from "../components/viz.js";
+import { useChannels as p, useCreateChannel as m, useInboxMessages as h, useIngestMessage as g, useMarkMessageRead as ee, useVerifyChannel as _ } from "../hooks/useSubscriberBotApi.js";
+import { useState as v } from "react";
+import { AlertTriangle as y, BadgeCheck as b, Bell as x, ChevronRight as S, Hash as C, Inbox as w, Mail as T, MailOpen as E, MessageSquare as D, MessagesSquare as O, MousePointerClick as k, Phone as A, Plus as j, Radio as M, Send as N, ShieldAlert as P, Sparkles as F, Webhook as I } from "lucide-react";
+import { Fragment as L, jsx as R, jsxs as z } from "react/jsx-runtime";
+import { GlassCard as B, PagePurpose as V } from "@burdenoff/fe-libs/ui";
 //#region src/subscriberbot/pages/InboxPage.tsx
-var A = 25, j = "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)]", M = "mb-1 block text-xs font-medium text-text-secondary", N = [
+var H = 25, U = "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)]", W = "mb-1 block text-xs font-medium text-text-secondary", G = [
 	{
 		value: "",
-		label: "All categories"
+		label: "All"
 	},
 	{
 		value: "BILLING",
@@ -31,7 +32,7 @@ var A = 25, j = "w-full rounded-lg border border-border-subtle bg-bg-surface px-
 	},
 	{
 		value: "SECURITY_ALERT",
-		label: "Security alerts"
+		label: "Security"
 	},
 	{
 		value: "PRODUCT_UPDATE",
@@ -45,7 +46,7 @@ var A = 25, j = "w-full rounded-lg border border-border-subtle bg-bg-surface px-
 		value: "OTHER",
 		label: "Other"
 	}
-], P = [
+], K = [
 	"BILLING",
 	"RENEWAL",
 	"REQUIRED_ACTION",
@@ -53,7 +54,7 @@ var A = 25, j = "w-full rounded-lg border border-border-subtle bg-bg-surface px-
 	"PRODUCT_UPDATE",
 	"MARKETING",
 	"OTHER"
-], F = [
+], q = [
 	"EMAIL",
 	"SMS",
 	"SLACK",
@@ -61,14 +62,43 @@ var A = 25, j = "w-full rounded-lg border border-border-subtle bg-bg-surface px-
 	"WHATSAPP",
 	"PUSH",
 	"WEBHOOK"
-];
-function I({ onClose: e }) {
-	let t = d(), [n, r] = _("EMAIL"), [i, a] = _(""), [o, s] = _(""), [c, l] = _(!0), [u, f] = _(null);
-	return /* @__PURE__ */ D(g, {
+], J = {
+	BILLING: "bg-[var(--color-accent-soft)] text-text-primary",
+	RENEWAL: "bg-status-success-bg-subtle text-status-success-text",
+	REQUIRED_ACTION: "bg-status-warning-bg-subtle text-status-warning-text",
+	SECURITY_ALERT: "bg-status-error-bg-subtle text-status-error-text",
+	PRODUCT_UPDATE: "bg-[var(--color-accent-soft)] text-text-primary",
+	MARKETING: "bg-bg-sunken text-text-secondary",
+	OTHER: "bg-bg-sunken text-text-secondary"
+}, Y = {
+	EMAIL: T,
+	SMS: D,
+	SLACK: C,
+	DISCORD: O,
+	WHATSAPP: A,
+	PUSH: x,
+	WEBHOOK: I
+};
+function X({ category: e }) {
+	return /* @__PURE__ */ R("span", {
+		className: t("inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium", J[e]),
+		children: i(e)
+	});
+}
+function Z({ className: e }) {
+	return /* @__PURE__ */ z("span", {
+		title: "Action required",
+		className: t("inline-flex items-center gap-1 rounded-full bg-status-warning-bg-subtle px-2 py-0.5 text-[10px] font-medium text-status-warning-text", e),
+		children: [/* @__PURE__ */ R(y, { className: "h-3 w-3" }), " Action"]
+	});
+}
+function Q({ onClose: e }) {
+	let t = m(), [n, r] = v("EMAIL"), [i, a] = v(""), [o, s] = v(""), [l, u] = v(!0), [d, f] = v(null);
+	return /* @__PURE__ */ R(c, {
 		title: "Add channel",
 		onClose: e,
 		maxWidthClassName: "max-w-xl",
-		children: /* @__PURE__ */ O("form", {
+		children: /* @__PURE__ */ z("form", {
 			onSubmit: (r) => {
 				if (r.preventDefault(), f(null), !i.trim()) {
 					f("An address is required.");
@@ -77,7 +107,7 @@ function I({ onClose: e }) {
 				t.mutate({
 					type: n,
 					address: i.trim(),
-					ingestEnabled: c,
+					ingestEnabled: l,
 					...o.trim() ? { label: o.trim() } : {}
 				}, {
 					onSuccess: () => e(),
@@ -86,71 +116,71 @@ function I({ onClose: e }) {
 			},
 			className: "space-y-4",
 			children: [
-				u && /* @__PURE__ */ D("div", {
+				d && /* @__PURE__ */ R("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: u
+					children: d
 				}),
-				/* @__PURE__ */ O("div", {
+				/* @__PURE__ */ z("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-					children: [/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("label", {
+					children: [/* @__PURE__ */ z("div", { children: [/* @__PURE__ */ R("label", {
 						htmlFor: "ch-type",
-						className: M,
+						className: W,
 						children: "Type"
-					}), /* @__PURE__ */ D("select", {
+					}), /* @__PURE__ */ R("select", {
 						id: "ch-type",
 						value: n,
 						onChange: (e) => r(e.target.value),
-						className: j,
-						children: F.map((e) => /* @__PURE__ */ D("option", {
+						className: U,
+						children: q.map((e) => /* @__PURE__ */ R("option", {
 							value: e,
 							children: e.replace(/_/g, " ")
 						}, e))
-					})] }), /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("label", {
+					})] }), /* @__PURE__ */ z("div", { children: [/* @__PURE__ */ R("label", {
 						htmlFor: "ch-label",
-						className: M,
+						className: W,
 						children: "Label"
-					}), /* @__PURE__ */ D("input", {
+					}), /* @__PURE__ */ R("input", {
 						id: "ch-label",
 						type: "text",
 						value: o,
 						onChange: (e) => s(e.target.value),
 						placeholder: "e.g. Billing inbox",
-						className: j
+						className: U
 					})] })]
 				}),
-				/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ O("label", {
+				/* @__PURE__ */ z("div", { children: [/* @__PURE__ */ z("label", {
 					htmlFor: "ch-address",
-					className: M,
-					children: ["Address ", /* @__PURE__ */ D("span", {
+					className: W,
+					children: ["Address ", /* @__PURE__ */ R("span", {
 						className: "text-status-error-text",
 						children: "*"
 					})]
-				}), /* @__PURE__ */ D("input", {
+				}), /* @__PURE__ */ R("input", {
 					id: "ch-address",
 					type: "text",
 					value: i,
 					onChange: (e) => a(e.target.value),
 					placeholder: "e.g. billing@acme.com, +1…, a webhook URL",
-					className: j,
+					className: U,
 					required: !0
 				})] }),
-				/* @__PURE__ */ O("label", {
+				/* @__PURE__ */ z("label", {
 					className: "flex items-center gap-2 text-sm text-text-primary",
-					children: [/* @__PURE__ */ D("input", {
+					children: [/* @__PURE__ */ R("input", {
 						type: "checkbox",
-						checked: c,
-						onChange: (e) => l(e.target.checked),
+						checked: l,
+						onChange: (e) => u(e.target.checked),
 						className: "size-4 rounded border-border-subtle"
 					}), "Ingest messages from this channel"]
 				}),
-				/* @__PURE__ */ O("div", {
+				/* @__PURE__ */ z("div", {
 					className: "flex justify-end gap-3",
-					children: [/* @__PURE__ */ D("button", {
+					children: [/* @__PURE__ */ R("button", {
 						type: "button",
 						onClick: e,
 						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__ */ D("button", {
+					}), /* @__PURE__ */ R("button", {
 						type: "submit",
 						disabled: t.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",
@@ -161,86 +191,86 @@ function I({ onClose: e }) {
 		})
 	});
 }
-function L({ channel: e, onClose: t }) {
-	let n = p(), [r, i] = _(""), [a, o] = _(""), [s, c] = _("OTHER"), [l, u] = _(!1), [d, f] = _(null);
-	return /* @__PURE__ */ D(g, {
+function te({ channel: e, onClose: t }) {
+	let n = g(), [r, i] = v(""), [a, o] = v(""), [s, l] = v("OTHER"), [u, d] = v(!1), [f, p] = v(null);
+	return /* @__PURE__ */ R(c, {
 		title: "Log test message",
 		description: `Simulate an ingested message from ${e.label || e.address}.`,
 		onClose: t,
-		children: /* @__PURE__ */ O("form", {
+		children: /* @__PURE__ */ z("form", {
 			onSubmit: (i) => {
-				i.preventDefault(), f(null), n.mutate({
+				i.preventDefault(), p(null), n.mutate({
 					channelId: e.id,
 					receivedAt: (/* @__PURE__ */ new Date()).toISOString(),
 					category: s,
-					actionRequired: l,
+					actionRequired: u,
 					...r.trim() ? { subject: r.trim() } : {},
 					...a.trim() ? { preview: a.trim() } : {}
 				}, {
 					onSuccess: () => t(),
-					onError: (e) => f(e instanceof Error ? e.message : "Could not log the message.")
+					onError: (e) => p(e instanceof Error ? e.message : "Could not log the message.")
 				});
 			},
 			className: "space-y-4",
 			children: [
-				d && /* @__PURE__ */ D("div", {
+				f && /* @__PURE__ */ R("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: d
+					children: f
 				}),
-				/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("label", {
+				/* @__PURE__ */ z("div", { children: [/* @__PURE__ */ R("label", {
 					htmlFor: "msg-subject",
-					className: M,
+					className: W,
 					children: "Subject"
-				}), /* @__PURE__ */ D("input", {
+				}), /* @__PURE__ */ R("input", {
 					id: "msg-subject",
 					type: "text",
 					value: r,
 					onChange: (e) => i(e.target.value),
 					placeholder: "e.g. Your plan renews in 3 days",
-					className: j
+					className: U
 				})] }),
-				/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("label", {
+				/* @__PURE__ */ z("div", { children: [/* @__PURE__ */ R("label", {
 					htmlFor: "msg-preview",
-					className: M,
+					className: W,
 					children: "Preview"
-				}), /* @__PURE__ */ D("textarea", {
+				}), /* @__PURE__ */ R("textarea", {
 					id: "msg-preview",
 					value: a,
 					onChange: (e) => o(e.target.value),
 					rows: 2,
-					className: j
+					className: U
 				})] }),
-				/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("label", {
+				/* @__PURE__ */ z("div", { children: [/* @__PURE__ */ R("label", {
 					htmlFor: "msg-category",
-					className: M,
+					className: W,
 					children: "Category"
-				}), /* @__PURE__ */ D("select", {
+				}), /* @__PURE__ */ R("select", {
 					id: "msg-category",
 					value: s,
-					onChange: (e) => c(e.target.value),
-					className: j,
-					children: P.map((e) => /* @__PURE__ */ D("option", {
+					onChange: (e) => l(e.target.value),
+					className: U,
+					children: K.map((e) => /* @__PURE__ */ R("option", {
 						value: e,
 						children: e.replace(/_/g, " ")
 					}, e))
 				})] }),
-				/* @__PURE__ */ O("label", {
+				/* @__PURE__ */ z("label", {
 					className: "flex items-center gap-2 text-sm text-text-primary",
-					children: [/* @__PURE__ */ D("input", {
+					children: [/* @__PURE__ */ R("input", {
 						type: "checkbox",
-						checked: l,
-						onChange: (e) => u(e.target.checked),
+						checked: u,
+						onChange: (e) => d(e.target.checked),
 						className: "size-4 rounded border-border-subtle"
 					}), "Requires action"]
 				}),
-				/* @__PURE__ */ O("div", {
+				/* @__PURE__ */ z("div", {
 					className: "flex justify-end gap-3",
-					children: [/* @__PURE__ */ D("button", {
+					children: [/* @__PURE__ */ R("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__ */ D("button", {
+					}), /* @__PURE__ */ R("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",
@@ -251,209 +281,462 @@ function L({ channel: e, onClose: t }) {
 		})
 	});
 }
-function R() {
-	let { data: e, isLoading: t, isError: n, refetch: i } = u(), d = h(), [f, p] = _(!1), [m, g] = _(null), v = e ?? [];
-	return /* @__PURE__ */ O(l, {
+function ne({ channel: e, onVerify: t, verifying: n, onLog: r }) {
+	let a = Y[e.type] ?? M, s = e.status === "VERIFIED";
+	return /* @__PURE__ */ z(B, {
+		treatment: "metric",
+		className: "flex flex-col p-4",
+		children: [
+			/* @__PURE__ */ z("div", {
+				className: "flex items-start justify-between gap-2",
+				children: [/* @__PURE__ */ z("div", {
+					className: "flex min-w-0 items-center gap-2.5",
+					children: [/* @__PURE__ */ R("span", {
+						className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
+						children: /* @__PURE__ */ R(a, { className: "h-4 w-4" })
+					}), /* @__PURE__ */ z("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ R("p", {
+							className: "truncate text-sm font-semibold text-text-primary",
+							children: i(e.type)
+						}), e.label && /* @__PURE__ */ R("p", {
+							className: "truncate text-xs text-text-secondary",
+							children: e.label
+						})]
+					})]
+				}), /* @__PURE__ */ R(o, { status: e.status })]
+			}),
+			/* @__PURE__ */ z("div", {
+				className: "mt-3 border-t border-border-subtle pt-3",
+				children: [/* @__PURE__ */ R("p", {
+					className: "text-[11px] uppercase tracking-wide text-text-secondary",
+					children: e.ingestEnabled ? "Ingesting from" : "Ingest paused"
+				}), /* @__PURE__ */ R("p", {
+					className: "mt-0.5 truncate text-sm text-text-primary",
+					title: e.address,
+					children: e.address
+				})]
+			}),
+			/* @__PURE__ */ z("div", {
+				className: "mt-auto flex flex-wrap items-center gap-2 pt-3",
+				children: [
+					e.status === "PENDING" && /* @__PURE__ */ z("button", {
+						type: "button",
+						disabled: n,
+						onClick: () => t(e.id),
+						className: "inline-flex items-center gap-1 rounded-lg bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:opacity-90 disabled:opacity-50",
+						children: [/* @__PURE__ */ R(b, { className: "h-3.5 w-3.5" }), " Verify"]
+					}),
+					s && e.ingestEnabled && /* @__PURE__ */ z("button", {
+						type: "button",
+						onClick: () => r(e),
+						className: "inline-flex items-center gap-1 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken",
+						children: [/* @__PURE__ */ R(N, { className: "h-3.5 w-3.5" }), " Log test message"]
+					}),
+					e.status === "DISABLED" && /* @__PURE__ */ R("span", {
+						className: "text-xs text-text-secondary",
+						children: "Channel disabled"
+					})
+				]
+			})
+		]
+	});
+}
+function re() {
+	let { data: e, isLoading: t, isError: n, refetch: r } = p(), i = _(), [a, o] = v(!1), [c, f] = v(null), m = e ?? [], h = m.filter((e) => e.status === "VERIFIED").length, g = m.filter((e) => e.status === "PENDING").length;
+	return /* @__PURE__ */ z(d, {
 		title: "Ingest channels",
 		description: "The sources the Universal Inbox pulls subscription communication from",
-		action: /* @__PURE__ */ O("button", {
+		action: /* @__PURE__ */ z("button", {
 			type: "button",
-			onClick: () => p(!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__ */ D(C, { className: "h-3.5 w-3.5" }), " Add channel"]
+			onClick: () => o(!0),
+			className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:opacity-90",
+			children: [/* @__PURE__ */ R(j, { className: "h-3.5 w-3.5" }), " Add channel"]
 		}),
 		children: [
-			t ? /* @__PURE__ */ D(c, { label: "Loading channels…" }) : n ? /* @__PURE__ */ D(s, {
+			t ? /* @__PURE__ */ R(u, { label: "Loading channels…" }) : n ? /* @__PURE__ */ R(l, {
 				message: "Could not load channels.",
-				onRetry: () => void i()
-			}) : v.length === 0 ? /* @__PURE__ */ D(o, {
+				onRetry: () => void r()
+			}) : m.length === 0 ? /* @__PURE__ */ R(s, {
 				illustration: "empty-data",
-				icon: /* @__PURE__ */ D(w, { className: "h-12 w-12" }),
+				icon: /* @__PURE__ */ R(M, { className: "h-12 w-12" }),
 				title: "No channels yet",
 				description: "Add an email, SMS, Slack or webhook channel to start ingesting subscription communication."
-			}) : /* @__PURE__ */ D("div", {
-				className: "divide-y divide-border-subtle rounded-lg border border-border-subtle bg-bg-surface",
-				children: v.map((e) => /* @__PURE__ */ O("div", {
-					className: "flex items-center justify-between gap-3 p-3",
-					children: [/* @__PURE__ */ O("div", {
-						className: "flex min-w-0 items-center gap-2",
-						children: [/* @__PURE__ */ D(w, { className: "h-4 w-4 shrink-0 text-text-secondary" }), /* @__PURE__ */ O("div", {
-							className: "min-w-0",
-							children: [/* @__PURE__ */ D("p", {
-								className: "truncate text-sm font-medium text-text-primary",
-								children: e.label || e.address
-							}), /* @__PURE__ */ O("p", {
-								className: "text-xs text-text-secondary",
-								children: [r(e.type), e.label ? ` · ${e.address}` : ""]
-							})]
-						})]
-					}), /* @__PURE__ */ O("div", {
-						className: "flex shrink-0 items-center gap-2",
+			}) : /* @__PURE__ */ z(L, { children: [(h > 0 || g > 0) && /* @__PURE__ */ z("div", {
+				className: "mb-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-text-secondary",
+				children: [/* @__PURE__ */ z("span", {
+					className: "inline-flex items-center gap-1.5",
+					children: [
+						/* @__PURE__ */ R("span", {
+							className: "size-1.5 rounded-full bg-status-success-text",
+							"aria-hidden": !0
+						}),
+						h,
+						" verified"
+					]
+				}), g > 0 && /* @__PURE__ */ z("span", {
+					className: "inline-flex items-center gap-1.5",
+					children: [
+						/* @__PURE__ */ R("span", {
+							className: "size-1.5 rounded-full bg-status-warning-text",
+							"aria-hidden": !0
+						}),
+						g,
+						" pending verification"
+					]
+				})]
+			}), /* @__PURE__ */ R("div", {
+				className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",
+				children: m.map((e) => /* @__PURE__ */ R(ne, {
+					channel: e,
+					verifying: i.isPending,
+					onVerify: (e) => i.mutate(e),
+					onLog: (e) => f(e)
+				}, e.id))
+			})] }),
+			a && /* @__PURE__ */ R(Q, { onClose: () => o(!1) }),
+			c && /* @__PURE__ */ R(te, {
+				channel: c,
+				onClose: () => f(null)
+			})
+		]
+	});
+}
+function ie({ message: e, active: n, onSelect: r, onMarkRead: i, markPending: o, onViewRelationship: s }) {
+	let c = !e.isRead;
+	return /* @__PURE__ */ z("div", {
+		role: "button",
+		tabIndex: 0,
+		"aria-pressed": n,
+		onClick: r,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), r());
+		},
+		className: t("relative flex cursor-pointer items-start gap-3 p-4 transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] focus-visible:ring-inset", n ? "bg-bg-sunken" : c ? "bg-accent-wash" : "hover:bg-bg-sunken/60"),
+		children: [
+			c && /* @__PURE__ */ R("span", {
+				"aria-hidden": !0,
+				className: "absolute inset-y-0 left-0 w-0.5 bg-text-link"
+			}),
+			/* @__PURE__ */ R("span", {
+				className: "mt-0.5 shrink-0 text-text-secondary",
+				children: c ? /* @__PURE__ */ R(T, { className: "h-4 w-4 text-text-link" }) : /* @__PURE__ */ R(E, { className: "h-4 w-4" })
+			}),
+			/* @__PURE__ */ z("div", {
+				className: "min-w-0 flex-1",
+				children: [
+					/* @__PURE__ */ z("div", {
+						className: "flex items-center gap-2",
+						children: [
+							c && /* @__PURE__ */ R("span", {
+								"aria-label": "Unread",
+								className: "size-1.5 shrink-0 rounded-full bg-text-link"
+							}),
+							/* @__PURE__ */ R("p", {
+								className: t("min-w-0 flex-1 truncate text-sm", c ? "font-semibold text-text-primary" : "font-normal text-text-primary"),
+								children: e.subject || "(no subject)"
+							}),
+							/* @__PURE__ */ R("span", {
+								className: "shrink-0 text-xs tabular-nums text-text-secondary",
+								children: a(e.receivedAt)
+							})
+						]
+					}),
+					e.preview && /* @__PURE__ */ R("p", {
+						className: "mt-0.5 line-clamp-2 text-xs text-text-secondary",
+						children: e.preview
+					}),
+					/* @__PURE__ */ z("div", {
+						className: "mt-1.5 flex flex-wrap items-center gap-2",
 						children: [
-							/* @__PURE__ */ D(a, { status: e.status }),
-							e.status === "PENDING" && /* @__PURE__ */ O("button", {
+							/* @__PURE__ */ R(X, { category: e.category }),
+							e.actionRequired && /* @__PURE__ */ R(Z, {}),
+							s && /* @__PURE__ */ R("button", {
 								type: "button",
-								disabled: d.isPending,
-								onClick: () => d.mutate(e.id),
-								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__ */ D(y, { className: "h-3.5 w-3.5" }), " Verify"]
+								onClick: (e) => {
+									e.stopPropagation(), s();
+								},
+								className: "text-xs font-medium text-text-link hover:underline",
+								children: "View relationship"
 							}),
-							e.status === "VERIFIED" && e.ingestEnabled && /* @__PURE__ */ O("button", {
+							c && /* @__PURE__ */ R("button", {
 								type: "button",
-								onClick: () => g(e),
-								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",
-								children: [/* @__PURE__ */ D(T, { className: "h-3.5 w-3.5" }), " Log test message"]
+								disabled: o,
+								onClick: (e) => {
+									e.stopPropagation(), i();
+								},
+								className: "ml-auto shrink-0 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: "Mark read"
 							})
 						]
+					})
+				]
+			})
+		]
+	});
+}
+function ae({ message: e, channel: t, onMarkRead: n, markPending: i, onViewRelationship: a }) {
+	if (!e) return /* @__PURE__ */ z(B, {
+		treatment: "metric",
+		className: "flex min-h-[20rem] flex-col items-center justify-center p-8 text-center",
+		children: [
+			/* @__PURE__ */ R(k, { className: "h-10 w-10 text-text-secondary" }),
+			/* @__PURE__ */ R("p", {
+				className: "mt-3 text-sm font-medium text-text-primary",
+				children: "Select a message"
+			}),
+			/* @__PURE__ */ R("p", {
+				className: "mt-1 max-w-[16rem] text-xs text-text-secondary",
+				children: "Pick any message from the list to read the full details here."
+			})
+		]
+	});
+	let o = t ? Y[t.type] ?? M : M, s = e.categoryConfidence == null ? null : Math.round(Math.max(0, Math.min(1, e.categoryConfidence)) * 100);
+	return /* @__PURE__ */ z(B, {
+		treatment: "metric",
+		className: "flex flex-col p-5",
+		children: [
+			/* @__PURE__ */ z("div", {
+				className: "flex items-start justify-between gap-3",
+				children: [/* @__PURE__ */ R("h3", {
+					className: "text-base font-semibold text-text-primary",
+					children: e.subject || "(no subject)"
+				}), !e.isRead && /* @__PURE__ */ R("button", {
+					type: "button",
+					disabled: i,
+					onClick: n,
+					className: "shrink-0 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: "Mark read"
+				})]
+			}),
+			t && /* @__PURE__ */ z("div", {
+				className: "mt-2 flex items-center gap-2 text-sm",
+				children: [/* @__PURE__ */ R(o, { className: "h-4 w-4 shrink-0 text-text-secondary" }), /* @__PURE__ */ R("span", {
+					className: "truncate text-text-secondary",
+					title: t.address,
+					children: t.address
+				})]
+			}),
+			/* @__PURE__ */ z("div", {
+				className: "mt-3 flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ R(X, { category: e.category }),
+					e.actionRequired && /* @__PURE__ */ R(Z, {}),
+					/* @__PURE__ */ R("span", {
+						className: "text-xs text-text-secondary",
+						children: r(e.receivedAt)
+					})
+				]
+			}),
+			s != null && /* @__PURE__ */ z("div", {
+				className: "mt-4 rounded-lg border border-border-subtle bg-bg-surface p-3",
+				children: [/* @__PURE__ */ z("div", {
+					className: "flex items-center justify-between text-xs",
+					children: [/* @__PURE__ */ z("span", {
+						className: "inline-flex items-center gap-1.5 font-medium text-text-primary",
+						children: [/* @__PURE__ */ R(F, { className: "h-3.5 w-3.5 text-text-link" }), " AI categorization"]
+					}), /* @__PURE__ */ z("span", {
+						className: "tabular-nums text-text-secondary",
+						children: [s, "% confidence"]
 					})]
-				}, e.id))
+				}), /* @__PURE__ */ R(f, {
+					value: s,
+					max: 100,
+					tone: s >= 66 ? "positive" : s >= 33 ? "accent" : "warning",
+					className: "mt-2"
+				})]
 			}),
-			f && /* @__PURE__ */ D(I, { onClose: () => p(!1) }),
-			m && /* @__PURE__ */ D(L, {
-				channel: m,
-				onClose: () => g(null)
+			/* @__PURE__ */ R("div", {
+				className: "mt-4 border-t border-border-subtle pt-4",
+				children: e.preview ? /* @__PURE__ */ R("p", {
+					className: "whitespace-pre-wrap text-sm leading-relaxed text-text-primary",
+					children: e.preview
+				}) : /* @__PURE__ */ R("p", {
+					className: "text-sm italic text-text-secondary",
+					children: "No preview available for this message."
+				})
+			}),
+			e.actionRequired && /* @__PURE__ */ z("div", {
+				className: "mt-4 flex items-start gap-2 rounded-lg border border-status-warning-text/30 bg-status-warning-bg-subtle p-3",
+				children: [/* @__PURE__ */ R(P, { className: "mt-0.5 h-4 w-4 shrink-0 text-status-warning-text" }), /* @__PURE__ */ R("p", {
+					className: "text-xs text-status-warning-text",
+					children: "This message needs your attention — review it before its provider deadline."
+				})]
+			}),
+			a && /* @__PURE__ */ z("button", {
+				type: "button",
+				onClick: a,
+				className: "mt-4 inline-flex items-center gap-1 self-start text-sm font-medium text-text-link hover:underline",
+				children: ["View relationship ", /* @__PURE__ */ R(S, { className: "h-4 w-4" })]
 			})
 		]
 	});
 }
-function z() {
-	let { navigateTo: r } = e(), [l, u] = _(0), [d, p] = _(""), [h, g] = _(!1), { data: y, isLoading: C, isError: w, refetch: T, isFetching: j } = f({
-		category: d || void 0,
-		unreadOnly: h || void 0,
+function $({ active: e, onClick: n, children: r, tone: i = "default" }) {
+	return /* @__PURE__ */ R("button", {
+		type: "button",
+		onClick: n,
+		"aria-pressed": e,
+		className: t("inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", e ? i === "warning" ? "border-transparent bg-status-warning-bg-subtle text-status-warning-text" : "border-transparent bg-action-primary-bg text-action-primary-text" : "border-border-subtle text-text-secondary hover:bg-bg-sunken hover:text-text-primary"),
+		children: r
+	});
+}
+function oe() {
+	let { navigateTo: r } = e(), [i, a] = v(0), [o, c] = v(""), [d, f] = v(!1), [m, g] = v(!1), [_, b] = v(null), { data: x, isLoading: S, isError: C, refetch: E, isFetching: D } = h({
+		category: o || void 0,
+		unreadOnly: d || void 0,
 		pagination: {
-			limit: A,
-			offset: l * A
+			limit: H,
+			offset: i * H
 		}
-	}), M = m(), P = y?.items ?? [], F = y?.pageInfo.hasMore ?? !1;
-	return /* @__PURE__ */ O(n, {
+	}), { data: O } = p(), k = ee(), A = x?.items ?? [], j = x?.pageInfo.hasMore ?? !1, M = m ? A.filter((e) => e.actionRequired) : A, N = A.filter((e) => !e.isRead).length, P = A.filter((e) => e.actionRequired).length, F = new Map((O ?? []).map((e) => [e.id, e])), I = M.find((e) => e.id === _) ?? null, L = I ? F.get(I.channelId) : void 0, B = () => {
+		a(0), b(null);
+	};
+	return /* @__PURE__ */ z(n, {
 		title: "Universal Inbox",
 		description: "Every subscription communication, merged and categorized",
 		children: [
-			/* @__PURE__ */ D(k, {
+			/* @__PURE__ */ R(V, {
 				className: "mb-4",
 				children: "Subscription communication is noisy and scattered. The Universal Inbox merges every channel a provider uses and uses AI to categorize each message so you never miss a renewal, required action or security notice."
 			}),
-			/* @__PURE__ */ O("div", {
-				className: "flex flex-wrap items-center gap-3",
-				children: [/* @__PURE__ */ D("select", {
-					"aria-label": "Filter by category",
-					value: d,
-					onChange: (e) => {
-						p(e.target.value), u(0);
-					},
-					className: "rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-xs text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-					children: N.map((e) => /* @__PURE__ */ D("option", {
-						value: e.value,
+			/* @__PURE__ */ R("div", {
+				className: "-mx-1 flex gap-2 overflow-x-auto px-1 pb-1",
+				children: G.map((e) => /* @__PURE__ */ R("span", {
+					className: "shrink-0",
+					children: /* @__PURE__ */ R($, {
+						active: o === e.value,
+						onClick: () => {
+							c(e.value), B();
+						},
 						children: e.label
-					}, e.value))
-				}), /* @__PURE__ */ O("label", {
-					className: "flex items-center gap-2 text-sm text-text-primary",
-					children: [/* @__PURE__ */ D("input", {
-						type: "checkbox",
-						checked: h,
-						onChange: (e) => {
-							g(e.target.checked), u(0);
+					})
+				}, e.value))
+			}),
+			/* @__PURE__ */ z("div", {
+				className: "mt-3 flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ z($, {
+						active: m,
+						tone: "warning",
+						onClick: () => {
+							g((e) => !e), b(null);
 						},
-						className: "size-4 rounded border-border-subtle"
-					}), "Unread only"]
-				})]
+						children: [/* @__PURE__ */ R(y, { className: "h-3.5 w-3.5" }), " Action required"]
+					}),
+					/* @__PURE__ */ z($, {
+						active: d,
+						onClick: () => {
+							f((e) => !e), B();
+						},
+						children: [/* @__PURE__ */ R(T, { className: "h-3.5 w-3.5" }), " Unread only"]
+					}),
+					!S && !C && A.length > 0 && /* @__PURE__ */ z("p", {
+						className: "ml-auto text-xs text-text-secondary",
+						children: [
+							/* @__PURE__ */ R("span", {
+								className: "font-medium text-text-primary tabular-nums",
+								children: N
+							}),
+							" unread",
+							" · ",
+							/* @__PURE__ */ R("span", {
+								className: "font-medium text-text-primary tabular-nums",
+								children: P
+							}),
+							" need action",
+							D ? " · refreshing…" : ""
+						]
+					})
+				]
 			}),
-			C ? /* @__PURE__ */ D(c, { label: "Loading inbox…" }) : w ? /* @__PURE__ */ D(s, {
+			S ? /* @__PURE__ */ R(u, { label: "Loading inbox…" }) : C ? /* @__PURE__ */ R(l, {
 				message: "Could not load the inbox.",
-				onRetry: () => void T()
-			}) : P.length === 0 ? /* @__PURE__ */ D("div", {
+				onRetry: () => void E()
+			}) : A.length === 0 ? /* @__PURE__ */ R("div", {
 				className: "mt-6",
-				children: /* @__PURE__ */ D(o, {
+				children: /* @__PURE__ */ R(s, {
 					illustration: "empty-inbox",
-					icon: /* @__PURE__ */ D(b, { className: "h-12 w-12" }),
+					icon: /* @__PURE__ */ R(w, { className: "h-12 w-12" }),
 					title: "Inbox is empty",
-					description: h || d ? "No messages match these filters." : "Merged subscription communications will appear here once channels start ingesting."
+					description: d || o ? "No messages match these filters." : "Merged subscription communications will appear here once channels start ingesting."
 				})
-			}) : /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D("div", {
-				className: "mt-6 divide-y divide-border-subtle rounded-lg border border-border-subtle bg-bg-surface",
-				children: P.map((e) => /* @__PURE__ */ O("div", {
-					className: t("flex items-start gap-3 p-4", !e.isRead && "bg-accent-wash"),
-					children: [
-						/* @__PURE__ */ D("span", {
-							className: "mt-0.5 shrink-0 text-text-secondary",
-							children: e.isRead ? /* @__PURE__ */ D(S, { className: "h-4 w-4" }) : /* @__PURE__ */ D(x, { className: "h-4 w-4 text-text-link" })
-						}),
-						/* @__PURE__ */ O("div", {
-							className: "min-w-0 flex-1",
+			}) : /* @__PURE__ */ z("div", {
+				className: "mt-5 grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,1fr)_380px]",
+				children: [/* @__PURE__ */ z("div", {
+					className: "min-w-0",
+					children: [M.length === 0 ? /* @__PURE__ */ z("div", {
+						className: "rounded-xl border border-border-subtle bg-bg-surface p-8 text-center",
+						children: [
+							/* @__PURE__ */ R(y, { className: "mx-auto h-8 w-8 text-text-secondary" }),
+							/* @__PURE__ */ R("p", {
+								className: "mt-2 text-sm font-medium text-text-primary",
+								children: "No action-required messages on this page"
+							}),
+							/* @__PURE__ */ R("p", {
+								className: "mt-1 text-xs text-text-secondary",
+								children: "Turn off the “Action required” lens or move to another page."
+							})
+						]
+					}) : /* @__PURE__ */ R("div", {
+						className: "divide-y divide-border-subtle overflow-hidden rounded-xl border border-border-subtle bg-bg-surface",
+						children: M.map((e) => /* @__PURE__ */ R(ie, {
+							message: e,
+							active: e.id === _,
+							onSelect: () => b(e.id),
+							onMarkRead: () => k.mutate(e.id),
+							markPending: k.isPending,
+							onViewRelationship: e.relationshipId ? () => r(`/relationships/${e.relationshipId}`) : null
+						}, e.id))
+					}), /* @__PURE__ */ z("div", {
+						className: "mt-4 flex items-center justify-between",
+						children: [/* @__PURE__ */ z("p", {
+							className: "text-xs text-text-secondary",
 							children: [
-								/* @__PURE__ */ O("div", {
-									className: "flex items-center gap-2",
-									children: [/* @__PURE__ */ D("p", {
-										className: t("truncate text-sm", e.isRead ? "font-normal text-text-primary" : "font-semibold text-text-primary"),
-										children: e.subject || "(no subject)"
-									}), e.actionRequired && /* @__PURE__ */ O("span", {
-										title: "Action required",
-										className: "inline-flex items-center gap-1 rounded-full bg-status-warning-bg-subtle px-2 py-0.5 text-[10px] font-medium text-status-warning-text",
-										children: [/* @__PURE__ */ D(v, { className: "h-3 w-3" }), " Action"]
-									})]
-								}),
-								e.preview && /* @__PURE__ */ D("p", {
-									className: "mt-0.5 line-clamp-2 text-xs text-text-secondary",
-									children: e.preview
-								}),
-								/* @__PURE__ */ O("div", {
-									className: "mt-1.5 flex flex-wrap items-center gap-2",
-									children: [
-										/* @__PURE__ */ D(a, { status: e.category }),
-										/* @__PURE__ */ D("span", {
-											className: "text-xs text-text-secondary",
-											children: i(e.receivedAt)
-										}),
-										e.relationshipId && /* @__PURE__ */ D("button", {
-											type: "button",
-											onClick: () => r(`/relationships/${e.relationshipId}`),
-											className: "text-xs font-medium text-text-link hover:underline",
-											children: "View relationship"
-										})
-									]
-								})
+								"Page ",
+								i + 1,
+								D ? " · refreshing…" : ""
 							]
-						}),
-						!e.isRead && /* @__PURE__ */ D("button", {
-							type: "button",
-							disabled: M.isPending,
-							onClick: () => M.mutate(e.id),
-							className: "shrink-0 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: "Mark read"
-						})
-					]
-				}, e.id))
-			}), /* @__PURE__ */ O("div", {
-				className: "mt-4 flex items-center justify-between",
-				children: [/* @__PURE__ */ O("p", {
-					className: "text-xs text-text-secondary",
-					children: [
-						"Page ",
-						l + 1,
-						j ? " · refreshing…" : ""
-					]
-				}), /* @__PURE__ */ O("div", {
-					className: "flex gap-2",
-					children: [/* @__PURE__ */ D("button", {
-						type: "button",
-						disabled: l === 0,
-						onClick: () => u((e) => Math.max(0, e - 1)),
-						className: t("rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium", l === 0 ? "cursor-not-allowed text-text-secondary opacity-50" : "text-text-primary hover:bg-bg-sunken"),
-						children: "Previous"
-					}), /* @__PURE__ */ D("button", {
-						type: "button",
-						disabled: !F,
-						onClick: () => u((e) => e + 1),
-						className: t("rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium", F ? "text-text-primary hover:bg-bg-sunken" : "cursor-not-allowed text-text-secondary opacity-50"),
-						children: "Next"
+						}), /* @__PURE__ */ z("div", {
+							className: "flex gap-2",
+							children: [/* @__PURE__ */ R("button", {
+								type: "button",
+								disabled: i === 0,
+								onClick: () => {
+									a((e) => Math.max(0, e - 1)), b(null);
+								},
+								className: t("rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium", i === 0 ? "cursor-not-allowed text-text-secondary opacity-50" : "text-text-primary hover:bg-bg-sunken"),
+								children: "Previous"
+							}), /* @__PURE__ */ R("button", {
+								type: "button",
+								disabled: !j,
+								onClick: () => {
+									a((e) => e + 1), b(null);
+								},
+								className: t("rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium", j ? "text-text-primary hover:bg-bg-sunken" : "cursor-not-allowed text-text-secondary opacity-50"),
+								children: "Next"
+							})]
+						})]
 					})]
+				}), /* @__PURE__ */ R("aside", {
+					className: "hidden lg:block",
+					children: /* @__PURE__ */ R("div", {
+						className: "lg:sticky lg:top-4",
+						children: /* @__PURE__ */ R(ae, {
+							message: I,
+							channel: L,
+							onMarkRead: () => I && k.mutate(I.id),
+							markPending: k.isPending,
+							onViewRelationship: I?.relationshipId ? () => r(`/relationships/${I.relationshipId}`) : null
+						})
+					})
 				})]
-			})] }),
-			/* @__PURE__ */ D(R, {})
+			}),
+			/* @__PURE__ */ R(re, {})
 		]
 	});
 }
 //#endregion
-export { z as InboxPage };
+export { oe as InboxPage };
 
 //# sourceMappingURL=InboxPage.js.map