@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/components/shared/PluginGate.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+
+export interface PluginRequirement {
+    /** Package names that satisfy this requirement. */
+    packages: readonly string[];
+    /** 'all' (default) — every package must be installed. 'any' — at least one. */
+    mode?: 'all' | 'any';
+    /** Optional per-group eyebrow, title, description (fall back to defaults). */
+    eyebrow?: string;
+    title?: string;
+    description?: string;
+}
+export interface PluginGateProps {
+    /** Active agent id. When null, gate shows an "activate an agent" prompt. */
+    agentId: string | null;
+    /** Package names required for the wrapped surface to render. */
+    required?: readonly string[];
+    /** 'all' (default) — every package must be installed. 'any' — at least one. */
+    mode?: 'all' | 'any';
+    /** Card heading. */
+    title?: string;
+    /** Card subheading / instruction line. */
+    description?: string;
+    /** Optional eyebrow label above the title (e.g. "Plugin required"). */
+    eyebrow?: string;
+    /** Multiple requirement groups — fetched + evaluated in one pass. */
+    requirements?: readonly PluginRequirement[];
+    /** Pass to render a compact version (smaller vertical padding). */
+    compact?: boolean;
+    /** Optional callback fired after install succeeds and gate resolves. */
+    onInstalled?: () => void;
+    children: ReactNode;
+}
+export declare function PluginGate(props: PluginGateProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PluginGate.d.ts.map

package/dist/components/shared/PluginGate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginGate.d.ts","sourceRoot":"","sources":["../../../src/components/shared/PluginGate.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO7D,MAAM,WAAW,iBAAiB;IAChC,mDAAmD;IACnD,QAAQ,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5B,+EAA+E;IAC/E,IAAI,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACrB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,4EAA4E;IAC5E,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAGvB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B,+EAA+E;IAC/E,IAAI,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACrB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,qEAAqE;IACrE,YAAY,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAC;IAE5C,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAkCD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAmQhD"}

package/dist/components/shared/PluginGate.js

@@ -0,0 +1,182 @@
+import { useVibeNavigate as e } from "../../providers/VibeControlsProvider.js";
+import { QuotaExhaustedDialog as t } from "./QuotaExhaustedDialog.js";
+import { usePluginAvailability as n } from "../../hooks/usePluginAvailability.js";
+import { getPluginMeta as r } from "../../constants/pluginCatalog.js";
+import { useCallback as i, useMemo as a } from "react";
+import { AlertCircle as o, Clock as s, Download as c, Loader2 as l, Puzzle as u, RefreshCw as d, Server as f } from "lucide-react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/shared/PluginGate.tsx
+function g(e) {
+	return e.requirements && e.requirements.length > 0 ? e.requirements.map((e) => ({
+		packages: e.packages,
+		mode: e.mode ?? "all",
+		eyebrow: e.eyebrow,
+		title: e.title,
+		description: e.description
+	})) : e.required && e.required.length > 0 ? [{
+		packages: e.required,
+		mode: e.mode ?? "all",
+		eyebrow: e.eyebrow,
+		title: e.title,
+		description: e.description
+	}] : [];
+}
+function _(_) {
+	let { agentId: v, compact: y = !1, onInstalled: b, children: x } = _, S = a(() => g(_), [_]), { loading: C, initialLoading: w, installed: T, installing: E, install: D, error: O, errorIsAgentState: k, quotaExhausted: A, clearQuotaExhausted: j, refetch: M } = n(a(() => {
+		let e = /* @__PURE__ */ new Set();
+		for (let t of S) for (let n of t.packages) e.add(n);
+		return [...e];
+	}, [S]), v), N = e(), P = a(() => S.map((e) => e.mode === "any" ? e.packages.some((e) => !!T[e]) : e.packages.every((e) => !!T[e])), [S, T]), F = S.length > 0 && P.every(Boolean), I = i(async (e) => {
+		await D(e) && b?.();
+	}, [D, b]);
+	return v ? F ? /* @__PURE__ */ m(p, { children: x }) : w ? /* @__PURE__ */ m("div", {
+		className: `rounded-lg border border-border-default bg-bg-surface ${y ? "p-4" : "p-6"}`,
+		"data-testid": "plugin-gate-initial-loading",
+		children: /* @__PURE__ */ h("div", {
+			className: "flex items-center gap-2 text-sm text-text-secondary",
+			children: [/* @__PURE__ */ m(l, { className: "h-4 w-4 animate-spin" }), "Checking plugin availability on the agent…"]
+		})
+	}) : k ? /* @__PURE__ */ m("div", {
+		className: `rounded-lg border border-border-default bg-bg-surface ${y ? "p-4" : "p-6"}`,
+		children: /* @__PURE__ */ h("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ m(s, { className: "h-5 w-5 text-status-warning-text shrink-0 mt-0.5" }), /* @__PURE__ */ h("div", {
+				className: "flex-1 min-w-0 space-y-2",
+				children: [
+					/* @__PURE__ */ m("p", {
+						className: "text-sm font-semibold text-text-primary",
+						children: "Agent is not ready yet"
+					}),
+					/* @__PURE__ */ m("p", {
+						className: "text-sm text-text-secondary",
+						children: "Your agent is still starting up or waiting for gateway credentials. Plugin install is only available once the agent reaches the ready state."
+					}),
+					/* @__PURE__ */ m("p", {
+						className: "text-xs font-mono text-text-placeholder break-all",
+						children: O
+					}),
+					/* @__PURE__ */ h("div", {
+						className: "flex flex-wrap items-center gap-2 pt-1",
+						children: [/* @__PURE__ */ h("button", {
+							onClick: () => void M(),
+							disabled: C,
+							className: "inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50",
+							"data-testid": "plugin-gate-retry",
+							children: [/* @__PURE__ */ m(d, { className: `h-3.5 w-3.5 ${C ? "animate-spin" : ""}` }), "Retry"]
+						}), /* @__PURE__ */ m("button", {
+							onClick: () => N("/agents"),
+							className: "rounded-md border border-border-default px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary hover:border-border-strong transition-colors",
+							children: "Manage agents"
+						})]
+					})
+				]
+			})]
+		})
+	}) : /* @__PURE__ */ h("div", {
+		className: "space-y-3",
+		children: [S.map((e, t) => {
+			if (P[t]) return null;
+			let n = (e.mode, e.packages.filter((e) => !T[e])), i = e.mode === "any" ? "Install a plugin to continue" : e.packages.length === 1 ? "Plugin required" : "Plugins required", a = e.mode === "any" ? "Pick any one of the plugins below. Once installed, this surface will render automatically." : e.packages.length === 1 ? "This surface needs the following agent plugin installed." : "This surface needs the following agent plugins installed.";
+			return /* @__PURE__ */ m("div", {
+				className: `rounded-lg border border-border-default bg-bg-surface ${y ? "p-4" : "p-6"}`,
+				children: /* @__PURE__ */ h("div", {
+					className: "flex items-start gap-3",
+					children: [/* @__PURE__ */ m(u, { className: "h-5 w-5 text-action-primary-bg shrink-0 mt-0.5" }), /* @__PURE__ */ h("div", {
+						className: "flex-1 min-w-0",
+						children: [
+							e.eyebrow && /* @__PURE__ */ m("p", {
+								className: "text-xs uppercase tracking-wide text-text-secondary mb-1",
+								children: e.eyebrow
+							}),
+							/* @__PURE__ */ m("p", {
+								className: "text-sm font-semibold text-text-primary",
+								children: e.title ?? i
+							}),
+							/* @__PURE__ */ m("p", {
+								className: "mt-1 text-sm text-text-secondary",
+								children: e.description ?? a
+							}),
+							O && /* @__PURE__ */ h("div", {
+								role: "alert",
+								className: "mt-3 flex items-start gap-2 rounded-md border border-status-error-border bg-status-error-bg px-3 py-2 text-xs text-status-error-text",
+								children: [/* @__PURE__ */ m(o, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }), /* @__PURE__ */ m("span", { children: O })]
+							}),
+							/* @__PURE__ */ m("ul", {
+								className: "mt-4 space-y-2",
+								children: n.map((e) => {
+									let t = r(e), n = E === e, i = E !== null;
+									return /* @__PURE__ */ h("li", {
+										className: "flex items-center justify-between gap-3 rounded-md border border-border-default bg-bg-sunken px-3 py-2",
+										children: [/* @__PURE__ */ h("div", {
+											className: "min-w-0",
+											children: [
+												/* @__PURE__ */ m("p", {
+													className: "text-sm font-medium text-text-primary truncate",
+													children: t.displayName
+												}),
+												/* @__PURE__ */ m("p", {
+													className: "text-xs text-text-secondary truncate",
+													children: t.description
+												}),
+												/* @__PURE__ */ m("p", {
+													className: "text-[10px] font-mono text-text-placeholder truncate",
+													title: e,
+													children: e
+												})
+											]
+										}), /* @__PURE__ */ m("button", {
+											onClick: () => void I(e),
+											disabled: i || C,
+											className: "inline-flex items-center gap-1.5 whitespace-nowrap rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+											"data-testid": `plugin-install-${e}`,
+											children: n ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(l, { className: "h-3.5 w-3.5 animate-spin" }), "Installing…"] }) : /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(c, { className: "h-3.5 w-3.5" }), "Install"] })
+										})]
+									}, e);
+								})
+							}),
+							C && n.length === 0 && /* @__PURE__ */ h("div", {
+								className: "mt-4 flex items-center gap-2 text-xs text-text-secondary",
+								children: [/* @__PURE__ */ m(l, { className: "h-3.5 w-3.5 animate-spin" }), "Checking plugins…"]
+							})
+						]
+					})]
+				})
+			}, t);
+		}), /* @__PURE__ */ m(t, {
+			isOpen: A,
+			onClose: j,
+			onConfirm: () => {
+				j(), N("/billing");
+			},
+			title: "Plugin quota reached",
+			message: "You've used all plugin install quota on your current plan. Upgrade to install more plugins."
+		})]
+	}) : /* @__PURE__ */ m("div", {
+		className: `rounded-lg border border-border-default bg-bg-surface ${y ? "p-4" : "p-6"}`,
+		children: /* @__PURE__ */ h("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ m(f, { className: "h-5 w-5 text-text-secondary shrink-0 mt-0.5" }), /* @__PURE__ */ h("div", {
+				className: "flex-1 space-y-2",
+				children: [
+					/* @__PURE__ */ m("p", {
+						className: "text-sm font-semibold text-text-primary",
+						children: "No active agent"
+					}),
+					/* @__PURE__ */ m("p", {
+						className: "text-sm text-text-secondary",
+						children: "This surface needs an active vibecontrols agent with a tunnel URL and API key."
+					}),
+					/* @__PURE__ */ m("button", {
+						onClick: () => N("/agents"),
+						className: "px-3 py-1.5 text-xs font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors",
+						children: "Go to Agents"
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { _ as PluginGate };
+
+//# sourceMappingURL=PluginGate.js.map

package/dist/components/shared/PluginGate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginGate.js","names":[],"sources":["../../../src/components/shared/PluginGate.tsx"],"sourcesContent":["/**\n * PluginGate — gates a UI surface on one or more vibecontrols-agent plugins\n * being installed. If missing, renders a card listing each required plugin\n * with an Install button. Once satisfied, renders children.\n *\n * Supports two modes:\n *  - Single-group (backwards compat): `required` + `mode` + `title/description`.\n *  - Multi-group: `requirements={[{packages, mode, ...}, ...]}` — one fetch\n *    for all packages across all groups, unified loading state, stacked\n *    install cards for any unsatisfied group. Prevents the \"flicker cascade\"\n *    you get when nesting PluginGates (outer resolves, inner starts its own\n *    initial-loading spinner, etc.).\n */\n\nimport { useCallback, useMemo, type ReactNode } from 'react';\nimport { Puzzle, Download, Loader2, AlertCircle, Server, RefreshCw, Clock } from 'lucide-react';\nimport { usePluginAvailability } from '@/hooks/usePluginAvailability';\nimport { getPluginMeta } from '@/constants/pluginCatalog';\nimport { QuotaExhaustedDialog } from './QuotaExhaustedDialog';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\n\nexport interface PluginRequirement {\n  /** Package names that satisfy this requirement. */\n  packages: readonly string[];\n  /** 'all' (default) — every package must be installed. 'any' — at least one. */\n  mode?: 'all' | 'any';\n  /** Optional per-group eyebrow, title, description (fall back to defaults). */\n  eyebrow?: string;\n  title?: string;\n  description?: string;\n}\n\nexport interface PluginGateProps {\n  /** Active agent id. When null, gate shows an \"activate an agent\" prompt. */\n  agentId: string | null;\n\n  // ── Single-group API (backwards compat) ────────────────────────────────\n  /** Package names required for the wrapped surface to render. */\n  required?: readonly string[];\n  /** 'all' (default) — every package must be installed. 'any' — at least one. */\n  mode?: 'all' | 'any';\n  /** Card heading. */\n  title?: string;\n  /** Card subheading / instruction line. */\n  description?: string;\n  /** Optional eyebrow label above the title (e.g. \"Plugin required\"). */\n  eyebrow?: string;\n\n  // ── Multi-group API (preferred when gating multiple requirements) ──────\n  /** Multiple requirement groups — fetched + evaluated in one pass. */\n  requirements?: readonly PluginRequirement[];\n\n  /** Pass to render a compact version (smaller vertical padding). */\n  compact?: boolean;\n  /** Optional callback fired after install succeeds and gate resolves. */\n  onInstalled?: () => void;\n  children: ReactNode;\n}\n\ninterface ResolvedRequirement {\n  packages: readonly string[];\n  mode: 'all' | 'any';\n  eyebrow?: string;\n  title?: string;\n  description?: string;\n}\n\nfunction resolveRequirements(props: PluginGateProps): ResolvedRequirement[] {\n  if (props.requirements && props.requirements.length > 0) {\n    return props.requirements.map((r) => ({\n      packages: r.packages,\n      mode: r.mode ?? 'all',\n      eyebrow: r.eyebrow,\n      title: r.title,\n      description: r.description,\n    }));\n  }\n  if (props.required && props.required.length > 0) {\n    return [\n      {\n        packages: props.required,\n        mode: props.mode ?? 'all',\n        eyebrow: props.eyebrow,\n        title: props.title,\n        description: props.description,\n      },\n    ];\n  }\n  return [];\n}\n\nexport function PluginGate(props: PluginGateProps) {\n  const { agentId, compact = false, onInstalled, children } = props;\n  const resolved = useMemo(() => resolveRequirements(props), [props]);\n\n  const allPackages = useMemo(() => {\n    const set = new Set<string>();\n    for (const req of resolved) {\n      for (const pkg of req.packages) set.add(pkg);\n    }\n    return [...set];\n  }, [resolved]);\n\n  const {\n    loading,\n    initialLoading,\n    installed,\n    installing,\n    install,\n    error,\n    errorIsAgentState,\n    quotaExhausted,\n    clearQuotaExhausted,\n    refetch,\n  } = usePluginAvailability(allPackages, agentId);\n\n  const navigate = useVibeNavigate();\n\n  // Per-requirement satisfaction.\n  const requirementSatisfied = useMemo(\n    () =>\n      resolved.map((req) => {\n        if (req.mode === 'any') return req.packages.some((p) => !!installed[p]);\n        return req.packages.every((p) => !!installed[p]);\n      }),\n    [resolved, installed]\n  );\n\n  const allSatisfied = resolved.length > 0 && requirementSatisfied.every(Boolean);\n\n  const handleInstall = useCallback(\n    async (pkg: string) => {\n      const ok = await install(pkg);\n      if (ok) onInstalled?.();\n    },\n    [install, onInstalled]\n  );\n\n  // No agent available — universal precondition.\n  if (!agentId) {\n    return (\n      <div\n        className={`rounded-lg border border-border-default bg-bg-surface ${compact ? 'p-4' : 'p-6'}`}\n      >\n        <div className=\"flex items-start gap-3\">\n          <Server className=\"h-5 w-5 text-text-secondary shrink-0 mt-0.5\" />\n          <div className=\"flex-1 space-y-2\">\n            <p className=\"text-sm font-semibold text-text-primary\">No active agent</p>\n            <p className=\"text-sm text-text-secondary\">\n              This surface needs an active vibecontrols agent with a tunnel URL and API key.\n            </p>\n            <button\n              onClick={() => navigate('/agents')}\n              className=\"px-3 py-1.5 text-xs font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              Go to Agents\n            </button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  if (allSatisfied) {\n    return <>{children}</>;\n  }\n\n  // First-fetch loading state — one spinner for ALL requirements. Prevents\n  // the cascade you get with nested PluginGates (outer resolves -> inner\n  // starts a fresh initialLoading cycle). After the first fetch settles,\n  // subsequent refetches (focus, install, retry) fall through to the\n  // install card so context isn't replaced by a spinner.\n  if (initialLoading) {\n    return (\n      <div\n        className={`rounded-lg border border-border-default bg-bg-surface ${compact ? 'p-4' : 'p-6'}`}\n        data-testid=\"plugin-gate-initial-loading\"\n      >\n        <div className=\"flex items-center gap-2 text-sm text-text-secondary\">\n          <Loader2 className=\"h-4 w-4 animate-spin\" />\n          Checking plugin availability on the agent…\n        </div>\n      </div>\n    );\n  }\n\n  // Agent is not ready (initializing / awaiting-config / unreachable).\n  // The install button would just fail with the same message — instead,\n  // render a dedicated waiting state with a retry button and an escape\n  // hatch to the Agents page.\n  if (errorIsAgentState) {\n    return (\n      <div\n        className={`rounded-lg border border-border-default bg-bg-surface ${compact ? 'p-4' : 'p-6'}`}\n      >\n        <div className=\"flex items-start gap-3\">\n          <Clock className=\"h-5 w-5 text-status-warning-text shrink-0 mt-0.5\" />\n          <div className=\"flex-1 min-w-0 space-y-2\">\n            <p className=\"text-sm font-semibold text-text-primary\">Agent is not ready yet</p>\n            <p className=\"text-sm text-text-secondary\">\n              Your agent is still starting up or waiting for gateway credentials. Plugin install is\n              only available once the agent reaches the ready state.\n            </p>\n            <p className=\"text-xs font-mono text-text-placeholder break-all\">{error}</p>\n            <div className=\"flex flex-wrap items-center gap-2 pt-1\">\n              <button\n                onClick={() => void refetch()}\n                disabled={loading}\n                className=\"inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n                data-testid=\"plugin-gate-retry\"\n              >\n                <RefreshCw className={`h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}`} />\n                Retry\n              </button>\n              <button\n                onClick={() => navigate('/agents')}\n                className=\"rounded-md border border-border-default px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary hover:border-border-strong transition-colors\"\n              >\n                Manage agents\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Stack one install card per unsatisfied requirement. The user sees every\n  // outstanding dependency at once instead of resolving them one-by-one with\n  // a re-render between each.\n  return (\n    <div className=\"space-y-3\">\n      {resolved.map((req, idx) => {\n        if (requirementSatisfied[idx]) return null;\n        const packagesToOffer =\n          req.mode === 'any'\n            ? req.packages.filter((p) => !installed[p])\n            : req.packages.filter((p) => !installed[p]);\n        const defaultTitle =\n          req.mode === 'any'\n            ? 'Install a plugin to continue'\n            : req.packages.length === 1\n              ? 'Plugin required'\n              : 'Plugins required';\n        const defaultDescription =\n          req.mode === 'any'\n            ? 'Pick any one of the plugins below. Once installed, this surface will render automatically.'\n            : req.packages.length === 1\n              ? 'This surface needs the following agent plugin installed.'\n              : 'This surface needs the following agent plugins installed.';\n\n        return (\n          <div\n            key={idx}\n            className={`rounded-lg border border-border-default bg-bg-surface ${compact ? 'p-4' : 'p-6'}`}\n          >\n            <div className=\"flex items-start gap-3\">\n              <Puzzle className=\"h-5 w-5 text-action-primary-bg shrink-0 mt-0.5\" />\n              <div className=\"flex-1 min-w-0\">\n                {req.eyebrow && (\n                  <p className=\"text-xs uppercase tracking-wide text-text-secondary mb-1\">\n                    {req.eyebrow}\n                  </p>\n                )}\n                <p className=\"text-sm font-semibold text-text-primary\">\n                  {req.title ?? defaultTitle}\n                </p>\n                <p className=\"mt-1 text-sm text-text-secondary\">\n                  {req.description ?? defaultDescription}\n                </p>\n\n                {error && (\n                  <div\n                    role=\"alert\"\n                    className=\"mt-3 flex items-start gap-2 rounded-md border border-status-error-border bg-status-error-bg px-3 py-2 text-xs text-status-error-text\"\n                  >\n                    <AlertCircle className=\"h-3.5 w-3.5 mt-0.5 shrink-0\" />\n                    <span>{error}</span>\n                  </div>\n                )}\n\n                <ul className=\"mt-4 space-y-2\">\n                  {packagesToOffer.map((pkg) => {\n                    const meta = getPluginMeta(pkg);\n                    const isInstalling = installing === pkg;\n                    const isBusy = installing !== null;\n                    return (\n                      <li\n                        key={pkg}\n                        className=\"flex items-center justify-between gap-3 rounded-md border border-border-default bg-bg-sunken px-3 py-2\"\n                      >\n                        <div className=\"min-w-0\">\n                          <p className=\"text-sm font-medium text-text-primary truncate\">\n                            {meta.displayName}\n                          </p>\n                          <p className=\"text-xs text-text-secondary truncate\">{meta.description}</p>\n                          <p\n                            className=\"text-[10px] font-mono text-text-placeholder truncate\"\n                            title={pkg}\n                          >\n                            {pkg}\n                          </p>\n                        </div>\n                        <button\n                          onClick={() => void handleInstall(pkg)}\n                          disabled={isBusy || loading}\n                          className=\"inline-flex items-center gap-1.5 whitespace-nowrap rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n                          data-testid={`plugin-install-${pkg}`}\n                        >\n                          {isInstalling ? (\n                            <>\n                              <Loader2 className=\"h-3.5 w-3.5 animate-spin\" />\n                              Installing…\n                            </>\n                          ) : (\n                            <>\n                              <Download className=\"h-3.5 w-3.5\" />\n                              Install\n                            </>\n                          )}\n                        </button>\n                      </li>\n                    );\n                  })}\n                </ul>\n\n                {loading && packagesToOffer.length === 0 && (\n                  <div className=\"mt-4 flex items-center gap-2 text-xs text-text-secondary\">\n                    <Loader2 className=\"h-3.5 w-3.5 animate-spin\" />\n                    Checking plugins…\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        );\n      })}\n\n      <QuotaExhaustedDialog\n        isOpen={quotaExhausted}\n        onClose={clearQuotaExhausted}\n        onConfirm={() => {\n          clearQuotaExhausted();\n          navigate('/billing');\n        }}\n        title=\"Plugin quota reached\"\n        message=\"You've used all plugin install quota on your current plan. Upgrade to install more plugins.\"\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/shared/QuotaExhaustedDialog.d.ts

@@ -0,0 +1,12 @@
+interface QuotaExhaustedDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title?: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+}
+export declare function QuotaExhaustedDialog({ isOpen, onClose, onConfirm, title, message, confirmLabel, cancelLabel, }: QuotaExhaustedDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=QuotaExhaustedDialog.d.ts.map

package/dist/components/shared/QuotaExhaustedDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuotaExhaustedDialog.d.ts","sourceRoot":"","sources":["../../../src/components/shared/QuotaExhaustedDialog.tsx"],"names":[],"mappings":"AAGA,UAAU,yBAAyB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,WAAW,GACZ,EAAE,yBAAyB,2CAoB3B"}

package/dist/components/shared/QuotaExhaustedDialog.js

@@ -0,0 +1,21 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { ConfirmDialog as t } from "./ConfirmDialog.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/shared/QuotaExhaustedDialog.tsx
+function r({ isOpen: r, onClose: i, onConfirm: a, title: o, message: s, confirmLabel: c, cancelLabel: l }) {
+	let u = e();
+	return /* @__PURE__ */ n(t, {
+		isOpen: r,
+		onClose: i,
+		onConfirm: a,
+		title: o ?? u("vibecontrols.shared.quotaExhaustedDialog.title", "Quota Reached"),
+		message: s,
+		confirmLabel: c ?? u("vibecontrols.shared.quotaExhaustedDialog.viewBilling", "View Billing"),
+		cancelLabel: l ?? u("vibecontrols.shared.quotaExhaustedDialog.dismiss", "Dismiss"),
+		variant: "warning"
+	});
+}
+//#endregion
+export { r as QuotaExhaustedDialog };
+
+//# sourceMappingURL=QuotaExhaustedDialog.js.map

package/dist/components/shared/QuotaExhaustedDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuotaExhaustedDialog.js","names":[],"sources":["../../../src/components/shared/QuotaExhaustedDialog.tsx"],"sourcesContent":["import { ConfirmDialog } from './ConfirmDialog';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface QuotaExhaustedDialogProps {\n  isOpen: boolean;\n  onClose: () => void;\n  onConfirm: () => void;\n  title?: string;\n  message: string;\n  confirmLabel?: string;\n  cancelLabel?: string;\n}\n\nexport function QuotaExhaustedDialog({\n  isOpen,\n  onClose,\n  onConfirm,\n  title,\n  message,\n  confirmLabel,\n  cancelLabel,\n}: QuotaExhaustedDialogProps) {\n  const tr = useTr();\n  const resolvedTitle =\n    title ?? tr('vibecontrols.shared.quotaExhaustedDialog.title', 'Quota Reached');\n  const resolvedConfirmLabel =\n    confirmLabel ?? tr('vibecontrols.shared.quotaExhaustedDialog.viewBilling', 'View Billing');\n  const resolvedCancelLabel =\n    cancelLabel ?? tr('vibecontrols.shared.quotaExhaustedDialog.dismiss', 'Dismiss');\n  return (\n    <ConfirmDialog\n      isOpen={isOpen}\n      onClose={onClose}\n      onConfirm={onConfirm}\n      title={resolvedTitle}\n      message={message}\n      confirmLabel={resolvedConfirmLabel}\n      cancelLabel={resolvedCancelLabel}\n      variant=\"warning\"\n    />\n  );\n}\n"],"mappings":";;;;AAaA,SAAgB,EAAqB,EACnC,WACA,YACA,cACA,UACA,YACA,iBACA,kBAC4B;CAC5B,IAAM,IAAK,GAAO;AAOlB,QACE,kBAAC,GAAD;EACU;EACC;EACE;EACX,OAVF,KAAS,EAAG,kDAAkD,gBAAgB;EAWnE;EACT,cAVF,KAAgB,EAAG,wDAAwD,eAAe;EAWxF,aATF,KAAe,EAAG,oDAAoD,UAAU;EAU9E,SAAQ;EACR,CAAA"}

package/dist/components/shared/RequireAgentReachable.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+
+export interface RequireAgentReachableProps {
+    agentId: string | null;
+    children: ReactNode;
+    /**
+     * Optional install command surfaced from the agent record (when the
+     * backend exposes one) so users can copy-paste it to bring their agent
+     * online. Hidden when null/empty.
+     */
+    agentInstallCommand?: string | null;
+}
+export declare function RequireAgentReachable({ agentId, children, agentInstallCommand, }: RequireAgentReachableProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RequireAgentReachable.d.ts.map

package/dist/components/shared/RequireAgentReachable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequireAgentReachable.d.ts","sourceRoot":"","sources":["../../../src/components/shared/RequireAgentReachable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC;AAED,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,QAAQ,EACR,mBAAmB,GACpB,EAAE,0BAA0B,2CA+G5B"}

package/dist/components/shared/RequireAgentReachable.js

@@ -0,0 +1,69 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useVibeNavigate as t } from "../../providers/VibeControlsProvider.js";
+import { useAgentConnectivity as n } from "../../hooks/useAgentConnectivity.js";
+import { Loader2 as r, PlugZap as i, RefreshCw as a, Server as o } from "lucide-react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/shared/RequireAgentReachable.tsx
+function u({ agentId: u, children: d, agentInstallCommand: f }) {
+	let p = e(), m = t(), { status: h, probing: g, reachable: _, hint: v, retry: y } = n(u);
+	if (_) return /* @__PURE__ */ c(s, { children: d });
+	if (h === "unknown" || h === "probing") return /* @__PURE__ */ c("div", {
+		className: "rounded-lg border border-border-default bg-bg-surface p-6",
+		"data-testid": "agent-connectivity-probing",
+		children: /* @__PURE__ */ l("div", {
+			className: "flex items-center gap-2 text-sm text-text-secondary",
+			children: [/* @__PURE__ */ c(r, { className: "h-4 w-4 animate-spin" }), p("ai.connectivity.probing", "Checking agent connection…")]
+		})
+	});
+	let b = v === "agent_awaiting_config" ? "ai.connectivity.awaitingTitle" : v === "agent_initializing" ? "ai.connectivity.initializingTitle" : "ai.connectivity.unreachableTitle", x = v === "agent_awaiting_config" ? "ai.connectivity.awaitingMessage" : v === "agent_initializing" ? "ai.connectivity.initializingMessage" : "ai.connectivity.unreachableMessage", S = v === "agent_awaiting_config" ? p(b, "Agent waiting for configuration") : v === "agent_initializing" ? p(b, "Agent is starting up") : p(b, "Agent not connected"), C = v === "agent_awaiting_config" ? p(x, "Your agent is waiting for credentials. Finish setup in the Agents page, then come back here.") : v === "agent_initializing" ? p(x, "Your agent is still starting. Give it a moment, then click Retry connection.") : p(x, "Make sure the vibecontrols-agent is running locally, then refresh this page.");
+	return /* @__PURE__ */ c("div", {
+		role: "alert",
+		className: "rounded-lg border border-border-default bg-bg-surface p-6",
+		"data-testid": "agent-connectivity-unreachable",
+		children: /* @__PURE__ */ l("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ c(i, { className: "h-5 w-5 shrink-0 text-status-warning-text mt-0.5" }), /* @__PURE__ */ l("div", {
+				className: "flex-1 min-w-0 space-y-3",
+				children: [
+					/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
+						className: "text-sm font-semibold text-text-primary",
+						children: S
+					}), /* @__PURE__ */ c("p", {
+						className: "mt-1 text-sm text-text-secondary",
+						children: C
+					})] }),
+					f && f.trim().length > 0 && /* @__PURE__ */ l("div", {
+						className: "space-y-1",
+						children: [/* @__PURE__ */ c("p", {
+							className: "text-xs uppercase tracking-wide text-text-secondary",
+							children: p("ai.connectivity.installCommandLabel", "Install command")
+						}), /* @__PURE__ */ c("pre", {
+							className: "overflow-x-auto rounded-md border border-border-default bg-bg-sunken px-3 py-2 text-[11px] font-mono text-text-primary",
+							children: f
+						})]
+					}),
+					/* @__PURE__ */ l("div", {
+						className: "flex flex-wrap items-center gap-2 pt-1",
+						children: [/* @__PURE__ */ l("button", {
+							type: "button",
+							onClick: () => void y(),
+							disabled: g,
+							className: "inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50",
+							"data-testid": "agent-connectivity-retry",
+							children: [/* @__PURE__ */ c(a, { className: `h-3.5 w-3.5 ${g ? "animate-spin" : ""}` }), p("ai.connectivity.retry", "Retry connection")]
+						}), /* @__PURE__ */ l("button", {
+							type: "button",
+							onClick: () => m("/agents"),
+							className: "inline-flex items-center gap-1.5 rounded-md border border-border-default px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary hover:border-border-strong transition-colors",
+							children: [/* @__PURE__ */ c(o, { className: "h-3.5 w-3.5" }), p("ai.connectivity.manageAgents", "Manage agents")]
+						})]
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { u as RequireAgentReachable };
+
+//# sourceMappingURL=RequireAgentReachable.js.map

package/dist/components/shared/RequireAgentReachable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequireAgentReachable.js","names":[],"sources":["../../../src/components/shared/RequireAgentReachable.tsx"],"sourcesContent":["/**\n * RequireAgentReachable — connectivity boundary for AI surfaces.\n *\n * Wraps any AI sub-page that talks to the vibecontrols-agent and renders a\n * friendly \"agent not connected\" card whenever the agent is unreachable.\n * This prevents the install-button surfaces (PluginGate, PluginHarnessPicker)\n * from rendering their plugin lists with raw Bun fetch errors leaking into\n * the UI (e.g. \"Was there a typo in the url or port?\").\n *\n * Only renders children once the connectivity probe says the agent is\n * reachable. While the probe is in flight, shows a short loading indicator.\n * When unreachable, shows a card with retry + escape hatch to /agents.\n */\n\nimport type { ReactNode } from 'react';\nimport { Loader2, PlugZap, RefreshCw, Server } from 'lucide-react';\nimport { useAgentConnectivity } from '@/hooks/useAgentConnectivity';\nimport { useTr } from '../../shared/hooks/useTr';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\n\nexport interface RequireAgentReachableProps {\n  agentId: string | null;\n  children: ReactNode;\n  /**\n   * Optional install command surfaced from the agent record (when the\n   * backend exposes one) so users can copy-paste it to bring their agent\n   * online. Hidden when null/empty.\n   */\n  agentInstallCommand?: string | null;\n}\n\nexport function RequireAgentReachable({\n  agentId,\n  children,\n  agentInstallCommand,\n}: RequireAgentReachableProps) {\n  const tr = useTr();\n  const navigate = useVibeNavigate();\n  const { status, probing, reachable, hint, retry } = useAgentConnectivity(agentId);\n\n  if (reachable) {\n    return <>{children}</>;\n  }\n\n  // Initial probe in flight — show a slim loading row, not a full skeleton.\n  if (status === 'unknown' || status === 'probing') {\n    return (\n      <div\n        className=\"rounded-lg border border-border-default bg-bg-surface p-6\"\n        data-testid=\"agent-connectivity-probing\"\n      >\n        <div className=\"flex items-center gap-2 text-sm text-text-secondary\">\n          <Loader2 className=\"h-4 w-4 animate-spin\" />\n          {tr('ai.connectivity.probing', 'Checking agent connection…')}\n        </div>\n      </div>\n    );\n  }\n\n  // Unreachable — friendly card. Exact hint key drives the message string\n  // so we never echo raw error text into the DOM.\n  const titleKey =\n    hint === 'agent_awaiting_config'\n      ? 'ai.connectivity.awaitingTitle'\n      : hint === 'agent_initializing'\n        ? 'ai.connectivity.initializingTitle'\n        : 'ai.connectivity.unreachableTitle';\n  const messageKey =\n    hint === 'agent_awaiting_config'\n      ? 'ai.connectivity.awaitingMessage'\n      : hint === 'agent_initializing'\n        ? 'ai.connectivity.initializingMessage'\n        : 'ai.connectivity.unreachableMessage';\n\n  const title =\n    hint === 'agent_awaiting_config'\n      ? tr(titleKey, 'Agent waiting for configuration')\n      : hint === 'agent_initializing'\n        ? tr(titleKey, 'Agent is starting up')\n        : tr(titleKey, 'Agent not connected');\n\n  const message =\n    hint === 'agent_awaiting_config'\n      ? tr(\n          messageKey,\n          'Your agent is waiting for credentials. Finish setup in the Agents page, then come back here.'\n        )\n      : hint === 'agent_initializing'\n        ? tr(\n            messageKey,\n            'Your agent is still starting. Give it a moment, then click Retry connection.'\n          )\n        : tr(\n            messageKey,\n            'Make sure the vibecontrols-agent is running locally, then refresh this page.'\n          );\n\n  return (\n    <div\n      role=\"alert\"\n      className=\"rounded-lg border border-border-default bg-bg-surface p-6\"\n      data-testid=\"agent-connectivity-unreachable\"\n    >\n      <div className=\"flex items-start gap-3\">\n        <PlugZap className=\"h-5 w-5 shrink-0 text-status-warning-text mt-0.5\" />\n        <div className=\"flex-1 min-w-0 space-y-3\">\n          <div>\n            <p className=\"text-sm font-semibold text-text-primary\">{title}</p>\n            <p className=\"mt-1 text-sm text-text-secondary\">{message}</p>\n          </div>\n\n          {agentInstallCommand && agentInstallCommand.trim().length > 0 && (\n            <div className=\"space-y-1\">\n              <p className=\"text-xs uppercase tracking-wide text-text-secondary\">\n                {tr('ai.connectivity.installCommandLabel', 'Install command')}\n              </p>\n              <pre className=\"overflow-x-auto rounded-md border border-border-default bg-bg-sunken px-3 py-2 text-[11px] font-mono text-text-primary\">\n                {agentInstallCommand}\n              </pre>\n            </div>\n          )}\n\n          <div className=\"flex flex-wrap items-center gap-2 pt-1\">\n            <button\n              type=\"button\"\n              onClick={() => void retry()}\n              disabled={probing}\n              className=\"inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n              data-testid=\"agent-connectivity-retry\"\n            >\n              <RefreshCw className={`h-3.5 w-3.5 ${probing ? 'animate-spin' : ''}`} />\n              {tr('ai.connectivity.retry', 'Retry connection')}\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => navigate('/agents')}\n              className=\"inline-flex items-center gap-1.5 rounded-md border border-border-default px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary hover:border-border-strong transition-colors\"\n            >\n              <Server className=\"h-3.5 w-3.5\" />\n              {tr('ai.connectivity.manageAgents', 'Manage agents')}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA+BA,SAAgB,EAAsB,EACpC,YACA,aACA,0BAC6B;CAC7B,IAAM,IAAK,GAAO,EACZ,IAAW,GAAiB,EAC5B,EAAE,WAAQ,YAAS,cAAW,SAAM,aAAU,EAAqB,EAAQ;AAEjF,KAAI,EACF,QAAO,kBAAA,GAAA,EAAG,aAAY,CAAA;AAIxB,KAAI,MAAW,aAAa,MAAW,UACrC,QACE,kBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAEZ,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA,EAC3C,EAAG,2BAA2B,6BAA6B,CACxD;;EACF,CAAA;CAMV,IAAM,IACJ,MAAS,0BACL,kCACA,MAAS,uBACP,sCACA,oCACF,IACJ,MAAS,0BACL,oCACA,MAAS,uBACP,wCACA,sCAEF,IACJ,MAAS,0BACL,EAAG,GAAU,kCAAkC,GAC/C,MAAS,uBACP,EAAG,GAAU,uBAAuB,GACpC,EAAG,GAAU,sBAAsB,EAErC,IACJ,MAAS,0BACL,EACE,GACA,+FACD,GACD,MAAS,uBACP,EACE,GACA,+EACD,GACD,EACE,GACA,+EACD;AAET,QACE,kBAAC,OAAD;EACE,MAAK;EACL,WAAU;EACV,eAAY;YAEZ,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD,EAAS,WAAU,oDAAqD,CAAA,EACxE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;MAAG,WAAU;gBAA2C;MAAU,CAAA,EAClE,kBAAC,KAAD;MAAG,WAAU;gBAAoC;MAAY,CAAA,CACzD,EAAA,CAAA;KAEL,KAAuB,EAAoB,MAAM,CAAC,SAAS,KAC1D,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAG,uCAAuC,kBAAkB;OAC3D,CAAA,EACJ,kBAAC,OAAD;OAAK,WAAU;iBACZ;OACG,CAAA,CACF;;KAGR,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,KAAK,GAAO;OAC3B,UAAU;OACV,WAAU;OACV,eAAY;iBALd,CAOE,kBAAC,GAAD,EAAW,WAAW,eAAe,IAAU,iBAAiB,MAAQ,CAAA,EACvE,EAAG,yBAAyB,mBAAmB,CACzC;UACT,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,EAAS,UAAU;OAClC,WAAU;iBAHZ,CAKE,kBAAC,GAAD,EAAQ,WAAU,eAAgB,CAAA,EACjC,EAAG,gCAAgC,gBAAgB,CAC7C;SACL;;KACF;MACF;;EACF,CAAA"}

package/dist/components/shared/SearchInput.d.ts

@@ -0,0 +1,9 @@
+interface SearchInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+}
+export declare function SearchInput({ value, onChange, placeholder, className }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SearchInput.d.ts.map

package/dist/components/shared/SearchInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/shared/SearchInput.tsx"],"names":[],"mappings":"AAKA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAc,EAAE,EAAE,gBAAgB,2CAsC7F"}

package/dist/components/shared/SearchInput.js

@@ -0,0 +1,47 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useRef as t } from "react";
+import { Search as n, X as r } from "lucide-react";
+import { AnimatePresence as i, motion as a } from "framer-motion";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/shared/SearchInput.tsx
+function c({ value: c, onChange: l, placeholder: u, className: d = "" }) {
+	let f = e(), p = u ?? f("vibecontrols.shared.searchInput.placeholder", "Search..."), m = t(null);
+	return /* @__PURE__ */ s("div", {
+		className: `relative ${d}`,
+		children: [
+			/* @__PURE__ */ o(n, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-secondary" }),
+			/* @__PURE__ */ o("input", {
+				ref: m,
+				type: "text",
+				value: c,
+				onChange: (e) => l(e.target.value),
+				placeholder: p,
+				className: "w-full pl-10 pr-10 py-2 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg focus:border-transparent transition-all"
+			}),
+			/* @__PURE__ */ o(i, { children: c && /* @__PURE__ */ o(a.button, {
+				initial: {
+					opacity: 0,
+					scale: .8
+				},
+				animate: {
+					opacity: 1,
+					scale: 1
+				},
+				exit: {
+					opacity: 0,
+					scale: .8
+				},
+				transition: { duration: .15 },
+				onClick: () => {
+					l(""), m.current?.focus();
+				},
+				className: "absolute right-3 top-1/2 -translate-y-1/2 p-0.5 rounded hover:bg-bg-elevated transition-colors",
+				children: /* @__PURE__ */ o(r, { className: "w-4 h-4 text-text-secondary" })
+			}) })
+		]
+	});
+}
+//#endregion
+export { c as SearchInput };
+
+//# sourceMappingURL=SearchInput.js.map

package/dist/components/shared/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/shared/SearchInput.tsx"],"sourcesContent":["import { Search, X } from 'lucide-react';\nimport { useRef } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface SearchInputProps {\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  className?: string;\n}\n\nexport function SearchInput({ value, onChange, placeholder, className = '' }: SearchInputProps) {\n  const tr = useTr();\n  const resolvedPlaceholder =\n    placeholder ?? tr('vibecontrols.shared.searchInput.placeholder', 'Search...');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleClear = () => {\n    onChange('');\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div className={`relative ${className}`}>\n      <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-secondary\" />\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        placeholder={resolvedPlaceholder}\n        className=\"w-full pl-10 pr-10 py-2 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg focus:border-transparent transition-all\"\n      />\n      <AnimatePresence>\n        {value && (\n          <motion.button\n            initial={{ opacity: 0, scale: 0.8 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.8 }}\n            transition={{ duration: 0.15 }}\n            onClick={handleClear}\n            className=\"absolute right-3 top-1/2 -translate-y-1/2 p-0.5 rounded hover:bg-bg-elevated transition-colors\"\n          >\n            <X className=\"w-4 h-4 text-text-secondary\" />\n          </motion.button>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAYA,SAAgB,EAAY,EAAE,UAAO,aAAU,gBAAa,eAAY,MAAwB;CAC9F,IAAM,IAAK,GAAO,EACZ,IACJ,KAAe,EAAG,+CAA+C,YAAY,EACzE,IAAW,EAAyB,KAAK;AAO/C,QACE,kBAAC,OAAD;EAAK,WAAW,YAAY;YAA5B;GACE,kBAAC,GAAD,EAAQ,WAAU,wEAAyE,CAAA;GAC3F,kBAAC,SAAD;IACE,KAAK;IACL,MAAK;IACE;IACP,WAAW,MAAM,EAAS,EAAE,OAAO,MAAM;IACzC,aAAa;IACb,WAAU;IACV,CAAA;GACF,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,EAAO,QAAR;IACE,SAAS;KAAE,SAAS;KAAG,OAAO;KAAK;IACnC,SAAS;KAAE,SAAS;KAAG,OAAO;KAAG;IACjC,MAAM;KAAE,SAAS;KAAG,OAAO;KAAK;IAChC,YAAY,EAAE,UAAU,KAAM;IAC9B,eAvBgB;AAExB,KADA,EAAS,GAAG,EACZ,EAAS,SAAS,OAAO;;IAsBjB,WAAU;cAEV,kBAAC,GAAD,EAAG,WAAU,+BAAgC,CAAA;IAC/B,CAAA,EAEF,CAAA;GACd"}

package/dist/components/shared/SearchableSelect.d.ts

@@ -0,0 +1,48 @@
+export interface SearchableSelectOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface SearchableSelectProps {
+    /** Label shown as prefix in the trigger button */
+    label?: string;
+    /** Placeholder when nothing is selected */
+    placeholder?: string;
+    /** Available options */
+    options: SearchableSelectOption[];
+    /** Currently selected value */
+    value: string;
+    /** Callback when value changes */
+    onChange: (value: string) => void;
+    /** Placeholder for the search input inside the dropdown */
+    searchPlaceholder?: string;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Additional CSS class for the root wrapper */
+    className?: string;
+    /** Whether to show a clear button when a non-default value is selected */
+    clearable?: boolean;
+    /** The value that represents "nothing selected" (defaults to empty string) */
+    emptyValue?: string;
+    /** Which edge of the trigger button the dropdown aligns to (default: 'left') */
+    dropdownAlign?: 'left' | 'right';
+}
+/**
+ * SearchableSelect — A dropdown with a built-in search input for filtering
+ * long option lists. Keyboard accessible (arrow keys, enter, escape).
+ *
+ * @example
+ * ```tsx
+ * <SearchableSelect
+ *   label="Agent"
+ *   placeholder="Select an agent"
+ *   options={agentOptions}
+ *   value={selectedAgentId}
+ *   onChange={setSelectedAgentId}
+ *   searchPlaceholder="Search agents..."
+ * />
+ * ```
+ */
+export declare function SearchableSelect({ label, placeholder, options, value, onChange, searchPlaceholder, disabled, className, clearable, emptyValue, dropdownAlign, }: SearchableSelectProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SearchableSelect.d.ts.map

package/dist/components/shared/SearchableSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchableSelect.d.ts","sourceRoot":"","sources":["../../../src/components/shared/SearchableSelect.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,OAAO,EAAE,sBAAsB,EAAE,CAAC;IAClC,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gFAAgF;IAChF,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAClC;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,QAAgB,EAChB,SAAc,EACd,SAAiB,EACjB,UAAe,EACf,aAAsB,GACvB,EAAE,qBAAqB,2CAwTvB"}