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",[],[159,201],[159],{"_104":209,"_95":210,"_160":211,"_162":-5,"_163":141,"_164":101,"_165":118,"_106":212,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":213,"_98":308},"fa9850c0-09b5-11f0-a8be-569c3dd06744","frontend","3e09e05e-9800-40c2-81aa-2dc843fd8dda",["D",1742933764598],[214,285,300],{"_104":215,"_95":216,"_160":217,"_162":211,"_163":141,"_164":101,"_165":118,"_106":218,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":219,"_98":284},"fa98494a-09b5-11f0-a8be-569c3dd06744","components","93e1087c-057a-4d47-a0aa-95bcd891f2d0",["D",1742933764598],[220,228,236,244,252,260,268,276],{"_104":221,"_95":222,"_160":223,"_162":217,"_163":141,"_164":101,"_165":22,"_106":224,"_100":32,"_167":179,"_169":225,"_170":22,"_171":-5,"_172":226,"_98":227},"fa98050c-09b5-11f0-a8be-569c3dd06744","App.tsx","84e2660b-bb85-41f0-913d-c34470e03620",["D",1742933764598],"/** @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}",[],[210,216,222],{"_104":229,"_95":230,"_160":231,"_162":217,"_163":141,"_164":101,"_165":118,"_106":232,"_100":32,"_167":179,"_169":233,"_170":22,"_171":-5,"_172":234,"_98":235},"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,230],{"_104":237,"_95":238,"_160":239,"_162":217,"_163":141,"_164":101,"_165":22,"_106":240,"_100":32,"_167":179,"_169":241,"_170":22,"_171":-5,"_172":242,"_98":243},"fa980c64-09b5-11f0-a8be-569c3dd06744","Chat.tsx","f6f7711e-55db-4eab-b107-5a41e82638a1",["D",1742933764598],"/** @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 📎",[],[210,216,238],{"_104":245,"_95":246,"_160":247,"_162":217,"_163":141,"_164":101,"_165":118,"_106":248,"_100":32,"_167":179,"_169":249,"_170":22,"_171":-5,"_172":250,"_98":251},"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,246],{"_104":253,"_95":254,"_160":255,"_162":217,"_163":141,"_164":101,"_165":118,"_106":256,"_100":32,"_167":179,"_169":257,"_170":22,"_171":-5,"_172":258,"_98":259},"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,254],{"_104":261,"_95":262,"_160":263,"_162":217,"_163":141,"_164":101,"_165":22,"_106":264,"_100":32,"_167":179,"_169":265,"_170":22,"_171":-5,"_172":266,"_98":267},"fa983eaa-09b5-11f0-a8be-569c3dd06744","Login.tsx","377c324f-67a9-4919-91b2-9e3b6e1c8329",["D",1742933764598],"/** @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}",[],[210,216,262],{"_104":269,"_95":270,"_160":271,"_162":217,"_163":141,"_164":101,"_165":22,"_106":272,"_100":32,"_167":179,"_169":273,"_170":22,"_171":-5,"_172":274,"_98":275},"fa984120-09b5-11f0-a8be-569c3dd06744","MessagePart.tsx","8919da97-d518-4ae3-827c-d86b207432a7",["D",1742933764598],"/** @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}",[],[210,216,270],{"_104":277,"_95":278,"_160":279,"_162":217,"_163":141,"_164":101,"_165":22,"_106":280,"_100":32,"_167":179,"_169":281,"_170":22,"_171":-5,"_172":282,"_98":283},"fa9845ee-09b5-11f0-a8be-569c3dd06744","Projects.tsx","9b535ad3-b3fb-4d7a-b000-e4222c5ea95d",["D",1742933764598],"/** @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}",[],[210,216,278],[210,216],{"_104":286,"_95":287,"_160":288,"_162":211,"_163":141,"_164":101,"_165":118,"_106":289,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":290,"_98":299},"fa984dfa-09b5-11f0-a8be-569c3dd06744","utils","b36453c6-c598-4ef1-9f4b-ec45a38ede9b",["D",1742933764598],[291],{"_104":292,"_95":293,"_160":294,"_162":288,"_163":141,"_164":101,"_165":118,"_106":295,"_100":32,"_167":179,"_169":296,"_170":22,"_171":-5,"_172":297,"_98":298},"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,287,293],[210,287],{"_104":301,"_95":302,"_160":303,"_162":211,"_163":141,"_164":101,"_165":118,"_106":304,"_100":32,"_167":179,"_169":305,"_170":22,"_171":-5,"_172":306,"_98":307},"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,302],[210],{"_104":310,"_95":311,"_160":312,"_162":-5,"_163":141,"_164":101,"_165":118,"_106":313,"_100":32,"_167":195,"_169":314,"_170":22,"_171":-5,"_172":315,"_98":316},"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",[],[311],{"_104":318,"_95":99,"_160":116,"_162":-5,"_163":141,"_164":101,"_165":22,"_106":319,"_100":32,"_167":320,"_169":321,"_170":22,"_171":-5,"_172":322,"_98":323},"fa98534a-09b5-11f0-a8be-569c3dd06744",["D",1742933764598],"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// 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;",[],[99],"files",[157,174,183,190,199,208,214,220,228,236,244,252,260,268,276,285,291,300,309,317],"counts",{"_328":32,"_329":330,"_331":32,"_332":333},"pulls","branches",3,"forks","envVars",2,"contents",[],{"_104":318,"_95":99,"_160":116,"_162":-5,"_163":141,"_164":101,"_165":22,"_106":337,"_100":32,"_167":320,"_169":321,"_170":22,"_171":-5,"_98":338},["D",1742933764598],[99],"upstreamProject",{"_104":149,"_95":96,"_112":341,"_113":-5,"_110":111,"_23":342},"AI assistant that can edit Val Town Projects",{"_93":343,"_133":344},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","upstreamBranch",{"_104":144,"_106":347,"_348":349,"_95":43,"_142":149,"_100":350,"_143":351,"_145":352,"_353":354,"_108":-5,"_154":22,"_110":111,"_153":343,"_16":151,"_152":96},["D",1738273009969],"updatedAt",["D",1746459699444],1044,"97af82a2-da6d-11ef-adc0-e6cdfca9ef9f",89,"lockfileKey","1746660347255-esm.town_v_stevekrouse_OpenTownie@1044-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":361,"_155":366,"_324":427,"_195":428,"_334":430,"_431":432,"_435":22,"_436":-5,"_437":438,"_439":440,"_441":442},{"_104":105,"_95":96,"_106":362,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":116,"_117":118,"_119":120,"_121":32,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":363,"_135":364,"_138":365,"_154":22},["D",1742933764598],{"_93":94,"_133":134},{"_93":94,"_137":134},{"_100":140,"_95":43,"_104":141,"_142":105,"_143":144,"_145":146,"_147":111,"_148":149,"_150":151,"_152":96,"_153":94},[367,382,421,424],{"_104":158,"_95":159,"_160":161,"_162":-5,"_163":141,"_164":101,"_165":118,"_106":166,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":368,"_98":381},[369,372,375,378],{"_104":175,"_95":176,"_160":177,"_162":161,"_163":141,"_164":101,"_165":22,"_106":178,"_100":32,"_167":179,"_169":180,"_170":22,"_171":-5,"_172":370,"_98":371},[],[159,176],{"_104":184,"_95":99,"_160":185,"_162":161,"_163":141,"_164":101,"_165":22,"_106":186,"_100":32,"_167":179,"_169":187,"_170":22,"_171":-5,"_172":373,"_98":374},[],[159,99],{"_104":191,"_95":192,"_160":193,"_162":161,"_163":141,"_164":101,"_165":118,"_106":194,"_100":32,"_167":195,"_169":196,"_170":22,"_171":-5,"_172":376,"_98":377},[],[159,192],{"_104":200,"_95":201,"_160":202,"_162":161,"_163":141,"_164":101,"_165":118,"_106":203,"_100":32,"_167":195,"_169":204,"_170":22,"_171":-5,"_172":379,"_98":380},[],[159,201],[159],{"_104":209,"_95":210,"_160":211,"_162":-5,"_163":141,"_164":101,"_165":118,"_106":212,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":383,"_98":420},[384,411,417],{"_104":215,"_95":216,"_160":217,"_162":211,"_163":141,"_164":101,"_165":118,"_106":218,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":385,"_98":410},[386,389,392,395,398,401,404,407],{"_104":221,"_95":222,"_160":223,"_162":217,"_163":141,"_164":101,"_165":22,"_106":224,"_100":32,"_167":179,"_169":225,"_170":22,"_171":-5,"_172":387,"_98":388},[],[210,216,222],{"_104":229,"_95":230,"_160":231,"_162":217,"_163":141,"_164":101,"_165":118,"_106":232,"_100":32,"_167":179,"_169":233,"_170":22,"_171":-5,"_172":390,"_98":391},[],[210,216,230],{"_104":237,"_95":238,"_160":239,"_162":217,"_163":141,"_164":101,"_165":22,"_106":240,"_100":32,"_167":179,"_169":241,"_170":22,"_171":-5,"_172":393,"_98":394},[],[210,216,238],{"_104":245,"_95":246,"_160":247,"_162":217,"_163":141,"_164":101,"_165":118,"_106":248,"_100":32,"_167":179,"_169":249,"_170":22,"_171":-5,"_172":396,"_98":397},[],[210,216,246],{"_104":253,"_95":254,"_160":255,"_162":217,"_163":141,"_164":101,"_165":118,"_106":256,"_100":32,"_167":179,"_169":257,"_170":22,"_171":-5,"_172":399,"_98":400},[],[210,216,254],{"_104":261,"_95":262,"_160":263,"_162":217,"_163":141,"_164":101,"_165":22,"_106":264,"_100":32,"_167":179,"_169":265,"_170":22,"_171":-5,"_172":402,"_98":403},[],[210,216,262],{"_104":269,"_95":270,"_160":271,"_162":217,"_163":141,"_164":101,"_165":22,"_106":272,"_100":32,"_167":179,"_169":273,"_170":22,"_171":-5,"_172":405,"_98":406},[],[210,216,270],{"_104":277,"_95":278,"_160":279,"_162":217,"_163":141,"_164":101,"_165":22,"_106":280,"_100":32,"_167":179,"_169":281,"_170":22,"_171":-5,"_172":408,"_98":409},[],[210,216,278],[210,216],{"_104":286,"_95":287,"_160":288,"_162":211,"_163":141,"_164":101,"_165":118,"_106":289,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":412,"_98":416},[413],{"_104":292,"_95":293,"_160":294,"_162":288,"_163":141,"_164":101,"_165":118,"_106":295,"_100":32,"_167":179,"_169":296,"_170":22,"_171":-5,"_172":414,"_98":415},[],[210,287,293],[210,287],{"_104":301,"_95":302,"_160":303,"_162":211,"_163":141,"_164":101,"_165":118,"_106":304,"_100":32,"_167":179,"_169":305,"_170":22,"_171":-5,"_172":418,"_98":419},[],[210,302],[210],{"_104":310,"_95":311,"_160":312,"_162":-5,"_163":141,"_164":101,"_165":118,"_106":313,"_100":32,"_167":195,"_169":314,"_170":22,"_171":-5,"_172":422,"_98":423},[],[311],{"_104":318,"_95":99,"_160":116,"_162":-5,"_163":141,"_164":101,"_165":22,"_106":319,"_100":32,"_167":320,"_169":321,"_170":22,"_171":-5,"_172":425,"_98":426},[],[99],[367,369,372,375,378,382,384,386,389,392,395,398,401,404,407,411,413,417,421,424],{"_104":318,"_95":99,"_160":116,"_162":-5,"_163":141,"_164":101,"_165":22,"_106":337,"_100":32,"_167":320,"_169":321,"_170":22,"_171":-5,"_98":429},[99],[],"upstream",{"_104":144,"_106":433,"_348":434,"_95":43,"_142":149,"_100":350,"_143":351,"_145":352,"_353":354,"_108":-5,"_154":22,"_110":111,"_153":343,"_16":151,"_152":96},["D",1738273009969],["D",1746459699444],"showCompareCallout","pull","ahead",93,"behind",163,"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