[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_271":272,"_273":274},"routes/_app.x.$handle.$name",{"_106":105,"_32":46,"_114":92,"_27":115,"_13":14,"_116":-5,"_11":117,"_118":119,"_120":121,"_122":123,"_124":125,"_20":-5,"_126":127,"_128":129,"_130":25,"_131":132,"_133":61,"_134":-5,"_135":-5,"_136":137},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":25},"version",5,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/Counter.tsx","latestPath","fileId","019f9097-6104-7209-9669-e00361e7cc88","name","Counter.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nfunction GatewayLayer({ level, total }: { level: number; total: number }) {\n const label = level === 1\n ? \"Your app\"\n : level === total\n ? \"An AI model, eventually\"\n : \"Gateway \".repeat(level - 1).trim();\n\n return (\n

\n {label}\n layer {level}\n

\n {level < total\n ? \n :

hello, world

}\n

\n );\n}\n\nexport function GatewayCounter() {\n const [layers, setLayers] = useState(3);\n const maxed = layers >= 7;\n\n return (\n

\n \n

\n setLayers((value) => Math.min(7, value + 1))}\n disabled={maxed}\n className=\"rounded-full bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-300 text-white font-bold px-5 py-2 cursor-pointer transition-colors\"\n >\n {maxed ? \"Architecture complete\" : \"Add strategic gateway\"}\n \n setLayers(3)}\n className=\"text-sm text-gray-500 hover:text-gray-900 underline cursor-pointer\"\n >\n Roll back to merely absurd\n \n

\n {maxed && (\n

\n You have achieved enterprise architecture. Nobody remembers where the model is.\n

\n )}\n

\n );\n}\n","createdAt",["D",1784837484147],"branchVersion","branchId","015d9b80-63a8-4d3e-9444-af590b456c64","id","20dae829-0549-4444-9118-e29602b41c85","gateway-gateway",["D",1784837267473],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","The AI gateway for your AI gateways. Finally.","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789581599&sig=be8c9241dcaf80ae72eff5d4763f3300ec6426a8bddc365a5efaae5f85e4dee1","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","019f9097-6104-7209-9669-fc1af7725c68","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","20dae829054944449118e29602b41c85","tursoHostname","20dae829054944449118e29602b41c85-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789560070146],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_106":105,"_113":109},"org",{"_106":105,"_107":-5,"_108":109,"_18":57,"_110":111,"_112":25},"branch",{"_13":91,"_32":92,"_44":43,"_93":45,"_94":95,"_96":97,"_98":51,"_99":100,"_101":102,"_103":46,"_104":105},"isOwned",19,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":266,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":267,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":268,"_86":269,"_88":270,"_90":25},"tree",[201,208,209,210,211],"files",[201,202,203,204,205,206,207,208,209,210,211],"counts",{"_191":65,"_192":160,"_193":65,"_194":195,"_196":197},"contents",[149,150,151,152,153],"upstreamProject",{"_44":100,"_32":145,"_53":146,"_55":56,"_50":51,"_84":147},"upstreamBranch",{"_44":95,"_39":138,"_139":140,"_32":92,"_93":100,"_13":141,"_94":-5,"_96":-5,"_142":143,"_48":-5,"_90":25,"_50":51,"_104":144,"_66":102,"_103":145},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server",{"_106":144,"_113":148},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789581599&sig=bed85510764f48a9de82762af4b4ce99c525d0ab75e5b57f327c71a53e183d4a",{"_44":185,"_32":186,"_30":187,"_156":-5,"_42":43,"_41":160,"_158":61,"_39":188,"_13":65,"_34":189,"_36":-5,"_24":25,"_163":-5,"_27":190},{"_44":178,"_32":179,"_30":180,"_156":-5,"_42":43,"_41":181,"_158":25,"_39":182,"_13":65,"_34":20,"_36":183,"_24":25,"_163":-5,"_27":184},{"_44":172,"_32":173,"_30":174,"_156":-5,"_42":43,"_41":160,"_158":25,"_39":175,"_13":65,"_34":20,"_36":176,"_24":25,"_163":-5,"_27":177},{"_44":165,"_32":166,"_30":167,"_156":-5,"_42":43,"_41":168,"_158":25,"_39":169,"_13":65,"_34":35,"_36":170,"_24":25,"_163":-5,"_27":171},{"_44":154,"_32":155,"_30":59,"_156":-5,"_42":43,"_41":157,"_158":25,"_39":159,"_13":160,"_34":161,"_36":162,"_24":25,"_163":-5,"_27":164},"261c5697-2ba6-4a08-8fe8-45376a7ed73c","index.ts","parentId",4,"latest",["D",1784837398453],1,"http","import { hotReload, parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { isConfigured, proxyGatewayRequest, publicGateways, readGatewayConfig } from \"./gateway.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.get(\"/health\", (c) => {\n const status = isConfigured();\n return c.json({\n status: status.valid ? \"needlessly operational\" : \"strategically degraded\",\n service: \"gateway-gateway\",\n ...status,\n }, status.valid ? 200 : 500);\n});\n\napp.get(\"/api/status\", (c) => c.json(isConfigured()));\n\napp.get(\"/v1/gateways\", (c) => {\n try {\n return c.json({\n object: \"list\",\n data: publicGateways(),\n disclaimer: \"A list of gateways behind the gateway. Please remain calm.\",\n });\n } catch (error) {\n return c.json({\n error: {\n message: error instanceof Error ? error.message : String(error),\n type: \"gateway_gateway_config_error\",\n },\n }, 500);\n }\n});\n\napp.get(\"/v1/models\", (c) => {\n try {\n const config = readGatewayConfig();\n const models = [\n {\n id: \"gateway-gateway/auto\",\n object: \"model\",\n owned_by: \"middle-management\",\n },\n ...config.gateways\n .filter((gateway) => gateway.enabled !== false)\n .map((gateway) => ({\n id: gateway.name + \"::\" + (gateway.defaultModel || \"your-model-here\"),\n object: \"model\",\n owned_by: gateway.name,\n })),\n ];\n return c.json({ object: \"list\", data: models });\n } catch (error) {\n return c.json({\n error: {\n message: error instanceof Error ? error.message : String(error),\n type: \"gateway_gateway_config_error\",\n },\n }, 500);\n }\n});\n\napp.all(\"/v1/*\", (c) => proxyGatewayRequest(c.req.raw));\n\napp.notFound((c) => c.json({\n error: {\n message: \"This route has not yet passed through enough gateways.\",\n type: \"gateway_gateway_not_found\",\n },\n}, 404));\n\napp.onError((err) => Promise.reject(err));\n\nexport default hotReload(app.fetch);\n","label",[155],"4bc5b232-63b7-42a0-a35f-c2260d115d3c","gateway.ts","7101c378-86d2-11f1-b3ff-1607ee4eb77e",3,["D",1784837382219],"export type Gateway = {\n name: string;\n baseUrl: string;\n apiKeyEnv?: string;\n authHeader?: string;\n authScheme?: string;\n defaultModel?: string;\n extraHeaders?: Record;\n priority?: number;\n timeoutMs?: number;\n enabled?: boolean;\n};\n\nexport type GatewayConfig = {\n gateways: Gateway[];\n strategy: \"cascade\" | \"random\" | \"round-robin\";\n defaultGateway?: string;\n};\n\nlet roundRobinCursor = 0;\n\nconst RETRYABLE = new Set([408, 409, 425, 429]);\n\nexport function readGatewayConfig(): GatewayConfig {\n const raw = Deno.env.get(\"GATEWAY_GATEWAY_CONFIG\");\n if (!raw) return { gateways: [], strategy: \"cascade\" };\n\n let parsed: unknown;\n try {\n parsed = JSON.parse(raw);\n } catch {\n throw new Error(\"GATEWAY_GATEWAY_CONFIG is not valid JSON. The gateways have unionized.\");\n }\n\n const document = Array.isArray(parsed) ? { gateways: parsed } : parsed as Record;\n if (!document || !Array.isArray(document.gateways)) {\n throw new Error(\"GATEWAY_GATEWAY_CONFIG needs a gateways array.\");\n }\n\n const seen = new Set();\n const gateways = document.gateways.map((item, index) => {\n const gateway = item as Gateway;\n if (!gateway || typeof gateway.name !== \"string\" || !/^[a-z0-9_-]+$/i.test(gateway.name)) {\n throw new Error(\"Gateway #\" + (index + 1) + \" needs an alphanumeric name.\");\n }\n if (seen.has(gateway.name)) throw new Error(\"Two gateways are named \" + gateway.name + \". This is too much abstraction.\");\n seen.add(gateway.name);\n if (typeof gateway.baseUrl !== \"string\") throw new Error(gateway.name + \" needs a baseUrl.\");\n const url = new URL(gateway.baseUrl);\n if (![\"https:\", \"http:\"].includes(url.protocol)) throw new Error(gateway.name + \" has an unsupported URL scheme.\");\n return { ...gateway, baseUrl: gateway.baseUrl.replace(/\\/+$/, \"\") };\n });\n\n const strategy = String(document.strategy || \"cascade\");\n if (![\"cascade\", \"random\", \"round-robin\"].includes(strategy)) {\n throw new Error(\"Unknown strategy: \" + strategy);\n }\n\n return {\n gateways,\n strategy: strategy as GatewayConfig[\"strategy\"],\n defaultGateway: typeof document.defaultGateway === \"string\" ? document.defaultGateway : undefined,\n };\n}\n\nexport function isConfigured() {\n try {\n const config = readGatewayConfig();\n return {\n valid: true,\n gatewayCount: config.gateways.filter((gateway) => gateway.enabled !== false).length,\n inboundAuth: Boolean(Deno.env.get(\"GATEWAY_GATEWAY_API_KEY\")),\n strategy: config.strategy,\n };\n } catch (error) {\n return {\n valid: false,\n gatewayCount: 0,\n inboundAuth: Boolean(Deno.env.get(\"GATEWAY_GATEWAY_API_KEY\")),\n strategy: \"none\",\n error: error instanceof Error ? error.message : String(error),\n };\n }\n}\n\nexport function publicGateways() {\n return readGatewayConfig().gateways\n .filter((gateway) => gateway.enabled !== false)\n .map((gateway) => ({\n name: gateway.name,\n baseUrl: gateway.baseUrl,\n defaultModel: gateway.defaultModel || null,\n priority: gateway.priority ?? 100,\n credentialsPresent: gateway.apiKeyEnv ? Boolean(Deno.env.get(gateway.apiKeyEnv)) : true,\n }));\n}\n\nfunction constantTimeEqual(a: string, b: string) {\n const length = Math.max(a.length, b.length);\n let mismatch = a.length ^ b.length;\n for (let i = 0; i < length; i++) {\n mismatch |= (a.charCodeAt(i) || 0) ^ (b.charCodeAt(i) || 0);\n }\n return mismatch === 0;\n}\n\nfunction authorize(request: Request) {\n const expected = Deno.env.get(\"GATEWAY_GATEWAY_API_KEY\");\n if (!expected) return { ok: false, status: 503, message: \"Set GATEWAY_GATEWAY_API_KEY before inviting the internet to spend your money.\" };\n const bearer = request.headers.get(\"authorization\")?.replace(/^Bearer\\s+/i, \"\") || \"\";\n const apiKey = request.headers.get(\"x-api-key\") || bearer;\n if (!constantTimeEqual(apiKey, expected)) return { ok: false, status: 401, message: \"Invalid gateway-gateway credential. Please escalate to the Gateway Governance Council.\" };\n return { ok: true, status: 200, message: \"authorized\" };\n}\n\nfunction resolveHeaders(gateway: Gateway) {\n const headers = new Headers();\n if (gateway.apiKeyEnv) {\n const secret = Deno.env.get(gateway.apiKeyEnv);\n if (!secret) throw new Error(\"Missing credential \" + gateway.apiKeyEnv + \" for \" + gateway.name + \".\");\n headers.set(\n gateway.authHeader || \"authorization\",\n (gateway.authScheme ?? \"Bearer \") + secret,\n );\n }\n for (const [key, configuredValue] of Object.entries(gateway.extraHeaders || {})) {\n let value = configuredValue;\n if (value.startsWith(\"$\")) {\n const envName = value.slice(1);\n const secret = Deno.env.get(envName);\n if (!secret) throw new Error(\"Missing header credential \" + envName + \" for \" + gateway.name + \".\");\n value = secret;\n }\n headers.set(key, value);\n }\n return headers;\n}\n\nfunction orderedGateways(config: GatewayConfig, requested: string[]) {\n const enabled = config.gateways\n .filter((gateway) => gateway.enabled !== false)\n .sort((a, b) => (a.priority ?? 100) - (b.priority ?? 100));\n\n if (requested.length) {\n return requested.map((name) => {\n const gateway = enabled.find((candidate) => candidate.name === name);\n if (!gateway) throw new Error(\"Unknown gateway \" + name + \". The gateway gateway cannot gateway what it cannot see.\");\n return gateway;\n });\n }\n\n if (config.defaultGateway) {\n const index = enabled.findIndex((gateway) => gateway.name === config.defaultGateway);\n if (index >= 0) enabled.unshift(...enabled.splice(index, 1));\n }\n\n if (config.strategy === \"random\") return enabled.sort(() => Math.random() - 0.5);\n if (config.strategy === \"round-robin\" && enabled.length) {\n const offset = roundRobinCursor++ % enabled.length;\n return enabled.slice(offset).concat(enabled.slice(0, offset));\n }\n return enabled;\n}\n\nfunction responseHeaders(upstream: Headers, selected: string, attempts: string[]) {\n const headers = new Headers(upstream);\n for (const header of [\"connection\", \"content-encoding\", \"content-length\", \"transfer-encoding\", \"set-cookie\"]) {\n headers.delete(header);\n }\n headers.set(\"x-gateway-gateway-selected\", selected);\n headers.set(\"x-gateway-gateway-attempts\", attempts.join(\",\"));\n headers.set(\"x-gateway-gateway-governance\", \"ISO-42069-pending\");\n return headers;\n}\n\nfunction outgoingBody(original: Record | null, gateway: Gateway, explicitModel?: string) {\n if (!original) return null;\n const body = { ...original };\n const current = explicitModel || (typeof body.model === \"string\" ? body.model : \"\");\n if (current === \"auto\" || current === \"gateway-gateway/auto\") {\n if (!gateway.defaultModel) throw new Error(gateway.name + \" needs defaultModel to participate in auto.\");\n body.model = gateway.defaultModel;\n } else if (explicitModel) {\n body.model = explicitModel;\n }\n return JSON.stringify(body);\n}\n\nexport async function proxyGatewayRequest(request: Request): Promise {\n const auth = authorize(request);\n if (!auth.ok) {\n return Response.json({ error: { message: auth.message, type: \"gateway_gateway_error\" } }, {\n status: auth.status,\n headers: auth.status === 401 ? { \"www-authenticate\": \"Bearer\" } : undefined,\n });\n }\n if (request.method !== \"POST\") {\n return Response.json({ error: { message: \"Only POST crosses the ceremonial gateway.\", type: \"gateway_gateway_error\" } }, { status: 405 });\n }\n\n let config: GatewayConfig;\n try {\n config = readGatewayConfig();\n } catch (error) {\n return Response.json({ error: { message: error instanceof Error ? error.message : String(error), type: \"gateway_gateway_config_error\" } }, { status: 500 });\n }\n\n if (!config.gateways.some((gateway) => gateway.enabled !== false)) {\n return Response.json({\n error: {\n message: \"Zero downstream gateways configured. We have successfully centralized nothing.\",\n type: \"gateway_gateway_config_error\",\n },\n }, { status: 503 });\n }\n\n const incomingUrl = new URL(request.url);\n const rawBody = await request.text();\n let jsonBody: Record | null = null;\n if (rawBody) {\n try {\n jsonBody = JSON.parse(rawBody);\n } catch {\n return Response.json({ error: { message: \"The gateway gateway currently accepts JSON, like a serious enterprise product.\", type: \"invalid_request_error\" } }, { status: 400 });\n }\n }\n\n const requestedHeader = request.headers.get(\"x-gateway-gateway\") || \"\";\n const requested = requestedHeader.split(\",\").map((value) => value.trim()).filter(Boolean);\n let explicitModel: string | undefined;\n const model = typeof jsonBody?.model === \"string\" ? jsonBody.model : \"\";\n const prefixed = /^([a-z0-9_-]+)::(.+)$/i.exec(model);\n if (prefixed) {\n if (!requested.length) requested.push(prefixed[1]);\n explicitModel = prefixed[2];\n }\n\n let gateways: Gateway[];\n try {\n gateways = orderedGateways(config, requested);\n } catch (error) {\n return Response.json({ error: { message: error instanceof Error ? error.message : String(error), type: \"gateway_gateway_routing_error\" } }, { status: 400 });\n }\n\n const attempts: string[] = [];\n let lastFailure: { status: number; text: string; headers: Headers; gateway: string } | undefined;\n\n for (const gateway of gateways) {\n attempts.push(gateway.name);\n try {\n const targetPath = incomingUrl.pathname.replace(/^\\/v1(?=\\/|$)/, \"\");\n const target = new URL(gateway.baseUrl + targetPath + incomingUrl.search);\n const headers = resolveHeaders(gateway);\n headers.set(\"content-type\", request.headers.get(\"content-type\") || \"application/json\");\n headers.set(\"accept\", request.headers.get(\"accept\") || \"application/json\");\n for (const name of [\"openai-beta\", \"openai-organization\", \"openai-project\", \"idempotency-key\"]) {\n const value = request.headers.get(name);\n if (value) headers.set(name, value);\n }\n\n const upstream = await fetch(target, {\n method: \"POST\",\n headers,\n body: outgoingBody(jsonBody, gateway, explicitModel) ?? rawBody,\n signal: AbortSignal.timeout(gateway.timeoutMs ?? 45_000),\n });\n\n if (upstream.ok || (!RETRYABLE.has(upstream.status) && upstream.status < 500)) {\n return new Response(upstream.body, {\n status: upstream.status,\n headers: responseHeaders(upstream.headers, gateway.name, attempts),\n });\n }\n\n lastFailure = {\n status: upstream.status,\n text: await upstream.text(),\n headers: upstream.headers,\n gateway: gateway.name,\n };\n } catch (error) {\n lastFailure = {\n status: 502,\n text: JSON.stringify({\n error: {\n message: gateway.name + \" failed: \" + (error instanceof Error ? error.message : String(error)),\n type: \"gateway_gateway_upstream_error\",\n },\n }),\n headers: new Headers({ \"content-type\": \"application/json\" }),\n gateway: gateway.name,\n };\n }\n }\n\n if (lastFailure) {\n return new Response(lastFailure.text, {\n status: lastFailure.status,\n headers: responseHeaders(lastFailure.headers, lastFailure.gateway, attempts),\n });\n }\n\n return Response.json({ error: { message: \"The routing committee adjourned without selecting a gateway.\", type: \"gateway_gateway_error\" } }, { status: 503 });\n}\n",[166],"d961787f-835a-4652-a305-e6473d734eca","README.md","019f9097-6104-7209-9669-f88678349d36",["D",1784837267473],"# 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[\"index.html\"]\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 index.html ← HTML shell (loads Twind + React)\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/index.html`** loads Twind and the 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",[173],"a075196f-eeaf-4013-bf03-90bc5ff7aa85","AGENTS.md","3528f1d2-86d2-11f1-9ba8-1607ee4eb77e",2,["D",1784837281810],"# Gateway Gateway agent notes\n\n## Intent\n\nA functional joke: an OpenAI-compatible meta-gateway that routes requests through configurable AI gateways. Keep the humor grandiose and the implementation small, safe, and remixable.\n\n## File map\n\n- `AGENTS.md` — project intent and file map\n- `README.md` — setup, configuration, and API usage\n- `index.ts` — Hono HTTP entrypoint and API routes\n- `frontend/index.html` — HTML shell\n- `frontend/index.tsx` — React entrypoint\n- `frontend/favicon.svg` — recursive gateway favicon\n- `frontend/components/App.tsx` — landing page\n- `frontend/components/Counter.tsx` — unused starter component (safe to remove)\n",[179],"b2385c82-3050-45bc-b539-241fe8b3b362","frontend","019f9097-6104-7209-9669-f517a1358763",["D",1784837267473],"directory",[186],"pulls","branches","forks","envVars",{"_198":65,"_200":65},"connections",{"_198":65,"_199":65},"count","unfilledCount","emptyCount",{"_44":185,"_32":186,"_30":187,"_156":-5,"_42":43,"_41":160,"_158":61,"_39":263,"_13":65,"_34":189,"_36":-5,"_24":25,"_163":-5,"_213":264,"_27":265},{"_44":259,"_32":251,"_30":247,"_156":187,"_42":43,"_41":160,"_158":61,"_39":260,"_13":65,"_34":189,"_36":-5,"_24":25,"_163":-5,"_213":261,"_27":262},{"_44":252,"_32":253,"_30":254,"_156":247,"_42":43,"_41":160,"_158":25,"_39":255,"_13":65,"_34":35,"_36":256,"_24":25,"_163":-5,"_213":257,"_27":258},{"_44":246,"_32":33,"_30":31,"_156":247,"_42":43,"_41":14,"_158":61,"_39":248,"_13":160,"_34":35,"_36":38,"_24":25,"_163":-5,"_213":249,"_27":250},{"_44":239,"_32":240,"_30":241,"_156":187,"_42":43,"_41":160,"_158":25,"_39":242,"_13":65,"_34":20,"_36":243,"_24":25,"_163":-5,"_213":244,"_27":245},{"_44":232,"_32":233,"_30":234,"_156":187,"_42":43,"_41":160,"_158":25,"_39":235,"_13":65,"_34":20,"_36":236,"_24":25,"_163":-5,"_213":237,"_27":238},{"_44":225,"_32":226,"_30":227,"_156":187,"_42":43,"_41":160,"_158":61,"_39":228,"_13":65,"_34":35,"_36":229,"_24":25,"_163":-5,"_213":230,"_27":231},{"_44":178,"_32":179,"_30":180,"_156":-5,"_42":43,"_41":181,"_158":25,"_39":222,"_13":65,"_34":20,"_36":183,"_24":25,"_163":-5,"_213":223,"_27":224},{"_44":172,"_32":173,"_30":174,"_156":-5,"_42":43,"_41":160,"_158":25,"_39":219,"_13":65,"_34":20,"_36":176,"_24":25,"_163":-5,"_213":220,"_27":221},{"_44":165,"_32":166,"_30":167,"_156":-5,"_42":43,"_41":168,"_158":25,"_39":216,"_13":65,"_34":35,"_36":170,"_24":25,"_163":-5,"_213":217,"_27":218},{"_44":154,"_32":155,"_30":59,"_156":-5,"_42":43,"_41":157,"_158":25,"_39":212,"_13":160,"_34":161,"_36":162,"_24":25,"_163":-5,"_213":214,"_27":215},["D",1784837398453],"children",[],[155],["D",1784837382219],[],[166],["D",1784837267473],[],[173],["D",1784837281810],[],[179],"f0a7eb1d-046f-4678-9708-f9442f6b3849","index.tsx","019f9097-6104-7209-9669-f29c9bad81be",["D",1784837267473],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[186,226],"e9ddc18a-1665-485c-8c92-0f66a5690f50","index.html","019f9097-6104-7209-9669-eca8b93dcaa7",["D",1784837267473],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[186,233],"88e4af65-e9a8-441c-b295-80ce36332f24","favicon.svg","019f9097-6104-7209-9669-ea268d263ead",["D",1784837267473],"\n",[],[186,240],"fcd5a6b3-5f24-41a1-8422-de9b53f1bf69","019f9097-6104-7209-9669-e4be2cf49488",["D",1784837484147],[],[186,251,33],"components","85f173c6-d91e-4dd2-ab84-7b0bebdf7732","App.tsx","019f9097-6104-7209-9669-dc888b5c9369",["D",1784837267473],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n return (\n

React + Hono Starter

\n \n

\n View source\n

\n );\n}\n",[],[186,251,253],"854ecc6d-048a-40d9-92e0-8ef5371ca096",["D",1784837267473],[203,204],[186,251],["D",1784837267473],[202,205,206,207],[186],["D",1784837267473],["D",1789560070146],{"_106":105,"_113":109},{"_106":105,"_107":-5,"_108":109,"_18":57,"_110":111,"_112":25},{"_13":91,"_32":92,"_44":43,"_93":45,"_94":95,"_96":97,"_98":51,"_99":100,"_101":102,"_103":46,"_104":105},"ctx",{"_84":-5,"_135":304,"_305":306,"_307":308,"_309":25,"_310":25,"_311":25,"_312":61,"_313":-5,"_314":-7,"_315":-7,"_316":65,"_317":25,"_318":25,"_319":-5,"_320":25,"_321":25,"_322":25,"_323":-5},"ENV",{"_275":276,"_277":278,"_279":92,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303},"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"]

Diff · v5