@cyvest/cyvest-vis 2.0.1

package/dist/index.mjs

@@ -0,0 +1,1284 @@
+// src/components/CyvestGraph.tsx
+import { useState as useState2, useCallback as useCallback4 } from "react";
+
+// src/components/ObservablesGraph.tsx
+import React3, { useMemo as useMemo2, useCallback as useCallback2, useState } from "react";
+import {
+  ReactFlow,
+  ReactFlowProvider,
+  Background,
+  Controls,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+  ConnectionMode
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { getObservableGraph, findRootObservables } from "@cyvest/cyvest-js";
+
+// src/types.ts
+var DEFAULT_FORCE_CONFIG = {
+  chargeStrength: -200,
+  linkDistance: 80,
+  centerStrength: 0.05,
+  collisionRadius: 40,
+  iterations: 300
+};
+
+// src/components/ObservableNode.tsx
+import { memo } from "react";
+import { Handle, Position } from "@xyflow/react";
+
+// src/utils/observables.ts
+var OBSERVABLE_EMOJI_MAP = {
+  // Network
+  "ipv4-addr": "\u{1F310}",
+  "ipv6-addr": "\u{1F310}",
+  "domain-name": "\u{1F3E0}",
+  url: "\u{1F517}",
+  "autonomous-system": "\u{1F30D}",
+  "mac-addr": "\u{1F4F6}",
+  // Email
+  "email-addr": "\u{1F4E7}",
+  "email-message": "\u2709\uFE0F",
+  // File
+  file: "\u{1F4C4}",
+  "file-hash": "\u{1F510}",
+  "file:hash:md5": "\u{1F510}",
+  "file:hash:sha1": "\u{1F510}",
+  "file:hash:sha256": "\u{1F510}",
+  // User/Identity
+  user: "\u{1F464}",
+  "user-account": "\u{1F464}",
+  identity: "\u{1FAAA}",
+  // Process/System
+  process: "\u2699\uFE0F",
+  software: "\u{1F4BF}",
+  "windows-registry-key": "\u{1F4DD}",
+  // Threat Intelligence
+  "threat-actor": "\u{1F479}",
+  malware: "\u{1F9A0}",
+  "attack-pattern": "\u2694\uFE0F",
+  campaign: "\u{1F3AF}",
+  indicator: "\u{1F6A8}",
+  // Artifacts
+  artifact: "\u{1F9EA}",
+  certificate: "\u{1F4DC}",
+  "x509-certificate": "\u{1F4DC}",
+  // Default
+  unknown: "\u2753"
+};
+function getObservableEmoji(observableType) {
+  const normalized = observableType.toLowerCase().trim();
+  return OBSERVABLE_EMOJI_MAP[normalized] ?? OBSERVABLE_EMOJI_MAP.unknown;
+}
+var OBSERVABLE_SHAPE_MAP = {
+  // Domains get squares
+  "domain-name": "square",
+  // URLs get circles
+  url: "circle",
+  // IPs get triangles
+  "ipv4-addr": "triangle",
+  "ipv6-addr": "triangle",
+  // Root/files get rectangles (default for root)
+  file: "rectangle",
+  "email-message": "rectangle"
+};
+function getObservableShape(observableType, isRoot) {
+  if (isRoot) {
+    return "rectangle";
+  }
+  const normalized = observableType.toLowerCase().trim();
+  return OBSERVABLE_SHAPE_MAP[normalized] ?? "circle";
+}
+function truncateLabel(value, maxLength = 20, truncateMiddle = true) {
+  if (value.length <= maxLength) {
+    return value;
+  }
+  if (truncateMiddle) {
+    const halfLen = Math.floor((maxLength - 3) / 2);
+    return `${value.slice(0, halfLen)}\u2026${value.slice(-halfLen)}`;
+  }
+  return `${value.slice(0, maxLength - 1)}\u2026`;
+}
+function getLevelColor(level) {
+  const colors = {
+    NONE: "#6b7280",
+    // gray-500
+    TRUSTED: "#22c55e",
+    // green-500
+    INFO: "#3b82f6",
+    // blue-500
+    SAFE: "#22c55e",
+    // green-500
+    NOTABLE: "#eab308",
+    // yellow-500
+    SUSPICIOUS: "#f97316",
+    // orange-500
+    MALICIOUS: "#ef4444"
+    // red-500
+  };
+  return colors[level] ?? colors.NONE;
+}
+function getLevelBackgroundColor(level) {
+  const colors = {
+    NONE: "#f3f4f6",
+    // gray-100
+    TRUSTED: "#dcfce7",
+    // green-100
+    INFO: "#dbeafe",
+    // blue-100
+    SAFE: "#dcfce7",
+    // green-100
+    NOTABLE: "#fef9c3",
+    // yellow-100
+    SUSPICIOUS: "#ffedd5",
+    // orange-100
+    MALICIOUS: "#fee2e2"
+    // red-100
+  };
+  return colors[level] ?? colors.NONE;
+}
+var INVESTIGATION_NODE_EMOJI = {
+  root: "\u{1F3AF}",
+  check: "\u2705",
+  container: "\u{1F4E6}"
+};
+function getInvestigationNodeEmoji(nodeType) {
+  return INVESTIGATION_NODE_EMOJI[nodeType] ?? "\u2753";
+}
+
+// src/components/ObservableNode.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var NODE_SIZE = 28;
+var ROOT_NODE_SIZE = 36;
+function ObservableNodeComponent({
+  data,
+  selected
+}) {
+  const nodeData = data;
+  const {
+    label,
+    emoji,
+    shape,
+    level,
+    isRoot,
+    whitelisted,
+    fullValue
+  } = nodeData;
+  const size = isRoot ? ROOT_NODE_SIZE : NODE_SIZE;
+  const borderColor = getLevelColor(level);
+  const backgroundColor = getLevelBackgroundColor(level);
+  const getShapeStyle = () => {
+    const baseStyle = {
+      width: size,
+      height: size,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor,
+      border: `${selected ? 3 : 2}px solid ${borderColor}`,
+      opacity: whitelisted ? 0.5 : 1,
+      fontSize: isRoot ? 14 : 12
+    };
+    switch (shape) {
+      case "square":
+        return { ...baseStyle, borderRadius: 4 };
+      case "circle":
+        return { ...baseStyle, borderRadius: "50%" };
+      case "triangle":
+        return {
+          ...baseStyle,
+          borderRadius: 0,
+          border: "none",
+          background: `linear-gradient(to bottom right, ${backgroundColor} 50%, transparent 50%)`,
+          clipPath: "polygon(50% 0%, 100% 100%, 0% 100%)",
+          position: "relative"
+        };
+      case "rectangle":
+      default:
+        return { ...baseStyle, width: size * 1.4, borderRadius: 6 };
+    }
+  };
+  const isTriangle = shape === "triangle";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "observable-node",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        cursor: "pointer"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+          isTriangle ? (
+            // Triangle using SVG
+            /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 100 100", children: [
+              /* @__PURE__ */ jsx(
+                "polygon",
+                {
+                  points: "50,10 90,90 10,90",
+                  fill: backgroundColor,
+                  stroke: borderColor,
+                  strokeWidth: selected ? 6 : 4,
+                  opacity: whitelisted ? 0.5 : 1
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: "50",
+                  y: "65",
+                  textAnchor: "middle",
+                  fontSize: "32",
+                  dominantBaseline: "middle",
+                  children: emoji
+                }
+              )
+            ] })
+          ) : (
+            // Other shapes using CSS
+            /* @__PURE__ */ jsx("div", { style: getShapeStyle(), children: /* @__PURE__ */ jsx("span", { style: { userSelect: "none" }, children: emoji }) })
+          ),
+          /* @__PURE__ */ jsx(
+            Handle,
+            {
+              type: "source",
+              position: Position.Right,
+              id: "source",
+              style: {
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                width: 1,
+                height: 1,
+                background: "transparent",
+                border: "none",
+                opacity: 0
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Handle,
+            {
+              type: "target",
+              position: Position.Left,
+              id: "target",
+              style: {
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                width: 1,
+                height: 1,
+                background: "transparent",
+                border: "none",
+                opacity: 0
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              marginTop: 2,
+              fontSize: 9,
+              maxWidth: 70,
+              textAlign: "center",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              color: "#374151",
+              fontFamily: "system-ui, sans-serif"
+            },
+            title: fullValue,
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+var ObservableNode = memo(ObservableNodeComponent);
+
+// src/components/FloatingEdge.tsx
+import { memo as memo2 } from "react";
+import { BaseEdge, getStraightPath } from "@xyflow/react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function FloatingEdgeComponent({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  style,
+  markerEnd
+}) {
+  const [edgePath] = getStraightPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY
+  });
+  return /* @__PURE__ */ jsx2(
+    BaseEdge,
+    {
+      id,
+      path: edgePath,
+      style: {
+        strokeWidth: 1.5,
+        stroke: "#94a3b8",
+        ...style
+      },
+      markerEnd
+    }
+  );
+}
+var FloatingEdge = memo2(FloatingEdgeComponent);
+
+// src/hooks/useForceLayout.ts
+import { useEffect, useRef, useCallback, useMemo } from "react";
+import {
+  forceSimulation,
+  forceLink,
+  forceManyBody,
+  forceCenter,
+  forceCollide,
+  forceX,
+  forceY
+} from "d3-force";
+import {
+  useReactFlow,
+  useNodesInitialized,
+  useStore
+} from "@xyflow/react";
+var nodeCountSelector = (state) => state.nodeLookup.size;
+function useForceLayout(config = {}, rootNodeId) {
+  const { getNodes, getEdges, setNodes } = useReactFlow();
+  const nodesInitialized = useNodesInitialized();
+  const nodeCount = useStore(nodeCountSelector);
+  const forceConfig = useMemo(
+    () => ({ ...DEFAULT_FORCE_CONFIG, ...config }),
+    [config]
+  );
+  const simulationRef = useRef(null);
+  const draggingNodeRef = useRef(null);
+  useEffect(() => {
+    if (!nodesInitialized || nodeCount === 0) {
+      return;
+    }
+    const nodes = getNodes();
+    const edges = getEdges();
+    const simNodes = nodes.map((node) => {
+      const existingNode = simulationRef.current?.nodes().find((n) => n.id === node.id);
+      return {
+        id: node.id,
+        // Use existing simulation position or node position
+        x: existingNode?.x ?? node.position.x ?? Math.random() * 500 - 250,
+        y: existingNode?.y ?? node.position.y ?? Math.random() * 500 - 250,
+        // Preserve fixed positions for dragged nodes
+        fx: existingNode?.fx ?? null,
+        fy: existingNode?.fy ?? null
+      };
+    });
+    if (rootNodeId) {
+      const rootNode = simNodes.find((n) => n.id === rootNodeId);
+      if (rootNode) {
+        rootNode.x = 0;
+        rootNode.y = 0;
+        rootNode.fx = 0;
+        rootNode.fy = 0;
+      }
+    }
+    const simLinks = edges.map((edge) => ({
+      source: edge.source,
+      target: edge.target
+    }));
+    if (simulationRef.current) {
+      simulationRef.current.stop();
+    }
+    const simulation = forceSimulation(simNodes).force(
+      "link",
+      forceLink(simLinks).id((d) => d.id).distance(forceConfig.linkDistance).strength(0.5)
+    ).force(
+      "charge",
+      forceManyBody().strength(forceConfig.chargeStrength)
+    ).force(
+      "center",
+      forceCenter(0, 0).strength(forceConfig.centerStrength)
+    ).force(
+      "collision",
+      forceCollide(forceConfig.collisionRadius)
+    ).force(
+      "x",
+      forceX(0).strength(0.01)
+    ).force(
+      "y",
+      forceY(0).strength(0.01)
+    ).alphaDecay(0.02).velocityDecay(0.4);
+    simulation.on("tick", () => {
+      setNodes(
+        (currentNodes) => currentNodes.map((node) => {
+          const simNode = simulation.nodes().find((n) => n.id === node.id);
+          if (!simNode) return node;
+          return {
+            ...node,
+            position: {
+              x: simNode.x,
+              y: simNode.y
+            }
+          };
+        })
+      );
+    });
+    simulationRef.current = simulation;
+    return () => {
+      simulation.stop();
+    };
+  }, [
+    nodesInitialized,
+    nodeCount,
+    getNodes,
+    getEdges,
+    setNodes,
+    forceConfig,
+    rootNodeId
+  ]);
+  const onNodeDragStart = useCallback(
+    (_, node) => {
+      const simulation = simulationRef.current;
+      if (!simulation) return;
+      draggingNodeRef.current = node.id;
+      simulation.alphaTarget(0.3).restart();
+      const simNode = simulation.nodes().find((n) => n.id === node.id);
+      if (simNode) {
+        simNode.fx = simNode.x;
+        simNode.fy = simNode.y;
+      }
+    },
+    []
+  );
+  const onNodeDrag = useCallback(
+    (_, node) => {
+      const simulation = simulationRef.current;
+      if (!simulation) return;
+      const simNode = simulation.nodes().find((n) => n.id === node.id);
+      if (simNode) {
+        simNode.fx = node.position.x;
+        simNode.fy = node.position.y;
+      }
+    },
+    []
+  );
+  const onNodeDragStop = useCallback(
+    (_, node) => {
+      const simulation = simulationRef.current;
+      if (!simulation) return;
+      draggingNodeRef.current = null;
+      simulation.alphaTarget(0);
+      if (node.id !== rootNodeId) {
+        const simNode = simulation.nodes().find((n) => n.id === node.id);
+        if (simNode) {
+          simNode.fx = null;
+          simNode.fy = null;
+        }
+      }
+    },
+    [rootNodeId]
+  );
+  const updateForceConfig = useCallback(
+    (updates) => {
+      const simulation = simulationRef.current;
+      if (!simulation) return;
+      if (updates.chargeStrength !== void 0) {
+        simulation.force(
+          "charge",
+          forceManyBody().strength(updates.chargeStrength)
+        );
+      }
+      if (updates.linkDistance !== void 0) {
+        const linkForce = simulation.force("link");
+        if (linkForce) {
+          linkForce.distance(updates.linkDistance);
+        }
+      }
+      if (updates.collisionRadius !== void 0) {
+        simulation.force(
+          "collision",
+          forceCollide(updates.collisionRadius)
+        );
+      }
+      simulation.alpha(0.5).restart();
+    },
+    []
+  );
+  const restartSimulation = useCallback(() => {
+    const simulation = simulationRef.current;
+    if (!simulation) return;
+    simulation.alpha(1).restart();
+  }, []);
+  return {
+    onNodeDragStart,
+    onNodeDrag,
+    onNodeDragStop,
+    updateForceConfig,
+    restartSimulation
+  };
+}
+
+// src/components/ObservablesGraph.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var nodeTypes = {
+  observable: ObservableNode
+};
+var edgeTypes = {
+  floating: FloatingEdge
+};
+function createObservableNodes(investigation, rootObservableIds) {
+  const graph = getObservableGraph(investigation);
+  return graph.nodes.map((graphNode, index) => {
+    const isRoot = rootObservableIds.has(graphNode.id);
+    const shape = getObservableShape(graphNode.type, isRoot);
+    const nodeData = {
+      label: truncateLabel(graphNode.value, 18),
+      fullValue: graphNode.value,
+      observableType: graphNode.type,
+      level: graphNode.level,
+      score: graphNode.score,
+      emoji: getObservableEmoji(graphNode.type),
+      shape,
+      isRoot,
+      whitelisted: graphNode.whitelisted,
+      internal: graphNode.internal
+    };
+    const angle = index / graph.nodes.length * 2 * Math.PI;
+    const radius = isRoot ? 0 : 150;
+    return {
+      id: graphNode.id,
+      type: "observable",
+      position: {
+        x: Math.cos(angle) * radius,
+        y: Math.sin(angle) * radius
+      },
+      data: nodeData
+    };
+  });
+}
+function createObservableEdges(investigation) {
+  const graph = getObservableGraph(investigation);
+  return graph.edges.map((graphEdge, index) => {
+    const edgeData = {
+      relationshipType: graphEdge.type,
+      bidirectional: graphEdge.direction === "bidirectional"
+    };
+    return {
+      id: `edge-${graphEdge.source}-${graphEdge.target}-${index}`,
+      source: graphEdge.source,
+      target: graphEdge.target,
+      type: "floating",
+      data: edgeData,
+      style: { stroke: "#94a3b8", strokeWidth: 1.5 }
+    };
+  });
+}
+var ForceControls = ({ config, onChange, onRestart }) => {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: 10,
+        right: 10,
+        background: "white",
+        padding: 12,
+        borderRadius: 8,
+        boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+        fontSize: 12,
+        fontFamily: "system-ui, sans-serif",
+        zIndex: 10,
+        minWidth: 160
+      },
+      children: [
+        /* @__PURE__ */ jsx3("div", { style: { fontWeight: 600, marginBottom: 8 }, children: "Force Layout" }),
+        /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 8 }, children: [
+          /* @__PURE__ */ jsxs2("label", { style: { display: "block", marginBottom: 2 }, children: [
+            "Repulsion: ",
+            config.chargeStrength
+          ] }),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              type: "range",
+              min: "-500",
+              max: "-50",
+              value: config.chargeStrength,
+              onChange: (e) => onChange({ chargeStrength: Number(e.target.value) }),
+              style: { width: "100%" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 8 }, children: [
+          /* @__PURE__ */ jsxs2("label", { style: { display: "block", marginBottom: 2 }, children: [
+            "Link Distance: ",
+            config.linkDistance
+          ] }),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              type: "range",
+              min: "30",
+              max: "200",
+              value: config.linkDistance,
+              onChange: (e) => onChange({ linkDistance: Number(e.target.value) }),
+              style: { width: "100%" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 8 }, children: [
+          /* @__PURE__ */ jsxs2("label", { style: { display: "block", marginBottom: 2 }, children: [
+            "Collision: ",
+            config.collisionRadius
+          ] }),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              type: "range",
+              min: "10",
+              max: "80",
+              value: config.collisionRadius,
+              onChange: (e) => onChange({ collisionRadius: Number(e.target.value) }),
+              style: { width: "100%" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: onRestart,
+            style: {
+              width: "100%",
+              padding: "6px 12px",
+              border: "none",
+              borderRadius: 4,
+              background: "#3b82f6",
+              color: "white",
+              cursor: "pointer",
+              fontSize: 12
+            },
+            children: "Restart Simulation"
+          }
+        )
+      ]
+    }
+  );
+};
+var ObservablesGraphInner = ({
+  initialNodes,
+  initialEdges,
+  primaryRootId,
+  height,
+  width,
+  forceConfig: initialForceConfig = {},
+  onNodeClick,
+  onNodeDoubleClick,
+  className,
+  showControls = true
+}) => {
+  const [forceConfig, setForceConfig] = useState({
+    ...DEFAULT_FORCE_CONFIG,
+    ...initialForceConfig
+  });
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  React3.useEffect(() => {
+    setNodes(initialNodes);
+    setEdges(initialEdges);
+  }, [initialNodes, initialEdges, setNodes, setEdges]);
+  const {
+    onNodeDragStart,
+    onNodeDrag,
+    onNodeDragStop,
+    updateForceConfig,
+    restartSimulation
+  } = useForceLayout(forceConfig, primaryRootId);
+  const handleNodeClick = useCallback2(
+    (_, node) => {
+      onNodeClick?.(node.id);
+    },
+    [onNodeClick]
+  );
+  const handleNodeDoubleClick = useCallback2(
+    (_, node) => {
+      onNodeDoubleClick?.(node.id);
+    },
+    [onNodeDoubleClick]
+  );
+  const handleConfigChange = useCallback2(
+    (updates) => {
+      setForceConfig((prev) => ({ ...prev, ...updates }));
+      updateForceConfig(updates);
+    },
+    [updateForceConfig]
+  );
+  const miniMapNodeColor = useCallback2((node) => {
+    const data = node.data;
+    return getLevelColor(data.level);
+  }, []);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className,
+      style: {
+        width,
+        height,
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsxs2(
+          ReactFlow,
+          {
+            nodes,
+            edges,
+            onNodesChange,
+            onEdgesChange,
+            onNodeClick: handleNodeClick,
+            onNodeDoubleClick: handleNodeDoubleClick,
+            onNodeDragStart,
+            onNodeDrag,
+            onNodeDragStop,
+            nodeTypes,
+            edgeTypes,
+            connectionMode: ConnectionMode.Loose,
+            fitView: true,
+            fitViewOptions: { padding: 0.3 },
+            minZoom: 0.1,
+            maxZoom: 2,
+            proOptions: { hideAttribution: true },
+            children: [
+              /* @__PURE__ */ jsx3(Background, {}),
+              /* @__PURE__ */ jsx3(Controls, {}),
+              /* @__PURE__ */ jsx3(MiniMap, { nodeColor: miniMapNodeColor, zoomable: true, pannable: true })
+            ]
+          }
+        ),
+        showControls && /* @__PURE__ */ jsx3(
+          ForceControls,
+          {
+            config: forceConfig,
+            onChange: handleConfigChange,
+            onRestart: restartSimulation
+          }
+        )
+      ]
+    }
+  );
+};
+var ObservablesGraph = (props) => {
+  const { investigation } = props;
+  const rootObservables = useMemo2(() => {
+    const roots = findRootObservables(investigation);
+    return new Set(roots.map((r) => r.key));
+  }, [investigation]);
+  const primaryRootId = useMemo2(() => {
+    const roots = findRootObservables(investigation);
+    return roots.length > 0 ? roots[0].key : void 0;
+  }, [investigation]);
+  const { initialNodes, initialEdges } = useMemo2(() => {
+    const nodes = createObservableNodes(investigation, rootObservables);
+    const edges = createObservableEdges(investigation);
+    return { initialNodes: nodes, initialEdges: edges };
+  }, [investigation, rootObservables]);
+  return /* @__PURE__ */ jsx3(ReactFlowProvider, { children: /* @__PURE__ */ jsx3(
+    ObservablesGraphInner,
+    {
+      ...props,
+      initialNodes,
+      initialEdges,
+      primaryRootId
+    }
+  ) });
+};
+
+// src/components/InvestigationGraph.tsx
+import React5, { useMemo as useMemo4, useCallback as useCallback3 } from "react";
+import {
+  ReactFlow as ReactFlow2,
+  Background as Background2,
+  Controls as Controls2,
+  MiniMap as MiniMap2,
+  useNodesState as useNodesState2,
+  useEdgesState as useEdgesState2
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { findRootObservables as findRootObservables2 } from "@cyvest/cyvest-js";
+
+// src/components/InvestigationNode.tsx
+import { memo as memo3 } from "react";
+import { Handle as Handle2, Position as Position2 } from "@xyflow/react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function InvestigationNodeComponent({
+  data,
+  selected
+}) {
+  const nodeData = data;
+  const {
+    label,
+    emoji,
+    nodeType,
+    level,
+    description
+  } = nodeData;
+  const borderColor = getLevelColor(level);
+  const backgroundColor = getLevelBackgroundColor(level);
+  const getNodeStyle = () => {
+    switch (nodeType) {
+      case "root":
+        return {
+          minWidth: 120,
+          padding: "8px 16px",
+          borderRadius: 8,
+          fontWeight: 600
+        };
+      case "check":
+        return {
+          minWidth: 100,
+          padding: "6px 12px",
+          borderRadius: 4,
+          fontWeight: 400
+        };
+      case "container":
+        return {
+          minWidth: 100,
+          padding: "6px 12px",
+          borderRadius: 12,
+          fontWeight: 400
+        };
+      default:
+        return {
+          minWidth: 80,
+          padding: "6px 12px",
+          borderRadius: 4,
+          fontWeight: 400
+        };
+    }
+  };
+  const style = getNodeStyle();
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: "investigation-node",
+      style: {
+        ...style,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        backgroundColor,
+        border: `${selected ? 3 : 2}px solid ${borderColor}`,
+        cursor: "pointer",
+        fontFamily: "system-ui, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 6
+            },
+            children: [
+              /* @__PURE__ */ jsx4("span", { style: { fontSize: 14 }, children: emoji }),
+              /* @__PURE__ */ jsx4(
+                "span",
+                {
+                  style: {
+                    fontSize: 12,
+                    fontWeight: style.fontWeight,
+                    maxWidth: 150,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  title: label,
+                  children: label
+                }
+              )
+            ]
+          }
+        ),
+        description && /* @__PURE__ */ jsx4(
+          "div",
+          {
+            style: {
+              marginTop: 4,
+              fontSize: 10,
+              color: "#6b7280",
+              maxWidth: 140,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            title: description,
+            children: description
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          Handle2,
+          {
+            type: "target",
+            position: Position2.Left,
+            style: {
+              width: 8,
+              height: 8,
+              background: borderColor
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          Handle2,
+          {
+            type: "source",
+            position: Position2.Right,
+            style: {
+              width: 8,
+              height: 8,
+              background: borderColor
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+var InvestigationNode = memo3(InvestigationNodeComponent);
+
+// src/hooks/useDagreLayout.ts
+import { useMemo as useMemo3 } from "react";
+import Dagre from "@dagrejs/dagre";
+var DEFAULT_OPTIONS = {
+  direction: "LR",
+  // Horizontal layout by default
+  nodeSpacing: 50,
+  rankSpacing: 100
+};
+function computeDagreLayout(nodes, edges, options = {}) {
+  if (nodes.length === 0) {
+    return { nodes, edges };
+  }
+  const opts = { ...DEFAULT_OPTIONS, ...options };
+  const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+  g.setGraph({
+    rankdir: opts.direction,
+    nodesep: opts.nodeSpacing,
+    ranksep: opts.rankSpacing,
+    marginx: 20,
+    marginy: 20
+  });
+  for (const node of nodes) {
+    const width = node.measured?.width ?? 150;
+    const height = node.measured?.height ?? 50;
+    g.setNode(node.id, { width, height });
+  }
+  for (const edge of edges) {
+    g.setEdge(edge.source, edge.target);
+  }
+  Dagre.layout(g);
+  const positionedNodes = nodes.map((node) => {
+    const dagNode = g.node(node.id);
+    const width = node.measured?.width ?? 150;
+    const height = node.measured?.height ?? 50;
+    return {
+      ...node,
+      position: {
+        x: dagNode.x - width / 2,
+        y: dagNode.y - height / 2
+      }
+    };
+  });
+  return { nodes: positionedNodes, edges };
+}
+
+// src/components/InvestigationGraph.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var nodeTypes2 = {
+  investigation: InvestigationNode
+};
+function flattenContainers(containers) {
+  const result = [];
+  for (const container of Object.values(containers)) {
+    result.push(container);
+    if (container.sub_containers) {
+      result.push(...flattenContainers(container.sub_containers));
+    }
+  }
+  return result;
+}
+function createInvestigationGraph(investigation) {
+  const nodes = [];
+  const edges = [];
+  const roots = findRootObservables2(investigation);
+  const primaryRoot = roots.length > 0 ? roots[0] : null;
+  const rootKey = primaryRoot?.key ?? "investigation-root";
+  const rootValue = primaryRoot?.value ?? "Investigation";
+  const rootLevel = primaryRoot?.level ?? investigation.level;
+  const rootNodeData = {
+    label: truncateLabel(rootValue, 24),
+    nodeType: "root",
+    level: rootLevel,
+    score: primaryRoot?.score ?? investigation.score,
+    emoji: getInvestigationNodeEmoji("root")
+  };
+  nodes.push({
+    id: rootKey,
+    type: "investigation",
+    position: { x: 0, y: 0 },
+    data: rootNodeData
+  });
+  const allChecks = [];
+  for (const checksForKey of Object.values(investigation.checks)) {
+    allChecks.push(...checksForKey);
+  }
+  const seenCheckIds = /* @__PURE__ */ new Set();
+  for (const check of allChecks) {
+    if (seenCheckIds.has(check.key)) continue;
+    seenCheckIds.add(check.key);
+    const checkNodeData = {
+      label: truncateLabel(check.check_id, 20),
+      nodeType: "check",
+      level: check.level,
+      score: check.score,
+      description: truncateLabel(check.description, 30),
+      emoji: getInvestigationNodeEmoji("check")
+    };
+    nodes.push({
+      id: `check-${check.key}`,
+      type: "investigation",
+      position: { x: 0, y: 0 },
+      data: checkNodeData
+    });
+    edges.push({
+      id: `edge-root-${check.key}`,
+      source: rootKey,
+      target: `check-${check.key}`,
+      type: "default"
+    });
+  }
+  const allContainers = flattenContainers(investigation.containers);
+  for (const container of allContainers) {
+    const containerNodeData = {
+      label: truncateLabel(container.path.split("/").pop() ?? container.path, 20),
+      nodeType: "container",
+      level: container.aggregated_level,
+      score: container.aggregated_score,
+      path: container.path,
+      emoji: getInvestigationNodeEmoji("container")
+    };
+    nodes.push({
+      id: `container-${container.key}`,
+      type: "investigation",
+      position: { x: 0, y: 0 },
+      data: containerNodeData
+    });
+    edges.push({
+      id: `edge-root-container-${container.key}`,
+      source: rootKey,
+      target: `container-${container.key}`,
+      type: "default"
+    });
+    for (const checkKey of container.checks) {
+      if (seenCheckIds.has(checkKey)) {
+        edges.push({
+          id: `edge-container-check-${container.key}-${checkKey}`,
+          source: `container-${container.key}`,
+          target: `check-${checkKey}`,
+          type: "default",
+          style: { strokeDasharray: "5,5" }
+        });
+      }
+    }
+  }
+  return { nodes, edges };
+}
+var InvestigationGraph = ({
+  investigation,
+  height = 500,
+  width = "100%",
+  onNodeClick,
+  className
+}) => {
+  const { initialNodes, initialEdges } = useMemo4(() => {
+    const { nodes: nodes2, edges: edges2 } = createInvestigationGraph(investigation);
+    return { initialNodes: nodes2, initialEdges: edges2 };
+  }, [investigation]);
+  const { nodes: layoutNodes, edges: layoutEdges } = useMemo4(() => {
+    return computeDagreLayout(initialNodes, initialEdges, {
+      direction: "LR",
+      nodeSpacing: 30,
+      rankSpacing: 120
+    });
+  }, [initialNodes, initialEdges]);
+  const [nodes, setNodes, onNodesChange] = useNodesState2(layoutNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState2(layoutEdges);
+  React5.useEffect(() => {
+    setNodes(layoutNodes);
+    setEdges(layoutEdges);
+  }, [layoutNodes, layoutEdges, setNodes, setEdges]);
+  const handleNodeClick = useCallback3(
+    (_, node) => {
+      const data = node.data;
+      onNodeClick?.(node.id, data.nodeType);
+    },
+    [onNodeClick]
+  );
+  const miniMapNodeColor = useCallback3((node) => {
+    const data = node.data;
+    return getLevelColor(data.level);
+  }, []);
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className,
+      style: {
+        width,
+        height,
+        position: "relative"
+      },
+      children: /* @__PURE__ */ jsxs4(
+        ReactFlow2,
+        {
+          nodes,
+          edges,
+          onNodesChange,
+          onEdgesChange,
+          onNodeClick: handleNodeClick,
+          nodeTypes: nodeTypes2,
+          fitView: true,
+          fitViewOptions: { padding: 0.2 },
+          minZoom: 0.1,
+          maxZoom: 2,
+          proOptions: { hideAttribution: true },
+          children: [
+            /* @__PURE__ */ jsx5(Background2, {}),
+            /* @__PURE__ */ jsx5(Controls2, {}),
+            /* @__PURE__ */ jsx5(MiniMap2, { nodeColor: miniMapNodeColor, zoomable: true, pannable: true })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/CyvestGraph.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var ViewToggle = ({ currentView, onChange }) => {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: 10,
+        left: 10,
+        display: "flex",
+        gap: 4,
+        background: "white",
+        padding: 4,
+        borderRadius: 8,
+        boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+        zIndex: 10,
+        fontFamily: "system-ui, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            onClick: () => onChange("observables"),
+            style: {
+              padding: "6px 12px",
+              border: "none",
+              borderRadius: 4,
+              cursor: "pointer",
+              fontSize: 12,
+              fontWeight: currentView === "observables" ? 600 : 400,
+              background: currentView === "observables" ? "#3b82f6" : "#f3f4f6",
+              color: currentView === "observables" ? "white" : "#374151"
+            },
+            children: "Observables"
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            onClick: () => onChange("investigation"),
+            style: {
+              padding: "6px 12px",
+              border: "none",
+              borderRadius: 4,
+              cursor: "pointer",
+              fontSize: 12,
+              fontWeight: currentView === "investigation" ? 600 : 400,
+              background: currentView === "investigation" ? "#3b82f6" : "#f3f4f6",
+              color: currentView === "investigation" ? "white" : "#374151"
+            },
+            children: "Investigation"
+          }
+        )
+      ]
+    }
+  );
+};
+var CyvestGraph = ({
+  investigation,
+  height = 500,
+  width = "100%",
+  initialView = "observables",
+  onNodeClick,
+  className,
+  showViewToggle = true
+}) => {
+  const [view, setView] = useState2(initialView);
+  const handleNodeClick = useCallback4(
+    (nodeId, _nodeType) => {
+      onNodeClick?.(nodeId);
+    },
+    [onNodeClick]
+  );
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className,
+      style: {
+        width,
+        height,
+        position: "relative"
+      },
+      children: [
+        showViewToggle && /* @__PURE__ */ jsx6(ViewToggle, { currentView: view, onChange: setView }),
+        view === "observables" ? /* @__PURE__ */ jsx6(
+          ObservablesGraph,
+          {
+            investigation,
+            height: "100%",
+            width: "100%",
+            onNodeClick: handleNodeClick,
+            showControls: true
+          }
+        ) : /* @__PURE__ */ jsx6(
+          InvestigationGraph,
+          {
+            investigation,
+            height: "100%",
+            width: "100%",
+            onNodeClick: handleNodeClick
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  CyvestGraph
+};