Mount Comfort Men's Club

\n\n

\n \n

\n\n\n\n\n\n",[19,72],"9c02802e-5ee8-11f1-a7c1-1607ee4eb77e","favicon.svg","9c0280ce-5ee8-11f1-a7c1-1607ee4eb77e",25,["D",1780448856792],"\n\n",[19,80],"d6cee8be-5ee8-11f1-8cd2-1607ee4eb77e","app.js","d6cee972-5ee8-11f1-8cd2-1607ee4eb77e",29,["D",1780448955440],"const MEMBERS = [\"Mike Kaminski\",\"William Biehn\",\"Justin Ray\",\"Derek Wardlow\",\"Travis Fink\",\"Heath Rheay\",\"Alex McDowell\",\"John Post\"];\nconst MEETINGS = [\n {date:\"May 2026\",book:\"Sightseeing\",leader:\"William Biehn\",drink:\"A Taste of Thailand\"},\n {date:\"April 2026\",book:\"The Journey to the East\",leader:\"Alex McDowell\",drink:\"Brews from Bremgarten\"},\n {date:\"March 2026\",book:\"Project Hail Mary\",leader:\"Heath Rheay\",drink:\"Russian Vodka & Tube Lasagna\"},\n {date:\"February 2026\",book:\"Revenge of the Tipping Point\",leader:\"Travis Fink\",drink:\"The Magic Third\"},\n {date:\"January 2026\",book:\"A Study in Scarlet\",leader:\"Derek Wardlow\",drink:\"Elementary\"},\n {date:\"November 2025\",book:\"Fathered by God\",leader:\"Mike Kaminski\",drink:\"Dad's Greatest Hits\"},\n {date:\"October 2025\",book:\"Frankenstein\",leader:\"Alex McDowell\",drink:\"A Bad Summer in Ireland\"},\n {date:\"September 2025\",book:\"The Ruthless Elimination of Hurry\",leader:\"William Biehn\",drink:\"Unhurried Spirits\"},\n {date:\"August 2025\",book:\"Digital Fortress\",leader:\"Justin Ray\",drink:\"19-1-14-7-18-9-1\"},\n {date:\"July 2025\",book:\"1984\",leader:\"Heath Rheay\",drink:\"Victory Gin\"},\n {date:\"June 2025\",book:\"These Silent Woods\",leader:\"Travis Fink\",drink:\"Cold Hot Chocolates\"},\n {date:\"May 2025\",book:\"With\",leader:\"Derek Wardlow\",drink:\"Mixer Roulette\"},\n {date:\"April 2025\",book:\"The Imitation of Christ\",leader:\"Mike Kaminski\",drink:\"Monk Mead\"},\n {date:\"February 2025\",book:\"The Problem of Pain\",leader:\"Justin Ray\",drink:\"Tonic for the Pain\"},\n {date:\"January 2025\",book:\"Be a Man of Standing\",leader:\"William Biehn\",drink:\"Israeli Wine & Superman Sliders\"},\n {date:\"December 2024\",book:\"The Wager\",leader:\"Heath Rheay\",drink:\"Grog\"},\n {date:\"October 2024\",book:\"Same Kind of Different as Me\",leader:\"Travis Fink\",drink:\"Serendipitous Swirl\"},\n {date:\"September 2024\",book:\"Family Discipleship\",leader:\"Derek Wardlow\",drink:\"Family Fellowship Flight\"},\n {date:\"August 2024\",book:\"Mere Christianity\",leader:\"Mike Kaminski\",drink:\"The Drinklings\"},\n {date:\"July 2024\",book:\"Imitating Jesus\",leader:\"Justin Ray\",drink:\"Passover Wine\"},\n {date:\"June 2024\",book:\"Extreme Ownership\",leader:\"William Biehn\",drink:\"Arak Heavenly Black Licorice\"},\n {date:\"May 2024\",book:\"Demon Copperhead\",leader:\"Heath Rheay\",drink:\"Lee County Cooler (& Feast)\"},\n {date:\"April 2024\",book:\"The Boys in the Boat\",leader:\"Travis Fink\",drink:\"Old Fashioned\"},\n {date:\"March 2024\",book:\"The Greatest Beer Run Ever\",leader:\"Derek Wardlow\",drink:\"Medal of Honor\"},\n {date:\"February 2024\",book:\"The Road\",leader:\"Mike Kaminski\",drink:\"Boulevard Ale Trail\"},\n {date:\"January 2024\",book:\"Winning the War in Your Mind\",leader:\"Justin Ray\",drink:\"Cognactive Bias\"},\n {date:\"November 2023\",book:\"The Screwtape Letters\",leader:\"Heath Rheay\",drink:\"El Diablo\"},\n {date:\"October 2023\",book:\"Pilgrim's Progress\",leader:\"Travis Fink\",drink:\"Flight to the Light\"},\n {date:\"September 2023\",book:\"This is the Day\",leader:\"Derek Wardlow\",drink:\"Dreamsicle\"},\n {date:\"August 2023\",book:\"Gates of Fire\",leader:\"Mike Kaminski\",drink:\"Dark and Stormy\"},\n {date:\"July 2023\",book:\"Voice of the Heart\",leader:\"Justin Ray\",drink:\"Woodchuck Hard Cider\"},\n];\n\nconst STORAGE_KEY = \"mcmc-ratings-v3\";\nlet allRatings = {};\nlet currentMember = MEMBERS[0];\nlet sortMode = \"date\";\nlet selectedMeeting = null;\n\n// Load ratings from localStorage\ntry { const s = localStorage.getItem(STORAGE_KEY); if (s) allRatings = JSON.parse(s); } catch {}\n\nfunction saveRatings() {\n try { localStorage.setItem(STORAGE_KEY, JSON.stringify(allRatings)); } catch {}\n}\n\nfunction getAvg(book) {\n const r = allRatings[book] || {};\n const vals = Object.values(r).filter(Boolean);\n if (!vals.length) return null;\n return vals.reduce((a,b) => a+b, 0) / vals.length;\n}\n\nfunction getRatedCount(book) {\n return Object.values(allRatings[book] || {}).filter(Boolean).length;\n}\n\n// Populate member select\nconst sel = document.getElementById(\"member-select\");\nMEMBERS.forEach(m => { const o = document.createElement(\"option\"); o.value = m; o.textContent = m; sel.appendChild(o); });\nsel.addEventListener(\"change\", e => { currentMember = e.target.value; renderGrid(); if (selectedMeeting) openModal(selectedMeeting); });\n\n// Sort buttons\ndocument.querySelectorAll(\".sort-btn\").forEach(btn => {\n btn.addEventListener(\"click\", () => {\n sortMode = btn.dataset.sort;\n document.querySelectorAll(\".sort-btn\").forEach(b => b.classList.toggle(\"active\", b.dataset.sort === sortMode));\n renderGrid();\n });\n});\n\n// Modal close\ndocument.getElementById(\"modal-close\").addEventListener(\"click\", closeModal);\ndocument.getElementById(\"overlay\").addEventListener(\"click\", e => { if (e.target.id === \"overlay\") closeModal(); });\n\nfunction closeModal() {\n document.getElementById(\"overlay\").classList.remove(\"open\");\n selectedMeeting = null;\n}\n\nfunction openModal(meeting) {\n selectedMeeting = meeting;\n const ratings = allRatings[meeting.book] || {};\n const avg = getAvg(meeting.book);\n const count = getRatedCount(meeting.book);\n\n document.getElementById(\"modal-date\").textContent = meeting.date;\n document.getElementById(\"modal-title\").textContent = meeting.book;\n document.getElementById(\"modal-leader\").textContent = \"Led by \" + meeting.leader;\n document.getElementById(\"modal-drink\").textContent = \"🍺 \" + meeting.drink;\n\n const scoreNum = document.getElementById(\"modal-score-num\");\n const scoreSub = document.getElementById(\"modal-score-sub\");\n if (avg === null) {\n scoreNum.textContent = \"\";\n scoreSub.textContent = \"No ratings yet\";\n scoreSub.style.fontSize = \"12px\";\n } else {\n scoreNum.textContent = avg.toFixed(1);\n scoreNum.style.color = avg >= 8 ? \"#c07c2a\" : avg >= 6 ? \"#8b5a1a\" : \"#6b5a3e\";\n scoreSub.textContent = `/ ${count} vote${count !== 1 ? \"s\" : \"\"}`;\n }\n\n const grid = document.getElementById(\"ratings-grid\");\n grid.innerHTML = \"\";\n MEMBERS.forEach(member => {\n const isCurrent = member === currentMember;\n const row = document.createElement(\"div\");\n row.className = \"member-row\" + (isCurrent ? \" is-current\" : \"\");\n\n const nameDiv = document.createElement(\"div\");\n nameDiv.className = \"member-name\";\n nameDiv.textContent = member + (isCurrent ? \" ▶ you\" : \"\");\n row.appendChild(nameDiv);\n\n const starRow = document.createElement(\"div\");\n starRow.className = \"star-row\";\n const memberRating = ratings[member] || 0;\n\n for (let n = 1; n <= 10; n++) {\n const btn = document.createElement(\"button\");\n btn.className = \"star-btn\" + (memberRating >= n ? \" lit\" : \"\");\n btn.textContent = memberRating >= n ? \"★\" : \"☆\";\n btn.disabled = !isCurrent;\n if (isCurrent) {\n btn.addEventListener(\"mouseenter\", () => {\n starRow.querySelectorAll(\".star-btn\").forEach((b, i) => {\n b.textContent = i < n ? \"★\" : \"☆\";\n b.classList.toggle(\"lit\", i < n);\n });\n });\n btn.addEventListener(\"mouseleave\", () => {\n const cur = (allRatings[meeting.book] || {})[currentMember] || 0;\n starRow.querySelectorAll(\".star-btn\").forEach((b, i) => {\n b.textContent = i < cur ? \"★\" : \"☆\";\n b.classList.toggle(\"lit\", i < cur);\n });\n });\n btn.addEventListener(\"click\", () => {\n if (!allRatings[meeting.book]) allRatings[meeting.book] = {};\n allRatings[meeting.book][currentMember] = n;\n saveRatings();\n openModal(meeting);\n renderGrid();\n updateTopRated();\n });\n }\n starRow.appendChild(btn);\n }\n row.appendChild(starRow);\n\n if (memberRating) {\n const sc = document.createElement(\"div\");\n sc.className = \"member-score\";\n sc.textContent = memberRating + \"/10\";\n row.appendChild(sc);\n }\n\n grid.appendChild(row);\n });\n\n document.getElementById(\"overlay\").classList.add(\"open\");\n}\n\nfunction renderGrid() {\n const grid = document.getElementById(\"book-grid\");\n grid.innerHTML = \"\";\n\n const sorted = [...MEETINGS].sort((a, b) => {\n if (sortMode === \"rating\") {\n const avgA = getAvg(a.book), avgB = getAvg(b.book);\n if (avgA === null && avgB === null) return 0;\n if (avgA === null) return 1;\n if (avgB === null) return -1;\n return avgB - avgA;\n }\n return 0;\n });\n\n sorted.forEach((meeting, i) => {\n const ratings = allRatings[meeting.book] || {};\n const avg = getAvg(meeting.book);\n const myRating = ratings[currentMember] || 0;\n const count = getRatedCount(meeting.book);\n\n const card = document.createElement(\"div\");\n card.className = \"book-card\" + (myRating ? \" rated\" : \"\");\n card.style.animationDelay = Math.min(i * 0.03, 0.4) + \"s\";\n\n if (sortMode === \"rating\" && avg !== null) {\n const badge = document.createElement(\"div\");\n badge.className = \"card-avg-badge\";\n badge.textContent = avg.toFixed(1);\n card.appendChild(badge);\n }\n\n card.innerHTML += `\n

${meeting.date}

${meeting.book}

Led by ${meeting.leader}

${[1,2,3,4,5].map(n => `= n ? '#c07c2a' : '#2a1f0e'}\">★`).join(\"\")}

\n ${myRating ? `You: ${myRating}/10` : \"\"}\n ${count > 0 ? `${count}/8 rated` : \"\"}\n

\n `;\n\n card.addEventListener(\"click\", () => openModal(meeting));\n grid.appendChild(card);\n });\n}\n\nfunction updateTopRated() {\n const topRatedDiv = document.getElementById(\"top-rated\");\n const top = [...MEETINGS]\n .map(m => ({ ...m, avg: getAvg(m.book) }))\n .filter(m => m.avg !== null)\n .sort((a,b) => b.avg - a.avg)\n .slice(0, 3);\n\n if (!top.length) { topRatedDiv.style.display = \"none\"; return; }\n topRatedDiv.style.display = \"flex\";\n\n // Remove old buttons\n topRatedDiv.querySelectorAll(\".top-rated-btn\").forEach(b => b.remove());\n\n const medals = [\"#ffd700\",\"#c0c0c0\",\"#cd7f32\"];\n top.forEach((m, i) => {\n const btn = document.createElement(\"button\");\n btn.className = \"top-rated-btn\";\n btn.innerHTML = `${\"★\".repeat(3-i)} ${m.book.length > 18 ? m.book.slice(0,18)+\"…\" : m.book} ${m.avg.toFixed(1)}`;\n btn.addEventListener(\"click\", () => openModal(m));\n topRatedDiv.appendChild(btn);\n });\n}\n\nrenderGrid();\nupdateTopRated();\n",[19,87],"6123d8c2-5ee8-11f1-a7c1-1607ee4eb77e","lib","a88a4204-bf6e-4106-b9d1-39a0b0b7ec31",12,["D",1780448758023],"directory",[19,94],"4d8d1968-5ee8-11f1-a5a1-1607ee4eb77e","components","4d8d1a3a-5ee8-11f1-a5a1-1607ee4eb77e",7,["D",1780448725164],[19,101],"4b4aab16-5ee8-11f1-a5a1-1607ee4eb77e",6,["D",1780448721351],[19],{"_40":106,"_13":19,"_43":46,"_45":-5,"_47":48,"_49":107,"_51":52,"_53":131,"_17":55,"_56":98,"_57":-5,"_59":60,"_61":-5,"_120":132,"_18":133},{"_40":123,"_13":124,"_43":125,"_45":-5,"_47":48,"_49":126,"_51":52,"_53":127,"_17":55,"_56":24,"_57":128,"_59":60,"_61":-5,"_120":129,"_18":130},{"_40":113,"_13":114,"_43":115,"_45":-5,"_47":48,"_49":116,"_51":52,"_53":117,"_17":55,"_56":118,"_57":119,"_59":60,"_61":-5,"_120":121,"_18":122},"546b478c-5ee8-11f1-9c2a-1607ee4eb77e","index.ts","546b484a-5ee8-11f1-9c2a-1607ee4eb77e",9,["D",1780448736684],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[114],"ab72d1ee-5ee8-11f1-ae74-1607ee4eb77e","README.md","ab72d306-5ee8-11f1-ae74-1607ee4eb77e",26,["D",1780448882696],"# MCMC Sampler Dashboard\n\nAn interactive dashboard that runs a **Metropolis-Hastings** Markov Chain Monte\nCarlo sampler in your browser and animates it exploring a 2D probability density\nin real time.\n\n## What it does\n\n- Renders a target density as a heatmap (Viridis color ramp).\n- Runs a Gaussian random-walk Metropolis-Hastings chain, drawing the trace and\n accepted samples on top.\n- Live stats: iteration count, acceptance rate, and running mean / std of the\n samples (post burn-in).\n- Tweak the **target distribution**, **proposal step size**, and **steps per\n frame** and watch how mixing and acceptance respond.\n\n### Try this\n\n- Set step size very small (0.1) on the **Banana** target — watch the chain\n crawl and acceptance shoot up toward 100% (poor mixing).\n- Crank step size to 2.5 — acceptance collapses as most proposals get rejected.\n- Switch to **Bimodal** and see how hard it is for the chain to hop between the\n two modes.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"frontend/index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx
(state + animation loop)\"]\n App --> Canvas[\"SamplerCanvas.tsx\"]\n App --> Controls[\"Controls.tsx\"]\n App --> Stats[\"StatsPanel.tsx\"]\n App -->|uses| Sampler[\"lib/sampler.ts\"]\n App -->|uses| Dist[\"lib/distributions.ts\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend)\nfrontend/\n index.html ← HTML shell (Twind + React)\n index.tsx ← React entrypoint\n favicon.svg\n lib/\n distributions.ts ← target densities (banana, bimodal, donut, gaussian)\n sampler.ts ← Metropolis-Hastings step + stats\n components/\n App.tsx ← root: state, rAF animation loop\n SamplerCanvas.tsx ← density heatmap + chain overlay (canvas)\n Controls.tsx ← target / step-size / speed controls\n StatsPanel.tsx ← live diagnostics\n```\n\n## Extending it\n\n- **Add a target**: append to `TARGETS` in `lib/distributions.ts` with a\n `logProb` and `bounds`.\n- **Add a sampler**: implement a new `step` variant in `lib/sampler.ts` (e.g.\n Hamiltonian Monte Carlo or adaptive Metropolis).\n- **Persist runs**: add an API route in `index.ts` and store summaries with\n `std/sqlite` or `std/blob`.\n",[],[124],["D",1780448721351],[134,135,136,137,138,139,140],[19],{"_40":100,"_13":101,"_43":102,"_45":46,"_47":48,"_49":103,"_51":52,"_53":159,"_17":55,"_56":98,"_57":-5,"_59":60,"_61":-5,"_120":160,"_18":161},{"_40":93,"_13":94,"_43":95,"_45":46,"_47":48,"_49":96,"_51":52,"_53":156,"_17":55,"_56":98,"_57":-5,"_59":60,"_61":-5,"_120":157,"_18":158},{"_40":86,"_13":87,"_43":88,"_45":46,"_47":48,"_49":89,"_51":52,"_53":153,"_17":55,"_56":68,"_57":91,"_59":60,"_61":-5,"_120":154,"_18":155},{"_40":79,"_13":80,"_43":81,"_45":46,"_47":48,"_49":82,"_51":52,"_53":150,"_17":55,"_56":24,"_57":84,"_59":60,"_61":-5,"_120":151,"_18":152},{"_40":71,"_13":72,"_43":73,"_45":46,"_47":48,"_49":74,"_51":52,"_53":147,"_17":76,"_56":24,"_57":77,"_59":60,"_61":-5,"_120":148,"_18":149},{"_40":63,"_13":64,"_43":65,"_45":46,"_47":48,"_49":66,"_51":52,"_53":144,"_17":55,"_56":68,"_57":69,"_59":60,"_61":-5,"_120":145,"_18":146},{"_40":41,"_13":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":141,"_17":55,"_56":24,"_57":58,"_59":60,"_61":-5,"_120":142,"_18":143},["D",1780448912981],[],[19,42],["D",1780448848747],[],[19,64],["D",1780448884192],[],[19,72],["D",1780448856792],[],[19,80],["D",1780448955440],[],[19,87],["D",1780448758023],[],[19,94],["D",1780448725164],[162,163,164,165],[19,101],{"_40":190,"_13":191,"_43":192,"_45":102,"_47":48,"_49":193,"_51":52,"_53":194,"_17":55,"_56":68,"_57":195,"_59":60,"_61":-5,"_120":196,"_18":197},{"_40":182,"_13":183,"_43":184,"_45":102,"_47":48,"_49":185,"_51":52,"_53":186,"_17":55,"_56":68,"_57":187,"_59":60,"_61":-5,"_120":188,"_18":189},{"_40":174,"_13":175,"_43":176,"_45":102,"_47":48,"_49":177,"_51":52,"_53":178,"_17":55,"_56":68,"_57":179,"_59":60,"_61":-5,"_120":180,"_18":181},{"_40":166,"_13":167,"_43":168,"_45":102,"_47":48,"_49":169,"_51":52,"_53":170,"_17":55,"_56":68,"_57":171,"_59":60,"_61":-5,"_120":172,"_18":173},"7ee53cc0-5ee8-11f1-a336-1607ee4eb77e","StatsPanel.tsx","7ee53d92-5ee8-11f1-a336-1607ee4eb77e",21,["D",1780448807936],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ntype Props = {\n iterations: number;\n acceptanceRate: number;\n meanX: number;\n meanY: number;\n stdX: number;\n stdY: number;\n};\n\nfunction Stat({ label, value, hint }: { label: string; value: string; hint?: string }) {\n return (\n

{label}

{value}

\n {hint &&

{hint}

}\n

\n );\n}\n\nexport function StatsPanel(props: Props) {\n const accPct = (props.acceptanceRate * 100).toFixed(1) + \"%\";\n const accColor = props.acceptanceRate > 0.6\n ? \"text-amber-600\"\n : props.acceptanceRate < 0.15\n ? \"text-red-600\"\n : \"text-green-600\";\n return (\n

\n \n

\n Acceptance\n

{accPct}

~23-50% is healthy

\n \n \n

\n );\n}\n",[],[19,101,167],"7257a1c8-5ee8-11f1-8e5c-1607ee4eb77e","SamplerCanvas.tsx","7257a272-5ee8-11f1-8e5c-1607ee4eb77e",19,["D",1780448786878],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport type { Target } from \"../lib/distributions.ts\";\nimport type { Sample } from \"../lib/sampler.ts\";\n\ntype Props = {\n target: Target;\n samples: Sample[];\n current: Sample | null;\n size?: number;\n};\n\n// Viridis-ish color ramp for the density heatmap (t in [0,1]).\nfunction ramp(t: number): [number, number, number] {\n const stops: [number, [number, number, number]][] = [\n [0.0, [68, 1, 84]],\n [0.25, [59, 82, 139]],\n [0.5, [33, 145, 140]],\n [0.75, [94, 201, 98]],\n [1.0, [253, 231, 37]],\n ];\n for (let i = 0; i < stops.length - 1; i++) {\n const [t0, c0] = stops[i];\n const [t1, c1] = stops[i + 1];\n if (t <= t1) {\n const f = (t - t0) / (t1 - t0);\n return [\n Math.round(c0[0] + f * (c1[0] - c0[0])),\n Math.round(c0[1] + f * (c1[1] - c0[1])),\n Math.round(c0[2] + f * (c1[2] - c0[2])),\n ];\n }\n }\n return stops[stops.length - 1][1];\n}\n\nexport function SamplerCanvas({ target, samples, current, size = 480 }: Props) {\n const densityRef = useRef(null);\n const overlayRef = useRef(null);\n const [xmin, xmax, ymin, ymax] = target.bounds;\n\n const toPx = (x: number, y: number): [number, number] => [\n ((x - xmin) / (xmax - xmin)) * size,\n size - ((y - ymin) / (ymax - ymin)) * size,\n ];\n\n // Draw the static density heatmap whenever the target changes.\n useEffect(() => {\n const canvas = densityRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext(\"2d\")!;\n const res = 160; // grid resolution\n const cell = size / res;\n const grid: number[] = [];\n let max = -Infinity;\n for (let j = 0; j < res; j++) {\n for (let i = 0; i < res; i++) {\n const x = xmin + ((i + 0.5) / res) * (xmax - xmin);\n const y = ymax - ((j + 0.5) / res) * (ymax - ymin);\n const lp = target.logProb(x, y);\n grid.push(lp);\n if (lp > max) max = lp;\n }\n }\n // Normalize by exponentiating relative to the max log-prob.\n for (let j = 0; j < res; j++) {\n for (let i = 0; i < res; i++) {\n const p = Math.exp(grid[j * res + i] - max); // 0..1\n const [r, g, b] = ramp(Math.pow(p, 0.45));\n ctx.fillStyle = `rgb(${r},${g},${b})`;\n ctx.fillRect(i * cell, j * cell, cell + 1, cell + 1);\n }\n }\n }, [target]);\n\n // Draw the chain trace + samples on the overlay whenever samples change.\n useEffect(() => {\n const canvas = overlayRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext(\"2d\")!;\n ctx.clearRect(0, 0, size, size);\n\n // Faint trace line connecting recent samples.\n const traceStart = Math.max(0, samples.length - 400);\n ctx.strokeStyle = \"rgba(255,255,255,0.35)\";\n ctx.lineWidth = 1;\n ctx.beginPath();\n for (let i = traceStart; i < samples.length; i++) {\n const [px, py] = toPx(samples[i].x, samples[i].y);\n if (i === traceStart) ctx.moveTo(px, py);\n else ctx.lineTo(px, py);\n }\n ctx.stroke();\n\n // Sample dots (subsampled for performance).\n const stride = Math.max(1, Math.floor(samples.length / 3000));\n ctx.fillStyle = \"rgba(255,255,255,0.5)\";\n for (let i = 0; i < samples.length; i += stride) {\n const [px, py] = toPx(samples[i].x, samples[i].y);\n ctx.fillRect(px, py, 1.5, 1.5);\n }\n\n // Current position marker.\n if (current) {\n const [px, py] = toPx(current.x, current.y);\n ctx.fillStyle = \"#ef4444\";\n ctx.beginPath();\n ctx.arc(px, py, 5, 0, Math.PI * 2);\n ctx.fill();\n ctx.strokeStyle = \"white\";\n ctx.lineWidth = 2;\n ctx.stroke();\n }\n }, [samples, current, target]);\n\n return (\n \n