@cyvest/cyvest-vis 4.0.0 → 4.2.0

package/dist/index.mjs

@@ -1,8 +1,8 @@
 // src/components/CyvestGraph.tsx
-import { useState as useState2, useCallback as useCallback4 } from "react";
+import { useState as useState2, useCallback as useCallback4, useMemo as useMemo8 } from "react";
 
 // src/components/ObservablesGraph.tsx
-import React3, { useMemo as useMemo2, useCallback as useCallback2, useState } from "react";
+import React3, { useMemo as useMemo4, useCallback as useCallback2, useState, useRef as useRef2 } from "react";
 import {
   ReactFlow,
   ReactFlowProvider,
@@ -11,7 +11,9 @@ import {
   MiniMap,
   useNodesState,
   useEdgesState,
-  ConnectionMode
+  ConnectionMode,
+  BackgroundVariant,
+  Panel
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import { getObservableGraph } from "@cyvest/cyvest-js";
@@ -21,77 +23,16 @@ var DEFAULT_FORCE_CONFIG = {
   chargeStrength: -200,
   linkDistance: 80,
   centerStrength: 0.05,
-  collisionRadius: 40,
+  collisionRadius: 45,
   iterations: 300
 };
 
 // src/components/ObservableNode.tsx
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import { Handle, Position } from "@xyflow/react";
 
 // src/utils/observables.ts
 import { getColorForLevel } from "@cyvest/cyvest-js";
-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;
@@ -118,178 +59,761 @@ function lightenHexColor(hex, amount) {
   return `#${toHex(mix(r))}${toHex(mix(g))}${toHex(mix(b))}`;
 }
 function getLevelBackgroundColor(level) {
-  return lightenHexColor(getLevelColor(level), 0.85);
+  return lightenHexColor(getLevelColor(level), 0.88);
 }
-var INVESTIGATION_NODE_EMOJI = {
-  root: "\u{1F3AF}",
-  check: "\u2705",
-  container: "\u{1F4E6}"
+
+// src/components/Icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultSize = 16;
+var defaultColor = "currentColor";
+var GlobeIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("path", { d: "M2 12h20" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
+    ]
+  }
+);
+var DomainIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+      /* @__PURE__ */ jsx("polyline", { points: "9,22 9,12 15,12 15,22" })
+    ]
+  }
+);
+var LinkIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+      /* @__PURE__ */ jsx("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+    ]
+  }
+);
+var MailIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
+    ]
+  }
+);
+var EnvelopeIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }),
+      /* @__PURE__ */ jsx("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })
+    ]
+  }
+);
+var FileIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+      /* @__PURE__ */ jsx("polyline", { points: "14,2 14,8 20,8" })
+    ]
+  }
+);
+var HashIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("line", { x1: "4", y1: "9", x2: "20", y2: "9" }),
+      /* @__PURE__ */ jsx("line", { x1: "4", y1: "15", x2: "20", y2: "15" }),
+      /* @__PURE__ */ jsx("line", { x1: "10", y1: "3", x2: "8", y2: "21" }),
+      /* @__PURE__ */ jsx("line", { x1: "16", y1: "3", x2: "14", y2: "21" })
+    ]
+  }
+);
+var UserIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "5" }),
+      /* @__PURE__ */ jsx("path", { d: "M20 21a8 8 0 1 0-16 0" })
+    ]
+  }
+);
+var IdCardIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2" }),
+      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "12", r: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M14 10h4" }),
+      /* @__PURE__ */ jsx("path", { d: "M14 14h4" })
+    ]
+  }
+);
+var GearIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+      /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
+    ]
+  }
+);
+var AppIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
+      /* @__PURE__ */ jsx("path", { d: "M3 9h18" })
+    ]
+  }
+);
+var RegistryIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: /* @__PURE__ */ jsx("path", { d: "m21 2-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0 3 3L22 7l-3-3m-3.5 3.5L19 4" })
+  }
+);
+var ThreatActorIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "7" }),
+      /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "1.5", fill: color }),
+      /* @__PURE__ */ jsx("circle", { cx: "15", cy: "9", r: "1.5", fill: color }),
+      /* @__PURE__ */ jsx("path", { d: "M9 17v-2" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 17v-2" }),
+      /* @__PURE__ */ jsx("path", { d: "M15 17v-2" })
+    ]
+  }
+);
+var BugIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "m8 2 1.88 1.88" }),
+      /* @__PURE__ */ jsx("path", { d: "M14.12 3.88 16 2" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 20v-9" }),
+      /* @__PURE__ */ jsx("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }),
+      /* @__PURE__ */ jsx("path", { d: "M6 13H2" }),
+      /* @__PURE__ */ jsx("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }),
+      /* @__PURE__ */ jsx("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }),
+      /* @__PURE__ */ jsx("path", { d: "M22 13h-4" }),
+      /* @__PURE__ */ jsx("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })
+    ]
+  }
+);
+var SwordIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("polyline", { points: "14.5,17.5 3,6 3,3 6,3 17.5,14.5" }),
+      /* @__PURE__ */ jsx("line", { x1: "13", y1: "19", x2: "19", y2: "13" }),
+      /* @__PURE__ */ jsx("line", { x1: "16", y1: "16", x2: "20", y2: "20" }),
+      /* @__PURE__ */ jsx("line", { x1: "19", y1: "21", x2: "21", y2: "19" })
+    ]
+  }
+);
+var TargetIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2" })
+    ]
+  }
+);
+var AlertIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+    ]
+  }
+);
+var FlaskIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2" }),
+      /* @__PURE__ */ jsx("path", { d: "M8.5 2h7" }),
+      /* @__PURE__ */ jsx("path", { d: "M7 16h10" })
+    ]
+  }
+);
+var CertificateIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" }),
+      /* @__PURE__ */ jsx("path", { d: "M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6Z" }),
+      /* @__PURE__ */ jsx("path", { d: "m9.5 15.5-3 3v3l3.5-1.5 3.5 1.5v-3l-3-3" })
+    ]
+  }
+);
+var WifiIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M5 12.55a11 11 0 0 1 14.08 0" }),
+      /* @__PURE__ */ jsx("path", { d: "M1.42 9a16 16 0 0 1 21.16 0" }),
+      /* @__PURE__ */ jsx("path", { d: "M8.53 16.11a6 6 0 0 1 6.95 0" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "20", x2: "12.01", y2: "20" })
+    ]
+  }
+);
+var WorldIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }),
+      /* @__PURE__ */ jsx("path", { d: "M2 12h20" })
+    ]
+  }
+);
+var QuestionIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+    ]
+  }
+);
+var CheckIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+  }
+);
+var BoxIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" }),
+      /* @__PURE__ */ jsx("path", { d: "m3.3 7 8.7 5 8.7-5" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 22V12" })
+    ]
+  }
+);
+var CrosshairIcon = ({
+  size = defaultSize,
+  color = defaultColor,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("line", { x1: "22", y1: "12", x2: "18", y2: "12" }),
+      /* @__PURE__ */ jsx("line", { x1: "6", y1: "12", x2: "2", y2: "12" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "6", x2: "12", y2: "2" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "22", x2: "12", y2: "18" })
+    ]
+  }
+);
+var OBSERVABLE_ICON_MAP = {
+  // Network
+  "ipv4-addr": GlobeIcon,
+  "ipv6-addr": GlobeIcon,
+  "domain-name": DomainIcon,
+  url: LinkIcon,
+  "autonomous-system": WorldIcon,
+  "mac-addr": WifiIcon,
+  // Email
+  "email-addr": MailIcon,
+  "email-message": EnvelopeIcon,
+  // File
+  file: FileIcon,
+  "file-hash": HashIcon,
+  "file:hash:md5": HashIcon,
+  "file:hash:sha1": HashIcon,
+  "file:hash:sha256": HashIcon,
+  // User/Identity
+  user: UserIcon,
+  "user-account": UserIcon,
+  identity: IdCardIcon,
+  // Process/System
+  process: GearIcon,
+  software: AppIcon,
+  "windows-registry-key": RegistryIcon,
+  // Threat Intelligence
+  "threat-actor": ThreatActorIcon,
+  malware: BugIcon,
+  "attack-pattern": SwordIcon,
+  campaign: TargetIcon,
+  indicator: AlertIcon,
+  // Artifacts
+  artifact: FlaskIcon,
+  certificate: CertificateIcon,
+  "x509-certificate": CertificateIcon,
+  // Default
+  unknown: QuestionIcon
+};
+var INVESTIGATION_ICON_MAP = {
+  root: CrosshairIcon,
+  check: CheckIcon,
+  container: BoxIcon
 };
-function getInvestigationNodeEmoji(nodeType) {
-  return INVESTIGATION_NODE_EMOJI[nodeType] ?? "\u2753";
+function getObservableIcon(observableType) {
+  const normalized = observableType.toLowerCase().trim();
+  return OBSERVABLE_ICON_MAP[normalized] ?? OBSERVABLE_ICON_MAP.unknown;
+}
+function getInvestigationIcon(nodeType) {
+  return INVESTIGATION_ICON_MAP[nodeType] ?? QuestionIcon;
 }
 
 // src/components/ObservableNode.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var NODE_SIZE = 28;
-var ROOT_NODE_SIZE = 36;
-function ObservableNodeComponent({
-  data,
-  selected
-}) {
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var NODE_SIZE = 40;
+var ROOT_NODE_WIDTH = 56;
+var ROOT_NODE_HEIGHT = 40;
+var ICON_SIZE = 18;
+var ROOT_ICON_SIZE = 20;
+var nodeStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    cursor: "grab",
+    transition: "transform 0.1s ease-out"
+  },
+  shapeWrapper: {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  label: {
+    marginTop: 4,
+    fontSize: 10,
+    fontWeight: 500,
+    maxWidth: 80,
+    textAlign: "center",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontFamily: "'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    letterSpacing: "-0.01em",
+    lineHeight: 1.2
+  },
+  handle: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 1,
+    height: 1,
+    background: "transparent",
+    border: "none",
+    opacity: 0,
+    pointerEvents: "none"
+  }
+};
+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 { label, level, isRoot, whitelisted, fullValue, observableType } = nodeData;
   const borderColor = getLevelColor(level);
   const backgroundColor = getLevelBackgroundColor(level);
-  const getShapeStyle = () => {
-    const baseStyle = {
-      width: size,
-      height: size,
+  const IconComponent = useMemo(() => {
+    if (isRoot) return CrosshairIcon;
+    return getObservableIcon(observableType);
+  }, [isRoot, observableType]);
+  const shapeStyle = useMemo(() => {
+    if (isRoot) {
+      return {
+        width: ROOT_NODE_WIDTH,
+        height: ROOT_NODE_HEIGHT,
+        borderRadius: ROOT_NODE_HEIGHT / 2,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor,
+        border: `2.5px solid ${borderColor}`,
+        boxShadow: selected ? `0 0 0 3px ${borderColor}40, 0 4px 12px rgba(0,0,0,0.15)` : "0 2px 8px rgba(0,0,0,0.08)",
+        opacity: whitelisted ? 0.5 : 1,
+        transition: "box-shadow 0.15s ease-out, transform 0.1s ease-out"
+      };
+    }
+    return {
+      width: NODE_SIZE,
+      height: NODE_SIZE,
+      borderRadius: "50%",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       backgroundColor,
-      border: `${selected ? 3 : 2}px solid ${borderColor}`,
+      border: `2px solid ${borderColor}`,
+      boxShadow: selected ? `0 0 0 3px ${borderColor}40, 0 4px 12px rgba(0,0,0,0.15)` : "0 2px 6px rgba(0,0,0,0.08)",
       opacity: whitelisted ? 0.5 : 1,
-      fontSize: isRoot ? 14 : 12
+      transition: "box-shadow 0.15s ease-out, transform 0.1s ease-out"
     };
-    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
-          }
-        )
-      ]
-    }
+  }, [isRoot, backgroundColor, borderColor, selected, whitelisted]);
+  const labelStyle = useMemo(
+    () => ({
+      ...nodeStyles.label,
+      color: whitelisted ? "#9ca3af" : "#374151"
+    }),
+    [whitelisted]
   );
+  return /* @__PURE__ */ jsxs2("div", { className: "observable-node", style: nodeStyles.container, children: [
+    /* @__PURE__ */ jsxs2("div", { style: nodeStyles.shapeWrapper, children: [
+      /* @__PURE__ */ jsx2("div", { style: shapeStyle, children: /* @__PURE__ */ jsx2(
+        IconComponent,
+        {
+          size: isRoot ? ROOT_ICON_SIZE : ICON_SIZE,
+          color: borderColor
+        }
+      ) }),
+      /* @__PURE__ */ jsx2(Handle, { type: "source", position: Position.Right, style: nodeStyles.handle }),
+      /* @__PURE__ */ jsx2(Handle, { type: "target", position: Position.Left, style: nodeStyles.handle })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { style: labelStyle, 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";
+import { memo as memo2, useMemo as useMemo2 } from "react";
+import { BaseEdge, getBezierPath } from "@xyflow/react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function getControlOffset(sourceX, sourceY, targetX, targetY) {
+  const dx = targetX - sourceX;
+  const dy = targetY - sourceY;
+  const distance = Math.sqrt(dx * dx + dy * dy);
+  return Math.min(Math.max(distance * 0.15, 20), 60);
+}
 function FloatingEdgeComponent({
   id,
   sourceX,
@@ -297,24 +821,35 @@ function FloatingEdgeComponent({
   targetX,
   targetY,
   style,
-  markerEnd
+  markerEnd,
+  selected
 }) {
-  const [edgePath] = getStraightPath({
+  const offset = useMemo2(
+    () => getControlOffset(sourceX, sourceY, targetX, targetY),
+    [sourceX, sourceY, targetX, targetY]
+  );
+  const [edgePath] = getBezierPath({
     sourceX,
     sourceY,
     targetX,
-    targetY
+    targetY,
+    curvature: 0.15
   });
-  return /* @__PURE__ */ jsx2(
+  const edgeStyle = useMemo2(
+    () => ({
+      strokeWidth: selected ? 2.5 : 1.5,
+      stroke: selected ? "#3b82f6" : "#94a3b8",
+      transition: "stroke 0.15s ease, stroke-width 0.15s ease",
+      ...style
+    }),
+    [selected, style]
+  );
+  return /* @__PURE__ */ jsx3(
     BaseEdge,
     {
       id,
       path: edgePath,
-      style: {
-        strokeWidth: 1.5,
-        stroke: "#94a3b8",
-        ...style
-      },
+      style: edgeStyle,
       markerEnd
     }
   );
@@ -322,7 +857,7 @@ function FloatingEdgeComponent({
 var FloatingEdge = memo2(FloatingEdgeComponent);
 
 // src/hooks/useForceLayout.ts
-import { useEffect, useRef, useCallback, useMemo } from "react";
+import { useEffect, useRef, useCallback, useMemo as useMemo3 } from "react";
 import {
   forceSimulation,
   forceLink,
@@ -337,31 +872,42 @@ import {
   useNodesInitialized,
   useStore
 } from "@xyflow/react";
-var nodeCountSelector = (state) => state.nodeLookup.size;
+var nodeIdsSelector = (state) => {
+  const ids = Array.from(state.nodeLookup.keys()).sort();
+  return ids.join(",");
+};
 function useForceLayout(config = {}, rootNodeId) {
   const { getNodes, getEdges, setNodes } = useReactFlow();
   const nodesInitialized = useNodesInitialized();
-  const nodeCount = useStore(nodeCountSelector);
-  const forceConfig = useMemo(
+  const nodeIds = useStore(nodeIdsSelector);
+  const forceConfig = useMemo3(
     () => ({ ...DEFAULT_FORCE_CONFIG, ...config }),
     [config]
   );
   const simulationRef = useRef(null);
-  const draggingNodeRef = useRef(null);
+  const draggingRef = useRef({ nodeId: null, active: false });
+  const nodePositionsRef = useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const rafRef = useRef(null);
   useEffect(() => {
-    if (!nodesInitialized || nodeCount === 0) {
+    if (!nodesInitialized || !nodeIds) {
       return;
     }
     const nodes = getNodes();
     const edges = getEdges();
+    if (nodes.length === 0) {
+      return;
+    }
     const simNodes = nodes.map((node) => {
       const existingNode = simulationRef.current?.nodes().find((n) => n.id === node.id);
+      const x = existingNode?.x ?? nodePositionsRef.current.get(node.id)?.x ?? node.position.x ?? Math.random() * 500 - 250;
+      const y = existingNode?.y ?? nodePositionsRef.current.get(node.id)?.y ?? node.position.y ?? Math.random() * 500 - 250;
       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
+        x,
+        y,
+        // Preserve fixed positions for dragged nodes or root
         fx: existingNode?.fx ?? null,
         fy: existingNode?.fy ?? null
       };
@@ -382,30 +928,33 @@ function useForceLayout(config = {}, rootNodeId) {
     if (simulationRef.current) {
       simulationRef.current.stop();
     }
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
     const simulation = forceSimulation(simNodes).force(
       "link",
-      forceLink(simLinks).id((d) => d.id).distance(forceConfig.linkDistance).strength(0.5)
+      forceLink(simLinks).id((d) => d.id).distance(forceConfig.linkDistance).strength(0.4)
     ).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", () => {
+    ).force("center", forceCenter(0, 0).strength(forceConfig.centerStrength)).force("collision", forceCollide(forceConfig.collisionRadius)).force("x", forceX(0).strength(8e-3)).force("y", forceY(0).strength(8e-3)).alphaDecay(0.02).velocityDecay(0.35);
+    const updateNodes = () => {
+      if (draggingRef.current.active) {
+        rafRef.current = requestAnimationFrame(updateNodes);
+        return;
+      }
+      const simNodes2 = simulation.nodes();
+      for (const simNode of simNodes2) {
+        nodePositionsRef.current.set(simNode.id, { x: simNode.x, y: simNode.y });
+      }
       setNodes(
         (currentNodes) => currentNodes.map((node) => {
-          const simNode = simulation.nodes().find((n) => n.id === node.id);
+          const simNode = simNodes2.find((n) => n.id === node.id);
           if (!simNode) return node;
+          const dx = Math.abs(node.position.x - simNode.x);
+          const dy = Math.abs(node.position.y - simNode.y);
+          if (dx < 0.1 && dy < 0.1) return node;
           return {
             ...node,
             position: {
@@ -415,14 +964,26 @@ function useForceLayout(config = {}, rootNodeId) {
           };
         })
       );
+      if (simulation.alpha() > 1e-3) {
+        rafRef.current = requestAnimationFrame(updateNodes);
+      }
+    };
+    simulation.on("tick", () => {
+      if (rafRef.current === null && simulation.alpha() > 1e-3) {
+        rafRef.current = requestAnimationFrame(updateNodes);
+      }
     });
     simulationRef.current = simulation;
     return () => {
       simulation.stop();
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
     };
   }, [
     nodesInitialized,
-    nodeCount,
+    nodeIds,
     getNodes,
     getEdges,
     setNodes,
@@ -433,33 +994,34 @@ function useForceLayout(config = {}, rootNodeId) {
     (_, 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;
+      draggingRef.current = { nodeId: node.id, active: true };
       const simNode = simulation.nodes().find((n) => n.id === node.id);
       if (simNode) {
         simNode.fx = node.position.x;
         simNode.fy = node.position.y;
       }
+      simulation.alphaTarget(0.1).restart();
     },
     []
   );
+  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;
+      nodePositionsRef.current.set(node.id, {
+        x: node.position.x,
+        y: node.position.y
+      });
+    }
+  }, []);
   const onNodeDragStop = useCallback(
     (_, node) => {
       const simulation = simulationRef.current;
+      draggingRef.current = { nodeId: null, active: false };
       if (!simulation) return;
-      draggingNodeRef.current = null;
       simulation.alphaTarget(0);
       if (node.id !== rootNodeId) {
         const simNode = simulation.nodes().find((n) => n.id === node.id);
@@ -468,6 +1030,11 @@ function useForceLayout(config = {}, rootNodeId) {
           simNode.fy = null;
         }
       }
+      setTimeout(() => {
+        if (simulationRef.current && !draggingRef.current.active) {
+          simulationRef.current.alpha(0.1).restart();
+        }
+      }, 50);
     },
     [rootNodeId]
   );
@@ -493,7 +1060,7 @@ function useForceLayout(config = {}, rootNodeId) {
           forceCollide(updates.collisionRadius)
         );
       }
-      simulation.alpha(0.5).restart();
+      simulation.alpha(0.3).restart();
     },
     []
   );
@@ -512,32 +1079,34 @@ function useForceLayout(config = {}, rootNodeId) {
 }
 
 // src/components/ObservablesGraph.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var nodeTypes = {
   observable: ObservableNode
 };
 var edgeTypes = {
   floating: FloatingEdge
 };
+var defaultEdgeOptions = {
+  type: "floating",
+  style: { stroke: "#94a3b8", strokeWidth: 1.5 }
+};
 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),
+      label: truncateLabel(graphNode.value, 16),
       fullValue: graphNode.value,
       observableType: graphNode.type,
       level: graphNode.level,
       score: graphNode.score,
-      emoji: getObservableEmoji(graphNode.type),
-      shape,
+      shape: "circle",
       isRoot,
       whitelisted: graphNode.whitelisted,
       internal: graphNode.internal
     };
     const angle = index / graph.nodes.length * 2 * Math.PI;
-    const radius = isRoot ? 0 : 150;
+    const radius = isRoot ? 0 : 180;
     return {
       id: graphNode.id,
       type: "observable",
@@ -545,7 +1114,10 @@ function createObservableNodes(investigation, rootObservableIds) {
         x: Math.cos(angle) * radius,
         y: Math.sin(angle) * radius
       },
-      data: nodeData
+      data: nodeData,
+      // Enable selection for better UX
+      selectable: true,
+      draggable: true
     };
   });
 }
@@ -562,100 +1134,160 @@ function createObservableEdges(investigation) {
       target: graphEdge.target,
       type: "floating",
       data: edgeData,
+      // Animated edges for a modern feel
+      animated: false,
       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%" }
-            }
-          )
+  const [isExpanded, setIsExpanded] = useState(false);
+  const panelStyle = {
+    background: "rgba(255, 255, 255, 0.95)",
+    backdropFilter: "blur(8px)",
+    padding: isExpanded ? 14 : 10,
+    borderRadius: 12,
+    boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
+    fontSize: 12,
+    fontFamily: "'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    minWidth: isExpanded ? 180 : "auto",
+    transition: "all 0.2s ease",
+    border: "1px solid rgba(0,0,0,0.06)"
+  };
+  const headerStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 8,
+    cursor: "pointer"
+  };
+  const titleStyle = {
+    fontWeight: 600,
+    color: "#1f2937",
+    fontSize: 12,
+    letterSpacing: "-0.01em"
+  };
+  const toggleStyle = {
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    padding: 4,
+    borderRadius: 4,
+    color: "#6b7280",
+    display: "flex",
+    alignItems: "center",
+    transition: "transform 0.2s ease",
+    transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)"
+  };
+  const sliderContainerStyle = {
+    marginTop: 12,
+    display: isExpanded ? "block" : "none"
+  };
+  const sliderLabelStyle = {
+    display: "flex",
+    justifyContent: "space-between",
+    marginBottom: 4,
+    color: "#4b5563",
+    fontSize: 11
+  };
+  const sliderStyle = {
+    width: "100%",
+    height: 4,
+    appearance: "none",
+    background: "#e5e7eb",
+    borderRadius: 2,
+    outline: "none",
+    cursor: "pointer"
+  };
+  const buttonStyle = {
+    width: "100%",
+    padding: "8px 12px",
+    border: "none",
+    borderRadius: 8,
+    background: "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)",
+    color: "white",
+    cursor: "pointer",
+    fontSize: 12,
+    fontWeight: 500,
+    marginTop: 12,
+    transition: "transform 0.1s ease, box-shadow 0.1s ease",
+    boxShadow: "0 2px 4px rgba(59, 130, 246, 0.3)"
+  };
+  return /* @__PURE__ */ jsxs3("div", { style: panelStyle, children: [
+    /* @__PURE__ */ jsxs3("div", { style: headerStyle, onClick: () => setIsExpanded(!isExpanded), children: [
+      /* @__PURE__ */ jsx4("span", { style: titleStyle, children: "\u26A1 Force Layout" }),
+      /* @__PURE__ */ jsx4("button", { style: toggleStyle, children: /* @__PURE__ */ jsx4("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx4("polyline", { points: "6 9 12 15 18 9" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { style: sliderContainerStyle, children: [
+      /* @__PURE__ */ jsxs3("div", { style: { marginBottom: 10 }, children: [
+        /* @__PURE__ */ jsxs3("div", { style: sliderLabelStyle, children: [
+          /* @__PURE__ */ jsx4("span", { children: "Repulsion" }),
+          /* @__PURE__ */ jsx4("span", { children: config.chargeStrength })
         ] }),
-        /* @__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__ */ jsx4(
+          "input",
+          {
+            type: "range",
+            min: "-500",
+            max: "-50",
+            value: config.chargeStrength,
+            onChange: (e) => onChange({ chargeStrength: Number(e.target.value) }),
+            style: sliderStyle
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { style: { marginBottom: 10 }, children: [
+        /* @__PURE__ */ jsxs3("div", { style: sliderLabelStyle, children: [
+          /* @__PURE__ */ jsx4("span", { children: "Link Distance" }),
+          /* @__PURE__ */ jsx4("span", { children: config.linkDistance })
         ] }),
-        /* @__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__ */ jsx4(
+          "input",
+          {
+            type: "range",
+            min: "30",
+            max: "200",
+            value: config.linkDistance,
+            onChange: (e) => onChange({ linkDistance: Number(e.target.value) }),
+            style: sliderStyle
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { style: { marginBottom: 6 }, children: [
+        /* @__PURE__ */ jsxs3("div", { style: sliderLabelStyle, children: [
+          /* @__PURE__ */ jsx4("span", { children: "Collision" }),
+          /* @__PURE__ */ jsx4("span", { children: config.collisionRadius })
         ] }),
-        /* @__PURE__ */ jsx3(
-          "button",
+        /* @__PURE__ */ jsx4(
+          "input",
           {
-            onClick: onRestart,
-            style: {
-              width: "100%",
-              padding: "6px 12px",
-              border: "none",
-              borderRadius: 4,
-              background: "#3b82f6",
-              color: "white",
-              cursor: "pointer",
-              fontSize: 12
-            },
-            children: "Restart Simulation"
+            type: "range",
+            min: "10",
+            max: "80",
+            value: config.collisionRadius,
+            onChange: (e) => onChange({ collisionRadius: Number(e.target.value) }),
+            style: sliderStyle
           }
         )
-      ]
-    }
-  );
+      ] }),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          onClick: onRestart,
+          style: buttonStyle,
+          onMouseEnter: (e) => {
+            e.currentTarget.style.transform = "translateY(-1px)";
+            e.currentTarget.style.boxShadow = "0 4px 8px rgba(59, 130, 246, 0.4)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.transform = "translateY(0)";
+            e.currentTarget.style.boxShadow = "0 2px 4px rgba(59, 130, 246, 0.3)";
+          },
+          children: "Restart Simulation"
+        }
+      )
+    ] })
+  ] });
 };
 var ObservablesGraphInner = ({
   initialNodes,
@@ -673,11 +1305,13 @@ var ObservablesGraphInner = ({
     ...DEFAULT_FORCE_CONFIG,
     ...initialForceConfig
   });
+  const initialFitDone = useRef2(false);
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
   React3.useEffect(() => {
     setNodes(initialNodes);
     setEdges(initialEdges);
+    initialFitDone.current = false;
   }, [initialNodes, initialEdges, setNodes, setEdges]);
   const {
     onNodeDragStart,
@@ -709,58 +1343,95 @@ var ObservablesGraphInner = ({
     const data = node.data;
     return getLevelColor(data.level);
   }, []);
-  return /* @__PURE__ */ jsxs2(
-    "div",
+  const containerStyle = useMemo4(
+    () => ({
+      width,
+      height,
+      position: "relative",
+      background: "linear-gradient(180deg, #fafbfc 0%, #f0f4f8 100%)"
+    }),
+    [width, height]
+  );
+  return /* @__PURE__ */ jsx4("div", { className, style: containerStyle, children: /* @__PURE__ */ jsxs3(
+    ReactFlow,
     {
-      className,
-      style: {
-        width,
-        height,
-        position: "relative"
-      },
+      nodes,
+      edges,
+      onNodesChange,
+      onEdgesChange,
+      onNodeClick: handleNodeClick,
+      onNodeDoubleClick: handleNodeDoubleClick,
+      onNodeDragStart,
+      onNodeDrag,
+      onNodeDragStop,
+      nodeTypes,
+      edgeTypes,
+      defaultEdgeOptions,
+      connectionMode: ConnectionMode.Loose,
+      fitView: true,
+      fitViewOptions: { padding: 0.4, maxZoom: 1.5 },
+      minZoom: 0.1,
+      maxZoom: 2.5,
+      proOptions: { hideAttribution: true },
+      nodesDraggable: true,
+      nodesConnectable: false,
+      elementsSelectable: true,
+      selectNodesOnDrag: false,
+      panOnDrag: true,
+      zoomOnScroll: true,
+      zoomOnPinch: true,
+      panOnScroll: false,
       children: [
-        /* @__PURE__ */ jsxs2(
-          ReactFlow,
+        /* @__PURE__ */ jsx4(
+          Background,
+          {
+            variant: BackgroundVariant.Dots,
+            gap: 24,
+            size: 1,
+            color: "#d1d5db"
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          Controls,
+          {
+            showInteractive: false,
+            style: {
+              borderRadius: 10,
+              boxShadow: "0 2px 12px rgba(0,0,0,0.1)",
+              border: "1px solid rgba(0,0,0,0.06)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          MiniMap,
           {
-            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 })
-            ]
+            nodeColor: miniMapNodeColor,
+            zoomable: true,
+            pannable: true,
+            style: {
+              borderRadius: 10,
+              boxShadow: "0 2px 12px rgba(0,0,0,0.1)",
+              border: "1px solid rgba(0,0,0,0.06)",
+              background: "rgba(255,255,255,0.9)"
+            },
+            maskColor: "rgba(0,0,0,0.08)"
           }
         ),
-        showControls && /* @__PURE__ */ jsx3(
+        showControls && /* @__PURE__ */ jsx4(Panel, { position: "top-right", children: /* @__PURE__ */ jsx4(
           ForceControls,
           {
             config: forceConfig,
             onChange: handleConfigChange,
             onRestart: restartSimulation
           }
-        )
+        ) })
       ]
     }
-  );
+  ) });
 };
 var ObservablesGraph = (props) => {
   const { investigation } = props;
-  const { rootKeys, primaryRootId } = useMemo2(() => {
+  const { rootKeys, primaryRootId } = useMemo4(() => {
     const rootType = investigation.data_extraction.root_type;
     if (!rootType) {
       return { rootKeys: /* @__PURE__ */ new Set(), primaryRootId: void 0 };
@@ -774,12 +1445,12 @@ var ObservablesGraph = (props) => {
       primaryRootId: rootsByType[0]?.key
     };
   }, [investigation]);
-  const { initialNodes, initialEdges } = useMemo2(() => {
+  const { initialNodes, initialEdges } = useMemo4(() => {
     const nodes = createObservableNodes(investigation, rootKeys);
     const edges = createObservableEdges(investigation);
     return { initialNodes: nodes, initialEdges: edges };
   }, [investigation, rootKeys]);
-  return /* @__PURE__ */ jsx3(ReactFlowProvider, { children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(ReactFlowProvider, { children: /* @__PURE__ */ jsx4(
     ObservablesGraphInner,
     {
       ...props,
@@ -791,159 +1462,142 @@ var ObservablesGraph = (props) => {
 };
 
 // src/components/InvestigationGraph.tsx
-import React5, { useMemo as useMemo4, useCallback as useCallback3 } from "react";
+import React5, { useMemo as useMemo7, useCallback as useCallback3 } from "react";
 import {
   ReactFlow as ReactFlow2,
   Background as Background2,
   Controls as Controls2,
   MiniMap as MiniMap2,
   useNodesState as useNodesState2,
-  useEdgesState as useEdgesState2
+  useEdgesState as useEdgesState2,
+  BackgroundVariant as BackgroundVariant2,
+  MarkerType
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 
 // src/components/InvestigationNode.tsx
-import { memo as memo3 } from "react";
+import { memo as memo3, useMemo as useMemo5 } 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
-}) {
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var NODE_CONFIG = {
+  root: {
+    minWidth: 140,
+    padding: "10px 18px",
+    borderRadius: 20,
+    fontWeight: 600,
+    fontSize: 13,
+    iconSize: 18,
+    showIcon: true,
+    alignCenter: true
+  },
+  check: {
+    minWidth: 140,
+    padding: "8px 14px",
+    borderRadius: 8,
+    fontWeight: 500,
+    fontSize: 12,
+    iconSize: 14,
+    showIcon: false,
+    // No icon for checks
+    alignCenter: false
+    // Left-aligned
+  },
+  container: {
+    minWidth: 120,
+    padding: "8px 14px",
+    borderRadius: 16,
+    fontWeight: 500,
+    fontSize: 12,
+    iconSize: 16,
+    showIcon: true,
+    alignCenter: true
+  }
+};
+function InvestigationNodeComponent({ data, selected }) {
   const nodeData = data;
-  const {
-    label,
-    emoji,
-    nodeType,
-    level,
-    description
-  } = nodeData;
+  const { label, 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
-            }
-          }
-        )
-      ]
-    }
+  const config = NODE_CONFIG[nodeType] || NODE_CONFIG.check;
+  const IconComponent = useMemo5(
+    () => getInvestigationIcon(nodeType),
+    [nodeType]
+  );
+  const nodeStyle = useMemo5(
+    () => ({
+      minWidth: config.minWidth,
+      padding: config.padding,
+      borderRadius: config.borderRadius,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: config.alignCenter ? "center" : "flex-start",
+      backgroundColor,
+      border: `2px solid ${borderColor}`,
+      boxShadow: selected ? `0 0 0 3px ${borderColor}40, 0 4px 12px rgba(0,0,0,0.15)` : "0 2px 8px rgba(0,0,0,0.08)",
+      cursor: "pointer",
+      fontFamily: "'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+      transition: "box-shadow 0.15s ease-out, transform 0.1s ease-out"
+    }),
+    [config, backgroundColor, borderColor, selected]
+  );
+  const headerStyle = useMemo5(
+    () => ({
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+      width: config.alignCenter ? "auto" : "100%"
+    }),
+    [config.alignCenter]
+  );
+  const labelStyle = useMemo5(
+    () => ({
+      fontSize: config.fontSize,
+      fontWeight: config.fontWeight,
+      maxWidth: 180,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      color: "#1f2937",
+      letterSpacing: "-0.01em"
+    }),
+    [config]
   );
+  const descriptionStyle = useMemo5(
+    () => ({
+      marginTop: 4,
+      fontSize: 10,
+      color: "#6b7280",
+      maxWidth: 170,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      lineHeight: 1.3,
+      width: "100%",
+      textAlign: config.alignCenter ? "center" : "left"
+    }),
+    [config.alignCenter]
+  );
+  const handleStyle = {
+    width: 1,
+    height: 1,
+    background: "transparent",
+    border: "none",
+    opacity: 0
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: "investigation-node", style: nodeStyle, children: [
+    /* @__PURE__ */ jsxs4("div", { style: headerStyle, children: [
+      config.showIcon && /* @__PURE__ */ jsx5(IconComponent, { size: config.iconSize, color: borderColor }),
+      /* @__PURE__ */ jsx5("span", { style: labelStyle, title: label, children: label })
+    ] }),
+    description && /* @__PURE__ */ jsx5("div", { style: descriptionStyle, title: description, children: description }),
+    /* @__PURE__ */ jsx5(Handle2, { type: "target", position: Position2.Left, style: handleStyle }),
+    /* @__PURE__ */ jsx5(Handle2, { type: "source", position: Position2.Right, style: handleStyle })
+  ] });
 }
 var InvestigationNode = memo3(InvestigationNodeComponent);
 
 // src/hooks/useDagreLayout.ts
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo6 } from "react";
 import Dagre from "@dagrejs/dagre";
 var DEFAULT_OPTIONS = {
   direction: "LR",
@@ -989,10 +1643,23 @@ function computeDagreLayout(nodes, edges, options = {}) {
 }
 
 // src/components/InvestigationGraph.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var nodeTypes2 = {
   investigation: InvestigationNode
 };
+var defaultEdgeOptions2 = {
+  type: "smoothstep",
+  style: {
+    stroke: "#94a3b8",
+    strokeWidth: 1.5
+  },
+  markerEnd: {
+    type: MarkerType.ArrowClosed,
+    width: 16,
+    height: 16,
+    color: "#94a3b8"
+  }
+};
 function flattenContainers(containers) {
   const result = [];
   for (const container of Object.values(containers)) {
@@ -1019,15 +1686,23 @@ function createInvestigationGraph(investigation) {
     label: truncateLabel(rootValue, 24),
     nodeType: "root",
     level: rootLevel,
-    score: primaryRoot?.score ?? investigation.score,
-    emoji: getInvestigationNodeEmoji("root")
+    score: primaryRoot?.score ?? investigation.score
   };
   nodes.push({
     id: rootKey,
     type: "investigation",
     position: { x: 0, y: 0 },
-    data: rootNodeData
+    data: rootNodeData,
+    selectable: true,
+    draggable: true
   });
+  const allContainers = flattenContainers(investigation.containers);
+  const checksInContainers = /* @__PURE__ */ new Set();
+  for (const container of allContainers) {
+    for (const checkKey of container.checks) {
+      checksInContainers.add(checkKey);
+    }
+  }
   const allChecks = [];
   for (const checksForKey of Object.values(investigation.checks)) {
     allChecks.push(...checksForKey);
@@ -1041,43 +1716,51 @@ function createInvestigationGraph(investigation) {
       nodeType: "check",
       level: check.level,
       score: check.score,
-      description: truncateLabel(check.description, 30),
-      emoji: getInvestigationNodeEmoji("check")
+      description: truncateLabel(check.description, 30)
     };
     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"
+      data: checkNodeData,
+      selectable: true,
+      draggable: true
     });
+    if (!checksInContainers.has(check.key)) {
+      edges.push({
+        id: `edge-root-${check.key}`,
+        source: rootKey,
+        target: `check-${check.key}`,
+        type: "smoothstep",
+        animated: false
+      });
+    }
   }
-  const allContainers = flattenContainers(investigation.containers);
   for (const container of allContainers) {
     const containerNodeData = {
-      label: truncateLabel(container.path.split("/").pop() ?? container.path, 20),
+      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")
+      path: container.path
     };
     nodes.push({
       id: `container-${container.key}`,
       type: "investigation",
       position: { x: 0, y: 0 },
-      data: containerNodeData
+      data: containerNodeData,
+      selectable: true,
+      draggable: true
     });
     edges.push({
       id: `edge-root-container-${container.key}`,
       source: rootKey,
       target: `container-${container.key}`,
-      type: "default"
+      type: "smoothstep",
+      animated: false
     });
     for (const checkKey of container.checks) {
       if (seenCheckIds.has(checkKey)) {
@@ -1085,8 +1768,8 @@ function createInvestigationGraph(investigation) {
           id: `edge-container-check-${container.key}-${checkKey}`,
           source: `container-${container.key}`,
           target: `check-${checkKey}`,
-          type: "default",
-          style: { strokeDasharray: "5,5" }
+          type: "smoothstep",
+          animated: false
         });
       }
     }
@@ -1100,15 +1783,15 @@ var InvestigationGraph = ({
   onNodeClick,
   className
 }) => {
-  const { initialNodes, initialEdges } = useMemo4(() => {
+  const { initialNodes, initialEdges } = useMemo7(() => {
     const { nodes: nodes2, edges: edges2 } = createInvestigationGraph(investigation);
     return { initialNodes: nodes2, initialEdges: edges2 };
   }, [investigation]);
-  const { nodes: layoutNodes, edges: layoutEdges } = useMemo4(() => {
+  const { nodes: layoutNodes, edges: layoutEdges } = useMemo7(() => {
     return computeDagreLayout(initialNodes, initialEdges, {
       direction: "LR",
-      nodeSpacing: 30,
-      rankSpacing: 120
+      nodeSpacing: 40,
+      rankSpacing: 140
     });
   }, [initialNodes, initialEdges]);
   const [nodes, setNodes, onNodesChange] = useNodesState2(layoutNodes);
@@ -1128,97 +1811,200 @@ var InvestigationGraph = ({
     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 })
-          ]
-        }
-      )
-    }
+  const containerStyle = useMemo7(
+    () => ({
+      width,
+      height,
+      position: "relative",
+      background: "linear-gradient(180deg, #fafbfc 0%, #f0f4f8 100%)"
+    }),
+    [width, height]
   );
-};
-
-// src/components/CyvestGraph.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var ViewToggle = ({ currentView, onChange }) => {
-  return /* @__PURE__ */ jsxs5(
-    "div",
+  return /* @__PURE__ */ jsx6("div", { className, style: containerStyle, children: /* @__PURE__ */ jsxs5(
+    ReactFlow2,
     {
-      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"
-      },
+      nodes,
+      edges,
+      onNodesChange,
+      onEdgesChange,
+      onNodeClick: handleNodeClick,
+      nodeTypes: nodeTypes2,
+      defaultEdgeOptions: defaultEdgeOptions2,
+      fitView: true,
+      fitViewOptions: { padding: 0.3, maxZoom: 1.5 },
+      minZoom: 0.1,
+      maxZoom: 2.5,
+      proOptions: { hideAttribution: true },
+      nodesDraggable: true,
+      nodesConnectable: false,
+      elementsSelectable: true,
+      selectNodesOnDrag: false,
+      panOnDrag: true,
+      zoomOnScroll: true,
+      zoomOnPinch: true,
+      panOnScroll: false,
       children: [
         /* @__PURE__ */ jsx6(
-          "button",
+          Background2,
           {
-            onClick: () => onChange("observables"),
+            variant: BackgroundVariant2.Dots,
+            gap: 24,
+            size: 1,
+            color: "#d1d5db"
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          Controls2,
+          {
+            showInteractive: false,
             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"
+              borderRadius: 10,
+              boxShadow: "0 2px 12px rgba(0,0,0,0.1)",
+              border: "1px solid rgba(0,0,0,0.06)"
+            }
           }
         ),
         /* @__PURE__ */ jsx6(
-          "button",
+          MiniMap2,
           {
-            onClick: () => onChange("investigation"),
+            nodeColor: miniMapNodeColor,
+            zoomable: true,
+            pannable: true,
             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"
+              borderRadius: 10,
+              boxShadow: "0 2px 12px rgba(0,0,0,0.1)",
+              border: "1px solid rgba(0,0,0,0.06)",
+              background: "rgba(255,255,255,0.9)"
             },
-            children: "Investigation"
+            maskColor: "rgba(0,0,0,0.08)"
           }
         )
       ]
     }
+  ) });
+};
+
+// src/components/CyvestGraph.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var ViewToggle = ({ currentView, onChange }) => {
+  const containerStyle = useMemo8(
+    () => ({
+      position: "absolute",
+      top: 12,
+      left: 12,
+      display: "flex",
+      gap: 2,
+      background: "rgba(255, 255, 255, 0.95)",
+      backdropFilter: "blur(8px)",
+      padding: 4,
+      borderRadius: 10,
+      boxShadow: "0 2px 12px rgba(0,0,0,0.1)",
+      zIndex: 10,
+      fontFamily: "'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+      border: "1px solid rgba(0,0,0,0.06)"
+    }),
+    []
+  );
+  const getButtonStyle = useCallback4(
+    (isActive) => ({
+      padding: "8px 14px",
+      border: "none",
+      borderRadius: 7,
+      cursor: "pointer",
+      fontSize: 12,
+      fontWeight: isActive ? 600 : 500,
+      background: isActive ? "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)" : "transparent",
+      color: isActive ? "white" : "#4b5563",
+      transition: "all 0.15s ease",
+      letterSpacing: "-0.01em"
+    }),
+    []
   );
+  return /* @__PURE__ */ jsxs6("div", { style: containerStyle, children: [
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        onClick: () => onChange("observables"),
+        style: getButtonStyle(currentView === "observables"),
+        onMouseEnter: (e) => {
+          if (currentView !== "observables") {
+            e.currentTarget.style.background = "rgba(59, 130, 246, 0.1)";
+            e.currentTarget.style.color = "#3b82f6";
+          }
+        },
+        onMouseLeave: (e) => {
+          if (currentView !== "observables") {
+            e.currentTarget.style.background = "transparent";
+            e.currentTarget.style.color = "#4b5563";
+          }
+        },
+        children: /* @__PURE__ */ jsxs6("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          /* @__PURE__ */ jsxs6(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "3" }),
+                /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsx7("line", { x1: "12", y1: "2", x2: "12", y2: "4" }),
+                /* @__PURE__ */ jsx7("line", { x1: "12", y1: "20", x2: "12", y2: "22" }),
+                /* @__PURE__ */ jsx7("line", { x1: "2", y1: "12", x2: "4", y2: "12" }),
+                /* @__PURE__ */ jsx7("line", { x1: "20", y1: "12", x2: "22", y2: "12" })
+              ]
+            }
+          ),
+          "Observables"
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        onClick: () => onChange("investigation"),
+        style: getButtonStyle(currentView === "investigation"),
+        onMouseEnter: (e) => {
+          if (currentView !== "investigation") {
+            e.currentTarget.style.background = "rgba(59, 130, 246, 0.1)";
+            e.currentTarget.style.color = "#3b82f6";
+          }
+        },
+        onMouseLeave: (e) => {
+          if (currentView !== "investigation") {
+            e.currentTarget.style.background = "transparent";
+            e.currentTarget.style.color = "#4b5563";
+          }
+        },
+        children: /* @__PURE__ */ jsxs6("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          /* @__PURE__ */ jsxs6(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ jsx7("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+                /* @__PURE__ */ jsx7("path", { d: "M9 3v18" }),
+                /* @__PURE__ */ jsx7("path", { d: "M3 9h18" })
+              ]
+            }
+          ),
+          "Investigation"
+        ] })
+      }
+    )
+  ] });
 };
 var CyvestGraph = ({
   investigation,
@@ -1229,46 +2015,52 @@ var CyvestGraph = ({
   className,
   showViewToggle = true
 }) => {
-  const [view, setView] = useState2(initialView);
+  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
-          }
-        )
-      ]
-    }
+  const containerStyle = useMemo8(
+    () => ({
+      width,
+      height,
+      position: "relative"
+    }),
+    [width, height]
   );
+  return /* @__PURE__ */ jsxs6("div", { className, style: containerStyle, children: [
+    showViewToggle && /* @__PURE__ */ jsx7(ViewToggle, { currentView: view, onChange: setView }),
+    view === "observables" ? /* @__PURE__ */ jsx7(
+      ObservablesGraph,
+      {
+        investigation,
+        height: "100%",
+        width: "100%",
+        onNodeClick: handleNodeClick,
+        showControls: true
+      }
+    ) : /* @__PURE__ */ jsx7(
+      InvestigationGraph,
+      {
+        investigation,
+        height: "100%",
+        width: "100%",
+        onNodeClick: handleNodeClick
+      }
+    )
+  ] });
 };
 export {
-  CyvestGraph
+  CyvestGraph,
+  DEFAULT_FORCE_CONFIG,
+  INVESTIGATION_ICON_MAP,
+  InvestigationGraph,
+  OBSERVABLE_ICON_MAP,
+  ObservablesGraph,
+  getInvestigationIcon,
+  getObservableIcon
 };