@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/components/ai/ClaudeCredentialsCard.js

@@ -0,0 +1,133 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { deleteAgentConfigValue as t, getAgentConfigValue as n, setAgentConfigValue as r } from "../../services/aiApi.js";
+import { useCallback as i, useEffect as a, useState as o } from "react";
+import { Eye as s, EyeOff as c, KeyRound as l, Loader2 as u, Save as d, Trash2 as f } from "lucide-react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/ai/ClaudeCredentialsCard.tsx
+function h({ agentId: s }) {
+	let c = e(), [d, f] = o(""), [h, _] = o(""), [v, y] = o(!0), [b, x] = o(null), [S, C] = o(null), [w, T] = o(null), [E, D] = o(!1), [O, k] = o(!1), A = i(async () => {
+		y(!0), C(null);
+		try {
+			let [e, t] = await Promise.all([n(s, "ANTHROPIC_API_KEY"), n(s, "ANTHROPIC_AUTH_TOKEN")]);
+			f(e ?? ""), _(t ?? "");
+		} catch (e) {
+			C(e instanceof Error ? e.message : c("ai.claudeCredentials.loadFailed", "Failed to load Claude credentials"));
+		} finally {
+			y(!1);
+		}
+	}, [s, c]);
+	a(() => {
+		A();
+	}, [A]);
+	let j = i(async (e, n) => {
+		x(e === "ANTHROPIC_API_KEY" ? "apiKey" : "authToken"), C(null), T(null);
+		try {
+			n.trim() ? await r(s, e, n.trim()) : await t(s, e), T(n.trim() ? c("ai.claudeCredentials.saved", "Credential saved") : c("ai.claudeCredentials.cleared", "Credential cleared"));
+		} catch (e) {
+			C(e instanceof Error ? e.message : c("ai.claudeCredentials.saveFailed", "Failed to save Claude credential"));
+		} finally {
+			x(null);
+		}
+	}, [s, c]);
+	return /* @__PURE__ */ m("div", {
+		className: "rounded-xl border border-border-default bg-bg-surface p-4 space-y-4",
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: "flex items-start gap-3",
+				children: [/* @__PURE__ */ p("div", {
+					className: "rounded-lg bg-bg-sunken p-2 text-text-secondary",
+					children: /* @__PURE__ */ p(l, { className: "h-4 w-4" })
+				}), /* @__PURE__ */ m("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ p("h3", {
+						className: "text-sm font-semibold text-text-primary",
+						children: c("ai.claudeCredentials.title", "Claude SDK credentials")
+					}), /* @__PURE__ */ p("p", {
+						className: "text-sm text-text-secondary",
+						children: c("ai.claudeCredentials.description", "Claude SDK sessions require either ANTHROPIC_API_KEY or ANTHROPIC_AUTH_TOKEN on the agent. Save one of them here to make SDK sessions work.")
+					})]
+				})]
+			}),
+			S ? /* @__PURE__ */ p("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
+			}) : null,
+			w ? /* @__PURE__ */ p("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
+			}) : null,
+			v ? /* @__PURE__ */ m("div", {
+				className: "flex items-center gap-2 text-sm text-text-secondary",
+				children: [/* @__PURE__ */ p(u, { className: "h-4 w-4 animate-spin" }), c("ai.claudeCredentials.loading", "Loading Claude credential settings...")]
+			}) : /* @__PURE__ */ m("div", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ p(g, {
+					label: "ANTHROPIC_API_KEY",
+					value: d,
+					onChange: f,
+					saving: b === "apiKey",
+					visible: E,
+					onToggleVisible: () => D((e) => !e),
+					onSave: () => void j("ANTHROPIC_API_KEY", d),
+					onClear: () => void j("ANTHROPIC_API_KEY", "")
+				}), /* @__PURE__ */ p(g, {
+					label: "ANTHROPIC_AUTH_TOKEN",
+					value: h,
+					onChange: _,
+					saving: b === "authToken",
+					visible: O,
+					onToggleVisible: () => k((e) => !e),
+					onSave: () => void j("ANTHROPIC_AUTH_TOKEN", h),
+					onClear: () => void j("ANTHROPIC_AUTH_TOKEN", "")
+				})]
+			})
+		]
+	});
+}
+function g({ label: e, value: t, onChange: n, saving: r, visible: i, onToggleVisible: a, onSave: o, onClear: l }) {
+	return /* @__PURE__ */ m("div", {
+		className: "space-y-2 rounded-lg border border-border-default bg-bg-primary p-3",
+		children: [/* @__PURE__ */ p("label", {
+			className: "block text-xs font-medium text-text-secondary",
+			children: e
+		}), /* @__PURE__ */ m("div", {
+			className: "flex gap-2",
+			children: [
+				/* @__PURE__ */ m("div", {
+					className: "relative flex-1",
+					children: [/* @__PURE__ */ p("input", {
+						type: i ? "text" : "password",
+						value: t,
+						onChange: (e) => n(e.target.value),
+						autoComplete: "off",
+						spellCheck: !1,
+						className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 pr-10 text-sm text-text-primary"
+					}), /* @__PURE__ */ p("button", {
+						type: "button",
+						onClick: a,
+						className: "absolute right-2 top-1/2 -translate-y-1/2 text-text-secondary hover:text-text-primary",
+						children: p(i ? c : s, { className: "h-4 w-4" })
+					})]
+				}),
+				/* @__PURE__ */ m("button", {
+					type: "button",
+					onClick: o,
+					disabled: r,
+					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",
+					children: [r ? /* @__PURE__ */ p(u, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ p(d, { className: "h-4 w-4" }), "Save"]
+				}),
+				/* @__PURE__ */ m("button", {
+					type: "button",
+					onClick: l,
+					disabled: r || !t,
+					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",
+					children: [/* @__PURE__ */ p(f, { className: "h-4 w-4" }), "Clear"]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { h as ClaudeCredentialsCard };
+
+//# sourceMappingURL=ClaudeCredentialsCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClaudeCredentialsCard.js","names":[],"sources":["../../../src/components/ai/ClaudeCredentialsCard.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { Eye, EyeOff, KeyRound, Loader2, Save, Trash2 } from 'lucide-react';\n\nimport { useTr } from '../../shared/hooks/useTr';\nimport { deleteAgentConfigValue, getAgentConfigValue, setAgentConfigValue } from '@/services/aiApi';\n\ninterface ClaudeCredentialsCardProps {\n  agentId: string;\n}\n\nexport function ClaudeCredentialsCard({ agentId }: ClaudeCredentialsCardProps) {\n  const tr = useTr();\n  const [apiKey, setApiKey] = useState('');\n  const [authToken, setAuthToken] = useState('');\n  const [loading, setLoading] = useState(true);\n  const [saving, setSaving] = useState<'apiKey' | 'authToken' | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState<string | null>(null);\n  const [showApiKey, setShowApiKey] = useState(false);\n  const [showAuthToken, setShowAuthToken] = useState(false);\n\n  const loadValues = useCallback(async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      const [nextApiKey, nextAuthToken] = await Promise.all([\n        getAgentConfigValue(agentId, 'ANTHROPIC_API_KEY'),\n        getAgentConfigValue(agentId, 'ANTHROPIC_AUTH_TOKEN'),\n      ]);\n      setApiKey(nextApiKey ?? '');\n      setAuthToken(nextAuthToken ?? '');\n    } catch (err) {\n      setError(\n        err instanceof Error\n          ? err.message\n          : tr('ai.claudeCredentials.loadFailed', 'Failed to load Claude credentials')\n      );\n    } finally {\n      setLoading(false);\n    }\n  }, [agentId, tr]);\n\n  useEffect(() => {\n    void loadValues();\n  }, [loadValues]);\n\n  const persistValue = useCallback(\n    async (key: 'ANTHROPIC_API_KEY' | 'ANTHROPIC_AUTH_TOKEN', value: string) => {\n      setSaving(key === 'ANTHROPIC_API_KEY' ? 'apiKey' : 'authToken');\n      setError(null);\n      setSuccess(null);\n      try {\n        if (value.trim()) {\n          await setAgentConfigValue(agentId, key, value.trim());\n        } else {\n          await deleteAgentConfigValue(agentId, key);\n        }\n        setSuccess(\n          value.trim()\n            ? tr('ai.claudeCredentials.saved', 'Credential saved')\n            : tr('ai.claudeCredentials.cleared', 'Credential cleared')\n        );\n      } catch (err) {\n        setError(\n          err instanceof Error\n            ? err.message\n            : tr('ai.claudeCredentials.saveFailed', 'Failed to save Claude credential')\n        );\n      } finally {\n        setSaving(null);\n      }\n    },\n    [agentId, tr]\n  );\n\n  return (\n    <div className=\"rounded-xl border border-border-default bg-bg-surface p-4 space-y-4\">\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.claudeCredentials.title', 'Claude SDK credentials')}\n          </h3>\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              'ai.claudeCredentials.description',\n              'Claude SDK sessions require either ANTHROPIC_API_KEY or ANTHROPIC_AUTH_TOKEN on the agent. Save one of them here to make SDK sessions work.'\n            )}\n          </p>\n        </div>\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\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.claudeCredentials.loading', 'Loading Claude credential settings...')}\n        </div>\n      ) : (\n        <div className=\"space-y-4\">\n          <CredentialField\n            label=\"ANTHROPIC_API_KEY\"\n            value={apiKey}\n            onChange={setApiKey}\n            saving={saving === 'apiKey'}\n            visible={showApiKey}\n            onToggleVisible={() => setShowApiKey((current) => !current)}\n            onSave={() => void persistValue('ANTHROPIC_API_KEY', apiKey)}\n            onClear={() => void persistValue('ANTHROPIC_API_KEY', '')}\n          />\n          <CredentialField\n            label=\"ANTHROPIC_AUTH_TOKEN\"\n            value={authToken}\n            onChange={setAuthToken}\n            saving={saving === 'authToken'}\n            visible={showAuthToken}\n            onToggleVisible={() => setShowAuthToken((current) => !current)}\n            onSave={() => void persistValue('ANTHROPIC_AUTH_TOKEN', authToken)}\n            onClear={() => void persistValue('ANTHROPIC_AUTH_TOKEN', '')}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n\ninterface CredentialFieldProps {\n  label: string;\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  value,\n  onChange,\n  saving,\n  visible,\n  onToggleVisible,\n  onSave,\n  onClear,\n}: CredentialFieldProps) {\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={visible ? 'text' : 'password'}\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          <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        </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/ai/PluginHarnessPicker.d.ts

@@ -0,0 +1,31 @@
+/**
+ * <PluginHarnessPicker />
+ *
+ * Grid of installable VibeControls agent plugins with per-card
+ * Install / Installed / Remove state. Driven by the existing
+ * `usePluginAvailability` hook (same code path as `<PluginGate>`), so
+ * the Plugins tab on the Agent details page and this picker stay in
+ * sync automatically.
+ *
+ * The default use-case is the AI workbench: once the base
+ * `@vibecontrols/vibe-plugin-ai` plugin is installed, this picker lists
+ * every AI provider harness (claude, codex, copilot, gemini, …) so the
+ * user can add / remove harnesses without leaving the AI page.
+ *
+ * The component is feature-neutral — pass any `packages` array (e.g.
+ * session providers, tunnel providers) to reuse the same UI.
+ */
+export interface PluginHarnessPickerProps {
+    /** Package names to offer. Metadata is resolved via `getPluginMeta`. */
+    packages: readonly string[];
+    /** Active agent id. When null, the picker renders in a disabled state. */
+    agentId: string | null;
+    /** Optional section heading (rendered above the grid). */
+    title?: string;
+    /** Optional section description. */
+    description?: string;
+    /** Fired after a successful install or remove so parents can refetch. */
+    onChange?: () => void;
+}
+export declare function PluginHarnessPicker({ packages, agentId, title, description, onChange, }: PluginHarnessPickerProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=PluginHarnessPicker.d.ts.map

package/dist/components/ai/PluginHarnessPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginHarnessPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ai/PluginHarnessPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AASH,MAAM,WAAW,wBAAwB;IACvC,wEAAwE;IACxE,QAAQ,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5B,0EAA0E;IAC1E,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,GACT,EAAE,wBAAwB,kDAoJ1B"}

package/dist/components/ai/PluginHarnessPicker.js

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

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

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

package/dist/components/analytics/AnalyticsBreakdownChart.d.ts

@@ -0,0 +1,12 @@
+interface BreakdownBucket {
+    key: string;
+    count: number;
+}
+interface AnalyticsBreakdownChartProps {
+    title: string;
+    data: BreakdownBucket[] | null | undefined;
+    height?: number;
+}
+export declare function AnalyticsBreakdownChart({ title, data, height, }: AnalyticsBreakdownChartProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AnalyticsBreakdownChart.d.ts.map

package/dist/components/analytics/AnalyticsBreakdownChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsBreakdownChart.d.ts","sourceRoot":"","sources":["../../../src/components/analytics/AnalyticsBreakdownChart.tsx"],"names":[],"mappings":"AAIA,UAAU,eAAe;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,4BAA4B;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,eAAe,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAaD,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,IAAI,EACJ,MAAY,GACb,EAAE,4BAA4B,2CA0D9B"}

package/dist/components/analytics/AnalyticsBreakdownChart.js

@@ -0,0 +1,73 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { Legend as t } from "../../node_modules/recharts/es6/component/Legend.js";
+import { Tooltip as n } from "../../node_modules/recharts/es6/component/Tooltip.js";
+import { ResponsiveContainer as r } from "../../node_modules/recharts/es6/component/ResponsiveContainer.js";
+import { Cell as i } from "../../node_modules/recharts/es6/component/Cell.js";
+import { Pie as a } from "../../node_modules/recharts/es6/polar/Pie.js";
+import { PieChart as o } from "../../node_modules/recharts/es6/chart/PieChart.js";
+import { useMemo as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/analytics/AnalyticsBreakdownChart.tsx
+var u = [
+	"var(--color-text-link)",
+	"var(--color-status-success-text)",
+	"var(--color-accent-purple)",
+	"var(--color-status-warning-text)",
+	"var(--color-status-error-text)",
+	"var(--color-accent-teal)",
+	"var(--color-text-tertiary)",
+	"var(--color-border-strong)"
+];
+function d({ title: d, data: f, height: p = 250 }) {
+	let m = s(() => !f || f.length === 0 ? [] : f.map((e) => ({
+		name: e.key,
+		value: e.count
+	})), [f]), h = e();
+	return m.length === 0 ? /* @__PURE__ */ l("div", {
+		className: "bg-bg-surface border border-border-default rounded-lg p-4",
+		children: [/* @__PURE__ */ c("h3", {
+			className: "text-sm font-medium text-text-primary mb-3",
+			children: d
+		}), /* @__PURE__ */ c("div", {
+			className: "flex items-center justify-center h-[150px] text-text-secondary text-sm",
+			children: h("vibecontrols.analytics.noData", "No data")
+		})]
+	}) : /* @__PURE__ */ l("div", {
+		className: "bg-bg-surface border border-border-default rounded-lg p-4",
+		children: [/* @__PURE__ */ c("h3", {
+			className: "text-sm font-medium text-text-primary mb-3",
+			children: d
+		}), /* @__PURE__ */ c(r, {
+			width: "100%",
+			height: p,
+			children: /* @__PURE__ */ l(o, { children: [
+				/* @__PURE__ */ c(a, {
+					data: m,
+					cx: "50%",
+					cy: "50%",
+					innerRadius: 55,
+					outerRadius: 80,
+					paddingAngle: 2,
+					dataKey: "value",
+					children: m.map((e, t) => /* @__PURE__ */ c(i, { fill: u[t % u.length] }, t))
+				}),
+				/* @__PURE__ */ c(n, { contentStyle: {
+					background: "var(--color-bg-surface)",
+					border: "1px solid var(--color-border-default)",
+					borderRadius: "6px",
+					fontSize: "12px"
+				} }),
+				/* @__PURE__ */ c(t, {
+					wrapperStyle: { fontSize: "11px" },
+					layout: "vertical",
+					align: "right",
+					verticalAlign: "middle"
+				})
+			] })
+		})]
+	});
+}
+//#endregion
+export { d as AnalyticsBreakdownChart };
+
+//# sourceMappingURL=AnalyticsBreakdownChart.js.map

package/dist/components/analytics/AnalyticsBreakdownChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsBreakdownChart.js","names":[],"sources":["../../../src/components/analytics/AnalyticsBreakdownChart.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { ResponsiveContainer, PieChart, Pie, Cell, Tooltip, Legend } from 'recharts';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface BreakdownBucket {\n  key: string;\n  count: number;\n}\n\ninterface AnalyticsBreakdownChartProps {\n  title: string;\n  data: BreakdownBucket[] | null | undefined;\n  height?: number;\n}\n\nconst PIE_COLORS = [\n  'var(--color-text-link)',\n  'var(--color-status-success-text)',\n  'var(--color-accent-purple)',\n  'var(--color-status-warning-text)',\n  'var(--color-status-error-text)',\n  'var(--color-accent-teal)',\n  'var(--color-text-tertiary)',\n  'var(--color-border-strong)',\n];\n\nexport function AnalyticsBreakdownChart({\n  title,\n  data,\n  height = 250,\n}: AnalyticsBreakdownChartProps) {\n  const chartData = useMemo(() => {\n    if (!data || data.length === 0) return [];\n    return data.map((d) => ({\n      name: d.key,\n      value: d.count,\n    }));\n  }, [data]);\n\n  const tr = useTr();\n\n  if (chartData.length === 0) {\n    return (\n      <div className=\"bg-bg-surface border border-border-default rounded-lg p-4\">\n        <h3 className=\"text-sm font-medium text-text-primary mb-3\">{title}</h3>\n        <div className=\"flex items-center justify-center h-[150px] text-text-secondary text-sm\">\n          {tr('vibecontrols.analytics.noData', 'No data')}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"bg-bg-surface border border-border-default rounded-lg p-4\">\n      <h3 className=\"text-sm font-medium text-text-primary mb-3\">{title}</h3>\n      <ResponsiveContainer width=\"100%\" height={height}>\n        <PieChart>\n          <Pie\n            data={chartData}\n            cx=\"50%\"\n            cy=\"50%\"\n            innerRadius={55}\n            outerRadius={80}\n            paddingAngle={2}\n            dataKey=\"value\"\n          >\n            {chartData.map((_, i) => (\n              <Cell key={i} fill={PIE_COLORS[i % PIE_COLORS.length]} />\n            ))}\n          </Pie>\n          <Tooltip\n            contentStyle={{\n              background: 'var(--color-bg-surface)',\n              border: '1px solid var(--color-border-default)',\n              borderRadius: '6px',\n              fontSize: '12px',\n            }}\n          />\n          <Legend\n            wrapperStyle={{ fontSize: '11px' }}\n            layout=\"vertical\"\n            align=\"right\"\n            verticalAlign=\"middle\"\n          />\n        </PieChart>\n      </ResponsiveContainer>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAeA,IAAM,IAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAgB,EAAwB,EACtC,UACA,SACA,YAAS,OACsB;CAC/B,IAAM,IAAY,QACZ,CAAC,KAAQ,EAAK,WAAW,IAAU,EAAE,GAClC,EAAK,KAAK,OAAO;EACtB,MAAM,EAAE;EACR,OAAO,EAAE;EACV,EAAE,EACF,CAAC,EAAK,CAAC,EAEJ,IAAK,GAAO;AAalB,QAXI,EAAU,WAAW,IAErB,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,MAAD;GAAI,WAAU;aAA8C;GAAW,CAAA,EACvE,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAG,iCAAiC,UAAU;GAC3C,CAAA,CACF;MAKR,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,MAAD;GAAI,WAAU;aAA8C;GAAW,CAAA,EACvE,kBAAC,GAAD;GAAqB,OAAM;GAAe;aACxC,kBAAC,GAAD,EAAA,UAAA;IACE,kBAAC,GAAD;KACE,MAAM;KACN,IAAG;KACH,IAAG;KACH,aAAa;KACb,aAAa;KACb,cAAc;KACd,SAAQ;eAEP,EAAU,KAAK,GAAG,MACjB,kBAAC,GAAD,EAAc,MAAM,EAAW,IAAI,EAAW,SAAW,EAA9C,EAA8C,CACzD;KACE,CAAA;IACN,kBAAC,GAAD,EACE,cAAc;KACZ,YAAY;KACZ,QAAQ;KACR,cAAc;KACd,UAAU;KACX,EACD,CAAA;IACF,kBAAC,GAAD;KACE,cAAc,EAAE,UAAU,QAAQ;KAClC,QAAO;KACP,OAAM;KACN,eAAc;KACd,CAAA;IACO,EAAA,CAAA;GACS,CAAA,CAClB"}

package/dist/components/analytics/AnalyticsBreakdownTable.d.ts

@@ -0,0 +1,13 @@
+interface BreakdownBucket {
+    key: string;
+    count: number;
+}
+interface AnalyticsBreakdownTableProps {
+    title: string;
+    data: BreakdownBucket[] | null | undefined;
+    keyLabel?: string;
+    countLabel?: string;
+}
+export declare function AnalyticsBreakdownTable({ title, data, keyLabel, countLabel, }: AnalyticsBreakdownTableProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AnalyticsBreakdownTable.d.ts.map

package/dist/components/analytics/AnalyticsBreakdownTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsBreakdownTable.d.ts","sourceRoot":"","sources":["../../../src/components/analytics/AnalyticsBreakdownTable.tsx"],"names":[],"mappings":"AAIA,UAAU,eAAe;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,4BAA4B;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,eAAe,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAKD,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,IAAI,EACJ,QAAiB,EACjB,UAAoB,GACrB,EAAE,4BAA4B,2CA+F9B"}

package/dist/components/analytics/AnalyticsBreakdownTable.js

@@ -0,0 +1,100 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useState as t } from "react";
+import { ChevronDown as n, ChevronUp as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/analytics/AnalyticsBreakdownTable.tsx
+function o({ title: o, data: s, keyLabel: c = "Type", countLabel: l = "Count" }) {
+	let u = e(), [d, f] = t("count"), [p, m] = t("desc");
+	if (!s || s.length === 0) return /* @__PURE__ */ a("div", {
+		className: "bg-bg-surface border border-border-default rounded-lg p-4",
+		children: [/* @__PURE__ */ i("h3", {
+			className: "text-sm font-medium text-text-primary mb-3",
+			children: o
+		}), /* @__PURE__ */ i("p", {
+			className: "text-sm text-text-secondary",
+			children: u("vibecontrols.analytics.noData", "No data")
+		})]
+	});
+	let h = s.reduce((e, t) => e + t.count, 0), g = [...s].sort((e, t) => {
+		let n = p === "asc" ? 1 : -1;
+		return d === "key" ? e.key.localeCompare(t.key) * n : (e.count - t.count) * n;
+	}), _ = (e) => {
+		d === e ? m((e) => e === "asc" ? "desc" : "asc") : (f(e), m("desc"));
+	}, v = ({ field: e }) => d === e ? i(p === "asc" ? r : n, { className: "w-3 h-3" }) : null;
+	return /* @__PURE__ */ a("div", {
+		className: "bg-bg-surface border border-border-default rounded-lg p-4",
+		children: [/* @__PURE__ */ i("h3", {
+			className: "text-sm font-medium text-text-primary mb-3",
+			children: o
+		}), /* @__PURE__ */ a("table", {
+			className: "w-full text-sm",
+			children: [/* @__PURE__ */ i("thead", { children: /* @__PURE__ */ a("tr", {
+				className: "border-b border-border-default",
+				children: [
+					/* @__PURE__ */ i("th", {
+						className: "text-left py-2 px-2 text-text-secondary font-medium cursor-pointer hover:text-text-primary",
+						onClick: () => _("key"),
+						children: /* @__PURE__ */ a("span", {
+							className: "flex items-center gap-1",
+							children: [
+								c,
+								" ",
+								/* @__PURE__ */ i(v, { field: "key" })
+							]
+						})
+					}),
+					/* @__PURE__ */ i("th", {
+						className: "text-right py-2 px-2 text-text-secondary font-medium cursor-pointer hover:text-text-primary",
+						onClick: () => _("count"),
+						children: /* @__PURE__ */ a("span", {
+							className: "flex items-center justify-end gap-1",
+							children: [
+								l,
+								" ",
+								/* @__PURE__ */ i(v, { field: "count" })
+							]
+						})
+					}),
+					/* @__PURE__ */ i("th", {
+						className: "text-right py-2 px-2 text-text-secondary font-medium w-20",
+						children: "%"
+					}),
+					/* @__PURE__ */ i("th", { className: "py-2 px-2 w-32" })
+				]
+			}) }), /* @__PURE__ */ i("tbody", { children: g.map((e) => {
+				let t = h > 0 ? e.count / h * 100 : 0;
+				return /* @__PURE__ */ a("tr", {
+					className: "border-b border-border-default/50 last:border-0",
+					children: [
+						/* @__PURE__ */ i("td", {
+							className: "py-2 px-2 text-text-primary font-mono text-xs",
+							children: e.key
+						}),
+						/* @__PURE__ */ i("td", {
+							className: "py-2 px-2 text-right text-text-primary tabular-nums",
+							children: e.count.toLocaleString()
+						}),
+						/* @__PURE__ */ a("td", {
+							className: "py-2 px-2 text-right text-text-secondary tabular-nums",
+							children: [t.toFixed(1), "%"]
+						}),
+						/* @__PURE__ */ i("td", {
+							className: "py-2 px-2",
+							children: /* @__PURE__ */ i("div", {
+								className: "h-2 bg-bg-sunken rounded-full overflow-hidden",
+								children: /* @__PURE__ */ i("div", {
+									className: "h-full bg-accent-primary rounded-full transition-all",
+									style: { width: `${Math.min(t, 100)}%` }
+								})
+							})
+						})
+					]
+				}, e.key);
+			}) })]
+		})]
+	});
+}
+//#endregion
+export { o as AnalyticsBreakdownTable };
+
+//# sourceMappingURL=AnalyticsBreakdownTable.js.map

package/dist/components/analytics/AnalyticsBreakdownTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsBreakdownTable.js","names":[],"sources":["../../../src/components/analytics/AnalyticsBreakdownTable.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { ChevronUp, ChevronDown } from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface BreakdownBucket {\n  key: string;\n  count: number;\n}\n\ninterface AnalyticsBreakdownTableProps {\n  title: string;\n  data: BreakdownBucket[] | null | undefined;\n  keyLabel?: string;\n  countLabel?: string;\n}\n\ntype SortField = 'key' | 'count';\ntype SortDir = 'asc' | 'desc';\n\nexport function AnalyticsBreakdownTable({\n  title,\n  data,\n  keyLabel = 'Type',\n  countLabel = 'Count',\n}: AnalyticsBreakdownTableProps) {\n  const tr = useTr();\n  const [sortField, setSortField] = useState<SortField>('count');\n  const [sortDir, setSortDir] = useState<SortDir>('desc');\n\n  if (!data || data.length === 0) {\n    return (\n      <div className=\"bg-bg-surface border border-border-default rounded-lg p-4\">\n        <h3 className=\"text-sm font-medium text-text-primary mb-3\">{title}</h3>\n        <p className=\"text-sm text-text-secondary\">\n          {tr('vibecontrols.analytics.noData', 'No data')}\n        </p>\n      </div>\n    );\n  }\n\n  const total = data.reduce((sum, d) => sum + d.count, 0);\n\n  const sorted = [...data].sort((a, b) => {\n    const mul = sortDir === 'asc' ? 1 : -1;\n    if (sortField === 'key') return a.key.localeCompare(b.key) * mul;\n    return (a.count - b.count) * mul;\n  });\n\n  const toggleSort = (field: SortField) => {\n    if (sortField === field) {\n      setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));\n    } else {\n      setSortField(field);\n      setSortDir('desc');\n    }\n  };\n\n  const SortIcon = ({ field }: { field: SortField }) => {\n    if (sortField !== field) return null;\n    return sortDir === 'asc' ? (\n      <ChevronUp className=\"w-3 h-3\" />\n    ) : (\n      <ChevronDown className=\"w-3 h-3\" />\n    );\n  };\n\n  return (\n    <div className=\"bg-bg-surface border border-border-default rounded-lg p-4\">\n      <h3 className=\"text-sm font-medium text-text-primary mb-3\">{title}</h3>\n      <table className=\"w-full text-sm\">\n        <thead>\n          <tr className=\"border-b border-border-default\">\n            <th\n              className=\"text-left py-2 px-2 text-text-secondary font-medium cursor-pointer hover:text-text-primary\"\n              onClick={() => toggleSort('key')}\n            >\n              <span className=\"flex items-center gap-1\">\n                {keyLabel} <SortIcon field=\"key\" />\n              </span>\n            </th>\n            <th\n              className=\"text-right py-2 px-2 text-text-secondary font-medium cursor-pointer hover:text-text-primary\"\n              onClick={() => toggleSort('count')}\n            >\n              <span className=\"flex items-center justify-end gap-1\">\n                {countLabel} <SortIcon field=\"count\" />\n              </span>\n            </th>\n            <th className=\"text-right py-2 px-2 text-text-secondary font-medium w-20\">%</th>\n            <th className=\"py-2 px-2 w-32\" />\n          </tr>\n        </thead>\n        <tbody>\n          {sorted.map((row) => {\n            const pct = total > 0 ? (row.count / total) * 100 : 0;\n            return (\n              <tr key={row.key} className=\"border-b border-border-default/50 last:border-0\">\n                <td className=\"py-2 px-2 text-text-primary font-mono text-xs\">{row.key}</td>\n                <td className=\"py-2 px-2 text-right text-text-primary tabular-nums\">\n                  {row.count.toLocaleString()}\n                </td>\n                <td className=\"py-2 px-2 text-right text-text-secondary tabular-nums\">\n                  {pct.toFixed(1)}%\n                </td>\n                <td className=\"py-2 px-2\">\n                  <div className=\"h-2 bg-bg-sunken rounded-full overflow-hidden\">\n                    <div\n                      className=\"h-full bg-accent-primary rounded-full transition-all\"\n                      style={{ width: `${Math.min(pct, 100)}%` }}\n                    />\n                  </div>\n                </td>\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAmBA,SAAgB,EAAwB,EACtC,UACA,SACA,cAAW,QACX,gBAAa,WACkB;CAC/B,IAAM,IAAK,GAAO,EACZ,CAAC,GAAW,KAAgB,EAAoB,QAAQ,EACxD,CAAC,GAAS,KAAc,EAAkB,OAAO;AAEvD,KAAI,CAAC,KAAQ,EAAK,WAAW,EAC3B,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,MAAD;GAAI,WAAU;aAA8C;GAAW,CAAA,EACvE,kBAAC,KAAD;GAAG,WAAU;aACV,EAAG,iCAAiC,UAAU;GAC7C,CAAA,CACA;;CAIV,IAAM,IAAQ,EAAK,QAAQ,GAAK,MAAM,IAAM,EAAE,OAAO,EAAE,EAEjD,IAAS,CAAC,GAAG,EAAK,CAAC,MAAM,GAAG,MAAM;EACtC,IAAM,IAAM,MAAY,QAAQ,IAAI;AAEpC,SADI,MAAc,QAAc,EAAE,IAAI,cAAc,EAAE,IAAI,GAAG,KACrD,EAAE,QAAQ,EAAE,SAAS;GAC7B,EAEI,KAAc,MAAqB;AACvC,EAAI,MAAc,IAChB,GAAY,MAAO,MAAM,QAAQ,SAAS,MAAO,IAEjD,EAAa,EAAM,EACnB,EAAW,OAAO;IAIhB,KAAY,EAAE,eACd,MAAc,IAEhB,EADK,MAAY,QAChB,IAEA,GAFD,EAAW,WAAU,WAAY,CAEE,GAJL;AAQlC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,MAAD;GAAI,WAAU;aAA8C;GAAW,CAAA,EACvE,kBAAC,SAAD;GAAO,WAAU;aAAjB,CACE,kBAAC,SAAD,EAAA,UACE,kBAAC,MAAD;IAAI,WAAU;cAAd;KACE,kBAAC,MAAD;MACE,WAAU;MACV,eAAe,EAAW,MAAM;gBAEhC,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QACG;QAAS;QAAC,kBAAC,GAAD,EAAU,OAAM,OAAQ,CAAA;QAC9B;;MACJ,CAAA;KACL,kBAAC,MAAD;MACE,WAAU;MACV,eAAe,EAAW,QAAQ;gBAElC,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QACG;QAAW;QAAC,kBAAC,GAAD,EAAU,OAAM,SAAU,CAAA;QAClC;;MACJ,CAAA;KACL,kBAAC,MAAD;MAAI,WAAU;gBAA4D;MAAM,CAAA;KAChF,kBAAC,MAAD,EAAI,WAAU,kBAAmB,CAAA;KAC9B;OACC,CAAA,EACR,kBAAC,SAAD,EAAA,UACG,EAAO,KAAK,MAAQ;IACnB,IAAM,IAAM,IAAQ,IAAK,EAAI,QAAQ,IAAS,MAAM;AACpD,WACE,kBAAC,MAAD;KAAkB,WAAU;eAA5B;MACE,kBAAC,MAAD;OAAI,WAAU;iBAAiD,EAAI;OAAS,CAAA;MAC5E,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAI,MAAM,gBAAgB;OACxB,CAAA;MACL,kBAAC,MAAD;OAAI,WAAU;iBAAd,CACG,EAAI,QAAQ,EAAE,EAAC,IACb;;MACL,kBAAC,MAAD;OAAI,WAAU;iBACZ,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,OAAD;SACE,WAAU;SACV,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,GAAK,IAAI,CAAC,IAAI;SAC1C,CAAA;QACE,CAAA;OACH,CAAA;MACF;OAhBI,EAAI,IAgBR;KAEP,EACI,CAAA,CACF;KACJ"}

package/dist/components/analytics/AnalyticsEntityTabs.d.ts

@@ -0,0 +1,9 @@
+import { EntityTab } from './types';
+
+interface AnalyticsEntityTabsProps {
+    activeTab: EntityTab;
+    onTabChange: (tab: EntityTab) => void;
+}
+export declare function AnalyticsEntityTabs({ activeTab, onTabChange }: AnalyticsEntityTabsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AnalyticsEntityTabs.d.ts.map

package/dist/components/analytics/AnalyticsEntityTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsEntityTabs.d.ts","sourceRoot":"","sources":["../../../src/components/analytics/AnalyticsEntityTabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAEhE,UAAU,wBAAwB;IAChC,SAAS,EAAE,SAAS,CAAC;IACrB,WAAW,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,wBAAwB,2CAuEvF"}