@burdenoff/microfe-vibecontrols 2026.511.1 → 2026.512.1

package/dist/components/ai/PluginHarnessPicker.js

@@ -2,94 +2,117 @@ import { useRemoveAgentPluginMutation as e } from "../../generated/wspace-operat
 import { Card as t } from "../shared/Card.js";
 import { usePluginAvailability as n } from "../../hooks/usePluginAvailability.js";
 import { getPluginMeta as r } from "../../constants/pluginCatalog.js";
-import { useCallback as i, useState as a } from "react";
-import { Check as o, Download as s, Loader2 as c, Puzzle as l, Trash2 as u } from "lucide-react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
+import { Check as c, CheckCircle2 as l, Download as u, Loader2 as d, Puzzle as f, Trash2 as p } from "lucide-react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/ai/PluginHarnessPicker.tsx
-function p({ packages: p, agentId: m, title: h, description: g, onChange: _ }) {
-	let { installed: v, installing: y, install: b, refetch: x, loading: S, error: C } = n(p, m), [w] = e(), [T, E] = a(null), [D, O] = a({}), k = i(async (e) => {
-		await b(e) && _?.();
-	}, [b, _]), A = i(async (e) => {
-		if (m) {
-			E(e), O((t) => ({
+function _({ packages: _, agentId: v, title: y, description: b, onChange: x }) {
+	let { installed: S, installing: C, install: w, refetch: T, loading: E, error: D } = n(_, v), [O] = e(), [k, A] = s(null), [j, M] = s({}), [N, P] = s({}), F = o(/* @__PURE__ */ new Map());
+	a(() => {
+		let e = F.current;
+		return () => {
+			for (let t of e.values()) clearTimeout(t);
+			e.clear();
+		};
+	}, []);
+	let I = i(async (e) => {
+		if (await w(e)) {
+			P((t) => ({
+				...t,
+				[e]: !0
+			}));
+			let t = F.current.get(e);
+			t && clearTimeout(t);
+			let n = setTimeout(() => {
+				P((t) => {
+					if (!t[e]) return t;
+					let n = { ...t };
+					return delete n[e], n;
+				}), F.current.delete(e);
+			}, 1500);
+			F.current.set(e, n), x?.();
+		}
+	}, [w, x]), L = i(async (e) => {
+		if (v) {
+			A(e), M((t) => ({
 				...t,
 				[e]: ""
 			}));
 			try {
-				let { data: t } = await w({ variables: {
-					agentId: m,
+				let { data: t } = await O({ variables: {
+					agentId: v,
 					packageName: e
 				} });
 				if (!t?.removeAgentPlugin.success) {
-					O((n) => ({
+					M((n) => ({
 						...n,
 						[e]: t?.removeAgentPlugin.error || "Remove failed"
 					}));
 					return;
 				}
-				await x(), _?.();
+				await T(), x?.();
 			} catch (t) {
-				O((n) => ({
+				M((n) => ({
 					...n,
 					[e]: t instanceof Error ? t.message : String(t)
 				}));
 			} finally {
-				E(null);
+				A(null);
 			}
 		}
 	}, [
-		m,
-		w,
-		x,
-		_
+		v,
+		O,
+		T,
+		x
 	]);
-	return p.length === 0 ? null : /* @__PURE__ */ f("section", {
+	return _.length === 0 ? null : /* @__PURE__ */ g("section", {
 		className: "flex flex-col gap-3",
 		"data-testid": "plugin-harness-picker",
 		children: [
-			(h || g) && /* @__PURE__ */ f("div", { children: [h && /* @__PURE__ */ d("h3", {
+			(y || b) && /* @__PURE__ */ g("div", { children: [y && /* @__PURE__ */ h("h3", {
 				className: "text-base font-semibold text-text-primary",
-				children: h
-			}), g && /* @__PURE__ */ d("p", {
+				children: y
+			}), b && /* @__PURE__ */ h("p", {
 				className: "text-sm text-text-secondary mt-1",
-				children: g
+				children: b
 			})] }),
-			C && /* @__PURE__ */ d("div", {
+			D && /* @__PURE__ */ h("div", {
 				role: "alert",
 				className: "rounded-md border border-status-error-border bg-status-error-bg px-3 py-2 text-xs text-status-error-text",
-				children: C
+				children: D
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ h("div", {
 				className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3",
-				children: p.map((e) => {
-					let n = r(e), i = !!v[e], a = y === e, p = T === e, h = a || p || S, g = D[e];
-					return /* @__PURE__ */ f(t, {
+				children: _.map((e) => {
+					let n = r(e), i = !!S[e], a = C === e, o = k === e, s = a || o || E, _ = !!N[e], y = j[e];
+					return /* @__PURE__ */ g(t, {
 						padding: "md",
 						className: "flex flex-col gap-3",
 						children: [
-							/* @__PURE__ */ f("div", {
+							/* @__PURE__ */ g("div", {
 								className: "flex items-start gap-3",
-								children: [/* @__PURE__ */ d("div", {
+								children: [/* @__PURE__ */ h("div", {
 									className: "flex-shrink-0 w-9 h-9 rounded-md bg-bg-sunken flex items-center justify-center",
-									children: /* @__PURE__ */ d(l, { className: "w-4 h-4 text-text-secondary" })
-								}), /* @__PURE__ */ f("div", {
+									children: /* @__PURE__ */ h(f, { className: "w-4 h-4 text-text-secondary" })
+								}), /* @__PURE__ */ g("div", {
 									className: "min-w-0 flex-1",
 									children: [
-										/* @__PURE__ */ f("div", {
+										/* @__PURE__ */ g("div", {
 											className: "flex items-start gap-2 flex-wrap",
-											children: [/* @__PURE__ */ d("h4", {
+											children: [/* @__PURE__ */ h("h4", {
 												className: "font-medium text-text-primary break-words max-w-[100ch]",
 												children: n.displayName
-											}), i && /* @__PURE__ */ f("span", {
+											}), i && /* @__PURE__ */ g("span", {
 												className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded bg-status-success-bg text-status-success-text shrink-0",
-												children: [/* @__PURE__ */ d(o, { className: "w-3 h-3" }), " installed"]
+												children: [/* @__PURE__ */ h(c, { className: "w-3 h-3" }), " installed"]
 											})]
 										}),
-										/* @__PURE__ */ d("p", {
+										/* @__PURE__ */ h("p", {
 											className: "text-sm text-text-secondary mt-0.5",
 											children: n.description
 										}),
-										/* @__PURE__ */ d("p", {
+										/* @__PURE__ */ h("p", {
 											className: "text-[10px] font-mono text-text-placeholder mt-1 break-all",
 											title: e,
 											children: e
@@ -97,33 +120,41 @@ function p({ packages: p, agentId: m, title: h, description: g, onChange: _ }) {
 									]
 								})]
 							}),
-							/* @__PURE__ */ d("div", {
+							/* @__PURE__ */ h("div", {
 								className: "flex items-center gap-2",
-								children: i ? /* @__PURE__ */ f("button", {
+								children: i && _ ? /* @__PURE__ */ g("button", {
+									type: "button",
+									disabled: !0,
+									className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md bg-status-success-bg text-status-success-text border border-status-success-border cursor-default",
+									"data-testid": `plugin-installed-${e}`,
+									"aria-live": "polite",
+									children: [/* @__PURE__ */ h(l, { className: "w-3.5 h-3.5" }), "Installed"]
+								}) : i ? /* @__PURE__ */ g("button", {
 									type: "button",
-									disabled: h || !m,
-									onClick: () => A(e),
+									disabled: s || !v,
+									onClick: () => L(e),
 									className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md border border-border-default text-text-secondary hover:border-status-error-border hover:text-status-error-text transition disabled:opacity-60 disabled:cursor-not-allowed",
 									"data-testid": `plugin-remove-${e}`,
-									children: [p ? /* @__PURE__ */ d(c, { className: "w-3.5 h-3.5 animate-spin" }) : /* @__PURE__ */ d(u, { className: "w-3.5 h-3.5" }), "Remove"]
-								}) : /* @__PURE__ */ f("button", {
+									children: [o ? /* @__PURE__ */ h(d, { className: "w-3.5 h-3.5 animate-spin" }) : /* @__PURE__ */ h(p, { className: "w-3.5 h-3.5" }), "Remove"]
+								}) : /* @__PURE__ */ h("button", {
 									type: "button",
-									disabled: h || !m,
-									onClick: () => k(e),
+									disabled: s || !v,
+									onClick: () => I(e),
 									className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition disabled:opacity-60 disabled:cursor-not-allowed",
 									"data-testid": `plugin-install-${e}`,
-									children: [a ? /* @__PURE__ */ d(c, { className: "w-3.5 h-3.5 animate-spin" }) : /* @__PURE__ */ d(s, { className: "w-3.5 h-3.5" }), "Install"]
+									"aria-busy": a,
+									children: a ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(d, { className: "w-3.5 h-3.5 animate-spin" }), "Installing…"] }) : /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(u, { className: "w-3.5 h-3.5" }), "Install"] })
 								})
 							}),
-							g && /* @__PURE__ */ d("p", {
+							y && /* @__PURE__ */ h("p", {
 								className: "text-xs text-status-error-text",
-								children: g
+								children: y
 							})
 						]
 					}, e);
 				})
 			}),
-			!m && /* @__PURE__ */ d("p", {
+			!v && /* @__PURE__ */ h("p", {
 				className: "text-xs text-text-muted",
 				children: "Select an agent to manage plugins."
 			})
@@ -131,6 +162,6 @@ function p({ packages: p, agentId: m, title: h, description: g, onChange: _ }) {
 	});
 }
 //#endregion
-export { p as PluginHarnessPicker };
+export { _ as PluginHarnessPicker };
 
 //# sourceMappingURL=PluginHarnessPicker.js.map

package/dist/components/ai/PluginHarnessPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"PluginHarnessPicker.js","names":[],"sources":["../../../src/components/ai/PluginHarnessPicker.tsx"],"sourcesContent":["/**\n * <PluginHarnessPicker />\n *\n * Grid of installable VibeControls agent plugins with per-card\n * Install / Installed / Remove state. Driven by the existing\n * `usePluginAvailability` hook (same code path as `<PluginGate>`), so\n * the Plugins tab on the Agent details page and this picker stay in\n * sync automatically.\n *\n * The default use-case is the AI workbench: once the base\n * `@vibecontrols/vibe-plugin-ai` plugin is installed, this picker lists\n * every AI provider harness (claude, codex, copilot, gemini, …) so the\n * user can add / remove harnesses without leaving the AI page.\n *\n * The component is feature-neutral — pass any `packages` array (e.g.\n * session providers, tunnel providers) to reuse the same UI.\n */\n\nimport { useCallback, useState } from 'react';\nimport { Check, Download, Loader2, Puzzle, Trash2 } from 'lucide-react';\nimport { useRemoveAgentPluginMutation } from '@/generated/wspace-operations';\nimport { usePluginAvailability } from '@/hooks/usePluginAvailability';\nimport { getPluginMeta } from '@/constants/pluginCatalog';\nimport { Card } from '../shared/Card';\n\nexport interface PluginHarnessPickerProps {\n  /** Package names to offer. Metadata is resolved via `getPluginMeta`. */\n  packages: readonly string[];\n  /** Active agent id. When null, the picker renders in a disabled state. */\n  agentId: string | null;\n  /** Optional section heading (rendered above the grid). */\n  title?: string;\n  /** Optional section description. */\n  description?: string;\n  /** Fired after a successful install or remove so parents can refetch. */\n  onChange?: () => void;\n}\n\nexport function PluginHarnessPicker({\n  packages,\n  agentId,\n  title,\n  description,\n  onChange,\n}: PluginHarnessPickerProps) {\n  const { installed, installing, install, refetch, loading, error } = usePluginAvailability(\n    packages,\n    agentId\n  );\n  const [removePlugin] = useRemoveAgentPluginMutation();\n  const [removingPkg, setRemovingPkg] = useState<string | null>(null);\n  const [removeError, setRemoveError] = useState<Record<string, string>>({});\n\n  const handleInstall = useCallback(\n    async (pkg: string) => {\n      const ok = await install(pkg);\n      if (ok) onChange?.();\n    },\n    [install, onChange]\n  );\n\n  const handleRemove = useCallback(\n    async (pkg: string) => {\n      if (!agentId) return;\n      setRemovingPkg(pkg);\n      setRemoveError((e) => ({ ...e, [pkg]: '' }));\n      try {\n        const { data } = await removePlugin({\n          variables: { agentId, packageName: pkg },\n        });\n        if (!data?.removeAgentPlugin.success) {\n          setRemoveError((e) => ({\n            ...e,\n            [pkg]: data?.removeAgentPlugin.error || 'Remove failed',\n          }));\n          return;\n        }\n        await refetch();\n        onChange?.();\n      } catch (e) {\n        setRemoveError((err) => ({\n          ...err,\n          [pkg]: e instanceof Error ? e.message : String(e),\n        }));\n      } finally {\n        setRemovingPkg(null);\n      }\n    },\n    [agentId, removePlugin, refetch, onChange]\n  );\n\n  if (packages.length === 0) return null;\n\n  return (\n    <section className=\"flex flex-col gap-3\" data-testid=\"plugin-harness-picker\">\n      {(title || description) && (\n        <div>\n          {title && <h3 className=\"text-base font-semibold text-text-primary\">{title}</h3>}\n          {description && <p className=\"text-sm text-text-secondary mt-1\">{description}</p>}\n        </div>\n      )}\n      {error && (\n        <div\n          role=\"alert\"\n          className=\"rounded-md border border-status-error-border bg-status-error-bg px-3 py-2 text-xs text-status-error-text\"\n        >\n          {error}\n        </div>\n      )}\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3\">\n        {packages.map((pkg) => {\n          const meta = getPluginMeta(pkg);\n          const isInstalled = !!installed[pkg];\n          const isInstalling = installing === pkg;\n          const isRemoving = removingPkg === pkg;\n          const isBusy = isInstalling || isRemoving || loading;\n          const err = removeError[pkg];\n          return (\n            <Card key={pkg} padding=\"md\" className=\"flex flex-col gap-3\">\n              <div className=\"flex items-start gap-3\">\n                <div className=\"flex-shrink-0 w-9 h-9 rounded-md bg-bg-sunken flex items-center justify-center\">\n                  <Puzzle className=\"w-4 h-4 text-text-secondary\" />\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex items-start gap-2 flex-wrap\">\n                    {/*\n                      Plugin display name must wrap freely up to a\n                      reasonable hard cap so the column never blows up\n                      the modal layout. break-words allows wrapping on\n                      arbitrary characters when a name has no spaces;\n                      max-w bound corresponds to ~100 char-cells (a\n                      generous upper bound on real-world display names).\n                    */}\n                    <h4 className=\"font-medium text-text-primary break-words max-w-[100ch]\">\n                      {meta.displayName}\n                    </h4>\n                    {isInstalled && (\n                      <span className=\"inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded bg-status-success-bg text-status-success-text shrink-0\">\n                        <Check className=\"w-3 h-3\" /> installed\n                      </span>\n                    )}\n                  </div>\n                  <p className=\"text-sm text-text-secondary mt-0.5\">{meta.description}</p>\n                  <p\n                    className=\"text-[10px] font-mono text-text-placeholder mt-1 break-all\"\n                    title={pkg}\n                  >\n                    {pkg}\n                  </p>\n                </div>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                {isInstalled ? (\n                  <button\n                    type=\"button\"\n                    disabled={isBusy || !agentId}\n                    onClick={() => handleRemove(pkg)}\n                    className=\"inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md border border-border-default text-text-secondary hover:border-status-error-border hover:text-status-error-text transition disabled:opacity-60 disabled:cursor-not-allowed\"\n                    data-testid={`plugin-remove-${pkg}`}\n                  >\n                    {isRemoving ? (\n                      <Loader2 className=\"w-3.5 h-3.5 animate-spin\" />\n                    ) : (\n                      <Trash2 className=\"w-3.5 h-3.5\" />\n                    )}\n                    Remove\n                  </button>\n                ) : (\n                  <button\n                    type=\"button\"\n                    disabled={isBusy || !agentId}\n                    onClick={() => handleInstall(pkg)}\n                    className=\"inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition disabled:opacity-60 disabled:cursor-not-allowed\"\n                    data-testid={`plugin-install-${pkg}`}\n                  >\n                    {isInstalling ? (\n                      <Loader2 className=\"w-3.5 h-3.5 animate-spin\" />\n                    ) : (\n                      <Download className=\"w-3.5 h-3.5\" />\n                    )}\n                    Install\n                  </button>\n                )}\n              </div>\n              {err && <p className=\"text-xs text-status-error-text\">{err}</p>}\n            </Card>\n          );\n        })}\n      </div>\n      {!agentId && <p className=\"text-xs text-text-muted\">Select an agent to manage plugins.</p>}\n    </section>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"PluginHarnessPicker.js","names":[],"sources":["../../../src/components/ai/PluginHarnessPicker.tsx"],"sourcesContent":["/**\n * <PluginHarnessPicker />\n *\n * Grid of installable VibeControls agent plugins with per-card\n * Install / Installed / Remove state. Driven by the existing\n * `usePluginAvailability` hook (same code path as `<PluginGate>`), so\n * the Plugins tab on the Agent details page and this picker stay in\n * sync automatically.\n *\n * The default use-case is the AI workbench: once the base\n * `@vibecontrols/vibe-plugin-ai` plugin is installed, this picker lists\n * every AI provider harness (claude, codex, copilot, gemini, …) so the\n * user can add / remove harnesses without leaving the AI page.\n *\n * The component is feature-neutral — pass any `packages` array (e.g.\n * session providers, tunnel providers) to reuse the same UI.\n */\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { Check, CheckCircle2, Download, Loader2, Puzzle, Trash2 } from 'lucide-react';\nimport { useRemoveAgentPluginMutation } from '@/generated/wspace-operations';\nimport { usePluginAvailability } from '@/hooks/usePluginAvailability';\nimport { getPluginMeta } from '@/constants/pluginCatalog';\nimport { Card } from '../shared/Card';\n\nexport interface PluginHarnessPickerProps {\n  /** Package names to offer. Metadata is resolved via `getPluginMeta`. */\n  packages: readonly string[];\n  /** Active agent id. When null, the picker renders in a disabled state. */\n  agentId: string | null;\n  /** Optional section heading (rendered above the grid). */\n  title?: string;\n  /** Optional section description. */\n  description?: string;\n  /** Fired after a successful install or remove so parents can refetch. */\n  onChange?: () => void;\n}\n\nexport function PluginHarnessPicker({\n  packages,\n  agentId,\n  title,\n  description,\n  onChange,\n}: PluginHarnessPickerProps) {\n  const { installed, installing, install, refetch, loading, error } = usePluginAvailability(\n    packages,\n    agentId\n  );\n  const [removePlugin] = useRemoveAgentPluginMutation();\n  const [removingPkg, setRemovingPkg] = useState<string | null>(null);\n  const [removeError, setRemoveError] = useState<Record<string, string>>({});\n  // Per-package \"just installed\" pulse — flips on for ~1.5s after a\n  // successful install so the button shows a clear success affordance\n  // (checkmark + \"Installed\") before the card transitions to its\n  // installed/Remove state. Without this the button silently flips from\n  // spinner to Remove and users miss the success signal.\n  const [justInstalled, setJustInstalled] = useState<Record<string, boolean>>({});\n  const justInstalledTimers = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());\n\n  useEffect(() => {\n    const timers = justInstalledTimers.current;\n    return () => {\n      for (const t of timers.values()) clearTimeout(t);\n      timers.clear();\n    };\n  }, []);\n\n  const handleInstall = useCallback(\n    async (pkg: string) => {\n      const ok = await install(pkg);\n      if (ok) {\n        setJustInstalled((prev) => ({ ...prev, [pkg]: true }));\n        const existing = justInstalledTimers.current.get(pkg);\n        if (existing) clearTimeout(existing);\n        const timer = setTimeout(() => {\n          setJustInstalled((prev) => {\n            if (!prev[pkg]) return prev;\n            const next = { ...prev };\n            delete next[pkg];\n            return next;\n          });\n          justInstalledTimers.current.delete(pkg);\n        }, 1500);\n        justInstalledTimers.current.set(pkg, timer);\n        onChange?.();\n      }\n    },\n    [install, onChange]\n  );\n\n  const handleRemove = useCallback(\n    async (pkg: string) => {\n      if (!agentId) return;\n      setRemovingPkg(pkg);\n      setRemoveError((e) => ({ ...e, [pkg]: '' }));\n      try {\n        const { data } = await removePlugin({\n          variables: { agentId, packageName: pkg },\n        });\n        if (!data?.removeAgentPlugin.success) {\n          setRemoveError((e) => ({\n            ...e,\n            [pkg]: data?.removeAgentPlugin.error || 'Remove failed',\n          }));\n          return;\n        }\n        await refetch();\n        onChange?.();\n      } catch (e) {\n        setRemoveError((err) => ({\n          ...err,\n          [pkg]: e instanceof Error ? e.message : String(e),\n        }));\n      } finally {\n        setRemovingPkg(null);\n      }\n    },\n    [agentId, removePlugin, refetch, onChange]\n  );\n\n  if (packages.length === 0) return null;\n\n  return (\n    <section className=\"flex flex-col gap-3\" data-testid=\"plugin-harness-picker\">\n      {(title || description) && (\n        <div>\n          {title && <h3 className=\"text-base font-semibold text-text-primary\">{title}</h3>}\n          {description && <p className=\"text-sm text-text-secondary mt-1\">{description}</p>}\n        </div>\n      )}\n      {error && (\n        <div\n          role=\"alert\"\n          className=\"rounded-md border border-status-error-border bg-status-error-bg px-3 py-2 text-xs text-status-error-text\"\n        >\n          {error}\n        </div>\n      )}\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3\">\n        {packages.map((pkg) => {\n          const meta = getPluginMeta(pkg);\n          const isInstalled = !!installed[pkg];\n          const isInstalling = installing === pkg;\n          const isRemoving = removingPkg === pkg;\n          const isBusy = isInstalling || isRemoving || loading;\n          const showJustInstalled = !!justInstalled[pkg];\n          const err = removeError[pkg];\n          return (\n            <Card key={pkg} padding=\"md\" className=\"flex flex-col gap-3\">\n              <div className=\"flex items-start gap-3\">\n                <div className=\"flex-shrink-0 w-9 h-9 rounded-md bg-bg-sunken flex items-center justify-center\">\n                  <Puzzle className=\"w-4 h-4 text-text-secondary\" />\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex items-start gap-2 flex-wrap\">\n                    {/*\n                      Plugin display name must wrap freely up to a\n                      reasonable hard cap so the column never blows up\n                      the modal layout. break-words allows wrapping on\n                      arbitrary characters when a name has no spaces;\n                      max-w bound corresponds to ~100 char-cells (a\n                      generous upper bound on real-world display names).\n                    */}\n                    <h4 className=\"font-medium text-text-primary break-words max-w-[100ch]\">\n                      {meta.displayName}\n                    </h4>\n                    {isInstalled && (\n                      <span className=\"inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded bg-status-success-bg text-status-success-text shrink-0\">\n                        <Check className=\"w-3 h-3\" /> installed\n                      </span>\n                    )}\n                  </div>\n                  <p className=\"text-sm text-text-secondary mt-0.5\">{meta.description}</p>\n                  <p\n                    className=\"text-[10px] font-mono text-text-placeholder mt-1 break-all\"\n                    title={pkg}\n                  >\n                    {pkg}\n                  </p>\n                </div>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                {isInstalled && showJustInstalled ? (\n                  <button\n                    type=\"button\"\n                    disabled\n                    className=\"inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md bg-status-success-bg text-status-success-text border border-status-success-border cursor-default\"\n                    data-testid={`plugin-installed-${pkg}`}\n                    aria-live=\"polite\"\n                  >\n                    <CheckCircle2 className=\"w-3.5 h-3.5\" />\n                    Installed\n                  </button>\n                ) : isInstalled ? (\n                  <button\n                    type=\"button\"\n                    disabled={isBusy || !agentId}\n                    onClick={() => handleRemove(pkg)}\n                    className=\"inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md border border-border-default text-text-secondary hover:border-status-error-border hover:text-status-error-text transition disabled:opacity-60 disabled:cursor-not-allowed\"\n                    data-testid={`plugin-remove-${pkg}`}\n                  >\n                    {isRemoving ? (\n                      <Loader2 className=\"w-3.5 h-3.5 animate-spin\" />\n                    ) : (\n                      <Trash2 className=\"w-3.5 h-3.5\" />\n                    )}\n                    Remove\n                  </button>\n                ) : (\n                  <button\n                    type=\"button\"\n                    disabled={isBusy || !agentId}\n                    onClick={() => handleInstall(pkg)}\n                    className=\"inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition disabled:opacity-60 disabled:cursor-not-allowed\"\n                    data-testid={`plugin-install-${pkg}`}\n                    aria-busy={isInstalling}\n                  >\n                    {isInstalling ? (\n                      <>\n                        <Loader2 className=\"w-3.5 h-3.5 animate-spin\" />\n                        Installing…\n                      </>\n                    ) : (\n                      <>\n                        <Download className=\"w-3.5 h-3.5\" />\n                        Install\n                      </>\n                    )}\n                  </button>\n                )}\n              </div>\n              {err && <p className=\"text-xs text-status-error-text\">{err}</p>}\n            </Card>\n          );\n        })}\n      </div>\n      {!agentId && <p className=\"text-xs text-text-muted\">Select an agent to manage plugins.</p>}\n    </section>\n  );\n}\n"],"mappings":"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"}