@burdenoff/microfe-vibecontrols 2026.511.1 → 2026.512.1

package/dist/components/graph/AgentGraphView.js

@@ -1,17 +1,16 @@
 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";
+import { TargetNode as t } from "./TargetNode.js";
+import { AgentNode as n } from "./AgentNode.js";
+import { ConnectionPermissionsDialog as r } from "./ConnectionPermissionsDialog.js";
+import { useCallback as i, useEffect as a, useLayoutEffect as o, useMemo as s, useRef as c, useState as l } from "react";
+import { CheckCircle as u } from "lucide-react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Background as m, BackgroundVariant as h, Controls as g, MarkerType as _, MiniMap as v, ReactFlow as y, useEdgesState as b, useNodesState as x } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
 //#region src/components/graph/AgentGraphView.tsx
 var S = {
-	targetNode: l,
-	agentNode: u
+	targetNode: t,
+	agentNode: n
 }, 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;
@@ -19,15 +18,15 @@ function j(e) {
 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), []);
+function N(e, t, n, r) {
+	let i = [], a = [], o = Math.ceil(e.length / n), s = Array.from({ length: o }, (t, r) => e.slice(r * n, (r + 1) * n).reduce((e, t) => Math.max(e, M(t)), 0)), c = s.reduce((e, t, n) => (e.push(n === 0 ? 0 : e[n - 1] + s[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({
+		let a = t % n, o = Math.floor(t / n), s = M(e), l = a * (C + k), u = c[o];
+		i.push({
 			id: `target-${e.id}`,
 			type: "targetNode",
 			position: {
-				x: c,
+				x: l,
 				y: u
 			},
 			data: {
@@ -38,15 +37,15 @@ function N(e, n, r, i) {
 				status: e.status,
 				host: e.host,
 				agentCount: e.agents.length,
-				onActivate: i ? () => i("target", e.id) : void 0
+				onActivate: r ? () => r("target", e.id) : void 0
 			},
-			className: i ? "cursor-pointer" : void 0,
+			className: r ? "cursor-pointer" : void 0,
 			style: {
 				width: C,
 				height: s
 			}
 		}), e.agents.forEach((t, n) => {
-			a.push({
+			i.push({
 				id: `agent-${t.id}`,
 				type: "agentNode",
 				position: {
@@ -61,12 +60,12 @@ function N(e, n, r, i) {
 					nodeType: "agent",
 					version: t.version,
 					isActive: t.isActive,
-					onActivate: i ? () => i("agent", t.id) : void 0
+					onActivate: r ? () => r("agent", t.id) : void 0
 				},
-				className: i ? "cursor-pointer" : void 0,
+				className: r ? "cursor-pointer" : void 0,
 				style: { width: C - D * 2 }
 			});
-		}), e.agents.length === 0 && a.push({
+		}), e.agents.length === 0 && i.push({
 			id: `empty-${e.id}`,
 			type: "agentNode",
 			position: {
@@ -83,21 +82,21 @@ function N(e, n, r, i) {
 			},
 			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({
+	}), t.forEach((e) => {
+		let t = `agent-${e.sourceAgent.id}`, n = `target-${e.target.id}`;
+		if (!i.some((e) => e.id === t) || !i.some((e) => e.id === n)) return;
+		let r = e.status === "connected";
+		a.push({
 			id: `edge-${e.id}`,
-			source: n,
-			target: r,
+			source: t,
+			target: n,
 			label: e.protocol,
 			data: e,
 			type: "default",
-			animated: i,
-			markerEnd: { type: t.ArrowClosed },
+			animated: r,
+			markerEnd: { type: _.ArrowClosed },
 			style: {
-				stroke: i ? "var(--color-status-success-border)" : "var(--color-border-strong)",
+				stroke: r ? "var(--color-status-success-border)" : "var(--color-border-strong)",
 				strokeWidth: 2
 			},
 			labelStyle: {
@@ -108,13 +107,13 @@ function N(e, n, r, i) {
 			labelBgPadding: [4, 2]
 		});
 	}), {
-		nodes: a,
-		edges: o
+		nodes: i,
+		edges: a
 	};
 }
-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(() => {
+function P({ targets: t, connections: n, onUpdatePermissions: _, availablePermissions: C, availableScopes: w, onNodeClick: T, fullHeight: E }) {
+	let D = e(), O = c(null), [k, A] = l(() => typeof window > "u" ? 3 : j(window.innerWidth));
+	o(() => {
 		let e = (e) => {
 			A((t) => {
 				let n = j(e);
@@ -133,39 +132,39 @@ function P({ targets: t, connections: l, onUpdatePermissions: u, availablePermis
 			n || window.removeEventListener("resize", t), n?.disconnect();
 		};
 	}, []);
-	let { nodes: M, edges: P } = h(() => N(t, l, k, T), [
+	let { nodes: M, edges: P } = s(() => N(t, n, k, T), [
 		t,
-		l,
+		n,
 		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);
+	]), [F, I, L] = x(M), [R, z, B] = b(P), [V, H] = l(null), [U, W] = l(!1);
+	a(() => {
+		let { nodes: e, edges: r } = N(t, n, k, T);
+		I(e), z(r);
 	}, [
 		t,
-		l,
+		n,
 		k,
 		T,
 		I,
 		z
 	]);
-	let G = f((e, t) => {
+	let G = i((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", {
+	}, [T]), K = i((e, t) => {
+		let r = n.find((e) => `edge-${e.id}` === t.id);
+		r && H(r);
+	}, [n]), q = i((e, t) => {
+		V && _ && _(V.id, e, t), H(null), W(!0), setTimeout(() => W(!1), 3e3);
+	}, [V, _]);
+	return /* @__PURE__ */ p(d, { children: [
+		/* @__PURE__ */ f("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, {
+			children: /* @__PURE__ */ p(y, {
 				nodes: F,
 				edges: R,
 				nodesDraggable: !1,
@@ -181,13 +180,13 @@ function P({ targets: t, connections: l, onUpdatePermissions: u, availablePermis
 				panOnDrag: !0,
 				proOptions: { hideAttribution: !0 },
 				children: [
-					/* @__PURE__ */ b(n, {
-						variant: r.Dots,
+					/* @__PURE__ */ f(m, {
+						variant: h.Dots,
 						gap: 20,
 						size: 1,
 						className: "!fill-text-tertiary/10"
 					}),
-					/* @__PURE__ */ b(i, {
+					/* @__PURE__ */ f(g, {
 						showInteractive: !1,
 						style: {
 							background: "var(--color-bg-primary)",
@@ -197,7 +196,7 @@ function P({ targets: t, connections: l, onUpdatePermissions: u, availablePermis
 						},
 						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, {
+					/* @__PURE__ */ f(v, {
 						zoomable: !0,
 						pannable: !0,
 						style: {
@@ -212,20 +211,20 @@ function P({ targets: t, connections: l, onUpdatePermissions: u, availablePermis
 				]
 			})
 		}),
-		V && /* @__PURE__ */ b(d, {
+		V && /* @__PURE__ */ f(r, {
 			connection: V,
 			availablePermissions: C,
 			availableScopes: w,
 			onSave: q,
 			onClose: () => H(null)
 		}),
-		U && /* @__PURE__ */ x("div", {
+		U && /* @__PURE__ */ p("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, {
+			children: [/* @__PURE__ */ f(u, {
 				size: 16,
 				className: "text-green-500 flex-shrink-0"
-			}), /* @__PURE__ */ b("span", {
+			}), /* @__PURE__ */ f("span", {
 				className: "text-text-primary",
 				children: D("vibecontrols.graph.permissionsSaved", "Permissions saved")
 			})]

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

@@ -1 +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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"}
+{"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.js

@@ -1,19 +1,18 @@
 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";
+import { memo as t } from "react";
+import { Bot as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Handle as a, Position as o } from "@xyflow/react";
 //#region src/components/graph/AgentNode.tsx
-function s({ data: r }) {
-	let s = e(), c = r;
-	return c.isEmpty ? /* @__PURE__ */ a("div", {
+function s({ data: t }) {
+	let s = e(), c = t;
+	return c.isEmpty ? /* @__PURE__ */ r("div", {
 		className: "rounded-lg border border-dashed border-border-default p-2 text-center",
-		children: /* @__PURE__ */ a("span", {
+		children: /* @__PURE__ */ r("span", {
 			className: "text-[10px] italic text-text-tertiary",
 			children: s("vibecontrols.graph.noAgentInstalled", "No agent installed")
 		})
-	}) : /* @__PURE__ */ o("div", {
+	}) : /* @__PURE__ */ i("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,
@@ -22,33 +21,33 @@ function s({ data: r }) {
 			c.onActivate && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), c.onActivate());
 		},
 		children: [
-			/* @__PURE__ */ a(n, {
+			/* @__PURE__ */ r(a, {
 				type: "source",
-				position: t.Right,
+				position: o.Right,
 				className: "!bg-action-primary-bg !w-2 !h-2 !border-0"
 			}),
-			/* @__PURE__ */ a(i, {
+			/* @__PURE__ */ r(n, {
 				size: 14,
 				className: "text-action-primary-bg shrink-0"
 			}),
-			/* @__PURE__ */ o("div", {
+			/* @__PURE__ */ i("div", {
 				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ a("div", {
+				children: [/* @__PURE__ */ r("div", {
 					className: "text-xs font-medium text-text-primary truncate",
 					children: c.name
-				}), c.version && /* @__PURE__ */ o("div", {
+				}), c.version && /* @__PURE__ */ i("div", {
 					className: "text-[10px] text-text-tertiary",
 					children: ["v", c.version]
 				})]
 			}),
-			/* @__PURE__ */ a("span", {
+			/* @__PURE__ */ r("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);
+var c = t(s);
 //#endregion
 export { c as AgentNode };
 

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

@@ -1 +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"}
+{"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/TargetNode.js

@@ -1,76 +1,75 @@
 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 { Laptop as i, Monitor as a, ScreenShare as o, Server as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { memo as t } from "react";
+import { Laptop as n, Monitor as r, ScreenShare as i, Server as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Handle as c, Position as l } from "@xyflow/react";
 //#region src/components/graph/TargetNode.tsx
 var u = {
 	DIRECT: {
-		icon: i,
+		icon: n,
 		badge: "bg-accent-blue-subtle text-accent-blue",
 		border: "border-accent-blue/20 bg-accent-blue-subtle/50"
 	},
 	SSH: {
-		icon: s,
+		icon: a,
 		badge: "bg-status-success-bg-subtle text-status-success-text",
 		border: "border-status-success-border/20 bg-status-success-bg-subtle/50"
 	},
 	RDP: {
-		icon: a,
+		icon: r,
 		badge: "bg-status-warning-bg-subtle text-status-warning-text",
 		border: "border-status-warning-border/20 bg-status-warning-bg-subtle/50"
 	},
 	VNC: {
-		icon: o,
+		icon: i,
 		badge: "bg-accent-purple-subtle text-accent-purple",
 		border: "border-accent-purple/20 bg-accent-purple-subtle/50"
 	}
 };
-function d({ data: r }) {
+function d({ data: t }) {
 	e();
-	let i = r, a = u[i.type] || u.DIRECT, o = a.icon, s = i.status === "connected";
-	return /* @__PURE__ */ l("div", {
-		className: `rounded-xl border-2 p-3 ${a.border} h-full w-full`,
-		role: i.onActivate ? "button" : void 0,
-		tabIndex: i.onActivate ? 0 : void 0,
-		"aria-label": i.onActivate ? `Navigate to target ${i.name}` : void 0,
+	let n = t, r = u[n.type] || u.DIRECT, i = r.icon, a = n.status === "connected";
+	return /* @__PURE__ */ s("div", {
+		className: `rounded-xl border-2 p-3 ${r.border} h-full w-full`,
+		role: n.onActivate ? "button" : void 0,
+		tabIndex: n.onActivate ? 0 : void 0,
+		"aria-label": n.onActivate ? `Navigate to target ${n.name}` : void 0,
 		onKeyDown: (e) => {
-			i.onActivate && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), i.onActivate());
+			n.onActivate && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), n.onActivate());
 		},
 		children: [
-			/* @__PURE__ */ c(n, {
+			/* @__PURE__ */ o(c, {
 				type: "target",
-				position: t.Left,
+				position: l.Left,
 				className: "!bg-text-tertiary !w-2 !h-2 !border-0"
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ s("div", {
 				className: "flex items-center gap-2 mb-1",
-				children: [/* @__PURE__ */ l("span", {
-					className: `inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider rounded ${a.badge}`,
-					children: [/* @__PURE__ */ c(o, { size: 10 }), i.type]
-				}), /* @__PURE__ */ c("span", { className: `ml-auto w-2 h-2 rounded-full ${s ? "bg-status-success-bg" : "bg-bg-disabled"}` })]
+				children: [/* @__PURE__ */ s("span", {
+					className: `inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider rounded ${r.badge}`,
+					children: [/* @__PURE__ */ o(i, { size: 10 }), n.type]
+				}), /* @__PURE__ */ o("span", { className: `ml-auto w-2 h-2 rounded-full ${a ? "bg-status-success-bg" : "bg-bg-disabled"}` })]
 			}),
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ o("div", {
 				className: "font-semibold text-sm text-text-primary truncate",
-				children: i.name
+				children: n.name
 			}),
-			i.host && /* @__PURE__ */ c("div", {
+			n.host && /* @__PURE__ */ o("div", {
 				className: "text-xs text-text-tertiary truncate",
-				children: i.host
+				children: n.host
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ s("div", {
 				className: "text-[10px] text-text-tertiary mt-1",
 				children: [
-					i.agentCount,
+					n.agentCount,
 					" agent",
-					i.agentCount === 1 ? "" : "s"
+					n.agentCount === 1 ? "" : "s"
 				]
 			})
 		]
 	});
 }
-var f = r(d);
+var f = t(d);
 //#endregion
 export { f as TargetNode };
 

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

@@ -1 +1 @@
-{"version":3,"file":"TargetNode.js","names":[],"sources":["../../../src/components/graph/TargetNode.tsx"],"sourcesContent":["/**\n * TargetNode — React Flow custom node for a Target (group/sub-flow container).\n * Uses design tokens for seamless light/dark mode.\n */\n\nimport { memo } from 'react';\nimport { Handle, Position, type NodeProps } from '@xyflow/react';\nimport { Server, Monitor, ScreenShare, Laptop } from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\n\nconst typeConfig: Record<string, { icon: typeof Server; badge: string; border: string }> = {\n  DIRECT: {\n    icon: Laptop,\n    badge: 'bg-accent-blue-subtle text-accent-blue',\n    border: 'border-accent-blue/20 bg-accent-blue-subtle/50',\n  },\n  SSH: {\n    icon: Server,\n    badge: 'bg-status-success-bg-subtle text-status-success-text',\n    border: 'border-status-success-border/20 bg-status-success-bg-subtle/50',\n  },\n  RDP: {\n    icon: Monitor,\n    badge: 'bg-status-warning-bg-subtle text-status-warning-text',\n    border: 'border-status-warning-border/20 bg-status-warning-bg-subtle/50',\n  },\n  VNC: {\n    icon: ScreenShare,\n    badge: 'bg-accent-purple-subtle text-accent-purple',\n    border: 'border-accent-purple/20 bg-accent-purple-subtle/50',\n  },\n};\n\nfunction TargetNodeComponent({ data }: NodeProps) {\n  const tr = useTr();\n  const d = data as {\n    name: string;\n    type: string;\n    status: string;\n    host?: string;\n    agentCount: number;\n    onActivate?: () => void;\n  };\n  const config = typeConfig[d.type] || typeConfig.DIRECT;\n  const Icon = config.icon;\n  const isConnected = d.status === 'connected';\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-xl border-2 p-3 ${config.border} h-full w-full`}\n      role={d.onActivate ? 'button' : undefined}\n      tabIndex={d.onActivate ? 0 : undefined}\n      aria-label={d.onActivate ? `Navigate to target ${d.name}` : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <Handle\n        type=\"target\"\n        position={Position.Left}\n        className=\"!bg-text-tertiary !w-2 !h-2 !border-0\"\n      />\n\n      <div className=\"flex items-center gap-2 mb-1\">\n        <span\n          className={`inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider rounded ${config.badge}`}\n        >\n          <Icon size={10} />\n          {d.type}\n        </span>\n        <span\n          className={`ml-auto w-2 h-2 rounded-full ${isConnected ? 'bg-status-success-bg' : 'bg-bg-disabled'}`}\n        />\n      </div>\n      <div className=\"font-semibold text-sm text-text-primary truncate\">{d.name}</div>\n      {d.host && <div className=\"text-xs text-text-tertiary truncate\">{d.host}</div>}\n      <div className=\"text-[10px] text-text-tertiary mt-1\">\n        {d.agentCount} agent{d.agentCount !== 1 ? 's' : ''}\n      </div>\n    </div>\n  );\n}\n\nexport const TargetNode = memo(TargetNodeComponent);\n"],"mappings":";;;;;;;AAUA,IAAM,IAAqF;CACzF,QAAQ;EACN,MAAM;EACN,OAAO;EACP,QAAQ;EACT;CACD,KAAK;EACH,MAAM;EACN,OAAO;EACP,QAAQ;EACT;CACD,KAAK;EACH,MAAM;EACN,OAAO;EACP,QAAQ;EACT;CACD,KAAK;EACH,MAAM;EACN,OAAO;EACP,QAAQ;EACT;CACF;AAED,SAAS,EAAoB,EAAE,WAAmB;AACrC,IAAO;CAClB,IAAM,IAAI,GAQJ,IAAS,EAAW,EAAE,SAAS,EAAW,QAC1C,IAAO,EAAO,MACd,IAAc,EAAE,WAAW;AAUjC,QACE,kBAAC,OAAD;EACE,WAAW,2BAA2B,EAAO,OAAO;EACpD,MAAM,EAAE,aAAa,WAAW,KAAA;EAChC,UAAU,EAAE,aAAa,IAAI,KAAA;EAC7B,cAAY,EAAE,aAAa,sBAAsB,EAAE,SAAS,KAAA;EAC5D,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,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KACE,WAAW,uGAAuG,EAAO;eAD3H,CAGE,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA,EACjB,EAAE,KACE;QACP,kBAAC,QAAD,EACE,WAAW,gCAAgC,IAAc,yBAAyB,oBAClF,CAAA,CACE;;GACN,kBAAC,OAAD;IAAK,WAAU;cAAoD,EAAE;IAAW,CAAA;GAC/E,EAAE,QAAQ,kBAAC,OAAD;IAAK,WAAU;cAAuC,EAAE;IAAW,CAAA;GAC9E,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,EAAE;KAAW;KAAO,EAAE,eAAe,IAAU,KAAN;KACtC;;GACF;;;AAIV,IAAa,IAAa,EAAK,EAAoB"}
+{"version":3,"file":"TargetNode.js","names":[],"sources":["../../../src/components/graph/TargetNode.tsx"],"sourcesContent":["/**\n * TargetNode — React Flow custom node for a Target (group/sub-flow container).\n * Uses design tokens for seamless light/dark mode.\n */\n\nimport { memo } from 'react';\nimport { Handle, Position, type NodeProps } from '@xyflow/react';\nimport { Server, Monitor, ScreenShare, Laptop } from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\n\nconst typeConfig: Record<string, { icon: typeof Server; badge: string; border: string }> = {\n  DIRECT: {\n    icon: Laptop,\n    badge: 'bg-accent-blue-subtle text-accent-blue',\n    border: 'border-accent-blue/20 bg-accent-blue-subtle/50',\n  },\n  SSH: {\n    icon: Server,\n    badge: 'bg-status-success-bg-subtle text-status-success-text',\n    border: 'border-status-success-border/20 bg-status-success-bg-subtle/50',\n  },\n  RDP: {\n    icon: Monitor,\n    badge: 'bg-status-warning-bg-subtle text-status-warning-text',\n    border: 'border-status-warning-border/20 bg-status-warning-bg-subtle/50',\n  },\n  VNC: {\n    icon: ScreenShare,\n    badge: 'bg-accent-purple-subtle text-accent-purple',\n    border: 'border-accent-purple/20 bg-accent-purple-subtle/50',\n  },\n};\n\nfunction TargetNodeComponent({ data }: NodeProps) {\n  const tr = useTr();\n  const d = data as {\n    name: string;\n    type: string;\n    status: string;\n    host?: string;\n    agentCount: number;\n    onActivate?: () => void;\n  };\n  const config = typeConfig[d.type] || typeConfig.DIRECT;\n  const Icon = config.icon;\n  const isConnected = d.status === 'connected';\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-xl border-2 p-3 ${config.border} h-full w-full`}\n      role={d.onActivate ? 'button' : undefined}\n      tabIndex={d.onActivate ? 0 : undefined}\n      aria-label={d.onActivate ? `Navigate to target ${d.name}` : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <Handle\n        type=\"target\"\n        position={Position.Left}\n        className=\"!bg-text-tertiary !w-2 !h-2 !border-0\"\n      />\n\n      <div className=\"flex items-center gap-2 mb-1\">\n        <span\n          className={`inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider rounded ${config.badge}`}\n        >\n          <Icon size={10} />\n          {d.type}\n        </span>\n        <span\n          className={`ml-auto w-2 h-2 rounded-full ${isConnected ? 'bg-status-success-bg' : 'bg-bg-disabled'}`}\n        />\n      </div>\n      <div className=\"font-semibold text-sm text-text-primary truncate\">{d.name}</div>\n      {d.host && <div className=\"text-xs text-text-tertiary truncate\">{d.host}</div>}\n      <div className=\"text-[10px] text-text-tertiary mt-1\">\n        {d.agentCount} agent{d.agentCount !== 1 ? 's' : ''}\n      </div>\n    </div>\n  );\n}\n\nexport const TargetNode = memo(TargetNodeComponent);\n"],"mappings":";;;;;;AAUA,IAAM,IAAqF;CACzF,QAAQ;EACN,MAAM;EACN,OAAO;EACP,QAAQ;EACT;CACD,KAAK;EACH,MAAM;EACN,OAAO;EACP,QAAQ;EACT;CACD,KAAK;EACH,MAAM;EACN,OAAO;EACP,QAAQ;EACT;CACD,KAAK;EACH,MAAM;EACN,OAAO;EACP,QAAQ;EACT;CACF;AAED,SAAS,EAAoB,EAAE,WAAmB;AACrC,IAAO;CAClB,IAAM,IAAI,GAQJ,IAAS,EAAW,EAAE,SAAS,EAAW,QAC1C,IAAO,EAAO,MACd,IAAc,EAAE,WAAW;AAUjC,QACE,kBAAC,OAAD;EACE,WAAW,2BAA2B,EAAO,OAAO;EACpD,MAAM,EAAE,aAAa,WAAW,KAAA;EAChC,UAAU,EAAE,aAAa,IAAI,KAAA;EAC7B,cAAY,EAAE,aAAa,sBAAsB,EAAE,SAAS,KAAA;EAC5D,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,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KACE,WAAW,uGAAuG,EAAO;eAD3H,CAGE,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA,EACjB,EAAE,KACE;QACP,kBAAC,QAAD,EACE,WAAW,gCAAgC,IAAc,yBAAyB,oBAClF,CAAA,CACE;;GACN,kBAAC,OAAD;IAAK,WAAU;cAAoD,EAAE;IAAW,CAAA;GAC/E,EAAE,QAAQ,kBAAC,OAAD;IAAK,WAAU;cAAuC,EAAE;IAAW,CAAA;GAC9E,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,EAAE;KAAW;KAAO,EAAE,eAAe,IAAU,KAAN;KACtC;;GACF;;;AAIV,IAAa,IAAa,EAAK,EAAoB"}