@burdenoff/microfe-vibecontrols 2026.522.6 → 2026.522.8

package/dist/components/ai/AIProviderCredentialsCard.js

@@ -84,19 +84,19 @@ var _ = [
 		}, { key: "OLLAMA_HOST" }]
 	}
 ];
-function v({ agent: t, providerIds: n, initialProviderId: r }) {
-	let i = e(), a = n ? _.filter((e) => n.includes(e.providerId)) : _, [l, u] = o(() => r && a.some((e) => e.providerId === r) ? r : a.length === 1 ? a[0]?.providerId ?? null : null), f = a.find((e) => e.providerId === l) ?? null;
-	return f ? /* @__PURE__ */ g("div", {
+function v({ agent: t, providerIds: n, initialProviderId: r, onProviderAuthSatisfiedChange: i }) {
+	let a = e(), l = n ? _.filter((e) => n.includes(e.providerId)) : _, [u, f] = o(() => r && l.some((e) => e.providerId === r) ? r : l.length === 1 ? l[0]?.providerId ?? null : null), p = l.find((e) => e.providerId === u) ?? null;
+	return p ? /* @__PURE__ */ g("div", {
 		className: "space-y-3",
 		children: [/* @__PURE__ */ g("div", {
 			className: "flex items-center gap-2",
 			children: [
-				a.length > 1 ? /* @__PURE__ */ g("button", {
+				l.length > 1 ? /* @__PURE__ */ g("button", {
 					type: "button",
-					onClick: () => u(null),
+					onClick: () => f(null),
 					className: "inline-flex items-center gap-1 rounded-md border border-border-default px-2 py-1 text-xs text-text-secondary hover:text-text-primary hover:border-border-strong",
-					"aria-label": i("ai.providerCredentials.back", "Back to providers"),
-					children: [/* @__PURE__ */ h(s, { className: "h-3.5 w-3.5" }), i("ai.providerCredentials.back", "Back")]
+					"aria-label": a("ai.providerCredentials.back", "Back to providers"),
+					children: [/* @__PURE__ */ h(s, { className: "h-3.5 w-3.5" }), a("ai.providerCredentials.back", "Back")]
 				}) : null,
 				/* @__PURE__ */ h("div", {
 					className: "rounded-lg bg-bg-sunken p-2 text-text-secondary",
@@ -106,16 +106,17 @@ function v({ agent: t, providerIds: n, initialProviderId: r }) {
 					className: "min-w-0",
 					children: [/* @__PURE__ */ h("h3", {
 						className: "text-sm font-semibold text-text-primary truncate",
-						children: f.label
+						children: p.label
 					}), /* @__PURE__ */ h("p", {
 						className: "text-xs text-text-secondary",
-						children: i("ai.providerCredentials.scopedDescription", "Keys are stored on the agent and read at session start.")
+						children: a("ai.providerCredentials.scopedDescription", "Keys are stored on the agent and read at session start.")
 					})]
 				})
 			]
-		}), /* @__PURE__ */ h(y, {
+		}), /* @__PURE__ */ h(b, {
 			agent: t,
-			provider: f
+			provider: p,
+			onAuthSatisfiedChange: i
 		})]
 	}) : /* @__PURE__ */ g("div", {
 		className: "space-y-3",
@@ -128,17 +129,17 @@ function v({ agent: t, providerIds: n, initialProviderId: r }) {
 				className: "space-y-1",
 				children: [/* @__PURE__ */ h("h3", {
 					className: "text-sm font-semibold text-text-primary",
-					children: i("ai.providerCredentials.pickTitle", "Choose a provider")
+					children: a("ai.providerCredentials.pickTitle", "Choose a provider")
 				}), /* @__PURE__ */ h("p", {
 					className: "text-sm text-text-secondary",
-					children: i("ai.providerCredentials.pickDescription", "Pick the provider whose credentials you want to manage. Keys are stored on the agent and read at session start.")
+					children: a("ai.providerCredentials.pickDescription", "Pick the provider whose credentials you want to manage. Keys are stored on the agent and read at session start.")
 				})]
 			})]
 		}), /* @__PURE__ */ h("div", {
 			className: "grid grid-cols-1 sm:grid-cols-2 gap-2",
-			children: a.map((e) => /* @__PURE__ */ g("button", {
+			children: l.map((e) => /* @__PURE__ */ g("button", {
 				type: "button",
-				onClick: () => u(e.providerId),
+				onClick: () => f(e.providerId),
 				className: "flex items-center justify-between gap-2 rounded-lg border border-border-default bg-bg-surface px-3 py-2 text-left hover:border-border-strong hover:bg-bg-sunken transition-colors",
 				children: [/* @__PURE__ */ g("div", {
 					className: "min-w-0",
@@ -154,83 +155,105 @@ function v({ agent: t, providerIds: n, initialProviderId: r }) {
 		})]
 	});
 }
-function y({ agent: s, provider: c }) {
-	let l = e(), [u, d] = o({}), [p, m] = o({}), [_, v] = o(!0), [y, x] = o(null), [S, C] = o(null), [w, T] = o(null), E = i(async () => {
-		v(!0), C(null);
+function y(e) {
+	return e.primary ?? e.secret ?? !1;
+}
+function b({ agent: s, provider: c, onAuthSatisfiedChange: l }) {
+	let u = e(), [d, p] = o({}), [m, _] = o({}), [v, b] = o({}), [S, C] = o(!0), [w, T] = o(null), [E, D] = o(null), [O, k] = o(null), A = c.fields.filter(y).map((e) => e.key), j = A.filter((e) => (m[e] ?? "").trim().length > 0), M = j.length > 0;
+	a(() => {
+		l?.(M);
+	}, [M, l]);
+	let N = i(async () => {
+		C(!0), D(null);
 		try {
-			let e = await Promise.all(c.fields.map(async (e) => [e.key, await n(s, e.key) ?? ""]));
-			d(Object.fromEntries(e));
+			let e = await Promise.all(c.fields.map(async (e) => [e.key, await n(s, e.key) ?? ""])), t = Object.fromEntries(e);
+			p(t), _(t);
 		} catch (e) {
-			C(e instanceof Error ? e.message : l("ai.providerCredentials.loadFailed", "Failed to load provider credentials"));
+			D(e instanceof Error ? e.message : u("ai.providerCredentials.loadFailed", "Failed to load provider credentials"));
 		} finally {
-			v(!1);
+			C(!1);
 		}
 	}, [
 		s,
 		c.fields,
-		l
+		u
 	]);
 	a(() => {
-		E();
-	}, [E]);
-	let D = i(async (e, n) => {
-		x(e), C(null), T(null);
+		N();
+	}, [N]);
+	let P = i(async (e, n) => {
+		T(e), D(null), k(null);
+		let i = n.trim();
 		try {
-			n.trim() ? await r(s, e, n.trim()) : await t(s, e), T(n.trim() ? l("ai.providerCredentials.saved", `${e} saved`) : l("ai.providerCredentials.cleared", `${e} cleared`));
+			i ? await r(s, e, i) : await t(s, e), _((t) => ({
+				...t,
+				[e]: i
+			})), k(i ? u("ai.providerCredentials.saved", `${e} saved`) : u("ai.providerCredentials.cleared", `${e} cleared`));
 		} catch (e) {
-			C(e instanceof Error ? e.message : l("ai.providerCredentials.saveFailed", "Failed to save credential"));
+			D(e instanceof Error ? e.message : u("ai.providerCredentials.saveFailed", "Failed to save credential"));
 		} finally {
-			x(null);
+			T(null);
 		}
-	}, [s, l]);
+	}, [s, u]);
 	return /* @__PURE__ */ g("div", {
 		className: "rounded-xl border border-border-default bg-bg-surface p-4 space-y-3",
 		children: [
 			/* @__PURE__ */ g("div", {
 				className: "space-y-1",
-				children: [/* @__PURE__ */ h("h4", {
-					className: "text-sm font-semibold text-text-primary",
-					children: c.label
-				}), /* @__PURE__ */ h("p", {
-					className: "text-xs text-text-secondary",
-					children: c.description
-				})]
+				children: [
+					/* @__PURE__ */ h("h4", {
+						className: "text-sm font-semibold text-text-primary",
+						children: c.label
+					}),
+					/* @__PURE__ */ h("p", {
+						className: "text-xs text-text-secondary",
+						children: c.description
+					}),
+					A.length > 1 ? /* @__PURE__ */ h("p", {
+						className: "text-xs text-text-tertiary",
+						children: u("ai.providerCredentials.eitherOr", `Save any one of: ${A.join(" · ")}. You don't need to fill all of them.`)
+					}) : null
+				]
 			}),
-			S ? /* @__PURE__ */ h("div", {
+			M ? /* @__PURE__ */ h("div", {
+				className: "rounded-lg border border-status-success-border bg-status-success-bg px-3 py-2 text-xs text-status-success-text",
+				children: u("ai.providerCredentials.authSatisfied", `${c.label} is ready. The agent will use ${j.join(" / ")} on the next SDK session.`)
+			}) : null,
+			E ? /* @__PURE__ */ h("div", {
 				className: "rounded-lg border border-status-error-border bg-status-error-bg px-3 py-2 text-sm text-status-error-text",
-				children: S
+				children: E
 			}) : null,
-			w ? /* @__PURE__ */ h("div", {
+			O ? /* @__PURE__ */ h("div", {
 				className: "rounded-lg border border-status-success-border bg-status-success-bg px-3 py-2 text-sm text-status-success-text",
-				children: w
+				children: O
 			}) : null,
-			_ ? /* @__PURE__ */ g("div", {
+			S ? /* @__PURE__ */ g("div", {
 				className: "flex items-center gap-2 text-sm text-text-secondary",
-				children: [/* @__PURE__ */ h(f, { className: "h-4 w-4 animate-spin" }), l("ai.providerCredentials.loading", "Loading…")]
+				children: [/* @__PURE__ */ h(f, { className: "h-4 w-4 animate-spin" }), u("ai.providerCredentials.loading", "Loading…")]
 			}) : /* @__PURE__ */ h("div", {
 				className: "space-y-3",
-				children: c.fields.map((e) => /* @__PURE__ */ h(b, {
+				children: c.fields.map((e) => /* @__PURE__ */ h(x, {
 					label: e.key,
 					secret: e.secret ?? !1,
-					value: u[e.key] ?? "",
-					onChange: (t) => d((n) => ({
+					value: d[e.key] ?? "",
+					onChange: (t) => p((n) => ({
 						...n,
 						[e.key]: t
 					})),
-					saving: y === e.key,
-					visible: p[e.key] ?? !1,
-					onToggleVisible: () => m((t) => ({
+					saving: w === e.key,
+					visible: v[e.key] ?? !1,
+					onToggleVisible: () => b((t) => ({
 						...t,
 						[e.key]: !t[e.key]
 					})),
-					onSave: () => void D(e.key, u[e.key] ?? ""),
-					onClear: () => void D(e.key, "")
+					onSave: () => void P(e.key, d[e.key] ?? ""),
+					onClear: () => void P(e.key, "")
 				}, e.key))
 			})
 		]
 	});
 }
-function b({ label: e, secret: t, value: n, onChange: r, saving: i, visible: a, onToggleVisible: o, onSave: s, onClear: c }) {
+function x({ label: e, secret: t, value: n, onChange: r, saving: i, visible: a, onToggleVisible: o, onSave: s, onClear: c }) {
 	return /* @__PURE__ */ g("div", {
 		className: "space-y-2 rounded-lg border border-border-default bg-bg-primary p-3",
 		children: [/* @__PURE__ */ h("label", {

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

@@ -1 +1 @@
-{"version":3,"file":"AIProviderCredentialsCard.js","names":[],"sources":["../../../src/components/ai/AIProviderCredentialsCard.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport {\n  ArrowLeft,\n  ChevronRight,\n  Eye,\n  EyeOff,\n  KeyRound,\n  Loader2,\n  Save,\n  Trash2,\n} from 'lucide-react';\n\nimport { useTr } from '../../shared/hooks/useTr';\nimport {\n  deleteAgentConfigValue,\n  getAgentConfigValue,\n  setAgentConfigValue,\n  type AgentRef,\n} from '@/services/aiApi';\n\n/**\n * One provider definition — what env-var-style keys the agent stores under\n * its config bag and what to call the provider in the UI. Kept as a flat\n * static list rather than discovered from the plugin manifest because the\n * config keys are part of the upstream SDK contract (ANTHROPIC_API_KEY,\n * OPENAI_API_KEY, etc.) and don't change with each plugin release.\n */\nexport interface AIProviderCredentialDef {\n  /** Stable provider id — usually matches the plugin's pluginName. */\n  providerId: string;\n  /** Display name shown in the card heading. */\n  label: string;\n  /** Short helper text under the heading. */\n  description: string;\n  /**\n   * One row per key. The `kind` distinguishes a primary credential (for\n   * which the SDK refuses to start without ONE of the listed keys) from\n   * an optional URL/host override.\n   */\n  fields: Array<{\n    /** Agent-config key name, also rendered as the input label. */\n    key: string;\n    /**\n     * Whether the field is a secret (rendered as password with eye toggle)\n     * or a plain string (URL / host overrides — visible by default).\n     */\n    secret?: boolean;\n  }>;\n}\n\n/**\n * Catalog of every AI provider whose plugin reads credentials from the\n * agent's config bag (POST /api/config). CLI-only providers (Aider, Amp,\n * Copilot, Crush, Goose, Plandex, Pi) authenticate via their own harness\n * binary (~/.claude/, ~/.config/opencode/ etc.) — Bridle handles those\n * and they don't appear here.\n */\nexport const AI_PROVIDER_CREDENTIALS: AIProviderCredentialDef[] = [\n  {\n    providerId: 'claude',\n    label: 'Anthropic Claude',\n    description:\n      'Claude SDK sessions require either ANTHROPIC_API_KEY or ANTHROPIC_AUTH_TOKEN on the agent. Save one of them to make SDK sessions work.',\n    fields: [\n      { key: 'ANTHROPIC_API_KEY', secret: true },\n      { key: 'ANTHROPIC_AUTH_TOKEN', secret: true },\n    ],\n  },\n  {\n    providerId: 'codex',\n    label: 'OpenAI Codex',\n    description:\n      'Codex SDK / CLI sessions read OPENAI_API_KEY from the agent. Set it here to enable Codex-backed sessions.',\n    fields: [{ key: 'OPENAI_API_KEY', secret: true }],\n  },\n  {\n    providerId: 'gemini',\n    label: 'Google Gemini',\n    description:\n      'Gemini SDK reads GEMINI_API_KEY (preferred) or GOOGLE_API_KEY. Either one works — both shown so an existing GOOGLE_API_KEY in your environment keeps working.',\n    fields: [\n      { key: 'GEMINI_API_KEY', secret: true },\n      { key: 'GOOGLE_API_KEY', secret: true },\n    ],\n  },\n  {\n    providerId: 'openai-compat',\n    label: 'OpenAI-Compatible',\n    description:\n      'Generic OpenAI-compatible provider (Together, Groq, Mistral, etc.). Set the API key and the base URL the SDK should hit.',\n    fields: [{ key: 'OPENAI_COMPAT_API_KEY', secret: true }, { key: 'OPENAI_COMPAT_BASE_URL' }],\n  },\n  {\n    providerId: 'cursor',\n    label: 'Cursor',\n    description:\n      'Cursor agent (CLI + SDK) reads CURSOR_API_KEY from the agent. Set it here to enable both modes.',\n    fields: [{ key: 'CURSOR_API_KEY', secret: true }],\n  },\n  {\n    providerId: 'openrouter',\n    label: 'OpenRouter',\n    description: 'OpenRouter aggregator (300+ models, SDK only). Set OPENROUTER_API_KEY to enable.',\n    fields: [{ key: 'OPENROUTER_API_KEY', secret: true }],\n  },\n  {\n    providerId: 'minimax',\n    label: 'Minimax',\n    description:\n      'Minimax provider (CLI + Anthropic-compatible SDK). Set MINIMAX_API_KEY to enable.',\n    fields: [{ key: 'MINIMAX_API_KEY', secret: true }],\n  },\n  {\n    providerId: 'ollama',\n    label: 'Ollama',\n    description:\n      'Ollama Cloud + self-hosted (CLI + SDK). OLLAMA_API_KEY for Cloud; OLLAMA_HOST optional override (defaults: https://ollama.com when key present, http://localhost:11434 otherwise).',\n    fields: [{ key: 'OLLAMA_API_KEY', secret: true }, { key: 'OLLAMA_HOST' }],\n  },\n];\n\ninterface AIProviderCredentialsCardProps {\n  agent: AgentRef;\n  /**\n   * Optional filter — when present, only render providers whose providerId\n   * appears in the list. Lets a future caller scope the card to \"only the\n   * providers I have plugins installed for\" without changing the catalog.\n   */\n  providerIds?: string[];\n  /**\n   * When provided, the staged picker preselects this provider so the\n   * caller (e.g. the SDK-auth-missing modal) can drop the user straight\n   * onto the right form without an extra click.\n   */\n  initialProviderId?: string;\n}\n\n/**\n * Staged credentials manager: shows a provider picker first, then on\n * select renders one card with that provider's config keys plus a back\n * button. Keeps the rendered DOM small (and the surrounding modal\n * viewport-friendly) regardless of how many providers are in the catalog.\n *\n * Replaces the older Claude-only ClaudeCredentialsCard.\n */\nexport function AIProviderCredentialsCard({\n  agent,\n  providerIds,\n  initialProviderId,\n}: AIProviderCredentialsCardProps) {\n  const tr = useTr();\n  const providers = providerIds\n    ? AI_PROVIDER_CREDENTIALS.filter((p) => providerIds.includes(p.providerId))\n    : AI_PROVIDER_CREDENTIALS;\n\n  // Preselect when the catalog narrows to exactly one provider so the\n  // single-provider case (e.g. claude-only filter) skips the picker.\n  const [selectedId, setSelectedId] = useState<string | null>(() => {\n    if (initialProviderId && providers.some((p) => p.providerId === initialProviderId)) {\n      return initialProviderId;\n    }\n    return providers.length === 1 ? (providers[0]?.providerId ?? null) : null;\n  });\n\n  const selected = providers.find((p) => p.providerId === selectedId) ?? null;\n\n  if (!selected) {\n    return (\n      <div className=\"space-y-3\">\n        <div className=\"flex items-start gap-3\">\n          <div className=\"rounded-lg bg-bg-sunken p-2 text-text-secondary\">\n            <KeyRound className=\"h-4 w-4\" />\n          </div>\n          <div className=\"space-y-1\">\n            <h3 className=\"text-sm font-semibold text-text-primary\">\n              {tr('ai.providerCredentials.pickTitle', 'Choose a provider')}\n            </h3>\n            <p className=\"text-sm text-text-secondary\">\n              {tr(\n                'ai.providerCredentials.pickDescription',\n                'Pick the provider whose credentials you want to manage. Keys are stored on the agent and read at session start.'\n              )}\n            </p>\n          </div>\n        </div>\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-2\">\n          {providers.map((p) => (\n            <button\n              key={p.providerId}\n              type=\"button\"\n              onClick={() => setSelectedId(p.providerId)}\n              className=\"flex items-center justify-between gap-2 rounded-lg border border-border-default bg-bg-surface px-3 py-2 text-left hover:border-border-strong hover:bg-bg-sunken transition-colors\"\n            >\n              <div className=\"min-w-0\">\n                <div className=\"text-sm font-medium text-text-primary truncate\">{p.label}</div>\n                <div className=\"text-xs text-text-secondary truncate\">\n                  {p.fields.map((f) => f.key).join(', ')}\n                </div>\n              </div>\n              <ChevronRight className=\"h-4 w-4 flex-shrink-0 text-text-secondary\" />\n            </button>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-center gap-2\">\n        {providers.length > 1 ? (\n          <button\n            type=\"button\"\n            onClick={() => setSelectedId(null)}\n            className=\"inline-flex items-center gap-1 rounded-md border border-border-default px-2 py-1 text-xs text-text-secondary hover:text-text-primary hover:border-border-strong\"\n            aria-label={tr('ai.providerCredentials.back', 'Back to providers')}\n          >\n            <ArrowLeft className=\"h-3.5 w-3.5\" />\n            {tr('ai.providerCredentials.back', 'Back')}\n          </button>\n        ) : null}\n        <div className=\"rounded-lg bg-bg-sunken p-2 text-text-secondary\">\n          <KeyRound className=\"h-4 w-4\" />\n        </div>\n        <div className=\"min-w-0\">\n          <h3 className=\"text-sm font-semibold text-text-primary truncate\">{selected.label}</h3>\n          <p className=\"text-xs text-text-secondary\">\n            {tr(\n              'ai.providerCredentials.scopedDescription',\n              'Keys are stored on the agent and read at session start.'\n            )}\n          </p>\n        </div>\n      </div>\n      <ProviderCard agent={agent} provider={selected} />\n    </div>\n  );\n}\n\nfunction ProviderCard({ agent, provider }: { agent: AgentRef; provider: AIProviderCredentialDef }) {\n  const tr = useTr();\n  const [values, setValues] = useState<Record<string, string>>({});\n  const [visible, setVisible] = useState<Record<string, boolean>>({});\n  const [loading, setLoading] = useState(true);\n  const [saving, setSaving] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState<string | null>(null);\n\n  const loadValues = useCallback(async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      const entries = await Promise.all(\n        provider.fields.map(async (f) => [f.key, (await getAgentConfigValue(agent, f.key)) ?? ''])\n      );\n      setValues(Object.fromEntries(entries));\n    } catch (err) {\n      setError(\n        err instanceof Error\n          ? err.message\n          : tr('ai.providerCredentials.loadFailed', 'Failed to load provider credentials')\n      );\n    } finally {\n      setLoading(false);\n    }\n  }, [agent, provider.fields, tr]);\n\n  useEffect(() => {\n    void loadValues();\n  }, [loadValues]);\n\n  const persistValue = useCallback(\n    async (key: string, value: string) => {\n      setSaving(key);\n      setError(null);\n      setSuccess(null);\n      try {\n        if (value.trim()) {\n          await setAgentConfigValue(agent, key, value.trim());\n        } else {\n          await deleteAgentConfigValue(agent, key);\n        }\n        setSuccess(\n          value.trim()\n            ? tr('ai.providerCredentials.saved', `${key} saved`)\n            : tr('ai.providerCredentials.cleared', `${key} cleared`)\n        );\n      } catch (err) {\n        setError(\n          err instanceof Error\n            ? err.message\n            : tr('ai.providerCredentials.saveFailed', 'Failed to save credential')\n        );\n      } finally {\n        setSaving(null);\n      }\n    },\n    [agent, tr]\n  );\n\n  return (\n    <div className=\"rounded-xl border border-border-default bg-bg-surface p-4 space-y-3\">\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-semibold text-text-primary\">{provider.label}</h4>\n        <p className=\"text-xs text-text-secondary\">{provider.description}</p>\n      </div>\n\n      {error ? (\n        <div className=\"rounded-lg border border-status-error-border bg-status-error-bg px-3 py-2 text-sm text-status-error-text\">\n          {error}\n        </div>\n      ) : null}\n      {success ? (\n        <div className=\"rounded-lg border border-status-success-border bg-status-success-bg px-3 py-2 text-sm text-status-success-text\">\n          {success}\n        </div>\n      ) : null}\n\n      {loading ? (\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.providerCredentials.loading', 'Loading…')}\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {provider.fields.map((f) => (\n            <CredentialField\n              key={f.key}\n              label={f.key}\n              secret={f.secret ?? false}\n              value={values[f.key] ?? ''}\n              onChange={(v) => setValues((cur) => ({ ...cur, [f.key]: v }))}\n              saving={saving === f.key}\n              visible={visible[f.key] ?? false}\n              onToggleVisible={() => setVisible((cur) => ({ ...cur, [f.key]: !cur[f.key] }))}\n              onSave={() => void persistValue(f.key, values[f.key] ?? '')}\n              onClear={() => void persistValue(f.key, '')}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\ninterface CredentialFieldProps {\n  label: string;\n  secret: boolean;\n  value: string;\n  onChange: (value: string) => void;\n  saving: boolean;\n  visible: boolean;\n  onToggleVisible: () => void;\n  onSave: () => void;\n  onClear: () => void;\n}\n\nfunction CredentialField({\n  label,\n  secret,\n  value,\n  onChange,\n  saving,\n  visible,\n  onToggleVisible,\n  onSave,\n  onClear,\n}: CredentialFieldProps) {\n  const showAsPassword = secret && !visible;\n  return (\n    <div className=\"space-y-2 rounded-lg border border-border-default bg-bg-primary p-3\">\n      <label className=\"block text-xs font-medium text-text-secondary\">{label}</label>\n      <div className=\"flex gap-2\">\n        <div className=\"relative flex-1\">\n          <input\n            type={showAsPassword ? 'password' : 'text'}\n            value={value}\n            onChange={(event) => onChange(event.target.value)}\n            autoComplete=\"off\"\n            spellCheck={false}\n            className=\"w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 pr-10 text-sm text-text-primary\"\n          />\n          {secret ? (\n            <button\n              type=\"button\"\n              onClick={onToggleVisible}\n              className=\"absolute right-2 top-1/2 -translate-y-1/2 text-text-secondary hover:text-text-primary\"\n            >\n              {visible ? <EyeOff className=\"h-4 w-4\" /> : <Eye className=\"h-4 w-4\" />}\n            </button>\n          ) : null}\n        </div>\n        <button\n          type=\"button\"\n          onClick={onSave}\n          disabled={saving}\n          className=\"inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg-hover disabled:opacity-50\"\n        >\n          {saving ? <Loader2 className=\"h-4 w-4 animate-spin\" /> : <Save className=\"h-4 w-4\" />}\n          Save\n        </button>\n        <button\n          type=\"button\"\n          onClick={onClear}\n          disabled={saving || !value}\n          className=\"inline-flex items-center gap-1.5 rounded-md border border-border-default px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:border-border-strong disabled:opacity-50\"\n        >\n          <Trash2 className=\"h-4 w-4\" />\n          Clear\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AIProviderCredentialsCard.js","names":[],"sources":["../../../src/components/ai/AIProviderCredentialsCard.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport {\n  ArrowLeft,\n  ChevronRight,\n  Eye,\n  EyeOff,\n  KeyRound,\n  Loader2,\n  Save,\n  Trash2,\n} from 'lucide-react';\n\nimport { useTr } from '../../shared/hooks/useTr';\nimport {\n  deleteAgentConfigValue,\n  getAgentConfigValue,\n  setAgentConfigValue,\n  type AgentRef,\n} from '@/services/aiApi';\n\n/**\n * One provider definition — what env-var-style keys the agent stores under\n * its config bag and what to call the provider in the UI. Kept as a flat\n * static list rather than discovered from the plugin manifest because the\n * config keys are part of the upstream SDK contract (ANTHROPIC_API_KEY,\n * OPENAI_API_KEY, etc.) and don't change with each plugin release.\n */\nexport interface AIProviderCredentialDef {\n  /** Stable provider id — usually matches the plugin's pluginName. */\n  providerId: string;\n  /** Display name shown in the card heading. */\n  label: string;\n  /** Short helper text under the heading. */\n  description: string;\n  /**\n   * One row per key. The `kind` distinguishes a primary credential (for\n   * which the SDK refuses to start without ONE of the listed keys) from\n   * an optional URL/host override.\n   */\n  fields: Array<{\n    /** Agent-config key name, also rendered as the input label. */\n    key: string;\n    /**\n     * Whether the field is a secret (rendered as password with eye toggle)\n     * or a plain string (URL / host overrides — visible by default).\n     */\n    secret?: boolean;\n    /**\n     * Whether saving this field alone (or any sibling field with\n     * primary=true) is enough to authenticate the provider. The card\n     * surfaces an \"at least one set\" indicator using this — used by the\n     * SDK-auth-missing modal to enable the Continue button as soon as\n     * either ANTHROPIC_API_KEY *or* ANTHROPIC_AUTH_TOKEN is saved.\n     *\n     * Defaults to `true` for secret fields and `false` for plain-text\n     * overrides (URLs/hosts). Set explicitly when a secret field is\n     * supplementary rather than authentication-conferring.\n     */\n    primary?: boolean;\n  }>;\n}\n\n/**\n * Catalog of every AI provider whose plugin reads credentials from the\n * agent's config bag (POST /api/config). CLI-only providers (Aider, Amp,\n * Copilot, Crush, Goose, Plandex, Pi) authenticate via their own harness\n * binary (~/.claude/, ~/.config/opencode/ etc.) — Bridle handles those\n * and they don't appear here.\n */\nexport const AI_PROVIDER_CREDENTIALS: AIProviderCredentialDef[] = [\n  {\n    providerId: 'claude',\n    label: 'Anthropic Claude',\n    description:\n      'Claude SDK sessions require either ANTHROPIC_API_KEY or ANTHROPIC_AUTH_TOKEN on the agent. Save one of them to make SDK sessions work.',\n    fields: [\n      { key: 'ANTHROPIC_API_KEY', secret: true },\n      { key: 'ANTHROPIC_AUTH_TOKEN', secret: true },\n    ],\n  },\n  {\n    providerId: 'codex',\n    label: 'OpenAI Codex',\n    description:\n      'Codex SDK / CLI sessions read OPENAI_API_KEY from the agent. Set it here to enable Codex-backed sessions.',\n    fields: [{ key: 'OPENAI_API_KEY', secret: true }],\n  },\n  {\n    providerId: 'gemini',\n    label: 'Google Gemini',\n    description:\n      'Gemini SDK reads GEMINI_API_KEY (preferred) or GOOGLE_API_KEY. Either one works — both shown so an existing GOOGLE_API_KEY in your environment keeps working.',\n    fields: [\n      { key: 'GEMINI_API_KEY', secret: true },\n      { key: 'GOOGLE_API_KEY', secret: true },\n    ],\n  },\n  {\n    providerId: 'openai-compat',\n    label: 'OpenAI-Compatible',\n    description:\n      'Generic OpenAI-compatible provider (Together, Groq, Mistral, etc.). Set the API key and the base URL the SDK should hit.',\n    fields: [{ key: 'OPENAI_COMPAT_API_KEY', secret: true }, { key: 'OPENAI_COMPAT_BASE_URL' }],\n  },\n  {\n    providerId: 'cursor',\n    label: 'Cursor',\n    description:\n      'Cursor agent (CLI + SDK) reads CURSOR_API_KEY from the agent. Set it here to enable both modes.',\n    fields: [{ key: 'CURSOR_API_KEY', secret: true }],\n  },\n  {\n    providerId: 'openrouter',\n    label: 'OpenRouter',\n    description: 'OpenRouter aggregator (300+ models, SDK only). Set OPENROUTER_API_KEY to enable.',\n    fields: [{ key: 'OPENROUTER_API_KEY', secret: true }],\n  },\n  {\n    providerId: 'minimax',\n    label: 'Minimax',\n    description:\n      'Minimax provider (CLI + Anthropic-compatible SDK). Set MINIMAX_API_KEY to enable.',\n    fields: [{ key: 'MINIMAX_API_KEY', secret: true }],\n  },\n  {\n    providerId: 'ollama',\n    label: 'Ollama',\n    description:\n      'Ollama Cloud + self-hosted (CLI + SDK). OLLAMA_API_KEY for Cloud; OLLAMA_HOST optional override (defaults: https://ollama.com when key present, http://localhost:11434 otherwise).',\n    fields: [{ key: 'OLLAMA_API_KEY', secret: true }, { key: 'OLLAMA_HOST' }],\n  },\n];\n\ninterface AIProviderCredentialsCardProps {\n  agent: AgentRef;\n  /**\n   * Optional filter — when present, only render providers whose providerId\n   * appears in the list. Lets a future caller scope the card to \"only the\n   * providers I have plugins installed for\" without changing the catalog.\n   */\n  providerIds?: string[];\n  /**\n   * When provided, the staged picker preselects this provider so the\n   * caller (e.g. the SDK-auth-missing modal) can drop the user straight\n   * onto the right form without an extra click.\n   */\n  initialProviderId?: string;\n  /**\n   * Fires whenever the currently-selected provider's saved-state changes\n   * on disk. `satisfied` is true when at least one primary (auth-conferring)\n   * field has a saved non-empty value. Used by the SDK-auth-missing modal\n   * to enable a Continue affordance the moment the user persists any\n   * acceptable credential, without forcing them to also fill the others.\n   */\n  onProviderAuthSatisfiedChange?: (satisfied: boolean) => void;\n}\n\n/**\n * Staged credentials manager: shows a provider picker first, then on\n * select renders one card with that provider's config keys plus a back\n * button. Keeps the rendered DOM small (and the surrounding modal\n * viewport-friendly) regardless of how many providers are in the catalog.\n *\n * Replaces the older Claude-only ClaudeCredentialsCard.\n */\nexport function AIProviderCredentialsCard({\n  agent,\n  providerIds,\n  initialProviderId,\n  onProviderAuthSatisfiedChange,\n}: AIProviderCredentialsCardProps) {\n  const tr = useTr();\n  const providers = providerIds\n    ? AI_PROVIDER_CREDENTIALS.filter((p) => providerIds.includes(p.providerId))\n    : AI_PROVIDER_CREDENTIALS;\n\n  // Preselect when the catalog narrows to exactly one provider so the\n  // single-provider case (e.g. claude-only filter) skips the picker.\n  const [selectedId, setSelectedId] = useState<string | null>(() => {\n    if (initialProviderId && providers.some((p) => p.providerId === initialProviderId)) {\n      return initialProviderId;\n    }\n    return providers.length === 1 ? (providers[0]?.providerId ?? null) : null;\n  });\n\n  const selected = providers.find((p) => p.providerId === selectedId) ?? null;\n\n  if (!selected) {\n    return (\n      <div className=\"space-y-3\">\n        <div className=\"flex items-start gap-3\">\n          <div className=\"rounded-lg bg-bg-sunken p-2 text-text-secondary\">\n            <KeyRound className=\"h-4 w-4\" />\n          </div>\n          <div className=\"space-y-1\">\n            <h3 className=\"text-sm font-semibold text-text-primary\">\n              {tr('ai.providerCredentials.pickTitle', 'Choose a provider')}\n            </h3>\n            <p className=\"text-sm text-text-secondary\">\n              {tr(\n                'ai.providerCredentials.pickDescription',\n                'Pick the provider whose credentials you want to manage. Keys are stored on the agent and read at session start.'\n              )}\n            </p>\n          </div>\n        </div>\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-2\">\n          {providers.map((p) => (\n            <button\n              key={p.providerId}\n              type=\"button\"\n              onClick={() => setSelectedId(p.providerId)}\n              className=\"flex items-center justify-between gap-2 rounded-lg border border-border-default bg-bg-surface px-3 py-2 text-left hover:border-border-strong hover:bg-bg-sunken transition-colors\"\n            >\n              <div className=\"min-w-0\">\n                <div className=\"text-sm font-medium text-text-primary truncate\">{p.label}</div>\n                <div className=\"text-xs text-text-secondary truncate\">\n                  {p.fields.map((f) => f.key).join(', ')}\n                </div>\n              </div>\n              <ChevronRight className=\"h-4 w-4 flex-shrink-0 text-text-secondary\" />\n            </button>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-center gap-2\">\n        {providers.length > 1 ? (\n          <button\n            type=\"button\"\n            onClick={() => setSelectedId(null)}\n            className=\"inline-flex items-center gap-1 rounded-md border border-border-default px-2 py-1 text-xs text-text-secondary hover:text-text-primary hover:border-border-strong\"\n            aria-label={tr('ai.providerCredentials.back', 'Back to providers')}\n          >\n            <ArrowLeft className=\"h-3.5 w-3.5\" />\n            {tr('ai.providerCredentials.back', 'Back')}\n          </button>\n        ) : null}\n        <div className=\"rounded-lg bg-bg-sunken p-2 text-text-secondary\">\n          <KeyRound className=\"h-4 w-4\" />\n        </div>\n        <div className=\"min-w-0\">\n          <h3 className=\"text-sm font-semibold text-text-primary truncate\">{selected.label}</h3>\n          <p className=\"text-xs text-text-secondary\">\n            {tr(\n              'ai.providerCredentials.scopedDescription',\n              'Keys are stored on the agent and read at session start.'\n            )}\n          </p>\n        </div>\n      </div>\n      <ProviderCard\n        agent={agent}\n        provider={selected}\n        onAuthSatisfiedChange={onProviderAuthSatisfiedChange}\n      />\n    </div>\n  );\n}\n\nfunction isPrimaryField(f: AIProviderCredentialDef['fields'][number]): boolean {\n  // Defaults: secret fields gate auth; URL/host overrides don't.\n  return f.primary ?? f.secret ?? false;\n}\n\nfunction ProviderCard({\n  agent,\n  provider,\n  onAuthSatisfiedChange,\n}: {\n  agent: AgentRef;\n  provider: AIProviderCredentialDef;\n  onAuthSatisfiedChange?: (satisfied: boolean) => void;\n}) {\n  const tr = useTr();\n  const [values, setValues] = useState<Record<string, string>>({});\n  // savedValues tracks what's actually on the agent (last successful\n  // load/persist), not the unsaved input buffer. This is what drives the\n  // \"auth satisfied\" indicator — typing an API key in the field doesn't\n  // count until the user hits Save.\n  const [savedValues, setSavedValues] = useState<Record<string, string>>({});\n  const [visible, setVisible] = useState<Record<string, boolean>>({});\n  const [loading, setLoading] = useState(true);\n  const [saving, setSaving] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState<string | null>(null);\n\n  const primaryKeys = provider.fields.filter(isPrimaryField).map((f) => f.key);\n  const satisfiedPrimaryKeys = primaryKeys.filter((k) => (savedValues[k] ?? '').trim().length > 0);\n  const authSatisfied = satisfiedPrimaryKeys.length > 0;\n\n  // Notify parent whenever satisfied flips. Effect (not inline call) so\n  // children don't render-during-render of the parent.\n  useEffect(() => {\n    onAuthSatisfiedChange?.(authSatisfied);\n  }, [authSatisfied, onAuthSatisfiedChange]);\n\n  const loadValues = useCallback(async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      const entries = await Promise.all(\n        provider.fields.map(async (f) => [f.key, (await getAgentConfigValue(agent, f.key)) ?? ''])\n      );\n      const next = Object.fromEntries(entries);\n      setValues(next);\n      setSavedValues(next);\n    } catch (err) {\n      setError(\n        err instanceof Error\n          ? err.message\n          : tr('ai.providerCredentials.loadFailed', 'Failed to load provider credentials')\n      );\n    } finally {\n      setLoading(false);\n    }\n  }, [agent, provider.fields, tr]);\n\n  useEffect(() => {\n    void loadValues();\n  }, [loadValues]);\n\n  const persistValue = useCallback(\n    async (key: string, value: string) => {\n      setSaving(key);\n      setError(null);\n      setSuccess(null);\n      const trimmed = value.trim();\n      try {\n        if (trimmed) {\n          await setAgentConfigValue(agent, key, trimmed);\n        } else {\n          await deleteAgentConfigValue(agent, key);\n        }\n        // Mirror the persisted result into savedValues so the auth-\n        // satisfied banner / Continue button update immediately.\n        setSavedValues((cur) => ({ ...cur, [key]: trimmed }));\n        setSuccess(\n          trimmed\n            ? tr('ai.providerCredentials.saved', `${key} saved`)\n            : tr('ai.providerCredentials.cleared', `${key} cleared`)\n        );\n      } catch (err) {\n        setError(\n          err instanceof Error\n            ? err.message\n            : tr('ai.providerCredentials.saveFailed', 'Failed to save credential')\n        );\n      } finally {\n        setSaving(null);\n      }\n    },\n    [agent, tr]\n  );\n\n  return (\n    <div className=\"rounded-xl border border-border-default bg-bg-surface p-4 space-y-3\">\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-semibold text-text-primary\">{provider.label}</h4>\n        <p className=\"text-xs text-text-secondary\">{provider.description}</p>\n        {primaryKeys.length > 1 ? (\n          <p className=\"text-xs text-text-tertiary\">\n            {tr(\n              'ai.providerCredentials.eitherOr',\n              `Save any one of: ${primaryKeys.join(' · ')}. You don't need to fill all of them.`\n            )}\n          </p>\n        ) : null}\n      </div>\n\n      {/* Auth-satisfied banner — surfaces the moment any primary credential\n          is persisted on the agent. The SDK-auth-missing modal pairs this\n          with a Continue button so the user knows they can proceed. */}\n      {authSatisfied ? (\n        <div className=\"rounded-lg border border-status-success-border bg-status-success-bg px-3 py-2 text-xs text-status-success-text\">\n          {tr(\n            'ai.providerCredentials.authSatisfied',\n            `${provider.label} is ready. The agent will use ${satisfiedPrimaryKeys.join(' / ')} on the next SDK session.`\n          )}\n        </div>\n      ) : null}\n\n      {error ? (\n        <div className=\"rounded-lg border border-status-error-border bg-status-error-bg px-3 py-2 text-sm text-status-error-text\">\n          {error}\n        </div>\n      ) : null}\n      {success ? (\n        <div className=\"rounded-lg border border-status-success-border bg-status-success-bg px-3 py-2 text-sm text-status-success-text\">\n          {success}\n        </div>\n      ) : null}\n\n      {loading ? (\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.providerCredentials.loading', 'Loading…')}\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {provider.fields.map((f) => (\n            <CredentialField\n              key={f.key}\n              label={f.key}\n              secret={f.secret ?? false}\n              value={values[f.key] ?? ''}\n              onChange={(v) => setValues((cur) => ({ ...cur, [f.key]: v }))}\n              saving={saving === f.key}\n              visible={visible[f.key] ?? false}\n              onToggleVisible={() => setVisible((cur) => ({ ...cur, [f.key]: !cur[f.key] }))}\n              onSave={() => void persistValue(f.key, values[f.key] ?? '')}\n              onClear={() => void persistValue(f.key, '')}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\ninterface CredentialFieldProps {\n  label: string;\n  secret: boolean;\n  value: string;\n  onChange: (value: string) => void;\n  saving: boolean;\n  visible: boolean;\n  onToggleVisible: () => void;\n  onSave: () => void;\n  onClear: () => void;\n}\n\nfunction CredentialField({\n  label,\n  secret,\n  value,\n  onChange,\n  saving,\n  visible,\n  onToggleVisible,\n  onSave,\n  onClear,\n}: CredentialFieldProps) {\n  const showAsPassword = secret && !visible;\n  return (\n    <div className=\"space-y-2 rounded-lg border border-border-default bg-bg-primary p-3\">\n      <label className=\"block text-xs font-medium text-text-secondary\">{label}</label>\n      <div className=\"flex gap-2\">\n        <div className=\"relative flex-1\">\n          <input\n            type={showAsPassword ? 'password' : 'text'}\n            value={value}\n            onChange={(event) => onChange(event.target.value)}\n            autoComplete=\"off\"\n            spellCheck={false}\n            className=\"w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 pr-10 text-sm text-text-primary\"\n          />\n          {secret ? (\n            <button\n              type=\"button\"\n              onClick={onToggleVisible}\n              className=\"absolute right-2 top-1/2 -translate-y-1/2 text-text-secondary hover:text-text-primary\"\n            >\n              {visible ? <EyeOff className=\"h-4 w-4\" /> : <Eye className=\"h-4 w-4\" />}\n            </button>\n          ) : null}\n        </div>\n        <button\n          type=\"button\"\n          onClick={onSave}\n          disabled={saving}\n          className=\"inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg-hover disabled:opacity-50\"\n        >\n          {saving ? <Loader2 className=\"h-4 w-4 animate-spin\" /> : <Save className=\"h-4 w-4\" />}\n          Save\n        </button>\n        <button\n          type=\"button\"\n          onClick={onClear}\n          disabled={saving || !value}\n          className=\"inline-flex items-center gap-1.5 rounded-md border border-border-default px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:border-border-strong disabled:opacity-50\"\n        >\n          <Trash2 className=\"h-4 w-4\" />\n          Clear\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/security/SecurityProviderDrawer.js

@@ -6,7 +6,55 @@ import { useMutation as s, useQuery as c } from "@apollo/client/react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/security/SecurityProviderDrawer.tsx
 function d({ vibeId: d, stage: f, onClose: p }) {
-	let { data: m, loading: h } = c(t), [g, { loading: _ }] = s(n), [v, { loading: y }] = s(e), [b, x] = a(null), S = i(() => (m?.securityProviders ?? []).filter((e) => e.stage === f && e.enabled), [m, f]), C = r.get(f), w = C?.slug ?? f.toLowerCase().replace(/_/g, "-");
+	let { data: m, loading: h } = c(t), [g, { loading: _ }] = s(n), [v, { loading: y }] = s(e), [b, x] = a(null), S = i(() => (m?.securityProviders ?? []).filter((e) => e.stage === f && e.enabled), [m, f]), C = r.get(f), w = C?.slug ?? f.toLowerCase().replace(/_/g, "-"), T = {
+		SECRETS_SCAN: [{
+			pkg: "@burdenoff/vibe-plugin-gitleaks",
+			desc: "Gitleaks — git secret scanner"
+		}, {
+			pkg: "@burdenoff/vibe-plugin-trufflehog",
+			desc: "TruffleHog — credential scanner"
+		}],
+		SAST: [{
+			pkg: "@burdenoff/vibe-plugin-semgrep",
+			desc: "Semgrep — static analysis"
+		}, {
+			pkg: "@burdenoff/vibe-plugin-codeql",
+			desc: "CodeQL — deep SAST (slow)"
+		}],
+		DEPENDENCY_SCAN: [{
+			pkg: "@burdenoff/vibe-plugin-trivy",
+			desc: "Trivy — deps & CVE scan"
+		}, {
+			pkg: "@burdenoff/vibe-plugin-osv-scanner",
+			desc: "OSV — OSS vuln DB"
+		}],
+		LICENSE_SCAN: [{
+			pkg: "@burdenoff/vibe-plugin-license-finder",
+			desc: "license-finder"
+		}],
+		SBOM: [{
+			pkg: "@burdenoff/vibe-plugin-syft",
+			desc: "Syft — SBOM generator"
+		}],
+		CONTAINER_SCAN: [{
+			pkg: "@burdenoff/vibe-plugin-trivy",
+			desc: "Trivy — image CVE scan"
+		}, {
+			pkg: "@burdenoff/vibe-plugin-grype",
+			desc: "Grype — image scanner"
+		}],
+		IAC_SCAN: [{
+			pkg: "@burdenoff/vibe-plugin-checkov",
+			desc: "Checkov — IaC linter"
+		}, {
+			pkg: "@burdenoff/vibe-plugin-tfsec",
+			desc: "tfsec — Terraform"
+		}],
+		DAST: [{
+			pkg: "@burdenoff/vibe-plugin-zap",
+			desc: "OWASP ZAP — dynamic scan"
+		}]
+	}[f] ?? [];
 	return /* @__PURE__ */ u("aside", {
 		"data-testid": "security-provider-drawer",
 		className: "fixed right-0 top-0 bottom-0 w-[28rem] bg-bg-elevated border-l border-border-default shadow-lg z-50 overflow-y-auto",
@@ -33,9 +81,9 @@ function d({ vibeId: d, stage: f, onClose: p }) {
 					className: "text-xs text-text-secondary",
 					children: "Loading providers…"
 				}),
-				!h && S.length === 0 && /* @__PURE__ */ u("p", {
-					className: "text-xs text-text-secondary",
-					children: [
+				!h && S.length === 0 && /* @__PURE__ */ u("div", {
+					className: "space-y-2 text-xs text-text-secondary",
+					children: [/* @__PURE__ */ u("p", { children: [
 						"No providers registered for this stage. Install one via",
 						" ",
 						/* @__PURE__ */ l("code", {
@@ -43,7 +91,25 @@ function d({ vibeId: d, stage: f, onClose: p }) {
 							children: "vibe plugin install …"
 						}),
 						"."
-					]
+					] }), T.length > 0 && /* @__PURE__ */ u("div", {
+						className: "rounded-md border border-border-subtle p-3 space-y-2",
+						children: [/* @__PURE__ */ l("p", {
+							className: "text-text-primary font-medium",
+							children: "Suggested providers"
+						}), /* @__PURE__ */ l("ul", {
+							className: "space-y-1.5",
+							children: T.map((e) => /* @__PURE__ */ u("li", {
+								className: "flex flex-col",
+								children: [/* @__PURE__ */ u("code", {
+									className: "text-text-primary text-[11px] break-all",
+									children: ["vibe plugin install ", e.pkg]
+								}), /* @__PURE__ */ l("span", {
+									className: "text-text-secondary",
+									children: e.desc
+								})]
+							}, e.pkg))
+						})]
+					})]
 				}),
 				S.map((e) => /* @__PURE__ */ u("label", {
 					className: "flex items-start gap-3 p-3 rounded-md border border-border-subtle hover:border-border-default cursor-pointer",
@@ -75,32 +141,41 @@ function d({ vibeId: d, stage: f, onClose: p }) {
 				}, e.id)),
 				/* @__PURE__ */ u("div", {
 					className: "flex gap-2 pt-2 border-t border-border-subtle",
-					children: [/* @__PURE__ */ l("button", {
-						type: "button",
-						disabled: !b || _,
-						onClick: async () => {
-							b && await g({ variables: { input: {
-								vibeId: d,
-								stage: f,
-								providerKey: b,
-								config: {}
-							} } });
-						},
-						className: "flex-1 px-3 py-2 rounded-md bg-action-primary-bg text-action-primary-text disabled:opacity-50",
-						children: "Save"
-					}), /* @__PURE__ */ l("button", {
-						type: "button",
-						disabled: y,
-						"data-testid": `security-run-scan-${w}`,
-						onClick: async () => {
-							await v({ variables: {
-								vibeId: d,
-								stage: f
-							} });
-						},
-						className: "flex-1 px-3 py-2 rounded-md border border-border-default bg-bg-sunken hover:bg-bg-surface text-text-primary disabled:opacity-50",
-						children: "Run scan"
-					})]
+					children: [
+						/* @__PURE__ */ l("button", {
+							type: "button",
+							disabled: !b || _,
+							onClick: async () => {
+								b && await g({ variables: { input: {
+									vibeId: d,
+									stage: f,
+									providerKey: b,
+									config: {}
+								} } });
+							},
+							className: "flex-1 px-3 py-2 rounded-md bg-action-primary-bg text-action-primary-text disabled:opacity-50",
+							children: "Save"
+						}),
+						/* @__PURE__ */ l("button", {
+							type: "button",
+							disabled: y,
+							"data-testid": `security-run-scan-${w}`,
+							onClick: async () => {
+								await v({ variables: {
+									vibeId: d,
+									stage: f
+								} });
+							},
+							className: "flex-1 px-3 py-2 rounded-md border border-border-default bg-bg-sunken hover:bg-bg-surface text-text-primary disabled:opacity-50",
+							children: "Run scan"
+						}),
+						/* @__PURE__ */ l("button", {
+							type: "button",
+							onClick: p,
+							className: "px-3 py-2 rounded-md border border-border-default text-text-primary hover:bg-bg-sunken",
+							children: "Close"
+						})
+					]
 				})
 			]
 		})]

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

@@ -1 +1 @@
-{"version":3,"file":"SecurityProviderDrawer.js","names":[],"sources":["../../../src/components/security/SecurityProviderDrawer.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { useMutation, useQuery } from '@apollo/client/react';\nimport { X } from 'lucide-react';\n\nimport {\n  RUN_SECURITY_SCAN_MUTATION,\n  SECURITY_PROVIDERS_QUERY,\n  SET_SECURITY_PROVIDER_MUTATION,\n} from './gql';\nimport { STAGE_BY_ID, type SecurityProviderRow, type SecurityStage } from './types';\n\ninterface DrawerProps {\n  vibeId: string;\n  stage: SecurityStage;\n  onClose: () => void;\n}\n\ninterface ProvidersResp {\n  securityProviders: SecurityProviderRow[];\n}\n\nexport function SecurityProviderDrawer({\n  vibeId,\n  stage,\n  onClose,\n}: DrawerProps): React.ReactElement {\n  const { data, loading } = useQuery<ProvidersResp>(SECURITY_PROVIDERS_QUERY);\n  const [setProvider, { loading: saving }] = useMutation(SET_SECURITY_PROVIDER_MUTATION);\n  const [runScan, { loading: scanning }] = useMutation(RUN_SECURITY_SCAN_MUTATION);\n  const [selected, setSelected] = useState<string | null>(null);\n\n  const available = useMemo(\n    () => (data?.securityProviders ?? []).filter((p) => p.stage === stage && p.enabled),\n    [data, stage]\n  );\n  const stageInfo = STAGE_BY_ID.get(stage);\n  const stageSlug = stageInfo?.slug ?? stage.toLowerCase().replace(/_/g, '-');\n\n  return (\n    <aside\n      data-testid=\"security-provider-drawer\"\n      className=\"fixed right-0 top-0 bottom-0 w-[28rem] bg-bg-elevated border-l border-border-default shadow-lg z-50 overflow-y-auto\"\n    >\n      <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-subtle\">\n        <div>\n          <h3 className=\"text-sm font-semibold text-text-primary\">{stageInfo?.label}</h3>\n          <p className=\"text-xs text-text-secondary\">Configure provider for this stage</p>\n        </div>\n        <button\n          type=\"button\"\n          aria-label=\"Close drawer\"\n          onClick={onClose}\n          className=\"text-text-secondary hover:text-text-primary\"\n        >\n          <X className=\"h-4 w-4\" />\n        </button>\n      </div>\n\n      <div className=\"p-4 space-y-4\" data-testid=\"security-provider-config-form\">\n        {loading && <p className=\"text-xs text-text-secondary\">Loading providers…</p>}\n        {!loading && available.length === 0 && (\n          <p className=\"text-xs text-text-secondary\">\n            No providers registered for this stage. Install one via{' '}\n            <code className=\"text-text-primary\">vibe plugin install …</code>.\n          </p>\n        )}\n        {available.map((p) => (\n          <label\n            key={p.id}\n            className=\"flex items-start gap-3 p-3 rounded-md border border-border-subtle hover:border-border-default cursor-pointer\"\n          >\n            <input\n              type=\"radio\"\n              name=\"provider\"\n              value={p.providerName}\n              checked={selected === p.providerName || (selected === null && p.isDefault)}\n              onChange={() => setSelected(p.providerName)}\n              aria-label={p.providerName}\n            />\n            <div className=\"flex-1\">\n              <div className=\"text-sm font-medium text-text-primary\">{p.providerName}</div>\n              <div className=\"text-xs text-text-secondary\">\n                {p.pluginName} · v{p.toolVersion}\n                {p.isDefault && <span className=\"ml-2 text-action-primary-bg\">default</span>}\n              </div>\n            </div>\n          </label>\n        ))}\n\n        <div className=\"flex gap-2 pt-2 border-t border-border-subtle\">\n          <button\n            type=\"button\"\n            disabled={!selected || saving}\n            onClick={async () => {\n              if (!selected) return;\n              await setProvider({\n                variables: {\n                  input: { vibeId, stage, providerKey: selected, config: {} },\n                },\n              });\n            }}\n            className=\"flex-1 px-3 py-2 rounded-md bg-action-primary-bg text-action-primary-text disabled:opacity-50\"\n          >\n            Save\n          </button>\n          <button\n            type=\"button\"\n            disabled={scanning}\n            data-testid={`security-run-scan-${stageSlug}`}\n            onClick={async () => {\n              await runScan({ variables: { vibeId, stage } });\n            }}\n            className=\"flex-1 px-3 py-2 rounded-md border border-border-default bg-bg-sunken hover:bg-bg-surface text-text-primary disabled:opacity-50\"\n          >\n            Run scan\n          </button>\n        </div>\n      </div>\n    </aside>\n  );\n}\n"],"mappings":";;;;;;;AAqBA,SAAgB,EAAuB,EACrC,WACA,UACA,cACkC;CAClC,IAAM,EAAE,SAAM,eAAY,EAAwB,EAAyB,EACrE,CAAC,GAAa,EAAE,SAAS,OAAY,EAAY,EAA+B,EAChF,CAAC,GAAS,EAAE,SAAS,OAAc,EAAY,EAA2B,EAC1E,CAAC,GAAU,KAAe,EAAwB,KAAK,EAEvD,IAAY,SACT,GAAM,qBAAqB,EAAE,EAAE,QAAQ,MAAM,EAAE,UAAU,KAAS,EAAE,QAAQ,EACnF,CAAC,GAAM,EAAM,CACd,EACK,IAAY,EAAY,IAAI,EAAM,EAClC,IAAY,GAAW,QAAQ,EAAM,aAAa,CAAC,QAAQ,MAAM,IAAI;AAE3E,QACE,kBAAC,SAAD;EACE,eAAY;EACZ,WAAU;YAFZ,CAIE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cAA2C,GAAW;IAAW,CAAA,EAC/E,kBAAC,KAAD;IAAG,WAAU;cAA8B;IAAqC,CAAA,CAC5E,EAAA,CAAA,EACN,kBAAC,UAAD;IACE,MAAK;IACL,cAAW;IACX,SAAS;IACT,WAAU;cAEV,kBAAC,GAAD,EAAG,WAAU,WAAY,CAAA;IAClB,CAAA,CACL;MAEN,kBAAC,OAAD;GAAK,WAAU;GAAgB,eAAY;aAA3C;IACG,KAAW,kBAAC,KAAD;KAAG,WAAU;eAA8B;KAAsB,CAAA;IAC5E,CAAC,KAAW,EAAU,WAAW,KAChC,kBAAC,KAAD;KAAG,WAAU;eAAb;MAA2C;MACe;MACxD,kBAAC,QAAD;OAAM,WAAU;iBAAoB;OAA4B,CAAA;;MAC9D;;IAEL,EAAU,KAAK,MACd,kBAAC,SAAD;KAEE,WAAU;eAFZ,CAIE,kBAAC,SAAD;MACE,MAAK;MACL,MAAK;MACL,OAAO,EAAE;MACT,SAAS,MAAa,EAAE,gBAAiB,MAAa,QAAQ,EAAE;MAChE,gBAAgB,EAAY,EAAE,aAAa;MAC3C,cAAY,EAAE;MACd,CAAA,EACF,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAyC,EAAE;OAAmB,CAAA,EAC7E,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACG,EAAE;QAAW;QAAK,EAAE;QACpB,EAAE,aAAa,kBAAC,QAAD;SAAM,WAAU;mBAA8B;SAAc,CAAA;QACxE;SACF;QACA;OAlBD,EAAE,GAkBD,CACR;IAEF,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,UAAU,CAAC,KAAY;MACvB,SAAS,YAAY;AACd,YACL,MAAM,EAAY,EAChB,WAAW,EACT,OAAO;QAAE;QAAQ;QAAO,aAAa;QAAU,QAAQ,EAAE;QAAE,EAC5D,EACF,CAAC;;MAEJ,WAAU;gBACX;MAEQ,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,UAAU;MACV,eAAa,qBAAqB;MAClC,SAAS,YAAY;AACnB,aAAM,EAAQ,EAAE,WAAW;QAAE;QAAQ;QAAO,EAAE,CAAC;;MAEjD,WAAU;gBACX;MAEQ,CAAA,CACL;;IACF;KACA"}
+{"version":3,"file":"SecurityProviderDrawer.js","names":[],"sources":["../../../src/components/security/SecurityProviderDrawer.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { useMutation, useQuery } from '@apollo/client/react';\nimport { X } from 'lucide-react';\n\nimport {\n  RUN_SECURITY_SCAN_MUTATION,\n  SECURITY_PROVIDERS_QUERY,\n  SET_SECURITY_PROVIDER_MUTATION,\n} from './gql';\nimport { STAGE_BY_ID, type SecurityProviderRow, type SecurityStage } from './types';\n\ninterface DrawerProps {\n  vibeId: string;\n  stage: SecurityStage;\n  onClose: () => void;\n}\n\ninterface ProvidersResp {\n  securityProviders: SecurityProviderRow[];\n}\n\nexport function SecurityProviderDrawer({\n  vibeId,\n  stage,\n  onClose,\n}: DrawerProps): React.ReactElement {\n  const { data, loading } = useQuery<ProvidersResp>(SECURITY_PROVIDERS_QUERY);\n  const [setProvider, { loading: saving }] = useMutation(SET_SECURITY_PROVIDER_MUTATION);\n  const [runScan, { loading: scanning }] = useMutation(RUN_SECURITY_SCAN_MUTATION);\n  const [selected, setSelected] = useState<string | null>(null);\n\n  const available = useMemo(\n    () => (data?.securityProviders ?? []).filter((p) => p.stage === stage && p.enabled),\n    [data, stage]\n  );\n  const stageInfo = STAGE_BY_ID.get(stage);\n  const stageSlug = stageInfo?.slug ?? stage.toLowerCase().replace(/_/g, '-');\n\n  // Suggested installable providers by stage — these are the well-known\n  // vibe-plugin packages we ship and recommend for each security lifecycle\n  // step. Surfaced when the workspace has no providers registered yet so the\n  // user has a concrete next step (\"vibe plugin install …\") instead of a\n  // dead-end empty state.\n  const SUGGESTIONS_BY_STAGE: Record<string, ReadonlyArray<{ pkg: string; desc: string }>> = {\n    SECRETS_SCAN: [\n      { pkg: '@burdenoff/vibe-plugin-gitleaks', desc: 'Gitleaks — git secret scanner' },\n      { pkg: '@burdenoff/vibe-plugin-trufflehog', desc: 'TruffleHog — credential scanner' },\n    ],\n    SAST: [\n      { pkg: '@burdenoff/vibe-plugin-semgrep', desc: 'Semgrep — static analysis' },\n      { pkg: '@burdenoff/vibe-plugin-codeql', desc: 'CodeQL — deep SAST (slow)' },\n    ],\n    DEPENDENCY_SCAN: [\n      { pkg: '@burdenoff/vibe-plugin-trivy', desc: 'Trivy — deps & CVE scan' },\n      { pkg: '@burdenoff/vibe-plugin-osv-scanner', desc: 'OSV — OSS vuln DB' },\n    ],\n    LICENSE_SCAN: [{ pkg: '@burdenoff/vibe-plugin-license-finder', desc: 'license-finder' }],\n    SBOM: [{ pkg: '@burdenoff/vibe-plugin-syft', desc: 'Syft — SBOM generator' }],\n    CONTAINER_SCAN: [\n      { pkg: '@burdenoff/vibe-plugin-trivy', desc: 'Trivy — image CVE scan' },\n      { pkg: '@burdenoff/vibe-plugin-grype', desc: 'Grype — image scanner' },\n    ],\n    IAC_SCAN: [\n      { pkg: '@burdenoff/vibe-plugin-checkov', desc: 'Checkov — IaC linter' },\n      { pkg: '@burdenoff/vibe-plugin-tfsec', desc: 'tfsec — Terraform' },\n    ],\n    DAST: [{ pkg: '@burdenoff/vibe-plugin-zap', desc: 'OWASP ZAP — dynamic scan' }],\n  };\n  const suggestions = SUGGESTIONS_BY_STAGE[stage] ?? [];\n\n  return (\n    <aside\n      data-testid=\"security-provider-drawer\"\n      className=\"fixed right-0 top-0 bottom-0 w-[28rem] bg-bg-elevated border-l border-border-default shadow-lg z-50 overflow-y-auto\"\n    >\n      <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-subtle\">\n        <div>\n          <h3 className=\"text-sm font-semibold text-text-primary\">{stageInfo?.label}</h3>\n          <p className=\"text-xs text-text-secondary\">Configure provider for this stage</p>\n        </div>\n        <button\n          type=\"button\"\n          aria-label=\"Close drawer\"\n          onClick={onClose}\n          className=\"text-text-secondary hover:text-text-primary\"\n        >\n          <X className=\"h-4 w-4\" />\n        </button>\n      </div>\n\n      <div className=\"p-4 space-y-4\" data-testid=\"security-provider-config-form\">\n        {loading && <p className=\"text-xs text-text-secondary\">Loading providers…</p>}\n        {!loading && available.length === 0 && (\n          <div className=\"space-y-2 text-xs text-text-secondary\">\n            <p>\n              No providers registered for this stage. Install one via{' '}\n              <code className=\"text-text-primary\">vibe plugin install …</code>.\n            </p>\n            {suggestions.length > 0 && (\n              <div className=\"rounded-md border border-border-subtle p-3 space-y-2\">\n                <p className=\"text-text-primary font-medium\">Suggested providers</p>\n                <ul className=\"space-y-1.5\">\n                  {suggestions.map((s) => (\n                    <li key={s.pkg} className=\"flex flex-col\">\n                      <code className=\"text-text-primary text-[11px] break-all\">\n                        vibe plugin install {s.pkg}\n                      </code>\n                      <span className=\"text-text-secondary\">{s.desc}</span>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            )}\n          </div>\n        )}\n        {available.map((p) => (\n          <label\n            key={p.id}\n            className=\"flex items-start gap-3 p-3 rounded-md border border-border-subtle hover:border-border-default cursor-pointer\"\n          >\n            <input\n              type=\"radio\"\n              name=\"provider\"\n              value={p.providerName}\n              checked={selected === p.providerName || (selected === null && p.isDefault)}\n              onChange={() => setSelected(p.providerName)}\n              aria-label={p.providerName}\n            />\n            <div className=\"flex-1\">\n              <div className=\"text-sm font-medium text-text-primary\">{p.providerName}</div>\n              <div className=\"text-xs text-text-secondary\">\n                {p.pluginName} · v{p.toolVersion}\n                {p.isDefault && <span className=\"ml-2 text-action-primary-bg\">default</span>}\n              </div>\n            </div>\n          </label>\n        ))}\n\n        <div className=\"flex gap-2 pt-2 border-t border-border-subtle\">\n          <button\n            type=\"button\"\n            disabled={!selected || saving}\n            onClick={async () => {\n              if (!selected) return;\n              await setProvider({\n                variables: {\n                  input: { vibeId, stage, providerKey: selected, config: {} },\n                },\n              });\n            }}\n            className=\"flex-1 px-3 py-2 rounded-md bg-action-primary-bg text-action-primary-text disabled:opacity-50\"\n          >\n            Save\n          </button>\n          <button\n            type=\"button\"\n            disabled={scanning}\n            data-testid={`security-run-scan-${stageSlug}`}\n            onClick={async () => {\n              await runScan({ variables: { vibeId, stage } });\n            }}\n            className=\"flex-1 px-3 py-2 rounded-md border border-border-default bg-bg-sunken hover:bg-bg-surface text-text-primary disabled:opacity-50\"\n          >\n            Run scan\n          </button>\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"px-3 py-2 rounded-md border border-border-default text-text-primary hover:bg-bg-sunken\"\n          >\n            Close\n          </button>\n        </div>\n      </div>\n    </aside>\n  );\n}\n"],"mappings":"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"}

package/dist/components/vibe/VibeAgentEmptyState.js

@@ -10,7 +10,10 @@ var p = ({ vibeId: p, tr: m, onAttached: h }) => {
 	let g = n(), [_, v] = o(!1), [y, b] = o(null), [x, S] = o(null), { data: C, loading: w } = t({
 		skip: !_,
 		fetchPolicy: "cache-and-network"
-	}), [T] = e(), E = a(() => C?.vibecontrolsAgents ?? [], [C]), D = i(async (e) => {
+	}), [T] = e({
+		refetchQueries: ["GetVibe", "ListVibes"],
+		awaitRefetchQueries: !0
+	}), E = a(() => C?.vibecontrolsAgents ?? [], [C]), D = i(async (e) => {
 		b(null), S(e);
 		try {
 			await T({ variables: { input: {

package/dist/components/vibe/VibeAgentEmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"VibeAgentEmptyState.js","names":[],"sources":["../../../src/components/vibe/VibeAgentEmptyState.tsx"],"sourcesContent":["/**\n * VibeAgentEmptyState — shown on the Vibe details page when the vibe has no\n * agent attached. Tabs that depend on an agent (sessions, gitops, GraphQL\n * playground, git) are hidden, and the user is invited to attach an agent.\n *\n * UX: opens an in-place modal listing the workspace's existing agents so the\n * user can attach one without leaving the vibe detail page. Falls back to\n * navigating to the agents page only if no agents exist in the workspace\n * (so the user can register their first one).\n */\nimport { useCallback, useMemo, useState } from 'react';\nimport type { FC } from 'react';\nimport { ArrowRight, Plus, Server } from 'lucide-react';\nimport { EmptyState } from '@/components/shared';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport {\n  useListAgentsQuery,\n  useAttachAgentToVibeMutation,\n  type ListAgentsQuery,\n} from '@/generated/wspace-operations';\n\nexport interface VibeAgentEmptyStateProps {\n  vibeId: string;\n  tr: (key: string, fallback: string) => string;\n  /** Optional: called after a successful attach so the parent can refetch. */\n  onAttached?: () => void;\n}\n\nexport const VibeAgentEmptyState: FC<VibeAgentEmptyStateProps> = ({ vibeId, tr, onAttached }) => {\n  const navigate = useVibeNavigate();\n  const [open, setOpen] = useState(false);\n  const [errorMessage, setErrorMessage] = useState<string | null>(null);\n  const [busyAgentId, setBusyAgentId] = useState<string | null>(null);\n\n  const { data, loading } = useListAgentsQuery({\n    skip: !open,\n    fetchPolicy: 'cache-and-network',\n  });\n  const [attach] = useAttachAgentToVibeMutation();\n\n  const agents = useMemo<ListAgentsQuery['vibecontrolsAgents']>(\n    () => data?.vibecontrolsAgents ?? [],\n    [data]\n  );\n\n  const handleAttach = useCallback(\n    async (agentId: string) => {\n      setErrorMessage(null);\n      setBusyAgentId(agentId);\n      try {\n        await attach({ variables: { input: { vibeId, agentId } } });\n        setOpen(false);\n        onAttached?.();\n      } catch (err) {\n        setErrorMessage(err instanceof Error ? err.message : String(err));\n      } finally {\n        setBusyAgentId(null);\n      }\n    },\n    [attach, vibeId, onAttached]\n  );\n\n  const handleRegisterNew = useCallback(() => {\n    // Deep-link to the agents page with vibeId so the agents UI can offer\n    // a \"register and attach to this vibe\" affordance.\n    const query = vibeId ? `?attachToVibe=${encodeURIComponent(vibeId)}` : '';\n    navigate(`/agents${query}`);\n  }, [navigate, vibeId]);\n\n  return (\n    <>\n      <div className=\"rounded-lg border border-border-default bg-bg-surface\">\n        <EmptyState\n          icon={<Server className=\"w-8 h-8 text-text-secondary\" />}\n          title={tr('vibeDetails.noAgentTitle', 'No agent attached')}\n          description={tr(\n            'vibeDetails.noAgentDescription',\n            'This vibe is not attached to an agent yet. Sessions, GitOps, GraphQL playground, and git tooling all run through an agent — connect one to unlock those tabs.'\n          )}\n          action={\n            <button\n              type=\"button\"\n              onClick={() => setOpen(true)}\n              className=\"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              {tr('vibeDetails.connectAnAgent', 'Connect an agent to this vibe')}\n              <ArrowRight className=\"w-4 h-4\" />\n            </button>\n          }\n        />\n      </div>\n\n      {open && (\n        <div\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=\"vibe-attach-agent-title\"\n          className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\"\n          onClick={(e) => {\n            if (e.target === e.currentTarget) setOpen(false);\n          }}\n        >\n          <div className=\"w-full max-w-md rounded-lg bg-bg-elevated border border-border-default shadow-xl\">\n            <div className=\"flex items-center justify-between px-5 py-4 border-b border-border-subtle\">\n              <h2\n                id=\"vibe-attach-agent-title\"\n                className=\"text-base font-semibold text-text-primary\"\n              >\n                {tr('vibeDetails.attachAgentTitle', 'Attach an agent')}\n              </h2>\n              <button\n                type=\"button\"\n                onClick={() => setOpen(false)}\n                className=\"text-text-secondary hover:text-text-primary transition-colors\"\n                aria-label={tr('common.close', 'Close')}\n              >\n                ✕\n              </button>\n            </div>\n\n            <div className=\"px-5 py-4 max-h-[60vh] overflow-y-auto\">\n              {loading && agents.length === 0 ? (\n                <p className=\"text-sm text-text-secondary\">{tr('common.loading', 'Loading…')}</p>\n              ) : agents.length === 0 ? (\n                <div className=\"text-sm text-text-secondary space-y-3\">\n                  <p>\n                    {tr(\n                      'vibeDetails.noWorkspaceAgents',\n                      'No agents in this workspace yet. Register one first, then attach it to this vibe.'\n                    )}\n                  </p>\n                  <button\n                    type=\"button\"\n                    onClick={handleRegisterNew}\n                    className=\"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors\"\n                  >\n                    <Plus className=\"w-4 h-4\" />\n                    {tr('vibeDetails.registerAgent', 'Register an agent')}\n                  </button>\n                </div>\n              ) : (\n                <ul className=\"space-y-2\">\n                  {agents.map((a) => (\n                    <li key={a.id}>\n                      <button\n                        type=\"button\"\n                        onClick={() => handleAttach(a.id)}\n                        disabled={busyAgentId !== null}\n                        className=\"w-full flex items-center justify-between gap-3 px-3 py-2.5 rounded-md border border-border-subtle hover:border-border-default hover:bg-action-ghost-bg-hover transition-colors text-left disabled:opacity-60\"\n                      >\n                        <span className=\"flex items-center gap-3 min-w-0\">\n                          <Server className=\"w-4 h-4 text-text-secondary flex-shrink-0\" />\n                          <span className=\"min-w-0\">\n                            <span className=\"block text-sm font-medium text-text-primary truncate\">\n                              {a.name}\n                            </span>\n                            <span className=\"block text-xs text-text-secondary truncate\">\n                              {a.hostname || '—'}{' '}\n                              {a.isActive\n                                ? `· ${tr('agents.active', 'Active')}`\n                                : `· ${tr('agents.inactive', 'Inactive')}`}\n                            </span>\n                          </span>\n                        </span>\n                        <span className=\"text-xs text-text-tertiary\">\n                          {busyAgentId === a.id\n                            ? tr('common.attaching', 'Attaching…')\n                            : tr('vibeDetails.attach', 'Attach')}\n                        </span>\n                      </button>\n                    </li>\n                  ))}\n                </ul>\n              )}\n\n              {errorMessage && (\n                <p className=\"mt-3 text-sm text-status-error-text\">{errorMessage}</p>\n              )}\n            </div>\n\n            {agents.length > 0 && (\n              <div className=\"flex items-center justify-between px-5 py-3 border-t border-border-subtle\">\n                <button\n                  type=\"button\"\n                  onClick={handleRegisterNew}\n                  className=\"text-xs text-text-secondary hover:text-text-primary inline-flex items-center gap-1\"\n                >\n                  <Plus className=\"w-3.5 h-3.5\" />\n                  {tr('vibeDetails.registerAgent', 'Register a new agent')}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => setOpen(false)}\n                  className=\"text-sm px-3 py-1.5 rounded-md border border-border-default text-text-primary hover:bg-action-ghost-bg-hover\"\n                >\n                  {tr('common.cancel', 'Cancel')}\n                </button>\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"VibeAgentEmptyState.js","names":[],"sources":["../../../src/components/vibe/VibeAgentEmptyState.tsx"],"sourcesContent":["/**\n * VibeAgentEmptyState — shown on the Vibe details page when the vibe has no\n * agent attached. Tabs that depend on an agent (sessions, gitops, GraphQL\n * playground, git) are hidden, and the user is invited to attach an agent.\n *\n * UX: opens an in-place modal listing the workspace's existing agents so the\n * user can attach one without leaving the vibe detail page. Falls back to\n * navigating to the agents page only if no agents exist in the workspace\n * (so the user can register their first one).\n */\nimport { useCallback, useMemo, useState } from 'react';\nimport type { FC } from 'react';\nimport { ArrowRight, Plus, Server } from 'lucide-react';\nimport { EmptyState } from '@/components/shared';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport {\n  useListAgentsQuery,\n  useAttachAgentToVibeMutation,\n  type ListAgentsQuery,\n} from '@/generated/wspace-operations';\n\nexport interface VibeAgentEmptyStateProps {\n  vibeId: string;\n  tr: (key: string, fallback: string) => string;\n  /** Optional: called after a successful attach so the parent can refetch. */\n  onAttached?: () => void;\n}\n\nexport const VibeAgentEmptyState: FC<VibeAgentEmptyStateProps> = ({ vibeId, tr, onAttached }) => {\n  const navigate = useVibeNavigate();\n  const [open, setOpen] = useState(false);\n  const [errorMessage, setErrorMessage] = useState<string | null>(null);\n  const [busyAgentId, setBusyAgentId] = useState<string | null>(null);\n\n  const { data, loading } = useListAgentsQuery({\n    skip: !open,\n    fetchPolicy: 'cache-and-network',\n  });\n  const [attach] = useAttachAgentToVibeMutation({\n    refetchQueries: ['GetVibe', 'ListVibes'],\n    awaitRefetchQueries: true,\n  });\n\n  const agents = useMemo<ListAgentsQuery['vibecontrolsAgents']>(\n    () => data?.vibecontrolsAgents ?? [],\n    [data]\n  );\n\n  const handleAttach = useCallback(\n    async (agentId: string) => {\n      setErrorMessage(null);\n      setBusyAgentId(agentId);\n      try {\n        await attach({ variables: { input: { vibeId, agentId } } });\n        setOpen(false);\n        onAttached?.();\n      } catch (err) {\n        setErrorMessage(err instanceof Error ? err.message : String(err));\n      } finally {\n        setBusyAgentId(null);\n      }\n    },\n    [attach, vibeId, onAttached]\n  );\n\n  const handleRegisterNew = useCallback(() => {\n    // Deep-link to the agents page with vibeId so the agents UI can offer\n    // a \"register and attach to this vibe\" affordance.\n    const query = vibeId ? `?attachToVibe=${encodeURIComponent(vibeId)}` : '';\n    navigate(`/agents${query}`);\n  }, [navigate, vibeId]);\n\n  return (\n    <>\n      <div className=\"rounded-lg border border-border-default bg-bg-surface\">\n        <EmptyState\n          icon={<Server className=\"w-8 h-8 text-text-secondary\" />}\n          title={tr('vibeDetails.noAgentTitle', 'No agent attached')}\n          description={tr(\n            'vibeDetails.noAgentDescription',\n            'This vibe is not attached to an agent yet. Sessions, GitOps, GraphQL playground, and git tooling all run through an agent — connect one to unlock those tabs.'\n          )}\n          action={\n            <button\n              type=\"button\"\n              onClick={() => setOpen(true)}\n              className=\"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              {tr('vibeDetails.connectAnAgent', 'Connect an agent to this vibe')}\n              <ArrowRight className=\"w-4 h-4\" />\n            </button>\n          }\n        />\n      </div>\n\n      {open && (\n        <div\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=\"vibe-attach-agent-title\"\n          className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\"\n          onClick={(e) => {\n            if (e.target === e.currentTarget) setOpen(false);\n          }}\n        >\n          <div className=\"w-full max-w-md rounded-lg bg-bg-elevated border border-border-default shadow-xl\">\n            <div className=\"flex items-center justify-between px-5 py-4 border-b border-border-subtle\">\n              <h2\n                id=\"vibe-attach-agent-title\"\n                className=\"text-base font-semibold text-text-primary\"\n              >\n                {tr('vibeDetails.attachAgentTitle', 'Attach an agent')}\n              </h2>\n              <button\n                type=\"button\"\n                onClick={() => setOpen(false)}\n                className=\"text-text-secondary hover:text-text-primary transition-colors\"\n                aria-label={tr('common.close', 'Close')}\n              >\n                ✕\n              </button>\n            </div>\n\n            <div className=\"px-5 py-4 max-h-[60vh] overflow-y-auto\">\n              {loading && agents.length === 0 ? (\n                <p className=\"text-sm text-text-secondary\">{tr('common.loading', 'Loading…')}</p>\n              ) : agents.length === 0 ? (\n                <div className=\"text-sm text-text-secondary space-y-3\">\n                  <p>\n                    {tr(\n                      'vibeDetails.noWorkspaceAgents',\n                      'No agents in this workspace yet. Register one first, then attach it to this vibe.'\n                    )}\n                  </p>\n                  <button\n                    type=\"button\"\n                    onClick={handleRegisterNew}\n                    className=\"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors\"\n                  >\n                    <Plus className=\"w-4 h-4\" />\n                    {tr('vibeDetails.registerAgent', 'Register an agent')}\n                  </button>\n                </div>\n              ) : (\n                <ul className=\"space-y-2\">\n                  {agents.map((a) => (\n                    <li key={a.id}>\n                      <button\n                        type=\"button\"\n                        onClick={() => handleAttach(a.id)}\n                        disabled={busyAgentId !== null}\n                        className=\"w-full flex items-center justify-between gap-3 px-3 py-2.5 rounded-md border border-border-subtle hover:border-border-default hover:bg-action-ghost-bg-hover transition-colors text-left disabled:opacity-60\"\n                      >\n                        <span className=\"flex items-center gap-3 min-w-0\">\n                          <Server className=\"w-4 h-4 text-text-secondary flex-shrink-0\" />\n                          <span className=\"min-w-0\">\n                            <span className=\"block text-sm font-medium text-text-primary truncate\">\n                              {a.name}\n                            </span>\n                            <span className=\"block text-xs text-text-secondary truncate\">\n                              {a.hostname || '—'}{' '}\n                              {a.isActive\n                                ? `· ${tr('agents.active', 'Active')}`\n                                : `· ${tr('agents.inactive', 'Inactive')}`}\n                            </span>\n                          </span>\n                        </span>\n                        <span className=\"text-xs text-text-tertiary\">\n                          {busyAgentId === a.id\n                            ? tr('common.attaching', 'Attaching…')\n                            : tr('vibeDetails.attach', 'Attach')}\n                        </span>\n                      </button>\n                    </li>\n                  ))}\n                </ul>\n              )}\n\n              {errorMessage && (\n                <p className=\"mt-3 text-sm text-status-error-text\">{errorMessage}</p>\n              )}\n            </div>\n\n            {agents.length > 0 && (\n              <div className=\"flex items-center justify-between px-5 py-3 border-t border-border-subtle\">\n                <button\n                  type=\"button\"\n                  onClick={handleRegisterNew}\n                  className=\"text-xs text-text-secondary hover:text-text-primary inline-flex items-center gap-1\"\n                >\n                  <Plus className=\"w-3.5 h-3.5\" />\n                  {tr('vibeDetails.registerAgent', 'Register a new agent')}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => setOpen(false)}\n                  className=\"text-sm px-3 py-1.5 rounded-md border border-border-default text-text-primary hover:bg-action-ghost-bg-hover\"\n                >\n                  {tr('common.cancel', 'Cancel')}\n                </button>\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n"],"mappings":"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"}