Hi

\"\n});\n```\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n- Hono is the recommended API framework (similar to Express, Flask, or Sinatra)\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n // Use the serveFile utility to handle content types automatically\n app.get(\"/public/*\", c => serveFile(c.req.path.replace(\"/public\", \"/frontend\"), import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Be careful with error handling as Hono tends to swallow errors\n- Consider re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Frontend Best Practices\n- Structure as a standard client-side React app\n- Use SVG for favicons (Val Town only supports text files)\n- Separate components into individual files\n- Access bootstrapped data from `window.__INITIAL_DATA__`\n- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma\n- Follow the React component pattern from the example project\n- Handle API calls properly with proper error catching\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n- Follow the queries and migrations pattern from the example\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n - Properly handle CORS if needed for external access",[],[153,201],[153],{"_107":209,"_99":210,"_154":211,"_156":-5,"_157":140,"_158":159,"_160":121,"_109":212,"_104":33,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":213,"_102":325},"fa9850c0-09b5-11f0-a8be-569c3dd06744","frontend","3e09e05e-9800-40c2-81aa-2dc843fd8dda",["D",1742933764598],[214,302,317],{"_107":215,"_99":216,"_154":217,"_156":211,"_157":140,"_158":159,"_160":121,"_109":218,"_104":33,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":219,"_102":301},"fa98494a-09b5-11f0-a8be-569c3dd06744","components","93e1087c-057a-4d47-a0aa-95bcd891f2d0",["D",1742933764598],[220,230,238,248,257,265,273,282,291],{"_107":221,"_99":222,"_154":223,"_156":217,"_157":140,"_158":224,"_160":121,"_109":225,"_104":226,"_162":176,"_164":227,"_165":27,"_166":-5,"_167":228,"_102":229},"5ab1a064-13c6-11f0-b152-569c3dd06744","App.tsx","84e2660b-bb85-41f0-913d-c34470e03620",72,["D",1744040309441],7,"/** @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 [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 anthropic API key in case the user wants to reuse it\n }\n\n return (\n

\n {\n e.preventDefault();\n setProject(undefined);\n }}\n >\n OpenTownie\n \n

\n {bearerToken && (\n \n Logout\n \n \n )}\n

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

\n \n

\n );\n}",[],[210,216,222],{"_107":231,"_99":232,"_154":233,"_156":217,"_157":140,"_158":159,"_160":121,"_109":234,"_104":33,"_162":176,"_164":235,"_165":27,"_166":-5,"_167":236,"_102":237},"fa980638-09b5-11f0-a8be-569c3dd06744","BranchControl.tsx","aa0293f8-f586-40a2-8a2d-5c3fb72a1fcd",["D",1742933764598],"/** @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}",[],[210,216,232],{"_107":239,"_99":240,"_154":241,"_156":217,"_157":140,"_158":242,"_160":121,"_109":243,"_104":244,"_162":176,"_164":245,"_165":27,"_166":-5,"_167":246,"_102":247},"48e2ab10-13c8-11f0-ac56-569c3dd06744","Button.tsx","cc2bec9a-13c6-11f0-b858-569c3dd06744",88,["D",1744041138559],4,"// @jsxImportSource https://esm.sh/react@18.2.0\nimport { render } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\n/**\n * A button component that handles AI generation with loading state and cancellation\n */\nconst AIGenerationButton: React.FC = () => {\n const [isGenerating, setIsGenerating] = useState(false);\n const abortControllerRef = useRef(null);\n\n const handleGeneration = async () => {\n // If already generating, this acts as a stop button\n if (isGenerating) {\n if (abortControllerRef.current) {\n abortControllerRef.current.abort();\n abortControllerRef.current = null;\n }\n setIsGenerating(false);\n return;\n }\n\n // Start generation\n setIsGenerating(true);\n abortControllerRef.current = new AbortController();\n const signal = abortControllerRef.current.signal;\n\n try {\n // Example AI generation call - replace with your actual API call\n const response = await fetch(\"https://your-ai-endpoint.com/generate\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ prompt: \"Your prompt here\" }),\n signal, // Pass the abort signal to make it cancellable\n });\n\n if (!response.ok) {\n throw new Error(`API error: ${response.status}`);\n }\n\n const result = await response.json();\n console.log(\"Generation result:\", result);\n\n // Process the result here\n } catch (error) {\n // Check if this was an abort error (user cancelled)\n if (error.name === \"AbortError\") {\n console.log(\"Generation was cancelled by user\");\n } else {\n console.error(\"Generation error:\", error);\n }\n } finally {\n // Reset state when done or cancelled\n setIsGenerating(false);\n abortControllerRef.current = null;\n }\n };\n\n return (\n \n {isGenerating\n ? (\n <>\n \n Stop Generation\n \n )\n : Generate with AI}\n \n );\n};\n\n// CSS for the component\nconst styles = `\n.ai-generation-button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 10px 16px;\n font-size: 16px;\n font-weight: 500;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n background-color: #4f46e5;\n color: white;\n border: none;\n min-width: 180px;\n}\n\n.ai-generation-button:hover {\n background-color: #4338ca;\n}\n\n.ai-generation-button.generating {\n background-color: #ef4444;\n}\n\n.ai-generation-button.generating:hover {\n background-color: #dc2626;\n}\n\n.spinner {\n width: 18px;\n height: 18px;\n border: 3px solid rgba(255, 255, 255, 0.3);\n border-radius: 50%;\n border-top-color: white;\n animation: spin 1s ease-in-out infinite;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n`;\n\n// Demo component that includes the button and styles\nconst Demo: React.FC = () => {\n return (\n

\n \n

Click the button to start generation, click again to stop.

\n\n \n\n {/* Error catching script */}\n \n

\n );\n};\n\n// For HTTP vals, render the component\nexport default function() {\n const html = `\n\n\n\n \n \n AI Generation Button\n

\n\n\n\n\n `;\n\n // Return HTML response\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n}\n\n// For client-side rendering\nif (typeof document !== \"undefined\") {\n const root = document.getElementById(\"root\");\n if (root) {\n render(, root);\n }\n}",[],[210,216,240],{"_107":249,"_99":250,"_154":251,"_156":217,"_157":140,"_158":139,"_160":121,"_109":252,"_104":253,"_162":176,"_164":254,"_165":27,"_166":-5,"_167":255,"_102":256},"338e8368-13ca-11f0-ac0b-569c3dd06744","Chat.tsx","3c49f686-13b6-11f0-a813-569c3dd06744",["D",1744041961770],20,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useChat } 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 { useLocalStorage } from \"https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { playBellSound } from \"../utils/soundEffects.ts\";\nimport { BranchControl } from \"./BranchControl.tsx\";\nimport { ImageUpload, PROMPT_IMAGE_LIMIT } from \"./ImageUpload.tsx\";\nimport { MessagePart } from \"./MessagePart.tsx\";\n\n// Component for the loading spinner\nconst LoadingSpinner = () => (\n

\n);\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\n// Calculate cost based on token usage\nconst 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};\n\n// Component for the message timer\nconst 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};\n\nexport function Chat({\n project,\n bearerToken,\n anthropicApiKey,\n setProject,\n}: {\n project: any;\n bearerToken: string;\n anthropicApiKey: string;\n setProject: (project: any) => void;\n}) {\n const [usages, setUsages] = useState>({});\n const [branchId, setBranchId] = useLocalStorage(\"branchId\", undefined);\n const [soundEnabled, setSoundEnabled] = useLocalStorage(\"soundEnabled\", true);\n const [images, setImages] = useState<(string | null)[]>([]);\n const [lastModifiedFile, setLastModifiedFile] = useState(null);\n const [isReverting, setIsReverting] = useState(false);\n const [revertResult, setRevertResult] = useState<{ success: boolean; message: string } | null>(null);\n\n // Only track message end times - we'll use message.createdAt for start times\n const [messageEndTimes, setMessageEndTimes] = useState>({});\n\n // State to detect if the user is on a mobile device\n const [isMobile, setIsMobile] = useState(false);\n\n // Check if user is on mobile when component mounts\n useEffect(() => {\n const checkMobile = () => {\n const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera;\n const mobileRegex = /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 // Custom stop handler reference to handle stopping timers and spinners\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 images: images\n .filter((img): img is string => {\n // Make sure it's a string and a valid data URL\n const isValid = typeof img === \"string\" && img.startsWith(\"data:\");\n if (!isValid && img !== null) {\n console.warn(\"Invalid image format:\", img?.substring(0, 50) + \"...\");\n }\n return isValid;\n })\n // Just pass the data URL directly\n .map(img => ({ url: img })),\n },\n headers: {\n \"Authorization\": `Bearer ${bearerToken}`,\n },\n onFinish: (message, options) => {\n // When message finishes, update usage data\n setUsages(prev => ({\n ...prev,\n [message.id]: options.usage,\n }));\n\n // Record the end time\n setMessageEndTimes(prev => ({\n ...prev,\n [message.id]: Date.now(),\n }));\n\n // Check if there's a modified file in the message content\n if (message.role === \"assistant\" && message.content) {\n // Look for tool calls in the message\n const toolCalls = message.toolCalls || [];\n for (const toolCall of toolCalls) {\n if (toolCall.type === \"function\" && \n toolCall.function?.name === \"str_replace_editor\" && \n toolCall.function?.output) {\n try {\n // Try to parse the output as JSON\n const output = typeof toolCall.function.output === 'string' \n ? JSON.parse(toolCall.function.output) \n : toolCall.function.output;\n \n // If the output contains a modifiedFile property, update the lastModifiedFile state\n if (output && output.modifiedFile) {\n setLastModifiedFile(output.modifiedFile);\n }\n } catch (e) {\n // If parsing fails, just ignore\n console.warn(\"Failed to parse tool output:\", e);\n }\n }\n }\n }\n\n // Play notification sound when message is finished\n if (soundEnabled) {\n playBellSound().catch(error => {\n console.log(\"Error playing bell sound:\", error);\n });\n }\n },\n });\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n const validImages = images.filter((img): img is string => typeof img === \"string\");\n console.log(\"Submitting with images:\", validImages);\n if (input.trim() || validImages.length > 0) {\n originalHandleSubmit(e);\n setImages([]);\n }\n };\n\n const running = status === \"streaming\" || status === \"submitted\";\n\n // Keep track of the most recent assistant message that's still streaming\n const pendingMessageId = React.useMemo(() => {\n if (!running) return null;\n // Find the most recent assistant message that doesn't have an end time\n const pendingMessages = messages\n .filter(msg => msg.role === \"assistant\" && !messageEndTimes[msg.id]);\n return pendingMessages.length > 0 ? pendingMessages[pendingMessages.length - 1].id : null;\n }, [messages, messageEndTimes, running]);\n\n // Custom stop handler that also handles UI elements (timer and spinner)\n const handleStop = React.useCallback(() => {\n // Call the original stop function\n stop();\n\n // Also mark any pending messages as ended to stop timers and spinners\n if (pendingMessageId) {\n setMessageEndTimes(prev => ({\n ...prev,\n [pendingMessageId]: Date.now(),\n }));\n\n // Play notification sound when message is manually stopped\n if (soundEnabled) {\n playBellSound().catch(error => {\n console.log(\"Error playing bell sound:\", error);\n });\n }\n }\n }, [stop, pendingMessageId, soundEnabled]);\n\n // Update the custom stop function ref when the dependencies change\n React.useEffect(() => {\n customStopRef.current = handleStop;\n }, [handleStop]);\n\n // Add keyboard shortcut (Escape key) to cancel generation\n React.useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' && running && customStopRef.current) {\n customStopRef.current();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => {\n window.removeEventListener('keydown', handleKeyDown);\n };\n }, [running]);\n\n // Function to handle reverting changes\n const handleRevert = async () => {\n if (!lastModifiedFile || isReverting) return;\n \n setIsReverting(true);\n setRevertResult(null);\n \n try {\n const response = await fetch(\"/api/revert-file\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${bearerToken}`,\n },\n body: JSON.stringify({\n path: lastModifiedFile,\n branchId,\n project,\n }),\n });\n \n if (!response.ok) {\n const error = await response.json();\n throw new Error(error.error || \"Failed to revert changes\");\n }\n \n const result = await response.json();\n setRevertResult({ \n success: true, \n message: `Successfully reverted changes to ${lastModifiedFile}!` \n });\n \n // Clear the last modified file after successful revert\n setTimeout(() => {\n setLastModifiedFile(null);\n setRevertResult(null);\n }, 3000);\n } catch (error) {\n setRevertResult({ \n success: false, \n message: error instanceof Error ? error.message : \"Failed to revert changes\" \n });\n } finally {\n setIsReverting(false);\n }\n };\n\n // Effect to add animation when lastModifiedFile changes\n useEffect(() => {\n if (lastModifiedFile) {\n // Add a class to the revert button to animate it\n const revertButton = document.querySelector('.revert-button');\n if (revertButton) {\n revertButton.classList.add('pulse-animation');\n setTimeout(() => {\n revertButton.classList.remove('pulse-animation');\n }, 1000);\n }\n }\n }, [lastModifiedFile]);\n\n // Add CSS for pulse animation\n useEffect(() => {\n const style = document.createElement('style');\n style.textContent = `\n @keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);\n }\n 70% {\n box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);\n }\n 100% {\n box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);\n }\n }\n \n .pulse-animation {\n animation: pulse 1.5s infinite;\n }\n `;\n document.head.appendChild(style);\n \n return () => {\n document.head.removeChild(style);\n };\n }, []);\n\n // Show a warning message if no anthropicApiKey is provided\n const showAnthropicKeyWarning = !anthropicApiKey;\n\n return (\n

\n setProject(undefined)}\n title=\"Back to projects\"\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 {lastModifiedFile && (\n \n {isReverting ? (\n <>\n \n Reverting...\n \n ) : (\n <>\n \n Revert Last Change\n \n )}\n \n )}\n

\n {showAnthropicKeyWarning && (\n

\n \n

Anthropic API Key Missing

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

\n )}\n \n {revertResult && (\n

\n {revertResult.success ? (\n \n ) : (\n \n )}\n

{revertResult.success ? 'File Reverted' : 'Revert Failed'}

{revertResult.message}

\n )}\n \n \n

\n {messages.map((message) => (\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

\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 {error\n ? (\n

Error occurred:

{error.stack}

\n )\n : undefined}\n

\n\n \n {running && (\n

\n \n \n Cancel Generation\n \n

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

\n {\n handleInputChange(e as any);\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 handleSubmit(e as any);\n }\n }\n }}\n rows={3}\n style={{\n WebkitAppearance: \"none\", /* Ensures resize handle works on Safari mobile */\n resize: \"vertical\", /* Explicitly set resize to vertical */\n fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif\",\n lineHeight: \"1.5\",\n }}\n />\n\n {running ? (\n \n \n \n ) : (\n {\n const fileInput = document.querySelector(\"input[type=\\\"file\\\"]\");\n if (fileInput) {\n fileInput.click();\n }\n }}\n title=\"Attach images\"\n >\n 📎",[],[210,216,250],{"_107":258,"_99":259,"_154":260,"_156":217,"_157":140,"_158":159,"_160":121,"_109":261,"_104":33,"_162":176,"_164":262,"_165":27,"_166":-5,"_167":263,"_102":264},"fa9831d0-09b5-11f0-a8be-569c3dd06744","CreateBranch.tsx","73d4ec11-bb4f-4b41-b5c1-4516107d3896",["D",1742933764598],"/** @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}",[],[210,216,259],{"_107":266,"_99":267,"_154":268,"_156":217,"_157":140,"_158":159,"_160":121,"_109":269,"_104":33,"_162":176,"_164":270,"_165":27,"_166":-5,"_167":271,"_102":272},"fa983612-09b5-11f0-a8be-569c3dd06744","ImageUpload.tsx","f9579e61-09f7-4855-98f9-95859f3c7a78",["D",1742933764598],"/** @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}\n\nexport function ImageUpload({ images, setImages }: ImageUploadProps) {\n const fileInputRef = useRef(null);\n const [isDragging, setIsDragging] = useState(false);\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 // Process the selected files\n const processFiles = async (files: File[]) => {\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\n const 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 // Handle drag events\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 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) {\n processFiles(Array.from(e.dataTransfer.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 {/* Upload button and drag area */}\n {!isAtLimit && (\n fileInputRef.current?.click()}\n onDragEnter={handleDragEnter}\n onDragLeave={handleDragLeave}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n >\n \n

\n {isDragging ? (\n \"Drop images here\"\n ) : (\n <>\n Upload images or drag and drop\n

\n {images.filter(Boolean).length}/{PROMPT_IMAGE_LIMIT} images\n

\n \n )}\n

\n )}\n

\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}",[],[210,216,267],{"_107":274,"_99":275,"_154":276,"_156":217,"_157":140,"_158":277,"_160":121,"_109":278,"_104":244,"_162":176,"_164":279,"_165":27,"_166":-5,"_167":280,"_102":281},"375a0100-13bd-11f0-b314-569c3dd06744","Login.tsx","ecf999f2-13b4-11f0-b3c0-569c3dd06744",50,["D",1744036384680],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useLocalStorage } from \"https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0\";\n\nexport function Login() {\n const [bearerToken, setBearerToken] = useLocalStorage(\"bearer\", \"\");\n const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage(\"anthropic_api_key\", \"\");\n\n return (\n

Welcome to OpenTownie

Your AI assistant for Val Town projects

\n \n

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

\n Requires projects:write and users:read 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 Anthropic API Key\n \n (Get one here)\n \n

\n \n

\n setAnthropicApiKey(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 Login\n \n \n

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

\n );\n}",[],[210,216,275],{"_107":283,"_99":284,"_154":285,"_156":217,"_157":140,"_158":286,"_160":121,"_109":287,"_104":159,"_162":176,"_164":288,"_165":27,"_166":-5,"_167":289,"_102":290},"f5dfb7b8-13be-11f0-aea6-569c3dd06744","MessagePart.tsx","8919da97-d518-4ae3-827c-d86b207432a7",56,["D",1744037133818],"/** @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 React, { useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { ImagePreview } from \"./ImageUpload.tsx\";\n\n// Component for the revert button\nfunction RevertButton({ path, onRevert }: { path: string; onRevert: (path: string) => Promise }) {\n const [isReverting, setIsReverting] = useState(false);\n const [result, setResult] = useState<{ success: boolean; message: string } | null>(null);\n\n const handleRevert = async () => {\n if (isReverting) return;\n \n setIsReverting(true);\n setResult(null);\n \n try {\n await onRevert(path);\n setResult({ success: true, message: \"Successfully reverted changes!\" });\n } catch (error) {\n setResult({ \n success: false, \n message: error instanceof Error ? error.message : \"Failed to revert changes\" \n });\n } finally {\n setIsReverting(false);\n }\n };\n\n return (\n

\n \n {isReverting ? (\n <>\n \n Reverting...\n \n ) : (\n <>\n \n Revert Changes\n \n )}\n \n \n {result && (\n

\n {result.message}\n

\n )}\n

\n );\n}\n\nexport function MessagePart({ part }: { part: NonNullable[number] }) {\n // Function to handle reverting changes\n const handleRevert = async (path: string) => {\n const response = await fetch(\"/api/revert-file\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${localStorage.getItem(\"bearer\")}`,\n },\n body: JSON.stringify({\n path,\n branchId: localStorage.getItem(\"branchId\") || undefined,\n project: JSON.parse(localStorage.getItem(\"project\") || \"{}\"),\n }),\n });\n \n if (!response.ok) {\n const error = await response.json();\n throw new Error(error.message || \"Failed to revert changes\");\n }\n \n return response.json();\n };\n\n if (part.type === \"text\") return {part.text};\n if (part.type === \"reasoning\")\n return (\n

\n Reasoning...\n

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

\n {detail.text}\n

\n ))}\n

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

\n {name}\n

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

\n \n {/* Show revert button for file modifications */}\n {isFileModification && (\n \n )}\n

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

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

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

{atob(part.data)}

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

\n $\"Uploaded$ \n

\n );\n }\n // Handle multiple images in a single part\n if (part.type === \"images\") {\n return img.url)} />;\n }\n}",[],[210,216,284],{"_107":292,"_99":293,"_154":294,"_156":217,"_157":140,"_158":295,"_160":121,"_109":296,"_104":297,"_162":176,"_164":298,"_165":27,"_166":-5,"_167":299,"_102":300},"d7f3d120-13b5-11f0-834b-569c3dd06744","Projects.tsx","9b535ad3-b3fb-4d7a-b000-e4222c5ea95d",32,["D",1744033218104],18,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\n\n// Component for the loading spinner\nconst LoadingSpinner = () => (\n

\n);\n\nasync function loader({ bearerToken }: { bearerToken: string }) {\n const data = await (await fetch(\"/api/projects-loader\", {\n headers: {\n \"Authorization\": \"Bearer \" + bearerToken,\n },\n })).json();\n return data;\n}\n\n// Component for the create project modal\nconst 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};\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 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

{p.name}

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

\n ))}\n

\n )}\n\n setIsModalOpen(false)}\n bearerToken={bearerToken}\n onProjectCreated={loadProjects}\n />\n

\n );\n}",[],[210,216,293],[210,216],{"_107":303,"_99":304,"_154":305,"_156":211,"_157":140,"_158":159,"_160":121,"_109":306,"_104":33,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":307,"_102":316},"fa984dfa-09b5-11f0-a8be-569c3dd06744","utils","b36453c6-c598-4ef1-9f4b-ec45a38ede9b",["D",1742933764598],[308],{"_107":309,"_99":310,"_154":311,"_156":305,"_157":140,"_158":159,"_160":121,"_109":312,"_104":33,"_162":176,"_164":313,"_165":27,"_166":-5,"_167":314,"_102":315},"fa984a9e-09b5-11f0-a8be-569c3dd06744","soundEffects.ts","ac5770a8-a9a7-4fa5-9084-728f2e588275",["D",1742933764598],"/**\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}",[],[210,304,310],[210,304],{"_107":318,"_99":319,"_154":320,"_156":211,"_157":140,"_158":159,"_160":121,"_109":321,"_104":33,"_162":176,"_164":322,"_165":27,"_166":-5,"_167":323,"_102":324},"fa984fbc-09b5-11f0-a8be-569c3dd06744","index.tsx","b8c3a164-fb95-4ed0-a856-1bfd09e56033",["D",1742933764598],"/** @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();",[],[210,319],[210],{"_107":327,"_99":328,"_154":329,"_156":-5,"_157":140,"_158":159,"_160":121,"_109":330,"_104":33,"_162":195,"_164":331,"_165":27,"_166":-5,"_167":332,"_102":333},"fa985228-09b5-11f0-a8be-569c3dd06744","README.md","cd6af83f-0f35-4134-bbac-7cd8cf3fe427",["D",1742933764598],"# OpenTownie\n\nOpenTownie is a Val Town Project that lets you edit other Val Town Projects with Claude 3.7 Sonnet.\n\nIt uses agentic tool-calling, taking manh read, write, and thinking steps autonomously when carrying out your instructions. \n\n### Todos\n\n- [ ] Give it all the code (except maybe .txt files) as initial context (like cursor sonnet max)\n- [ ] Rebuild as React Router?\n- [ ] Persistent threads?\n- [ ] opentownie as a pr bot\n- [ ] Have it default to creating a new branch off main and then embedding and iframe to the resulting http val and give you a link to a pr opening url\n- [ ] A way to upload docs, by URL? A mini site to recursively crawl docs and markdownify?\n- [ ] I seem to have lost the delete file tool and instructions, try to find them back in history or re-create?\n- [x] Show reasoning in a detail\n- [x] Consider asking it to write the minimum code possible \n- [x] Add caching (post in the vercel ai discussion about how it's not working)\n- [x] For login, have a button that reloads the page\n- [x] Start a timer for messages\n- [x] Add more indicators that it's \"still working\"\n- [x] Require users supply their own Anthropic token?\n- [x] Add cost indications on messages\n- [x] Add a bell noise when the message is done to let us know\n- [x] Launch!\n- [x] Let it select the branch name from a dropdown\n- [x] Consider giving it a tool to replace whole files\n- [x] prompt it to use the thinking tool\n- [x] delete file command",[],[328],{"_107":335,"_99":336,"_154":337,"_156":-5,"_157":140,"_158":338,"_160":121,"_109":339,"_104":94,"_162":195,"_164":340,"_165":27,"_166":-5,"_167":341,"_102":342},"ea0684a4-13bd-11f0-9a6d-569c3dd06744","TODOS.md","99ae2bf6-13bd-11f0-b2d9-569c3dd06744",53,["D",1744036684439],"- [ ] ensure line numbers are in the files added in the context window\n- [ ] Give it a tool to make an HTTP request to its own endpoint to test things!\n- [ ] When it hits the max number of steps, detect that and give the user a button (or instructions on how) to get it to continue (neverstew mentioned this)\n- [x] Make it look good\n- [x] Ability to create new projects from the interface\n- [ ] Debug why backend/index.ts is not being created as an http type\n - [ ] is it an sdk bug?\n - [ ] do we need to add more heuristics to properly detect http vals?\n - [ ] should we add a .http. convention to townie and then strip that out before we actually go to the file system?\n - [ ] should we add a change_val_type tool and teach townie how to use it?\n- [ ] Persistent threads\n - [ ] Utils to help you revert to before or after messages or actions (related to commits)\n- [ ] improve the behavior when the signal is intermittent (neverstew mentioned this)\n- [ ] make it one click to branch off like old jp townie demos\n- [ ] Figure out a convention to teach in the anthropic prompt mod where the LLM always checks the readme for the scope (if not provided) and keeps it up to take with every change\n- [ ] Rebuild as React Router?\n- [ ] opentownie as a pr bot\n- [ ] give it the ability to see its own client-side and server-side logs by building a middleware that shoves them into a SQL light database date and then give it a tool to access them\n- [ ] do a browser use or screenshot thing to give it access to its own visual output\n- [ ] Have it default to creating a new branch off main and then embedding and iframe to the resulting http val and give you a link to a pr opening url\n- [ ] A way to upload docs, by URL? A mini site to recursively crawl docs and markdownify?\n- [ ] Give it a replace_file command (instead of delete & create)?\n- [ ] Add other LLMs ie Gemini, Deepseek, o3-mini, etc. Figure out how to get tools to work for those\n- [x] Make it clearer visually in the UI when tool calls fail\n- [x] Add to the opentownie prompt that it doens't need to create directories, it should just create files in directories by specifying their path, and we'll make sure the directory gets created. We can also potentially catch when the path of a file to create ends in / and make that a no-op.\n- [x] Remove the \"thinking...\" widget next to the send button\n- [x] Refactor /backend/index.ts into multiple files\n- [x] Format the JSON inside the tool-calls as pretty markdown\n - [x] Think as normal markdown\n - [x] File write as a code embed\n - [x] str_replace as a diff view\n- [x] make image drop area invisible and bigger\n- [x] Give it all the code (except maybe .txt files) as initial context (like cursor sonnet max)\n- [x] I seem to have lost the delete file tool and instructions, try to find them back in history or re-create?\n- [x] Show reasoning in a detail\n- [x] Consider asking it to write the minimum code possible \n- [x] Add caching (post in the vercel ai discussion about how it's not working)\n- [x] For login, have a button that reloads the page\n- [x] Start a timer for messages\n- [x] Add more indicators that it's \"still working\"\n- [x] Require users supply their own Anthropic token?\n- [x] Add cost indications on messages\n- [x] Add a bell noise when the message is done to let us know\n- [x] Launch!\n- [x] Let it select the branch name from a dropdown",[],[336],{"_107":344,"_99":345,"_154":346,"_156":-5,"_157":140,"_158":347,"_160":121,"_109":348,"_104":33,"_162":195,"_164":349,"_165":27,"_166":-5,"_167":350,"_102":351},"943e199c-13c7-11f0-a4e3-569c3dd06744","index.html","943e1a5a-13c7-11f0-a4e3-569c3dd06744",83,["D",1744040835495],"\n\n\n \n \n Dark Theme Demo\n \n \n \n\n\n

Dark Theme Implementation

This demo showcases a complete dark theme implementation that automatically responds to system preferences and allows manual toggling.

\n \n

Theme Features

Automatically detects system color scheme preference
Allows manual toggling with the button in the top-right corner
Persists user preference in localStorage
Smooth transitions between themes
Comprehensive set of theme variables

\n \n

Color Palette

The theme includes a complete color palette for consistent styling:

\n \n

\n Background\n

\n \n

\n Text\n

\n \n

\n Primary\n

\n \n

\n Secondary\n

\n \n

\n Border\n

\n \n

\n Card\n

\n \n

UI Components

\n \n

Form Elements

\n Name\n \n

\n \n

\n Email\n \n

\n \n

\n Message\n \n

\n \n

\n Country\n \n

\n \n

Buttons

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

\n \n \n

\n\n",[],[345],{"_107":353,"_99":182,"_154":119,"_156":-5,"_157":140,"_158":123,"_160":121,"_109":354,"_104":355,"_162":356,"_164":357,"_165":27,"_166":-5,"_167":358,"_102":359},"0fba92a4-13bd-11f0-9895-569c3dd06744",["D",1744036318200],9,"http","import { Hono } from \"npm:hono\";\nimport { app as backend } from \"./backend/index.ts\";\n\nconst app = new Hono();\n\napp.route(\"/api\", backend);\napp.get(\"/\", async (c) => {\n return c.html(\n `\n \n OpenTownie\n \n \n \n \n \n \n \n \n

\n \n \n \n `,\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;",[],[182],"files",[151,169,180,190,199,208,214,220,230,238,248,257,265,273,282,291,302,308,317,326,334,343,352],"counts",{"_364":33,"_365":186,"_366":33,"_367":94},"pulls","branches","forks","envVars","contents",[],{"_107":200,"_99":201,"_154":202,"_156":155,"_157":140,"_158":159,"_160":121,"_109":371,"_104":33,"_162":195,"_164":204,"_165":27,"_166":-5,"_102":372},["D",1742933764598],[153,201],"upstream",{"_107":375,"_99":100,"_115":376,"_116":-5,"_113":114,"_21":377},"50541adc-df52-11ef-be98-e6cdfca9ef9f","AI assistant that can edit Val Town Projects",{"_97":378,"_135":379},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","screenshots",{"_382":383,"_384":385},"thumbnail","https://screenshots.valtown.net/screenshot.png?width=1024&height=768&version=48&url=https%3A%2F%2Floading--a22b9a89eecb481a8ca5456d5eb224d9.web.val.run","preview","https://screenshots.valtown.net/screenshot.png?width=1920&height=1080&version=48&url=https%3A%2F%2Floading--a22b9a89eecb481a8ca5456d5eb224d9.web.val.run","emptyEnvVars","routes/_app.x.$handle.$name.code.$",{"_97":98,"_99":100,"_101":43,"_104":-7,"_102":103,"_105":389,"_149":393,"_360":463,"_195":464,"_368":466,"_373":467,"_478":27,"_479":-5},{"_107":108,"_99":100,"_109":390,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":119,"_120":121,"_122":123,"_124":33,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":27,"_21":391,"_137":392},["D",1742933764598],{"_97":98,"_135":136},{"_104":139,"_99":43,"_107":140,"_141":108,"_142":143,"_144":145,"_146":114,"_147":148},[394,409,451,454,457,460],{"_107":152,"_99":153,"_154":155,"_156":-5,"_157":140,"_158":159,"_160":121,"_109":161,"_104":33,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":395,"_102":408},[396,399,402,405],{"_107":170,"_99":171,"_154":172,"_156":155,"_157":140,"_158":173,"_160":121,"_109":174,"_104":175,"_162":176,"_164":177,"_165":27,"_166":-5,"_167":397,"_102":398},[],[153,171],{"_107":181,"_99":182,"_154":183,"_156":155,"_157":140,"_158":184,"_160":121,"_109":185,"_104":186,"_162":176,"_164":187,"_165":27,"_166":-5,"_167":400,"_102":401},[],[153,182],{"_107":191,"_99":192,"_154":193,"_156":155,"_157":140,"_158":159,"_160":121,"_109":194,"_104":33,"_162":195,"_164":196,"_165":27,"_166":-5,"_167":403,"_102":404},[],[153,192],{"_107":200,"_99":201,"_154":202,"_156":155,"_157":140,"_158":159,"_160":121,"_109":203,"_104":33,"_162":195,"_164":204,"_165":27,"_166":-5,"_167":406,"_102":407},[],[153,201],[153],{"_107":209,"_99":210,"_154":211,"_156":-5,"_157":140,"_158":159,"_160":121,"_109":212,"_104":33,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":410,"_102":450},[411,441,447],{"_107":215,"_99":216,"_154":217,"_156":211,"_157":140,"_158":159,"_160":121,"_109":218,"_104":33,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":412,"_102":440},[413,416,419,422,425,428,431,434,437],{"_107":221,"_99":222,"_154":223,"_156":217,"_157":140,"_158":224,"_160":121,"_109":225,"_104":226,"_162":176,"_164":227,"_165":27,"_166":-5,"_167":414,"_102":415},[],[210,216,222],{"_107":231,"_99":232,"_154":233,"_156":217,"_157":140,"_158":159,"_160":121,"_109":234,"_104":33,"_162":176,"_164":235,"_165":27,"_166":-5,"_167":417,"_102":418},[],[210,216,232],{"_107":239,"_99":240,"_154":241,"_156":217,"_157":140,"_158":242,"_160":121,"_109":243,"_104":244,"_162":176,"_164":245,"_165":27,"_166":-5,"_167":420,"_102":421},[],[210,216,240],{"_107":249,"_99":250,"_154":251,"_156":217,"_157":140,"_158":139,"_160":121,"_109":252,"_104":253,"_162":176,"_164":254,"_165":27,"_166":-5,"_167":423,"_102":424},[],[210,216,250],{"_107":258,"_99":259,"_154":260,"_156":217,"_157":140,"_158":159,"_160":121,"_109":261,"_104":33,"_162":176,"_164":262,"_165":27,"_166":-5,"_167":426,"_102":427},[],[210,216,259],{"_107":266,"_99":267,"_154":268,"_156":217,"_157":140,"_158":159,"_160":121,"_109":269,"_104":33,"_162":176,"_164":270,"_165":27,"_166":-5,"_167":429,"_102":430},[],[210,216,267],{"_107":274,"_99":275,"_154":276,"_156":217,"_157":140,"_158":277,"_160":121,"_109":278,"_104":244,"_162":176,"_164":279,"_165":27,"_166":-5,"_167":432,"_102":433},[],[210,216,275],{"_107":283,"_99":284,"_154":285,"_156":217,"_157":140,"_158":286,"_160":121,"_109":287,"_104":159,"_162":176,"_164":288,"_165":27,"_166":-5,"_167":435,"_102":436},[],[210,216,284],{"_107":292,"_99":293,"_154":294,"_156":217,"_157":140,"_158":295,"_160":121,"_109":296,"_104":297,"_162":176,"_164":298,"_165":27,"_166":-5,"_167":438,"_102":439},[],[210,216,293],[210,216],{"_107":303,"_99":304,"_154":305,"_156":211,"_157":140,"_158":159,"_160":121,"_109":306,"_104":33,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":442,"_102":446},[443],{"_107":309,"_99":310,"_154":311,"_156":305,"_157":140,"_158":159,"_160":121,"_109":312,"_104":33,"_162":176,"_164":313,"_165":27,"_166":-5,"_167":444,"_102":445},[],[210,304,310],[210,304],{"_107":318,"_99":319,"_154":320,"_156":211,"_157":140,"_158":159,"_160":121,"_109":321,"_104":33,"_162":176,"_164":322,"_165":27,"_166":-5,"_167":448,"_102":449},[],[210,319],[210],{"_107":327,"_99":328,"_154":329,"_156":-5,"_157":140,"_158":159,"_160":121,"_109":330,"_104":33,"_162":195,"_164":331,"_165":27,"_166":-5,"_167":452,"_102":453},[],[328],{"_107":335,"_99":336,"_154":337,"_156":-5,"_157":140,"_158":338,"_160":121,"_109":339,"_104":94,"_162":195,"_164":340,"_165":27,"_166":-5,"_167":455,"_102":456},[],[336],{"_107":344,"_99":345,"_154":346,"_156":-5,"_157":140,"_158":347,"_160":121,"_109":348,"_104":33,"_162":195,"_164":349,"_165":27,"_166":-5,"_167":458,"_102":459},[],[345],{"_107":353,"_99":182,"_154":119,"_156":-5,"_157":140,"_158":123,"_160":121,"_109":354,"_104":355,"_162":356,"_164":357,"_165":27,"_166":-5,"_167":461,"_102":462},[],[182],[394,396,399,402,405,409,411,413,416,419,422,425,428,431,434,437,441,443,447,451,454,457,460],{"_107":200,"_99":201,"_154":202,"_156":155,"_157":140,"_158":159,"_160":121,"_109":371,"_104":33,"_162":195,"_164":204,"_165":27,"_166":-5,"_102":465},[153,201],[],{"_107":143,"_109":468,"_469":470,"_99":43,"_141":375,"_104":471,"_142":472,"_144":473,"_474":475,"_133":27,"_113":114,"_476":378,"_477":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

{project.name}

Create New Branch

Welcome to OpenTownie

Create New Project

\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

Theme Features

Color Palette

UI Components

Form Elements

Buttons

\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