diff --git a/graph-ui/src/components/DisplaySettingsMenu.tsx b/graph-ui/src/components/DisplaySettingsMenu.tsx
new file mode 100644
index 000000000..3b78f814c
--- /dev/null
+++ b/graph-ui/src/components/DisplaySettingsMenu.tsx
@@ -0,0 +1,149 @@
+import { useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  DEFAULT_DISPLAY_SETTINGS,
+  DISPLAY_LIMITS,
+  type DisplaySettings,
+} from "../lib/density";
+
+interface DisplaySettingsMenuProps {
+  settings: DisplaySettings;
+  onChange: (next: DisplaySettings) => void;
+}
+
+interface SliderRowProps {
+  label: string;
+  hint: string;
+  value: number;
+  min: number;
+  max: number;
+  onChange: (value: number) => void;
+}
+
+function SliderRow({ label, hint, value, min, max, onChange }: SliderRowProps) {
+  return (
+    <label className="block">
+      <div className="flex items-center justify-between mb-1">
+        <span className="text-[11px] text-foreground/70">{label}</span>
+        <span className="text-[10px] font-mono text-cyan-300/70 tabular-nums">
+          {value.toFixed(2)}×
+        </span>
+      </div>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={0.05}
+        value={value}
+        onChange={(e) => onChange(parseFloat(e.target.value))}
+        className="w-full accent-cyan-400 cursor-pointer"
+        aria-label={`${label} (${hint})`}
+      />
+      <p className="text-[9px] text-foreground/30 mt-0.5">{hint}</p>
+    </label>
+  );
+}
+
+/* Contrast / brightness controls for the 3D graph. These ride on top of the
+ * automatic density compensation — the defaults already adapt to graph size,
+ * so 1.00× is "auto"; the sliders let the user push it. */
+export function DisplaySettingsMenu({
+  settings,
+  onChange,
+}: DisplaySettingsMenuProps) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  /* Close on outside click / Escape */
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  const set = (patch: Partial<DisplaySettings>) =>
+    onChange({ ...settings, ...patch });
+
+  const isDefault =
+    settings.edgeBrightness === DEFAULT_DISPLAY_SETTINGS.edgeBrightness &&
+    settings.nodeGlow === DEFAULT_DISPLAY_SETTINGS.nodeGlow &&
+    settings.bloom === DEFAULT_DISPLAY_SETTINGS.bloom;
+
+  return (
+    <div ref={rootRef} className="relative">
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        title="Contrast & brightness"
+      >
+        Display{!isDefault && <span className="ml-1 text-cyan-300">•</span>}
+      </Button>
+
+      {open && (
+        <div
+          role="dialog"
+          aria-label="Display settings"
+          className="absolute top-10 right-0 w-64 p-4 rounded-lg border border-border/60 bg-[#0b1920]/95 backdrop-blur-md shadow-xl z-20 space-y-3.5"
+        >
+          <div className="flex items-center justify-between">
+            <span className="text-[11px] font-medium text-foreground/50 uppercase tracking-widest">
+              Contrast
+            </span>
+            <button
+              onClick={() => onChange(DEFAULT_DISPLAY_SETTINGS)}
+              className="text-[10px] text-primary/70 hover:text-primary transition-colors disabled:opacity-30"
+              disabled={isDefault}
+            >
+              Reset
+            </button>
+          </div>
+
+          <SliderRow
+            label="Edge brightness"
+            hint="Dim the web of links on dense graphs"
+            value={settings.edgeBrightness}
+            min={DISPLAY_LIMITS.edgeBrightness.min}
+            max={DISPLAY_LIMITS.edgeBrightness.max}
+            onChange={(edgeBrightness) => set({ edgeBrightness })}
+          />
+          <SliderRow
+            label="Node glow"
+            hint="Halo boost around each node"
+            value={settings.nodeGlow}
+            min={DISPLAY_LIMITS.nodeGlow.min}
+            max={DISPLAY_LIMITS.nodeGlow.max}
+            onChange={(nodeGlow) => set({ nodeGlow })}
+          />
+          <SliderRow
+            label="Bloom"
+            hint="Overall glow bloom strength"
+            value={settings.bloom}
+            min={DISPLAY_LIMITS.bloom.min}
+            max={DISPLAY_LIMITS.bloom.max}
+            onChange={(bloom) => set({ bloom })}
+          />
+
+          <p className="text-[9px] text-foreground/30 pt-1 border-t border-border/30">
+            1.00× follows the automatic density compensation. Lower the
+            edge/glow/bloom values when a large graph washes out to white.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/graph-ui/src/components/EdgeLines.tsx b/graph-ui/src/components/EdgeLines.tsx
index 50052d821..4cb7eba8e 100644
--- a/graph-ui/src/components/EdgeLines.tsx
+++ b/graph-ui/src/components/EdgeLines.tsx
@@ -1,12 +1,16 @@
 import { useMemo } from "react";
 import * as THREE from "three";
 import type { GraphNode, GraphEdge } from "../lib/types";
+import { edgeIntensityScale } from "../lib/density";
 
 interface EdgeLinesProps {
   nodes: GraphNode[];
   edges: GraphEdge[];
   highlightedIds: Set<number> | null;
   opacity?: number;
+  /* User edge-brightness multiplier (see DisplaySettings). Layered on top of
+   * the automatic density scale. */
+  brightness?: number;
   /* When set, edge.target is looked up in this array instead of `nodes`.
    * Used for cross-galaxy edges where source lives in the primary graph
    * and target lives in a linked project's offset-adjusted nodes. */
@@ -52,9 +56,13 @@ export function EdgeLines({
   edges,
   highlightedIds,
   opacity = 1.0,
+  brightness = 1.0,
   targetNodes,
 }: EdgeLinesProps) {
   const geometry = useMemo(() => {
+    /* Shrink per-edge glow as the edge count grows so the additively-blended
+     * center doesn't saturate to white; the user multiplier rides on top. */
+    const densityScale = edgeIntensityScale(edges.length) * brightness;
     const srcMap = new Map<number, number>();
     for (let i = 0; i < nodes.length; i++) {
       srcMap.set(nodes[i].id, i);
@@ -91,7 +99,11 @@ export function EdgeLines({
        * With additive blending + dark background, these glow nicely. */
       let intensity = sameCluster ? 0.25 : 0.06;
       if (hasHighlight) {
-        intensity = sHL && tHL ? 0.5 : 0.04;
+        /* A selection stays at full strength (never density-scaled) so it
+         * pops against the dimmed rest; only the un-selected bulk is scaled. */
+        intensity = sHL && tHL ? 0.5 : 0.04 * densityScale;
+      } else {
+        intensity *= densityScale;
       }
 
       const off = validCount * 6;
@@ -125,7 +137,7 @@ export function EdgeLines({
       new THREE.BufferAttribute(colors.slice(0, validCount * 6), 3),
     );
     return geo;
-  }, [nodes, edges, highlightedIds, targetNodes]);
+  }, [nodes, edges, highlightedIds, targetNodes, brightness]);
 
   return (
     <lineSegments geometry={geometry}>
diff --git a/graph-ui/src/components/GraphLoader.tsx b/graph-ui/src/components/GraphLoader.tsx
new file mode 100644
index 000000000..0d9154b17
--- /dev/null
+++ b/graph-ui/src/components/GraphLoader.tsx
@@ -0,0 +1,84 @@
+import type { LoadProgress } from "../hooks/useGraphData";
+
+/* Small constellation whose nodes pulse and whose edges draw themselves in a
+ * staggered loop — a miniature of the graph being loaded. Pure SVG/CSS
+ * (keyframes in globals.css) so it costs nothing while the real payload
+ * streams in, and it degrades to a static constellation under
+ * prefers-reduced-motion. */
+
+const LOADER_NODES: Array<{ cx: number; cy: number; r: number; delay: string }> = [
+  { cx: 60, cy: 18, r: 5, delay: "0s" },
+  { cx: 22, cy: 42, r: 4, delay: "0.35s" },
+  { cx: 98, cy: 40, r: 4, delay: "0.7s" },
+  { cx: 42, cy: 78, r: 4.5, delay: "1.05s" },
+  { cx: 84, cy: 82, r: 3.5, delay: "1.4s" },
+  { cx: 60, cy: 52, r: 6, delay: "0.15s" },
+  { cx: 14, cy: 88, r: 3, delay: "1.75s" },
+];
+
+const LOADER_EDGES: Array<{ x1: number; y1: number; x2: number; y2: number; delay: string }> = [
+  { x1: 60, y1: 18, x2: 60, y2: 52, delay: "0s" },
+  { x1: 22, y1: 42, x2: 60, y2: 52, delay: "0.3s" },
+  { x1: 98, y1: 40, x2: 60, y2: 52, delay: "0.6s" },
+  { x1: 42, y1: 78, x2: 60, y2: 52, delay: "0.9s" },
+  { x1: 84, y1: 82, x2: 60, y2: 52, delay: "1.2s" },
+  { x1: 42, y1: 78, x2: 14, y2: 88, delay: "1.5s" },
+  { x1: 22, y1: 42, x2: 60, y2: 18, delay: "1.8s" },
+];
+
+function formatMegabytes(bytes: number): string {
+  return (bytes / (1024 * 1024)).toFixed(1);
+}
+
+interface GraphLoaderProps {
+  nodeBudget: number;
+  progress: LoadProgress;
+}
+
+export function GraphLoader({ nodeBudget, progress }: GraphLoaderProps) {
+  const receiving = progress.receivedBytes > 0;
+  return (
+    <div className="text-center" role="status" aria-live="polite">
+      <svg
+        width="120"
+        height="104"
+        viewBox="0 0 120 104"
+        className="mx-auto"
+        aria-hidden="true"
+      >
+        {LOADER_EDGES.map((e, i) => (
+          <line
+            key={`e${i}`}
+            x1={e.x1}
+            y1={e.y1}
+            x2={e.x2}
+            y2={e.y2}
+            className="graph-loader-edge"
+            style={{ animationDelay: e.delay }}
+          />
+        ))}
+        {LOADER_NODES.map((n, i) => (
+          <circle
+            key={`n${i}`}
+            cx={n.cx}
+            cy={n.cy}
+            r={n.r}
+            className="graph-loader-node"
+            style={{ animationDelay: n.delay }}
+          />
+        ))}
+      </svg>
+      <p className="text-white/50 text-sm mt-4">
+        {receiving ? "Receiving graph" : "Computing layout"} — up to{" "}
+        {nodeBudget.toLocaleString("en-US")} nodes
+      </p>
+      <p className="text-cyan-300/60 text-xs font-mono mt-1 h-4">
+        {receiving
+          ? progress.totalBytes
+            ? `${formatMegabytes(progress.receivedBytes)} of ${formatMegabytes(progress.totalBytes)} MB`
+            : `${formatMegabytes(progress.receivedBytes)} MB received`
+          : " "}
+      </p>
+    </div>
+  );
+}
diff --git a/graph-ui/src/components/GraphScene.tsx b/graph-ui/src/components/GraphScene.tsx
index 81ec5c9bc..663c2ad32 100644
--- a/graph-ui/src/components/GraphScene.tsx
+++ b/graph-ui/src/components/GraphScene.tsx
@@ -9,6 +9,14 @@ import { EdgeLines } from "./EdgeLines";
 import { NodeLabels } from "./NodeLabels";
 import { NodeTooltip } from "./NodeTooltip";
 import type { GraphData, GraphNode, LinkedProject } from "../lib/types";
+import {
+  DEFAULT_DISPLAY_SETTINGS,
+  bloomIntensityScale,
+  nodeBoostScale,
+  type DisplaySettings,
+} from "../lib/density";
+
+const BASE_BLOOM_INTENSITY = 1.45;
 
 /* ── Camera fly-to animation ────────────────────────────── */
 
@@ -107,6 +115,7 @@ interface GraphSceneProps {
   highlightedIds: Set<number> | null;
   cameraTarget: CameraTarget | null;
   showLabels: boolean;
+  display?: DisplaySettings;
   onNodeClick: (node: GraphNode) => void;
 }
 
@@ -117,11 +126,21 @@ export function GraphScene({
   highlightedIds,
   cameraTarget,
   showLabels,
+  display = DEFAULT_DISPLAY_SETTINGS,
   onNodeClick,
 }: GraphSceneProps) {
   const [hovered, setHovered] = useState<GraphNode | null>(null);
   const controlsRef = useRef<OrbitControlsImpl | null>(null);
 
+  /* Adaptive density defaults × user multipliers. The automatic scale keeps
+   * contrast roughly constant as the graph grows; the sliders nudge it.
+   * NodeCloud applies `nodeBoost` directly (no internal density scaling),
+   * whereas EdgeLines scales by edge density itself — so it receives only the
+   * user edge-brightness multiplier to avoid double-applying. */
+  const nodeBoost = nodeBoostScale(data.nodes.length) * display.nodeGlow;
+  const bloomIntensity =
+    BASE_BLOOM_INTENSITY * bloomIntensityScale(data.nodes.length) * display.bloom;
+
   return (
     <Canvas
       camera={{ position: [0, 0, 800], fov: 50, near: 0.1, far: 100000 }}
@@ -146,12 +165,14 @@ export function GraphScene({
         nodes={data.nodes}
         edges={data.edges}
         highlightedIds={highlightedIds}
+        brightness={display.edgeBrightness}
       />
       <NodeCloud
         nodes={data.nodes}
         highlightedIds={highlightedIds}
         onHover={setHovered}
         onClick={onNodeClick}
+        boost={nodeBoost}
       />
       {showLabels && <NodeLabels nodes={data.nodes} highlightedIds={highlightedIds} />}
 
@@ -170,6 +191,7 @@ export function GraphScene({
               edges={lp.edges}
               highlightedIds={null}
               opacity={0.3}
+              brightness={display.edgeBrightness}
             />
             <NodeCloud
               nodes={offsetNodes}
@@ -177,6 +199,7 @@ export function GraphScene({
               onHover={setHovered}
               onClick={onNodeClick}
               opacity={0.5}
+              boost={nodeBoost}
             />
             {/* Inter-galaxy CROSS_* edges: source is in primary, target in
              * this linked project's offset nodes. */}
@@ -187,6 +210,7 @@ export function GraphScene({
                 edges={lp.cross_edges}
                 highlightedIds={highlightedIds}
                 opacity={0.85}
+                brightness={display.edgeBrightness}
               />
             )}
           </group>
@@ -202,7 +226,7 @@ export function GraphScene({
         <Bloom
           luminanceThreshold={0.3}
           luminanceSmoothing={0.7}
-          intensity={1.2}
+          intensity={bloomIntensity}
           mipmapBlur
           radius={0.6}
         />
diff --git a/graph-ui/src/components/GraphTab.test.ts b/graph-ui/src/components/GraphTab.test.ts
index 6056eeef0..0e68e76d9 100644
--- a/graph-ui/src/components/GraphTab.test.ts
+++ b/graph-ui/src/components/GraphTab.test.ts
@@ -20,7 +20,7 @@ describe("formatGraphLimitNotice", () => {
     } satisfies GraphData;
 
     expect(formatGraphLimitNotice(data)).toBe(
-      "Showing 2,000 of 43,729 nodes. Use filters to narrow.",
+      "Showing 2,000 of 43,729 nodes (0 edges). Raise the node budget or use filters.",
     );
   });
 
diff --git a/graph-ui/src/components/GraphTab.tsx b/graph-ui/src/components/GraphTab.tsx
index 8d267ca03..75f32a700 100644
--- a/graph-ui/src/components/GraphTab.tsx
+++ b/graph-ui/src/components/GraphTab.tsx
@@ -1,6 +1,19 @@
 import { useEffect, useState, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
-import { useGraphData } from "../hooks/useGraphData";
+import {
+  useGraphData,
+  clampNodeBudget,
+  GRAPH_RENDER_NODE_LIMIT,
+  GRAPH_NODE_BUDGET_STEP,
+  GRAPH_NODE_BUDGET_MAX,
+} from "../hooks/useGraphData";
+import { GraphLoader } from "./GraphLoader";
+import { DisplaySettingsMenu } from "./DisplaySettingsMenu";
+import {
+  loadDisplaySettings,
+  saveDisplaySettings,
+  type DisplaySettings,
+} from "../lib/density";
 import {
   GraphScene,
   computeCameraTarget,
@@ -26,27 +39,65 @@ function saveWidth(key: string, value: number) {
   try { localStorage.setItem(key, String(Math.round(value))); } catch { /* ignore */ }
 }
 
+/* Persist the node budget per project */
+function budgetKey(project: string): string {
+  return `cbm-node-budget:${project}`;
+}
+function loadNodeBudget(project: string): number {
+  try {
+    const v = localStorage.getItem(budgetKey(project));
+    if (v) return clampNodeBudget(parseInt(v, 10));
+  } catch { /* ignore */ }
+  return GRAPH_RENDER_NODE_LIMIT;
+}
+function saveNodeBudget(project: string, value: number) {
+  try { localStorage.setItem(budgetKey(project), String(value)); } catch { /* ignore */ }
+}
+
 interface GraphTabProps {
   project: string | null;
 }
 
 export function formatGraphLimitNotice(data: GraphData | null): string | null {
   if (!data || data.total_nodes <= data.nodes.length) return null;
-  return `Showing ${data.nodes.length.toLocaleString("en-US")} of ${data.total_nodes.toLocaleString("en-US")} nodes. Use filters to narrow.`;
+  return `Showing ${data.nodes.length.toLocaleString("en-US")} of ${data.total_nodes.toLocaleString("en-US")} nodes (${data.edges.length.toLocaleString("en-US")} edges). Raise the node budget or use filters.`;
 }
 
 export function GraphTab({ project }: GraphTabProps) {
-  const { data, loading, error, fetchOverview } = useGraphData();
+  const { data, loading, error, progress, fetchOverview } = useGraphData();
   const [highlightedIds, setHighlightedIds] = useState<Set<number> | null>(null);
   const [selectedPath, setSelectedPath] = useState<string | null>(null);
   const [selectedNode, setSelectedNode] = useState<GraphNode | null>(null);
   const [cameraTarget, setCameraTarget] = useState<CameraTarget | null>(null);
   const [repoInfo, setRepoInfo] = useState<RepoInfo | null>(null);
   const [showLabels, setShowLabels] = useState(true);
+  const [display, setDisplay] = useState<DisplaySettings>(() =>
+    loadDisplaySettings(),
+  );
+  const updateDisplay = useCallback((next: DisplaySettings) => {
+    setDisplay(next);
+    saveDisplaySettings(next);
+  }, []);
   const [leftWidth, setLeftWidth] = useState(() => loadWidth("cbm-left-w", 260));
   const [rightWidth, setRightWidth] = useState(() => loadWidth("cbm-right-w", 280));
   const limitNotice = formatGraphLimitNotice(data);
 
+  /* Node budget — keyed to its project so switching projects re-reads the
+   * persisted value and triggers exactly one fetch. */
+  const [budget, setBudget] = useState<{ project: string | null; value: number }>(
+    { project: null, value: GRAPH_RENDER_NODE_LIMIT },
+  );
+  const [budgetDraft, setBudgetDraft] = useState(String(GRAPH_RENDER_NODE_LIMIT));
+
+  const commitBudget = useCallback(() => {
+    const parsed = clampNodeBudget(parseInt(budgetDraft, 10));
+    setBudgetDraft(String(parsed));
+    if (project && parsed !== budget.value) {
+      saveNodeBudget(project, parsed);
+      setBudget({ project, value: parsed });
+    }
+  }, [budgetDraft, project, budget.value]);
+
   /* Filter state — all enabled by default */
   const [enabledLabels, setEnabledLabels] = useState<Set<string>>(new Set());
   const [enabledEdgeTypes, setEnabledEdgeTypes] = useState<Set<string>>(new Set());
@@ -121,13 +172,23 @@ export function GraphTab({ project }: GraphTabProps) {
     hideTests,
   ]);
 
+  /* Re-read the persisted budget when the project changes… */
   useEffect(() => {
     if (project) {
-      fetchOverview(project);
+      const value = loadNodeBudget(project);
+      setBudget({ project, value });
+      setBudgetDraft(String(value));
+    }
+  }, [project]);
+
+  /* …and fetch only once budget and project agree (one fetch per change). */
+  useEffect(() => {
+    if (project && budget.project === project) {
+      fetchOverview(project, budget.value);
       setHighlightedIds(null);
       setSelectedPath(null);
     }
-  }, [project, fetchOverview]);
+  }, [project, budget, fetchOverview]);
 
   /* Fetch git remote metadata for GitHub deep-links */
   useEffect(() => {
@@ -236,10 +297,7 @@ export function GraphTab({ project }: GraphTabProps) {
   if (loading) {
     return (
       <div className="flex items-center justify-center h-full">
-        <div className="text-center">
-          <div className="w-8 h-8 border-2 border-cyan-400/30 border-t-cyan-400 rounded-full animate-spin mx-auto mb-3" />
-          <p className="text-white/40 text-sm">Computing layout...</p>
-        </div>
+        <GraphLoader nodeBudget={budget.value} progress={progress} />
       </div>
     );
   }
@@ -330,6 +388,7 @@ export function GraphTab({ project }: GraphTabProps) {
                 highlightedIds={highlightedIds}
                 cameraTarget={cameraTarget}
                 showLabels={showLabels}
+                display={display}
                 onNodeClick={handleNodeClick}
               />
             </ErrorBoundary>
@@ -355,7 +414,7 @@ export function GraphTab({ project }: GraphTabProps) {
               )}
             </div>
 
-            <div className="absolute top-4 right-4 flex gap-2">
+            <div className="absolute top-4 right-4 flex gap-2 items-center">
               {highlightedIds && (
                 <Button
                   size="sm"
@@ -369,6 +428,33 @@ export function GraphTab({ project }: GraphTabProps) {
                   Clear selection
                 </Button>
               )}
+              <div className="flex items-center gap-1.5 h-8 px-2 rounded-md border border-border/50 bg-[#0b1920]/80 backdrop-blur-sm">
+                <label
+                  htmlFor="node-budget"
+                  className="text-[10px] uppercase tracking-wider text-white/40"
+                >
+                  Nodes
+                </label>
+                <input
+                  id="node-budget"
+                  type="number"
+                  min={GRAPH_NODE_BUDGET_STEP}
+                  max={GRAPH_NODE_BUDGET_MAX}
+                  step={GRAPH_NODE_BUDGET_STEP}
+                  value={budgetDraft}
+                  onChange={(e) => setBudgetDraft(e.target.value)}
+                  onBlur={commitBudget}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      e.currentTarget.blur();
+                    }
+                  }}
+                  className="w-24 bg-transparent text-right text-xs font-mono text-cyan-200/90 outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                  aria-label="Node budget: how many nodes to load"
+                  title="How many nodes to load (5,000 steps, edges between loaded nodes follow automatically)"
+                />
+              </div>
+              <DisplaySettingsMenu settings={display} onChange={updateDisplay} />
               <Button
                 variant="outline"
                 size="sm"
@@ -377,7 +463,7 @@ export function GraphTab({ project }: GraphTabProps) {
                   setSelectedPath(null);
                   setSelectedNode(null);
                   setCameraTarget(null);
-                  fetchOverview(project);
+                  fetchOverview(project, budget.value);
                 }}
               >
                 Refresh
diff --git a/graph-ui/src/components/NodeCloud.tsx b/graph-ui/src/components/NodeCloud.tsx
index e5465b8f2..a8ea2f80e 100644
--- a/graph-ui/src/components/NodeCloud.tsx
+++ b/graph-ui/src/components/NodeCloud.tsx
@@ -1,7 +1,8 @@
-import { useMemo, useRef } from "react";
-import { useFrame } from "@react-three/fiber";
+import { useEffect, useMemo, useRef } from "react";
+import { useThree } from "@react-three/fiber";
 import * as THREE from "three";
 import type { GraphNode } from "../lib/types";
+import { nodeGlowBoost } from "../lib/density";
 
 interface NodeCloudProps {
   nodes: GraphNode[];
@@ -9,48 +10,182 @@ interface NodeCloudProps {
   onHover: (node: GraphNode | null) => void;
   onClick: (node: GraphNode) => void;
   opacity?: number;
+  /* Multiplier on the per-node glow boost. 1 = full boost (sparse graphs),
+   * 0 = flat colors (dense graphs). Adaptive default × user setting. */
+  boost?: number;
 }
 
-export function NodeCloud({
+/* Above this count instanced spheres stop paying off (vertex + matrix cost)
+ * and the cloud switches to point sprites — one position per node. */
+const POINT_MODE_THRESHOLD = 75000;
+
+/* Sphere tessellation by node count: nobody can tell a 12-segment sphere from
+ * a 32-segment one at 25k nodes, but the GPU can. */
+function sphereDetail(count: number): [number, number, number] {
+  if (count <= 8000) return [1, 32, 24];
+  if (count <= 25000) return [1, 16, 12];
+  return [1, 10, 7];
+}
+
+function nodeColor(
+  node: GraphNode,
+  highlightedIds: Set<number> | null,
+  opacity: number,
+  boost: number,
+  tempColor: THREE.Color,
+): [number, number, number] {
+  const hasHighlight = highlightedIds && highlightedIds.size > 0;
+  tempColor.set(node.color);
+  if (hasHighlight && !highlightedIds.has(node.id)) {
+    tempColor.multiplyScalar(0.15);
+  } else {
+    /* Boost above 1.0 so bloom picks up the excess as glow corona. Blue hubs
+     * glow most, red leaves modestly, white/yellow least (see nodeGlowBoost).
+     * The boost amount also fades toward 1.0 (flat color) as density rises so
+     * dense graphs stay legible instead of blooming into a white blob. */
+    const fullBoost = nodeGlowBoost(tempColor.r, tempColor.g, tempColor.b);
+    const applied = 1 + (fullBoost - 1) * boost;
+    tempColor.multiplyScalar(applied);
+  }
+  return [tempColor.r * opacity, tempColor.g * opacity, tempColor.b * opacity];
+}
+
+/* Round, soft-edged sprite for point mode (module-level lazy singleton). */
+let pointSprite: THREE.CanvasTexture | null = null;
+function getPointSprite(): THREE.CanvasTexture {
+  if (pointSprite) return pointSprite;
+  const size = 64;
+  const canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext("2d")!;
+  const gradient = ctx.createRadialGradient(
+    size / 2, size / 2, 0,
+    size / 2, size / 2, size / 2,
+  );
+  gradient.addColorStop(0, "rgba(255,255,255,1)");
+  gradient.addColorStop(0.5, "rgba(255,255,255,0.9)");
+  gradient.addColorStop(1, "rgba(255,255,255,0)");
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, size, size);
+  pointSprite = new THREE.CanvasTexture(canvas);
+  return pointSprite;
+}
+
+/* ── Point-sprite mode for very large clouds ──────────────────── */
+
+function NodePoints({
   nodes,
   highlightedIds,
   onHover,
   onClick,
-  opacity = 1.0,
-}: NodeCloudProps) {
+  opacity,
+  boost,
+}: Required<NodeCloudProps>) {
+  const { raycaster } = useThree();
+
+  /* Widen the raycast threshold while points are on screen */
+  useEffect(() => {
+    const prev = raycaster.params.Points?.threshold ?? 1;
+    raycaster.params.Points = { threshold: 3 };
+    return () => {
+      raycaster.params.Points = { threshold: prev };
+    };
+  }, [raycaster]);
+
+  const { positions, colors } = useMemo(() => {
+    const positions = new Float32Array(nodes.length * 3);
+    const colors = new Float32Array(nodes.length * 3);
+    const tempColor = new THREE.Color();
+    for (let i = 0; i < nodes.length; i++) {
+      const n = nodes[i];
+      positions[i * 3] = n.x;
+      positions[i * 3 + 1] = n.y;
+      positions[i * 3 + 2] = n.z;
+      const [r, g, b] = nodeColor(n, highlightedIds, opacity, boost, tempColor);
+      colors[i * 3] = r;
+      colors[i * 3 + 1] = g;
+      colors[i * 3 + 2] = b;
+    }
+    return { positions, colors };
+  }, [nodes, highlightedIds, opacity, boost]);
+
+  return (
+    <points
+      /* Remount when the buffer size changes so stale attributes never linger */
+      key={nodes.length}
+      onPointerOver={(e) => {
+        e.stopPropagation();
+        if (e.index !== undefined && e.index < nodes.length) {
+          onHover(nodes[e.index]);
+        }
+      }}
+      onPointerOut={() => onHover(null)}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (e.index !== undefined && e.index < nodes.length) {
+          onClick(nodes[e.index]);
+        }
+      }}
+    >
+      <bufferGeometry>
+        <bufferAttribute attach="attributes-position" args={[positions, 3]} />
+        <bufferAttribute attach="attributes-color" args={[colors, 3]} />
+      </bufferGeometry>
+      <pointsMaterial
+        vertexColors
+        size={4}
+        sizeAttenuation
+        map={getPointSprite()}
+        alphaTest={0.35}
+        transparent
+        toneMapped={false}
+      />
+    </points>
+  );
+}
+
+/* ── Instanced-sphere mode (default) ──────────────────────────── */
+
+function NodeSpheres({
+  nodes,
+  highlightedIds,
+  onHover,
+  onClick,
+  opacity,
+  boost,
+}: Required<NodeCloudProps>) {
   const meshRef = useRef<THREE.InstancedMesh>(null);
   const tempObj = useMemo(() => new THREE.Object3D(), []);
   const tempColor = useMemo(() => new THREE.Color(), []);
+  const detail = sphereDetail(nodes.length);
 
   /* Build instance color attributes — dim non-highlighted nodes */
   const colors = useMemo(() => {
     const arr = new Float32Array(nodes.length * 3);
-    const hasHighlight = highlightedIds && highlightedIds.size > 0;
-
     for (let i = 0; i < nodes.length; i++) {
-      tempColor.set(nodes[i].color);
-      if (hasHighlight && !highlightedIds.has(nodes[i].id)) {
-        tempColor.multiplyScalar(0.15);
-      } else {
-        /* Boost above 1.0 so bloom picks up the excess as glow corona.
-         * Hotter stars (white/blue) get a stronger boost = brighter halo. */
-        const brightness = (tempColor.r + tempColor.g + tempColor.b) / 3;
-        const boost = 1.2 + brightness * 0.8; /* 1.2x for red, 2.0x for white */
-        tempColor.multiplyScalar(boost);
-      }
-      arr[i * 3] = tempColor.r * opacity;
-      arr[i * 3 + 1] = tempColor.g * opacity;
-      arr[i * 3 + 2] = tempColor.b * opacity;
+      const [r, g, b] = nodeColor(
+        nodes[i],
+        highlightedIds,
+        opacity,
+        boost,
+        tempColor,
+      );
+      arr[i * 3] = r;
+      arr[i * 3 + 1] = g;
+      arr[i * 3 + 2] = b;
     }
     return arr;
-  }, [nodes, highlightedIds, tempColor, opacity]);
+  }, [nodes, highlightedIds, tempColor, opacity, boost]);
 
-  useFrame(() => {
+  /* Node positions are static (the layout is server-computed), so instance
+   * matrices only change with the node set or the highlight — never rebuild
+   * them per frame. */
+  useEffect(() => {
     const mesh = meshRef.current;
     if (!mesh) return;
 
     const hasHighlight = highlightedIds && highlightedIds.size > 0;
-
     for (let i = 0; i < nodes.length; i++) {
       const n = nodes[i];
       tempObj.position.set(n.x, n.y, n.z);
@@ -62,10 +197,12 @@ export function NodeCloud({
     }
     mesh.instanceMatrix.needsUpdate = true;
     mesh.computeBoundingSphere();
-  });
+  }, [nodes, highlightedIds, tempObj]);
 
   return (
     <instancedMesh
+      /* Remount when the instance count changes so buffers are re-sized */
+      key={nodes.length}
       ref={meshRef}
       args={[undefined, undefined, nodes.length]}
       frustumCulled={false}
@@ -83,7 +220,7 @@ export function NodeCloud({
         }
       }}
     >
-      <sphereGeometry args={[1, 32, 24]} />
+      <sphereGeometry args={detail} />
       <meshBasicMaterial vertexColors toneMapped={false} />
       <instancedBufferAttribute
         attach="geometry-attributes-color"
@@ -92,3 +229,35 @@ export function NodeCloud({
     </instancedMesh>
   );
 }
+
+export function NodeCloud({
+  nodes,
+  highlightedIds,
+  onHover,
+  onClick,
+  opacity = 1.0,
+  boost = 1.0,
+}: NodeCloudProps) {
+  if (nodes.length > POINT_MODE_THRESHOLD) {
+    return (
+      <NodePoints
+        nodes={nodes}
+        highlightedIds={highlightedIds}
+        onHover={onHover}
+        onClick={onClick}
+        opacity={opacity}
+        boost={boost}
+      />
+    );
+  }
+  return (
+    <NodeSpheres
+      nodes={nodes}
+      highlightedIds={highlightedIds}
+      onHover={onHover}
+      onClick={onClick}
+      opacity={opacity}
+      boost={boost}
+    />
+  );
+}
diff --git a/graph-ui/src/hooks/useGraphData.test.ts b/graph-ui/src/hooks/useGraphData.test.ts
index 7edb76248..514561250 100644
--- a/graph-ui/src/hooks/useGraphData.test.ts
+++ b/graph-ui/src/hooks/useGraphData.test.ts
@@ -1,12 +1,18 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { fetchLayout, GRAPH_RENDER_NODE_LIMIT } from "./useGraphData";
+import {
+  fetchLayout,
+  clampNodeBudget,
+  GRAPH_RENDER_NODE_LIMIT,
+  GRAPH_NODE_BUDGET_STEP,
+  GRAPH_NODE_BUDGET_MAX,
+} from "./useGraphData";
 
 describe("fetchLayout", () => {
   afterEach(() => {
     vi.unstubAllGlobals();
   });
 
-  it("uses the safe graph render cap by default", async () => {
+  it("uses the default node budget when none is given", async () => {
     const fetchMock = vi.fn(async () => ({
       ok: true,
       json: async () => ({ nodes: [], edges: [], total_nodes: 0 }),
@@ -15,12 +21,76 @@ describe("fetchLayout", () => {
 
     await fetchLayout("large-project");
 
-    expect(GRAPH_RENDER_NODE_LIMIT).toBe(2000);
+    expect(GRAPH_RENDER_NODE_LIMIT).toBe(5000);
     expect(fetchMock).toHaveBeenCalledTimes(1);
     const calls = fetchMock.mock.calls as unknown as Array<[string]>;
     const [url] = calls[0];
     expect(url).toBe(
-      "/api/layout?project=large-project&max_nodes=2000",
+      "/api/layout?project=large-project&max_nodes=5000",
     );
   });
+
+  it("passes an explicit node budget through to the layout endpoint", async () => {
+    const fetchMock = vi.fn(async () => ({
+      ok: true,
+      json: async () => ({ nodes: [], edges: [], total_nodes: 0 }),
+    }));
+    vi.stubGlobal("fetch", fetchMock);
+
+    await fetchLayout("large-project", 250000);
+
+    const calls = fetchMock.mock.calls as unknown as Array<[string]>;
+    const [url] = calls[0];
+    expect(url).toBe(
+      "/api/layout?project=large-project&max_nodes=250000",
+    );
+  });
+
+  it("reports streaming progress while the body downloads", async () => {
+    const payload = new TextEncoder().encode(
+      JSON.stringify({ nodes: [], edges: [], total_nodes: 7 }),
+    );
+    const half = Math.floor(payload.length / 2);
+    const chunks = [payload.slice(0, half), payload.slice(half)];
+    let read = 0;
+    const fetchMock = vi.fn(async () => ({
+      ok: true,
+      headers: new Headers({ "content-length": String(payload.length) }),
+      body: {
+        getReader: () => ({
+          read: async () =>
+            read < chunks.length
+              ? { done: false, value: chunks[read++] }
+              : { done: true, value: undefined },
+        }),
+      },
+      json: async () => {
+        throw new Error("json() must not be used when streaming");
+      },
+    }));
+    vi.stubGlobal("fetch", fetchMock);
+
+    const seen: number[] = [];
+    const result = await fetchLayout("p", 5000, (p) => {
+      seen.push(p.receivedBytes);
+      expect(p.totalBytes).toBe(payload.length);
+    });
+
+    expect(result.total_nodes).toBe(7);
+    expect(seen).toEqual([half, payload.length]);
+  });
+});
+
+describe("clampNodeBudget", () => {
+  it("snaps to 5k steps within the 5k..10M range", () => {
+    expect(GRAPH_NODE_BUDGET_STEP).toBe(5000);
+    expect(GRAPH_NODE_BUDGET_MAX).toBe(10_000_000);
+    expect(clampNodeBudget(5000)).toBe(5000);
+    expect(clampNodeBudget(12345)).toBe(10000);
+    expect(clampNodeBudget(12501)).toBe(15000);
+    expect(clampNodeBudget(0)).toBe(5000);
+    expect(clampNodeBudget(-500)).toBe(5000);
+    expect(clampNodeBudget(99_999_999)).toBe(10_000_000);
+    expect(clampNodeBudget(Number.NaN)).toBe(GRAPH_RENDER_NODE_LIMIT);
+  });
 });
diff --git a/graph-ui/src/hooks/useGraphData.ts b/graph-ui/src/hooks/useGraphData.ts
index 5705555fa..c51b81d3e 100644
--- a/graph-ui/src/hooks/useGraphData.ts
+++ b/graph-ui/src/hooks/useGraphData.ts
@@ -1,19 +1,41 @@
 import { useCallback, useState } from "react";
 import type { GraphData } from "../lib/types";
 
+export interface LoadProgress {
+  receivedBytes: number;
+  totalBytes: number | null;
+}
+
 interface UseGraphDataResult {
   data: GraphData | null;
   loading: boolean;
   error: string | null;
-  fetchOverview: (project: string) => void;
+  progress: LoadProgress;
+  fetchOverview: (project: string, maxNodes?: number) => void;
   fetchDetail: (project: string, centerNode: string) => void;
 }
 
-export const GRAPH_RENDER_NODE_LIMIT = 2000;
+/* Node budget: how many nodes the layout endpoint is asked for. The default
+ * keeps first paint fast; the user can raise it in 5k steps up to the hard
+ * ceiling (mirrors HARD_MAX_NODES in src/ui/layout3d.c). Edges always follow
+ * the budget — the server returns every edge between the loaded nodes. */
+export const GRAPH_RENDER_NODE_LIMIT = 5000;
+export const GRAPH_NODE_BUDGET_STEP = 5000;
+export const GRAPH_NODE_BUDGET_MAX = 10_000_000;
+
+export function clampNodeBudget(value: number): number {
+  if (!Number.isFinite(value)) return GRAPH_RENDER_NODE_LIMIT;
+  const stepped =
+    Math.round(value / GRAPH_NODE_BUDGET_STEP) * GRAPH_NODE_BUDGET_STEP;
+  if (stepped < GRAPH_NODE_BUDGET_STEP) return GRAPH_NODE_BUDGET_STEP;
+  if (stepped > GRAPH_NODE_BUDGET_MAX) return GRAPH_NODE_BUDGET_MAX;
+  return stepped;
+}
 
 export async function fetchLayout(
   project: string,
   maxNodes = GRAPH_RENDER_NODE_LIMIT,
+  onProgress?: (progress: LoadProgress) => void,
 ): Promise<GraphData> {
   const params = new URLSearchParams({ project, max_nodes: String(maxNodes) });
   const res = await fetch(`/api/layout?${params}`);
@@ -23,34 +45,68 @@ export async function fetchLayout(
     throw new Error(body.error ?? `HTTP ${res.status}`);
   }
 
-  return res.json();
+  /* Stream the body when possible so large budgets show live download
+   * progress instead of a silent stall. */
+  if (!res.body || !onProgress) {
+    return res.json();
+  }
+
+  const lengthHeader = res.headers.get("content-length");
+  const totalBytes = lengthHeader ? parseInt(lengthHeader, 10) || null : null;
+  const reader = res.body.getReader();
+  const chunks: Uint8Array[] = [];
+  let receivedBytes = 0;
+
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    chunks.push(value);
+    receivedBytes += value.length;
+    onProgress({ receivedBytes, totalBytes });
+  }
+
+  const merged = new Uint8Array(receivedBytes);
+  let offset = 0;
+  for (const chunk of chunks) {
+    merged.set(chunk, offset);
+    offset += chunk.length;
+  }
+  return JSON.parse(new TextDecoder().decode(merged));
 }
 
+const NO_PROGRESS: LoadProgress = { receivedBytes: 0, totalBytes: null };
+
 export function useGraphData(): UseGraphDataResult {
   const [data, setData] = useState<GraphData | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [progress, setProgress] = useState<LoadProgress>(NO_PROGRESS);
 
-  const fetchOverview = useCallback(async (project: string) => {
-    setLoading(true);
-    setError(null);
-    try {
-      const result = await fetchLayout(project);
-      setData(result);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to fetch layout");
-    } finally {
-      setLoading(false);
-    }
-  }, []);
+  const fetchOverview = useCallback(
+    async (project: string, maxNodes?: number) => {
+      setLoading(true);
+      setError(null);
+      setProgress(NO_PROGRESS);
+      try {
+        const result = await fetchLayout(project, maxNodes, setProgress);
+        setData(result);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Failed to fetch layout");
+      } finally {
+        setLoading(false);
+      }
+    },
+    [],
+  );
 
   const fetchDetail = useCallback(
     async (project: string, _centerNode: string) => {
       setLoading(true);
       setError(null);
+      setProgress(NO_PROGRESS);
       try {
         /* TODO: detail level with center_node filtering */
-        const result = await fetchLayout(project);
+        const result = await fetchLayout(project, undefined, setProgress);
         setData(result);
       } catch (e) {
         setError(e instanceof Error ? e.message : "Failed to fetch layout");
@@ -61,5 +117,5 @@ export function useGraphData(): UseGraphDataResult {
     [],
   );
 
-  return { data, loading, error, fetchOverview, fetchDetail };
+  return { data, loading, error, progress, fetchOverview, fetchDetail };
 }
diff --git a/graph-ui/src/lib/density.test.ts b/graph-ui/src/lib/density.test.ts
new file mode 100644
index 000000000..28a0b9095
--- /dev/null
+++ b/graph-ui/src/lib/density.test.ts
@@ -0,0 +1,108 @@
+import { describe, expect, it } from "vitest";
+import {
+  edgeIntensityScale,
+  bloomIntensityScale,
+  nodeBoostScale,
+  nodeGlowBoost,
+  clampDisplaySettings,
+  DEFAULT_DISPLAY_SETTINGS,
+  EDGE_REFERENCE_COUNT,
+  NODE_REFERENCE_COUNT,
+} from "./density";
+
+/* Parse "#rrggbb" to 0..1 channels, matching how the renderer feeds colors. */
+function rgb(hex: string): [number, number, number] {
+  const n = parseInt(hex.slice(1), 16);
+  return [((n >> 16) & 0xff) / 255, ((n >> 8) & 0xff) / 255, (n & 0xff) / 255];
+}
+const glow = (hex: string) => nodeGlowBoost(...rgb(hex));
+
+describe("edgeIntensityScale", () => {
+  it("is 1 at or below the reference edge count", () => {
+    expect(edgeIntensityScale(0)).toBe(1);
+    expect(edgeIntensityScale(EDGE_REFERENCE_COUNT)).toBe(1);
+  });
+
+  it("shrinks monotonically as edges grow, bounded below", () => {
+    const a = edgeIntensityScale(10_000);
+    const b = edgeIntensityScale(80_000);
+    expect(a).toBeLessThan(1);
+    expect(b).toBeLessThan(a);
+    expect(b).toBeGreaterThanOrEqual(0.05);
+    /* Never collapses to zero even at absurd counts */
+    expect(edgeIntensityScale(50_000_000)).toBeGreaterThanOrEqual(0.05);
+  });
+
+  it("keeps accumulated brightness roughly flat (scale ~ 1/sqrt(n))", () => {
+    /* 4x the edges → each ~half as bright → similar total glow */
+    const ref = edgeIntensityScale(EDGE_REFERENCE_COUNT * 4);
+    expect(ref).toBeCloseTo(0.5, 5);
+  });
+});
+
+describe("bloomIntensityScale", () => {
+  it("stays full through the reference count (preserves the glow), then eases", () => {
+    /* A whole mid-size repo (≤25k nodes) keeps full bloom — the wow effect. */
+    expect(bloomIntensityScale(NODE_REFERENCE_COUNT)).toBe(1);
+    expect(bloomIntensityScale(20_000)).toBe(1);
+    /* Only very large clouds ease back, and never below the floor. */
+    expect(bloomIntensityScale(100_000)).toBeLessThan(1);
+    expect(bloomIntensityScale(10_000_000)).toBeGreaterThanOrEqual(0.7);
+  });
+});
+
+describe("nodeBoostScale", () => {
+  it("keeps node halos bright through the reference count, then eases gently", () => {
+    expect(nodeBoostScale(NODE_REFERENCE_COUNT)).toBe(1);
+    expect(nodeBoostScale(20_000)).toBe(1);
+    const big = nodeBoostScale(100_000);
+    expect(big).toBeGreaterThan(0.8);
+    expect(big).toBeLessThan(1);
+    /* Floored — never fully flat, even at millions of nodes. */
+    expect(nodeBoostScale(10_000_000)).toBeGreaterThanOrEqual(0.8);
+  });
+});
+
+describe("nodeGlowBoost", () => {
+  /* Star-class palette from lib/colors.ts STAR_LEGEND */
+  const BLUE_GIANT = "#80a0ff"; // 50+ connections (hubs)
+  const WHITE = "#e8e8ff"; // mid degree
+  const YELLOW = "#ffe080"; // mid degree
+  const RED_DWARF = "#ff6050"; // leaves
+
+  it("makes blue hubs glow the most", () => {
+    expect(glow(BLUE_GIANT)).toBeGreaterThan(glow(RED_DWARF));
+    expect(glow(BLUE_GIANT)).toBeGreaterThan(glow(WHITE));
+    expect(glow(BLUE_GIANT)).toBeGreaterThan(glow(YELLOW));
+  });
+
+  it("gives red leaves a modest boost — above white/yellow, below blue", () => {
+    expect(glow(RED_DWARF)).toBeGreaterThan(glow(WHITE));
+    expect(glow(RED_DWARF)).toBeGreaterThan(glow(YELLOW));
+    expect(glow(RED_DWARF)).toBeLessThan(glow(BLUE_GIANT));
+  });
+
+  it("keeps white/yellow low so they don't blow out the bloom", () => {
+    /* Old formula gave white ~2.0×; it must now be well under the blue hub. */
+    expect(glow(WHITE)).toBeLessThan(1.7);
+    expect(glow(YELLOW)).toBeLessThan(1.7);
+  });
+
+  it("never dims a node (multiplier ≥ 1)", () => {
+    for (const hex of [BLUE_GIANT, WHITE, YELLOW, RED_DWARF, "#06b6d4", "#a855f7"]) {
+      expect(glow(hex)).toBeGreaterThanOrEqual(1);
+    }
+  });
+});
+
+describe("clampDisplaySettings", () => {
+  it("clamps each setting to its range and fills defaults", () => {
+    expect(clampDisplaySettings({})).toEqual(DEFAULT_DISPLAY_SETTINGS);
+    expect(
+      clampDisplaySettings({ edgeBrightness: 99, nodeGlow: -5, bloom: 1.5 }),
+    ).toEqual({ edgeBrightness: 3, nodeGlow: 0, bloom: 1.5 });
+    expect(clampDisplaySettings({ bloom: Number.NaN }).bloom).toBe(
+      DEFAULT_DISPLAY_SETTINGS.bloom,
+    );
+  });
+});
diff --git a/graph-ui/src/lib/density.ts b/graph-ui/src/lib/density.ts
new file mode 100644
index 000000000..63bea4893
--- /dev/null
+++ b/graph-ui/src/lib/density.ts
@@ -0,0 +1,134 @@
+/* Visual density compensation.
+ *
+ * The white-blob-at-scale failure is dominated by EDGES: they blend
+ * additively and a 15k-node graph carries ~80k long lines crossing the
+ * center, so their glow stacks into an opaque wash. Nodes are far fewer and
+ * discrete — their bloom halos are the whole "wow", so we keep those bright.
+ *
+ * Strategy: dim edges hard (they cause the blob), keep nodes and bloom near
+ * full so the bright stars still pop; only ease nodes/bloom back on genuinely
+ * huge clouds where even discrete points overlap. Highlighted elements are
+ * never scaled — a selection stays bright against the dimmed rest. */
+
+/* Edge counts at/below this render exactly as before. */
+export const EDGE_REFERENCE_COUNT = 2500;
+const EDGE_MIN_SCALE = 0.05;
+
+export function edgeIntensityScale(edgeCount: number): number {
+  if (edgeCount <= EDGE_REFERENCE_COUNT) return 1;
+  /* ~1/sqrt(n): 4× the edges → each ~half as bright → total glow ~flat. */
+  return Math.max(EDGE_MIN_SCALE, Math.sqrt(EDGE_REFERENCE_COUNT / edgeCount));
+}
+
+/* Node glow and bloom stay at full strength up to here — this covers the
+ * common "load the whole repo" case (tens of thousands of nodes) so the
+ * bright-star look is preserved. */
+export const NODE_REFERENCE_COUNT = 25000;
+/* …then ease gently toward these floors as the cloud grows past the fade end,
+ * where even discrete point sprites start to overlap and over-bloom. */
+const NODE_FADE_END = 250000;
+const BLOOM_FLOOR = 0.7;
+const NODE_BOOST_FLOOR = 0.8;
+
+function fadeFactor(nodeCount: number): number {
+  if (nodeCount <= NODE_REFERENCE_COUNT) return 0;
+  return Math.min(
+    1,
+    (nodeCount - NODE_REFERENCE_COUNT) / (NODE_FADE_END - NODE_REFERENCE_COUNT),
+  );
+}
+
+export function bloomIntensityScale(nodeCount: number): number {
+  return 1 - fadeFactor(nodeCount) * (1 - BLOOM_FLOOR);
+}
+
+/* Per-node glow boost: full up to the reference count, then a gentle,
+ * high-floored fade so large clouds don't merge into mush while moderate
+ * graphs keep their halos. */
+export function nodeBoostScale(nodeCount: number): number {
+  return 1 - fadeFactor(nodeCount) * (1 - NODE_BOOST_FLOOR);
+}
+
+/* Colour-aware glow multiplier applied to each node before bloom.
+ *
+ * Nodes are coloured as star classes by degree: blue giants (high-degree
+ * hubs) → white/yellow (mid) → red dwarfs (leaves). Bloom is luminance-
+ * thresholded, and blue has a tiny luminance weight, so a naive
+ * brightness-based boost makes white/yellow blow out while blue and red stay
+ * flat. Instead we boost by *channel dominance*: a blue-dominant node gets the
+ * strongest boost (the important hubs shine brightest), a red-dominant node a
+ * modest one, and white/yellow — which need no help to bloom — the least.
+ *
+ * r, g, b are 0..1 colour channels. Returns a multiplier ≥ 1. */
+const GLOW_BASE = 1.35;
+const GLOW_BLUE_GAIN = 2.4;
+const GLOW_RED_GAIN = 0.9;
+
+export function nodeGlowBoost(r: number, g: number, b: number): number {
+  /* Blue that exceeds both red and green → cool hub. Red that exceeds both
+   * green and blue → warm leaf (green cutoff keeps yellow/orange out of the
+   * red term so they are not boosted). */
+  const blueness = Math.max(0, b - Math.max(r, g));
+  const redness = Math.max(0, r - Math.max(g, b));
+  return GLOW_BASE + blueness * GLOW_BLUE_GAIN + redness * GLOW_RED_GAIN;
+}
+
+/* ── Manual display settings ──────────────────────────────────── *
+ * User-facing multipliers layered ON TOP of the adaptive scales above:
+ * the adaptive scale picks a sane default for the current density, the
+ * sliders let the user push contrast/brightness around it. Persisted
+ * globally (a display preference, not a per-project fact). */
+
+export interface DisplaySettings {
+  /** Edge brightness multiplier (0.1–3, default 1). */
+  edgeBrightness: number;
+  /** Node glow-boost multiplier (0–2, default 1). */
+  nodeGlow: number;
+  /** Bloom intensity multiplier (0–2, default 1). */
+  bloom: number;
+}
+
+export const DEFAULT_DISPLAY_SETTINGS: DisplaySettings = {
+  edgeBrightness: 1,
+  nodeGlow: 1,
+  bloom: 1,
+};
+
+export const DISPLAY_LIMITS = {
+  edgeBrightness: { min: 0.1, max: 3 },
+  nodeGlow: { min: 0, max: 2 },
+  bloom: { min: 0, max: 2 },
+} as const;
+
+const DISPLAY_STORAGE_KEY = "cbm-display";
+
+function clampSetting(key: keyof DisplaySettings, value: unknown): number {
+  const { min, max } = DISPLAY_LIMITS[key];
+  const n = typeof value === "number" ? value : Number.NaN;
+  if (!Number.isFinite(n)) return DEFAULT_DISPLAY_SETTINGS[key];
+  return Math.min(max, Math.max(min, n));
+}
+
+export function clampDisplaySettings(
+  raw: Partial<DisplaySettings>,
+): DisplaySettings {
+  return {
+    edgeBrightness: clampSetting("edgeBrightness", raw.edgeBrightness),
+    nodeGlow: clampSetting("nodeGlow", raw.nodeGlow),
+    bloom: clampSetting("bloom", raw.bloom),
+  };
+}
+
+export function loadDisplaySettings(): DisplaySettings {
+  try {
+    const raw = localStorage.getItem(DISPLAY_STORAGE_KEY);
+    if (raw) return clampDisplaySettings(JSON.parse(raw));
+  } catch { /* ignore */ }
+  return DEFAULT_DISPLAY_SETTINGS;
+}
+
+export function saveDisplaySettings(settings: DisplaySettings) {
+  try {
+    localStorage.setItem(DISPLAY_STORAGE_KEY, JSON.stringify(settings));
+  } catch { /* ignore */ }
+}
diff --git a/graph-ui/src/styles/globals.css b/graph-ui/src/styles/globals.css
index c65bd70ab..5c401e336 100644
--- a/graph-ui/src/styles/globals.css
+++ b/graph-ui/src/styles/globals.css
@@ -37,3 +37,42 @@ html, body, #root {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+/* ── Graph loading constellation ─────────────────────────────── */
+
+.graph-loader-node {
+  fill: #22d3ee;
+  animation: graph-loader-pulse 2.1s ease-in-out infinite;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.graph-loader-edge {
+  stroke: #22d3ee;
+  stroke-opacity: 0.35;
+  stroke-width: 1.2;
+  stroke-dasharray: 90;
+  stroke-dashoffset: 90;
+  animation: graph-loader-draw 2.1s ease-in-out infinite;
+}
+
+@keyframes graph-loader-pulse {
+  0%, 100% { opacity: 0.25; transform: scale(0.8); }
+  35% { opacity: 1; transform: scale(1.15); }
+  70% { opacity: 0.45; transform: scale(0.95); }
+}
+
+@keyframes graph-loader-draw {
+  0% { stroke-dashoffset: 90; stroke-opacity: 0; }
+  40% { stroke-dashoffset: 0; stroke-opacity: 0.5; }
+  80%, 100% { stroke-dashoffset: 0; stroke-opacity: 0.15; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .graph-loader-node,
+  .graph-loader-edge {
+    animation: none;
+  }
+  .graph-loader-node { opacity: 0.8; }
+  .graph-loader-edge { stroke-dashoffset: 0; stroke-opacity: 0.35; }
+}
diff --git a/src/ui/http_server.c b/src/ui/http_server.c
index f23e36f4a..9325a5b16 100644
--- a/src/ui/http_server.c
+++ b/src/ui/http_server.c
@@ -1333,7 +1333,7 @@ static void handle_layout(cbm_http_conn_t *c, const cbm_http_req_t *req) {
         return;
     }
 
-    int max_nodes = 50000;
+    int max_nodes = 0; /* 0 → layout default budget */
     if (cbm_http_query_param(req->query, "max_nodes", max_str, (int)sizeof(max_str))) {
         int v = atoi(max_str);
         if (v > 0)
diff --git a/src/ui/layout3d.c b/src/ui/layout3d.c
index 3ff3fdb69..327f8e48b 100644
--- a/src/ui/layout3d.c
+++ b/src/ui/layout3d.c
@@ -24,8 +24,8 @@
 
 /* ── Constants ────────────────────────────────────────────────── */
 
-#define DEFAULT_MAX_NODES 2000
-#define HARD_MAX_NODES 200000
+#define DEFAULT_MAX_NODES 5000
+#define HARD_MAX_NODES 10000000
 #define BH_THETA 1.2f
 #define OCTREE_MAX_DEPTH 26   /* stop subdividing coincident points (OOM guard) */
 #define OCTREE_MIN_HALF 1e-4f /* minimum octree cell half-size */
@@ -173,16 +173,19 @@ static float rand_float(uint32_t *seed) {
     return (float)((*seed >> 16) & 0x7FFF) / 32768.0f - 0.5f;
 }
 
+/* Ceiling for a caller-requested node budget. CBM_UI_MAX_RENDER_NODES lowers
+ * (or raises, up to HARD_MAX_NODES) the ceiling for constrained deployments;
+ * without it the full hard ceiling is available to explicit requests. */
 static int render_node_limit(void) {
     const char *raw = getenv("CBM_UI_MAX_RENDER_NODES");
     if (!raw || !raw[0]) {
-        return DEFAULT_MAX_NODES;
+        return HARD_MAX_NODES;
     }
     errno = 0;
     char *end = NULL;
     long v = strtol(raw, &end, 10);
     if (errno != 0 || end == raw || *end != '\0' || v <= 0) {
-        return DEFAULT_MAX_NODES;
+        return HARD_MAX_NODES;
     }
     if (v > HARD_MAX_NODES) {
         return HARD_MAX_NODES;
@@ -190,9 +193,15 @@ static int render_node_limit(void) {
     return (int)v;
 }
 
+/* The default is a default, not a ceiling: an explicit request is honored up
+ * to the (env-adjustable) ceiling; only a missing/invalid request falls back
+ * to DEFAULT_MAX_NODES. */
 static int clamp_max_nodes(int requested) {
     int cap = render_node_limit();
-    if (requested <= 0 || requested > cap) {
+    if (requested <= 0) {
+        requested = DEFAULT_MAX_NODES;
+    }
+    if (requested > cap) {
         return cap;
     }
     return requested;
@@ -317,7 +326,17 @@ typedef struct {
 /* ── Local optimization (gentle, anchor-preserving) ───────────── */
 
 static void local_optimize(body_t *b, int n, const int *es, const int *ed, int ne) {
-    for (int iter = 0; iter < LOCAL_ITERATIONS; iter++) {
+    /* Scale iteration effort down for very large graphs: each iteration is
+     * O(n log n) octree work, and past ~100k bodies the anchor layout already
+     * dominates the visible structure — fewer refinement passes keep huge
+     * budgets responsive instead of multiplying minutes of compute. */
+    int iterations = LOCAL_ITERATIONS;
+    if (n > 500000) {
+        iterations = 10;
+    } else if (n > 100000) {
+        iterations = 20;
+    }
+    for (int iter = 0; iter < iterations; iter++) {
         for (int i = 0; i < n; i++) {
             b[i].fx = 0;
             b[i].fy = 0;
diff --git a/tests/test_ui.c b/tests/test_ui.c
index 91493b7a1..412522e6b 100644
--- a/tests/test_ui.c
+++ b/tests/test_ui.c
@@ -358,6 +358,48 @@ TEST(layout_clamps_render_cap_from_env) {
     PASS();
 }
 
+/* A caller-requested budget above the default must be honored (up to the hard
+ * ceiling) when no env cap is set — the default is a default, not a ceiling. */
+TEST(layout_honors_budget_above_default) {
+    cbm_store_t *store = cbm_store_open_memory();
+    ASSERT_NOT_NULL(store);
+
+    const char *old_raw = getenv("CBM_UI_MAX_RENDER_NODES");
+    char *old_cap = old_raw ? strdup(old_raw) : NULL;
+    cbm_unsetenv("CBM_UI_MAX_RENDER_NODES");
+
+    cbm_store_upsert_project(store, "test", "/tmp/test");
+
+    enum { BUDGET_NODES = 5100 };
+    for (int i = 0; i < BUDGET_NODES; i++) {
+        char name[32], qn[64];
+        snprintf(name, sizeof(name), "fn%d", i);
+        snprintf(qn, sizeof(qn), "test::fn%d", i);
+        cbm_node_t n = {.project = "test",
+                        .label = "Function",
+                        .name = name,
+                        .qualified_name = qn,
+                        .file_path = "a.c",
+                        .start_line = i,
+                        .end_line = i + 1};
+        cbm_store_upsert_node(store, &n);
+    }
+
+    cbm_layout_result_t *r =
+        cbm_layout_compute(store, "test", CBM_LAYOUT_OVERVIEW, NULL, 0, BUDGET_NODES);
+    ASSERT_NOT_NULL(r);
+    ASSERT_EQ(r->node_count, BUDGET_NODES);
+    ASSERT_EQ(r->total_nodes, BUDGET_NODES);
+
+    cbm_layout_free(r);
+    cbm_store_close(store);
+    if (old_cap) {
+        cbm_setenv("CBM_UI_MAX_RENDER_NODES", old_cap, 1);
+        free(old_cap);
+    }
+    PASS();
+}
+
 TEST(layout_deterministic) {
     cbm_store_t *store = cbm_store_open_memory();
     ASSERT_NOT_NULL(store);
@@ -759,6 +801,7 @@ SUITE(ui) {
     RUN_TEST(layout_two_connected);
     RUN_TEST(layout_respects_max_nodes);
     RUN_TEST(layout_clamps_render_cap_from_env);
+    RUN_TEST(layout_honors_budget_above_default);
     RUN_TEST(layout_deterministic);
     RUN_TEST(layout_to_json);
     RUN_TEST(layout_null_inputs);