@reddb-io/ui 0.1.1 → 0.3.0

package/src/lib/renderers/GraphRenderer.svelte

@@ -5,18 +5,36 @@
   import {
     buildSigmaGraph,
     colorForType,
+    computeCommunityBoxes,
     nodeVisualRadius,
+    supernodeSvgRadius,
     reduceSigmaEdge,
     reduceSigmaNode,
+    routeInterCommunityEdges,
     FOCUS_EDGE_COLOR,
     FOCUS_NODE_STROKE_COLOR,
+    type CommunityBox,
+    type RoutedEdge,
     type SigmaReducerState,
     type SigmaThemeColors,
   } from './graph-sigma'
+  import {
+    bundleEdges,
+    edgeCurvature,
+    BUNDLE_EDGE_LIMIT,
+    type BundleOptions,
+    type BundlePoint,
+  } from './graph-bundle'
+  import {
+    collapseCommunities,
+    communitiesInLayout,
+    isSupernodeId,
+    supernodeCommunityOf,
+  } from './graph-communities'
   import { collectionPageHref } from '$lib/collection-pages'
   import { connection } from '$lib/connections.svelte'
   import { activity } from '$lib/activity.svelte'
-  import { Network, Table2, Search, X, Info, Maximize2, Play, Code2, RotateCw, Loader2, Route, AlertTriangle, ZoomIn, ZoomOut } from 'lucide-svelte'
+  import { Network, Table2, Search, X, Info, Maximize2, Play, Code2, RotateCw, Loader2, Route, AlertTriangle, ZoomIn, ZoomOut, Group, Spline, Boxes } from 'lucide-svelte'
 
   interface Props {
     result: QueryResult
@@ -37,6 +55,11 @@
     y1: number
     x2: number
     y2: number
+    /** Bundled polyline points (`"x,y x,y …"`) when edge bundling is on. */
+    points?: string
+    /** Label anchor — midpoint of the chord, or of the bundled polyline. */
+    mx: number
+    my: number
   }
 
   let { result, collection, subpage }: Props = $props()
@@ -64,6 +87,14 @@
   let canvasError = $state<string | null>(null)
   let renderBudget = $state(350)
   let svgZoom = $state(1)
+  // Group-in-a-box: one tinted box per community, inter-community edges routed
+  // at the box borders. Off-state is the plain #59 sigma/SVG render.
+  let groupInBox = $state(false)
+  // Force-directed edge bundling — off by default (precomputed, not per-frame).
+  let bundleEnabled = $state(false)
+  // Communities (from runGraphLayout's Louvain pass) folded into supernodes.
+  // Keyed by community id; reversible — expanding just drops the id.
+  let collapsedCommunities = $state<Set<number>>(new Set())
 
   const selectedNodeDetail = $derived(
     selectedNode
@@ -229,12 +260,69 @@
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let sigmaInstance: any = null
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let sigmaModules: { Sigma: any; NodeBorderProgram: any } | null = null
+  let sigmaModules: { Sigma: any; NodeBorderProgram: any; EdgeCurveProgram: any } | null = null
   let cameraRatio = $state(1)
   let pulseProgress = $state(0)
   let pulseRaf = 0
   let graphThemeVersion = $state(0)
 
+  // Canvas group-in-a-box overlay: boxes/edges projected into viewport pixels.
+  // sigma draws node/edge geometry in WebGL; the overlay is a plain SVG synced
+  // to the camera (graphToViewport) so the boxes pan/zoom with the graph.
+  interface ViewportBox extends CommunityBox {
+    vx: number
+    vy: number
+    vw: number
+    vh: number
+  }
+  interface ViewportEdge {
+    id: string
+    vx1: number
+    vy1: number
+    vx2: number
+    vy2: number
+  }
+  let overlayBoxes = $state<ViewportBox[]>([])
+  let overlayEdges = $state<ViewportEdge[]>([])
+
+  // Map a layout-space point into viewport pixels. Sigma stores nodes at y=-y
+  // (see buildSigmaGraph), so the flip is reapplied before projecting.
+  function projectPoint(x: number, y: number): { x: number; y: number } | null {
+    const instance = sigmaInstance
+    if (!instance) return null
+    return instance.graphToViewport({ x, y: -y })
+  }
+
+  function syncOverlay() {
+    if (!groupInBox || !sigmaInstance || viewMode !== 'canvas') {
+      if (overlayBoxes.length) overlayBoxes = []
+      if (overlayEdges.length) overlayEdges = []
+      return
+    }
+    const boxes: ViewportBox[] = []
+    for (const box of communityBoxes) {
+      const p1 = projectPoint(box.minX, box.minY)
+      const p2 = projectPoint(box.maxX, box.maxY)
+      if (!p1 || !p2) continue
+      boxes.push({
+        ...box,
+        vx: Math.min(p1.x, p2.x),
+        vy: Math.min(p1.y, p2.y),
+        vw: Math.abs(p2.x - p1.x),
+        vh: Math.abs(p2.y - p1.y),
+      })
+    }
+    const edges: ViewportEdge[] = []
+    for (const edge of routedEdges) {
+      const a = projectPoint(edge.x1, edge.y1)
+      const b = projectPoint(edge.x2, edge.y2)
+      if (!a || !b) continue
+      edges.push({ id: edge.id, vx1: a.x, vy1: a.y, vx2: b.x, vy2: b.y })
+    }
+    overlayBoxes = boxes
+    overlayEdges = edges
+  }
+
   function prefersReducedMotion(): boolean {
     return (
       typeof window !== 'undefined' &&
@@ -384,11 +472,125 @@
   // See packages/ui/src/lib/renderers/graph-render.ts → runGraphLayout.
   const layout = $derived(runGraphLayout(drawNodes, drawEdges))
 
+  // Dark/light is theme-aware; re-read on the data-theme mutation observer tick.
+  const isDark = $derived.by(() => {
+    void graphThemeVersion
+    return typeof document === 'undefined'
+      ? true
+      : document.documentElement.dataset.theme !== 'light'
+  })
+
+  // Group-in-a-box geometry in layout ([0,100]) space. Shared by the SVG
+  // fallback (drawn directly) and the canvas overlay (mapped through sigma's
+  // graph→viewport transform). Empty unless the toggle is on.
+  const communityBoxes = $derived<CommunityBox[]>(
+    groupInBox ? computeCommunityBoxes(drawNodes, layout, { dark: isDark }) : [],
+  )
+  const routedEdges = $derived<RoutedEdge[]>(
+    groupInBox ? routeInterCommunityEdges(drawEdges, layout, communityBoxes) : [],
+  )
+  // Edge ids the box overlay re-routes — skipped by the straight SVG renderer.
+  const routedEdgeIds = $derived(new Set(routedEdges.map((e) => e.id)))
+
+  // ─── force-directed edge bundling (precomputed) ──────────────────────────
+  // FDEB is O(E²) in the compatibility pass, so it runs only when toggled on,
+  // off the per-frame path (memoised by $derived — recomputed when the draw
+  // set or layout changes, never on a camera move or focus change), and only
+  // up to the #59 node ceiling's matching edge cap.
+  const bundleTooLarge = $derived(bundleEnabled && drawEdges.length > BUNDLE_EDGE_LIMIT)
+
+  // Scale the iteration budget down as the edge count grows so the one-time
+  // precompute stays responsive even near the cap.
+  function bundleOptionsForSize(edgeCount: number): Partial<BundleOptions> {
+    if (edgeCount > 800) return { cycles: 4, iterations: 45 }
+    if (edgeCount > 300) return { cycles: 5, iterations: 55 }
+    return {}
+  }
+
+  const bundledPaths = $derived.by<Map<string, BundlePoint[]> | null>(() => {
+    if (!bundleEnabled || viewMode === 'table') return null
+    if (drawEdges.length === 0 || drawEdges.length > BUNDLE_EDGE_LIMIT) return null
+    const positions = drawNodes.map((n) => {
+      const pos = layout.get(n.id)
+      return { id: n.id, x: pos?.x ?? 50, y: pos?.y ?? 50 }
+    })
+    return bundleEdges(
+      positions,
+      drawEdges.map((e) => ({ id: e.id, source: e.source, target: e.target })),
+      bundleOptionsForSize(drawEdges.length),
+    )
+  })
+
+  // Per-edge sigma curvature. The bundle is computed in layout space; sigma's
+  // scene flips y, so the curvature sign is negated for the WebGL curve program.
+  const bundleCurvatures = $derived.by<Map<string, number> | null>(() => {
+    if (!bundledPaths) return null
+    const out = new Map<string, number>()
+    for (const [id, pts] of bundledPaths) out.set(id, -edgeCurvature(pts))
+    return out
+  })
+
+  // ─── community expand / collapse ────────────────────────────────────────
+  // Fold the collapsed communities into supernodes (positions reused from the
+  // base layout, so collapsing never re-runs FA2 and never jitters). The
+  // result feeds the same sigma/SVG pipeline an expanded graph uses.
+  const collapsed = $derived(
+    collapseCommunities(drawNodes, drawEdges, layout, collapsedCommunities),
+  )
+  const renderNodes = $derived(collapsed.nodes)
+  const renderEdges = $derived(collapsed.edges)
+  const renderLayout = $derived(collapsed.layout)
+
+  // Community → member count over the *base* draw set, so the toolbar can offer
+  // "collapse clusters" independently of what is collapsed right now.
+  const communityCounts = $derived.by(() => {
+    const groups = communitiesInLayout(drawNodes, layout)
+    return new Map([...groups].map(([community, ids]) => [community, ids.length]))
+  })
+  // A community is only worth collapsing if it has more than one member.
+  const collapsibleCommunities = $derived(
+    [...communityCounts].filter(([, count]) => count >= 2).map(([community]) => community),
+  )
+  const anyCollapsed = $derived(collapsedCommunities.size > 0)
+
+  function collapseCommunity(community: number) {
+    const next = new Set(collapsedCommunities)
+    next.add(community)
+    collapsedCommunities = next
+    clearGraphFocus()
+  }
+
+  function expandCommunity(community: number) {
+    const next = new Set(collapsedCommunities)
+    next.delete(community)
+    collapsedCommunities = next
+    clearGraphFocus()
+  }
+
+  function toggleCollapseAll() {
+    collapsedCommunities = anyCollapsed ? new Set() : new Set(collapsibleCommunities)
+    clearGraphFocus()
+    clearSelection()
+  }
+
+  // The community a node currently sits in (for the side-panel collapse action).
+  const selectedNodeCommunity = $derived(
+    selectedNode ? layout.get(selectedNode.id)?.community ?? null : null,
+  )
+
+  // Drop a selection that just got folded into a supernode (keeps state honest).
+  $effect(() => {
+    if (!selectedNode) return
+    if (collapsed.collapsedMembers.has(selectedNode.id)) clearSelection()
+  })
+
   const fallbackSvgNodes = $derived.by<FallbackSvgNode[]>(() => {
-    return drawNodes.map((node) => {
+    return renderNodes.map((node) => {
       const type = String(node.data.node_type ?? 'node')
       const incomingScale = nodeSizeScales.get(node.id) ?? 1
-      const pos = layout.get(node.id)
+      const pos = renderLayout.get(node.id)
+      const isSupernode = node.data.__supernode === true
+      const memberCount = typeof node.data.__memberCount === 'number' ? node.data.__memberCount : 0
       // Community tint as primary color so clusters read at a glance;
       // type still drives the radius/stroke contract.
       const color = pos ? colorForCommunity(pos.community) : colorForType(type)
@@ -396,7 +598,7 @@
         ...node,
         x: pos?.x ?? 50,
         y: pos?.y ?? 50,
-        r: nodeVisualRadius(type, incomingScale),
+        r: isSupernode ? supernodeSvgRadius(memberCount) : nodeVisualRadius(type, incomingScale),
         color,
       }
     })
@@ -405,16 +607,31 @@
   const fallbackSvgNodeById = $derived(new Map(fallbackSvgNodes.map((n) => [n.id, n])))
   const fallbackSvgEdges = $derived.by<FallbackSvgEdge[]>(() => {
     const out: FallbackSvgEdge[] = []
-    for (const edge of drawEdges) {
+    // renderEdges (not drawEdges) so collapsed clusters draw their aggregated
+    // supernode edges; expanded, renderEdges === drawEdges so nothing changes.
+    for (const edge of renderEdges) {
       const source = fallbackSvgNodeById.get(edge.source)
       const target = fallbackSvgNodeById.get(edge.target)
       if (!source || !target) continue
+      const bundled = bundledPaths?.get(edge.id)
+      let points: string | undefined
+      let mx = (source.x + target.x) / 2
+      let my = (source.y + target.y) / 2
+      if (bundled && bundled.length > 2) {
+        points = bundled.map((p) => `${p.x},${p.y}`).join(' ')
+        const midPoint = bundled[Math.floor(bundled.length / 2)]
+        mx = midPoint.x
+        my = midPoint.y
+      }
       out.push({
         ...edge,
         x1: source.x,
         y1: source.y,
         x2: target.x,
         y2: target.y,
+        points,
+        mx,
+        my,
       })
     }
     return out
@@ -502,30 +719,44 @@
       selectedNodeId: selectedNode?.id ?? null,
       pulse: pulseProgress,
       colors: sigmaThemeColors(),
+      groupInBox,
+      bundle: bundleEnabled && bundleCurvatures !== null,
     }
   }
 
   function buildCurrentSigmaGraph() {
     return buildSigmaGraph({
-      nodes: drawNodes,
-      edges: drawEdges,
-      layout,
+      nodes: renderNodes,
+      edges: renderEdges,
+      layout: renderLayout,
       sizeScales: nodeSizeScales,
       orphanIds: orphanNodeIds,
       dark: document.documentElement.dataset.theme !== 'light',
       edgeColor: sigmaThemeColors().edge,
+      bundledCurvatures: bundleCurvatures ?? undefined,
     })
   }
 
   function edgeById(id: string): GraphEdge | null {
-    return drawEdges.find((e) => e.id === id) ?? null
+    return renderEdges.find((e) => e.id === id) ?? null
+  }
+
+  // A click on any rendered node: a supernode expands its cluster, an ordinary
+  // node follows the focus/selection path. Routed from both renderers.
+  function onGraphNodeClick(id: string) {
+    if (isSupernodeId(id)) {
+      const community = supernodeCommunityOf(id)
+      if (community !== null) expandCommunity(community)
+      return
+    }
+    const gn = nodeById(id)
+    if (gn) clickGraphNode(gn)
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function wireSigmaEvents(instance: any) {
     instance.on('clickNode', ({ node }: { node: string }) => {
-      const gn = nodeById(node)
-      if (gn) clickGraphNode(gn)
+      onGraphNodeClick(node)
     })
     instance.on('enterNode', ({ node }: { node: string }) => {
       if (!pinnedFocusNodeId) hoveredFocusNodeId = node
@@ -550,6 +781,9 @@
     camera.on('updated', () => {
       cameraRatio = camera.ratio
     })
+    // Every repaint (pan, zoom, resize, refresh) reprojects the group-in-a-box
+    // overlay so its boxes/edges track the camera. No-op when the mode is off.
+    instance.on('afterRender', () => syncOverlay())
   }
 
   // Create / tear down the sigma (WebGL) instance with the canvas view.
@@ -563,18 +797,26 @@
     void (async () => {
       try {
         if (!sigmaModules) {
-          const [sig, nb] = await Promise.all([
+          const [sig, nb, ec] = await Promise.all([
             import('sigma'),
             import('@sigma/node-border'),
+            import('@sigma/edge-curve'),
           ])
-          sigmaModules = { Sigma: sig.default, NodeBorderProgram: nb.NodeBorderProgram }
+          sigmaModules = {
+            Sigma: sig.default,
+            NodeBorderProgram: nb.NodeBorderProgram,
+            EdgeCurveProgram: ec.default,
+          }
         }
         if (killed || !sigmaContainer) return
-        const { Sigma, NodeBorderProgram } = sigmaModules
+        const { Sigma, NodeBorderProgram, EdgeCurveProgram } = sigmaModules
         instance = new Sigma(buildCurrentSigmaGraph(), container, {
           allowInvalidContainer: true,
           defaultNodeType: 'border',
           nodeProgramClasses: { border: NodeBorderProgram },
+          // 'line' is the built-in straight program; 'curved' bows bundled
+          // edges. The edge reducer picks per-edge based on the bundle toggle.
+          edgeProgramClasses: { curved: EdgeCurveProgram },
           defaultEdgeType: 'line',
           renderEdgeLabels: true,
           labelFont: '"JetBrains Mono Variable", monospace',
@@ -610,12 +852,14 @@
 
   // Swap the graph in place when the draw set, layout, or theme changes.
   $effect(() => {
-    void drawNodes
-    void drawEdges
-    void layout
+    void renderNodes
+    void renderEdges
+    void renderLayout
     void nodeSizeScales
     void orphanNodeIds
     void graphThemeVersion
+    void bundleCurvatures
+    void bundleEnabled
     const instance = sigmaInstance
     if (!instance || viewMode !== 'canvas') return
     // Label colours are static settings (reducers can't set them), so refresh
@@ -637,6 +881,19 @@
     instance.refresh({ skipIndexation: true })
   })
 
+  // Group-in-a-box: toggling re-runs the edge reducer (cross-community edges
+  // hide), and any geometry/theme change re-projects the overlay onto the
+  // current camera. `afterRender` keeps it tracking subsequent repaints.
+  $effect(() => {
+    void groupInBox
+    void communityBoxes
+    void routedEdges
+    const instance = sigmaInstance
+    if (!instance || viewMode !== 'canvas') return
+    instance.refresh({ skipIndexation: true })
+    syncOverlay()
+  })
+
   function onSvgNodePointerEnter(node: GraphNode) {
     if (!pinnedFocusNodeId) hoveredFocusNodeId = node.id
   }
@@ -658,6 +915,7 @@
   }
 
   function showSvgLabel(node: FallbackSvgNode): boolean {
+    if (node.data.__supernode === true) return true
     if (!activeFocusNodeId) return false
     if (activeFocusNodeId === node.id) return true
     return focusNodeIds.size <= 36 && focusNodeIds.has(node.id)
@@ -784,6 +1042,55 @@
         </div>
       {/if}
 
+      {#if viewMode !== 'table'}
+        <button
+          type="button"
+          class={[
+            'inline-flex items-center gap-1 h-6 px-2 rounded border cursor-pointer transition-colors',
+            groupInBox ? 'border-accent/40 bg-accent/10 text-accent' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
+          ].join(' ')}
+          onclick={() => (groupInBox = !groupInBox)}
+          aria-pressed={groupInBox}
+          title="Group in a box — draw one tinted box per community and route inter-community edges at the borders"
+        >
+          <Group class="size-3" />
+          groups
+        </button>
+        <button
+          type="button"
+          class={[
+            'inline-flex items-center gap-1 h-6 px-2 rounded border cursor-pointer transition-colors',
+            bundleEnabled ? 'border-accent/40 bg-accent/10 text-accent' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
+          ].join(' ')}
+          onclick={() => (bundleEnabled = !bundleEnabled)}
+          aria-pressed={bundleEnabled}
+          title="Force-directed edge bundling — collapse parallel edges onto shared trunks to untangle dense subgraphs"
+        >
+          <Spline class="size-3" />
+          bundle
+        </button>
+        {#if bundleTooLarge}
+          <span class="text-warn" title={`Bundling is skipped above ${BUNDLE_EDGE_LIMIT.toLocaleString()} drawn edges — narrow the filter or lower the limit`}>
+            bundling skipped ({drawEdges.length.toLocaleString()} edges)
+          </span>
+        {/if}
+        {#if collapsibleCommunities.length > 0}
+          <button
+            type="button"
+            class={[
+              'inline-flex items-center gap-1 h-6 px-2 rounded border cursor-pointer transition-colors',
+              anyCollapsed ? 'border-accent/40 bg-accent/10 text-accent' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
+            ].join(' ')}
+            onclick={toggleCollapseAll}
+            aria-pressed={anyCollapsed}
+            title={anyCollapsed ? 'Expand all collapsed clusters back to their members' : 'Collapse each community into a single supernode'}
+          >
+            {#if anyCollapsed}<Group class="size-3" />{:else}<Boxes class="size-3" />{/if}
+            {anyCollapsed ? `expand (${collapsedCommunities.size})` : `collapse ${collapsibleCommunities.length} clusters`}
+          </button>
+        {/if}
+      {/if}
+
       <button
         type="button"
         class={[
@@ -944,6 +1251,36 @@
           aria-label={`${drawNodes.length} graph nodes and ${drawEdges.length} graph edges`}
           onkeydown={(event) => { if (event.key === 'Escape') { clearGraphFocus(); clearSelection() } }}
         ></div>
+        {#if groupInBox && (overlayBoxes.length > 0 || overlayEdges.length > 0)}
+          <!-- Group-in-a-box overlay, projected into viewport pixels and synced
+               to the camera. pointer-events stay off so sigma keeps the input. -->
+          <svg class="pointer-events-none absolute inset-0 h-full w-full" aria-hidden="true">
+            {#each overlayBoxes as box (box.community)}
+              <rect
+                x={box.vx}
+                y={box.vy}
+                width={box.vw}
+                height={box.vh}
+                rx="6"
+                fill={box.fill}
+                stroke={box.stroke}
+                stroke-width="1.5"
+              />
+            {/each}
+            {#each overlayEdges as e (e.id)}
+              <line
+                x1={e.vx1}
+                y1={e.vy1}
+                x2={e.vx2}
+                y2={e.vy2}
+                stroke="var(--color-line-3)"
+                stroke-width="1"
+                stroke-dasharray="4 3"
+                opacity="0.7"
+              />
+            {/each}
+          </svg>
+        {/if}
       {:else if viewMode === 'svg'}
         <div class="absolute inset-0 overflow-hidden bg-bg-0">
           <svg
@@ -959,31 +1296,85 @@
           >
             <rect x="0" y="0" width="100" height="100" fill="transparent" />
             <g transform={graphTransform}>
+              {#if groupInBox}
+                <!-- Community boxes behind everything; routed inter-community
+                     edges connect box borders rather than node centres. -->
+                <g class="pointer-events-none">
+                  {#each communityBoxes as box (box.community)}
+                    <rect
+                      x={box.minX}
+                      y={box.minY}
+                      width={box.maxX - box.minX}
+                      height={box.maxY - box.minY}
+                      rx="1.5"
+                      fill={box.fill}
+                      stroke={box.stroke}
+                      stroke-width="0.18"
+                      vector-effect="non-scaling-stroke"
+                    />
+                  {/each}
+                  {#each routedEdges as e (e.id)}
+                    <line
+                      x1={e.x1}
+                      y1={e.y1}
+                      x2={e.x2}
+                      y2={e.y2}
+                      stroke="currentColor"
+                      stroke-width="0.12"
+                      stroke-dasharray="0.8 0.6"
+                      opacity="0.6"
+                      class="text-line-3"
+                      vector-effect="non-scaling-stroke"
+                    />
+                  {/each}
+                </g>
+              {/if}
               <g>
                 {#each fallbackSvgEdges as e (e.id)}
+                  {#if !(groupInBox && routedEdgeIds.has(e.id))}
                   {@const focusedEdge = focusEdgeIds.has(e.id)}
-                  <line
-                    x1={e.x1}
-                    y1={e.y1}
-                    x2={e.x2}
-                    y2={e.y2}
-                    stroke={activeFocusNodeId ? (focusedEdge ? focusEdgeColor : 'currentColor') : 'currentColor'}
-                    stroke-width={activeFocusNodeId ? (focusedEdge ? '0.27' : '0.055') : '0.105'}
-                    opacity={activeFocusNodeId ? (focusedEdge ? '0.98' : '0.055') : '0.36'}
-                    class="text-line-3 cursor-pointer hover:text-accent"
-                    vector-effect="non-scaling-stroke"
-                    role="button"
-                    tabindex="0"
-                    aria-label={`${e.label ?? 'edge'} from ${e.source} to ${e.target}`}
-                    onclick={(event) => { event.stopPropagation(); clearGraphFocus(); selectEdge(e) }}
-                    onkeydown={(event) => onSelectableKey(event, () => { clearGraphFocus(); selectEdge(e) })}
-                  >
-                    <title>{e.label ?? 'edge'}: {e.source} -> {e.target}</title>
-                  </line>
+                  {#if e.points}
+                    <polyline
+                      points={e.points}
+                      fill="none"
+                      stroke={activeFocusNodeId ? (focusedEdge ? focusEdgeColor : 'currentColor') : 'currentColor'}
+                      stroke-width={activeFocusNodeId ? (focusedEdge ? '0.27' : '0.055') : '0.105'}
+                      opacity={activeFocusNodeId ? (focusedEdge ? '0.98' : '0.07') : '0.4'}
+                      stroke-linejoin="round"
+                      class="text-line-3 cursor-pointer hover:text-accent"
+                      vector-effect="non-scaling-stroke"
+                      role="button"
+                      tabindex="0"
+                      aria-label={`${e.label ?? 'edge'} from ${e.source} to ${e.target}`}
+                      onclick={(event) => { event.stopPropagation(); clearGraphFocus(); selectEdge(e) }}
+                      onkeydown={(event) => onSelectableKey(event, () => { clearGraphFocus(); selectEdge(e) })}
+                    >
+                      <title>{e.label ?? 'edge'}: {e.source} -> {e.target}</title>
+                    </polyline>
+                  {:else}
+                    <line
+                      x1={e.x1}
+                      y1={e.y1}
+                      x2={e.x2}
+                      y2={e.y2}
+                      stroke={activeFocusNodeId ? (focusedEdge ? focusEdgeColor : 'currentColor') : 'currentColor'}
+                      stroke-width={activeFocusNodeId ? (focusedEdge ? '0.27' : '0.055') : '0.105'}
+                      opacity={activeFocusNodeId ? (focusedEdge ? '0.98' : '0.055') : '0.36'}
+                      class="text-line-3 cursor-pointer hover:text-accent"
+                      vector-effect="non-scaling-stroke"
+                      role="button"
+                      tabindex="0"
+                      aria-label={`${e.label ?? 'edge'} from ${e.source} to ${e.target}`}
+                      onclick={(event) => { event.stopPropagation(); clearGraphFocus(); selectEdge(e) }}
+                      onkeydown={(event) => onSelectableKey(event, () => { clearGraphFocus(); selectEdge(e) })}
+                    >
+                      <title>{e.label ?? 'edge'}: {e.source} -> {e.target}</title>
+                    </line>
+                  {/if}
                   {#if showSvgEdgeLabel(e)}
                     <text
-                      x={(e.x1 + e.x2) / 2 + 0.45}
-                      y={(e.y1 + e.y2) / 2 - 0.45}
+                      x={e.mx + 0.45}
+                      y={e.my - 0.45}
                       fill="#f6d36b"
                       opacity="0.96"
                       font-size="1"
@@ -997,6 +1388,7 @@
                       {e.label?.slice(0, 28)}
                     </text>
                   {/if}
+                  {/if}
                 {/each}
               </g>
               <g>
@@ -1015,26 +1407,27 @@
                       class="pointer-events-none"
                     />
                   {/if}
+                  {@const supernode = n.data.__supernode === true}
                   <circle
                     cx={n.x}
                     cy={n.y}
                     r={svgNodeRadius(n)}
                     fill={n.color}
                     opacity={svgNodeOpacity(n)}
-                    stroke={activeFocusNodeId === n.id ? focusNodeStrokeColor : selectedNode?.id === n.id ? '#0a0a0b' : orphan ? 'var(--color-warn)' : '#ffffff'}
-                    stroke-width={activeFocusNodeId === n.id ? '0.55' : focusNodeIds.has(n.id) ? '0.22' : selectedNode?.id === n.id || orphan ? '0.4' : '0.14'}
+                    stroke={activeFocusNodeId === n.id ? focusNodeStrokeColor : supernode ? '#e2e8f0' : selectedNode?.id === n.id ? '#0a0a0b' : orphan ? 'var(--color-warn)' : '#ffffff'}
+                    stroke-width={activeFocusNodeId === n.id ? '0.55' : supernode ? '0.5' : focusNodeIds.has(n.id) ? '0.22' : selectedNode?.id === n.id || orphan ? '0.4' : '0.14'}
                     class="cursor-pointer graph-node"
                     class:focus-primary={activeFocusNodeId === n.id}
                     vector-effect="non-scaling-stroke"
                     role="button"
                     tabindex="0"
-                    aria-label={n.label}
+                    aria-label={supernode ? `${n.label} — click to expand` : n.label}
                     onpointerenter={() => onSvgNodePointerEnter(n)}
                     onpointerleave={() => onSvgNodePointerLeave(n)}
-                    onclick={(event) => { event.stopPropagation(); clickGraphNode(n) }}
-                    onkeydown={(event) => onSelectableKey(event, () => clickGraphNode(n))}
+                    onclick={(event) => { event.stopPropagation(); onGraphNodeClick(n.id) }}
+                    onkeydown={(event) => onSelectableKey(event, () => onGraphNodeClick(n.id))}
                   >
-                    <title>{n.label}</title>
+                    <title>{supernode ? `${n.label} — click to expand` : n.label}</title>
                   </circle>
                   {#if showSvgLabel(n)}
                     <text
@@ -1123,6 +1516,17 @@
                   {/if}
                 </div>
                 <div class="mt-1 break-all text-accent">{String(selectedNode.data.rid ?? selectedNode.id)}</div>
+                {#if selectedNodeCommunity !== null && (communityCounts.get(selectedNodeCommunity) ?? 0) >= 2}
+                  <button
+                    type="button"
+                    class="mt-2 inline-flex items-center gap-1.5 rounded border border-line-2 bg-bg-0 px-2 py-1 text-[11px] text-fg-2 hover:border-accent hover:text-fg-0 cursor-pointer"
+                    onclick={() => collapseCommunity(selectedNodeCommunity!)}
+                    title="Fold this node's community into a single supernode"
+                  >
+                    <Boxes class="size-3" />
+                    collapse cluster {selectedNodeCommunity} · {communityCounts.get(selectedNodeCommunity)} nodes
+                  </button>
+                {/if}
               </div>
 
               <div class="mb-3 border-t border-line-1 pt-3">