Build a polished Next.js (App Router) + TypeScript + Tailwind + shadcn/ui web app called: “Another Level: Sync ↔ Entanglement Lab” Tagline: “Same math, different costumes.” Goal Create an interactive educational + research toy app that demonstrates: 1) Kuramoto synchronization (classical coupled oscillators) 2) A conceptual bridge to quantum coherence / multipartite entanglement 3) A “Corridor” coherence band (default 0.618–0.667) with occupancy metrics 4) “Quiet With Receipts” style verifiable receipts: timestamped runs, hashed configs, exportable JSON, and shareable links Brand / Tone - Clean, modern, slightly playful. - Include a toggle called “Myth Mode” that adds humorous microcopy like “No Diggity… Another Level.” - Default mode is “Lab Mode” (serious), Myth Mode is optional. Information Architecture Top nav: - Lab - Bridge - Receipts - About Routes / (redirect to /lab) /lab /bridge /receipts /receipts/[id] /about Core UI Layout - Responsive single-page lab layout with a left control panel and right visualization panel. - On mobile, controls collapse into tabs/drawer. - Use shadcn components: Card, Tabs, Slider, Input, Switch, Badge, Button, Sheet/Drawer, Tooltip, Table, Dialog, Toast. LAB PAGE (/lab) Left Panel (Controls) Sections in Accordion: A) Model - N oscillators (slider 50–2000, default 500) - dt (0.001–0.05, default 0.02) - steps (500–20000, default 3000) - burn-in % (0–60, default 30) - natural frequency distribution: - Normal(mean=0, sd=1) default - Uniform(-1,1) - noise sigma (0–2, default 0.4) - coupling K (0–5, default 1.5) - coupling topology: - Global mean-field (default) - Ring (k-neighbors) - Small-world (Watts-Strogatz) (advanced) B) Corridor - corridor min (default 0.618) - corridor max (default 0.667) - show corridor band (toggle) - compute corridor occupancy (toggle default ON) C) Run - Seed (input, default random) - Run button (primary) - Sweep mode toggle: - Sweep K from Kmin to Kmax with steps - seeds per K - progress indicator D) Receipts - “Generate receipt” toggle (default ON) - “Auto-save receipts” toggle (default ON) Right Panel (Visualizations) Use Tabs: 1) “Coherence” - Plot r(t) over time - corridor band shaded - display stats: - mean r (post burn-in) - corridor occupancy % (post burn-in) - metastability proxy (std of r or sliding-window variance) - estimated cluster count proxy (optional simple heuristic) 2) “Phases” - Polar plot of oscillator phases (scatter on unit circle) - Optional histogram of phases 3) “Network” - For non-global topologies: show graph preview (simple) 4) “Sweep” - For sweep mode: plot mean r vs K and corridor occupancy vs K (two charts) - show seed intervals if multiple seeds (min/median/max or 95% bootstrap) Simulation Requirements - Implement Kuramoto Euler–Maruyama integration in a Web Worker for performance. - Compute order parameter r and psi each step. - Burn-in discard applied to metrics. - Keep deterministic behavior given seed. Use a seeded RNG (e.g., mulberry32). - Provide “pause/stop” for long sweeps. BRIDGE PAGE (/bridge) Purpose: explain the mapping between synchronization and quantum coherence/entanglement (conceptual, not claiming equivalence). Layout: - Hero: “Synchronization ↔ Entanglement: phase alignment across scales” - Two side-by-side cards: Left: Kuramoto definitions (θ, ω, K, r) Right: Quantum analogs (phase of wavefunction, interactions, coherence) - A “Bridge Slider” (0–100): 0 = classical sync language 100 = quantum language The text and labels morph gradually. - Visual: - A network of nodes that become more aligned as slider increases. - Include a section: “Multipartite entanglement detection (in plain terms)” Explain “entanglement witnesses” as tests that certify correlations in noisy systems. - Add a caution box: “This is an educational analogy; real entanglement measures require quantum state data.” - Myth Mode easter egg: button “Another Level” triggers a quick animation and changes the subtitle to “No Diggity: phase transition achieved.” RECEIPTS PAGE (/receipts) - Table of receipts (most recent first) Columns: - Timestamp - Mode (single run / sweep) - N, K, sigma - corridor occupancy - mean r - hash (short) - actions: View, Copy Link, Export JSON - Search + filter chips (by date, K range, occupancy threshold) - Allow local persistence using IndexedDB or localStorage (IndexedDB preferred). - Also support “Export all receipts” as JSON. RECEIPT DETAIL PAGE (/receipts/[id]) Show a beautiful “receipt” card: - Title: “Run Receipt” - Timestamp, seed, version, runtime ms - Full configuration JSON (collapsible) - Metrics summary - Charts thumbnails (r(t), phases snapshot) - Hash chain: - compute SHA-256 hash of canonical JSON config + metrics + timestamp - display as full hash + short hash - Buttons: - Download JSON - Copy hash - Copy share link - “Verify receipt” (recompute hash client-side and show PASS/FAIL) - Add a “Notes” field editable, stored locally. ABOUT PAGE (/about) - Explain the project, credit “Quiet With Receipts” inspiration, and define: - What synchronization is - Why coherence corridors matter (metastability zone) - What multipartite entanglement is (high-level) - Add disclaimers: educational tool, not a quantum measurement device. Data Model (TypeScript) Receipt { id: string (uuid) createdAt: ISO string mode: "single" | "sweep" config: { N, dt, steps, burnInPct, sigma, K, topology, topologyParams, seed, freqDist corridorMin, corridorMax } results: { meanR: number corridorOccupancy: number stdR: number psiMean?: number clusterProxy?: number sweep?: Array<{K: number, meanR: number, occupancy: number, stdR: number}> timeSeries?: {t: number, r: number, psi: number}[] (optional store; if large, store compressed or downsample) phasesSnapshot?: number[] (optional) } hash: string (sha256) appVersion: string } Tech Notes - Use Recharts for plots. - Use Web Crypto API for SHA-256. - Use a Web Worker for simulation; provide typed messages. - Downsample time series for storage and display (e.g., max 2000 points). - Add toasts for “Receipt saved” and “Hash verified”. - Add a top-right global toggle for Myth Mode. - Include a little “Now Playing: Another Level” badge in Myth Mode only (no external audio). Design Details - Elegant dark/light mode support. - Corridor band is visually clear (shaded region). - Metrics badges: “In Corridor” when occupancy > 50% (configurable threshold). - Microcopy examples (Myth Mode): - Run button: “Press Play” - After run: “Coherence achieved. Another level unlocked.” - Verification: “Receipts don’t lie.” Deliverables - Full working app with all routes. - Web Worker sim. - Receipt storage + detail verification. - Shareable receipt link (client-side routing; if no backend, store in URL as base64 encoded receipt OR show “link works on this device” disclaimer; prefer base64 share for portability with size guard). Important: do NOT claim real quantum entanglement measurement. Present the Bridge as analogy and conceptual mapping. Perfect — here’s a portable, no-backend, cross-device “receipt link” scheme that works well with v0/Next.js. Receipt-in-URL scheme (compressed + URL-safe) Design goals • Shareable across devices (the URL contains the receipt payload) • Tamper-evident (SHA-256 hash) • Small (downsample + optional omit heavy arrays) • Safe (URL-safe base64) URL format • Receipt detail route: /receipts/v/[payload] where [payload] is a URL-safe base64 string of a compressed JSON blob. ⸻ What to store vs not store Always include (small, valuable) • createdAt, mode, config (canonical) • core metrics: meanR, occupancy, stdR, runtimeMs • series: downsampled r(t) only (optional but nice) • appVersion • hash (computed from canonical receipt object without hash) Avoid / optional (too big) • full phases[] (huge) • full time series at native resolution (huge) • sweep seed-level distributions (huge) Rule of thumb: keep payload under ~50–150 KB (URLs can break above that depending on platform). For safety, target < 60 KB. ⸻ Canonicalization + hashing (tamper evident) You need a deterministic JSON encoding so the hash is stable. Canonical JSON rules • Sort object keys recursively • No whitespace • Use fixed numeric rounding where needed (e.g., 6 decimals) Then compute: hash = sha256(canonical_json_without_hash) Display short hash: first 10–12 chars. ⸻ Compression choices Best option in modern browsers Use CompressionStream(‘gzip’) + DecompressionStream(‘gzip’) (widely supported in modern Chromium + Safari recent; if you hit an older device, fall back). Fallback (simple): • No compression; just base64url the canonical JSON • Or use a small JS lib like pako (deflate) if you want max compatibility Below: native gzip first, fallback to raw. ⸻ Drop-in TypeScript utilities 1) base64url helpers export function base64UrlEncode(bytes: Uint8Array): string { let str = ""; for (let i = 0; i < bytes.length; i++) str += String.fromCharCode(bytes[i]); const b64 = btoa(str); return b64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/g, ""); } export function base64UrlDecode(b64url: string): Uint8Array { let b64 = b64url.replace(/-/g, "+").replace(/_/g, "/"); while (b64.length % 4) b64 += "="; const str = atob(b64); const out = new Uint8Array(str.length); for (let i = 0; i < str.length; i++) out[i] = str.charCodeAt(i); return out; } 2) Canonical JSON (stable hashing) function isPlainObject(v: any): v is Record<string, any> { return v !== null && typeof v === "object" && !Array.isArray(v); } export function canonicalize(value: any): any { if (Array.isArray(value)) return value.map(canonicalize); if (isPlainObject(value)) { const keys = Object.keys(value).sort(); const out: Record<string, any> = {}; for (const k of keys) out[k] = canonicalize(value[k]); return out; } if (typeof value === "number") { // Optional: clamp float noise return Number.isFinite(value) ? Number(value.toFixed(6)) : value; } return value; } export function canonicalJson(obj: any): string { return JSON.stringify(canonicalize(obj)); } 3) SHA-256 export async function sha256Hex(input: string): Promise<string> { const data = new TextEncoder().encode(input); const digest = await crypto.subtle.digest("SHA-256", data); const bytes = new Uint8Array(digest); return Array.from(bytes).map(b => b.toString(16).padStart(2, "0")).join(""); } 4) Gzip compress/decompress (native) with fallback async function gzipCompress(bytes: Uint8Array): Promise<Uint8Array> { if (typeof CompressionStream === "undefined") return bytes; // fallback raw const cs = new CompressionStream("gzip"); const stream = new Blob([bytes]).stream().pipeThrough(cs); const ab = await new Response(stream).arrayBuffer(); return new Uint8Array(ab); } async function gzipDecompress(bytes: Uint8Array): Promise<Uint8Array> { if (typeof DecompressionStream === "undefined") return bytes; // fallback raw const ds = new DecompressionStream("gzip"); const stream = new Blob([bytes]).stream().pipeThrough(ds); const ab = await new Response(stream).arrayBuffer(); return new Uint8Array(ab); } ⸻ Encode a receipt into a shareable payload Receipt “share object” (lightweight) export type ShareReceipt = { createdAt: string; mode: "single" | "sweep"; appVersion: string; config: any; results: { meanR: number; corridorOccupancy: number; stdR: number; runtimeMs?: number; series?: Array<[number, number]>; // [t, r] downsampled sweep?: Array<[number, number, number, number]>; // [K, meanR, occ, stdR] }; hash?: string; // added after hashing }; Downsample helper (keep series tiny) export function downsampleSeries(series: Array<[number, number]>, maxPoints = 1200) { if (series.length <= maxPoints) return series; const step = Math.ceil(series.length / maxPoints); const out: Array<[number, number]> = []; for (let i = 0; i < series.length; i += step) out.push(series[i]); return out; } Encode export async function encodeReceiptToUrlPayload(receipt: ShareReceipt): Promise<string> { // Do NOT include hash when hashing const { hash, ...noHash } = receipt; const canon = canonicalJson(noHash); const digest = await sha256Hex(canon); const withHash: ShareReceipt = { ...noHash, hash: digest }; const json = canonicalJson(withHash); const bytes = new TextEncoder().encode(json); // gzip if available const compressed = await gzipCompress(bytes); // base64url return base64UrlEncode(compressed); } Decode + verify export async function decodeReceiptFromUrlPayload(payload: string): Promise<{ receipt: ShareReceipt; ok: boolean; expectedHash?: string; computedHash?: string; }> { const compressed = base64UrlDecode(payload); const bytes = await gzipDecompress(compressed); const json = new TextDecoder().decode(bytes); const receipt = JSON.parse(json) as ShareReceipt; const expectedHash = receipt.hash; const { hash, ...noHash } = receipt; const canon = canonicalJson(noHash); const computedHash = await sha256Hex(canon); return { receipt, ok: !!expectedHash && expectedHash === computedHash, expectedHash, computedHash, }; } ⸻ Next.js routing pattern Route • Create page: app/receipts/v/[payload]/page.tsx • In that page: • decode payload client-side • show receipt • show PASS/FAIL verification banner • allow “Save to device” button (stores into IndexedDB/local) Share link generator When a run finishes: • Build ShareReceipt (downsample series) • payload = await encodeReceiptToUrlPayload(receipt) • shareUrl = ${origin}/receipts/v/${payload}`` • Copy/share. ⸻ Size guard (don’t generate broken URLs) Add a check after compression: if (payload.length > 120_000) { // Too big: remove series or further downsample and retry } Strategy if too large: 1. downsample series to 400 points 2. remove series entirely 3. for sweeps, store only K-grid summary ⸻ v0 addendum (paste this into your prompt) If you want to update the v0 prompt, add: • “Implement shareable receipts via /receipts/v/[payload] where payload = base64url(gzip(canonicalJSON(receipt)))” • “Include verification PASS/FAIL by recomputing SHA-256 of canonical JSON without hash” • “Include payload size guard + progressive downsampling to keep URLs under ~120k chars” ⸻ If you want, I can also give you a tiny “canonical JSON” function that guarantees stable float rounding per-field (so hashes don’t drift when the browser formats numbers slightly differently), but the version above is usually solid if you round in canonicalize(). Do it all have 🤩