@burdenoff/microfe-subscriberbot 2026.706.1 → 2026.706.3

package/dist/subscriberbot/pages/agents/AgentDetailPage.js

@@ -1,160 +1,445 @@
 import { useSubscriberBot as e } from "../../context/SubscriberBotContext.js";
 import { PageLayout as t } from "../../components/PageLayout.js";
-import { formatEnumLabel as n, formatRelativeTime as r } from "../../utils/formatters.js";
-import { StatusBadge as i } from "../../components/StatusBadge.js";
-import { EmptyState as a } from "../../components/EmptyState.js";
-import { ErrorView as o, LoadingView as s, Section as c } from "../../components/StateViews.js";
-import { useAgent as l, useSetAgentStatus as u } from "../../hooks/useSubscriberBotApi.js";
-import { useState as d } from "react";
-import { ArrowLeft as f, Bot as p, ShieldCheck as m } from "lucide-react";
-import { useParams as h } from "react-router-dom";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { GlassCard as v } from "@burdenoff/fe-libs/ui";
+import { MetricsCard as n } from "../../components/MetricsCard.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 { Modal as s } from "../../components/Modal.js";
+import { ErrorView as c, LoadingView as l, Section as u } from "../../components/StateViews.js";
+import { Timeline as d } from "../../components/viz.js";
+import "../../components/index.js";
+import { useAgent as f, useCreatePolicy as p, useSetAgentStatus as m } from "../../hooks/useSubscriberBotApi.js";
+import { useState as h } from "react";
+import { ArrowLeft as g, ArrowLeftRight as _, Bot as v, Building2 as y, Clock as b, ConciergeBell as x, DollarSign as S, Handshake as C, History as w, ListChecks as T, Mail as E, Plus as D, RefreshCw as O, Search as k, ShieldCheck as A, Zap as j } from "lucide-react";
+import { useParams as M } from "react-router-dom";
+import { jsx as N, jsxs as P } from "react/jsx-runtime";
+import { GlassCard as F } from "@burdenoff/fe-libs/ui";
 //#region src/subscriberbot/pages/agents/AgentDetailPage.tsx
-var y = [
+var I = [
 	"DISABLED",
 	"SUGGEST_ONLY",
 	"AUTONOMOUS"
-];
-function b() {
-	let { id: b } = h(), { navigateTo: x } = e(), { data: S, isLoading: C, isError: w, refetch: T } = l(b), E = u(), [D, O] = d(null);
-	if (C) return /* @__PURE__ */ g(t, {
+], L = [
+	"ALERT",
+	"CREATE_TASK",
+	"RENEW",
+	"CANCEL",
+	"PAUSE",
+	"UPGRADE",
+	"DOWNGRADE"
+], R = {
+	DISCOVERY: k,
+	RENEWAL: O,
+	COST: S,
+	NEWSLETTER: E,
+	VENDOR: y,
+	COMPLIANCE: A,
+	NEGOTIATION: C,
+	MIGRATION: _,
+	CONCIERGE: x
+};
+function z(e) {
+	switch (e) {
+		case "RENEW":
+		case "UPGRADE": return "positive";
+		case "CANCEL":
+		case "PAUSE":
+		case "DOWNGRADE":
+		case "ALERT": return "warning";
+		default: return "default";
+	}
+}
+var B = "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)]", V = "mb-1 block text-xs font-medium text-text-secondary";
+function H({ enabled: e }) {
+	return /* @__PURE__ */ P("span", {
+		className: e ? "inline-flex items-center gap-1.5 rounded-full bg-status-success-bg-subtle px-2.5 py-0.5 text-xs font-medium text-status-success-text" : "inline-flex items-center gap-1.5 rounded-full bg-bg-sunken px-2.5 py-0.5 text-xs font-medium text-text-secondary",
+		children: [/* @__PURE__ */ N("span", {
+			"aria-hidden": !0,
+			className: "size-1.5 rounded-full bg-current",
+			style: { opacity: e ? 1 : .6 }
+		}), e ? "Enabled" : "Disabled"]
+	});
+}
+function U({ agentId: e, onClose: t }) {
+	let n = p(), [r, i] = h(""), [a, o] = h("ALERT"), [c, l] = h(""), [u, d] = h(""), [f, m] = h(!0), [g, _] = h(null);
+	return /* @__PURE__ */ N(s, {
+		title: "Add policy",
+		onClose: t,
+		maxWidthClassName: "max-w-xl",
+		children: /* @__PURE__ */ P("form", {
+			onSubmit: (i) => {
+				if (i.preventDefault(), _(null), !r.trim()) {
+					_("A policy name is required.");
+					return;
+				}
+				let o;
+				if (u.trim()) try {
+					o = JSON.parse(u);
+				} catch {
+					_("Condition must be valid JSON (e.g. {\"amountOver\": 100}).");
+					return;
+				}
+				n.mutate({
+					agentId: e,
+					name: r.trim(),
+					action: a,
+					isEnabled: f,
+					...c.trim() ? { description: c.trim() } : {},
+					...o ? { condition: o } : {}
+				}, {
+					onSuccess: () => t(),
+					onError: (e) => _(e instanceof Error ? e.message : "Could not add policy.")
+				});
+			},
+			className: "space-y-4",
+			children: [
+				g && /* @__PURE__ */ N("div", {
+					className: "rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-4 py-2 text-sm text-status-error-text",
+					children: g
+				}),
+				/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ P("label", {
+					htmlFor: "policy-name",
+					className: V,
+					children: ["Name ", /* @__PURE__ */ N("span", {
+						className: "text-status-error-text",
+						children: "*"
+					})]
+				}), /* @__PURE__ */ N("input", {
+					id: "policy-name",
+					type: "text",
+					value: r,
+					onChange: (e) => i(e.target.value),
+					placeholder: "e.g. Alert on price hike over 20%",
+					className: B,
+					required: !0
+				})] }),
+				/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
+					htmlFor: "policy-action",
+					className: V,
+					children: "Action"
+				}), /* @__PURE__ */ N("select", {
+					id: "policy-action",
+					value: a,
+					onChange: (e) => o(e.target.value),
+					className: B,
+					children: L.map((e) => /* @__PURE__ */ N("option", {
+						value: e,
+						children: e.replace(/_/g, " ")
+					}, e))
+				})] }),
+				/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ P("label", {
+					htmlFor: "policy-condition",
+					className: V,
+					children: ["Condition ", /* @__PURE__ */ N("span", {
+						className: "text-text-secondary",
+						children: "(optional JSON)"
+					})]
+				}), /* @__PURE__ */ N("textarea", {
+					id: "policy-condition",
+					value: u,
+					onChange: (e) => d(e.target.value),
+					rows: 3,
+					placeholder: "{ \"priceIncreasePct\": 20 }",
+					className: `${B} font-mono`
+				})] }),
+				/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
+					htmlFor: "policy-desc",
+					className: V,
+					children: "Description"
+				}), /* @__PURE__ */ N("textarea", {
+					id: "policy-desc",
+					value: c,
+					onChange: (e) => l(e.target.value),
+					rows: 2,
+					className: B
+				})] }),
+				/* @__PURE__ */ P("label", {
+					className: "flex items-center gap-2 text-sm text-text-primary",
+					children: [/* @__PURE__ */ N("input", {
+						type: "checkbox",
+						checked: f,
+						onChange: (e) => m(e.target.checked),
+						className: "size-4 rounded border-border-subtle"
+					}), "Enabled"]
+				}),
+				/* @__PURE__ */ P("div", {
+					className: "flex justify-end gap-3",
+					children: [/* @__PURE__ */ N("button", {
+						type: "button",
+						onClick: t,
+						className: "rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
+						children: "Cancel"
+					}), /* @__PURE__ */ N("button", {
+						type: "submit",
+						disabled: n.isPending,
+						className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 disabled:opacity-50",
+						children: n.isPending ? "Adding…" : "Add policy"
+					})]
+				})
+			]
+		})
+	});
+}
+function W({ policy: e }) {
+	return /* @__PURE__ */ P(F, {
+		treatment: "metric",
+		className: "flex flex-col p-4",
+		children: [
+			/* @__PURE__ */ P("div", {
+				className: "flex items-start justify-between gap-2",
+				children: [/* @__PURE__ */ N("p", {
+					className: "text-sm font-semibold text-text-primary",
+					children: e.name
+				}), /* @__PURE__ */ N(H, { enabled: e.isEnabled })]
+			}),
+			/* @__PURE__ */ P("div", {
+				className: "mt-2 flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ P("span", {
+					className: "inline-flex items-center gap-1.5 rounded-md bg-[var(--color-accent-soft)] px-2 py-0.5 text-[11px] font-medium text-text-primary",
+					children: [
+						/* @__PURE__ */ N(A, {
+							className: "h-3 w-3",
+							"aria-hidden": !0
+						}),
+						" ",
+						r(e.action)
+					]
+				}), /* @__PURE__ */ P("span", {
+					className: "inline-flex items-center gap-1 rounded-md bg-bg-sunken px-2 py-0.5 text-[11px] font-medium text-text-secondary tabular-nums",
+					children: [
+						"Triggered ",
+						e.triggerCount,
+						"×"
+					]
+				})]
+			}),
+			e.description && /* @__PURE__ */ N("p", {
+				className: "mt-2 line-clamp-2 text-xs text-text-secondary",
+				children: e.description
+			}),
+			/* @__PURE__ */ P("p", {
+				className: "mt-2 flex items-center gap-1.5 text-xs text-text-secondary",
+				children: [/* @__PURE__ */ N(b, {
+					className: "h-3.5 w-3.5",
+					"aria-hidden": !0
+				}), e.lastTriggeredAt ? `Last triggered ${i(e.lastTriggeredAt)}` : "Not yet triggered"]
+			})
+		]
+	});
+}
+function G() {
+	let { id: s } = M(), { navigateTo: p } = e(), { data: _, isLoading: y, isError: x, refetch: S } = f(s), C = m(), [E, O] = h(null), [k, L] = h(!1);
+	if (y) return /* @__PURE__ */ N(t, {
 		title: "Agent",
-		children: /* @__PURE__ */ g(s, { label: "Loading agent…" })
+		children: /* @__PURE__ */ N(l, { label: "Loading agent…" })
 	});
-	if (w) return /* @__PURE__ */ g(t, {
+	if (x) return /* @__PURE__ */ N(t, {
 		title: "Agent",
-		children: /* @__PURE__ */ g(o, {
+		children: /* @__PURE__ */ N(c, {
 			message: "Could not load this agent.",
-			onRetry: () => void T()
+			onRetry: () => void S()
 		})
 	});
-	if (!S) return /* @__PURE__ */ g(t, {
+	if (!_) return /* @__PURE__ */ N(t, {
 		title: "Agent",
-		children: /* @__PURE__ */ g(a, {
+		children: /* @__PURE__ */ N(o, {
 			illustration: "empty-data",
 			title: "Agent not found",
 			description: "It may have been removed, or you may not have access to it.",
-			action: /* @__PURE__ */ g("button", {
+			action: /* @__PURE__ */ N("button", {
 				type: "button",
-				onClick: () => x("/agents"),
+				onClick: () => p("/agents"),
 				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 agents"
 			})
 		})
 	});
-	let k = S;
-	return /* @__PURE__ */ _(t, {
-		title: k.name,
-		description: `${n(k.kind)} agent`,
-		actions: /* @__PURE__ */ _("button", {
+	let B = _, V = R[B.kind] ?? v, H = B.policies ?? [], G = H.filter((e) => e.isEnabled).length, K = H.reduce((e, t) => e + (t.triggerCount || 0), 0), q = [];
+	B.lastRunAt && q.push({
+		ts: new Date(B.lastRunAt).getTime(),
+		item: {
+			title: "Agent run",
+			sub: "Latest autonomous cycle",
+			meta: i(B.lastRunAt),
+			tone: "positive"
+		}
+	});
+	for (let e of H) e.lastTriggeredAt && q.push({
+		ts: new Date(e.lastTriggeredAt).getTime(),
+		item: {
+			title: e.name,
+			sub: `${r(e.action)} · fired ${e.triggerCount}×`,
+			meta: i(e.lastTriggeredAt),
+			tone: z(e.action)
+		}
+	});
+	q.sort((e, t) => t.ts - e.ts);
+	let J = q.map((e) => e.item);
+	return /* @__PURE__ */ P(t, {
+		title: B.name,
+		description: `${r(B.kind)} agent`,
+		actions: /* @__PURE__ */ P("button", {
 			type: "button",
-			onClick: () => x("/agents"),
+			onClick: () => p("/agents"),
 			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__ */ g(f, { className: "h-4 w-4" }), " Back"]
+			children: [/* @__PURE__ */ N(g, { className: "h-4 w-4" }), " Back"]
 		}),
 		children: [
-			/* @__PURE__ */ _("div", {
-				className: "flex flex-wrap items-center gap-3",
-				children: [
-					/* @__PURE__ */ g("span", {
-						className: "flex size-10 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
-						children: /* @__PURE__ */ g(p, { className: "h-5 w-5" })
-					}),
-					/* @__PURE__ */ g(i, { status: k.status }),
-					/* @__PURE__ */ g("span", {
-						className: "text-sm text-text-secondary",
-						children: k.lastRunAt ? `Last run ${r(k.lastRunAt)}` : "Never run"
-					})
-				]
-			}),
-			k.description && /* @__PURE__ */ g("p", {
-				className: "mt-4 max-w-3xl text-sm text-text-secondary",
-				children: k.description
+			/* @__PURE__ */ N(F, {
+				treatment: "glass",
+				glow: B.status === "AUTONOMOUS",
+				className: "p-5",
+				children: /* @__PURE__ */ P("div", {
+					className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
+					children: [/* @__PURE__ */ P("div", {
+						className: "flex items-start gap-4",
+						children: [/* @__PURE__ */ N("span", {
+							className: "flex size-12 shrink-0 items-center justify-center rounded-xl bg-[var(--color-accent-soft)] text-text-primary",
+							children: /* @__PURE__ */ N(V, { className: "h-6 w-6" })
+						}), /* @__PURE__ */ P("div", {
+							className: "min-w-0",
+							children: [
+								/* @__PURE__ */ P("div", {
+									className: "flex flex-wrap items-center gap-2",
+									children: [/* @__PURE__ */ N("p", {
+										className: "text-lg font-semibold text-text-primary",
+										children: B.name
+									}), /* @__PURE__ */ N(a, { status: B.status })]
+								}),
+								/* @__PURE__ */ P("p", {
+									className: "mt-1 flex items-center gap-1.5 text-xs text-text-secondary",
+									children: [/* @__PURE__ */ N(b, {
+										className: "h-3.5 w-3.5",
+										"aria-hidden": !0
+									}), B.lastRunAt ? `Last run ${i(B.lastRunAt)}` : "Never run"]
+								}),
+								B.description && /* @__PURE__ */ N("p", {
+									className: "mt-2 max-w-2xl text-sm text-text-secondary",
+									children: B.description
+								})
+							]
+						})]
+					}), /* @__PURE__ */ P("div", {
+						className: "w-full sm:w-56 sm:shrink-0",
+						children: [
+							/* @__PURE__ */ N("label", {
+								htmlFor: "agent-posture",
+								className: "mb-1 block text-xs font-medium text-text-secondary",
+								children: "Operating posture"
+							}),
+							/* @__PURE__ */ N("select", {
+								id: "agent-posture",
+								value: B.status,
+								disabled: C.isPending,
+								onChange: (e) => {
+									O(null), C.mutate({
+										id: B.id,
+										status: e.target.value
+									}, { onError: (e) => O(e instanceof Error ? e.message : "Could not change posture.") });
+								},
+								className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] disabled:opacity-50",
+								children: I.map((e) => /* @__PURE__ */ N("option", {
+									value: e,
+									children: r(e)
+								}, e))
+							}),
+							/* @__PURE__ */ N("p", {
+								className: "mt-1.5 text-[11px] leading-snug text-text-secondary",
+								children: "Disabled never acts · Suggest-only proposes · Autonomous acts within its policies."
+							})
+						]
+					})]
+				})
 			}),
-			D && /* @__PURE__ */ g("div", {
+			E && /* @__PURE__ */ N("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: D
+				children: E
 			}),
-			/* @__PURE__ */ _("div", {
-				className: "mt-6 max-w-sm",
+			/* @__PURE__ */ P("div", {
+				className: "mt-6 grid grid-cols-1 gap-4 sm:grid-cols-3",
 				children: [
-					/* @__PURE__ */ g("label", {
-						htmlFor: "agent-posture",
-						className: "mb-1 block text-xs font-medium text-text-secondary",
-						children: "Operating posture"
+					/* @__PURE__ */ N(n, {
+						icon: /* @__PURE__ */ N(T, { className: "h-5 w-5" }),
+						value: H.length,
+						label: "Policies"
 					}),
-					/* @__PURE__ */ g("select", {
-						id: "agent-posture",
-						value: k.status,
-						disabled: E.isPending,
-						onChange: (e) => {
-							O(null), E.mutate({
-								id: k.id,
-								status: e.target.value
-							}, { onError: (e) => O(e instanceof Error ? e.message : "Could not change posture.") });
-						},
-						className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] disabled:opacity-50",
-						children: y.map((e) => /* @__PURE__ */ g("option", {
-							value: e,
-							children: n(e)
-						}, e))
+					/* @__PURE__ */ N(n, {
+						icon: /* @__PURE__ */ N(A, { className: "h-5 w-5" }),
+						value: G,
+						label: "Enabled"
 					}),
-					/* @__PURE__ */ g("p", {
-						className: "mt-1.5 text-xs text-text-secondary",
-						children: "Disabled never acts; Suggest-only proposes; Autonomous acts within its policies."
+					/* @__PURE__ */ N(n, {
+						icon: /* @__PURE__ */ N(j, { className: "h-5 w-5" }),
+						value: K,
+						label: "Total triggers"
 					})
 				]
 			}),
-			/* @__PURE__ */ g(c, {
-				title: "Policies",
-				description: "The autonomous rules that bound this agent",
-				children: !k.policies || k.policies.length === 0 ? /* @__PURE__ */ g(a, {
-					illustration: "empty-data",
-					title: "No policies",
-					description: "Policies define what this agent may do autonomously, and what it must alert on."
-				}) : /* @__PURE__ */ g("div", {
-					className: "grid grid-cols-1 gap-3 sm:grid-cols-2",
-					children: k.policies.map((e) => /* @__PURE__ */ _(v, {
-						treatment: "metric",
-						className: "p-4",
-						children: [
-							/* @__PURE__ */ _("div", {
-								className: "flex items-start justify-between gap-2",
-								children: [/* @__PURE__ */ g("p", {
-									className: "text-sm font-medium text-text-primary",
-									children: e.name
-								}), /* @__PURE__ */ g(i, { status: e.isEnabled ? "ACTIVE" : "DISABLED" })]
-							}),
-							/* @__PURE__ */ _("p", {
-								className: "mt-1 flex items-center gap-1.5 text-xs text-text-secondary",
-								children: [
-									/* @__PURE__ */ g(m, { className: "h-3.5 w-3.5" }),
-									" Action: ",
-									n(e.action)
-								]
-							}),
-							e.description && /* @__PURE__ */ g("p", {
-								className: "mt-2 text-xs text-text-secondary",
-								children: e.description
-							}),
-							/* @__PURE__ */ _("p", {
-								className: "mt-2 text-xs text-text-secondary",
+			/* @__PURE__ */ P("div", {
+				className: "mt-8 grid grid-cols-1 gap-6 lg:grid-cols-3",
+				children: [/* @__PURE__ */ N("div", {
+					className: "lg:col-span-2",
+					children: /* @__PURE__ */ N(u, {
+						title: "Policies",
+						description: "The autonomous rules that bound this agent",
+						action: /* @__PURE__ */ P("button", {
+							type: "button",
+							onClick: () => L(!0),
+							className: "inline-flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken",
+							children: [/* @__PURE__ */ N(D, { className: "h-3.5 w-3.5" }), " Add policy"]
+						}),
+						children: H.length === 0 ? /* @__PURE__ */ N(o, {
+							illustration: "empty-data",
+							title: "No policies",
+							description: "Policies define what this agent may do autonomously, and what it must alert on.",
+							action: /* @__PURE__ */ N("button", {
+								type: "button",
+								onClick: () => L(!0),
+								className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90",
+								children: "Add policy"
+							})
+						}) : /* @__PURE__ */ N("div", {
+							className: "grid grid-cols-1 gap-3 sm:grid-cols-2",
+							children: H.map((e) => /* @__PURE__ */ N(W, { policy: e }, e.id))
+						})
+					})
+				}), /* @__PURE__ */ N("div", {
+					className: "lg:col-span-1",
+					children: /* @__PURE__ */ N(u, {
+						title: "Run history",
+						description: "Recent agent activity",
+						children: /* @__PURE__ */ N(F, {
+							treatment: "metric",
+							className: "p-5",
+							children: J.length === 0 ? /* @__PURE__ */ P("div", {
+								className: "flex flex-col items-center justify-center gap-2 py-6 text-center",
 								children: [
-									"Triggered ",
-									e.triggerCount,
-									"×",
-									e.lastTriggeredAt ? ` · last ${r(e.lastTriggeredAt)}` : ""
+									/* @__PURE__ */ N(w, {
+										className: "h-8 w-8 text-text-secondary",
+										"aria-hidden": !0
+									}),
+									/* @__PURE__ */ N("p", {
+										className: "text-sm font-medium text-text-primary",
+										children: "No runs yet"
+									}),
+									/* @__PURE__ */ N("p", {
+										className: "text-xs text-text-secondary",
+										children: "Activity appears here once the agent runs or a policy fires."
+									})
 								]
-							})
-						]
-					}, e.id))
-				})
+							}) : /* @__PURE__ */ N(d, { items: J })
+						})
+					})
+				})]
+			}),
+			k && /* @__PURE__ */ N(U, {
+				agentId: B.id,
+				onClose: () => L(!1)
 			})
 		]
 	});
 }
 //#endregion
-export { b as AgentDetailPage };
+export { G as AgentDetailPage };
 
 //# sourceMappingURL=AgentDetailPage.js.map