\n {label}\n \n \n \n {round(ms)}ms\n

\n );\n}\n\nfunction Metric({ label, r2, s3, scale }: { label: string; r2: number; s3: number; scale: number }) {\n return (\n

\n {label}\n {x(r2, s3)}× faster\n

\n \n \n

\n );\n}\n\n// ---- unified control bar (store toggle + re-run + live read latency) ----\nfunction ControlBar(\n { store, id, loadMs, samples, cooldown }: {\n store: Store;\n id: string;\n loadMs: number;\n samples: number;\n cooldown: boolean;\n },\n) {\n const tab = (s: Store, text: string) => {\n const active = store === s;\n const on = s === \"s3\" ? \"bg-emerald-500 text-white\" : \"bg-rose-500 text-white\";\n return (\n \n {text}\n \n );\n };\n return (\n \n );\n}\n\n// ---- page ---------------------------------------------------------------\nexport function renderPage(props: {\n snapshot: Snapshot;\n store: Store;\n loadMs: number;\n samples: number;\n cooldown: boolean;\n}): string {\n const { snapshot: s, store, loadMs, samples, cooldown } = props;\n const { r2, s3 } = s.overall;\n const scale = r2.p99;\n const speedup = r2.p50 / s3.p50; // headline = typical/median improvement\n\n const doc = (\n \n \n \n \n Val Town Blob: R2 → S3\n {/* Tailwind Play CDN — the Twind shim (cdn.twind.style) is 403/CORS-blocked. */}\n \n \n \n

\n \n\n

Val Town · Blob Storage

~{speedup.toFixed(0)}× faster on S3

\n\n

Request latency

reads + writes, pooled across 1KB–1MB

\n \n \n

\n\n

Holds across payload sizes

\n {s.bySize.map((b) => (\n

\n {b.speedup.toFixed(1)}×\n {b.size}\n

\n ))}\n

\n\n \n

\n \n \n );\n return \"\" + doc.toString();\n}\n","label",[162],"fa55118e-6728-44f0-9f55-ff7ece5bf337","types.ts","693d2a58-6128-11f1-bf40-1607ee4eb77e",27,["D",1780697445806],2,"export type Op = \"get\" | \"set\";\n\n/** Summary of one latency distribution, all in milliseconds. */\nexport interface Stat {\n n: number;\n min: number;\n p50: number;\n p90: number;\n p99: number;\n max: number;\n mean: number;\n}\n\n/** A single benchmark run, the unit we persist to blob storage. */\nexport interface Snapshot {\n id: string; // sortable, blob-key-safe, e.g. \"2026-06-05T21-49-03-123Z\"\n createdAt: string; // ISO timestamp\n iterations: number; // measured samples per (size, op)\n sizes: string[];\n /** The whole story: request latency pooled across reads, writes, and every size. */\n overall: { r2: Stat; s3: Stat };\n /** Just enough to show the speedup holds across sizes — p50 ratio per size. */\n bySize: { size: string; speedup: number }[];\n}\n",[174],"bd7e305e-780a-4d82-a9d2-63314b3b419d","store.ts","7e62efb2-6128-11f1-a244-1607ee4eb77e",35,["D",1780740102849],3,"import { type Store, stores } from \"./blob.ts\";\nimport type { Snapshot } from \"./types.ts\";\n\nconst RUNS = \"blob-bench/runs/\"; // one object per run, in BOTH backends\n\n/**\n * Persist a snapshot to BOTH backends under the same key. That's what makes\n * \"load this report from R2 vs S3\" a fair fight: same bytes, same key — the only\n * difference is which store answers.\n */\nexport async function saveSnapshot(snap: Snapshot): Promise {\n const json = JSON.stringify(snap);\n await Promise.all((Object.keys(stores) as Store[]).map((s) => stores[s].set(`${RUNS}${snap.id}.json`, json)));\n}\n\n/**\n * Read one run from one backend `samples` times and return the data plus the\n * MEDIAN read latency. A single read is too noisy to feel (n=1 bounces all over\n * the distribution); the median is stable and absorbs the occasional cold read.\n */\nexport async function loadRun(\n store: Store,\n id: string,\n samples = 5,\n): Promise<{ snapshot: Snapshot | null; ms: number; samples: number }> {\n let snapshot: Snapshot | null = null;\n const times: number[] = [];\n for (let i = 0; i < samples; i++) {\n const t0 = performance.now();\n const r = await stores[store].getJSON(`${RUNS}${id}.json`).catch(() => null);\n times.push(performance.now() - t0);\n if (r) snapshot = r;\n }\n times.sort((a, b) => a - b);\n return { snapshot, ms: times[Math.floor(times.length / 2)], samples };\n}\n\n/** List past run ids (newest first), reading the index from S3. */\nexport async function listRuns(): Promise {\n const items = await stores.s3.list(RUNS).catch(() => []);\n return items\n .map((b) => b.key.slice(RUNS.length).replace(/\\.json$/, \"\"))\n .filter(Boolean)\n .sort()\n .reverse();\n}\n\n// Run ids are ISO timestamps with \":\" and \".\" swapped for \"-\" (blob-key-safe).\nfunction idToDate(id: string): Date {\n const [date, time] = id.split(\"T\");\n const [hh, mm, ss, msz] = time.split(\"-\"); // msz keeps the trailing \"Z\"\n return new Date(`${date}T${hh}:${mm}:${ss}.${msz}`);\n}\n\n/** ms since the most recent run started, or null if there are no runs yet. */\nexport async function msSinceLastRun(): Promise {\n const runs = await listRuns();\n if (!runs.length) return null;\n return Date.now() - idToDate(runs[0]).getTime();\n}\n",[182],"afd6cf8b-4771-47f4-be5b-6c5f770daac4","stats.ts","6e196870-6128-11f1-9ef0-1607ee4eb77e",4,["D",1780696169873],"import type { Stat } from \"./types.ts\";\n\n/** Linear-interpolated percentile (numpy default) over an already-sorted array. */\nfunction percentile(sorted: number[], p: number): number {\n const idx = (sorted.length - 1) * p;\n const lo = Math.floor(idx);\n const hi = Math.ceil(idx);\n return sorted[lo] + (sorted[hi] - sorted[lo]) * (idx - lo);\n}\n\nconst round = (n: number) => Math.round(n * 10) / 10;\n\n/** Reduce a list of latency samples (ms) to a Stat. */\nexport function summarize(samples: number[]): Stat {\n if (samples.length === 0) {\n return { n: 0, min: NaN, p50: NaN, p90: NaN, p99: NaN, max: NaN, mean: NaN };\n }\n const s = [...samples].sort((a, b) => a - b);\n return {\n n: s.length,\n min: round(s[0]),\n p50: round(percentile(s, 0.5)),\n p90: round(percentile(s, 0.9)),\n p99: round(percentile(s, 0.99)),\n max: round(s[s.length - 1]),\n mean: round(s.reduce((a, b) => a + b, 0) / s.length),\n };\n}\n",[190],"11f666be-5fd4-45f6-b4a5-00d6ea2d3383","index.ts",40,["D",1780740141763],5,"http","import { Hono } from \"npm:hono\";\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport type { Store } from \"./blob.ts\";\nimport { runBenchmark } from \"./bench.ts\";\nimport { listRuns, loadRun, msSinceLastRun, saveSnapshot } from \"./store.ts\";\nimport { renderPage } from \"./view.tsx\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err)); // full stack traces in logs\n\nconst RERUN_ITERATIONS = 12;\nconst RATE_LIMIT_MS = 60_000; // at most one benchmark per minute\nconst isStore = (v: string): v is Store => v === \"s3\" || v === \"r2\";\nconst redirect = (c: any, to: string) => c.redirect(to); // Response.redirect is broken on VT\n\n// \"/\" → newest run on S3 (the fast default). Empty state if nothing's been run.\napp.get(\"/\", async (c) => {\n const runs = await listRuns();\n if (runs.length) return redirect(c, `/s3/${runs[0]}`);\n return c.html(\n `\n

No benchmark yet

\n `,\n );\n});\n\n// \"/:store/:id\" → render the run, reading the snapshot from THAT backend so the\n// store you pick is literally how fast this page loads.\napp.get(\"/:store/:id\", async (c) => {\n const store = c.req.param(\"store\");\n const id = c.req.param(\"id\");\n if (!isStore(store)) return redirect(c, \"/\");\n const { snapshot, ms, samples } = await loadRun(store, id);\n if (!snapshot) return redirect(c, \"/\");\n return c.html(renderPage({ snapshot, store, loadMs: ms, samples, cooldown: c.req.query(\"cooldown\") === \"1\" }));\n});\n\n// Re-run: rate-limited, benchmark fresh, persist to both stores, show it on S3.\napp.post(\"/runs\", async (c) => {\n const since = await msSinceLastRun();\n if (since !== null && since < RATE_LIMIT_MS) {\n const runs = await listRuns();\n return redirect(c, `/s3/${runs[0]}?cooldown=1`);\n }\n const snapshot = await runBenchmark(RERUN_ITERATIONS);\n await saveSnapshot(snapshot);\n return redirect(c, `/s3/${snapshot.id}`);\n});\n\napp.get(\"/source\", (c) => redirect(c, parseVal().links.self.val));\n\nexport default app.fetch;\n",[197],"8b55f015-c9a0-4519-be52-1c387f7d6aae","blob.ts","6437edb8-6128-11f1-9ef0-1607ee4eb77e",["D",1780696153308],"// The two storage backends, side by side. This is the ONLY place we import\n// the std blob clients — everything else talks to `stores`.\n//\n// s3 → std/blob/main.ts → /v2/blob → scoped, S3-backed (new)\n// r2 → std/blob/global.ts → /v1/blob → global, R2-backed (old)\nimport { blob as s3 } from \"https://esm.town/v/std/blob/main.ts\";\nimport { blob as r2 } from \"https://esm.town/v/std/blob/global.ts\";\n\nexport const stores = { s3, r2 } as const;\nexport type Store = keyof typeof stores; // \"s3\" | \"r2\"\n\nexport const STORE_META: Record = {\n s3: { label: \"new\", backend: \"S3 (scoped)\", tone: \"emerald\" },\n r2: { label: \"old\", backend: \"R2 (global)\", tone: \"rose\" },\n};\n",[205],"5ab33537-bda2-41bd-8640-2a243aa88d2b","bench.ts","77a58f9a-6128-11f1-9375-1607ee4eb77e",28,["D",1780697455428],"import { type Store, stores } from \"./blob.ts\";\nimport { summarize } from \"./stats.ts\";\nimport type { Op, Snapshot } from \"./types.ts\";\n\nconst SIZES: { label: string; bytes: number }[] = [\n { label: \"1KB\", bytes: 1024 },\n { label: \"100KB\", bytes: 100 * 1024 },\n { label: \"1MB\", bytes: 1024 * 1024 },\n];\nconst STORE_ORDER: Store[] = [\"r2\", \"s3\"];\n\nfunction payload(bytes: number): Uint8Array {\n const a = new Uint8Array(bytes);\n for (let i = 0; i < bytes; i++) a[i] = (i * 31 + 7) & 0xff;\n return a;\n}\n\nasync function timed(fn: () => Promise): Promise {\n const t0 = performance.now();\n await fn();\n return performance.now() - t0;\n}\n\n// One op against one backend. `get` drains the body so we time the full download.\nasync function once(store: Store, op: Op, key: string, body: Uint8Array): Promise {\n const blob = stores[store];\n if (op === \"set\") return timed(() => blob.set(key, body));\n return timed(async () => {\n const res = await blob.get(key);\n await res.arrayBuffer();\n });\n}\n\n/**\n * Run the matrix: every (store, size, op), `iterations` measured samples each.\n * Backends are interleaved per iteration so drift hits both symmetrically; one\n * warm-up per cell is discarded. Probe keys are namespaced by run id so every\n * run reads fresh objects (no cross-run caching). Results are pooled across\n * sizes per op — that's the story we tell.\n */\nexport async function runBenchmark(iterations = 12): Promise {\n const createdAt = new Date().toISOString();\n const id = createdAt.replace(/[:.]/g, \"-\");\n const raw = new Map(); // `${store}|${size}|${op}` -> ms[]\n const at = (store: Store, size: string, op: Op) => {\n const k = `${store}|${size}|${op}`;\n let arr = raw.get(k);\n if (!arr) raw.set(k, arr = []);\n return arr;\n };\n\n for (const size of SIZES) {\n const data = payload(size.bytes);\n const key = (store: Store, i: number) => `blob-bench/_probe/${id}/${store}/${size.label}/${i}`;\n\n for (const store of STORE_ORDER) { // warm-up, discarded\n await once(store, \"set\", key(store, 0), data);\n await once(store, \"get\", key(store, 0), data);\n }\n for (let i = 0; i < iterations; i++) {\n for (const store of STORE_ORDER) {\n at(store, size.label, \"set\").push(await once(store, \"set\", key(store, i), data));\n at(store, size.label, \"get\").push(await once(store, \"get\", key(store, i), data));\n }\n }\n await Promise.allSettled(\n STORE_ORDER.flatMap((store) =>\n Array.from({ length: iterations }, (_, i) => stores[store].delete(key(store, i)))\n ),\n );\n }\n\n // Pool everything — reads, writes, all sizes — into one latency story per store.\n const OPS: Op[] = [\"get\", \"set\"];\n const overallFor = (store: Store) =>\n summarize(SIZES.flatMap((s) => OPS.flatMap((op) => raw.get(`${store}|${s.label}|${op}`) ?? [])));\n const sizeP50 = (store: Store, size: string) =>\n summarize(OPS.flatMap((op) => raw.get(`${store}|${size}|${op}`) ?? [])).p50;\n\n return {\n id,\n createdAt,\n iterations,\n sizes: SIZES.map((s) => s.label),\n overall: { r2: overallFor(\"r2\"), s3: overallFor(\"s3\") },\n bySize: SIZES.map((s) => ({\n size: s.label,\n speedup: sizeP50(\"r2\", s.label) / sizeP50(\"s3\", s.label),\n })),\n };\n}\n",[211],"9bb2b67e-6a16-4ba5-87a4-cca7bd368106","README.md","7d9232b8-6129-11f1-8373-1607ee4eb77e",18,["D",1780696625331],"# blob-bench\n\nA live latency report comparing Val Town's **old blob storage (R2)** with the\n**new scoped blob storage (S3)** — and a dogfood of the new store, because the\nreport itself is served from blob.\n\n**Live:** the `index.ts` HTTP endpoint.\n\n## What it shows\n\n- **Median latency** for `get`/`set` across 1KB / 100KB / 1MB payloads, old vs new.\n- **Full distribution** (p50/p90/p99/max) — where R2's slow tail really shows.\n- **\"Load this report from R2 vs S3\"** — the snapshot is stored in *both* backends\n under the same key, so you can load it from either and feel the difference.\n- **Re-run benchmark** — runs a fresh benchmark and saves it to both stores.\n\n## How it's wired\n\n| file | role |\n|------|------|\n| `blob.ts` | the only place the two std clients are imported: `main.ts` (S3) + `global.ts` (R2) |\n| `types.ts` | `Snapshot` / `Row` / `Stat` |\n| `stats.ts` | percentiles + `summarize()` |\n| `bench.ts` | `runBenchmark()` — times set/get on both stores, interleaved, with warm-ups |\n| `store.ts` | persist a snapshot to both stores; load latest/by-id (timed); list runs |\n| `view.tsx` | server-rendered UI (Hono JSX + Tailwind) |\n| `client.ts` | minimal browser JS: the R2-vs-S3 race + re-run progress |\n| `index.ts` | Hono routes: `/`, `/data`, `POST /runs`, `/source` |\n\n## Method\n\nOld and new requests are interleaved each iteration (so drift hits both equally),\none warm-up per cell is discarded, and percentiles are linear-interpolated.\nSnapshots persist in blob under `blob-bench/runs/.json` plus a `latest.json`\npointer, written to both backends.\n",[218],"pulls","branches",1,"forks","envVars",{"_232":26,"_234":26},"connections",{"_232":26,"_233":26},"count","unfilledCount","emptyCount",{"_33":217,"_13":218,"_62":219,"_43":-5,"_35":36,"_164":220,"_166":79,"_37":265,"_39":26,"_64":21,"_169":222,"_66":24,"_171":-5,"_244":266,"_17":267},{"_33":210,"_13":211,"_62":212,"_43":-5,"_35":36,"_164":213,"_166":79,"_37":262,"_39":178,"_64":65,"_169":215,"_66":24,"_171":-5,"_244":263,"_17":264},{"_33":204,"_13":205,"_62":206,"_43":-5,"_35":36,"_164":178,"_166":79,"_37":259,"_39":26,"_64":65,"_169":208,"_66":24,"_171":-5,"_244":260,"_17":261},{"_33":196,"_13":197,"_62":92,"_43":-5,"_35":36,"_164":198,"_166":79,"_37":256,"_39":200,"_64":201,"_169":202,"_66":24,"_171":-5,"_244":257,"_17":258},{"_33":189,"_13":190,"_62":191,"_43":-5,"_35":36,"_164":192,"_166":79,"_37":253,"_39":26,"_64":65,"_169":194,"_66":24,"_171":-5,"_244":254,"_17":255},{"_33":181,"_13":182,"_62":183,"_43":-5,"_35":36,"_164":184,"_166":79,"_37":250,"_39":186,"_64":65,"_169":187,"_66":24,"_171":-5,"_244":251,"_17":252},{"_33":173,"_13":174,"_62":175,"_43":-5,"_35":36,"_164":176,"_166":79,"_37":247,"_39":178,"_64":65,"_169":179,"_66":24,"_171":-5,"_244":248,"_17":249},{"_33":161,"_13":162,"_62":163,"_43":-5,"_35":36,"_164":165,"_166":79,"_37":243,"_39":168,"_64":65,"_169":170,"_66":24,"_171":-5,"_244":245,"_17":246},["D",1780740135761],"children",[],[162],["D",1780697445806],[],[174],["D",1780740102849],[],[182],["D",1780696169873],[],[190],["D",1780740141763],[],[197],["D",1780696153308],[],[205],["D",1780697455428],[],[211],["D",1780696625331],[],[218],["D",1780696144434],{"_11":12,"_132":128},{"_11":12,"_126":127,"_69":128,"_30":-5,"_129":130,"_131":79},{"_39":117,"_13":16,"_33":36,"_118":81,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":-5,"_124":14,"_125":12},"ctx",{"_52":-5,"_150":305,"_306":307,"_308":309,"_310":24,"_311":24,"_312":24,"_313":79,"_314":-5,"_315":-7,"_316":-7,"_317":26,"_318":24,"_319":24,"_320":-5,"_321":24,"_322":24,"_323":24,"_324":-5},"ENV",{"_276":277,"_278":279,"_280":16,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · client.ts