feat: selectable groups in legend with two-level grouping and e2e tests

- Groups in legend panel are now clickable buttons (select/deselect)
- Selected groups highlight nodes in 3D view, dims non-selected
- Multi-select supported, click again to deselect
- Fixed click interception by three.js OrbitControls (stopPropagation)
- Two-level cloud grouping (convex/auth instead of just convex)
- Removed group cap (was 8, now shows all), added 20 colors
- Lowered cloud minFiles threshold for small projects
- Added 7 Playwright e2e tests for group selection

Author: bntvllnt

app/page.tsx

@@ -36,6 +36,8 @@ function App(): React.ReactElement | null {
     handleNavigate,
     handleFocus,
     handleSearch,
+    selectedGroups,
+    toggleGroup,
   } = useGraphContext();
 
   const [fileTreeOpen, setFileTreeOpen] = useState(false);
@@ -79,6 +81,7 @@ function App(): React.ReactElement | null {
         forceData={forceData}
         circularDeps={graphData.stats.circularDeps}
         symbolData={symbolData}
+        selectedGroups={selectedGroups}
         onNodeClick={handleNodeClick}
         onSymbolClick={setSelectedSymbol}
       />
@@ -94,7 +97,7 @@ function App(): React.ReactElement | null {
         callEdges={symbolData?.callEdges ?? []}
         onClose={() => { setSelectedSymbol(null); }}
       />
-      <Legend view={currentView} groups={groupData} showClouds={config.showModuleBoxes} />
+      <Legend view={currentView} groups={groupData} showClouds={config.showModuleBoxes} selectedGroups={selectedGroups} onToggleGroup={toggleGroup} />
       <SettingsPanel config={config} onChange={setConfig} />
     </>
   );

components/graph-canvas.tsx

@@ -60,6 +60,7 @@ export function GraphCanvas({
   forceData,
   circularDeps,
   symbolData,
+  selectedGroups,
   onNodeClick,
   onSymbolClick,
 }: {
@@ -71,6 +72,7 @@ export function GraphCanvas({
   forceData: ForceApiResponse | undefined;
   circularDeps: string[][];
   symbolData: SymbolGraphResponse | undefined;
+  selectedGroups: Set<string>;
   onNodeClick: (node: GraphApiNode) => void;
   onSymbolClick: (symbol: SymbolApiNode) => void;
 }): React.ReactElement {
@@ -212,7 +214,7 @@ export function GraphCanvas({
 
       // Dynamic minimum: small projects need fewer files per cloud
       const totalNodes = fgNodes.length;
-      const minFiles = totalNodes > 100 ? 5 : totalNodes > 20 ? 4 : 3;
+      const minFiles = totalNodes > 100 ? 3 : totalNodes > 20 ? 2 : 2;
 
       const active = new Set<string>();
       groups.forEach((moduleNodes, mod) => {
@@ -405,10 +407,27 @@ export function GraphCanvas({
             ? `${n.label as string} (${n.path as string})`
             : `${n.path as string} (${n.loc as number} LOC)`
         }
-        nodeColor={(n: Record<string, unknown>) => n.color as string}
-        nodeVal={(n: Record<string, unknown>) => n.size as number}
+        nodeColor={(n: Record<string, unknown>) => {
+          if (selectedGroups.size === 0) return n.color as string;
+          const mod = (n.module as string) || "";
+          return selectedGroups.has(cloudGroup(mod)) ? (n.color as string) : "#1a1a24";
+        }}
+        nodeVal={(n: Record<string, unknown>) => {
+          if (selectedGroups.size === 0) return n.size as number;
+          const mod = (n.module as string) || "";
+          return selectedGroups.has(cloudGroup(mod)) ? (n.size as number) : 0.3;
+        }}
         nodeOpacity={config.nodeOpacity}
-        linkColor={(l: Record<string, unknown>) => l.color as string}
+        linkColor={(l: Record<string, unknown>) => {
+          if (selectedGroups.size === 0) return l.color as string;
+          const src = l.source as Record<string, unknown> | string;
+          const tgt = l.target as Record<string, unknown> | string;
+          const srcMod = typeof src === "object" ? (src.module as string) || "" : "";
+          const tgtMod = typeof tgt === "object" ? (tgt.module as string) || "" : "";
+          const srcIn = selectedGroups.has(cloudGroup(srcMod));
+          const tgtIn = selectedGroups.has(cloudGroup(tgtMod));
+          return srcIn && tgtIn ? (l.color as string) : "rgba(30,30,40,0.1)";
+        }}
         linkWidth={(l: Record<string, unknown>) => l.width as number}
         linkOpacity={config.linkOpacity}
         backgroundColor="#0a0a0f"

components/graph-provider.tsx

@@ -30,6 +30,8 @@ interface GraphContextValue {
   setSelectedSymbol: (symbol: SymbolApiNode | null) => void;
   focusNodeId: string | null;
   setFocusNodeId: (id: string | null) => void;
+  selectedGroups: Set<string>;
+  toggleGroup: (name: string) => void;
   handleNodeClick: (node: GraphApiNode) => void;
   handleNavigate: (nodeId: string) => void;
   handleFocus: (nodeId: string) => void;
@@ -51,6 +53,7 @@ export function GraphProvider({ children }: { children: React.ReactNode }) {
   const [selectedNode, setSelectedNode] = useState<GraphApiNode | null>(null);
   const [selectedSymbol, setSelectedSymbol] = useState<SymbolApiNode | null>(null);
   const [focusNodeId, setFocusNodeId] = useState<string | null>(null);
+  const [selectedGroups, setSelectedGroups] = useState<Set<string>>(new Set());
   const isSymbolView = currentView === "symbols" || currentView === "types";
   const { symbolData } = useSymbolData(isSymbolView);
 
@@ -65,6 +68,15 @@ export function GraphProvider({ children }: { children: React.ReactNode }) {
     }
   }, [projectName]);
 
+  const toggleGroup = useCallback((name: string) => {
+    setSelectedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  }, []);
+
   const handleNodeClick = useCallback((node: GraphApiNode) => {
     setSelectedNode(node);
   }, []);
@@ -112,6 +124,8 @@ export function GraphProvider({ children }: { children: React.ReactNode }) {
         setSelectedSymbol,
         focusNodeId,
         setFocusNodeId,
+        selectedGroups,
+        toggleGroup,
         handleNodeClick,
         handleNavigate,
         handleFocus,

components/legend.tsx

@@ -7,16 +7,24 @@ export function Legend({
   view,
   groups,
   showClouds,
+  selectedGroups,
+  onToggleGroup,
 }: {
   view: ViewType;
   groups: GroupMetrics[] | undefined;
   showClouds: boolean;
+  selectedGroups: Set<string>;
+  onToggleGroup: (name: string) => void;
 }): React.ReactElement {
   const items = LEGENDS[view] ?? [];
   const showGroups = showClouds && groups && groups.length > 0;
+  const hasSelection = selectedGroups.size > 0;
 
   return (
-    <div className="fixed bottom-4 left-4 z-50 bg-[rgba(15,15,25,0.85)] border border-[#222] rounded-[10px] p-4 text-[11px] backdrop-blur-xl max-w-[260px]">
+    <div
+      className="fixed bottom-4 left-4 z-50 bg-[rgba(15,15,25,0.85)] border border-[#222] rounded-[10px] p-4 text-[11px] backdrop-blur-xl max-w-[260px] max-h-[70vh] overflow-y-auto pointer-events-auto"
+      onPointerDown={(e) => { e.stopPropagation(); }}
+    >
       {items.map((item, i) => (
         <div key={i} className="flex items-center gap-2 py-0.5">
           {item.color && (
@@ -31,19 +39,36 @@ export function Legend({
       {showGroups && (
         <>
           <div className="border-t border-[#333] my-2" />
-          <div className="text-[10px] text-[#666] mb-1 uppercase tracking-wider">Groups</div>
-          {groups.map((g) => (
-            <div key={g.name} className="flex items-center gap-2 py-0.5">
-              <span
-                className="w-2.5 h-2.5 rounded-sm inline-block shrink-0"
-                style={{ backgroundColor: g.color }}
-              />
-              <span className="truncate">{g.name}</span>
-              <span className="text-[#555] ml-auto shrink-0">
-                {g.files}f {(g.importance * 100).toFixed(0)}%
-              </span>
-            </div>
-          ))}
+          <div className="text-[10px] text-[#666] mb-1 uppercase tracking-wider">
+            Groups {hasSelection && <span className="text-[#888]">({selectedGroups.size} selected)</span>}
+          </div>
+          {groups.map((g) => {
+            const isSelected = selectedGroups.has(g.name);
+            const dimmed = hasSelection && !isSelected;
+            return (
+              <button
+                type="button"
+                key={g.name}
+                data-group={g.name}
+                className={`flex items-center gap-2 py-0.5 cursor-pointer rounded px-1 -mx-1 transition-colors w-full text-left text-[11px] bg-transparent border-0 text-inherit ${
+                  isSelected ? "bg-[rgba(255,255,255,0.08)]" : "hover:bg-[rgba(255,255,255,0.04)]"
+                } ${dimmed ? "opacity-40" : ""}`}
+                onClick={(e) => { e.stopPropagation(); onToggleGroup(g.name); }}
+              >
+                <span
+                  className="w-2.5 h-2.5 rounded-sm inline-block shrink-0 border"
+                  style={{
+                    backgroundColor: isSelected || !hasSelection ? g.color : "transparent",
+                    borderColor: g.color,
+                  }}
+                />
+                <span className="truncate">{g.name}</span>
+                <span className="text-[#555] ml-auto shrink-0">
+                  {g.files}f {(g.importance * 100).toFixed(0)}%
+                </span>
+              </button>
+            );
+          })}
         </>
       )}
     </div>

e2e/groups.spec.ts

@@ -0,0 +1,115 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Group Selection", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+    await page.waitForSelector("canvas", { timeout: 15_000 });
+  });
+
+  test("legend shows Groups section with group names", async ({ page }) => {
+    await expect(page.getByText("Groups", { exact: false })).toBeVisible();
+
+    // Fixture has 5 groups: services, models, utils, src, types
+    const groupButtons = page.locator("button[data-group]");
+    await expect(groupButtons).toHaveCount(5);
+
+    const names = await groupButtons.locator("span.truncate").allTextContents();
+    expect(names).toContain("services");
+    expect(names).toContain("models");
+    expect(names).toContain("utils");
+  });
+
+  test("clicking a group selects it and shows selection count", async ({ page }) => {
+    const servicesBtn = page.locator("button[data-group='services']");
+    await expect(servicesBtn).toBeVisible();
+
+    await servicesBtn.click();
+
+    // Header should show "(1 selected)"
+    await expect(page.getByText("1 selected")).toBeVisible();
+
+    // The clicked button should have highlighted background
+    await expect(servicesBtn).not.toHaveClass(/opacity-40/);
+
+    // Other groups should be dimmed
+    const modelsBtn = page.locator("button[data-group='models']");
+    await expect(modelsBtn).toHaveClass(/opacity-40/);
+  });
+
+  test("clicking a selected group deselects it", async ({ page }) => {
+    const servicesBtn = page.locator("button[data-group='services']");
+
+    // Select
+    await servicesBtn.click();
+    await expect(page.getByText("1 selected")).toBeVisible();
+
+    // Deselect
+    await servicesBtn.click();
+
+    // "selected" text should be gone
+    await expect(page.getByText("selected")).not.toBeVisible();
+
+    // No group should be dimmed
+    const allButtons = page.locator("button[data-group]");
+    const count = await allButtons.count();
+    for (let i = 0; i < count; i++) {
+      await expect(allButtons.nth(i)).not.toHaveClass(/opacity-40/);
+    }
+  });
+
+  test("multi-select: clicking two groups selects both", async ({ page }) => {
+    const servicesBtn = page.locator("button[data-group='services']");
+    const modelsBtn = page.locator("button[data-group='models']");
+
+    await servicesBtn.click();
+    await modelsBtn.click();
+
+    await expect(page.getByText("2 selected")).toBeVisible();
+
+    // Both should not be dimmed
+    await expect(servicesBtn).not.toHaveClass(/opacity-40/);
+    await expect(modelsBtn).not.toHaveClass(/opacity-40/);
+
+    // Others should be dimmed
+    const utilsBtn = page.locator("button[data-group='utils']");
+    await expect(utilsBtn).toHaveClass(/opacity-40/);
+  });
+
+  test("deselecting one of two selected groups keeps the other", async ({ page }) => {
+    const servicesBtn = page.locator("button[data-group='services']");
+    const modelsBtn = page.locator("button[data-group='models']");
+
+    await servicesBtn.click();
+    await modelsBtn.click();
+    await expect(page.getByText("2 selected")).toBeVisible();
+
+    // Deselect services
+    await servicesBtn.click();
+    await expect(page.getByText("1 selected")).toBeVisible();
+
+    // Services should now be dimmed, models still selected
+    await expect(servicesBtn).toHaveClass(/opacity-40/);
+    await expect(modelsBtn).not.toHaveClass(/opacity-40/);
+  });
+
+  test("group buttons have correct data-group attributes", async ({ page }) => {
+    const groupButtons = page.locator("button[data-group]");
+    const attrs = await groupButtons.evaluateAll(
+      (els) => els.map((el) => el.getAttribute("data-group")),
+    );
+    expect(attrs.length).toBe(5);
+    expect(attrs).toEqual(expect.arrayContaining(["services", "models", "utils", "src", "types"]));
+  });
+
+  test("groups only visible when Module Clouds checkbox is checked", async ({ page }) => {
+    // Groups should be visible initially (checkbox is checked by default)
+    await expect(page.getByText("Groups", { exact: false })).toBeVisible();
+
+    // Uncheck Module Clouds
+    const checkbox = page.locator("input[type='checkbox']");
+    await checkbox.uncheck();
+
+    // Groups section should disappear
+    await expect(page.locator("button[data-group]").first()).not.toBeVisible();
+  });
+});

src/analyzer/index.test.ts

@@ -261,12 +261,19 @@ describe("cloudGroup", () => {
     expect(cloudGroup("apps/web/")).toBe("web");
   });
 
-  it("returns first segment for non-source dirs", () => {
-    expect(cloudGroup("convex/agents/")).toBe("convex");
-    expect(cloudGroup("e2e/tests/")).toBe("e2e");
+  it("uses two-level grouping for non-source dirs with subdirs", () => {
+    expect(cloudGroup("convex/agents/")).toBe("convex/agents");
+    expect(cloudGroup("convex/auth/")).toBe("convex/auth");
+    expect(cloudGroup("e2e/tests/")).toBe("e2e/tests");
     expect(cloudGroup("scripts/")).toBe("scripts");
   });
 
+  it("uses two-level grouping for deep source-dir paths", () => {
+    expect(cloudGroup("src/app/(dashboard)/")).toBe("app/(dashboard)");
+    expect(cloudGroup("src/components/ui/")).toBe("components/ui");
+    expect(cloudGroup("app/api/graph/")).toBe("api/graph");
+  });
+
   it("returns root for empty or dot paths", () => {
     expect(cloudGroup("")).toBe("root");
     expect(cloudGroup(".")).toBe("root");
@@ -341,13 +348,13 @@ describe("computeGroups", () => {
     expect(result.groups).toEqual([]);
   });
 
-  it("caps at 8 groups max", () => {
-    const files = Array.from({ length: 12 }, (_, i) =>
+  it("returns all groups without cap", () => {
+    const files = Array.from({ length: 25 }, (_, i) =>
       makeFile(`dir${i}/file.ts`, { loc: 10 }),
     );
     const built = buildGraph(files);
     const result = analyzeGraph(built, files);
-    expect(result.groups.length).toBeLessThanOrEqual(8);
+    expect(result.groups.length).toBe(25);
   });
 
   it("includes fanIn and fanOut per group", () => {

src/analyzer/index.ts

@@ -153,9 +153,11 @@ export function analyzeGraph(built: BuiltGraph, parsedFiles?: ParsedFile[]): Cod
 const GROUP_COLORS = [
   "#2563eb", "#dc2626", "#16a34a", "#9333ea", "#ea580c",
   "#0891b2", "#ca8a04", "#e11d48", "#4f46e5", "#059669",
+  "#7c3aed", "#db2777", "#0d9488", "#d97706", "#6366f1",
+  "#be123c", "#15803d", "#a855f7", "#f97316", "#0284c7",
 ];
 
-const MAX_LEGEND_GROUPS = 8;
+const MAX_LEGEND_GROUPS = Infinity;
 
 function computeGroups(
   fileNodes: GraphNode[],

src/cloud-group.ts

@@ -3,6 +3,9 @@ const SOURCE_DIRS = new Set(["src", "lib", "app", "packages", "apps"]);
 export function cloudGroup(mod: string): string {
   const parts = mod.replace(/\/$/, "").split("/").filter(Boolean);
   if (parts.length === 0 || parts[0] === ".") return "root";
-  if (SOURCE_DIRS.has(parts[0]) && parts.length > 1) return parts[1];
-  return parts[0];
+  const start = SOURCE_DIRS.has(parts[0]) ? 1 : 0;
+  const meaningful = parts.slice(start);
+  if (meaningful.length === 0) return parts[0];
+  if (meaningful.length === 1) return meaningful[0];
+  return meaningful.slice(0, 2).join("/");
 }