\n Branch\n \n {branches.loading && (\n \n )}\n {branches.data?.map(branch => (\n \n {branch.name}\n \n ))}\n \n \n \n );\n}\n",[],[321,327,343],{"_104":352,"_95":353,"_158":354,"_160":328,"_161":141,"_162":355,"_164":118,"_106":356,"_101":357,"_166":184,"_168":358,"_169":22,"_170":-5,"_171":359,"_99":360},"37a427f8-2696-11f0-95b8-569c3dd06744","ChatRoute.tsx","67823c0f-d095-4063-b39d-176f9ef3c203",1389,["D",1746108706884],126,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useState, useEffect, useContext } from \"https://esm.sh/react@18.2.0?dev\";\nimport { useParams } from \"https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0\";\n\nimport { AppContext } from \"./App.tsx\";\nimport { useProject } from \"../hooks/useProject.tsx\";\nimport { useAuth } from \"../hooks/useAuth.tsx\";\nimport { useChatLogic } from \"../hooks/useChatLogic.ts\";\nimport { useLoadingFavicon } from \"../hooks/useLoadingFavicon.ts\";\nimport { useUsageStats } from \"../hooks/useUsageStats.ts\";\nimport { Messages } from \"./Messages.tsx\";\nimport { InputBox, ImageDropContainer } from \"./InputBox.tsx\";\nimport { PreviewFrame } from \"./PreviewFrame.tsx\";\nimport { BranchSelect } from \"./BranchSelect.tsx\";\nimport { Loading } from \"./Loading.tsx\";\n\nexport function ChatRoute () {\n const { projectId, branchId } = useParams() as {\n projectId: string;\n branchId?: string;\n };\n\n const project = useProject(projectId, branchId);\n\n if (project.loading) {\n return \n }\n\n if (project.error) {\n return (\n

\n Error: {JSON.stringify(project.error, null, 2)}\n

\n );\n }\n\n\n if (!project.data) return null;\n\n return (\n <>\n \n \n );\n}\n\nfunction Conversation ({\n project,\n files,\n branchId,\n refetch,\n}: {\n project: any;\n files: any[];\n branchId: string;\n refetch: () => void;\n}) {\n const { token, anthropicApiKey } = useAuth();\n const [images, setImages] = useState<(string|null)[]>([]);\n const [selectedFiles, setSelectedFiles] = useState([]);\n const { audio } = useContext(AppContext);\n\n const {\n messages,\n error,\n input,\n handleInputChange,\n handleSubmit,\n handleStop,\n running,\n usages,\n messageEndTimes,\n } = useChatLogic({\n project,\n branchId,\n anthropicApiKey,\n bearerToken: token,\n selectedFiles,\n images,\n soundEnabled: audio,\n });\n\n useLoadingFavicon(running);\n\n useEffect(() => {\n if (!messages?.length) return;\n let last = messages.at(-1);\n if (shouldRefetch(last)) {\n refetch();\n }\n }, [messages]);\n useUsageStats(messages, usages);\n\n if (!project) {\n return (\n

\n Error loading project\n

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

\n \n {error && (\n

{error.stack}

\n )}\n

\n {\n handleSubmit(e);\n setImages([]);\n }}\n onCancel={handleStop}\n running={running}\n error={error}\n images={images}\n setImages={setImages}\n />\n

\n \n {project.imageUrl ? (\n

\n ) : (\n

\n )}\n

{project.author.username}

{project.name}

\n \n

\n {files && (\n \n )}\n

{JSON.stringify(messages, null, 2)}

\n \n );\n}\n\nfunction shouldRefetch (message) {\n for (let i = 0; i < message?.parts?.length; i++) {\n let part = message.parts[i];\n if (part.type === \"tool-invocation\") {\n switch (part.toolInvocation?.toolName) {\n case \"str_replace_editor\":\n if (part.toolInvocation?.args?.command === \"create\") {\n // console.log(\"REFETCH (create)\");\n return true;\n }\n break;\n case \"delete_file\":\n case \"change_val_type\":\n // console.log(\"REFETCH (change type or delete)\");\n return true;\n }\n }\n }\n return false;\n}\n",[],[321,327,353],{"_104":362,"_95":363,"_158":364,"_160":328,"_161":141,"_162":140,"_164":118,"_106":365,"_101":366,"_166":184,"_168":367,"_169":22,"_170":-5,"_171":368,"_99":369},"5c31c7c4-26cd-11f0-864e-569c3dd06744","DebugStyles.tsx","2169d896-246d-11f0-99d5-569c3dd06744",["D",1746132390529],29,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useRef, useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { TownieIcon } from \"./icons.tsx\";\nimport { Messages } from \"./Messages.tsx\";\n\nexport function DebugStyles () {\n const [ pathname, setPathname ] = useState(\"\");\n return (\n

Debug styles

\n\n

\n \n

\n\n

\n {\n const raw = e.target.value;\n if (!raw.includes(\"https://example.com\")) return;\n const next = raw.replace(\"https://example.com\", \"\").replace(/^\\//, \"\");\n setPathname(next);\n }}\n className=\"url-input\"\n />\n

\n {/*\n

\n \n

\n */}\n\n

\n Example user message\n

\n \n Thinking...\n

\n Just thinking about life and stuff...\n

\n\n

\n \n

view:

\n main.tsx\n

\n Just looking at files\n

\n\n

\n This is a block of prose assistant messages\n

\n\n

\n );\n}\n",[],[321,327,363],{"_104":371,"_95":372,"_158":373,"_160":328,"_161":141,"_162":374,"_164":118,"_106":375,"_101":376,"_166":184,"_168":377,"_169":22,"_170":-5,"_171":378,"_99":379},"ff9ea0fa-269e-11f0-942b-569c3dd06744","Header.tsx","b7c60294-2141-11f0-9a93-569c3dd06744",1432,["D",1746112478366],31,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useEffect, useContext } from \"https://esm.sh/react@18.2.0?dev\";\nimport { Link, useNavigate } from \"https://esm.sh/react-router@7?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 { useAuth } from \"../hooks/useAuth.tsx\";\nimport { Circle, Volume2Icon, VolumeOffIcon } from \"./icons.tsx\";\nimport { AppContext } from \"./App.tsx\";\n\nexport function Header () {\n const navigate = useNavigate();\n const { isAuthenticated, logOut } = useAuth();\n\n const onLogOut = () => {\n logOut();\n navigate(\"/\");\n }\n\n return (\n

\n \n \n \n \n Townie\n \n

\n \n \n {isAuthenticated ? (\n \n Log out\n \n ) : (\n Log in\n )}\n

\n );\n}\n\nfunction ValTownLogo () {\n return (\n \n \n \n \n );\n}\n\nfunction DarkButton () {\n const [dark, setDark] = useLocalStorage(\"DARK_MODE\", false);\n const toggle = () => {\n document.body.classList.toggle(\"dark\");\n setDark(!dark);\n }\n\n useEffect(() => {\n const cl = document.body.classList;\n if (dark && !cl.contains(\"dark\")) {\n cl.add(\"dark\");\n }\n }, []);\n\n return (\n \n \n \n );\n}\n\nfunction AudioButton () {\n const {audio, setAudio} = useContext(AppContext);\n\n const toggle = () => {\n setAudio(!audio);\n }\n\n return (\n \n {audio ? (\n \n ) : (\n \n )}\n \n );\n}\n",[],[321,327,372],{"_104":381,"_95":382,"_158":383,"_160":328,"_161":141,"_162":384,"_164":118,"_106":385,"_101":386,"_166":184,"_168":387,"_169":22,"_170":-5,"_171":388,"_99":389},"6f9777e6-25fb-11f0-85c1-569c3dd06744","Home.tsx","b91c382e-f333-403a-9eb1-d308e11e4e06",1276,["D",1746042228757],24,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\nimport { Link } from \"https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport {\n SquarePenIcon,\n FileCode2Icon,\n SparklesIcon,\n EyeIcon,\n} from \"./icons.tsx\";\n\nexport function Home() {\n return (\n

\n Welcome to OpenTownie\n

\n Your AI-powered development assistant for Val Town projects\n

\n \n Get Started\n \n

\n\n

\n What is OpenTownie?\n

\n OpenTownie is an AI-powered development assistant that lets you edit\n Val Town projects using Claude 3.7 Sonnet. It provides a seamless interface\n for discussing your code with Claude AI, which can directly view and modify\n files in your Val Town projects.\n

\n It uses agentic tool-calling, taking many read, write, and thinking steps\n autonomously when carrying out your instructions.\n

\n\n

\n Getting Started\n

Login with your Val Town API token
Add your Anthropic API key
Select a project to work on
Chat with Claude about your code
Watch as it makes changes directly to your files

\n\n

\n \n

AI-Assisted Editing

Chat with Claude about your code and let it make changes

\n\n

\n \n

File Browser

Select specific files to include in the context window

\n\n

\n \n

Branch Management

View, select, and create branches without leaving the app

\n\n

\n \n

Cost Tracking

See estimated API usage costs for each interaction

\n\n

\n Technical Details\n

\n OpenTownie is built with:\n

React frontend with TypeScript
Hono API server backend
Web Audio API for sound notifications
AI SDK for Claude integration

\n The application proxies requests to the Anthropic API and Val Town API, allowing Claude to view and edit your project files directly.\n

\n \n View Source\n \n

\n );\n}\n",[],[321,327,382],{"_104":391,"_95":392,"_158":393,"_160":328,"_161":141,"_162":394,"_164":118,"_106":395,"_101":396,"_166":184,"_168":397,"_169":22,"_170":-5,"_171":398,"_99":399},"82f9a058-25fa-11f0-b123-569c3dd06744","InputBox.tsx","5ef21cbc-214f-11f0-912d-569c3dd06744",1270,["D",1746041831781],121,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useRef, useState, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\nimport { PlusIcon, ArrowUpIcon, Square, XIcon } from \"./icons.tsx\";\nimport { processFiles } from \"../utils/images.ts\";\n\nexport function InputBox ({\n value,\n onChange,\n onSubmit,\n onCancel,\n running,\n error,\n images,\n setImages,\n} : {\n value: string;\n onChange: (e: React.KeyboardEvent) => void;\n onSubmit: (event: any) => void;\n onCancel: () => void;\n running: boolean;\n error: any;\n images: (string|null)[];\n setImages: (images: (string|null)[]) => void;\n}) {\n const form = useRef(null);\n\n if (error) console.error(error);\n\n const onKeyDown = (e) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n if (running) return;\n e.preventDefault();\n form.current?.dispatchEvent(new Event('submit', {\n bubbles: true,\n cancelable: true\n }));\n }\n }\n\n return (\n

\n \n \n Prompt\n \n {\n onChange(e)\n }}\n onKeyDown={onKeyDown}\n autoFocus={true}\n />\n \n

\n \n

\n {running && (\n \n \n \n )}\n {!running && (\n \n \n \n )}\n

\n \n

\n );\n}\n\nexport function ImageDropContainer ({\n images,\n setImages,\n running,\n children,\n}: {\n images: (string|null)[];\n setImages: (images: (string|null)[]) => void;\n running: boolean;\n children: React.ReactNode;\n}) {\n const dragging = useImageDrop({ images, setImages, running });\n\n return (\n <>\n {children}\n {dragging && (\n

\n Drop images here to upload\n

\n )}\n \n );\n}\n\nexport function useImageDrop ({ images, setImages, running }: {\n images: (string|null)[];\n setImages(images: (string|null)[]) => void;\n running: boolean;\n}) {\n const [dragging, setDragging] = useState(false);\n\n const onDragEnter = (e: React.DragEvent) => {\n e.preventDefault();\n if (!e.dataTransfer?.types.includes('Files')) return;\n setDragging(true);\n }\n\n const onDragLeave = (e:React.DragEvent) => {\n e.preventDefault();\n if (!e.relatedTarget) {\n setDragging(false);\n }\n }\n\n const onDragOver = (e:React.DragEvent) => {\n e.preventDefault();\n }\n\n const onDrop = (e:React.DragEvent) => {\n e.preventDefault();\n setDragging(false);\n if (e.dataTransfer?.files && !running) {\n processFiles(Array.from(e.dataTransfer.files), images, setImages);\n }\n }\n\n useEffect(() => {\n document.addEventListener(\"dragenter\", onDragEnter);\n document.addEventListener(\"dragleave\", onDragLeave);\n document.addEventListener(\"dragover\", onDragOver);\n document.addEventListener(\"drop\", onDrop);\n\n return () => {\n document.removeEventListener(\"dragenter\", onDragEnter);\n document.removeEventListener(\"dragleave\", onDragLeave);\n document.removeEventListener(\"dragover\", onDragOver);\n document.removeEventListener(\"drop\", onDrop);\n }\n }, []);\n\n return dragging;\n}\n\nfunction ImageRow ({ images, setImages }: {\n images: (string|null)[];\n setImages: (images: (string|null)[]) => void;\n}) {\n return (\n

\n {images.map((image, i) => (\n {\n setImages([\n ...images.slice(0, i),\n ...images.slice(i + 1),\n ]);\n }}\n />\n ))}\n

\n );\n}\n\nfunction Thumbnail ({ image, onRemove }: {\n image: string|null;\n onRemove: () => void;\n}) {\n if (!image) return null;\n\n return (\n

\n \n \n \n \n

\n );\n}\n\nfunction UploadButton ({\n images,\n setImages,\n disabled,\n}: {\n images: (string|null)[];\n setImages: (images: (string|null)[]) => void;\n disabled: boolean;\n}) {\n const ref = useRef(null);\n\n return (\n

\n {\n ref.current?.click();\n }}\n className=\"icon-button\">\n \n

\n Upload image\n

\n \n {\n if (e.target.files) {\n processFiles(Array.from(e.target.files), images, setImages);\n }\n }}\n />\n

\n );\n}\n",[],[321,327,392],{"_104":401,"_95":402,"_158":403,"_160":328,"_161":141,"_162":404,"_164":118,"_106":405,"_101":120,"_166":184,"_168":406,"_169":22,"_170":-5,"_171":407,"_99":408},"9b10c754-2143-11f0-9951-569c3dd06744","LayoutRoute.tsx","af77da6a-dcf4-4f83-90ab-e313d7a09e58",23,["D",1745523469646],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { Outlet } from \"https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport { Header } from \"./Header.tsx\";\n\nexport function LayoutRoute () {\n // TODO fetch here because we're not doing any caching\n // and we want the user data in the header ?\n // const projects = useProjects();\n return (\n <>\n

\n \n \n );\n}\n",[],[321,327,402],{"_104":410,"_95":411,"_158":412,"_160":328,"_161":141,"_162":413,"_164":118,"_106":414,"_101":120,"_166":184,"_168":415,"_169":22,"_170":-5,"_171":416,"_99":417},"79525ef0-246f-11f0-b82a-569c3dd06744","Loading.tsx","5d1ac28a-22ab-4586-8688-0c26871d1717",802,["D",1745872164379],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\n\nexport function Loading () {\n return (\n

\n loading…\n

\n );\n}\n",[],[321,327,411],{"_104":419,"_95":420,"_158":421,"_160":328,"_161":141,"_162":422,"_164":118,"_106":423,"_101":424,"_166":184,"_168":425,"_169":22,"_170":-5,"_171":426,"_99":427},"798a8822-269d-11f0-8ab9-569c3dd06744","LoginRoute.tsx","9f7910f9-2ef9-4e8e-970b-c0904abf6946",1420,["D",1746111823923],17,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\nimport { useNavigate } from \"https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport { useAuth } from \"../hooks/useAuth.tsx\";\n\nexport function LoginRoute () {\n const navigate = useNavigate();\n const { isAuthenticated, authenticate, error } = useAuth();\n const [tokenValue, setTokenValue] = useState(\"\");\n const [apiKey, setApiKey] = useState(\"\");\n // const [invalid, setInvalid] = useState(\"\"); // TODO\n\n const handleSubmit = (e) => {\n e.preventDefault();\n authenticate(tokenValue, apiKey);\n }\n\n useEffect(() => {\n if (isAuthenticated) navigate(\"/projects\");\n }, [isAuthenticated]);\n\n return (\n

Log in

\n {error && (\n

\n Error: {error.message}\n

\n            {JSON.stringify(error.stack, null, 2)}\n

\n )}\n \n

\n Val Town API Token\n {\n setTokenValue(e.target.value);\n }}\n />\n

\n Anthropic API Key\n {\n setApiKey(e.target.value);\n }}\n />\n

\n \n \n

\n );\n}\n",[],[321,327,420],{"_104":429,"_95":430,"_158":431,"_160":328,"_161":141,"_162":432,"_164":118,"_106":433,"_101":434,"_166":184,"_168":435,"_169":22,"_170":-5,"_171":436,"_99":437},"be4cee70-2533-11f0-8d4f-569c3dd06744","MessageTimer.tsx","fd481695-d1c6-4655-ad36-780511b1dfa3",1081,["D",1745956461465],4,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\n\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 useEffect(() => {\n if (endTime !== undefined || isStopped) return;\n const interval = setInterval(() => {\n setCurrentTime(Date.now());\n }, 100);\n\n return () => clearInterval(interval);\n }, [endTime, isStopped]);\n\n const elapsedTime = endTime !== undefined\n ? endTime - createdAt\n : currentTime - createdAt;\n\n return (\n

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

\n );\n};\n",[],[321,327,430],{"_104":439,"_95":440,"_158":441,"_160":328,"_161":141,"_162":442,"_164":118,"_106":443,"_101":444,"_166":184,"_168":445,"_169":22,"_170":-5,"_171":446,"_99":447},"729317ac-2533-11f0-9ccf-569c3dd06744","Messages.tsx","66ff7882-21ea-11f0-9c53-569c3dd06744",1078,["D",1745956334419],97,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport ReactMarkdown from \"https://esm.sh/react-markdown?dev&deps=react@18.2.0&react-dom@18.2.0\";\n\nimport { Loading } from \"./Loading.tsx\";\nimport { TownieIcon } from \"./icons.tsx\";\nimport { MessageTimer } from \"./MessageTimer.tsx\";\nimport { useScrollToBottom } from \"../hooks/useScrollToBottom.tsx\";\n\ntype Message = {\n id: string;\n role: \"user\"|\"assistant;\n parts: any[];\n createdAt?: number;\n};\n\nexport function Messages ({\n messages,\n messageEndTimes,\n running,\n}: {\n messages: Message[];\n messageEndTimes: Record;\n running: boolean;\n}) {\n const { bottomRef } = useScrollToBottom([ messages.length ]);\n\n return (\n

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

\n );\n}\n\nfunction Message ({\n message,\n messageEndTimes,\n running,\n}: {\n message: Message;\n messageEndTimes: Record;\n running: boolean;\n}) {\n if (message.role === \"user\") return ;\n\n return (\n \n );\n}\n\nfunction AssistantMessage ({ message, messageEndTimes, running }: {\n message: Message;\n messageEndTimes: Record;\n running: boolean;\n}) {\n return (\n <>\n {message.parts.map((part, i) => )}\n {!messageEndTimes[message.id] && running && }\n\n {message.createdAt && (\n \n )}\n\n

\n        {JSON.stringify(message.parts, null, 2)}\n

\n \n );\n}\n\nfunction Part ({ part }) {\n switch (part.type) {\n case \"text\":\n return ;\n case \"tool-invocation\":\n return ;\n case \"step-start\":\n return null; // ;\n default:\n return (\n

{JSON.stringify(part, null,  2)}

\n );\n }\n}\n\nfunction TextPart ({ part }) {\n return (\n \n {part.text}\n \n );\n}\n\nfunction ToolPart ({ part }) {\n const {\n toolName,\n args,\n result,\n } = part.toolInvocation;\n\n switch (toolName) {\n case \"think\":\n return (\n

\n \n

thinking…

\n {args?.thought}\n

\n );\n case \"str_replace_editor\":\n return \n case \"delete_file\":\n return (\n

\n \n

delete:

{args?.path}

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

\n \n

change type:

{args?.type}

{args?.path}

\n );\n default:\n return (\n

{JSON.stringify(part, null,  2)}

\n );\n }\n}\n\nfunction EditorToolPart ({ part }) {\n const {\n toolName,\n args,\n result,\n } = part.toolInvocation;\n\n let body = (\n

\n      {JSON.stringify(part.toolInvocation)}\n

\n );\n switch (args.command) {\n case \"create\":\n body =

{args.file_text}

;\n break;\n case \"view\":\n body =

{result?.data}

;\n break;\n case \"str_replace\":\n body = (\n

{args.old_str}

{args.new_str}

\n );\n break;\n case \"insert\":\n body = (\n

{args.insert_line}

{args.new_str}

\n );\n break;\n case \"undo_edit\":\n // not implemented\n break;\n }\n\n return (\n

\n \n

{args?.command}:

{args?.path}

\n {body}\n {/*\n

\n          TODO: viewed file\n          show diff\n          {!args?.file_text && (\n            \n              {JSON.stringify(part.toolInvocation)}\n            
\n          )}\n

\n */}\n

\n );\n\n}\n\nfunction UserMessage ({ message }: {\n message: Message;\n}) {\n return (\n <>\n {message.parts.map((part, i) => part.type === \"text\" ? (\n

\n \n {part.text}\n \n

\n ) : (\n \n )}\n \n );\n}\n",[],[321,327,440],{"_104":449,"_95":450,"_158":451,"_160":328,"_161":141,"_162":452,"_164":118,"_106":453,"_101":454,"_166":184,"_168":455,"_169":22,"_170":-5,"_171":456,"_99":457},"fcb83d02-2693-11f0-89d2-569c3dd06744","NewProjectRoute.tsx","1d53ed62-2145-11f0-b602-569c3dd06744",1372,["D",1746107748987],35,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { useNavigate } from \"https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport { useCreateProject } from \"../hooks/useCreateProject.tsx\";\n\nexport function NewProjectRoute () {\n const [name, setName] = useState(\"\");\n const [privacy, setPrivacy] = useState(\"public\");\n const navigate = useNavigate();\n\n const { data, error, createProject } = useCreateProject();\n\n const handleSubmit = (e) => {\n e.preventDefault();\n if (!name) return;\n\n createProject({ name, privacy })\n .then((_data) => {\n if (_data.error) return;\n navigate(`/chat/${_data.project.id}`);\n });\n };\n\n return (\n

Create new val

\n {error && (\n

\n Error: {JSON.stringify(error, null, 2)}\n

\n )}\n

\n );\n}\n\nconst privacyOptions = [\n { value: \"public\", label: \"Public\" },\n { value: \"unlisted\", label: \"Unlisted\" },\n { value: \"private\", label: \"Private\" },\n]\n\nfunction PrivacyRadios ({\n value,\n onChange,\n}: {\n value: string;\n onChange: (value: string) => void;\n}) {\n\n return (\n <>\n {privacyOptions.map(opt => (\n \n onChange(opt.value)}\n />\n {opt.label}\n \n )}\n \n );\n}\n",[],[321,327,450],{"_104":459,"_95":460,"_158":461,"_160":328,"_161":141,"_162":462,"_164":118,"_106":463,"_101":163,"_166":184,"_168":464,"_169":22,"_170":-5,"_171":465,"_99":466},"7b716696-2608-11f0-933a-569c3dd06744","NotFoundRoute.tsx","939cf587-20d1-433d-983b-6372295340e9",1363,["D",1746047832099],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\n\nexport function NotFoundRoute () {\n return (\n

Page not found

\n );\n}\n",[],[321,327,460],{"_104":468,"_95":469,"_158":470,"_160":328,"_161":141,"_162":471,"_164":118,"_106":472,"_101":473,"_166":184,"_168":474,"_169":22,"_170":-5,"_171":475,"_99":476},"5e6b228c-220f-11f0-b668-569c3dd06744","Preview.tsx","e6a46357-8b86-4507-adb5-128e14c60506",409,["D",1745610985226],14,"/** @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, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { RefreshIcon } from \"./icons.tsx\";\n\ninterface PreviewProps {\n projectFiles: any[];\n messages: any[];\n running: boolean;\n}\n\nexport function Preview({ projectFiles, messages, running }: PreviewProps) {\n const [selectedEndpointIndex, setSelectedEndpointIndex] = useState(0);\n const [customPath, setCustomPath] = useState(\"/\");\n const iframeRef = useRef(null);\n\n const endpointFiles = projectFiles.filter(file => file.links && file.links.endpoint !== undefined);\n\n useEffect(() => {\n setSelectedEndpointIndex(0);\n setCustomPath(\"/\");\n }, [projectFiles]);\n\n const currentEndpoint = endpointFiles.length > 0\n ? endpointFiles[Math.min(selectedEndpointIndex, endpointFiles.length - 1)]?.links?.endpoint\n : null;\n\n useEffect(() => {\n if (iframeRef.current && currentEndpoint) {\n iframeRef.current.src = `${currentEndpoint}${customPath}`;\n }\n }, [currentEndpoint, customPath]);\n\n // Refresh iframe when AI finishes replying\n useEffect(() => {\n if (!running && iframeRef.current && currentEndpoint) {\n iframeRef.current.src = `${currentEndpoint}${customPath}`;\n }\n }, [messages, running, currentEndpoint, customPath]);\n\n const handleEndpointChange = (e: React.ChangeEvent) => {\n setSelectedEndpointIndex(Number(e.target.value));\n };\n\n const handlePathChange = (e: React.ChangeEvent) => {\n setCustomPath(e.target.value);\n };\n\n const handleRefresh = () => {\n if (iframeRef.current && currentEndpoint) {\n iframeRef.current.src = `${currentEndpoint}${customPath}`;\n }\n };\n\n return (\n <>\n

\n {endpointFiles.length > 0 && (\n \n \n \n )}\n {endpointFiles.length > 1 && (\n \n {endpointFiles.map((file, index) => (\n \n ))}\n \n )}\n\n {endpointFiles.length === 1 && (\n

\n {endpointFiles[0].path}\n

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

\n \n

\n )}\n

\n\n

\n {endpointFiles.length > 0 && currentEndpoint\n ? (\n \n )\n : (\n

\n No HTTP endpoints available in this project\n

\n )}\n

\n\n

\n {currentEndpoint && (\n \n Open Preview\n \n )}\n

\n \n );\n}\n",[],[321,327,469],{"_104":478,"_95":479,"_158":480,"_160":328,"_161":141,"_162":481,"_164":118,"_106":482,"_101":483,"_166":184,"_168":484,"_169":22,"_170":-5,"_171":485,"_99":486},"85a8bebc-25fd-11f0-bb03-569c3dd06744","PreviewFrame.tsx","297474d4-2444-11f0-886b-569c3dd06744",1301,["D",1746043124775],84,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useRef, useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { RefreshIcon } from \"./icons.tsx\";\n\ninterface PreviewProps {\n files: any[];\n messages: any[];\n running: boolean;\n}\n\nexport function PreviewFrame (props: PreviewProps) {\n const previewKey = useRef(\"new-chat\");\n const [count, setCount] = useState(0);\n\n useEffect(() => {\n if (props.running) return;\n previewKey.current = props.messages?.at(-1)?.id ?? \"new-chat\";\n }, [props.running, props.messages]);\n\n const { url, htmlVals, index, setIndex } = usePreviewURL(props);\n const [pathname, setPathname] = useState(\"\");\n\n const reload = () => {\n setCount(c => c + 1);\n previewKey.current += count;\n }\n\n if (!url) {\n return (\n

\n No HTML files to preview\n

\n );\n }\n\n return (\n <>\n \n

\n \n

\n \n \n \n \n \n Open >>\n \n

\n \n );\n}\n\nconst TSRE = /\\/$/;\n\nfunction URLInput ({ url, pathname, setPathname }) {\n const prefix = url.replace(TSRE, \"\");\n return (\n {\n const raw = e.target.value;\n if (!raw.includes(prefix)) return;\n let next = raw.replace(prefix, \"\").replace(/^\\//, \"\");\n setPathname(next);\n }}\n />\n );\n}\n\nfunction PreviewSelect ({ index, setIndex, files }) {\n return (\n

\n \n Preview file\n \n {\n setIndex(Number(e.target.value));\n }}\n >\n \n {files?.map((file, i) => (\n \n {file.name}\n \n ))}\n \n

\n );\n}\n\nfunction usePreviewURL ({ files }) {\n const [index, setIndex] = useState(0);\n const htmlVals = files?.filter(file => file.links?.endpoint !== undefined);\n\n const url = htmlVals?.length ? htmlVals[index]?.links.endpoint : null;\n\n return {\n index,\n setIndex,\n url,\n htmlVals,\n };\n}\n",[],[321,327,479],{"_104":488,"_95":489,"_158":490,"_160":328,"_161":141,"_162":491,"_164":118,"_106":492,"_101":493,"_166":184,"_168":494,"_169":22,"_170":-5,"_171":495,"_99":496},"cf926828-269a-11f0-84a3-569c3dd06744","ProjectsRoute.tsx","dd5a6d0e-4595-43fb-a47a-792c4a1490d1",1400,["D",1746110679768],20,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { Link } from \"https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport { useProjects } from \"../hooks/useProjects.tsx\";\nimport { Loading } from \"./Loading.tsx\";\n\nexport function ProjectsRoute () {\n const projects = useProjects();\n\n\n return (\n

Your vals

\n \n Create new val\n \n

\n {projects.loading && (\n \n )}\n {projects.error && (\n

\n Error: {projects.error.message}\n

\n            {JSON.stringify(projects.error.stack, null, 2)}\n

\n )}\n {projects.data?.projects?.map(project => (\n \n \n \n ))}\n

{JSON.stringify(projects, null, 2)}

\n );\n}\n\nfunction ProjectCard ({\n user,\n project,\n}: {\n user: {\n username: string;\n profileImageUrl: string|null;\n };\n project: any;\n}) {\n return (\n

\n\n {project.imageUrl ? (\n

\n ) : user.profileImageUrl ? (\n

\n \n

\n ) : (\n

\n )}\n

{user.username}

\n {project.name}\n \n

{project.description}

\n );\n}\n\nfunction Privacy ({ privacy }: {\n privacy: \"public\"|\"unlisted\"|\"private\";\n}) {\n switch (privacy) {\n case \"public\":\n return null; //

public

;\n case \"unlisted\":\n return

(Unlisted)

;\n case \"private\":\n return

(Private)

;\n }\n}\n\n\n",[],[321,327,489],{"_104":498,"_95":499,"_158":500,"_160":328,"_161":141,"_162":163,"_164":118,"_106":501,"_101":32,"_166":184,"_168":502,"_169":22,"_170":-5,"_171":503,"_99":504},"ffff586e-213f-11f0-ac90-569c3dd06744","RequireAuthRoute.tsx","56a92e3c-1d10-413e-82d2-607754bd3771",["D",1745521920983],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport {\n Outlet,\n Navigate,\n useLocation,\n} from \"https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport { useAuth } from \"../hooks/useAuth.tsx\";\n\nexport function RequireAuthRoute () {\n const location = useLocation();\n const { isAuthenticated } = useAuth();\n\n if (!isAuthenticated) {\n return (\n \n );\n }\n\n return \n}\n",[],[321,327,499],{"_104":506,"_95":507,"_158":508,"_160":328,"_161":141,"_162":509,"_164":118,"_106":510,"_101":511,"_166":184,"_168":512,"_169":22,"_170":-5,"_171":513,"_99":514},"3beb7cb2-2605-11f0-b587-569c3dd06744","icons.tsx","4a000218-2142-11f0-af61-569c3dd06744",1329,["D",1746046437029],39,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\n\nexport function TownieIcon({\n size = 24,\n color = \"currentColor\",\n className,\n circle,\n}: {\n size?: number;\n color?: string;\n className?: string;\n circle?: string;\n}) {\n return (\n \n {circle && (\n \n )}\n\n \n \n \n \n \n \n \n );\n}\n\nexport function Circle ({\n filled,\n}: {\n filled: boolean;\n}) {\n return (\n \n \n \n );\n}\n\nexport function Square ({\n size = 24,\n}: {\n size?: number;\n}) {\n return (\n \n \n \n );\n}\n\n// icons from https://lucide.dev\nexport function SquarePenIcon () {\n return (\n \n );\n}\n\nexport function FileCode2Icon () {\n return (\n \n );\n}\n\nexport function SparklesIcon () {\n return (\n \n );\n}\n\nexport function EyeIcon () {\n return (\n \n );\n}\n\nexport function ExternalLinkIcon () {\n return (\n \n );\n}\n\nexport function KeyRoundIcon () {\n return (\n \n );\n}\n\nexport function LockKeyholeIcon () {\n return (\n \n );\n}\n\nexport function PlusIcon () {\n return (\n \n );\n}\n\nexport function ArrowUpIcon () {\n return (\n \n );\n}\n\nexport function RefreshIcon ({ size = 24 }: { size: number }) {\n return (\n \n );\n}\n\nexport function XIcon ({ size = 24 }: {\n size?: number;\n}) {\n return (\n \n );\n}\n\nexport function VolumeOffIcon ({ size = 24 }) {\n return (\n \n );\n}\n\nexport function Volume2Icon ({ size = 24 }) {\n return (\n \n );\n}\n",[],[321,327,507],[321,327],{"_104":517,"_95":518,"_158":519,"_160":322,"_161":141,"_162":163,"_164":118,"_106":520,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":521,"_99":616},"ffff715a-213f-11f0-ac90-569c3dd06744","hooks","73a7771b-8b38-4e11-a2ae-d56758b8376a",["D",1745521920983],[522,532,541,550,559,569,578,587,597,606],{"_104":523,"_95":524,"_158":525,"_160":519,"_161":141,"_162":526,"_164":118,"_106":527,"_101":528,"_166":184,"_168":529,"_169":22,"_170":-5,"_171":530,"_99":531},"27e079ac-26a0-11f0-95c8-569c3dd06744","useAuth.tsx","fb646745-5d51-4d02-9281-a2479fb5b962",1433,["D",1746112975403],10,"import { useState } from \"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\nconst TOKEN_KEY = \"bearer\";\nconst ANTHROPIC_KEY = \"anthropic_api_key\";\n\nexport function useAuth () {\n const [token, setToken, removeToken] = useLocalStorage(TOKEN_KEY, \"\");\n const [anthropicApiKey, setAnthropicApiKey, removeAnthropicApiKey] = useLocalStorage(ANTHROPIC_KEY, \"\");\n const [error, setError] = useState(null);\n\n const isAuthenticated = !!token && !!anthropicApiKey;\n\n const authenticate = async (valTownAPIKey: string, anthropicKey: string) => {\n // replace all this with oauth when it's ready\n try {\n const res = await fetch(\"/api/user\", {\n headers: {\n \"Authorization\": \"Bearer \" + valTownAPIKey,\n },\n });\n const data = await res.json();\n if (!res.ok) {\n console.error(data);\n setError(data.error);\n removeToken();\n removeAnthropicApiKey();\n return;\n }\n setError(null);\n setToken(valTownAPIKey);\n setAnthropicApiKey(anthropicKey);\n } catch (e) {\n console.error(e);\n setError(e.error);\n removeToken();\n removeAnthropicApiKey();\n }\n }\n\n const logOut = () => {\n removeToken();\n removeAnthropicApiKey();\n }\n\n return {\n isAuthenticated,\n error,\n authenticate,\n logOut,\n token,\n anthropicApiKey,\n };\n}\n",[],[321,518,524],{"_104":533,"_95":534,"_158":535,"_160":519,"_161":141,"_162":536,"_164":118,"_106":537,"_101":163,"_166":184,"_168":538,"_169":22,"_170":-5,"_171":539,"_99":540},"12fe05f2-2530-11f0-a9bd-569c3dd06744","useBranches.tsx","5a56ef55-0e63-4146-bc39-afdcb69151ab",1058,["D",1745954885566],"import { useState, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\nimport { useAuth } from \"./useAuth.tsx\";\n\nconst ENDPOINT = \"/api/project-branches\";\n\nexport function useBranches (projectId: string) {\n const { token } = useAuth();\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n\n const fetchData = async () => {\n const endpoint = new URL(ENDPOINT, window.location.origin);\n endpoint.searchParams.append(\"projectId\", projectId);\n\n const res = await fetch(endpoint, {\n headers: {\n \"Authorization\": \"Bearer \" + token,\n },\n }).then(res => res.json());\n setData(res.branches); // todo error handling\n setLoading(false);\n };\n\n useEffect(() => {\n if (!projectId) return;\n fetchData();\n }, [projectId]);\n\n return { data, loading, refetch: fetchData };\n}\n",[],[321,518,534],{"_104":542,"_95":543,"_158":544,"_160":519,"_161":141,"_162":545,"_164":118,"_106":546,"_101":434,"_166":184,"_168":547,"_169":22,"_170":-5,"_171":548,"_99":549},"33393a68-253e-11f0-98e1-569c3dd06744","useChatLogic.ts","62a21942-6fdc-453c-9342-0679574b55de",1116,["D",1745960952596],"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 // console.log(\"useChatLogic\", project);\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 handleStop,\n running,\n usages,\n messageEndTimes,\n };\n}\n",[],[321,518,543],{"_104":551,"_95":552,"_158":553,"_160":519,"_161":141,"_162":554,"_164":118,"_106":555,"_101":120,"_166":184,"_168":556,"_169":22,"_170":-5,"_171":557,"_99":558},"880dfc90-252f-11f0-970f-569c3dd06744","useCreateBranch.tsx","bcd46d7b-463f-469f-a9bf-15cdd42fdd56",1052,["D",1745954652471],"import { useState, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\nimport { useAuth } from \"./useAuth.tsx\";\n\nconst ENDPOINT = \"/api/create-branch\";\n\nexport function useCreateBranch (projectId: string) {\n const { token } = useAuth();\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const createBranch = async ({ name }: {\n name: string;\n }) => {\n setLoading(true);\n setData(null);\n setError(null);\n const res = await fetch(ENDPOINT, {\n method: \"POST\",\n headers: {\n \"Authorization\": \"Bearer \" + token,\n },\n body: JSON.stringify({\n projectId,\n branchName: name,\n }),\n })\n const data = await res.json();\n if (!res.ok) {\n setError(data.error ?? \"Failed to create branch\");\n return data;\n }\n setData(data); // todo error handling\n setLoading(false);\n setError(null);\n return data;\n };\n\n return { data, loading, error, createBranch };\n}\n",[],[321,518,552],{"_104":560,"_95":561,"_158":562,"_160":519,"_161":141,"_162":563,"_164":118,"_106":564,"_101":565,"_166":184,"_168":566,"_169":22,"_170":-5,"_171":567,"_99":568},"85080576-2693-11f0-afe3-569c3dd06744","useCreateProject.tsx","60261b6e-246f-4741-9d21-f5e077202951",1370,["D",1746107548215],5,"\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\nimport { useAuth } from \"./useAuth.tsx\";\n\nconst ENDPOINT = \"/api/create-project\";\n\nexport function useCreateProject () {\n const { token } = useAuth();\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const createProject = async ({ name, privacy }: {\n name: string;\n privacy: \"public\"|\"unlisted\"|\"private\";\n }) => {\n setLoading(true);\n setData(null);\n setError(null);\n try {\n const res = await fetch(ENDPOINT, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": \"Bearer \" + token,\n },\n body: JSON.stringify({\n name: name,\n privacy: privacy,\n }),\n })\n const data = await res.json();\n if (!res.ok) {\n console.error(data);\n setError(data.error ?? \"Failed to create project\");\n return data;\n }\n setData(data);\n setLoading(false);\n setError(null);\n return data;\n } catch (e) {\n console.error(e);\n setError(e);\n setLoading(false);\n setData(null);\n return e;\n }\n };\n\n return { data, loading, error, createProject };\n}\n",[],[321,518,561],{"_104":570,"_95":571,"_158":572,"_160":519,"_161":141,"_162":573,"_164":118,"_106":574,"_101":226,"_166":184,"_168":575,"_169":22,"_170":-5,"_171":576,"_99":577},"717282be-2514-11f0-abe4-569c3dd06744","useLoadingFavicon.ts","3dea9e72-2514-11f0-91bc-569c3dd06744",943,["D",1745943018127],"import { useEffect } from \"https://esm.sh/react@18.2.0?dev\";\n\nfunction setLoadingFavicon() {\n document.querySelector('link[rel=\"icon\"]').href = \"/favicon-loading.svg\";\n}\nfunction resetFavicon () {\n document.querySelector('link[rel=\"icon\"]').href = \"/favicon.svg\";\n}\n\nexport function useLoadingFavicon (loading: boolean) {\n useEffect(() => {\n if (loading) setLoadingFavicon();\n else resetFavicon();\n }, [loading]);\n}\n",[],[321,518,571],{"_104":579,"_95":580,"_158":581,"_160":519,"_161":141,"_162":582,"_164":118,"_106":583,"_101":565,"_166":184,"_168":584,"_169":22,"_170":-5,"_171":585,"_99":586},"84402fdc-2694-11f0-803b-569c3dd06744","useProject.tsx","0333bf49-2554-4462-a6c1-5b022b210da5",1377,["D",1746107976421],"import { useState, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\nimport { useAuth } from \"./useAuth.tsx\";\n\nconst PROJECT_ENDPOINT = \"/api/project\";\nconst FILES_ENDPOINT = \"/api/project-files\";\n\nexport function useProject (projectId: string, branchId?: string) {\n const { token } = useAuth();\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n const fetchData = async () => {\n try {\n const projectEndpoint = new URL(PROJECT_ENDPOINT, window.location.origin);\n projectEndpoint.searchParams.append(\"projectId\", projectId);\n const filesEndpoint = new URL(FILES_ENDPOINT, window.location.origin);\n filesEndpoint.searchParams.append(\"projectId\", projectId);\n if (branchId) filesEndpoint.searchParams.append(\"branchId\", branchId);\n\n const headers = {\n \"Authorization\": \"Bearer \" + token,\n };\n\n const { project } = await fetch(projectEndpoint, { headers })\n .then(res => res.json());\n const { files } = await fetch(filesEndpoint, { headers })\n .then(res => res.json());\n\n setData({ project, files }); // todo error handling\n setLoading(false);\n setError(null);\n } catch (e) {\n setError(e);\n setLoading(false);\n setData(null);\n }\n };\n\n useEffect(() => {\n if (!projectId) return;\n fetchData();\n }, [projectId, branchId]);\n\n return { data, loading, error, refetch: fetchData };\n}\n",[],[321,518,580],{"_104":588,"_95":589,"_158":590,"_160":519,"_161":141,"_162":591,"_164":118,"_106":592,"_101":593,"_166":184,"_168":594,"_169":22,"_170":-5,"_171":595,"_99":596},"d829a6f6-269d-11f0-a026-569c3dd06744","useProjects.tsx","7b484706-03db-4805-b490-c07edfb8284c",1422,["D",1746111982672],11,"import { useState, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\nimport { useAuth } from \"./useAuth.tsx\";\n\nconst ENDPOINT = \"/api/projects-loader\";\n\nexport function useProjects () {\n const { token } = useAuth();\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n const fetchData = async () => {\n try {\n const res = await fetch(ENDPOINT, {\n headers: {\n \"Authorization\": \"Bearer \" + token,\n },\n })\n const data = await res.json();\n console.log(\"useProjects fetchData\", { res, data });\n if (!res.ok) {\n console.error(data);\n setError(data.error);\n setData(null);\n setLoading(false);\n return;\n }\n\n setData(data); // todo error handling\n setLoading(false);\n setError(null);\n } catch (e) {\n console.error(e);\n setData(null);\n setError(e);\n setLoading(false);\n }\n };\n\n useEffect(() => {\n fetchData();\n }, []);\n\n return { data, loading, error, refetch: fetchData };\n}\n",[],[321,518,589],{"_104":598,"_95":599,"_158":600,"_160":519,"_161":141,"_162":601,"_164":118,"_106":602,"_101":593,"_166":184,"_168":603,"_169":22,"_170":-5,"_171":604,"_99":605},"b1c6b8ea-245a-11f0-b1ba-569c3dd06744","useScrollToBottom.tsx","e6cf8cc6-21ec-11f0-8483-569c3dd06744",611,["D",1745863239664],"import { useEffect, useRef } from 'https://esm.sh/react@18.2.0?dev';\n\n\n/**\n * A custom hook that automatically scrolls a container to the bottom\n * when its content changes, based on the specified dependencies.\n *\n * @param {Array} dependencies - Array of dependencies that trigger scrolling when changed\n * @returns {Object} An object containing containerRef and scrollToBottom function\n */\nexport function useScrollToBottomContainer(dependencies = []) {\n const containerRef = useRef(null);\n\n const scrollToBottom = () => {\n if (containerRef.current) {\n setTimeout(() => {\n containerRef.current.scrollTop = containerRef.current.scrollHeight;\n }, 0);\n }\n };\n\n useEffect(() => {\n scrollToBottom();\n }, dependencies);\n\n return { containerRef, scrollToBottom };\n}\n\n// body scroll version\nexport function useScrollToBottom(dependencies = []) {\n const bottomRef = useRef(null);\n\n const scrollToBottom = () => {\n if (bottomRef.current) {\n bottomRef.current.scrollIntoView({ behavior: 'smooth' });\n }\n };\n\n useEffect(() => {\n scrollToBottom();\n }, dependencies);\n\n return { bottomRef, scrollToBottom };\n}\n\n",[],[321,518,599],{"_104":607,"_95":608,"_158":609,"_160":519,"_161":141,"_162":610,"_164":118,"_106":611,"_101":612,"_166":184,"_168":613,"_169":22,"_170":-5,"_171":614,"_99":615},"66c2d1d0-269e-11f0-8d7c-569c3dd06744","useUsageStats.ts","ac4bf4fd-188f-477d-a30e-9944f7d0445d",1430,["D",1746112221913],16,"import { useEffect } from \"https://esm.sh/react@18.2.0?dev\";\n\nexport function useUsageStats (messages: any[], usages: any[]) {\n useEffect(() => {\n if (!messages?.length) return;\n let last = messages.at(-1);\n let usage = usages ? usages[last.id] : null;\n if (usage) {\n const cost = calculateCost(usage);\n const stats = Object.entries(usage).map(([key, val]) => `${key}: ${val}`).join(\", \");\n console.log(`Estimated cost: ${cost} (${stats})`);\n }\n }, [messages, usages]);\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",[],[321,518,608],[321,518],{"_104":618,"_95":297,"_158":619,"_160":322,"_161":141,"_162":163,"_164":118,"_106":620,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":621,"_99":639},"ffff7aa6-213f-11f0-ac90-569c3dd06744","2215e209-4400-4f9f-b691-44c90d4738ae",["D",1745521920983],[622,631],{"_104":623,"_95":624,"_158":625,"_160":619,"_161":141,"_162":626,"_164":118,"_106":627,"_101":163,"_166":184,"_168":628,"_169":22,"_170":-5,"_171":629,"_99":630},"2196d81c-25eb-11f0-9a9e-569c3dd06744","images.ts","1411096a-25eb-11f0-a895-569c3dd06744",1172,["D",1746035225945],"\nexport const PROMPT_IMAGE_LIMIT = 5;\n\nexport const processFiles = async (files: File[], images: (string | null)[], setImages: (images: (string | null)[]) => void) => {\n const imageFiles = files.filter(file => file.type.startsWith('image/'));\n const filesToProcess = imageFiles.slice(0, PROMPT_IMAGE_LIMIT - images.filter(Boolean).length);\n\n if (filesToProcess.length === 0) return;\n\n const newImages = [...images, ...Array(filesToProcess.length).fill(null)];\n setImages(newImages);\n\n const processedImages = await Promise.all(\n filesToProcess.map(async (file) => {\n return await readFileAsDataURL(file);\n })\n );\n\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\nconst readFileAsDataURL = (file: File): Promise => {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => {\n const result = reader.result as string;\n console.log(\"Image loaded, size:\", result.length, \"bytes\");\n resolve(result);\n };\n reader.onerror = reject;\n reader.readAsDataURL(file);\n });\n};\n",[],[321,297,624],{"_104":632,"_95":633,"_158":634,"_160":619,"_161":141,"_162":163,"_164":118,"_106":635,"_101":32,"_166":184,"_168":636,"_169":22,"_170":-5,"_171":637,"_99":638},"ffff76aa-213f-11f0-ac90-569c3dd06744","soundEffects.ts","7d546d3b-538b-4007-b3a8-7f999e42f129",["D",1745521920983],"/**\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}",[],[321,297,633],[321,297],{"_104":641,"_95":642,"_158":643,"_160":322,"_161":141,"_162":644,"_164":118,"_106":645,"_101":646,"_166":184,"_168":647,"_169":22,"_170":-5,"_171":648,"_99":649},"9dd800c6-251f-11f0-aa0d-569c3dd06744","favicon.http.tsx","424712b4-2511-11f0-8a3e-569c3dd06744",963,["D",1745947817074],13,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport { TownieIcon } from \"./components/icons.tsx\";\n\nexport default async function (loading: boolean) {\n const svg = renderToString(\n \n );\n\n return new Response(svg, {\n headers: {\n \"Content-Type\": \"image/svg+xml\",\n },\n });\n}\n",[],[321,642],{"_104":651,"_95":652,"_158":653,"_160":322,"_161":141,"_162":163,"_164":118,"_106":654,"_101":32,"_166":184,"_168":655,"_169":22,"_170":-5,"_171":656,"_99":657},"ffff7c2c-213f-11f0-ac90-569c3dd06744","index.tsx","a5378a18-ab05-4aec-8748-cc4f948dd1c7",["D",1745521920983],"/** @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();",[],[321,652],{"_104":659,"_95":660,"_158":661,"_160":322,"_161":141,"_162":662,"_164":118,"_106":663,"_101":664,"_166":665,"_168":666,"_169":22,"_170":-5,"_171":667,"_99":668},"d046691e-25fe-11f0-90d4-569c3dd06744","styles.css","4b013b0c-2140-11f0-ac3a-569c3dd06744",1318,["D",1746043679455],370,"file","/** townie 2025 css */\n\n/* ia-writer-mono-latin-400-normal */\n@font-face {\n font-family: 'iA Writer Mono';\n font-style: normal;\n font-display: swap;\n font-weight: 400;\n src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff) format('woff');\n}\n\n/* ia-writer-quattro-latin-400-normal */\n@font-face {\n font-family: 'iA Writer Quattro';\n font-style: normal;\n font-display: swap;\n font-weight: 400;\n src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-normal.woff) format('woff');\n}\n\n/* ia-writer-quattro-latin-700-normal */\n@font-face {\n font-family: 'iA Writer Quattro';\n font-style: normal;\n font-display: swap;\n font-weight: 700;\n src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-700-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-700-normal.woff) format('woff');\n}\n\n/* ia-writer-quattro-latin-400-italic */\n@font-face {\n font-family: 'iA Writer Quattro';\n font-style: italic;\n font-display: swap;\n font-weight: 400;\n src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-italic.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-italic.woff) format('woff');\n}\n\n/* ia-writer-quattro-latin-700-italic */\n@font-face {\n font-family: 'iA Writer Quattro';\n font-style: italic;\n font-display: swap;\n font-weight: 700;\n src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-700-italic.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-700-italic.woff) format('woff');\n}\n\n/** vars */\n:root {\n /* typography */\n --sans-serif: \"iA Writer Quattro\", system-ui, sans-serif;\n --monospace: \"iA Writer Mono\", Menlo, monospace;\n --border-radius: 12px;\n\n --font-size-1: 32px;\n --font-size-2: 24px;\n --font-size-3: 20px;\n --font-size-4: 16px;\n --font-size-5: 14px;\n --font-size-6: 12px;\n\n --space-0: 0;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 16px;\n --space-4: 32px;\n --space-5: 64px;\n --space-6: 128px;\n --space-7: 256px;\n --space-8: 512px;\n\n /* colors */\n --slate-50: rgb(248, 250, 252);\n --slate-100: rgb(241, 245, 249);\n --slate-200: rgb(226, 232, 240);\n --slate-300: rgb(203, 213, 225);\n --slate-400: rgb(148, 163, 184);\n --slate-500: rgb(100, 116, 139);\n --slate-600: rgb(71, 85, 105);\n --slate-700: rgb(51, 65, 85);\n --slate-800: rgb(30, 41, 59);\n --slate-900: rgb(15, 23, 42);\n --slate-950: rgb(2, 6, 23);\n\n --sky-50: rgb(240, 249, 255);\n --sky-100: rgb(224, 242, 254);\n --sky-200: rgb(186, 230, 253);\n --sky-300: rgb(125, 211, 252);\n --sky-400: rgb(56, 189, 248);\n --sky-500: rgb(14, 165, 233);\n --sky-600: rgb(2, 132, 199);\n --sky-700: rgb(3, 105, 161);\n --sky-800: rgb(7, 89, 133);\n --sky-900: rgb(12, 74, 110);\n --sky-950: rgb(8, 47, 73);\n\n --fuchsia-50: rgb(253, 244, 255);\n --fuchsia-100: rgb(250, 232, 255);\n --fuchsia-200: rgb(245, 208, 254);\n --fuchsia-300: rgb(240, 171, 252);\n --fuchsia-400: rgb(232, 121, 249);\n --fuchsia-500: rgb(217, 70, 239);\n --fuchsia-600: rgb(192, 38, 211);\n --fuchsia-700: rgb(162, 28, 175);\n --fuchsia-800: rgb(134, 25, 143);\n --fuchsia-900: rgb(112, 26, 117);\n --fuchsia-950: rgb(74, 4, 78);\n\n --amber-50: rgb(255, 251, 235);\n --amber-100: rgb(254, 243, 199);\n --amber-200: rgb(253, 230, 138);\n --amber-300: rgb(252, 211, 77);\n --amber-400: rgb(251, 191, 36);\n --amber-500: rgb(245, 158, 11);\n --amber-600: rgb(217, 119, 6);\n --amber-700: rgb(180, 83, 9);\n --amber-800: rgb(146, 64, 14);\n --amber-900: rgb(120, 53, 15);\n --amber-950: rgb(69, 26, 3);\n\n --red-light: #fdd;\n --red: #f00;\n --red-dark: #300;\n\n /* color aliases */\n --text: black; /* body foreground color */\n --background: white; /* body background color */\n --primary: var(--sky-500); /* primary brand color for links, buttons, etc. */\n --primary-hover: var(--sky-600); /* primary brand color for links, buttons, etc. */\n --secondary: var(--fuchsia-500); /* secondary brand color for alternative styling */\n --accent: var(--amber-500); /* contrast color for emphasizing UI */\n --highlight: var(--sky-100); /* background color for highlighting text */\n --muted: var(--slate-200); /* faint color for backgrounds, borders, and accents that do not require high contrast with the background color */\n --border: var(--slate-200);\n --error-text: var(--red);\n --error-bg: var(--red-light);\n}\n\n/** TODO */\n.dark {\n --text: var(--slate-50); /* body foreground color */\n --background: var(--slate-900); /* body background color */\n --primary: var(--sky-500); /* primary brand color for links, buttons, etc. */\n --primary-hover: var(--sky-400); /* primary brand color for links, buttons, etc. */\n --secondary: var(--fuchsia-500); /* secondary brand color for alternative styling */\n --accent: var(--amber-500); /* contrast color for emphasizing UI */\n --highlight: var(--sky-900); /* background color for highlighting text */\n --muted: var(--slate-800); /* faint color for backgrounds, borders, and accents that do not require high contrast with the background color */\n --border: var(--slate-900);\n --error-bg: var(--red-dark);\n}\n\n/** reset */\n* { box-sizing: border-box }\nbody {\n margin: 0;\n font-family: var(--sans-serif);\n color: var(--text);\n background-color: var(--background);\n transition-property: background-color;\n transition-duration: 400ms;\n transition-timing-function: linear;\n}\n\na {\n color: var(--primary);\n}\na:hover, a:focus {\n color: var(--primary-hover);\n}\n\n\nh1, h2, h3, h4, h5, h6 {\n margin: 0;\n padding: 0;\n}\np, ol, ul, blockquote, pre {\n margin-top: var(--space-1);\n margin-bottom: var(--space-1);\n}\n\nbutton {\n appearance: none;\n background: none;\n border: 0;\n font-family: inherit;\n font-size: inherit;\n color: inherit;\n}\n\n.label {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n font-size: 14px;\n font-weight: 700;\n margin-top: var(--space-1);\n margin-bottom: var(--space-1);\n}\n\ninput[type=text],\ninput[type=url],\ninput[type=password] {\n display: block;\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n padding: var(--space-1) var(--space-2);\n /*\n border-radius: var(--border-radius);\n */\n color: var(--text);\n background-color: var(--muted);\n border: 1px solid transparent;\n}\ninput[type=text]:focus,\ninput[type=url]:focus,\ninput[type=password]:focus {\n background-color: var(--highlight);\n outline: none;\n border-color: var(--primary);\n}\nselect {\n display: block;\n width: 100%;\n height: 32px;\n font-family: var(--monospace);\n font-size: var(--font-size-6);\n padding: var(--space-1) var(--space-1);\n color: var(--text);\n background-color: var(--muted);\n border: 1px solid transparent;\n cursor: pointer;\n}\nselect:hover,\nselect:focus {\n background-color: var(--highlight);\n}\nselect:focus {\n outline: none;\n border-color: var(--primary);\n}\n\npre, code {\n font-family: var(--monospace);\n}\npre {\n min-width: 0;\n max-width: 100%;\n overflow: auto;\n white-space: pre-wrap;\n}\n\nhr {\n margin: 0;\n max-width: 256px;\n border: 0;\n border-bottom: 1px solid var(--muted);\n}\n\n/** typography */\n.h1 { font-size: var(--font-size-1) }\n.h2 { font-size: var(--font-size-2) }\n.h3 { font-size: var(--font-size-3) }\n.h4 { font-size: var(--font-size-4) }\n.h5 { font-size: var(--font-size-5) }\n.h6 { font-size: var(--font-size-6) }\n\n.bold { font-weight: 700 }\n.regular { font-weight: 400 }\n.italic { font-style: italic }\n.mono { font-family: \"iA Writer Mono\", Menlo, monospace }\n\n.truncate {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/** layout */\n.header {\n height: var(--space-5);\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding-left: var(--space-3);\n padding-right: var(--space-3);\n background-color: var(--background);\n}\n\n.section {\n margin-top: var(--space-5);\n margin-bottom: var(--space-5);\n}\n.section-grid {\n display: grid;\n gap: var(--space-3);\n}\n@media screen and (min-width: 768px) {\n .section-grid {\n grid-template-columns: 1fr 1fr;\n gap: var(--space-4);\n }\n}\n\n/** projects list */\n.container {\n max-width: 1024px;\n padding: var(--space-3);\n margin: 0 auto;\n}\n.container.small {\n max-width: 512px;\n}\n.projects-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.projects-list {\n display: grid;\n gap: var(--space-3);\n padding-top: var(--space-4);\n padding-bottom: var(--space-5);\n}\n@media screen and (min-width: 768px) {\n .projects-list {\n grid-template-columns: 1fr 1fr;\n }\n}\n\n/** chat route layout */\n.chat-container {\n display: flex;\n flex-direction: column;\n height: calc(100vh - 64px);\n min-height: 512px;\n padding: 0 var(--space-2);\n}\n.chat-messages {\n min-height: 0;\n min-width: 0;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n}\n.chat-messages-list {\n min-height: 0;\n flex-grow: 1;\n overflow: auto;\n padding-top: var(--space-4);\n padding-bottom: var(--space-4);\n}\n.chat-messages-input {\n min-height: 0;\n flex-shrink: 0;\n margin-bottom: var(--space-3);\n}\n\n.chat-preview {\n order: -1;\n flex-shrink: 0;\n min-height: 0;\n min-width: 0;\n height: 40vh;\n}\n\n@media screen and (min-width: 768px) {\n .chat-container {\n width: 100%;\n flex-direction: row;\n gap: var(--space-5);\n padding: 0 var(--space-4);\n }\n .chat-preview {\n width: 384px;\n height: auto;\n order: 2;\n }\n .chat-messages-input {\n margin-bottom: var(--space-4);\n }\n}\n\n.spacer { margin: auto }\n\n/** decoration */\n.header a {\n color: inherit;\n text-decoration: none;\n}\n.block-link {\n display: block;\n text-decoration: none;\n color: inherit;\n}\n.text-link:hover {\n color: var(--primary);\n text-decoration: underline;\n}\n.rounded { border-radius: var(--border-radius) }\n.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) }\n.shadow { box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) }\n.white-fade-up { box-shadow: 0 -8px 48px 4px rgba(255, 255, 255, 0.9875) }\n.border { border: 1px solid var(--slate-100) }\n\n/** components */\n.icon-button {\n padding: 4px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n color: var(--background);\n background-color: var(--primary);\n}\n.icon-button:hover {\n background-color: var(--primary-hover);\n}\n.icon-button:disabled {\n opacity: 0.2;\n}\n.icon-button.large svg {\n width: 32px;\n height: 32px;\n}\n.dark-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n padding: 4px;\n width: 40px;\n height: 40px;\n border-radius: 9999px;\n}\n.dark-button:hover,\n.dark-button:focus {\n background-color: var(--highlight);\n}\n\n.button {\n display: inline-flex;\n align-items: center;\n font-weight: 400;\n min-height: 32px;\n padding: 6px 12px;\n cursor: pointer;\n text-decoration: none;\n min-width: 0;\n flex-shrink: 0;\n}\n.button.small {\n font-size: 12px;\n padding: 4px 6px;\n}\n.button.primary {\n color: var(--background);\n background-color: var(--primary);\n}\n.button:hover,\n.button:focus {\n color: var(--sky-600);\n background-color: var(--sky-100);\n}\n.button:hover.primary,\n.button:focus.primary {\n color: var(--background);\n background-color: var(--primary-hover);\n}\n\n.form {\n display: grid;\n gap: var(--space-3);\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n/** messages */\n.messages-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n scroll-behavior: smooth;\n line-height: 1.625;\n}\n.messages-list::after {\n content: \"\";\n display: block;\n height: 1px;\n visibility: hidden;\n}\n\n.user-message {\n color: var(--primary);\n max-width: 80%;\n margin-left: auto;\n}\n\n.details {\n font-size: var(--font-size-6);\n background-color: var(--muted);\n}\n.summary {\n font-size: var(--font-size-6);\n font-family: var(--monospace);\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-1) var(--space-2);\n cursor: pointer;\n background-color: var(--muted);\n user-select: none;\n}\n.summary:hover {\n background-color: var(--highlight);\n}\n.details[open] .summary {\n background-color: var(--highlight);\n}\n.details-body {\n padding: var(--space-2);\n max-height: 50vh;\n overflow: auto;\n}\n\n.timestamp {\n font-family: var(--monspace);\n font-size: var(--font-size-6);\n text-align: right;\n}\n\n.error-box {\n font-size: var(--font-size-5);\n font-family: var(--monospace);\n padding: var(--space-2);\n color: var(--error-text);\n background-color: var(--error-bg);\n}\n\n.cursor {\n display: inline-block;\n width: 0.6em;\n height: 1.2em;\n margin-right: 1em;\n background-color: var(--text);\n vertical-align: text-bottom;\n animation: blink 1s step-end infinite;\n}\n\n@keyframes blink {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0; }\n}\n\n/** InputBox */\n.textarea {\n display: block;\n width: 100%;\n height: 60px; /* account for borders */\n color: inherit;\n background-color: transparent;\n font-family: inherit;\n font-size: 14px;\n padding: 8px 12px;\n line-height: 1.5;\n border: 0;\n outline: none;\n resize: none;\n}\ntextarea::placeholder {\n color: inherit !important;\n opacity: 0.5;\n}\n.input-box { /* wrapper around textarea */\n width: 100%;\n background-color: var(--muted);\n border: 1px solid transparent;\n padding: var(--space-1);\n}\n.input-box:focus-within {\n background-color: var(--highlight);\n}\n.toolbar {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n}\n\n/** PreviewBox */\n.preview {\n display: flex;\n flex-direction: column;\n min-height: 0;\n height: 100%;\n flex-grow: 1;\n gap: var(--space-2);\n}\n@media screen and (min-width: 768px) {\n .preview {\n gap: var(--space-3);\n }\n}\n\n.preview-header {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n}\n\n.preview-iframe {\n width: 100%;\n height: 100%;\n flex-grow: 1;\n object-fit: contain;\n border: 0;\n zoom: 0.5;\n border-radius: calc(2 * var(--border-radius));\n background-color: white;\n}\n@media screen and (min-width: 768px) {\n .preview-iframe {\n aspect-ratio: 4 / 3;\n height: auto;\n flex-grow: 0;\n }\n}\n\n.preview-footer {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n\ninput[type=url].url-input {\n font-family: var(--monospace);\n font-size: var(--font-size-6);\n height: 32px;\n border: 0;\n border-radius: 0;\n background-color: var(--muted);\n}\ninput[type=text].url-input:focus {\n background-color: var(--highlight);\n outline: none;\n}\n\n.lockup {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.lockup-username {\n font-size: var(--font-size-5);\n}\n.lockup-name {\n font-size: var(--font-size-4);\n font-weight: 700;\n}\n\n/** ValCard */\n.card {\n border: 1px solid var(--border);\n border-radius: var(--border-radius);\n display: flex;\n gap: var(--space-2);\n align-items: center;\n overflow: hidden;\n}\n.card:hover {\n background-color: var(--highlight);\n}\n.card-image {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 80px;\n height: 80px;\n object-fit: cover;\n border--top-left-radius: var(--border-radius);\n border--bottom-left-radius: var(--border-radius);\n}\n.project-name {\n font-weight: 700;\n}\n.username,\n.project-description {\n font-size: var(--font-size-6);\n}\n\n.avatar {\n border-radius: 99999px;\n}\n\n.image-placeholder,\n.image-thumbnail {\n width: 40px;\n height: 40px;\n border-radius: 6px;\n object-fit: cover;\n}\n.image-placeholder {\n background-color: var(--muted);\n}\n\n.privacy {\n display: inline-block;\n font-size: var(--font-size-6);\n font-weight: 400;\n margin-left: 0.5em;\n}\n\n.image-row {\n display: flex;\n gap: var(--space-1);\n}\n.input-image {\n position: relative;\n border: 1px solid var(--muted);\n border-radius: 6px;\n}\n.remove-image-button {\n position: absolute;\n top: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n background-color: var(--red);\n cursor: pointer;\n opacity: 0;\n}\n.input-image:hover .remove-image-button {\n opacity: 1;\n}\n\n.image-drop-overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.image-drop-inner {\n padding: var(--space-2);\n background-color: var(--background);\n}\n\n.transition, .input-box, .icon-button, .button, .remove-image-button {\n transition-property: color, background-color, border-color, opacity;\n transition-duration: 200ms;\n transition-timing-function: ease-in-out;\n}\n\n.debug, .debug * {\n outline: 1px solid rgba(0, 128, 255, 0.2);\n}\n.bg-debug-1 { background-color: var(--sky-100) }\n.bg-debug-2 { background-color: var(--fuchsia-100) }\n.bg-debug-3 { background-color: var(--amber-100) }\n\n",[],[321,660],[321],{"_104":671,"_95":672,"_158":673,"_160":-5,"_161":141,"_162":163,"_164":118,"_106":674,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":675,"_99":692},"ffff90cc-213f-11f0-ac90-569c3dd06744","prompts","25dfbb44-55c1-4820-8259-78524deb4ac8",["D",1745521920983],[676,684],{"_104":677,"_95":678,"_158":679,"_160":673,"_161":141,"_162":163,"_164":118,"_106":680,"_101":32,"_166":665,"_168":681,"_169":22,"_170":-5,"_171":682,"_99":683},"ffff7ec0-213f-11f0-ac90-569c3dd06744","open_townie_prompt_additions.txt","d111f403-5cef-4280-b0d9-d8104194c940",["D",1745521920983],"Read files from the base directory / directly, not /repo/.\n\nWhen trying to understand the directory, first read README.md.\nWhenever you make a change to the code, \nbe sure to keep the README.md up to date unless the user asks you not to.\n\nYou can implicitly create directories, by creating files within the directories. For example, if you wanted to create `/foo/bar/baz.ts`, \nbut the foo and bar directories did not exist, you could still use the file editor tool to create /foo/bar/baz.ts, and trust that the \n`/foo/` and `/foo/bar/` directories will be created for you automatically.\n\nDefault to using str_replace in smaller chunks wherever possible. \nIf you're making extensive edits to a file, delete it and create it afresh.\nIf you delete a file with a trigger, such as the entrypoint HTTP file,\nbe sure after you re-create it to update it's trigger back to \"HTTP\".\n\nWhen files are provided in user messages under \"# Selected Project Files\", DO NOT use tools to re-read these files. \nTrust that these files are the most up-to-date versions and work with the content as provided in the message.\nOnly use the file editing tools to read files that haven't been shared with you yet or to make changes to files.\n\nThink carefully and only action the specific task you are given with the most concise and elegant\nsolution that changes as little code as possible.\n\nBe sure to use your thinking tool before using any other tools.",[],[672,678],{"_104":685,"_95":686,"_158":687,"_160":673,"_161":141,"_162":163,"_164":118,"_106":688,"_101":32,"_166":665,"_168":689,"_169":22,"_170":-5,"_171":690,"_99":691},"ffff8406-213f-11f0-ac90-569c3dd06744","system_prompt.txt","588fc469-1bb1-4fe3-b2d7-9df0597cfd27",["D",1745521920983],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n // Scheduled task code\n}\n```\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n // Process email\n}\n```\n\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n subject: \"Hi\", \n text: \"Hi\", \n html: \"

Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`",[],[672,686],[672],{"_104":694,"_95":695,"_158":696,"_160":-5,"_161":141,"_162":163,"_164":118,"_106":697,"_101":32,"_166":665,"_168":698,"_169":22,"_170":-5,"_171":699,"_99":700},"ffff9298-213f-11f0-ac90-569c3dd06744",".vtignore","deabbc31-da33-40f1-acf9-00caf4bb00e1",["D",1745521920983],".git\n.DS_Store\nnode_modules\nvendor\n*.swp\n\n",[],[695],{"_104":702,"_95":703,"_158":704,"_160":-5,"_161":141,"_162":705,"_164":118,"_106":706,"_101":120,"_166":665,"_168":707,"_169":22,"_170":-5,"_171":708,"_99":709},"8c126bf0-2142-11f0-a2c7-569c3dd06744","README.md","eb7e9089-e06f-4388-b286-06f134758ec2",15,["D",1745523014997],"# 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- React Router\n- Hono API server backend\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\n",[],[703],{"_104":711,"_95":712,"_158":713,"_160":-5,"_161":141,"_162":714,"_164":118,"_106":715,"_101":716,"_166":665,"_168":717,"_169":22,"_170":-5,"_171":718,"_99":719},"a71dc55a-269e-11f0-8d20-569c3dd06744","TODOs.md","cc612a5a-684e-4e4a-b506-3c72f5c4eca4",1431,["D",1746112329883],32,"- [ ] Give it a tool to make an HTTP request to its own endpoint to test things!\n- [x] Get React Router working on the client & move off localstorage for storing page state\n- [ ] When it hits the max number of steps, detect that and give the user a button (or instructions on how) to get it to continue (neverstew mentioned this)\n- [x] Make it look good\n- [ ] Persistent threads\n - [ ] Utils to help you revert to before or after messages or actions (related to commits)\n- [ ] give townie a search code tool for the code in the project, and like max’s codesearch tool too\n- [ ] improve the behavior when the signal is intermittent (neverstew mentioned this)\n- [ ] make it one click to branch off like old jp townie demos\n- [ ] opentownie as a pr bot\n- [ ] give it the ability to see its own client-side and server-side logs by building a middleware that shoves them into a SQL light database date and then give it a tool to access them\n- [ ] do a browser use or screenshot thing to give it access to its own visual output\n- [ ] Have it default to creating a new branch off main\n- [ ] A way to upload docs, by URL? A mini site to recursively crawl docs and markdownify?\n- [ ] Give it a replace_file command (instead of delete & create)?\n- [ ] Add other LLMs ie Gemini, Deepseek, o3-mini, etc. Figure out how to get a text-editing to work in an LLM agnostic way\n- [x] Add a \"view source\" / \"send me a PR\" link\n- [x] Show the HTTP preview in second column if there is one (and let the user pick which one to preview in the iframe)\n- [x] 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- [x] Ability to create new projects from the interface\n- [x] Figure out why OpenTownie can't create HTTP vals. Maybe give it a seperate tool for it?\n- [x] ensure line numbers are in the files added in the context window\n- [x] Make it clearer visually in the UI when tool calls fail\n- [x] Add to the opentownie prompt that it doens't need to create directories, it should just create files in directories by specifying their path, and we'll make sure the directory gets created. We can also potentially catch when the path of a file to create ends in / and make that a no-op.\n- [x] Remove the \"thinking...\" widget next to the send button\n- [x] Refactor /backend/index.ts into multiple files\n- [x] Format the JSON inside the tool-calls as pretty markdown\n - [x] Think as normal markdown\n - [x] File write as a code embed\n - [x] str_replace as a diff view\n- [x] make image drop area invisible and bigger\n- [x] Give it all the code (except maybe .txt files) as initial context (like cursor sonnet max)\n- [x] I seem to have lost the delete file tool and instructions, try to find them back in history or re-create?\n- [x] Show reasoning in a detail\n- [x] Consider asking it to write the minimum code possible\n- [x] Add caching (post in the vercel ai discussion about how it's not working)\n- [x] For login, have a button that reloads the page\n- [x] Start a timer for messages\n- [x] Add more indicators that it's \"still working\"\n- [x] Require users supply their own Anthropic token?\n- [x] Add cost indications on messages\n- [x] Add a bell noise when the message is done to let us know\n- [x] Launch!\n- [x] Let it select the branch name from a dropdown\n\n\n\n\n\n",[],[712],{"_104":721,"_95":272,"_158":722,"_160":-5,"_161":141,"_162":723,"_164":118,"_106":724,"_101":593,"_166":725,"_168":726,"_169":22,"_170":-5,"_171":727,"_99":728},"f94bbdd2-2513-11f0-ace9-569c3dd06744","265ffeb5-043c-44dc-a8cd-ed7c4415cf9c",939,["D",1745942816548],"http","import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { cache } from \"npm:hono/cache\";\nimport { app as backend } from \"./backend/index.ts\";\nimport favicon from \"./frontend/favicon.http.tsx\";\n\nconst app = new Hono();\n\n// Cache all responses for 5 minutes on townie.val.town\n\napp.get(\"*\", async (c, next) => {\n const path = c.req.path;\n if (path.startsWith(\"/api/\") || c.req.header(\"Accept\")?.includes(\"application/json\")) {\n return next();\n }\n return cache({\n cacheName: \"townie\",\n cacheControl: \"public, max-age=300\",\n wait: true,\n })(c, next);\n});\n\napp.route(\"/api\", backend);\napp.get(\"/frontend/*\", c => {\n return serveFile(c.req.path, import.meta.url);\n});\n\napp.get(\"/favicon.svg\", c => {\n return favicon();\n});\napp.get(\"/favicon-loading.svg\", c => {\n return favicon(true);\n});\n\nconst MODULE_URL = import.meta.resolve(\"./frontend/index.tsx\");\nconst STYLESHEET = import.meta.resolve(\"./frontend/styles.css\").replace(\"esm.town\", \"juicy.town\");\n\n// TODO need to support SPA routes\napp.get(\"/*\", async (c) => {\n return c.html(\n `\n \n \n OpenTownie\n \n \n \n \n \n

\n \n \n \n `,\n );\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\nexport default app.fetch;\n",[],[272],"files",[155,173,179,188,196,204,212,220,230,238,248,254,262,270,278,286,295,301,310,319,325,331,341,351,361,370,380,390,400,409,418,428,438,448,458,467,477,487,497,505,516,522,532,541,550,559,569,578,587,597,606,617,622,631,640,650,658,670,676,684,693,701,710,720],"counts",{"_733":163,"_734":528,"_735":120,"_736":32},"pulls","branches","forks","envVars","contents",[],{"_104":332,"_161":141,"_158":334,"_95":333,"_168":338,"_166":184,"_101":337,"_160":328,"_106":740,"_162":335,"_170":-5,"_99":741},["D",1746047116767],[321,327,333],"upstreamProject","upstreamBranch",{"_104":144,"_106":745,"_746":747,"_95":748,"_142":105,"_101":749,"_143":750,"_145":163,"_751":752,"_108":-5,"_152":22,"_110":111,"_151":94,"_16":122,"_150":96},["D",1745354141737],"updatedAt",["D",1746127194431],"react-router",61,"077ec2de-1f90-11f0-98cd-569c3dd06744","lockfileKey","1748676243395-esm.town_v_jxnblk_OpenTownie@61-react-router","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":98,"_99":100,"_102":759,"_665":764,"_767":768,"_817":818,"_830":-7,"_831":32,"_832":22},{"_104":105,"_95":96,"_106":760,"_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":761,"_135":762,"_138":763,"_152":22},["D",1745336390965],{"_93":94,"_133":134},{"_93":94,"_137":134},{"_101":140,"_95":98,"_104":141,"_142":105,"_143":144,"_145":146,"_147":111,"_148":105,"_149":122,"_150":96,"_151":94},{"_104":332,"_95":333,"_158":334,"_160":328,"_161":141,"_162":335,"_164":118,"_106":765,"_101":337,"_166":184,"_168":338,"_169":22,"_170":-5,"_99":766},["D",1746047116767],[321,327,333],"history",[769,771,777,783,789,794,799,804,808,813],{"_104":332,"_161":141,"_158":334,"_95":333,"_168":338,"_166":184,"_101":337,"_160":328,"_106":770,"_162":335,"_170":-5},["D",1746047116767],{"_104":772,"_161":141,"_158":334,"_95":333,"_168":773,"_166":184,"_101":774,"_160":328,"_106":775,"_162":776,"_170":-5},"b37f4104-2606-11f0-8fab-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useState, createContext } from \"https://esm.sh/react@18.2.0?dev\";\nimport {\n BrowserRouter,\n Routes,\n Route,\n Outlet,\n Link,\n Navigate,\n useLocation,\n} from \"https://esm.sh/react-router@7?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 { LayoutRoute } from \"./LayoutRoute.tsx\";\nimport { Home } from \"./Home.tsx\";\nimport { LoginRoute } from \"./LoginRoute.tsx\";\nimport { RequireAuthRoute } from \"./RequireAuthRoute.tsx\";\nimport { ProjectsRoute } from \"./ProjectsRoute.tsx\";\nimport { ChatRoute } from \"./ChatRoute.tsx\";\nimport { NewProjectRoute } from \"./NewProjectRoute.tsx\";\nimport { NotFoundRoute } from \"./NotFoundRoute.tsx\";\nimport { DebugStyles } from \"./DebugStyles.tsx\";\n\nconst AppContext = createContext({\n audio: false,\n setAudio: () => {},\n});\n\nexport function App() {\n const [audio, setAudio] = useLocalStorage(\"AUDIO\", false);\n return (\n \n \n \n }>\n } />\n } />\n }>\n } />\n } />\n } />\n } />\n \n } />\n \n \n \n \n );\n}\n",8,["D",1746047067149],1337,{"_104":778,"_161":141,"_158":334,"_95":333,"_168":779,"_166":184,"_101":780,"_160":328,"_106":781,"_162":782,"_170":-5},"b41852ba-2604-11f0-b11b-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\n// import { 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 {\n BrowserRouter,\n Routes,\n Route,\n Outlet,\n Link,\n Navigate,\n useLocation,\n} from \"https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport { LayoutRoute } from \"./LayoutRoute.tsx\";\nimport { Home } from \"./Home.tsx\";\nimport { LoginRoute } from \"./LoginRoute.tsx\";\nimport { RequireAuthRoute } from \"./RequireAuthRoute.tsx\";\nimport { ProjectsRoute } from \"./ProjectsRoute.tsx\";\nimport { ChatRoute } from \"./ChatRoute.tsx\";\nimport { NewProjectRoute } from \"./NewProjectRoute.tsx\";\nimport { NotFoundRoute } from \"./NotFoundRoute.tsx\";\nimport { DebugStyles } from \"./DebugStyles.tsx\";\n\nexport function App() {\n return (\n \n \n }>\n } />\n } />\n }>\n } />\n } />\n } />\n } />\n \n } />\n \n \n \n );\n}\n",7,["D",1746046209157],1324,{"_104":784,"_161":141,"_158":334,"_95":333,"_168":785,"_166":184,"_101":786,"_160":328,"_106":787,"_162":788,"_170":-5},"2f0d7fc0-246d-11f0-9bff-569c3dd06744","/** @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 {\n BrowserRouter,\n Routes,\n Route,\n Outlet,\n Link,\n Navigate,\n useLocation,\n} from \"https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport { LayoutRoute } from \"./LayoutRoute.tsx\";\nimport { Home } from \"./Home.tsx\";\nimport { LoginRoute } from \"./LoginRoute.tsx\";\nimport { RequireAuthRoute } from \"./RequireAuthRoute.tsx\";\nimport { ProjectsRoute } from \"./ProjectsRoute.tsx\";\nimport { ChatRoute } from \"./ChatRoute.tsx\";\nimport { NewProjectRoute } from \"./NewProjectRoute.tsx\";\nimport { NotFoundRoute } from \"./NotFoundRoute.tsx\";\nimport { DebugStyles } from \"./DebugStyles.tsx\";\n\nexport function App() {\n return (\n \n \n }>\n } />\n } />\n }>\n } />\n } />\n } />\n } />\n \n } />\n \n \n \n );\n}\n",6,["D",1745871180782],767,{"_104":790,"_161":141,"_158":334,"_95":333,"_168":791,"_166":184,"_101":565,"_160":328,"_106":792,"_162":793,"_170":-5},"594949cc-244a-11f0-aa96-569c3dd06744","/** @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 {\n BrowserRouter,\n Routes,\n Route,\n Outlet,\n Link,\n Navigate,\n useLocation,\n} from \"https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport { LayoutRoute } from \"./LayoutRoute.tsx\";\nimport { Home } from \"./Home.tsx\";\nimport { LoginRoute } from \"./LoginRoute.tsx\";\nimport { RequireAuthRoute } from \"./RequireAuthRoute.tsx\";\nimport { ProjectsRoute } from \"./ProjectsRoute.tsx\";\nimport { ChatRoute } from \"./ChatRoute.tsx\";\nimport { NewProjectRoute } from \"./NewProjectRoute.tsx\";\nimport { NotFoundRoute } from \"./NotFoundRoute.tsx\";\n\nexport function App() {\n return (\n \n \n }>\n } />\n } />\n }>\n } />\n } />\n } />\n \n } />\n \n \n \n );\n}\n",["D",1745856219254],554,{"_104":795,"_161":141,"_158":334,"_95":333,"_168":796,"_166":184,"_101":434,"_160":328,"_106":797,"_162":798,"_170":-5},"9a15ffb6-21e5-11f0-b561-569c3dd06744","/** @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 {\n BrowserRouter,\n Routes,\n Route,\n Outlet,\n Link,\n Navigate,\n useLocation,\n} from \"https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport { LayoutRoute } from \"./LayoutRoute.tsx\";\nimport { Home } from \"./Home.tsx\";\nimport { LoginRoute } from \"./LoginRoute.tsx\";\nimport { RequireAuthRoute } from \"./RequireAuthRoute.tsx\";\nimport { ProjectsRoute } from \"./ProjectsRoute.tsx\";\nimport { ChatRoute } from \"./ChatRoute.tsx\";\nimport { NewProjectRoute } from \"./NewProjectRoute.tsx\";\nimport { NotFoundRoute } from \"./NotFoundRoute.tsx\";\n\n// FOR DEBUG ONLY\nimport { Chat } from \"./Chat.tsx\";\n\nexport function App() {\n return (\n \n \n }>\n } />\n } />\n }>\n } />\n } />\n } />\n\n } />\n \n } />\n \n \n \n );\n}\n",["D",1745593046475],188,{"_104":800,"_161":141,"_158":334,"_95":333,"_168":801,"_166":184,"_101":226,"_160":328,"_106":802,"_162":803,"_170":-5},"88a21da0-21e5-11f0-9de9-569c3dd06744","/** @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 {\n BrowserRouter,\n Routes,\n Route,\n Outlet,\n Link,\n Navigate,\n useLocation,\n} from \"https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport { LayoutRoute } from \"./LayoutRoute.tsx\";\nimport { Home } from \"./Home.tsx\";\nimport { LoginRoute } from \"./LoginRoute.tsx\";\nimport { RequireAuthRoute } from \"./RequireAuthRoute.tsx\";\nimport { ProjectsRoute } from \"./ProjectsRoute.tsx\";\nimport { ChatRoute } from \"./ChatRoute.tsx\";\nimport { NewProjectRoute } from \"./NewProjectRoute.tsx\";\nimport { NotFoundRoute } from \"./NotFoundRoute.tsx\";\n\nexport function App() {\n return (\n \n \n }>\n } />\n } />\n }>\n } />\n } />\n } />\n\n } />\n \n } />\n \n \n \n );\n}\n",["D",1745593017195],187,{"_104":805,"_161":141,"_158":334,"_95":333,"_168":791,"_166":184,"_101":120,"_160":328,"_106":806,"_162":807,"_170":-5},"750a2700-2146-11f0-9cf5-569c3dd06744",["D",1745524694341],45,{"_104":809,"_161":141,"_158":334,"_95":333,"_168":810,"_166":184,"_101":163,"_160":328,"_106":811,"_162":812,"_170":-5},"71b0cbae-2146-11f0-ad8d-569c3dd06744","/** @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 {\n BrowserRouter,\n Routes,\n Route,\n Outlet,\n Link,\n Navigate,\n useLocation,\n} from \"https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport { LayoutRoute } from \"./LayoutRoute.tsx\";\nimport { Home } from \"./Home.tsx\";\nimport { LoginRoute } from \"./LoginRoute.tsx\";\nimport { RequireAuthRoute } from \"./RequireAuthRoute.tsx\";\nimport { ProjectsRoute } from \"./ProjectsRoute.tsx\";\nimport { ChatRoute } from \"./ChatRoute.tsx\";\nimport { NewProjectRoute } from \"./NewProjectRoute.tsx\";\nimport { NotFoundRoute } from \"./NotFoundRoute.tsx\";\n\nexport function App() {\n return (\n \n \n }>\n } />\n } />\n }>\n } />\n } />\n } />\n \n } />\n \n \n \n );\n}\n",["D",1745524688690],44,{"_104":814,"_161":141,"_158":334,"_95":333,"_168":815,"_166":184,"_101":32,"_160":328,"_106":816,"_162":163,"_170":-5},"fffeb4a4-213f-11f0-ac90-569c3dd06744","/** @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 {\n BrowserRouter,\n Routes,\n Route,\n Outlet,\n Link,\n Navigate,\n useLocation,\n} from \"https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport { LayoutRoute } from \"./LayoutRoute.tsx\";\nimport { Home } from \"./Home.tsx\";\nimport { LoginRoute } from \"./LoginRoute.tsx\";\nimport { RequireAuthRoute } from \"./RequireAuthRoute.tsx\";\nimport { ProjectsRoute } from \"./ProjectsRoute.tsx\";\nimport { ChatRoute } from \"./ChatRoute.tsx\";\nimport { NotFoundRoute } from \"./NotFoundRoute.tsx\";\n\nexport function App() {\n return (\n \n \n }>\n } />\n } />\n }>\n } />\n } />\n \n } />\n \n \n \n );\n}\n",["D",1745521920983],"versions",[819,821,822,823,824,825,826,827,828,829],{"_665":769,"_820":771},"previous",{"_665":771,"_820":777},{"_665":777,"_820":783},{"_665":783,"_820":789},{"_665":789,"_820":794},{"_665":794,"_820":799},{"_665":799,"_820":804},{"_665":804,"_820":808},{"_665":808,"_820":813},{"_665":813,"_820":-5},"versionNumber","page","hasNext","actionData","errors"]

jxnblk

OpenTownie

History for App.tsx