beads-map 0.2.4 → 0.3.0

package/components/BeadsGraph.tsx

@@ -9,7 +9,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { forceCollide } from "d3-force";
+import { forceCollide, forceRadial, forceX, forceY } from "d3-force";
 import type { GraphNode, GraphLink } from "@/lib/types";
 import { STATUS_COLORS, STATUS_LABELS, PREFIX_COLORS } from "@/lib/types";
 
@@ -18,9 +18,7 @@ import { STATUS_COLORS, STATUS_LABELS, PREFIX_COLORS } from "@/lib/types";
 // that does NOT forward refs, breaking graphRef.current.centerAt/zoom/etc.
 let _ForceGraph2DModule: React.ComponentType<any> | null = null;
 
-type LayoutMode = "force" | "dag";
-type ViewMode = "full" | "epics";
-
+type LayoutMode = "force" | "dag" | "radial" | "cluster" | "spread";
 export interface BeadsGraphHandle {
   focusNode: (node: GraphNode) => void;
 }
@@ -31,7 +29,7 @@ interface BeadsGraphProps {
   selectedNode: GraphNode | null;
   hoveredNode: GraphNode | null;
   onNodeClick: (node: GraphNode) => void;
-  onNodeHover: (node: GraphNode | null) => void;
+  onNodeHover: (node: GraphNode | null, x: number, y: number) => void;
   onBackgroundClick: () => void;
   onNodeRightClick?: (node: GraphNode, event: MouseEvent) => void;
   commentedNodeIds?: Map<string, number>;
@@ -41,6 +39,12 @@ interface BeadsGraphProps {
   stats?: { total: number; edges: number; prefixes: string[] };
   /** When a right sidebar (NodeDetail, Comments, Activity) is open, shift bottom-right legend inward */
   sidebarOpen?: boolean;
+  /** Set of epic IDs that are currently collapsed */
+  collapsedEpicIds?: Set<string>;
+  /** Collapse all epics at once */
+  onCollapseAll?: () => void;
+  /** Expand all epics at once */
+  onExpandAll?: () => void;
 }
 
 // Node size calculation
@@ -208,6 +212,9 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
   timelineActive,
   stats,
   sidebarOpen,
+  collapsedEpicIds,
+  onCollapseAll,
+  onExpandAll,
 }, ref) {
   const graphRef = useRef<any>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -247,8 +254,6 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
   // Layout mode: "force" (physics-based) or "dag" (topological top-down)
   const [layoutMode, setLayoutMode] = useState<LayoutMode>("dag");
 
-  // View mode: "full" (all nodes) or "epics" (collapse children into parent epics)
-  const [viewMode, setViewMode] = useState<ViewMode>("full");
 
 
 
@@ -272,6 +277,9 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
   // Track which avatar is currently hovered to avoid redundant callbacks
   const hoveredAvatarNodeRef = useRef<string | null>(null);
 
+  // Track last mouse position for passing coordinates with onNodeHover
+  const lastMouseRef = useRef({ x: 0, y: 0 });
+
   // Ref for current viewNodes (used by mousemove handler to respect epics view)
   const viewNodesRef = useRef<GraphNode[]>(nodes);
 
@@ -286,14 +294,14 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
   };
   const clustersRef = useRef<ClusterInfo[]>([]);
 
-  // Compute collapsed view when in "epics" mode.
-  // Builds a child→parent map from parent-child dependencies and hierarchical IDs,
+  // Compute collapsed view when any epics are collapsed via collapsedEpicIds.
+  // Builds a child->parent map from parent-child dependencies and hierarchical IDs,
   // then removes child nodes and remaps their links to the parent epic.
   // Must be declared BEFORE effects that reference viewNodes/viewLinks.
   const { viewNodes, viewLinks } = useMemo(() => {
-    if (viewMode === "full") return { viewNodes: nodes, viewLinks: links };
+    if (!collapsedEpicIds || collapsedEpicIds.size === 0) return { viewNodes: nodes, viewLinks: links };
 
-    // Build child→parent map from parent-child links
+    // Build child->parent map from parent-child links
     const childToParent = new Map<string, string>();
     for (const link of links) {
       const src = typeof link.source === "object" ? (link.source as any).id : link.source;
@@ -303,7 +311,7 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
         childToParent.set(tgt, src);
       }
     }
-    // Fallback: infer from hierarchical IDs (e.g., "beads-map-3r3.1" → parent "beads-map-3r3")
+    // Fallback: infer from hierarchical IDs (e.g., "beads-map-3r3.1" -> parent "beads-map-3r3")
     const nodeIds = new Set(nodes.map((n) => n.id));
     for (const node of nodes) {
       if (!childToParent.has(node.id) && node.id.includes(".")) {
@@ -314,13 +322,27 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
       }
     }
 
-    const childIds = new Set(childToParent.keys());
+    // Collapse children whose parent is in collapsedEpicIds
+    const childIds = new Set<string>();
+    for (const [childId, parentId] of childToParent) {
+      if (collapsedEpicIds.has(parentId)) {
+        childIds.add(childId);
+      }
+    }
+
+    if (childIds.size === 0) return { viewNodes: nodes, viewLinks: links };
+
+    // Also build a filtered childToParent for only the collapsed children (for link remapping)
+    const collapsedChildToParent = new Map<string, string>();
+    for (const childId of childIds) {
+      collapsedChildToParent.set(childId, childToParent.get(childId)!);
+    }
 
     // Accumulate collapsed children count and extra connections onto parent nodes
     const collapsedCounts = new Map<string, number>();
     const extraBlockerCount = new Map<string, number>();
     const extraDependentCount = new Map<string, number>();
-    for (const [childId, parentId] of childToParent) {
+    for (const [childId, parentId] of collapsedChildToParent) {
       collapsedCounts.set(parentId, (collapsedCounts.get(parentId) || 0) + 1);
       const child = nodes.find((n) => n.id === childId);
       if (child) {
@@ -329,7 +351,7 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
       }
     }
 
-    // Filter nodes: remove children, augment parents
+    // Filter nodes: remove collapsed children, augment their parents
     const filteredNodes: GraphNode[] = nodes
       .filter((n) => !childIds.has(n.id))
       .map((n) => ({
@@ -339,15 +361,17 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
         collapsedCount: collapsedCounts.get(n.id) || 0,
       }));
 
-    // Remap links: replace child IDs with parent IDs, drop parent-child and self-links
+    // Remap links: replace collapsed child IDs with parent IDs, drop internal parent-child links
     const remappedLinks: GraphLink[] = [];
     const linkSeen = new Set<string>();
     for (const link of links) {
-      if (link.type === "parent-child") continue; // internal to collapsed epic
       let src = typeof link.source === "object" ? (link.source as any).id : link.source;
       let tgt = typeof link.target === "object" ? (link.target as any).id : link.target;
-      src = childToParent.get(src) || src;
-      tgt = childToParent.get(tgt) || tgt;
+      // Drop parent-child links where the child is collapsed
+      if (link.type === "parent-child" && childIds.has(tgt)) continue;
+      // Remap collapsed child endpoints to their parent
+      src = collapsedChildToParent.get(src) || src;
+      tgt = collapsedChildToParent.get(tgt) || tgt;
       if (src === tgt) continue; // self-link after collapse
       const key = `${src}->${tgt}:${link.type}`;
       if (linkSeen.has(key)) continue;
@@ -356,7 +380,7 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
     }
 
     return { viewNodes: filteredNodes, viewLinks: remappedLinks };
-  }, [nodes, links, viewMode]);
+  }, [nodes, links, collapsedEpicIds]);
 
   // Keep viewNodesRef in sync for mousemove avatar hit-testing
   viewNodesRef.current = viewNodes;
@@ -463,6 +487,9 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
     if (!container) return;
 
     const handleMouseMove = (e: MouseEvent) => {
+      // Track last mouse position for onNodeHover coordinates
+      lastMouseRef.current = { x: e.clientX, y: e.clientY };
+
       const fg = graphRef.current;
       const cb = onAvatarHoverRef.current;
       if (!fg || !cb) return;
@@ -575,16 +602,139 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
     const fg = graphRef.current;
     if (!fg || viewNodes.length === 0) return;
 
+    // Helper: clear custom forces that only specific layouts use.
+    // Must be called at the start of every branch to prevent stale forces.
+    const clearCustomForces = () => {
+      fg.d3Force("radial", null);
+      fg.d3Force("x", null);
+      fg.d3Force("y", null);
+    };
+
+    // Helper: clear fixed positions left over from DAG mode.
+    const clearFixedPositions = () => {
+      viewNodes.forEach((node: any) => {
+        delete node.fx;
+        delete node.fy;
+      });
+    };
+
     if (layoutMode === "dag") {
       // DAG mode: weaker charge since vertical spacing is handled by layers.
+      clearCustomForces();
       fg.d3Force("charge")?.strength(-80).distanceMax(300);
       fg.d3Force("link")?.distance(50).strength(0.3);
       fg.d3Force("center")?.strength(0.01);
-
       // Remove collision in DAG mode (layers handle vertical separation)
       fg.d3Force("collision", null);
+
+    } else if (layoutMode === "radial") {
+      // Radial layout: concentric rings by dependency depth.
+      // Compute BFS depth from root nodes (no incoming blocks edges).
+      clearCustomForces();
+      clearFixedPositions();
+
+      const incoming = new Map<string, string[]>();
+      for (const link of viewLinks) {
+        if (link.type === "parent-child") continue;
+        const tgt = typeof link.target === "object" ? (link.target as any).id : link.target;
+        const src = typeof link.source === "object" ? (link.source as any).id : link.source;
+        if (!incoming.has(tgt)) incoming.set(tgt, []);
+        incoming.get(tgt)!.push(src);
+      }
+      const depthMap = new Map<string, number>();
+      const queue: string[] = [];
+      viewNodes.forEach((n: any) => {
+        if (!incoming.has(n.id)) { depthMap.set(n.id, 0); queue.push(n.id); }
+      });
+      let qi = 0;
+      while (qi < queue.length) {
+        const id = queue[qi++];
+        const d = depthMap.get(id)!;
+        for (const link of viewLinks) {
+          if (link.type === "parent-child") continue;
+          const src = typeof link.source === "object" ? (link.source as any).id : link.source;
+          const tgt = typeof link.target === "object" ? (link.target as any).id : link.target;
+          if (src === id && !depthMap.has(tgt)) {
+            depthMap.set(tgt, d + 1);
+            queue.push(tgt);
+          }
+        }
+      }
+      // Store depth transiently on each node for the radial force accessor
+      viewNodes.forEach((n: any) => { n._depth = depthMap.get(n.id) ?? 0; });
+
+      // Scale ring spacing by node count so rings don't overlap
+      const maxDepth = Math.max(1, ...Array.from(depthMap.values()));
+      const ringSpacing = Math.max(200, viewNodes.length * 4);
+
+      fg.d3Force("charge")?.strength(-300).distanceMax(800);
+      fg.d3Force("link")?.distance(150).strength(0.15);
+      fg.d3Force("center")?.strength(0); // no center pull — radial handles centering
+      fg.d3Force("radial",
+        forceRadial(
+          (node: any) => ((node as any)._depth || 0) * ringSpacing,
+          0, 0
+        ).strength(0.8)
+      );
+      fg.d3Force("x", null); // let radial + charge handle positioning
+      fg.d3Force("y", null);
+      fg.d3Force("collision",
+        forceCollide()
+          .radius((node: any) => getNodeSize(node as GraphNode) + 10)
+          .strength(0.9)
+      );
+
+    } else if (layoutMode === "cluster") {
+      // Cluster layout: group nodes by project prefix.
+      clearCustomForces();
+      clearFixedPositions();
+
+      const prefixes = [...new Set(viewNodes.map((n: any) => (n as GraphNode).prefix))];
+      // Scale cluster separation by total node count — more nodes need more space
+      const radius = Math.max(400, viewNodes.length * 5, prefixes.length * 150);
+      const prefixCenters = new Map<string, { x: number; y: number }>();
+      prefixes.forEach((prefix, i) => {
+        const angle = (2 * Math.PI * i) / prefixes.length - Math.PI / 2;
+        prefixCenters.set(prefix, {
+          x: Math.cos(angle) * radius,
+          y: Math.sin(angle) * radius,
+        });
+      });
+
+      fg.d3Force("charge")?.strength(-200).distanceMax(600);
+      fg.d3Force("link")?.distance(100).strength(0.15);
+      fg.d3Force("center")?.strength(0); // no center pull — x/y handle positioning
+      fg.d3Force("x",
+        forceX((node: any) => prefixCenters.get((node as GraphNode).prefix)?.x || 0).strength(0.5)
+      );
+      fg.d3Force("y",
+        forceY((node: any) => prefixCenters.get((node as GraphNode).prefix)?.y || 0).strength(0.5)
+      );
+      fg.d3Force("collision",
+        forceCollide()
+          .radius((node: any) => getNodeSize(node as GraphNode) + 10)
+          .strength(0.9)
+      );
+
+    } else if (layoutMode === "spread") {
+      // Spread layout: like force but maximally spaced for readability.
+      clearCustomForces();
+      clearFixedPositions();
+
+      fg.d3Force("charge")?.strength(-300).distanceMax(500);
+      fg.d3Force("link")?.distance(180).strength(0.4);
+      fg.d3Force("center")?.strength(0.02);
+      fg.d3Force("collision",
+        forceCollide()
+          .radius((node: any) => getNodeSize(node as GraphNode) + 8)
+          .strength(0.8)
+      );
+
     } else {
-      // Force mode: full physics
+      // Force mode: full physics (default)
+      clearCustomForces();
+      clearFixedPositions();
+
       fg.d3Force("charge")?.strength(-180).distanceMax(400);
       fg.d3Force("link")
         ?.distance((link: any) => {
@@ -599,23 +749,11 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
         })
         .strength(0.6);
       fg.d3Force("center")?.strength(0.03);
-
-      // Add collision force (prevent node overlap).
-      // Using static import so collision is active from tick 1 (including warmup).
-      fg.d3Force(
-        "collision",
+      fg.d3Force("collision",
         forceCollide()
           .radius((node: any) => getNodeSize(node as GraphNode) + 6)
           .strength(0.7)
       );
-
-      // Clear any fixed positions left over from DAG mode.
-      // The force simulation mutates node objects in-place, so the nodes
-      // prop array already has fx/fy set by DAG mode — delete them directly.
-      viewNodes.forEach((node: any) => {
-        delete node.fx;
-        delete node.fy;
-      });
     }
 
     // Re-heat simulation so new forces take effect immediately
@@ -630,7 +768,7 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
     initialLayoutApplied.current = true;
 
     return () => clearTimeout(timer);
-  }, [layoutMode, viewNodes.length]);
+  }, [layoutMode, viewNodes, viewLinks]);
 
   // Bootstrap trick: start in DAG to spread nodes into good positions,
   // then auto-switch to Force mode. This replicates the exact code path
@@ -1643,14 +1781,11 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
               <span className="hidden sm:inline">DAG</span>
             </span>
           </button>
-        </div>
-
-        {/* View mode toggle: Full / Epics */}
-        <div className="flex bg-white/90 backdrop-blur-sm rounded-lg border border-zinc-200 shadow-sm overflow-hidden">
+          <div className="w-px bg-zinc-200" />
           <button
-            onClick={() => setViewMode("full")}
+            onClick={() => setLayoutMode("radial")}
             className={`px-3 py-1.5 text-xs font-medium transition-colors ${
-              viewMode === "full"
+              layoutMode === "radial"
                 ? "bg-emerald-500 text-white"
                 : "text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50"
             }`}
@@ -1663,21 +1798,47 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
                 stroke="currentColor"
                 strokeWidth="1.5"
               >
-                {/* Grid/all icon: 4 dots in a grid */}
-                <circle cx="4" cy="4" r="1.5" fill="currentColor" stroke="none" />
-                <circle cx="12" cy="4" r="1.5" fill="currentColor" stroke="none" />
-                <circle cx="4" cy="12" r="1.5" fill="currentColor" stroke="none" />
-                <circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none" />
-                <circle cx="8" cy="8" r="1" fill="currentColor" stroke="none" opacity="0.5" />
+                {/* Radial icon: concentric rings with center dot */}
+                <circle cx="8" cy="8" r="2" fill="currentColor" stroke="none" />
+                <circle cx="8" cy="8" r="5" fill="none" strokeOpacity="0.5" />
+                <circle cx="8" cy="8" r="7.5" fill="none" strokeOpacity="0.3" />
+              </svg>
+              <span className="hidden sm:inline">Radial</span>
+            </span>
+          </button>
+          <div className="w-px bg-zinc-200" />
+          <button
+            onClick={() => setLayoutMode("cluster")}
+            className={`px-3 py-1.5 text-xs font-medium transition-colors ${
+              layoutMode === "cluster"
+                ? "bg-emerald-500 text-white"
+                : "text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50"
+            }`}
+          >
+            <span className="flex items-center gap-1.5">
+              <svg
+                className="w-3.5 h-3.5"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+              >
+                {/* Cluster icon: two groups of dots */}
+                <circle cx="3.5" cy="4" r="1.5" fill="currentColor" stroke="none" />
+                <circle cx="6" cy="6" r="1.5" fill="currentColor" stroke="none" />
+                <circle cx="3" cy="7" r="1.5" fill="currentColor" stroke="none" />
+                <circle cx="11" cy="10" r="1.5" fill="currentColor" stroke="none" />
+                <circle cx="13.5" cy="11.5" r="1.5" fill="currentColor" stroke="none" />
+                <circle cx="11" cy="13" r="1.5" fill="currentColor" stroke="none" />
               </svg>
-              <span className="hidden sm:inline">Full</span>
+              <span className="hidden sm:inline">Cluster</span>
             </span>
           </button>
           <div className="w-px bg-zinc-200" />
           <button
-            onClick={() => setViewMode("epics")}
+            onClick={() => setLayoutMode("spread")}
             className={`px-3 py-1.5 text-xs font-medium transition-colors ${
-              viewMode === "epics"
+              layoutMode === "spread"
                 ? "bg-emerald-500 text-white"
                 : "text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50"
             }`}
@@ -1690,14 +1851,61 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
                 stroke="currentColor"
                 strokeWidth="1.5"
               >
-                {/* Collapsed/epic icon: large dot with small dots absorbed */}
-                <circle cx="8" cy="8" r="4" fill="currentColor" stroke="none" />
-                <circle cx="8" cy="8" r="6" stroke="currentColor" fill="none" opacity="0.3" />
+                {/* Spread icon: dots spread far apart */}
+                <circle cx="2" cy="2" r="1.5" fill="currentColor" stroke="none" />
+                <circle cx="14" cy="3" r="1.5" fill="currentColor" stroke="none" />
+                <circle cx="8" cy="8" r="1.5" fill="currentColor" stroke="none" />
+                <circle cx="3" cy="14" r="1.5" fill="currentColor" stroke="none" />
+                <circle cx="13" cy="13" r="1.5" fill="currentColor" stroke="none" />
               </svg>
-              <span className="hidden sm:inline">Epics</span>
+              <span className="hidden sm:inline">Spread</span>
             </span>
           </button>
         </div>
+
+        {/* Collapse / Expand all toggle */}
+        {(onCollapseAll || onExpandAll) && (
+          <button
+            onClick={collapsedEpicIds && collapsedEpicIds.size > 0 ? onExpandAll : onCollapseAll}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-white/90 backdrop-blur-sm rounded-lg border border-zinc-200 shadow-sm text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50 transition-colors"
+          >
+            {collapsedEpicIds && collapsedEpicIds.size > 0 ? (
+              <>
+                <svg
+                  className="w-3.5 h-3.5"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  strokeWidth={1.5}
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
+                  />
+                </svg>
+                <span className="hidden sm:inline">Expand all</span>
+              </>
+            ) : (
+              <>
+                <svg
+                  className="w-3.5 h-3.5"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  strokeWidth={1.5}
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25"
+                  />
+                </svg>
+                <span className="hidden sm:inline">Collapse all</span>
+              </>
+            )}
+          </button>
+        )}
       </div>
 
       {/* Bottom-right info panel: stats + status colors + legend (hidden when timeline active) */}
@@ -1867,7 +2075,7 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
           // Interactions
           onNodeClick={(node: any) => onNodeClick(node as GraphNode)}
           onNodeHover={(node: any) =>
-            onNodeHover(node ? (node as GraphNode) : null)
+            onNodeHover(node ? (node as GraphNode) : null, lastMouseRef.current.x, lastMouseRef.current.y)
           }
           onNodeRightClick={(node: any, event: MouseEvent) => {
             event.preventDefault();

package/components/ContextMenu.tsx

@@ -11,6 +11,8 @@ interface ContextMenuProps {
   onAddComment: () => void;
   onClaimTask?: () => void;
   onUnclaimTask?: () => void;
+  onCollapseEpic?: () => void;
+  onUncollapseEpic?: () => void;
   onClose: () => void;
 }
 
@@ -22,6 +24,8 @@ export function ContextMenu({
   onAddComment,
   onClaimTask,
   onUnclaimTask,
+  onCollapseEpic,
+  onUncollapseEpic,
   onClose,
 }: ContextMenuProps) {
   const menuRef = useRef<HTMLDivElement>(null);
@@ -115,7 +119,7 @@ export function ContextMenu({
         )}
         <button
           onClick={onAddComment}
-          className={`w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors${onClaimTask || onUnclaimTask ? " border-b border-zinc-100" : ""}`}
+          className={`w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors${onClaimTask || onUnclaimTask || onCollapseEpic || onUncollapseEpic ? " border-b border-zinc-100" : ""}`}
         >
           <svg
             className="w-3.5 h-3.5 text-zinc-400"
@@ -135,7 +139,7 @@ export function ContextMenu({
         {onClaimTask && (
           <button
             onClick={onClaimTask}
-            className="w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors"
+            className={`w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors${onCollapseEpic || onUncollapseEpic ? " border-b border-zinc-100" : ""}`}
           >
             <svg
               className="w-3.5 h-3.5 text-zinc-400"
@@ -156,7 +160,7 @@ export function ContextMenu({
         {onUnclaimTask && (
           <button
             onClick={onUnclaimTask}
-            className="w-full px-3 py-2.5 text-xs text-red-500 hover:bg-red-50 flex items-center gap-2 transition-colors"
+            className={`w-full px-3 py-2.5 text-xs text-red-500 hover:bg-red-50 flex items-center gap-2 transition-colors${onCollapseEpic || onUncollapseEpic ? " border-b border-zinc-100" : ""}`}
           >
             <svg
               className="w-3.5 h-3.5 text-red-400"
@@ -174,6 +178,48 @@ export function ContextMenu({
             Unclaim task
           </button>
         )}
+        {onCollapseEpic && (
+          <button
+            onClick={onCollapseEpic}
+            className="w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors"
+          >
+            <svg
+              className="w-3.5 h-3.5 text-zinc-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25"
+              />
+            </svg>
+            Collapse epic
+          </button>
+        )}
+        {onUncollapseEpic && (
+          <button
+            onClick={onUncollapseEpic}
+            className="w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors"
+          >
+            <svg
+              className="w-3.5 h-3.5 text-zinc-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
+              />
+            </svg>
+            Uncollapse epic
+          </button>
+        )}
       </div>
     </div>
   );

package/lib/parse-beads.ts

@@ -145,6 +145,8 @@ export function buildGraphData(
     priority: issue.priority,
     issueType: issue.issue_type,
     owner: issue.owner,
+    assignee: issue.assignee,
+    createdBy: issue.created_by,
     createdAt: issue.created_at,
     updatedAt: issue.updated_at,
     closedAt: issue.closed_at,

package/lib/types.ts

@@ -42,6 +42,8 @@ export interface GraphNode {
   priority: number;
   issueType: BeadIssue["issue_type"];
   owner?: string;
+  assignee?: string;
+  createdBy?: string;
   createdAt: string;
   updatedAt: string;
   closedAt?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beads-map",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "Interactive dependency graph viewer for beads (bd) issues",
   "keywords": [
     "beads",

package/.next/server/app/api/config.body

@@ -1 +0,0 @@
-{"name":"beads-map","prefix":null,"repoCount":1,"repos":["."],"repoUrls":{"beads-map":"https://github.com/GainForest/beads-map"}}

package/.next/server/app/api/config.meta

@@ -1 +0,0 @@
-{"status":200,"headers":{"content-type":"application/json","x-next-cache-tags":"_N_T_/layout,_N_T_/api/layout,_N_T_/api/config/layout,_N_T_/api/config/route,_N_T_/api/config"}}