[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_253":254,"_255":256},"routes/_app.x.$handle.$name",{"_94":93,"_31":43,"_103":84,"_26":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":24,"_118":119,"_120":55,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":-5,"_51":-5,"_18":52,"_53":30,"_54":55,"_56":-5,"_57":58,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":24},"version",8,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":33,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","index.ts","latestPath","fileId","1bee6930-09ac-11f0-9f75-569c3dd06744","name","fileType","http","content","import { Hono } from \"npm:hono\";\nimport { app as backend } from \"./backend/index.ts\";\n\nconst app = new Hono();\n\napp.route(\"/api\", backend);\napp.get(\"/\", async (c) => {\n return c.html(\n `\n \n OpenTownie\n \n \n \n \n

\n \n \n \n `,\n );\n});\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, c) => {\n throw err;\n});\n\nexport default app.fetch;","createdAt",["D",1742929525607],"branchVersion","branchId","1ba3dbd6-09ac-11f0-bac1-569c3dd06744","id","1ba372e0-09ac-11f0-bac1-569c3dd06744","svgEditor",["D",1742929525118],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion",18,"likeCount",0,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_102":98},"org",{"_94":93,"_95":96,"_97":98,"_18":52,"_99":100,"_101":24},"branch",{"_13":83,"_31":84,"_41":40,"_85":42,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":43,"_92":93},"isOwned",25,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dcm31","handle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789674568&sig=dd19b148771d1f728c0b07116b4111ca0763ac14afb58171541c628c23b8d4fc","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_41":42,"_31":43,"_36":249,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":-5,"_51":-5,"_18":52,"_53":30,"_54":55,"_56":-5,"_57":58,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":250,"_78":251,"_80":252,"_82":24},"tree",[166,168,176,177],"files",[166,167,168,169,170,171,172,173,174,175,176,177],"counts",{"_155":60,"_156":157,"_158":60,"_159":160,"_161":162},"contents",[125,126,127,128],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_41":149,"_31":150,"_29":151,"_130":-5,"_39":40,"_38":152,"_131":55,"_36":153,"_13":60,"_32":147,"_34":-5,"_23":24,"_133":-5,"_26":154},{"_41":142,"_31":143,"_29":144,"_130":-5,"_39":40,"_38":145,"_131":55,"_36":146,"_13":60,"_32":147,"_34":-5,"_23":24,"_133":-5,"_26":148},{"_41":135,"_31":136,"_29":137,"_130":-5,"_39":40,"_38":138,"_131":55,"_36":139,"_13":60,"_32":20,"_34":140,"_23":24,"_133":-5,"_26":141},{"_41":129,"_31":27,"_29":30,"_130":-5,"_39":40,"_38":14,"_131":24,"_36":132,"_13":60,"_32":33,"_34":35,"_23":24,"_133":-5,"_26":134},"1bee6890-09ac-11f0-9f75-569c3dd06744","parentId","latest",["D",1742929525607],"label",[27],"1bc1a594-09ac-11f0-b0ec-569c3dd06744","README.md","1bc1a77e-09ac-11f0-b0ec-569c3dd06744",3,["D",1742929525311],"# OpenTownie\n\nOpenTownie is a Val Town Project that lets you edit other Val Town Projects with Claude 3.7 Sonnet.\n\nIt uses agentic tool-calling, taking manh read, write, and thinking steps autonomously when carrying out your instructions. \n\n### Todos\n\n- [ ] Give it all the code (except maybe .txt files) as initial context (like cursor sonnet max)\n- [ ] Rebuild as React Router?\n- [ ] Persistent threads?\n- [ ] Have it default to creating a new branch off main and then embedding and iframe to the resulting http val and give you a link to a pr opening url\n- [ ] A way to upload docs, by URL? A mini site to recursively crawl docs and markdownify?\n- [x] Show reasoning in a detail\n- [x] Consider asking it to write the minimum code possible \n- [x] Add caching (post in the vercel ai discussion about how it's not working)\n- [x] For login, have a button that reloads the page\n- [x] Start a timer for messages\n- [x] Add more indicators that it's \"still working\"\n- [x] Require users supply their own Anthropic token?\n- [x] Add cost indications on messages\n- [x] Add a bell noise when the message is done to let us know\n- [x] Launch!\n- [x] Let it select the branch name from a dropdown\n- [x] Consider giving it a tool to replace whole files\n- [x] prompt it to use the thinking tool\n- [x] delete file command",[136],"1bb825b4-09ac-11f0-98f2-569c3dd06744","frontend","26ccac1d-07f7-404b-a3ef-d1a0b65f100b",2,["D",1742929525249],"directory",[143],"1bb0375a-09ac-11f0-8e1d-569c3dd06744","backend","9a8e96fa-713b-47d6-8af7-24017dbfb805",1,["D",1742929525196],[150],"pulls","branches",4,"forks","envVars",{"_163":60,"_165":60},"connections",{"_163":60,"_164":60},"count","unfilledCount","emptyCount",{"_41":149,"_31":150,"_29":151,"_130":-5,"_39":40,"_38":152,"_131":55,"_36":246,"_13":60,"_32":147,"_34":-5,"_23":24,"_133":-5,"_179":247,"_26":248},{"_41":239,"_31":240,"_29":241,"_130":151,"_39":40,"_38":152,"_131":55,"_36":242,"_13":60,"_32":20,"_34":243,"_23":24,"_133":-5,"_179":244,"_26":245},{"_41":142,"_31":143,"_29":144,"_130":-5,"_39":40,"_38":145,"_131":55,"_36":236,"_13":60,"_32":147,"_34":-5,"_23":24,"_133":-5,"_179":237,"_26":238},{"_41":232,"_31":215,"_29":210,"_130":144,"_39":40,"_38":157,"_131":55,"_36":233,"_13":60,"_32":147,"_34":-5,"_23":24,"_133":-5,"_179":234,"_26":235},{"_41":224,"_31":225,"_29":226,"_130":210,"_39":40,"_38":227,"_131":55,"_36":228,"_13":60,"_32":190,"_34":229,"_23":24,"_133":-5,"_179":230,"_26":231},{"_41":216,"_31":217,"_29":218,"_130":210,"_39":40,"_38":219,"_131":55,"_36":220,"_13":60,"_32":190,"_34":221,"_23":24,"_133":-5,"_179":222,"_26":223},{"_41":207,"_31":208,"_29":209,"_130":210,"_39":40,"_38":157,"_131":55,"_36":211,"_13":60,"_32":190,"_34":212,"_23":24,"_133":-5,"_179":213,"_26":214},{"_41":203,"_31":202,"_29":197,"_130":144,"_39":40,"_38":145,"_131":55,"_36":204,"_13":60,"_32":147,"_34":-5,"_23":24,"_133":-5,"_179":205,"_26":206},{"_41":194,"_31":195,"_29":196,"_130":197,"_39":40,"_38":145,"_131":55,"_36":198,"_13":60,"_32":190,"_34":199,"_23":24,"_133":-5,"_179":200,"_26":201},{"_41":185,"_31":186,"_29":187,"_130":144,"_39":40,"_38":188,"_131":55,"_36":189,"_13":60,"_32":190,"_34":191,"_23":24,"_133":-5,"_179":192,"_26":193},{"_41":135,"_31":136,"_29":137,"_130":-5,"_39":40,"_38":138,"_131":55,"_36":182,"_13":60,"_32":20,"_34":140,"_23":24,"_133":-5,"_179":183,"_26":184},{"_41":129,"_31":27,"_29":30,"_130":-5,"_39":40,"_38":14,"_131":24,"_36":178,"_13":60,"_32":33,"_34":35,"_23":24,"_133":-5,"_179":180,"_26":181},["D",1742929525607],"children",[],[27],["D",1742929525311],[],[136],"1be6a2c2-09ac-11f0-b60d-569c3dd06744","index.tsx","1be6a358-09ac-11f0-b60d-569c3dd06744",7,["D",1742929525556],"script","/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?dev\";\nimport { App } from \"./components/App.tsx\";\n\ncreateRoot(document.getElementById(\"root\")).render();",[],[143,186],"1bb81e66-09ac-11f0-98f2-569c3dd06744","soundEffects.ts","1bb81f06-09ac-11f0-98f2-569c3dd06744","63acffe5-7a55-44d2-b10d-e4ce10cc8c59",["D",1742929525249],"/**\n * Sound effects utility functions for the application\n */\n\n/**\n * Plays a bell sound notification using the Web Audio API\n * @returns A Promise that resolves when the sound has started playing\n */\nexport function playBellSound(): Promise {\n return new Promise((resolve) => {\n try {\n // Create audio context\n const AudioContext = window.AudioContext || (window as any).webkitAudioContext;\n if (!AudioContext) {\n console.warn(\"Web Audio API not supported in this browser\");\n resolve();\n return;\n }\n \n const audioCtx = new AudioContext();\n const masterGain = audioCtx.createGain();\n masterGain.connect(audioCtx.destination);\n \n // Bell frequency ratios (fundamental and overtones)\n const ratios = [1, 2, 2.4, 3, 4, 5.4];\n const baseFreq = 440; // Fundamental frequency\n \n // Create and connect oscillators for each frequency component\n ratios.forEach((ratio, i) => {\n const osc = audioCtx.createOscillator();\n const gain = audioCtx.createGain();\n \n // Connect this oscillator chain\n osc.connect(gain);\n gain.connect(masterGain);\n \n // Set frequency based on ratio\n osc.frequency.value = baseFreq * ratio;\n \n // Amplitude decreases for higher overtones\n const volume = 0.2 / (i + 1);\n \n // Set envelope\n const now = audioCtx.currentTime;\n gain.gain.setValueAtTime(0, now);\n gain.gain.linearRampToValueAtTime(volume, now + 0.01);\n \n // Different decay times for different harmonics\n const decayTime = 1.0 + (i * 0.3);\n gain.gain.exponentialRampToValueAtTime(0.001, now + decayTime);\n \n // Start and stop\n osc.start(now);\n osc.stop(now + decayTime);\n });\n \n // Resolve the promise after a short delay to ensure sound has started\n setTimeout(resolve, 50);\n } catch (error) {\n console.error(\"Error playing bell sound:\", error);\n resolve(); // Resolve anyway to prevent hanging promises\n }\n });\n}\n\n/**\n * Plays a simple notification sound using the Web Audio API\n * This is a simpler, shorter bell sound\n * @returns A Promise that resolves when the sound has started playing\n */\nexport function playSimpleNotification(): Promise {\n return new Promise((resolve) => {\n try {\n // Create audio context\n const AudioContext = window.AudioContext || (window as any).webkitAudioContext;\n if (!AudioContext) {\n console.warn(\"Web Audio API not supported in this browser\");\n resolve();\n return;\n }\n \n const audioCtx = new AudioContext();\n \n // Create oscillator (sound generator)\n const oscillator = audioCtx.createOscillator();\n oscillator.type = 'sine';\n oscillator.frequency.value = 900;\n \n // Create gain node for volume control\n const gainNode = audioCtx.createGain();\n \n // Connect the audio nodes\n oscillator.connect(gainNode);\n gainNode.connect(audioCtx.destination);\n \n // Get current time reference\n const now = audioCtx.currentTime;\n \n // Set volume envelope for bell-like sound\n gainNode.gain.setValueAtTime(0, now);\n gainNode.gain.linearRampToValueAtTime(0.3, now + 0.01);\n gainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.5);\n \n // Start and stop the sound\n oscillator.start(now);\n oscillator.stop(now + 0.5);\n \n // Resolve the promise after a short delay\n setTimeout(resolve, 50);\n } catch (error) {\n console.error(\"Error playing notification sound:\", error);\n resolve(); // Resolve anyway to prevent hanging promises\n }\n });\n}",[],[143,202,195],"utils","1bb82758-09ac-11f0-98f2-569c3dd06744",["D",1742929525249],[174],[143,202],"1bccbee8-09ac-11f0-b60d-569c3dd06744","Projects.tsx","1bccbf88-09ac-11f0-b60d-569c3dd06744","e9fce728-44af-4ad0-a9a1-cce962a5768b",["D",1742929525383],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\n\n// Component for the loading spinner\nconst LoadingSpinner = () => (\n

\n);\n\nasync function loader({ bearerToken }: { bearerToken: string }) {\n const data = await (await fetch(\"/api/projects-loader\", {\n headers: {\n \"Authorization\": \"Bearer \" + bearerToken,\n },\n })).json();\n return data;\n}\n\nexport function Projects({ bearerToken, setProject }: { bearerToken: string; setProject: any }) {\n const [loaderData, setLoaderData] = useState();\n const [isLoading, setIsLoading] = useState(true);\n\n useEffect(\n () => {\n setIsLoading(true);\n loader({ bearerToken })\n .then(setLoaderData)\n .finally(() => setIsLoading(false));\n },\n [],\n );\n\n return (\n

\n {isLoading ? (\n
\n Loading projects\n
\n
\n ) : loaderData?.profile?.username ? (\n <>\n \n @{loaderData?.profile?.username}\n \n 's Projects\n \n ) : (\n \"Your Projects\"\n )}\n

\n \n {isLoading ? (\n \n ) : (\n loaderData?.projects?.map((p: any) => (\n setProject({...p, username: loaderData?.profile?.username})}\n >\n

{p.name}

\n ))\n )}\n \n );\n}",[],[143,215,208],"components","1bd4845c-09ac-11f0-85c7-569c3dd06744","MessagePart.tsx","1bd4851a-09ac-11f0-85c7-569c3dd06744",5,["D",1742929525435],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { type Message } from \"https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport ReactMarkdown from \"https://esm.sh/react-markdown?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport { ImagePreview } from \"./ImageUpload.tsx\";\n\nexport function MessagePart({ part }: { part: NonNullable[number] }) {\n if (part.type === \"text\") return {part.text};\n if (part.type === \"reasoning\")\n return (\n

\n Reasoning...\n

\n {part.reasoning}\n {part.details && part.details.map((detail, index) => (\n

\n {detail.text}\n

\n ))}\n

\n );\n if (part.type === \"tool-invocation\") {\n let { step, state, toolName, args } = part.toolInvocation;\n \n // Properly conjugate command verbs to present participle form\n const getCommandVerb = (command: string): string => {\n switch (command) {\n case \"view\": return \"viewing\";\n case \"create\": return \"creating\";\n case \"str_replace\": return \"replacing\";\n case \"insert\": return \"inserting\";\n case \"undo_edit\": return \"undoing edit\";\n default: return command + \"ing\"; // Fallback for unknown commands\n }\n };\n \n let name = toolName === \"str_replace_editor\"\n ? getCommandVerb(args.command) + \" \" + args.path + (args.view_range ?? \"\")\n : toolName;\n return (\n

\n {name}\n

\n          {JSON.stringify(part.toolInvocation, null, 2)}\n

\n );\n }\n if (part.type === \"source\") {\n return

TODO Source: {JSON.stringify(part.source)}

;\n }\n if (part.type === \"file\") {\n return (\n

{atob(part.data)}

\n );\n }\n if (part.type === \"image\") {\n // Handle both formats: {image: {url: string}} and {image: string}\n const imageUrl = typeof part.image === 'string' \n ? part.image \n : part.image.url || (part.image as any).source?.url;\n \n return (\n

\n $\"Uploaded$ \n

\n );\n }\n // Handle multiple images in a single part\n if (part.type === \"images\") {\n return img.url)} />;\n }\n}",[],[143,215,217],"1bde35ec-09ac-11f0-b0ec-569c3dd06744","Login.tsx","1bde36c8-09ac-11f0-b0ec-569c3dd06744",6,["D",1742929525498],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useLocalStorage } from \"https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0\";\n\nexport function Login() {\n const [bearerToken, setBearerToken] = useLocalStorage(\"bearer\", \"\");\n const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage(\"anthropic_api_key\", \"\");\n\n return (\n

Login

\n \n \n Val Town API Token\n \n {\"\"}(with projects:write and users:read permission)\n \n setBearerToken(e.target.value)}\n placeholder=\"vtwn-xxxx\"\n autoComplete=\"off\"\n className=\"w-full p-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none\"\n />\n

\n Anthropic API Key\n setAnthropicApiKey(e.target.value)}\n placeholder=\"sk-ant-xxxxx\"\n autoComplete=\"off\"\n className=\"w-full p-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none\"\n />\n

\n \n Login\n \n

\n );\n}",[],[143,215,225],"1bccc71c-09ac-11f0-b60d-569c3dd06744",["D",1742929525383],[170,171,172],[143,215],["D",1742929525249],[169,173,175],[143],"1bb0213e-09ac-11f0-8e1d-569c3dd06744","system_prompt.txt","1bb021e8-09ac-11f0-8e1d-569c3dd06744",["D",1742929525196],"# Val Town Assistant Prompt\n\nYou are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Respond in a friendly and concise manner\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Image Handling\n\n- When users upload images, carefully analyze them to understand their content\n- Reference specific details from the images in your responses\n- If multiple images are uploaded, consider their relationship to each other\n- For code-related images (screenshots, diagrams), extract relevant information and incorporate it into your solutions\n- For UI mockups or design images, use them as reference for layout and design, use the colors from the image\n- When images contain text or code, transcribe relevant portions as needed\n- If image content is unclear, ask clarifying questions about what the user wants you to focus on\n\n## Technical Requirements\n\n### Code Standards\n- Generate code in TypeScript by default unless JavaScript is specifically requested\n- Add appropriate TypeScript types and interfaces for all data structures\n- If there is an official SDK or library for the service you are integrating with, use it to simplify the implementation\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices where appropriate\n\n### Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks. These utilities handle file management, project information, and testing.\n\n### Importing Utilities\nAlways import utilities with version pins to avoid breaking changes:\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@71-main/index.ts\";\n```\n\n### Available Utilities\n\n1. **parseProject** - Extract information about the current project from import.meta.url:\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\n2. **readFile** - Read files from within the project:\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n3. **serveFile** - Serve project files with proper content types:\n```ts\n// Serve a file from the project with proper Content-Type header\napp.get(\"/public/style.css\", c => serveFile(\"/frontend/style.css\", import.meta.url));\n```\n\n4. **listFiles** - List all files in the project:\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n5. **fetchTranspiledJavaScript** - Fetch and transpile TypeScript to JavaScript:\n```ts\nconst jsCode = await fetchTranspiledJavaScript(\"https://esm.town/v/username/project/path/to/file.ts\");\n```\n\n6. **testServer** - Create a test server for running test suites:\n```ts\nexport default testServer([\n {\n name: \"Feature Tests\",\n tests: [\n {\n name: \"should add numbers correctly\",\n function: () => {\n expect(1 + 1).toBe(2);\n },\n }\n ],\n }\n]);\n```\n\n## Val Town Platform Specifics\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- For AI-generated images, use: `https://maxm-imggenurl.web.val.run/the-description-of-your-image`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link with `import.meta.url.replace(\"esm.town\", \"val.town\")` and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; avoid catches that merely log or return 500s - let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` and minimize their use - prefer APIs without keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- For persistence, use Val Town SQLite or Blob storage with `import.meta.url` for keys/table names\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and include the `@jsxImportSource` pragma\n- When facing client-side render issues, check if all React dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Val Town Standard Libraries\n\n### Blob Storage\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n subject: \"Hi\", \n text: \"Hi\", \n html: \"

Hi

\"\n});\n```\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n- Hono is the recommended API framework (similar to Express, Flask, or Sinatra)\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n // Use the serveFile utility to handle content types automatically\n app.get(\"/public/*\", c => serveFile(c.req.path.replace(\"/public\", \"/frontend\"), import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Be careful with error handling as Hono tends to swallow errors\n- Consider re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Frontend Best Practices\n- Structure as a standard client-side React app\n- Use SVG for favicons (Val Town only supports text files)\n- Separate components into individual files\n- Access bootstrapped data from `window.__INITIAL_DATA__`\n- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma\n- Follow the React component pattern from the example project\n- Handle API calls properly with proper error catching\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n- Follow the queries and migrations pattern from the example\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n - Properly handle CORS if needed for external access",[],[150,240],["D",1742929525196],[167],[150],["D",1742929525118],{"_94":93,"_102":98},{"_94":93,"_95":96,"_97":98,"_18":52,"_99":100,"_101":24},{"_13":83,"_31":84,"_41":40,"_85":42,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":43,"_92":93},"ctx",{"_76":-5,"_122":286,"_287":288,"_289":290,"_291":24,"_292":24,"_293":24,"_294":55,"_295":-5,"_296":-7,"_297":-7,"_298":60,"_299":24,"_300":24,"_301":-5,"_302":24,"_303":24,"_304":24,"_305":-5},"ENV",{"_257":258,"_259":260,"_261":84,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","a3e067d4463eea85f6334f8e583e8516ae58c4f6","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"]

\n {isLoading ? (\n \n Loading projects\n \n \n ) : loaderData?.profile?.username ? (\n <>\n \n @{loaderData?.profile?.username}\n \n 's Projects\n \n ) : (\n \"Your Projects\"\n )}\n

Login

Hi

\n {isLoading ? (\n
\n Loading projects\n
\n
\n ) : loaderData?.profile?.username ? (\n <>\n \n @{loaderData?.profile?.username}\n \n 's Projects\n \n ) : (\n \"Your Projects\"\n )}\n

Diff · v8