beads-map 0.2.5 → 0.3.1

package/app/page.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useEffect, useState, useCallback, useMemo, useRef } from "react";
-import type { BeadsApiResponse, GraphNode, GraphLink } from "@/lib/types";
+import type { BeadsApiResponse, GraphNode, GraphLink, ColorMode } from "@/lib/types";
+import { getCatppuccinPrefixColor } from "@/lib/types";
 import { diffBeadsData, linkKey } from "@/lib/diff-beads";
 import type { BeadsDiff } from "@/lib/diff-beads";
 import BeadsGraph from "@/components/BeadsGraph";
@@ -13,6 +14,7 @@ import { BeadsLogo } from "@/components/BeadsLogo";
 import { CommentTooltip } from "@/components/CommentTooltip";
 import { ContextMenu } from "@/components/ContextMenu";
 import { DescriptionModal } from "@/components/DescriptionModal";
+import { BeadTooltip } from "@/components/BeadTooltip";
 import AllCommentsPanel from "@/components/AllCommentsPanel";
 import { ActivityOverlay } from "@/components/ActivityOverlay";
 import { ActivityPanel } from "@/components/ActivityPanel";
@@ -186,6 +188,8 @@ export default function Home() {
   const [error, setError] = useState<string | null>(null);
   const [selectedNode, setSelectedNode] = useState<GraphNode | null>(null);
   const [hoveredNode, setHoveredNode] = useState<GraphNode | null>(null);
+  const [collapsedEpicIds, setCollapsedEpicIds] = useState<Set<string>>(new Set());
+  const [colorMode, setColorMode] = useState<ColorMode>("status");
   const [projectName, setProjectName] = useState("Beads");
   const [repoCount, setRepoCount] = useState(0);
   const [repoUrls, setRepoUrls] = useState<Record<string, string>>({});
@@ -283,6 +287,13 @@ export default function Home() {
     y: number;
   } | null>(null);
 
+  // Node hover tooltip state
+  const [nodeTooltip, setNodeTooltip] = useState<{
+    node: GraphNode;
+    x: number;
+    y: number;
+  } | null>(null);
+
   // Search state
   const [searchOpen, setSearchOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
@@ -516,8 +527,49 @@ export default function Home() {
     setActivityPanelOpen(false);
   }, []);
 
-  const handleNodeHover = useCallback((node: GraphNode | null) => {
+  const handleNodeHover = useCallback((node: GraphNode | null, x: number, y: number) => {
     setHoveredNode(node);
+    setNodeTooltip(node ? { node, x, y } : null);
+  }, []);
+
+  const handleToggleEpicCollapse = useCallback((epicId: string) => {
+    setCollapsedEpicIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(epicId)) next.delete(epicId);
+      else next.add(epicId);
+      return next;
+    });
+  }, []);
+
+  // Compute all epic IDs that have children (for collapse-all)
+  const allParentEpicIds = useMemo(() => {
+    if (!data) return new Set<string>();
+    const { nodes, links } = data.graphData;
+    const parentIds = new Set<string>();
+    // From parent-child links
+    for (const link of links) {
+      if (link.type === "parent-child") {
+        const src = typeof link.source === "object" ? (link.source as any).id : link.source;
+        parentIds.add(src);
+      }
+    }
+    // From hierarchical IDs
+    const nodeIds = new Set(nodes.map((n) => n.id));
+    for (const node of nodes) {
+      if (node.id.includes(".")) {
+        const parentId = node.id.split(".")[0];
+        if (nodeIds.has(parentId)) parentIds.add(parentId);
+      }
+    }
+    return parentIds;
+  }, [data]);
+
+  const handleCollapseAll = useCallback(() => {
+    setCollapsedEpicIds(new Set(allParentEpicIds));
+  }, [allParentEpicIds]);
+
+  const handleExpandAll = useCallback(() => {
+    setCollapsedEpicIds(new Set());
   }, []);
 
   const handleBackgroundClick = useCallback(() => {
@@ -528,9 +580,10 @@ export default function Home() {
 
   const handleNodeRightClick = useCallback(
     (node: GraphNode, event: MouseEvent) => {
-      // Dismiss any open comment tooltip from a previous interaction
+      // Dismiss any open comment tooltip and hover tooltip
       setCommentTooltipState(null);
-      if (!node.description && !isAuthenticated) {
+      setNodeTooltip(null);
+      if (!node.description && !isAuthenticated && node.issueType !== "epic") {
         // No description and not logged in → only action is comment → skip menu
         setCommentTooltipState({
           node,
@@ -742,17 +795,38 @@ export default function Home() {
     [data]
   );
 
-  // Search results - fuzzy match on id and title
+  // Build a map of nodeId -> commenter handles string for search
+  const commenterHandlesByNode = useMemo(() => {
+    const map = new Map<string, string>();
+    if (!allComments) return map;
+    const handlesMap = new Map<string, Set<string>>();
+    for (const comment of allComments) {
+      if (!handlesMap.has(comment.nodeId)) {
+        handlesMap.set(comment.nodeId, new Set());
+      }
+      handlesMap.get(comment.nodeId)!.add(comment.handle);
+      if (comment.displayName) {
+        handlesMap.get(comment.nodeId)!.add(comment.displayName);
+      }
+    }
+    for (const [nodeId, handles] of handlesMap) {
+      map.set(nodeId, Array.from(handles).join(" "));
+    }
+    return map;
+  }, [allComments]);
+
+  // Search results - fuzzy match on id, title, people, and commenter handles
   const searchResults = useMemo(() => {
     if (!data || !searchQuery.trim()) return [];
     const term = searchQuery.toLowerCase();
     return data.graphData.nodes
       .filter((n) => {
-        const searchable = `${n.id} ${n.title} ${n.prefix}`.toLowerCase();
+        const commenters = commenterHandlesByNode.get(n.id) || "";
+        const searchable = `${n.id} ${n.title} ${n.prefix} ${n.owner || ""} ${n.assignee || ""} ${n.createdBy || ""} ${commenters}`.toLowerCase();
         return searchable.includes(term);
       })
       .slice(0, 8);
-  }, [searchQuery, data]);
+  }, [searchQuery, data, commenterHandlesByNode]);
 
   // Reset highlight index when query changes
   useEffect(() => {
@@ -1172,6 +1246,11 @@ export default function Home() {
             timelineActive={timelineActive}
             stats={data.stats}
             sidebarOpen={!!selectedNode || allCommentsPanelOpen || activityPanelOpen}
+            collapsedEpicIds={collapsedEpicIds}
+            onCollapseAll={handleCollapseAll}
+            onExpandAll={handleExpandAll}
+            colorMode={colorMode}
+            onColorModeChange={setColorMode}
           />
 
           {/* Timeline bar — replaces legend hint when active */}
@@ -1252,6 +1331,24 @@ export default function Home() {
                   setContextMenu(null);
                 };
               })()}
+              onCollapseEpic={
+                contextMenu.node.issueType === "epic" &&
+                !collapsedEpicIds.has(contextMenu.node.id)
+                  ? () => {
+                      handleToggleEpicCollapse(contextMenu.node.id);
+                      setContextMenu(null);
+                    }
+                  : undefined
+              }
+              onUncollapseEpic={
+                contextMenu.node.issueType === "epic" &&
+                collapsedEpicIds.has(contextMenu.node.id)
+                  ? () => {
+                      handleToggleEpicCollapse(contextMenu.node.id);
+                      setContextMenu(null);
+                    }
+                  : undefined
+              }
               onClose={() => setContextMenu(null)}
             />
           )}
@@ -1282,6 +1379,17 @@ export default function Home() {
             />
           )}
 
+          {/* Node hover tooltip */}
+          {nodeTooltip && !avatarTooltip && (
+            <BeadTooltip
+              node={nodeTooltip.node}
+              x={nodeTooltip.x}
+              y={nodeTooltip.y}
+              prefixColor={getCatppuccinPrefixColor(nodeTooltip.node.prefix)}
+              allNodes={timelineActive && timelineData ? timelineData.graphData.nodes : data.graphData.nodes}
+            />
+          )}
+
           {/* Avatar hover tooltip */}
           {avatarTooltip && (
             <div

package/components/BeadTooltip.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import { useRef, useState, useEffect } from "react";
+import { GraphNode, PRIORITY_LABELS, PRIORITY_COLORS } from "@/lib/types";
+import { formatRelativeTime } from "@/lib/utils";
+
+interface BeadTooltipProps {
+  node: GraphNode;
+  x: number;
+  y: number;
+  prefixColor: string;
+  allNodes: GraphNode[];
+}
+
+const COLORS = {
+  bg: "#FFFFFF",
+  border: "#E5E7EB",
+  borderLight: "#F3F4F6",
+  shadow: "rgba(0,0,0,0.08)",
+  text: "#131316",
+  textMuted: "#737680",
+  textDim: "#7F818B",
+};
+
+export function BeadTooltip({ node, x, y, prefixColor, allNodes }: BeadTooltipProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+
+  useEffect(() => {
+    if (!ref.current) return;
+    const tt = ref.current.getBoundingClientRect();
+    const pad = 14;
+
+    // Prefer placing above and to the right of cursor
+    let nx = x + pad;
+    let ny = y - tt.height - pad;
+
+    // Clamp to viewport edges
+    if (nx + tt.width > window.innerWidth - 16) {
+      nx = x - tt.width - pad;
+    }
+    if (nx < 16) nx = 16;
+    if (ny < 16) {
+      ny = y + pad + 8;
+    }
+    if (ny + tt.height > window.innerHeight - 16) {
+      ny = window.innerHeight - tt.height - 16;
+    }
+
+    setPos({ x: nx, y: ny });
+  }, [x, y]);
+
+  // Resolve blocker IDs to short titles
+  const blockers = node.dependentIds
+    .map((id) => {
+      const blockerNode = allNodes.find((n) => n.id === id);
+      return blockerNode ? { id, title: blockerNode.title } : { id, title: id };
+    })
+    .filter(Boolean);
+
+  const priorityLabel = PRIORITY_LABELS[node.priority] || `P${node.priority}`;
+  const priorityColor = PRIORITY_COLORS[node.priority] || "#a1a1aa";
+
+  return (
+    <div
+      ref={ref}
+      className="bead-tooltip"
+      style={{
+        position: "fixed",
+        left: pos.x,
+        top: pos.y,
+        width: 280,
+        zIndex: 100,
+        pointerEvents: "none",
+        background: COLORS.bg,
+        border: `1px solid ${COLORS.border}`,
+        boxShadow: `0 8px 32px ${COLORS.shadow}, 0 2px 8px ${COLORS.shadow}`,
+        borderRadius: 8,
+        padding: "16px 18px",
+        animation: "beadTooltipFade 0.2s ease",
+      }}
+    >
+      {/* Accent bar */}
+      <div
+        style={{
+          width: 24,
+          height: 2,
+          background: prefixColor,
+          opacity: 0.5,
+          marginBottom: 10,
+          borderRadius: 1,
+        }}
+      />
+
+      {/* Title */}
+      <div
+        style={{
+          fontSize: 14,
+          fontWeight: 600,
+          color: COLORS.text,
+          lineHeight: 1.25,
+          marginBottom: 12,
+          overflow: "hidden",
+          display: "-webkit-box",
+          WebkitLineClamp: 2,
+          WebkitBoxOrient: "vertical",
+        }}
+      >
+        {node.title}
+      </div>
+
+      {/* Metadata rows */}
+      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+        {/* Created */}
+        <div>
+          <div style={labelStyle}>Created</div>
+          <div style={valueStyle}>{formatRelativeTime(node.createdAt)}</div>
+        </div>
+
+        {/* Owner */}
+        {node.owner && (
+          <div>
+            <div style={labelStyle}>Owner</div>
+            <div style={valueStyle}>{node.owner}</div>
+          </div>
+        )}
+
+        {/* Assignee */}
+        {(node.assignee || node.createdBy) && (
+          <div>
+            {node.assignee && (
+              <>
+                <div style={labelStyle}>Assignee</div>
+                <div style={valueStyle}>{node.assignee}</div>
+              </>
+            )}
+            {node.createdBy && !node.assignee && (
+              <>
+                <div style={labelStyle}>Created by</div>
+                <div style={valueStyle}>{node.createdBy}</div>
+              </>
+            )}
+            {node.createdBy && node.assignee && node.createdBy !== node.assignee && (
+              <>
+                <div style={{ ...labelStyle, marginTop: 4 }}>Created by</div>
+                <div style={valueStyle}>{node.createdBy}</div>
+              </>
+            )}
+          </div>
+        )}
+
+        {/* Blocked by */}
+        <div>
+          <div style={labelStyle}>Blocked by</div>
+          {blockers.length === 0 ? (
+            <div style={{ ...valueStyle, color: "#10b981" }}>None</div>
+          ) : (
+            <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
+              {blockers.map((b) => (
+                <div key={b.id} style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
+                  <span
+                    style={{
+                      fontSize: 10,
+                      fontFamily: "monospace",
+                      color: COLORS.textDim,
+                      flexShrink: 0,
+                    }}
+                  >
+                    {b.id}
+                  </span>
+                  <span
+                    style={{
+                      fontSize: 12,
+                      color: COLORS.textMuted,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {b.title}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Priority */}
+        <div style={{ borderTop: `1px solid ${COLORS.borderLight}`, paddingTop: 8 }}>
+          <div style={labelStyle}>Priority</div>
+          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+            <div
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: "50%",
+                background: priorityColor,
+                flexShrink: 0,
+              }}
+            />
+            <span style={valueStyle}>{priorityLabel}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const labelStyle: React.CSSProperties = {
+  fontSize: 10,
+  fontWeight: 600,
+  letterSpacing: 1.5,
+  textTransform: "uppercase",
+  color: "#7F818B",
+  marginBottom: 3,
+};
+
+const valueStyle: React.CSSProperties = {
+  fontSize: 12,
+  color: "#737680",
+  lineHeight: 1.45,
+};