@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/pages/AgentDetailsPage.js

@@ -0,0 +1,1714 @@
+import { useAgentHeartbeatMutation as e, useAgentPluginsLazyQuery as t, useCheckSessionHealthMutation as n, useDeleteAgentMutation as r, useGetAgentQuery as i, useInstallAgentPluginMutation as a, useRemoveAgentPluginMutation as ee, useSetupAgentGatewayAuthMutation as te, useUpdateAgentMutation as ne } from "../generated/wspace-operations.js";
+import { useVibeControls as o, useVibeNavigate as s } from "../providers/VibeControlsProvider.js";
+import { useVibeControlsStore as c } from "../store/vibeControlsStore.js";
+import { PageHeader as re } from "../components/shared/PageHeader.js";
+import { LoadingState as l } from "../components/shared/LoadingState.js";
+import { ErrorState as ie } from "../components/shared/ErrorState.js";
+import { QuotaExhaustedDialog as ae } from "../components/shared/QuotaExhaustedDialog.js";
+import { isQuotaExhaustedError as oe } from "../utils/quotaUtils.js";
+import { isNative as se, nativeCopyText as ce, nativeToast as le } from "../utils/nativeBridge.js";
+import { EmptyState as ue } from "../components/shared/EmptyState.js";
+import { StatusBadge as u } from "../components/shared/StatusBadge.js";
+import { Card as d } from "../components/shared/Card.js";
+import { EntityTagPicker as f } from "../components/shared/EntityTagPicker.js";
+import "../components/shared/index.js";
+import { VIBE_PERMISSIONS as de } from "../constants/permissions.js";
+import { AgentBackupTab as fe } from "../components/agents/backup/AgentBackupTab.js";
+import { PluginUIPanel as p } from "../components/agents/PluginUIPanel.js";
+import { OpenInBrowserEditorButton as pe } from "../components/agents/OpenInBrowserEditorButton.js";
+import "../components/agents/index.js";
+import { LogViewer as me } from "../components/logs/LogViewer.js";
+import { NotesTabPanel as he } from "../components/notes/NotesTabPanel.js";
+import "../components/notes/index.js";
+import { useQueryBackedTab as ge } from "../hooks/useQueryBackedTab.js";
+import { useCallback as m, useEffect as h, useRef as g, useState as _ } from "react";
+import { useI18n as _e } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { ArrowLeft as v, Check as ve, CheckCircle2 as ye, Clock as be, Copy as xe, Cpu as Se, Database as Ce, Download as we, Eye as Te, EyeOff as Ee, FileText as De, HardDrive as Oe, Info as ke, Key as Ae, Link2 as y, Loader2 as b, Monitor as je, Play as Me, Puzzle as x, RefreshCw as Ne, ScrollText as Pe, Search as Fe, Server as S, Settings as Ie, Shield as Le, Square as Re, Tag as ze, Terminal as C, Trash2 as Be, Unlink as Ve, X as w, Zap as T } from "lucide-react";
+import { useParams as He } from "react-router-dom";
+import { usePermissions as Ue } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AnimatePresence as We, motion as E } from "framer-motion";
+import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
+import { MotionPage as A } from "@burdenoff/fe-libs/shared/motion";
+//#region src/pages/AgentDetailsPage.tsx
+function Ge({ agent: e, onUpdate: t }) {
+	let { t: n } = _e(), [r] = ne(), [i] = te(), [a, ee] = _(!1), [o, s] = _(null), [c, re] = _(!1), [l, ie] = _(null), [ae, oe] = _(!1), [ue, u] = _(!1), [f, de] = _(!1), fe = !!(e.appId && e.appClientId), p = (e, t, r) => {
+		let i = n(e, r), a = i === e ? t : i;
+		return r ? Object.entries(r).reduce((e, [t, n]) => e.replace(`{{${t}}}`, String(n)), a) : a;
+	}, pe = e.metadata?.devportalApplicationId;
+	return /* @__PURE__ */ k(d, { children: [/* @__PURE__ */ O("div", {
+		className: "p-4 border-b border-border-default",
+		children: /* @__PURE__ */ k("h3", {
+			className: "font-semibold text-text-primary flex items-center gap-2",
+			children: [/* @__PURE__ */ O(Le, { className: "w-5 h-5" }), p("agentDetails.gatewayAuthTitle", "Gateway Auth (OAuth2)")]
+		})
+	}), /* @__PURE__ */ k("div", {
+		className: "p-4 space-y-3",
+		children: [o && /* @__PURE__ */ k("div", {
+			className: "flex items-center gap-2 p-3 bg-status-error-bg text-status-error-text rounded-md text-sm",
+			children: [
+				/* @__PURE__ */ O(w, { className: "w-4 h-4 flex-shrink-0" }),
+				/* @__PURE__ */ O("span", {
+					className: "flex-1",
+					children: o
+				}),
+				/* @__PURE__ */ O("button", {
+					onClick: () => s(null),
+					className: "flex-shrink-0 p-0.5 hover:bg-status-error-text/10 rounded",
+					children: /* @__PURE__ */ O(w, { className: "w-3.5 h-3.5" })
+				})
+			]
+		}), fe ? /* @__PURE__ */ k(D, { children: [
+			/* @__PURE__ */ k("div", {
+				className: "flex items-start gap-3",
+				children: [/* @__PURE__ */ O("div", {
+					className: "w-8 h-8 rounded-lg bg-status-success-bg flex items-center justify-center flex-shrink-0 mt-0.5",
+					children: /* @__PURE__ */ O(y, { className: "w-4 h-4 text-status-success-text" })
+				}), /* @__PURE__ */ k("div", {
+					className: "flex-1 min-w-0 space-y-2",
+					children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+						className: "text-sm font-medium text-text-primary",
+						children: p("agentDetails.linkedToOauthApp", "Linked to OAuth App")
+					}), /* @__PURE__ */ O("p", {
+						className: "text-xs text-text-muted",
+						children: p("agentDetails.gatewayAuthLinkedDescription", "This agent can authenticate with the API gateway using Client Credentials.")
+					})] }), /* @__PURE__ */ k("div", {
+						className: "grid grid-cols-1 sm:grid-cols-2 gap-3",
+						children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+							className: "text-xs text-text-secondary mb-1",
+							children: p("agentDetails.clientId", "Client ID")
+						}), /* @__PURE__ */ k("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ O("code", {
+								className: "text-xs font-mono text-text-primary bg-bg-sunken px-2 py-1 rounded truncate block flex-1",
+								children: e.appClientId
+							}), /* @__PURE__ */ O("button", {
+								onClick: async () => {
+									if (e.appClientId) try {
+										await ce(e.appClientId), se() && le("Copied"), u(!0), setTimeout(() => u(!1), 2e3);
+									} catch {}
+								},
+								className: "p-1 rounded hover:bg-bg-sunken transition-colors flex-shrink-0",
+								title: p("agentDetails.copyClientId", "Copy Client ID"),
+								children: ue ? /* @__PURE__ */ O(ve, { className: "w-3.5 h-3.5 text-status-success-text" }) : /* @__PURE__ */ O(xe, { className: "w-3.5 h-3.5 text-text-secondary" })
+							})]
+						})] }), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+							className: "text-xs text-text-secondary mb-1",
+							children: p("agentDetails.appId", "App ID")
+						}), /* @__PURE__ */ O("code", {
+							className: "text-xs font-mono text-text-muted bg-bg-sunken px-2 py-1 rounded truncate block",
+							children: e.appId
+						})] })]
+					})]
+				})]
+			}),
+			l && /* @__PURE__ */ k("div", {
+				className: "p-3 bg-status-warning-bg/20 border border-status-warning-text/20 rounded-lg space-y-2",
+				children: [
+					/* @__PURE__ */ O("p", {
+						className: "text-sm font-medium text-status-warning-text",
+						children: p("agentDetails.clientSecretOneTimeTitle", "Client Secret (one-time display)")
+					}),
+					/* @__PURE__ */ O("p", {
+						className: "text-xs text-text-secondary",
+						children: p("agentDetails.clientSecretOneTimeDescription", "This secret has been automatically sent to the agent. Save it now if you need it — it won't be shown again.")
+					}),
+					/* @__PURE__ */ k("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ O("code", {
+								className: "text-xs font-mono text-text-primary bg-bg-sunken px-2 py-1 rounded flex-1 truncate",
+								children: c ? l : "•".repeat(32)
+							}),
+							/* @__PURE__ */ O("button", {
+								onClick: () => re(!c),
+								className: "p-1 rounded hover:bg-bg-sunken transition-colors flex-shrink-0",
+								children: O(c ? Ee : Te, { className: "w-3.5 h-3.5 text-text-secondary" })
+							}),
+							/* @__PURE__ */ O("button", {
+								onClick: async () => {
+									if (l) try {
+										await ce(l), se() && le("Secret copied"), oe(!0), setTimeout(() => oe(!1), 2e3);
+									} catch {}
+								},
+								className: "p-1 rounded hover:bg-bg-sunken transition-colors flex-shrink-0",
+								children: ae ? /* @__PURE__ */ O(ve, { className: "w-3.5 h-3.5 text-status-success-text" }) : /* @__PURE__ */ O(xe, { className: "w-3.5 h-3.5 text-text-secondary" })
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ k("div", {
+				className: "flex items-center gap-2",
+				children: [pe && /* @__PURE__ */ k("a", {
+					href: `/devportal/apps/${pe}`,
+					className: "flex items-center gap-2 px-3 py-1.5 text-xs text-action-primary-bg bg-action-primary-bg/10 hover:bg-action-primary-bg/20 rounded-md transition-colors",
+					children: [/* @__PURE__ */ O(je, { className: "w-3 h-3" }), p("agentDetails.viewInDeveloperPortal", "View in Developer Portal")]
+				}), /* @__PURE__ */ k("button", {
+					onClick: async () => {
+						if (window.confirm(p("agentDetails.confirmUnlinkOauthApp", "Remove the linked OAuth app from this agent? The app will still exist in auth-svc."))) {
+							de(!0), s(null);
+							try {
+								await r({ variables: {
+									id: e.id,
+									input: {
+										appId: null,
+										appClientId: null
+									}
+								} }), ie(null), t();
+							} catch (e) {
+								s(e instanceof Error ? e.message : p("agentDetails.failedUnlinkApp", "Failed to unlink app"));
+							} finally {
+								de(!1);
+							}
+						}
+					},
+					disabled: f,
+					className: "flex items-center gap-2 px-3 py-1.5 text-xs text-status-error-text hover:bg-status-error-bg rounded-md transition-colors disabled:opacity-50",
+					children: [f ? /* @__PURE__ */ O(b, { className: "w-3 h-3 animate-spin" }) : /* @__PURE__ */ O(Ve, { className: "w-3 h-3" }), p("agentDetails.unlinkApp", "Unlink App")]
+				})]
+			})
+		] }) : /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ k("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ O("div", {
+				className: "w-8 h-8 rounded-lg bg-bg-sunken flex items-center justify-center flex-shrink-0 mt-0.5",
+				children: /* @__PURE__ */ O(Le, { className: "w-4 h-4 text-text-muted" })
+			}), /* @__PURE__ */ k("div", {
+				className: "flex-1",
+				children: [/* @__PURE__ */ O("p", {
+					className: "text-sm font-medium text-text-primary",
+					children: p("agentDetails.noOauthAppLinked", "No OAuth App Linked")
+				}), /* @__PURE__ */ O("p", {
+					className: "text-xs text-text-muted mt-0.5",
+					children: p("agentDetails.gatewayAuthSetupDescription", "Set up gateway auth to allow this agent to communicate with the API gateways using OAuth2 Client Credentials. This creates an OAuth app, registers it in the Developer Portal, and pushes the credentials to the agent.")
+				})]
+			})]
+		}), /* @__PURE__ */ O("button", {
+			onClick: async () => {
+				ee(!0), s(null);
+				try {
+					let { data: n } = await i({ variables: { input: { agentId: e.id } } }), r = n?.setupAgentGatewayAuth;
+					if (!r) throw Error(p("agentDetails.gatewayAuthNoResultError", "No result returned from setupAgentGatewayAuth"));
+					ie(r.clientSecret), r.error && s(r.error), t();
+				} catch (e) {
+					s(e instanceof Error ? e.message : p("agentDetails.failedSetupGatewayAuth", "Failed to set up gateway auth"));
+				} finally {
+					ee(!1);
+				}
+			},
+			disabled: a,
+			className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50",
+			children: a ? /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(b, { className: "w-4 h-4 animate-spin" }), p("agentDetails.settingUp", "Setting up...")] }) : /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(y, { className: "w-4 h-4" }), p("agentDetails.setupGatewayAuth", "Setup Gateway Auth")] })
+		})] })]
+	})] });
+}
+function j() {
+	let { t: te } = _e(), { id: y } = He(), { basePath: Ve } = o(), j = Ve || "", M = s(), { hasPermission: Ke, isLoading: qe } = Ue(), N = m((e, t, n) => {
+		let r = te(e, n), i = r === e ? t : r;
+		return n ? Object.entries(n).reduce((e, [t, n]) => e.replace(`{{${t}}}`, String(n)), i) : i;
+	}, [te]), [Je] = e({ refetchQueries: ["GetAgent"] }), [Ye] = ne({ refetchQueries: ["GetAgent"] }), [Xe] = r(), [Ze] = n({ refetchQueries: ["GetAgent"] }), Qe = c((e) => e.setActiveAgentId);
+	h(() => {
+		y && Qe(y);
+	}, [y, Qe]);
+	let [P, $e] = ge([
+		"overview",
+		"security",
+		"plugins",
+		"sessions",
+		"logs",
+		"vibes",
+		"notes",
+		"backup"
+	], "overview"), [et, F] = _(!1), [tt, I] = _(null), [L, nt] = _(!1), [rt, it] = _(null), [at, ot] = _(!1), st = g(null), ct = g(null), lt = g(null), ut = g(null), dt = g(null), [R, ft] = _(!1), [pt, mt] = _(!1), { data: ht, loading: z, error: gt, refetch: _t } = i({
+		variables: { id: y || "" },
+		skip: !y,
+		fetchPolicy: "cache-and-network"
+	}), B = ht?.vibecontrolsAgent, vt = g(!1);
+	h(() => {
+		B && !vt.current && (vt.current = !0, Ze().catch(() => {}));
+	}, [B, Ze]);
+	let [V, yt] = _([]), [bt, xt] = _([]), [St, Ct] = _(!0), [H, U] = _(null), [wt, W] = _(null), [Tt, Et] = _(!1), Dt = g(!1), [G, K] = _("installed"), [q, Ot] = _(""), [J, kt] = _([]), [At, jt] = _(!1), [Mt, Nt] = _(null), [Y, Pt] = _(null), [Ft] = t(), [It] = a(), [Lt] = ee(), X = m(async () => {
+		if (B?.id) {
+			Ct(!0), W(null);
+			try {
+				let { data: e } = await Ft({ variables: { agentId: B.id } }), t = e?.agentPlugins;
+				if (t) {
+					let e = (t.installed || []).map((e) => ({
+						packageName: e.packageName,
+						pluginName: e.pluginName,
+						version: e.version,
+						installedAt: e.installedAt || "",
+						loaded: e.loaded,
+						description: e.description ?? void 0,
+						tags: e.tags?.filter(Boolean) ?? void 0,
+						isCore: e.isCore,
+						cliCommand: e.cliCommand ?? void 0,
+						apiPrefix: e.apiPrefix ?? void 0,
+						hasUI: e.hasUI,
+						hasCliSetup: e.hasCliSetup,
+						hasServerStart: e.hasServerStart,
+						hasServerStop: e.hasServerStop,
+						hasServerReady: e.hasServerReady,
+						hasProviders: e.hasProviders
+					})), n = (t.available || []).map((e) => ({
+						packageName: e.packageName,
+						name: e.name,
+						description: e.description,
+						version: e.version,
+						tags: [...e.tags],
+						installed: e.installed
+					}));
+					yt(e), xt(n), t.error && W(t.error);
+				}
+			} catch {
+				W("Agent unreachable — unable to fetch plugin list");
+			} finally {
+				Ct(!1);
+			}
+		}
+	}, [B?.id, Ft]);
+	h(() => {
+		B?.id && !Dt.current && (Dt.current = !0, X());
+	}, [B?.id, X]);
+	let Rt = m(async (e) => {
+		if (B?.id) {
+			U(e);
+			try {
+				let { data: t } = await It({ variables: {
+					agentId: B.id,
+					packageName: e
+				} });
+				if (t?.installAgentPlugin?.success) await X();
+				else throw Error(t?.installAgentPlugin?.error || N("agentDetails.installFailed", "Install failed"));
+			} catch (e) {
+				if (oe(e)) {
+					Et(!0);
+					return;
+				}
+				W(e instanceof Error ? e.message : N("agentDetails.pluginInstallFailed", "Failed to install plugin")), setTimeout(() => W(null), 5e3);
+			} finally {
+				U(null);
+			}
+		}
+	}, [
+		B?.id,
+		It,
+		X,
+		N
+	]), zt = m(async (e) => {
+		if (B?.id && window.confirm(N("agentDetails.removePluginConfirm", "Remove plugin {{packageName}}?", { packageName: e }))) {
+			U(e);
+			try {
+				let { data: t } = await Lt({ variables: {
+					agentId: B.id,
+					packageName: e
+				} });
+				if (t?.removeAgentPlugin?.success) await X();
+				else throw Error(t?.removeAgentPlugin?.error || N("agentDetails.removeFailed", "Remove failed"));
+			} catch (e) {
+				W(e instanceof Error ? e.message : N("agentDetails.pluginRemoveFailed", "Failed to remove plugin")), setTimeout(() => W(null), 5e3);
+			} finally {
+				U(null);
+			}
+		}
+	}, [
+		B?.id,
+		Lt,
+		X,
+		N
+	]), Z = B?.sessions || [], Q = B?.vibes || [], Bt = m(async () => {
+		jt(!0), Nt(null);
+		try {
+			let e = await (await fetch(typeof window < "u" && window.__BURDENOFF_GLOBAL_GATEWAY__ || "/global/graphql", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify({ query: "query MyStorePlugins {\n              myEntitlements {\n                id\n                productId\n                licenseKey\n                product {\n                  id\n                  name\n                  slug\n                  icon\n                  description\n                  manifest\n                }\n              }\n            }" })
+			})).json();
+			if (e.errors?.length) throw Error(e.errors[0]?.message ?? "Failed to load store plugins");
+			kt((e.data?.myEntitlements ?? []).filter((e) => {
+				let t = e.product?.manifest;
+				if (!t) return !1;
+				let n = t.itemType?.toLowerCase();
+				return n === "vibemodule" || n === "plugin";
+			}));
+		} catch (e) {
+			Nt(e instanceof Error ? e.message : "Failed to load store plugins");
+		} finally {
+			jt(!1);
+		}
+	}, []);
+	h(() => {
+		G === "store" && J.length === 0 && !At && Bt();
+	}, [
+		G,
+		J.length,
+		At,
+		Bt
+	]);
+	let Vt = m(async (e, t) => {
+		if (B?.id) {
+			Pt(e);
+			try {
+				let n = await (await fetch(typeof window < "u" && window.__BURDENOFF_WSPACE_GATEWAY__ || "/workspaces/graphql", {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					credentials: "include",
+					body: JSON.stringify({
+						query: "mutation InstallStorePlugin($agentId: ID!, $productId: ID!, $licenseKey: String) {\n                installStorePluginOnAgent(agentId: $agentId, productId: $productId, licenseKey: $licenseKey) {\n                  success\n                  error\n                }\n              }",
+						variables: {
+							agentId: B.id,
+							productId: e,
+							licenseKey: t
+						}
+					})
+				})).json();
+				if (n.errors?.length) throw Error(n.errors[0]?.message ?? "Install failed");
+				let r = n.data?.installStorePluginOnAgent;
+				if (!r?.success) throw Error(r?.error ?? "Install failed");
+				await X(), K("installed");
+			} catch (e) {
+				Nt(e instanceof Error ? e.message : "Install failed");
+			} finally {
+				Pt(null);
+			}
+		}
+	}, [B?.id, X]);
+	if (h(() => {
+		if (typeof window > "u" || !B?.id) return;
+		let e = new URLSearchParams(window.location.search), t = e.get("install"), n = e.get("licenseKey");
+		if (t && t !== Y) {
+			K("store"), Vt(t, n);
+			let e = new URL(window.location.href);
+			e.searchParams.delete("install"), e.searchParams.delete("licenseKey"), window.history.replaceState({}, "", e.toString());
+		}
+	}, [
+		B?.id,
+		Vt,
+		Y
+	]), qe) return /* @__PURE__ */ O("div", {
+		className: "flex items-center justify-center min-h-[400px]",
+		children: /* @__PURE__ */ O("p", {
+			className: "text-text-secondary",
+			children: "Loading permissions..."
+		})
+	});
+	if (!Ke(de.AGENT_READ)) return /* @__PURE__ */ O("div", {
+		className: "flex items-center justify-center min-h-[400px]",
+		children: /* @__PURE__ */ k("div", {
+			className: "text-center space-y-2",
+			children: [/* @__PURE__ */ O("h2", {
+				className: "text-lg font-semibold text-foreground",
+				children: "Access Denied"
+			}), /* @__PURE__ */ O("p", {
+				className: "text-sm text-text-secondary",
+				children: "You don't have permission to access this page."
+			})]
+		})
+	});
+	let $ = () => {
+		M("/agents");
+	}, Ht = async () => {
+		if (B?.id) try {
+			await Je({ variables: { id: B.id } });
+		} catch (e) {
+			console.error("Failed to start agent:", e);
+		}
+	}, Ut = async () => {
+		if (B?.id) try {
+			await Ye({ variables: {
+				id: B.id,
+				input: { metadata: { status: "inactive" } }
+			} });
+		} catch (e) {
+			console.error("Failed to stop agent:", e);
+		}
+	}, Wt = () => {
+		I(null), F(!0);
+	}, Gt = async () => {
+		if (!B?.id) return;
+		let e = st.current?.value?.trim(), t = ct.current?.value?.trim(), n = lt.current?.value?.trim(), r = ut.current?.value?.trim(), i = dt.current?.value?.trim();
+		if (!e) {
+			I(N("agentDetails.agentNameRequired", "Agent name is required"));
+			return;
+		}
+		let a;
+		if (i) try {
+			a = JSON.parse(i);
+		} catch {
+			I(N("agentDetails.metadataJsonRequired", "Metadata must be valid JSON"));
+			return;
+		}
+		nt(!0), I(null);
+		try {
+			await Ye({ variables: {
+				id: B.id,
+				input: {
+					name: e,
+					...t === void 0 ? {} : { tunnelUrl: t || null },
+					...n === void 0 ? {} : { agentApiKey: n || null },
+					aiContext: r || null,
+					metadata: a
+				}
+			} }), F(!1), it(N("agentDetails.configurationUpdated", "Agent configuration updated successfully")), setTimeout(() => it(null), 3e3);
+		} catch (e) {
+			I(e instanceof Error ? e.message : N("agentDetails.configurationUpdateFailed", "Failed to update agent configuration"));
+		} finally {
+			nt(!1);
+		}
+	}, Kt = async () => {
+		if (B?.agentApiKey) try {
+			await ce(B.agentApiKey), se() && le("API key copied"), mt(!0), setTimeout(() => mt(!1), 2e3);
+		} catch {
+			console.error("Failed to copy API key");
+		}
+	}, qt = async () => {
+		if (B?.id && window.confirm(N("agentDetails.removeAgentConfirm", "Are you sure you want to remove agent \"{{name}}\"?", { name: B.name }))) try {
+			await Xe({ variables: { id: B.id } }), $();
+		} catch (e) {
+			console.error("Failed to remove agent:", e);
+		}
+	}, Jt = (e) => {
+		M(`/sessions/${e}`);
+	}, Yt = (e) => {
+		M(`/vibes/${e}`);
+	}, Xt = (e) => {
+		if (!e) return N("health.never", "Never");
+		let t = Date.now() - new Date(e).getTime();
+		return t < 6e4 ? N("health.justNow", "Just now") : t < 36e5 ? N("agentDetails.minutesAgo", "{{count}}m ago", { count: Math.floor(t / 6e4) }) : t < 864e5 ? N("agentDetails.hoursAgo", "{{count}}h ago", { count: Math.floor(t / 36e5) }) : new Date(e).toLocaleDateString();
+	};
+	if (z && !B) return /* @__PURE__ */ k(A, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: [/* @__PURE__ */ k("button", {
+			onClick: $,
+			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
+			children: [/* @__PURE__ */ O(v, { className: "w-4 h-4" }), N("agentDetails.backToAgents", "Back to Agents")]
+		}), /* @__PURE__ */ O(l, { message: N("agentDetails.loadingDetails", "Loading agent details...") })]
+	});
+	if (gt && !B) return /* @__PURE__ */ k(A, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: [/* @__PURE__ */ k("button", {
+			onClick: $,
+			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
+			children: [/* @__PURE__ */ O(v, { className: "w-4 h-4" }), N("agentDetails.backToAgents", "Back to Agents")]
+		}), /* @__PURE__ */ O(ie, {
+			title: N("agentDetails.failedLoad", "Failed to load agent"),
+			message: gt.message,
+			onRetry: () => _t()
+		})]
+	});
+	if (!B) return /* @__PURE__ */ k(A, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: [/* @__PURE__ */ k("button", {
+			onClick: $,
+			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
+			children: [/* @__PURE__ */ O(v, { className: "w-4 h-4" }), N("agentDetails.backToAgents", "Back to Agents")]
+		}), /* @__PURE__ */ O(ue, {
+			icon: /* @__PURE__ */ O(S, { className: "w-8 h-8 text-text-secondary" }),
+			title: N("agentDetails.notFound", "Agent not found"),
+			description: `${N("agentDetails.notFoundDescriptionPrefix", "No agent with ID")} "${y}" ${N("agentDetails.notFoundDescriptionSuffix", "exists")}`,
+			action: /* @__PURE__ */ O("button", {
+				onClick: $,
+				className: "px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
+				children: N("agentDetails.backToAgents", "Back to Agents")
+			})
+		})]
+	});
+	let Zt = [
+		{
+			id: "overview",
+			label: N("nav.overview", "Overview"),
+			icon: S
+		},
+		{
+			id: "security",
+			label: N("agentDetails.security", "Security"),
+			icon: Le
+		},
+		{
+			id: "plugins",
+			label: N("agentDetails.plugins", "Plugins"),
+			icon: x,
+			badge: `${V.length}`
+		},
+		{
+			id: "sessions",
+			label: N("nav.sessions", "Sessions"),
+			icon: C,
+			badge: `${Z.length}`
+		},
+		{
+			id: "logs",
+			label: N("nav.logs", "Logs"),
+			icon: Pe
+		},
+		{
+			id: "vibes",
+			label: N("nav.vibes", "Vibes"),
+			icon: T,
+			badge: `${Q.length}`
+		},
+		{
+			id: "notes",
+			label: N("vibeDetails.notes", "Notes"),
+			icon: De
+		},
+		{
+			id: "backup",
+			label: N("agentDetails.backup", "Backup"),
+			icon: Ce
+		}
+	], Qt = Z.filter((e) => e.status === "RUNNING").length;
+	return B?.tunnelUrl, /* @__PURE__ */ k(A, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: [
+			rt && /* @__PURE__ */ O("div", {
+				className: "fixed top-4 left-4 right-4 sm:left-auto z-50 bg-status-success-bg text-status-success-text px-4 py-3 rounded-md shadow-lg",
+				children: rt
+			}),
+			/* @__PURE__ */ k("button", {
+				onClick: $,
+				className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
+				children: [/* @__PURE__ */ O(v, { className: "w-4 h-4" }), N("agentDetails.backToAgents", "Back to Agents")]
+			}),
+			/* @__PURE__ */ O(re, {
+				title: B.name,
+				description: B.hostname || N("agentDetails.noHostnameConfigured", "No hostname configured"),
+				breadcrumb: [{
+					label: N("nav.agents", "Agents"),
+					path: j ? `${j}/agents` : "/agents"
+				}, { label: B.name }],
+				actions: /* @__PURE__ */ k("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: [
+						/* @__PURE__ */ O("button", {
+							onClick: () => _t(),
+							disabled: z,
+							className: "flex items-center gap-2 px-3 py-2 bg-bg-sunken text-text-primary rounded-md hover:bg-bg-sunken/80 transition-colors disabled:opacity-50",
+							title: N("common.refresh", "Refresh"),
+							children: /* @__PURE__ */ O(Ne, { className: `w-4 h-4 ${z ? "animate-spin" : ""}` })
+						}),
+						B.isActive ? /* @__PURE__ */ k("button", {
+							onClick: Ut,
+							className: "flex items-center gap-2 px-3 py-2 bg-bg-sunken text-text-primary rounded-md hover:bg-bg-sunken/80 transition-colors",
+							children: [/* @__PURE__ */ O(Re, { className: "w-4 h-4" }), N("sessions.stop", "Stop")]
+						}) : /* @__PURE__ */ k("button", {
+							onClick: Ht,
+							className: "flex items-center gap-2 px-3 py-2 bg-status-success-bg text-status-success-text rounded-md hover:opacity-80 transition-colors",
+							children: [/* @__PURE__ */ O(Me, { className: "w-4 h-4" }), N("agentDetails.start", "Start")]
+						}),
+						/* @__PURE__ */ O(pe, {
+							tunnelUrl: B.tunnelUrl || null,
+							agentApiKey: B.agentApiKey || null
+						}),
+						/* @__PURE__ */ k("button", {
+							onClick: Wt,
+							className: "flex items-center gap-2 px-3 py-2 bg-bg-sunken text-text-primary rounded-md hover:bg-bg-sunken/80 transition-colors",
+							children: [/* @__PURE__ */ O(Ie, { className: "w-4 h-4" }), N("agentDetails.configure", "Configure")]
+						}),
+						/* @__PURE__ */ k("button", {
+							onClick: qt,
+							className: "flex items-center gap-2 px-3 py-2 bg-status-error-bg text-status-error-text rounded-md hover:opacity-80 transition-colors",
+							children: [/* @__PURE__ */ O(Be, { className: "w-4 h-4" }), N("sessions.remove", "Remove")]
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ k("div", {
+				className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4",
+				children: [
+					/* @__PURE__ */ O(d, {
+						className: "p-4",
+						children: /* @__PURE__ */ k("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ O("div", {
+								className: "w-10 h-10 rounded-lg bg-bg-sunken flex items-center justify-center",
+								children: /* @__PURE__ */ O(S, { className: "w-5 h-5 text-text-secondary" })
+							}), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+								className: "text-sm text-text-secondary",
+								children: N("sessions.filterStatus", "Status")
+							}), /* @__PURE__ */ O(u, {
+								status: B.isActive ? "ACTIVE" : "OFFLINE",
+								size: "md"
+							})] })]
+						})
+					}),
+					/* @__PURE__ */ O(d, {
+						className: "p-4",
+						children: /* @__PURE__ */ k("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ O("div", {
+								className: "w-10 h-10 rounded-lg bg-bg-sunken flex items-center justify-center",
+								children: /* @__PURE__ */ O(Se, { className: "w-5 h-5 text-text-secondary" })
+							}), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+								className: "text-sm text-text-secondary",
+								children: N("analytics.platform", "Platform")
+							}), /* @__PURE__ */ k("p", {
+								className: "font-semibold text-text-primary",
+								children: [
+									B.platform,
+									"/",
+									B.architecture
+								]
+							})] })]
+						})
+					}),
+					/* @__PURE__ */ O(d, {
+						className: "p-4",
+						children: /* @__PURE__ */ k("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ O("div", {
+								className: "w-10 h-10 rounded-lg bg-bg-sunken flex items-center justify-center",
+								children: /* @__PURE__ */ O(Oe, { className: "w-5 h-5 text-text-secondary" })
+							}), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+								className: "text-sm text-text-secondary",
+								children: N("agentDetails.version", "Version")
+							}), /* @__PURE__ */ k("p", {
+								className: "font-semibold text-text-primary",
+								children: ["v", B.version]
+							})] })]
+						})
+					}),
+					/* @__PURE__ */ O(d, {
+						className: "p-4",
+						children: /* @__PURE__ */ k("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ O("div", {
+								className: "w-10 h-10 rounded-lg bg-bg-sunken flex items-center justify-center",
+								children: /* @__PURE__ */ O(C, { className: "w-5 h-5 text-text-secondary" })
+							}), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+								className: "text-sm text-text-secondary",
+								children: N("nav.sessions", "Sessions")
+							}), /* @__PURE__ */ k("p", {
+								className: "font-semibold text-text-primary",
+								children: [
+									Qt,
+									" ",
+									N("health.active", "active")
+								]
+							})] })]
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ O("div", {
+				className: "border-b border-border-default",
+				children: /* @__PURE__ */ O("nav", {
+					className: "flex gap-1 -mb-px overflow-x-auto pb-1",
+					"aria-label": N("agentDetails.tabsAriaLabel", "Agent tabs"),
+					children: Zt.map((e) => {
+						let t = e.icon, n = P === e.id;
+						return /* @__PURE__ */ k("button", {
+							onClick: () => $e(e.id),
+							className: `flex shrink-0 items-center gap-1.5 px-3 py-2.5 text-xs sm:gap-2 sm:px-4 sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${n ? "border-action-primary-bg text-action-primary-bg" : "border-transparent text-text-secondary hover:text-text-primary hover:border-border-default"}`,
+							"aria-selected": n,
+							role: "tab",
+							children: [
+								/* @__PURE__ */ O(t, { className: "w-4 h-4" }),
+								e.label,
+								e.badge && /* @__PURE__ */ O("span", {
+									className: `hidden rounded-full px-1.5 py-0.5 text-[10px] sm:inline-flex sm:text-xs ${n ? "bg-action-primary-bg/10 text-action-primary-bg" : "bg-bg-sunken text-text-muted"}`,
+									children: e.badge
+								})
+							]
+						}, e.id);
+					})
+				})
+			}),
+			/* @__PURE__ */ k(We, {
+				mode: "wait",
+				children: [
+					P === "overview" && /* @__PURE__ */ k(E.div, {
+						initial: {
+							opacity: 0,
+							y: 8
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							y: -8
+						},
+						transition: { duration: .2 },
+						className: "space-y-6",
+						children: [
+							/* @__PURE__ */ k(d, { children: [/* @__PURE__ */ O("div", {
+								className: "p-4 border-b border-border-default",
+								children: /* @__PURE__ */ k("h3", {
+									className: "font-semibold text-text-primary flex items-center gap-2",
+									children: [/* @__PURE__ */ O(ye, { className: "w-5 h-5" }), N("agentDetails.capabilities", "Capabilities")]
+								})
+							}), /* @__PURE__ */ O("div", {
+								className: "p-4",
+								children: /* @__PURE__ */ O("div", {
+									className: "flex flex-wrap gap-2",
+									children: B.capabilities && typeof B.capabilities == "object" && (Array.isArray(B.capabilities) ? B.capabilities.length > 0 : Object.keys(B.capabilities).length > 0) ? (Array.isArray(B.capabilities) ? B.capabilities : (() => {
+										let e = B.capabilities, t = Object.keys(e);
+										return t.length > 0 && t.every((e) => /^\d+$/.test(e)) ? Object.values(e) : t;
+									})()).map((e) => /* @__PURE__ */ O("span", {
+										className: "px-3 py-1 bg-bg-sunken text-text-primary text-sm rounded-full",
+										children: e
+									}, e)) : /* @__PURE__ */ O("p", {
+										className: "text-text-secondary",
+										children: N("agentDetails.noCapabilitiesConfigured", "No capabilities configured")
+									})
+								})
+							})] }),
+							/* @__PURE__ */ k(d, { children: [/* @__PURE__ */ O("div", {
+								className: "p-4 border-b border-border-default",
+								children: /* @__PURE__ */ k("h3", {
+									className: "font-semibold text-text-primary flex items-center gap-2",
+									children: [/* @__PURE__ */ O(ze, { className: "w-5 h-5" }), "Tags"]
+								})
+							}), /* @__PURE__ */ O("div", {
+								className: "p-4",
+								children: /* @__PURE__ */ O(f, {
+									entityType: "VIBECONTROLS_AGENT",
+									entityId: B.id
+								})
+							})] }),
+							B.tunnelUrl && /* @__PURE__ */ k(d, { children: [/* @__PURE__ */ O("div", {
+								className: "p-4 border-b border-border-default",
+								children: /* @__PURE__ */ k("h3", {
+									className: "font-semibold text-text-primary flex items-center gap-2",
+									children: [/* @__PURE__ */ O(T, { className: "w-5 h-5" }), N("health.tunnel", "Tunnel")]
+								})
+							}), /* @__PURE__ */ O("div", {
+								className: "p-4",
+								children: /* @__PURE__ */ k("div", {
+									className: "flex flex-col sm:flex-row sm:items-center gap-4",
+									children: [/* @__PURE__ */ k("div", {
+										className: "flex-1 min-w-0",
+										children: [/* @__PURE__ */ O("p", {
+											className: "text-sm text-text-secondary mb-1",
+											children: N("agentDetails.tunnelUrl", "Tunnel URL")
+										}), /* @__PURE__ */ O("a", {
+											href: B.tunnelUrl,
+											target: "_blank",
+											rel: "noopener noreferrer",
+											className: "text-action-primary-text hover:underline break-all",
+											children: B.tunnelUrl
+										})]
+									}), B.tunnelStatus && /* @__PURE__ */ k("div", {
+										className: "flex-shrink-0",
+										children: [/* @__PURE__ */ O("p", {
+											className: "text-sm text-text-secondary mb-1",
+											children: N("sessions.filterStatus", "Status")
+										}), /* @__PURE__ */ O("span", {
+											className: `px-2 py-1 text-xs rounded-full ${B.tunnelStatus === "CONNECTED" || B.tunnelStatus === "ACTIVE" ? "bg-status-success-bg text-status-success-text" : "bg-bg-sunken text-text-secondary"}`,
+											children: B.tunnelStatus
+										})]
+									})]
+								})
+							})] }),
+							/* @__PURE__ */ k(d, { children: [/* @__PURE__ */ O("div", {
+								className: "p-4 border-b border-border-default",
+								children: /* @__PURE__ */ k("h3", {
+									className: "font-semibold text-text-primary flex items-center gap-2",
+									children: [/* @__PURE__ */ O(Ie, { className: "w-5 h-5" }), N("agentDetails.configuration", "Configuration")]
+								})
+							}), /* @__PURE__ */ k("div", {
+								className: "p-4 space-y-4",
+								children: [/* @__PURE__ */ k("div", {
+									className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+									children: [
+										/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+											className: "text-sm text-text-secondary",
+											children: N("analytics.platform", "Platform")
+										}), /* @__PURE__ */ O("p", {
+											className: "font-medium text-text-primary",
+											children: B.platform
+										})] }),
+										/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+											className: "text-sm text-text-secondary",
+											children: N("analytics.architecture", "Architecture")
+										}), /* @__PURE__ */ O("p", {
+											className: "font-medium text-text-primary",
+											children: B.architecture
+										})] }),
+										/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+											className: "text-sm text-text-secondary",
+											children: N("agentDetails.version", "Version")
+										}), /* @__PURE__ */ O("p", {
+											className: "font-medium text-text-primary",
+											children: B.version
+										})] })
+									]
+								}), B.aiContext && /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+									className: "text-sm text-text-secondary mb-1",
+									children: "AI Context"
+								}), /* @__PURE__ */ O("pre", {
+									className: "text-sm text-text-primary bg-bg-sunken border border-border-default rounded-md p-3 whitespace-pre-wrap font-sans",
+									children: B.aiContext
+								})] })]
+							})] }),
+							/* @__PURE__ */ k(d, { children: [/* @__PURE__ */ O("div", {
+								className: "p-4 border-b border-border-default",
+								children: /* @__PURE__ */ k("h3", {
+									className: "font-semibold text-text-primary flex items-center gap-2",
+									children: [/* @__PURE__ */ O(be, { className: "w-5 h-5" }), N("vibeDetails.timeline", "Timeline")]
+								})
+							}), /* @__PURE__ */ O("div", {
+								className: "p-4",
+								children: /* @__PURE__ */ k("div", {
+									className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm",
+									children: [
+										/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+											className: "text-text-secondary",
+											children: N("health.lastHeartbeat", "Last Heartbeat")
+										}), /* @__PURE__ */ O("p", {
+											className: "font-medium text-text-primary",
+											children: Xt(B.lastHeartbeat)
+										})] }),
+										/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+											className: "text-text-secondary",
+											children: N("vibeDetails.created", "Created")
+										}), /* @__PURE__ */ O("p", {
+											className: "font-medium text-text-primary",
+											children: Xt(B.createdAt)
+										})] }),
+										/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+											className: "text-text-secondary",
+											children: N("vibeDetails.updated", "Updated")
+										}), /* @__PURE__ */ O("p", {
+											className: "font-medium text-text-primary",
+											children: Xt(B.updatedAt)
+										})] })
+									]
+								})
+							})] })
+						]
+					}, "overview"),
+					P === "security" && /* @__PURE__ */ k(E.div, {
+						initial: {
+							opacity: 0,
+							y: 8
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							y: -8
+						},
+						transition: { duration: .2 },
+						className: "space-y-6",
+						children: [
+							B.tunnelUrl && B.agentApiKey && /* @__PURE__ */ k(d, { children: [/* @__PURE__ */ O("div", {
+								className: "p-4 border-b border-border-default",
+								children: /* @__PURE__ */ k("h3", {
+									className: "font-semibold text-text-primary flex items-center gap-2",
+									children: [/* @__PURE__ */ O(ke, { className: "w-5 h-5" }), N("agentDetails.apiAuthentication", "API Authentication")]
+								})
+							}), /* @__PURE__ */ k("div", {
+								className: "p-4 space-y-3",
+								children: [
+									/* @__PURE__ */ O("p", {
+										className: "text-sm text-text-secondary",
+										children: N("agentDetails.apiAuthenticationDescription", "All requests to the agent (except health checks) require authentication. You can pass the API key in two ways:")
+									}),
+									/* @__PURE__ */ k("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+											className: "text-xs font-medium text-text-primary mb-1",
+											children: N("agentDetails.authHeaderRecommended", "Header (recommended)")
+										}), /* @__PURE__ */ k("code", {
+											className: "block text-xs font-mono bg-bg-sunken px-3 py-2 rounded-md text-text-primary overflow-x-auto",
+											children: [
+												"x-agent-api-key: ",
+												B.agentApiKey.slice(0, 12),
+												"..."
+											]
+										})] }), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+											className: "text-xs font-medium text-text-primary mb-1",
+											children: N("agentDetails.authQueryParameter", "URL query parameter")
+										}), /* @__PURE__ */ k("code", {
+											className: "block text-xs font-mono bg-bg-sunken px-3 py-2 rounded-md text-text-primary overflow-x-auto break-all",
+											children: [
+												B.tunnelUrl,
+												"/api/health?apiKey=",
+												B.agentApiKey.slice(0, 12),
+												"..."
+											]
+										})] })]
+									}),
+									/* @__PURE__ */ k("p", {
+										className: "text-xs text-text-muted",
+										children: [
+											N("agentDetails.authExemptPrefix", "The"),
+											" ",
+											/* @__PURE__ */ O("code", {
+												className: "font-mono",
+												children: "/health"
+											}),
+											" ",
+											N("agentDetails.authExemptAnd", "and"),
+											" ",
+											/* @__PURE__ */ O("code", {
+												className: "font-mono",
+												children: "/api/agent/identity"
+											}),
+											" ",
+											N("agentDetails.authExemptSuffix", "endpoints are exempt from authentication. The key changes on each agent restart unless a static key is configured.")
+										]
+									})
+								]
+							})] }),
+							/* @__PURE__ */ k(d, { children: [/* @__PURE__ */ O("div", {
+								className: "p-4 border-b border-border-default",
+								children: /* @__PURE__ */ k("h3", {
+									className: "font-semibold text-text-primary flex items-center gap-2",
+									children: [/* @__PURE__ */ O(Ae, { className: "w-5 h-5" }), N("agentDetails.agentApiKey", "Agent API Key")]
+								})
+							}), /* @__PURE__ */ k("div", {
+								className: "p-4",
+								children: [B.agentApiKey ? /* @__PURE__ */ k("div", {
+									className: "flex items-center gap-3",
+									children: [
+										/* @__PURE__ */ O("div", {
+											className: "flex-1 min-w-0",
+											children: /* @__PURE__ */ O("code", {
+												className: "text-sm font-mono text-text-primary bg-bg-sunken px-3 py-2 rounded-md block truncate",
+												children: R ? B.agentApiKey : "•".repeat(Math.min(B.agentApiKey.length, 32))
+											})
+										}),
+										/* @__PURE__ */ O("button", {
+											onClick: () => ft(!R),
+											className: "p-2 rounded hover:bg-bg-sunken transition-colors flex-shrink-0",
+											title: R ? N("agentDetails.hideApiKey", "Hide API key") : N("agentDetails.showApiKey", "Show API key"),
+											children: O(R ? Ee : Te, { className: "w-4 h-4 text-text-secondary" })
+										}),
+										/* @__PURE__ */ O("button", {
+											onClick: Kt,
+											className: "p-2 rounded hover:bg-bg-sunken transition-colors flex-shrink-0",
+											title: N("agentDetails.copyApiKey", "Copy API key"),
+											children: pt ? /* @__PURE__ */ O(ve, { className: "w-4 h-4 text-status-success-text" }) : /* @__PURE__ */ O(xe, { className: "w-4 h-4 text-text-secondary" })
+										})
+									]
+								}) : /* @__PURE__ */ O("p", {
+									className: "text-sm text-text-secondary",
+									children: "No API key configured. Set one via the Configure button or agent CLI."
+								}), /* @__PURE__ */ O("p", {
+									className: "mt-2 text-xs text-text-muted",
+									children: "This key authenticates requests sent to the agent. It typically changes on each agent restart."
+								})]
+							})] }),
+							/* @__PURE__ */ O(Ge, {
+								agent: B,
+								onUpdate: () => _t()
+							})
+						]
+					}, "security"),
+					P === "plugins" && (() => {
+						let e = q.toLowerCase(), t = V.filter((t) => !e || t.pluginName.toLowerCase().includes(e) || t.packageName.toLowerCase().includes(e) || t.description?.toLowerCase().includes(e) || t.tags?.some((t) => t.toLowerCase().includes(e))), n = bt.filter((t) => !t.installed && (!e || t.name.toLowerCase().includes(e) || t.packageName.toLowerCase().includes(e) || t.description.toLowerCase().includes(e))), r = V.filter((e) => e.hasUI), i = r.filter((t) => !e || t.pluginName.toLowerCase().includes(e) || t.packageName.toLowerCase().includes(e)), a = [
+							{
+								id: "installed",
+								label: "Installed",
+								count: t.length,
+								icon: x
+							},
+							{
+								id: "available",
+								label: "Available",
+								count: n.length,
+								icon: we
+							},
+							{
+								id: "store",
+								label: "Store",
+								count: J.length,
+								icon: we
+							},
+							{
+								id: "ui-plugins",
+								label: "UI Plugins",
+								count: i.length,
+								icon: je
+							}
+						];
+						return /* @__PURE__ */ O(E.div, {
+							initial: {
+								opacity: 0,
+								y: 8
+							},
+							animate: {
+								opacity: 1,
+								y: 0
+							},
+							exit: {
+								opacity: 0,
+								y: -8
+							},
+							transition: { duration: .2 },
+							className: "space-y-6",
+							children: /* @__PURE__ */ k(d, { children: [/* @__PURE__ */ k("div", {
+								className: "p-4 border-b border-border-default space-y-3",
+								children: [
+									/* @__PURE__ */ k("div", {
+										className: "flex items-center justify-between",
+										children: [/* @__PURE__ */ k("h3", {
+											className: "font-semibold text-text-primary flex items-center gap-2",
+											children: [
+												/* @__PURE__ */ O(x, { className: "w-5 h-5" }),
+												"Plugins",
+												V.length > 0 && /* @__PURE__ */ k("span", {
+													className: "text-sm font-normal text-text-secondary",
+													children: [
+														"(",
+														V.filter((e) => e.isCore).length,
+														" core,",
+														" ",
+														V.filter((e) => !e.isCore).length,
+														" external)"
+													]
+												})
+											]
+										}), /* @__PURE__ */ O("button", {
+											onClick: X,
+											disabled: St,
+											className: "p-1.5 text-text-secondary hover:bg-bg-sunken rounded transition-colors disabled:opacity-50",
+											title: N("agentDetails.refreshPlugins", "Refresh plugins"),
+											children: /* @__PURE__ */ O(Ne, { className: `w-4 h-4 ${St ? "animate-spin" : ""}` })
+										})]
+									}),
+									/* @__PURE__ */ k("div", {
+										className: "relative",
+										children: [
+											/* @__PURE__ */ O(Fe, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" }),
+											/* @__PURE__ */ O("input", {
+												type: "text",
+												value: q,
+												onChange: (e) => Ot(e.target.value),
+												placeholder: N("agentDetails.searchPluginsPlaceholder", "Search plugins by name, package, description, or tag..."),
+												className: "w-full pl-9 pr-8 py-2 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-action-primary-bg focus:border-action-primary-bg"
+											}),
+											q && /* @__PURE__ */ O("button", {
+												onClick: () => Ot(""),
+												className: "absolute right-2 top-1/2 -translate-y-1/2 p-0.5 text-text-muted hover:text-text-secondary rounded",
+												children: /* @__PURE__ */ O(w, { className: "w-3.5 h-3.5" })
+											})
+										]
+									}),
+									/* @__PURE__ */ O("div", {
+										className: "flex gap-1 border-b border-border-default -mx-4 overflow-x-auto px-4 pb-1",
+										children: a.map((e) => {
+											let t = G === e.id, n = e.icon;
+											return /* @__PURE__ */ k("button", {
+												onClick: () => K(e.id),
+												className: `flex shrink-0 items-center gap-1.5 px-3 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${t ? "border-action-primary-bg text-action-primary-text" : "border-transparent text-text-secondary hover:text-text-primary hover:border-border-default"}`,
+												children: [
+													/* @__PURE__ */ O(n, { className: "w-3.5 h-3.5" }),
+													e.label,
+													/* @__PURE__ */ O("span", {
+														className: `text-xs px-1.5 py-0.5 rounded-full ${t ? "bg-action-primary-bg/15 text-action-primary-bg" : "bg-bg-secondary text-text-muted"}`,
+														children: e.count
+													})
+												]
+											}, e.id);
+										})
+									})
+								]
+							}), /* @__PURE__ */ k("div", {
+								className: "p-4 space-y-4",
+								children: [
+									wt && /* @__PURE__ */ k("div", {
+										className: "flex items-center gap-2 p-3 bg-status-error-bg text-status-error-text rounded-md text-sm",
+										children: [
+											/* @__PURE__ */ O(w, { className: "w-4 h-4 flex-shrink-0" }),
+											/* @__PURE__ */ O("span", {
+												className: "flex-1",
+												children: wt
+											}),
+											/* @__PURE__ */ O("button", {
+												onClick: () => W(null),
+												className: "flex-shrink-0 p-0.5 hover:bg-status-error-text/10 rounded",
+												children: /* @__PURE__ */ O(w, { className: "w-3.5 h-3.5" })
+											})
+										]
+									}),
+									!B?.isActive && /* @__PURE__ */ k("p", {
+										className: "text-sm text-text-muted flex items-center gap-1.5",
+										children: [/* @__PURE__ */ O(ke, { className: "w-4 h-4 flex-shrink-0" }), "Agent is offline — showing known plugin catalog. Live data will load when the agent is reachable."]
+									}),
+									G === "installed" && /* @__PURE__ */ O(D, { children: t.length > 0 ? /* @__PURE__ */ O("div", {
+										className: "space-y-2",
+										children: t.map((e) => /* @__PURE__ */ k("div", {
+											className: "flex flex-col sm:flex-row sm:items-center justify-between gap-2 p-3 bg-bg-sunken rounded-lg",
+											children: [/* @__PURE__ */ k("div", {
+												className: "min-w-0",
+												children: [
+													/* @__PURE__ */ k("p", {
+														className: "text-sm font-medium text-text-primary flex items-center gap-1.5 flex-wrap",
+														children: [
+															e.pluginName,
+															/* @__PURE__ */ O("span", {
+																className: "text-xs text-text-muted font-normal",
+																children: e.version === "latest" ? e.version : `v${e.version}`
+															}),
+															e.isCore && /* @__PURE__ */ O("span", {
+																className: "inline-flex items-center px-1.5 py-0.5 text-xs bg-action-primary-bg/10 text-action-primary-bg rounded border border-action-primary-bg/20",
+																children: "core"
+															}),
+															e.loaded && /* @__PURE__ */ O("span", {
+																className: "inline-flex items-center px-1.5 py-0.5 text-xs bg-status-success-bg text-status-success-text rounded",
+																children: "loaded"
+															}),
+															e.hasProviders && /* @__PURE__ */ O("span", {
+																className: "inline-flex items-center px-1.5 py-0.5 text-xs bg-status-warning-bg-subtle text-status-warning-text rounded",
+																children: "provider"
+															}),
+															e.hasUI && /* @__PURE__ */ O("span", {
+																className: "inline-flex items-center px-1.5 py-0.5 text-xs bg-accent-purple-subtle text-accent-purple rounded",
+																children: "ui"
+															})
+														]
+													}),
+													e.description && /* @__PURE__ */ O("p", {
+														className: "text-xs text-text-secondary mt-0.5",
+														children: e.description
+													}),
+													/* @__PURE__ */ k("div", {
+														className: "flex items-center gap-2 mt-0.5 flex-wrap",
+														children: [
+															!e.isCore && /* @__PURE__ */ O("span", {
+																className: "text-xs text-text-muted font-mono",
+																children: e.packageName
+															}),
+															e.cliCommand && /* @__PURE__ */ k("span", {
+																className: "text-xs text-text-muted",
+																children: [
+																	"cli:",
+																	" ",
+																	/* @__PURE__ */ k("code", {
+																		className: "text-xs font-mono",
+																		children: ["vibe ", e.cliCommand]
+																	})
+																]
+															}),
+															e.apiPrefix && /* @__PURE__ */ k("span", {
+																className: "text-xs text-text-muted",
+																children: [
+																	"api:",
+																	" ",
+																	/* @__PURE__ */ O("code", {
+																		className: "text-xs font-mono",
+																		children: e.apiPrefix
+																	})
+																]
+															})
+														]
+													}),
+													e.tags && e.tags.length > 0 && /* @__PURE__ */ O("div", {
+														className: "flex gap-1 mt-1 flex-wrap",
+														children: e.tags.map((e) => /* @__PURE__ */ O("span", {
+															className: "inline-flex px-1.5 py-0.5 text-[10px] bg-bg-secondary text-text-muted rounded",
+															children: e
+														}, e))
+													})
+												]
+											}), /* @__PURE__ */ k("div", {
+												className: "flex items-center gap-2 flex-shrink-0 sm:ml-3",
+												children: [e.hasUI && /* @__PURE__ */ k("button", {
+													onClick: () => K("ui-plugins"),
+													className: "flex items-center gap-1.5 px-2.5 py-1.5 text-xs text-action-primary-bg bg-action-primary-bg/10 rounded-md hover:bg-action-primary-bg/20 transition-colors border border-action-primary-bg/20",
+													title: `Open ${e.pluginName} UI`,
+													children: [/* @__PURE__ */ O(je, { className: "w-3 h-3" }), "Open UI"]
+												}), !e.isCore && /* @__PURE__ */ k("button", {
+													onClick: () => zt(e.packageName),
+													disabled: H === e.packageName,
+													className: "flex items-center gap-1.5 px-2.5 py-1.5 text-xs text-status-error-text bg-status-error-bg rounded-md hover:bg-status-error-bg/80 transition-colors disabled:opacity-50",
+													children: [H === e.packageName ? /* @__PURE__ */ O(b, { className: "w-3 h-3 animate-spin" }) : /* @__PURE__ */ O(Be, { className: "w-3 h-3" }), "Remove"]
+												})]
+											})]
+										}, e.packageName))
+									}) : /* @__PURE__ */ O("p", {
+										className: "text-sm text-text-muted",
+										children: q ? "No installed plugins match your search." : "No plugin data available. Check agent connectivity or refresh."
+									}) }),
+									G === "available" && /* @__PURE__ */ O(D, { children: n.length > 0 ? /* @__PURE__ */ O("div", {
+										className: "space-y-2",
+										children: n.map((e) => /* @__PURE__ */ k("div", {
+											className: "flex flex-col sm:flex-row sm:items-center justify-between gap-2 p-3 bg-bg-sunken rounded-lg",
+											children: [/* @__PURE__ */ k("div", {
+												className: "min-w-0",
+												children: [
+													/* @__PURE__ */ O("p", {
+														className: "text-sm font-medium text-text-primary",
+														children: e.name
+													}),
+													/* @__PURE__ */ O("p", {
+														className: "text-xs text-text-secondary mt-0.5",
+														children: e.description
+													}),
+													/* @__PURE__ */ O("p", {
+														className: "text-xs text-text-muted font-mono mt-0.5",
+														children: e.packageName
+													})
+												]
+											}), /* @__PURE__ */ k("button", {
+												onClick: () => Rt(e.packageName),
+												disabled: H === e.packageName,
+												className: "flex items-center gap-1.5 px-2.5 py-1.5 text-xs text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50 flex-shrink-0 sm:ml-3",
+												children: [H === e.packageName ? /* @__PURE__ */ O(b, { className: "w-3 h-3 animate-spin" }) : /* @__PURE__ */ O(we, { className: "w-3 h-3" }), "Install"]
+											})]
+										}, e.packageName))
+									}) : /* @__PURE__ */ O("p", {
+										className: "text-sm text-text-muted",
+										children: q ? "No available plugins match your search." : bt.every((e) => e.installed) ? "All available plugins are already installed." : "No available plugins found."
+									}) }),
+									G === "store" && /* @__PURE__ */ k(D, { children: [Mt && /* @__PURE__ */ k("div", {
+										className: "flex items-center gap-2 p-3 bg-status-error-bg text-status-error-text rounded-md text-sm",
+										children: [/* @__PURE__ */ O(w, { className: "w-4 h-4 flex-shrink-0" }), /* @__PURE__ */ O("span", {
+											className: "flex-1",
+											children: Mt
+										})]
+									}), At ? /* @__PURE__ */ O("p", {
+										className: "text-sm text-text-muted",
+										children: "Loading purchased plugins…"
+									}) : J.length === 0 ? /* @__PURE__ */ k("div", {
+										className: "py-8 text-center",
+										children: [/* @__PURE__ */ O("p", {
+											className: "text-sm text-text-muted",
+											children: "No plugins purchased from the Burdenoff store yet."
+										}), /* @__PURE__ */ O("a", {
+											href: "/store/marketplace",
+											className: "mt-2 inline-flex items-center gap-1 text-xs font-semibold text-action-primary-text hover:underline",
+											children: "Browse the store →"
+										})]
+									}) : /* @__PURE__ */ O("div", {
+										className: "space-y-2",
+										children: J.map((e) => {
+											let t = (e.product?.manifest ?? {}).digital?.install, n = typeof t?.packageName == "string" ? t.packageName : null, r = V.some((e) => e.packageName === n);
+											return /* @__PURE__ */ k("div", {
+												className: "flex flex-col sm:flex-row sm:items-center justify-between gap-2 p-3 bg-bg-sunken rounded-lg",
+												children: [/* @__PURE__ */ k("div", {
+													className: "flex items-start gap-3 min-w-0 flex-1",
+													children: [e.product?.icon ? /* @__PURE__ */ O("img", {
+														src: e.product.icon,
+														alt: "",
+														className: "w-10 h-10 rounded-md object-cover flex-shrink-0"
+													}) : /* @__PURE__ */ O("div", {
+														className: "w-10 h-10 flex-shrink-0 rounded-md bg-bg-secondary flex items-center justify-center",
+														children: /* @__PURE__ */ O(x, { className: "w-5 h-5 text-text-muted" })
+													}), /* @__PURE__ */ k("div", {
+														className: "min-w-0 flex-1",
+														children: [
+															/* @__PURE__ */ k("div", {
+																className: "flex items-center gap-2",
+																children: [/* @__PURE__ */ O("h4", {
+																	className: "text-sm font-semibold text-text-primary truncate",
+																	children: e.product?.name ?? "Unknown"
+																}), e.licenseKey && /* @__PURE__ */ O("span", {
+																	className: "text-[10px] bg-status-success-bg text-status-success-text px-1.5 py-0.5 rounded-full",
+																	children: "Licensed"
+																})]
+															}),
+															n && /* @__PURE__ */ O("p", {
+																className: "text-xs text-text-muted font-mono truncate",
+																children: n
+															}),
+															e.product?.description && /* @__PURE__ */ O("p", {
+																className: "text-xs text-text-secondary line-clamp-2 mt-1",
+																children: e.product.description
+															})
+														]
+													})]
+												}), /* @__PURE__ */ O("button", {
+													onClick: () => void Vt(e.productId, e.licenseKey),
+													disabled: r || Y === e.productId || !n,
+													className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-md bg-action-primary-bg text-action-primary-text hover:opacity-90 disabled:opacity-60 flex-shrink-0",
+													children: r ? "Installed" : Y === e.productId ? "Installing…" : "Install"
+												})]
+											}, e.id);
+										})
+									})] }),
+									G === "ui-plugins" && /* @__PURE__ */ O(D, { children: r.length > 0 || B?.tunnelUrl ? /* @__PURE__ */ O(p, {
+										availablePlugins: [...B?.tunnelUrl ? [{
+											pluginName: "code-server",
+											displayName: "Code Server (VS Code)",
+											description: "Browser-based VS Code editor",
+											version: "latest",
+											customUrl: "/code-server/"
+										}] : [], ...r.map((e) => ({
+											pluginName: e.pluginName,
+											displayName: e.pluginName.replace(/^ui-/, "").replace(/-/g, " ").replace(/\b\w/g, (e) => e.toUpperCase()),
+											description: e.description,
+											version: e.version
+										}))],
+										tunnelUrl: B?.tunnelUrl || null,
+										agentApiKey: B?.agentApiKey
+									}) : /* @__PURE__ */ O("p", {
+										className: "text-sm text-text-muted",
+										children: q ? "No UI plugins match your search." : "No plugins with UI are currently installed."
+									}) }),
+									St && V.length === 0 && /* @__PURE__ */ k("div", {
+										className: "flex items-center gap-2 text-sm text-text-secondary",
+										children: [/* @__PURE__ */ O(b, { className: "w-4 h-4 animate-spin" }), "Loading plugins..."]
+									})
+								]
+							})] })
+						}, "plugins");
+					})(),
+					P === "sessions" && /* @__PURE__ */ O(E.div, {
+						initial: {
+							opacity: 0,
+							y: 8
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							y: -8
+						},
+						transition: { duration: .2 },
+						children: /* @__PURE__ */ k(d, { children: [/* @__PURE__ */ O("div", {
+							className: "p-4 border-b border-border-default flex items-center justify-between",
+							children: /* @__PURE__ */ k("h3", {
+								className: "font-semibold text-text-primary flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ O(C, { className: "w-5 h-5" }),
+									N("nav.sessions", "Sessions"),
+									" (",
+									Z.length,
+									")"
+								]
+							})
+						}), Z.length > 0 ? /* @__PURE__ */ O("div", {
+							className: "divide-y divide-border-primary",
+							children: Z.map((e) => /* @__PURE__ */ k("div", {
+								onClick: () => Jt(e.id),
+								className: "p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 cursor-pointer hover:bg-bg-sunken/50 transition-colors",
+								children: [/* @__PURE__ */ k("div", {
+									className: "flex items-center gap-3 min-w-0",
+									children: [/* @__PURE__ */ O(C, { className: "w-5 h-5 text-text-secondary flex-shrink-0" }), /* @__PURE__ */ k("div", {
+										className: "min-w-0",
+										children: [/* @__PURE__ */ O("p", {
+											className: "font-medium text-text-primary truncate",
+											children: e.name
+										}), /* @__PURE__ */ O("p", {
+											className: "text-sm text-text-secondary truncate",
+											children: e.type
+										})]
+									})]
+								}), /* @__PURE__ */ O(u, { status: e.status })]
+							}, e.id))
+						}) : /* @__PURE__ */ O("div", {
+							className: "p-6 text-center text-text-secondary",
+							children: N("agentDetails.noSessionsOnAgent", "No sessions on this agent")
+						})] })
+					}, "sessions"),
+					P === "logs" && /* @__PURE__ */ O(E.div, {
+						initial: {
+							opacity: 0,
+							y: 8
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							y: -8
+						},
+						transition: { duration: .2 },
+						children: /* @__PURE__ */ k(d, { children: [/* @__PURE__ */ O("div", {
+							className: "p-4 border-b border-border-default flex items-center justify-between",
+							children: /* @__PURE__ */ k("h3", {
+								className: "font-semibold text-text-primary flex items-center gap-2",
+								children: [/* @__PURE__ */ O(Pe, { className: "w-5 h-5" }), N("nav.logs", "Logs")]
+							})
+						}), /* @__PURE__ */ O("div", {
+							className: "p-4",
+							children: /* @__PURE__ */ O(me, {
+								agentId: B.id,
+								className: "min-h-[28rem]"
+							})
+						})] })
+					}, "logs"),
+					P === "vibes" && /* @__PURE__ */ O(E.div, {
+						initial: {
+							opacity: 0,
+							y: 8
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							y: -8
+						},
+						transition: { duration: .2 },
+						children: /* @__PURE__ */ k(d, { children: [/* @__PURE__ */ O("div", {
+							className: "p-4 border-b border-border-default flex items-center justify-between",
+							children: /* @__PURE__ */ k("h3", {
+								className: "font-semibold text-text-primary flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ O(T, { className: "w-5 h-5" }),
+									N("nav.vibes", "Vibes"),
+									" (",
+									Q.length,
+									")"
+								]
+							})
+						}), Q.length > 0 ? /* @__PURE__ */ O("div", {
+							className: "divide-y divide-border-primary",
+							children: Q.map((e) => /* @__PURE__ */ k("div", {
+								onClick: () => Yt(e.id),
+								className: "p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 cursor-pointer hover:bg-bg-sunken/50 transition-colors",
+								children: [/* @__PURE__ */ k("div", {
+									className: "flex items-center gap-3 min-w-0",
+									children: [/* @__PURE__ */ O(T, { className: "w-5 h-5 text-text-secondary flex-shrink-0" }), /* @__PURE__ */ k("div", {
+										className: "min-w-0",
+										children: [/* @__PURE__ */ O("p", {
+											className: "font-medium text-text-primary truncate",
+											children: e.name
+										}), /* @__PURE__ */ O("p", {
+											className: "text-sm text-text-secondary truncate",
+											children: e.type
+										})]
+									})]
+								}), /* @__PURE__ */ O(u, { status: e.status })]
+							}, e.id))
+						}) : /* @__PURE__ */ O("div", {
+							className: "p-6 text-center text-text-secondary",
+							children: N("agentDetails.noVibesUsingAgent", "No vibes using this agent")
+						})] })
+					}, "vibes"),
+					P === "notes" && /* @__PURE__ */ O(E.div, {
+						initial: {
+							opacity: 0,
+							y: 8
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							y: -8
+						},
+						transition: { duration: .2 },
+						className: "space-y-6",
+						children: /* @__PURE__ */ O(he, {
+							context: "agent",
+							agentVibes: Q.map((e) => ({
+								id: e.id,
+								name: e.name
+							}))
+						})
+					}, "notes"),
+					P === "backup" && B.tunnelUrl && B.agentApiKey && /* @__PURE__ */ O(E.div, {
+						initial: {
+							opacity: 0,
+							y: 8
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							y: -8
+						},
+						transition: { duration: .2 },
+						children: /* @__PURE__ */ O(fe, {
+							agentTunnelUrl: B.tunnelUrl,
+							agentApiKey: B.agentApiKey
+						})
+					}, "backup"),
+					P === "backup" && (!B.tunnelUrl || !B.agentApiKey) && /* @__PURE__ */ O(E.div, {
+						initial: {
+							opacity: 0,
+							y: 8
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							y: -8
+						},
+						transition: { duration: .2 },
+						children: /* @__PURE__ */ k(d, {
+							className: "p-6 text-center text-text-secondary",
+							children: [
+								/* @__PURE__ */ O(Ce, { className: "w-8 h-8 mx-auto mb-2 text-text-muted" }),
+								/* @__PURE__ */ O("p", { children: N("agentDetails.backupRequiresTunnelAndApiKey", "Agent tunnel URL and API key are required for backup management.") }),
+								/* @__PURE__ */ O("p", {
+									className: "text-sm mt-1",
+									children: N("agentDetails.configureConnectionInOverview", "Configure the agent connection in the Overview tab.")
+								})
+							]
+						})
+					}, "backup-no-tunnel")
+				]
+			}),
+			et && /* @__PURE__ */ O("div", {
+				className: "fixed inset-0 bg-bg-overlay flex items-center justify-center z-50 p-4",
+				children: /* @__PURE__ */ k("div", {
+					className: "bg-bg-surface rounded-lg p-6 w-full max-w-lg",
+					children: [
+						/* @__PURE__ */ k("h2", {
+							className: "text-lg font-semibold text-text-primary mb-4",
+							children: [
+								N("agentDetails.configure", "Configure"),
+								" ",
+								B.name
+							]
+						}),
+						tt && /* @__PURE__ */ O("div", {
+							className: "mb-4 p-3 bg-status-error-bg text-status-error-text rounded-md text-sm",
+							children: tt
+						}),
+						/* @__PURE__ */ k("div", {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+									className: "block text-sm font-medium text-text-primary mb-1",
+									children: N("webhooks.name", "Name")
+								}), /* @__PURE__ */ O("input", {
+									ref: st,
+									type: "text",
+									defaultValue: B.name,
+									className: "w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary"
+								})] }),
+								/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+									className: "block text-sm font-medium text-text-primary mb-1",
+									children: N("analytics.platform", "Platform")
+								}), /* @__PURE__ */ O("input", {
+									type: "text",
+									value: `${B.platform} / ${B.architecture}`,
+									disabled: !0,
+									className: "w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-secondary"
+								})] }),
+								/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+									className: "block text-sm font-medium text-text-primary mb-1",
+									children: N("agentDetails.version", "Version")
+								}), /* @__PURE__ */ O("input", {
+									type: "text",
+									value: B.version,
+									disabled: !0,
+									className: "w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-secondary"
+								})] }),
+								/* @__PURE__ */ k("div", { children: [
+									/* @__PURE__ */ O("label", {
+										className: "block text-sm font-medium text-text-primary mb-1",
+										children: N("agentDetails.tunnelUrl", "Tunnel URL")
+									}),
+									/* @__PURE__ */ O("input", {
+										ref: ct,
+										type: "text",
+										defaultValue: B.tunnelUrl ?? "",
+										placeholder: N("agentDetails.tunnelUrlPlaceholder", "https://xxx.trycloudflare.com"),
+										className: "w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary font-mono text-sm"
+									}),
+									/* @__PURE__ */ O("p", {
+										className: "mt-1 text-xs text-text-muted",
+										children: N("agentDetails.tunnelUrlHint", "The public URL for accessing this agent remotely. Auto-updates when gateway auth is configured.")
+									})
+								] }),
+								/* @__PURE__ */ k("div", { children: [
+									/* @__PURE__ */ O("label", {
+										className: "block text-sm font-medium text-text-primary mb-1",
+										children: N("agentDetails.agentApiKey", "Agent API Key")
+									}),
+									/* @__PURE__ */ O("input", {
+										ref: lt,
+										type: "text",
+										defaultValue: B.agentApiKey ?? "",
+										placeholder: N("agentDetails.agentApiKeyPlaceholder", "sk-agent-..."),
+										className: "w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary font-mono text-sm"
+									}),
+									/* @__PURE__ */ O("p", {
+										className: "mt-1 text-xs text-text-muted",
+										children: N("agentDetails.agentApiKeyHint", "Used to authenticate requests to the agent. Leave empty to clear.")
+									})
+								] }),
+								/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ k("div", {
+									className: "flex items-center gap-1.5 mb-1",
+									children: [/* @__PURE__ */ O("label", {
+										className: "text-sm font-medium text-text-primary",
+										children: "AI Context"
+									}), /* @__PURE__ */ k("div", {
+										className: "relative",
+										children: [/* @__PURE__ */ O("button", {
+											type: "button",
+											onClick: () => ot((e) => !e),
+											className: "p-0.5 rounded-full text-text-muted hover:text-text-secondary transition-colors",
+											"aria-label": "What is AI Context?",
+											children: /* @__PURE__ */ O(ke, { className: "w-3.5 h-3.5" })
+										}), at && /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O("div", {
+											className: "fixed inset-0 z-10",
+											onClick: () => ot(!1)
+										}), /* @__PURE__ */ k("div", {
+											className: "absolute left-0 top-6 z-20 w-72 bg-bg-elevated border border-border-default rounded-lg shadow-xl p-3 text-xs text-text-secondary space-y-1.5",
+											children: [
+												/* @__PURE__ */ O("p", {
+													className: "font-semibold text-text-primary",
+													children: "What is AI Context?"
+												}),
+												/* @__PURE__ */ O("p", { children: "A short description (Markdown supported) that AI tools running on this agent will read to understand the environment — e.g. what the machine is for, what services it runs, or any constraints to follow." }),
+												/* @__PURE__ */ O("p", {
+													className: "text-text-muted",
+													children: "Example: \"Production billing server. Do not modify files outside /src. Node 20, Docker installed.\""
+												})
+											]
+										})] })]
+									})]
+								}), /* @__PURE__ */ O("textarea", {
+									ref: ut,
+									defaultValue: B.aiContext ?? "",
+									rows: 4,
+									placeholder: "e.g. This agent runs on the billing server. Node 20, Docker installed. Do not modify files outside /src.",
+									className: "w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm"
+								})] }),
+								/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+									className: "block text-sm font-medium text-text-primary mb-1",
+									children: N("agentDetails.metadataLabel", "Metadata (JSON)")
+								}), /* @__PURE__ */ O("textarea", {
+									ref: dt,
+									defaultValue: B.metadata ? JSON.stringify(B.metadata, null, 2) : "{}",
+									rows: 4,
+									className: "w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary font-mono text-sm"
+								})] })
+							]
+						}),
+						/* @__PURE__ */ k("div", {
+							className: "flex flex-wrap justify-end gap-3 mt-6",
+							children: [/* @__PURE__ */ O("button", {
+								onClick: () => F(!1),
+								disabled: L,
+								className: "px-4 py-2 text-text-primary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50",
+								children: N("common.cancel", "Cancel")
+							}), /* @__PURE__ */ O("button", {
+								onClick: Gt,
+								disabled: L,
+								className: "px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50",
+								children: L ? N("agentDetails.saving", "Saving...") : N("agentDetails.saveConfiguration", "Save Configuration")
+							})]
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ O(ae, {
+				isOpen: Tt,
+				onClose: () => Et(!1),
+				onConfirm: () => {
+					Et(!1), M("/billing");
+				},
+				title: "Plugin Install Quota Reached",
+				message: "You have used the plugin installation quota for your current plan. Upgrade to install more plugins."
+			})
+		]
+	});
+}
+//#endregion
+export { j as AgentDetailsPage };
+
+//# sourceMappingURL=AgentDetailsPage.js.map