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",[],[157,200],[157],{"_103":208,"_95":209,"_158":210,"_160":-5,"_161":139,"_162":138,"_163":117,"_105":211,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":212,"_98":426},"0f74b786-0a51-11f0-9584-569c3dd06744","frontend","186b7c3c-afe7-41e2-9e7f-b9a0b90bd954",["D",1743000371588],[213,364,387,418],{"_103":214,"_95":215,"_158":216,"_160":210,"_161":139,"_162":138,"_163":117,"_105":217,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":218,"_98":363},"0f744fda-0a51-11f0-9584-569c3dd06744","components","780e6c1c-51fa-4be0-a845-c44ddcdc5741",["D",1743000371588],[219,227,235,243,251,259,267,275,283,291,299,307,315,323,331,339,347,355],{"_103":220,"_95":221,"_158":222,"_160":216,"_161":139,"_162":138,"_163":117,"_105":223,"_100":32,"_165":177,"_167":224,"_168":22,"_169":-5,"_170":225,"_98":226},"0f73ff30-0a51-11f0-9584-569c3dd06744","ApiKeyWarning.tsx","51fff778-358c-4bdb-8bcb-9f7ed5ea589d",["D",1743000371588],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\n\ninterface ApiKeyWarningProps {\n show: boolean;\n}\n\nexport function ApiKeyWarning({ show }: ApiKeyWarningProps) {\n if (!show) return null;\n \n return (\n

Anthropic API Key Missing

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

\n );\n}",[],[209,215,221],{"_103":228,"_95":229,"_158":230,"_160":216,"_161":139,"_162":138,"_163":117,"_105":231,"_100":32,"_165":177,"_167":232,"_168":22,"_169":-5,"_170":233,"_98":234},"0f74012e-0a51-11f0-9584-569c3dd06744","App.tsx","06dfc9a5-5c7a-4d85-a43f-8553e4b6a5ec",["D",1743000371588],"/** @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}",[],[209,215,229],{"_103":236,"_95":237,"_158":238,"_160":216,"_161":139,"_162":138,"_163":117,"_105":239,"_100":32,"_165":177,"_167":240,"_168":22,"_169":-5,"_170":241,"_98":242},"0f740426-0a51-11f0-9584-569c3dd06744","BranchControl.tsx","3bbb48c3-42ed-436b-89d7-9819747beced",["D",1743000371588],"/** @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}",[],[209,215,237],{"_103":244,"_95":245,"_158":246,"_160":216,"_161":139,"_162":138,"_163":117,"_105":247,"_100":32,"_165":177,"_167":248,"_168":22,"_169":-5,"_170":249,"_98":250},"0f740f5c-0a51-11f0-9584-569c3dd06744","Chat.tsx","ad2d1bc9-5508-4aa6-8f83-d74c388ac6cb",["D",1743000371588],"/** @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 { useChatLogic } from \"../hooks/useChatLogic.ts\";\nimport { useProjectFiles } from \"../hooks/useProjectFiles.ts\";\nimport { ChatHeader } from \"./ChatHeader.tsx\";\nimport { ProjectFiles } from \"./ProjectFiles.tsx\";\nimport { ChatMessages } from \"./ChatMessages.tsx\";\nimport { ChatInput } from \"./ChatInput.tsx\";\nimport { ApiKeyWarning } from \"./ApiKeyWarning.tsx\";\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 [branchId, setBranchId] = useLocalStorage(\"branchId\", undefined);\n const [soundEnabled, setSoundEnabled] = useLocalStorage(\"soundEnabled\", true);\n const [selectedFiles, setSelectedFiles] = useState([]);\n const [images, setImages] = useState<(string | null)[]>([]);\n\n // Use custom hook to fetch project files\n const {\n projectFiles,\n isLoadingFiles,\n error: filesError,\n } = useProjectFiles({\n projectId: project?.id,\n branchId,\n bearerToken,\n });\n\n const handleSelectionChange = (files: string[]) => {\n setSelectedFiles(files);\n };\n\n // Use the custom hook for chat logic\n const {\n messages,\n error,\n input,\n handleInputChange,\n handleSubmit,\n running,\n usages,\n messageEndTimes,\n } = useChatLogic({\n project,\n branchId,\n anthropicApiKey,\n bearerToken,\n selectedFiles,\n images,\n soundEnabled,\n });\n\n return (\n

\n \n\n \n\n

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

\n );\n}",[],[209,215,245],{"_103":252,"_95":253,"_158":254,"_160":216,"_161":139,"_162":138,"_163":117,"_105":255,"_100":32,"_165":177,"_167":256,"_168":22,"_169":-5,"_170":257,"_98":258},"0f7412f4-0a51-11f0-9584-569c3dd06744","ChatHeader.tsx","39c79404-89db-4325-a148-0161c12cfe0e",["D",1743000371588],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\nimport { BranchControl } from \"./BranchControl.tsx\";\n\ninterface ChatHeaderProps {\n project: {\n id: string;\n name: string;\n username: string;\n };\n bearerToken: string;\n branchId: string | undefined;\n setBranchId: (branchId: string | undefined) => void;\n soundEnabled: boolean;\n setSoundEnabled: (enabled: boolean) => void;\n setProject: (project: any) => void;\n}\n\nexport function ChatHeader({\n project,\n bearerToken,\n branchId,\n setBranchId,\n soundEnabled,\n setSoundEnabled,\n setProject,\n}: ChatHeaderProps) {\n return (\n

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

{project.name}

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

\n );\n}",[],[209,215,253],{"_103":260,"_95":261,"_158":262,"_160":216,"_161":139,"_162":138,"_163":117,"_105":263,"_100":32,"_165":177,"_167":264,"_168":22,"_169":-5,"_170":265,"_98":266},"0f74148e-0a51-11f0-9584-569c3dd06744","ChatInput.tsx","b1fadbf5-650c-44cf-a975-ceea4c021135",["D",1743000371588],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\nimport { ImageUpload } from \"./ImageUpload.tsx\";\n\ninterface ChatInputProps {\n input: string;\n handleInputChange: (e: React.ChangeEvent) => void;\n handleSubmit: (e: React.FormEvent) => void;\n running: boolean;\n images: (string | null)[];\n setImages: React.Dispatch>;\n}\n\nexport function ChatInput({ \n input, \n handleInputChange, \n handleSubmit, \n running, \n images, \n setImages \n}: ChatInputProps) {\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 const handleFormSubmit = (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 handleSubmit(e);\n setImages([]);\n }\n };\n\n return (\n \n {(images.length > 0 || !running) && }\n\n

\n {\n handleInputChange(e);\n }}\n onKeyDown={(e) => {\n // Only perform Enter key submission on desktop, not on mobile\n if (e.key === \"Enter\" && !e.shiftKey && !isMobile) {\n e.preventDefault();\n if (input.trim() || images.filter(Boolean).length > 0) {\n handleFormSubmit(e as any);\n }\n }\n }}\n rows={3}\n style={{\n WebkitAppearance: \"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 Attach images 📎\n \n )}\n

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

\n \n );\n}",[],[209,215,261],{"_103":268,"_95":269,"_158":270,"_160":216,"_161":139,"_162":138,"_163":117,"_105":271,"_100":32,"_165":177,"_167":272,"_168":22,"_169":-5,"_170":273,"_98":274},"0f741baa-0a51-11f0-9584-569c3dd06744","ChatMessages.tsx","b2ba6d8c-2410-49eb-b882-e10be953b4b3",["D",1743000371588],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\nimport { MessageItem } from \"./MessageItem.tsx\";\nimport { ErrorDisplay } from \"./ErrorDisplay.tsx\";\n\ninterface ChatMessagesProps {\n messages: any[];\n usages: Record;\n messageEndTimes: Record;\n running: boolean;\n error: Error | null;\n}\n\nexport function ChatMessages({\n messages,\n usages,\n messageEndTimes,\n running,\n error,\n}: ChatMessagesProps) {\n return (\n

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

\n );\n}",[],[209,215,269],{"_103":276,"_95":277,"_158":278,"_160":216,"_161":139,"_162":138,"_163":117,"_105":279,"_100":32,"_165":177,"_167":280,"_168":22,"_169":-5,"_170":281,"_98":282},"0f741d8a-0a51-11f0-9584-569c3dd06744","CreateBranch.tsx","376e8fd7-01c4-45af-a721-79cceeacaae3",["D",1743000371588],"/** @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}",[],[209,215,277],{"_103":284,"_95":285,"_158":286,"_160":216,"_161":139,"_162":138,"_163":117,"_105":287,"_100":32,"_165":177,"_167":288,"_168":22,"_169":-5,"_170":289,"_98":290},"0f7421ea-0a51-11f0-9584-569c3dd06744","DirectoryTree.tsx","b0e1d2d7-d275-4f28-b922-3d3af28f54b6",["D",1743000371588],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\n\n// Type definitions\ninterface FileNode {\n path: string;\n type: \"file\" | \"directory\";\n name: string;\n children?: FileNode[];\n checked?: boolean;\n}\n\ninterface DirectoryTreeProps {\n files: Array<{ path: string; type: string }>;\n onSelectionChange?: (selectedFiles: string[]) => void;\n}\n\n// Helper function to build a tree structure from flat file list\nconst buildFileTree = (files: Array<{ path: string; type: string }>): FileNode[] => {\n const root: FileNode[] = [];\n const map: Record = {};\n\n // Create all parent directories first\n const ensureParentDirectories = (filePath: string) => {\n const parts = filePath.split(\"/\").filter(Boolean);\n let currentPath = \"\";\n\n // Create each directory in the path if it doesn't exist\n for (let i = 0; i < parts.length - 1; i++) {\n const part = parts[i];\n const prevPath = currentPath;\n currentPath = currentPath ? `${currentPath}/${part}` : `/${part}`;\n\n // Create directory if it doesn't exist in our map\n if (!map[currentPath]) {\n const dirNode: FileNode = {\n path: currentPath,\n type: \"directory\",\n name: part,\n children: [],\n checked: false,\n };\n map[currentPath] = dirNode;\n\n // Add to parent or root\n if (prevPath) {\n if (map[prevPath]) {\n // Check if this directory is already a child of the parent before adding\n if (!map[prevPath].children!.some(child => child.path === currentPath)) {\n map[prevPath].children!.push(dirNode);\n }\n }\n } else {\n // Check if this directory is already in the root before adding\n if (!root.some(node => node.path === currentPath)) {\n root.push(dirNode);\n }\n }\n }\n }\n\n return parts.length > 0 ? \"/\" + parts.slice(0, parts.length - 1).join(\"/\") : \"\";\n };\n\n // Process all files and directories\n files.forEach(file => {\n const path = file.path.startsWith(\"/\") ? file.path : `/${file.path}`;\n const parts = path.split(\"/\").filter(Boolean);\n const name = parts[parts.length - 1] || path;\n const type = file.type === \"directory\" ? \"directory\" : \"file\";\n\n // Skip if this node already exists (prevents duplicates)\n if (map[path]) return;\n\n // Create the node\n const node: FileNode = {\n path,\n type,\n name,\n children: type === \"directory\" ? [] : undefined,\n checked: false,\n };\n\n map[path] = node;\n\n // If it's the root level, add to root array\n if (parts.length === 1) {\n if (!root.some(n => n.path === path)) {\n root.push(node);\n }\n return;\n }\n\n // Ensure all parent directories exist\n const parentPath = ensureParentDirectories(path);\n\n // Add this node to its parent\n if (parentPath && map[parentPath]) {\n if (!map[parentPath].children!.some(child => child.path === path)) {\n map[parentPath].children!.push(node);\n }\n }\n });\n\n // Sort each level - directories first, then alphabetically\n const sortNodes = (nodes: FileNode[]) => {\n nodes.sort((a, b) => {\n if (a.type === \"directory\" && b.type === \"file\") return -1;\n if (a.type === \"file\" && b.type === \"directory\") return 1;\n return a.name.localeCompare(b.name);\n });\n\n nodes.forEach(node => {\n if (node.children && node.children.length > 0) {\n sortNodes(node.children);\n }\n });\n };\n\n sortNodes(root);\n return root;\n};\n\n// Component to render a single tree node\nconst TreeNode = ({\n node,\n level = 0,\n onCheck,\n checkedState,\n}: {\n node: FileNode;\n level?: number;\n onCheck: (path: string, checked: boolean) => void;\n checkedState: Record;\n}) => {\n const [expanded, setExpanded] = useState(level < 2);\n const hasChildren = node.children && node.children.length > 0;\n const isChecked = checkedState[node.path] || false;\n\n const handleToggle = () => {\n if (hasChildren) {\n setExpanded(!expanded);\n }\n };\n\n const handleCheckChange = (e: React.ChangeEvent) => {\n onCheck(node.path, e.target.checked);\n };\n\n const handleNodeClick = (e: React.MouseEvent) => {\n // Don't toggle checkbox if clicking on the expand/collapse arrow\n if ((e.target as HTMLElement).classList.contains('toggle-expand')) {\n return;\n }\n \n // Toggle the checkbox\n onCheck(node.path, !isChecked);\n };\n\n return (\n

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

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

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

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

\n {getSelectionSummary()}\n

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

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

\n )\n :

No files found

}\n

\n );\n}",[],[209,215,285],{"_103":292,"_95":293,"_158":294,"_160":216,"_161":139,"_162":138,"_163":117,"_105":295,"_100":32,"_165":177,"_167":296,"_168":22,"_169":-5,"_170":297,"_98":298},"0f74343c-0a51-11f0-9584-569c3dd06744","ErrorDisplay.tsx","df251a01-b83c-45ad-b6cb-dce1fbf10f17",["D",1743000371588],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\n\ninterface ErrorDisplayProps {\n error: Error | null;\n}\n\nexport function ErrorDisplay({ error }: ErrorDisplayProps) {\n if (!error) return null;\n \n return (\n

{error.stack}

\n );\n}",[],[209,215,293],{"_103":300,"_95":301,"_158":302,"_160":216,"_161":139,"_162":138,"_163":117,"_105":303,"_100":32,"_165":177,"_167":304,"_168":22,"_169":-5,"_170":305,"_98":306},"0f7436ee-0a51-11f0-9584-569c3dd06744","ImageUpload.tsx","663be8ca-5a38-420f-8da6-57010df7ee03",["D",1743000371588],"/** @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}",[],[209,215,301],{"_103":308,"_95":309,"_158":310,"_160":216,"_161":139,"_162":138,"_163":117,"_105":311,"_100":32,"_165":177,"_167":312,"_168":22,"_169":-5,"_170":313,"_98":314},"0f743ee6-0a51-11f0-9584-569c3dd06744","LoadingSpinner.tsx","47a3c1fa-def5-4755-9234-12895bdd33cb",["D",1743000371588],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\n\nexport const LoadingSpinner = () => (\n

\n);",[],[209,215,309],{"_103":316,"_95":317,"_158":318,"_160":216,"_161":139,"_162":138,"_163":117,"_105":319,"_100":32,"_165":177,"_167":320,"_168":22,"_169":-5,"_170":321,"_98":322},"0f7440d0-0a51-11f0-9584-569c3dd06744","Login.tsx","d3a761e6-0717-48f8-9216-0d8dd6061c51",["D",1743000371588],"/** @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}",[],[209,215,317],{"_103":324,"_95":325,"_158":326,"_160":216,"_161":139,"_162":138,"_163":117,"_105":327,"_100":32,"_165":177,"_167":328,"_168":22,"_169":-5,"_170":329,"_98":330},"0f74435a-0a51-11f0-9584-569c3dd06744","MessageItem.tsx","f98ca6c2-7586-4a52-84be-c615def5c160",["D",1743000371588],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\nimport { MessagePart } from \"./MessagePart.tsx\";\nimport { MessageTimer } from \"./MessageTimer.tsx\";\nimport { calculateCost } from \"../utils/costCalculator.ts\";\n\n// Component for the loading spinner\nconst LoadingSpinner = () => (\n

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

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

\n \n

\n ))}\n

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

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

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

\n )\n : undefined}\n {/* Show loading spinner for messages without an end time and only if not manually stopped */}\n {message.role === \"assistant\" && !messageEndTimes[message.id] && running && }\n \n );\n}",[],[209,215,325],{"_103":332,"_95":333,"_158":334,"_160":216,"_161":139,"_162":138,"_163":117,"_105":335,"_100":32,"_165":177,"_167":336,"_168":22,"_169":-5,"_170":337,"_98":338},"0f7446fc-0a51-11f0-9584-569c3dd06744","MessagePart.tsx","fc9e40b6-059a-479f-823b-d66b3669d46d",["D",1743000371588],"/** @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}",[],[209,215,333],{"_103":340,"_95":341,"_158":342,"_160":216,"_161":139,"_162":138,"_163":117,"_105":343,"_100":32,"_165":177,"_167":344,"_168":22,"_169":-5,"_170":345,"_98":346},"0f7449f4-0a51-11f0-9584-569c3dd06744","MessageTimer.tsx","40f4e996-bc5f-467d-9f0b-24d1ba9c88fd",["D",1743000371588],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\n\n// Utility to format milliseconds into a readable time string\nconst formatTime = (ms: number): string => {\n const seconds = Math.floor(ms / 1000);\n const minutes = Math.floor(seconds / 60);\n const remainingSeconds = seconds % 60;\n return `${minutes}:${remainingSeconds.toString().padStart(2, \"0\")}`;\n};\n\nexport const MessageTimer = (\n { createdAt, endTime, isStopped }: { createdAt: number; endTime?: number; isStopped?: boolean },\n) => {\n const [currentTime, setCurrentTime] = useState(Date.now());\n\n // Update currentTime periodically when message is still running (no endTime) and not stopped\n useEffect(() => {\n if (endTime !== undefined || isStopped) return;\n\n const interval = setInterval(() => {\n setCurrentTime(Date.now());\n }, 100);\n\n return () => clearInterval(interval);\n }, [endTime, isStopped]);\n\n // Calculate elapsed time: either from start to end (if finished) or from start to current time (if running)\n const elapsedTime = endTime !== undefined\n ? endTime - createdAt\n : currentTime - createdAt;\n\n return (\n

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

\n );\n};",[],[209,215,341],{"_103":348,"_95":349,"_158":350,"_160":216,"_161":139,"_162":138,"_163":117,"_105":351,"_100":32,"_165":177,"_167":352,"_168":22,"_169":-5,"_170":353,"_98":354},"0f744b98-0a51-11f0-9584-569c3dd06744","ProjectFiles.tsx","6edb667e-e431-4a28-984f-73e5aedce9f1",["D",1743000371588],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\nimport { DirectoryTree } from \"./DirectoryTree.tsx\";\nimport { LoadingSpinner } from \"./LoadingSpinner.tsx\";\n\ninterface ProjectFilesProps {\n projectFiles: any[];\n isLoadingFiles: boolean;\n onSelectionChange: (files: string[]) => void;\n error?: Error | null;\n}\n\nexport function ProjectFiles({\n projectFiles,\n isLoadingFiles,\n onSelectionChange,\n error,\n}: ProjectFilesProps) {\n return (\n

\n {isLoadingFiles ? (\n

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

\n ) : error ? (\n

Error loading project files:

{error.message}

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

\n );\n}",[],[209,215,349],{"_103":356,"_95":357,"_158":358,"_160":216,"_161":139,"_162":138,"_163":117,"_105":359,"_100":32,"_165":177,"_167":360,"_168":22,"_169":-5,"_170":361,"_98":362},"0f744d46-0a51-11f0-9584-569c3dd06744","Projects.tsx","bfcb8d06-01ae-4ff1-a434-4331f711d5b1",["D",1743000371588],"/** @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}",[],[209,215,357],[209,215],{"_103":365,"_95":366,"_158":367,"_160":210,"_161":139,"_162":138,"_163":117,"_105":368,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":369,"_98":386},"0f74a96c-0a51-11f0-9584-569c3dd06744","hooks","8bf5b445-c515-4ea1-9079-bb837ee1beb3",["D",1743000371588],[370,378],{"_103":371,"_95":372,"_158":373,"_160":367,"_161":139,"_162":138,"_163":117,"_105":374,"_100":32,"_165":177,"_167":375,"_168":22,"_169":-5,"_170":376,"_98":377},"0f745142-0a51-11f0-9584-569c3dd06744","useChatLogic.ts","e4c6122d-e8eb-4752-9be3-b6a0207d5268",["D",1743000371588],"import { useChat } from \"https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport React, { useCallback, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { playBellSound } from \"../utils/soundEffects.ts\";\n\ninterface UseChatLogicProps {\n project: any;\n branchId: string | undefined;\n anthropicApiKey: string;\n bearerToken: string;\n selectedFiles: string[];\n images: (string | null)[];\n soundEnabled: boolean;\n}\n\nexport function useChatLogic({\n project,\n branchId,\n anthropicApiKey,\n bearerToken,\n selectedFiles,\n images,\n soundEnabled,\n}: UseChatLogicProps) {\n const [usages, setUsages] = useState>({});\n const [messageEndTimes, setMessageEndTimes] = useState>({});\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 selectedFiles,\n images: images\n .filter((img): img is string => {\n const isValid = typeof img === \"string\" && img.startsWith(\"data:\");\n if (!isValid && img !== null) {\n console.warn(\"Invalid image format:\", img?.substring(0, 50) + \"...\");\n }\n return isValid;\n })\n .map(img => ({ url: img })),\n },\n headers: {\n \"Authorization\": `Bearer ${bearerToken}`,\n },\n onFinish: (message, options) => {\n setUsages(prev => ({\n ...prev,\n [message.id]: options.usage,\n }));\n\n setMessageEndTimes(prev => ({\n ...prev,\n [message.id]: Date.now(),\n }));\n\n if (soundEnabled) {\n playBellSound().catch(error => {\n console.log(\"Error playing bell sound:\", error);\n });\n }\n },\n });\n\n const running = status === \"streaming\" || status === \"submitted\";\n\n const pendingMessageId = useMemo(() => {\n if (!running) return null;\n const pendingMessages = messages\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 const handleStop = useCallback(() => {\n stop();\n\n if (pendingMessageId) {\n setMessageEndTimes(prev => ({\n ...prev,\n [pendingMessageId]: Date.now(),\n }));\n\n if (soundEnabled) {\n playBellSound().catch(error => {\n console.log(\"Error playing bell sound:\", error);\n });\n }\n }\n }, [stop, pendingMessageId, soundEnabled]);\n\n React.useEffect(() => {\n customStopRef.current = handleStop;\n }, [handleStop]);\n\n React.useEffect(() => {\n (window as any).customStopRef = customStopRef;\n }, []);\n\n return {\n messages,\n error,\n input,\n handleInputChange,\n handleSubmit: originalHandleSubmit,\n running,\n usages,\n messageEndTimes,\n };\n}",[],[209,366,372],{"_103":379,"_95":380,"_158":381,"_160":367,"_161":139,"_162":138,"_163":117,"_105":382,"_100":32,"_165":177,"_167":383,"_168":22,"_169":-5,"_170":384,"_98":385},"0f74a746-0a51-11f0-9584-569c3dd06744","useProjectFiles.ts","6181b2bb-451d-4387-96b5-bde4f33fefa5",["D",1743000371588],"import { useState, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\nimport { fetchProjectFiles } from \"../utils/api.ts\";\n\ninterface UseProjectFilesProps {\n projectId?: string;\n branchId?: string;\n bearerToken: string;\n}\n\ninterface UseProjectFilesResult {\n projectFiles: any[];\n isLoadingFiles: boolean;\n error: Error | null;\n}\n\n/**\n * Custom hook to fetch and manage project files\n */\nexport function useProjectFiles({\n projectId,\n branchId,\n bearerToken,\n}: UseProjectFilesProps): UseProjectFilesResult {\n const [projectFiles, setProjectFiles] = useState([]);\n const [isLoadingFiles, setIsLoadingFiles] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n const loadProjectFiles = async () => {\n if (!projectId) {\n setProjectFiles([]);\n setIsLoadingFiles(false);\n return;\n }\n\n setIsLoadingFiles(true);\n setError(null);\n \n try {\n const filesData = await fetchProjectFiles({\n bearerToken,\n projectId,\n branchId,\n });\n\n if (filesData.files) {\n setProjectFiles(filesData.files);\n } else {\n setProjectFiles([]);\n console.error(\"No files returned:\", filesData);\n }\n } catch (err) {\n console.error(\"Error fetching project files:\", err);\n setProjectFiles([]);\n setError(err instanceof Error ? err : new Error(String(err)));\n } finally {\n setIsLoadingFiles(false);\n }\n };\n\n loadProjectFiles();\n }, [projectId, branchId, bearerToken]);\n\n return {\n projectFiles,\n isLoadingFiles,\n error,\n };\n}",[],[209,366,380],[209,366],{"_103":388,"_95":389,"_158":390,"_160":210,"_161":139,"_162":138,"_163":117,"_105":391,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":392,"_98":417},"0f74b470-0a51-11f0-9584-569c3dd06744","utils","56adc3bd-1c2d-4420-af92-0f12b7036550",["D",1743000371588],[393,401,409],{"_103":394,"_95":395,"_158":396,"_160":390,"_161":139,"_162":138,"_163":117,"_105":397,"_100":32,"_165":177,"_167":398,"_168":22,"_169":-5,"_170":399,"_98":400},"0f74ab60-0a51-11f0-9584-569c3dd06744","api.ts","f32417ae-0b93-4516-9220-310bc45d358e",["D",1743000371588],"// Fetch project files from the backend\nexport async function fetchProjectFiles(\n { bearerToken, projectId, branchId }: { bearerToken: string; projectId: string; branchId?: string },\n) {\n const url = new URL(\"/api/project-files\", window.location.origin);\n url.searchParams.append(\"projectId\", projectId);\n if (branchId) {\n url.searchParams.append(\"branchId\", branchId);\n }\n\n const response = await fetch(url.toString(), {\n headers: {\n \"Authorization\": \"Bearer \" + bearerToken,\n },\n });\n\n return response.json();\n}",[],[209,389,395],{"_103":402,"_95":403,"_158":404,"_160":390,"_161":139,"_162":138,"_163":117,"_105":405,"_100":32,"_165":177,"_167":406,"_168":22,"_169":-5,"_170":407,"_98":408},"0f74ad04-0a51-11f0-9584-569c3dd06744","costCalculator.ts","b7148198-bbe2-447d-95b7-084f29fbe370",["D",1743000371588],"// Calculate cost based on token usage\nexport const calculateCost = (usage: any): string => {\n if (!usage || !usage.promptTokens) {\n return \"0.00\";\n }\n\n // Cost per million tokens\n const PROMPT_COST_PER_MILLION = 3;\n const COMPLETION_COST_PER_MILLION = 15;\n const CACHE_WRITE_COST_PER_MILLION = 3.75;\n const CACHE_READ_COST_PER_MILLION = 0.3;\n\n // Get reported values\n const promptTokens = usage.promptTokens || 0;\n const completionTokens = usage.completionTokens || 0;\n\n // Estimate cache read tokens\n // Approach: Estimate that 40% of prompt tokens come from cache read\n // This percentage can be adjusted based on observed patterns\n const estimatedCacheReadTokens = Math.round(promptTokens * 0.4);\n\n // Estimate cache write tokens\n // Approach: Assume cache write tokens are a portion of prompt tokens that aren't from cache read\n let estimatedCacheWriteTokens = 0;\n\n // If we have more prompt tokens than estimated cache read tokens,\n // estimate that 70% of the difference are cache write tokens\n estimatedCacheWriteTokens = Math.round((promptTokens - estimatedCacheReadTokens) * 0.7);\n\n // Calculate costs\n // Subtract both cache read and write tokens from prompt tokens to avoid double counting\n const promptCost = ((promptTokens - estimatedCacheWriteTokens - estimatedCacheReadTokens) / 1000000)\n * PROMPT_COST_PER_MILLION;\n const completionCost = (completionTokens / 1000000) * COMPLETION_COST_PER_MILLION;\n const cacheWriteCost = (estimatedCacheWriteTokens / 1000000) * CACHE_WRITE_COST_PER_MILLION;\n const cacheReadCost = (estimatedCacheReadTokens / 1000000) * CACHE_READ_COST_PER_MILLION;\n\n // Total cost\n const totalCost = promptCost + completionCost + cacheWriteCost + cacheReadCost;\n\n // Add both estimated cache tokens to the usage object for transparency\n usage.estimatedCacheReadTokens = estimatedCacheReadTokens;\n usage.estimatedCacheWriteTokens = estimatedCacheWriteTokens;\n\n // Store the raw cost with more precision for debugging\n usage.rawCost = totalCost.toFixed(5);\n\n // Format to the nearest penny (2 decimal places)\n // If less than 1 penny, show \"< $0.01\"\n if (totalCost < 0.01) {\n return \"< $0.01\";\n } else {\n return \"$\" + totalCost.toFixed(2);\n }\n};",[],[209,389,403],{"_103":410,"_95":411,"_158":412,"_160":390,"_161":139,"_162":138,"_163":117,"_105":413,"_100":32,"_165":177,"_167":414,"_168":22,"_169":-5,"_170":415,"_98":416},"0f74b006-0a51-11f0-9584-569c3dd06744","soundEffects.ts","00daf410-913f-4994-ad57-e0ee59e0fe5a",["D",1743000371588],"/**\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}",[],[209,389,411],[209,389],{"_103":419,"_95":420,"_158":421,"_160":210,"_161":139,"_162":138,"_163":117,"_105":422,"_100":32,"_165":177,"_167":423,"_168":22,"_169":-5,"_170":424,"_98":425},"0f74b60a-0a51-11f0-9584-569c3dd06744","index.tsx","b9e5a56b-084b-4b9f-bcc3-47e448b392da",["D",1743000371588],"/** @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();",[],[209,420],[209],{"_103":428,"_95":429,"_158":430,"_160":-5,"_161":139,"_162":138,"_163":117,"_105":431,"_100":32,"_165":194,"_167":432,"_168":22,"_169":-5,"_170":433,"_98":434},"0f74b920-0a51-11f0-9584-569c3dd06744","README.md","2ebf356d-174b-43dc-923b-99542b00a20e",["D",1743000371588],"# OpenTownie\n\nOpenTownie is an AI-powered development assistant that lets you edit Val Town projects using Claude 3.7 Sonnet. It provides a seamless interface for discussing your code with Claude AI, which can directly view and modify files in your Val Town projects.\n\n## Features\nIt uses agentic tool-calling, taking manh read, write, and thinking steps autonomously when carrying out your instructions. \n\n- **AI-Assisted Editing**: Chat with Claude 3.7 Sonnet about your code and let it make changes directly to your project files\n- **File Browser**: Select specific files to include in the context window for more focused AI assistance\n- **Branch Management**: View, select, and create branches without leaving the app\n- **Cost Tracking**: See estimated API usage costs for each interaction\n- **Sound Notifications**: Get alerted when Claude finishes responding\n- **Mobile-Friendly**: Works on both desktop and mobile devices\n\n## How It Works\n\n1. **Login**: Authenticate with your Val Town API token and Anthropic API key\n2. **Select a Project**: Choose which Val Town project you want to work on\n3. **Select Files**: Browse your project files and select which ones to include in the context window\n4. **Chat with Claude**: Describe what you want to build or modify, and Claude will help implement it\n5. **Branch Management**: Create and switch between branches to organize your development work\n\n## Getting Started\n\n### Prerequisites\n\n- A Val Town account with API access\n- An Anthropic API key (Claude 3.7 Sonnet)\n\n### Setup\n\n1. Visit the OpenTownie app\n2. Enter your Val Town API token (with `projects:write` and `users:read` permissions)\n3. Enter your Anthropic API key\n4. Click \"Login\" to access your projects\n\n## Usage Tips\n\n- **Be Specific**: When asking Claude to make changes, be as specific as possible about what you want\n- **Include Context**: Select relevant files to give Claude the context it needs\n- **Create Branches**: Create a new branch before making significant changes to avoid affecting your main code\n- **Review Changes**: Always review Claude's changes before merging them into your main branch\n- **Iterative Development**: Break down complex tasks into smaller steps for better results\n\n## Technical Details\n\nOpenTownie is built with:\n- React frontend with TypeScript\n- Hono API server backend\n- Tailwind CSS for styling\n- Web Audio API for sound notifications\n- AI SDK for Claude integration\n\nThe application proxies requests to the Anthropic API and Val Town API, allowing Claude to view and edit your project files directly.\n\n## Privacy & Security\n\n- Your Val Town API token and Anthropic API key are stored locally in your browser\n- No data is stored on our servers\n- All communication with the APIs is done directly from your browser",[],[429],{"_103":436,"_95":437,"_158":438,"_160":-5,"_161":139,"_162":138,"_163":117,"_105":439,"_100":32,"_165":194,"_167":440,"_168":22,"_169":-5,"_170":441,"_98":442},"0f74be34-0a51-11f0-9584-569c3dd06744","TODOs.md","65185276-35fa-42e6-b35e-467d76ee2049",["D",1743000371588],"- [ ] make image drop area invisible and bigger\n- [ ] Give it a tool to make an HTTP request to its own endpoint to test things!\n- [ ] Refactor /backend/index.ts into multiple files\n- [ ] Format the JSON inside the tool-calls as pretty markdown\n - [ ] Think as normal markdown\n - [ ] File write as a code embed\n - [ ] str_replace as a diff view\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- [ ] Persistent threads\n - [ ] Utils to help you revert to before or after messages or actions (related to commits)\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 or use our trpc API in that tool\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- [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",[],[437],{"_103":444,"_95":183,"_158":115,"_160":-5,"_161":139,"_162":138,"_163":117,"_105":445,"_100":32,"_165":446,"_167":447,"_168":22,"_169":448,"_170":449,"_98":450},"0f74c19a-0a51-11f0-9584-569c3dd06744",["D",1743000371588],"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;","otm",[],[183],"files",[155,172,181,189,198,207,213,219,227,235,243,251,259,267,275,283,291,299,307,315,323,331,339,347,355,364,370,378,387,393,401,409,418,427,435,443],"counts",{"_455":32,"_456":138,"_457":32,"_458":459},"pulls","branches","forks","envVars",2,"contents",[462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513],{"_103":220,"_95":221,"_158":222,"_160":216,"_161":139,"_162":138,"_163":117,"_105":463,"_100":32,"_165":177,"_167":224,"_168":22,"_169":-5,"_98":464},["D",1743000371588],[209,215,221],{"_103":228,"_95":229,"_158":230,"_160":216,"_161":139,"_162":138,"_163":117,"_105":466,"_100":32,"_165":177,"_167":232,"_168":22,"_169":-5,"_98":467},["D",1743000371588],[209,215,229],{"_103":236,"_95":237,"_158":238,"_160":216,"_161":139,"_162":138,"_163":117,"_105":469,"_100":32,"_165":177,"_167":240,"_168":22,"_169":-5,"_98":470},["D",1743000371588],[209,215,237],{"_103":244,"_95":245,"_158":246,"_160":216,"_161":139,"_162":138,"_163":117,"_105":472,"_100":32,"_165":177,"_167":248,"_168":22,"_169":-5,"_98":473},["D",1743000371588],[209,215,245],{"_103":252,"_95":253,"_158":254,"_160":216,"_161":139,"_162":138,"_163":117,"_105":475,"_100":32,"_165":177,"_167":256,"_168":22,"_169":-5,"_98":476},["D",1743000371588],[209,215,253],{"_103":260,"_95":261,"_158":262,"_160":216,"_161":139,"_162":138,"_163":117,"_105":478,"_100":32,"_165":177,"_167":264,"_168":22,"_169":-5,"_98":479},["D",1743000371588],[209,215,261],{"_103":268,"_95":269,"_158":270,"_160":216,"_161":139,"_162":138,"_163":117,"_105":481,"_100":32,"_165":177,"_167":272,"_168":22,"_169":-5,"_98":482},["D",1743000371588],[209,215,269],{"_103":276,"_95":277,"_158":278,"_160":216,"_161":139,"_162":138,"_163":117,"_105":484,"_100":32,"_165":177,"_167":280,"_168":22,"_169":-5,"_98":485},["D",1743000371588],[209,215,277],{"_103":284,"_95":285,"_158":286,"_160":216,"_161":139,"_162":138,"_163":117,"_105":487,"_100":32,"_165":177,"_167":288,"_168":22,"_169":-5,"_98":488},["D",1743000371588],[209,215,285],{"_103":292,"_95":293,"_158":294,"_160":216,"_161":139,"_162":138,"_163":117,"_105":490,"_100":32,"_165":177,"_167":296,"_168":22,"_169":-5,"_98":491},["D",1743000371588],[209,215,293],{"_103":300,"_95":301,"_158":302,"_160":216,"_161":139,"_162":138,"_163":117,"_105":493,"_100":32,"_165":177,"_167":304,"_168":22,"_169":-5,"_98":494},["D",1743000371588],[209,215,301],{"_103":308,"_95":309,"_158":310,"_160":216,"_161":139,"_162":138,"_163":117,"_105":496,"_100":32,"_165":177,"_167":312,"_168":22,"_169":-5,"_98":497},["D",1743000371588],[209,215,309],{"_103":316,"_95":317,"_158":318,"_160":216,"_161":139,"_162":138,"_163":117,"_105":499,"_100":32,"_165":177,"_167":320,"_168":22,"_169":-5,"_98":500},["D",1743000371588],[209,215,317],{"_103":324,"_95":325,"_158":326,"_160":216,"_161":139,"_162":138,"_163":117,"_105":502,"_100":32,"_165":177,"_167":328,"_168":22,"_169":-5,"_98":503},["D",1743000371588],[209,215,325],{"_103":332,"_95":333,"_158":334,"_160":216,"_161":139,"_162":138,"_163":117,"_105":505,"_100":32,"_165":177,"_167":336,"_168":22,"_169":-5,"_98":506},["D",1743000371588],[209,215,333],{"_103":340,"_95":341,"_158":342,"_160":216,"_161":139,"_162":138,"_163":117,"_105":508,"_100":32,"_165":177,"_167":344,"_168":22,"_169":-5,"_98":509},["D",1743000371588],[209,215,341],{"_103":348,"_95":349,"_158":350,"_160":216,"_161":139,"_162":138,"_163":117,"_105":511,"_100":32,"_165":177,"_167":352,"_168":22,"_169":-5,"_98":512},["D",1743000371588],[209,215,349],{"_103":356,"_95":357,"_158":358,"_160":216,"_161":139,"_162":138,"_163":117,"_105":514,"_100":32,"_165":177,"_167":360,"_168":22,"_169":-5,"_98":515},["D",1743000371588],[209,215,357],{"_103":214,"_95":215,"_158":216,"_160":210,"_161":139,"_162":138,"_163":117,"_105":517,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":518},["D",1743000371588],[209,215],"upstreamProject",{"_103":147,"_95":96,"_111":521,"_112":-5,"_109":110,"_23":522},"AI assistant that can edit Val Town Projects",{"_93":523,"_131":524},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","upstreamBranch",{"_103":142,"_105":527,"_528":529,"_95":43,"_140":147,"_100":530,"_141":531,"_143":532,"_533":534,"_107":-5,"_152":22,"_109":110,"_151":523,"_16":149,"_150":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.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":541,"_153":546,"_451":655,"_194":656,"_460":658,"_695":696,"_699":22,"_700":-5,"_701":32,"_702":703,"_704":705},{"_103":104,"_95":96,"_105":542,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":-5,"_119":32,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":543,"_133":544,"_136":545,"_152":22},["D",1743000371588],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_100":138,"_95":43,"_103":139,"_140":104,"_141":142,"_143":144,"_145":110,"_146":147,"_148":149,"_150":96,"_151":94},[547,562,646,649,652],{"_103":156,"_95":157,"_158":159,"_160":-5,"_161":139,"_162":138,"_163":117,"_105":164,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":548,"_98":561},[549,552,555,558],{"_103":173,"_95":174,"_158":175,"_160":159,"_161":139,"_162":138,"_163":117,"_105":176,"_100":32,"_165":177,"_167":178,"_168":22,"_169":-5,"_170":550,"_98":551},[],[157,174],{"_103":182,"_95":183,"_158":184,"_160":159,"_161":139,"_162":138,"_163":117,"_105":185,"_100":32,"_165":177,"_167":186,"_168":22,"_169":-5,"_170":553,"_98":554},[],[157,183],{"_103":190,"_95":191,"_158":192,"_160":159,"_161":139,"_162":138,"_163":117,"_105":193,"_100":32,"_165":194,"_167":195,"_168":22,"_169":-5,"_170":556,"_98":557},[],[157,191],{"_103":199,"_95":200,"_158":201,"_160":159,"_161":139,"_162":138,"_163":117,"_105":202,"_100":32,"_165":194,"_167":203,"_168":22,"_169":-5,"_170":559,"_98":560},[],[157,200],[157],{"_103":208,"_95":209,"_158":210,"_160":-5,"_161":139,"_162":138,"_163":117,"_105":211,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":563,"_98":645},[564,621,630,642],{"_103":214,"_95":215,"_158":216,"_160":210,"_161":139,"_162":138,"_163":117,"_105":217,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":565,"_98":620},[566,569,572,575,578,581,584,587,590,593,596,599,602,605,608,611,614,617],{"_103":220,"_95":221,"_158":222,"_160":216,"_161":139,"_162":138,"_163":117,"_105":223,"_100":32,"_165":177,"_167":224,"_168":22,"_169":-5,"_170":567,"_98":568},[],[209,215,221],{"_103":228,"_95":229,"_158":230,"_160":216,"_161":139,"_162":138,"_163":117,"_105":231,"_100":32,"_165":177,"_167":232,"_168":22,"_169":-5,"_170":570,"_98":571},[],[209,215,229],{"_103":236,"_95":237,"_158":238,"_160":216,"_161":139,"_162":138,"_163":117,"_105":239,"_100":32,"_165":177,"_167":240,"_168":22,"_169":-5,"_170":573,"_98":574},[],[209,215,237],{"_103":244,"_95":245,"_158":246,"_160":216,"_161":139,"_162":138,"_163":117,"_105":247,"_100":32,"_165":177,"_167":248,"_168":22,"_169":-5,"_170":576,"_98":577},[],[209,215,245],{"_103":252,"_95":253,"_158":254,"_160":216,"_161":139,"_162":138,"_163":117,"_105":255,"_100":32,"_165":177,"_167":256,"_168":22,"_169":-5,"_170":579,"_98":580},[],[209,215,253],{"_103":260,"_95":261,"_158":262,"_160":216,"_161":139,"_162":138,"_163":117,"_105":263,"_100":32,"_165":177,"_167":264,"_168":22,"_169":-5,"_170":582,"_98":583},[],[209,215,261],{"_103":268,"_95":269,"_158":270,"_160":216,"_161":139,"_162":138,"_163":117,"_105":271,"_100":32,"_165":177,"_167":272,"_168":22,"_169":-5,"_170":585,"_98":586},[],[209,215,269],{"_103":276,"_95":277,"_158":278,"_160":216,"_161":139,"_162":138,"_163":117,"_105":279,"_100":32,"_165":177,"_167":280,"_168":22,"_169":-5,"_170":588,"_98":589},[],[209,215,277],{"_103":284,"_95":285,"_158":286,"_160":216,"_161":139,"_162":138,"_163":117,"_105":287,"_100":32,"_165":177,"_167":288,"_168":22,"_169":-5,"_170":591,"_98":592},[],[209,215,285],{"_103":292,"_95":293,"_158":294,"_160":216,"_161":139,"_162":138,"_163":117,"_105":295,"_100":32,"_165":177,"_167":296,"_168":22,"_169":-5,"_170":594,"_98":595},[],[209,215,293],{"_103":300,"_95":301,"_158":302,"_160":216,"_161":139,"_162":138,"_163":117,"_105":303,"_100":32,"_165":177,"_167":304,"_168":22,"_169":-5,"_170":597,"_98":598},[],[209,215,301],{"_103":308,"_95":309,"_158":310,"_160":216,"_161":139,"_162":138,"_163":117,"_105":311,"_100":32,"_165":177,"_167":312,"_168":22,"_169":-5,"_170":600,"_98":601},[],[209,215,309],{"_103":316,"_95":317,"_158":318,"_160":216,"_161":139,"_162":138,"_163":117,"_105":319,"_100":32,"_165":177,"_167":320,"_168":22,"_169":-5,"_170":603,"_98":604},[],[209,215,317],{"_103":324,"_95":325,"_158":326,"_160":216,"_161":139,"_162":138,"_163":117,"_105":327,"_100":32,"_165":177,"_167":328,"_168":22,"_169":-5,"_170":606,"_98":607},[],[209,215,325],{"_103":332,"_95":333,"_158":334,"_160":216,"_161":139,"_162":138,"_163":117,"_105":335,"_100":32,"_165":177,"_167":336,"_168":22,"_169":-5,"_170":609,"_98":610},[],[209,215,333],{"_103":340,"_95":341,"_158":342,"_160":216,"_161":139,"_162":138,"_163":117,"_105":343,"_100":32,"_165":177,"_167":344,"_168":22,"_169":-5,"_170":612,"_98":613},[],[209,215,341],{"_103":348,"_95":349,"_158":350,"_160":216,"_161":139,"_162":138,"_163":117,"_105":351,"_100":32,"_165":177,"_167":352,"_168":22,"_169":-5,"_170":615,"_98":616},[],[209,215,349],{"_103":356,"_95":357,"_158":358,"_160":216,"_161":139,"_162":138,"_163":117,"_105":359,"_100":32,"_165":177,"_167":360,"_168":22,"_169":-5,"_170":618,"_98":619},[],[209,215,357],[209,215],{"_103":365,"_95":366,"_158":367,"_160":210,"_161":139,"_162":138,"_163":117,"_105":368,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":622,"_98":629},[623,626],{"_103":371,"_95":372,"_158":373,"_160":367,"_161":139,"_162":138,"_163":117,"_105":374,"_100":32,"_165":177,"_167":375,"_168":22,"_169":-5,"_170":624,"_98":625},[],[209,366,372],{"_103":379,"_95":380,"_158":381,"_160":367,"_161":139,"_162":138,"_163":117,"_105":382,"_100":32,"_165":177,"_167":383,"_168":22,"_169":-5,"_170":627,"_98":628},[],[209,366,380],[209,366],{"_103":388,"_95":389,"_158":390,"_160":210,"_161":139,"_162":138,"_163":117,"_105":391,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":631,"_98":641},[632,635,638],{"_103":394,"_95":395,"_158":396,"_160":390,"_161":139,"_162":138,"_163":117,"_105":397,"_100":32,"_165":177,"_167":398,"_168":22,"_169":-5,"_170":633,"_98":634},[],[209,389,395],{"_103":402,"_95":403,"_158":404,"_160":390,"_161":139,"_162":138,"_163":117,"_105":405,"_100":32,"_165":177,"_167":406,"_168":22,"_169":-5,"_170":636,"_98":637},[],[209,389,403],{"_103":410,"_95":411,"_158":412,"_160":390,"_161":139,"_162":138,"_163":117,"_105":413,"_100":32,"_165":177,"_167":414,"_168":22,"_169":-5,"_170":639,"_98":640},[],[209,389,411],[209,389],{"_103":419,"_95":420,"_158":421,"_160":210,"_161":139,"_162":138,"_163":117,"_105":422,"_100":32,"_165":177,"_167":423,"_168":22,"_169":-5,"_170":643,"_98":644},[],[209,420],[209],{"_103":428,"_95":429,"_158":430,"_160":-5,"_161":139,"_162":138,"_163":117,"_105":431,"_100":32,"_165":194,"_167":432,"_168":22,"_169":-5,"_170":647,"_98":648},[],[429],{"_103":436,"_95":437,"_158":438,"_160":-5,"_161":139,"_162":138,"_163":117,"_105":439,"_100":32,"_165":194,"_167":440,"_168":22,"_169":-5,"_170":650,"_98":651},[],[437],{"_103":444,"_95":183,"_158":115,"_160":-5,"_161":139,"_162":138,"_163":117,"_105":445,"_100":32,"_165":446,"_167":447,"_168":22,"_169":448,"_170":653,"_98":654},[],[183],[547,549,552,555,558,562,564,566,569,572,575,578,581,584,587,590,593,596,599,602,605,608,611,614,617,621,623,626,630,632,635,638,642,646,649,652],{"_103":214,"_95":215,"_158":216,"_160":210,"_161":139,"_162":138,"_163":117,"_105":517,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":657},[209,215],[659,661,663,665,667,669,671,673,675,677,679,681,683,685,687,689,691,693],{"_103":220,"_95":221,"_158":222,"_160":216,"_161":139,"_162":138,"_163":117,"_105":463,"_100":32,"_165":177,"_167":224,"_168":22,"_169":-5,"_98":660},[209,215,221],{"_103":228,"_95":229,"_158":230,"_160":216,"_161":139,"_162":138,"_163":117,"_105":466,"_100":32,"_165":177,"_167":232,"_168":22,"_169":-5,"_98":662},[209,215,229],{"_103":236,"_95":237,"_158":238,"_160":216,"_161":139,"_162":138,"_163":117,"_105":469,"_100":32,"_165":177,"_167":240,"_168":22,"_169":-5,"_98":664},[209,215,237],{"_103":244,"_95":245,"_158":246,"_160":216,"_161":139,"_162":138,"_163":117,"_105":472,"_100":32,"_165":177,"_167":248,"_168":22,"_169":-5,"_98":666},[209,215,245],{"_103":252,"_95":253,"_158":254,"_160":216,"_161":139,"_162":138,"_163":117,"_105":475,"_100":32,"_165":177,"_167":256,"_168":22,"_169":-5,"_98":668},[209,215,253],{"_103":260,"_95":261,"_158":262,"_160":216,"_161":139,"_162":138,"_163":117,"_105":478,"_100":32,"_165":177,"_167":264,"_168":22,"_169":-5,"_98":670},[209,215,261],{"_103":268,"_95":269,"_158":270,"_160":216,"_161":139,"_162":138,"_163":117,"_105":481,"_100":32,"_165":177,"_167":272,"_168":22,"_169":-5,"_98":672},[209,215,269],{"_103":276,"_95":277,"_158":278,"_160":216,"_161":139,"_162":138,"_163":117,"_105":484,"_100":32,"_165":177,"_167":280,"_168":22,"_169":-5,"_98":674},[209,215,277],{"_103":284,"_95":285,"_158":286,"_160":216,"_161":139,"_162":138,"_163":117,"_105":487,"_100":32,"_165":177,"_167":288,"_168":22,"_169":-5,"_98":676},[209,215,285],{"_103":292,"_95":293,"_158":294,"_160":216,"_161":139,"_162":138,"_163":117,"_105":490,"_100":32,"_165":177,"_167":296,"_168":22,"_169":-5,"_98":678},[209,215,293],{"_103":300,"_95":301,"_158":302,"_160":216,"_161":139,"_162":138,"_163":117,"_105":493,"_100":32,"_165":177,"_167":304,"_168":22,"_169":-5,"_98":680},[209,215,301],{"_103":308,"_95":309,"_158":310,"_160":216,"_161":139,"_162":138,"_163":117,"_105":496,"_100":32,"_165":177,"_167":312,"_168":22,"_169":-5,"_98":682},[209,215,309],{"_103":316,"_95":317,"_158":318,"_160":216,"_161":139,"_162":138,"_163":117,"_105":499,"_100":32,"_165":177,"_167":320,"_168":22,"_169":-5,"_98":684},[209,215,317],{"_103":324,"_95":325,"_158":326,"_160":216,"_161":139,"_162":138,"_163":117,"_105":502,"_100":32,"_165":177,"_167":328,"_168":22,"_169":-5,"_98":686},[209,215,325],{"_103":332,"_95":333,"_158":334,"_160":216,"_161":139,"_162":138,"_163":117,"_105":505,"_100":32,"_165":177,"_167":336,"_168":22,"_169":-5,"_98":688},[209,215,333],{"_103":340,"_95":341,"_158":342,"_160":216,"_161":139,"_162":138,"_163":117,"_105":508,"_100":32,"_165":177,"_167":344,"_168":22,"_169":-5,"_98":690},[209,215,341],{"_103":348,"_95":349,"_158":350,"_160":216,"_161":139,"_162":138,"_163":117,"_105":511,"_100":32,"_165":177,"_167":352,"_168":22,"_169":-5,"_98":692},[209,215,349],{"_103":356,"_95":357,"_158":358,"_160":216,"_161":139,"_162":138,"_163":117,"_105":514,"_100":32,"_165":177,"_167":360,"_168":22,"_169":-5,"_98":694},[209,215,357],"upstream",{"_103":142,"_105":697,"_528":698,"_95":43,"_140":147,"_100":530,"_141":531,"_143":532,"_533":534,"_107":-5,"_152":22,"_109":110,"_151":523,"_16":149,"_150":96},["D",1738273009969],["D",1746459699444],"showCompareCallout","pull","ahead","behind",126,"templates",[706,720],{"_103":707,"_95":708,"_105":709,"_107":-5,"_108":22,"_109":110,"_111":710,"_112":711,"_14":712,"_114":713,"_116":117,"_118":714,"_119":715,"_16":149,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":716,"_133":717,"_136":718,"_152":22},"8e7382ae-d835-11ef-bbbf-e6cdfca9ef9f","markdownBlogStarter",["D",1737491000655],"Starter template for a markdown blog","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/44a31e5c-3e8a-48a8-d067-5785c0b08200/square512","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","a4a9ad14-d835-11ef-8351-e6cdfca9ef9f",167,11,{"_93":523,"_131":524},{"_93":523,"_135":524},{"_103":719,"_95":43,"_100":714,"_140":707,"_141":-5,"_143":-5},"8e73c264-d835-11ef-bbbf-e6cdfca9ef9f",{"_103":721,"_95":722,"_105":723,"_107":-5,"_108":22,"_109":110,"_111":724,"_112":-5,"_14":725,"_114":726,"_116":117,"_118":727,"_119":728,"_16":729,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":730,"_133":733,"_136":734,"_152":22},"96102714-f528-11ef-aa68-569c3dd06744","reactHonoStarter",["D",1740674013689],"Starter template with client-side React & Hono server","c9143560-63b6-444f-8f9f-e2647fabe09f","a9b2b20a-f528-11ef-9e98-569c3dd06744",39,14,"c606f87f-4d7e-48c8-9c39-ef5ab94aec49",{"_93":731,"_131":732},"std","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJVaVhpQ1BId3dscVpBbkdZVWlMNjJtcjkxWS5wbmcifQ",{"_93":731,"_135":732},{"_103":735,"_95":43,"_100":736,"_140":721,"_141":-5,"_143":-5},"961078ea-f528-11ef-aa68-569c3dd06744",72,"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

maxm

OpenTownie