@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/components/gitops/types.d.ts

@@ -0,0 +1,90 @@
+/** Shared types for GitOps UI components, derived from the GraphQL schema. */
+export type GitProviderType = 'GITHUB' | 'GITLAB' | 'BITBUCKET' | 'AZURE_DEVOPS';
+export interface GitopsProvider {
+    id: string;
+    workspaceId: string;
+    vibeId?: string | null;
+    name: string;
+    providerType: GitProviderType;
+    repoUrl: string;
+    isActive: boolean;
+    metadata?: string | null;
+    createdAt: string;
+    updatedAt?: string | null;
+    createdBy?: string | null;
+}
+export interface CommitActivity {
+    week: string;
+    total: number;
+    additions: number;
+    deletions: number;
+}
+export interface Contributor {
+    login: string;
+    contributions: number;
+    avatarUrl?: string | null;
+}
+export interface PullRequest {
+    number: number;
+    title: string;
+    state: string;
+    author: string;
+    createdAt: string;
+    updatedAt: string;
+    url: string;
+    labels?: string[] | null;
+    reviewers?: string[] | null;
+    isDraft: boolean;
+}
+export interface RepoStats {
+    owner: string;
+    name: string;
+    fullName: string;
+    description?: string | null;
+    visibility: string;
+    defaultBranch: string;
+    openPullRequests: number;
+    openIssues: number;
+    forkCount: number;
+    stargazerCount: number;
+    watcherCount?: number | null;
+    diskUsageKb?: number | null;
+    dependabotAlerts: number;
+    commitActivity?: CommitActivity[] | null;
+    contributors?: Contributor[] | null;
+    languages?: Record<string, number> | null;
+    license?: string | null;
+    isArchived: boolean;
+    isFork: boolean;
+    createdAt?: string | null;
+    updatedAt?: string | null;
+    pushedAt?: string | null;
+    pullRequests?: PullRequest[] | null;
+}
+export interface CIWorkflow {
+    id: string;
+    name: string;
+    state: string;
+    path?: string | null;
+}
+export interface CIPipelineRun {
+    id: string;
+    workflowName: string;
+    branch: string;
+    status: string;
+    conclusion?: string | null;
+    event?: string | null;
+    startedAt?: string | null;
+    completedAt?: string | null;
+    durationSeconds?: number | null;
+    url?: string | null;
+    actor?: string | null;
+}
+export interface CIStatus {
+    workflows: CIWorkflow[];
+    recentRuns: CIPipelineRun[];
+    successRate?: number | null;
+    averageDurationSeconds?: number | null;
+    totalRunsLast30Days?: number | null;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/gitops/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/gitops/types.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAE9E,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,cAAc,CAAC;AAEjF,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,eAAe,CAAC;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAC5B,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;CACrC;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,QAAQ;IACvB,SAAS,EAAE,UAAU,EAAE,CAAC;IACxB,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,sBAAsB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC"}

package/dist/components/graph/AgentGraphView.d.ts

@@ -0,0 +1,44 @@
+
+interface GraphTarget {
+    id: string;
+    name: string;
+    type: string;
+    status: string;
+    host?: string | null;
+    agents: Array<{
+        id: string;
+        name: string;
+        version: string;
+        isActive: boolean;
+    }>;
+}
+interface GraphConnection {
+    id: string;
+    protocol: string;
+    status: string;
+    permissions?: string[];
+    scopes?: string[];
+    label?: string | null;
+    description?: string | null;
+    sourceAgent: {
+        id: string;
+        name: string;
+    };
+    target: {
+        id: string;
+        name: string;
+        type: string;
+    };
+}
+interface AgentGraphViewProps {
+    targets: GraphTarget[];
+    connections: GraphConnection[];
+    onUpdatePermissions?: (connectionId: string, permissions: string[], scopes: string[]) => void;
+    availablePermissions?: string[];
+    availableScopes?: string[];
+    onNodeClick?: (nodeType: 'target' | 'agent', id: string) => void;
+    fullHeight?: boolean;
+}
+export declare function AgentGraphView({ targets, connections, onUpdatePermissions, availablePermissions, availableScopes, onNodeClick, fullHeight, }: AgentGraphViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AgentGraphView.d.ts.map

package/dist/components/graph/AgentGraphView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentGraphView.d.ts","sourceRoot":"","sources":["../../../src/components/graph/AgentGraphView.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAkBH,OAAO,8BAA8B,CAAC;AAStC,UAAU,WAAW;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,KAAK,CAAC;QACZ,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,EAAE,OAAO,CAAC;KACnB,CAAC,CAAC;CACJ;AAED,UAAU,eAAe;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CACpD;AAED,UAAU,mBAAmB;IAC3B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,mBAAmB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9F,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,GAAG,OAAO,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA6KD,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,WAAW,EACX,mBAAmB,EACnB,oBAAoB,EACpB,eAAe,EACf,WAAW,EACX,UAAU,GACX,EAAE,mBAAmB,2CAmLrB"}

package/dist/components/graph/AgentGraphView.js

@@ -0,0 +1,238 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { MarkerType as t } from "../../node_modules/@xyflow/system/dist/esm/index.js";
+import { Background as n, BackgroundVariant as r, Controls as i, MiniMap as a, index as o, useEdgesState as s, useNodesState as c } from "../../node_modules/@xyflow/react/dist/esm/index.js";
+/* empty css                                          */
+import { TargetNode as l } from "./TargetNode.js";
+import { AgentNode as u } from "./AgentNode.js";
+import { ConnectionPermissionsDialog as d } from "./ConnectionPermissionsDialog.js";
+import { useCallback as f, useEffect as p, useLayoutEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { CheckCircle as v } from "lucide-react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/components/graph/AgentGraphView.tsx
+var S = {
+	targetNode: l,
+	agentNode: u
+}, C = 280, w = 100, T = 48, E = 8, D = 16, O = 16, k = 100, A = 40;
+function j(e) {
+	return e >= C * 4 + k * 3 ? 4 : e >= C * 3 + k * 2 ? 3 : e >= C * 2 + k ? 2 : 1;
+}
+function M(e) {
+	return w + Math.max(e.agents.length, 1) * (T + E) + O;
+}
+function N(e, n, r, i) {
+	let a = [], o = [], s = Math.ceil(e.length / r), c = Array.from({ length: s }, (t, n) => e.slice(n * r, (n + 1) * r).reduce((e, t) => Math.max(e, M(t)), 0)), l = c.reduce((e, t, n) => (e.push(n === 0 ? 0 : e[n - 1] + c[n - 1] + A), e), []);
+	return e.forEach((e, t) => {
+		let n = t % r, o = Math.floor(t / r), s = M(e), c = n * (C + k), u = l[o];
+		a.push({
+			id: `target-${e.id}`,
+			type: "targetNode",
+			position: {
+				x: c,
+				y: u
+			},
+			data: {
+				entityId: e.id,
+				name: e.name,
+				nodeType: "target",
+				type: e.type,
+				status: e.status,
+				host: e.host,
+				agentCount: e.agents.length,
+				onActivate: i ? () => i("target", e.id) : void 0
+			},
+			className: i ? "cursor-pointer" : void 0,
+			style: {
+				width: C,
+				height: s
+			}
+		}), e.agents.forEach((t, n) => {
+			a.push({
+				id: `agent-${t.id}`,
+				type: "agentNode",
+				position: {
+					x: D,
+					y: w + n * (T + E)
+				},
+				parentId: `target-${e.id}`,
+				extent: "parent",
+				data: {
+					entityId: t.id,
+					name: t.name,
+					nodeType: "agent",
+					version: t.version,
+					isActive: t.isActive,
+					onActivate: i ? () => i("agent", t.id) : void 0
+				},
+				className: i ? "cursor-pointer" : void 0,
+				style: { width: C - D * 2 }
+			});
+		}), e.agents.length === 0 && a.push({
+			id: `empty-${e.id}`,
+			type: "agentNode",
+			position: {
+				x: D,
+				y: w
+			},
+			parentId: `target-${e.id}`,
+			extent: "parent",
+			data: {
+				name: "No agent installed",
+				version: "",
+				isActive: !1,
+				isEmpty: !0
+			},
+			style: { width: C - D * 2 }
+		});
+	}), n.forEach((e) => {
+		let n = `agent-${e.sourceAgent.id}`, r = `target-${e.target.id}`;
+		if (!a.some((e) => e.id === n) || !a.some((e) => e.id === r)) return;
+		let i = e.status === "connected";
+		o.push({
+			id: `edge-${e.id}`,
+			source: n,
+			target: r,
+			label: e.protocol,
+			data: e,
+			type: "default",
+			animated: i,
+			markerEnd: { type: t.ArrowClosed },
+			style: {
+				stroke: i ? "var(--color-status-success-border)" : "var(--color-border-strong)",
+				strokeWidth: 2
+			},
+			labelStyle: {
+				fontSize: 10,
+				fontWeight: 600
+			},
+			labelBgStyle: { fill: "transparent" },
+			labelBgPadding: [4, 2]
+		});
+	}), {
+		nodes: a,
+		edges: o
+	};
+}
+function P({ targets: t, connections: l, onUpdatePermissions: u, availablePermissions: C, availableScopes: w, onNodeClick: T, fullHeight: E }) {
+	let D = e(), O = g(null), [k, A] = _(() => typeof window > "u" ? 3 : j(window.innerWidth));
+	m(() => {
+		let e = (e) => {
+			A((t) => {
+				let n = j(e);
+				return t === n ? t : n;
+			});
+		}, t = () => {
+			let t = O.current?.clientWidth;
+			typeof t == "number" && t > 0 && e(t);
+		};
+		t();
+		let n = typeof ResizeObserver < "u" ? new ResizeObserver((t) => {
+			let n = t[0];
+			n && e(n.contentRect.width);
+		}) : null;
+		return n && O.current ? n.observe(O.current) : window.addEventListener("resize", t), () => {
+			n || window.removeEventListener("resize", t), n?.disconnect();
+		};
+	}, []);
+	let { nodes: M, edges: P } = h(() => N(t, l, k, T), [
+		t,
+		l,
+		k,
+		T
+	]), [F, I, L] = c(M), [R, z, B] = s(P), [V, H] = _(null), [U, W] = _(!1);
+	p(() => {
+		let { nodes: e, edges: n } = N(t, l, k, T);
+		I(e), z(n);
+	}, [
+		t,
+		l,
+		k,
+		T,
+		I,
+		z
+	]);
+	let G = f((e, t) => {
+		if (!T) return;
+		let { entityId: n, nodeType: r } = t.data ?? {};
+		!n || !r || T(r, n);
+	}, [T]), K = f((e, t) => {
+		let n = l.find((e) => `edge-${e.id}` === t.id);
+		n && H(n);
+	}, [l]), q = f((e, t) => {
+		V && u && u(V.id, e, t), H(null), W(!0), setTimeout(() => W(!1), 3e3);
+	}, [V, u]);
+	return /* @__PURE__ */ x(y, { children: [
+		/* @__PURE__ */ b("div", {
+			ref: O,
+			className: "w-full rounded-lg border border-border-default overflow-hidden bg-bg-secondary",
+			style: { height: E ? "100%" : "500px" },
+			children: /* @__PURE__ */ x(o, {
+				nodes: F,
+				edges: R,
+				nodesDraggable: !1,
+				onNodesChange: L,
+				onEdgesChange: B,
+				onNodeClick: G,
+				onEdgeClick: K,
+				nodeTypes: S,
+				fitView: !0,
+				fitViewOptions: { padding: .2 },
+				minZoom: .2,
+				maxZoom: 2,
+				panOnDrag: !0,
+				proOptions: { hideAttribution: !0 },
+				children: [
+					/* @__PURE__ */ b(n, {
+						variant: r.Dots,
+						gap: 20,
+						size: 1,
+						className: "!fill-text-tertiary/10"
+					}),
+					/* @__PURE__ */ b(i, {
+						showInteractive: !1,
+						style: {
+							background: "var(--color-bg-primary)",
+							border: "1px solid var(--color-border-default)",
+							borderRadius: 8,
+							boxShadow: "0 1px 4px var(--color-border-default)"
+						},
+						className: "[&_button]:!bg-[var(--color-bg-primary)] [&_button]:!border-[var(--color-border-default)] [&_button]:!fill-[var(--color-text-secondary)] [&_button:hover]:!bg-[var(--color-bg-sunken)]"
+					}),
+					/* @__PURE__ */ b(a, {
+						zoomable: !0,
+						pannable: !0,
+						style: {
+							height: 80,
+							width: 120,
+							background: "var(--color-bg-primary)",
+							border: "1px solid var(--color-border-default)",
+							borderRadius: 8
+						},
+						maskColor: "var(--color-bg-default)"
+					})
+				]
+			})
+		}),
+		V && /* @__PURE__ */ b(d, {
+			connection: V,
+			availablePermissions: C,
+			availableScopes: w,
+			onSave: q,
+			onClose: () => H(null)
+		}),
+		U && /* @__PURE__ */ x("div", {
+			"data-testid": "save-toast",
+			className: "fixed bottom-4 right-4 z-[200] flex items-center gap-2 bg-bg-elevated border border-border-default rounded-lg shadow-lg px-4 py-2.5 text-sm",
+			children: [/* @__PURE__ */ b(v, {
+				size: 16,
+				className: "text-green-500 flex-shrink-0"
+			}), /* @__PURE__ */ b("span", {
+				className: "text-text-primary",
+				children: D("vibecontrols.graph.permissionsSaved", "Permissions saved")
+			})]
+		})
+	] });
+}
+//#endregion
+export { P as AgentGraphView };
+
+//# sourceMappingURL=AgentGraphView.js.map

package/dist/components/graph/AgentGraphView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentGraphView.js","names":[],"sources":["../../../src/components/graph/AgentGraphView.tsx"],"sourcesContent":["/**\n * Agent Graph — React Flow visualization of targets and agent connections.\n *\n * Targets render as group nodes (sub-flows). Agents render as child nodes\n * inside their target. Connections render as directed edges.\n * Click edge → edit RBAC permissions/scopes.\n */\n\nimport { useCallback, useMemo, useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport { CheckCircle } from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\nimport {\n  ReactFlow,\n  Background,\n  Controls,\n  MiniMap,\n  useNodesState,\n  useEdgesState,\n  type Node,\n  type Edge,\n  type NodeTypes,\n  MarkerType,\n  BackgroundVariant,\n} from '@xyflow/react';\nimport '@xyflow/react/dist/style.css';\nimport { TargetNode } from './TargetNode';\nimport { AgentNode } from './AgentNode';\nimport { ConnectionPermissionsDialog } from './ConnectionPermissionsDialog';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ninterface GraphTarget {\n  id: string;\n  name: string;\n  type: string;\n  status: string;\n  host?: string | null;\n  agents: Array<{\n    id: string;\n    name: string;\n    version: string;\n    isActive: boolean;\n  }>;\n}\n\ninterface GraphConnection {\n  id: string;\n  protocol: string;\n  status: string;\n  permissions?: string[];\n  scopes?: string[];\n  label?: string | null;\n  description?: string | null;\n  sourceAgent: { id: string; name: string };\n  target: { id: string; name: string; type: string };\n}\n\ninterface AgentGraphViewProps {\n  targets: GraphTarget[];\n  connections: GraphConnection[];\n  onUpdatePermissions?: (connectionId: string, permissions: string[], scopes: string[]) => void;\n  availablePermissions?: string[];\n  availableScopes?: string[];\n  onNodeClick?: (nodeType: 'target' | 'agent', id: string) => void;\n  fullHeight?: boolean;\n}\n\ninterface InteractiveNodeData {\n  nodeType?: 'target' | 'agent';\n  entityId?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Custom node types\n// ---------------------------------------------------------------------------\n\nconst nodeTypes: NodeTypes = {\n  targetNode: TargetNode,\n  agentNode: AgentNode,\n};\n\n// ---------------------------------------------------------------------------\n// Layout — bounding boxes expand to fit agents\n// ---------------------------------------------------------------------------\n\nconst TARGET_WIDTH = 280;\nconst TARGET_HEADER_HEIGHT = 100; // Must clear: p-3(12) + badge(22) + mb(4) + name(20) + host(16) + count(18) + gap(8)\nconst AGENT_NODE_HEIGHT = 48;\nconst AGENT_GAP = 8;\nconst AGENT_MARGIN_X = 16;\nconst TARGET_PADDING_BOTTOM = 16;\nconst TARGET_GAP_X = 100;\nconst TARGET_GAP_Y = 40;\n\nfunction getTargetsPerRow(width: number): number {\n  // These thresholds are container-width based and derived from the graph's\n  // actual target-card geometry so each layout bucket fits without overflow.\n  if (width >= TARGET_WIDTH * 4 + TARGET_GAP_X * 3) return 4;\n  if (width >= TARGET_WIDTH * 3 + TARGET_GAP_X * 2) return 3;\n  if (width >= TARGET_WIDTH * 2 + TARGET_GAP_X) return 2;\n  return 1;\n}\n\nfunction computeTargetHeight(target: GraphTarget): number {\n  const agentSlots = Math.max(target.agents.length, 1);\n  return (\n    TARGET_HEADER_HEIGHT + agentSlots * (AGENT_NODE_HEIGHT + AGENT_GAP) + TARGET_PADDING_BOTTOM\n  );\n}\n\nfunction buildGraphElements(\n  targets: GraphTarget[],\n  connections: GraphConnection[],\n  targetsPerRow: number,\n  onNodeClick?: (nodeType: 'target' | 'agent', id: string) => void\n): { nodes: Node[]; edges: Edge[] } {\n  const nodes: Node[] = [];\n  const edges: Edge[] = [];\n\n  // Pre-compute per-row max heights for accurate vertical positioning\n  const rowCount = Math.ceil(targets.length / targetsPerRow);\n  const rowMaxHeights = Array.from({ length: rowCount }, (_, rowIdx) =>\n    targets\n      .slice(rowIdx * targetsPerRow, (rowIdx + 1) * targetsPerRow)\n      .reduce((max, t) => Math.max(max, computeTargetHeight(t)), 0)\n  );\n  const rowYOffsets = rowMaxHeights.reduce<number[]>((acc, h, i) => {\n    acc.push(i === 0 ? 0 : acc[i - 1] + rowMaxHeights[i - 1] + TARGET_GAP_Y);\n    return acc;\n  }, []);\n\n  targets.forEach((target, idx) => {\n    const col = idx % targetsPerRow;\n    const row = Math.floor(idx / targetsPerRow);\n\n    // Calculate target height based on actual number of agents\n    const targetHeight = computeTargetHeight(target);\n\n    const x = col * (TARGET_WIDTH + TARGET_GAP_X);\n    const y = rowYOffsets[row];\n\n    // Target group node\n    nodes.push({\n      id: `target-${target.id}`,\n      type: 'targetNode',\n      position: { x, y },\n      data: {\n        entityId: target.id,\n        name: target.name,\n        nodeType: 'target',\n        type: target.type,\n        status: target.status,\n        host: target.host,\n        agentCount: target.agents.length,\n        onActivate: onNodeClick ? () => onNodeClick('target', target.id) : undefined,\n      },\n      className: onNodeClick ? 'cursor-pointer' : undefined,\n      style: {\n        width: TARGET_WIDTH,\n        height: targetHeight,\n      },\n    });\n\n    // Agent child nodes\n    target.agents.forEach((agent, agentIdx) => {\n      nodes.push({\n        id: `agent-${agent.id}`,\n        type: 'agentNode',\n        position: {\n          x: AGENT_MARGIN_X,\n          y: TARGET_HEADER_HEIGHT + agentIdx * (AGENT_NODE_HEIGHT + AGENT_GAP),\n        },\n        parentId: `target-${target.id}`,\n        extent: 'parent' as const,\n        data: {\n          entityId: agent.id,\n          name: agent.name,\n          nodeType: 'agent',\n          version: agent.version,\n          isActive: agent.isActive,\n          onActivate: onNodeClick ? () => onNodeClick('agent', agent.id) : undefined,\n        },\n        className: onNodeClick ? 'cursor-pointer' : undefined,\n        style: { width: TARGET_WIDTH - AGENT_MARGIN_X * 2 },\n      });\n    });\n\n    // Empty placeholder if no agents\n    if (target.agents.length === 0) {\n      nodes.push({\n        id: `empty-${target.id}`,\n        type: 'agentNode',\n        position: {\n          x: AGENT_MARGIN_X,\n          y: TARGET_HEADER_HEIGHT,\n        },\n        parentId: `target-${target.id}`,\n        extent: 'parent' as const,\n        data: { name: 'No agent installed', version: '', isActive: false, isEmpty: true },\n        style: { width: TARGET_WIDTH - AGENT_MARGIN_X * 2 },\n      });\n    }\n  });\n\n  // Edges\n  connections.forEach((conn) => {\n    const sourceNodeId = `agent-${conn.sourceAgent.id}`;\n    const targetNodeId = `target-${conn.target.id}`;\n    if (!nodes.some((n) => n.id === sourceNodeId) || !nodes.some((n) => n.id === targetNodeId))\n      return;\n\n    const isConnected = conn.status === 'connected';\n    edges.push({\n      id: `edge-${conn.id}`,\n      source: sourceNodeId,\n      target: targetNodeId,\n      label: conn.protocol,\n      data: conn as unknown as Record<string, unknown>,\n      type: 'default',\n      animated: isConnected,\n      markerEnd: { type: MarkerType.ArrowClosed },\n      style: {\n        stroke: isConnected ? 'var(--color-status-success-border)' : 'var(--color-border-strong)',\n        strokeWidth: 2,\n      },\n      labelStyle: { fontSize: 10, fontWeight: 600 },\n      labelBgStyle: { fill: 'transparent' },\n      labelBgPadding: [4, 2] as [number, number],\n    });\n  });\n\n  return { nodes, edges };\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport function AgentGraphView({\n  targets,\n  connections,\n  onUpdatePermissions,\n  availablePermissions,\n  availableScopes,\n  onNodeClick,\n  fullHeight,\n}: AgentGraphViewProps) {\n  const tr = useTr();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [targetsPerRow, setTargetsPerRow] = useState(() =>\n    typeof window === 'undefined' ? 3 : getTargetsPerRow(window.innerWidth)\n  );\n\n  useLayoutEffect(() => {\n    const updateTargetsPerRow = (width: number) => {\n      setTargetsPerRow((current) => {\n        const next = getTargetsPerRow(width);\n        return current === next ? current : next;\n      });\n    };\n\n    const updateFromContainer = () => {\n      const width = containerRef.current?.clientWidth;\n      if (typeof width === 'number' && width > 0) {\n        updateTargetsPerRow(width);\n      }\n    };\n\n    updateFromContainer();\n\n    const resizeObserver =\n      typeof ResizeObserver !== 'undefined'\n        ? new ResizeObserver((entries) => {\n            const entry = entries[0];\n            if (entry) updateTargetsPerRow(entry.contentRect.width);\n          })\n        : null;\n\n    if (resizeObserver && containerRef.current) {\n      resizeObserver.observe(containerRef.current);\n    } else {\n      window.addEventListener('resize', updateFromContainer);\n    }\n\n    return () => {\n      if (!resizeObserver) {\n        window.removeEventListener('resize', updateFromContainer);\n      }\n      resizeObserver?.disconnect();\n    };\n  }, []);\n\n  const { nodes: initialNodes, edges: initialEdges } = useMemo(\n    () => buildGraphElements(targets, connections, targetsPerRow, onNodeClick),\n    [targets, connections, targetsPerRow, onNodeClick]\n  );\n\n  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);\n  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);\n  const [selectedConnection, setSelectedConnection] = useState<GraphConnection | null>(null);\n  const [permSaved, setPermSaved] = useState(false);\n\n  // Re-sync nodes/edges when targets/connections change (e.g. root agent filter)\n  useEffect(() => {\n    const { nodes: newNodes, edges: newEdges } = buildGraphElements(\n      targets,\n      connections,\n      targetsPerRow,\n      onNodeClick\n    );\n    setNodes(newNodes);\n    setEdges(newEdges);\n  }, [targets, connections, targetsPerRow, onNodeClick, setNodes, setEdges]);\n\n  const handleNodeClick = useCallback(\n    (_event: React.MouseEvent, node: Node) => {\n      if (!onNodeClick) return;\n\n      const { entityId, nodeType } = (node.data ?? {}) as InteractiveNodeData;\n      if (!entityId || !nodeType) return;\n\n      onNodeClick(nodeType, entityId);\n    },\n    [onNodeClick]\n  );\n\n  const handleEdgeClick = useCallback(\n    (_event: React.MouseEvent, edge: Edge) => {\n      const conn = connections.find((c) => `edge-${c.id}` === edge.id);\n      if (conn) setSelectedConnection(conn);\n    },\n    [connections]\n  );\n\n  const handleSavePermissions = useCallback(\n    (permissions: string[], scopes: string[]) => {\n      if (selectedConnection && onUpdatePermissions) {\n        onUpdatePermissions(selectedConnection.id, permissions, scopes);\n      }\n      setSelectedConnection(null);\n      setPermSaved(true);\n      setTimeout(() => setPermSaved(false), 3000);\n    },\n    [selectedConnection, onUpdatePermissions]\n  );\n\n  const height = fullHeight ? '100%' : '500px';\n\n  return (\n    <>\n      <div\n        ref={containerRef}\n        className=\"w-full rounded-lg border border-border-default overflow-hidden bg-bg-secondary\"\n        style={{ height }}\n      >\n        <ReactFlow\n          nodes={nodes}\n          edges={edges}\n          nodesDraggable={false}\n          onNodesChange={onNodesChange}\n          onEdgesChange={onEdgesChange}\n          onNodeClick={handleNodeClick}\n          onEdgeClick={handleEdgeClick}\n          nodeTypes={nodeTypes}\n          fitView\n          fitViewOptions={{ padding: 0.2 }}\n          minZoom={0.2}\n          maxZoom={2}\n          panOnDrag={true}\n          proOptions={{ hideAttribution: true }}\n        >\n          <Background\n            variant={BackgroundVariant.Dots}\n            gap={20}\n            size={1}\n            className=\"!fill-text-tertiary/10\"\n          />\n          <Controls\n            showInteractive={false}\n            style={{\n              background: 'var(--color-bg-primary)',\n              border: '1px solid var(--color-border-default)',\n              borderRadius: 8,\n              boxShadow: '0 1px 4px var(--color-border-default)',\n            }}\n            className=\"[&_button]:!bg-[var(--color-bg-primary)] [&_button]:!border-[var(--color-border-default)] [&_button]:!fill-[var(--color-text-secondary)] [&_button:hover]:!bg-[var(--color-bg-sunken)]\"\n          />\n          <MiniMap\n            zoomable\n            pannable\n            style={{\n              height: 80,\n              width: 120,\n              background: 'var(--color-bg-primary)',\n              border: '1px solid var(--color-border-default)',\n              borderRadius: 8,\n            }}\n            maskColor=\"var(--color-bg-default)\"\n          />\n        </ReactFlow>\n      </div>\n\n      {selectedConnection && (\n        <ConnectionPermissionsDialog\n          connection={selectedConnection}\n          availablePermissions={availablePermissions}\n          availableScopes={availableScopes}\n          onSave={handleSavePermissions}\n          onClose={() => setSelectedConnection(null)}\n        />\n      )}\n\n      {permSaved && (\n        <div\n          data-testid=\"save-toast\"\n          className=\"fixed bottom-4 right-4 z-[200] flex items-center gap-2 bg-bg-elevated border border-border-default rounded-lg shadow-lg px-4 py-2.5 text-sm\"\n        >\n          <CheckCircle size={16} className=\"text-green-500 flex-shrink-0\" />\n          <span className=\"text-text-primary\">\n            {tr('vibecontrols.graph.permissionsSaved', 'Permissions saved')}\n          </span>\n        </div>\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/graph/AgentNode.d.ts

@@ -0,0 +1,6 @@
+import { NodeProps } from '@xyflow/react';
+
+declare function AgentNodeComponent({ data }: NodeProps): import("react/jsx-runtime").JSX.Element;
+export declare const AgentNode: import('react').MemoExoticComponent<typeof AgentNodeComponent>;
+export {};
+//# sourceMappingURL=AgentNode.d.ts.map

package/dist/components/graph/AgentNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentNode.d.ts","sourceRoot":"","sources":["../../../src/components/graph/AgentNode.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAIjE,iBAAS,kBAAkB,CAAC,EAAE,IAAI,EAAE,EAAE,SAAS,2CAqD9C;AAED,eAAO,MAAM,SAAS,gEAA2B,CAAC"}

package/dist/components/graph/AgentNode.js

@@ -0,0 +1,55 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { Position as t } from "../../node_modules/@xyflow/system/dist/esm/index.js";
+import { Handle as n } from "../../node_modules/@xyflow/react/dist/esm/index.js";
+import { memo as r } from "react";
+import { Bot as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/graph/AgentNode.tsx
+function s({ data: r }) {
+	let s = e(), c = r;
+	return c.isEmpty ? /* @__PURE__ */ a("div", {
+		className: "rounded-lg border border-dashed border-border-default p-2 text-center",
+		children: /* @__PURE__ */ a("span", {
+			className: "text-[10px] italic text-text-tertiary",
+			children: s("vibecontrols.graph.noAgentInstalled", "No agent installed")
+		})
+	}) : /* @__PURE__ */ o("div", {
+		className: "rounded-lg border border-border-default bg-bg-surface shadow-sm p-2 flex items-center gap-2 hover:shadow-md transition-shadow",
+		role: c.onActivate ? "button" : void 0,
+		tabIndex: c.onActivate ? 0 : void 0,
+		"aria-label": c.onActivate ? `Navigate to agent ${c.name}` : void 0,
+		onKeyDown: (e) => {
+			c.onActivate && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), c.onActivate());
+		},
+		children: [
+			/* @__PURE__ */ a(n, {
+				type: "source",
+				position: t.Right,
+				className: "!bg-action-primary-bg !w-2 !h-2 !border-0"
+			}),
+			/* @__PURE__ */ a(i, {
+				size: 14,
+				className: "text-action-primary-bg shrink-0"
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ a("div", {
+					className: "text-xs font-medium text-text-primary truncate",
+					children: c.name
+				}), c.version && /* @__PURE__ */ o("div", {
+					className: "text-[10px] text-text-tertiary",
+					children: ["v", c.version]
+				})]
+			}),
+			/* @__PURE__ */ a("span", {
+				className: `w-2 h-2 rounded-full shrink-0 ${c.isActive ? "bg-status-success-bg" : "bg-bg-disabled"}`,
+				title: c.isActive ? "Active" : "Offline"
+			})
+		]
+	});
+}
+var c = r(s);
+//#endregion
+export { c as AgentNode };
+
+//# sourceMappingURL=AgentNode.js.map

package/dist/components/graph/AgentNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentNode.js","names":[],"sources":["../../../src/components/graph/AgentNode.tsx"],"sourcesContent":["/**\n * AgentNode — React Flow custom node for an Agent (child inside a Target group).\n * Uses design tokens for seamless light/dark mode.\n */\n\nimport { memo } from 'react';\nimport { Handle, Position, type NodeProps } from '@xyflow/react';\nimport { Bot } from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\n\nfunction AgentNodeComponent({ data }: NodeProps) {\n  const tr = useTr();\n  const d = data as {\n    name: string;\n    version: string;\n    isActive: boolean;\n    isEmpty?: boolean;\n    onActivate?: () => void;\n  };\n\n  if (d.isEmpty) {\n    return (\n      <div className=\"rounded-lg border border-dashed border-border-default p-2 text-center\">\n        <span className=\"text-[10px] italic text-text-tertiary\">\n          {tr('vibecontrols.graph.noAgentInstalled', 'No agent installed')}\n        </span>\n      </div>\n    );\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!d.onActivate) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      d.onActivate();\n    }\n  };\n\n  return (\n    <div\n      className=\"rounded-lg border border-border-default bg-bg-surface shadow-sm p-2 flex items-center gap-2 hover:shadow-md transition-shadow\"\n      role={d.onActivate ? 'button' : undefined}\n      tabIndex={d.onActivate ? 0 : undefined}\n      aria-label={d.onActivate ? `Navigate to agent ${d.name}` : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <Handle\n        type=\"source\"\n        position={Position.Right}\n        className=\"!bg-action-primary-bg !w-2 !h-2 !border-0\"\n      />\n\n      <Bot size={14} className=\"text-action-primary-bg shrink-0\" />\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"text-xs font-medium text-text-primary truncate\">{d.name}</div>\n        {d.version && <div className=\"text-[10px] text-text-tertiary\">v{d.version}</div>}\n      </div>\n      <span\n        className={`w-2 h-2 rounded-full shrink-0 ${d.isActive ? 'bg-status-success-bg' : 'bg-bg-disabled'}`}\n        title={d.isActive ? 'Active' : 'Offline'}\n      />\n    </div>\n  );\n}\n\nexport const AgentNode = memo(AgentNodeComponent);\n"],"mappings":";;;;;;;AAUA,SAAS,EAAmB,EAAE,WAAmB;CAC/C,IAAM,IAAK,GAAO,EACZ,IAAI;AA0BV,QAlBI,EAAE,UAEF,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,QAAD;GAAM,WAAU;aACb,EAAG,uCAAuC,qBAAqB;GAC3D,CAAA;EACH,CAAA,GAaR,kBAAC,OAAD;EACE,WAAU;EACV,MAAM,EAAE,aAAa,WAAW,KAAA;EAChC,UAAU,EAAE,aAAa,IAAI,KAAA;EAC7B,cAAY,EAAE,aAAa,qBAAqB,EAAE,SAAS,KAAA;EAC3D,YAdmB,MAA+C;AAC/D,KAAE,eACH,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,gBAAgB,EACtB,EAAE,YAAY;;YAKhB;GAOE,kBAAC,GAAD;IACE,MAAK;IACL,UAAU,EAAS;IACnB,WAAU;IACV,CAAA;GAEF,kBAAC,GAAD;IAAK,MAAM;IAAI,WAAU;IAAoC,CAAA;GAC7D,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAkD,EAAE;KAAW,CAAA,EAC7E,EAAE,WAAW,kBAAC,OAAD;KAAK,WAAU;eAAf,CAAgD,KAAE,EAAE,QAAc;OAC5E;;GACN,kBAAC,QAAD;IACE,WAAW,iCAAiC,EAAE,WAAW,yBAAyB;IAClF,OAAO,EAAE,WAAW,WAAW;IAC/B,CAAA;GACE;;;AAIV,IAAa,IAAY,EAAK,EAAmB"}

package/dist/components/graph/ConnectionPermissionsDialog.d.ts

@@ -0,0 +1,26 @@
+interface Connection {
+    id: string;
+    protocol: string;
+    permissions?: string[];
+    scopes?: string[];
+    label?: string | null;
+    description?: string | null;
+    sourceAgent: {
+        id: string;
+        name: string;
+    };
+    target: {
+        id: string;
+        name: string;
+    };
+}
+interface Props {
+    connection: Connection;
+    availablePermissions?: string[];
+    availableScopes?: string[];
+    onSave: (permissions: string[], scopes: string[]) => void;
+    onClose: () => void;
+}
+export declare function ConnectionPermissionsDialog({ connection, availablePermissions, availableScopes, onSave, onClose, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ConnectionPermissionsDialog.d.ts.map

package/dist/components/graph/ConnectionPermissionsDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionPermissionsDialog.d.ts","sourceRoot":"","sources":["../../../src/components/graph/ConnectionPermissionsDialog.tsx"],"names":[],"mappings":"AAQA,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CACtC;AAED,UAAU,KAAK;IACb,UAAU,EAAE,UAAU,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,MAAM,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,2BAA2B,CAAC,EAC1C,UAAU,EACV,oBAAoB,EACpB,eAAe,EACf,MAAM,EACN,OAAO,GACR,EAAE,KAAK,2CA0HP"}

package/dist/components/graph/ConnectionPermissionsDialog.js

@@ -0,0 +1,111 @@
+import { useState as e } from "react";
+import { useI18n as t } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { X as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/graph/ConnectionPermissionsDialog.tsx
+function a({ connection: a, availablePermissions: o, availableScopes: s, onSave: c, onClose: l }) {
+	let { t: u } = t(), d = (e, t) => {
+		let n = u(e);
+		return n === e ? t : n;
+	}, [f, p] = e(new Set(a.permissions || [])), [m, h] = e(new Set(a.scopes || [])), g = (e) => {
+		p((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	}, _ = (e) => {
+		h((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	};
+	return /* @__PURE__ */ i("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center",
+		children: [/* @__PURE__ */ r("div", {
+			className: "fixed inset-0 bg-bg-overlay backdrop-blur-sm",
+			onClick: l
+		}), /* @__PURE__ */ i("div", {
+			className: "relative bg-bg-surface rounded-xl shadow-2xl border border-border-default max-w-md w-full mx-4 p-6",
+			children: [
+				/* @__PURE__ */ i("div", {
+					className: "flex items-center justify-between mb-4",
+					children: [/* @__PURE__ */ r("h2", {
+						className: "text-lg font-semibold",
+						children: d("connectionPermissionsDialog.title", "Connection Permissions")
+					}), /* @__PURE__ */ r("button", {
+						onClick: l,
+						className: "p-1 rounded-lg hover:bg-bg-sunken",
+						children: /* @__PURE__ */ r(n, { size: 18 })
+					})]
+				}),
+				/* @__PURE__ */ i("div", {
+					className: "text-sm text-text-secondary mb-4",
+					children: [
+						/* @__PURE__ */ r("span", {
+							className: "font-medium text-text-primary",
+							children: a.sourceAgent.name
+						}),
+						" → ",
+						/* @__PURE__ */ r("span", {
+							className: "font-medium text-text-primary",
+							children: a.target.name
+						}),
+						/* @__PURE__ */ r("span", {
+							className: "ml-2 px-2 py-0.5 text-xs rounded bg-bg-sunken",
+							children: a.protocol
+						})
+					]
+				}),
+				/* @__PURE__ */ i("div", {
+					className: "mb-4",
+					children: [/* @__PURE__ */ r("label", {
+						className: "text-sm font-medium block mb-2",
+						children: d("connectionPermissionsDialog.permissions", "Permissions")
+					}), /* @__PURE__ */ i("div", {
+						className: "flex flex-wrap gap-2",
+						children: [(o ?? []).map((e) => /* @__PURE__ */ r("button", {
+							onClick: () => g(e),
+							className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${f.has(e) ? "border-action-primary-bg bg-action-primary-bg/10 text-action-primary-bg" : "border-border-default text-text-secondary hover:bg-bg-sunken"}`,
+							children: e
+						}, e)), (o ?? []).length === 0 && /* @__PURE__ */ r("span", {
+							className: "text-xs text-text-tertiary",
+							children: d("connectionPermissionsDialog.noPermissions", "No permissions configured")
+						})]
+					})]
+				}),
+				/* @__PURE__ */ i("div", {
+					className: "mb-4",
+					children: [/* @__PURE__ */ r("label", {
+						className: "text-sm font-medium block mb-2",
+						children: d("connectionPermissionsDialog.scopes", "Scopes")
+					}), /* @__PURE__ */ i("div", {
+						className: "flex flex-wrap gap-2",
+						children: [(s ?? []).map((e) => /* @__PURE__ */ r("button", {
+							onClick: () => _(e),
+							className: `px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${m.has(e) ? "border-status-success-border bg-status-success-bg-subtle text-status-success-text" : "border-border-default text-text-secondary hover:bg-bg-sunken"}`,
+							children: e
+						}, e)), (s ?? []).length === 0 && /* @__PURE__ */ r("span", {
+							className: "text-xs text-text-tertiary",
+							children: d("connectionPermissionsDialog.noScopes", "No scopes configured")
+						})]
+					})]
+				}),
+				/* @__PURE__ */ i("div", {
+					className: "flex justify-end gap-2 pt-2 border-t border-border-default",
+					children: [/* @__PURE__ */ r("button", {
+						onClick: l,
+						className: "px-4 py-2 text-sm rounded-lg border border-border-default hover:bg-bg-sunken",
+						children: d("connectionPermissionsDialog.cancel", "Cancel")
+					}), /* @__PURE__ */ r("button", {
+						onClick: () => c(Array.from(f), Array.from(m)),
+						className: "px-4 py-2 text-sm bg-action-primary-bg text-text-inverse rounded-lg hover:bg-action-primary-bg/90",
+						children: d("connectionPermissionsDialog.save", "Save Permissions")
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { a as ConnectionPermissionsDialog };
+
+//# sourceMappingURL=ConnectionPermissionsDialog.js.map