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",[],[158,192],[158],{"_105":201,"_95":202,"_159":203,"_161":-5,"_162":142,"_163":164,"_165":119,"_107":204,"_101":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":205,"_99":300},"2c30bd48-09ac-11f0-aab6-569c3dd06744","frontend","37823029-85c6-4ee8-817c-7f2378894982",["D",1742929552875],[206,277,292],{"_105":207,"_95":208,"_159":209,"_161":203,"_162":142,"_163":164,"_165":119,"_107":210,"_101":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":211,"_99":276},"2c30b672-09ac-11f0-aab6-569c3dd06744","components","210fc677-79a4-4848-b435-49e00378e635",["D",1742929552875],[212,220,228,236,244,252,260,268],{"_105":213,"_95":214,"_159":215,"_161":209,"_162":142,"_163":164,"_165":22,"_107":216,"_101":32,"_167":179,"_169":217,"_170":22,"_171":-5,"_172":218,"_99":219},"2c305c54-09ac-11f0-aab6-569c3dd06744","App.tsx","63bab4c9-79ca-4e3b-85a1-d5f9869147b0",["D",1742929552875],"/** @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

OpenTownie

\n \n Logout\n \n

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

\n );\n}",[],[202,208,214],{"_105":221,"_95":222,"_159":223,"_161":209,"_162":142,"_163":164,"_165":119,"_107":224,"_101":32,"_167":179,"_169":225,"_170":22,"_171":-5,"_172":226,"_99":227},"2c305e2a-09ac-11f0-aab6-569c3dd06744","BranchControl.tsx","e76b8d9e-730a-4913-91c3-7b7cc5933d77",["D",1742929552875],"/** @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}",[],[202,208,222],{"_105":229,"_95":230,"_159":231,"_161":209,"_162":142,"_163":164,"_165":119,"_107":232,"_101":32,"_167":179,"_169":233,"_170":22,"_171":-5,"_172":234,"_99":235},"2c30679e-09ac-11f0-aab6-569c3dd06744","Chat.tsx","12857c00-f400-4abc-8b5a-e1abce488686",["D",1742929552875],"/** @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\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 // 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 // Show a warning message if no anthropicApiKey is provided\n const showAnthropicKeyWarning = !anthropicApiKey;\n\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 {showAnthropicKeyWarning && (\n

Anthropic API Key Missing

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

\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 {/* 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.stack}

\n )\n : undefined}\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 }}\n />\n\n {!running && (\n {\n const fileInput = document.querySelector(\"input[type=\\\"file\\\"]\");\n if (fileInput) {\n fileInput.click();\n }\n }}\n title=\"Attach images\"\n >\n 📎",[],[202,208,230],{"_105":237,"_95":238,"_159":239,"_161":209,"_162":142,"_163":164,"_165":119,"_107":240,"_101":32,"_167":179,"_169":241,"_170":22,"_171":-5,"_172":242,"_99":243},"2c30778e-09ac-11f0-aab6-569c3dd06744","CreateBranch.tsx","1b2148bf-555f-45f2-ab9e-49dd0a27d010",["D",1742929552875],"/** @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}",[],[202,208,238],{"_105":245,"_95":246,"_159":247,"_161":209,"_162":142,"_163":164,"_165":119,"_107":248,"_101":32,"_167":179,"_169":249,"_170":22,"_171":-5,"_172":250,"_99":251},"2c30a4de-09ac-11f0-aab6-569c3dd06744","ImageUpload.tsx","6b166287-137b-477c-83b5-aef5e391d8cc",["D",1742929552875],"/** @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}",[],[202,208,246],{"_105":253,"_95":254,"_159":255,"_161":209,"_162":142,"_163":164,"_165":119,"_107":256,"_101":32,"_167":179,"_169":257,"_170":22,"_171":-5,"_172":258,"_99":259},"2c30aba0-09ac-11f0-aab6-569c3dd06744","Login.tsx","99aeddf6-5653-4dff-8581-583f06c1e07c",["D",1742929552875],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useLocalStorage } from \"https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0\";\n\nexport function Login() {\n const [bearerToken, setBearerToken] = useLocalStorage(\"bearer\", \"\");\n const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage(\"anthropic_api_key\", \"\");\n\n return (\n

Login

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

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

\n \n Login\n \n

\n );\n}",[],[202,208,254],{"_105":261,"_95":262,"_159":263,"_161":209,"_162":142,"_163":164,"_165":119,"_107":264,"_101":32,"_167":179,"_169":265,"_170":22,"_171":-5,"_172":266,"_99":267},"2c30b17c-09ac-11f0-aab6-569c3dd06744","MessagePart.tsx","0a2c6209-4ac6-4cbe-bd87-53db9b6f29e1",["D",1742929552875],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { type Message } from \"https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport ReactMarkdown from \"https://esm.sh/react-markdown?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport { ImagePreview } from \"./ImageUpload.tsx\";\n\nexport function MessagePart({ part }: { part: NonNullable[number] }) {\n if (part.type === \"text\") return {part.text};\n if (part.type === \"reasoning\")\n return (\n

\n Reasoning...\n

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

\n {detail.text}\n

\n ))}\n

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

\n {name}\n

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

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

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

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

{atob(part.data)}

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

\n $\"Uploaded$ \n

\n );\n }\n // Handle multiple images in a single part\n if (part.type === \"images\") {\n return img.url)} />;\n }\n}",[],[202,208,262],{"_105":269,"_95":270,"_159":271,"_161":209,"_162":142,"_163":164,"_165":119,"_107":272,"_101":32,"_167":179,"_169":273,"_170":22,"_171":-5,"_172":274,"_99":275},"2c30b3f2-09ac-11f0-aab6-569c3dd06744","Projects.tsx","2936171e-63af-4933-8e9a-d3f2608c280f",["D",1742929552875],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\n\n// Component for the loading spinner\nconst LoadingSpinner = () => (\n

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

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

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

{p.name}

\n ))\n )}\n

\n );\n}",[],[202,208,270],[202,208],{"_105":278,"_95":279,"_159":280,"_161":203,"_162":142,"_163":164,"_165":119,"_107":281,"_101":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":282,"_99":291},"2c30bae6-09ac-11f0-aab6-569c3dd06744","utils","652ea3ef-7a08-4116-acf2-2704f87555e8",["D",1742929552875],[283],{"_105":284,"_95":285,"_159":286,"_161":280,"_162":142,"_163":164,"_165":119,"_107":287,"_101":32,"_167":179,"_169":288,"_170":22,"_171":-5,"_172":289,"_99":290},"2c30b7f8-09ac-11f0-aab6-569c3dd06744","soundEffects.ts","ce440f27-b765-4d9e-8f16-015468998815",["D",1742929552875],"/**\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}",[],[202,279,285],[202,279],{"_105":293,"_95":294,"_159":295,"_161":203,"_162":142,"_163":164,"_165":119,"_107":296,"_101":32,"_167":179,"_169":297,"_170":22,"_171":-5,"_172":298,"_99":299},"2c30bbe0-09ac-11f0-aab6-569c3dd06744","index.tsx","5d91fbea-2859-44e3-8304-91b2b8c54a46",["D",1742929552875],"/** @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();",[],[202,294],[202],{"_105":302,"_95":303,"_159":304,"_161":-5,"_162":142,"_163":164,"_165":119,"_107":305,"_101":32,"_167":195,"_169":306,"_170":22,"_171":-5,"_172":307,"_99":308},"2c30be38-09ac-11f0-aab6-569c3dd06744","README.md","1cc759b2-fcc4-44fe-a18d-6f6f20631ec1",["D",1742929552875],"# OpenTownie\n\nOpenTownie is a Val Town Project that lets you edit other Val Town Projects with Claude 3.7 Sonnet.\n\nIt uses agentic tool-calling, taking manh read, write, and thinking steps autonomously when carrying out your instructions. \n\n### Todos\n\n- [ ] Give it all the code (except maybe .txt files) as initial context (like cursor sonnet max)\n- [ ] Rebuild as React Router?\n- [ ] Persistent threads?\n- [ ] Have it default to creating a new branch off main and then embedding and iframe to the resulting http val and give you a link to a pr opening url\n- [ ] A way to upload docs, by URL? A mini site to recursively crawl docs and markdownify?\n- [x] Show reasoning in a detail\n- [x] Consider asking it to write the minimum code possible \n- [x] Add caching (post in the vercel ai discussion about how it's not working)\n- [x] For login, have a button that reloads the page\n- [x] Start a timer for messages\n- [x] Add more indicators that it's \"still working\"\n- [x] Require users supply their own Anthropic token?\n- [x] Add cost indications on messages\n- [x] Add a bell noise when the message is done to let us know\n- [x] Launch!\n- [x] Let it select the branch name from a dropdown\n- [x] Consider giving it a tool to replace whole files\n- [x] prompt it to use the thinking tool\n- [x] delete file command",[],[303],{"_105":310,"_95":100,"_159":311,"_161":-5,"_162":142,"_163":102,"_165":119,"_107":312,"_101":164,"_167":313,"_169":314,"_170":22,"_171":-5,"_172":315,"_99":316},"6795c04e-09ad-11f0-b186-569c3dd06744","2a70a609-2f4c-487c-b732-de18462e62f2",["D",1742930082025],"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 SVG Editor\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;",[],[100],"files",[156,174,183,190,200,206,212,220,228,236,244,252,260,268,277,283,292,301,309],"counts",{"_321":32,"_322":141,"_323":32,"_324":32},"pulls","branches","forks","envVars","contents",[],{"_105":310,"_95":100,"_159":311,"_161":-5,"_162":142,"_163":102,"_165":119,"_107":328,"_101":164,"_167":313,"_169":314,"_170":22,"_171":-5,"_99":329},["D",1742930082025],[100],"upstreamProject","upstreamBranch",{"_105":145,"_107":333,"_334":335,"_95":43,"_143":106,"_101":336,"_144":-5,"_146":-5,"_337":338,"_109":-5,"_153":22,"_111":112,"_152":94,"_16":123,"_151":96},["D",1742929525118],"updatedAt",["D",1742931736146],25,"lockfileKey","1745103976739-esm.town_v_dcm31_svgEditor@25-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":98,"_101":102,"_99":100,"_103":345,"_154":350,"_317":408,"_195":409,"_325":411,"_412":413,"_416":119,"_417":-5,"_418":419,"_420":421,"_422":423},{"_105":106,"_95":96,"_107":346,"_109":-5,"_110":22,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":121,"_122":32,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":347,"_136":348,"_139":349,"_153":22},["D",1742929525118],{"_93":94,"_134":135},{"_93":94,"_138":135},{"_101":141,"_95":98,"_105":142,"_143":106,"_144":145,"_146":147,"_148":112,"_149":106,"_150":123,"_151":96,"_152":94},[351,363,402,405],{"_105":157,"_95":158,"_159":160,"_161":-5,"_162":142,"_163":164,"_165":119,"_107":166,"_101":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":352,"_99":362},[353,356,359],{"_105":175,"_95":176,"_159":177,"_161":160,"_162":142,"_163":164,"_165":119,"_107":178,"_101":32,"_167":179,"_169":180,"_170":22,"_171":-5,"_172":354,"_99":355},[],[158,176],{"_105":184,"_95":100,"_159":185,"_161":160,"_162":142,"_163":164,"_165":119,"_107":186,"_101":32,"_167":179,"_169":187,"_170":22,"_171":-5,"_172":357,"_99":358},[],[158,100],{"_105":191,"_95":192,"_159":193,"_161":160,"_162":142,"_163":164,"_165":119,"_107":194,"_101":32,"_167":195,"_169":196,"_170":22,"_171":-5,"_172":360,"_99":361},[],[158,192],[158],{"_105":201,"_95":202,"_159":203,"_161":-5,"_162":142,"_163":164,"_165":119,"_107":204,"_101":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":364,"_99":401},[365,392,398],{"_105":207,"_95":208,"_159":209,"_161":203,"_162":142,"_163":164,"_165":119,"_107":210,"_101":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":366,"_99":391},[367,370,373,376,379,382,385,388],{"_105":213,"_95":214,"_159":215,"_161":209,"_162":142,"_163":164,"_165":22,"_107":216,"_101":32,"_167":179,"_169":217,"_170":22,"_171":-5,"_172":368,"_99":369},[],[202,208,214],{"_105":221,"_95":222,"_159":223,"_161":209,"_162":142,"_163":164,"_165":119,"_107":224,"_101":32,"_167":179,"_169":225,"_170":22,"_171":-5,"_172":371,"_99":372},[],[202,208,222],{"_105":229,"_95":230,"_159":231,"_161":209,"_162":142,"_163":164,"_165":119,"_107":232,"_101":32,"_167":179,"_169":233,"_170":22,"_171":-5,"_172":374,"_99":375},[],[202,208,230],{"_105":237,"_95":238,"_159":239,"_161":209,"_162":142,"_163":164,"_165":119,"_107":240,"_101":32,"_167":179,"_169":241,"_170":22,"_171":-5,"_172":377,"_99":378},[],[202,208,238],{"_105":245,"_95":246,"_159":247,"_161":209,"_162":142,"_163":164,"_165":119,"_107":248,"_101":32,"_167":179,"_169":249,"_170":22,"_171":-5,"_172":380,"_99":381},[],[202,208,246],{"_105":253,"_95":254,"_159":255,"_161":209,"_162":142,"_163":164,"_165":119,"_107":256,"_101":32,"_167":179,"_169":257,"_170":22,"_171":-5,"_172":383,"_99":384},[],[202,208,254],{"_105":261,"_95":262,"_159":263,"_161":209,"_162":142,"_163":164,"_165":119,"_107":264,"_101":32,"_167":179,"_169":265,"_170":22,"_171":-5,"_172":386,"_99":387},[],[202,208,262],{"_105":269,"_95":270,"_159":271,"_161":209,"_162":142,"_163":164,"_165":119,"_107":272,"_101":32,"_167":179,"_169":273,"_170":22,"_171":-5,"_172":389,"_99":390},[],[202,208,270],[202,208],{"_105":278,"_95":279,"_159":280,"_161":203,"_162":142,"_163":164,"_165":119,"_107":281,"_101":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":393,"_99":397},[394],{"_105":284,"_95":285,"_159":286,"_161":280,"_162":142,"_163":164,"_165":119,"_107":287,"_101":32,"_167":179,"_169":288,"_170":22,"_171":-5,"_172":395,"_99":396},[],[202,279,285],[202,279],{"_105":293,"_95":294,"_159":295,"_161":203,"_162":142,"_163":164,"_165":119,"_107":296,"_101":32,"_167":179,"_169":297,"_170":22,"_171":-5,"_172":399,"_99":400},[],[202,294],[202],{"_105":302,"_95":303,"_159":304,"_161":-5,"_162":142,"_163":164,"_165":119,"_107":305,"_101":32,"_167":195,"_169":306,"_170":22,"_171":-5,"_172":403,"_99":404},[],[303],{"_105":310,"_95":100,"_159":311,"_161":-5,"_162":142,"_163":102,"_165":119,"_107":312,"_101":164,"_167":313,"_169":314,"_170":22,"_171":-5,"_172":406,"_99":407},[],[100],[351,353,356,359,363,365,367,370,373,376,379,382,385,388,392,394,398,402,405],{"_105":310,"_95":100,"_159":311,"_161":-5,"_162":142,"_163":102,"_165":119,"_107":328,"_101":164,"_167":313,"_169":314,"_170":22,"_171":-5,"_99":410},[100],[],"upstream",{"_105":145,"_107":414,"_334":415,"_95":43,"_143":106,"_101":336,"_144":-5,"_146":-5,"_337":338,"_109":-5,"_153":22,"_111":112,"_152":94,"_16":123,"_151":96},["D",1742929525118],["D",1742931736146],"showCompareCallout","pull","ahead",3,"behind",10,"templates",[],"actionData","errors"]

Hi

OpenTownie

{project.name}

Create New Branch

Login

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

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