@burdenoff/microfe-vibecontrols 2026.602.5 → 2026.602.7

package/dist/components/ai/PluginHarnessPicker.js

@@ -6,64 +6,64 @@ import { useCallback as i, useEffect as a, useRef as o, useState as s } from "re
 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 _({ 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());
+function _({ packages: _, agentId: v, title: y, description: b, onChange: x, renderInstalledAction: S }) {
+	let { installed: C, installing: w, install: T, refetch: E, loading: D, error: O } = n(_, v), [k] = e(), [A, j] = s(null), [M, N] = s({}), [P, F] = s({}), I = o(/* @__PURE__ */ new Map());
 	a(() => {
-		let e = F.current;
+		let e = I.current;
 		return () => {
 			for (let t of e.values()) clearTimeout(t);
 			e.clear();
 		};
 	}, []);
-	let I = i(async (e) => {
-		if (await w(e)) {
-			P((t) => ({
+	let L = i(async (e) => {
+		if (await T(e)) {
+			F((t) => ({
 				...t,
 				[e]: !0
 			}));
-			let t = F.current.get(e);
+			let t = I.current.get(e);
 			t && clearTimeout(t);
 			let n = setTimeout(() => {
-				P((t) => {
+				F((t) => {
 					if (!t[e]) return t;
 					let n = { ...t };
 					return delete n[e], n;
-				}), F.current.delete(e);
+				}), I.current.delete(e);
 			}, 1500);
-			F.current.set(e, n), x?.();
+			I.current.set(e, n), x?.();
 		}
-	}, [w, x]), L = i(async (e) => {
+	}, [T, x]), R = i(async (e) => {
 		if (v) {
-			A(e), M((t) => ({
+			j(e), N((t) => ({
 				...t,
 				[e]: ""
 			}));
 			try {
-				let { data: t } = await O({ variables: {
+				let { data: t } = await k({ variables: {
 					agentId: v,
 					packageName: e
 				} });
 				if (!t?.removeAgentPlugin.success) {
-					M((n) => ({
+					N((n) => ({
 						...n,
 						[e]: t?.removeAgentPlugin.error || "Remove failed"
 					}));
 					return;
 				}
-				await T(), x?.();
+				await E(), x?.();
 			} catch (t) {
-				M((n) => ({
+				N((n) => ({
 					...n,
 					[e]: t instanceof Error ? t.message : String(t)
 				}));
 			} finally {
-				A(null);
+				j(null);
 			}
 		}
 	}, [
 		v,
-		O,
-		T,
+		k,
+		E,
 		x
 	]);
 	return _.length === 0 ? null : /* @__PURE__ */ g("section", {
@@ -77,15 +77,15 @@ function _({ packages: _, agentId: v, title: y, description: b, onChange: x }) {
 				className: "text-sm text-text-secondary mt-1",
 				children: b
 			})] }),
-			D && /* @__PURE__ */ h("div", {
+			O && /* @__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: D
+				children: O
 			}),
 			/* @__PURE__ */ h("div", {
 				className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3",
 				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];
+					let n = r(e), i = !!C[e], a = w === e, o = A === e, s = a || o || D, _ = !!P[e], y = M[e];
 					return /* @__PURE__ */ g(t, {
 						padding: "md",
 						className: "flex flex-col gap-3",
@@ -120,31 +120,35 @@ function _({ packages: _, agentId: v, title: y, description: b, onChange: x }) {
 									]
 								})]
 							}),
-							/* @__PURE__ */ h("div", {
+							/* @__PURE__ */ g("div", {
 								className: "flex items-center gap-2",
-								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: "size-3.5" }), "Installed"]
-								}) : i ? /* @__PURE__ */ g("button", {
-									type: "button",
-									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: [o ? /* @__PURE__ */ h(d, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ h(p, { className: "size-3.5" }), "Remove"]
-								}) : /* @__PURE__ */ h("button", {
-									type: "button",
-									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}`,
-									"aria-busy": a,
-									children: a ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(d, { className: "size-3.5 animate-spin" }), "Installing…"] }) : /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(u, { className: "size-3.5" }), "Install"] })
-								})
+								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: "size-3.5" }), "Installed"]
+									}) : i ? /* @__PURE__ */ g("button", {
+										type: "button",
+										disabled: s || !v,
+										onClick: () => R(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: [o ? /* @__PURE__ */ h(d, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ h(p, { className: "size-3.5" }), "Remove"]
+									}) : null,
+									i && !_ && S?.(e),
+									!i && /* @__PURE__ */ h("button", {
+										type: "button",
+										disabled: s || !v,
+										onClick: () => L(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}`,
+										"aria-busy": a,
+										children: a ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(d, { className: "size-3.5 animate-spin" }), "Installing…"] }) : /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(u, { className: "size-3.5" }), "Install"] })
+									})
+								]
 							}),
 							y && /* @__PURE__ */ h("p", {
 								className: "text-xs text-status-error-text",

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, 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  // Plugins are agent-wide (BOFF-2612); no profile threading needed.\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 size-9 rounded-md bg-bg-sunken flex items-center justify-center\">\n                  <Puzzle className=\"size-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=\"size-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=\"size-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=\"size-3.5 animate-spin\" />\n                    ) : (\n                      <Trash2 className=\"size-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=\"size-3.5 animate-spin\" />\n                        Installing…\n                      </>\n                    ) : (\n                      <>\n                        <Download className=\"size-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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"}
+{"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, type ReactNode } 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   * Optional per-card action slot, rendered alongside the Remove button when\n   * a package is installed. Lets a feature (e.g. the Security tab) attach a\n   * contextual action — like \"Run scan\" — without coupling this generic\n   * picker to that feature. Receives the installed package name.\n   */\n  renderInstalledAction?: (pkg: string) => ReactNode;\n}\n\nexport function PluginHarnessPicker({\n  packages,\n  agentId,\n  title,\n  description,\n  onChange,\n  renderInstalledAction,\n}: PluginHarnessPickerProps) {\n  // Plugins are agent-wide (BOFF-2612); no profile threading needed.\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 size-9 rounded-md bg-bg-sunken flex items-center justify-center\">\n                  <Puzzle className=\"size-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=\"size-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=\"size-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=\"size-3.5 animate-spin\" />\n                    ) : (\n                      <Trash2 className=\"size-3.5\" />\n                    )}\n                    Remove\n                  </button>\n                ) : null}\n                {isInstalled && !showJustInstalled && renderInstalledAction?.(pkg)}\n                {!isInstalled && (\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=\"size-3.5 animate-spin\" />\n                        Installing…\n                      </>\n                    ) : (\n                      <>\n                        <Download className=\"size-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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"}

package/dist/components/security/SecurityRunButton.js

@@ -0,0 +1,60 @@
+import { SECURITY_STAGE_BY_PACKAGE as e } from "../../constants/pluginCatalog.js";
+import { SecurityAgentError as t } from "./agentClient.js";
+import { useStartSecurityScanMutation as n } from "./hooks.js";
+import { useCallback as r, useState as i } from "react";
+import { AlertCircle as a, Loader2 as o, Play as s } from "lucide-react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/security/SecurityRunButton.tsx
+function d({ pkg: d, vibeId: f, workspaceId: p, repoUrl: m, repoLocalPath: h, commit: g, agentId: _, profile: v }) {
+	let y = e[d], { mutateAsync: b, isPending: x } = n({
+		agentId: _,
+		profile: v
+	}), [S, C] = i(null), w = r(async () => {
+		if (!(!y || !_)) {
+			C(null);
+			try {
+				await b({
+					vibeId: f,
+					workspaceId: p,
+					repoUrl: m,
+					repoLocalPath: h,
+					commit: g,
+					stage: y
+				});
+			} catch (e) {
+				C(e instanceof t || e instanceof Error ? e.message : "Failed to start scan");
+			}
+		}
+	}, [
+		y,
+		_,
+		b,
+		f,
+		p,
+		m,
+		h,
+		g
+	]);
+	return y ? /* @__PURE__ */ u("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ l("button", {
+			type: "button",
+			disabled: x || !_,
+			onClick: () => void w(),
+			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": `security-run-${d}`,
+			"aria-busy": x,
+			children: x ? /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(o, { className: "size-3.5 animate-spin" }), "Running…"] }) : /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(s, { className: "size-3.5" }), "Run scan"] })
+		}), S && /* @__PURE__ */ u("p", {
+			className: "inline-flex items-start gap-1 text-xs text-status-error-text",
+			children: [/* @__PURE__ */ l(a, {
+				className: "size-3.5 mt-px shrink-0",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ l("span", { children: S })]
+		})]
+	}) : null;
+}
+//#endregion
+export { d as SecurityRunButton };
+
+//# sourceMappingURL=SecurityRunButton.js.map

package/dist/components/security/SecurityRunButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecurityRunButton.js","names":[],"sources":["../../../src/components/security/SecurityRunButton.tsx"],"sourcesContent":["/**\n * Per-stage \"Run scan\" control for an installed security provider plugin.\n *\n * Mounted as the `renderInstalledAction` slot of `<PluginHarnessPicker>` on\n * the Security tab: each installed provider card gets a Run button that\n * kicks off a scan for that provider's lifecycle stage against the current\n * vibe. The scan runs on the agent (over the svc GraphQL proxy); on success\n * the start mutation invalidates the `['security', agentId, profile, …]`\n * query family — which includes `useSecurityRecentScansQuery` — so the new\n * run surfaces in `<SecurityScanList>` with its conclusion + severity counts.\n *\n * Errors are surfaced inline (a small chip under the button), matching how\n * `<PluginHarnessPicker>` and `<SecurityScanList>` render their failures —\n * never a raw error toast.\n */\nimport { useCallback, useState, type ReactElement } from 'react';\nimport { AlertCircle, Loader2, Play } from 'lucide-react';\n\nimport { SECURITY_STAGE_BY_PACKAGE } from '@/constants/pluginCatalog';\nimport { useStartSecurityScanMutation, type UseSecurityAgentContext } from './hooks';\nimport { SecurityAgentError, type AgentStage } from './agentClient';\n\nexport interface SecurityRunButtonProps extends UseSecurityAgentContext {\n  /** The installed security provider package this button runs. */\n  pkg: string;\n  /** Current vibe id. */\n  vibeId: string;\n  /** Workspace the vibe belongs to (required by the agent scan contract). */\n  workspaceId: string;\n  /** Git remote → recorded as `repoUrl` on the run. */\n  repoUrl: string;\n  /** Local checkout path the provider tooling runs against. */\n  repoLocalPath: string;\n  /** Best-effort commit ref (the vibe's git branch). */\n  commit: string;\n}\n\nexport function SecurityRunButton({\n  pkg,\n  vibeId,\n  workspaceId,\n  repoUrl,\n  repoLocalPath,\n  commit,\n  agentId,\n  profile,\n}: SecurityRunButtonProps): ReactElement | null {\n  const stage = SECURITY_STAGE_BY_PACKAGE[pkg] as AgentStage | undefined;\n  const { mutateAsync, isPending } = useStartSecurityScanMutation({ agentId, profile });\n  const [error, setError] = useState<string | null>(null);\n\n  const handleRun = useCallback(async () => {\n    if (!stage || !agentId) return;\n    setError(null);\n    try {\n      await mutateAsync({\n        vibeId,\n        workspaceId,\n        repoUrl,\n        repoLocalPath,\n        commit,\n        stage,\n      });\n      // On success the mutation invalidates the security query family, which\n      // refetches the recent-scans list — no manual refetch needed here.\n    } catch (err) {\n      const message =\n        err instanceof SecurityAgentError || err instanceof Error\n          ? err.message\n          : 'Failed to start scan';\n      setError(message);\n    }\n  }, [stage, agentId, mutateAsync, vibeId, workspaceId, repoUrl, repoLocalPath, commit]);\n\n  // Provider package isn't mapped to a known stage — can't run it.\n  if (!stage) return null;\n\n  const disabled = isPending || !agentId;\n\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <button\n        type=\"button\"\n        disabled={disabled}\n        onClick={() => void handleRun()}\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={`security-run-${pkg}`}\n        aria-busy={isPending}\n      >\n        {isPending ? (\n          <>\n            <Loader2 className=\"size-3.5 animate-spin\" />\n            Running…\n          </>\n        ) : (\n          <>\n            <Play className=\"size-3.5\" />\n            Run scan\n          </>\n        )}\n      </button>\n      {error && (\n        <p className=\"inline-flex items-start gap-1 text-xs text-status-error-text\">\n          <AlertCircle className=\"size-3.5 mt-px shrink-0\" aria-hidden=\"true\" />\n          <span>{error}</span>\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAqCA,SAAgB,EAAkB,EAChC,QACA,WACA,gBACA,YACA,kBACA,WACA,YACA,cAC8C;CAC9C,IAAM,IAAQ,EAA0B,IAClC,EAAE,gBAAa,iBAAc,EAA6B;EAAE;EAAS;EAAS,CAAC,EAC/E,CAAC,GAAO,KAAY,EAAwB,KAAK,EAEjD,IAAY,EAAY,YAAY;AACpC,SAAC,KAAS,CAAC,IACf;KAAS,KAAK;AACd,OAAI;AACF,UAAM,EAAY;KAChB;KACA;KACA;KACA;KACA;KACA;KACD,CAAC;YAGK,GAAK;AAKZ,MAHE,aAAe,KAAsB,aAAe,QAChD,EAAI,UACJ,uBACW;;;IAElB;EAAC;EAAO;EAAS;EAAa;EAAQ;EAAa;EAAS;EAAe;EAAO,CAAC;AAOtF,QAJK,IAKH,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,MAAK;GACK,UANC,KAAa,CAAC;GAOzB,eAAe,KAAK,GAAW;GAC/B,WAAU;GACV,eAAa,gBAAgB;GAC7B,aAAW;aAEV,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,WAAU,yBAA0B,CAAA,EAAA,WAE5C,EAAA,CAAA,GAEH,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAM,WAAU,YAAa,CAAA,EAAA,WAE5B,EAAA,CAAA;GAEE,CAAA,EACR,KACC,kBAAC,KAAD;GAAG,WAAU;aAAb,CACE,kBAAC,GAAD;IAAa,WAAU;IAA0B,eAAY;IAAS,CAAA,EACtE,kBAAC,QAAD,EAAA,UAAO,GAAa,CAAA,CAClB;KAEF;MAhCW"}

package/dist/components/security/SecurityTabPanel.js

@@ -1,50 +1,66 @@
-import { SECURITY_META_PACKAGE as e, SECURITY_PROVIDER_PACKAGES as t } from "../../constants/pluginCatalog.js";
-import { PluginGate as n } from "../shared/PluginGate.js";
-import { PluginHarnessPicker as r } from "../ai/PluginHarnessPicker.js";
-import { SecurityScanList as i } from "./SecurityScanList.js";
-import { Shield as a } from "lucide-react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useGetVibeQuery as e } from "../../generated/wspace-operations.js";
+import { SECURITY_META_PACKAGE as t, SECURITY_PROVIDER_PACKAGES as n } from "../../constants/pluginCatalog.js";
+import { PluginGate as r } from "../shared/PluginGate.js";
+import { PluginHarnessPicker as i } from "../ai/PluginHarnessPicker.js";
+import { SecurityScanList as a } from "./SecurityScanList.js";
+import { SecurityRunButton as o } from "./SecurityRunButton.js";
+import { Shield as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/security/SecurityTabPanel.tsx
-function c({ vibeId: c, agentId: l, profile: u = "default" }) {
-	return /* @__PURE__ */ s("div", {
+function u({ vibeId: u, agentId: d, profile: f = "default" }) {
+	let { data: p } = e({
+		variables: { id: u },
+		skip: !u
+	}), m = p?.vibe, h = m?.workspaceId ?? "", g = m?.gitRemote ?? "", _ = m?.path ?? "", v = m?.gitBranch ?? "";
+	return /* @__PURE__ */ l("div", {
 		"data-testid": "security-tab-panel",
 		className: "space-y-4",
-		children: [/* @__PURE__ */ s("header", {
+		children: [/* @__PURE__ */ l("header", {
 			className: "flex items-start gap-3",
-			children: [/* @__PURE__ */ o("div", {
+			children: [/* @__PURE__ */ c("div", {
 				className: "size-9 rounded-md bg-bg-sunken flex items-center justify-center shrink-0",
-				children: /* @__PURE__ */ o(a, { className: "size-4 text-text-secondary" })
-			}), /* @__PURE__ */ s("div", {
+				children: /* @__PURE__ */ c(s, { className: "size-4 text-text-secondary" })
+			}), /* @__PURE__ */ l("div", {
 				className: "min-w-0",
-				children: [/* @__PURE__ */ o("h2", {
+				children: [/* @__PURE__ */ c("h2", {
 					className: "text-base font-semibold text-text-primary",
 					children: "Security"
-				}), /* @__PURE__ */ o("p", {
+				}), /* @__PURE__ */ c("p", {
 					className: "text-sm text-text-secondary mt-0.5",
 					children: "Install + run security scans across the 14-stage lifecycle. Plugins run on the agent; findings live in its local SQLite cache."
 				})]
 			})]
-		}), /* @__PURE__ */ s(n, {
-			agentId: l,
-			required: [e],
+		}), /* @__PURE__ */ l(r, {
+			agentId: d,
+			required: [t],
 			mode: "all",
 			eyebrow: "Security plugin required",
 			title: "Install the Security Orchestrator",
 			description: "@vibecontrols/vibe-plugin-security routes scans across per-stage providers. Required before installing individual stage providers.",
-			children: [/* @__PURE__ */ o(r, {
-				packages: t,
-				agentId: l,
+			children: [/* @__PURE__ */ c(i, {
+				packages: n,
+				agentId: d,
 				title: "Security Providers",
-				description: "One plugin per stage in the security lifecycle. Install the providers you want to use; uninstalled stages stay skipped."
-			}), /* @__PURE__ */ o(i, {
-				vibeId: c,
-				agentId: l,
-				profile: u
+				description: "One plugin per stage in the security lifecycle. Install the providers you want to use; uninstalled stages stay skipped. Run a stage's scan from its card once installed.",
+				renderInstalledAction: (e) => /* @__PURE__ */ c(o, {
+					pkg: e,
+					vibeId: u,
+					workspaceId: h,
+					repoUrl: g,
+					repoLocalPath: _,
+					commit: v,
+					agentId: d,
+					profile: f
+				})
+			}), /* @__PURE__ */ c(a, {
+				vibeId: u,
+				agentId: d,
+				profile: f
 			})]
 		})]
 	});
 }
 //#endregion
-export { c as SecurityTabPanel };
+export { u as SecurityTabPanel };
 
 //# sourceMappingURL=SecurityTabPanel.js.map

package/dist/components/security/SecurityTabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SecurityTabPanel.js","names":[],"sources":["../../../src/components/security/SecurityTabPanel.tsx"],"sourcesContent":["/**\n * Security tab on Vibe detail.\n *\n * Wave 1: surface the security plugins so the user can find +\n * install them from the UI (same pattern as the AI page).\n *\n * Wave 2 (this commit): once the meta plugin is installed, mount\n * `SecurityScanList` which reads recent scan runs straight from the\n * agent over the tunnel (`/api/profiles/<profile>/security/*`). No\n * backend GraphQL involvement — all per-vibe scan history lives in\n * the agent's local SQLite cache.\n */\n\nimport { Shield } from 'lucide-react';\nimport { PluginGate } from '../shared/PluginGate';\nimport { PluginHarnessPicker } from '../ai/PluginHarnessPicker';\nimport { SECURITY_META_PACKAGE, SECURITY_PROVIDER_PACKAGES } from '@/constants/pluginCatalog';\nimport { SecurityScanList } from './SecurityScanList';\n\ninterface PanelProps {\n  vibeId: string;\n  agentId: string | null;\n  /**\n   * Canonical agent profile name. Threaded through from VibeDetailsPage's\n   * `useActiveAgentProfile` so the tab targets the same profile the rest\n   * of the page is talking to.\n   */\n  profile?: string;\n}\n\nexport function SecurityTabPanel({\n  vibeId,\n  agentId,\n  profile = 'default',\n}: PanelProps): React.ReactElement {\n  return (\n    <div data-testid=\"security-tab-panel\" className=\"space-y-4\">\n      <header className=\"flex items-start gap-3\">\n        <div className=\"size-9 rounded-md bg-bg-sunken flex items-center justify-center shrink-0\">\n          <Shield className=\"size-4 text-text-secondary\" />\n        </div>\n        <div className=\"min-w-0\">\n          <h2 className=\"text-base font-semibold text-text-primary\">Security</h2>\n          <p className=\"text-sm text-text-secondary mt-0.5\">\n            Install + run security scans across the 14-stage lifecycle. Plugins run on the agent;\n            findings live in its local SQLite cache.\n          </p>\n        </div>\n      </header>\n\n      <PluginGate\n        agentId={agentId}\n        required={[SECURITY_META_PACKAGE]}\n        mode=\"all\"\n        eyebrow=\"Security plugin required\"\n        title=\"Install the Security Orchestrator\"\n        description=\"@vibecontrols/vibe-plugin-security routes scans across per-stage providers. Required before installing individual stage providers.\"\n      >\n        <PluginHarnessPicker\n          packages={SECURITY_PROVIDER_PACKAGES}\n          agentId={agentId}\n          title=\"Security Providers\"\n          description=\"One plugin per stage in the security lifecycle. Install the providers you want to use; uninstalled stages stay skipped.\"\n        />\n        <SecurityScanList vibeId={vibeId} agentId={agentId} profile={profile} />\n      </PluginGate>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AA8BA,SAAgB,EAAiB,EAC/B,WACA,YACA,aAAU,aACuB;AACjC,QACE,kBAAC,OAAD;EAAK,eAAY;EAAqB,WAAU;YAAhD,CACE,kBAAC,UAAD;GAAQ,WAAU;aAAlB,CACE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAQ,WAAU,8BAA+B,CAAA;IAC7C,CAAA,EACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAA4C;KAAa,CAAA,EACvE,kBAAC,KAAD;KAAG,WAAU;eAAqC;KAG9C,CAAA,CACA;MACC;MAET,kBAAC,GAAD;GACW;GACT,UAAU,CAAC,EAAsB;GACjC,MAAK;GACL,SAAQ;GACR,OAAM;GACN,aAAY;aANd,CAQE,kBAAC,GAAD;IACE,UAAU;IACD;IACT,OAAM;IACN,aAAY;IACZ,CAAA,EACF,kBAAC,GAAD;IAA0B;IAAiB;IAAkB;IAAW,CAAA,CAC7D;KACT"}
+{"version":3,"file":"SecurityTabPanel.js","names":[],"sources":["../../../src/components/security/SecurityTabPanel.tsx"],"sourcesContent":["/**\n * Security tab on Vibe detail.\n *\n * Wave 1: surface the security plugins so the user can find +\n * install them from the UI (same pattern as the AI page).\n *\n * Wave 2 (this commit): once the meta plugin is installed, mount\n * `SecurityScanList` which reads recent scan runs straight from the\n * agent over the tunnel (`/api/profiles/<profile>/security/*`). No\n * backend GraphQL involvement — all per-vibe scan history lives in\n * the agent's local SQLite cache.\n */\n\nimport { Shield } from 'lucide-react';\nimport { useGetVibeQuery } from '@/generated/wspace-operations';\nimport { PluginGate } from '../shared/PluginGate';\nimport { PluginHarnessPicker } from '../ai/PluginHarnessPicker';\nimport { SECURITY_META_PACKAGE, SECURITY_PROVIDER_PACKAGES } from '@/constants/pluginCatalog';\nimport { SecurityScanList } from './SecurityScanList';\nimport { SecurityRunButton } from './SecurityRunButton';\n\ninterface PanelProps {\n  vibeId: string;\n  agentId: string | null;\n  /**\n   * Canonical agent profile name. Threaded through from VibeDetailsPage's\n   * `useActiveAgentProfile` so the tab targets the same profile the rest\n   * of the page is talking to.\n   */\n  profile?: string;\n}\n\nexport function SecurityTabPanel({\n  vibeId,\n  agentId,\n  profile = 'default',\n}: PanelProps): React.ReactElement {\n  // Repo metadata the agent scan contract needs. Shares the Apollo cache\n  // entry the details page already primed via its own `useGetVibeQuery`, so\n  // this is a cache read in practice — no extra network round-trip.\n  const { data: vibeData } = useGetVibeQuery({\n    variables: { id: vibeId },\n    skip: !vibeId,\n  });\n  const vibe = vibeData?.vibe;\n  const workspaceId = vibe?.workspaceId ?? '';\n  const repoUrl = vibe?.gitRemote ?? '';\n  const repoLocalPath = vibe?.path ?? '';\n  const commit = vibe?.gitBranch ?? '';\n\n  return (\n    <div data-testid=\"security-tab-panel\" className=\"space-y-4\">\n      <header className=\"flex items-start gap-3\">\n        <div className=\"size-9 rounded-md bg-bg-sunken flex items-center justify-center shrink-0\">\n          <Shield className=\"size-4 text-text-secondary\" />\n        </div>\n        <div className=\"min-w-0\">\n          <h2 className=\"text-base font-semibold text-text-primary\">Security</h2>\n          <p className=\"text-sm text-text-secondary mt-0.5\">\n            Install + run security scans across the 14-stage lifecycle. Plugins run on the agent;\n            findings live in its local SQLite cache.\n          </p>\n        </div>\n      </header>\n\n      <PluginGate\n        agentId={agentId}\n        required={[SECURITY_META_PACKAGE]}\n        mode=\"all\"\n        eyebrow=\"Security plugin required\"\n        title=\"Install the Security Orchestrator\"\n        description=\"@vibecontrols/vibe-plugin-security routes scans across per-stage providers. Required before installing individual stage providers.\"\n      >\n        <PluginHarnessPicker\n          packages={SECURITY_PROVIDER_PACKAGES}\n          agentId={agentId}\n          title=\"Security Providers\"\n          description=\"One plugin per stage in the security lifecycle. Install the providers you want to use; uninstalled stages stay skipped. Run a stage's scan from its card once installed.\"\n          renderInstalledAction={(pkg) => (\n            <SecurityRunButton\n              pkg={pkg}\n              vibeId={vibeId}\n              workspaceId={workspaceId}\n              repoUrl={repoUrl}\n              repoLocalPath={repoLocalPath}\n              commit={commit}\n              agentId={agentId}\n              profile={profile}\n            />\n          )}\n        />\n        <SecurityScanList vibeId={vibeId} agentId={agentId} profile={profile} />\n      </PluginGate>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAgCA,SAAgB,EAAiB,EAC/B,WACA,YACA,aAAU,aACuB;CAIjC,IAAM,EAAE,MAAM,MAAa,EAAgB;EACzC,WAAW,EAAE,IAAI,GAAQ;EACzB,MAAM,CAAC;EACR,CAAC,EACI,IAAO,GAAU,MACjB,IAAc,GAAM,eAAe,IACnC,IAAU,GAAM,aAAa,IAC7B,IAAgB,GAAM,QAAQ,IAC9B,IAAS,GAAM,aAAa;AAElC,QACE,kBAAC,OAAD;EAAK,eAAY;EAAqB,WAAU;YAAhD,CACE,kBAAC,UAAD;GAAQ,WAAU;aAAlB,CACE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAQ,WAAU,8BAA+B,CAAA;IAC7C,CAAA,EACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAA4C;KAAa,CAAA,EACvE,kBAAC,KAAD;KAAG,WAAU;eAAqC;KAG9C,CAAA,CACA;MACC;MAET,kBAAC,GAAD;GACW;GACT,UAAU,CAAC,EAAsB;GACjC,MAAK;GACL,SAAQ;GACR,OAAM;GACN,aAAY;aANd,CAQE,kBAAC,GAAD;IACE,UAAU;IACD;IACT,OAAM;IACN,aAAY;IACZ,wBAAwB,MACtB,kBAAC,GAAD;KACO;KACG;KACK;KACJ;KACM;KACP;KACC;KACA;KACT,CAAA;IAEJ,CAAA,EACF,kBAAC,GAAD;IAA0B;IAAiB;IAAkB;IAAW,CAAA,CAC7D;KACT"}

package/dist/components/security/hooks.js

@@ -1,8 +1,8 @@
 import { SecurityAgentError as e, securityAgent as t } from "./agentClient.js";
 import { useApolloClient as n } from "@apollo/client/react";
-import { useQuery as r } from "@tanstack/react-query";
+import { useMutation as r, useQuery as i, useQueryClient as a } from "@tanstack/react-query";
 //#region src/components/security/hooks.ts
-function i(e, ...t) {
+function o(e, ...t) {
 	return [
 		"security",
 		e.agentId ?? "_",
@@ -10,23 +10,40 @@ function i(e, ...t) {
 		...t
 	];
 }
-function a(a, o, s = 20) {
+function s(r, a, s = 20) {
 	let c = n();
-	return r({
-		queryKey: i(a, "recent-scans", o, s),
-		enabled: !!a.agentId && !!o,
+	return i({
+		queryKey: o(r, "recent-scans", a, s),
+		enabled: !!r.agentId && !!a,
 		queryFn: async () => {
-			if (!a.agentId) throw new e("INVALID", 0, "no agent opts");
+			if (!r.agentId) throw new e("INVALID", 0, "no agent opts");
 			let n = {
-				agentId: a.agentId,
-				profile: a.profile,
+				agentId: r.agentId,
+				profile: r.profile,
+				apolloClient: c
+			};
+			return t.listRecentScanRuns(n, a, s);
+		}
+	});
+}
+function c(i) {
+	let s = a(), c = n();
+	return r({
+		mutationFn: async (n) => {
+			if (!i.agentId) throw new e("INVALID", 0, "no agent opts");
+			let r = {
+				agentId: i.agentId,
+				profile: i.profile,
 				apolloClient: c
 			};
-			return t.listRecentScanRuns(n, o, s);
+			return t.startScan(r, n);
+		},
+		onSuccess: () => {
+			s.invalidateQueries({ queryKey: o(i) });
 		}
 	});
 }
 //#endregion
-export { a as useSecurityRecentScansQuery };
+export { s as useSecurityRecentScansQuery, c as useStartSecurityScanMutation };
 
 //# sourceMappingURL=hooks.js.map

package/dist/components/security/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","names":[],"sources":["../../../src/components/security/hooks.ts"],"sourcesContent":["/**\n * React Query hooks over the security agent GraphQL proxy.\n *\n * F4 Wave C: rewired off the direct browser→agent tunnel onto the svc\n * GraphQL proxy (`agentSecurityScanProxy` / `agentSecurityScanMutate`).\n * Cache keys still include the agent identity (agentId + profile) so\n * two simultaneously-active vibes against different agents stay\n * isolated. Mirrors the layout of `src/hooks/useGitops.ts`.\n */\nimport {\n  useMutation,\n  useQuery,\n  useQueryClient,\n  type UseMutationResult,\n  type UseQueryResult,\n} from '@tanstack/react-query';\nimport { useApolloClient } from '@apollo/client/react';\n\nimport {\n  securityAgent,\n  SecurityAgentError,\n  type FindingsFilter,\n  type FindingsPage,\n  type SecurityAgentOpts,\n  type SecurityProvidersByStage,\n  type SecurityScanRun,\n  type StartScanInput,\n  type StartScanResult,\n} from './agentClient';\n\nexport interface UseSecurityAgentContext {\n  /** Required: canonical profile name. */\n  profile: string;\n  /** Required: agent id — scopes cache + passes through to svc proxy. */\n  agentId: string | null;\n}\n\nfunction key(ctx: UseSecurityAgentContext, ...rest: unknown[]): unknown[] {\n  return ['security', ctx.agentId ?? '_', ctx.profile, ...rest];\n}\n\nexport function useSecurityProvidersQuery(\n  ctx: UseSecurityAgentContext\n): UseQueryResult<SecurityProvidersByStage, SecurityAgentError> {\n  const apolloClient = useApolloClient();\n  return useQuery({\n    queryKey: key(ctx, 'providers'),\n    enabled: !!ctx.agentId,\n    queryFn: async () => {\n      if (!ctx.agentId) throw new SecurityAgentError('INVALID', 0, 'no agent opts');\n      const opts: SecurityAgentOpts = { agentId: ctx.agentId, profile: ctx.profile, apolloClient };\n      return securityAgent.listProviders(opts);\n    },\n  });\n}\n\nexport function useSecurityFindingsQuery(\n  ctx: UseSecurityAgentContext,\n  filter: FindingsFilter\n): UseQueryResult<FindingsPage, SecurityAgentError> {\n  const apolloClient = useApolloClient();\n  return useQuery({\n    queryKey: key(ctx, 'findings', filter.vibeId, filter.severity, filter.status, filter.limit),\n    enabled: !!ctx.agentId,\n    queryFn: async () => {\n      if (!ctx.agentId) throw new SecurityAgentError('INVALID', 0, 'no agent opts');\n      const opts: SecurityAgentOpts = { agentId: ctx.agentId, profile: ctx.profile, apolloClient };\n      return securityAgent.listFindings(opts, filter);\n    },\n  });\n}\n\nexport function useSecurityRecentScansQuery(\n  ctx: UseSecurityAgentContext,\n  vibeId: string,\n  limit = 20\n): UseQueryResult<SecurityScanRun[], SecurityAgentError> {\n  const apolloClient = useApolloClient();\n  return useQuery({\n    queryKey: key(ctx, 'recent-scans', vibeId, limit),\n    enabled: !!ctx.agentId && !!vibeId,\n    queryFn: async () => {\n      if (!ctx.agentId) throw new SecurityAgentError('INVALID', 0, 'no agent opts');\n      const opts: SecurityAgentOpts = { agentId: ctx.agentId, profile: ctx.profile, apolloClient };\n      return securityAgent.listRecentScanRuns(opts, vibeId, limit);\n    },\n  });\n}\n\nexport function useStartSecurityScanMutation(\n  ctx: UseSecurityAgentContext\n): UseMutationResult<StartScanResult, SecurityAgentError, StartScanInput> {\n  const qc = useQueryClient();\n  const apolloClient = useApolloClient();\n  return useMutation({\n    mutationFn: async (input: StartScanInput) => {\n      if (!ctx.agentId) throw new SecurityAgentError('INVALID', 0, 'no agent opts');\n      const opts: SecurityAgentOpts = { agentId: ctx.agentId, profile: ctx.profile, apolloClient };\n      return securityAgent.startScan(opts, input);\n    },\n    onSuccess: () => {\n      void qc.invalidateQueries({ queryKey: key(ctx) });\n    },\n  });\n}\n"],"mappings":";;;;AAqCA,SAAS,EAAI,GAA8B,GAAG,GAA4B;AACxE,QAAO;EAAC;EAAY,EAAI,WAAW;EAAK,EAAI;EAAS,GAAG;EAAK;;AAkC/D,SAAgB,EACd,GACA,GACA,IAAQ,IAC+C;CACvD,IAAM,IAAe,GAAiB;AACtC,QAAO,EAAS;EACd,UAAU,EAAI,GAAK,gBAAgB,GAAQ,EAAM;EACjD,SAAS,CAAC,CAAC,EAAI,WAAW,CAAC,CAAC;EAC5B,SAAS,YAAY;AACnB,OAAI,CAAC,EAAI,QAAS,OAAM,IAAI,EAAmB,WAAW,GAAG,gBAAgB;GAC7E,IAAM,IAA0B;IAAE,SAAS,EAAI;IAAS,SAAS,EAAI;IAAS;IAAc;AAC5F,UAAO,EAAc,mBAAmB,GAAM,GAAQ,EAAM;;EAE/D,CAAC"}
+{"version":3,"file":"hooks.js","names":[],"sources":["../../../src/components/security/hooks.ts"],"sourcesContent":["/**\n * React Query hooks over the security agent GraphQL proxy.\n *\n * F4 Wave C: rewired off the direct browser→agent tunnel onto the svc\n * GraphQL proxy (`agentSecurityScanProxy` / `agentSecurityScanMutate`).\n * Cache keys still include the agent identity (agentId + profile) so\n * two simultaneously-active vibes against different agents stay\n * isolated. Mirrors the layout of `src/hooks/useGitops.ts`.\n */\nimport {\n  useMutation,\n  useQuery,\n  useQueryClient,\n  type UseMutationResult,\n  type UseQueryResult,\n} from '@tanstack/react-query';\nimport { useApolloClient } from '@apollo/client/react';\n\nimport {\n  securityAgent,\n  SecurityAgentError,\n  type FindingsFilter,\n  type FindingsPage,\n  type SecurityAgentOpts,\n  type SecurityProvidersByStage,\n  type SecurityScanRun,\n  type StartScanInput,\n  type StartScanResult,\n} from './agentClient';\n\nexport interface UseSecurityAgentContext {\n  /** Required: canonical profile name. */\n  profile: string;\n  /** Required: agent id — scopes cache + passes through to svc proxy. */\n  agentId: string | null;\n}\n\nfunction key(ctx: UseSecurityAgentContext, ...rest: unknown[]): unknown[] {\n  return ['security', ctx.agentId ?? '_', ctx.profile, ...rest];\n}\n\nexport function useSecurityProvidersQuery(\n  ctx: UseSecurityAgentContext\n): UseQueryResult<SecurityProvidersByStage, SecurityAgentError> {\n  const apolloClient = useApolloClient();\n  return useQuery({\n    queryKey: key(ctx, 'providers'),\n    enabled: !!ctx.agentId,\n    queryFn: async () => {\n      if (!ctx.agentId) throw new SecurityAgentError('INVALID', 0, 'no agent opts');\n      const opts: SecurityAgentOpts = { agentId: ctx.agentId, profile: ctx.profile, apolloClient };\n      return securityAgent.listProviders(opts);\n    },\n  });\n}\n\nexport function useSecurityFindingsQuery(\n  ctx: UseSecurityAgentContext,\n  filter: FindingsFilter\n): UseQueryResult<FindingsPage, SecurityAgentError> {\n  const apolloClient = useApolloClient();\n  return useQuery({\n    queryKey: key(ctx, 'findings', filter.vibeId, filter.severity, filter.status, filter.limit),\n    enabled: !!ctx.agentId,\n    queryFn: async () => {\n      if (!ctx.agentId) throw new SecurityAgentError('INVALID', 0, 'no agent opts');\n      const opts: SecurityAgentOpts = { agentId: ctx.agentId, profile: ctx.profile, apolloClient };\n      return securityAgent.listFindings(opts, filter);\n    },\n  });\n}\n\nexport function useSecurityRecentScansQuery(\n  ctx: UseSecurityAgentContext,\n  vibeId: string,\n  limit = 20\n): UseQueryResult<SecurityScanRun[], SecurityAgentError> {\n  const apolloClient = useApolloClient();\n  return useQuery({\n    queryKey: key(ctx, 'recent-scans', vibeId, limit),\n    enabled: !!ctx.agentId && !!vibeId,\n    queryFn: async () => {\n      if (!ctx.agentId) throw new SecurityAgentError('INVALID', 0, 'no agent opts');\n      const opts: SecurityAgentOpts = { agentId: ctx.agentId, profile: ctx.profile, apolloClient };\n      return securityAgent.listRecentScanRuns(opts, vibeId, limit);\n    },\n  });\n}\n\nexport function useStartSecurityScanMutation(\n  ctx: UseSecurityAgentContext\n): UseMutationResult<StartScanResult, SecurityAgentError, StartScanInput> {\n  const qc = useQueryClient();\n  const apolloClient = useApolloClient();\n  return useMutation({\n    mutationFn: async (input: StartScanInput) => {\n      if (!ctx.agentId) throw new SecurityAgentError('INVALID', 0, 'no agent opts');\n      const opts: SecurityAgentOpts = { agentId: ctx.agentId, profile: ctx.profile, apolloClient };\n      return securityAgent.startScan(opts, input);\n    },\n    onSuccess: () => {\n      void qc.invalidateQueries({ queryKey: key(ctx) });\n    },\n  });\n}\n"],"mappings":";;;;AAqCA,SAAS,EAAI,GAA8B,GAAG,GAA4B;AACxE,QAAO;EAAC;EAAY,EAAI,WAAW;EAAK,EAAI;EAAS,GAAG;EAAK;;AAkC/D,SAAgB,EACd,GACA,GACA,IAAQ,IAC+C;CACvD,IAAM,IAAe,GAAiB;AACtC,QAAO,EAAS;EACd,UAAU,EAAI,GAAK,gBAAgB,GAAQ,EAAM;EACjD,SAAS,CAAC,CAAC,EAAI,WAAW,CAAC,CAAC;EAC5B,SAAS,YAAY;AACnB,OAAI,CAAC,EAAI,QAAS,OAAM,IAAI,EAAmB,WAAW,GAAG,gBAAgB;GAC7E,IAAM,IAA0B;IAAE,SAAS,EAAI;IAAS,SAAS,EAAI;IAAS;IAAc;AAC5F,UAAO,EAAc,mBAAmB,GAAM,GAAQ,EAAM;;EAE/D,CAAC;;AAGJ,SAAgB,EACd,GACwE;CACxE,IAAM,IAAK,GAAgB,EACrB,IAAe,GAAiB;AACtC,QAAO,EAAY;EACjB,YAAY,OAAO,MAA0B;AAC3C,OAAI,CAAC,EAAI,QAAS,OAAM,IAAI,EAAmB,WAAW,GAAG,gBAAgB;GAC7E,IAAM,IAA0B;IAAE,SAAS,EAAI;IAAS,SAAS,EAAI;IAAS;IAAc;AAC5F,UAAO,EAAc,UAAU,GAAM,EAAM;;EAE7C,iBAAiB;AACV,KAAG,kBAAkB,EAAE,UAAU,EAAI,EAAI,EAAE,CAAC;;EAEpD,CAAC"}

package/dist/components/security/index.js

@@ -1,6 +1,7 @@
 import "./agentClient.js";
 import "./hooks.js";
 import "./SecurityScanList.js";
+import "./SecurityRunButton.js";
 import "./SecurityTabPanel.js";
 import "./SecurityEmptyState.js";
 import "./types.js";

package/dist/constants/pluginCatalog.js

@@ -30,6 +30,21 @@ var n = "@vibecontrols/vibe-plugin-session-manager", r = [
 	"@vibecontrols/vibe-plugin-security-incident",
 	"@vibecontrols/vibe-plugin-security-archive"
 ], d = {
+	"@vibecontrols/vibe-plugin-security-onboard": "repo.onboard",
+	"@vibecontrols/vibe-plugin-security-developer-local": "developer.local",
+	"@vibecontrols/vibe-plugin-security-secrets-pr": "pull_request.fast",
+	"@vibecontrols/vibe-plugin-security-sast-deep": "pull_request.deep",
+	"@vibecontrols/vibe-plugin-security-scorecard": "main.merge",
+	"@vibecontrols/vibe-plugin-security-sbom-build": "build",
+	"@vibecontrols/vibe-plugin-security-package-publish": "package.publish",
+	"@vibecontrols/vibe-plugin-security-dast-preview": "deploy.preview",
+	"@vibecontrols/vibe-plugin-security-deploy-alpha": "deploy.alpha",
+	"@vibecontrols/vibe-plugin-security-release-gate": "promote.prod",
+	"@vibecontrols/vibe-plugin-security-runtime": "runtime.continuous",
+	"@vibecontrols/vibe-plugin-security-rescan": "scheduled.rescan",
+	"@vibecontrols/vibe-plugin-security-incident": "incident.response",
+	"@vibecontrols/vibe-plugin-security-archive": "archive.offboard"
+}, f = {
 	[e]: {
 		packageName: e,
 		displayName: "AI Orchestrator",
@@ -301,8 +316,8 @@ var n = "@vibecontrols/vibe-plugin-session-manager", r = [
 		category: "security-provider"
 	}
 };
-function f(e) {
-	return d[e] ?? {
+function p(e) {
+	return f[e] ?? {
 		packageName: e,
 		displayName: e.replace("@vibecontrols/vibe-plugin-", ""),
 		description: "VibeControls agent plugin.",
@@ -310,6 +325,6 @@ function f(e) {
 	};
 }
 //#endregion
-export { e as AI_CORE_PACKAGE, t as AI_PROVIDER_PACKAGES, o as GIT_PACKAGE, s as GRAPHQL_PLAYGROUND_PACKAGE, i as PLAN_META_PACKAGE, a as PLAN_PLANNOTATOR_PACKAGE, d as PLUGIN_CATALOG, l as SECURITY_META_PACKAGE, u as SECURITY_PROVIDER_PACKAGES, n as SESSION_MANAGER_PACKAGE, r as SESSION_PROVIDER_PACKAGES, f as getPluginMeta };
+export { e as AI_CORE_PACKAGE, t as AI_PROVIDER_PACKAGES, o as GIT_PACKAGE, s as GRAPHQL_PLAYGROUND_PACKAGE, i as PLAN_META_PACKAGE, a as PLAN_PLANNOTATOR_PACKAGE, f as PLUGIN_CATALOG, l as SECURITY_META_PACKAGE, u as SECURITY_PROVIDER_PACKAGES, d as SECURITY_STAGE_BY_PACKAGE, n as SESSION_MANAGER_PACKAGE, r as SESSION_PROVIDER_PACKAGES, p as getPluginMeta };
 
 //# sourceMappingURL=pluginCatalog.js.map