npm - @echomem/mcp - Versions diffs - 1.4.8 → 1.4.9 - Mend

@echomem/mcp 1.4.8 → 1.4.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/README.md +23 -3
package/assets/canonical-scorer/README.md +18 -0
package/assets/canonical-scorer/analyze-10-problems.mjs +857 -0
package/assets/canonical-scorer/build-session-waste-dashboard.mjs +1628 -0
package/assets/canonical-scorer/golden_anchors.mjs +83 -0
package/assets/canonical-scorer/optimizable_detail.mjs +633 -0
package/dist/city/chaos-to-clarity-pencil.html +582 -0
package/dist/city/echo-ai-city-only.html +1104 -105
package/dist/city/echo-ai-city-only.template.html +1104 -105
package/dist/city/pencil-pie-generator.html +883 -0
package/dist/city/pencil-webgl-landscape.html +1239 -0
package/dist/city/spatial-fan-story.html +479 -0
package/dist/codex-session-files.js +283 -0
package/dist/codex-sync.js +7 -2
package/dist/context-analysis/canonical-golden.js +47 -0
package/dist/context-analysis/claude-native-canonical.js +1193 -0
package/dist/context-analysis/vendored-canonical.js +793 -0
package/dist/context-analysis/workspace-report.js +1838 -0
package/dist/context-metrics/calculate.js +56 -0
package/dist/context-metrics/model-limits.js +26 -0
package/dist/context-metrics/types.js +1 -0
package/dist/forensics-10-problems.js +7 -6
package/dist/forensics.js +863 -132
package/dist/hud/adapters.js +8 -4
package/dist/hud/metric.js +13 -4
package/dist/hud/monitor.js +135 -16
package/dist/hud/web.js +344 -298
package/dist/index.js +7 -3
package/dist/local-data-paths.js +87 -0
package/dist/migrate.js +37 -29
package/dist/report.js +101 -40
package/dist/setup-page.js +3290 -196
package/dist/setup-preview.js +245 -0
package/dist/setup.js +432 -34
package/package.json +5 -4
package/templates/echomem-recall.md +2 -2

package/dist/city/pencil-webgl-landscape.html ADDED Viewed

@@ -0,0 +1,1239 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Circular Context City — Pencil WebGL Study</title>
+<style>
+  :root {
+    --paper: #f3efe5;
+    --ink: #30312d;
+    --muted: #76736b;
+    --codex: #343541;
+    --claude: #d97757;
+  }
+  * { box-sizing: border-box; }
+  html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
+  body {
+    background:
+      radial-gradient(circle at 48% 42%, rgba(255,255,255,.98) 0 25%, rgba(249,247,241,.92) 58%, rgba(235,230,218,.82) 100%),
+      var(--paper);
+    color: var(--ink);
+    font-family: "IBM Plex Mono", "SFMono-Regular", ui-monospace, Menlo, monospace;
+  }
+  body::after {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    opacity: .22;
+    mix-blend-mode: multiply;
+    background-image:
+      repeating-linear-gradient(8deg, transparent 0 4px, rgba(64,60,50,.016) 4px 5px),
+      repeating-linear-gradient(98deg, transparent 0 9px, rgba(255,255,255,.16) 9px 10px);
+  }
+  #stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
+  #stage:active { cursor: grabbing; }
+  .summary {
+    position: fixed;
+    left: clamp(20px, 4vw, 54px);
+    top: clamp(20px, 4vw, 48px);
+    z-index: 3;
+    pointer-events: none;
+  }
+  .eyebrow { font-size: 10px; letter-spacing: .18em; color: var(--muted); text-transform: uppercase; }
+  .metric { margin-top: 8px; font: 500 clamp(38px, 5vw, 74px)/.9 Georgia, "Times New Roman", serif; letter-spacing: -.04em; }
+  .metric span { font: 500 12px/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
+  .caption { max-width: 360px; margin-top: 12px; font-size: 11px; line-height: 1.55; color: var(--muted); }
+  .legend { display: flex; gap: 16px; margin-top: 13px; font-size: 10px; color: var(--muted); }
+  .legend span { display: inline-flex; align-items: center; gap: 6px; }
+  .legend i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(48,49,45,.14); }
+  .legend .codex { background: var(--codex); }
+  .legend .claude { background: var(--claude); }
+  .actions {
+    position: fixed;
+    right: clamp(18px, 3vw, 42px);
+    bottom: clamp(18px, 3vw, 36px);
+    z-index: 4;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  .hint { font-size: 10px; color: var(--muted); }
+  button {
+    border: 1px solid rgba(48,49,45,.26);
+    background: rgba(248,245,237,.84);
+    color: var(--ink);
+    padding: 8px 12px;
+    font: 500 10px/1 "IBM Plex Mono", ui-monospace, monospace;
+    letter-spacing: .08em;
+    text-transform: uppercase;
+    cursor: pointer;
+    backdrop-filter: blur(8px);
+  }
+  button[aria-pressed="true"] { color: #f6f1e6; background: var(--codex); border-color: var(--codex); }
+  @media (max-width: 640px) {
+    .caption, .hint { display: none; }
+    .summary { top: 18px; left: 18px; }
+    .actions { right: 16px; bottom: 16px; }
+  }
+</style>
+</head>
+<body>
+<canvas id="stage" aria-label="Interactive hand-drawn WebGL city showing repository context morphing from flat graphite pucks into tall frosted-glass columns on a thin paper platform"></canvas>
+<div class="summary" aria-live="polite">
+  <div class="eyebrow">Context scan · repository city</div>
+  <div class="metric"><b id="dirty-value">82%</b> <span id="dirty-label">dirty context</span></div>
+  <div class="caption" id="summary-caption">Dirty context spreads low and wide, carrying graphite, dust and repeated reads.</div>
+  <div class="legend" aria-label="Coding agent colors">
+    <span><i class="codex"></i>Codex</span>
+    <span><i class="claude"></i>Claude Code</span>
+  </div>
+</div>
+<div class="actions">
+  <span class="hint">Drag to orbit · wheel to zoom</span>
+  <button id="dirty" type="button" aria-pressed="true">Dirty</button>
+  <button id="repair" type="button" aria-pressed="false">Repair city</button>
+  <button id="authentic" type="button" aria-pressed="false">Authentic version</button>
+</div>
+<script type="importmap">
+{ "imports": { "three": "./vendor/three.module.min.js" } }
+</script>
+<script type="module">
+import * as THREE from "three";
+import { OrbitControls } from "./vendor/OrbitControls.js";
+import { RoundedBoxGeometry } from "./vendor/RoundedBoxGeometry.js";
+const canvas = document.getElementById("stage");
+const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true, powerPreference: "high-performance" });
+renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
+renderer.setClearColor(0xf3efe5, 0);
+renderer.outputColorSpace = THREE.SRGBColorSpace;
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+renderer.toneMapping = THREE.ACESFilmicToneMapping;
+renderer.toneMappingExposure = 1.05;
+const scene = new THREE.Scene();
+// Soft studio lighting from the earlier clean city: the frosted colour lives
+// inside the glass volume instead of reading as a flat transparent surface.
+function buildStudioEnvironment() {
+  const cv = document.createElement("canvas");
+  cv.width = 512;
+  cv.height = 256;
+  const g = cv.getContext("2d");
+  const gradient = g.createLinearGradient(0, 0, 0, 256);
+  gradient.addColorStop(0, "#ffffff");
+  gradient.addColorStop(.5, "#eef1f6");
+  gradient.addColorStop(1, "#d2d7e0");
+  g.fillStyle = gradient;
+  g.fillRect(0, 0, 512, 256);
+  const spot = g.createRadialGradient(150, 62, 8, 150, 62, 150);
+  spot.addColorStop(0, "rgba(255,255,255,.95)");
+  spot.addColorStop(1, "rgba(255,255,255,0)");
+  g.fillStyle = spot;
+  g.fillRect(0, 0, 512, 256);
+  const texture = new THREE.CanvasTexture(cv);
+  texture.mapping = THREE.EquirectangularReflectionMapping;
+  texture.colorSpace = THREE.SRGBColorSpace;
+  const pmrem = new THREE.PMREMGenerator(renderer);
+  pmrem.compileEquirectangularShader();
+  const environment = pmrem.fromEquirectangular(texture).texture;
+  texture.dispose();
+  pmrem.dispose();
+  return environment;
+}
+scene.environment = buildStudioEnvironment();
+const camera = new THREE.OrthographicCamera(-16, 16, 12, -12, .1, 180);
+camera.position.set(22, 18, 25);
+camera.lookAt(0, 2.3, 0);
+const controls = new OrbitControls(camera, canvas);
+controls.enableDamping = true;
+controls.dampingFactor = .075;
+controls.enablePan = false;
+controls.minZoom = .72;
+controls.maxZoom = 2.3;
+controls.target.set(0, 2.4, 0);
+const hemisphere = new THREE.HemisphereLight(0xfffdf7, 0xb8b2a6, .88);
+scene.add(hemisphere);
+const ambient = new THREE.AmbientLight(0xffffff, .3);
+scene.add(ambient);
+const key = new THREE.DirectionalLight(0xfffdf7, 1.28);
+key.position.set(-12, 24, 16);
+key.castShadow = true;
+key.shadow.mapSize.set(2048, 2048);
+key.shadow.camera.left = -22;
+key.shadow.camera.right = 22;
+key.shadow.camera.top = 22;
+key.shadow.camera.bottom = -22;
+key.shadow.camera.near = 1;
+key.shadow.camera.far = 70;
+key.shadow.radius = 7;
+key.shadow.bias = -.00035;
+scene.add(key);
+const fill = new THREE.DirectionalLight(0xffffff, 0);
+fill.position.set(12, 10, 9);
+scene.add(fill);
+const floor = new THREE.Mesh(
+  new THREE.PlaneGeometry(160, 160),
+  new THREE.ShadowMaterial({ color: 0x3b3a35, opacity: .085 })
+);
+floor.rotation.x = -Math.PI / 2;
+floor.position.y = -.67;
+floor.receiveShadow = true;
+scene.add(floor);
+function randomFactory(seed) {
+  let value = seed >>> 0;
+  return () => {
+    value = (Math.imul(value, 1664525) + 1013904223) >>> 0;
+    return value / 4294967296;
+  };
+}
+function paperTexture(seed = 1, base = "#f2eee4", colored = false, wash = .22) {
+  const size = 256;
+  const cv = document.createElement("canvas");
+  cv.width = cv.height = size;
+  const g = cv.getContext("2d");
+  const random = randomFactory(seed);
+  g.fillStyle = base;
+  g.fillRect(0, 0, size, size);
+  const image = g.getImageData(0, 0, size, size);
+  const data = image.data;
+  for (let i = 0; i < data.length; i += 4) {
+    const grain = Math.round((random() - .5) * (colored ? 13 : 18));
+    data[i] = Math.max(0, Math.min(255, data[i] + grain));
+    data[i + 1] = Math.max(0, Math.min(255, data[i + 1] + grain));
+    data[i + 2] = Math.max(0, Math.min(255, data[i + 2] + grain));
+  }
+  g.putImageData(image, 0, 0);
+  if (colored) {
+    // Colored pencil never fully seals the paper: lift the pigment and leave tooth showing.
+    g.fillStyle = `rgba(243,239,229,${wash})`;
+    g.fillRect(0, 0, size, size);
+    g.lineCap = "round";
+    for (let pass = 0; pass < 2; pass++) {
+      g.beginPath();
+      for (let i = 0; i < 90; i++) {
+        const x = random() * size;
+        const y = random() * size;
+        const length = 8 + random() * 34;
+        const angle = (pass === 0 ? -.13 : .18) + (random() - .5) * .08;
+        g.moveTo(x, y);
+        g.lineTo(x + Math.cos(angle) * length, y + Math.sin(angle) * length);
+      }
+      g.strokeStyle = pass === 0 ? "rgba(34,35,31,.055)" : "rgba(255,247,230,.075)";
+      g.lineWidth = pass === 0 ? .8 : .65;
+      g.stroke();
+    }
+    g.beginPath();
+    for (let i = 0; i < 340; i++) {
+      const r = .35 + random() * 1.15;
+      g.rect(random() * size, random() * size, r, r * (.35 + random() * .5));
+    }
+    g.fillStyle = "rgba(246,241,229,.11)";
+    g.fill();
+  }
+  g.strokeStyle = colored ? "rgba(255,249,235,.11)" : "rgba(57,54,46,.04)";
+  g.lineWidth = colored ? .72 : .55;
+  g.beginPath();
+  for (let i = 0; i < 120; i++) {
+    const x = random() * size;
+    const y = random() * size;
+    g.moveTo(x, y);
+    g.lineTo(x + 5 + random() * 18, y + (random() - .5) * 2);
+  }
+  g.stroke();
+  const texture = new THREE.CanvasTexture(cv);
+  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+  texture.repeat.set(3, 3);
+  texture.colorSpace = THREE.SRGBColorSpace;
+  texture.anisotropy = 8;
+  return texture;
+}
+function frostTexture(seed = 1) {
+  const size = 256;
+  const cv = document.createElement("canvas");
+  cv.width = cv.height = size;
+  const g = cv.getContext("2d");
+  const random = randomFactory(seed);
+  const image = g.createImageData(size, size);
+  for (let i = 0; i < image.data.length; i += 4) {
+    const broad = Math.sin(i / 740) * 5;
+    const grain = 204 + broad + (random() - .5) * 42;
+    image.data[i] = grain;
+    image.data[i + 1] = grain;
+    image.data[i + 2] = grain;
+    image.data[i + 3] = 255;
+  }
+  g.putImageData(image, 0, 0);
+  g.globalAlpha = .08;
+  g.fillStyle = "#ffffff";
+  for (let i = 0; i < 900; i++) {
+    const r = .25 + random() * .7;
+    g.fillRect(random() * size, random() * size, r, r);
+  }
+  const texture = new THREE.CanvasTexture(cv);
+  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+  texture.repeat.set(4, 2.4);
+  texture.colorSpace = THREE.SRGBColorSpace;
+  texture.anisotropy = 8;
+  return texture;
+}
+function marbleTexture(seed = 1) {
+  const size = 512;
+  const cv = document.createElement("canvas");
+  cv.width = cv.height = size;
+  const g = cv.getContext("2d");
+  const random = randomFactory(seed);
+  g.fillStyle = "#fafaf8";
+  g.fillRect(0, 0, size, size);
+  // Sparse, low-contrast veins keep the base feeling white and architectural.
+  for (let i = 0; i < 8; i++) {
+    const startY = random() * size;
+    g.beginPath();
+    g.moveTo(-40, startY);
+    g.bezierCurveTo(
+      size * .22, startY - 90 + random() * 180,
+      size * .7, startY - 120 + random() * 240,
+      size + 40, startY - 70 + random() * 140
+    );
+    g.strokeStyle = i % 3 === 0 ? "rgba(154,164,166,.13)" : "rgba(190,184,177,.085)";
+    g.lineWidth = .45 + random() * 1.15;
+    g.stroke();
+  }
+  const texture = new THREE.CanvasTexture(cv);
+  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+  texture.repeat.set(1.45, 1.1);
+  texture.colorSpace = THREE.SRGBColorSpace;
+  texture.anisotropy = 8;
+  return texture;
+}
+const paperMap = paperTexture(90210);
+const frostMap = frostTexture(90213);
+const marbleMap = marbleTexture(90214);
+const codexMap = paperTexture(90211, "#343541", true, .34);
+const claudeMap = paperTexture(90212, "#d97757", true, .2);
+const topMaterial = new THREE.MeshLambertMaterial({ color: 0xf1ede2, map: paperMap, flatShading: true });
+const sideMaterial = new THREE.MeshLambertMaterial({ color: 0xc9c5bb, map: paperMap, flatShading: true });
+const codexMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff, map: codexMap, flatShading: true });
+const claudeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff, map: claudeMap, flatShading: true });
+const codexTopMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, map: codexMap, side: THREE.DoubleSide, toneMapped: false, transparent: true, opacity: .64, depthWrite: false });
+const claudeTopMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, map: claudeMap, side: THREE.DoubleSide, toneMapped: false, transparent: true, opacity: .64, depthWrite: false });
+const chunkMaterial = new THREE.MeshLambertMaterial({ color: 0x595a57, map: paperMap, flatShading: true });
+const inkMaterial = new THREE.LineBasicMaterial({ color: 0x30312d, transparent: true, opacity: .54 });
+const faintInkMaterial = new THREE.LineBasicMaterial({ color: 0x30312d, transparent: true, opacity: .16 });
+const hatchMaterials = [];
+const dirtyPieces = [];
+const dirtySlices = [];
+const shadowMaterials = [];
+const dirtyShellMaterials = [];
+const glassMaterials = [];
+const topLineMaterials = [];
+const cleanGlassLineMaterials = [];
+const platformDirtyMaterials = [];
+const cleanPlatformMaterials = [];
+const authenticGlassMaterials = [];
+const authenticPlatformMaterials = [];
+const repoLabels = [];
+function outline(mesh, opacity = .56, threshold = 24) {
+  const geometry = new THREE.EdgesGeometry(mesh.geometry, threshold);
+  const main = new THREE.LineSegments(
+    geometry,
+    new THREE.LineBasicMaterial({ color: 0x2d2e2a, transparent: true, opacity })
+  );
+  main.renderOrder = 5;
+  mesh.add(main);
+  const echoGeometry = geometry.clone();
+  const echoPosition = echoGeometry.attributes.position;
+  const random = randomFactory(9000 + mesh.id * 17);
+  for (let i = 0; i < echoPosition.count; i++) {
+    echoPosition.setXYZ(
+      i,
+      echoPosition.getX(i) + (random() - .5) * .032,
+      echoPosition.getY(i) + (random() - .5) * .024,
+      echoPosition.getZ(i) + (random() - .5) * .032
+    );
+  }
+  const echo = new THREE.LineSegments(
+    echoGeometry,
+    new THREE.LineBasicMaterial({ color: 0x2d2e2a, transparent: true, opacity: .12 })
+  );
+  echo.position.set(.018, .012, -.014);
+  echo.renderOrder = 4;
+  mesh.add(echo);
+  return [main.material, echo.material];
+}
+const PLATFORM = { width: 27, depth: 20.5, thickness: .75, top: .22 };
+const bodyPaperMaterial = topMaterial.clone();
+bodyPaperMaterial.transparent = true;
+bodyPaperMaterial.userData.dirtyOpacity = 1;
+const body = new THREE.Mesh(
+  new RoundedBoxGeometry(PLATFORM.width, PLATFORM.thickness, PLATFORM.depth, 10, .82),
+  bodyPaperMaterial
+);
+body.position.y = PLATFORM.top - PLATFORM.thickness / 2;
+body.castShadow = true;
+body.receiveShadow = true;
+scene.add(body);
+platformDirtyMaterials.push(bodyPaperMaterial, ...outline(body, .42, 18));
+for (const material of platformDirtyMaterials) {
+  if (material.userData.dirtyOpacity === undefined) material.userData.dirtyOpacity = material.opacity;
+}
+function makeMarbleMaterial() {
+  const material = new THREE.MeshPhysicalMaterial({
+    color: 0xffffff,
+    map: marbleMap,
+    roughness: .3,
+    metalness: 0,
+    clearcoat: .62,
+    clearcoatRoughness: .22,
+    transparent: true,
+    opacity: 0,
+    depthWrite: false
+  });
+  cleanPlatformMaterials.push(material);
+  return material;
+}
+const marbleBody = new THREE.Mesh(body.geometry.clone(), makeMarbleMaterial());
+marbleBody.position.copy(body.position);
+marbleBody.scale.set(1.002, 1.006, 1.002);
+marbleBody.receiveShadow = true;
+marbleBody.renderOrder = 2;
+scene.add(marbleBody);
+// Authentic setup-page tray, restored from main@07b9638. The historical city
+// used one ivory clay slab with fine bump grain and a clipped grid decal.
+const AUTHENTIC_TRAY = { width: 27, depth: 27, thickness: 1.35, top: .68 };
+function authenticGrain() {
+  const size = 256;
+  const cv = document.createElement("canvas");
+  cv.width = cv.height = size;
+  const g = cv.getContext("2d");
+  const random = randomFactory(71621);
+  const image = g.createImageData(size, size);
+  for (let i = 0; i < image.data.length; i += 4) {
+    const n = 128 + (random() * 2 - 1) * 38;
+    image.data[i] = image.data[i + 1] = image.data[i + 2] = n;
+    image.data[i + 3] = 255;
+  }
+  g.putImageData(image, 0, 0);
+  const texture = new THREE.CanvasTexture(cv);
+  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+  texture.anisotropy = 8;
+  texture.generateMipmaps = false;
+  texture.minFilter = THREE.LinearFilter;
+  texture.repeat.set(AUTHENTIC_TRAY.width / 3.8, AUTHENTIC_TRAY.depth / 3.8);
+  return texture;
+}
+const authenticTrayMaterial = new THREE.MeshPhysicalMaterial({
+  color: 0xece5d3,
+  roughness: .6,
+  metalness: 0,
+  clearcoat: .3,
+  clearcoatRoughness: .5,
+  envMapIntensity: .6,
+  bumpMap: authenticGrain(),
+  bumpScale: .022,
+  transparent: true,
+  opacity: 0,
+  depthWrite: false
+});
+authenticPlatformMaterials.push(authenticTrayMaterial);
+const authenticTray = new THREE.Mesh(
+  new RoundedBoxGeometry(AUTHENTIC_TRAY.width, AUTHENTIC_TRAY.thickness, AUTHENTIC_TRAY.depth, 8, .65),
+  authenticTrayMaterial
+);
+authenticTray.position.y = AUTHENTIC_TRAY.top - AUTHENTIC_TRAY.thickness / 2;
+authenticTray.castShadow = true;
+authenticTray.receiveShadow = true;
+authenticTray.renderOrder = 2;
+scene.add(authenticTray);
+function authenticGridTexture() {
+  const size = 768;
+  const cv = document.createElement("canvas");
+  cv.width = cv.height = size;
+  const g = cv.getContext("2d");
+  const margin = 32;
+  const radius = 58;
+  const span = size - margin * 2;
+  g.save();
+  g.beginPath();
+  g.roundRect(margin, margin, span, span, radius);
+  g.clip();
+  const cell = 54;
+  g.strokeStyle = "rgba(74,80,96,.45)";
+  g.lineWidth = 1.8;
+  g.beginPath();
+  for (let p = margin; p <= margin + span + .5; p += cell) {
+    g.moveTo(p, margin); g.lineTo(p, margin + span);
+    g.moveTo(margin, p); g.lineTo(margin + span, p);
+  }
+  g.stroke();
+  g.restore();
+  g.strokeStyle = "rgba(120,126,140,.24)";
+  g.lineWidth = 2.1;
+  g.beginPath();
+  g.roundRect(margin, margin, span, span, radius);
+  g.stroke();
+  const texture = new THREE.CanvasTexture(cv);
+  texture.colorSpace = THREE.SRGBColorSpace;
+  texture.anisotropy = 8;
+  return texture;
+}
+const authenticGridMaterial = new THREE.MeshBasicMaterial({
+  map: authenticGridTexture(),
+  transparent: true,
+  opacity: 0,
+  depthWrite: false,
+  toneMapped: false
+});
+authenticPlatformMaterials.push(authenticGridMaterial);
+const authenticGrid = new THREE.Mesh(
+  new THREE.PlaneGeometry(AUTHENTIC_TRAY.width, AUTHENTIC_TRAY.depth),
+  authenticGridMaterial
+);
+authenticGrid.rotation.x = -Math.PI / 2;
+authenticGrid.position.y = AUTHENTIC_TRAY.top + .012;
+authenticGrid.renderOrder = 6;
+scene.add(authenticGrid);
+function addPlatformGrid() {
+  const vertices = [];
+  const y = PLATFORM.top + .028;
+  const insetX = PLATFORM.width / 2 - 1.05;
+  const insetZ = PLATFORM.depth / 2 - 1.05;
+  const step = 1.7;
+  for (let x = -insetX; x <= insetX; x += step) vertices.push(x, y, -insetZ, x, y, insetZ);
+  for (let z = -insetZ; z <= insetZ; z += step) vertices.push(-insetX, y, z, insetX, y, z);
+  const geometry = new THREE.BufferGeometry();
+  geometry.setAttribute("position", new THREE.Float32BufferAttribute(vertices, 3));
+  const material = new THREE.LineBasicMaterial({ color: 0x50514c, transparent: true, opacity: .105 });
+  material.userData.dirtyOpacity = .105;
+  scene.add(new THREE.LineSegments(geometry, material));
+  platformDirtyMaterials.push(material);
+}
+function addPlatformSideGrain() {
+  const random = randomFactory(5519);
+  const vertices = [];
+  const frontZ = PLATFORM.depth / 2 + .004;
+  const bottom = -PLATFORM.thickness + .14;
+  const top = -.05;
+  for (let x = -PLATFORM.width / 2 + .9; x < PLATFORM.width / 2 - .9; x += .52) {
+    if (random() < .2) continue;
+    const jitter = (random() - .5) * .1;
+    vertices.push(x + jitter, bottom + random() * .18, frontZ, x + jitter + (random() - .5) * .12, top - random() * .22, frontZ);
+  }
+  const rightX = PLATFORM.width / 2 + .004;
+  for (let z = -PLATFORM.depth / 2 + .9; z < PLATFORM.depth / 2 - .9; z += .55) {
+    if (random() < .24) continue;
+    const jitter = (random() - .5) * .1;
+    vertices.push(rightX, bottom + random() * .2, z + jitter, rightX, top - random() * .2, z + jitter + (random() - .5) * .12);
+  }
+  // Sparse diagonal passes keep the wall hand-shaded without turning it into a striped field.
+  for (let x = -PLATFORM.width / 2 + 1.2; x < PLATFORM.width / 2 - 1.2; x += 2.3) {
+    const startY = bottom + .18 + random() * .45;
+    vertices.push(
+      x, startY, frontZ + .002,
+      Math.min(PLATFORM.width / 2 - .7, x + .8 + random() * .5),
+      Math.min(top - .08, startY + .35),
+      frontZ + .002
+    );
+  }
+  const geometry = new THREE.BufferGeometry();
+  geometry.setAttribute("position", new THREE.Float32BufferAttribute(vertices, 3));
+  const material = new THREE.LineBasicMaterial({ color: 0x373833, transparent: true, opacity: .19 });
+  material.userData.dirtyOpacity = .19;
+  scene.add(new THREE.LineSegments(geometry, material));
+  platformDirtyMaterials.push(material);
+}
+addPlatformGrid();
+addPlatformSideGrain();
+const repos = [
+  { name: "WebPageReactVersion", hours: 92.8, x: -5.3, z: -2.1, w: 4.2, d: 4.0, h: 8.5, slices: 5, codexPct: 31, claudePct: 69, label: true },
+  { name: "EchoMem-Chrome", hours: 70.1, x: 2.2, z: -2.5, w: 3.9, d: 3.7, h: 7.2, slices: 5, codexPct: 19, claudePct: 81, label: true },
+  { name: "echo-design-system", hours: 21.2, x: -1.2, z: 3.6, w: 2.9, d: 2.7, h: 4.4, slices: 4, codexPct: 44, claudePct: 56 },
+  { name: "Kobe Life", hours: 9.6, x: 6.8, z: 3.7, w: 2.1, d: 2.0, h: 3.0, slices: 3, codexPct: 100, claudePct: 0 },
+  { name: "public", hours: 1.9, x: -7.9, z: 4.8, w: 1.7, d: 1.6, h: 2.1, slices: 2, codexPct: 0, claudePct: 100 },
+  { name: "EchoMemory_log", hours: 1.8, x: 3.0, z: 4.4, w: 1.65, d: 1.6, h: 1.95, slices: 2, codexPct: 63, claudePct: 37 },
+  { name: "brands", hours: .2, x: 8.5, z: -.5, w: 1.25, d: 1.2, h: 1.45, slices: 1, codexPct: 0, claudePct: 100 }
+];
+function makeGraphiteShadow(repo, seed) {
+  const size = 256;
+  const cv = document.createElement("canvas");
+  cv.width = cv.height = size;
+  const g = cv.getContext("2d");
+  const random = randomFactory(seed);
+  const cx = 118;
+  const cy = 136;
+  const rx = 82;
+  const ry = 48;
+  g.save();
+  g.filter = "blur(7px)";
+  g.fillStyle = "rgba(35,36,32,.10)";
+  g.beginPath();
+  g.ellipse(cx + 12, cy + 8, rx, ry, -.18, 0, Math.PI * 2);
+  g.fill();
+  g.restore();
+  for (let pass = 0; pass < 2; pass++) {
+    g.beginPath();
+    const count = 190;
+    for (let i = 0; i < count; i++) {
+      const ring = Math.pow(random(), .68);
+      const a = random() * Math.PI * 2;
+      const x = cx + Math.cos(a) * rx * ring + random() * 28;
+      const y = cy + Math.sin(a) * ry * ring + random() * 14;
+      const length = 3 + random() * 13;
+      const angle = pass === 0 ? -.42 : .38;
+      if (random() < .18) continue;
+      g.moveTo(x, y);
+      g.lineTo(x + Math.cos(angle) * length, y + Math.sin(angle) * length * .7);
+    }
+    g.strokeStyle = pass === 0 ? "rgba(38,39,35,.16)" : "rgba(38,39,35,.10)";
+    g.lineWidth = .75;
+    g.lineCap = "round";
+    g.stroke();
+  }
+  g.beginPath();
+  for (let i = 0; i < 190; i++) {
+    const a = random() * Math.PI * 2;
+    const ring = Math.pow(random(), .7);
+    g.rect(cx + Math.cos(a) * rx * ring, cy + Math.sin(a) * ry * ring, .5 + random() * 1.3, .5 + random());
+  }
+  g.fillStyle = "rgba(45,45,41,.08)";
+  g.fill();
+  const texture = new THREE.CanvasTexture(cv);
+  texture.colorSpace = THREE.SRGBColorSpace;
+  const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true, depthWrite: false, opacity: 1, toneMapped: false });
+  const plane = new THREE.Mesh(new THREE.PlaneGeometry(repo.w * 1.65, repo.d * 1.25), material);
+  plane.rotation.x = -Math.PI / 2;
+  plane.rotation.z = -.18;
+  plane.position.set(repo.x + repo.w * .18, PLATFORM.top + .048, repo.z + repo.d * .12);
+  plane.renderOrder = 2;
+  scene.add(plane);
+  shadowMaterials.push(material);
+}
+function faceHatching(mesh, w, h, d, intensity, seed) {
+  const random = randomFactory(seed);
+  const vertices = [];
+  const count = Math.max(5, Math.round((w + h) * intensity * .82));
+  const front = d / 2 + .015;
+  for (let i = 0; i < count; i++) {
+    if (random() < .17) continue;
+    const y = -h / 2 + .2 + random() * Math.max(.1, h - .4);
+    const x = -w / 2 + .18 + random() * Math.max(.1, w - .36);
+    const length = .35 + random() * Math.min(1.5, w * .52);
+    const rise = length * (.28 + random() * .18);
+    const endX = Math.min(w / 2 - .1, x + length);
+    vertices.push(x, y, front, endX, Math.min(h / 2 - .1, y + rise), front);
+  }
+  const right = w / 2 + .015;
+  for (let i = 0; i < Math.round(count * .58); i++) {
+    if (random() < .22) continue;
+    const y = -h / 2 + .2 + random() * Math.max(.1, h - .4);
+    const z = -d / 2 + .15 + random() * Math.max(.1, d - .3);
+    const length = .3 + random() * Math.min(1.1, d * .45);
+    vertices.push(right, y, z, right, Math.min(h / 2 - .1, y + length * .34), Math.min(d / 2 - .08, z + length));
+  }
+  const geometry = new THREE.BufferGeometry();
+  geometry.setAttribute("position", new THREE.Float32BufferAttribute(vertices, 3));
+  const material = new THREE.LineBasicMaterial({ color: 0x30312d, transparent: true, opacity: .32 });
+  material.userData.baseOpacity = .32;
+  const lines = new THREE.LineSegments(geometry, material);
+  lines.renderOrder = 6;
+  mesh.add(lines);
+  hatchMaterials.push(material);
+}
+function crackMarks(mesh, w, h, d, seed) {
+  const random = randomFactory(seed);
+  const vertices = [];
+  const front = d / 2 + .02;
+  const count = Math.max(1, Math.round(w * .65));
+  for (let i = 0; i < count; i++) {
+    const x = (random() - .5) * w * .72;
+    const y = (random() - .5) * h * .52;
+    vertices.push(x, y, front, x + (random() - .5) * .42, y - .25 - random() * .35, front);
+    if (random() > .45) vertices.push(x, y - .22, front, x + (random() - .5) * .4, y - .45 - random() * .32, front);
+  }
+  const geometry = new THREE.BufferGeometry();
+  geometry.setAttribute("position", new THREE.Float32BufferAttribute(vertices, 3));
+  const material = new THREE.LineBasicMaterial({ color: 0x292a27, transparent: true, opacity: .46 });
+  material.userData.baseOpacity = .46;
+  mesh.add(new THREE.LineSegments(geometry, material));
+  hatchMaterials.push(material);
+}
+function labelTexture(repo) {
+  const cv = document.createElement("canvas");
+  cv.width = 512;
+  cv.height = 180;
+  const g = cv.getContext("2d");
+  g.textAlign = "center";
+  g.fillStyle = "#343530";
+  g.font = "600 62px IBM Plex Mono, monospace";
+  g.fillText(`${repo.hours}h`, 256, 68);
+  g.fillStyle = "rgba(52,53,48,.72)";
+  g.font = "500 23px IBM Plex Mono, monospace";
+  g.fillText(repo.name, 256, 112);
+  const texture = new THREE.CanvasTexture(cv);
+  texture.colorSpace = THREE.SRGBColorSpace;
+  return texture;
+}
+// Verbatim optical model from the setup-page city on main@07b9638.
+function authenticClayGlass(hex) {
+  const color = new THREE.Color(hex);
+  const material = new THREE.MeshPhysicalMaterial({
+    color,
+    roughness: .42,
+    metalness: 0,
+    transmission: .85,
+    ior: 1.34,
+    thickness: 70,
+    attenuationColor: color.clone(),
+    attenuationDistance: 95,
+    clearcoat: .28,
+    clearcoatRoughness: .45,
+    envMapIntensity: 1.05,
+    transparent: true,
+    opacity: 0,
+    depthWrite: false
+  });
+  authenticGlassMaterials.push(material);
+  return material;
+}
+// The historical implementation only rounded the exterior top/bottom of a
+// split tower, leaving the provider seam perfectly planar.
+function selectiveRoundedBoxGeometry(width, height, depth, segments = 8, radius = .1, opts = {}) {
+  const roundTop = opts.roundTop !== false;
+  const roundBottom = opts.roundBottom !== false;
+  const subdivisions = segments * 2 + 1;
+  const r = Math.min(width / 2, height / 2, depth / 2, radius);
+  const base = new THREE.BoxGeometry(1, 1, 1, subdivisions, subdivisions, subdivisions);
+  const geometry = base.toNonIndexed();
+  base.dispose();
+  const positions = geometry.attributes.position.array;
+  const normals = geometry.attributes.normal.array;
+  const position = new THREE.Vector3();
+  const normal = new THREE.Vector3();
+  const faceSpan = positions.length / 6;
+  const halfStep = .5 / subdivisions;
+  const bx = width / 2 - r;
+  const by = height / 2 - r;
+  const bz = depth / 2 - r;
+  for (let i = 0; i < positions.length; i += 3) {
+    position.fromArray(positions, i);
+    const sx = Math.sign(position.x) || 1;
+    const sy = Math.sign(position.y) || 1;
+    const sz = Math.sign(position.z) || 1;
+    const side = Math.floor(i / faceSpan);
+    const roundY = sy > 0 ? roundTop : roundBottom;
+    normal.copy(position);
+    normal.x -= sx * halfStep;
+    normal.z -= sz * halfStep;
+    if (roundY) normal.y -= sy * halfStep;
+    else normal.y = 0;
+    if (normal.lengthSq() > 0) normal.normalize();
+    positions[i] = bx * sx + normal.x * r;
+    positions[i + 1] = roundY ? by * sy + normal.y * r : height / 2 * sy;
+    positions[i + 2] = bz * sz + normal.z * r;
+    if (!roundY && (side === 2 || side === 3)) {
+      normals[i] = 0; normals[i + 1] = sy; normals[i + 2] = 0;
+    } else {
+      normals[i] = normal.x; normals[i + 1] = normal.y; normals[i + 2] = normal.z;
+    }
+  }
+  geometry.attributes.position.needsUpdate = true;
+  geometry.attributes.normal.needsUpdate = true;
+  geometry.computeBoundingBox();
+  geometry.computeBoundingSphere();
+  return geometry;
+}
+function createRepo(repo, index) {
+  const authenticSize = { width: repo.w, height: repo.h, depth: repo.d };
+  const scale = Math.sqrt(Math.max(.001, repo.hours) / 92.8);
+  const radius = .76 + scale * 2.52;
+  const thickness = .44 + scale * 1.08;
+  repo.w = radius * 2;
+  repo.d = radius * 2;
+  repo.h = thickness;
+  makeGraphiteShadow(repo, 800 + index * 31);
+  const group = new THREE.Group();
+  group.position.set(repo.x, PLATFORM.top, repo.z);
+  scene.add(group);
+  const random = randomFactory(3000 + index * 101);
+  const puck = new THREE.Group();
+  const shiftX = (random() - .5) * Math.min(.26, radius * .1);
+  const shiftZ = (random() - .5) * Math.min(.22, radius * .08);
+  const tiltX = (random() - .5) * .035;
+  const tiltZ = (random() - .5) * .035;
+  const turn = (random() - .5) * .045;
+  puck.position.set(shiftX, thickness / 2, shiftZ);
+  puck.rotation.set(tiltX, turn, tiltZ);
+  group.add(puck);
+  const wall = sideMaterial.clone();
+  wall.color.setScalar(.94 + random() * .035);
+  wall.transparent = true;
+  wall.opacity = 1;
+  const topPaper = topMaterial.clone();
+  topPaper.transparent = true;
+  topPaper.opacity = 1;
+  dirtyShellMaterials.push(wall, topPaper);
+  const cylinderGeometry = new THREE.CylinderGeometry(radius, radius, thickness, 96, 1, false);
+  const cylinder = new THREE.Mesh(
+    cylinderGeometry,
+    [wall, topPaper, wall]
+  );
+  cylinder.castShadow = true;
+  cylinder.receiveShadow = true;
+  puck.add(cylinder);
+  const start = -Math.PI / 2;
+  const claudeAngle = Math.PI * 2 * repo.claudePct / 100;
+  const codexAngle = Math.PI * 2 * repo.codexPct / 100;
+  const codexGlass = new THREE.Color(0x7fb7d8);
+  const claudeGlass = new THREE.Color(0xda8da4);
+  // Clear context becomes an ordered glass city, not a stretched circular puck.
+  // Provider share is preserved as adjacent translucent blocks inside one footprint.
+  const cleanWidth = Math.max(.76, radius * .88);
+  const cleanDepth = Math.max(.68, radius * .72);
+  const cleanHeight = Math.max(1.75, thickness * 4.65);
+  const cleanCity = new THREE.Group();
+  cleanCity.scale.y = .06;
+  cleanCity.visible = false;
+  group.add(cleanCity);
+  const authenticCity = new THREE.Group();
+  authenticCity.visible = false;
+  group.add(authenticCity);
+  const authenticRadius = Math.min(
+    Math.min(authenticSize.width, authenticSize.height, authenticSize.depth) * .12,
+    .65
+  );
+  const authenticSegments = [];
+  if (repo.claudePct > 0) authenticSegments.push({
+    height: authenticSize.height * repo.claudePct / 100,
+    color: 0xd97757
+  });
+  if (repo.codexPct > 0) authenticSegments.push({
+    height: authenticSize.height * repo.codexPct / 100,
+    color: 0x10a37f
+  });
+  let authenticY = AUTHENTIC_TRAY.top - PLATFORM.top;
+  authenticSegments.forEach((segment, segmentIndex) => {
+    const mixed = authenticSegments.length > 1;
+    const geometry = mixed
+      ? selectiveRoundedBoxGeometry(
+          authenticSize.width,
+          segment.height,
+          authenticSize.depth,
+          8,
+          Math.min(authenticRadius, segment.height * .45),
+          { roundBottom: segmentIndex === 0, roundTop: segmentIndex === authenticSegments.length - 1 }
+        )
+      : new RoundedBoxGeometry(
+          authenticSize.width,
+          segment.height,
+          authenticSize.depth,
+          8,
+          Math.min(authenticRadius, segment.height * .45)
+        );
+    const tower = new THREE.Mesh(geometry, authenticClayGlass(segment.color));
+    tower.position.y = authenticY + segment.height / 2;
+    tower.castShadow = true;
+    tower.receiveShadow = true;
+    tower.renderOrder = 4;
+    authenticCity.add(tower);
+    authenticY += segment.height;
+  });
+  function addGlassBlock(share, color, cursor) {
+    if (share <= .0001) return cursor;
+    const gap = repo.codexPct > 0 && repo.claudePct > 0 ? .055 : 0;
+    const availableWidth = cleanWidth - gap;
+    const width = Math.max(.12, availableWidth * share);
+    const centerX = -cleanWidth / 2 + cursor + width / 2;
+    const surfaceColor = color.clone();
+    const material = new THREE.MeshPhysicalMaterial({
+      color: surfaceColor,
+      roughness: .42,
+      roughnessMap: frostMap,
+      bumpMap: frostMap,
+      bumpScale: .0018,
+      metalness: 0,
+      transmission: .85,
+      thickness: 2.4,
+      ior: 1.34,
+      attenuationColor: color,
+      attenuationDistance: 3.25,
+      clearcoat: .28,
+      clearcoatRoughness: .45,
+      envMapIntensity: 1.05,
+      transparent: true,
+      opacity: 0,
+      depthWrite: false,
+      side: THREE.DoubleSide
+    });
+    material.userData.cleanOpacity = .96;
+    const geometry = new RoundedBoxGeometry(width, cleanHeight, cleanDepth, 5, Math.min(.055, width * .08));
+    const block = new THREE.Mesh(geometry, material);
+    block.position.set(centerX, cleanHeight / 2, 0);
+    // Three.js shadow maps treat transmissive glass as opaque and create giant
+    // charcoal rectangles, so the clean glass uses studio light without a hard cast shadow.
+    block.castShadow = false;
+    block.receiveShadow = true;
+    block.renderOrder = 3;
+    cleanCity.add(block);
+    glassMaterials.push(material);
+    const edgeMaterial = new THREE.LineBasicMaterial({
+      color: color.clone().lerp(new THREE.Color(0xffffff), .62),
+      transparent: true,
+      opacity: 0,
+      depthWrite: false
+    });
+    const edges = new THREE.LineSegments(new THREE.EdgesGeometry(geometry, 24), edgeMaterial);
+    edges.renderOrder = 7;
+    block.add(edges);
+    cleanGlassLineMaterials.push({ material: edgeMaterial, clean: .48 });
+    return cursor + width + gap;
+  }
+  let glassCursor = 0;
+  glassCursor = addGlassBlock(repo.claudePct / 100, claudeGlass, glassCursor);
+  addGlassBlock(repo.codexPct / 100, codexGlass, glassCursor);
+  const topY = thickness / 2 + .001;
+  const insetRadius = radius * .965;
+  function addCleanGlassArc(angle, length, color, y, cleanOpacity) {
+    if (length <= .0001) return;
+    const points = [];
+    const segments = Math.max(12, Math.round(96 * length / (Math.PI * 2)));
+    for (let i = 0; i <= segments; i++) {
+      const a = angle + length * i / segments;
+      points.push(new THREE.Vector3(Math.cos(a) * radius * 1.006, y, Math.sin(a) * radius * 1.006));
+    }
+    const material = new THREE.LineBasicMaterial({ color, transparent: true, opacity: 0, depthWrite: false });
+    const line = new THREE.Line(new THREE.BufferGeometry().setFromPoints(points), material);
+    line.renderOrder = 7;
+    puck.add(line);
+    cleanGlassLineMaterials.push({ material, clean: cleanOpacity });
+  }
+  addCleanGlassArc(start, claudeAngle, claudeGlass, topY + .0012, .68);
+  addCleanGlassArc(start + claudeAngle, codexAngle, codexGlass, topY + .0012, .68);
+  addCleanGlassArc(start, claudeAngle, claudeGlass, -thickness / 2 + .012, .055);
+  addCleanGlassArc(start + claudeAngle, codexAngle, codexGlass, -thickness / 2 + .012, .055);
+  for (const [angle, color] of [[start, claudeGlass], [start + claudeAngle, codexGlass]]) {
+    const x = Math.cos(angle) * radius * 1.006;
+    const z = Math.sin(angle) * radius * 1.006;
+    const material = new THREE.LineBasicMaterial({ color, transparent: true, opacity: 0, depthWrite: false });
+    const geometry = new THREE.BufferGeometry().setFromPoints([
+      new THREE.Vector3(x, -thickness / 2 + .02, z),
+      new THREE.Vector3(x, thickness / 2 - .01, z)
+    ]);
+    const line = new THREE.Line(geometry, material);
+    line.renderOrder = 7;
+    puck.add(line);
+    cleanGlassLineMaterials.push({ material, clean: .52 });
+  }
+  if (claudeAngle > .0001) {
+    const geometry = new THREE.CircleGeometry(insetRadius, 72, start, claudeAngle);
+    geometry.rotateX(-Math.PI / 2);
+    const sector = new THREE.Mesh(geometry, claudeTopMaterial);
+    sector.position.y = topY;
+    sector.renderOrder = 4;
+    puck.add(sector);
+  }
+  if (codexAngle > .0001) {
+    const geometry = new THREE.CircleGeometry(insetRadius, 72, start + claudeAngle, codexAngle);
+    geometry.rotateX(-Math.PI / 2);
+    const sector = new THREE.Mesh(geometry, codexTopMaterial);
+    sector.position.y = topY + .0002;
+    sector.renderOrder = 4;
+    puck.add(sector);
+  }
+  // Pencil boundaries: doubled circumference plus the two radial split seams.
+  const circlePoints = [];
+  for (let i = 0; i <= 96; i++) {
+    const angle = i / 96 * Math.PI * 2;
+    circlePoints.push(new THREE.Vector3(Math.cos(angle) * radius, topY + .0005, Math.sin(angle) * radius));
+  }
+  const rimMaterial = new THREE.LineBasicMaterial({ color: 0x2d2e2a, transparent: true, opacity: .72 });
+  const rim = new THREE.Line(
+    new THREE.BufferGeometry().setFromPoints(circlePoints),
+    rimMaterial
+  );
+  puck.add(rim);
+  topLineMaterials.push({ material: rimMaterial, dirty: .72, clean: .035 });
+  const rimEcho = rim.clone();
+  const rimEchoMaterial = new THREE.LineBasicMaterial({ color: 0x2d2e2a, transparent: true, opacity: .16 });
+  rimEcho.material = rimEchoMaterial;
+  rimEcho.scale.set(1.006, 1, .996);
+  puck.add(rimEcho);
+  topLineMaterials.push({ material: rimEchoMaterial, dirty: .16, clean: .008 });
+  const seamVertices = [];
+  for (const angle of [start, start + claudeAngle]) {
+    seamVertices.push(0, topY + .0007, 0, Math.cos(angle) * insetRadius, topY + .0007, Math.sin(angle) * insetRadius);
+  }
+  const seamGeometry = new THREE.BufferGeometry();
+  seamGeometry.setAttribute("position", new THREE.Float32BufferAttribute(seamVertices, 3));
+  const seamMaterial = new THREE.LineBasicMaterial({ color: 0x292a27, transparent: true, opacity: .62 });
+  puck.add(new THREE.LineSegments(seamGeometry, seamMaterial));
+  topLineMaterials.push({ material: seamMaterial, dirty: .62, clean: .025 });
+  // Cylindrical wall grain: mostly vertical, with a few soft cross-hatched strokes on the dark side.
+  const sideVertices = [];
+  const strokeCount = Math.max(28, Math.round(radius * 19));
+  for (let i = 0; i < strokeCount; i++) {
+    const angle = random() * Math.PI * 2;
+    if (random() < .16) continue;
+    const x = Math.cos(angle) * (radius + .009);
+    const z = Math.sin(angle) * (radius + .009);
+    const bottom = -thickness / 2 + .08 + random() * .12;
+    const top = thickness / 2 - .08 - random() * .12;
+    sideVertices.push(x, bottom, z, x + (random() - .5) * .025, top, z + (random() - .5) * .025);
+    if (Math.sin(angle + .8) > .15 && random() > .58) {
+      const rise = .12 + random() * thickness * .24;
+      const sweep = .055 + random() * .09;
+      sideVertices.push(
+        x, bottom + random() * Math.max(.1, thickness - .3), z,
+        Math.cos(angle + sweep) * (radius + .011), Math.min(top, bottom + rise + random() * .35), Math.sin(angle + sweep) * (radius + .011)
+      );
+    }
+  }
+  const sideGeometry = new THREE.BufferGeometry();
+  sideGeometry.setAttribute("position", new THREE.Float32BufferAttribute(sideVertices, 3));
+  const sideInk = new THREE.LineBasicMaterial({ color: 0x30312d, transparent: true, opacity: .22 });
+  sideInk.userData.baseOpacity = .22;
+  puck.add(new THREE.LineSegments(sideGeometry, sideInk));
+  hatchMaterials.push(sideInk);
+  // Bottom seam carries more graphite pressure, like the reference drawing.
+  const bottomPoints = circlePoints.map(point => new THREE.Vector3(point.x, -thickness / 2 + .001, point.z));
+  const bottomRimMaterial = new THREE.LineBasicMaterial({ color: 0x282924, transparent: true, opacity: .5 });
+  bottomRimMaterial.userData.baseOpacity = .5;
+  const bottomRim = new THREE.Line(
+    new THREE.BufferGeometry().setFromPoints(bottomPoints),
+    bottomRimMaterial
+  );
+  puck.add(bottomRim);
+  hatchMaterials.push(bottomRimMaterial);
+  dirtySlices.push({
+    mesh: puck,
+    dirtyPosition: puck.position.clone(),
+    dirtyRotation: turn,
+    dirtyRotationX: tiltX,
+    dirtyRotationZ: tiltZ,
+    baseThickness: thickness,
+    cleanCity,
+    cleanHeight,
+    authenticCity,
+    authenticHeight: authenticSize.height,
+    dirtyCylinder: cylinder,
+  });
+  if (repo.label) {
+    const sprite = new THREE.Sprite(new THREE.SpriteMaterial({ map: labelTexture(repo), transparent: true, depthWrite: false, toneMapped: false }));
+    sprite.scale.set(radius * 2.05, radius * .73, 1);
+    sprite.position.set(repo.x, PLATFORM.top + thickness + 1.0, repo.z);
+    scene.add(sprite);
+    repoLabels.push({
+      sprite,
+      dirtyY: sprite.position.y,
+      cleanY: PLATFORM.top + cleanHeight + 1.1,
+      authenticY: AUTHENTIC_TRAY.top + authenticSize.height + 1.1
+    });
+  }
+  const pieceCount = thickness > 1.2 ? 2 : thickness > .8 ? 1 : 0;
+  for (let i = 0; i < pieceCount; i++) {
+    const size = .22 + random() * .28;
+    const piece = new THREE.Mesh(
+      i % 2 ? new THREE.TetrahedronGeometry(size, 0) : new THREE.BoxGeometry(size, size * .65, size * .8),
+      chunkMaterial
+    );
+    const side = random() > .5 ? 1 : -1;
+    piece.position.set(repo.x + side * (radius * 1.08 + random() * .42), PLATFORM.top + size * .5, repo.z + (random() - .5) * radius * 1.3);
+    piece.rotation.set(random() * 1.2, random() * 1.2, random() * 1.2);
+    piece.castShadow = true;
+    scene.add(piece);
+    outline(piece, .42, 15);
+    dirtyPieces.push(piece);
+  }
+}
+repos.forEach(createRepo);
+function addDirtyTrail() {
+  const random = randomFactory(7711);
+  const vertices = [];
+  for (let i = 0; i < 24; i++) {
+    const x = -9.6 + random() * 18.5;
+    const z = -6.7 + random() * 13.3;
+    if (random() < .6) continue;
+    const length = .22 + random() * .72;
+    vertices.push(x, PLATFORM.top + .055, z, x + length, PLATFORM.top + .057, z + length * (.3 + random() * .22));
+  }
+  const geometry = new THREE.BufferGeometry();
+  geometry.setAttribute("position", new THREE.Float32BufferAttribute(vertices, 3));
+  const material = new THREE.LineBasicMaterial({ color: 0x30312d, transparent: true, opacity: .2 });
+  material.userData.baseOpacity = .2;
+  scene.add(new THREE.LineSegments(geometry, material));
+  hatchMaterials.push(material);
+}
+addDirtyTrail();
+const dirtyButton = document.getElementById("dirty");
+const repairButton = document.getElementById("repair");
+const authenticButton = document.getElementById("authentic");
+const dirtyValue = document.getElementById("dirty-value");
+const dirtyLabel = document.getElementById("dirty-label");
+const summaryCaption = document.getElementById("summary-caption");
+let repairTarget = 0;
+let repairProgress = 0;
+function setVersion(version) {
+  repairTarget = version === "dirty" ? 0 : 1;
+  dirtyButton.setAttribute("aria-pressed", String(version === "dirty"));
+  repairButton.setAttribute("aria-pressed", String(version === "repair"));
+  authenticButton.setAttribute("aria-pressed", String(version === "authentic"));
+  dirtyValue.textContent = version === "dirty" ? "82%" : "5%";
+  dirtyLabel.textContent = version === "dirty" ? "dirty context" : "residual context";
+  summaryCaption.textContent = version === "dirty"
+    ? "Dirty context spreads low and wide, carrying graphite, dust and repeated reads."
+    : version === "repair"
+      ? "Repair city: authentic frosted volume glass on one ivory clay tray."
+      : "Authentic setup-page city: frosted volume glass on one ivory clay tray.";
+}
+dirtyButton.addEventListener("click", () => setVersion("dirty"));
+repairButton.addEventListener("click", () => setVersion("repair"));
+authenticButton.addEventListener("click", () => setVersion("authentic"));
+function updateRepair() {
+  repairProgress += (repairTarget - repairProgress) * .075;
+  const ease = repairProgress * repairProgress * (3 - 2 * repairProgress);
+  for (const material of dirtyShellMaterials) {
+    material.opacity = THREE.MathUtils.lerp(1, .018, ease);
+    material.depthWrite = ease < .52;
+  }
+  // Repair now uses the exact same geometry, optics, palette and base as the
+  // authentic setup-page city. The old marble/side-by-side experiment remains
+  // allocated only so the dirty morphology code stays easy to compare, but it
+  // never enters the render pass and therefore cannot corrupt transparent sort.
+  for (const material of glassMaterials) material.opacity = 0;
+  for (const material of authenticGlassMaterials) {
+    material.opacity = ease;
+    material.depthWrite = ease > .97;
+  }
+  for (const entry of topLineMaterials) {
+    entry.material.opacity = THREE.MathUtils.lerp(entry.dirty, 0, ease);
+  }
+  for (const entry of cleanGlassLineMaterials) entry.material.opacity = 0;
+  for (const material of platformDirtyMaterials) {
+    material.opacity = material.userData.dirtyOpacity * (1 - ease);
+    material.depthWrite = ease < .5;
+  }
+  for (const material of cleanPlatformMaterials) material.opacity = 0;
+  for (const material of authenticPlatformMaterials) {
+    material.opacity = ease;
+    if (material === authenticTrayMaterial) material.depthWrite = ease > .02;
+  }
+  codexTopMaterial.opacity = THREE.MathUtils.lerp(.64, 0, ease);
+  claudeTopMaterial.opacity = THREE.MathUtils.lerp(.64, 0, ease);
+  for (const material of hatchMaterials) material.opacity = Math.max(.02, material.userData?.baseOpacity || .28) * (1 - ease * .98);
+  for (const material of shadowMaterials) material.opacity = 1 - ease;
+  for (const entry of dirtySlices) {
+    const dirtyScale = THREE.MathUtils.lerp(1, .82, ease);
+    entry.mesh.scale.set(dirtyScale, dirtyScale, dirtyScale);
+    entry.mesh.position.x = THREE.MathUtils.lerp(entry.dirtyPosition.x, 0, ease);
+    entry.mesh.position.y = entry.baseThickness / 2;
+    entry.mesh.position.z = THREE.MathUtils.lerp(entry.dirtyPosition.z, 0, ease);
+    entry.mesh.rotation.y = entry.dirtyRotation * (1 - ease);
+    entry.mesh.rotation.x = entry.dirtyRotationX * (1 - ease);
+    entry.mesh.rotation.z = entry.dirtyRotationZ * (1 - ease);
+    entry.dirtyCylinder.castShadow = ease < .58;
+    entry.mesh.visible = ease < .995;
+    entry.cleanCity.visible = false;
+    entry.authenticCity.visible = ease > .01;
+  }
+  for (const entry of repoLabels) {
+    entry.sprite.position.y = THREE.MathUtils.lerp(entry.dirtyY, entry.authenticY, ease);
+  }
+  for (const piece of dirtyPieces) piece.scale.setScalar(Math.max(.001, 1 - ease));
+  hemisphere.intensity = THREE.MathUtils.lerp(.88, .7, ease);
+  ambient.intensity = THREE.MathUtils.lerp(.3, .2, ease);
+  key.intensity = THREE.MathUtils.lerp(1.28, 2.3, ease);
+  fill.intensity = .4 * ease;
+}
+function resize() {
+  const width = innerWidth;
+  const height = innerHeight;
+  renderer.setSize(width, height, false);
+  const aspect = width / height;
+  const vertical = width < 800 ? 16 : 12.6;
+  camera.left = -vertical * aspect;
+  camera.right = vertical * aspect;
+  camera.top = vertical;
+  camera.bottom = -vertical;
+  camera.updateProjectionMatrix();
+}
+addEventListener("resize", resize);
+resize();
+let visible = true;
+document.addEventListener("visibilitychange", () => { visible = !document.hidden; });
+function animate() {
+  requestAnimationFrame(animate);
+  if (!visible) return;
+  updateRepair();
+  controls.update();
+  renderer.render(scene, camera);
+}
+animate();
+</script>
+</body>
+</html>