Anthropic API Key Missing

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

\n );\n}",[],[269,275,281],{"_105":288,"_95":289,"_158":290,"_160":276,"_161":141,"_162":146,"_163":119,"_107":291,"_101":32,"_165":183,"_167":292,"_168":22,"_169":-5,"_170":293,"_99":294},"2f0260a4-11e4-11f0-af7b-569c3dd06744","App.tsx","d0474ad0-cb37-4226-88ae-61a3414793b6",["D",1743833218717],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useLocalStorage } from \"https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport React, { useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { Chat } from \"./Chat.tsx\";\nimport { Login } from \"./Login.tsx\";\nimport { Projects } from \"./Projects.tsx\";\n\nfunction safeParse(s: string) {\n try {\n return JSON.parse(s);\n } catch (e) {\n return undefined;\n }\n}\n\nexport function App() {\n const [bearerToken, setBearerToken] = useLocalStorage(\"bearer\", \"\");\n const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage(\"anthropic_api_key\", \"\");\n const [projectJSON, setProjectJSON] = useLocalStorage(\"project\", \"\");\n const [project, setProject_] = useState(safeParse(projectJSON));\n\n function setProject(p: any) {\n setProject_(p);\n setProjectJSON(JSON.stringify(p));\n }\n\n function handleLogout() {\n setBearerToken(\"\");\n // Keep the anthropic API key in case the user wants to reuse it\n }\n\n return (\n

OpenTownie

\n \n Logout\n \n

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

\n );\n}",[],[269,275,289],{"_105":296,"_95":297,"_158":298,"_160":276,"_161":141,"_162":146,"_163":119,"_107":299,"_101":32,"_165":183,"_167":300,"_168":22,"_169":-5,"_170":301,"_99":302},"2f026680-11e4-11f0-af7b-569c3dd06744","BranchControl.tsx","26906ee2-c56b-4d13-b898-d4be3982e072",["D",1743833218717],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { CreateBranch } from \"./CreateBranch.tsx\";\n\ninterface Branch {\n id: string;\n name: string;\n}\n\ninterface BranchControlProps {\n projectId: string;\n projectName: string;\n username: string;\n bearerToken: string;\n branchId: string | undefined;\n setBranchId: (branchId: string) => void;\n}\n\nexport function BranchControl({\n projectId,\n projectName,\n username,\n bearerToken,\n branchId,\n setBranchId,\n}: BranchControlProps) {\n const [branches, setBranches] = useState>([]);\n const [isLoadingBranches, setIsLoadingBranches] = useState(false);\n const [selectedBranchName, setSelectedBranchName] = useState(\"\");\n const [showCreateBranch, setShowCreateBranch] = useState(false);\n\n // Fetch branches when project changes\n useEffect(() => {\n if (!projectId) return;\n\n const fetchBranches = async () => {\n setIsLoadingBranches(true);\n try {\n const response = await fetch(`/api/project-branches?projectId=${projectId}`, {\n headers: {\n \"Authorization\": `Bearer ${bearerToken}`,\n },\n });\n\n if (!response.ok) {\n throw new Error(`Failed to fetch branches: ${response.statusText}`);\n }\n\n const data = await response.json();\n const fetchedBranches = data.branches || [];\n setBranches(fetchedBranches);\n\n // Check if the stored branchId is valid for this project\n const storedBranchIsValid = fetchedBranches.some((branch: Branch) => branch.id === branchId);\n\n // Only set a new branchId if there isn't a valid one already stored\n if (!storedBranchIsValid && fetchedBranches.length > 0) {\n // If branches are loaded and there's a \"main\" branch, select it by default\n const mainBranch = fetchedBranches.find((branch: Branch) => branch.name === \"main\");\n if (mainBranch) {\n setBranchId(mainBranch.id);\n setSelectedBranchName(mainBranch.name);\n } else {\n // Otherwise select the first branch\n setBranchId(fetchedBranches[0].id);\n setSelectedBranchName(fetchedBranches[0].name);\n }\n } else if (storedBranchIsValid) {\n // Set the selected branch name based on the stored branchId\n const selectedBranch = fetchedBranches.find((branch: Branch) => branch.id === branchId);\n if (selectedBranch) {\n setSelectedBranchName(selectedBranch.name);\n }\n }\n } catch (error) {\n console.error(\"Error fetching branches:\", error);\n } finally {\n setIsLoadingBranches(false);\n }\n };\n\n fetchBranches();\n }, [projectId, bearerToken, branchId, setBranchId]);\n\n // Handle branch selection change\n const handleBranchChange = (e: React.ChangeEvent) => {\n const newBranchId = e.target.value;\n setBranchId(newBranchId);\n\n // Update the selected branch name\n const selectedBranch = branches.find(branch => branch.id === newBranchId);\n if (selectedBranch) {\n setSelectedBranchName(selectedBranch.name);\n }\n };\n\n // Handle branch creation success\n const handleBranchCreated = (newBranchId: string) => {\n // Set the new branch as the selected branch\n setBranchId(newBranchId);\n\n // Close the create branch form\n setShowCreateBranch(false);\n\n // Refresh the branches list\n if (projectId) {\n const fetchBranches = async () => {\n try {\n const response = await fetch(`/api/project-branches?projectId=${projectId}`, {\n headers: {\n \"Authorization\": `Bearer ${bearerToken}`,\n },\n });\n\n if (!response.ok) {\n throw new Error(`Failed to fetch branches: ${response.statusText}`);\n }\n\n const data = await response.json();\n const fetchedBranches = data.branches || [];\n setBranches(fetchedBranches);\n\n // Update the selected branch name\n const selectedBranch = fetchedBranches.find((branch: Branch) => branch.id === newBranchId);\n if (selectedBranch) {\n setSelectedBranchName(selectedBranch.name);\n }\n } catch (error) {\n console.error(\"Error fetching branches:\", error);\n }\n };\n\n fetchBranches();\n }\n };\n\n // Construct the Val Town URL\n const getValTownUrl = () => {\n if (!username || !projectName || !selectedBranchName) return \"#\";\n return `https://val.town/x/${username}/${projectName}/branch/${selectedBranchName}/code`;\n };\n\n return (\n

\n {isLoadingBranches\n ? (\n

\n Loading branches...\n

\n )\n : (\n <>\n

\n \n {branches.length === 0 ? : (\n branches.map(branch => (\n \n ))\n )}\n \n setShowCreateBranch(true)}\n className=\"ml-1 p-1 rounded-lg text-xs bg-gray-100 hover:bg-gray-200 flex items-center justify-center w-6 h-6\"\n title=\"Create new branch\"\n >\n \n \n \n \n \n

\n \n \n \n \n \n \n Open\n \n \n )}\n

\n\n {/* Create Branch Form Popup */}\n {showCreateBranch && (\n

\n setShowCreateBranch(false)}\n />\n

\n )}\n

\n );\n}",[],[269,275,297],{"_105":304,"_95":305,"_158":306,"_160":276,"_161":141,"_162":146,"_163":119,"_107":307,"_101":32,"_165":183,"_167":308,"_168":22,"_169":-5,"_170":309,"_99":310},"2f0286ba-11e4-11f0-af7b-569c3dd06744","Chat.tsx","a66439e4-96e8-4771-bb9e-2c47a71613e8",["D",1743833218717],"/** @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, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\nimport { useChatLogic } from \"../hooks/useChatLogic.ts\";\nimport { useProjectFiles } from \"../hooks/useProjectFiles.ts\";\nimport { ChatHeader } from \"./ChatHeader.tsx\";\nimport { ProjectFiles } from \"./ProjectFiles.tsx\";\nimport { ChatMessages } from \"./ChatMessages.tsx\";\nimport { ChatInput } from \"./ChatInput.tsx\";\nimport { ApiKeyWarning } from \"./ApiKeyWarning.tsx\";\nimport { processFiles } from \"./ImageUpload.tsx\";\n\nexport function Chat({\n project,\n bearerToken,\n anthropicApiKey,\n setProject,\n}: {\n project: any;\n bearerToken: string;\n anthropicApiKey: string;\n setProject: (project: any) => void;\n}) {\n const [branchId, setBranchId] = useLocalStorage(\"branchId\", undefined);\n const [soundEnabled, setSoundEnabled] = useLocalStorage(\"soundEnabled\", true);\n const [selectedFiles, setSelectedFiles] = useState([]);\n const [images, setImages] = useState<(string | null)[]>([]);\n const [isDragging, setIsDragging] = useState(false);\n\n // Use custom hook to fetch project files\n const {\n projectFiles,\n isLoadingFiles,\n error: filesError,\n } = useProjectFiles({\n projectId: project?.id,\n branchId,\n bearerToken,\n });\n\n const handleSelectionChange = (files: string[]) => {\n setSelectedFiles(files);\n };\n\n // Use the custom hook for chat logic\n const {\n messages,\n error,\n input,\n handleInputChange,\n handleSubmit,\n running,\n usages,\n messageEndTimes,\n } = useChatLogic({\n project,\n branchId,\n anthropicApiKey,\n bearerToken,\n selectedFiles,\n images,\n soundEnabled,\n });\n\n // Handle drag events for the entire page\n const handleDragEnter = (e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setIsDragging(true);\n };\n\n const handleDragLeave = (e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n \n // Only set isDragging to false if we're leaving the document\n // This prevents flickering when dragging over child elements\n if (e.currentTarget.contains(e.relatedTarget as Node)) {\n return;\n }\n \n setIsDragging(false);\n };\n\n const handleDragOver = (e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const handleDrop = (e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setIsDragging(false);\n \n if (e.dataTransfer.files && !running) {\n processFiles(Array.from(e.dataTransfer.files), images, setImages);\n }\n };\n\n // Add and remove event listeners for the entire document\n useEffect(() => {\n const handleDocumentDragEnter = (e: DragEvent) => {\n e.preventDefault();\n if (e.dataTransfer?.types.includes('Files')) {\n setIsDragging(true);\n }\n };\n\n const handleDocumentDragLeave = (e: DragEvent) => {\n e.preventDefault();\n // Only set isDragging to false when leaving the document\n if (e.target === document.documentElement) {\n setIsDragging(false);\n }\n };\n\n const handleDocumentDragOver = (e: DragEvent) => {\n e.preventDefault();\n };\n\n const handleDocumentDrop = (e: DragEvent) => {\n e.preventDefault();\n setIsDragging(false);\n \n if (e.dataTransfer?.files && !running) {\n processFiles(Array.from(e.dataTransfer.files), images, setImages);\n }\n };\n\n // Add event listeners to the document\n document.addEventListener('dragenter', handleDocumentDragEnter);\n document.addEventListener('dragleave', handleDocumentDragLeave);\n document.addEventListener('dragover', handleDocumentDragOver);\n document.addEventListener('drop', handleDocumentDrop);\n\n // Clean up\n return () => {\n document.removeEventListener('dragenter', handleDocumentDragEnter);\n document.removeEventListener('dragleave', handleDocumentDragLeave);\n document.removeEventListener('dragover', handleDocumentDragOver);\n document.removeEventListener('drop', handleDocumentDrop);\n };\n }, [images, running, setImages]);\n\n return (\n

\n \n\n \n\n

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

\n );\n}",[],[269,275,305],{"_105":312,"_95":313,"_158":314,"_160":276,"_161":141,"_162":146,"_163":119,"_107":315,"_101":32,"_165":183,"_167":316,"_168":22,"_169":-5,"_170":317,"_99":318},"2f028f70-11e4-11f0-af7b-569c3dd06744","ChatHeader.tsx","c9728726-1511-45d8-8e1b-23dffd8edb2c",["D",1743833218717],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\nimport { BranchControl } from \"./BranchControl.tsx\";\n\ninterface ChatHeaderProps {\n project: {\n id: string;\n name: string;\n username: string;\n };\n bearerToken: string;\n branchId: string | undefined;\n setBranchId: (branchId: string | undefined) => void;\n soundEnabled: boolean;\n setSoundEnabled: (enabled: boolean) => void;\n setProject: (project: any) => void;\n}\n\nexport function ChatHeader({\n project,\n bearerToken,\n branchId,\n setBranchId,\n soundEnabled,\n setSoundEnabled,\n setProject,\n}: ChatHeaderProps) {\n return (\n

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

{project.name}

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

\n );\n}",[],[269,275,313],{"_105":320,"_95":321,"_158":322,"_160":276,"_161":141,"_162":146,"_163":119,"_107":323,"_101":32,"_165":183,"_167":324,"_168":22,"_169":-5,"_170":325,"_99":326},"2f0291a0-11e4-11f0-af7b-569c3dd06744","ChatInput.tsx","1d57607b-1398-4436-9b03-b1fd42f620a2",["D",1743833218717],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { ImageUpload, processFiles } from \"./ImageUpload.tsx\";\n\ninterface ChatInputProps {\n input: string;\n handleInputChange: (e: React.ChangeEvent) => void;\n handleSubmit: (e: React.FormEvent) => void;\n running: boolean;\n images: (string | null)[];\n setImages: React.Dispatch>;\n isDragging: boolean;\n}\n\nexport function ChatInput({\n input,\n handleInputChange,\n handleSubmit,\n running,\n images,\n setImages,\n isDragging,\n}: ChatInputProps) {\n // State to detect if the user is on a mobile device\n const [isMobile, setIsMobile] = useState(false);\n const fileInputRef = useRef(null);\n\n // Check if user is on mobile when component mounts\n useEffect(() => {\n const checkMobile = () => {\n const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera;\n const mobileRegex = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i;\n setIsMobile(mobileRegex.test(userAgent.toLowerCase()));\n };\n\n checkMobile();\n\n // Also check on resize, as user might switch device orientation\n window.addEventListener(\"resize\", checkMobile);\n return () => window.removeEventListener(\"resize\", checkMobile);\n }, []);\n\n const handleFormSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n const validImages = images.filter((img): img is string => typeof img === \"string\");\n console.log(\"Submitting with images:\", validImages);\n if (input.trim() || validImages.length > 0) {\n handleSubmit(e);\n setImages([]);\n }\n };\n\n const handleProcessFiles = (files: File[]) => {\n processFiles(files, images, setImages);\n };\n\n return (\n \n {images.length > 0 && (\n \n )}\n\n

\n {\n handleInputChange(e);\n }}\n onKeyDown={(e) => {\n // Only perform Enter key submission on desktop, not on mobile\n if (e.key === \"Enter\" && !e.shiftKey && !isMobile) {\n e.preventDefault();\n if (input.trim() || images.filter(Boolean).length > 0) {\n handleFormSubmit(e as any);\n }\n }\n }}\n rows={3}\n style={{\n WebkitAppearance: \"none\", /* Ensures resize handle works on Safari mobile */\n resize: \"vertical\", /* Explicitly set resize to vertical */\n }}\n />\n\n {/* Hidden file input for the attach button */}\n {\n if (e.target.files) {\n handleProcessFiles(Array.from(e.target.files));\n }\n }}\n accept=\"image/*\"\n multiple\n className=\"hidden\"\n />\n

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

\n \n {/* Attach images button below textarea */}\n {!running && (\n

\n {\n if (fileInputRef.current) {\n fileInputRef.current.click();\n }\n }}\n title=\"Attach images\"\n >\n 📎 Attach images\n \n

\n )}\n\n {/* Drag overlay indicator */}\n {isDragging && (\n

📁

Drop images here

\n )}\n \n );\n}",[],[269,275,321],{"_105":328,"_95":329,"_158":330,"_160":276,"_161":141,"_162":146,"_163":119,"_107":331,"_101":32,"_165":183,"_167":332,"_168":22,"_169":-5,"_170":333,"_99":334},"2f029f88-11e4-11f0-af7b-569c3dd06744","ChatMessages.tsx","1c7b2503-87f8-4a95-b051-64999bd16ee4",["D",1743833218717],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\nimport { MessageItem } from \"./MessageItem.tsx\";\nimport { ErrorDisplay } from \"./ErrorDisplay.tsx\";\n\ninterface ChatMessagesProps {\n messages: any[];\n usages: Record;\n messageEndTimes: Record;\n running: boolean;\n error: Error | null;\n}\n\nexport function ChatMessages({\n messages,\n usages,\n messageEndTimes,\n running,\n error,\n}: ChatMessagesProps) {\n return (\n

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

\n );\n}",[],[269,275,329],{"_105":336,"_95":337,"_158":338,"_160":276,"_161":141,"_162":146,"_163":119,"_107":339,"_101":32,"_165":183,"_167":340,"_168":22,"_169":-5,"_170":341,"_99":342},"2f02a1ae-11e4-11f0-af7b-569c3dd06744","CreateBranch.tsx","bb4b4bf2-a726-4de5-8b31-742ad4b6162d",["D",1743833218717],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?dev\";\n\ninterface CreateBranchProps {\n projectId: string;\n bearerToken: string;\n onBranchCreated: (branchId: string) => void;\n onCancel: () => void;\n}\n\nexport function CreateBranch({\n projectId,\n bearerToken,\n onBranchCreated,\n onCancel,\n}: CreateBranchProps) {\n const [branchName, setBranchName] = useState(\"\");\n const [isCreating, setIsCreating] = useState(false);\n const [error, setError] = useState(null);\n\n // Validate branch name (only letters, numbers, and dashes)\n const isValidBranchName = (name: string) => {\n const branchNameRegex = /^[a-zA-Z0-9-]+$/;\n return branchNameRegex.test(name);\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n // Validate branch name\n if (!branchName.trim()) {\n setError(\"Branch name cannot be empty\");\n return;\n }\n \n if (!isValidBranchName(branchName)) {\n setError(\"Branch name can only contain letters, numbers, and dashes\");\n return;\n }\n \n setIsCreating(true);\n setError(null);\n \n try {\n const response = await fetch(\"/api/create-branch\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${bearerToken}`,\n },\n body: JSON.stringify({\n projectId,\n branchName,\n }),\n });\n \n const data = await response.json();\n \n if (!response.ok) {\n throw new Error(data.error || \"Failed to create branch\");\n }\n \n // Call the callback with the new branch ID\n onBranchCreated(data.branch.id);\n } catch (err) {\n setError(err instanceof Error ? err.message : \"An error occurred\");\n } finally {\n setIsCreating(false);\n }\n };\n \n return (\n

Create New Branch

\n \n \n

\n );\n}",[],[269,275,337],{"_105":344,"_95":345,"_158":346,"_160":276,"_161":141,"_162":146,"_163":119,"_107":347,"_101":32,"_165":183,"_167":348,"_168":22,"_169":-5,"_170":349,"_99":350},"2f02a64a-11e4-11f0-af7b-569c3dd06744","DirectoryTree.tsx","e628ff75-0f39-41e9-96df-4301ac03e18d",["D",1743833218717],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\n\n// Type definitions\ninterface FileNode {\n path: string;\n type: \"file\" | \"directory\";\n name: string;\n children?: FileNode[];\n checked?: boolean;\n}\n\ninterface DirectoryTreeProps {\n files: Array<{ path: string; type: string }>;\n onSelectionChange?: (selectedFiles: string[]) => void;\n}\n\n// Helper function to build a tree structure from flat file list\nconst buildFileTree = (files: Array<{ path: string; type: string }>): FileNode[] => {\n const root: FileNode[] = [];\n const map: Record = {};\n\n // Create all parent directories first\n const ensureParentDirectories = (filePath: string) => {\n const parts = filePath.split(\"/\").filter(Boolean);\n let currentPath = \"\";\n\n // Create each directory in the path if it doesn't exist\n for (let i = 0; i < parts.length - 1; i++) {\n const part = parts[i];\n const prevPath = currentPath;\n currentPath = currentPath ? `${currentPath}/${part}` : `/${part}`;\n\n // Create directory if it doesn't exist in our map\n if (!map[currentPath]) {\n const dirNode: FileNode = {\n path: currentPath,\n type: \"directory\",\n name: part,\n children: [],\n checked: false,\n };\n map[currentPath] = dirNode;\n\n // Add to parent or root\n if (prevPath) {\n if (map[prevPath]) {\n // Check if this directory is already a child of the parent before adding\n if (!map[prevPath].children!.some(child => child.path === currentPath)) {\n map[prevPath].children!.push(dirNode);\n }\n }\n } else {\n // Check if this directory is already in the root before adding\n if (!root.some(node => node.path === currentPath)) {\n root.push(dirNode);\n }\n }\n }\n }\n\n return parts.length > 0 ? \"/\" + parts.slice(0, parts.length - 1).join(\"/\") : \"\";\n };\n\n // Process all files and directories\n files.forEach(file => {\n const path = file.path.startsWith(\"/\") ? file.path : `/${file.path}`;\n const parts = path.split(\"/\").filter(Boolean);\n const name = parts[parts.length - 1] || path;\n const type = file.type === \"directory\" ? \"directory\" : \"file\";\n\n // Skip if this node already exists (prevents duplicates)\n if (map[path]) return;\n\n // Create the node\n const node: FileNode = {\n path,\n type,\n name,\n children: type === \"directory\" ? [] : undefined,\n checked: false,\n };\n\n map[path] = node;\n\n // If it's the root level, add to root array\n if (parts.length === 1) {\n if (!root.some(n => n.path === path)) {\n root.push(node);\n }\n return;\n }\n\n // Ensure all parent directories exist\n const parentPath = ensureParentDirectories(path);\n\n // Add this node to its parent\n if (parentPath && map[parentPath]) {\n if (!map[parentPath].children!.some(child => child.path === path)) {\n map[parentPath].children!.push(node);\n }\n }\n });\n\n // Sort each level - directories first, then alphabetically\n const sortNodes = (nodes: FileNode[]) => {\n nodes.sort((a, b) => {\n if (a.type === \"directory\" && b.type === \"file\") return -1;\n if (a.type === \"file\" && b.type === \"directory\") return 1;\n return a.name.localeCompare(b.name);\n });\n\n nodes.forEach(node => {\n if (node.children && node.children.length > 0) {\n sortNodes(node.children);\n }\n });\n };\n\n sortNodes(root);\n return root;\n};\n\n// Component to render a single tree node\nconst TreeNode = ({\n node,\n level = 0,\n onCheck,\n checkedState,\n}: {\n node: FileNode;\n level?: number;\n onCheck: (path: string, checked: boolean) => void;\n checkedState: Record;\n}) => {\n const [expanded, setExpanded] = useState(level < 2);\n const hasChildren = node.children && node.children.length > 0;\n const isChecked = checkedState[node.path] || false;\n\n const handleToggle = () => {\n if (hasChildren) {\n setExpanded(!expanded);\n }\n };\n\n const handleCheckChange = (e: React.ChangeEvent) => {\n onCheck(node.path, e.target.checked);\n };\n\n const handleNodeClick = (e: React.MouseEvent) => {\n // Don't toggle checkbox if clicking on the expand/collapse arrow\n if ((e.target as HTMLElement).classList.contains(\"toggle-expand\")) {\n return;\n }\n\n // Toggle the checkbox\n onCheck(node.path, !isChecked);\n };\n\n return (\n

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

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

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

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

\n {getSelectionSummary()}\n

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

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

\n )\n :

No files found

}\n

\n );\n}",[],[269,275,345],{"_105":352,"_95":353,"_158":354,"_160":276,"_161":141,"_162":146,"_163":119,"_107":355,"_101":32,"_165":183,"_167":356,"_168":22,"_169":-5,"_170":357,"_99":358},"2f02b98c-11e4-11f0-af7b-569c3dd06744","ErrorDisplay.tsx","47383f04-4dc9-4171-974f-bf94029f62db",["D",1743833218717],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\n\ninterface ErrorDisplayProps {\n error: Error | null;\n}\n\nexport function ErrorDisplay({ error }: ErrorDisplayProps) {\n if (!error) return null;\n \n return (\n

{error.stack}

\n );\n}",[],[269,275,353],{"_105":360,"_95":361,"_158":362,"_160":276,"_161":141,"_162":146,"_163":119,"_107":363,"_101":32,"_165":183,"_167":364,"_168":22,"_169":-5,"_170":365,"_99":366},"2f02bb94-11e4-11f0-af7b-569c3dd06744","ImageUpload.tsx","24fc2223-2889-41e2-8b51-02e8a4531be5",["D",1743833218717],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useRef, useState } from \"https://esm.sh/react@18.2.0?dev\";\n\n// Maximum number of images that can be uploaded\nexport const PROMPT_IMAGE_LIMIT = 5;\n\ninterface ImageUploadProps {\n images: (string | null)[];\n setImages: (images: (string | null)[]) => void;\n processFiles: (files: File[]) => void;\n}\n\nexport function ImageUpload({ images, setImages, processFiles }: ImageUploadProps) {\n const fileInputRef = useRef(null);\n\n // Handle file selection\n const handleFileChange = (e: React.ChangeEvent) => {\n if (e.target.files) {\n processFiles(Array.from(e.target.files));\n }\n };\n\n // Handle removing an image\n const removeImage = (index: number) => {\n const newImages = [...images];\n newImages.splice(index, 1);\n setImages(newImages);\n };\n\n // Check if we've reached the image limit\n const isAtLimit = images.filter(Boolean).length >= PROMPT_IMAGE_LIMIT;\n\n return (\n

\n {/* Image previews */}\n {images.length > 0 && (\n

\n {images.map((image, index) => (\n

\n {image ? (\n

\n removeImage(index)}\n title=\"Remove image\"\n >\n ×\n \n

\n ) : (\n

\n )}\n

\n ))}\n

\n )}\n\n {/* Hidden file input */}\n \n \n {/* Expose the file input ref for external access */}\n {React.cloneElement(<>, { fileInputRef })}\n

\n );\n}\n\n// Process files utility function - moved from the component to be reusable\nexport const processFiles = async (files: File[], images: (string | null)[], setImages: (images: (string | null)[]) => void) => {\n // Filter for image files only\n const imageFiles = files.filter(file => file.type.startsWith('image/'));\n \n // Limit the number of images\n const filesToProcess = imageFiles.slice(0, PROMPT_IMAGE_LIMIT - images.filter(Boolean).length);\n \n if (filesToProcess.length === 0) return;\n\n // Add null placeholders for loading state\n const newImages = [...images, ...Array(filesToProcess.length).fill(null)];\n setImages(newImages);\n\n // Process each file\n const processedImages = await Promise.all(\n filesToProcess.map(async (file) => {\n return await readFileAsDataURL(file);\n })\n );\n\n // Replace null placeholders with actual images\n const updatedImages = [...images];\n processedImages.forEach((dataUrl, index) => {\n updatedImages[images.length + index] = dataUrl;\n });\n \n setImages(updatedImages.slice(0, PROMPT_IMAGE_LIMIT));\n};\n\n// Convert file to data URL\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\n// Component to display images in messages\nexport function ImagePreview({ images }: { images: string[] }) {\n const [expandedImage, setExpandedImage] = useState(null);\n\n if (!images || images.length === 0) return null;\n\n return (\n

\n {images.map((image, index) => (\n

\n setExpandedImage(image)}\n />\n

\n ))}\n

\n\n {/* Modal for expanded image */}\n {expandedImage && (\n

setExpandedImage(null)}\n >\n

\n \n

\n )}\n

\n );\n}",[],[269,275,361],{"_105":368,"_95":369,"_158":370,"_160":276,"_161":141,"_162":146,"_163":119,"_107":371,"_101":32,"_165":183,"_167":372,"_168":22,"_169":-5,"_170":373,"_99":374},"2f02c1f2-11e4-11f0-af7b-569c3dd06744","LoadingSpinner.tsx","c5dcbf2f-aa58-499c-84be-199516bd8ab3",["D",1743833218717],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\n\nexport const LoadingSpinner = () => (\n

\n);",[],[269,275,369],{"_105":376,"_95":377,"_158":378,"_160":276,"_161":141,"_162":146,"_163":119,"_107":379,"_101":32,"_165":183,"_167":380,"_168":22,"_169":-5,"_170":381,"_99":382},"2f02de9e-11e4-11f0-af7b-569c3dd06744","Login.tsx","9bbfc2f8-90b6-4b75-b0a6-9928b1516846",["D",1743833218717],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useLocalStorage } from \"https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0\";\n\nexport function Login() {\n const [bearerToken, setBearerToken] = useLocalStorage(\"bearer\", \"\");\n const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage(\"anthropic_api_key\", \"\");\n\n return (\n

Login

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

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

\n \n Login\n \n

\n );\n}",[],[269,275,377],{"_105":384,"_95":385,"_158":386,"_160":276,"_161":141,"_162":146,"_163":119,"_107":387,"_101":32,"_165":183,"_167":388,"_168":22,"_169":-5,"_170":389,"_99":390},"2f02e0ce-11e4-11f0-af7b-569c3dd06744","MessageItem.tsx","0f2c9853-e47d-44b9-8f02-5ece8002b643",["D",1743833218717],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\nimport { MessagePart } from \"./MessagePart.tsx\";\nimport { MessageTimer } from \"./MessageTimer.tsx\";\nimport { calculateCost } from \"../utils/costCalculator.ts\";\n\n// Component for the loading spinner\nconst LoadingSpinner = () => (\n

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

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

\n \n

\n ))}\n

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

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

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

\n )\n : undefined}\n {/* Show loading spinner for messages without an end time and only if not manually stopped */}\n {message.role === \"assistant\" && !messageEndTimes[message.id] && running && }\n \n );\n}",[],[269,275,385],{"_105":392,"_95":393,"_158":394,"_160":276,"_161":141,"_162":146,"_163":119,"_107":395,"_101":32,"_165":183,"_167":396,"_168":22,"_169":-5,"_170":397,"_99":398},"2f02e33a-11e4-11f0-af7b-569c3dd06744","MessagePart.tsx","0e3616b3-71dd-4524-aa8e-47d8fb65c6d2",["D",1743833218717],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { type Message } from \"https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport ReactMarkdown from \"https://esm.sh/react-markdown?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport { ImagePreview } from \"./ImageUpload.tsx\";\n\n// Helper function to detect language from file path\nconst detectLanguage = (path: string): string => {\n if (!path) return \"text\";\n const extension = path.split(\".\").pop()?.toLowerCase();\n\n const extensionMap: Record = {\n \"js\": \"javascript\",\n \"jsx\": \"jsx\",\n \"ts\": \"typescript\",\n \"tsx\": \"tsx\",\n \"html\": \"html\",\n \"css\": \"css\",\n \"json\": \"json\",\n \"md\": \"markdown\",\n };\n\n return extensionMap[extension || \"\"] || \"text\";\n};\n\n// Component to render a diff view for str_replace operations\nconst DiffView = ({ oldStr, newStr }: { oldStr: string; newStr: string }) => {\n return (\n

- Removed

\n {oldStr || \"(empty)\"}\n

\n\n

+ Added

\n {newStr || \"(empty)\"}\n

\n );\n};\n\n// Helper to create markdown code blocks\nconst CodeBlock = ({ language, content }: { language: string; content: string }) => {\n // Use the triple backtick syntax for code blocks\n const codeBlock = \"```\" + language + \"\\n\" + content + \"\\n```\";\n return {codeBlock};\n};\n\n// Helper to check if a tool response is an error\nconst isErrorResponse = (response: any): boolean => {\n console.log(response);\n if (!response) return false;\n\n if (typeof response === \"object\" && response.type === \"error\") {\n return true;\n }\n\n return false;\n};\n\n// Helper to extract error message from response\nconst getErrorMessage = (response: any): string => {\n if (!response) return \"Unknown error\";\n\n if (typeof response === \"object\" && response.type === \"error\") {\n return response.message || \"Unknown error\";\n }\n\n return \"Unknown error\";\n};\n\n// Helper to extract success data from response\nconst getSuccessData = (response: any): any => {\n if (!response) return null;\n\n if (typeof response === \"object\" && response.type === \"success\") {\n return response.data;\n }\n\n // Legacy format - assume the entire response is the data\n return response;\n};\n\nexport function MessagePart({ part }: { part: NonNullable[number] }) {\n if (part.type === \"text\") return {part.text};\n if (part.type === \"reasoning\")\n return (\n

\n Reasoning...\n

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

\n {detail.text}\n

\n ))}\n

\n );\n if (part.type === \"tool-invocation\") {\n let { step, state, toolName, args, result } = part.toolInvocation;\n const isError = isErrorResponse(result);\n\n // Properly conjugate command verbs to present participle form\n const getCommandVerb = (command: string): string => {\n switch (command) {\n case \"view\":\n return \"viewed\";\n case \"create\":\n return \"created\";\n case \"str_replace\":\n return \"replaced\";\n case \"insert\":\n return \"inserted\";\n case \"undo_edit\":\n return \"undid\";\n default:\n return command + \"-ed\"; // Fallback for unknown commands\n }\n };\n\n let name = toolName === \"str_replace_editor\"\n ? getCommandVerb(args.command) + \" \" + args.path + (args.view_range ? ` [${args.view_range.join(\", \")}]` : \"\")\n : toolName;\n\n // Format based on tool type\n const renderToolContent = () => {\n // If there's an error, show the error message\n if (isError) {\n return (\n

\n {getErrorMessage(result)}\n

\n );\n }\n\n // Handle the \"think\" tool specially - using default font size\n if (toolName === \"think\" && args.thought) {\n return (\n

\n {args.thought}\n

\n );\n }\n\n // Handle str_replace_editor tool\n if (toolName === \"str_replace_editor\") {\n switch (args.command) {\n case \"str_replace\":\n return ;\n\n case \"create\":\n const language = detectLanguage(args.path);\n return (\n

\n Created: {args.path}\n {language}\n

\n {args.file_text}\n

\n );\n\n case \"view\":\n // For view operations, we don't need to show the full content in the tool call\n return (\n

\n Viewed: {args.path}\n {args.view_range ? ` (lines ${args.view_range.join(\" to \")})` : \"\"}\n

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

\n Inserted at line {args.insert_line} in {args.path}\n

\n {args.new_str}\n

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

\n Undid last edit to {args.path}\n

\n );\n\n default:\n // Fallback to JSON for unknown commands\n return (\n

\n \n

\n );\n }\n }\n\n // Handle delete_file tool\n if (toolName === \"delete_file\" && args.path) {\n return (\n

\n Deleted file: {args.path}\n

\n );\n }\n\n // Default: format as JSON with markdown code block\n return (\n

\n \n

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

\n \n {isError && \"❌ \"}\n {name}\n \n

\n {renderToolContent()}\n

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

\n Source\n

\n \n

\n );\n }\n if (part.type === \"file\") {\n const fileContent = atob(part.data);\n const fileName = part.name || \"file\";\n const language = detectLanguage(fileName);\n\n return (\n

\n {fileName}\n {language}\n

\n \n

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

\n \n

\n );\n }\n // Handle multiple images in a single part\n if (part.type === \"images\") {\n return img.url)} />;\n }\n}",[],[269,275,393],{"_105":400,"_95":401,"_158":402,"_160":276,"_161":141,"_162":146,"_163":119,"_107":403,"_101":32,"_165":183,"_167":404,"_168":22,"_169":-5,"_170":405,"_99":406},"2f02eb14-11e4-11f0-af7b-569c3dd06744","MessageTimer.tsx","40453caf-6632-44ab-a7fc-11d86ed331f2",["D",1743833218717],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\n\n// Utility to format milliseconds into a readable time string\nconst formatTime = (ms: number): string => {\n const seconds = Math.floor(ms / 1000);\n const minutes = Math.floor(seconds / 60);\n const remainingSeconds = seconds % 60;\n return `${minutes}:${remainingSeconds.toString().padStart(2, \"0\")}`;\n};\n\nexport const MessageTimer = (\n { createdAt, endTime, isStopped }: { createdAt: number; endTime?: number; isStopped?: boolean },\n) => {\n const [currentTime, setCurrentTime] = useState(Date.now());\n\n // Update currentTime periodically when message is still running (no endTime) and not stopped\n useEffect(() => {\n if (endTime !== undefined || isStopped) return;\n\n const interval = setInterval(() => {\n setCurrentTime(Date.now());\n }, 100);\n\n return () => clearInterval(interval);\n }, [endTime, isStopped]);\n\n // Calculate elapsed time: either from start to end (if finished) or from start to current time (if running)\n const elapsedTime = endTime !== undefined\n ? endTime - createdAt\n : currentTime - createdAt;\n\n return (\n

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

\n );\n};",[],[269,275,401],{"_105":408,"_95":409,"_158":410,"_160":276,"_161":141,"_162":146,"_163":119,"_107":411,"_101":32,"_165":183,"_167":412,"_168":22,"_169":-5,"_170":413,"_99":414},"2f02ed8a-11e4-11f0-af7b-569c3dd06744","ProjectFiles.tsx","3ea0f9a2-d659-4060-a92a-4b24d7c4a6af",["D",1743833218717],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\nimport { DirectoryTree } from \"./DirectoryTree.tsx\";\nimport { LoadingSpinner } from \"./LoadingSpinner.tsx\";\n\ninterface ProjectFilesProps {\n projectFiles: any[];\n isLoadingFiles: boolean;\n onSelectionChange: (files: string[]) => void;\n error?: Error | null;\n}\n\nexport function ProjectFiles({\n projectFiles,\n isLoadingFiles,\n onSelectionChange,\n error,\n}: ProjectFilesProps) {\n return (\n

\n {isLoadingFiles ? (\n

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

\n ) : error ? (\n

Error loading project files:

{error.message}

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

\n );\n}",[],[269,275,409],{"_105":416,"_95":417,"_158":418,"_160":276,"_161":141,"_162":146,"_163":119,"_107":419,"_101":32,"_165":183,"_167":420,"_168":22,"_169":-5,"_170":421,"_99":422},"2f02ee98-11e4-11f0-af7b-569c3dd06744","Projects.tsx","e4ea8a44-fef9-467c-a6da-4d009e75299e",["D",1743833218717],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\n\n// Component for the loading spinner\nconst LoadingSpinner = () => (\n

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

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

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

{p.name}

\n ))\n )}\n \n );\n}",[],[269,275,417],[269,275],{"_105":425,"_95":426,"_158":427,"_160":270,"_161":141,"_162":146,"_163":119,"_107":428,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":429,"_99":446},"2f02f550-11e4-11f0-af7b-569c3dd06744","hooks","2f17680b-5c86-4911-9f55-5ac917a68635",["D",1743833218717],[430,438],{"_105":431,"_95":432,"_158":433,"_160":427,"_161":141,"_162":146,"_163":119,"_107":434,"_101":32,"_165":183,"_167":435,"_168":22,"_169":-5,"_170":436,"_99":437},"2f02f1c2-11e4-11f0-af7b-569c3dd06744","useChatLogic.ts","ff34b372-7cb5-454f-a93c-e37014e21ad1",["D",1743833218717],"import { useChat } from \"https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0&react-dom@18.2.0\";\nimport React, { useCallback, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { playBellSound } from \"../utils/soundEffects.ts\";\n\ninterface UseChatLogicProps {\n project: any;\n branchId: string | undefined;\n anthropicApiKey: string;\n bearerToken: string;\n selectedFiles: string[];\n images: (string | null)[];\n soundEnabled: boolean;\n}\n\nexport function useChatLogic({\n project,\n branchId,\n anthropicApiKey,\n bearerToken,\n selectedFiles,\n images,\n soundEnabled,\n}: UseChatLogicProps) {\n const [usages, setUsages] = useState>({});\n const [messageEndTimes, setMessageEndTimes] = useState>({});\n const customStopRef = useRef<(() => void) | null>(null);\n\n const {\n messages,\n error,\n input,\n handleInputChange,\n handleSubmit: originalHandleSubmit,\n stop,\n status,\n } = useChat({\n api: \"/api/send-message\",\n body: {\n project,\n branchId,\n anthropicApiKey,\n selectedFiles,\n images: images\n .filter((img): img is string => {\n const isValid = typeof img === \"string\" && img.startsWith(\"data:\");\n if (!isValid && img !== null) {\n console.warn(\"Invalid image format:\", img?.substring(0, 50) + \"...\");\n }\n return isValid;\n })\n .map(img => ({ url: img })),\n },\n headers: {\n \"Authorization\": `Bearer ${bearerToken}`,\n },\n onFinish: (message, options) => {\n setUsages(prev => ({\n ...prev,\n [message.id]: options.usage,\n }));\n\n setMessageEndTimes(prev => ({\n ...prev,\n [message.id]: Date.now(),\n }));\n\n if (soundEnabled) {\n playBellSound().catch(error => {\n console.log(\"Error playing bell sound:\", error);\n });\n }\n },\n });\n\n const running = status === \"streaming\" || status === \"submitted\";\n\n const pendingMessageId = useMemo(() => {\n if (!running) return null;\n const pendingMessages = messages\n .filter(msg => msg.role === \"assistant\" && !messageEndTimes[msg.id]);\n return pendingMessages.length > 0 ? pendingMessages[pendingMessages.length - 1].id : null;\n }, [messages, messageEndTimes, running]);\n\n const handleStop = useCallback(() => {\n stop();\n\n if (pendingMessageId) {\n setMessageEndTimes(prev => ({\n ...prev,\n [pendingMessageId]: Date.now(),\n }));\n\n if (soundEnabled) {\n playBellSound().catch(error => {\n console.log(\"Error playing bell sound:\", error);\n });\n }\n }\n }, [stop, pendingMessageId, soundEnabled]);\n\n React.useEffect(() => {\n customStopRef.current = handleStop;\n }, [handleStop]);\n\n React.useEffect(() => {\n (window as any).customStopRef = customStopRef;\n }, []);\n\n return {\n messages,\n error,\n input,\n handleInputChange,\n handleSubmit: originalHandleSubmit,\n running,\n usages,\n messageEndTimes,\n };\n}",[],[269,426,432],{"_105":439,"_95":440,"_158":441,"_160":427,"_161":141,"_162":146,"_163":119,"_107":442,"_101":32,"_165":183,"_167":443,"_168":22,"_169":-5,"_170":444,"_99":445},"2f02f41a-11e4-11f0-af7b-569c3dd06744","useProjectFiles.ts","39aafb52-6258-46fd-830f-df021620bbeb",["D",1743833218717],"import { useState, useEffect } from \"https://esm.sh/react@18.2.0?dev\";\nimport { fetchProjectFiles } from \"../utils/api.ts\";\n\ninterface UseProjectFilesProps {\n projectId?: string;\n branchId?: string;\n bearerToken: string;\n}\n\ninterface UseProjectFilesResult {\n projectFiles: any[];\n isLoadingFiles: boolean;\n error: Error | null;\n}\n\n/**\n * Custom hook to fetch and manage project files\n */\nexport function useProjectFiles({\n projectId,\n branchId,\n bearerToken,\n}: UseProjectFilesProps): UseProjectFilesResult {\n const [projectFiles, setProjectFiles] = useState([]);\n const [isLoadingFiles, setIsLoadingFiles] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n const loadProjectFiles = async () => {\n if (!projectId) {\n setProjectFiles([]);\n setIsLoadingFiles(false);\n return;\n }\n\n setIsLoadingFiles(true);\n setError(null);\n \n try {\n const filesData = await fetchProjectFiles({\n bearerToken,\n projectId,\n branchId,\n });\n\n if (filesData.files) {\n setProjectFiles(filesData.files);\n } else {\n setProjectFiles([]);\n console.error(\"No files returned:\", filesData);\n }\n } catch (err) {\n console.error(\"Error fetching project files:\", err);\n setProjectFiles([]);\n setError(err instanceof Error ? err : new Error(String(err)));\n } finally {\n setIsLoadingFiles(false);\n }\n };\n\n loadProjectFiles();\n }, [projectId, branchId, bearerToken]);\n\n return {\n projectFiles,\n isLoadingFiles,\n error,\n };\n}",[],[269,426,440],[269,426],{"_105":448,"_95":449,"_158":450,"_160":270,"_161":141,"_162":146,"_163":119,"_107":451,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":452,"_99":477},"2f02ff5a-11e4-11f0-af7b-569c3dd06744","utils","5db37292-86c5-4e64-a7a5-a8dbc539616e",["D",1743833218717],[453,461,469],{"_105":454,"_95":455,"_158":456,"_160":450,"_161":141,"_162":146,"_163":119,"_107":457,"_101":32,"_165":183,"_167":458,"_168":22,"_169":-5,"_170":459,"_99":460},"2f02f668-11e4-11f0-af7b-569c3dd06744","api.ts","74242ec7-dee3-404d-8ef6-d0cf8bd05af1",["D",1743833218717],"// Fetch project files from the backend\nexport async function fetchProjectFiles(\n { bearerToken, projectId, branchId }: { bearerToken: string; projectId: string; branchId?: string },\n) {\n const url = new URL(\"/api/project-files\", window.location.origin);\n url.searchParams.append(\"projectId\", projectId);\n if (branchId) {\n url.searchParams.append(\"branchId\", branchId);\n }\n\n const response = await fetch(url.toString(), {\n headers: {\n \"Authorization\": \"Bearer \" + bearerToken,\n },\n });\n\n return response.json();\n}",[],[269,449,455],{"_105":462,"_95":463,"_158":464,"_160":450,"_161":141,"_162":146,"_163":119,"_107":465,"_101":32,"_165":183,"_167":466,"_168":22,"_169":-5,"_170":467,"_99":468},"2f02f816-11e4-11f0-af7b-569c3dd06744","costCalculator.ts","6ee7a0ef-46f6-4043-8cb6-3e58e3c48988",["D",1743833218717],"// Calculate cost based on token usage\nexport const calculateCost = (usage: any): string => {\n if (!usage || !usage.promptTokens) {\n return \"0.00\";\n }\n\n // Cost per million tokens\n const PROMPT_COST_PER_MILLION = 3;\n const COMPLETION_COST_PER_MILLION = 15;\n const CACHE_WRITE_COST_PER_MILLION = 3.75;\n const CACHE_READ_COST_PER_MILLION = 0.3;\n\n // Get reported values\n const promptTokens = usage.promptTokens || 0;\n const completionTokens = usage.completionTokens || 0;\n\n // Estimate cache read tokens\n // Approach: Estimate that 40% of prompt tokens come from cache read\n // This percentage can be adjusted based on observed patterns\n const estimatedCacheReadTokens = Math.round(promptTokens * 0.4);\n\n // Estimate cache write tokens\n // Approach: Assume cache write tokens are a portion of prompt tokens that aren't from cache read\n let estimatedCacheWriteTokens = 0;\n\n // If we have more prompt tokens than estimated cache read tokens,\n // estimate that 70% of the difference are cache write tokens\n estimatedCacheWriteTokens = Math.round((promptTokens - estimatedCacheReadTokens) * 0.7);\n\n // Calculate costs\n // Subtract both cache read and write tokens from prompt tokens to avoid double counting\n const promptCost = ((promptTokens - estimatedCacheWriteTokens - estimatedCacheReadTokens) / 1000000)\n * PROMPT_COST_PER_MILLION;\n const completionCost = (completionTokens / 1000000) * COMPLETION_COST_PER_MILLION;\n const cacheWriteCost = (estimatedCacheWriteTokens / 1000000) * CACHE_WRITE_COST_PER_MILLION;\n const cacheReadCost = (estimatedCacheReadTokens / 1000000) * CACHE_READ_COST_PER_MILLION;\n\n // Total cost\n const totalCost = promptCost + completionCost + cacheWriteCost + cacheReadCost;\n\n // Add both estimated cache tokens to the usage object for transparency\n usage.estimatedCacheReadTokens = estimatedCacheReadTokens;\n usage.estimatedCacheWriteTokens = estimatedCacheWriteTokens;\n\n // Store the raw cost with more precision for debugging\n usage.rawCost = totalCost.toFixed(5);\n\n // Format to the nearest penny (2 decimal places)\n // If less than 1 penny, show \"< $0.01\"\n if (totalCost < 0.01) {\n return \"< $0.01\";\n } else {\n return \"$\" + totalCost.toFixed(2);\n }\n};",[],[269,449,463],{"_105":470,"_95":471,"_158":472,"_160":450,"_161":141,"_162":146,"_163":119,"_107":473,"_101":32,"_165":183,"_167":474,"_168":22,"_169":-5,"_170":475,"_99":476},"2f02fb22-11e4-11f0-af7b-569c3dd06744","soundEffects.ts","0bcc87e5-5acf-4b9b-8b19-b5763d22a743",["D",1743833218717],"/**\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}",[],[269,449,471],[269,449],{"_105":479,"_95":480,"_158":481,"_160":270,"_161":141,"_162":146,"_163":119,"_107":482,"_101":32,"_165":183,"_167":483,"_168":22,"_169":-5,"_170":484,"_99":485},"2f030086-11e4-11f0-af7b-569c3dd06744","index.tsx","a77dc952-5be7-4035-abcc-86c7d674bd75",["D",1743833218717],"/** @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();",[],[269,480],[269],{"_105":488,"_95":489,"_158":490,"_160":-5,"_161":141,"_162":146,"_163":119,"_107":491,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":492,"_99":510},"2f030d9c-11e4-11f0-af7b-569c3dd06744","prompts","ea1c2549-fa2b-4c30-81af-c4924e7cd92a",["D",1743833218717],[493,502],{"_105":494,"_95":495,"_158":496,"_160":490,"_161":141,"_162":146,"_163":119,"_107":497,"_101":32,"_165":498,"_167":499,"_168":22,"_169":-5,"_170":500,"_99":501},"2f0302de-11e4-11f0-af7b-569c3dd06744","open_townie_prompt_additions.txt","8da80dcf-e5d2-41c4-b1fa-ba8ef680ba42",["D",1743833218717],"file","Read repo files from the base directory / directly, not /repo/.\n\nYou can implicitly create directories, \nby creating files within the directories (recursively)\nthat you want to exist via their path. For example, if you wanted to create\n/foo/bar/baz.ts, but the foo and bar directories did not exist,\nyou could still use the file editor tool to create /foo/bar/baz.ts,\nand trust that the foo and 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.\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\nBe sure to use your thinking tool before using any other tools or when doing anything complex.\n\nTake the minimum actions necessary to meet the user's request. Give the user the most opportunities to\ngive clarifications and redirections. For example, if the user asks you a question about the code,\nmerely answer the question. Do not then rewrite the code. Or if you and the user are discussing potential\nimplementation options, do not begin implementing when you feel ready. Confirm first with the user\nif you are given the green light to proceed.",[],[489,495],{"_105":503,"_95":504,"_158":505,"_160":490,"_161":141,"_162":146,"_163":119,"_107":506,"_101":32,"_165":498,"_167":507,"_168":22,"_169":-5,"_170":508,"_99":509},"2f03041e-11e4-11f0-af7b-569c3dd06744","system_prompt.txt","5012c23e-4205-4b85-bb1e-637f544193fa",["D",1743833218717],"# Val Town Assistant Prompt\n\nYou are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Respond in a friendly and concise manner\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## Image Handling\n\n- When users upload images, carefully analyze them to understand their content\n- Reference specific details from the images in your responses\n- If multiple images are uploaded, consider their relationship to each other\n- For code-related images (screenshots, diagrams), extract relevant information and incorporate it into your solutions\n- For UI mockups or design images, use them as reference for layout and design, use the colors from the image\n- When images contain text or code, transcribe relevant portions as needed\n- If image content is unclear, ask clarifying questions about what the user wants you to focus on\n\n## Technical Requirements\n\n### Code Standards\n- Generate code in TypeScript by default unless JavaScript is specifically requested\n- Add appropriate TypeScript types and interfaces for all data structures\n- If there is an official SDK or library for the service you are integrating with, use it to simplify the implementation\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 where appropriate\n\n### Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks. These utilities handle file management, project information, and testing.\n\n### Importing Utilities\nAlways import utilities with version pins to avoid breaking changes:\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n1. **parseProject** - Extract information about the current project from import.meta.url:\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\n2. **readFile** - Read files from within the project:\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n3. **serveFile** - Serve project files with proper content types:\n```ts\n// Serve a file from the project with proper Content-Type header\napp.get(\"/public/style.css\", c => serveFile(\"/frontend/style.css\", import.meta.url));\n```\n\n4. **listFiles** - List all files in the project:\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n5. **fetchTranspiledJavaScript** - Fetch and transpile TypeScript to JavaScript:\n```ts\nconst jsCode = await fetchTranspiledJavaScript(\"https://esm.town/v/username/project/path/to/file.ts\");\n```\n\n6. **testServer** - Create a test server for running test suites:\n```ts\nexport default testServer([\n {\n name: \"Feature Tests\",\n tests: [\n {\n name: \"should add numbers correctly\",\n function: () => {\n expect(1 + 1).toBe(2);\n },\n }\n ],\n }\n]);\n```\n\n## Val Town Platform Specifics\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- For AI-generated images, use: `https://maxm-imggenurl.web.val.run/the-description-of-your-image`\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 with `import.meta.url.replace(\"esm.town\", \"val.town\")` 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')` and minimize their use - prefer APIs without 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- For persistence, use Val Town SQLite or Blob storage with `import.meta.url` for keys/table names\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and include the `@jsxImportSource` pragma\n- When facing client-side render issues, check if all React dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Val Town Standard Libraries\n\n### Blob Storage\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```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```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```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## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n- Hono is the recommended API framework (similar to Express, Flask, or Sinatra)\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n // Use the serveFile utility to handle content types automatically\n app.get(\"/public/*\", c => serveFile(c.req.path.replace(\"/public\", \"/frontend\"), import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Be careful with error handling as Hono tends to swallow errors\n- 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### Frontend Best Practices\n- Structure as a standard client-side React app\n- Use SVG for favicons (Val Town only supports text files)\n- Separate components into individual files\n- Access bootstrapped data from `window.__INITIAL_DATA__`\n- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma\n- Follow the React component pattern from the example project\n- Handle API calls properly with proper error catching\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n- Follow the queries and migrations pattern from the example\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n - Properly handle CORS if needed for external access",[],[489,504],[489],{"_105":512,"_95":513,"_158":514,"_160":-5,"_161":141,"_162":102,"_163":119,"_107":515,"_101":32,"_165":498,"_167":516,"_168":22,"_169":-5,"_170":517,"_99":518},"eed0b408-11e4-11f0-a046-569c3dd06744","LLM_AGENT_GUIDE.md","eed0b5ac-11e4-11f0-a046-569c3dd06744",["D",1743833540530],"# Val Town Info Tool: Guide for LLM Agents\n\nThis guide provides instructions for LLM agents on how to effectively use the Val Town Info Tool to query information about the Val Town platform using the llms.txt standard.\n\n## Understanding the llms.txt Standard\n\nThe llms.txt standard is a structured format for providing information to LLMs. It organizes content into sections with clear headings and supports links for navigation. When using this tool, you'll be accessing information formatted according to this standard.\n\n## Tool Capabilities\n\nThe Val Town Info Tool allows you to:\n\n1. **Query general information** about the Val Town platform\n2. **Search for specific topics** by providing a query parameter\n3. **Navigate through links** to explore related documentation\n4. **Extract structured information** from the llms.txt format\n\n## Effective Usage Patterns\n\n### Start with General Information\n\nWhen a user asks about Val Town, start by getting general information:\n\n```\nconst generalInfo = await queryValTownInfo();\n```\n\nThis will give you an overview of the available sections and topics.\n\n### Refine with Specific Queries\n\nBased on the user's question, refine your search with specific queries:\n\n```\n// For questions about APIs\nconst apiInfo = await queryValTownInfo(\"API\");\n\n// For questions about storage\nconst storageInfo = await queryValTownInfo(\"storage\");\n\n// For questions about pricing\nconst pricingInfo = await queryValTownInfo(\"pricing\");\n```\n\n### Navigate Through Links\n\nWhen you need more detailed information, navigate to specific links found in previous results:\n\n```\n// Navigate to a specific documentation page\nconst detailedInfo = await queryValTownInfo(undefined, \"https://docs.val.town/specific-page\");\n```\n\n### Combine Multiple Queries\n\nFor complex questions, you may need to combine information from multiple queries:\n\n```\n// Get general API information\nconst apiOverview = await queryValTownInfo(\"API\");\n\n// Navigate to a specific API documentation page\nconst apiDetails = await queryValTownInfo(undefined, \"https://docs.val.town/api/specific-endpoint\");\n\n// Combine the information\nconst combinedInfo = `Based on the Val Town documentation:\n${extractRelevantInfo(apiOverview)}\n${extractRelevantInfo(apiDetails)}`;\n```\n\n## Best Practices\n\n1. **Always refer to the llms.txt standard** for accurate and up-to-date information\n2. **Start broad, then narrow down** - begin with general queries before getting specific\n3. **Follow links for depth** - use navigation to explore related documentation\n4. **Cite your sources** - mention that information comes from the Val Town documentation\n5. **Don't make assumptions** - if information isn't available, use the tool to check rather than guessing\n\n## Example Scenarios\n\n### Scenario 1: User asks about storage options\n\n```\nUser: \"What storage options does Val Town offer?\"\n\nAgent thinking process:\n1. This is about storage in Val Town\n2. Let me query general information about storage\n\nAction: queryValTownInfo(\"storage\")\n\nResponse to user: \"According to the Val Town documentation, Val Town offers several storage options:\n[Include information from the tool response]\n\nFor more detailed information on a specific storage option, please let me know which one you're interested in.\"\n```\n\n### Scenario 2: User asks about a specific API endpoint\n\n```\nUser: \"How do I use the Val Town API to create a new val?\"\n\nAgent thinking process:\n1. This is about the Val Town API, specifically creating a new val\n2. Let me first get general API information\n3. Then I'll look for specific information about creating vals\n\nAction 1: queryValTownInfo(\"API\")\nAction 2: queryValTownInfo(undefined, \"https://docs.val.town/api/vals\") (URL found in previous result)\n\nResponse to user: \"Based on the Val Town documentation, to create a new val using the API, you need to:\n[Include information from the tool responses]\n\nThe API endpoint for creating vals is [endpoint] and requires [parameters].\"\n```\n\n## Troubleshooting\n\nIf you encounter issues with the tool:\n\n1. **Check your query** - try different keywords or more general terms\n2. **Verify URLs** - ensure navigation URLs are correctly formatted\n3. **Break down complex questions** - use multiple queries for multi-part questions\n4. **Fall back to general information** - if specific queries don't yield results\n\nRemember: The goal is to provide accurate information from the Val Town documentation using the llms.txt standard. Always prioritize official documentation over assumptions.",[],[513],{"_105":520,"_95":521,"_158":522,"_160":-5,"_161":141,"_162":146,"_163":119,"_107":523,"_101":32,"_165":498,"_167":524,"_168":22,"_169":-5,"_170":525,"_99":526},"2f030ee6-11e4-11f0-af7b-569c3dd06744","README.md","7742c3c8-0669-47d6-94c0-e51986df030f",["D",1743833218717],"# OpenTownie\n\nOpenTownie is an AI-powered development assistant that lets you edit Val Town projects using Claude 3.7 Sonnet. It provides a seamless interface for discussing your code with Claude AI, which can directly view and modify files in your Val Town projects.\n\n## Features\nIt uses agentic tool-calling, taking manh read, write, and thinking steps autonomously when carrying out your instructions. \n\n- **AI-Assisted Editing**: Chat with Claude 3.7 Sonnet about your code and let it make changes directly to your project files\n- **File Browser**: Select specific files to include in the context window for more focused AI assistance\n- **Branch Management**: View, select, and create branches without leaving the app\n- **Cost Tracking**: See estimated API usage costs for each interaction\n- **Sound Notifications**: Get alerted when Claude finishes responding\n- **Mobile-Friendly**: Works on both desktop and mobile devices\n\n## How It Works\n\n1. **Login**: Authenticate with your Val Town API token and Anthropic API key\n2. **Select a Project**: Choose which Val Town project you want to work on\n3. **Select Files**: Browse your project files and select which ones to include in the context window\n4. **Chat with Claude**: Describe what you want to build or modify, and Claude will help implement it\n5. **Branch Management**: Create and switch between branches to organize your development work\n\n## Getting Started\n\n### Prerequisites\n\n- A Val Town account with API access\n- An Anthropic API key (Claude 3.7 Sonnet)\n\n### Setup\n\n1. Visit the OpenTownie app\n2. Enter your Val Town API token (with `projects:write` and `users:read` permissions)\n3. Enter your Anthropic API key\n4. Click \"Login\" to access your projects\n\n## Usage Tips\n\n- **Be Specific**: When asking Claude to make changes, be as specific as possible about what you want\n- **Include Context**: Select relevant files to give Claude the context it needs\n- **Create Branches**: Create a new branch before making significant changes to avoid affecting your main code\n- **Review Changes**: Always review Claude's changes before merging them into your main branch\n- **Iterative Development**: Break down complex tasks into smaller steps for better results\n\n## Technical Details\n\nOpenTownie is built with:\n- React frontend with TypeScript\n- Hono API server backend\n- Tailwind CSS for styling\n- Web Audio API for sound notifications\n- AI SDK for Claude integration\n\nThe application proxies requests to the Anthropic API and Val Town API, allowing Claude to view and edit your project files directly.\n\n## Privacy & Security\n\n- Your Val Town API token and Anthropic API key are stored locally in your browser\n- No data is stored on our servers\n- All communication with the APIs is done directly from your browser",[],[521],{"_105":528,"_95":529,"_158":530,"_160":-5,"_161":141,"_162":146,"_163":119,"_107":531,"_101":32,"_165":498,"_167":532,"_168":22,"_169":-5,"_170":533,"_99":534},"2f03117a-11e4-11f0-af7b-569c3dd06744","TODOs.md","9292cddd-5d9c-46fd-a0b3-fb5f7e2dd1fa",["D",1743833218717],"- [ ] ensure line numbers are in the files added in the context window\n- [ ] Give it a tool to make an HTTP request to its own endpoint to test things!\n- [ ] Make it look good\n- [ ] Ability to create new projects from the interface\n- [ ] Debug why backend/index.ts is not being created as an http type\n - [ ] is it an sdk bug?\n - [ ] do we need to add more heuristics to properly detect http vals?\n - [ ] should we add a .http. convention to townie and then strip that out before we actually go to the file system?\n - [ ] should we add a change_val_type tool and teach townie how to use it?\n- [ ] Persistent threads\n - [ ] Utils to help you revert to before or after messages or actions (related to commits)\n- [ ] make it one click to branch off like old jp townie demos\n- [ ] Figure out a convention to teach in the anthropic prompt mod where the LLM always checks the readme for the scope (if not provided) and keeps it up to take with every change\n- [ ] Rebuild as React Router?\n- [ ] opentownie as a pr bot\n- [ ] give it the ability to see its own client-side and server-side logs by building a middleware that shoves them into a SQL light database date and then give it a tool to access them or use our trpc API in that tool\n- [ ] do a browser use or screenshot thing to give it access to its own visual output\n- [ ] Have it default to creating a new branch off main and then embedding and iframe to the resulting http val and give you a link to a pr opening url\n- [ ] A way to upload docs, by URL? A mini site to recursively crawl docs and markdownify?\n- [ ] Give it a replace_file command (instead of delete & create)?\n- [ ] Add other LLMs ie Gemini, Deepseek, o3-mini, etc. Figure out how to get tools to work for those\n- [x] Make it clearer visually in the UI when tool calls fail\n- [x] Add to the opentownie prompt that it doens't need to create directories, it should just create files in directories by specifying their path, and we'll make sure the directory gets created. We can also potentially catch when the path of a file to create ends in / and make that a no-op.\n- [x] Remove the \"thinking...\" widget next to the send button\n- [x] Refactor /backend/index.ts into multiple files\n- [x] Format the JSON inside the tool-calls as pretty markdown\n - [x] Think as normal markdown\n - [x] File write as a code embed\n - [x] str_replace as a diff view\n- [x] make image drop area invisible and bigger\n- [x] Give it all the code (except maybe .txt files) as initial context (like cursor sonnet max)\n- [x] I seem to have lost the delete file tool and instructions, try to find them back in history or re-create?\n- [x] Show reasoning in a detail\n- [x] Consider asking it to write the minimum code possible \n- [x] Add caching (post in the vercel ai discussion about how it's not working)\n- [x] For login, have a button that reloads the page\n- [x] Start a timer for messages\n- [x] Add more indicators that it's \"still working\"\n- [x] Require users supply their own Anthropic token?\n- [x] Add cost indications on messages\n- [x] Add a bell noise when the message is done to let us know\n- [x] Launch!\n- [x] Let it select the branch name from a dropdown",[],[529],{"_105":536,"_95":537,"_158":538,"_160":-5,"_161":141,"_162":539,"_163":22,"_107":540,"_101":32,"_165":498,"_167":541,"_168":22,"_169":-5,"_170":542,"_99":543},"d8328028-11e4-11f0-9b0e-569c3dd06744","VAL_TOWN_TOOL_README.md","d83280be-11e4-11f0-9b0e-569c3dd06744",5,["D",1743833502582],"# Val Town Info Tool\n\nThis tool allows an LLM agent to query information about the Val Town platform using the llms.txt standard and navigate through links within the results.\n\n## Features\n\n- Fetches and parses information from Val Town's llms.txt standard\n- Allows filtering information by specific queries\n- Supports navigation through links specified within the results\n- Provides formatted responses suitable for LLM consumption\n\n## Files\n\n- `val_town_info.ts` - Core functionality for fetching and parsing llms.txt content\n- `val_town_tool.ts` - Wrapper function to be used as a tool by LLM agents\n\n## Usage\n\n### Basic Query\n\nTo get information about a specific topic:\n\n```typescript\nimport { valTownInfoTool } from \"./val_town_tool.ts\";\n\n// Query information about APIs\nconst apiInfo = await valTownInfoTool(\"API\");\nconsole.log(apiInfo);\n```\n\n### Navigation\n\nTo navigate to a specific link found in previous results:\n\n```typescript\n// Navigate to a specific documentation page\nconst pageInfo = await valTownInfoTool(undefined, \"https://docs.val.town/some-specific-page\");\nconsole.log(pageInfo);\n```\n\n### General Information\n\nTo get general information about the Val Town platform:\n\n```typescript\n// Get general platform information\nconst generalInfo = await valTownInfoTool();\nconsole.log(generalInfo);\n```\n\n## Integration with LLM Agents\n\nWhen integrating this tool with an LLM agent, instruct the agent to:\n\n1. Use the tool to query general information about Val Town\n2. Refine searches with specific queries based on user questions\n3. Navigate through links to explore related documentation\n4. Refer to the llms.txt standard for any Val Town related functionality\n\n## llms.txt Standard\n\nThe llms.txt standard is a structured format for providing information to LLMs. It organizes content into sections with clear headings and supports links for navigation. This tool parses the standard format to extract relevant information and present it in a way that's easy for LLMs to understand and use.\n\nFor more information about the standard, visit: https://docs.val.town/llms.txt",[],[537],{"_105":545,"_95":546,"_158":547,"_160":-5,"_161":141,"_162":548,"_163":119,"_107":549,"_101":32,"_165":183,"_167":550,"_168":22,"_169":-5,"_170":551,"_99":552},"dd5f7038-11e4-11f0-9cc8-569c3dd06744","example_usage.ts","dd5f7100-11e4-11f0-9cc8-569c3dd06744",6,["D",1743833511267],"/**\n * Example usage of the Val Town Info Tool\n * \n * This file demonstrates how to use the Val Town Info Tool\n * to query information about the Val Town platform.\n */\n\nimport { valTownInfoTool } from \"./val_town_tool.ts\";\n\n// Example 1: Get general information about Val Town\nconsole.log(\"EXAMPLE 1: General Information\");\nconsole.log(\"==============================\");\nconst generalInfo = await valTownInfoTool();\nconsole.log(generalInfo);\nconsole.log(\"\\n\\n\");\n\n// Example 2: Query specific information about APIs\nconsole.log(\"EXAMPLE 2: Specific Query - API\");\nconsole.log(\"==============================\");\nconst apiInfo = await valTownInfoTool(\"API\");\nconsole.log(apiInfo);\nconsole.log(\"\\n\\n\");\n\n// Example 3: Navigate to a specific link\n// Note: In a real scenario, you would get this URL from a previous query result\nconsole.log(\"EXAMPLE 3: Navigation to Specific Link\");\nconsole.log(\"====================================\");\nconst navigationExample = await valTownInfoTool(undefined, \"https://docs.val.town/api\");\nconsole.log(navigationExample);\n\n// In an LLM agent context, you would use the tool like this:\n/*\nfunction askQuestion(question: string) {\n // First, get general information if needed\n const generalInfo = await valTownInfoTool();\n \n // Based on the question, query specific information\n if (question.includes(\"API\")) {\n return await valTownInfoTool(\"API\");\n } else if (question.includes(\"storage\")) {\n return await valTownInfoTool(\"storage\");\n }\n \n // If the question is about a specific link from previous results\n // const linkInfo = await valTownInfoTool(undefined, \"https://docs.val.town/specific-page\");\n // return linkInfo;\n \n // Default to general information\n return generalInfo;\n}\n*/",[],[546],{"_105":554,"_95":555,"_158":556,"_160":-5,"_161":141,"_162":557,"_163":119,"_107":558,"_101":32,"_165":183,"_167":559,"_168":22,"_169":-5,"_170":560,"_99":561},"b86c55e8-11e4-11f0-b3c7-569c3dd06744","fetch_llms_txt.ts","b86c56b0-11e4-11f0-b3c7-569c3dd06744",2,["D",1743833449276],"// Temporary script to fetch the llms.txt content\nconst response = await fetch(\"https://docs.val.town/llms.txt\");\nconst text = await response.text();\nconsole.log(text);",[],[555],{"_105":563,"_95":236,"_158":564,"_160":-5,"_161":141,"_162":146,"_163":119,"_107":565,"_101":32,"_165":566,"_167":567,"_168":22,"_169":-5,"_170":568,"_99":569},"2f031562-11e4-11f0-af7b-569c3dd06744","ed8b9266-9eeb-4767-a8f2-fd79224f1d79",["D",1743833218717],"http","import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { app as backend } from \"./backend/index.ts\";\n\nconst app = new Hono();\n\napp.route(\"/api\", backend);\napp.get(\"/frontend/*\", c => {\n return serveFile(c.req.path, import.meta.url);\n});\napp.get(\"/\", async (c) => {\n return c.html(\n `\n \n OpenTownie\n \n \n \n \n

\n \n \n \n `,\n );\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\nexport default app.fetch;",[],[236],{"_105":571,"_95":572,"_158":573,"_160":-5,"_161":141,"_162":574,"_163":119,"_107":575,"_101":32,"_165":183,"_167":576,"_168":22,"_169":-5,"_170":577,"_99":578},"c6242e7c-11e4-11f0-aeee-569c3dd06744","val_town_info.ts","c6242f12-11e4-11f0-aeee-569c3dd06744",3,["D",1743833472290],"/**\n * Val Town Info Tool\n * \n * This tool allows querying information about the Val Town platform using the llms.txt standard.\n * It can fetch the main llms.txt content and navigate through links specified within the results.\n */\n\n// Base URL for Val Town documentation\nconst BASE_URL = \"https://docs.val.town\";\n\n/**\n * Fetches and parses llms.txt content from a given URL\n * @param url The URL to fetch llms.txt content from (defaults to main docs URL)\n * @returns Parsed sections from the llms.txt content\n */\nasync function fetchLLMsTxt(url = `${BASE_URL}/llms.txt`): Promise> {\n try {\n const response = await fetch(url);\n \n if (!response.ok) {\n throw new Error(`Failed to fetch llms.txt: ${response.status} ${response.statusText}`);\n }\n \n const text = await response.text();\n return parseLLMsTxt(text);\n } catch (error) {\n console.error(\"Error fetching llms.txt:\", error);\n throw error;\n }\n}\n\n/**\n * Parses llms.txt content into sections\n * @param content The raw llms.txt content\n * @returns Object with section names as keys and arrays of lines as values\n */\nfunction parseLLMsTxt(content: string): Record {\n const lines = content.split('\\n');\n const sections: Record = {};\n \n let currentSection = \"\";\n \n for (const line of lines) {\n // Skip empty lines and comments\n if (line.trim() === \"\" || line.trim().startsWith(\"#\")) {\n continue;\n }\n \n // Check if this is a section header\n if (line.startsWith(\"[\") && line.endsWith(\"]\")) {\n currentSection = line.slice(1, -1).trim();\n sections[currentSection] = [];\n } \n // Add content to the current section\n else if (currentSection) {\n sections[currentSection].push(line.trim());\n }\n }\n \n return sections;\n}\n\n/**\n * Extracts links from llms.txt content\n * @param sections Parsed sections from llms.txt\n * @returns Array of link objects with title and URL\n */\nfunction extractLinks(sections: Record): Array<{title: string, url: string}> {\n const links: Array<{title: string, url: string}> = [];\n \n // Look for links in all sections\n for (const [section, lines] of Object.entries(sections)) {\n for (const line of lines) {\n // Check for markdown-style links [title](url)\n const linkMatches = line.match(/\\[([^\\]]+)\\]\$([^)]+)\$/g);\n \n if (linkMatches) {\n for (const match of linkMatches) {\n const titleMatch = match.match(/\\[([^\\]]+)\\]/);\n const urlMatch = match.match(/\$([^)]+)\$/);\n \n if (titleMatch && urlMatch) {\n const title = titleMatch[1];\n let url = urlMatch[1];\n \n // Handle relative URLs\n if (url.startsWith('/') && !url.startsWith('//')) {\n url = `${BASE_URL}${url}`;\n } else if (!url.startsWith('http')) {\n url = `${BASE_URL}/${url}`;\n }\n \n links.push({ title, url });\n }\n }\n }\n }\n }\n \n return links;\n}\n\n/**\n * Main function to query Val Town information\n * @param query Optional query to filter results by specific section or topic\n * @param url Optional URL to fetch llms.txt content from (for navigation)\n * @returns Formatted information about Val Town based on the query\n */\nexport async function queryValTownInfo(query?: string, url?: string): Promise<{\n sections: Record,\n links: Array<{title: string, url: string}>,\n summary: string\n}> {\n // Fetch and parse the llms.txt content\n const sections = await fetchLLMsTxt(url);\n \n // Extract links for navigation\n const links = extractLinks(sections);\n \n // Filter sections based on query if provided\n let filteredSections = sections;\n if (query) {\n const queryLower = query.toLowerCase();\n filteredSections = Object.fromEntries(\n Object.entries(sections).filter(([section, _]) => \n section.toLowerCase().includes(queryLower)\n )\n );\n \n // If no sections match, try to find matching content within sections\n if (Object.keys(filteredSections).length === 0) {\n filteredSections = Object.fromEntries(\n Object.entries(sections).map(([section, lines]) => [\n section,\n lines.filter(line => line.toLowerCase().includes(queryLower))\n ]).filter(([_, lines]) => lines.length > 0)\n );\n }\n }\n \n // Generate a summary of the results\n let summary = \"\";\n if (query) {\n if (Object.keys(filteredSections).length === 0) {\n summary = `No information found for query: \"${query}\". Try a different query or explore the available sections.`;\n } else {\n summary = `Found information related to \"${query}\" in ${Object.keys(filteredSections).length} section(s).`;\n }\n } else {\n summary = `Val Town platform information contains ${Object.keys(sections).length} sections. Use a query to filter or explore specific links.`;\n }\n \n return {\n sections: filteredSections,\n links,\n summary\n };\n}\n\n// Example usage:\n// const info = await queryValTownInfo(\"API\");\n// console.log(info.summary);\n// console.log(info.sections);\n// console.log(info.links);\n\n// To navigate to a specific link:\n// const linkInfo = await queryValTownInfo(undefined, \"https://docs.val.town/some-specific-page\");",[],[572],{"_105":580,"_95":581,"_158":582,"_160":-5,"_161":141,"_162":583,"_163":22,"_107":584,"_101":32,"_165":183,"_167":585,"_168":22,"_169":-5,"_170":586,"_99":587},"ccc2abb4-11e4-11f0-9394-569c3dd06744","val_town_tool.ts","ccc2ac7c-11e4-11f0-9394-569c3dd06744",4,["D",1743833483393],"/**\n * Val Town Info Tool for LLM Agents\n * \n * This tool allows an LLM agent to query information about the Val Town platform\n * using the llms.txt standard and navigate through links within the results.\n */\n\nimport { queryValTownInfo } from \"./val_town_info.ts\";\n\n/**\n * Tool function for querying Val Town platform information\n * @param query Optional query to filter results by specific section or topic\n * @param url Optional URL to fetch llms.txt content from (for navigation)\n * @returns Formatted information about Val Town based on the query\n */\nexport async function valTownInfoTool(query?: string, url?: string): Promise {\n try {\n const result = await queryValTownInfo(query, url);\n \n // Format the response in a readable way for the LLM\n let response = `# Val Town Platform Information\\n\\n`;\n response += `${result.summary}\\n\\n`;\n \n // Add sections content\n if (Object.keys(result.sections).length > 0) {\n response += `## Sections\\n\\n`;\n \n for (const [section, lines] of Object.entries(result.sections)) {\n response += `### ${section}\\n\\n`;\n for (const line of lines) {\n response += `${line}\\n`;\n }\n response += `\\n`;\n }\n }\n \n // Add navigation links\n if (result.links.length > 0) {\n response += `## Available Links for Navigation\\n\\n`;\n result.links.forEach((link, index) => {\n response += `${index + 1}. [${link.title}](${link.url})\\n`;\n });\n response += `\\nTo navigate to a specific link, call this tool again with the URL parameter set to one of the links above.\\n`;\n }\n \n // Add usage instructions\n response += `\\n## Usage Instructions\\n`;\n response += `- To search for specific information, provide a query parameter (e.g., \"API\", \"Storage\", \"Pricing\")\\n`;\n response += `- To navigate to a specific link, provide the URL parameter\\n`;\n response += `- To get general information, call without parameters\\n`;\n response += `\\nThis tool follows the llms.txt standard for structured information retrieval.`;\n \n return response;\n } catch (error) {\n return `Error querying Val Town information: ${error.message}\\n\\nPlease try again with a different query or URL.`;\n }\n}\n\n// Example usage:\n// console.log(await valTownInfoTool(\"API\"));\n// console.log(await valTownInfoTool(undefined, \"https://docs.val.town/some-specific-page\"));",[],[581],{"_105":589,"_95":590,"_158":591,"_160":-5,"_161":141,"_162":592,"_163":119,"_107":593,"_101":32,"_165":183,"_167":594,"_168":22,"_169":-5,"_170":595,"_99":596},"e3f29b5a-11e4-11f0-a046-569c3dd06744","val_town_tool_definition.ts","e3f29c18-11e4-11f0-a046-569c3dd06744",7,["D",1743833522297],"/**\n * Val Town Tool Definition for LLM Agents\n * \n * This file contains the function definition that can be used\n * to integrate the Val Town Info Tool with LLM agents.\n */\n\nimport { valTownInfoTool } from \"./val_town_tool.ts\";\n\n/**\n * Function definition for the Val Town Info Tool\n * This can be used to register the tool with LLM agents\n */\nexport const valTownToolDefinition = {\n name: \"queryValTownInfo\",\n description: \"Query information about the Val Town platform using the llms.txt standard. This tool allows you to get details about Val Town features, APIs, pricing, and more. You can also navigate to specific documentation pages by providing a URL.\",\n parameters: {\n type: \"object\",\n properties: {\n query: {\n type: \"string\",\n description: \"Optional query to filter results by specific section or topic (e.g., 'API', 'Storage', 'Pricing')\"\n },\n url: {\n type: \"string\",\n description: \"Optional URL to fetch llms.txt content from (for navigation to specific documentation pages)\"\n }\n },\n required: []\n },\n async function(args: { query?: string; url?: string }) {\n return await valTownInfoTool(args.query, args.url);\n }\n};\n\n/**\n * Example of how to register this tool with an LLM agent framework\n */\n/*\n// Example with a hypothetical LLM agent framework\nimport { Agent } from \"llm-agent-framework\";\n\nconst agent = new Agent({\n tools: [valTownToolDefinition],\n model: \"gpt-4\",\n instructions: `\n You are an assistant specialized in providing information about the Val Town platform.\n \n When asked about Val Town features, APIs, pricing, or other details:\n 1. Use the queryValTownInfo tool to get relevant information\n 2. Start with general queries and then refine based on the user's question\n 3. Navigate through links when needed to get more specific information\n 4. Always refer to the llms.txt standard for accurate and up-to-date information\n \n Do not make up information about Val Town. If you're unsure, use the tool to check.\n `\n});\n\n// Example usage\nconst response = await agent.chat(\"What are the storage options in Val Town?\");\nconsole.log(response);\n*/",[],[590],"files",[155,172,178,187,195,203,211,220,226,234,242,250,259,267,273,279,287,295,303,311,319,327,335,343,351,359,367,375,383,391,399,407,415,424,430,438,447,453,461,469,478,487,493,502,511,519,527,535,544,553,562,570,579,588],"counts",{"_601":146,"_602":583,"_603":32,"_604":557},"pulls","branches","forks","envVars","contents",[],{"_105":243,"_95":244,"_158":245,"_160":223,"_161":141,"_162":146,"_163":119,"_107":608,"_101":32,"_165":183,"_167":247,"_168":22,"_169":-5,"_99":609},["D",1743833218717],[157,222,244],"upstreamProject",{"_105":612,"_95":96,"_113":613,"_114":-5,"_111":112,"_23":614},"50541adc-df52-11ef-be98-e6cdfca9ef9f","AI assistant that can edit Val Town Projects",{"_93":615,"_133":616},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","upstreamBranch",{"_105":144,"_107":619,"_620":621,"_95":43,"_142":106,"_101":146,"_143":622,"_145":623,"_624":625,"_109":-5,"_152":22,"_111":112,"_151":94,"_16":122,"_150":96},["D",1743706288161],"updatedAt",["D",1743706288161],"50576070-df52-11ef-be98-e6cdfca9ef9f",973,"lockfileKey","1744474129693-esm.town_v_neverstew_OpenTownie@1-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":98,"_101":102,"_99":100,"_103":632,"_153":637,"_597":800,"_498":801,"_605":803,"_804":805,"_808":119,"_809":-5,"_810":811,"_812":32,"_813":814},{"_105":106,"_95":96,"_107":633,"_109":-5,"_110":22,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":-5,"_121":32,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":634,"_135":635,"_138":636,"_152":22},["D",1743706288161],{"_93":94,"_133":134},{"_93":94,"_137":134},{"_101":140,"_95":98,"_105":141,"_142":106,"_143":144,"_145":146,"_147":112,"_148":106,"_149":122,"_150":96,"_151":94},[638,677,761,770,773,776,779,782,785,788,791,794,797],{"_105":156,"_95":157,"_158":159,"_160":-5,"_161":141,"_162":146,"_163":119,"_107":164,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":639,"_99":676},[640,658,673],{"_105":173,"_95":174,"_158":175,"_160":159,"_161":141,"_162":146,"_163":119,"_107":176,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":641,"_99":657},[642,645,648,651,654],{"_105":179,"_95":180,"_158":181,"_160":175,"_161":141,"_162":146,"_163":119,"_107":182,"_101":32,"_165":183,"_167":184,"_168":22,"_169":-5,"_170":643,"_99":644},[],[157,174,180],{"_105":188,"_95":189,"_158":190,"_160":175,"_161":141,"_162":146,"_163":119,"_107":191,"_101":32,"_165":183,"_167":192,"_168":22,"_169":-5,"_170":646,"_99":647},[],[157,174,189],{"_105":196,"_95":197,"_158":198,"_160":175,"_161":141,"_162":146,"_163":119,"_107":199,"_101":32,"_165":183,"_167":200,"_168":22,"_169":-5,"_170":649,"_99":650},[],[157,174,197],{"_105":204,"_95":205,"_158":206,"_160":175,"_161":141,"_162":146,"_163":119,"_107":207,"_101":32,"_165":183,"_167":208,"_168":22,"_169":-5,"_170":652,"_99":653},[],[157,174,205],{"_105":212,"_95":213,"_158":214,"_160":175,"_161":141,"_162":146,"_163":119,"_107":215,"_101":32,"_165":183,"_167":216,"_168":22,"_169":-5,"_170":655,"_99":656},[],[157,174,213],[157,174],{"_105":221,"_95":222,"_158":223,"_160":159,"_161":141,"_162":146,"_163":119,"_107":224,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":659,"_99":672},[660,663,666,669],{"_105":227,"_95":228,"_158":229,"_160":223,"_161":141,"_162":146,"_163":119,"_107":230,"_101":32,"_165":183,"_167":231,"_168":22,"_169":-5,"_170":661,"_99":662},[],[157,222,228],{"_105":235,"_95":236,"_158":237,"_160":223,"_161":141,"_162":146,"_163":119,"_107":238,"_101":32,"_165":183,"_167":239,"_168":22,"_169":-5,"_170":664,"_99":665},[],[157,222,236],{"_105":243,"_95":244,"_158":245,"_160":223,"_161":141,"_162":146,"_163":119,"_107":246,"_101":32,"_165":183,"_167":247,"_168":22,"_169":-5,"_170":667,"_99":668},[],[157,222,244],{"_105":251,"_95":252,"_158":253,"_160":223,"_161":141,"_162":146,"_163":119,"_107":254,"_101":32,"_165":183,"_167":255,"_168":22,"_169":-5,"_170":670,"_99":671},[],[157,222,252],[157,222],{"_105":260,"_95":236,"_158":261,"_160":159,"_161":141,"_162":146,"_163":119,"_107":262,"_101":32,"_165":183,"_167":263,"_168":22,"_169":-5,"_170":674,"_99":675},[],[157,236],[157],{"_105":268,"_95":269,"_158":270,"_160":-5,"_161":141,"_162":146,"_163":119,"_107":271,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":678,"_99":760},[679,736,745,757],{"_105":274,"_95":275,"_158":276,"_160":270,"_161":141,"_162":146,"_163":119,"_107":277,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":680,"_99":735},[681,684,687,690,693,696,699,702,705,708,711,714,717,720,723,726,729,732],{"_105":280,"_95":281,"_158":282,"_160":276,"_161":141,"_162":146,"_163":119,"_107":283,"_101":32,"_165":183,"_167":284,"_168":22,"_169":-5,"_170":682,"_99":683},[],[269,275,281],{"_105":288,"_95":289,"_158":290,"_160":276,"_161":141,"_162":146,"_163":119,"_107":291,"_101":32,"_165":183,"_167":292,"_168":22,"_169":-5,"_170":685,"_99":686},[],[269,275,289],{"_105":296,"_95":297,"_158":298,"_160":276,"_161":141,"_162":146,"_163":119,"_107":299,"_101":32,"_165":183,"_167":300,"_168":22,"_169":-5,"_170":688,"_99":689},[],[269,275,297],{"_105":304,"_95":305,"_158":306,"_160":276,"_161":141,"_162":146,"_163":119,"_107":307,"_101":32,"_165":183,"_167":308,"_168":22,"_169":-5,"_170":691,"_99":692},[],[269,275,305],{"_105":312,"_95":313,"_158":314,"_160":276,"_161":141,"_162":146,"_163":119,"_107":315,"_101":32,"_165":183,"_167":316,"_168":22,"_169":-5,"_170":694,"_99":695},[],[269,275,313],{"_105":320,"_95":321,"_158":322,"_160":276,"_161":141,"_162":146,"_163":119,"_107":323,"_101":32,"_165":183,"_167":324,"_168":22,"_169":-5,"_170":697,"_99":698},[],[269,275,321],{"_105":328,"_95":329,"_158":330,"_160":276,"_161":141,"_162":146,"_163":119,"_107":331,"_101":32,"_165":183,"_167":332,"_168":22,"_169":-5,"_170":700,"_99":701},[],[269,275,329],{"_105":336,"_95":337,"_158":338,"_160":276,"_161":141,"_162":146,"_163":119,"_107":339,"_101":32,"_165":183,"_167":340,"_168":22,"_169":-5,"_170":703,"_99":704},[],[269,275,337],{"_105":344,"_95":345,"_158":346,"_160":276,"_161":141,"_162":146,"_163":119,"_107":347,"_101":32,"_165":183,"_167":348,"_168":22,"_169":-5,"_170":706,"_99":707},[],[269,275,345],{"_105":352,"_95":353,"_158":354,"_160":276,"_161":141,"_162":146,"_163":119,"_107":355,"_101":32,"_165":183,"_167":356,"_168":22,"_169":-5,"_170":709,"_99":710},[],[269,275,353],{"_105":360,"_95":361,"_158":362,"_160":276,"_161":141,"_162":146,"_163":119,"_107":363,"_101":32,"_165":183,"_167":364,"_168":22,"_169":-5,"_170":712,"_99":713},[],[269,275,361],{"_105":368,"_95":369,"_158":370,"_160":276,"_161":141,"_162":146,"_163":119,"_107":371,"_101":32,"_165":183,"_167":372,"_168":22,"_169":-5,"_170":715,"_99":716},[],[269,275,369],{"_105":376,"_95":377,"_158":378,"_160":276,"_161":141,"_162":146,"_163":119,"_107":379,"_101":32,"_165":183,"_167":380,"_168":22,"_169":-5,"_170":718,"_99":719},[],[269,275,377],{"_105":384,"_95":385,"_158":386,"_160":276,"_161":141,"_162":146,"_163":119,"_107":387,"_101":32,"_165":183,"_167":388,"_168":22,"_169":-5,"_170":721,"_99":722},[],[269,275,385],{"_105":392,"_95":393,"_158":394,"_160":276,"_161":141,"_162":146,"_163":119,"_107":395,"_101":32,"_165":183,"_167":396,"_168":22,"_169":-5,"_170":724,"_99":725},[],[269,275,393],{"_105":400,"_95":401,"_158":402,"_160":276,"_161":141,"_162":146,"_163":119,"_107":403,"_101":32,"_165":183,"_167":404,"_168":22,"_169":-5,"_170":727,"_99":728},[],[269,275,401],{"_105":408,"_95":409,"_158":410,"_160":276,"_161":141,"_162":146,"_163":119,"_107":411,"_101":32,"_165":183,"_167":412,"_168":22,"_169":-5,"_170":730,"_99":731},[],[269,275,409],{"_105":416,"_95":417,"_158":418,"_160":276,"_161":141,"_162":146,"_163":119,"_107":419,"_101":32,"_165":183,"_167":420,"_168":22,"_169":-5,"_170":733,"_99":734},[],[269,275,417],[269,275],{"_105":425,"_95":426,"_158":427,"_160":270,"_161":141,"_162":146,"_163":119,"_107":428,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":737,"_99":744},[738,741],{"_105":431,"_95":432,"_158":433,"_160":427,"_161":141,"_162":146,"_163":119,"_107":434,"_101":32,"_165":183,"_167":435,"_168":22,"_169":-5,"_170":739,"_99":740},[],[269,426,432],{"_105":439,"_95":440,"_158":441,"_160":427,"_161":141,"_162":146,"_163":119,"_107":442,"_101":32,"_165":183,"_167":443,"_168":22,"_169":-5,"_170":742,"_99":743},[],[269,426,440],[269,426],{"_105":448,"_95":449,"_158":450,"_160":270,"_161":141,"_162":146,"_163":119,"_107":451,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":746,"_99":756},[747,750,753],{"_105":454,"_95":455,"_158":456,"_160":450,"_161":141,"_162":146,"_163":119,"_107":457,"_101":32,"_165":183,"_167":458,"_168":22,"_169":-5,"_170":748,"_99":749},[],[269,449,455],{"_105":462,"_95":463,"_158":464,"_160":450,"_161":141,"_162":146,"_163":119,"_107":465,"_101":32,"_165":183,"_167":466,"_168":22,"_169":-5,"_170":751,"_99":752},[],[269,449,463],{"_105":470,"_95":471,"_158":472,"_160":450,"_161":141,"_162":146,"_163":119,"_107":473,"_101":32,"_165":183,"_167":474,"_168":22,"_169":-5,"_170":754,"_99":755},[],[269,449,471],[269,449],{"_105":479,"_95":480,"_158":481,"_160":270,"_161":141,"_162":146,"_163":119,"_107":482,"_101":32,"_165":183,"_167":483,"_168":22,"_169":-5,"_170":758,"_99":759},[],[269,480],[269],{"_105":488,"_95":489,"_158":490,"_160":-5,"_161":141,"_162":146,"_163":119,"_107":491,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":762,"_99":769},[763,766],{"_105":494,"_95":495,"_158":496,"_160":490,"_161":141,"_162":146,"_163":119,"_107":497,"_101":32,"_165":498,"_167":499,"_168":22,"_169":-5,"_170":764,"_99":765},[],[489,495],{"_105":503,"_95":504,"_158":505,"_160":490,"_161":141,"_162":146,"_163":119,"_107":506,"_101":32,"_165":498,"_167":507,"_168":22,"_169":-5,"_170":767,"_99":768},[],[489,504],[489],{"_105":512,"_95":513,"_158":514,"_160":-5,"_161":141,"_162":102,"_163":119,"_107":515,"_101":32,"_165":498,"_167":516,"_168":22,"_169":-5,"_170":771,"_99":772},[],[513],{"_105":520,"_95":521,"_158":522,"_160":-5,"_161":141,"_162":146,"_163":119,"_107":523,"_101":32,"_165":498,"_167":524,"_168":22,"_169":-5,"_170":774,"_99":775},[],[521],{"_105":528,"_95":529,"_158":530,"_160":-5,"_161":141,"_162":146,"_163":119,"_107":531,"_101":32,"_165":498,"_167":532,"_168":22,"_169":-5,"_170":777,"_99":778},[],[529],{"_105":536,"_95":537,"_158":538,"_160":-5,"_161":141,"_162":539,"_163":22,"_107":540,"_101":32,"_165":498,"_167":541,"_168":22,"_169":-5,"_170":780,"_99":781},[],[537],{"_105":545,"_95":546,"_158":547,"_160":-5,"_161":141,"_162":548,"_163":119,"_107":549,"_101":32,"_165":183,"_167":550,"_168":22,"_169":-5,"_170":783,"_99":784},[],[546],{"_105":554,"_95":555,"_158":556,"_160":-5,"_161":141,"_162":557,"_163":119,"_107":558,"_101":32,"_165":183,"_167":559,"_168":22,"_169":-5,"_170":786,"_99":787},[],[555],{"_105":563,"_95":236,"_158":564,"_160":-5,"_161":141,"_162":146,"_163":119,"_107":565,"_101":32,"_165":566,"_167":567,"_168":22,"_169":-5,"_170":789,"_99":790},[],[236],{"_105":571,"_95":572,"_158":573,"_160":-5,"_161":141,"_162":574,"_163":119,"_107":575,"_101":32,"_165":183,"_167":576,"_168":22,"_169":-5,"_170":792,"_99":793},[],[572],{"_105":580,"_95":581,"_158":582,"_160":-5,"_161":141,"_162":583,"_163":22,"_107":584,"_101":32,"_165":183,"_167":585,"_168":22,"_169":-5,"_170":795,"_99":796},[],[581],{"_105":589,"_95":590,"_158":591,"_160":-5,"_161":141,"_162":592,"_163":119,"_107":593,"_101":32,"_165":183,"_167":594,"_168":22,"_169":-5,"_170":798,"_99":799},[],[590],[638,640,642,645,648,651,654,658,660,663,666,669,673,677,679,681,684,687,690,693,696,699,702,705,708,711,714,717,720,723,726,729,732,736,738,741,745,747,750,753,757,761,763,766,770,773,776,779,782,785,788,791,794,797],{"_105":243,"_95":244,"_158":245,"_160":223,"_161":141,"_162":146,"_163":119,"_107":608,"_101":32,"_165":183,"_167":247,"_168":22,"_169":-5,"_99":802},[157,222,244],[],"upstream",{"_105":144,"_107":806,"_620":807,"_95":43,"_142":106,"_101":146,"_143":622,"_145":623,"_624":625,"_109":-5,"_152":22,"_111":112,"_151":94,"_16":122,"_150":96},["D",1743706288161],["D",1743706288161],"showCompareCallout","pull","ahead",9,"behind","templates",[],"actionData","errors"]

OpenTownie

{project.name}

Create New Branch

Login

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

Hi

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