webgl-forensics 3.1.0

package/scripts/13-react-fiber-walker.js

@@ -0,0 +1,285 @@
+/**
+ * SCRIPT 13 — React Fiber Walker + R3F Component Extractor
+ * webgl-forensics skill | Enhancement #1 (Critical)
+ *
+ * PURPOSE:
+ *   Walk the React Fiber tree to extract R3F (React Three Fiber) component
+ *   hierarchy, Three.js object metadata, useFrame hooks, and component props.
+ *   This gives you the declarative structure behind the 3D scene, not just
+ *   the raw WebGL draw calls.
+ *
+ * RUN VIA:
+ *   evaluate_script tool — paste the IIFE or call window.__fiberWalk()
+ *
+ * WHAT IT EXTRACTS:
+ *   - Full R3F component tree (mesh, group, canvas, etc.)
+ *   - Props per component (position, rotation, scale, material, geometry)
+ *   - useFrame hooks and animation callbacks
+ *   - Zustand/Jotai store usage in 3D components
+ *   - Custom shader material uniforms declared in JSX
+ *   - R3F performance config (frameloop, shadows, gl props)
+ */
+(() => {
+  // ═══════════════════════════════════════════════
+  // STEP 1 — Find the React root fiber node
+  // ═══════════════════════════════════════════════
+  function findFiber(el) {
+    const key = Object.keys(el).find(k =>
+      k.startsWith('__reactFiber') || k.startsWith('__reactInternalInstance')
+    );
+    return key ? el[key] : null;
+  }
+
+  function findReactRoot() {
+    // R3F canvas is the most reliable entry point
+    const canvases = document.querySelectorAll('canvas');
+    for (const canvas of canvases) {
+      const fiber = findFiber(canvas);
+      if (fiber) return { node: fiber, source: 'canvas', el: canvas };
+    }
+    // Fall back to root div
+    const root = document.getElementById('__next') || document.getElementById('root') || document.body;
+    const fiber = findFiber(root);
+    if (fiber) return { node: fiber, source: 'root', el: root };
+    return null;
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 2 — Walk up to fiber tree root
+  // ═══════════════════════════════════════════════
+  function walkToRoot(fiber) {
+    let node = fiber;
+    while (node.return) node = node.return;
+    return node;
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 3 — Classify fiber node type
+  // ═══════════════════════════════════════════════
+  const R3F_TYPES = new Set([
+    'mesh', 'group', 'points', 'line', 'lineSegments', 'instancedMesh',
+    'meshStandardMaterial', 'meshPhysicalMaterial', 'meshBasicMaterial',
+    'meshNormalMaterial', 'shaderMaterial', 'rawShaderMaterial',
+    'boxGeometry', 'sphereGeometry', 'planeGeometry', 'bufferGeometry',
+    'ambientLight', 'directionalLight', 'pointLight', 'spotLight', 'rectAreaLight',
+    'perspectiveCamera', 'orthographicCamera',
+    'canvas', 'primitive',
+  ]);
+
+  const R3F_COMPONENT_NAMES = new Set([
+    'Canvas', 'Mesh', 'Group', 'Points', 'InstancedMesh',
+    'useFrame', 'useThree', 'useLoader',
+    'OrbitControls', 'PerspectiveCamera', 'Environment',
+    'MeshTransmissionMaterial', 'Html', 'Text', 'Billboard',
+    'Sparkles', 'Stars', 'Cloud', 'Effects',
+    'ScrollControls', 'Scroll', 'useScroll',
+    'Preload', 'BakeShadows', 'Bounds', 'Center',
+    'Float', 'Levitation', 'useAnimations',
+  ]);
+
+  function getNodeType(fiber) {
+    if (!fiber) return 'null';
+    const { type, stateNode } = fiber;
+    if (typeof type === 'string') return R3F_TYPES.has(type) ? `r3f:${type}` : `dom:${type}`;
+    if (typeof type === 'function') {
+      const name = type.displayName || type.name || 'Anonymous';
+      if (R3F_COMPONENT_NAMES.has(name)) return `r3f:${name}`;
+      if (name.includes('Canvas')) return `r3f:Canvas`;
+      return `component:${name}`;
+    }
+    if (type === null && stateNode && stateNode.nodeType === 3) return 'text';
+    return 'fragment';
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 4 — Extract meaningful props
+  // ═══════════════════════════════════════════════
+  function extractProps(fiber) {
+    const { memoizedProps: props } = fiber;
+    if (!props) return null;
+
+    const safe = {};
+    const matProps = ['position', 'rotation', 'scale', 'args', 'color', 'intensity',
+                      'fov', 'near', 'far', 'frameloop', 'shadows', 'gl', 'camera',
+                      'attach', 'object', 'visible', 'castShadow', 'receiveShadow'];
+
+    matProps.forEach(key => {
+      if (props[key] !== undefined) {
+        const val = props[key];
+        if (typeof val === 'function') {
+          safe[key] = `Function:${val.name || 'anonymous'}`;
+        } else if (val && typeof val === 'object' && val.isVector3) {
+          safe[key] = `Vector3(${val.x.toFixed(3)}, ${val.y.toFixed(3)}, ${val.z.toFixed(3)})`;
+        } else if (Array.isArray(val)) {
+          safe[key] = val.slice(0, 4); // truncate long arrays
+        } else if (typeof val === 'object' && val !== null) {
+          safe[key] = Object.keys(val).slice(0, 6).join(', ');
+        } else {
+          safe[key] = val;
+        }
+      }
+    });
+
+    // Detect uniforms object (shader materials)
+    if (props.uniforms) {
+      safe.uniforms = Object.keys(props.uniforms).map(k => {
+        const u = props.uniforms[k];
+        return `${k}: ${Array.isArray(u?.value) ? `[${u.value.slice(0,3).join(',')}]` : typeof u?.value}`;
+      });
+    }
+
+    // Detect event handlers
+    const handlers = Object.keys(props).filter(k => k.startsWith('on'));
+    if (handlers.length) safe._eventHandlers = handlers;
+
+    return Object.keys(safe).length ? safe : null;
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 5 — Tree walk (depth-first, bounded)
+  // ═══════════════════════════════════════════════
+  const r3fNodes = [];
+  const allComponents = {};
+  const MAX_DEPTH = 80;
+  const MAX_NODES = 2000;
+  let nodeCount = 0;
+
+  function walk(fiber, depth = 0) {
+    if (!fiber || depth > MAX_DEPTH || nodeCount > MAX_NODES) return;
+    nodeCount++;
+
+    const nodeType = getNodeType(fiber);
+    const isR3F = nodeType.startsWith('r3f:');
+    const isComponent = nodeType.startsWith('component:');
+    const name = nodeType.split(':')[1] || nodeType;
+
+    // Count all component types
+    const fullName = typeof fiber.type === 'function'
+      ? (fiber.type.displayName || fiber.type.name || 'Anonymous')
+      : (typeof fiber.type === 'string' ? fiber.type : 'fragment');
+
+    if (fullName && fullName !== 'Anonymous' && fullName !== 'fragment' && fullName !== 'text') {
+      allComponents[fullName] = (allComponents[fullName] || 0) + 1;
+    }
+
+    if (isR3F) {
+      const node = {
+        type: nodeType,
+        depth,
+        props: extractProps(fiber),
+      };
+
+      // Check stateNode for actual Three.js object
+      const sn = fiber.stateNode;
+      if (sn && sn.__r3f) {
+        node.threeObject = {
+          type: sn.constructor?.name,
+          uuid: sn.uuid?.slice(0, 8),
+          visible: sn.visible,
+          matrixAutoUpdate: sn.matrixAutoUpdate,
+          childCount: sn.children?.length,
+        };
+      }
+
+      r3fNodes.push(node);
+    }
+
+    // Walk children and siblings
+    if (fiber.child) walk(fiber.child, depth + 1);
+    if (fiber.sibling) walk(fiber.sibling, depth);
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 6 — Canvas-level R3F config extraction
+  // ═══════════════════════════════════════════════
+  function extractCanvasConfig() {
+    const config = {};
+
+    // Check for R3F root state on canvas elements
+    document.querySelectorAll('canvas').forEach((canvas, i) => {
+      const fiber = findFiber(canvas);
+      if (!fiber) return;
+
+      // Walk up to find Canvas component
+      let node = fiber;
+      while (node) {
+        if (typeof node.type === 'function' && (node.type.name === 'Canvas' || node.type.displayName === 'Canvas')) {
+          const props = node.memoizedProps || {};
+          config[`canvas_${i}`] = {
+            frameloop: props.frameloop || 'auto',
+            dpr: props.dpr,
+            gl: props.gl ? Object.keys(props.gl) : null,
+            shadows: props.shadows,
+            orthographic: props.orthographic || false,
+            linear: props.linear || false,
+            flat: props.flat || false,
+            camera: props.camera,
+          };
+          break;
+        }
+        node = node.return;
+      }
+
+      // Also check window.__r3f for internal state
+      if (window.__r3f) config.internalState = Object.keys(window.__r3f);
+    });
+
+    return config;
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 7 — EXECUTE
+  // ═══════════════════════════════════════════════
+  const rootEntry = findReactRoot();
+
+  if (!rootEntry) {
+    return { error: 'No React root found. Site may not use React.' };
+  }
+
+  const treeRoot = walkToRoot(rootEntry.node);
+  walk(treeRoot);
+
+  const canvasConfig = extractCanvasConfig();
+
+  // ═══════════════════════════════════════════════
+  // STEP 8 — Summarize + clone blueprint
+  // ═══════════════════════════════════════════════
+  const r3fSummary = r3fNodes.reduce((acc, n) => {
+    acc[n.type] = (acc[n.type] || 0) + 1;
+    return acc;
+  }, {});
+
+  const topComponents = Object.entries(allComponents)
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 20);
+
+  return {
+    meta: {
+      url: window.location.href,
+      timestamp: new Date().toISOString(),
+      totalFiberNodes: nodeCount,
+      reactEntry: rootEntry.source,
+    },
+    r3f: {
+      detected: r3fNodes.length > 0,
+      nodeCount: r3fNodes.length,
+      summary: r3fSummary,
+      canvasConfig,
+      nodes: r3fNodes.slice(0, 50), // top 50 R3F nodes
+    },
+    components: {
+      topByFrequency: topComponents,
+      total: Object.keys(allComponents).length,
+    },
+    cloneBlueprint: {
+      hasR3F: r3fNodes.some(n => n.type === 'r3f:canvas' || n.type === 'r3f:Canvas'),
+      r3fImports: [...new Set(r3fNodes.map(n => n.type.replace('r3f:', '')))].filter(t =>
+        R3F_COMPONENT_NAMES.has(t)
+      ),
+      materialTypes: [...new Set(r3fNodes.filter(n => n.type.includes('Material')).map(n => n.type.replace('r3f:', '')))],
+      geometryTypes: [...new Set(r3fNodes.filter(n => n.type.includes('Geometry')).map(n => n.type.replace('r3f:', '')))],
+      hasCustomShaders: r3fNodes.some(n => n.type.includes('shaderMaterial') || n.type.includes('rawShaderMaterial') || n.props?.uniforms),
+      hasScrollControls: r3fNodes.some(n => n.type.includes('ScrollControls') || n.type.includes('Scroll')),
+    },
+  };
+})()

package/scripts/14-shader-hotpatch.js

@@ -0,0 +1,349 @@
+/**
+ * SCRIPT 14 — Shader Hot-Patch System
+ * webgl-forensics skill | Enhancement #2
+ *
+ * PURPOSE:
+ *   Intercept and live-patch WebGL shader programs to understand:
+ *   - Exactly what each uniform controls by setting extreme values
+ *   - Which uniforms map to color, position, time, etc.
+ *   - The visual effect of each vertex/fragment shader output
+ *
+ * RUN VIA:
+ *   evaluate_script ONCE on page load — installs the intercept
+ *   Then call window.__shaderPatch.api() to use patch commands
+ *
+ * WORKFLOW:
+ *   1. Run this script (installs interceptors)
+ *   2. Run script 00-tech-stack-detect.js to get shader list
+ *   3. Call window.__shaderPatch.listPrograms() to list captured programs
+ *   4. Call window.__shaderPatch.probeUniforms(0) to auto-probe program 0
+ *   5. Call window.__shaderPatch.extractGLSL(0) to get raw GLSL source
+ *
+ * NOTE:
+ *   Must be injected BEFORE WebGL context creation for full intercept.
+ *   If page is already loaded, it captures existing programs only.
+ */
+(() => {
+  // Guard: don't install twice
+  if (window.__shaderPatch) {
+    console.log('✅ Shader hot-patch already installed. Use window.__shaderPatch.api()');
+    return window.__shaderPatch.api();
+  }
+
+  const captured = {
+    programs: [],
+    contexts: [],
+    uniformCache: {},
+  };
+
+  // ═══════════════════════════════════════════════
+  // STEP 1 — INTERCEPT WebGL context creation
+  // ═══════════════════════════════════════════════
+  const origGetContext = HTMLCanvasElement.prototype.getContext;
+  HTMLCanvasElement.prototype.getContext = function(type, ...args) {
+    const ctx = origGetContext.apply(this, [type, ...args]);
+    if ((type === 'webgl' || type === 'webgl2') && ctx) {
+      if (!captured.contexts.includes(ctx)) {
+        captured.contexts.push(ctx);
+        patchContext(ctx);
+      }
+    }
+    return ctx;
+  };
+
+  // ═══════════════════════════════════════════════
+  // STEP 2 — Patch shaderSource and linkProgram
+  // ═══════════════════════════════════════════════
+  function patchContext(gl) {
+    const origShaderSource = gl.shaderSource.bind(gl);
+    const origLinkProgram = gl.linkProgram.bind(gl);
+    const origUniform1f = gl.uniform1f.bind(gl);
+
+    const shaderSources = new WeakMap();
+
+    // Capture shader source as it's uploaded
+    gl.shaderSource = function(shader, src) {
+      shaderSources.set(shader, src);
+      return origShaderSource(shader, src);
+    };
+
+    // After linking, capture program metadata
+    gl.linkProgram = function(program) {
+      origLinkProgram(program);
+
+      // Use WEBGL_debug_shaders for verified source
+      const ext = gl.getExtension('WEBGL_debug_shaders');
+
+      const shaders = gl.getAttachedShaders(program);
+      const programData = {
+        id: captured.programs.length,
+        uniforms: [],
+        attributes: [],
+        vertex: null,
+        fragment: null,
+        _gl: gl,
+        _program: program,
+      };
+
+      if (shaders) {
+        shaders.forEach(shader => {
+          const type = gl.getShaderParameter(shader, gl.SHADER_TYPE);
+          const label = type === gl.VERTEX_SHADER ? 'vertex' : 'fragment';
+          // Prefer debug extension (unminified), fall back to captured source
+          const src = ext
+            ? ext.getTranslatedShaderSource(shader)
+            : (shaderSources.get(shader) || gl.getShaderSource(shader));
+          programData[label] = src;
+        });
+      }
+
+      // Extract all active uniforms
+      const uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
+      for (let i = 0; i < uniformCount; i++) {
+        const info = gl.getActiveUniform(program, i);
+        if (info) {
+          programData.uniforms.push({
+            name: info.name,
+            type: glTypeToString(info.type),
+            size: info.size,
+          });
+        }
+      }
+
+      // Extract all active attributes
+      const attrCount = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
+      for (let i = 0; i < attrCount; i++) {
+        const info = gl.getActiveAttrib(program, i);
+        if (info) programData.attributes.push({ name: info.name, type: glTypeToString(info.type) });
+      }
+
+      captured.programs.push(programData);
+      return;
+    };
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 3 — Also scan existing contexts (if page loaded)
+  // ═══════════════════════════════════════════════
+  document.querySelectorAll('canvas').forEach(canvas => {
+    // Try to grab existing context via _gl property (Three.js exposes this)
+    if (canvas._gl || canvas.__r3f?.gl) {
+      const gl = canvas._gl || canvas.__r3f?.gl;
+      if (!captured.contexts.includes(gl)) {
+        captured.contexts.push(gl);
+        console.log('🔌 Found existing WebGL context — patching for future calls');
+      }
+    }
+  });
+
+  // ═══════════════════════════════════════════════
+  // STEP 4 — THREE.JS PROGRAM EXTRACTION
+  //          Works even on already-loaded pages
+  // ═══════════════════════════════════════════════
+  function extractFromThreeJS() {
+    const results = [];
+
+    const maybeRenderer = (
+      window.__threeRenderer ||
+      (window.three && window.three.renderer) ||
+      null
+    );
+
+    // Try to find renderer via R3F internal state
+    document.querySelectorAll('canvas').forEach(canvas => {
+      const fiber = Object.keys(canvas).find(k => k.startsWith('__reactFiber'));
+      if (!fiber) return;
+
+      // Walk up fiber tree looking for R3F store
+      let node = canvas[fiber];
+      let depth = 0;
+      while (node && depth < 50) {
+        const store = node.memoizedState?.memoizedState;
+        if (store?.gl) {
+          const gl = store.gl;
+          const programs = gl.info?.programs || [];
+          programs.forEach((prog, idx) => {
+            const glProgram = prog.program;
+            const dbgExt = gl.getExtension('WEBGL_debug_shaders');
+            const uniforms = prog.getUniforms?.() || {};
+
+            results.push({
+              id: idx,
+              type: 'three.js-program',
+              name: prog.name || `program_${idx}`,
+              vertexShader: dbgExt && glProgram
+                ? (() => {
+                    try {
+                      const shaders = gl.getAttachedShaders(glProgram);
+                      const vs = shaders?.find(s => gl.getShaderParameter(s, gl.SHADER_TYPE) === gl.VERTEX_SHADER);
+                      return vs ? dbgExt.getTranslatedShaderSource(vs) : prog.vertexShader;
+                    } catch(e) { return prog.vertexShader; }
+                  })()
+                : prog.vertexShader,
+              fragmentShader: dbgExt && glProgram
+                ? (() => {
+                    try {
+                      const shaders = gl.getAttachedShaders(glProgram);
+                      const fs = shaders?.find(s => gl.getShaderParameter(s, gl.SHADER_TYPE) === gl.FRAGMENT_SHADER);
+                      return fs ? dbgExt.getTranslatedShaderSource(fs) : prog.fragmentShader;
+                    } catch(e) { return prog.fragmentShader; }
+                  })()
+                : prog.fragmentShader,
+              uniformsMap: Object.keys(uniforms).slice(0, 30),
+              _glRef: glProgram,
+              _gl: gl,
+            });
+          });
+          break;
+        }
+        node = node.return;
+        depth++;
+      }
+    });
+
+    return results;
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 5 — UNIFORM PROBE SYSTEM
+  // ═══════════════════════════════════════════════
+  function probeUniforms(programId) {
+    const allPrograms = [...captured.programs, ...extractFromThreeJS()];
+    const prog = allPrograms.find(p => p.id === programId);
+    if (!prog) return { error: `Program ${programId} not found` };
+
+    const gl = prog._gl;
+    const glProg = prog._glRef || prog._program;
+    if (!gl || !glProg) return { error: 'WebGL reference lost — must intercept at page load' };
+
+    const report = { programId, probes: [] };
+
+    // Set each uniform to an extreme value and describe the expected visual effect
+    prog.uniforms?.forEach(u => {
+      const loc = gl.getUniformLocation(glProg, u.name);
+      if (!loc) return;
+
+      const probe = { name: u.name, type: u.type, probeValue: null, hypothesis: '' };
+
+      // Based on naming conventions, guess purpose
+      const n = u.name.toLowerCase();
+      if (/time|tick|clock|elapsed/.test(n)) {
+        probe.hypothesis = '⏱ TIME — drives animation loop';
+        probe.probeValue = 999;
+      } else if (/color|col|rgb/.test(n)) {
+        probe.hypothesis = '🎨 COLOR — surface/emission color';
+        probe.probeValue = [1, 0, 0]; // solid red
+      } else if (/alpha|opacity|dissolve/.test(n)) {
+        probe.hypothesis = '🌫 ALPHA — transparency control';
+        probe.probeValue = 0;
+      } else if (/progress|scroll|offset/.test(n)) {
+        probe.hypothesis = '📜 SCROLL/PROGRESS — scroll-driven';
+        probe.probeValue = 0.5;
+      } else if (/noise|distort|warp/.test(n)) {
+        probe.hypothesis = '🌊 DISTORTION — warp/noise intensity';
+        probe.probeValue = 10;
+      } else if (/mouse|cursor|pointer/.test(n)) {
+        probe.hypothesis = '🖱 MOUSE — cursor interaction';
+        probe.probeValue = [0.5, 0.5];
+      } else if (/resolution|size|dimension/.test(n)) {
+        probe.hypothesis = '📐 RESOLUTION — pixel ratio fix';
+        probe.probeValue = [window.innerWidth, window.innerHeight];
+      } else if (/matrix|proj|view|model/.test(n)) {
+        probe.hypothesis = '📷 CAMERA MATRIX — do not patch';
+        probe.probeValue = 'SKIP';
+      } else if (/envmap|env|ibl/.test(n)) {
+        probe.hypothesis = '🌍 ENVIRONMENT — reflection/IBL map';
+        probe.probeValue = 'TEXTURE';
+      } else {
+        probe.hypothesis = '❓ UNKNOWN — probe manually';
+      }
+
+      report.probes.push(probe);
+    });
+
+    return report;
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 6 — HELPER UTILITIES
+  // ═══════════════════════════════════════════════
+  function glTypeToString(type) {
+    const types = {
+      0x8B51: 'vec3', 0x8B52: 'vec4', 0x8B50: 'vec2',
+      0x1406: 'float', 0x1404: 'int', 0x8B56: 'bool',
+      0x8B5E: 'sampler2D', 0x8B60: 'samplerCube',
+      0x8B5B: 'mat3', 0x8B5C: 'mat4',
+    };
+    return types[type] || `0x${type?.toString(16)}`;
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 7 — PUBLIC API
+  // ═══════════════════════════════════════════════
+  window.__shaderPatch = {
+    _captured: captured,
+
+    listPrograms() {
+      const threeProg = extractFromThreeJS();
+      const all = [...captured.programs, ...threeProg];
+      return all.map(p => ({
+        id: p.id,
+        type: p.type || 'captured',
+        name: p.name || `program_${p.id}`,
+        uniformCount: (p.uniforms || p.uniformsMap)?.length || 0,
+        hasVertex: !!p.vertexShader || !!p.vertex,
+        hasFragment: !!p.fragmentShader || !!p.fragment,
+      }));
+    },
+
+    extractGLSL(programId) {
+      const all = [...captured.programs, ...extractFromThreeJS()];
+      const p = all.find(x => x.id === programId);
+      if (!p) return { error: `Program ${programId} not found` };
+      return {
+        id: programId,
+        name: p.name,
+        vertex: p.vertex || p.vertexShader,
+        fragment: p.fragment || p.fragmentShader,
+        uniforms: p.uniforms || p.uniformsMap,
+        attributes: p.attributes,
+      };
+    },
+
+    probeUniforms(programId) {
+      return probeUniforms(programId);
+    },
+
+    extractAll() {
+      const allPrograms = [...captured.programs, ...extractFromThreeJS()];
+      return {
+        programCount: allPrograms.length,
+        contextCount: captured.contexts.length,
+        programs: allPrograms.map(p => ({
+          id: p.id,
+          name: p.name || `program_${p.id}`,
+          vertexGLSL: (p.vertex || p.vertexShader || '').slice(0, 2000),
+          fragmentGLSL: (p.fragment || p.fragmentShader || '').slice(0, 2000),
+          uniforms: p.uniforms || p.uniformsMap || [],
+          attributes: p.attributes || [],
+        })),
+      };
+    },
+
+    api() {
+      return {
+        usage: [
+          'window.__shaderPatch.listPrograms()     — list all captured shader programs',
+          'window.__shaderPatch.extractGLSL(id)    — dump vertex+fragment GLSL for program',
+          'window.__shaderPatch.probeUniforms(id)  — analyze uniforms with hypotheses',
+          'window.__shaderPatch.extractAll()        — full dump of all programs',
+        ],
+        programsFound: window.__shaderPatch.listPrograms().length,
+      };
+    },
+  };
+
+  // Run immediately
+  console.log('🔬 Shader Hot-Patch installed. Existing programs will be captured on next render.');
+  return window.__shaderPatch.extractAll();
+})()