@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/components/agents/OpenInBrowserEditorButton.js

@@ -0,0 +1,115 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useCallback as t, useState as n } from "react";
+import { AlertCircle as r, Check as i, Code as a, Loader2 as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/agents/OpenInBrowserEditorButton.tsx
+async function l(e, t, n, r) {
+	let i = e.replace(/\/$/, "");
+	return fetch(`${i}${t}`, {
+		...r,
+		headers: {
+			"Content-Type": "application/json",
+			"x-agent-api-key": n,
+			...r?.headers
+		}
+	});
+}
+var u = 2e3, d = 12e4;
+async function f(e, t, n, r) {
+	let i = Date.now() + d;
+	for (; Date.now() < i;) {
+		let i = await l(e, "/api/code-server/status", t);
+		if (!i.ok) throw Error(`Status check failed: ${i.status}`);
+		let a = await i.json(), o = r(a);
+		if (o) throw Error(o);
+		if (n(a)) return a;
+		await new Promise((e) => setTimeout(e, u));
+	}
+	throw Error("Operation timed out");
+}
+function p({ tunnelUrl: u, agentApiKey: d, workspacePath: p, mode: m = "newtab", onIframeUrl: h, className: g }) {
+	let _ = e(), [v, y] = n("idle"), [b, x] = n(null), S = t(async () => {
+		if (!u || !d) {
+			x("Agent tunnel or API key not available"), y("error");
+			return;
+		}
+		x(null);
+		try {
+			y("checking");
+			let e = await l(u, "/api/code-server/status", d);
+			if (!e.ok) throw Error(`Status check failed: ${e.status}`);
+			let t = await e.json();
+			if (!t.installed && !t.installing) {
+				y("installing");
+				let e = await l(u, "/api/code-server/install", d, { method: "POST" });
+				if (!e.ok) throw Error(`Install failed: ${e.status}`);
+				await f(u, d, (e) => e.installed, (e) => e.error || null);
+			} else t.installing && (y("installing"), await f(u, d, (e) => e.installed, (e) => e.error || null));
+			if (t.running) p && t.running && (y("starting"), await l(u, "/api/code-server/restart", d, {
+				method: "POST",
+				body: JSON.stringify({ workspacePath: p })
+			}), await new Promise((e) => setTimeout(e, 1e3)));
+			else {
+				y("starting");
+				let e = await l(u, "/api/code-server/start", d, {
+					method: "POST",
+					body: JSON.stringify({ workspacePath: p })
+				});
+				if (!e.ok) {
+					let t = await e.json().catch(() => ({}));
+					throw Error(t.error || `Start failed: ${e.status}`);
+				}
+				await new Promise((e) => setTimeout(e, 1e3));
+			}
+			y("ready");
+			let n = `${u.replace(/\/$/, "")}/code-server/?apiKey=${encodeURIComponent(d)}`;
+			m === "iframe" && h ? h(n) : window.open(n, "_blank"), setTimeout(() => y("idle"), 2e3);
+		} catch (e) {
+			x(e instanceof Error ? e.message : "Failed to open editor"), y("error");
+		}
+	}, [
+		u,
+		d,
+		p,
+		m,
+		h
+	]), C = !u || !d || v !== "idle" && v !== "error" && v !== "ready", w = (() => {
+		switch (v) {
+			case "checking": return _("vibecontrols.agents.editor.checking", "Checking...");
+			case "installing": return _("vibecontrols.agents.editor.installing", "Installing...");
+			case "starting": return _("vibecontrols.agents.editor.starting", "Starting...");
+			case "ready": return _("vibecontrols.agents.editor.opened", "Opened");
+			case "error": return _("vibecontrols.agents.editor.retry", "Retry");
+			default: return _("vibecontrols.agents.editor.openInBrowser", "Open in Browser");
+		}
+	})(), T = (() => {
+		switch (v) {
+			case "checking":
+			case "installing":
+			case "starting": return o;
+			case "ready": return i;
+			case "error": return r;
+			default: return a;
+		}
+	})(), E = v === "checking" || v === "installing" || v === "starting";
+	return /* @__PURE__ */ c("div", {
+		className: "relative inline-flex",
+		children: [/* @__PURE__ */ c("button", {
+			onClick: S,
+			disabled: C,
+			className: `flex items-center gap-1.5 px-2.5 py-1.5 sm:px-3 sm:py-2 text-xs sm:text-sm rounded-md transition-colors disabled:opacity-50 ${v === "error" ? "bg-status-error-bg text-status-error-text hover:opacity-80" : v === "ready" ? "bg-status-success-bg text-status-success-text" : "bg-bg-sunken text-text-primary hover:bg-bg-sunken/80"} ${g || ""}`,
+			title: b || "Open VS Code in browser via code-server",
+			children: [/* @__PURE__ */ s(T, { className: `w-3.5 h-3.5 sm:w-4 sm:h-4 ${E ? "animate-spin" : ""}` }), /* @__PURE__ */ s("span", {
+				className: "hidden sm:inline",
+				children: w
+			})]
+		}), v === "error" && b && /* @__PURE__ */ s("div", {
+			className: "absolute top-full left-0 mt-1 z-50 bg-bg-surface border border-border-default rounded-md shadow-lg p-2 text-xs text-status-error-text max-w-[250px]",
+			children: b
+		})]
+	});
+}
+//#endregion
+export { p as OpenInBrowserEditorButton };
+
+//# sourceMappingURL=OpenInBrowserEditorButton.js.map

package/dist/components/agents/OpenInBrowserEditorButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpenInBrowserEditorButton.js","names":[],"sources":["../../../src/components/agents/OpenInBrowserEditorButton.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { Code, Loader2, AlertCircle, Check } from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\n\n// ── Types ──────────────────────────────────────────────────────────────\n\ntype EditorState = 'idle' | 'checking' | 'installing' | 'starting' | 'ready' | 'error';\n\nexport interface OpenInBrowserEditorButtonProps {\n  /** Agent tunnel URL (e.g. \"https://xxx.trycloudflare.com\") */\n  tunnelUrl: string | null;\n  /** Agent API key for authentication */\n  agentApiKey: string | null;\n  /** Directory to open as workspace root. Defaults to agent home if not set. */\n  workspacePath?: string;\n  /** How to open — new browser tab or call back with URL for iframe embedding */\n  mode?: 'newtab' | 'iframe';\n  /** Called with the ready URL when mode is 'iframe' */\n  onIframeUrl?: (url: string) => void;\n  /** Additional CSS class names */\n  className?: string;\n}\n\n// ── Helpers ────────────────────────────────────────────────────────────\n\nasync function agentFetch(\n  tunnelUrl: string,\n  path: string,\n  apiKey: string,\n  options?: RequestInit\n): Promise<Response> {\n  const base = tunnelUrl.replace(/\\/$/, '');\n  return fetch(`${base}${path}`, {\n    ...options,\n    headers: {\n      'Content-Type': 'application/json',\n      'x-agent-api-key': apiKey,\n      ...options?.headers,\n    },\n  });\n}\n\ninterface CodeServerStatus {\n  installed: boolean;\n  installing: boolean;\n  running: boolean;\n  port?: number;\n  error?: string;\n}\n\nconst POLL_INTERVAL_MS = 2000;\nconst POLL_TIMEOUT_MS = 120_000; // 2 minutes max\n\n/**\n * Poll until a condition is met on the status response.\n */\nasync function pollUntil(\n  tunnelUrl: string,\n  apiKey: string,\n  predicate: (status: CodeServerStatus) => boolean,\n  errorCheck: (status: CodeServerStatus) => string | null\n): Promise<CodeServerStatus> {\n  const deadline = Date.now() + POLL_TIMEOUT_MS;\n\n  while (Date.now() < deadline) {\n    const res = await agentFetch(tunnelUrl, '/api/code-server/status', apiKey);\n    if (!res.ok) throw new Error(`Status check failed: ${res.status}`);\n    const status: CodeServerStatus = await res.json();\n\n    const err = errorCheck(status);\n    if (err) throw new Error(err);\n\n    if (predicate(status)) return status;\n\n    await new Promise((r) => setTimeout(r, POLL_INTERVAL_MS));\n  }\n\n  throw new Error('Operation timed out');\n}\n\n// ── Component ──────────────────────────────────────────────────────────\n\nexport function OpenInBrowserEditorButton({\n  tunnelUrl,\n  agentApiKey,\n  workspacePath,\n  mode = 'newtab',\n  onIframeUrl,\n  className,\n}: OpenInBrowserEditorButtonProps) {\n  const tr = useTr();\n  const [state, setState] = useState<EditorState>('idle');\n  const [errorMsg, setErrorMsg] = useState<string | null>(null);\n\n  const handleClick = useCallback(async () => {\n    if (!tunnelUrl || !agentApiKey) {\n      setErrorMsg('Agent tunnel or API key not available');\n      setState('error');\n      return;\n    }\n\n    setErrorMsg(null);\n\n    try {\n      // Step 1: Check status\n      setState('checking');\n      const res = await agentFetch(tunnelUrl, '/api/code-server/status', agentApiKey);\n      if (!res.ok) throw new Error(`Status check failed: ${res.status}`);\n      const status: CodeServerStatus = await res.json();\n\n      // Step 2: Install if needed\n      if (!status.installed && !status.installing) {\n        setState('installing');\n        const installRes = await agentFetch(tunnelUrl, '/api/code-server/install', agentApiKey, {\n          method: 'POST',\n        });\n        if (!installRes.ok) throw new Error(`Install failed: ${installRes.status}`);\n\n        // Poll until installed\n        await pollUntil(\n          tunnelUrl,\n          agentApiKey,\n          (s) => s.installed,\n          (s) => s.error || null\n        );\n      } else if (status.installing) {\n        setState('installing');\n        await pollUntil(\n          tunnelUrl,\n          agentApiKey,\n          (s) => s.installed,\n          (s) => s.error || null\n        );\n      }\n\n      // Step 3: Start if not running\n      if (!status.running) {\n        setState('starting');\n        const startRes = await agentFetch(tunnelUrl, '/api/code-server/start', agentApiKey, {\n          method: 'POST',\n          body: JSON.stringify({ workspacePath }),\n        });\n        if (!startRes.ok) {\n          const err = await startRes.json().catch(() => ({}));\n          throw new Error((err as { error?: string }).error || `Start failed: ${startRes.status}`);\n        }\n\n        // Brief wait for code-server to be ready\n        await new Promise((r) => setTimeout(r, 1000));\n      } else if (workspacePath && status.running) {\n        // Restart with new workspace path if different\n        setState('starting');\n        await agentFetch(tunnelUrl, '/api/code-server/restart', agentApiKey, {\n          method: 'POST',\n          body: JSON.stringify({ workspacePath }),\n        });\n        await new Promise((r) => setTimeout(r, 1000));\n      }\n\n      // Step 4: Open the editor\n      setState('ready');\n      const base = tunnelUrl.replace(/\\/$/, '');\n      const editorUrl = `${base}/code-server/?apiKey=${encodeURIComponent(agentApiKey)}`;\n\n      if (mode === 'iframe' && onIframeUrl) {\n        onIframeUrl(editorUrl);\n      } else {\n        window.open(editorUrl, '_blank');\n      }\n\n      // Reset after a moment\n      setTimeout(() => setState('idle'), 2000);\n    } catch (err) {\n      setErrorMsg(err instanceof Error ? err.message : 'Failed to open editor');\n      setState('error');\n    }\n  }, [tunnelUrl, agentApiKey, workspacePath, mode, onIframeUrl]);\n\n  const isDisabled =\n    !tunnelUrl || !agentApiKey || (state !== 'idle' && state !== 'error' && state !== 'ready');\n\n  const label = (() => {\n    switch (state) {\n      case 'checking':\n        return tr('vibecontrols.agents.editor.checking', 'Checking...');\n      case 'installing':\n        return tr('vibecontrols.agents.editor.installing', 'Installing...');\n      case 'starting':\n        return tr('vibecontrols.agents.editor.starting', 'Starting...');\n      case 'ready':\n        return tr('vibecontrols.agents.editor.opened', 'Opened');\n      case 'error':\n        return tr('vibecontrols.agents.editor.retry', 'Retry');\n      default:\n        return tr('vibecontrols.agents.editor.openInBrowser', 'Open in Browser');\n    }\n  })();\n\n  const Icon = (() => {\n    switch (state) {\n      case 'checking':\n      case 'installing':\n      case 'starting':\n        return Loader2;\n      case 'ready':\n        return Check;\n      case 'error':\n        return AlertCircle;\n      default:\n        return Code;\n    }\n  })();\n\n  const isSpinning = state === 'checking' || state === 'installing' || state === 'starting';\n\n  return (\n    <div className=\"relative inline-flex\">\n      <button\n        onClick={handleClick}\n        disabled={isDisabled}\n        className={`flex items-center gap-1.5 px-2.5 py-1.5 sm:px-3 sm:py-2 text-xs sm:text-sm rounded-md transition-colors disabled:opacity-50 ${\n          state === 'error'\n            ? 'bg-status-error-bg text-status-error-text hover:opacity-80'\n            : state === 'ready'\n              ? 'bg-status-success-bg text-status-success-text'\n              : 'bg-bg-sunken text-text-primary hover:bg-bg-sunken/80'\n        } ${className || ''}`}\n        title={errorMsg || 'Open VS Code in browser via code-server'}\n      >\n        <Icon className={`w-3.5 h-3.5 sm:w-4 sm:h-4 ${isSpinning ? 'animate-spin' : ''}`} />\n        <span className=\"hidden sm:inline\">{label}</span>\n      </button>\n\n      {/* Error tooltip */}\n      {state === 'error' && errorMsg && (\n        <div className=\"absolute top-full left-0 mt-1 z-50 bg-bg-surface border border-border-default rounded-md shadow-lg p-2 text-xs text-status-error-text max-w-[250px]\">\n          {errorMsg}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/agents/PluginUIPanel.d.ts

@@ -0,0 +1,38 @@
+export interface PluginUITab {
+    /** Unique tab ID (allows duplicate plugins in multiple tabs) */
+    id: string;
+    /** The plugin name (e.g. "ui-ai") — may be null if nothing selected yet */
+    pluginName: string | null;
+    /** Display name shown on the tab */
+    name: string;
+    /** The full URL to load in the iframe */
+    uiUrl: string | null;
+}
+export interface UIPluginOption {
+    /** The plugin name key (e.g. "ui-ai") */
+    pluginName: string;
+    /** Display name */
+    displayName: string;
+    /** Description shown in dropdown */
+    description?: string;
+    /** Version */
+    version?: string;
+    /** Custom URL to use instead of the default /ui/{pluginName} path (e.g. for code-server proxy) */
+    customUrl?: string;
+}
+interface PluginUIPanelProps {
+    /** Available UI plugins the user can pick from */
+    availablePlugins: UIPluginOption[];
+    /** Base URL of the agent tunnel (e.g. "https://xxx.trycloudflare.com") */
+    tunnelUrl: string | null;
+    /** Agent API key for postMessage auth handoff */
+    agentApiKey?: string | null;
+}
+/**
+ * Embedded browser-like panel for plugin UIs.
+ * Each tab has a dropdown to select which plugin to load. The same plugin can
+ * be loaded in multiple tabs, each with its own navigation state.
+ */
+export declare function PluginUIPanel({ availablePlugins, tunnelUrl, agentApiKey }: PluginUIPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PluginUIPanel.d.ts.map

package/dist/components/agents/PluginUIPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginUIPanel.d.ts","sourceRoot":"","sources":["../../../src/components/agents/PluginUIPanel.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,WAAW;IAC1B,gEAAgE;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,2EAA2E;IAC3E,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kGAAkG;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,kBAAkB;IAC1B,kDAAkD;IAClD,gBAAgB,EAAE,cAAc,EAAE,CAAC;IACnC,0EAA0E;IAC1E,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAOD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,kBAAkB,2CA2d7F"}

package/dist/components/agents/PluginUIPanel.js

@@ -0,0 +1,308 @@
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+import { useI18n as i } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AlertCircle as a, ChevronDown as o, ExternalLink as s, GripVertical as c, Loader2 as l, Maximize2 as u, Minimize2 as d, Monitor as f, Plus as p, RotateCcw as m, Wifi as h, WifiOff as g, X as _ } from "lucide-react";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/components/agents/PluginUIPanel.tsx
+var x = 0;
+function S() {
+	return `ui-tab-${++x}`;
+}
+function C({ availablePlugins: x, tunnelUrl: C, agentApiKey: w }) {
+	let { t: ee } = i(), [T, E] = r(() => [{
+		id: S(),
+		pluginName: null,
+		name: "New Tab",
+		uiUrl: null
+	}]), [D, O] = r(T[0].id), [k, A] = r(!1), [j, M] = r({}), [N, P] = r(null), F = n(null), [I, L] = r(null), R = n(!1), z = n(0), B = n(0), V = n(null), H = n({}), U = T.find((e) => e.id === D) || T[0] || null, W = e((e, t) => {
+		if (!C) return null;
+		let n = C.replace(/\/$/, ""), r = t ? t.startsWith("http") ? t : `${n}${t}` : `${n}/ui/${e}`;
+		return new URL(r).toString();
+	}, [C]), G = e((e) => x.find((t) => t.pluginName === e)?.displayName || e.replace(/^ui-/, "").replace(/-/g, " ").replace(/\b\w/g, (e) => e.toUpperCase()), [x]), K = e(() => {
+		let e = {
+			id: S(),
+			pluginName: null,
+			name: "New Tab",
+			uiUrl: null
+		};
+		E((t) => [...t, e]), O(e.id), P(e.id);
+	}, []), q = e((e) => {
+		E((t) => {
+			let n = t.filter((t) => t.id !== e);
+			if (n.length === 0) {
+				let e = {
+					id: S(),
+					pluginName: null,
+					name: "New Tab",
+					uiUrl: null
+				};
+				n.push(e), O(e.id);
+			} else if (D === e) {
+				let r = t.findIndex((t) => t.id === e), i = Math.max(0, r - 1);
+				O(n[Math.min(i, n.length - 1)].id);
+			}
+			return n;
+		}), delete H.current[e], M((t) => {
+			let n = { ...t };
+			return delete n[e], n;
+		});
+	}, [D]), J = e((e, t) => {
+		let n = W(t, x.find((e) => e.pluginName === t)?.customUrl), r = G(t);
+		E((i) => i.map((i) => i.id === e ? {
+			...i,
+			pluginName: t,
+			name: r,
+			uiUrl: n
+		} : i)), M((t) => ({
+			...t,
+			[e]: "connecting"
+		})), P(null);
+	}, [
+		x,
+		W,
+		G
+	]), Y = e((e) => {
+		let t = H.current[e];
+		if (!t?.contentWindow || !w || !C) return;
+		let n = new URL(C).origin;
+		t.contentWindow.postMessage({
+			type: "vibe-auth",
+			apiKey: w
+		}, n);
+	}, [w, C]), X = e((e) => {
+		M((t) => ({
+			...t,
+			[e]: "connected"
+		})), Y(e);
+	}, [Y]), Z = e((e) => {
+		M((t) => ({
+			...t,
+			[e]: "error"
+		}));
+	}, []), Q = e((e) => {
+		let t = H.current[e];
+		if (t) {
+			M((t) => ({
+				...t,
+				[e]: "connecting"
+			}));
+			let n = t.src;
+			t.src = "about:blank", requestAnimationFrame(() => {
+				t.src = n;
+			});
+		}
+	}, []), $ = e((e) => {
+		let t = T.find((t) => t.id === e);
+		t?.uiUrl && window.open(t.uiUrl, "_blank");
+	}, [T]);
+	t(() => {
+		if (!N) return;
+		let e = (e) => {
+			F.current && !F.current.contains(e.target) && P(null);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [N]);
+	let te = e((e) => {
+		k || (e.preventDefault(), R.current = !0, z.current = e.clientY, B.current = V.current?.offsetHeight || 500, document.body.style.cursor = "ns-resize", document.body.style.userSelect = "none");
+	}, [k]);
+	t(() => {
+		let e = (e) => {
+			if (!R.current) return;
+			let t = z.current - e.clientY;
+			L(Math.max(250, Math.min(B.current + t, window.innerHeight - 150)));
+		}, t = () => {
+			R.current && (R.current = !1, document.body.style.cursor = "", document.body.style.userSelect = "");
+		};
+		return document.addEventListener("mousemove", e), document.addEventListener("mouseup", t), () => {
+			document.removeEventListener("mousemove", e), document.removeEventListener("mouseup", t);
+		};
+	}, []);
+	let ne = (e) => {
+		let t = j[e];
+		return t === "connected" ? /* @__PURE__ */ y(h, { className: "w-3 h-3 text-status-success-text shrink-0" }) : t === "error" ? /* @__PURE__ */ y(g, { className: "w-3 h-3 text-status-error-text shrink-0" }) : t === "connecting" ? /* @__PURE__ */ y(l, { className: "w-3 h-3 animate-spin text-status-warning-text shrink-0" }) : /* @__PURE__ */ y(f, { className: "w-3 h-3 text-text-muted shrink-0" });
+	}, re = k ? "h-[calc(100vh-200px)]" : I ? void 0 : "h-[500px]", ie = !k && I ? { height: `${I}px` } : void 0;
+	return /* @__PURE__ */ b("div", {
+		ref: V,
+		className: "border border-border-default rounded-lg overflow-hidden bg-bg-sunken",
+		children: [
+			/* @__PURE__ */ y("div", {
+				onMouseDown: te,
+				className: "h-1 cursor-ns-resize hover:bg-action-primary-bg/30 transition-colors flex items-center justify-center group",
+				title: "Drag to resize",
+				children: /* @__PURE__ */ y(c, { className: "w-4 h-3 text-text-muted opacity-0 group-hover:opacity-100 transition-opacity rotate-90" })
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "flex items-center bg-bg-secondary border-b border-border-default overflow-x-auto",
+				children: [
+					T.map((e) => /* @__PURE__ */ b("div", {
+						className: `group flex items-center gap-1.5 pl-3 pr-1.5 py-1.5 text-xs border-r border-border-subtle cursor-pointer transition-colors min-w-0 max-w-[200px] shrink-0 ${e.id === U?.id ? "bg-bg-surface text-text-primary border-b-2 border-b-action-primary-bg" : "text-text-secondary hover:text-text-primary hover:bg-bg-surface/50"}`,
+						onClick: () => O(e.id),
+						children: [
+							ne(e.id),
+							/* @__PURE__ */ y("span", {
+								className: "truncate",
+								children: e.name
+							}),
+							/* @__PURE__ */ y("button", {
+								onClick: (t) => {
+									t.stopPropagation(), q(e.id);
+								},
+								className: "ml-auto opacity-0 group-hover:opacity-100 hover:text-status-error-text transition-opacity shrink-0 p-0.5",
+								title: "Close tab",
+								children: /* @__PURE__ */ y(_, { className: "w-3 h-3" })
+							})
+						]
+					}, e.id)),
+					/* @__PURE__ */ y("button", {
+						onClick: K,
+						className: "flex items-center justify-center w-8 h-8 shrink-0 text-text-secondary hover:text-text-primary hover:bg-bg-surface/50 transition-colors",
+						title: "New tab",
+						children: /* @__PURE__ */ y(p, { className: "w-3.5 h-3.5" })
+					}),
+					/* @__PURE__ */ y("div", { className: "flex-1 min-w-0" }),
+					/* @__PURE__ */ b("div", {
+						className: "flex items-center gap-0.5 px-2 shrink-0",
+						children: [U?.uiUrl && /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y("button", {
+							onClick: () => U && Q(U.id),
+							className: "p-1 text-text-secondary hover:text-text-primary transition-colors",
+							title: "Reload",
+							children: /* @__PURE__ */ y(m, { className: "w-3.5 h-3.5" })
+						}), /* @__PURE__ */ y("button", {
+							onClick: () => U && $(U.id),
+							className: "p-1 text-text-secondary hover:text-text-primary transition-colors",
+							title: "Open in new browser tab",
+							children: /* @__PURE__ */ y(s, { className: "w-3.5 h-3.5" })
+						})] }), /* @__PURE__ */ y("button", {
+							onClick: () => {
+								A((e) => !e), L(null);
+							},
+							className: "p-1 text-text-secondary hover:text-text-primary transition-colors",
+							title: k ? "Restore size" : "Maximize",
+							children: y(k ? d : u, { className: "w-3.5 h-3.5" })
+						})]
+					})
+				]
+			}),
+			U && /* @__PURE__ */ b("div", {
+				className: "flex items-center gap-2 px-3 py-1.5 bg-bg-surface border-b border-border-default",
+				children: [/* @__PURE__ */ y(f, { className: "w-4 h-4 text-text-muted shrink-0" }), /* @__PURE__ */ b("div", {
+					className: "relative flex-1 min-w-0",
+					ref: F,
+					children: [/* @__PURE__ */ b("button", {
+						onClick: () => P(N === U.id ? null : U.id),
+						className: "w-full flex items-center justify-between gap-2 px-3 py-1.5 text-sm bg-bg-sunken border border-border-default rounded-md text-left hover:border-action-primary-bg/50 focus:outline-none focus:ring-1 focus:ring-action-primary-bg transition-colors",
+						children: [/* @__PURE__ */ y("span", {
+							className: `truncate ${U.pluginName ? "text-text-primary" : "text-text-muted"}`,
+							children: U.pluginName ? `${U.name} — ${U.pluginName}` : "Select a plugin to load..."
+						}), /* @__PURE__ */ y(o, { className: `w-3.5 h-3.5 text-text-muted shrink-0 transition-transform ${N === U.id ? "rotate-180" : ""}` })]
+					}), N === U.id && /* @__PURE__ */ y("div", {
+						className: "absolute z-50 top-full left-0 right-0 mt-1 bg-bg-surface border border-border-default rounded-md shadow-lg overflow-hidden max-h-64 overflow-y-auto",
+						children: x.length > 0 ? x.map((e) => /* @__PURE__ */ b("button", {
+							onClick: () => J(U.id, e.pluginName),
+							className: `w-full text-left px-3 py-2.5 hover:bg-bg-sunken transition-colors border-b border-border-subtle last:border-b-0 ${U.pluginName === e.pluginName ? "bg-action-primary-bg/10" : ""}`,
+							children: [
+								/* @__PURE__ */ b("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ y("span", {
+										className: "text-sm font-medium text-text-primary",
+										children: e.displayName
+									}), e.version && /* @__PURE__ */ y("span", {
+										className: "text-xs text-text-muted",
+										children: e.version === "latest" ? e.version : `v${e.version}`
+									})]
+								}),
+								e.description && /* @__PURE__ */ y("p", {
+									className: "text-xs text-text-secondary mt-0.5",
+									children: e.description
+								}),
+								/* @__PURE__ */ y("p", {
+									className: "text-xs text-text-muted font-mono mt-0.5",
+									children: e.pluginName
+								})
+							]
+						}, e.pluginName)) : /* @__PURE__ */ y("div", {
+							className: "px-3 py-4 text-center text-sm text-text-muted",
+							children: "No UI plugins available"
+						})
+					})]
+				})]
+			}),
+			/* @__PURE__ */ b("div", {
+				className: `${re || ""} bg-bg-inverse text-text-inverse relative`,
+				style: ie,
+				children: [
+					T.map((e) => /* @__PURE__ */ y("div", {
+						className: `absolute inset-0 ${e.id === U?.id ? "block" : "hidden"}`,
+						children: e.pluginName ? e.uiUrl ? /* @__PURE__ */ y("iframe", {
+							ref: (t) => {
+								H.current[e.id] = t;
+							},
+							src: e.uiUrl,
+							title: `Plugin UI — ${e.name}`,
+							className: "w-full h-full border-0",
+							allow: "clipboard-read; clipboard-write",
+							onLoad: () => X(e.id),
+							onError: () => Z(e.id)
+						}) : /* @__PURE__ */ y("div", {
+							className: "flex items-center justify-center h-full",
+							children: /* @__PURE__ */ b("div", {
+								className: "text-center",
+								children: [
+									/* @__PURE__ */ y(a, { className: "w-8 h-8 text-text-secondary mx-auto mb-3" }),
+									/* @__PURE__ */ y("p", {
+										className: "text-text-tertiary text-sm",
+										children: "Agent tunnel not active"
+									}),
+									/* @__PURE__ */ y("p", {
+										className: "text-text-secondary text-xs mt-1",
+										children: "Cannot load plugin UI without an active tunnel connection."
+									})
+								]
+							})
+						}) : /* @__PURE__ */ y("div", {
+							className: "flex items-center justify-center h-full",
+							children: /* @__PURE__ */ b("div", {
+								className: "text-center max-w-sm",
+								children: [
+									/* @__PURE__ */ y(f, { className: "w-10 h-10 text-text-secondary mx-auto mb-3" }),
+									/* @__PURE__ */ y("p", {
+										className: "text-text-tertiary text-sm font-medium",
+										children: "No plugin selected"
+									}),
+									/* @__PURE__ */ y("p", {
+										className: "text-text-secondary text-xs mt-1",
+										children: "Use the dropdown above to pick a plugin UI to load in this tab."
+									}),
+									/* @__PURE__ */ b("button", {
+										onClick: () => P(e.id),
+										className: "mt-4 px-4 py-2 bg-bg-sunken text-text-primary text-sm rounded-md hover:bg-bg-muted transition-colors inline-flex items-center gap-2",
+										children: [/* @__PURE__ */ y(o, { className: "w-3.5 h-3.5" }), "Select Plugin"]
+									})
+								]
+							})
+						})
+					}, e.id)),
+					U && j[U.id] === "connecting" && U.uiUrl && /* @__PURE__ */ b("div", {
+						className: "absolute bottom-3 right-3 flex items-center gap-2 px-3 py-1.5 bg-bg-overlay backdrop-blur-sm rounded-md text-xs text-status-warning-text pointer-events-none",
+						children: [/* @__PURE__ */ y(l, { className: "w-3 h-3 animate-spin" }), "Connecting..."]
+					}),
+					U && j[U.id] === "error" && U.uiUrl && /* @__PURE__ */ b("div", {
+						className: "absolute bottom-3 right-3 flex items-center gap-2 px-3 py-1.5 bg-bg-overlay backdrop-blur-sm rounded-md text-xs text-status-error-text",
+						children: [
+							/* @__PURE__ */ y(g, { className: "w-3 h-3" }),
+							"Disconnected",
+							/* @__PURE__ */ y("button", {
+								onClick: () => Q(U.id),
+								className: "underline hover:text-status-error-text/80 transition-colors",
+								children: "Reconnect"
+							})
+						]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { C as PluginUIPanel };
+
+//# sourceMappingURL=PluginUIPanel.js.map

package/dist/components/agents/PluginUIPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginUIPanel.js","names":[],"sources":["../../../src/components/agents/PluginUIPanel.tsx"],"sourcesContent":["import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useState, useCallback, useRef, useEffect } from 'react';\nimport {\n  X,\n  Maximize2,\n  Minimize2,\n  ExternalLink,\n  Loader2,\n  AlertCircle,\n  RotateCcw,\n  Wifi,\n  WifiOff,\n  GripVertical,\n  Plus,\n  Monitor,\n  ChevronDown,\n} from 'lucide-react';\n\n// ── Types ──────────────────────────────────────────────────────────────\n\nexport interface PluginUITab {\n  /** Unique tab ID (allows duplicate plugins in multiple tabs) */\n  id: string;\n  /** The plugin name (e.g. \"ui-ai\") — may be null if nothing selected yet */\n  pluginName: string | null;\n  /** Display name shown on the tab */\n  name: string;\n  /** The full URL to load in the iframe */\n  uiUrl: string | null;\n}\n\nexport interface UIPluginOption {\n  /** The plugin name key (e.g. \"ui-ai\") */\n  pluginName: string;\n  /** Display name */\n  displayName: string;\n  /** Description shown in dropdown */\n  description?: string;\n  /** Version */\n  version?: string;\n  /** Custom URL to use instead of the default /ui/{pluginName} path (e.g. for code-server proxy) */\n  customUrl?: string;\n}\n\ninterface PluginUIPanelProps {\n  /** Available UI plugins the user can pick from */\n  availablePlugins: UIPluginOption[];\n  /** Base URL of the agent tunnel (e.g. \"https://xxx.trycloudflare.com\") */\n  tunnelUrl: string | null;\n  /** Agent API key for postMessage auth handoff */\n  agentApiKey?: string | null;\n}\n\nlet tabIdCounter = 0;\nfunction nextTabId(): string {\n  return `ui-tab-${++tabIdCounter}`;\n}\n\n/**\n * Embedded browser-like panel for plugin UIs.\n * Each tab has a dropdown to select which plugin to load. The same plugin can\n * be loaded in multiple tabs, each with its own navigation state.\n */\nexport function PluginUIPanel({ availablePlugins, tunnelUrl, agentApiKey }: PluginUIPanelProps) {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string) => {\n    const v = t(key);\n    return v === key ? fallback : v;\n  };\n  const [tabs, setTabs] = useState<PluginUITab[]>(() => {\n    // Start with one blank tab\n    return [{ id: nextTabId(), pluginName: null, name: 'New Tab', uiUrl: null }];\n  });\n  const [activeTabId, setActiveTabId] = useState<string>(tabs[0].id);\n  const [maximized, setMaximized] = useState(false);\n\n  // Connection status per tab\n  const [connectionStatus, setConnectionStatus] = useState<\n    Record<string, 'connecting' | 'connected' | 'error'>\n  >({});\n\n  // Dropdown open state per tab\n  const [dropdownOpen, setDropdownOpen] = useState<string | null>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  // Drag-to-resize state\n  const [resizeHeight, setResizeHeight] = useState<number | null>(null);\n  const resizingRef = useRef(false);\n  const startYRef = useRef(0);\n  const startHeightRef = useRef(0);\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  // Iframe refs for auth postMessage\n  const iframeRefs = useRef<Record<string, HTMLIFrameElement | null>>({});\n\n  const activeTab = tabs.find((t) => t.id === activeTabId) || tabs[0] || null;\n\n  // Build UI URL for a plugin\n  const buildUiUrl = useCallback(\n    (pluginName: string, customUrl?: string): string | null => {\n      if (!tunnelUrl) return null;\n      const base = tunnelUrl.replace(/\\/$/, '');\n\n      // Use customUrl if provided (e.g. for code-server proxy path)\n      const urlStr = customUrl\n        ? customUrl.startsWith('http')\n          ? customUrl\n          : `${base}${customUrl}`\n        : `${base}/ui/${pluginName}`;\n\n      return new URL(urlStr).toString();\n    },\n    [tunnelUrl]\n  );\n\n  // Display name for a plugin name\n  const getDisplayName = useCallback(\n    (pluginName: string): string => {\n      const opt = availablePlugins.find((p) => p.pluginName === pluginName);\n      return (\n        opt?.displayName ||\n        pluginName\n          .replace(/^ui-/, '')\n          .replace(/-/g, ' ')\n          .replace(/\\b\\w/g, (c) => c.toUpperCase())\n      );\n    },\n    [availablePlugins]\n  );\n\n  // ── Tab Actions ───────────────────────────────────────────────────\n\n  const handleAddTab = useCallback(() => {\n    const newTab: PluginUITab = {\n      id: nextTabId(),\n      pluginName: null,\n      name: 'New Tab',\n      uiUrl: null,\n    };\n    setTabs((prev) => [...prev, newTab]);\n    setActiveTabId(newTab.id);\n    setDropdownOpen(newTab.id);\n  }, []);\n\n  const handleCloseTab = useCallback(\n    (tabId: string) => {\n      setTabs((prev) => {\n        const next = prev.filter((t) => t.id !== tabId);\n        // If we closed the last tab, add a blank one\n        if (next.length === 0) {\n          const blank: PluginUITab = {\n            id: nextTabId(),\n            pluginName: null,\n            name: 'New Tab',\n            uiUrl: null,\n          };\n          next.push(blank);\n          setActiveTabId(blank.id);\n        } else if (activeTabId === tabId) {\n          // Select the previous tab or the first one\n          const closedIdx = prev.findIndex((t) => t.id === tabId);\n          const newIdx = Math.max(0, closedIdx - 1);\n          setActiveTabId(next[Math.min(newIdx, next.length - 1)].id);\n        }\n        return next;\n      });\n      // Clean up refs\n      delete iframeRefs.current[tabId];\n      setConnectionStatus((prev) => {\n        const next = { ...prev };\n        delete next[tabId];\n        return next;\n      });\n    },\n    [activeTabId]\n  );\n\n  const handleSelectPlugin = useCallback(\n    (tabId: string, pluginName: string) => {\n      const opt = availablePlugins.find((p) => p.pluginName === pluginName);\n      const uiUrl = buildUiUrl(pluginName, opt?.customUrl);\n      const displayName = getDisplayName(pluginName);\n      setTabs((prev) =>\n        prev.map((t) => (t.id === tabId ? { ...t, pluginName, name: displayName, uiUrl } : t))\n      );\n      setConnectionStatus((prev) => ({ ...prev, [tabId]: 'connecting' }));\n      setDropdownOpen(null);\n    },\n    [availablePlugins, buildUiUrl, getDisplayName]\n  );\n\n  // ── Auth ──────────────────────────────────────────────────────────\n\n  const sendAuthToIframe = useCallback(\n    (tabId: string) => {\n      const iframe = iframeRefs.current[tabId];\n      if (!iframe?.contentWindow || !agentApiKey || !tunnelUrl) return;\n      const targetOrigin = new URL(tunnelUrl).origin;\n      iframe.contentWindow.postMessage({ type: 'vibe-auth', apiKey: agentApiKey }, targetOrigin);\n    },\n    [agentApiKey, tunnelUrl]\n  );\n\n  const handleIframeLoad = useCallback(\n    (tabId: string) => {\n      setConnectionStatus((prev) => ({ ...prev, [tabId]: 'connected' }));\n      sendAuthToIframe(tabId);\n    },\n    [sendAuthToIframe]\n  );\n\n  const handleIframeError = useCallback((tabId: string) => {\n    setConnectionStatus((prev) => ({ ...prev, [tabId]: 'error' }));\n  }, []);\n\n  const handleReload = useCallback((tabId: string) => {\n    const iframe = iframeRefs.current[tabId];\n    if (iframe) {\n      setConnectionStatus((prev) => ({ ...prev, [tabId]: 'connecting' }));\n      const src = iframe.src;\n      iframe.src = 'about:blank';\n      requestAnimationFrame(() => {\n        iframe.src = src;\n      });\n    }\n  }, []);\n\n  const handleOpenExternal = useCallback(\n    (tabId: string) => {\n      const tab = tabs.find((t) => t.id === tabId);\n      if (!tab?.uiUrl) return;\n      window.open(tab.uiUrl, '_blank');\n    },\n    [tabs]\n  );\n\n  // ── Close dropdown on outside click ───────────────────────────────\n\n  useEffect(() => {\n    if (!dropdownOpen) return;\n    const handler = (e: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n        setDropdownOpen(null);\n      }\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\n  }, [dropdownOpen]);\n\n  // ── Drag-to-resize ────────────────────────────────────────────────\n\n  const handleResizeStart = useCallback(\n    (e: React.MouseEvent) => {\n      if (maximized) return;\n      e.preventDefault();\n      resizingRef.current = true;\n      startYRef.current = e.clientY;\n      startHeightRef.current = panelRef.current?.offsetHeight || 500;\n      document.body.style.cursor = 'ns-resize';\n      document.body.style.userSelect = 'none';\n    },\n    [maximized]\n  );\n\n  useEffect(() => {\n    const handleMouseMove = (e: MouseEvent) => {\n      if (!resizingRef.current) return;\n      const delta = startYRef.current - e.clientY;\n      const newHeight = Math.max(\n        250,\n        Math.min(startHeightRef.current + delta, window.innerHeight - 150)\n      );\n      setResizeHeight(newHeight);\n    };\n    const handleMouseUp = () => {\n      if (resizingRef.current) {\n        resizingRef.current = false;\n        document.body.style.cursor = '';\n        document.body.style.userSelect = '';\n      }\n    };\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n    return () => {\n      document.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseup', handleMouseUp);\n    };\n  }, []);\n\n  // ── Render helpers ────────────────────────────────────────────────\n\n  const renderStatusDot = (tabId: string) => {\n    const status = connectionStatus[tabId];\n    if (status === 'connected')\n      return <Wifi className=\"w-3 h-3 text-status-success-text shrink-0\" />;\n    if (status === 'error') return <WifiOff className=\"w-3 h-3 text-status-error-text shrink-0\" />;\n    if (status === 'connecting')\n      return <Loader2 className=\"w-3 h-3 animate-spin text-status-warning-text shrink-0\" />;\n    return <Monitor className=\"w-3 h-3 text-text-muted shrink-0\" />;\n  };\n\n  const panelHeight = maximized ? 'h-[calc(100vh-200px)]' : resizeHeight ? undefined : 'h-[500px]';\n  const panelStyle = !maximized && resizeHeight ? { height: `${resizeHeight}px` } : undefined;\n\n  return (\n    <div\n      ref={panelRef}\n      className=\"border border-border-default rounded-lg overflow-hidden bg-bg-sunken\"\n    >\n      {/* Drag handle */}\n      <div\n        onMouseDown={handleResizeStart}\n        className=\"h-1 cursor-ns-resize hover:bg-action-primary-bg/30 transition-colors flex items-center justify-center group\"\n        title=\"Drag to resize\"\n      >\n        <GripVertical className=\"w-4 h-3 text-text-muted opacity-0 group-hover:opacity-100 transition-opacity rotate-90\" />\n      </div>\n\n      {/* ── Tab Bar ────────────────────────────────────────────────── */}\n      <div className=\"flex items-center bg-bg-secondary border-b border-border-default overflow-x-auto\">\n        {tabs.map((tab) => {\n          const isActive = tab.id === activeTab?.id;\n          return (\n            <div\n              key={tab.id}\n              className={`group flex items-center gap-1.5 pl-3 pr-1.5 py-1.5 text-xs border-r border-border-subtle cursor-pointer transition-colors min-w-0 max-w-[200px] shrink-0 ${\n                isActive\n                  ? 'bg-bg-surface text-text-primary border-b-2 border-b-action-primary-bg'\n                  : 'text-text-secondary hover:text-text-primary hover:bg-bg-surface/50'\n              }`}\n              onClick={() => setActiveTabId(tab.id)}\n            >\n              {renderStatusDot(tab.id)}\n              <span className=\"truncate\">{tab.name}</span>\n              <button\n                onClick={(e) => {\n                  e.stopPropagation();\n                  handleCloseTab(tab.id);\n                }}\n                className=\"ml-auto opacity-0 group-hover:opacity-100 hover:text-status-error-text transition-opacity shrink-0 p-0.5\"\n                title=\"Close tab\"\n              >\n                <X className=\"w-3 h-3\" />\n              </button>\n            </div>\n          );\n        })}\n\n        {/* Add tab button */}\n        <button\n          onClick={handleAddTab}\n          className=\"flex items-center justify-center w-8 h-8 shrink-0 text-text-secondary hover:text-text-primary hover:bg-bg-surface/50 transition-colors\"\n          title=\"New tab\"\n        >\n          <Plus className=\"w-3.5 h-3.5\" />\n        </button>\n\n        {/* Spacer */}\n        <div className=\"flex-1 min-w-0\" />\n\n        {/* Global panel actions */}\n        <div className=\"flex items-center gap-0.5 px-2 shrink-0\">\n          {activeTab?.uiUrl && (\n            <>\n              <button\n                onClick={() => activeTab && handleReload(activeTab.id)}\n                className=\"p-1 text-text-secondary hover:text-text-primary transition-colors\"\n                title=\"Reload\"\n              >\n                <RotateCcw className=\"w-3.5 h-3.5\" />\n              </button>\n              <button\n                onClick={() => activeTab && handleOpenExternal(activeTab.id)}\n                className=\"p-1 text-text-secondary hover:text-text-primary transition-colors\"\n                title=\"Open in new browser tab\"\n              >\n                <ExternalLink className=\"w-3.5 h-3.5\" />\n              </button>\n            </>\n          )}\n          <button\n            onClick={() => {\n              setMaximized((prev) => !prev);\n              setResizeHeight(null);\n            }}\n            className=\"p-1 text-text-secondary hover:text-text-primary transition-colors\"\n            title={maximized ? 'Restore size' : 'Maximize'}\n          >\n            {maximized ? (\n              <Minimize2 className=\"w-3.5 h-3.5\" />\n            ) : (\n              <Maximize2 className=\"w-3.5 h-3.5\" />\n            )}\n          </button>\n        </div>\n      </div>\n\n      {/* ── Address Bar (Plugin Selector Dropdown) ─────────────────── */}\n      {activeTab && (\n        <div className=\"flex items-center gap-2 px-3 py-1.5 bg-bg-surface border-b border-border-default\">\n          <Monitor className=\"w-4 h-4 text-text-muted shrink-0\" />\n          <div className=\"relative flex-1 min-w-0\" ref={dropdownRef}>\n            <button\n              onClick={() => setDropdownOpen(dropdownOpen === activeTab.id ? null : activeTab.id)}\n              className=\"w-full flex items-center justify-between gap-2 px-3 py-1.5 text-sm bg-bg-sunken border border-border-default rounded-md text-left hover:border-action-primary-bg/50 focus:outline-none focus:ring-1 focus:ring-action-primary-bg transition-colors\"\n            >\n              <span\n                className={`truncate ${activeTab.pluginName ? 'text-text-primary' : 'text-text-muted'}`}\n              >\n                {activeTab.pluginName\n                  ? `${activeTab.name} — ${activeTab.pluginName}`\n                  : 'Select a plugin to load...'}\n              </span>\n              <ChevronDown\n                className={`w-3.5 h-3.5 text-text-muted shrink-0 transition-transform ${dropdownOpen === activeTab.id ? 'rotate-180' : ''}`}\n              />\n            </button>\n\n            {/* Dropdown list */}\n            {dropdownOpen === activeTab.id && (\n              <div className=\"absolute z-50 top-full left-0 right-0 mt-1 bg-bg-surface border border-border-default rounded-md shadow-lg overflow-hidden max-h-64 overflow-y-auto\">\n                {availablePlugins.length > 0 ? (\n                  availablePlugins.map((opt) => {\n                    const isSelected = activeTab.pluginName === opt.pluginName;\n                    return (\n                      <button\n                        key={opt.pluginName}\n                        onClick={() => handleSelectPlugin(activeTab.id, opt.pluginName)}\n                        className={`w-full text-left px-3 py-2.5 hover:bg-bg-sunken transition-colors border-b border-border-subtle last:border-b-0 ${\n                          isSelected ? 'bg-action-primary-bg/10' : ''\n                        }`}\n                      >\n                        <div className=\"flex items-center justify-between\">\n                          <span className=\"text-sm font-medium text-text-primary\">\n                            {opt.displayName}\n                          </span>\n                          {opt.version && (\n                            <span className=\"text-xs text-text-muted\">\n                              {opt.version === 'latest' ? opt.version : `v${opt.version}`}\n                            </span>\n                          )}\n                        </div>\n                        {opt.description && (\n                          <p className=\"text-xs text-text-secondary mt-0.5\">{opt.description}</p>\n                        )}\n                        <p className=\"text-xs text-text-muted font-mono mt-0.5\">{opt.pluginName}</p>\n                      </button>\n                    );\n                  })\n                ) : (\n                  <div className=\"px-3 py-4 text-center text-sm text-text-muted\">\n                    No UI plugins available\n                  </div>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n\n      {/* ── Content Area ───────────────────────────────────────────── */}\n      <div\n        className={`${panelHeight || ''} bg-bg-inverse text-text-inverse relative`}\n        style={panelStyle}\n      >\n        {tabs.map((tab) => (\n          <div\n            key={tab.id}\n            className={`absolute inset-0 ${tab.id === activeTab?.id ? 'block' : 'hidden'}`}\n          >\n            {!tab.pluginName ? (\n              // Empty state — no plugin selected\n              <div className=\"flex items-center justify-center h-full\">\n                <div className=\"text-center max-w-sm\">\n                  <Monitor className=\"w-10 h-10 text-text-secondary mx-auto mb-3\" />\n                  <p className=\"text-text-tertiary text-sm font-medium\">No plugin selected</p>\n                  <p className=\"text-text-secondary text-xs mt-1\">\n                    Use the dropdown above to pick a plugin UI to load in this tab.\n                  </p>\n                  <button\n                    onClick={() => setDropdownOpen(tab.id)}\n                    className=\"mt-4 px-4 py-2 bg-bg-sunken text-text-primary text-sm rounded-md hover:bg-bg-muted transition-colors inline-flex items-center gap-2\"\n                  >\n                    <ChevronDown className=\"w-3.5 h-3.5\" />\n                    Select Plugin\n                  </button>\n                </div>\n              </div>\n            ) : !tab.uiUrl ? (\n              // No tunnel\n              <div className=\"flex items-center justify-center h-full\">\n                <div className=\"text-center\">\n                  <AlertCircle className=\"w-8 h-8 text-text-secondary mx-auto mb-3\" />\n                  <p className=\"text-text-tertiary text-sm\">Agent tunnel not active</p>\n                  <p className=\"text-text-secondary text-xs mt-1\">\n                    Cannot load plugin UI without an active tunnel connection.\n                  </p>\n                </div>\n              </div>\n            ) : (\n              // Iframe\n              <iframe\n                ref={(el) => {\n                  iframeRefs.current[tab.id] = el;\n                }}\n                src={tab.uiUrl}\n                title={`Plugin UI — ${tab.name}`}\n                className=\"w-full h-full border-0\"\n                allow=\"clipboard-read; clipboard-write\"\n                onLoad={() => handleIframeLoad(tab.id)}\n                onError={() => handleIframeError(tab.id)}\n              />\n            )}\n          </div>\n        ))}\n\n        {/* Connection status overlay */}\n        {activeTab && connectionStatus[activeTab.id] === 'connecting' && activeTab.uiUrl && (\n          <div className=\"absolute bottom-3 right-3 flex items-center gap-2 px-3 py-1.5 bg-bg-overlay backdrop-blur-sm rounded-md text-xs text-status-warning-text pointer-events-none\">\n            <Loader2 className=\"w-3 h-3 animate-spin\" />\n            Connecting...\n          </div>\n        )}\n        {activeTab && connectionStatus[activeTab.id] === 'error' && activeTab.uiUrl && (\n          <div className=\"absolute bottom-3 right-3 flex items-center gap-2 px-3 py-1.5 bg-bg-overlay backdrop-blur-sm rounded-md text-xs text-status-error-text\">\n            <WifiOff className=\"w-3 h-3\" />\n            Disconnected\n            <button\n              onClick={() => handleReload(activeTab.id)}\n              className=\"underline hover:text-status-error-text/80 transition-colors\"\n            >\n              Reconnect\n            </button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/agents/backup/AgentBackupTab.d.ts

@@ -0,0 +1,11 @@
+/**
+ * AgentBackupTab — UI for managing SQLite database backups of a VibeControls agent.
+ * Talks directly to the agent's REST API via its tunnel URL.
+ */
+interface AgentBackupTabProps {
+    agentTunnelUrl: string;
+    agentApiKey: string;
+}
+export declare function AgentBackupTab({ agentTunnelUrl, agentApiKey }: AgentBackupTabProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AgentBackupTab.d.ts.map

package/dist/components/agents/backup/AgentBackupTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentBackupTab.d.ts","sourceRoot":"","sources":["../../../../src/components/agents/backup/AgentBackupTab.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AA2DH,UAAU,mBAAmB;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;CACrB;AAiBD,wBAAgB,cAAc,CAAC,EAAE,cAAc,EAAE,WAAW,EAAE,EAAE,mBAAmB,2CAqdlF"}