beads-map 0.3.0 → 0.3.1

package/app/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { useEffect, useState, useCallback, useMemo, useRef } from "react";
-import type { BeadsApiResponse, GraphNode, GraphLink } from "@/lib/types";
-import { getPrefixColor } 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";
@@ -189,6 +189,7 @@ export default function Home() {
   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>>({});
@@ -1248,6 +1249,8 @@ export default function Home() {
             collapsedEpicIds={collapsedEpicIds}
             onCollapseAll={handleCollapseAll}
             onExpandAll={handleExpandAll}
+            colorMode={colorMode}
+            onColorModeChange={setColorMode}
           />
 
           {/* Timeline bar — replaces legend hint when active */}
@@ -1382,7 +1385,7 @@ export default function Home() {
               node={nodeTooltip.node}
               x={nodeTooltip.x}
               y={nodeTooltip.y}
-              prefixColor={getPrefixColor(nodeTooltip.node.prefix)}
+              prefixColor={getCatppuccinPrefixColor(nodeTooltip.node.prefix)}
               allNodes={timelineActive && timelineData ? timelineData.graphData.nodes : data.graphData.nodes}
             />
           )}

package/components/BeadsGraph.tsx

@@ -10,8 +10,11 @@ import React, {
   useState,
 } from "react";
 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";
+import type { GraphNode, GraphLink, ColorMode } from "@/lib/types";
+import {
+  STATUS_COLORS, STATUS_LABELS,
+  COLOR_MODE_LABELS, getPersonColor, getCatppuccinPrefixColor, getPrefixLabel,
+} from "@/lib/types";
 
 // Lazy-load ForceGraph2D client-side (it requires window/document).
 // We avoid next/dynamic because it wraps the component in a LoadableComponent
@@ -45,6 +48,10 @@ interface BeadsGraphProps {
   onCollapseAll?: () => void;
   /** Expand all epics at once */
   onExpandAll?: () => void;
+  /** Current color mode for node body fill */
+  colorMode?: ColorMode;
+  /** Callback to change color mode (from legend selector) */
+  onColorModeChange?: (mode: ColorMode) => void;
 }
 
 // Node size calculation
@@ -62,14 +69,27 @@ function getNodeSize(node: GraphNode): number {
   return MIN_SIZE + normalized * (MAX_SIZE - MIN_SIZE);
 }
 
-// Get color based on status
+// Module-level color mode tracker (synced from component via useEffect)
+let _currentColorMode: ColorMode = "status";
+
+// Get color based on current color mode
 function getNodeColor(node: GraphNode): string {
-  return STATUS_COLORS[node.status] || STATUS_COLORS.open;
+  switch (_currentColorMode) {
+    case "owner":
+      return getPersonColor(node.createdBy);
+    case "assignee":
+      return getPersonColor(node.assignee);
+    case "prefix":
+      return getCatppuccinPrefixColor(node.prefix);
+    case "status":
+    default:
+      return STATUS_COLORS[node.status] || STATUS_COLORS.open;
+  }
 }
 
-// Get a slightly transparent version of the prefix color for the ring
-function getPrefixColor(node: GraphNode): string {
-  return PREFIX_COLORS[node.prefix] || "#a1a1aa";
+// Get prefix color for the outer ring — uses Catppuccin palette for consistency
+function getPrefixRingColor(node: GraphNode): string {
+  return getCatppuccinPrefixColor(node.prefix);
 }
 
 // Animation duration constants
@@ -215,6 +235,8 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
   collapsedEpicIds,
   onCollapseAll,
   onExpandAll,
+  colorMode = "status",
+  onColorModeChange,
 }, ref) {
   const graphRef = useRef<any>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -254,6 +276,9 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
   // Layout mode: "force" (physics-based) or "dag" (topological top-down)
   const [layoutMode, setLayoutMode] = useState<LayoutMode>("dag");
 
+  // Whether to show hierarchical cluster circles/labels when zoomed out
+  const [showClusters, setShowClusters] = useState(true);
+
 
 
 
@@ -266,6 +291,9 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
   const claimedNodeAvatarsRef = useRef<Map<string, { avatar?: string; handle: string; claimedAt: string; did?: string }>>(
     claimedNodeAvatars || new Map()
   );
+  // Color mode ref for paintNode (which has [] deps) to read current color mode
+  const colorModeRef = useRef<ColorMode>(colorMode);
+
   // Callback ref for refreshing graph when avatar images finish loading
   const avatarRefreshRef = useRef<() => void>(() => {});
   avatarRefreshRef.current = () => refreshGraph(graphRef);
@@ -433,6 +461,41 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
     clustersRef.current = clusters;
   }, [nodes, links]);
 
+  // Compute dynamic legend items based on color mode and visible nodes
+  const legendItems = useMemo(() => {
+    if (colorMode === "status") return []; // handled by static STATUS_COLORS rendering
+
+    const items = new Map<string, string>(); // label -> color
+
+    for (const node of viewNodes) {
+      switch (colorMode) {
+        case "owner": {
+          const key = node.createdBy || undefined;
+          items.set(key || "Unassigned", getPersonColor(key));
+          break;
+        }
+        case "assignee": {
+          const key = node.assignee || undefined;
+          items.set(key || "Unassigned", getPersonColor(key));
+          break;
+        }
+        case "prefix": {
+          items.set(getPrefixLabel(node.prefix), getCatppuccinPrefixColor(node.prefix));
+          break;
+        }
+      }
+    }
+
+    // Sort: "Unassigned" last, others alphabetically
+    return Array.from(items.entries())
+      .sort(([a], [b]) => {
+        if (a === "Unassigned") return 1;
+        if (b === "Unassigned") return -1;
+        return a.localeCompare(b);
+      })
+      .map(([label, color]) => ({ label, color }));
+  }, [colorMode, viewNodes]);
+
   // Sync props into refs and trigger canvas redraw (not React re-render).
   // Also schedules a minimap redraw so highlight state is synced there too.
   // Uses viewLinks (respects epic collapse) for connected subgraph computation.
@@ -481,6 +544,14 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
     refreshGraph(graphRef);
   }, [claimedNodeAvatars]);
 
+  // Sync color mode to module-level variable and ref, trigger canvas + minimap redraw
+  useEffect(() => {
+    colorModeRef.current = colorMode;
+    _currentColorMode = colorMode;
+    refreshGraph(graphRef);
+    minimapRafRef.current = requestAnimationFrame(() => redrawMinimapRef.current());
+  }, [colorMode]);
+
   // Avatar hover detection: mousemove on container, hit-test against avatar positions
   useEffect(() => {
     const container = containerRef.current;
@@ -827,7 +898,7 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
       const graphNode = node as GraphNode;
       const size = getNodeSize(graphNode);
       const color = getNodeColor(graphNode);
-      const prefixColor = getPrefixColor(graphNode);
+      const prefixColor = getPrefixRingColor(graphNode);
       const isSelected = selectedNodeRef.current?.id === graphNode.id;
       const isHovered = hoveredNodeRef.current?.id === graphNode.id;
       const connected = connectedNodesRef.current;
@@ -1262,6 +1333,8 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
   // Appears as nodes fade out (inverse of node fade).
   const paintClusterLabels = useCallback(
     (ctx: CanvasRenderingContext2D, globalScale: number) => {
+      if (!showClusters) return;
+
       // Only show cluster labels when zoomed out (inverse of node fade range)
       const LABEL_FADE_IN = 0.8;   // starts appearing
       const LABEL_FULL = 0.4;      // fully visible
@@ -1321,8 +1394,8 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
         }
         const radius = maxDist + 30; // padding around outermost node
 
-        // Use project prefix color for the cluster circle
-        const clusterColor = PREFIX_COLORS[cluster.prefix] || "hsl(0, 0%, 65%)";
+        // Use Catppuccin prefix color for the cluster circle (clusters always represent projects)
+        const clusterColor = getCatppuccinPrefixColor(cluster.prefix);
 
         // Draw subtle cluster background circle
         ctx.beginPath();
@@ -1374,7 +1447,7 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
 
       ctx.restore();
     },
-    [viewNodes, nodes] // reads clustersRef (ref), but needs viewNodes for positions
+    [viewNodes, nodes, showClusters] // reads clustersRef (ref), but needs viewNodes for positions
   );
 
   // Node hit area
@@ -1906,13 +1979,38 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
             )}
           </button>
         )}
+
+        {/* Show/hide cluster labels toggle */}
+        <button
+          onClick={() => setShowClusters((v) => !v)}
+          className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium backdrop-blur-sm rounded-lg border shadow-sm transition-colors ${
+            showClusters
+              ? "bg-emerald-500 text-white border-emerald-500"
+              : "bg-white/90 text-zinc-500 border-zinc-200 hover:text-zinc-700 hover:bg-zinc-50"
+          }`}
+          title={showClusters ? "Hide cluster labels" : "Show cluster labels"}
+        >
+          <svg
+            className="w-3.5 h-3.5"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            {/* Dashed circle with label lines — cluster overlay icon */}
+            <circle cx="8" cy="8" r="6" strokeDasharray="2.5 2" strokeOpacity={showClusters ? 1 : 0.5} />
+            <line x1="5" y1="8" x2="11" y2="8" strokeOpacity={showClusters ? 1 : 0.4} />
+            <line x1="6" y1="10" x2="10" y2="10" strokeOpacity={showClusters ? 0.6 : 0.25} strokeWidth="1" />
+          </svg>
+          <span className="hidden sm:inline">Clusters</span>
+        </button>
       </div>
 
-      {/* Bottom-right info panel: stats + status colors + legend (hidden when timeline active) */}
+      {/* Bottom-right info panel: stats + color mode selector + legend (hidden when timeline active) */}
       {!timelineActive && (
         <div
           className="absolute bottom-4 z-10 bg-white/90 backdrop-blur-sm rounded-lg border border-zinc-200 shadow-sm px-3 py-2 text-xs text-zinc-400 transition-[right] duration-300 ease-out"
-          style={{ right: sidebarOpen ? "calc(360px + 1rem)" : "1rem" }}
+          style={{ right: sidebarOpen ? "calc(360px + 1rem)" : "1rem", maxWidth: 320 }}
         >
           {stats && (
             <div className="text-zinc-500 mb-1.5">
@@ -1924,19 +2022,55 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
               {stats.prefixes.length === 1 ? " project" : " projects"}
             </div>
           )}
-          <div className="hidden sm:flex flex-wrap gap-x-3 gap-y-1 mb-1.5">
-            {["open", "in_progress", "blocked", "deferred", "closed"].map((status) => (
-              <span key={status} className="flex items-center gap-1">
-                <span
-                  className="w-2 h-2 rounded-full"
-                  style={{ backgroundColor: STATUS_COLORS[status] }}
-                />
-                <span className="text-zinc-500">{STATUS_LABELS[status]}</span>
-              </span>
+          {/* Color mode segmented control */}
+          <div className="hidden sm:flex bg-zinc-100 rounded-md overflow-hidden mb-1.5">
+            {(["status", "owner", "assignee", "prefix"] as ColorMode[]).map((mode) => (
+              <button
+                key={mode}
+                onClick={() => onColorModeChange?.(mode)}
+                className={`flex-1 px-2 py-1 text-[10px] font-medium transition-colors ${
+                  colorMode === mode
+                    ? "bg-emerald-500 text-white"
+                    : "text-zinc-500 hover:text-zinc-700 hover:bg-zinc-200/60"
+                }`}
+              >
+                {COLOR_MODE_LABELS[mode]}
+              </button>
             ))}
           </div>
+          {/* Dynamic legend: status dots or person/prefix dots */}
+          <div className="hidden sm:flex flex-wrap gap-x-3 gap-y-1 mb-1.5">
+            {colorMode === "status" ? (
+              <>
+                {["open", "in_progress", "blocked", "deferred", "closed"].map((status) => (
+                  <span key={status} className="flex items-center gap-1">
+                    <span
+                      className="w-2 h-2 rounded-full"
+                      style={{ backgroundColor: STATUS_COLORS[status] }}
+                    />
+                    <span className="text-zinc-500">{STATUS_LABELS[status]}</span>
+                  </span>
+                ))}
+              </>
+            ) : (
+              <>
+                {legendItems.map(({ label, color }) => (
+                  <span key={label} className="flex items-center gap-1">
+                    <span
+                      className="w-2 h-2 rounded-full flex-shrink-0"
+                      style={{ backgroundColor: color }}
+                    />
+                    <span className="text-zinc-500 truncate max-w-[80px]">{label}</span>
+                  </span>
+                ))}
+              </>
+            )}
+          </div>
           <div className="hidden sm:flex flex-col gap-0.5 text-zinc-400">
-            <span>Size = importance · Ring = project</span>
+            <span>
+              Size = importance · Ring = project
+              {colorMode !== "status" && ` · Fill = ${COLOR_MODE_LABELS[colorMode].toLowerCase()}`}
+            </span>
           </div>
           <span className="sm:hidden">Tap a node for details</span>
         </div>

package/lib/types.ts

@@ -69,6 +69,19 @@ export interface GraphNode {
   _prevStatus?: string;   // Previous status value before the change (for color transition)
 }
 
+// ============================================================================
+// Color mode for legend/node fill switching
+// ============================================================================
+
+export type ColorMode = "status" | "owner" | "assignee" | "prefix";
+
+export const COLOR_MODE_LABELS: Record<ColorMode, string> = {
+  status: "Status",
+  owner: "Owner",
+  assignee: "Assignee",
+  prefix: "Prefix",
+};
+
 export interface GraphLink {
   source: string;
   target: string;
@@ -137,6 +150,36 @@ export const PRIORITY_COLORS: Record<number, string> = {
   4: "#d4d4d8", // zinc-300
 };
 
+// ============================================================================
+// Catppuccin Latte accent palette
+// ============================================================================
+
+/** Catppuccin Latte accent colors — 14 visually distinct, reordered for max contrast between adjacent indices */
+export const CATPPUCCIN_ACCENTS: string[] = [
+  "#d20f39", // Red
+  "#179299", // Teal
+  "#fe640b", // Peach
+  "#1e66f5", // Blue
+  "#40a02b", // Green
+  "#8839ef", // Mauve
+  "#df8e1d", // Yellow
+  "#209fb5", // Sapphire
+  "#ea76cb", // Pink
+  "#04a5e5", // Sky
+  "#e64553", // Maroon
+  "#7287fd", // Lavender
+  "#dd7878", // Flamingo
+  "#dc8a78", // Rosewater
+];
+
+export const CATPPUCCIN_ACCENT_NAMES: string[] = [
+  "Red", "Teal", "Peach", "Blue", "Green", "Mauve", "Yellow",
+  "Sapphire", "Pink", "Sky", "Maroon", "Lavender", "Flamingo", "Rosewater",
+];
+
+/** Catppuccin Latte Surface2 — used for "unassigned" / unknown values */
+export const CATPPUCCIN_UNASSIGNED = "#acb0be";
+
 export const TYPE_ICONS: Record<string, string> = {
   bug: "\uD83D\uDC1B",
   feature: "\u2728",
@@ -190,6 +233,29 @@ export function getPrefixColor(prefix: string): string {
   return hashColor(prefix);
 }
 
+/**
+ * Deterministically map a person handle/name to a Catppuccin Latte accent color.
+ * Uses FNV-1a hash modulo 14 to index into CATPPUCCIN_ACCENTS.
+ * Returns CATPPUCCIN_UNASSIGNED for undefined/null/empty strings.
+ */
+export function getPersonColor(person: string | undefined): string {
+  if (!person) return CATPPUCCIN_UNASSIGNED;
+  let hash = 2166136261; // FNV offset basis
+  for (let i = 0; i < person.length; i++) {
+    hash ^= person.charCodeAt(i);
+    hash = (hash * 16777619) >>> 0;
+  }
+  return CATPPUCCIN_ACCENTS[hash % CATPPUCCIN_ACCENTS.length];
+}
+
+/**
+ * Deterministically map a prefix string to a Catppuccin Latte accent color.
+ * Same approach as getPersonColor but for project prefixes.
+ */
+export function getCatppuccinPrefixColor(prefix: string): string {
+  return getPersonColor(prefix);
+}
+
 // Backward-compatible exports — delegates to dynamic functions
 // so existing code using PREFIX_COLORS[prefix] || fallback still works.
 // Prefer using getPrefixColor() / getPrefixLabel() directly.

package/package.json

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