`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_307":308,"_309":310},"routes/_app.x.$handle.$name",{"_99":98,"_31":44,"_108":89,"_26":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":24,"_123":124,"_125":58,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":24},"version",8,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","benchmark/prompt.ts","latestPath","fileId","34b76610-a235-11f1-bc68-1607ee4eb77e","name","prompt.ts","fileType","script","content","const SYSTEM_PROMPT = `\nYou are reviewing a TypeScript service that coordinates background jobs. Treat every\nmessage before the final request as durable project context. Preserve public API\nbehavior, prefer explicit types, use parameterized database queries, avoid hidden\nglobal state, and explain operational tradeoffs. The service runs on a serverless\nruntime with no writable filesystem. It can call HTTP services and a scoped SQLite\ndatabase. Jobs may be retried, so every write must be idempotent. Timestamps are ISO\n8601 UTC strings. Errors must be recorded without discarding successful work from\nother providers. Readers should be able to distinguish an attempted operation from\na completed one. Never claim that an external request succeeded unless its response\nwas observed. Keep recommendations concise and actionable.\n\nThe architecture has three layers. The HTTP layer is read only and returns normalized\nrecords. The worker layer performs expensive outbound calls and checkpoints each\nattempt. The persistence layer owns schema creation and all SQL. A run contains many\nprovider attempts. Each attempt records latency, time to first token, token counts,\ncache reads, cache writes, cost, a short response preview, provider metadata, and an\nerror when present. The UI aggregates only successful attempts for performance\nfigures while displaying failures separately. A provider can succeed on some attempts\nand fail on others. Missing metrics must remain null instead of silently becoming\nzero. The code should be easy for another engineer to inspect, remix, and operate.\n`.trim();\n\nconst SCENARIOS = [\n {\n user: `We need an idempotent schema for benchmark runs and their individual\nprovider attempts. Runs have a stable text id, model id, status, start/end timestamps,\nconfiguration, and endpoint snapshot. Attempts are unique by run, provider, and\nattempt number. We need to resume after interruption without duplicating work.`,\n assistant: `Use a benchmark_runs table for lifecycle state and a\nbenchmark_measurements table with a composite primary key of\n(run_id, provider, attempt). Store nullable observed metrics as nullable numeric\ncolumns and keep raw provider data as JSON text. Create an index on run start time and\non measurement run_id. Insert measurements with ON CONFLICT so a retry can safely\nreplace the same logical attempt. Resume by reading the composite keys already\npresent and scheduling only missing attempts.`,\n },\n {\n user: `The public dashboard needs recent runs and one selected run with all\nmeasurements. It must never expose the gateway credential or provide a mutation that\nstarts work. How should the API be shaped?`,\n assistant: `Expose GET /api/runs for a bounded list of run summaries and\nGET /api/runs/:id for one run plus its measurements. Use parameterized SQL for the id\nand clamp the list limit server side. Do not define POST, PUT, PATCH, or DELETE routes.\nThe benchmark worker can read the credential from its environment because that value\nnever enters the HTTP response or browser bundle. Return 404 for unknown run ids and\nno-store headers while a run may still be changing.`,\n },\n {\n user: `Provider calls stream text. We want time to first token, total duration,\noutput throughput, usage details, cache tokens, and gateway cost. Some streams fail\nbefore producing text and others fail after partial output.`,\n assistant: `Record a monotonic start time immediately before stream creation.\nSet TTFT only when the first text chunk arrives. Accumulate a bounded preview while\nconsuming the full stream, then await usage and provider metadata. Compute throughput\nonly when output tokens and a positive generation interval are available. Wrap each\nattempt independently so a failure becomes an error measurement with its observed\ntiming and does not stop other providers. Keep missing usage and price values null.`,\n },\n {\n user: `There are many providers and multiple attempts per provider. Cache\nbehavior depends on repeated prefixes, but a completely serial run is slow. What\nconcurrency model preserves the useful signal?`,\n assistant: `Run attempts sequentially within each provider so attempt two\nfollows attempt one with the identical prefix. Process a small number of different\nproviders concurrently because their caches are independent. Use a shared provider\nqueue with a configurable worker count. Checkpoint every attempt immediately. This\nshortens wall clock time while preserving the within-provider warmup sequence that\nthe benchmark is intended to observe.`,\n },\n {\n user: `The endpoint catalogue includes privacy flags, advertised caching,\npricing, recent latency, and throughput. These fields can be absent or change over\ntime. How should we preserve and display them?`,\n assistant: `Capture the full endpoint records at the start of each benchmark\nand store that snapshot with the run. Copy the provider record onto each measurement\nas well so raw exports remain understandable. In the UI render absent booleans as\nunknown rather than false, label catalogue values as Vercel metadata, and keep\nobserved metrics separate from advertised metrics. Historical runs should use their\nown captured endpoint snapshot rather than today's catalogue.`,\n },\n {\n user: `The result page needs to compare providers without suggesting false\nprecision. Four attempts is a small sample and failures are part of the outcome.`,\n assistant: `Show successful and failed attempt counts first. Use medians for\nTTFT and total duration, an average for output tokens per second, total observed cost,\nand the latest successful cache-read count. Keep raw attempts expandable or\ndownloadable. Sort providers with successful results before providers with none, but\nnever hide zero-success providers. State the sample size and timestamp near the\ncomparison.`,\n },\n {\n user: `Another engineer should be able to change the model or scope and rerun\nthis from the code view. They should not need to understand the UI implementation.`,\n assistant: `Keep a small benchmark/config.ts containing model id, run count,\noutput cap, timeout, concurrency, and an optional provider allowlist. Put the fixed\nconversation in a separate prompt module. Make benchmark/run.ts the obvious manual\nentrypoint and document: edit config, open run.ts, click Run, then follow the emitted\nrun id on the dashboard. Keep a separate smoke entrypoint for one cheap validation\nattempt.`,\n },\n {\n user: `We need a handoff checklist for operating the benchmark after the\noriginal author leaves. Include recovery from partial runs and provider failures.`,\n assistant: `Document the credential name without its value, the two manual\nentrypoints, the database tables, and the read-only routes. Explain that running the\nsame configuration resumes the latest running record and skips persisted attempts.\nA completed run always includes every scheduled attempt, whether successful or\nfailed. For a provider outage, preserve its error rows and start a new benchmark later\nrather than rewriting the historical run. Verify the page, API, and logs after edits.`,\n },\n];\n\nexport function buildMessages(attempt: number) {\n const messages: Array<{ role: \"system\" | \"user\" | \"assistant\"; content: string }> = [\n { role: \"system\", content: SYSTEM_PROMPT },\n ];\n for (const scenario of SCENARIOS) {\n messages.push(\n { role: \"user\", content: scenario.user },\n { role: \"assistant\", content: scenario.assistant },\n );\n }\n messages.push({\n role: \"user\",\n content:\n `Benchmark sample ${attempt}: In exactly two sentences, name the most\nimportant invariant in this architecture and one metric that would reveal a broken\nimplementation. Do not use a heading or bullet list.`,\n });\n return messages;\n}\n","createdAt",["D",1787848482648],"branchVersion","branchId","24cb14b4-1851-4548-adc6-43a574860a3d","id","d055324c-28f9-4529-80dd-e9bbfbdbeb65","glm53-flash-benchmark",["D",1787848294548],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Run and compare AI Gateway providers","imageUrl","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","01a04410-0100-7214-ba2d-a172e514af90","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","ba7bb5fb-1abb-4ffb-8f3d-7c244782e5f7","tursoName","d055324c28f9452980dde9bbfbdbeb65","tursoHostname","d055324c28f9452980dde9bbfbdbeb65-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789500119686],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_107":103},"org",{"_99":98,"_100":101,"_102":103,"_18":-5,"_104":105,"_106":58},"branch",{"_13":88,"_31":89,"_42":41,"_90":43,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":44,"_97":98},"isOwned",338,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","valdottown","handle","displayName","Val Town ","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJyWnQ5cFE0c3pleVRCSEVTWmxzaXJsTUlGciJ9","tier","business","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":302,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":303,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":304,"_83":305,"_85":306,"_87":24},"tree",[194,196,199,206,208,209,210],"files",[194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210],"counts",{"_184":62,"_185":181,"_186":140,"_187":188,"_189":190},"contents",[130,131,132,133,134,135,136],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":178,"_31":179,"_29":180,"_139":-5,"_40":41,"_39":181,"_141":58,"_37":182,"_13":62,"_33":165,"_35":-5,"_23":24,"_145":-5,"_26":183},{"_42":172,"_31":173,"_29":174,"_139":-5,"_40":41,"_39":175,"_141":58,"_37":176,"_13":62,"_33":165,"_35":-5,"_23":24,"_145":-5,"_26":177},{"_42":167,"_31":168,"_29":169,"_139":-5,"_40":41,"_39":140,"_141":58,"_37":170,"_13":62,"_33":165,"_35":-5,"_23":24,"_145":-5,"_26":171},{"_42":160,"_31":161,"_29":162,"_139":-5,"_40":41,"_39":163,"_141":58,"_37":164,"_13":62,"_33":165,"_35":-5,"_23":24,"_145":-5,"_26":166},{"_42":154,"_31":155,"_29":156,"_139":-5,"_40":41,"_39":140,"_141":24,"_37":157,"_13":62,"_33":20,"_35":158,"_23":24,"_145":-5,"_26":159},{"_42":148,"_31":149,"_29":150,"_139":-5,"_40":41,"_39":140,"_141":24,"_37":151,"_13":62,"_33":20,"_35":152,"_23":24,"_145":-5,"_26":153},{"_42":137,"_31":138,"_29":56,"_139":-5,"_40":41,"_39":140,"_141":24,"_37":142,"_13":62,"_33":143,"_35":144,"_23":24,"_145":146,"_26":147},"2c67eaf4-95f6-413b-8caa-c2010abdb6d6","index.ts","parentId",1,"latest",["D",1787848294548],"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","label","glm53flash",[138],"56bb66e8-f57e-439e-8df0-aebce20af1ed","README.md","01a04410-0100-7214-ba2d-9ca990fb87d3",["D",1787848294548],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"root.tsx\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n root.tsx ← HTML shell (stamps immutable asset URLs)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[149],"6456befa-e5ac-4def-a9e9-75078f5981eb","CHANGELOG.md","01a04410-0100-7214-ba2d-9a1f957737cb",["D",1787848294548],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the ``, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter\n

Diff · v8