Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\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\n## Val Town Platform Specifics\n\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- **AI Image:** To inline generate an AI image use: `

`\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 by importing & using `parseProject(import.meta.url).links.self.project` (or passing this data to the client) 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')` when you need to, but generally prefer APIs that don't require 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- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\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│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\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 # Frontend 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\n- Hono is the recommended API framework\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 import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, 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- Always include this snippet at the top-level Hono app to 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### 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\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`",[],[152,170,177],[152,170],[152],{"_107":188,"_99":189,"_153":190,"_155":-5,"_156":139,"_157":191,"_159":121,"_109":192,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":193,"_102":312},"846c5752-1653-11f0-9b3c-569c3dd06744","backend","d83ee805-94b1-4b67-a7e0-cf82b022fdbb",1,["D",1744320840718],[194,251,290,305],{"_107":195,"_99":196,"_153":197,"_155":190,"_156":139,"_157":191,"_159":121,"_109":198,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":199,"_102":250},"846c25e8-1653-11f0-9b3c-569c3dd06744","routes","dcac092a-441b-47cc-80c0-2ce5b79af871",["D",1744320840718],[200,209,217,225,233,241],{"_107":201,"_99":202,"_153":203,"_155":197,"_156":139,"_157":191,"_159":121,"_109":204,"_104":33,"_161":205,"_163":206,"_164":27,"_165":-5,"_166":207,"_102":208},"846bf230-1653-11f0-9b3c-569c3dd06744","create-branch.ts","a407186b-6eea-4088-a67d-86277ca8d50a",["D",1744320840718],"script","import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.post(\"/\", async (c) => {\n const bearerToken = c.req.header(\"Authorization\")?.replace(\"Bearer \", \"\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const { projectId, branchName } = await c.req.json();\n\n if (!projectId) {\n return Response.json(\"Please provide a projectId\", { status: 400 });\n }\n\n if (!branchName) {\n return Response.json(\"Please provide a branchName\", { status: 400 });\n }\n\n // Validate branch name (only letters, numbers, and dashes)\n const branchNameRegex = /^[a-zA-Z0-9-]+$/;\n if (!branchNameRegex.test(branchName)) {\n return Response.json({\n error: \"Branch name can only contain letters, numbers, and dashes\",\n }, { status: 400 });\n }\n\n const vt = new ValTown({ bearerToken });\n\n try {\n const newBranch = await vt.projects.branches.create(projectId, {\n name: branchName,\n });\n\n return c.json({ branch: newBranch });\n } catch (error) {\n console.error(\"Error creating branch:\", error);\n return Response.json({\n error: error instanceof Error ? error.message : \"Failed to create branch\",\n }, { status: 500 });\n }\n});\n\nexport default app;",[],[189,196,202],{"_107":210,"_99":211,"_153":212,"_155":197,"_156":139,"_157":191,"_159":121,"_109":213,"_104":33,"_161":205,"_163":214,"_164":27,"_165":-5,"_166":215,"_102":216},"846c10d0-1653-11f0-9b3c-569c3dd06744","create-project.ts","d4fbdf2f-66cb-4ceb-b10d-8529d55d1f70",["D",1744320840718],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.post(\"/\", async (c) => {\n const bearerToken = c.req.header(\"Authorization\")?.replace(\"Bearer \", \"\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const { name, description, privacy } = await c.req.json();\n\n const vt = new ValTown({ bearerToken });\n\n try {\n const project = await vt.projects.create({\n name,\n description,\n privacy,\n });\n\n return c.json({ project });\n } catch (e: any) {\n return c.json({ error: e.message }, { status: 500 });\n }\n});\n\nexport default app;",[],[189,196,211],{"_107":218,"_99":219,"_153":220,"_155":197,"_156":139,"_157":191,"_159":121,"_109":221,"_104":33,"_161":205,"_163":222,"_164":27,"_165":-5,"_166":223,"_102":224},"846c1350-1653-11f0-9b3c-569c3dd06744","project-branches.ts","b7622eaf-27cc-4a26-bf63-43bf0d2206bd",["D",1744320840718],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const bearerToken = c.req.header(\"Authorization\")?.replace(\"Bearer \", \"\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const projectId = c.req.query(\"projectId\");\n if (!projectId) {\n return Response.json(\"Please provide a projectId\", { status: 400 });\n }\n\n const vt = new ValTown({ bearerToken });\n\n try {\n const branches = await vt.projects.branches.list(projectId, { limit: 100 });\n return c.json({ branches: branches.data });\n } catch (error) {\n console.error(\"Error fetching branches:\", error);\n return Response.json({ error: \"Failed to fetch branches\" }, { status: 500 });\n }\n});\n\nexport default app;",[],[189,196,219],{"_107":226,"_99":227,"_153":228,"_155":197,"_156":139,"_157":191,"_159":121,"_109":229,"_104":33,"_161":205,"_163":230,"_164":27,"_165":-5,"_166":231,"_102":232},"846c1922-1653-11f0-9b3c-569c3dd06744","project-files.ts","c298a4d2-3989-4322-a821-aaae95465875",["D",1744320840718],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const bearerToken = c.req.header(\"Authorization\")?.replace(\"Bearer \", \"\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const projectId = c.req.query(\"projectId\");\n const branchId = c.req.query(\"branchId\");\n\n if (!projectId) {\n return Response.json(\"Please provide a projectId\", { status: 400 });\n }\n\n const vt = new ValTown({ bearerToken });\n\n try {\n const files = await vt.projects.files.retrieve(projectId, {\n path: \"\",\n limit: 100,\n offset: 0,\n recursive: true,\n branch_id: branchId || undefined,\n });\n\n return c.json({ files: files.data });\n } catch (error) {\n console.error(\"Error fetching project files:\", error);\n return Response.json({ error: \"Failed to fetch project files\" }, { status: 500 });\n }\n});\n\nexport default app;",[],[189,196,227],{"_107":234,"_99":235,"_153":236,"_155":197,"_156":139,"_157":191,"_159":121,"_109":237,"_104":33,"_161":205,"_163":238,"_164":27,"_165":-5,"_166":239,"_102":240},"846c1b20-1653-11f0-9b3c-569c3dd06744","projects-loader.ts","c1bf14b7-fd4b-4a56-93c3-e4bf8b3829e4",["D",1744320840718],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const bearerToken = c.req.header(\"Authorization\")?.replace(\"Bearer \", \"\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const vt = new ValTown({ bearerToken });\n\n const [profile, projects] = await Promise.all([\n vt.me.profile.retrieve(),\n vt.me.projects.list({\n limit: 100,\n }),\n ]);\n\n return c.json({ profile, projects: projects.data });\n});\n\nexport default app;",[],[189,196,235],{"_107":242,"_99":243,"_153":244,"_155":197,"_156":139,"_157":138,"_159":121,"_109":245,"_104":246,"_161":205,"_163":247,"_164":27,"_165":-5,"_166":248,"_102":249},"baaaaf84-1659-11f0-b457-569c3dd06744","send-message.ts","a7c598ce-bbfa-4067-aba8-94493335e7a3",["D",1744323508805],30,"import { readFile } from \"https://esm.town/v/std/utils@71-main/index.ts\";\nimport { createAnthropic } from \"npm:@ai-sdk/anthropic\";\nimport { createGroq } from \"npm:@ai-sdk/groq\";\nimport { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport {\n convertToCoreMessages,\n type CoreUserMessage,\n streamText,\n type LanguageModel,\n type TextPart,\n type ImagePart,\n} from \"npm:ai\";\nimport { Hono } from \"npm:hono\";\nimport {\n getTextEditorTool,\n makeDeleteTool,\n thinkTool,\n} from \"../tools/index.ts\";\nimport fileWithLinesNumbers from \"../utils/fileWithLinesNumbers.ts\";\n\nconst app = new Hono();\n\n// Load system prompts\nconst systemPromptPromise = readFile(\n \"/prompts/system_prompt.txt\",\n import.meta.url\n);\nconst openTowniePromptAdditionsPromise = readFile(\n \"/prompts/open_townie_prompt_additions.txt\",\n import.meta.url\n);\n\napp.post(\"/\", async (c) => {\n const bearerToken = c.req.header(\"Authorization\")?.replace(\"Bearer \", \"\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const {\n messages,\n project,\n branchId,\n anthropicApiKey,\n selectedFiles,\n images,\n model: modelId,\n groqApiKey,\n } = await c.req.json();\n console.log(\"Original messages:\", JSON.stringify(messages, null, 2));\n console.log(\"Images received:\", JSON.stringify(images, null, 2));\n console.log(\"Selected model:\", modelId);\n\n // Check if API keys are available based on the selected model\n const isGroqModel =\n modelId?.toLowerCase().includes(\"gemma\") ||\n modelId?.toLowerCase().includes(\"llama\") ||\n modelId?.toLowerCase().includes(\"mixtral\") ||\n modelId?.toLowerCase().includes(\"deepseek\") ||\n modelId?.toLowerCase().includes(\"qwen\");\n\n let apiKey: string | undefined;\n let provider: ReturnType;\n let model: LanguageModel;\n\n if (isGroqModel) {\n if (!groqApiKey && !Deno.env.get(\"GROQ_API_KEY\")) {\n return Response.json(\n {\n error:\n \"Groq API key is required for the selected model. Please provide it in the request or set the GROQ_API_KEY environment variable.\",\n },\n { status: 400 }\n );\n }\n apiKey = groqApiKey || Deno.env.get(\"GROQ_API_KEY\");\n provider = createGroq({ apiKey });\n model = provider(modelId || \"llama3-8b-8192\");\n } else {\n if (!anthropicApiKey && !Deno.env.get(\"PROVIDED_ANTHROPIC_API_KEY\")) {\n return Response.json(\n {\n error:\n \"Anthropic API key is required for the selected model. Please log out and add your Anthropic API key, or ensure PROVIDED_ANTHROPIC_API_KEY is set.\",\n },\n { status: 400 }\n );\n }\n if (anthropicApiKey === Deno.env.get(\"PASSWORD\")) {\n apiKey = Deno.env.get(\"PROVIDED_ANTHROPIC_API_KEY\");\n } else {\n apiKey = anthropicApiKey || Deno.env.get(\"PROVIDED_ANTHROPIC_API_KEY\");\n }\n if (!apiKey) {\n return Response.json(\n {\n error: \"Anthropic API key could not be determined.\",\n },\n { status: 400 }\n );\n }\n provider = createAnthropic({ apiKey });\n model = provider(modelId || \"claude-3-haiku-20240307\");\n }\n\n let coreMessages = convertToCoreMessages(messages);\n\n // If there are images, we need to add them to the last user message\n if (images && Array.isArray(images) && images.length > 0) {\n // Find the last user message\n const lastUserMessageIndex = coreMessages.findIndex(\n (msg, idx) => msg.role === \"user\" && idx === coreMessages.length - 1\n );\n\n if (lastUserMessageIndex !== -1) {\n // Get the text content from the last user message\n const lastUserMessageContent = coreMessages[lastUserMessageIndex].content;\n\n // Initialize the content array correctly\n let contentArray: (TextPart | ImagePart)[] = [];\n\n // Add existing text part(s)\n if (typeof lastUserMessageContent === \"string\") {\n contentArray.push({ type: \"text\", text: lastUserMessageContent });\n } else if (Array.isArray(lastUserMessageContent)) {\n // Filter and add only TextPart and ImagePart elements that might already exist\n contentArray = lastUserMessageContent.filter(\n (part): part is TextPart | ImagePart =>\n part.type === \"text\" || part.type === \"image\"\n );\n }\n\n // Create a new message with multimodal content, ensuring content is an array\n const newUserMessage: CoreUserMessage = {\n role: \"user\",\n content: contentArray, // Initialize with the array\n };\n\n // Add each image to the content array using the correct ImagePart format\n // Check if content is an array before pushing (type guard)\n if (Array.isArray(newUserMessage.content)) {\n for (const image of images) {\n if (image && image.url) {\n // Extract mime type from data URL if available\n let mimeType = undefined;\n if (image.url.startsWith(\"data:\")) {\n const matches = image.url.match(/^data:([^;]+);/);\n if (matches && matches.length > 1) {\n mimeType = matches[1];\n }\n }\n\n // Push the ImagePart\n newUserMessage.content.push({\n type: \"image\",\n image: image.url as unknown as URL, // Cast to URL as expected by ImagePart\n mimeType,\n }); // No need for 'as ImagePart' if array type is correctly inferred\n }\n }\n }\n\n // Replace the last user message with our new multimodal message\n coreMessages[lastUserMessageIndex] = newUserMessage;\n }\n }\n\n // If there are selected files, fetch their content and add them to the messages\n if (selectedFiles && selectedFiles.length > 0) {\n const vt = new ValTown({ bearerToken });\n\n try {\n // Create a message with the file contents\n let fileContents = \"# Selected Project Files\\n\\n\";\n\n for (const filePath of selectedFiles) {\n if (filePath.endsWith(\"/\")) continue; // Skip directories\n\n try {\n const file = await vt.projects.files.getContent(project.id, {\n path: filePath.startsWith(\"/\") ? filePath.slice(1) : filePath,\n branch_id: branchId || undefined,\n });\n\n const content = await file.text();\n fileContents += `## File: ${filePath}\\n\\`\\`\\`\\n${fileWithLinesNumbers(\n content\n )}\\n\\`\\`\\`\\n\\n`;\n } catch (error) {\n console.error(`Error fetching file ${filePath}:`, error);\n fileContents += `## File: ${filePath}\\nError: Could not fetch file content\\n\\n`;\n }\n }\n\n // Add the file contents as the last message\n coreMessages.push({\n role: \"user\",\n content: [{ type: \"text\", text: fileContents }],\n });\n } catch (error) {\n console.error(\"Error processing selected files:\", error);\n }\n }\n\n // Add cache control to the last message\n let lastMessage = coreMessages.at(-1);\n if (lastMessage) {\n // If the last message is a string, convert it to the array type\n if (typeof lastMessage.content === \"string\") {\n lastMessage.content = [{ type: \"text\", text: lastMessage.content }];\n }\n // @ts-ignore\n lastMessage.content.at(-1).providerOptions = {\n anthropic: { cacheControl: { type: \"ephemeral\" } },\n };\n }\n\n console.log(JSON.stringify(coreMessages, null, 2));\n\n // Await the system prompts\n const system = await systemPromptPromise;\n const open_townie_prompt_additions = await openTowniePromptAdditionsPromise;\n\n const result = await streamText({\n model: model,\n messages: coreMessages,\n system: system + \"\\n\\n\" + open_townie_prompt_additions,\n tools: {\n str_replace_editor: getTextEditorTool(bearerToken, project, branchId),\n think: thinkTool,\n delete_file: makeDeleteTool({\n bearerToken,\n project,\n branch_id: branchId,\n }),\n },\n maxSteps: 20,\n abortSignal: c.req.raw.signal,\n });\n\n result.providerMetadata.then((x) => console.log(\"Provider metadata:\", x));\n\n return result.toDataStreamResponse({\n sendReasoning: true,\n experimental_sendFinish: true,\n getErrorMessage: (error) => {\n console.log(\"Error in toDataStreamResponse:\", error);\n if (error == null) {\n return \"unknown error\";\n }\n\n if (typeof error === \"string\") {\n return error;\n }\n\n if (error instanceof Error) {\n return error.message;\n }\n\n return JSON.stringify(error);\n },\n });\n});\n\nexport default app;\n",[],[189,196,243],[189,196],{"_107":252,"_99":253,"_153":254,"_155":190,"_156":139,"_157":191,"_159":121,"_109":255,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":256,"_102":289},"846c4f14-1653-11f0-9b3c-569c3dd06744","tools","2188f341-52ab-40aa-b4e6-b9240ae1a3af",["D",1744320840718],[257,265,273,281],{"_107":258,"_99":259,"_153":260,"_155":254,"_156":139,"_157":191,"_159":121,"_109":261,"_104":33,"_161":205,"_163":262,"_164":27,"_165":-5,"_166":263,"_102":264},"846c2778-1653-11f0-9b3c-569c3dd06744","delete.ts","bd87df2f-978c-41e7-91e5-cbd5668cb53e",["D",1744320840718],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { tool } from \"npm:ai\";\nimport { z } from \"npm:zod\";\n\n/**\n * Creates a tool for deleting files in a Val Town project\n */\nexport const makeDeleteTool = (\n { bearerToken, project, branch_id }: { bearerToken: string; project: any; branch_id: string },\n) =>\n tool({\n description:\n \"Use this tool to delete a file. It's also useful when you want to re-create a file from scratch: first delete the old file and then create the new file from scratch.\",\n parameters: z.object({\n path: z.string().describe(\"The file path to delete\"),\n }),\n execute: async ({ path }: { path: string }) => {\n const vt = new ValTown({ bearerToken });\n try {\n await vt.projects.files.delete(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n branch_id,\n });\n } catch (e: any) {\n return { \n type: 'error', \n message: \"Error deleting file: \" + e.message \n };\n }\n return { \n type: 'success', \n data: \"File deleted\" \n };\n },\n });",[],[189,253,259],{"_107":266,"_99":267,"_153":268,"_155":254,"_156":139,"_157":191,"_159":121,"_109":269,"_104":33,"_161":205,"_163":270,"_164":27,"_165":-5,"_166":271,"_102":272},"846c4348-1653-11f0-9b3c-569c3dd06744","index.ts","22cfe48a-03ab-4261-ace4-0ddf02b9865a",["D",1744320840718],"import { thinkTool } from \"./think.ts\";\nimport { makeDeleteTool } from \"./delete.ts\";\nimport { getTextEditorTool } from \"./text-editor.ts\";\n\nexport {\n thinkTool,\n makeDeleteTool,\n getTextEditorTool\n};",[],[189,253,267],{"_107":274,"_99":275,"_153":276,"_155":254,"_156":139,"_157":191,"_159":121,"_109":277,"_104":33,"_161":205,"_163":278,"_164":27,"_165":-5,"_166":279,"_102":280},"846c45b4-1653-11f0-9b3c-569c3dd06744","text-editor.ts","10c51d21-d6db-48d4-b378-7e5d40483a3d",["D",1744320840718],"import { anthropic } from \"npm:@ai-sdk/anthropic\";\nimport { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport fileWithLinesNumbers from \"../utils/fileWithLinesNumbers.ts\";\n\n/**\n * View a file or directory in a Val Town project\n */\nasync function view(\n vt: ValTown,\n project: any,\n branch_id: string | undefined,\n path: string,\n view_range: number[] | undefined,\n) {\n if (path.endsWith(\"/\")) {\n try {\n const files = await vt.projects.files.retrieve(project.id, {\n path: path.slice(0, -1),\n limit: 100,\n offset: 0,\n recursive: true,\n branch_id,\n });\n return {\n type: \"success\",\n data: files.data.map(file => file.path).join(\"\\n\"),\n };\n } catch (e: any) {\n return {\n type: \"error\",\n message: `Error listing directory: ${e.message}`,\n };\n }\n }\n try {\n const file = await vt.projects.files.getContent(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n branch_id,\n });\n const text = await file.text();\n if (!view_range) {\n return {\n type: \"success\",\n data: fileWithLinesNumbers(text),\n };\n }\n\n return {\n type: \"success\",\n data: fileWithLinesNumbers(text),\n };\n } catch (e: any) {\n console.log(e.stack);\n // likely due to a 404\n return {\n type: \"error\",\n message: \"File not found\",\n };\n }\n}\n\n/**\n * Replace a string in a file in a Val Town project\n */\nasync function str_replace(\n vt: ValTown,\n project: any,\n branch_id: string | undefined,\n path: string,\n old_str?: string,\n new_str?: string,\n) {\n if (old_str === undefined || new_str === undefined) {\n return {\n type: \"error\",\n message: \"What do you mean by replace with no old_str?\",\n };\n }\n\n try {\n const file = await vt.projects.files.getContent(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n branch_id,\n });\n console.log(\"Found file\");\n const text = await file.text();\n let matches = text.split(old_str).length - 1;\n\n if (matches === 0) {\n return {\n type: \"error\",\n message: \"No match found for replacement. Please check your text and try again.\",\n };\n }\n\n if (matches > 1) {\n return {\n type: \"error\",\n message: `Found ${matches} matches for replacement text. Please provide more context to make a unique match.`,\n };\n }\n\n let newText = text.replace(old_str, new_str);\n const resp = await vt.projects.files.update(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n content: newText,\n branch_id,\n });\n\n return {\n type: \"success\",\n data: \"String replaced successfully\",\n };\n } catch (e: any) {\n console.log(e.stack);\n // likely due to a 404\n return {\n type: \"error\",\n message: \"File not found\",\n };\n }\n}\n\n/**\n * Create a new file in a Val Town project\n */\nasync function create(vt: ValTown, project: any, branch_id: string | undefined, path: string, file_text?: string) {\n let type_: \"file\" | \"http\" | \"script\";\n if (path.includes(\"backend/index.ts\")) type_ = \"http\";\n if (file_text?.includes(\"export default app.fetch\")) type_ = \"http\";\n if ([\".ts\", \".tsx\", \".js\", \".jsx\"].some(ext => path.endsWith(ext))) {\n type_ = \"script\";\n } else {\n type_ = \"file\";\n }\n\n try {\n const resp = await vt.projects.files.create(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n content: file_text ?? \"\",\n type: type_, // For now, folks have to change the types in the UI\n branch_id,\n });\n\n return {\n type: \"success\",\n data: \"File created successfully\",\n };\n } catch (e) {\n console.log(e.stack);\n return {\n type: \"error\",\n message: \"Could not create file. It likely already exists.\",\n };\n }\n}\n\n/**\n * Insert a string at a specific line in a file in a Val Town project\n */\nasync function insert(\n vt: ValTown,\n project: any,\n branch_id: string | undefined,\n path: string,\n insert_line?: number,\n new_str?: string,\n) {\n try {\n const file = await vt.projects.files.getContent(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n branch_id,\n });\n console.log(\"found file\");\n const text = await file.text();\n\n const lines = text.split(\"\\n\");\n lines.splice(insert_line ?? 0, 0, new_str ?? \"\");\n\n const newText = lines.join(\"\\n\");\n const resp = await vt.projects.files.update(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n content: newText,\n branch_id,\n });\n\n return {\n type: \"success\",\n data: \"Text inserted successfully\",\n };\n } catch (e: any) {\n console.log(e.stack);\n // likely due to a 404\n return {\n type: \"error\",\n message: \"File not found\",\n };\n }\n}\n\n/**\n * Undo the last edit to a file in a Val Town project (not implemented)\n */\nasync function undo_edit(vt: ValTown, project: any, branch_id: string | undefined) {\n return {\n type: \"error\",\n message: \"Command unimplemented\",\n };\n}\n\n/**\n * Creates a text editor tool for editing files in a Val Town project\n */\nexport function getTextEditorTool(bearerToken: string, project: any, branch_id: string | undefined) {\n const vt = new ValTown({ bearerToken });\n return anthropic.tools.textEditor_20250124({\n execute: async ({\n command,\n path,\n file_text,\n insert_line,\n new_str,\n old_str,\n view_range,\n }) => {\n console.log({\n command,\n path,\n file_text,\n insert_line,\n new_str,\n old_str,\n view_range,\n });\n try {\n if (command === \"view\") return view(vt, project, branch_id, path, view_range);\n if (command === \"str_replace\") return str_replace(vt, project, branch_id, path, old_str, new_str);\n if (command === \"create\") return create(vt, project, branch_id, path, file_text);\n if (command === \"insert\") return insert(vt, project, branch_id, path, insert_line, new_str);\n if (command === \"undo_edit\") return undo_edit(vt, project, branch_id);\n else return {\n type: \"error\",\n message: \"Command unknown\",\n };\n } catch (e: any) {\n console.error(e);\n return {\n type: \"error\",\n message: e.stack,\n };\n }\n },\n });\n}",[],[189,253,275],{"_107":282,"_99":283,"_153":284,"_155":254,"_156":139,"_157":191,"_159":121,"_109":285,"_104":33,"_161":205,"_163":286,"_164":27,"_165":-5,"_166":287,"_102":288},"846c4ca8-1653-11f0-9b3c-569c3dd06744","think.ts","34bda2c3-e080-440a-8340-4caefccd2d9f",["D",1744320840718],"import { tool } from \"npm:ai\";\nimport { z } from \"npm:zod\";\n\n/**\n * Tool for thinking through complex problems without making external changes\n */\nexport const thinkTool = tool({\n description:\n \"Use the tool to think about something. It will not obtain new information or change the database, but just append the thought to the log. Use it when complex reasoning or some cache memory is needed.\",\n parameters: z.object({\n thought: z.string().describe(\"A thought to think about.\"),\n }),\n execute: async ({ thought }) => {\n return { \n type: 'success', \n data: \"Thought recorded\" \n };\n },\n});",[],[189,253,283],[189,253],{"_107":291,"_99":292,"_153":293,"_155":190,"_156":139,"_157":191,"_159":121,"_109":294,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":295,"_102":304},"846c52c0-1653-11f0-9b3c-569c3dd06744","utils","31bdfcda-b54e-4b6f-9909-239c7f3740e6",["D",1744320840718],[296],{"_107":297,"_99":298,"_153":299,"_155":293,"_156":139,"_157":191,"_159":121,"_109":300,"_104":33,"_161":205,"_163":301,"_164":27,"_165":-5,"_166":302,"_102":303},"846c50b8-1653-11f0-9b3c-569c3dd06744","fileWithLinesNumbers.ts","c6fb3547-60f3-4994-96a6-628c37d4a98a",["D",1744320840718],"export default function fileWithLineNumbers(text: string, view_range = []) {\n return [\n undefined, // Line numbers are 1-indexed\n ...text.split(\"\\n\"),\n ]\n .map((line, index) => index + \": \" + line)\n .slice(...view_range)\n .join(\"\\n\");\n}",[],[189,292,298],[189,292],{"_107":306,"_99":267,"_153":307,"_155":190,"_156":139,"_157":191,"_159":121,"_109":308,"_104":33,"_161":205,"_163":309,"_164":27,"_165":-5,"_166":310,"_102":311},"846c545a-1653-11f0-9b3c-569c3dd06744","ae6273f4-8010-48a9-919b-bc0b558cf868",["D",1744320840718],"import { Hono } from \"npm:hono\";\nimport createBranchApp from \"./routes/create-branch.ts\";\nimport createProjectApp from \"./routes/create-project.ts\";\nimport projectBranchesApp from \"./routes/project-branches.ts\";\nimport projectFilesApp from \"./routes/project-files.ts\";\nimport projectsLoaderApp from \"./routes/projects-loader.ts\";\nimport sendMessageApp from \"./routes/send-message.ts\";\n\nexport const app = new Hono();\n\napp.route(\"/send-message\", sendMessageApp);\napp.route(\"/projects-loader\", projectsLoaderApp);\napp.route(\"/project-files\", projectFilesApp);\napp.route(\"/project-branches\", projectBranchesApp);\napp.route(\"/create-branch\", createBranchApp);\napp.route(\"/create-project\", createProjectApp);\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[189,267],[189],{"_107":314,"_99":315,"_153":316,"_155":-5,"_156":139,"_157":191,"_159":121,"_109":317,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":318,"_102":544},"846d0008-1653-11f0-9b3c-569c3dd06744","frontend","baaad49c-72a1-4206-9f11-114f24355cad",["D",1744320840718],[319,482,506,536],{"_107":320,"_99":321,"_153":322,"_155":316,"_156":139,"_157":191,"_159":121,"_109":323,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":324,"_102":481},"846cea46-1653-11f0-9b3c-569c3dd06744","components","cc654aab-d43b-45d6-915c-e649dcf64901",["D",1744320840718],[325,333,342,350,359,367,376,384,392,400,408,416,424,432,441,449,457,465,473],{"_107":326,"_99":327,"_153":328,"_155":322,"_156":139,"_157":191,"_159":121,"_109":329,"_104":33,"_161":205,"_163":330,"_164":27,"_165":-5,"_166":331,"_102":332},"846c5950-1653-11f0-9b3c-569c3dd06744","ApiKeyWarning.tsx","4035004b-db8f-496c-a12f-963097b5f7fc",["D",1744320840718],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\n\ninterface ApiKeyWarningProps {\n show: boolean;\n}\n\nexport function ApiKeyWarning({ show }: ApiKeyWarningProps) {\n if (!show) return null;\n \n return (\n

Anthropic API Key Missing

Please log out and add your Anthropic API key to use this app.

\n );\n}",[],[315,321,327],{"_107":334,"_99":335,"_153":336,"_155":322,"_156":139,"_157":337,"_159":121,"_109":338,"_104":191,"_161":205,"_163":339,"_164":27,"_165":-5,"_166":340,"_102":341},"78950194-1654-11f0-92b6-569c3dd06744","App.tsx","ced627f5-21da-42e9-bca9-976f68e662d6",7,["D",1744321250449],"/** @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\";\nimport React, { useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { Chat } from \"./Chat.tsx\";\nimport { Login } from \"./Login.tsx\";\nimport { Projects } from \"./Projects.tsx\";\n\nfunction safeParse(s: string) {\n try {\n return JSON.parse(s);\n } catch (e) {\n return undefined;\n }\n}\n\nexport function App() {\n const [bearerToken, setBearerToken] = useLocalStorage(\"bearer\", \"\");\n const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage(\"anthropic_api_key\", \"\");\n const [groqApiKey, setGroqApiKey] = useLocalStorage(\"groq_api_key\", \"\");\n const [geminiApiKey, setGeminiApiKey] = useLocalStorage(\"gemini_api_key\", \"\");\n const [projectJSON, setProjectJSON] = useLocalStorage(\"project\", \"\");\n const [project, setProject_] = useState(safeParse(projectJSON));\n\n function setProject(p: any) {\n setProject_(p);\n setProjectJSON(JSON.stringify(p));\n }\n\n function handleLogout() {\n setBearerToken(\"\");\n // Keep the API keys in case the user wants to reuse them\n }\n\n return (\n

OpenTownie

\n \n Logout\n \n

\n {bearerToken\n ? project\n ? (\n \n )\n : \n : }\n

\n );\n}",[],[315,321,335],{"_107":343,"_99":344,"_153":345,"_155":322,"_156":139,"_157":191,"_159":121,"_109":346,"_104":33,"_161":205,"_163":347,"_164":27,"_165":-5,"_166":348,"_102":349},"846c7cb4-1653-11f0-9b3c-569c3dd06744","BranchControl.tsx","c4f42776-0d60-4f62-8978-41331280f306",["D",1744320840718],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { CreateBranch } from \"./CreateBranch.tsx\";\n\ninterface Branch {\n id: string;\n name: string;\n}\n\ninterface BranchControlProps {\n projectId: string;\n projectName: string;\n username: string;\n bearerToken: string;\n branchId: string | undefined;\n setBranchId: (branchId: string) => void;\n}\n\nexport function BranchControl({\n projectId,\n projectName,\n username,\n bearerToken,\n branchId,\n setBranchId,\n}: BranchControlProps) {\n const [branches, setBranches] = useState>([]);\n const [isLoadingBranches, setIsLoadingBranches] = useState(false);\n const [selectedBranchName, setSelectedBranchName] = useState(\"\");\n const [showCreateBranch, setShowCreateBranch] = useState(false);\n\n // Fetch branches when project changes\n useEffect(() => {\n if (!projectId) return;\n\n const fetchBranches = async () => {\n setIsLoadingBranches(true);\n try {\n const response = await fetch(`/api/project-branches?projectId=${projectId}`, {\n headers: {\n \"Authorization\": `Bearer ${bearerToken}`,\n },\n });\n\n if (!response.ok) {\n throw new Error(`Failed to fetch branches: ${response.statusText}`);\n }\n\n const data = await response.json();\n const fetchedBranches = data.branches || [];\n setBranches(fetchedBranches);\n\n // Check if the stored branchId is valid for this project\n const storedBranchIsValid = fetchedBranches.some((branch: Branch) => branch.id === branchId);\n\n // Only set a new branchId if there isn't a valid one already stored\n if (!storedBranchIsValid && fetchedBranches.length > 0) {\n // If branches are loaded and there's a \"main\" branch, select it by default\n const mainBranch = fetchedBranches.find((branch: Branch) => branch.name === \"main\");\n if (mainBranch) {\n setBranchId(mainBranch.id);\n setSelectedBranchName(mainBranch.name);\n } else {\n // Otherwise select the first branch\n setBranchId(fetchedBranches[0].id);\n setSelectedBranchName(fetchedBranches[0].name);\n }\n } else if (storedBranchIsValid) {\n // Set the selected branch name based on the stored branchId\n const selectedBranch = fetchedBranches.find((branch: Branch) => branch.id === branchId);\n if (selectedBranch) {\n setSelectedBranchName(selectedBranch.name);\n }\n }\n } catch (error) {\n console.error(\"Error fetching branches:\", error);\n } finally {\n setIsLoadingBranches(false);\n }\n };\n\n fetchBranches();\n }, [projectId, bearerToken, branchId, setBranchId]);\n\n // Handle branch selection change\n const handleBranchChange = (e: React.ChangeEvent) => {\n const newBranchId = e.target.value;\n setBranchId(newBranchId);\n\n // Update the selected branch name\n const selectedBranch = branches.find(branch => branch.id === newBranchId);\n if (selectedBranch) {\n setSelectedBranchName(selectedBranch.name);\n }\n };\n\n // Handle branch creation success\n const handleBranchCreated = (newBranchId: string) => {\n // Set the new branch as the selected branch\n setBranchId(newBranchId);\n\n // Close the create branch form\n setShowCreateBranch(false);\n\n // Refresh the branches list\n if (projectId) {\n const fetchBranches = async () => {\n try {\n const response = await fetch(`/api/project-branches?projectId=${projectId}`, {\n headers: {\n \"Authorization\": `Bearer ${bearerToken}`,\n },\n });\n\n if (!response.ok) {\n throw new Error(`Failed to fetch branches: ${response.statusText}`);\n }\n\n const data = await response.json();\n const fetchedBranches = data.branches || [];\n setBranches(fetchedBranches);\n\n // Update the selected branch name\n const selectedBranch = fetchedBranches.find((branch: Branch) => branch.id === newBranchId);\n if (selectedBranch) {\n setSelectedBranchName(selectedBranch.name);\n }\n } catch (error) {\n console.error(\"Error fetching branches:\", error);\n }\n };\n\n fetchBranches();\n }\n };\n\n // Construct the Val Town URL\n const getValTownUrl = () => {\n if (!username || !projectName || !selectedBranchName) return \"#\";\n return `https://val.town/x/${username}/${projectName}/branch/${selectedBranchName}/code`;\n };\n\n return (\n

\n {isLoadingBranches\n ? (\n

\n Loading branches...\n

\n )\n : (\n <>\n

\n \n {branches.length === 0 ? : (\n branches.map(branch => (\n \n ))\n )}\n \n setShowCreateBranch(true)}\n className=\"ml-1 p-1 rounded-lg text-xs bg-gray-100 hover:bg-gray-200 flex items-center justify-center w-6 h-6\"\n title=\"Create new branch\"\n >\n \n \n \n \n \n

\n \n \n \n \n \n \n Open\n \n \n )}\n

\n\n {/* Create Branch Form Popup */}\n {showCreateBranch && (\n

\n setShowCreateBranch(false)}\n />\n

\n )}\n

\n );\n}",[],[315,321,344],{"_107":351,"_99":352,"_153":353,"_155":322,"_156":139,"_157":354,"_159":121,"_109":355,"_104":191,"_161":205,"_163":356,"_164":27,"_165":-5,"_166":357,"_102":358},"6e353b06-1654-11f0-a1f5-569c3dd06744","Chat.tsx","e482c92e-8197-48b8-9c36-a206746cc550",6,["D",1744321233043],"/** @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\";\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\nimport { useChatLogic } from \"../hooks/useChatLogic.ts\";\nimport { useProjectFiles } from \"../hooks/useProjectFiles.ts\";\nimport { ChatHeader } from \"./ChatHeader.tsx\";\nimport { ProjectFiles } from \"./ProjectFiles.tsx\";\nimport { ChatMessages } from \"./ChatMessages.tsx\";\nimport { ChatInput, MODEL_OPTIONS, ModelOption } from \"./ChatInput.tsx\";\nimport { ApiKeyWarning } from \"./ApiKeyWarning.tsx\";\nimport { processFiles } from \"./ImageUpload.tsx\";\n\nexport function Chat({\n project,\n bearerToken,\n anthropicApiKey,\n groqApiKey,\n geminiApiKey,\n setProject,\n}: {\n project: any;\n bearerToken: string;\n anthropicApiKey: string;\n groqApiKey: string;\n geminiApiKey: string;\n setProject: (project: any) => void;\n}) {\n const [branchId, setBranchId] = useLocalStorage(\"branchId\", undefined);\n const [soundEnabled, setSoundEnabled] = useLocalStorage(\"soundEnabled\", true);\n const [selectedFiles, setSelectedFiles] = useState([]);\n const [images, setImages] = useState<(string | null)[]>([]);\n const [isDragging, setIsDragging] = useState(false);\n const [selectedModel, setSelectedModel] = useState(MODEL_OPTIONS[0]);\n\n // Use custom hook to fetch project files\n const {\n projectFiles,\n isLoadingFiles,\n error: filesError,\n } = useProjectFiles({\n projectId: project?.id,\n branchId,\n bearerToken,\n });\n\n const handleSelectionChange = (files: string[]) => {\n setSelectedFiles(files);\n };\n\n // Use the custom hook for chat logic\n const {\n messages,\n error,\n input,\n handleInputChange,\n handleSubmit,\n running,\n usages,\n messageEndTimes,\n } = useChatLogic({\n project,\n branchId,\n anthropicApiKey,\n groqApiKey,\n geminiApiKey,\n bearerToken,\n selectedFiles,\n images,\n soundEnabled,\n selectedModel,\n });\n\n // Handle drag events for the entire page\n const handleDragEnter = (e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setIsDragging(true);\n };\n\n const handleDragLeave = (e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n \n // Only set isDragging to false if we're leaving the document\n // This prevents flickering when dragging over child elements\n if (e.currentTarget.contains(e.relatedTarget as Node)) {\n return;\n }\n \n setIsDragging(false);\n };\n\n const handleDragOver = (e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const handleDrop = (e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setIsDragging(false);\n \n if (e.dataTransfer.files && !running) {\n processFiles(Array.from(e.dataTransfer.files), images, setImages);\n }\n };\n\n // Add and remove event listeners for the entire document\n useEffect(() => {\n const handleDocumentDragEnter = (e: DragEvent) => {\n e.preventDefault();\n if (e.dataTransfer?.types.includes('Files')) {\n setIsDragging(true);\n }\n };\n\n const handleDocumentDragLeave = (e: DragEvent) => {\n e.preventDefault();\n // Only set isDragging to false when leaving the document\n if (e.target === document.documentElement) {\n setIsDragging(false);\n }\n };\n\n const handleDocumentDragOver = (e: DragEvent) => {\n e.preventDefault();\n };\n\n const handleDocumentDrop = (e: DragEvent) => {\n e.preventDefault();\n setIsDragging(false);\n \n if (e.dataTransfer?.files && !running) {\n processFiles(Array.from(e.dataTransfer.files), images, setImages);\n }\n };\n\n // Add event listeners to the document\n document.addEventListener('dragenter', handleDocumentDragEnter);\n document.addEventListener('dragleave', handleDocumentDragLeave);\n document.addEventListener('dragover', handleDocumentDragOver);\n document.addEventListener('drop', handleDocumentDrop);\n\n // Clean up\n return () => {\n document.removeEventListener('dragenter', handleDocumentDragEnter);\n document.removeEventListener('dragleave', handleDocumentDragLeave);\n document.removeEventListener('dragover', handleDocumentDragOver);\n document.removeEventListener('drop', handleDocumentDrop);\n };\n }, [images, running, setImages]);\n\n // Check if the required API key for the selected model is available\n const isApiKeyMissing = () => {\n switch (selectedModel.provider) {\n case 'anthropic':\n return !anthropicApiKey;\n case 'groq':\n return !groqApiKey;\n case 'gemini':\n return !geminiApiKey;\n default:\n return false;\n }\n };\n\n return (\n

\n \n\n \n\n

\n \n \n \n\n \n

\n );\n}",[],[315,321,352],{"_107":360,"_99":361,"_153":362,"_155":322,"_156":139,"_157":191,"_159":121,"_109":363,"_104":33,"_161":205,"_163":364,"_164":27,"_165":-5,"_166":365,"_102":366},"846c8b50-1653-11f0-9b3c-569c3dd06744","ChatHeader.tsx","5c7a60d3-4739-4750-bd25-c4d308c8c1bd",["D",1744320840718],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\nimport { BranchControl } from \"./BranchControl.tsx\";\n\ninterface ChatHeaderProps {\n project: {\n id: string;\n name: string;\n username: string;\n };\n bearerToken: string;\n branchId: string | undefined;\n setBranchId: (branchId: string | undefined) => void;\n soundEnabled: boolean;\n setSoundEnabled: (enabled: boolean) => void;\n setProject: (project: any) => void;\n}\n\nexport function ChatHeader({\n project,\n bearerToken,\n branchId,\n setBranchId,\n soundEnabled,\n setSoundEnabled,\n setProject,\n}: ChatHeaderProps) {\n return (\n

\n setProject(undefined)}\n >\n ←\n \n

{project.name}

\n\n \n\n setSoundEnabled(!soundEnabled)}\n title={soundEnabled ? \"Mute notification sound\" : \"Enable notification sound\"}\n >\n {soundEnabled ? \"🔔\" : \"🔕\"}\n \n

\n );\n}",[],[315,321,361],{"_107":368,"_99":369,"_153":370,"_155":322,"_156":139,"_157":371,"_159":121,"_109":372,"_104":354,"_161":205,"_163":373,"_164":27,"_165":-5,"_166":374,"_102":375},"a0b6673a-1659-11f0-9436-569c3dd06744","ChatInput.tsx","7cd7bf69-ca06-4fe0-b666-a1dc4b627227",49,["D",1744323465257],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, {\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0?dev\";\nimport { ImageUpload, processFiles } from \"./ImageUpload.tsx\";\n\nexport interface ModelOption {\n id: string;\n name: string;\n provider: \"anthropic\" | \"groq\" | \"gemini\";\n}\n\nexport const MODEL_OPTIONS: ModelOption[] = [\n {\n id: \"claude-3-7-sonnet-20250219\",\n name: \"Claude 3.7 Sonnet\",\n provider: \"anthropic\",\n },\n { id: \"llama3-8b-8192\", name: \"Llama 3 8B\", provider: \"groq\" },\n {\n id: \"meta-llama/llama-4-maverick-17b-128e-instruct\",\n name: \"Llama 4 Maverick Instruct\",\n provider: \"groq\",\n },\n {\n id: \"meta-llama/llama-4-scout-17b-16e-instruct\",\n name: \"Llama 4 Scout Instruct\",\n provider: \"groq\",\n },\n { id: \"qwen-qwq-32b\", name: \"Qwen QWQ 32B\", provider: \"groq\" },\n {\n id: \"deepseek-r1-distill-qwen-32b\",\n name: \"DeepSeek R1 Distill Qwen 32B\",\n provider: \"groq\",\n },\n { id: \"gemini-2.0-flash\", name: \"Gemini 2.0 Flash\", provider: \"gemini\" },\n];\n\ninterface ChatInputProps {\n input: string;\n handleInputChange: (e: React.ChangeEvent) => void;\n handleSubmit: (e: React.FormEvent) => void;\n running: boolean;\n images: (string | null)[];\n setImages: React.Dispatch>;\n isDragging: boolean;\n selectedModel: ModelOption;\n setSelectedModel: React.Dispatch>;\n}\n\nexport function ChatInput({\n input,\n handleInputChange,\n handleSubmit,\n running,\n images,\n setImages,\n isDragging,\n selectedModel,\n setSelectedModel,\n}: ChatInputProps) {\n // State to detect if the user is on a mobile device\n const [isMobile, setIsMobile] = useState(false);\n const fileInputRef = useRef(null);\n\n // Check if user is on mobile when component mounts\n useEffect(() => {\n const checkMobile = () => {\n const userAgent =\n navigator.userAgent || navigator.vendor || (window as any).opera;\n const mobileRegex =\n /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i;\n setIsMobile(mobileRegex.test(userAgent.toLowerCase()));\n };\n\n checkMobile();\n\n // Also check on resize, as user might switch device orientation\n window.addEventListener(\"resize\", checkMobile);\n return () => window.removeEventListener(\"resize\", checkMobile);\n }, []);\n\n const handleFormSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n const validImages = images.filter(\n (img): img is string => typeof img === \"string\"\n );\n console.log(\"Submitting with images:\", validImages);\n if (input.trim() || validImages.length > 0) {\n handleSubmit(e);\n setImages([]);\n }\n };\n\n const handleProcessFiles = (files: File[]) => {\n processFiles(files, images, setImages);\n };\n\n const handleModelChange = (e: React.ChangeEvent) => {\n const modelId = e.target.value;\n const model = MODEL_OPTIONS.find((m) => m.id === modelId);\n if (model) {\n setSelectedModel(model);\n }\n };\n\n return (\n

\n {images.length > 0 && (\n \n )}\n\n

\n {\n handleInputChange(e);\n }}\n onKeyDown={(e) => {\n // Only perform Enter key submission on desktop, not on mobile\n if (e.key === \"Enter\" && !e.shiftKey && !isMobile) {\n e.preventDefault();\n if (input.trim() || images.filter(Boolean).length > 0) {\n handleFormSubmit(e as any);\n }\n }\n }}\n rows={3}\n style={{\n WebkitAppearance:\n \"none\" /* Ensures resize handle works on Safari mobile */,\n resize: \"vertical\" /* Explicitly set resize to vertical */,\n }}\n />\n\n {/* Hidden file input for the attach button */}\n {\n if (e.target.files) {\n handleProcessFiles(Array.from(e.target.files));\n }\n }}\n accept=\"image/*\"\n multiple\n className=\"hidden\"\n />\n

\n\n {running ? null : (\n \n Send\n \n )}\n\n {running && (\n {\n const customStop = (window as any).customStopRef?.current;\n if (typeof customStop === \"function\") {\n customStop();\n }\n }}\n className=\"px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg\"\n >\n Stop\n \n )}\n

\n\n {/* Model selector dropdown */}\n {!running && (\n

\n {\n if (fileInputRef.current) {\n fileInputRef.current.click();\n }\n }}\n title=\"Attach images\"\n >\n 📎 Attach images\n \n

\n\n

\n \n Model:\n \n \n {MODEL_OPTIONS.map((model) => (\n \n ))}\n \n

\n )}\n\n {/* Drag overlay indicator */}\n {isDragging && (\n

📁

Drop images here

\n )}\n \n );\n}\n",[],[315,321,369],{"_107":377,"_99":378,"_153":379,"_155":322,"_156":139,"_157":191,"_159":121,"_109":380,"_104":33,"_161":205,"_163":381,"_164":27,"_165":-5,"_166":382,"_102":383},"846c9294-1653-11f0-9b3c-569c3dd06744","ChatMessages.tsx","d018a6d8-2449-4016-a240-8fc8da8fd2b0",["D",1744320840718],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\nimport { MessageItem } from \"./MessageItem.tsx\";\nimport { ErrorDisplay } from \"./ErrorDisplay.tsx\";\n\ninterface ChatMessagesProps {\n messages: any[];\n usages: Record;\n messageEndTimes: Record;\n running: boolean;\n error: Error | null;\n}\n\nexport function ChatMessages({\n messages,\n usages,\n messageEndTimes,\n running,\n error,\n}: ChatMessagesProps) {\n return (\n

\n {messages.map((message) => (\n \n ))}\n {error && }\n

\n );\n}",[],[315,321,378],{"_107":385,"_99":386,"_153":387,"_155":322,"_156":139,"_157":191,"_159":121,"_109":388,"_104":33,"_161":205,"_163":389,"_164":27,"_165":-5,"_166":390,"_102":391},"846c9488-1653-11f0-9b3c-569c3dd06744","CreateBranch.tsx","11e344dc-b596-49d7-bd34-8b8c5e247bb6",["D",1744320840718],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?dev\";\n\ninterface CreateBranchProps {\n projectId: string;\n bearerToken: string;\n onBranchCreated: (branchId: string) => void;\n onCancel: () => void;\n}\n\nexport function CreateBranch({\n projectId,\n bearerToken,\n onBranchCreated,\n onCancel,\n}: CreateBranchProps) {\n const [branchName, setBranchName] = useState(\"\");\n const [isCreating, setIsCreating] = useState(false);\n const [error, setError] = useState(null);\n\n // Validate branch name (only letters, numbers, and dashes)\n const isValidBranchName = (name: string) => {\n const branchNameRegex = /^[a-zA-Z0-9-]+$/;\n return branchNameRegex.test(name);\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n // Validate branch name\n if (!branchName.trim()) {\n setError(\"Branch name cannot be empty\");\n return;\n }\n \n if (!isValidBranchName(branchName)) {\n setError(\"Branch name can only contain letters, numbers, and dashes\");\n return;\n }\n \n setIsCreating(true);\n setError(null);\n \n try {\n const response = await fetch(\"/api/create-branch\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${bearerToken}`,\n },\n body: JSON.stringify({\n projectId,\n branchName,\n }),\n });\n \n const data = await response.json();\n \n if (!response.ok) {\n throw new Error(data.error || \"Failed to create branch\");\n }\n \n // Call the callback with the new branch ID\n onBranchCreated(data.branch.id);\n } catch (err) {\n setError(err instanceof Error ? err.message : \"An error occurred\");\n } finally {\n setIsCreating(false);\n }\n };\n \n return (\n

Create New Branch

\n \n \n

\n );\n}",[],[315,321,386],{"_107":393,"_99":394,"_153":395,"_155":322,"_156":139,"_157":191,"_159":121,"_109":396,"_104":33,"_161":205,"_163":397,"_164":27,"_165":-5,"_166":398,"_102":399},"846c97da-1653-11f0-9b3c-569c3dd06744","CreateProject.tsx","1acc1411-cf7c-458a-9132-e20254d86115",["D",1744320840718],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\n\nexport function CreateProjectModal({\n isOpen,\n onClose,\n bearerToken,\n onProjectCreated,\n}: {\n isOpen: boolean;\n onClose: () => void;\n bearerToken: string;\n onProjectCreated: () => void;\n}) {\n const [projectName, setProjectName] = useState(\"\");\n const [privacy, setPrivacy] = useState<\"public\" | \"unlisted\" | \"private\">(\"public\");\n const [isCreating, setIsCreating] = useState(false);\n const [error, setError] = useState(\"\");\n\n if (!isOpen) return null;\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n\n if (!projectName.trim()) {\n setError(\"Project name is required\");\n return;\n }\n\n setIsCreating(true);\n setError(\"\");\n\n try {\n const response = await fetch(\"/api/create-project\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": \"Bearer \" + bearerToken,\n },\n body: JSON.stringify({\n name: projectName,\n privacy: privacy,\n }),\n });\n\n const data = await response.json();\n\n if (!response.ok) {\n throw new Error(data.error || \"Failed to create project\");\n }\n\n onProjectCreated();\n onClose();\n } catch (err) {\n setError(err instanceof Error ? err.message : \"An error occurred\");\n } finally {\n setIsCreating(false);\n }\n };\n\n return (\n

Create New Project

\n \n ✕\n \n

\n\n

\n \n Project Name\n \n setProjectName(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 transition-colors duration-200\"\n placeholder=\"Enter project name\"\n disabled={isCreating}\n />\n

\n\n

\n \n Privacy\n \n

\n setPrivacy(\"public\")}\n className=\"h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300\"\n disabled={isCreating}\n />\n \n Public (Visible to everyone)\n \n

\n\n

\n setPrivacy(\"unlisted\")}\n className=\"h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300\"\n disabled={isCreating}\n />\n \n Unlisted (Accessible with link, not listed publicly)\n \n

\n\n

\n setPrivacy(\"private\")}\n className=\"h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300\"\n disabled={isCreating}\n />\n \n Private (Only visible to you)\n \n

\n\n {error && (\n

\n {error}\n

\n )}\n\n

\n \n Cancel\n \n \n {isCreating\n ? (\n

\n Creating...\n

\n )\n : (\n \"Create Project\"\n )}\n \n

\n );\n}",[],[315,321,394],{"_107":401,"_99":402,"_153":403,"_155":322,"_156":139,"_157":191,"_159":121,"_109":404,"_104":33,"_161":205,"_163":405,"_164":27,"_165":-5,"_166":406,"_102":407},"846ca144-1653-11f0-9b3c-569c3dd06744","DirectoryTree.tsx","bea199d6-0519-4b1d-9d39-8ee7f2cea714",["D",1744320840718],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\n\n// Type definitions\ninterface FileNode {\n path: string;\n type: \"file\" | \"directory\";\n name: string;\n children?: FileNode[];\n checked?: boolean;\n}\n\ninterface DirectoryTreeProps {\n files: Array<{ path: string; type: string }>;\n onSelectionChange?: (selectedFiles: string[]) => void;\n}\n\n// Helper function to build a tree structure from flat file list\nconst buildFileTree = (files: Array<{ path: string; type: string }>): FileNode[] => {\n const root: FileNode[] = [];\n const map: Record = {};\n\n // Create all parent directories first\n const ensureParentDirectories = (filePath: string) => {\n const parts = filePath.split(\"/\").filter(Boolean);\n let currentPath = \"\";\n\n // Create each directory in the path if it doesn't exist\n for (let i = 0; i < parts.length - 1; i++) {\n const part = parts[i];\n const prevPath = currentPath;\n currentPath = currentPath ? `${currentPath}/${part}` : `/${part}`;\n\n // Create directory if it doesn't exist in our map\n if (!map[currentPath]) {\n const dirNode: FileNode = {\n path: currentPath,\n type: \"directory\",\n name: part,\n children: [],\n checked: false,\n };\n map[currentPath] = dirNode;\n\n // Add to parent or root\n if (prevPath) {\n if (map[prevPath]) {\n // Check if this directory is already a child of the parent before adding\n if (!map[prevPath].children!.some(child => child.path === currentPath)) {\n map[prevPath].children!.push(dirNode);\n }\n }\n } else {\n // Check if this directory is already in the root before adding\n if (!root.some(node => node.path === currentPath)) {\n root.push(dirNode);\n }\n }\n }\n }\n\n return parts.length > 0 ? \"/\" + parts.slice(0, parts.length - 1).join(\"/\") : \"\";\n };\n\n // Process all files and directories\n files.forEach(file => {\n const path = file.path.startsWith(\"/\") ? file.path : `/${file.path}`;\n const parts = path.split(\"/\").filter(Boolean);\n const name = parts[parts.length - 1] || path;\n const type = file.type === \"directory\" ? \"directory\" : \"file\";\n\n // Skip if this node already exists (prevents duplicates)\n if (map[path]) return;\n\n // Create the node\n const node: FileNode = {\n path,\n type,\n name,\n children: type === \"directory\" ? [] : undefined,\n checked: false,\n };\n\n map[path] = node;\n\n // If it's the root level, add to root array\n if (parts.length === 1) {\n if (!root.some(n => n.path === path)) {\n root.push(node);\n }\n return;\n }\n\n // Ensure all parent directories exist\n const parentPath = ensureParentDirectories(path);\n\n // Add this node to its parent\n if (parentPath && map[parentPath]) {\n if (!map[parentPath].children!.some(child => child.path === path)) {\n map[parentPath].children!.push(node);\n }\n }\n });\n\n // Sort each level - directories first, then alphabetically\n const sortNodes = (nodes: FileNode[]) => {\n nodes.sort((a, b) => {\n if (a.type === \"directory\" && b.type === \"file\") return -1;\n if (a.type === \"file\" && b.type === \"directory\") return 1;\n return a.name.localeCompare(b.name);\n });\n\n nodes.forEach(node => {\n if (node.children && node.children.length > 0) {\n sortNodes(node.children);\n }\n });\n };\n\n sortNodes(root);\n return root;\n};\n\n// Component to render a single tree node\nconst TreeNode = ({\n node,\n level = 0,\n onCheck,\n checkedState,\n}: {\n node: FileNode;\n level?: number;\n onCheck: (path: string, checked: boolean) => void;\n checkedState: Record;\n}) => {\n const [expanded, setExpanded] = useState(level < 2);\n const hasChildren = node.children && node.children.length > 0;\n const isChecked = checkedState[node.path] || false;\n\n const handleToggle = () => {\n if (hasChildren) {\n setExpanded(!expanded);\n }\n };\n\n const handleCheckChange = (e: React.ChangeEvent) => {\n onCheck(node.path, e.target.checked);\n };\n\n const handleNodeClick = (e: React.MouseEvent) => {\n // Don't toggle checkbox if clicking on the expand/collapse arrow\n if ((e.target as HTMLElement).classList.contains(\"toggle-expand\")) {\n return;\n }\n\n // Toggle the checkbox\n onCheck(node.path, !isChecked);\n };\n\n return (\n

\n \n e.stopPropagation()}\n />\n\n {hasChildren && (\n {\n e.stopPropagation();\n handleToggle();\n }}\n >\n {expanded ? \"▼\" : \"►\"}\n \n )}\n\n \n {node.type === \"directory\" ? \"📁 \" : \"📄 \"}\n {node.name}\n \n

\n\n {expanded && hasChildren && (\n

\n {node.children!.map((child, index) => (\n \n ))}\n

\n )}\n \n );\n};\n\nexport function DirectoryTree({ files, onSelectionChange }: DirectoryTreeProps) {\n const [treeData, setTreeData] = useState([]);\n const [checkedState, setCheckedState] = useState>({});\n const [selectedFiles, setSelectedFiles] = useState([]);\n\n useEffect(() => {\n if (files && files.length > 0) {\n setTreeData(buildFileTree(files));\n }\n }, [files]);\n\n // Helper function to convert numbers to words (for small numbers)\n const numberToWords = (num: number): string => {\n const words = [\n \"zero\",\n \"one\",\n \"two\",\n \"three\",\n \"four\",\n \"five\",\n \"six\",\n \"seven\",\n \"eight\",\n \"nine\",\n \"ten\",\n ];\n\n // Capitalize first letter\n if (num >= 0 && num <= 10) {\n const word = words[num];\n return word.charAt(0).toUpperCase() + word.slice(1);\n }\n\n // For larger numbers, just return the number\n return num.toString();\n };\n\n // Generate a summary of selected files\n const getSelectionSummary = () => {\n if (selectedFiles.length === 0) {\n return \"No files included in the context window\";\n }\n\n // Get file names from paths (last part of the path)\n const fileNames = selectedFiles.map(path => {\n const parts = path.split(\"/\").filter(Boolean);\n return parts[parts.length - 1];\n });\n\n // Limit the number of files to show in the summary\n const maxFilesToShow = 3;\n const displayNames = fileNames.slice(0, maxFilesToShow);\n const remainingCount = fileNames.length - maxFilesToShow;\n\n let summary = \"Files included in the context window: \";\n\n if (displayNames.length > 0) {\n summary += displayNames.join(\", \");\n if (remainingCount > 0) {\n summary += ` and ${remainingCount} more...`;\n }\n }\n\n return summary;\n };\n\n const handleCheck = (path: string, checked: boolean) => {\n // Update the checked state for this node\n const newCheckedState = { ...checkedState, [path]: checked };\n\n // Find the node in the tree\n const findNode = (nodes: FileNode[], targetPath: string): FileNode | null => {\n for (const node of nodes) {\n if (node.path === targetPath) return node;\n if (node.children) {\n const found = findNode(node.children, targetPath);\n if (found) return found;\n }\n }\n return null;\n };\n\n // Update children recursively\n const updateChildren = (node: FileNode, isChecked: boolean) => {\n if (node.children) {\n node.children.forEach(child => {\n newCheckedState[child.path] = isChecked;\n updateChildren(child, isChecked);\n });\n }\n };\n\n const node = findNode(treeData, path);\n if (node) {\n updateChildren(node, checked);\n }\n\n setCheckedState(newCheckedState);\n\n // Update selected files list\n const newSelectedFiles = Object.entries(newCheckedState)\n .filter(([_, isChecked]) => isChecked)\n .map(([path]) => path);\n\n setSelectedFiles(newSelectedFiles);\n\n // Notify parent component of selection change\n if (onSelectionChange) {\n onSelectionChange(newSelectedFiles);\n }\n };\n\n return (\n

\n {getSelectionSummary()}\n

\n {treeData.length > 0\n ? (\n

\n {treeData.map((node) => (\n \n ))}\n

\n )\n :

No files found

}\n

\n );\n}",[],[315,321,402],{"_107":409,"_99":410,"_153":411,"_155":322,"_156":139,"_157":191,"_159":121,"_109":412,"_104":33,"_161":205,"_163":413,"_164":27,"_165":-5,"_166":414,"_102":415},"846cad38-1653-11f0-9b3c-569c3dd06744","ErrorDisplay.tsx","fc463878-5fc2-4eca-898a-48b2c57c95cb",["D",1744320840718],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\n\ninterface ErrorDisplayProps {\n error: Error | null;\n}\n\nexport function ErrorDisplay({ error }: ErrorDisplayProps) {\n if (!error) return null;\n \n return (\n

{error.stack}

\n );\n}",[],[315,321,410],{"_107":417,"_99":418,"_153":419,"_155":322,"_156":139,"_157":191,"_159":121,"_109":420,"_104":33,"_161":205,"_163":421,"_164":27,"_165":-5,"_166":422,"_102":423},"846caf0e-1653-11f0-9b3c-569c3dd06744","ImageUpload.tsx","8c154396-301f-47a8-bf4f-1582e8831c60",["D",1744320840718],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useRef, useState } from \"https://esm.sh/react@18.2.0?dev\";\n\n// Maximum number of images that can be uploaded\nexport const PROMPT_IMAGE_LIMIT = 5;\n\ninterface ImageUploadProps {\n images: (string | null)[];\n setImages: (images: (string | null)[]) => void;\n processFiles: (files: File[]) => void;\n}\n\nexport function ImageUpload({ images, setImages, processFiles }: ImageUploadProps) {\n const fileInputRef = useRef(null);\n\n // Handle file selection\n const handleFileChange = (e: React.ChangeEvent) => {\n if (e.target.files) {\n processFiles(Array.from(e.target.files));\n }\n };\n\n // Handle removing an image\n const removeImage = (index: number) => {\n const newImages = [...images];\n newImages.splice(index, 1);\n setImages(newImages);\n };\n\n // Check if we've reached the image limit\n const isAtLimit = images.filter(Boolean).length >= PROMPT_IMAGE_LIMIT;\n\n return (\n

\n {/* Image previews */}\n {images.length > 0 && (\n

\n {images.map((image, index) => (\n

\n {image ? (\n

\n removeImage(index)}\n title=\"Remove image\"\n >\n ×\n \n

\n ) : (\n

\n )}\n

\n ))}\n

\n )}\n\n {/* Hidden file input */}\n \n \n {/* Expose the file input ref for external access */}\n {React.cloneElement(<>, { fileInputRef })}\n

\n );\n}\n\n// Process files utility function - moved from the component to be reusable\nexport const processFiles = async (files: File[], images: (string | null)[], setImages: (images: (string | null)[]) => void) => {\n // Filter for image files only\n const imageFiles = files.filter(file => file.type.startsWith('image/'));\n \n // Limit the number of images\n const filesToProcess = imageFiles.slice(0, PROMPT_IMAGE_LIMIT - images.filter(Boolean).length);\n \n if (filesToProcess.length === 0) return;\n\n // Add null placeholders for loading state\n const newImages = [...images, ...Array(filesToProcess.length).fill(null)];\n setImages(newImages);\n\n // Process each file\n const processedImages = await Promise.all(\n filesToProcess.map(async (file) => {\n return await readFileAsDataURL(file);\n })\n );\n\n // Replace null placeholders with actual images\n const updatedImages = [...images];\n processedImages.forEach((dataUrl, index) => {\n updatedImages[images.length + index] = dataUrl;\n });\n \n setImages(updatedImages.slice(0, PROMPT_IMAGE_LIMIT));\n};\n\n// Convert file to data URL\nconst readFileAsDataURL = (file: File): Promise => {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => {\n const result = reader.result as string;\n console.log(\"Image loaded, size:\", result.length, \"bytes\");\n resolve(result);\n };\n reader.onerror = reject;\n reader.readAsDataURL(file);\n });\n};\n\n// Component to display images in messages\nexport function ImagePreview({ images }: { images: string[] }) {\n const [expandedImage, setExpandedImage] = useState(null);\n\n if (!images || images.length === 0) return null;\n\n return (\n

\n {images.map((image, index) => (\n

\n setExpandedImage(image)}\n />\n

\n ))}\n

\n\n {/* Modal for expanded image */}\n {expandedImage && (\n

setExpandedImage(null)}\n >\n

\n \n

\n )}\n

\n );\n}",[],[315,321,418],{"_107":425,"_99":426,"_153":427,"_155":322,"_156":139,"_157":191,"_159":121,"_109":428,"_104":33,"_161":205,"_163":429,"_164":27,"_165":-5,"_166":430,"_102":431},"846cb3e6-1653-11f0-9b3c-569c3dd06744","LoadingSpinner.tsx","6b4f9fd9-bc01-4908-93b3-67e56990869c",["D",1744320840718],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\n\nexport const LoadingSpinner = () => (\n

\n);",[],[315,321,426],{"_107":433,"_99":434,"_153":435,"_155":322,"_156":139,"_157":436,"_159":121,"_109":437,"_104":191,"_161":205,"_163":438,"_164":27,"_165":-5,"_166":439,"_102":440},"276616f8-1656-11f0-9f99-569c3dd06744","Login.tsx","c4a63b2b-b3fc-4182-950b-30f982530ea5",9,["D",1744321973216],"/** @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\";\nimport React from \"https://esm.sh/react@18.2.0?dev\";\n\ninterface LoginProps {\n setAnthropicApiKey: (key: string) => void;\n setGroqApiKey: (key: string) => void;\n setGeminiApiKey: (key: string) => void;\n}\n\nexport function Login({\n setAnthropicApiKey,\n setGroqApiKey,\n setGeminiApiKey,\n}: LoginProps) {\n const [bearerToken, setBearerToken] = useLocalStorage(\"bearer\", \"\");\n const [anthropicApiKey, setAnthropicApiKeyLocal] = useLocalStorage(\n \"anthropic_api_key\",\n \"\"\n );\n const [groqApiKey, setGroqApiKeyLocal] = useLocalStorage(\"groq_api_key\", \"\");\n const [geminiApiKey, setGeminiApiKeyLocal] = useLocalStorage(\n \"gemini_api_key\",\n \"\"\n );\n\n React.useEffect(() => {\n setAnthropicApiKey(anthropicApiKey);\n }, [anthropicApiKey, setAnthropicApiKey]);\n\n React.useEffect(() => {\n setGroqApiKey(groqApiKey);\n }, [groqApiKey, setGroqApiKey]);\n\n React.useEffect(() => {\n setGeminiApiKey(geminiApiKey);\n }, [geminiApiKey, setGeminiApiKey]);\n\n return (\n

\n Welcome to OpenTownie\n

\n Your AI assistant for Val Town projects\n

\n\n

\n \n

\n \n Val Town API Token\n \n \n \n \n

\n Requires{\" \"}\n \n projects:write\n {\" \"}\n and{\" \"}\n \n users:read\n {\" \"}\n permissions\n

\n \n

\n setBearerToken(e.target.value)}\n placeholder=\"vtwn-xxxx\"\n autoComplete=\"off\"\n className=\"w-full p-3 pl-10 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all duration-200 shadow-sm\"\n />\n

\n \n \n \n

\n\n

\n \n

\n Anthropic API Key\n \n (Get one here)\n \n

\n \n

\n setAnthropicApiKeyLocal(e.target.value)}\n placeholder=\"sk-ant-xxxxx\"\n autoComplete=\"off\"\n className=\"w-full p-3 pl-10 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all duration-200 shadow-sm\"\n />\n

\n \n \n \n

\n\n

\n \n

\n Gemini API Key\n \n (Get one here)\n \n

\n \n

\n setGeminiApiKeyLocal(e.target.value)}\n placeholder=\"AIzaSy...\"\n autoComplete=\"off\"\n className=\"w-full p-3 pl-10 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all duration-200 shadow-sm\"\n />\n

\n \n \n \n

\n\n

\n \n

\n Groq API Key\n \n (Get one here)\n \n

\n \n

\n setGroqApiKeyLocal(e.target.value)}\n placeholder=\"gsk_xxxx\"\n autoComplete=\"off\"\n className=\"w-full p-3 pl-10 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all duration-200 shadow-sm\"\n />\n

\n \n \n \n

\n\n \n Login\n \n\n

\n Your API keys are stored locally in your browser and never stored on\n our servers.\n

\n );\n}\n",[],[315,321,434],{"_107":442,"_99":443,"_153":444,"_155":322,"_156":139,"_157":191,"_159":121,"_109":445,"_104":33,"_161":205,"_163":446,"_164":27,"_165":-5,"_166":447,"_102":448},"846cbb48-1653-11f0-9b3c-569c3dd06744","MessageItem.tsx","e09f45c0-3037-470a-8f00-c0d5b5272187",["D",1744320840718],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\nimport { MessagePart } from \"./MessagePart.tsx\";\nimport { MessageTimer } from \"./MessageTimer.tsx\";\nimport { calculateCost } from \"../utils/costCalculator.ts\";\n\n// Component for the loading spinner\nconst LoadingSpinner = () => (\n

\n);\n\ninterface MessageItemProps {\n message: {\n id: string;\n role: string;\n parts: any[];\n createdAt?: number;\n };\n usages: Record;\n messageEndTimes: Record;\n running: boolean;\n}\n\nexport function MessageItem({ message, usages, messageEndTimes, running }: MessageItemProps) {\n return (\n \n

\n {message.parts.map((part, index) => (\n

\n \n

\n ))}\n

\n {/* Show timer for assistant messages using createdAt for start time */}\n {message.role === \"assistant\" && message.createdAt && (\n \n )}\n {usages[message.id]\n ? (\n

\n {calculateCost(usages[message.id])}\n

\n            {JSON.stringify(usages[message.id], null, 2)}\n

\n )\n : undefined}\n {/* Show loading spinner for messages without an end time and only if not manually stopped */}\n {message.role === \"assistant\" && !messageEndTimes[message.id] && running && }\n \n );\n}",[],[315,321,443],{"_107":450,"_99":451,"_153":452,"_155":322,"_156":139,"_157":191,"_159":121,"_109":453,"_104":33,"_161":205,"_163":454,"_164":27,"_165":-5,"_166":455,"_102":456},"846cc048-1653-11f0-9b3c-569c3dd06744","MessagePart.tsx","5b37499a-d503-439e-bf23-443ba3463806",["D",1744320840718],"/** @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\n// Helper function to detect language from file path\nconst detectLanguage = (path: string): string => {\n if (!path) return \"text\";\n const extension = path.split(\".\").pop()?.toLowerCase();\n\n const extensionMap: Record = {\n \"js\": \"javascript\",\n \"jsx\": \"jsx\",\n \"ts\": \"typescript\",\n \"tsx\": \"tsx\",\n \"html\": \"html\",\n \"css\": \"css\",\n \"json\": \"json\",\n \"md\": \"markdown\",\n };\n\n return extensionMap[extension || \"\"] || \"text\";\n};\n\n// Component to render a diff view for str_replace operations\nconst DiffView = ({ oldStr, newStr }: { oldStr: string; newStr: string }) => {\n return (\n

- Removed

\n {oldStr || \"(empty)\"}\n

\n\n

+ Added

\n {newStr || \"(empty)\"}\n

\n );\n};\n\n// Helper to create markdown code blocks\nconst CodeBlock = ({ language, content }: { language: string; content: string }) => {\n // Use the triple backtick syntax for code blocks\n const codeBlock = \"```\" + language + \"\\n\" + content + \"\\n```\";\n return {codeBlock};\n};\n\n// Helper to check if a tool response is an error\nconst isErrorResponse = (response: any): boolean => {\n console.log(response);\n if (!response) return false;\n\n if (typeof response === \"object\" && response.type === \"error\") {\n return true;\n }\n\n return false;\n};\n\n// Helper to extract error message from response\nconst getErrorMessage = (response: any): string => {\n if (!response) return \"Unknown error\";\n\n if (typeof response === \"object\" && response.type === \"error\") {\n return response.message || \"Unknown error\";\n }\n\n return \"Unknown error\";\n};\n\n// Helper to extract success data from response\nconst getSuccessData = (response: any): any => {\n if (!response) return null;\n\n if (typeof response === \"object\" && response.type === \"success\") {\n return response.data;\n }\n\n // Legacy format - assume the entire response is the data\n return response;\n};\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, result } = part.toolInvocation;\n const isError = isErrorResponse(result);\n\n // Properly conjugate command verbs to present participle form\n const getCommandVerb = (command: string): string => {\n switch (command) {\n case \"view\":\n return \"viewed\";\n case \"create\":\n return \"created\";\n case \"str_replace\":\n return \"replaced\";\n case \"insert\":\n return \"inserted\";\n case \"undo_edit\":\n return \"undid\";\n default:\n return command + \"-ed\"; // Fallback for unknown commands\n }\n };\n\n let name = toolName === \"str_replace_editor\"\n ? getCommandVerb(args.command) + \" \" + args.path + (args.view_range ? ` [${args.view_range.join(\", \")}]` : \"\")\n : toolName;\n\n // Format based on tool type\n const renderToolContent = () => {\n // If there's an error, show the error message\n if (isError) {\n return (\n

\n {getErrorMessage(result)}\n

\n );\n }\n\n // Handle the \"think\" tool specially - using default font size\n if (toolName === \"think\" && args.thought) {\n return (\n

\n {args.thought}\n

\n );\n }\n\n // Handle str_replace_editor tool\n if (toolName === \"str_replace_editor\") {\n switch (args.command) {\n case \"str_replace\":\n return ;\n\n case \"create\":\n const language = detectLanguage(args.path);\n return (\n

\n Created: {args.path}\n {language}\n

\n {args.file_text}\n

\n );\n\n case \"view\":\n // For view operations, we don't need to show the full content in the tool call\n return (\n

\n Viewed: {args.path}\n {args.view_range ? ` (lines ${args.view_range.join(\" to \")})` : \"\"}\n

\n );\n\n case \"insert\":\n return (\n

\n Inserted at line {args.insert_line} in {args.path}\n

\n {args.new_str}\n

\n );\n\n case \"undo_edit\":\n return (\n

\n Undid last edit to {args.path}\n

\n );\n\n default:\n // Fallback to JSON for unknown commands\n return (\n

\n \n

\n );\n }\n }\n\n // Handle delete_file tool\n if (toolName === \"delete_file\" && args.path) {\n return (\n

\n Deleted file: {args.path}\n

\n );\n }\n\n // Default: format as JSON with markdown code block\n return (\n

\n \n

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

\n \n {isError && \"❌ \"}\n {name}\n \n

\n {renderToolContent()}\n

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

\n Source\n

\n \n

\n );\n }\n if (part.type === \"file\") {\n const fileContent = atob(part.data);\n const fileName = part.name || \"file\";\n const language = detectLanguage(fileName);\n\n return (\n

\n {fileName}\n {language}\n

\n \n

\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 \n

\n );\n }\n // Handle multiple images in a single part\n if (part.type === \"images\") {\n return img.url)} />;\n }\n}",[],[315,321,451],{"_107":458,"_99":459,"_153":460,"_155":322,"_156":139,"_157":191,"_159":121,"_109":461,"_104":33,"_161":205,"_163":462,"_164":27,"_165":-5,"_166":463,"_102":464},"846cc822-1653-11f0-9b3c-569c3dd06744","MessageTimer.tsx","a1d5e75e-74af-400c-af9e-f5f2e25d29df",["D",1744320840718],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\n\n// Utility to format milliseconds into a readable time string\nconst formatTime = (ms: number): string => {\n const seconds = Math.floor(ms / 1000);\n const minutes = Math.floor(seconds / 60);\n const remainingSeconds = seconds % 60;\n return `${minutes}:${remainingSeconds.toString().padStart(2, \"0\")}`;\n};\n\nexport const MessageTimer = (\n { createdAt, endTime, isStopped }: { createdAt: number; endTime?: number; isStopped?: boolean },\n) => {\n const [currentTime, setCurrentTime] = useState(Date.now());\n\n // Update currentTime periodically when message is still running (no endTime) and not stopped\n useEffect(() => {\n if (endTime !== undefined || isStopped) return;\n\n const interval = setInterval(() => {\n setCurrentTime(Date.now());\n }, 100);\n\n return () => clearInterval(interval);\n }, [endTime, isStopped]);\n\n // Calculate elapsed time: either from start to end (if finished) or from start to current time (if running)\n const elapsedTime = endTime !== undefined\n ? endTime - createdAt\n : currentTime - createdAt;\n\n return (\n

\n Time: {formatTime(elapsedTime)}\n

\n );\n};",[],[315,321,459],{"_107":466,"_99":467,"_153":468,"_155":322,"_156":139,"_157":191,"_159":121,"_109":469,"_104":33,"_161":205,"_163":470,"_164":27,"_165":-5,"_166":471,"_102":472},"846cca98-1653-11f0-9b3c-569c3dd06744","ProjectFiles.tsx","54dde3f9-f35f-4357-86fd-cfe76fb6ac4b",["D",1744320840718],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\nimport { DirectoryTree } from \"./DirectoryTree.tsx\";\nimport { LoadingSpinner } from \"./LoadingSpinner.tsx\";\n\ninterface ProjectFilesProps {\n projectFiles: any[];\n isLoadingFiles: boolean;\n onSelectionChange: (files: string[]) => void;\n error?: Error | null;\n}\n\nexport function ProjectFiles({\n projectFiles,\n isLoadingFiles,\n onSelectionChange,\n error,\n}: ProjectFilesProps) {\n return (\n

\n {isLoadingFiles ? (\n

\n \n Loading project files...\n

\n ) : error ? (\n

Error loading project files:

{error.message}

\n ) : (\n \n )}\n

\n );\n}",[],[315,321,467],{"_107":474,"_99":475,"_153":476,"_155":322,"_156":139,"_157":191,"_159":121,"_109":477,"_104":33,"_161":205,"_163":478,"_164":27,"_165":-5,"_166":479,"_102":480},"846ccc3c-1653-11f0-9b3c-569c3dd06744","Projects.tsx","406f3997-8185-4e8c-8daf-eefe18388abf",["D",1744320840718],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { CreateProjectModal } from \"./CreateProject.tsx\";\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 const [isModalOpen, setIsModalOpen] = useState(false);\n\n const loadProjects = () => {\n setIsLoading(true);\n loader({ bearerToken })\n .then(setLoaderData)\n .finally(() => setIsLoading(false));\n };\n\n useEffect(() => {\n loadProjects();\n }, []);\n\n return (\n

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

\n setIsModalOpen(true)}\n className=\"px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200 flex items-center justify-center sm:justify-start\"\n >\n \n \n \n Create Project\n \n

\n\n {isLoading\n ? \n : (\n

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

\n {p.name}\n

\n {p.privacy === \"public\" && (\n \n \n \n \n Public\n \n )}\n {p.privacy === \"private\" && (\n \n \n \n \n Private\n \n )}\n {p.privacy === \"unlisted\" && (\n \n \n \n \n Unlisted\n \n )}\n

\n ))}\n

\n )}\n\n setIsModalOpen(false)}\n bearerToken={bearerToken}\n onProjectCreated={loadProjects}\n />\n \n );\n}",[],[315,321,475],[315,321],{"_107":483,"_99":484,"_153":485,"_155":316,"_156":139,"_157":191,"_159":121,"_109":486,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":487,"_102":505},"846cf2a2-1653-11f0-9b3c-569c3dd06744","hooks","c41eb976-0530-40c5-a6dc-46f24f372994",["D",1744320840718],[488,497],{"_107":489,"_99":490,"_153":491,"_155":485,"_156":139,"_157":492,"_159":121,"_109":493,"_104":94,"_161":205,"_163":494,"_164":27,"_165":-5,"_166":495,"_102":496},"5da51ae0-1659-11f0-8d0a-569c3dd06744","useChatLogic.ts","f49a9b69-b1d3-4678-8fc1-3c620185da4e",46,["D",1744323352739],"import { useChat } from \"https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport React, {\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0?dev\";\nimport { playBellSound } from \"../utils/soundEffects.ts\";\nimport { ModelOption } from \"../components/ChatInput.tsx\";\n\ninterface UseChatLogicProps {\n project: any;\n branchId: string | undefined;\n anthropicApiKey: string;\n groqApiKey: string;\n geminiApiKey: string;\n bearerToken: string;\n selectedFiles: string[];\n images: (string | null)[];\n soundEnabled: boolean;\n selectedModel: ModelOption;\n}\n\nexport function useChatLogic({\n project,\n branchId,\n anthropicApiKey,\n groqApiKey,\n geminiApiKey,\n bearerToken,\n selectedFiles,\n images,\n soundEnabled,\n selectedModel,\n}: UseChatLogicProps) {\n const [usages, setUsages] = useState>({});\n const [messageEndTimes, setMessageEndTimes] = useState<\n Record\n >({});\n const customStopRef = useRef<(() => void) | null>(null);\n\n const {\n messages,\n error,\n input,\n handleInputChange,\n handleSubmit: originalHandleSubmit,\n stop,\n status,\n } = useChat({\n api: \"/api/send-message\",\n body: {\n project,\n branchId,\n anthropicApiKey,\n groqApiKey,\n geminiApiKey,\n selectedFiles,\n model: selectedModel.id,\n images: images\n .filter((img): img is string => {\n const isValid = typeof img === \"string\" && img.startsWith(\"data:\");\n if (!isValid && img !== null) {\n console.warn(\n \"Invalid image format:\",\n img?.substring(0, 50) + \"...\"\n );\n }\n return isValid;\n })\n .map((img) => ({ url: img })),\n },\n headers: {\n Authorization: `Bearer ${bearerToken}`,\n },\n onFinish: (message, options) => {\n setUsages((prev) => ({\n ...prev,\n [message.id]: options.usage,\n }));\n\n setMessageEndTimes((prev) => ({\n ...prev,\n [message.id]: Date.now(),\n }));\n\n if (soundEnabled) {\n playBellSound().catch((error) => {\n console.log(\"Error playing bell sound:\", error);\n });\n }\n },\n });\n\n const running = status === \"streaming\" || status === \"submitted\";\n\n const pendingMessageId = useMemo(() => {\n if (!running) return null;\n const pendingMessages = messages.filter(\n (msg) => msg.role === \"assistant\" && !messageEndTimes[msg.id]\n );\n return pendingMessages.length > 0\n ? pendingMessages[pendingMessages.length - 1].id\n : null;\n }, [messages, messageEndTimes, running]);\n\n const handleStop = useCallback(() => {\n stop();\n\n if (pendingMessageId) {\n setMessageEndTimes((prev) => ({\n ...prev,\n [pendingMessageId]: Date.now(),\n }));\n\n if (soundEnabled) {\n playBellSound().catch((error) => {\n console.log(\"Error playing bell sound:\", error);\n });\n }\n }\n }, [stop, pendingMessageId, soundEnabled]);\n\n React.useEffect(() => {\n customStopRef.current = handleStop;\n }, [handleStop]);\n\n React.useEffect(() => {\n (window as any).customStopRef = customStopRef;\n }, []);\n\n return {\n messages,\n error,\n input,\n handleInputChange,\n handleSubmit: originalHandleSubmit,\n running,\n usages,\n messageEndTimes,\n };\n}\n",[],[315,484,490],{"_107":498,"_99":499,"_153":500,"_155":485,"_156":139,"_157":191,"_159":121,"_109":501,"_104":33,"_161":205,"_163":502,"_164":27,"_165":-5,"_166":503,"_102":504},"846cef82-1653-11f0-9b3c-569c3dd06744","useProjectFiles.ts","562e70f7-ec5a-4b67-9a07-25d01cf3412e",["D",1744320840718],"import { useState, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\nimport { fetchProjectFiles } from \"../utils/api.ts\";\n\ninterface UseProjectFilesProps {\n projectId?: string;\n branchId?: string;\n bearerToken: string;\n}\n\ninterface UseProjectFilesResult {\n projectFiles: any[];\n isLoadingFiles: boolean;\n error: Error | null;\n}\n\n/**\n * Custom hook to fetch and manage project files\n */\nexport function useProjectFiles({\n projectId,\n branchId,\n bearerToken,\n}: UseProjectFilesProps): UseProjectFilesResult {\n const [projectFiles, setProjectFiles] = useState([]);\n const [isLoadingFiles, setIsLoadingFiles] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n const loadProjectFiles = async () => {\n if (!projectId) {\n setProjectFiles([]);\n setIsLoadingFiles(false);\n return;\n }\n\n setIsLoadingFiles(true);\n setError(null);\n \n try {\n const filesData = await fetchProjectFiles({\n bearerToken,\n projectId,\n branchId,\n });\n\n if (filesData.files) {\n setProjectFiles(filesData.files);\n } else {\n setProjectFiles([]);\n console.error(\"No files returned:\", filesData);\n }\n } catch (err) {\n console.error(\"Error fetching project files:\", err);\n setProjectFiles([]);\n setError(err instanceof Error ? err : new Error(String(err)));\n } finally {\n setIsLoadingFiles(false);\n }\n };\n\n loadProjectFiles();\n }, [projectId, branchId, bearerToken]);\n\n return {\n projectFiles,\n isLoadingFiles,\n error,\n };\n}",[],[315,484,499],[315,484],{"_107":507,"_99":292,"_153":508,"_155":316,"_156":139,"_157":191,"_159":121,"_109":509,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":510,"_102":535},"846cfd1a-1653-11f0-9b3c-569c3dd06744","58b04a6f-80b4-456b-bd4b-c7312b3f88bf",["D",1744320840718],[511,519,527],{"_107":512,"_99":513,"_153":514,"_155":508,"_156":139,"_157":191,"_159":121,"_109":515,"_104":33,"_161":205,"_163":516,"_164":27,"_165":-5,"_166":517,"_102":518},"846cf464-1653-11f0-9b3c-569c3dd06744","api.ts","750b4671-de67-4f0c-abb5-3d2b9ef1c547",["D",1744320840718],"// Fetch project files from the backend\nexport async function fetchProjectFiles(\n { bearerToken, projectId, branchId }: { bearerToken: string; projectId: string; branchId?: string },\n) {\n const url = new URL(\"/api/project-files\", window.location.origin);\n url.searchParams.append(\"projectId\", projectId);\n if (branchId) {\n url.searchParams.append(\"branchId\", branchId);\n }\n\n const response = await fetch(url.toString(), {\n headers: {\n \"Authorization\": \"Bearer \" + bearerToken,\n },\n });\n\n return response.json();\n}",[],[315,292,513],{"_107":520,"_99":521,"_153":522,"_155":508,"_156":139,"_157":191,"_159":121,"_109":523,"_104":33,"_161":205,"_163":524,"_164":27,"_165":-5,"_166":525,"_102":526},"846cf63a-1653-11f0-9b3c-569c3dd06744","costCalculator.ts","6b02cc64-cc09-4add-857d-eb60be6329c1",["D",1744320840718],"// Calculate cost based on token usage\nexport const calculateCost = (usage: any): string => {\n if (!usage || !usage.promptTokens) {\n return \"0.00\";\n }\n\n // Cost per million tokens\n const PROMPT_COST_PER_MILLION = 3;\n const COMPLETION_COST_PER_MILLION = 15;\n const CACHE_WRITE_COST_PER_MILLION = 3.75;\n const CACHE_READ_COST_PER_MILLION = 0.3;\n\n // Get reported values\n const promptTokens = usage.promptTokens || 0;\n const completionTokens = usage.completionTokens || 0;\n\n // Estimate cache read tokens\n // Approach: Estimate that 40% of prompt tokens come from cache read\n // This percentage can be adjusted based on observed patterns\n const estimatedCacheReadTokens = Math.round(promptTokens * 0.4);\n\n // Estimate cache write tokens\n // Approach: Assume cache write tokens are a portion of prompt tokens that aren't from cache read\n let estimatedCacheWriteTokens = 0;\n\n // If we have more prompt tokens than estimated cache read tokens,\n // estimate that 70% of the difference are cache write tokens\n estimatedCacheWriteTokens = Math.round((promptTokens - estimatedCacheReadTokens) * 0.7);\n\n // Calculate costs\n // Subtract both cache read and write tokens from prompt tokens to avoid double counting\n const promptCost = ((promptTokens - estimatedCacheWriteTokens - estimatedCacheReadTokens) / 1000000)\n * PROMPT_COST_PER_MILLION;\n const completionCost = (completionTokens / 1000000) * COMPLETION_COST_PER_MILLION;\n const cacheWriteCost = (estimatedCacheWriteTokens / 1000000) * CACHE_WRITE_COST_PER_MILLION;\n const cacheReadCost = (estimatedCacheReadTokens / 1000000) * CACHE_READ_COST_PER_MILLION;\n\n // Total cost\n const totalCost = promptCost + completionCost + cacheWriteCost + cacheReadCost;\n\n // Add both estimated cache tokens to the usage object for transparency\n usage.estimatedCacheReadTokens = estimatedCacheReadTokens;\n usage.estimatedCacheWriteTokens = estimatedCacheWriteTokens;\n\n // Store the raw cost with more precision for debugging\n usage.rawCost = totalCost.toFixed(5);\n\n // Format to the nearest penny (2 decimal places)\n // If less than 1 penny, show \"< $0.01\"\n if (totalCost < 0.01) {\n return \"< $0.01\";\n } else {\n return \"$\" + totalCost.toFixed(2);\n }\n};",[],[315,292,521],{"_107":528,"_99":529,"_153":530,"_155":508,"_156":139,"_157":191,"_159":121,"_109":531,"_104":33,"_161":205,"_163":532,"_164":27,"_165":-5,"_166":533,"_102":534},"846cf860-1653-11f0-9b3c-569c3dd06744","soundEffects.ts","17a3809d-d48f-4b04-9981-399e2563ee7b",["D",1744320840718],"/**\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}",[],[315,292,529],[315,292],{"_107":537,"_99":538,"_153":539,"_155":316,"_156":139,"_157":191,"_159":121,"_109":540,"_104":33,"_161":205,"_163":541,"_164":27,"_165":-5,"_166":542,"_102":543},"846cfeaa-1653-11f0-9b3c-569c3dd06744","index.tsx","d107c41e-836f-487a-9655-66c6b1e07f98",["D",1744320840718],"/** @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();",[],[315,538],[315],{"_107":546,"_99":547,"_153":548,"_155":-5,"_156":139,"_157":191,"_159":121,"_109":549,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":550,"_102":567},"846d0c88-1653-11f0-9b3c-569c3dd06744","prompts","3d15c849-db65-4888-b4ce-9fb31c8e8ae0",["D",1744320840718],[551,559],{"_107":552,"_99":553,"_153":554,"_155":548,"_156":139,"_157":191,"_159":121,"_109":555,"_104":33,"_161":181,"_163":556,"_164":27,"_165":-5,"_166":557,"_102":558},"846d018e-1653-11f0-9b3c-569c3dd06744","open_townie_prompt_additions.txt","486fb43d-fa91-492a-8eb5-fde8a997e9ed",["D",1744320840718],"Read files from the base directory / directly, not /repo/.\n\nWhen trying to understand the directory, first read README.md.\n\nWhenever you make a change to the code, be sure to keep the README.md up to date unless the user asks you not to.\n\nYou can implicitly create directories, by creating files within the directories. For example, if you wanted to create `/foo/bar/baz.ts`, \nbut the foo and bar directories did not exist, you could still use the file editor tool to create /foo/bar/baz.ts, and trust that the \n`/foo/` and `/foo/bar/` directories will be created for you automatically.\n\nDefault to using str_replace in smaller chunks wherever possible. If you're making extensive edits to a file, delete it and create it afresh.\n\nWhen files are provided in user messages under \"# Selected Project Files\", DO NOT use tools to re-read these files. \nTrust that these files are the most up-to-date versions and work with the content as provided in the message.\nOnly use the file editing tools to read files that haven't been shared with you yet or to make changes to files.\n\nThink carefully and only action the specific task you are given with the most concise and elegant\nsolution that changes as little code as possible.\n\nBe sure to use your thinking tool before using any other tools.",[],[547,553],{"_107":560,"_99":561,"_153":562,"_155":548,"_156":139,"_157":191,"_159":121,"_109":563,"_104":33,"_161":181,"_163":564,"_164":27,"_165":-5,"_166":565,"_102":566},"846d0328-1653-11f0-9b3c-569c3dd06744","system_prompt.txt","e5114432-7af0-4a62-9ef2-6b40376e5cdd",["D",1744320840718],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\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## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\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 if possible\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\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\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\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\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 `,\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;",[],[267],"files",[150,168,175,187,194,200,209,217,225,233,241,251,257,265,273,281,290,296,305,313,319,325,333,342,350,359,367,376,384,392,400,408,416,424,432,441,449,457,465,473,482,488,497,506,511,519,527,536,545,551,559,568,577,585,593,603],"counts",{"_614":33,"_615":191,"_616":33,"_617":94},"pulls","branches","forks","envVars","contents",[],{"_107":560,"_99":561,"_153":562,"_155":548,"_156":139,"_157":191,"_159":121,"_109":621,"_104":33,"_161":181,"_163":564,"_164":27,"_165":-5,"_102":622},["D",1744320840718],[547,561],"upstream",{"_107":625,"_99":100,"_115":626,"_116":-5,"_113":114,"_21":627},"50541adc-df52-11ef-be98-e6cdfca9ef9f","AI assistant that can edit Val Town Projects",{"_97":628,"_134":629},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","screenshots","emptyEnvVars","routes/_app.x.$handle.$name.code.$",{"_97":98,"_99":100,"_101":43,"_104":-7,"_102":103,"_105":634,"_148":638,"_610":807,"_181":808,"_618":810,"_623":811,"_822":27,"_823":-5},{"_107":108,"_99":100,"_109":635,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":119,"_120":121,"_122":-5,"_123":33,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":27,"_21":636,"_136":637},["D",1744320840718],{"_97":98,"_134":135},{"_104":138,"_99":43,"_107":139,"_140":108,"_141":142,"_143":144,"_145":114,"_146":147},[639,648,696,783,792,795,798,801,804],{"_107":151,"_99":152,"_153":154,"_155":-5,"_156":139,"_157":158,"_159":121,"_109":160,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":640,"_102":647},[641],{"_107":169,"_99":170,"_153":171,"_155":154,"_156":139,"_157":172,"_159":121,"_109":173,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":642,"_102":646},[643],{"_107":176,"_99":177,"_153":178,"_155":171,"_156":139,"_157":179,"_159":121,"_109":180,"_104":33,"_161":181,"_163":182,"_164":27,"_165":-5,"_166":644,"_102":645},[],[152,170,177],[152,170],[152],{"_107":188,"_99":189,"_153":190,"_155":-5,"_156":139,"_157":191,"_159":121,"_109":192,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":649,"_102":695},[650,671,686,692],{"_107":195,"_99":196,"_153":197,"_155":190,"_156":139,"_157":191,"_159":121,"_109":198,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":651,"_102":670},[652,655,658,661,664,667],{"_107":201,"_99":202,"_153":203,"_155":197,"_156":139,"_157":191,"_159":121,"_109":204,"_104":33,"_161":205,"_163":206,"_164":27,"_165":-5,"_166":653,"_102":654},[],[189,196,202],{"_107":210,"_99":211,"_153":212,"_155":197,"_156":139,"_157":191,"_159":121,"_109":213,"_104":33,"_161":205,"_163":214,"_164":27,"_165":-5,"_166":656,"_102":657},[],[189,196,211],{"_107":218,"_99":219,"_153":220,"_155":197,"_156":139,"_157":191,"_159":121,"_109":221,"_104":33,"_161":205,"_163":222,"_164":27,"_165":-5,"_166":659,"_102":660},[],[189,196,219],{"_107":226,"_99":227,"_153":228,"_155":197,"_156":139,"_157":191,"_159":121,"_109":229,"_104":33,"_161":205,"_163":230,"_164":27,"_165":-5,"_166":662,"_102":663},[],[189,196,227],{"_107":234,"_99":235,"_153":236,"_155":197,"_156":139,"_157":191,"_159":121,"_109":237,"_104":33,"_161":205,"_163":238,"_164":27,"_165":-5,"_166":665,"_102":666},[],[189,196,235],{"_107":242,"_99":243,"_153":244,"_155":197,"_156":139,"_157":138,"_159":121,"_109":245,"_104":246,"_161":205,"_163":247,"_164":27,"_165":-5,"_166":668,"_102":669},[],[189,196,243],[189,196],{"_107":252,"_99":253,"_153":254,"_155":190,"_156":139,"_157":191,"_159":121,"_109":255,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":672,"_102":685},[673,676,679,682],{"_107":258,"_99":259,"_153":260,"_155":254,"_156":139,"_157":191,"_159":121,"_109":261,"_104":33,"_161":205,"_163":262,"_164":27,"_165":-5,"_166":674,"_102":675},[],[189,253,259],{"_107":266,"_99":267,"_153":268,"_155":254,"_156":139,"_157":191,"_159":121,"_109":269,"_104":33,"_161":205,"_163":270,"_164":27,"_165":-5,"_166":677,"_102":678},[],[189,253,267],{"_107":274,"_99":275,"_153":276,"_155":254,"_156":139,"_157":191,"_159":121,"_109":277,"_104":33,"_161":205,"_163":278,"_164":27,"_165":-5,"_166":680,"_102":681},[],[189,253,275],{"_107":282,"_99":283,"_153":284,"_155":254,"_156":139,"_157":191,"_159":121,"_109":285,"_104":33,"_161":205,"_163":286,"_164":27,"_165":-5,"_166":683,"_102":684},[],[189,253,283],[189,253],{"_107":291,"_99":292,"_153":293,"_155":190,"_156":139,"_157":191,"_159":121,"_109":294,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":687,"_102":691},[688],{"_107":297,"_99":298,"_153":299,"_155":293,"_156":139,"_157":191,"_159":121,"_109":300,"_104":33,"_161":205,"_163":301,"_164":27,"_165":-5,"_166":689,"_102":690},[],[189,292,298],[189,292],{"_107":306,"_99":267,"_153":307,"_155":190,"_156":139,"_157":191,"_159":121,"_109":308,"_104":33,"_161":205,"_163":309,"_164":27,"_165":-5,"_166":693,"_102":694},[],[189,267],[189],{"_107":314,"_99":315,"_153":316,"_155":-5,"_156":139,"_157":191,"_159":121,"_109":317,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":697,"_102":782},[698,758,767,779],{"_107":320,"_99":321,"_153":322,"_155":316,"_156":139,"_157":191,"_159":121,"_109":323,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":699,"_102":757},[700,703,706,709,712,715,718,721,724,727,730,733,736,739,742,745,748,751,754],{"_107":326,"_99":327,"_153":328,"_155":322,"_156":139,"_157":191,"_159":121,"_109":329,"_104":33,"_161":205,"_163":330,"_164":27,"_165":-5,"_166":701,"_102":702},[],[315,321,327],{"_107":334,"_99":335,"_153":336,"_155":322,"_156":139,"_157":337,"_159":121,"_109":338,"_104":191,"_161":205,"_163":339,"_164":27,"_165":-5,"_166":704,"_102":705},[],[315,321,335],{"_107":343,"_99":344,"_153":345,"_155":322,"_156":139,"_157":191,"_159":121,"_109":346,"_104":33,"_161":205,"_163":347,"_164":27,"_165":-5,"_166":707,"_102":708},[],[315,321,344],{"_107":351,"_99":352,"_153":353,"_155":322,"_156":139,"_157":354,"_159":121,"_109":355,"_104":191,"_161":205,"_163":356,"_164":27,"_165":-5,"_166":710,"_102":711},[],[315,321,352],{"_107":360,"_99":361,"_153":362,"_155":322,"_156":139,"_157":191,"_159":121,"_109":363,"_104":33,"_161":205,"_163":364,"_164":27,"_165":-5,"_166":713,"_102":714},[],[315,321,361],{"_107":368,"_99":369,"_153":370,"_155":322,"_156":139,"_157":371,"_159":121,"_109":372,"_104":354,"_161":205,"_163":373,"_164":27,"_165":-5,"_166":716,"_102":717},[],[315,321,369],{"_107":377,"_99":378,"_153":379,"_155":322,"_156":139,"_157":191,"_159":121,"_109":380,"_104":33,"_161":205,"_163":381,"_164":27,"_165":-5,"_166":719,"_102":720},[],[315,321,378],{"_107":385,"_99":386,"_153":387,"_155":322,"_156":139,"_157":191,"_159":121,"_109":388,"_104":33,"_161":205,"_163":389,"_164":27,"_165":-5,"_166":722,"_102":723},[],[315,321,386],{"_107":393,"_99":394,"_153":395,"_155":322,"_156":139,"_157":191,"_159":121,"_109":396,"_104":33,"_161":205,"_163":397,"_164":27,"_165":-5,"_166":725,"_102":726},[],[315,321,394],{"_107":401,"_99":402,"_153":403,"_155":322,"_156":139,"_157":191,"_159":121,"_109":404,"_104":33,"_161":205,"_163":405,"_164":27,"_165":-5,"_166":728,"_102":729},[],[315,321,402],{"_107":409,"_99":410,"_153":411,"_155":322,"_156":139,"_157":191,"_159":121,"_109":412,"_104":33,"_161":205,"_163":413,"_164":27,"_165":-5,"_166":731,"_102":732},[],[315,321,410],{"_107":417,"_99":418,"_153":419,"_155":322,"_156":139,"_157":191,"_159":121,"_109":420,"_104":33,"_161":205,"_163":421,"_164":27,"_165":-5,"_166":734,"_102":735},[],[315,321,418],{"_107":425,"_99":426,"_153":427,"_155":322,"_156":139,"_157":191,"_159":121,"_109":428,"_104":33,"_161":205,"_163":429,"_164":27,"_165":-5,"_166":737,"_102":738},[],[315,321,426],{"_107":433,"_99":434,"_153":435,"_155":322,"_156":139,"_157":436,"_159":121,"_109":437,"_104":191,"_161":205,"_163":438,"_164":27,"_165":-5,"_166":740,"_102":741},[],[315,321,434],{"_107":442,"_99":443,"_153":444,"_155":322,"_156":139,"_157":191,"_159":121,"_109":445,"_104":33,"_161":205,"_163":446,"_164":27,"_165":-5,"_166":743,"_102":744},[],[315,321,443],{"_107":450,"_99":451,"_153":452,"_155":322,"_156":139,"_157":191,"_159":121,"_109":453,"_104":33,"_161":205,"_163":454,"_164":27,"_165":-5,"_166":746,"_102":747},[],[315,321,451],{"_107":458,"_99":459,"_153":460,"_155":322,"_156":139,"_157":191,"_159":121,"_109":461,"_104":33,"_161":205,"_163":462,"_164":27,"_165":-5,"_166":749,"_102":750},[],[315,321,459],{"_107":466,"_99":467,"_153":468,"_155":322,"_156":139,"_157":191,"_159":121,"_109":469,"_104":33,"_161":205,"_163":470,"_164":27,"_165":-5,"_166":752,"_102":753},[],[315,321,467],{"_107":474,"_99":475,"_153":476,"_155":322,"_156":139,"_157":191,"_159":121,"_109":477,"_104":33,"_161":205,"_163":478,"_164":27,"_165":-5,"_166":755,"_102":756},[],[315,321,475],[315,321],{"_107":483,"_99":484,"_153":485,"_155":316,"_156":139,"_157":191,"_159":121,"_109":486,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":759,"_102":766},[760,763],{"_107":489,"_99":490,"_153":491,"_155":485,"_156":139,"_157":492,"_159":121,"_109":493,"_104":94,"_161":205,"_163":494,"_164":27,"_165":-5,"_166":761,"_102":762},[],[315,484,490],{"_107":498,"_99":499,"_153":500,"_155":485,"_156":139,"_157":191,"_159":121,"_109":501,"_104":33,"_161":205,"_163":502,"_164":27,"_165":-5,"_166":764,"_102":765},[],[315,484,499],[315,484],{"_107":507,"_99":292,"_153":508,"_155":316,"_156":139,"_157":191,"_159":121,"_109":509,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":768,"_102":778},[769,772,775],{"_107":512,"_99":513,"_153":514,"_155":508,"_156":139,"_157":191,"_159":121,"_109":515,"_104":33,"_161":205,"_163":516,"_164":27,"_165":-5,"_166":770,"_102":771},[],[315,292,513],{"_107":520,"_99":521,"_153":522,"_155":508,"_156":139,"_157":191,"_159":121,"_109":523,"_104":33,"_161":205,"_163":524,"_164":27,"_165":-5,"_166":773,"_102":774},[],[315,292,521],{"_107":528,"_99":529,"_153":530,"_155":508,"_156":139,"_157":191,"_159":121,"_109":531,"_104":33,"_161":205,"_163":532,"_164":27,"_165":-5,"_166":776,"_102":777},[],[315,292,529],[315,292],{"_107":537,"_99":538,"_153":539,"_155":316,"_156":139,"_157":191,"_159":121,"_109":540,"_104":33,"_161":205,"_163":541,"_164":27,"_165":-5,"_166":780,"_102":781},[],[315,538],[315],{"_107":546,"_99":547,"_153":548,"_155":-5,"_156":139,"_157":191,"_159":121,"_109":549,"_104":33,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":784,"_102":791},[785,788],{"_107":552,"_99":553,"_153":554,"_155":548,"_156":139,"_157":191,"_159":121,"_109":555,"_104":33,"_161":181,"_163":556,"_164":27,"_165":-5,"_166":786,"_102":787},[],[547,553],{"_107":560,"_99":561,"_153":562,"_155":548,"_156":139,"_157":191,"_159":121,"_109":563,"_104":33,"_161":181,"_163":564,"_164":27,"_165":-5,"_166":789,"_102":790},[],[547,561],[547],{"_107":569,"_99":570,"_153":571,"_155":-5,"_156":139,"_157":572,"_159":121,"_109":573,"_104":33,"_161":181,"_163":574,"_164":27,"_165":-5,"_166":793,"_102":794},[],[570],{"_107":578,"_99":579,"_153":580,"_155":-5,"_156":139,"_157":191,"_159":121,"_109":581,"_104":33,"_161":181,"_163":582,"_164":27,"_165":-5,"_166":796,"_102":797},[],[579],{"_107":586,"_99":587,"_153":588,"_155":-5,"_156":139,"_157":191,"_159":121,"_109":589,"_104":33,"_161":181,"_163":590,"_164":27,"_165":-5,"_166":799,"_102":800},[],[587],{"_107":594,"_99":595,"_153":596,"_155":-5,"_156":139,"_157":597,"_159":121,"_109":598,"_104":599,"_161":181,"_163":600,"_164":27,"_165":-5,"_166":802,"_102":803},[],[595],{"_107":604,"_99":267,"_153":119,"_155":-5,"_156":139,"_157":191,"_159":121,"_109":605,"_104":33,"_161":606,"_163":607,"_164":27,"_165":-5,"_166":805,"_102":806},[],[267],[639,641,643,648,650,652,655,658,661,664,667,671,673,676,679,682,686,688,692,696,698,700,703,706,709,712,715,718,721,724,727,730,733,736,739,742,745,748,751,754,758,760,763,767,769,772,775,779,783,785,788,792,795,798,801,804],{"_107":560,"_99":561,"_153":562,"_155":548,"_156":139,"_157":191,"_159":121,"_109":621,"_104":33,"_161":181,"_163":564,"_164":27,"_165":-5,"_102":809},[547,561],[],{"_107":142,"_109":812,"_813":814,"_99":43,"_140":625,"_104":815,"_141":816,"_143":817,"_818":819,"_132":27,"_113":114,"_820":628,"_821":100},["D",1738273009969],"updatedAt",["D",1745272235055],1036,"97af82a2-da6d-11ef-adc0-e6cdfca9ef9f",89,"lockfileKey","1745281424591-esm.town_v_stevekrouse_OpenTownie@1036-main","userHandle","projectName","showCompareCallout","pull","routes/_app","actionData","errors"]

Hi

OpenTownie

{project.name}

Create New Branch

Create New Project

\n Welcome to OpenTownie\n

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

Hi

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