[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_292":293,"_294":295},"routes/_app.x.$handle.$name",{"_111":110,"_38":56,"_119":101,"_33":120,"_13":14,"_121":-5,"_11":122,"_123":124,"_125":126,"_127":128,"_129":130,"_27":-5,"_131":-5,"_132":-5,"_133":31,"_134":135,"_136":70,"_137":-5,"_138":-5,"_139":140},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_54":55,"_38":56,"_42":57,"_58":-5,"_59":31,"_60":61,"_62":61,"_63":64,"_65":-5,"_19":66,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":74,"_75":76,"_77":78,"_79":80,"_81":82,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":94,"_95":96,"_97":98,"_99":31},"version",7,"changes",[25,26],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","ceb911ae-f952-4618-8fdb-797a2fee335b","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_27":47,"_29":-7,"_30":31,"_32":31,"_33":48,"_35":48},{"_27":28,"_29":-7,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":40,"_41":-5,"_42":43,"_44":14,"_45":46,"_30":31},"previous","deleted",false,"deletedHere","path","database","latestPath","fileId","c75580aa-bb44-4379-89e4-a524a689d561","name","fileType","directory","content","createdAt",["D",1776368189833],"branchVersion","branchId","de2690be-39ca-11f1-82c2-42b51c65c3df",{"_36":49,"_38":50,"_39":51,"_41":52,"_42":53,"_44":14,"_45":46,"_30":31},"database/db.ts","90f7f2e6-39cb-11f1-843d-42b51c65c3df","db.ts","script","import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport type { Message } from \"../shared/types.ts\";\n\n// Bump this when making breaking schema changes (safer than migrating in place).\nconst TABLE_NAME = \"messages_v1\";\n\nlet initialized = false;\nasync function ensureSchema() {\n if (initialized) return;\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n text TEXT NOT NULL,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )\n `);\n initialized = true;\n}\n\nfunction rowToMessage(row: Record): Message {\n // Normalize created_at (\"YYYY-MM-DD HH:MM:SS\" from sqlite) into ISO UTC.\n const createdAtRaw = String(row.created_at);\n const createdAt = createdAtRaw.includes(\"T\")\n ? createdAtRaw\n : new Date(createdAtRaw.replace(\" \", \"T\") + \"Z\").toISOString();\n return {\n id: Number(row.id),\n text: String(row.text),\n createdAt,\n };\n}\n\nexport async function listRecentMessages(limit = 100): Promise {\n await ensureSchema();\n // Fetch the most recent N, then return them in chronological order (oldest first).\n const res = await sqlite.execute({\n sql:\n `SELECT id, text, created_at FROM ${TABLE_NAME} ORDER BY id DESC LIMIT ?`,\n args: [limit],\n });\n const rows = (res.rows as Record[]).map(rowToMessage);\n return rows.reverse();\n}\n\nexport async function listMessagesSince(sinceId: number): Promise {\n await ensureSchema();\n const res = await sqlite.execute({\n sql:\n `SELECT id, text, created_at FROM ${TABLE_NAME} WHERE id > ? ORDER BY id ASC LIMIT 500`,\n args: [sinceId],\n });\n return (res.rows as Record[]).map(rowToMessage);\n}\n\nexport async function insertMessage(text: string): Promise {\n await ensureSchema();\n const res = await sqlite.execute({\n sql: `INSERT INTO ${TABLE_NAME} (text) VALUES (?) RETURNING id, text, created_at`,\n args: [text],\n });\n const row = (res.rows as Record[])[0];\n return rowToMessage(row);\n}\n",["D",1776368189833],"id","de221b10-39ca-11f1-82c2-42b51c65c3df","beyond-text-3",["D",1776367889779],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","019d97c6-edc7-722c-8966-3d4dbbbae3b1","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","de221b1039ca11f182c242b51c65c3df","tursoHostname","de221b1039ca11f182c242b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789510872811],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_111":110,"_118":114},"org",{"_111":110,"_112":-5,"_113":114,"_19":66,"_115":116,"_117":31},"branch",{"_13":100,"_38":101,"_54":46,"_102":55,"_103":-5,"_104":-5,"_105":-5,"_106":-5,"_107":-5,"_108":56,"_109":110},"isOwned",21,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_54":55,"_38":56,"_42":287,"_58":-5,"_59":31,"_60":61,"_62":61,"_63":64,"_65":-5,"_19":66,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":74,"_75":76,"_77":78,"_79":80,"_81":288,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":289,"_95":290,"_97":291,"_99":31},"tree",[187,189,198,200,201],"files",[187,188,189,190,191,192,193,194,195,196,197,198,199,200,201],"counts",{"_176":74,"_177":178,"_179":74,"_180":181,"_182":183},"contents",[141,142,143,144,145],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_54":173,"_38":34,"_36":37,"_148":-5,"_45":46,"_44":14,"_150":70,"_42":174,"_13":74,"_39":40,"_41":-5,"_30":31,"_154":-5,"_33":175},{"_54":168,"_38":169,"_36":170,"_148":-5,"_45":46,"_44":149,"_150":70,"_42":171,"_13":74,"_39":40,"_41":-5,"_30":31,"_154":-5,"_33":172},{"_54":162,"_38":163,"_36":164,"_148":-5,"_45":46,"_44":165,"_150":70,"_42":166,"_13":74,"_39":40,"_41":-5,"_30":31,"_154":-5,"_33":167},{"_54":156,"_38":157,"_36":158,"_148":-5,"_45":46,"_44":149,"_150":31,"_42":159,"_13":74,"_39":27,"_41":160,"_30":31,"_154":-5,"_33":161},{"_54":146,"_38":147,"_36":68,"_148":-5,"_45":46,"_44":149,"_150":31,"_42":151,"_13":74,"_39":152,"_41":153,"_30":31,"_154":-5,"_33":155},"de2c64ee-39ca-11f1-82c2-42b51c65c3df","index.ts","parentId",1,"latest",["D",1776367889779],"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// 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",[147],"de2c4f4a-39ca-11f1-82c2-42b51c65c3df","README.md","019d97c6-edc7-722c-8966-392dc2a73d43",["D",1776367889779],"# 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**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",[157],"76fa8f48-39cb-11f1-ad8a-42b51c65c3df","shared","cf64b4d0-27e7-4acf-a35d-a8c97fbb846d",2,["D",1776368146229],[163],"de2c4dc4-39ca-11f1-82c2-42b51c65c3df","frontend","019d97c6-edc7-722c-8966-37f550cef728",["D",1776367889779],[169],"90f82090-39cb-11f1-843d-42b51c65c3df",["D",1776368189833],[34],"pulls","branches",3,"forks","envVars",{"_184":74,"_186":74},"connections",{"_184":74,"_185":74},"count","unfilledCount","emptyCount",{"_54":173,"_38":34,"_36":37,"_148":-5,"_45":46,"_44":14,"_150":70,"_42":284,"_13":74,"_39":40,"_41":-5,"_30":31,"_154":-5,"_203":285,"_33":286},{"_54":280,"_38":50,"_36":49,"_148":37,"_45":46,"_44":14,"_150":70,"_42":281,"_13":74,"_39":51,"_41":52,"_30":31,"_154":-5,"_203":282,"_33":283},{"_54":168,"_38":169,"_36":170,"_148":-5,"_45":46,"_44":149,"_150":70,"_42":277,"_13":74,"_39":40,"_41":-5,"_30":31,"_154":-5,"_203":278,"_33":279},{"_54":273,"_38":249,"_36":244,"_148":170,"_45":46,"_44":149,"_150":70,"_42":274,"_13":74,"_39":40,"_41":-5,"_30":31,"_154":-5,"_203":275,"_33":276},{"_54":265,"_38":266,"_36":267,"_148":244,"_45":46,"_44":268,"_150":31,"_42":269,"_13":149,"_39":51,"_41":270,"_30":31,"_154":-5,"_203":271,"_33":272},{"_54":258,"_38":259,"_36":260,"_148":244,"_45":46,"_44":149,"_150":70,"_42":261,"_13":74,"_39":51,"_41":262,"_30":31,"_154":-5,"_203":263,"_33":264},{"_54":250,"_38":251,"_36":252,"_148":244,"_45":46,"_44":253,"_150":70,"_42":254,"_13":74,"_39":51,"_41":255,"_30":31,"_154":-5,"_203":256,"_33":257},{"_54":241,"_38":242,"_36":243,"_148":244,"_45":46,"_44":178,"_150":70,"_42":245,"_13":74,"_39":51,"_41":246,"_30":31,"_154":-5,"_203":247,"_33":248},{"_54":234,"_38":235,"_36":236,"_148":170,"_45":46,"_44":149,"_150":70,"_42":237,"_13":74,"_39":27,"_41":238,"_30":31,"_154":-5,"_203":239,"_33":240},{"_54":226,"_38":227,"_36":228,"_148":170,"_45":46,"_44":229,"_150":31,"_42":230,"_13":149,"_39":27,"_41":231,"_30":31,"_154":-5,"_203":232,"_33":233},{"_54":219,"_38":220,"_36":221,"_148":170,"_45":46,"_44":149,"_150":70,"_42":222,"_13":74,"_39":51,"_41":223,"_30":31,"_154":-5,"_203":224,"_33":225},{"_54":162,"_38":163,"_36":164,"_148":-5,"_45":46,"_44":165,"_150":70,"_42":216,"_13":74,"_39":40,"_41":-5,"_30":31,"_154":-5,"_203":217,"_33":218},{"_54":209,"_38":210,"_36":211,"_148":164,"_45":46,"_44":165,"_150":70,"_42":212,"_13":74,"_39":51,"_41":213,"_30":31,"_154":-5,"_203":214,"_33":215},{"_54":156,"_38":157,"_36":158,"_148":-5,"_45":46,"_44":149,"_150":31,"_42":206,"_13":74,"_39":27,"_41":160,"_30":31,"_154":-5,"_203":207,"_33":208},{"_54":146,"_38":147,"_36":68,"_148":-5,"_45":46,"_44":149,"_150":31,"_42":202,"_13":74,"_39":152,"_41":153,"_30":31,"_154":-5,"_203":204,"_33":205},["D",1776367889779],"children",[],[147],["D",1776367889779],[],[157],"76fa6e6e-39cb-11f1-ad8a-42b51c65c3df","types.ts","76fa6f54-39cb-11f1-ad8a-42b51c65c3df",["D",1776368146229],"export interface Message {\n id: number;\n text: string;\n createdAt: string; // ISO timestamp\n}\n",[],[163,210],["D",1776368146229],[199],[163],"de2c4a22-39ca-11f1-82c2-42b51c65c3df","index.tsx","019d97c6-edc7-722c-8966-3241e845f622",["D",1776367889779],"/** @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();",[],[169,220],"869b43d4-39cb-11f1-955d-42b51c65c3df","index.html","019d97c6-edc7-722c-8966-2e86bf374022",6,["D",1776368172433],"\n\n \n \n \n Chat\n \n \n \n \n \n

\n \n \n \n\n",[],[169,227],"de2c3c4e-39ca-11f1-82c2-42b51c65c3df","favicon.svg","019d97c6-edc7-722c-8966-2824adeeceef",["D",1776367889779],"\n",[],[169,235],"79ba5a60-39cb-11f1-b71b-42b51c65c3df","MessageList.tsx","79ba5b32-39cb-11f1-b71b-42b51c65c3df","019d97c6-edc7-722c-8966-251abec7101e",["D",1776368150847],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { Message } from \"../../shared/types.ts\";\n\ninterface MessageListProps {\n messages: Message[];\n}\n\nfunction formatTime(iso: string): string {\n const date = new Date(iso);\n return date.toLocaleTimeString([], { hour: \"numeric\", minute: \"2-digit\" });\n}\n\nexport function MessageList({ messages }: MessageListProps) {\n if (messages.length === 0) {\n return (\n

\n No messages yet. Say hi!\n

\n );\n }\n\n return (\n

\n {messages.map((msg) => (\n \n

\n {msg.text}\n

{formatTime(msg.createdAt)}

\n ))}\n \n );\n}\n",[],[169,249,242],"components","7d4d6c44-39cb-11f1-9c93-42b51c65c3df","MessageInput.tsx","7d4d6ce4-39cb-11f1-9c93-42b51c65c3df",4,["D",1776368156838],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface MessageInputProps {\n onSubmit: (text: string) => void | Promise;\n disabled?: boolean;\n}\n\nexport function MessageInput({ onSubmit, disabled }: MessageInputProps) {\n const [text, setText] = useState(\"\");\n const [sending, setSending] = useState(false);\n\n async function handleSubmit(e: Event) {\n e.preventDefault();\n const trimmed = text.trim();\n if (!trimmed || sending) return;\n setSending(true);\n try {\n await onSubmit(trimmed);\n setText(\"\");\n } finally {\n setSending(false);\n }\n }\n\n return (\n \n setText(e.target.value)}\n placeholder=\"Type a message...\"\n disabled={disabled || sending}\n class=\"flex-1 min-w-0 px-3 py-2 border border-gray-300 rounded-full text-base focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent disabled:bg-gray-100\"\n // Prevent iOS from zooming in on focus (font-size >= 16px handles this, text-base is 16px)\n />\n \n Send\n \n \n );\n}\n",[],[169,249,251],"de2c337a-39ca-11f1-82c2-42b51c65c3df","Counter.tsx","019d97c6-edc7-722c-8966-20e9c8727ed6",["D",1776367889779],"/** @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",[],[169,249,259],"8417ed06-39cb-11f1-8f29-42b51c65c3df","App.tsx","019d97c6-edc6-708b-867a-951aa42c63e4",5,["D",1776368168216],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Message } from \"../../shared/types.ts\";\nimport { MessageInput } from \"./MessageInput.tsx\";\nimport { MessageList } from \"./MessageList.tsx\";\n\n// Mock data so we can see the UI before wiring up the backend\nconst MOCK_MESSAGES: Message[] = [\n { id: 1, text: \"Hey everyone 👋\", createdAt: new Date(Date.now() - 1000 * 60 * 10).toISOString() },\n { id: 2, text: \"Welcome to the chat!\", createdAt: new Date(Date.now() - 1000 * 60 * 8).toISOString() },\n {\n id: 3,\n text: \"This is a longer message to check how wrapping works. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\",\n createdAt: new Date(Date.now() - 1000 * 60 * 5).toISOString(),\n },\n { id: 4, text: \"Looking good so far\", createdAt: new Date(Date.now() - 1000 * 60 * 2).toISOString() },\n];\n\nexport function App() {\n const [messages, setMessages] = useState(MOCK_MESSAGES);\n\n async function handleSend(text: string) {\n // Mock send — just append locally for now. Real impl will POST to backend.\n const newMsg: Message = {\n id: Date.now(),\n text,\n createdAt: new Date().toISOString(),\n };\n setMessages((prev) => [...prev, newMsg]);\n }\n\n return (\n

Chat

\n \n view source\n \n

\n \n \n

\n );\n}\n",[],[169,249,266],"de2c3ac8-39ca-11f1-82c2-42b51c65c3df",["D",1776367889779],[191,192,193,194],[169,249],["D",1776367889779],[190,195,196,197],[169],"90f7f21e-39cb-11f1-843d-42b51c65c3df",["D",1776368189833],[],[34,50],["D",1776368189833],[188],[34],["D",1776367889779],["D",1789510872811],{"_111":110,"_118":114},{"_111":110,"_112":-5,"_113":114,"_19":66,"_115":116,"_117":31},{"_13":100,"_38":101,"_54":46,"_102":55,"_103":-5,"_104":-5,"_105":-5,"_106":-5,"_107":-5,"_108":56,"_109":110},"ctx",{"_93":-5,"_138":325,"_326":327,"_328":329,"_330":31,"_331":31,"_332":31,"_333":70,"_334":-5,"_335":-7,"_336":-7,"_337":74,"_338":31,"_339":31,"_340":-5,"_341":31,"_342":31,"_343":31,"_344":-5},"ENV",{"_296":297,"_298":299,"_300":101,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324},"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 · v7