Improve workspace graph hierarchy, cards, and performance

apps/desktop/src/renderer/components/graph/WorkspaceGraphPage.tsx

@@ -101,7 +101,8 @@ import {
   createGraphPreferences,
   createSessionState,
   normalizeGraphPreferences,
-  computeAutoLayout
+  computeAutoLayout,
+  laneHierarchyFromPrimary
 } from "./graphLayout";
 import { GraphLaneNode } from "./graphNodes/LaneNode";
 import { GraphProposalNode } from "./graphNodes/ProposalNode";
@@ -336,6 +337,12 @@ function GraphInner() {
   const [textPromptError, setTextPromptError] = React.useState<string | null>(null);
   const [singleActionsOpen, setSingleActionsOpen] = React.useState(false);
   const [batchActionsOpen, setBatchActionsOpen] = React.useState(false);
+  /** In Overview, risk edges are hidden by default so the tree stays readable. */
+  const [showOverviewRiskEdges, setShowOverviewRiskEdges] = React.useState(false);
+
+  React.useEffect(() => {
+    if (viewMode !== "all") setShowOverviewRiskEdges(false);
+  }, [viewMode]);
 
   React.useEffect(() => {
     void refreshEnvironmentMappings();
@@ -463,7 +470,8 @@ function GraphInner() {
   }, [collapsedLaneIds, lanes]);
 
   const laneById = React.useMemo(() => new Map(lanes.map((lane) => [lane.id, lane] as const)), [lanes]);
-  const primaryLaneId = React.useMemo(() => lanes.find((lane) => lane.laneType === "primary")?.id ?? null, [lanes]);
+  const primaryHierarchyMeta = React.useMemo(() => laneHierarchyFromPrimary(lanes), [lanes]);
+  const primaryLaneId = primaryHierarchyMeta.primary?.id ?? null;
   const laneIdByBranchRef = React.useMemo(() => {
     const map = new Map<string, string>();
     for (const lane of lanes) {
@@ -514,7 +522,7 @@ function GraphInner() {
     (laneId: string): string | null => {
       const lane = laneById.get(laneId);
       if (!lane) return null;
-      return resolvePrBaseLaneId(lane, lane.baseRef);
+      return resolvePrBaseLaneId(lane, lane.baseRef) ?? null;
     },
     [laneById, resolvePrBaseLaneId]
   );
@@ -1135,7 +1143,13 @@ function GraphInner() {
       };
     }
 
-    const autoPositions = computeAutoLayout(lanes, viewMode, activityScoreByLaneId, environmentByLaneId);
+    const autoPositions = computeAutoLayout(
+      lanes,
+      viewMode,
+      activityScoreByLaneId,
+      environmentByLaneId,
+      primaryHierarchyMeta.depthByLaneId
+    );
     const savedPositions = activeSnapshot.nodePositions;
     const positions = Object.keys(savedPositions).length > 0 ? { ...autoPositions, ...savedPositions } : autoPositions;
     const nextNodes: Array<Node<GraphNodeData>> = [];
@@ -1166,6 +1180,8 @@ function GraphInner() {
           autoRebaseStatus: autoRebaseByLaneId[lane.id] ?? null,
           activeSessions: activeSessionsByLaneId[lane.id] ?? 0,
           collapsedChildCount,
+          hierarchyDepth: primaryHierarchyMeta.depthByLaneId.get(lane.id) ?? 0,
+          parentLaneName: primaryHierarchyMeta.parentNameByLaneId.get(lane.id) ?? null,
           dimmed: false,
           activityBucket: activityBucketByLaneId[lane.id] ?? "medium",
           viewMode,
@@ -1246,6 +1262,8 @@ function GraphInner() {
           autoRebaseStatus: null,
           activeSessions: 0,
           collapsedChildCount: 0,
+          hierarchyDepth: 0,
+          parentLaneName: null,
           dimmed: false,
           activityBucket: "medium",
           viewMode,
@@ -1274,7 +1292,7 @@ function GraphInner() {
     }
 
     const nextEdges: Array<Edge<GraphEdgeData>> = [];
-    const primaryLane = lanes.find((lane) => lane.laneType === "primary") ?? null;
+    const primaryLane = primaryHierarchyMeta.primary;
     const riskPairsWithVisibleEdge = new Set<string>();
     const laneHasProposalConflict = (proposal: IntegrationProposal, sourceLaneId: string): boolean => {
       const steps = proposalSteps(proposal);
@@ -1292,7 +1310,7 @@ function GraphInner() {
       );
     };
 
-    if (viewMode === "all" || viewMode === "risk") {
+    if (viewMode === "risk" || (viewMode === "all" && showOverviewRiskEdges)) {
       for (const [key, risk] of riskByPair.entries()) {
         if (risk.riskLevel === "none" && risk.overlapCount === 0) continue;
         const [laneAId, laneBId] = key.split("::");
@@ -1306,6 +1324,8 @@ function GraphInner() {
     if (viewMode === "all" || viewMode === "stack") {
       for (const lane of lanes) {
         if (!primaryLane || lane.id === primaryLane.id) continue;
+        // In Overview, stack edges already show the tree; skip redundant "primary → lane" spokes.
+        if (viewMode === "all" && lane.parentLaneId && visibleNodeIds.has(lane.parentLaneId)) continue;
         if (!visibleNodeIds.has(primaryLane.id) || !visibleNodeIds.has(lane.id)) continue;
         const pair = edgePairKey(primaryLane.id, lane.id);
         const pr = prOverlayByPair.get(pair);
@@ -1341,7 +1361,7 @@ function GraphInner() {
       }
     }
 
-    if (viewMode === "all" || viewMode === "risk") {
+    if (viewMode === "risk" || (viewMode === "all" && showOverviewRiskEdges)) {
       for (const [key, risk] of riskByPair.entries()) {
         if (risk.riskLevel === "none" && risk.overlapCount === 0) continue;
         const [laneAId, laneBId] = key.split("::");
@@ -1433,7 +1453,9 @@ function GraphInner() {
     loadedGraphPreferences,
     prOverlayByPair,
     prOverlayByLaneId,
+    primaryHierarchyMeta,
     riskByPair,
+    showOverviewRiskEdges,
     statusByLane,
     syncByLaneId,
     viewMode,
@@ -2922,6 +2944,18 @@ function GraphInner() {
             Reset View
           </Button>
 
+          {viewMode === "all" ? (
+            <Button
+              size="sm"
+              variant={showOverviewRiskEdges ? "primary" : "outline"}
+              className="h-7 px-2 text-[11px]"
+              title="Show or hide predicted file-overlap links between lanes. Stack links stay visible."
+              onClick={() => setShowOverviewRiskEdges((prev) => !prev)}
+            >
+              {showOverviewRiskEdges ? "Hide overlap web" : "Show overlap web"}
+            </Button>
+          ) : null}
+
           <Button
             size="sm"
             variant={showRiskMatrix ? "primary" : "outline"}
@@ -2940,6 +2974,8 @@ function GraphInner() {
           edges={edges}
           nodeTypes={nodeTypes}
           edgeTypes={edgeTypes}
+          onlyRenderVisibleElements
+          nodesConnectable={false}
           onNodesChange={onNodesChange}
           onEdgesChange={onEdgesChange}
           onNodeDragStart={onNodeDragStart}

apps/desktop/src/renderer/components/graph/graphHelpers.ts

@@ -16,19 +16,23 @@ export const VIEW_MODES: GraphViewMode[] = ["stack", "risk", "activity", "all"];
 export const VIEW_MODE_META: Record<GraphViewMode, { label: string; helper: string }> = {
   all: {
     label: "Overview",
-    helper: "See the full workspace map with dependencies, environments, and active pull requests."
+    helper:
+      "Primary lane on top, children row by row. Solid lines are stack order; use Show overlap web for conflict-risk links."
   },
   stack: {
     label: "Dependencies",
-    helper: "Follow parent-child lane relationships and drag lanes to change how work is stacked."
+    helper:
+      "Same top-down tree as Overview: primary on top, children row by row. Drag lanes to change how work is stacked."
   },
   risk: {
     label: "Conflict Risk",
-    helper: "Highlight overlapping work and jump into the pair matrix when you need file-level conflict detail."
+    helper:
+      "Same tree layout as Overview; risk edges highlight overlapping work. Open the pair matrix for file-level detail."
   },
   activity: {
     label: "Activity",
-    helper: "Surface the lanes with the most recent work, sessions, and movement."
+    helper:
+      "Same tree rows as other modes; siblings within a row sort by recent activity, then stack depth and name."
   }
 };
 
@@ -169,9 +173,9 @@ export function nodeDimensions(
     if (bucket === "high") return { width: 200, height: 100 };
     return { width: 160, height: 80 };
   }
-  if (isIntegration) return { width: 220, height: integrationSourceCount > 2 ? 122 : 110 };
-  if (lane.laneType === "primary") return { width: 200, height: 100 };
-  return { width: 160, height: 80 };
+  if (isIntegration) return { width: 228, height: integrationSourceCount > 2 ? 130 : 118 };
+  if (lane.laneType === "primary") return { width: 228, height: 132 };
+  return { width: 208, height: 124 };
 }
 
 export function branchNameFromRef(ref: string): string {

apps/desktop/src/renderer/components/graph/graphLayout.test.ts

@@ -1,5 +1,27 @@
 import { describe, expect, it } from "vitest";
-import { normalizeGraphPreferences } from "./graphLayout";
+import type { LaneSummary } from "../../../shared/types";
+import { computeAutoLayout, laneHierarchyFromPrimary, normalizeGraphPreferences } from "./graphLayout";
+
+function lane(partial: Partial<LaneSummary> & Pick<LaneSummary, "id" | "name" | "laneType" | "parentLaneId">): LaneSummary {
+  return {
+    description: null,
+    attachedRootPath: null,
+    baseRef: "refs/heads/main",
+    branchRef: `refs/heads/${partial.name}`,
+    worktreePath: "",
+    childCount: 0,
+    stackDepth: 0,
+    parentStatus: null,
+    isEditProtected: false,
+    status: { dirty: false, ahead: 0, behind: 0, remoteBehind: -1, rebaseInProgress: false },
+    color: null,
+    icon: null,
+    tags: [],
+    createdAt: "2026-01-01T00:00:00.000Z",
+    archivedAt: null,
+    ...partial
+  };
+}
 
 describe("normalizeGraphPreferences", () => {
   it("keeps the new preferences shape unchanged", () => {
@@ -40,3 +62,76 @@ describe("normalizeGraphPreferences", () => {
     });
   });
 });
+
+describe("laneHierarchyFromPrimary", () => {
+  it("assigns depth 0 to primary and increments along parent chain", () => {
+    const lanes = [
+      lane({ id: "p", name: "main", laneType: "primary", parentLaneId: null }),
+      lane({ id: "a", name: "feat-a", laneType: "worktree", parentLaneId: "p" }),
+      lane({ id: "b", name: "feat-b", laneType: "worktree", parentLaneId: "a" })
+    ];
+    const { depthByLaneId, parentNameByLaneId } = laneHierarchyFromPrimary(lanes);
+    expect(depthByLaneId.get("p")).toBe(0);
+    expect(depthByLaneId.get("a")).toBe(1);
+    expect(depthByLaneId.get("b")).toBe(2);
+    expect(parentNameByLaneId.get("a")).toBe("main");
+    expect(parentNameByLaneId.get("b")).toBe("feat-a");
+  });
+
+  it("marks lanes not under primary with a large sentinel depth", () => {
+    const lanes = [
+      lane({ id: "p", name: "main", laneType: "primary", parentLaneId: null }),
+      lane({ id: "o", name: "orphan", laneType: "worktree", parentLaneId: null })
+    ];
+    const { depthByLaneId } = laneHierarchyFromPrimary(lanes);
+    expect(depthByLaneId.get("o")).toBe(10_000);
+  });
+
+  it("returns a null primary and empty maps when given no lanes", () => {
+    const { primary, depthByLaneId, parentNameByLaneId } = laneHierarchyFromPrimary([]);
+    expect(primary).toBeNull();
+    expect(depthByLaneId.size).toBe(0);
+    expect(parentNameByLaneId.size).toBe(0);
+  });
+});
+
+describe("computeAutoLayout overview", () => {
+  it("places primary above children in row order", () => {
+    const lanes = [
+      lane({ id: "p", name: "main", laneType: "primary", parentLaneId: null, stackDepth: 0 }),
+      lane({ id: "x", name: "z-last", laneType: "worktree", parentLaneId: "p", stackDepth: 1 }),
+      lane({ id: "y", name: "a-first", laneType: "worktree", parentLaneId: "p", stackDepth: 1 })
+    ];
+    const pos = computeAutoLayout(lanes, "all", {}, {});
+    expect(pos.p!.y).toBeLessThan(pos.x!.y);
+    expect(pos.p!.y).toBeLessThan(pos.y!.y);
+    expect(pos.x!.y).toBe(pos.y!.y);
+    expect(pos.y!.x).toBeLessThan(pos.x!.x);
+  });
+});
+
+describe("computeAutoLayout aligned modes", () => {
+  it("matches stack and risk positions to overview for the same lanes", () => {
+    const lanes = [
+      lane({ id: "p", name: "main", laneType: "primary", parentLaneId: null, stackDepth: 0 }),
+      lane({ id: "c", name: "child", laneType: "worktree", parentLaneId: "p", stackDepth: 1 })
+    ];
+    const allPos = computeAutoLayout(lanes, "all", {}, {});
+    const stackPos = computeAutoLayout(lanes, "stack", {}, {});
+    const riskPos = computeAutoLayout(lanes, "risk", {}, {});
+    expect(stackPos).toEqual(allPos);
+    expect(riskPos).toEqual(allPos);
+  });
+
+  it("activity mode sorts siblings by activity score within the same depth", () => {
+    const lanes = [
+      lane({ id: "p", name: "main", laneType: "primary", parentLaneId: null, stackDepth: 0 }),
+      lane({ id: "low", name: "low", laneType: "worktree", parentLaneId: "p", stackDepth: 1 }),
+      lane({ id: "high", name: "high", laneType: "worktree", parentLaneId: "p", stackDepth: 1 })
+    ];
+    const scores = { low: 1, high: 99 };
+    const pos = computeAutoLayout(lanes, "activity", scores, {});
+    expect(pos.low!.y).toBe(pos.high!.y);
+    expect(pos.high!.x).toBeLessThan(pos.low!.x);
+  });
+});