@burdenoff/microfe-vibecontrols 2026.601.8 → 2026.601.9

package/dist/components/graph/MeshGraphView.js

@@ -0,0 +1,190 @@
+import { __toESM as e } from "../../_virtual/_rolldown/runtime.js";
+import { useTr as t } from "../../shared/hooks/useTr.js";
+import { require_dagre as n } from "../../node_modules/dagre/index.js";
+import { MeshAgentNode as r } from "./MeshAgentNode.js";
+import { ConnectionPermissionsDialog as i } from "./ConnectionPermissionsDialog.js";
+import { isMeshLinkLive as a, isSharedAgent as o } from "./meshTypes.js";
+import { useCallback as s, useEffect as c, useMemo as l, useState as u } from "react";
+import { CheckCircle as d } from "lucide-react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Background as h, BackgroundVariant as g, Controls as _, MarkerType as v, MiniMap as y, ReactFlow as b, useEdgesState as x, useNodesState as S } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+//#region src/components/graph/MeshGraphView.tsx
+var C = /* @__PURE__ */ e(n(), 1), w = 200, T = 72, E = { meshAgentNode: r };
+function D(e, t, n) {
+	let r = new C.default.graphlib.Graph();
+	r.setGraph({
+		rankdir: "LR",
+		nodesep: 40,
+		ranksep: 90,
+		marginx: 16,
+		marginy: 16
+	}), r.setDefaultEdgeLabel(() => ({})), e.forEach((e) => {
+		r.setNode(`agent-${e.id}`, {
+			width: w,
+			height: T
+		});
+	});
+	let i = t.filter((t) => e.some((e) => e.id === t.sourceAgent.id) && e.some((e) => e.id === t.destinationAgent.id));
+	return i.forEach((e) => {
+		r.setEdge(`agent-${e.sourceAgent.id}`, `agent-${e.destinationAgent.id}`);
+	}), C.default.layout(r), {
+		nodes: e.map((e) => {
+			let t = r.node(`agent-${e.id}`), i = {
+				name: e.name,
+				version: e.version,
+				isActive: e.isActive,
+				isShared: o(e.ownerUserId),
+				hostType: e.target?.type ?? null,
+				hostLabel: e.target?.host ?? e.hostname,
+				onActivate: n ? () => n(e.id) : void 0
+			};
+			return {
+				id: `agent-${e.id}`,
+				type: "meshAgentNode",
+				position: {
+					x: (t?.x ?? 0) - w / 2,
+					y: (t?.y ?? 0) - T / 2
+				},
+				data: i,
+				className: n ? "cursor-pointer" : void 0
+			};
+		}),
+		edges: i.map((e) => {
+			let t = a(e.status);
+			return {
+				id: `mesh-${e.id}`,
+				source: `agent-${e.sourceAgent.id}`,
+				target: `agent-${e.destinationAgent.id}`,
+				label: e.label ?? void 0,
+				data: e,
+				type: "default",
+				animated: t,
+				markerEnd: { type: v.ArrowClosed },
+				style: {
+					stroke: t ? "var(--color-status-success-border)" : "var(--color-border-strong)",
+					strokeWidth: 2
+				},
+				labelStyle: {
+					fontSize: 10,
+					fontWeight: 600
+				},
+				labelBgStyle: { fill: "transparent" },
+				labelBgPadding: [4, 2]
+			};
+		})
+	};
+}
+function O({ agents: e, meshLinks: n, onUpdatePermissions: r, availablePermissions: a, availableScopes: o, onNodeClick: v, fullHeight: C }) {
+	let w = t(), { nodes: T, edges: O } = l(() => D(e, n, v), [
+		e,
+		n,
+		v
+	]), [k, A, j] = S(T), [M, N, P] = x(O), [F, I] = u(null), [L, R] = u(!1);
+	c(() => {
+		let { nodes: t, edges: r } = D(e, n, v);
+		A(t), N(r);
+	}, [
+		e,
+		n,
+		v,
+		A,
+		N
+	]);
+	let z = s((e, t) => {
+		if (!v) return;
+		let n = t.id.replace(/^agent-/, "");
+		n && v(n);
+	}, [v]), B = s((e, t) => {
+		let r = n.find((e) => `mesh-${e.id}` === t.id);
+		r && I(r);
+	}, [n]), V = s((e, t) => {
+		F && r && r(F.id, e, t), I(null), R(!0), setTimeout(() => R(!1), 3e3);
+	}, [F, r]);
+	return /* @__PURE__ */ m(f, { children: [
+		/* @__PURE__ */ p("div", {
+			className: "w-full rounded-lg border border-border-default overflow-hidden bg-bg-secondary",
+			style: { height: C ? "100%" : "500px" },
+			children: /* @__PURE__ */ m(b, {
+				nodes: k,
+				edges: M,
+				nodesDraggable: !1,
+				onNodesChange: j,
+				onEdgesChange: P,
+				onNodeClick: z,
+				onEdgeClick: B,
+				nodeTypes: E,
+				fitView: !0,
+				fitViewOptions: { padding: .2 },
+				minZoom: .2,
+				maxZoom: 2,
+				panOnDrag: !0,
+				proOptions: { hideAttribution: !0 },
+				children: [
+					/* @__PURE__ */ p(h, {
+						variant: g.Dots,
+						gap: 20,
+						size: 1,
+						className: "!fill-text-tertiary/10"
+					}),
+					/* @__PURE__ */ p(_, {
+						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__ */ p(y, {
+						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)"
+					})
+				]
+			})
+		}),
+		F && /* @__PURE__ */ p(i, {
+			connection: {
+				id: F.id,
+				protocol: F.status,
+				permissions: F.permissions,
+				scopes: F.scopes,
+				label: F.label,
+				description: F.description,
+				sourceAgent: F.sourceAgent,
+				target: {
+					id: F.destinationAgent.id,
+					name: F.destinationAgent.name
+				}
+			},
+			availablePermissions: a,
+			availableScopes: o,
+			onSave: V,
+			onClose: () => I(null)
+		}),
+		L && /* @__PURE__ */ m("div", {
+			"data-testid": "mesh-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__ */ p(d, {
+				size: 16,
+				className: "text-status-success-text flex-shrink-0"
+			}), /* @__PURE__ */ p("span", {
+				className: "text-text-primary",
+				children: w("vibecontrols.mesh.permissionsSaved", "Permissions saved")
+			})]
+		})
+	] });
+}
+//#endregion
+export { O as MeshGraphView };
+
+//# sourceMappingURL=MeshGraphView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MeshGraphView.js","names":[],"sources":["../../../src/components/graph/MeshGraphView.tsx"],"sourcesContent":["/**\n * MeshGraphView — React Flow visualization of the agent MESH topology.\n *\n * Agents are the nodes (MeshAgentNode); AgentMeshLinks are directed\n * agent->agent edges. Auto-layout is computed with dagre (rankdir LR).\n * Click an edge → edit its RBAC permissions/scopes. Click a node → fire the\n * supplied node-activate callback (used for quick-actions / navigation).\n *\n * Background / Controls / MiniMap styling + edge-stroke semantic tokens are\n * kept identical to AgentGraphView for visual consistency.\n */\n\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { CheckCircle } from 'lucide-react';\nimport dagre from 'dagre';\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 { MeshAgentNode, type MeshAgentNodeData } from './MeshAgentNode';\nimport { ConnectionPermissionsDialog } from './ConnectionPermissionsDialog';\nimport { isMeshLinkLive, isSharedAgent, type MeshAgentUi, type MeshLinkUi } from './meshTypes';\n\n// ---------------------------------------------------------------------------\n// Layout (dagre, rankdir LR)\n// ---------------------------------------------------------------------------\n\nconst NODE_WIDTH = 200;\nconst NODE_HEIGHT = 72;\n\nconst nodeTypes: NodeTypes = {\n  meshAgentNode: MeshAgentNode,\n};\n\ninterface MeshGraphViewProps {\n  agents: MeshAgentUi[];\n  meshLinks: MeshLinkUi[];\n  /** Current user id — used to flag personal vs shared agents on each node. */\n  currentUserId?: string | null;\n  onUpdatePermissions?: (meshLinkId: string, permissions: string[], scopes: string[]) => void;\n  availablePermissions?: string[];\n  availableScopes?: string[];\n  onNodeClick?: (agentId: string) => void;\n  fullHeight?: boolean;\n}\n\nfunction buildMeshElements(\n  agents: MeshAgentUi[],\n  meshLinks: MeshLinkUi[],\n  onNodeClick?: (agentId: string) => void\n): { nodes: Node[]; edges: Edge[] } {\n  const graph = new dagre.graphlib.Graph();\n  graph.setGraph({ rankdir: 'LR', nodesep: 40, ranksep: 90, marginx: 16, marginy: 16 });\n  graph.setDefaultEdgeLabel(() => ({}));\n\n  agents.forEach((agent) => {\n    graph.setNode(`agent-${agent.id}`, { width: NODE_WIDTH, height: NODE_HEIGHT });\n  });\n\n  const validLinks = meshLinks.filter(\n    (link) =>\n      agents.some((a) => a.id === link.sourceAgent.id) &&\n      agents.some((a) => a.id === link.destinationAgent.id)\n  );\n\n  validLinks.forEach((link) => {\n    graph.setEdge(`agent-${link.sourceAgent.id}`, `agent-${link.destinationAgent.id}`);\n  });\n\n  dagre.layout(graph);\n\n  const nodes: Node[] = agents.map((agent) => {\n    const layout = graph.node(`agent-${agent.id}`);\n    const data: MeshAgentNodeData = {\n      name: agent.name,\n      version: agent.version,\n      isActive: agent.isActive,\n      isShared: isSharedAgent(agent.ownerUserId),\n      hostType: agent.target?.type ?? null,\n      hostLabel: agent.target?.host ?? agent.hostname,\n      onActivate: onNodeClick ? () => onNodeClick(agent.id) : undefined,\n    };\n    return {\n      id: `agent-${agent.id}`,\n      type: 'meshAgentNode',\n      // dagre positions node centers; React Flow expects top-left.\n      position: {\n        x: (layout?.x ?? 0) - NODE_WIDTH / 2,\n        y: (layout?.y ?? 0) - NODE_HEIGHT / 2,\n      },\n      data: data as unknown as Record<string, unknown>,\n      className: onNodeClick ? 'cursor-pointer' : undefined,\n    };\n  });\n\n  const edges: Edge[] = validLinks.map((link) => {\n    const live = isMeshLinkLive(link.status);\n    return {\n      id: `mesh-${link.id}`,\n      source: `agent-${link.sourceAgent.id}`,\n      target: `agent-${link.destinationAgent.id}`,\n      label: link.label ?? undefined,\n      data: link as unknown as Record<string, unknown>,\n      type: 'default',\n      animated: live,\n      markerEnd: { type: MarkerType.ArrowClosed },\n      style: {\n        stroke: live ? '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 MeshGraphView({\n  agents,\n  meshLinks,\n  onUpdatePermissions,\n  availablePermissions,\n  availableScopes,\n  onNodeClick,\n  fullHeight,\n}: MeshGraphViewProps) {\n  const tr = useTr();\n\n  const { nodes: initialNodes, edges: initialEdges } = useMemo(\n    () => buildMeshElements(agents, meshLinks, onNodeClick),\n    [agents, meshLinks, onNodeClick]\n  );\n\n  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);\n  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);\n  const [selectedLink, setSelectedLink] = useState<MeshLinkUi | null>(null);\n  const [permSaved, setPermSaved] = useState(false);\n\n  // Re-sync nodes/edges when the data changes (e.g. root agent filter / refetch).\n  useEffect(() => {\n    const { nodes: newNodes, edges: newEdges } = buildMeshElements(agents, meshLinks, onNodeClick);\n    setNodes(newNodes);\n    setEdges(newEdges);\n  }, [agents, meshLinks, onNodeClick, setNodes, setEdges]);\n\n  const handleNodeClick = useCallback(\n    (_event: React.MouseEvent, node: Node) => {\n      if (!onNodeClick) return;\n      const agentId = node.id.replace(/^agent-/, '');\n      if (agentId) onNodeClick(agentId);\n    },\n    [onNodeClick]\n  );\n\n  const handleEdgeClick = useCallback(\n    (_event: React.MouseEvent, edge: Edge) => {\n      const link = meshLinks.find((l) => `mesh-${l.id}` === edge.id);\n      if (link) setSelectedLink(link);\n    },\n    [meshLinks]\n  );\n\n  const handleSavePermissions = useCallback(\n    (permissions: string[], scopes: string[]) => {\n      if (selectedLink && onUpdatePermissions) {\n        onUpdatePermissions(selectedLink.id, permissions, scopes);\n      }\n      setSelectedLink(null);\n      setPermSaved(true);\n      setTimeout(() => setPermSaved(false), 3000);\n    },\n    [selectedLink, onUpdatePermissions]\n  );\n\n  const height = fullHeight ? '100%' : '500px';\n\n  return (\n    <>\n      <div\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      {selectedLink && (\n        <ConnectionPermissionsDialog\n          connection={{\n            id: selectedLink.id,\n            protocol: selectedLink.status,\n            permissions: selectedLink.permissions,\n            scopes: selectedLink.scopes,\n            label: selectedLink.label,\n            description: selectedLink.description,\n            sourceAgent: selectedLink.sourceAgent,\n            target: {\n              id: selectedLink.destinationAgent.id,\n              name: selectedLink.destinationAgent.name,\n            },\n          }}\n          availablePermissions={availablePermissions}\n          availableScopes={availableScopes}\n          onSave={handleSavePermissions}\n          onClose={() => setSelectedLink(null)}\n        />\n      )}\n\n      {permSaved && (\n        <div\n          data-testid=\"mesh-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-status-success-text flex-shrink-0\" />\n          <span className=\"text-text-primary\">\n            {tr('vibecontrols.mesh.permissionsSaved', 'Permissions saved')}\n          </span>\n        </div>\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/graph/MeshNodeActions.js

@@ -0,0 +1,70 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { ExternalLink as t, Rocket as n, Send as r, Terminal as i, X as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/graph/MeshNodeActions.tsx
+function c({ agent: c, onRunCommand: l, onStartTerminal: u, onDeployFromHere: d, onOpenAgent: f, onClose: p }) {
+	let m = e(), h = "w-full flex items-center gap-2 px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken text-left transition-colors";
+	return /* @__PURE__ */ s("div", {
+		className: "rounded-lg border border-border-default bg-bg-surface shadow-lg overflow-hidden w-56",
+		children: [/* @__PURE__ */ s("div", {
+			className: "flex items-center justify-between px-3 py-2 border-b border-border-default bg-bg-sunken",
+			children: [/* @__PURE__ */ o("span", {
+				className: "text-xs font-semibold text-text-primary truncate",
+				children: c.name
+			}), /* @__PURE__ */ o("button", {
+				type: "button",
+				onClick: p,
+				className: "p-0.5 rounded hover:bg-bg-elevated",
+				"aria-label": m("common.close", "Close"),
+				children: /* @__PURE__ */ o(a, {
+					size: 14,
+					className: "text-text-secondary"
+				})
+			})]
+		}), /* @__PURE__ */ s("div", {
+			className: "py-1",
+			children: [
+				/* @__PURE__ */ s("button", {
+					type: "button",
+					className: h,
+					onClick: () => l(c.id),
+					children: [/* @__PURE__ */ o(r, {
+						size: 14,
+						className: "text-text-secondary"
+					}), m("mesh.actions.runCommand", "Run command")]
+				}),
+				/* @__PURE__ */ s("button", {
+					type: "button",
+					className: h,
+					onClick: () => u(c.id),
+					children: [/* @__PURE__ */ o(i, {
+						size: 14,
+						className: "text-text-secondary"
+					}), m("mesh.actions.startTerminal", "Start terminal")]
+				}),
+				/* @__PURE__ */ s("button", {
+					type: "button",
+					className: h,
+					onClick: () => d(c.id),
+					children: [/* @__PURE__ */ o(n, {
+						size: 14,
+						className: "text-text-secondary"
+					}), m("mesh.actions.deployFromHere", "Deploy from here")]
+				}),
+				/* @__PURE__ */ s("button", {
+					type: "button",
+					className: h,
+					onClick: () => f(c.id),
+					children: [/* @__PURE__ */ o(t, {
+						size: 14,
+						className: "text-text-secondary"
+					}), m("mesh.actions.openAgent", "Open agent")]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { c as MeshNodeActions };
+
+//# sourceMappingURL=MeshNodeActions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MeshNodeActions.js","names":[],"sources":["../../../src/components/graph/MeshNodeActions.tsx"],"sourcesContent":["/**\n * MeshNodeActions — quick-action menu for a selected agent node in the mesh.\n *\n * Actions:\n *  - Run command   → opens the MeshRequestPanel targeting this node\n *  - Start terminal → best-effort deep-terminal via startMeshAgentSession\n *  - Deploy from here → opens the deploy wizard pre-seeded with this node\n *  - Open agent     → navigate to the agent details page\n *\n * Rendered as a lightweight popover anchored to the page; the parent owns the\n * open/close state and the action callbacks.\n */\n\nimport { Terminal, Send, Rocket, ExternalLink, X } from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\nimport type { MeshAgentUi } from './meshTypes';\n\ninterface MeshNodeActionsProps {\n  agent: MeshAgentUi;\n  onRunCommand: (agentId: string) => void;\n  onStartTerminal: (agentId: string) => void;\n  onDeployFromHere: (agentId: string) => void;\n  onOpenAgent: (agentId: string) => void;\n  onClose: () => void;\n}\n\nexport function MeshNodeActions({\n  agent,\n  onRunCommand,\n  onStartTerminal,\n  onDeployFromHere,\n  onOpenAgent,\n  onClose,\n}: MeshNodeActionsProps) {\n  const tr = useTr();\n\n  const ITEM =\n    'w-full flex items-center gap-2 px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken text-left transition-colors';\n\n  return (\n    <div className=\"rounded-lg border border-border-default bg-bg-surface shadow-lg overflow-hidden w-56\">\n      <div className=\"flex items-center justify-between px-3 py-2 border-b border-border-default bg-bg-sunken\">\n        <span className=\"text-xs font-semibold text-text-primary truncate\">{agent.name}</span>\n        <button\n          type=\"button\"\n          onClick={onClose}\n          className=\"p-0.5 rounded hover:bg-bg-elevated\"\n          aria-label={tr('common.close', 'Close')}\n        >\n          <X size={14} className=\"text-text-secondary\" />\n        </button>\n      </div>\n      <div className=\"py-1\">\n        <button type=\"button\" className={ITEM} onClick={() => onRunCommand(agent.id)}>\n          <Send size={14} className=\"text-text-secondary\" />\n          {tr('mesh.actions.runCommand', 'Run command')}\n        </button>\n        <button type=\"button\" className={ITEM} onClick={() => onStartTerminal(agent.id)}>\n          <Terminal size={14} className=\"text-text-secondary\" />\n          {tr('mesh.actions.startTerminal', 'Start terminal')}\n        </button>\n        <button type=\"button\" className={ITEM} onClick={() => onDeployFromHere(agent.id)}>\n          <Rocket size={14} className=\"text-text-secondary\" />\n          {tr('mesh.actions.deployFromHere', 'Deploy from here')}\n        </button>\n        <button type=\"button\" className={ITEM} onClick={() => onOpenAgent(agent.id)}>\n          <ExternalLink size={14} className=\"text-text-secondary\" />\n          {tr('mesh.actions.openAgent', 'Open agent')}\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AA0BA,SAAgB,EAAgB,EAC9B,UACA,iBACA,oBACA,qBACA,gBACA,cACuB;CACvB,IAAM,IAAK,GAAO,EAEZ,IACJ;AAEF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,QAAD;IAAM,WAAU;cAAoD,EAAM;IAAY,CAAA,EACtF,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,WAAU;IACV,cAAY,EAAG,gBAAgB,QAAQ;cAEvC,kBAAC,GAAD;KAAG,MAAM;KAAI,WAAU;KAAwB,CAAA;IACxC,CAAA,CACL;MACN,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,UAAD;KAAQ,MAAK;KAAS,WAAW;KAAM,eAAe,EAAa,EAAM,GAAG;eAA5E,CACE,kBAAC,GAAD;MAAM,MAAM;MAAI,WAAU;MAAwB,CAAA,EACjD,EAAG,2BAA2B,cAAc,CACtC;;IACT,kBAAC,UAAD;KAAQ,MAAK;KAAS,WAAW;KAAM,eAAe,EAAgB,EAAM,GAAG;eAA/E,CACE,kBAAC,GAAD;MAAU,MAAM;MAAI,WAAU;MAAwB,CAAA,EACrD,EAAG,8BAA8B,iBAAiB,CAC5C;;IACT,kBAAC,UAAD;KAAQ,MAAK;KAAS,WAAW;KAAM,eAAe,EAAiB,EAAM,GAAG;eAAhF,CACE,kBAAC,GAAD;MAAQ,MAAM;MAAI,WAAU;MAAwB,CAAA,EACnD,EAAG,+BAA+B,mBAAmB,CAC/C;;IACT,kBAAC,UAAD;KAAQ,MAAK;KAAS,WAAW;KAAM,eAAe,EAAY,EAAM,GAAG;eAA3E,CACE,kBAAC,GAAD;MAAc,MAAM;MAAI,WAAU;MAAwB,CAAA,EACzD,EAAG,0BAA0B,aAAa,CACpC;;IACL;KACF"}

package/dist/components/graph/MeshRequestPanel.js

@@ -0,0 +1,240 @@
+import { useExecuteAgentMeshRequestMutation as e } from "../../generated/wspace-operations.js";
+import { useTr as t } from "../../shared/hooks/useTr.js";
+import { useCallback as n, useMemo as r, useState as i } from "react";
+import { ChevronRight as a, Loader2 as o, Network as s, Play as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/graph/MeshRequestPanel.tsx
+function d(e) {
+	return e && typeof e == "object" && !Array.isArray(e) ? e : null;
+}
+function f(e, t) {
+	let n = e?.[t];
+	return typeof n == "string" ? n : null;
+}
+function p(e) {
+	if (!e) return [];
+	let t = e.hops ?? d(e.meta)?.hops;
+	return Array.isArray(t) ? t.filter((e) => typeof e == "string") : [];
+}
+var m = "px-3 py-2 text-sm rounded-md bg-bg-sunken border border-border-default text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/40";
+function h({ rootAgentId: h, destinations: g, initialDestinationId: _, onClose: v }) {
+	let y = t(), [b, x] = i(_ ?? g[0]?.id ?? ""), [S, C] = i("command"), [w, T] = i("status"), [E, D] = i("GET"), [O, k] = i("/api/health"), [A, j] = i(""), [M, N] = i(null), [P, F] = i([]), [I, { loading: L }] = e(), R = n((e) => g.find((t) => t.id === e)?.name ?? e, [g]), z = r(() => !h || !b ? !1 : S === "command" ? w.trim().length > 0 : O.trim().length > 0, [
+		h,
+		b,
+		S,
+		w,
+		O
+	]), B = n(async () => {
+		if (!h || !b) return;
+		N(null), F([]);
+		let e;
+		if (S === "command") e = {
+			method: "POST",
+			path: "/api/profiles/default/agent/commands/run",
+			body: { argv: w.trim().split(/\s+/).filter(Boolean) }
+		};
+		else {
+			let t;
+			if (A.trim().length > 0) try {
+				if (t = d(JSON.parse(A)) ?? void 0, !t) {
+					N({
+						body: y("mesh.request.bodyNotObject", "Body must be a JSON object."),
+						error: !0
+					});
+					return;
+				}
+			} catch {
+				N({
+					body: y("mesh.request.invalidJson", "Request body is not valid JSON."),
+					error: !0
+				});
+				return;
+			}
+			e = {
+				method: E,
+				path: O.trim(),
+				body: t
+			};
+		}
+		try {
+			let t = await I({ variables: {
+				rootAgentId: h,
+				destinationAgentId: b,
+				request: e
+			} }), n = t.data?.executeAgentMeshRequest, r = d(n?.data);
+			if (F(p(r)), t.error || n?.error || n?.ok === !1) {
+				N({
+					body: n?.error ?? t.error?.message ?? f(r, "error") ?? y("mesh.request.failed", "Request failed"),
+					error: !0
+				});
+				return;
+			}
+			let i = f(r, "stdout"), a = n?.text, o = r ? JSON.stringify(r, null, 2) : a ?? "(no output)";
+			N({ body: i || a || o });
+		} catch (e) {
+			N({
+				body: e instanceof Error ? e.message : String(e),
+				error: !0
+			});
+		}
+	}, [
+		h,
+		b,
+		S,
+		w,
+		E,
+		O,
+		A,
+		I,
+		y
+	]);
+	return /* @__PURE__ */ u("div", {
+		className: "rounded-lg border border-border-default bg-bg-surface p-4 space-y-3",
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ u("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ l(s, { className: "size-4 text-text-secondary" }), /* @__PURE__ */ l("h3", {
+						className: "text-sm font-semibold text-text-primary",
+						children: y("mesh.request.title", "Run mesh request")
+					})]
+				}), v && /* @__PURE__ */ l("button", {
+					type: "button",
+					onClick: v,
+					className: "text-xs text-text-muted hover:text-text-primary",
+					children: y("common.close", "Close")
+				})]
+			}),
+			!h && /* @__PURE__ */ l("p", {
+				className: "text-xs text-status-warning-text",
+				children: y("mesh.request.noRoot", "Select a reachable root agent to dispatch from.")
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "flex flex-wrap items-end gap-2",
+				children: [/* @__PURE__ */ u("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ l("label", {
+						className: "text-xs text-text-muted",
+						htmlFor: "mesh-dest",
+						children: y("mesh.request.destination", "Destination agent")
+					}), /* @__PURE__ */ u("select", {
+						id: "mesh-dest",
+						value: b,
+						onChange: (e) => x(e.target.value),
+						className: `${m} min-w-44`,
+						children: [g.length === 0 && /* @__PURE__ */ l("option", {
+							value: "",
+							children: y("mesh.request.noDest", "No agents")
+						}), g.map((e) => /* @__PURE__ */ u("option", {
+							value: e.id,
+							children: [
+								e.name,
+								" (",
+								e.hostname,
+								")"
+							]
+						}, e.id))]
+					})]
+				}), /* @__PURE__ */ u("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ l("span", {
+						className: "text-xs text-text-muted",
+						children: y("mesh.request.mode", "Mode")
+					}), /* @__PURE__ */ u("div", {
+						className: "flex gap-1",
+						children: [/* @__PURE__ */ l("button", {
+							type: "button",
+							onClick: () => C("command"),
+							className: `px-3 py-2 text-sm rounded-md border transition-colors ${S === "command" ? "border-action-primary-bg bg-action-primary-bg/10 text-action-primary-bg" : "border-border-default text-text-secondary hover:bg-bg-sunken"}`,
+							children: y("mesh.request.command", "Command")
+						}), /* @__PURE__ */ l("button", {
+							type: "button",
+							onClick: () => C("api"),
+							className: `px-3 py-2 text-sm rounded-md border transition-colors ${S === "api" ? "border-action-primary-bg bg-action-primary-bg/10 text-action-primary-bg" : "border-border-default text-text-secondary hover:bg-bg-sunken"}`,
+							children: y("mesh.request.api", "API")
+						})]
+					})]
+				})]
+			}),
+			S === "command" ? /* @__PURE__ */ u("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ l("label", {
+					className: "text-xs text-text-muted",
+					htmlFor: "mesh-argv",
+					children: y("mesh.request.argv", "Command (vibe …)")
+				}), /* @__PURE__ */ l("input", {
+					id: "mesh-argv",
+					type: "text",
+					value: w,
+					onChange: (e) => T(e.target.value),
+					placeholder: "status --json",
+					className: `${m} font-mono w-full`
+				})]
+			}) : /* @__PURE__ */ u("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ u("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ l("select", {
+						value: E,
+						onChange: (e) => D(e.target.value),
+						className: `${m} w-28`,
+						"aria-label": y("mesh.request.method", "Method"),
+						children: [
+							"GET",
+							"POST",
+							"PUT",
+							"DELETE",
+							"PATCH"
+						].map((e) => /* @__PURE__ */ l("option", {
+							value: e,
+							children: e
+						}, e))
+					}), /* @__PURE__ */ l("input", {
+						type: "text",
+						value: O,
+						onChange: (e) => k(e.target.value),
+						placeholder: "/api/health",
+						className: `${m} font-mono flex-1`,
+						"aria-label": y("mesh.request.path", "Path")
+					})]
+				}), /* @__PURE__ */ l("textarea", {
+					value: A,
+					onChange: (e) => j(e.target.value),
+					placeholder: y("mesh.request.bodyPlaceholder", "JSON body (optional)"),
+					rows: 3,
+					className: `${m} font-mono w-full resize-y`,
+					"aria-label": y("mesh.request.body", "Request body")
+				})]
+			}),
+			/* @__PURE__ */ u("button", {
+				type: "button",
+				onClick: () => void B(),
+				disabled: !z || L,
+				className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50",
+				children: [L ? /* @__PURE__ */ l(o, { className: "size-4 animate-spin" }) : /* @__PURE__ */ l(c, { className: "size-4" }), y("mesh.request.run", "Run")]
+			}),
+			P.length > 0 && /* @__PURE__ */ u("div", {
+				className: "flex flex-wrap items-center gap-1 text-xs text-text-tertiary",
+				children: [/* @__PURE__ */ l("span", {
+					className: "font-medium text-text-secondary",
+					children: y("mesh.request.hops", "Hops:")
+				}), P.map((e, t) => /* @__PURE__ */ u("span", {
+					className: "inline-flex items-center gap-1",
+					children: [/* @__PURE__ */ l("span", {
+						className: "rounded bg-bg-sunken px-1.5 py-0.5 text-text-primary",
+						children: R(e)
+					}), t < P.length - 1 && /* @__PURE__ */ l(a, { className: "size-3" })]
+				}, `${e}-${t}`))]
+			}),
+			M && /* @__PURE__ */ l("pre", {
+				className: `text-xs whitespace-pre-wrap break-words max-h-80 overflow-auto rounded-md p-3 ${M.error ? "bg-status-error-bg-subtle text-status-error-text" : "bg-bg-sunken text-text-primary"}`,
+				children: M.body
+			})
+		]
+	});
+}
+//#endregion
+export { h as MeshRequestPanel };
+
+//# sourceMappingURL=MeshRequestPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MeshRequestPanel.js","names":[],"sources":["../../../src/components/graph/MeshRequestPanel.tsx"],"sourcesContent":["/**\n * MeshRequestPanel — run a request against a destination agent THROUGH the mesh.\n *\n * The backend computes the hop path from the chosen root (source) agent to the\n * destination, so the panel only supplies `rootAgentId` + `destinationAgentId`\n * + the request. Two request modes:\n *   - COMMAND: type a `vibe` argv; we POST to\n *     `/api/profiles/default/agent/commands/run` with body `{ argv }`.\n *   - API: raw method + path + optional JSON body.\n *\n * The AgentProxyResponse is rendered like AgentMaintenanceTab's output pane,\n * and a hops breadcrumb is shown when the response surfaces hop info.\n */\n\nimport { useCallback, useMemo, useState } from 'react';\nimport { Loader2, Play, ChevronRight, Network } from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\nimport { useExecuteAgentMeshRequestMutation } from '@/generated/wspace-operations';\nimport type { MeshAgentUi } from './meshTypes';\n\ntype RequestMode = 'command' | 'api';\ntype HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';\n\nfunction asRecord(v: unknown): Record<string, unknown> | null {\n  return v && typeof v === 'object' && !Array.isArray(v) ? (v as Record<string, unknown>) : null;\n}\nfunction jstr(obj: Record<string, unknown> | null, key: string): string | null {\n  const v = obj?.[key];\n  return typeof v === 'string' ? v : null;\n}\n\nfunction extractHops(data: Record<string, unknown> | null): string[] {\n  if (!data) return [];\n  const raw = data.hops ?? asRecord(data.meta)?.hops;\n  if (Array.isArray(raw)) return raw.filter((h): h is string => typeof h === 'string');\n  return [];\n}\n\nconst INPUT_CLASS =\n  'px-3 py-2 text-sm rounded-md bg-bg-sunken border border-border-default text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/40';\n\ninterface MeshRequestPanelProps {\n  /** The root/source agent the request is dispatched from. */\n  rootAgentId: string | null;\n  /** Candidate destination agents (typically the workspace mesh agents). */\n  destinations: MeshAgentUi[];\n  /** Pre-selected destination (e.g. clicked node). */\n  initialDestinationId?: string | null;\n  onClose?: () => void;\n}\n\nexport function MeshRequestPanel({\n  rootAgentId,\n  destinations,\n  initialDestinationId,\n  onClose,\n}: MeshRequestPanelProps) {\n  const tr = useTr();\n\n  const [destinationId, setDestinationId] = useState<string>(\n    initialDestinationId ?? destinations[0]?.id ?? ''\n  );\n  const [mode, setMode] = useState<RequestMode>('command');\n  const [argv, setArgv] = useState('status');\n  const [method, setMethod] = useState<HttpMethod>('GET');\n  const [path, setPath] = useState('/api/health');\n  const [bodyText, setBodyText] = useState('');\n  const [output, setOutput] = useState<{ body: string; error?: boolean } | null>(null);\n  const [hops, setHops] = useState<string[]>([]);\n\n  const [execute, { loading }] = useExecuteAgentMeshRequestMutation();\n\n  const destName = useCallback(\n    (id: string) => destinations.find((d) => d.id === id)?.name ?? id,\n    [destinations]\n  );\n\n  const canRun = useMemo(() => {\n    if (!rootAgentId || !destinationId) return false;\n    if (mode === 'command') return argv.trim().length > 0;\n    return path.trim().length > 0;\n  }, [rootAgentId, destinationId, mode, argv, path]);\n\n  const handleRun = useCallback(async () => {\n    if (!rootAgentId || !destinationId) return;\n    setOutput(null);\n    setHops([]);\n\n    let requestInput: {\n      method: string;\n      path: string;\n      body?: Record<string, unknown>;\n    };\n\n    if (mode === 'command') {\n      const parts = argv.trim().split(/\\s+/).filter(Boolean);\n      requestInput = {\n        method: 'POST',\n        path: '/api/profiles/default/agent/commands/run',\n        body: { argv: parts },\n      };\n    } else {\n      let parsedBody: Record<string, unknown> | undefined;\n      if (bodyText.trim().length > 0) {\n        try {\n          const parsed: unknown = JSON.parse(bodyText);\n          parsedBody = asRecord(parsed) ?? undefined;\n          if (!parsedBody) {\n            setOutput({\n              body: tr('mesh.request.bodyNotObject', 'Body must be a JSON object.'),\n              error: true,\n            });\n            return;\n          }\n        } catch {\n          setOutput({\n            body: tr('mesh.request.invalidJson', 'Request body is not valid JSON.'),\n            error: true,\n          });\n          return;\n        }\n      }\n      requestInput = { method, path: path.trim(), body: parsedBody };\n    }\n\n    try {\n      const res = await execute({\n        variables: {\n          rootAgentId,\n          destinationAgentId: destinationId,\n          request: requestInput,\n        },\n      });\n      const proxy = res.data?.executeAgentMeshRequest;\n      const data = asRecord(proxy?.data);\n      setHops(extractHops(data));\n\n      if (res.error || proxy?.error || proxy?.ok === false) {\n        setOutput({\n          body:\n            proxy?.error ??\n            res.error?.message ??\n            jstr(data, 'error') ??\n            tr('mesh.request.failed', 'Request failed'),\n          error: true,\n        });\n        return;\n      }\n\n      const stdout = jstr(data, 'stdout');\n      const text = proxy?.text;\n      const pretty = data ? JSON.stringify(data, null, 2) : (text ?? '(no output)');\n      setOutput({ body: stdout || text || pretty });\n    } catch (err) {\n      setOutput({ body: err instanceof Error ? err.message : String(err), error: true });\n    }\n  }, [rootAgentId, destinationId, mode, argv, method, path, bodyText, execute, tr]);\n\n  return (\n    <div className=\"rounded-lg border border-border-default bg-bg-surface p-4 space-y-3\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2\">\n          <Network className=\"size-4 text-text-secondary\" />\n          <h3 className=\"text-sm font-semibold text-text-primary\">\n            {tr('mesh.request.title', 'Run mesh request')}\n          </h3>\n        </div>\n        {onClose && (\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"text-xs text-text-muted hover:text-text-primary\"\n          >\n            {tr('common.close', 'Close')}\n          </button>\n        )}\n      </div>\n\n      {!rootAgentId && (\n        <p className=\"text-xs text-status-warning-text\">\n          {tr('mesh.request.noRoot', 'Select a reachable root agent to dispatch from.')}\n        </p>\n      )}\n\n      <div className=\"flex flex-wrap items-end gap-2\">\n        <div className=\"flex flex-col gap-1\">\n          <label className=\"text-xs text-text-muted\" htmlFor=\"mesh-dest\">\n            {tr('mesh.request.destination', 'Destination agent')}\n          </label>\n          <select\n            id=\"mesh-dest\"\n            value={destinationId}\n            onChange={(e) => setDestinationId(e.target.value)}\n            className={`${INPUT_CLASS} min-w-44`}\n          >\n            {destinations.length === 0 && (\n              <option value=\"\">{tr('mesh.request.noDest', 'No agents')}</option>\n            )}\n            {destinations.map((d) => (\n              <option key={d.id} value={d.id}>\n                {d.name} ({d.hostname})\n              </option>\n            ))}\n          </select>\n        </div>\n\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"text-xs text-text-muted\">{tr('mesh.request.mode', 'Mode')}</span>\n          <div className=\"flex gap-1\">\n            <button\n              type=\"button\"\n              onClick={() => setMode('command')}\n              className={`px-3 py-2 text-sm rounded-md border transition-colors ${\n                mode === 'command'\n                  ? 'border-action-primary-bg bg-action-primary-bg/10 text-action-primary-bg'\n                  : 'border-border-default text-text-secondary hover:bg-bg-sunken'\n              }`}\n            >\n              {tr('mesh.request.command', 'Command')}\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => setMode('api')}\n              className={`px-3 py-2 text-sm rounded-md border transition-colors ${\n                mode === 'api'\n                  ? 'border-action-primary-bg bg-action-primary-bg/10 text-action-primary-bg'\n                  : 'border-border-default text-text-secondary hover:bg-bg-sunken'\n              }`}\n            >\n              {tr('mesh.request.api', 'API')}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      {mode === 'command' ? (\n        <div className=\"flex flex-col gap-1\">\n          <label className=\"text-xs text-text-muted\" htmlFor=\"mesh-argv\">\n            {tr('mesh.request.argv', 'Command (vibe …)')}\n          </label>\n          <input\n            id=\"mesh-argv\"\n            type=\"text\"\n            value={argv}\n            onChange={(e) => setArgv(e.target.value)}\n            placeholder=\"status --json\"\n            className={`${INPUT_CLASS} font-mono w-full`}\n          />\n        </div>\n      ) : (\n        <div className=\"space-y-2\">\n          <div className=\"flex gap-2\">\n            <select\n              value={method}\n              onChange={(e) => setMethod(e.target.value as HttpMethod)}\n              className={`${INPUT_CLASS} w-28`}\n              aria-label={tr('mesh.request.method', 'Method')}\n            >\n              {(['GET', 'POST', 'PUT', 'DELETE', 'PATCH'] as HttpMethod[]).map((m) => (\n                <option key={m} value={m}>\n                  {m}\n                </option>\n              ))}\n            </select>\n            <input\n              type=\"text\"\n              value={path}\n              onChange={(e) => setPath(e.target.value)}\n              placeholder=\"/api/health\"\n              className={`${INPUT_CLASS} font-mono flex-1`}\n              aria-label={tr('mesh.request.path', 'Path')}\n            />\n          </div>\n          <textarea\n            value={bodyText}\n            onChange={(e) => setBodyText(e.target.value)}\n            placeholder={tr('mesh.request.bodyPlaceholder', 'JSON body (optional)')}\n            rows={3}\n            className={`${INPUT_CLASS} font-mono w-full resize-y`}\n            aria-label={tr('mesh.request.body', 'Request body')}\n          />\n        </div>\n      )}\n\n      <button\n        type=\"button\"\n        onClick={() => void handleRun()}\n        disabled={!canRun || loading}\n        className=\"inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n      >\n        {loading ? <Loader2 className=\"size-4 animate-spin\" /> : <Play className=\"size-4\" />}\n        {tr('mesh.request.run', 'Run')}\n      </button>\n\n      {hops.length > 0 && (\n        <div className=\"flex flex-wrap items-center gap-1 text-xs text-text-tertiary\">\n          <span className=\"font-medium text-text-secondary\">\n            {tr('mesh.request.hops', 'Hops:')}\n          </span>\n          {hops.map((hop, idx) => (\n            <span key={`${hop}-${idx}`} className=\"inline-flex items-center gap-1\">\n              <span className=\"rounded bg-bg-sunken px-1.5 py-0.5 text-text-primary\">\n                {destName(hop)}\n              </span>\n              {idx < hops.length - 1 && <ChevronRight className=\"size-3\" />}\n            </span>\n          ))}\n        </div>\n      )}\n\n      {output && (\n        <pre\n          className={`text-xs whitespace-pre-wrap break-words max-h-80 overflow-auto rounded-md p-3 ${\n            output.error\n              ? 'bg-status-error-bg-subtle text-status-error-text'\n              : 'bg-bg-sunken text-text-primary'\n          }`}\n        >\n          {output.body}\n        </pre>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/graph/meshTypes.js

@@ -0,0 +1,11 @@
+//#region src/components/graph/meshTypes.ts
+function e(e) {
+	return e === "active" || e === "connected";
+}
+function t(e) {
+	return e == null;
+}
+//#endregion
+export { e as isMeshLinkLive, t as isSharedAgent };
+
+//# sourceMappingURL=meshTypes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meshTypes.js","names":[],"sources":["../../../src/components/graph/meshTypes.ts"],"sourcesContent":["/**\n * Shared UI types + small helpers for the agent-mesh graph.\n *\n * These narrow the generated fragment shapes into the plain props the mesh\n * graph components consume, so the components don't depend on the exact\n * generated type names.\n */\n\nexport interface MeshAgentUi {\n  id: string;\n  name: string;\n  hostname: string;\n  platform: string;\n  version: string;\n  isActive: boolean;\n  ownerUserId?: string | null;\n  targetId: string;\n  tunnelStatus?: string | null;\n  target?: {\n    id: string;\n    name: string;\n    type: string;\n    host?: string | null;\n  } | null;\n}\n\nexport interface MeshLinkUi {\n  id: string;\n  workspaceId: string;\n  status: string;\n  permissions: string[];\n  scopes: string[];\n  label?: string | null;\n  description?: string | null;\n  createdAt: string;\n  updatedAt: string;\n  sourceAgent: { id: string; name: string };\n  destinationAgent: {\n    id: string;\n    name: string;\n    hostname: string;\n    target?: { id: string; name: string; type: string; host?: string | null } | null;\n  };\n}\n\n/** A mesh link is \"live\" (animated edge) when active/connected. */\nexport function isMeshLinkLive(status: string): boolean {\n  return status === 'active' || status === 'connected';\n}\n\n/** NULL ownerUserId => shared workspace agent; non-null => personal agent. */\nexport function isSharedAgent(ownerUserId?: string | null): boolean {\n  return ownerUserId == null;\n}\n"],"mappings":";AA8CA,SAAgB,EAAe,GAAyB;AACtD,QAAO,MAAW,YAAY,MAAW;;AAI3C,SAAgB,EAAc,GAAsC;AAClE,QAAO,KAAe"}

package/dist/components/graph/nodeIcons.js

@@ -0,0 +1,31 @@
+import { Laptop as e, Monitor as t, ScreenShare as n, Server as r } from "lucide-react";
+//#region src/components/graph/nodeIcons.ts
+var i = {
+	DIRECT: {
+		icon: e,
+		badge: "bg-accent-blue-subtle text-accent-blue",
+		border: "border-accent-blue/20 bg-accent-blue-subtle/50"
+	},
+	SSH: {
+		icon: r,
+		badge: "bg-status-success-bg-subtle text-status-success-text",
+		border: "border-status-success-border/20 bg-status-success-bg-subtle/50"
+	},
+	RDP: {
+		icon: t,
+		badge: "bg-status-warning-bg-subtle text-status-warning-text",
+		border: "border-status-warning-border/20 bg-status-warning-bg-subtle/50"
+	},
+	VNC: {
+		icon: n,
+		badge: "bg-accent-purple-subtle text-accent-purple",
+		border: "border-accent-purple/20 bg-accent-purple-subtle/50"
+	}
+};
+function a(e) {
+	return e && i[e] ? i[e] : i.DIRECT;
+}
+//#endregion
+export { a as getNodeTypeConfig };
+
+//# sourceMappingURL=nodeIcons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nodeIcons.js","names":[],"sources":["../../../src/components/graph/nodeIcons.ts"],"sourcesContent":["/**\n * nodeIcons — shared icon + badge token map for target/host types.\n *\n * Lifted out of TargetNode so both the target-based graph and the agent-mesh\n * graph (MeshAgentNode host badge) render the same host-type glyphs and\n * semantic-token styling.\n */\n\nimport { Server, Monitor, ScreenShare, Laptop, type LucideIcon } from 'lucide-react';\n\nexport interface NodeTypeConfig {\n  icon: LucideIcon;\n  /** Badge background + text tokens. */\n  badge: string;\n  /** Group-container border + subtle background tokens. */\n  border: string;\n}\n\nexport const NODE_TYPE_CONFIG: Record<string, NodeTypeConfig> = {\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\nexport function getNodeTypeConfig(type?: string | null): NodeTypeConfig {\n  if (type && NODE_TYPE_CONFIG[type]) return NODE_TYPE_CONFIG[type];\n  return NODE_TYPE_CONFIG.DIRECT;\n}\n"],"mappings":";;AAkBA,IAAa,IAAmD;CAC9D,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,SAAgB,EAAkB,GAAsC;AAEtE,QADI,KAAQ,EAAiB,KAAc,EAAiB,KACrD,EAAiB"}