@socprime/react-ui 0.0.10 → 0.0.12

package/domain.d.ts

@@ -7,9 +7,22 @@ interface AttackTimelineStep {
     hit: boolean;
     code: string;
 }
+interface ChainGraphBranch {
+    from_code: string;
+    to_code: string;
+    node: AttackTimelineStep;
+}
+
+type ChainGraphBranchView = {
+    fromIndex: number;
+    toIndex: number;
+    step: ChainGraphBranch['node'];
+};
+declare const mapChainGraphBranches: (branches: ChainGraphBranch[] | undefined, chainGraph: AttackTimelineStep[]) => ChainGraphBranchView[];
 
 interface AttackTimelineProps {
     steps?: AttackTimelineStep[];
+    branches?: ChainGraphBranchView[];
 }
 declare const AttackTimeline: React.FC<AttackTimelineProps>;
 
@@ -32,4 +45,4 @@ declare const SyncProcessBar: () => React$1.JSX.Element;
 
 type SyncProcessBarProps = ComponentProps<typeof SyncProcessBar>;
 
-export { AttackTimeline, type AttackTimelineProps, type AttackTimelineStep, CorrelationTimer, type CorrelationTimerProps, Severity, type SeverityProps, SyncProcessBar, type SyncProcessBarProps, type TSeverity };
+export { AttackTimeline, type AttackTimelineProps, type AttackTimelineStep, type ChainGraphBranch, type ChainGraphBranchView, CorrelationTimer, type CorrelationTimerProps, Severity, type SeverityProps, SyncProcessBar, type SyncProcessBarProps, type TSeverity, mapChainGraphBranches };

package/index.d.ts

@@ -61,7 +61,7 @@ declare const AnimatedDots: React.FC<AnimatedDotsProps>;
 
 interface AsideTab {
     id: string;
-    label?: string;
+    label?: React.ReactNode;
     icon?: LucideIcon | React.FC;
     to?: string;
     title?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@socprime/react-ui",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "SOC Prime React UI component library and Storybook design system.",
   "license": "MIT",
   "engines": {

package/ui/AttackTimeline/AttackTimeline.js

@@ -1,12 +1,37 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
 import { CyberpunkCorner } from "./CyberpunkCorner.js";
+import { TimelineBranches } from "./TimelineBranches.js";
+import { BRANCH_LAYOUT_PADDING_TOP } from "./timelineConstants.js";
 import { TimelineDividers } from "./TimelineDividers.js";
 import { TimelineSegments } from "./TimelineSegments.js";
 import { TimelineStepItem } from "./TimelineStepItem.js";
 import { useTimeline } from "./useTimeline.js";
-const AttackTimeline = ({ steps }) => {
-  const { mouseX, timelineWidth, handleMouseMove, handleMouseLeave } = useTimeline();
-  if (!steps) {
+const AttackTimeline = ({ steps, branches = [] }) => {
+  const timelineSteps = steps ?? [];
+  const lastHitIndex = useMemo(
+    () => timelineSteps.reduce((last, step, index) => step.hit ? index : last, -1),
+    [timelineSteps]
+  );
+  const {
+    containerRef,
+    hoveredIndex,
+    hoveredBranchIndex,
+    setHoveredIndex,
+    setHoveredBranchIndex,
+    mouseX,
+    timelineWidth,
+    handleMouseMove,
+    handleMouseLeave
+  } = useTimeline();
+  const makeHoverHandlers = useCallback(
+    (index) => ({
+      onMouseEnter: () => setHoveredIndex(index),
+      onMouseLeave: () => setHoveredIndex(null)
+    }),
+    [setHoveredIndex]
+  );
+  if (timelineSteps.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsxs("div", { className: "relative p-[12px]", children: [
@@ -15,17 +40,46 @@ const AttackTimeline = ({ steps }) => {
     /* @__PURE__ */ jsx(CyberpunkCorner, { position: "bottom-left" }),
     /* @__PURE__ */ jsx(CyberpunkCorner, { position: "bottom-right" }),
     /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center gap-2" }),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "div",
       {
-        className: "relative flex w-full items-start justify-between pt-2.5",
-        onMouseMove: handleMouseMove,
-        onMouseLeave: handleMouseLeave,
-        children: [
-          /* @__PURE__ */ jsx(TimelineSegments, { steps }),
-          /* @__PURE__ */ jsx(TimelineDividers, { mouseX, timelineWidth }),
-          steps.map((step, index) => /* @__PURE__ */ jsx(TimelineStepItem, { step, index, totalSteps: steps.length }, index))
-        ]
+        className: "overflow-visible",
+        style: { paddingTop: branches.length > 0 ? BRANCH_LAYOUT_PADDING_TOP : void 0 },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: containerRef,
+            className: "relative flex w-full items-start justify-between pt-2.5",
+            onMouseMove: handleMouseMove,
+            onMouseLeave: handleMouseLeave,
+            children: [
+              /* @__PURE__ */ jsx(TimelineSegments, { steps: timelineSteps }),
+              /* @__PURE__ */ jsx(TimelineDividers, { mouseX, timelineWidth }),
+              /* @__PURE__ */ jsx(
+                TimelineBranches,
+                {
+                  branches,
+                  totalSteps: timelineSteps.length,
+                  hoveredBranchIndex,
+                  onBranchMouseEnter: setHoveredBranchIndex,
+                  onBranchMouseLeave: () => setHoveredBranchIndex(null)
+                }
+              ),
+              timelineSteps.map((step, index) => /* @__PURE__ */ jsx(
+                TimelineStepItem,
+                {
+                  step,
+                  index,
+                  totalSteps: timelineSteps.length,
+                  isCurrent: index === lastHitIndex && step.hit,
+                  isHovered: hoveredIndex === index,
+                  ...makeHoverHandlers(index)
+                },
+                `${step.code}-${index}`
+              ))
+            ]
+          }
+        )
       }
     )
   ] });

package/ui/AttackTimeline/CyberpunkCorner.js

@@ -1,8 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useThemeColors } from "../../lib/useThemeColors.js";
 const GLOW_SHADOW = "0 0 8px rgba(74, 193, 142, 0.6)";
+const COLOR = "#4ac18e";
 const CyberpunkCorner = ({ position }) => {
-  const { success } = useThemeColors();
   const isTop = position.startsWith("top");
   const isLeft = position.endsWith("left");
   const edge = isTop ? "top-0" : "bottom-0";
@@ -12,14 +11,14 @@ const CyberpunkCorner = ({ position }) => {
       "div",
       {
         className: `absolute ${edge} ${side} h-[1px] w-3`,
-        style: { backgroundColor: success, boxShadow: GLOW_SHADOW }
+        style: { backgroundColor: COLOR, boxShadow: GLOW_SHADOW }
       }
     ),
     /* @__PURE__ */ jsx(
       "div",
       {
         className: `absolute ${edge} ${side} h-3 w-[1px]`,
-        style: { backgroundColor: success, boxShadow: GLOW_SHADOW }
+        style: { backgroundColor: COLOR, boxShadow: GLOW_SHADOW }
       }
     )
   ] });

package/ui/AttackTimeline/TimelineBranchNode.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { cn } from "../../lib/cn.js";
+import { TimelineStepTooltip } from "./TimelineStepTooltip.js";
+import { DETECTION_BYPASS_LABEL, TIMELINE_BRANCH_ORANGE_START } from "./timelineConstants.js";
+const TimelineBranchNode = memo(
+  ({ step, leftPercent, topPx, isHovered, onMouseEnter, onMouseLeave }) => {
+    const markerBoxShadow = isHovered ? `0 0 0 4px #252838, 0 0 16px color-mix(in srgb, ${TIMELINE_BRANCH_ORANGE_START} 60%, transparent)` : "0 0 0 4px #252838";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "pointer-events-auto absolute z-[2] flex -translate-x-1/2 flex-col items-center text-center",
+        style: { left: `${leftPercent}%`, top: `${topPx}px` },
+        onMouseEnter,
+        onMouseLeave,
+        children: [
+          /* @__PURE__ */ jsx(TimelineStepTooltip, { step, codeClassName: "text-california", className: "max-w-200", children: /* @__PURE__ */ jsx("div", { className: "relative mb-4", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "from-california to-international-orange flex h-6 w-6 rotate-45 cursor-pointer bg-gradient-to-b p-[1.5px] transition-all duration-300",
+                isHovered && "scale-120"
+              ),
+              style: { boxShadow: markerBoxShadow },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "relative h-full w-full bg-[#2b2419]",
+                    isHovered && "from-california/25 to-international-orange/25 bg-gradient-to-b"
+                  ),
+                  children: /* @__PURE__ */ jsx("div", { className: "from-california to-international-orange absolute top-1/2 left-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 bg-gradient-to-b" })
+                }
+              )
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-default max-w-[120px] cursor-pointer text-[11px] font-medium", children: DETECTION_BYPASS_LABEL })
+        ]
+      }
+    );
+  }
+);
+TimelineBranchNode.displayName = "TimelineBranchNode";
+export {
+  TimelineBranchNode
+};

package/ui/AttackTimeline/TimelineBranches.js

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useId } from "react";
+import { getBranchGeometry } from "./branchGeometry.js";
+import { TimelineBranchNode } from "./TimelineBranchNode.js";
+import {
+  BRANCH_AREA_HEIGHT,
+  BRANCH_NODE_OFFSET_Y,
+  BRANCH_OFFSET_TOP,
+  BRANCH_TOP_Y,
+  TIMELINE_BRANCH_ORANGE_END,
+  TIMELINE_BRANCH_ORANGE_START,
+  TIMELINE_GREEN
+} from "./timelineConstants.js";
+const TimelineBranches = memo(
+  ({ branches, totalSteps, hoveredBranchIndex, onBranchMouseEnter, onBranchMouseLeave }) => {
+    const baseId = useId();
+    if (branches.length === 0) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "pointer-events-none absolute inset-x-0 overflow-visible",
+        style: { top: BRANCH_OFFSET_TOP, height: BRANCH_AREA_HEIGHT, zIndex: 0 },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "absolute inset-0 h-full w-full overflow-visible",
+              viewBox: `0 0 100 ${BRANCH_AREA_HEIGHT}`,
+              preserveAspectRatio: "none",
+              children: [
+                /* @__PURE__ */ jsx("defs", { children: branches.map((branch, index) => {
+                  const { fromXPercent, toXPercent } = getBranchGeometry(
+                    branch.fromIndex,
+                    branch.toIndex,
+                    totalSteps
+                  );
+                  return /* @__PURE__ */ jsxs(
+                    "linearGradient",
+                    {
+                      id: `${baseId}-branch-gradient-${index}`,
+                      gradientUnits: "userSpaceOnUse",
+                      x1: fromXPercent,
+                      y1: 0,
+                      x2: toXPercent,
+                      y2: 0,
+                      children: [
+                        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: TIMELINE_GREEN }),
+                        /* @__PURE__ */ jsx("stop", { offset: "20%", style: { stopColor: TIMELINE_BRANCH_ORANGE_START } }),
+                        /* @__PURE__ */ jsx("stop", { offset: "80%", style: { stopColor: TIMELINE_BRANCH_ORANGE_END } }),
+                        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: TIMELINE_GREEN })
+                      ]
+                    },
+                    `gradient-${index}`
+                  );
+                }) }),
+                branches.map((branch, index) => {
+                  const geometry = getBranchGeometry(branch.fromIndex, branch.toIndex, totalSteps);
+                  const gradientId = `${baseId}-branch-gradient-${index}`;
+                  return /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: geometry.outlinePath,
+                      fill: "none",
+                      stroke: `url(#${gradientId})`,
+                      strokeWidth: 1,
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      vectorEffect: "non-scaling-stroke"
+                    },
+                    `branch-shape-${index}`
+                  );
+                })
+              ]
+            }
+          ),
+          branches.map((branch, index) => {
+            const { nodeXPercent } = getBranchGeometry(branch.fromIndex, branch.toIndex, totalSteps);
+            return /* @__PURE__ */ jsx(
+              TimelineBranchNode,
+              {
+                step: branch.step,
+                leftPercent: nodeXPercent,
+                topPx: BRANCH_TOP_Y + BRANCH_NODE_OFFSET_Y,
+                isHovered: hoveredBranchIndex === index,
+                onMouseEnter: () => onBranchMouseEnter(index),
+                onMouseLeave: onBranchMouseLeave
+              },
+              `branch-node-${index}`
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+TimelineBranches.displayName = "TimelineBranches";
+export {
+  TimelineBranches
+};

package/ui/AttackTimeline/TimelineSegments.js

@@ -1,8 +1,7 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 const getSegmentColor = (current, next) => {
-  const isActiveStatus = (s) => s.hit === true || s.hit === false;
-  const currentActive = isActiveStatus(current);
-  const nextActive = isActiveStatus(next);
+  const currentActive = current.hit;
+  const nextActive = next.hit;
   if (currentActive && nextActive) {
     return "#4ac18e";
   }
@@ -16,10 +15,8 @@ const getSegmentColor = (current, next) => {
 };
 const TimelineSegments = ({ steps }) => {
   const segmentWidth = 100 / steps.length;
-  return steps.map((step, index) => {
-    if (index === steps.length - 1) {
-      return null;
-    }
+  return /* @__PURE__ */ jsx(Fragment, { children: steps.map((step, index) => {
+    if (index === steps.length - 1) return null;
     const leftPosition = index * segmentWidth + segmentWidth / 2;
     const lineColor = getSegmentColor(step, steps[index + 1]);
     return /* @__PURE__ */ jsx(
@@ -35,7 +32,7 @@ const TimelineSegments = ({ steps }) => {
       },
       `segment-${index}`
     );
-  });
+  }) });
 };
 export {
   TimelineSegments

package/ui/AttackTimeline/TimelineStepItem.js

@@ -1,58 +1,42 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ScrollArea } from "../ScrollArea/index.js";
-import { Tooltip } from "../Tooltip/index.js";
-const TimelineStepItem = ({ step, totalSteps }) => {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "relative flex flex-col items-center text-center",
-      style: { width: `${100 / totalSteps}%`, zIndex: 1 },
-      children: [
-        /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            className: "border-border bg-secondary w-[820px] border py-4 text-center",
-            classNameArrow: "bg-secondary fill-secondary",
-            content: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsxs("div", { className: "text-default mb-1 text-xs font-medium", children: [
-                step.name,
-                " ",
-                /* @__PURE__ */ jsxs("span", { className: `${step.hit ? "text-success" : "text-gray-chateau/80"} text-xs`, children: [
-                  "(",
-                  step.code,
-                  ")"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(
-                ScrollArea,
-                {
-                  orientation: "vertical",
-                  className: "max-h-[300px]",
-                  onWheel: (event) => event.stopPropagation(),
-                  children: /* @__PURE__ */ jsx("div", { className: "text-subdued text-2xs", children: step.description })
-                }
-              )
-            ] }),
-            children: /* @__PURE__ */ jsx("div", { className: "group mb-4", children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: `h-[13px] w-[13px] rotate-45 transform shadow-[0_0_0_4px_#252838] transition-all duration-300 ${step.hit ? "group-hover:border-success group-hover:bg-success border-success bg-secondary border-[1.5px] group-hover:scale-150 group-hover:shadow-[0_0_16px_rgba(74,193,142,0.6)]" : "bg-secondary border-gray-chateau/80 border-[1.5px]"}`,
-                children: step.hit && /* @__PURE__ */ jsx("div", { className: "bg-success absolute top-1/2 left-1/2 h-1 w-1 -translate-x-1/2 -translate-y-1/2 transform" })
-              }
-            ) })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: `text-3xs font-medium ${step.hit ? "text-default" : "text-gray-chateau/80"}`,
-            children: step.name
-          }
-        )
-      ]
-    }
-  );
-};
+import { memo } from "react";
+import { TimelineStepTooltip } from "./TimelineStepTooltip.js";
+const TimelineStepItem = memo(
+  ({ step, totalSteps, isCurrent, isHovered, onMouseEnter, onMouseLeave }) => {
+    const isActive = step.hit;
+    const markerBoxShadow = isHovered ? "0 0 0 4px #252838, 0 0 16px rgba(74, 193, 142, 0.6)" : isActive ? "0 0 0 4px #252838" : "none";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "group relative flex flex-col items-center text-center",
+        style: { width: `${100 / totalSteps}%`, zIndex: 1 },
+        onMouseEnter,
+        onMouseLeave,
+        children: [
+          /* @__PURE__ */ jsx(TimelineStepTooltip, { step, className: "max-w-200", children: /* @__PURE__ */ jsx("div", { className: "relative mb-4", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `h-[13px] w-[13px] rotate-45 transform cursor-pointer transition-all duration-300 ${isActive ? "border-success border-[1.5px] bg-[#1f2b27]" : "border-[1.5px] border-[#57586E] bg-[#252838]"} ${isHovered ? "border-success bg-success scale-150" : ""}`,
+              style: { boxShadow: markerBoxShadow },
+              children: isActive && /* @__PURE__ */ jsx("div", { className: "bg-success absolute top-1/2 left-1/2 h-1 w-1 -translate-x-1/2 -translate-y-1/2 transform" })
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-1", children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `cursor-pointer text-[11px] font-medium transition-colors ${isActive ? "text-default" : "text-[#8C9290]"}`,
+              style: {
+                textShadow: isCurrent ? "0 0 20px rgba(255,255,255,0.1)" : "none"
+              },
+              children: step.name
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+TimelineStepItem.displayName = "TimelineStepItem";
 export {
   TimelineStepItem
 };

package/ui/AttackTimeline/TimelineStepTooltip.js

@@ -0,0 +1,31 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { Tooltip } from "../Tooltip/index.js";
+const TimelineStepTooltip = ({
+  step,
+  className,
+  codeClassName = "text-success",
+  children
+}) => /* @__PURE__ */ jsx(
+  Tooltip,
+  {
+    className: cn("border-border bg-primary max-w-100 rounded-lg border p-3 shadow-xl", className),
+    classNameArrow: "bg-primary fill-primary",
+    content: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-default mb-1 text-xs font-medium", children: [
+        step.name,
+        " ",
+        /* @__PURE__ */ jsxs("span", { className: `text-xs ${codeClassName}`, children: [
+          "(",
+          step.code,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "text-subdued text-2xs break-words", children: /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: step.description ?? "" } }) })
+    ] }),
+    children
+  }
+);
+export {
+  TimelineStepTooltip
+};

package/ui/AttackTimeline/branchGeometry.js

@@ -0,0 +1,65 @@
+import { BRANCH_BOTTOM_Y, BRANCH_TOP_Y } from "./timelineConstants.js";
+const CHAMFER_RADIUS = 0;
+const distance = (ax, ay, bx, by) => Math.hypot(bx - ax, by - ay);
+const buildChamferedPath = (points, chamfer) => {
+  if (points.length < 2) return "";
+  const segments = [];
+  for (let i = 0; i < points.length; i++) {
+    const [cx, cy] = points[i];
+    const prev = points[i - 1];
+    const next = points[i + 1];
+    if (!prev || !next) {
+      if (i === 0) {
+        segments.push(`M ${cx} ${cy}`);
+      } else {
+        segments.push(`L ${cx} ${cy}`);
+      }
+      continue;
+    }
+    const [px, py] = prev;
+    const [nx, ny] = next;
+    const inLen = distance(px, py, cx, cy);
+    const outLen = distance(cx, cy, nx, ny);
+    const radius = Math.min(chamfer, inLen * 0.35, outLen * 0.35);
+    const inX = cx + (px - cx) / inLen * radius;
+    const inY = cy + (py - cy) / inLen * radius;
+    const outX = cx + (nx - cx) / outLen * radius;
+    const outY = cy + (ny - cy) / outLen * radius;
+    if (i === 0) {
+      segments.push(`M ${inX} ${inY}`);
+    } else {
+      segments.push(`L ${inX} ${inY}`);
+    }
+    segments.push(`L ${outX} ${outY}`);
+  }
+  return segments.join(" ");
+};
+const getBranchGeometry = (fromIndex, toIndex, totalSteps) => {
+  const segmentWidth = 100 / totalSteps;
+  const from = Math.min(fromIndex, toIndex);
+  const to = Math.max(fromIndex, toIndex);
+  const fromXPercent = (from + 0.5) * segmentWidth;
+  const toXPercent = (to + 0.5) * segmentWidth;
+  const midXPercent = (fromXPercent + toXPercent) / 2;
+  const topHalfWidth = Math.min((toXPercent - fromXPercent) * 0.36, 26);
+  const topLeftX = midXPercent - topHalfWidth;
+  const topRightX = midXPercent + topHalfWidth;
+  const outlinePath = buildChamferedPath(
+    [
+      [fromXPercent, BRANCH_BOTTOM_Y],
+      [topLeftX, BRANCH_TOP_Y],
+      [topRightX, BRANCH_TOP_Y],
+      [toXPercent, BRANCH_BOTTOM_Y]
+    ],
+    CHAMFER_RADIUS
+  );
+  return {
+    fromXPercent,
+    toXPercent,
+    nodeXPercent: midXPercent,
+    outlinePath
+  };
+};
+export {
+  getBranchGeometry
+};

package/ui/AttackTimeline/index.js

@@ -1,4 +1,6 @@
 import { AttackTimeline } from "./AttackTimeline.js";
+import { mapChainGraphBranches } from "./mapChainGraphBranches.js";
 export {
-  AttackTimeline
+  AttackTimeline,
+  mapChainGraphBranches
 };

package/ui/AttackTimeline/mapChainGraphBranches.js

@@ -0,0 +1,29 @@
+const buildCodeToIndexMap = (chainGraph) => {
+  const codeToIndex = /* @__PURE__ */ new Map();
+  chainGraph.forEach((node, index) => {
+    if (!codeToIndex.has(node.code)) {
+      codeToIndex.set(node.code, index);
+    }
+  });
+  return codeToIndex;
+};
+const mapChainGraphBranches = (branches, chainGraph) => {
+  const codeToIndex = buildCodeToIndexMap(chainGraph);
+  return (branches ?? []).flatMap((branch) => {
+    const fromIndex = codeToIndex.get(branch.from_code);
+    const toIndex = codeToIndex.get(branch.to_code);
+    if (fromIndex === void 0 || toIndex === void 0 || fromIndex === toIndex) {
+      return [];
+    }
+    return [
+      {
+        fromIndex,
+        toIndex,
+        step: branch.node
+      }
+    ];
+  });
+};
+export {
+  mapChainGraphBranches
+};

package/ui/AttackTimeline/timelineConstants.js

@@ -0,0 +1,30 @@
+const TIMELINE_GREEN = "#4ac18e";
+const TIMELINE_INACTIVE = "#3b3d4f";
+const TIMELINE_BRANCH_ORANGE_START = "var(--bg-california)";
+const TIMELINE_BRANCH_ORANGE_END = "var(--bg-international-orange)";
+const BRANCH_HEIGHT_ABOVE = 75;
+const TIMELINE_PADDING_TOP = 10;
+const MARKER_CENTER_Y = TIMELINE_PADDING_TOP + 6.5;
+const BRANCH_OFFSET_TOP = MARKER_CENTER_Y - BRANCH_HEIGHT_ABOVE;
+const BRANCH_AREA_HEIGHT = BRANCH_HEIGHT_ABOVE;
+const BRANCH_TOP_Y = 0;
+const BRANCH_NODE_OFFSET_Y = -12;
+const BRANCH_BOTTOM_Y = BRANCH_HEIGHT_ABOVE;
+const BRANCH_LAYOUT_PADDING_TOP = BRANCH_HEIGHT_ABOVE;
+const DETECTION_BYPASS_LABEL = "Detection Bypass";
+export {
+  BRANCH_AREA_HEIGHT,
+  BRANCH_BOTTOM_Y,
+  BRANCH_HEIGHT_ABOVE,
+  BRANCH_LAYOUT_PADDING_TOP,
+  BRANCH_NODE_OFFSET_Y,
+  BRANCH_OFFSET_TOP,
+  BRANCH_TOP_Y,
+  DETECTION_BYPASS_LABEL,
+  MARKER_CENTER_Y,
+  TIMELINE_BRANCH_ORANGE_END,
+  TIMELINE_BRANCH_ORANGE_START,
+  TIMELINE_GREEN,
+  TIMELINE_INACTIVE,
+  TIMELINE_PADDING_TOP
+};

package/ui/AttackTimeline/useTimeline.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 const calculateLineHeight = (linePositionPercent, mouseX, timelineWidth) => {
   if (mouseX === null || timelineWidth === 0) return 24;
   const linePositionPx = linePositionPercent / 100 * timelineWidth;
@@ -10,9 +10,20 @@ const calculateLineHeight = (linePositionPercent, mouseX, timelineWidth) => {
   return 24 + (maxHeight - 24) * factor;
 };
 const useTimeline = () => {
+  const containerRef = useRef(null);
   const [hoveredIndex, setHoveredIndex] = useState(null);
+  const [hoveredBranchIndex, setHoveredBranchIndex] = useState(null);
   const [mouseX, setMouseX] = useState(null);
   const [timelineWidth, setTimelineWidth] = useState(0);
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    const updateWidth = () => setTimelineWidth(element.getBoundingClientRect().width);
+    updateWidth();
+    const observer = new ResizeObserver(updateWidth);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
   const handleMouseMove = useCallback((e) => {
     const rect = e.currentTarget.getBoundingClientRect();
     setMouseX(e.clientX - rect.left);
@@ -20,10 +31,13 @@ const useTimeline = () => {
   }, []);
   const handleMouseLeave = useCallback(() => setMouseX(null), []);
   return {
+    containerRef,
     mouseX,
     hoveredIndex,
+    hoveredBranchIndex,
     timelineWidth,
     setHoveredIndex,
+    setHoveredBranchIndex,
     handleMouseMove,
     handleMouseLeave
   };