';\n \n // Previous button\n if (pagination.hasPrevPage) {\n html += `Previous`;\n } else {\n html += 'Previous';\n }\n \n // Page numbers\n const maxPages = 5;\n const startPage = Math.max(1, pagination.currentPage - Math.floor(maxPages / 2));\n const endPage = Math.min(pagination.totalPages, startPage + maxPages - 1);\n \n for (let i = startPage; i <= endPage; i++) {\n if (i === pagination.currentPage) {\n html += `${i}`;\n } else {\n html += `${i}`;\n }\n }\n \n // Next button\n if (pagination.hasNextPage) {\n html += `Next`;\n } else {\n html += 'Next';\n }\n \n html += '

';\n return html;\n}",[],[183,190,197,244,258],[183,190,197,244],{"_106":266,"_98":267,"_156":268,"_158":198,"_159":142,"_160":199,"_162":121,"_108":269,"_102":29,"_164":165,"_166":-5,"_167":25,"_168":-5,"_169":270,"_101":301},"4728a860-2c55-11f0-a05f-569c3dd06744","views","b5e31c2c-920e-4a72-a680-e6f789d10477",["D",1746740522600],[271,279,286,294],{"_106":272,"_98":273,"_156":274,"_158":268,"_159":142,"_160":199,"_162":25,"_108":275,"_102":29,"_164":213,"_166":276,"_167":25,"_168":-5,"_169":277,"_101":278},"47288ed4-2c55-11f0-a05f-569c3dd06744","dashboard.ts","47288f74-2c55-11f0-a05f-569c3dd06744",["D",1746740522600],"import { renderLayout } from \"./layout.ts\";\nimport { formatNumber, formatPrice } from \"../utils/formatters.ts\";\n\ninterface UserSummaryRow {\n user_id: string;\n username: string;\n request_count: number;\n total_input_tokens: number;\n total_output_tokens: number;\n total_cache_read_tokens: number;\n total_cache_write_tokens: number;\n total_price: number;\n total_images: number;\n used_inference_data?: boolean;\n}\n\nexport function renderDashboard(data: UserSummaryRow[]): string {\n // Calculate totals\n const totalUsers = data.length;\n const totalPrice = data.reduce((sum, row) => sum + (row.total_price || 0), 0);\n \n // Generate the content\n const content = `\n

Usage by User

Total Users: ${totalUsers}

Total Price: ${formatPrice(totalPrice)}

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ${data.map(row => `\n \n \n \n \n \n \n \n \n \n \n \n `).join(\"\")}\n \n

User ID	Username	Requests	Input Tokens	Output Tokens	Cache Read	Cache Write	Total Price	Images
${row.user_id}	${row.username}	${formatNumber(row.request_count)}	${formatNumber(row.total_input_tokens)} ${row.used_inference_data ? 'I' : ''}	${formatNumber(row.total_output_tokens)} ${row.used_inference_data ? 'I' : ''}	${formatNumber(row.total_cache_read_tokens)} ${row.used_inference_data ? 'I' : ''}	${formatNumber(row.total_cache_write_tokens)} ${row.used_inference_data ? 'I' : ''}	${formatPrice(row.total_price)} ${row.used_inference_data ? 'I' : ''}	${formatNumber(row.total_images)}

\n `;\n \n return renderLayout(content, {\n title: \"Usage Dashboard - User Summary\",\n activeTab: \"grouped\"\n });\n}",[],[183,190,197,267,273],{"_106":280,"_98":219,"_156":281,"_158":268,"_159":142,"_160":199,"_162":25,"_108":282,"_102":29,"_164":213,"_166":283,"_167":25,"_168":-5,"_169":284,"_101":285},"472891ea-2c55-11f0-a05f-569c3dd06744","47289258-2c55-11f0-a05f-569c3dd06744",["D",1746740522600],"import { renderLayout } from \"./layout.ts\";\nimport { formatNumber, formatPrice, formatDate } from \"../utils/formatters.ts\";\nimport { renderPaginationControls } from \"../utils/pagination.ts\";\n\ninterface InferenceCallRow {\n id: number;\n usage_id: number;\n username: string;\n user_id: string;\n val_id: string;\n branch_id: string | null;\n timestamp: number;\n input_tokens: number | null;\n output_tokens: number | null;\n cache_read_tokens: number | null;\n cache_write_tokens: number | null;\n step_type: string | null;\n price: number | null;\n finish_reason: string | null;\n}\n\ninterface PaginationData {\n currentPage: number;\n totalPages: number;\n pageSize: number;\n totalItems: number;\n hasNextPage: boolean;\n hasPrevPage: boolean;\n}\n\nexport function renderInferenceCalls(\n data: InferenceCallRow[], \n pagination: PaginationData, \n baseUrl: string,\n filtered: boolean = false\n): string {\n // Calculate totals\n const totalCalls = pagination.totalItems;\n const totalPrice = data.reduce((sum, row) => sum + (row.price || 0), 0);\n \n // Generate pagination controls\n const paginationControls = renderPaginationControls(pagination, baseUrl);\n \n // Generate the content\n const content = `\n

Inference Calls ${filtered ? '(Filtered)' : ''}

Total Inference Calls: ${totalCalls}

Total Price: ${formatPrice(totalPrice)}

\n ${filtered ? '

Clear filter

' : ''}\n

\n \n ${paginationControls}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ${data.map(row => `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `).join(\"\")}\n \n

ID	Usage ID	User	User ID	Val ID	Branch ID	Timestamp	Input	Output	Cache Read	Cache Write	Step Type	Price	Finish
${row.id}	${row.usage_id}	${row.username}	${row.user_id}	${row.val_id}	${row.branch_id ?? \"main\"}	${formatDate(row.timestamp)}	${formatNumber(row.input_tokens)}	${formatNumber(row.output_tokens)}	${formatNumber(row.cache_read_tokens)}	${formatNumber(row.cache_write_tokens)}	${row.step_type \|\| '-'}	${formatPrice(row.price)}	${row.finish_reason \|\| '-'}

\n \n ${paginationControls}\n

\n `;\n \n return renderLayout(content, {\n title: \"Usage Dashboard - Inference Calls\",\n activeTab: \"inference\"\n });\n}",[],[183,190,197,267,219],{"_106":287,"_98":288,"_156":289,"_158":268,"_159":142,"_160":199,"_162":25,"_108":290,"_102":29,"_164":213,"_166":291,"_167":25,"_168":-5,"_169":292,"_101":293},"472894a6-2c55-11f0-a05f-569c3dd06744","layout.ts","47289514-2c55-11f0-a05f-569c3dd06744",["D",1746740522600],"/**\n * Common layout for all dashboard pages\n */\n\nexport interface LayoutOptions {\n title: string;\n activeTab?: string;\n scripts?: string[];\n styles?: string[];\n}\n\nexport function renderLayout(content: string, options: LayoutOptions): string {\n const { title, activeTab = \"dashboard\", scripts = [], styles = [] } = options;\n \n // Default styles\n const defaultStyles = `\n body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n line-height: 1.6;\n color: #333;\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n h1, h2 {\n color: #2c3e50;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n margin-bottom: 30px;\n font-size: 14px;\n }\n th, td {\n padding: 8px 12px;\n text-align: left;\n border-bottom: 1px solid #ddd;\n }\n th {\n background-color: #f8f9fa;\n font-weight: 600;\n position: sticky;\n top: 0;\n }\n tr:hover {\n background-color: #f5f5f5;\n }\n .container {\n margin-bottom: 40px;\n }\n .price {\n font-weight: bold;\n }\n .summary {\n background-color: #f8f9fa;\n padding: 15px;\n border-radius: 5px;\n margin-bottom: 20px;\n }\n .tabs {\n display: flex;\n margin-bottom: 20px;\n }\n .tab {\n padding: 10px 20px;\n cursor: pointer;\n border: 1px solid #ddd;\n background-color: #f8f9fa;\n margin-right: 5px;\n border-radius: 5px 5px 0 0;\n text-decoration: none;\n color: #333;\n }\n .tab.active {\n background-color: #fff;\n border-bottom: 1px solid #fff;\n font-weight: bold;\n }\n .pagination {\n display: flex;\n justify-content: center;\n margin: 20px 0;\n }\n .page-link {\n padding: 8px 12px;\n margin: 0 5px;\n border: 1px solid #ddd;\n text-decoration: none;\n color: #333;\n border-radius: 3px;\n }\n .page-link.current {\n background-color: #f0f0f0;\n font-weight: bold;\n }\n .page-link.disabled {\n color: #aaa;\n cursor: not-allowed;\n }\n .collapsible {\n cursor: pointer;\n }\n .inference-details {\n display: none;\n background-color: #f9f9f9;\n padding: 10px;\n margin: 10px 0;\n border-radius: 5px;\n }\n .inference-details.visible {\n display: block;\n }\n .comparison {\n display: flex;\n gap: 20px;\n }\n .comparison-item {\n flex: 1;\n }\n .discrepancy {\n color: #e74c3c;\n font-weight: bold;\n }\n .badge {\n display: inline-block;\n padding: 2px 6px;\n border-radius: 10px;\n font-size: 12px;\n font-weight: bold;\n margin-left: 5px;\n }\n .badge-info {\n background-color: #3498db;\n color: white;\n }\n .badge-warning {\n background-color: #f39c12;\n color: white;\n }\n .loading {\n text-align: center;\n padding: 20px;\n }\n `;\n \n // Combine all styles\n const allStyles = [defaultStyles, ...styles].join(\"\\n\");\n \n // Default scripts\n const defaultScripts = `\n document.addEventListener('DOMContentLoaded', function() {\n // Tab navigation\n document.querySelectorAll('.tab').forEach(tab => {\n tab.addEventListener('click', function(e) {\n if (this.getAttribute('href') === '#') {\n e.preventDefault();\n const tabId = this.getAttribute('data-tab');\n \n // Hide all tab contents\n document.querySelectorAll('.tab-content').forEach(content => {\n content.classList.remove('active');\n });\n \n // Deactivate all tabs\n document.querySelectorAll('.tab').forEach(tab => {\n tab.classList.remove('active');\n });\n \n // Activate the selected tab and content\n document.getElementById(tabId).classList.add('active');\n this.classList.add('active');\n }\n });\n });\n });\n `;\n \n // Combine all scripts\n const allScripts = [defaultScripts, ...scripts].join(\"\\n\");\n \n return `\n \n \n \n \n \n ${title}\n \n \n \n

Usage Dashboard

\n \n

\n Grouped by User\n All Requests\n Inference Calls\n

\n \n ${content}\n \n \n \n \n `;\n}",[],[183,190,197,267,288],{"_106":295,"_98":227,"_156":296,"_158":268,"_159":142,"_160":199,"_162":25,"_108":297,"_102":29,"_164":213,"_166":298,"_167":25,"_168":-5,"_169":299,"_101":300},"47289ab4-2c55-11f0-a05f-569c3dd06744","47289b2c-2c55-11f0-a05f-569c3dd06744",["D",1746740522600],"import { renderLayout } from \"./layout.ts\";\nimport { formatNumber, formatPrice, formatDate, formatBoolean } from \"../utils/formatters.ts\";\nimport { renderPaginationControls } from \"../utils/pagination.ts\";\n\ninterface RequestRow {\n id: number;\n username: string;\n timestamp: number;\n val_id: string;\n branch_id: string | null;\n input_tokens: number | null;\n output_tokens: number | null;\n cache_read_tokens: number | null;\n cache_write_tokens: number | null;\n model: string;\n price: number | null;\n finish_reason: string | null;\n num_images: number | null;\n our_api_token: number;\n}\n\ninterface PaginationData {\n currentPage: number;\n totalPages: number;\n pageSize: number;\n totalItems: number;\n hasNextPage: boolean;\n hasPrevPage: boolean;\n}\n\nexport function renderRequests(data: RequestRow[], pagination: PaginationData, baseUrl: string): string {\n // Calculate totals\n const totalRequests = pagination.totalItems;\n const totalPrice = data.reduce((sum, row) => sum + (row.price || 0), 0);\n \n // Generate pagination controls\n const paginationControls = renderPaginationControls(pagination, baseUrl);\n \n // Client-side script for collapsible rows\n const script = `\n // Function to toggle inference details\n function toggleInferenceDetails(usageId) {\n const detailsElement = document.getElementById('inference-' + usageId);\n \n if (detailsElement) {\n // Toggle visibility of existing details\n detailsElement.classList.toggle('visible');\n } else {\n // Create a placeholder while loading\n const row = document.querySelector('tr[data-id=\"' + usageId + '\"]');\n const colSpan = row.querySelectorAll('td').length;\n const newRow = document.createElement('tr');\n newRow.id = 'inference-' + usageId;\n newRow.classList.add('inference-details', 'visible');\n newRow.innerHTML = 'Loading inference calls...';\n row.parentNode.insertBefore(newRow, row.nextSibling);\n \n // Fetch the inference calls data\n fetch('/api/inference-calls?usage_id=' + usageId)\n .then(response => response.json())\n .then(data => {\n // Calculate totals from inference calls\n const totalInputTokens = data.data.reduce((sum, call) => sum + (call.input_tokens || 0), 0);\n const totalOutputTokens = data.data.reduce((sum, call) => sum + (call.output_tokens || 0), 0);\n const totalCacheReadTokens = data.data.reduce((sum, call) => sum + (call.cache_read_tokens || 0), 0);\n const totalCacheWriteTokens = data.data.reduce((sum, call) => sum + (call.cache_write_tokens || 0), 0);\n const totalPrice = data.data.reduce((sum, call) => sum + (call.price || 0), 0);\n \n // Get the usage row data\n const usageRow = document.querySelector('tr[data-id=\"' + usageId + '\"]');\n const usageInputTokens = parseInt(usageRow.getAttribute('data-input-tokens') || '0');\n const usageOutputTokens = parseInt(usageRow.getAttribute('data-output-tokens') || '0');\n const usageCacheReadTokens = parseInt(usageRow.getAttribute('data-cache-read-tokens') || '0');\n const usageCacheWriteTokens = parseInt(usageRow.getAttribute('data-cache-write-tokens') || '0');\n const usagePrice = parseFloat(usageRow.getAttribute('data-price') || '0');\n \n // Check for discrepancies\n const inputDiscrepancy = totalInputTokens !== usageInputTokens && usageInputTokens !== 0;\n const outputDiscrepancy = totalOutputTokens !== usageOutputTokens && usageOutputTokens !== 0;\n const cacheReadDiscrepancy = totalCacheReadTokens !== usageCacheReadTokens && usageCacheReadTokens !== 0;\n const cacheWriteDiscrepancy = totalCacheWriteTokens !== usageCacheWriteTokens && usageCacheWriteTokens !== 0;\n const priceDiscrepancy = Math.abs(totalPrice - usagePrice) > 0.0001 && usagePrice !== 0;\n \n // Format numbers for display\n const formatNumber = num => num.toLocaleString();\n const formatPrice = price => '$' + price.toFixed(4);\n \n // Build the HTML for the inference calls\n let html = '';\n \n // Add comparison summary\n html += '

';\n html += '

Usage Record

';\n html += '

Input Tokens: ' + formatNumber(usageInputTokens) + '

';\n html += '

Output Tokens: ' + formatNumber(usageOutputTokens) + '

';\n html += '

Cache Read: ' + formatNumber(usageCacheReadTokens) + '

';\n html += '

Cache Write: ' + formatNumber(usageCacheWriteTokens) + '

';\n html += '

Price: ' + formatPrice(usagePrice) + '

';\n html += '

';\n \n html += '

';\n html += '

Inference Calls (' + data.data.length + ')

';\n html += '

Input Tokens: ' + formatNumber(totalInputTokens) + (inputDiscrepancy ? ' Mismatch!' : '') + '

';\n html += '

Output Tokens: ' + formatNumber(totalOutputTokens) + (outputDiscrepancy ? ' Mismatch!' : '') + '

';\n html += '

Cache Read: ' + formatNumber(totalCacheReadTokens) + (cacheReadDiscrepancy ? ' Mismatch!' : '') + '

';\n html += '

Cache Write: ' + formatNumber(totalCacheWriteTokens) + (cacheWriteDiscrepancy ? ' Mismatch!' : '') + '

';\n html += '

Price: ' + formatPrice(totalPrice) + (priceDiscrepancy ? ' Mismatch!' : '') + '

';\n html += '

';\n \n // Add inference calls table\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n \n data.data.forEach(call => {\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n });\n \n html += '

ID	Timestamp	Step Type	Input	Output	Cache Read	Cache Write	Price	Finish
' + call.id + '	' + new Date(call.timestamp).toLocaleString(\"en-US\", { timeZone: \"America/New_York\" }) + '	' + (call.step_type \|\| '-') + '	' + (call.input_tokens ? formatNumber(call.input_tokens) : '-') + '	' + (call.output_tokens ? formatNumber(call.output_tokens) : '-') + '	' + (call.cache_read_tokens ? formatNumber(call.cache_read_tokens) : '-') + '	' + (call.cache_write_tokens ? formatNumber(call.cache_write_tokens) : '-') + '	' + (call.price ? formatPrice(call.price) : '-') + '	' + (call.finish_reason \|\| '-') + '

';\n html += '';\n \n // Update the details row\n document.getElementById('inference-' + usageId).innerHTML = html;\n })\n .catch(error => {\n document.getElementById('inference-' + usageId).innerHTML = \n 'Error loading inference calls: ' + error.message + '';\n });\n }\n }\n \n // Add click event listeners to all collapsible rows\n document.addEventListener('DOMContentLoaded', function() {\n document.querySelectorAll('.collapsible').forEach(row => {\n row.addEventListener('click', function() {\n const usageId = this.getAttribute('data-id');\n toggleInferenceDetails(usageId);\n });\n });\n });\n `;\n \n // Generate the content\n const content = `\n

All Usage Requests

Total Requests: ${totalRequests}

Total Price: ${formatPrice(totalPrice)}

Click on a row to see associated inference calls

\n \n ${paginationControls}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ${data.map(row => `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `).join(\"\")}\n \n

ID	User	Timestamp	Val ID	Branch ID	Input	Output	Cache Read	Cache Write	Model	Price	Finish	Images	Our API
${row.id}	${row.username}	${formatDate(row.timestamp)}	${row.val_id}	${row.branch_id ?? \"main\"}	${formatNumber(row.input_tokens)}	${formatNumber(row.output_tokens)}	${formatNumber(row.cache_read_tokens)}	${formatNumber(row.cache_write_tokens)}	${row.model}	${formatPrice(row.price)}	${row.finish_reason \|\| '-'}	${formatNumber(row.num_images)}	${formatBoolean(row.our_api_token)}

\n \n ${paginationControls}\n

\n `;\n \n return renderLayout(content, {\n title: \"Usage Dashboard - All Requests\",\n activeTab: \"requests\",\n scripts: [script]\n });\n}",[],[183,190,197,267,227],[183,190,197,267],{"_106":303,"_98":304,"_156":305,"_158":198,"_159":142,"_160":199,"_162":121,"_108":306,"_102":29,"_164":176,"_166":307,"_167":25,"_168":-5,"_169":308,"_101":309},"47288326-2c55-11f0-a05f-569c3dd06744","README.md","4728842a-2c55-11f0-a05f-569c3dd06744",["D",1746740522600],"# Usage Dashboard\n\nA dashboard for monitoring API usage and inference calls.\n\n## Features\n\n- User summary view with aggregated usage data\n- All requests view with collapsible rows showing inference calls\n- Inference calls view with filtering options\n- Pagination for handling large datasets\n- Comparison between usage data and inference calls for debugging\n- Fallback to inference data when usage data is missing\n\n## Architecture\n\nThe dashboard is built with a modular architecture:\n\n```\n/usage-dashboard/\n index.ts # Main entry point and routing\n auth.ts # Authentication logic\n /api/\n index.ts # API request handler\n requests.ts # API endpoints for requests data\n inference-calls.ts # API endpoints for inference calls\n user-summary.ts # API endpoints for user summary data\n /views/\n layout.ts # Common layout template\n dashboard.ts # User summary view\n requests.ts # Requests view with collapsible rows\n inference-calls.ts # Inference calls view\n /utils/\n formatters.ts # Shared formatting utilities\n pagination.ts # Pagination utilities\n```\n\n## Usage\n\nAccess the dashboard at the root URL. Authentication is required.\n\n### Views\n\n1. **User Summary** - Shows aggregated usage data by user\n - When usage data is missing, it falls back to inference call data\n - Indicated with an \"I\" badge\n\n2. **All Requests** - Shows all usage requests with pagination\n - Click on a row to see associated inference calls\n - Compares usage data with inference call totals\n - Highlights discrepancies for debugging\n\n3. **Inference Calls** - Shows all inference calls with pagination\n - Can be filtered by usage_id\n - Links back to the associated request\n\n### API Endpoints\n\n- `/api/requests` - Get paginated requests\n- `/api/requests?usage_id=123` - Get a specific request\n- `/api/inference-calls` - Get paginated inference calls\n- `/api/inference-calls?usage_id=123` - Get inference calls for a specific request\n- `/api/user-summary` - Get user summary data\n\n## Debugging\n\nThe dashboard includes several features for debugging:\n\n1. **Collapsible Rows** - Click on a request to see its inference calls\n2. **Token Comparison** - Compare tokens and price between usage and inference data\n3. **Discrepancy Highlighting** - Visual indicators when data doesn't match\n4. **Inference Data Fallback** - Use inference data when usage data is missing",[],[183,190,197,304],{"_106":311,"_98":312,"_156":313,"_158":198,"_159":142,"_160":199,"_162":121,"_108":314,"_102":29,"_164":213,"_166":315,"_167":25,"_168":-5,"_169":316,"_101":317},"47287d36-2c55-11f0-a05f-569c3dd06744","auth.ts","47287dcc-2c55-11f0-a05f-569c3dd06744",["D",1746740522600],"import * as bcrypt from \"https://deno.land/x/bcrypt@v0.3.0/mod.ts\";\n\n/**\n * Basic Auth middleware for the usage dashboard\n * Returns null if authentication is successful, or a Response if it fails\n */\nexport async function basicAuthMiddleware(req: Request): Promise {\n const realm = \"Usage Dashboard\";\n const unauthorizedResponse = new Response(\"Unauthorized\", {\n status: 401,\n headers: {\n \"WWW-Authenticate\": `Basic realm=\"${realm}\"`,\n \"Content-Type\": \"text/plain\",\n },\n });\n\n // Get the Authorization header\n const authHeader = req.headers.get(\"Authorization\");\n if (!authHeader || !authHeader.startsWith(\"Basic \")) {\n return unauthorizedResponse;\n }\n\n try {\n // Extract the base64 encoded credentials\n const base64Credentials = authHeader.split(\" \")[1];\n const credentials = atob(base64Credentials);\n\n // Split into username and password\n const [username, password] = credentials.split(\":\");\n\n if (!password) {\n return unauthorizedResponse;\n }\n\n // Ask Steve for this password\n const hashedPassword = \"$2a$12$aA2HYmj21jK1TKSFLFOutOlXsCrKFnMvyeblySLwcgSqxt05nEeei\";\n\n // Compare the provided password with the stored hash\n const passwordMatches = await bcrypt.compare(password, hashedPassword);\n\n if (!passwordMatches) {\n return unauthorizedResponse;\n }\n\n // Authentication successful\n return null;\n } catch (error) {\n console.error(\"Authentication error:\", error);\n return unauthorizedResponse;\n }\n}",[],[183,190,197,312],{"_106":319,"_98":210,"_156":320,"_158":198,"_159":142,"_160":199,"_162":25,"_108":321,"_102":29,"_164":322,"_166":323,"_167":25,"_168":324,"_169":325,"_101":326},"47287f16-2c55-11f0-a05f-569c3dd06744","47287f98-2c55-11f0-a05f-569c3dd06744",["D",1746740522600],"http","import { basicAuthMiddleware } from \"./auth.ts\";\nimport { handleApiRequest } from \"./api/index.ts\";\nimport { getRequests } from \"./api/requests.ts\";\nimport { getUserSummary } from \"./api/user-summary.ts\";\nimport { getInferenceCalls } from \"./api/inference-calls.ts\";\nimport { renderDashboard } from \"./views/dashboard.ts\";\nimport { renderRequests } from \"./views/requests.ts\";\nimport { renderInferenceCalls } from \"./views/inference-calls.ts\";\n\n/**\n * Main entry point for the usage dashboard\n */\nexport default async function(req: Request) {\n // Check authentication first\n const authResponse = await basicAuthMiddleware(req);\n if (authResponse) {\n return authResponse;\n }\n\n // Parse the URL\n const url = new URL(req.url);\n const path = url.pathname;\n\n // Handle API requests\n if (path.startsWith(\"/api/\")) {\n return handleApiRequest(req);\n }\n\n // Handle page requests\n try {\n if (path === \"/\" || path === \"\") {\n // User summary page\n const userData = await getUserSummary();\n return new Response(renderDashboard(userData), {\n headers: { \"Content-Type\": \"text/html\" }\n });\n }\n else if (path === \"/requests\") {\n // Requests page\n const usageId = url.searchParams.get(\"usage_id\");\n const requestsData = await getRequests(url);\n return new Response(renderRequests(\n requestsData.data, \n requestsData.pagination, \n url.toString()\n ), {\n headers: { \"Content-Type\": \"text/html\" }\n });\n }\n else if (path === \"/inference\") {\n // Inference calls page\n const inferenceData = await getInferenceCalls(url);\n return new Response(renderInferenceCalls(\n inferenceData.data, \n inferenceData.pagination, \n url.toString(),\n inferenceData.filtered\n ), {\n headers: { \"Content-Type\": \"text/html\" }\n });\n }\n else {\n // 404 page\n return new Response(\"Page not found\", {\n status: 404,\n headers: { \"Content-Type\": \"text/plain\" }\n });\n }\n } catch (error) {\n console.error(\"Error rendering page:\", error);\n return new Response(`Error: ${error.message}`, {\n status: 500,\n headers: { \"Content-Type\": \"text/plain\" }\n });\n }\n}","townie-usage",[],[183,190,197,210],[183,190,197],{"_106":329,"_98":330,"_156":331,"_158":191,"_159":142,"_160":332,"_162":25,"_108":333,"_102":334,"_164":213,"_166":335,"_167":25,"_168":-5,"_169":336,"_101":337},"a4af147a-3654-11f0-adee-9e149126039e","queries.tsx","b89e7360-29f5-11f0-9d70-569c3dd06744",138,["D",1747839761651],13,"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { calculateCost } from \"../utils/calculateCost.tsx\";\nimport { INFERENCE_CALLS_TABLE, USAGE_TABLE } from \"./schema.tsx\";\n\n// Eventually we'll have a user database,\n// but in the meantime, we can cache user info in memory\nconst userIdCache: { [key: string]: any } = {};\nexport async function getUser(bearerToken: string) {\n if (userIdCache[bearerToken]) return userIdCache[bearerToken];\n\n const vt = new ValTown({ bearerToken });\n const me = await vt.me.profile.retrieve();\n userIdCache[bearerToken] = me;\n return me;\n}\n\nasync function last24Hours(userId: string) {\n const usage = await sqlite.execute(\n `SELECT \n sum(price) \n FROM ${USAGE_TABLE} \n WHERE \n user_id = ? \n AND timestamp > ?\n AND our_api_token = 1\n `,\n [userId, new Date().getTime() - 24 * 60 * 60 * 1000],\n );\n return usage.rows[0][0] || 0;\n}\n\n// These are reasonable placeholders.\n// If this takes off, we should give less free stuff (or maybe a limited free trial of $5 ever)\n// and then let folks buy credits via Stripe.\nconst DAILY_FREE_LIMIT = 0.5; // 50 cents per day\nconst DAILY_PRO_LIMIT = 5; // $5 per day\n\nconst LIMITS: { [key: string]: number } = {\n \"devto\": 100, // hardcoded limit of $100 per day for dev.to, billed later\n \"jonbo\": 20, // hardcoded limit of $20 per day for jonbo, billed later,\n \"diegoivo\": 50, // hardcoded limit of $50 per day for diegoivo, billed later,\n \"charmaine\": 20, // she works at val town\n \"dthyresson\": 6,\n \"lightweight\": 10, // brad noble, added temporarily for prep for town hall on 5/21/25\n};\nexport async function overLimit(bearerToken: string) {\n const user = await getUser(bearerToken);\n const last24HourUsage = await last24Hours(user.id);\n\n const limit = LIMITS[user.username] ?? (user.tier === \"pro\" ? DAILY_PRO_LIMIT : DAILY_FREE_LIMIT);\n\n return last24HourUsage >= limit;\n}\n\nexport async function insertInferenceCall({\n usage_id,\n input_tokens,\n output_tokens,\n cache_read_tokens,\n cache_write_tokens,\n step_type,\n finish_reason,\n}: {\n usage_id: number;\n input_tokens: number;\n output_tokens: number;\n cache_read_tokens?: number;\n cache_write_tokens?: number;\n step_type: string;\n finish_reason: string;\n}) {\n const price = calculateCost({\n input_tokens,\n output_tokens,\n cache_read_tokens,\n cache_write_tokens,\n });\n try {\n await sqlite.execute(\n `INSERT INTO ${INFERENCE_CALLS_TABLE} (\n usage_id,\n timestamp,\n input_tokens,\n output_tokens,\n cache_read_tokens,\n cache_write_tokens,\n price,\n step_type,\n finish_reason\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)\n `,\n [\n usage_id,\n Date.now(),\n input_tokens,\n output_tokens,\n cache_read_tokens || 0,\n cache_write_tokens || 0,\n price,\n step_type,\n finish_reason,\n ],\n );\n } catch (e) {\n console.error(e);\n }\n}\n\nexport async function startTrackingUsage({\n bearerToken,\n val_id,\n branch_id,\n model,\n our_api_token,\n num_images,\n}: {\n bearerToken: string;\n val_id: string;\n branch_id: string;\n model: string;\n our_api_token: boolean;\n num_images: number;\n}) {\n const user = await getUser(bearerToken);\n const { lastInsertRowid } = await sqlite.execute(\n `INSERT INTO ${USAGE_TABLE} (\n user_id,\n username,\n timestamp,\n val_id,\n branch_id,\n model,\n our_api_token,\n num_images\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)\n `,\n [\n user.id,\n user.username,\n Date.now(),\n val_id,\n branch_id,\n model,\n our_api_token ? 1 : 0,\n num_images,\n ],\n );\n return lastInsertRowid;\n}\n\nexport async function finishTrackingUsage({\n rowid,\n input_tokens,\n output_tokens,\n cache_read_tokens,\n cache_write_tokens,\n finish_reason,\n}: {\n rowid: number;\n input_tokens?: number;\n output_tokens?: number;\n cache_read_tokens?: number;\n cache_write_tokens?: number;\n finish_reason: string;\n}) {\n const price = calculateCost({\n input_tokens,\n output_tokens,\n cache_read_tokens,\n cache_write_tokens,\n });\n try {\n await sqlite.execute(\n `UPDATE ${USAGE_TABLE} SET\n input_tokens = ?,\n output_tokens = ?,\n cache_read_tokens = ?,\n cache_write_tokens = ?,\n price = ?,\n finish_reason = ?\n WHERE rowid = ?\n `,\n [\n input_tokens || 0,\n output_tokens || 0,\n cache_read_tokens || 0,\n cache_write_tokens || 0,\n price,\n finish_reason,\n rowid,\n ],\n );\n } catch (e) {\n console.error(e);\n }\n}",[],[183,190,330],{"_106":339,"_98":340,"_156":341,"_158":191,"_159":142,"_160":199,"_162":25,"_108":342,"_102":343,"_164":213,"_166":344,"_167":25,"_168":-5,"_169":345,"_101":346},"4728ba6c-2c55-11f0-a05f-569c3dd06744","schema.tsx","b89e8e0e-29f5-11f0-9d70-569c3dd06744",["D",1746740522600],5,"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\nexport const USAGE_TABLE = \"townie_usage\";\nexport const INFERENCE_CALLS_TABLE = \"townie_inference_calls\";\n\nexport interface Usage {\n user_id: string;\n username: string;\n timestamp: number;\n finish_timestamp?: number;\n val_id: string;\n branch_id: string;\n input_tokens?: number;\n output_tokens?: number;\n cache_read_tokens?: number;\n cache_write_tokens?: number;\n model: string;\n price?: number;\n finish_reason?: string;\n num_images?: number;\n our_api_token: boolean;\n}\n\nasync function createTables() {\n // archive a table\n // await sqlite.execute(\n // `ALTER TABLE ${USAGE_TABLE} RENAME TO ${USAGE_TABLE}_1`,\n // );\n // create a new table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${USAGE_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id TEXT NOT NULL,\n username TEXT NOT NULL,\n timestamp INTEGER NOT NULL,\n val_id TEXT NOT NULL,\n branch_id TEXT,\n input_tokens INTEGER,\n output_tokens INTEGER,\n cache_read_tokens INTEGER,\n cache_write_tokens INTEGER,\n model TEXT,\n price REAL,\n finish_reason TEXT,\n num_images INTEGER,\n our_api_token INTEGER NOT NULL,\n finish_timestamp INTEGER\n )\n `);\n // add all the data from the old table\n // await sqlite.execute(`INSERT INTO ${USAGE_TABLE} SELECT * FROM ${USAGE_TABLE}_1`);\n\n // TODO add an index on usage_id\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${INFERENCE_CALLS_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n usage_id INTEGER NOT NULL REFERENCES ${USAGE_TABLE}(id),\n timestamp INTEGER NOT NULL,\n input_tokens INTEGER,\n output_tokens INTEGER,\n cache_read_tokens INTEGER,\n cache_write_tokens INTEGER,\n price REAL,\n step_type TEXT,\n finish_reason TEXT\n )\n `);\n}\n\nasync function deleteTables() {\n await sqlite.execute(`DROP TABLE IF EXISTS ${USAGE_TABLE}`);\n await sqlite.execute(`DROP TABLE IF EXISTS ${INFERENCE_CALLS_TABLE}`);\n}\n\n// await deleteTables();\nawait createTables();",[],[183,190,340],[183,190],{"_106":349,"_98":350,"_156":351,"_158":184,"_159":142,"_160":185,"_162":121,"_108":352,"_102":29,"_164":165,"_166":-5,"_167":25,"_168":-5,"_169":353,"_101":420},"83344c56-29c6-11f0-8eda-569c3dd06744","routes","53cad5af-5e11-4135-8696-8b091a6b7fb3",["D",1746459302919],[354,363,371,379,387,395,403,412],{"_106":355,"_98":356,"_156":357,"_158":351,"_159":142,"_160":358,"_162":121,"_108":359,"_102":185,"_164":213,"_166":360,"_167":25,"_168":-5,"_169":361,"_101":362},"fca29922-2f6f-11f0-994d-569c3dd06744","create-branch.ts","cc02deaa-b1f7-4bc4-8580-6022f6b1e853",54,["D",1747081847467],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.post(\"/\", async (c) => {\n const bearerToken = c.get(\"token\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const { projectId, branchName } = await c.req.json();\n\n if (!projectId) {\n return Response.json(\"Please provide a projectId\", { status: 400 });\n }\n\n if (!branchName) {\n return Response.json(\"Please provide a branchName\", { status: 400 });\n }\n\n // Validate branch name (only letters, numbers, and dashes)\n const branchNameRegex = /^[a-zA-Z0-9-]+$/;\n if (!branchNameRegex.test(branchName)) {\n return Response.json({\n error: \"Branch name can only contain letters, numbers, and dashes\",\n }, { status: 400 });\n }\n\n const vt = new ValTown({ bearerToken });\n\n try {\n const newBranch = await vt.projects.branches.create(projectId, {\n name: branchName,\n });\n\n return c.json({ branch: newBranch });\n } catch (error) {\n console.error(\"Error creating branch:\", error);\n return Response.json({\n error: error instanceof Error ? error.message : \"Failed to create branch\",\n }, { status: 500 });\n }\n});\n\nexport default app;\n",[],[183,350,356],{"_106":364,"_98":365,"_156":366,"_158":351,"_159":142,"_160":358,"_162":121,"_108":367,"_102":185,"_164":213,"_166":368,"_167":25,"_168":-5,"_169":369,"_101":370},"fca29e40-2f6f-11f0-994d-569c3dd06744","create-project.ts","e2e3ecff-b3d7-4fce-aece-e2d4916051e0",["D",1747081847467],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.post(\"/\", async (c) => {\n const bearerToken = c.get(\"token\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const { name, description, privacy } = await c.req.json();\n\n const vt = new ValTown({ bearerToken });\n\n try {\n const project = await vt.projects.create({\n name,\n description,\n privacy,\n });\n\n return c.json({ project });\n } catch (e: any) {\n return c.json({ error: e.message }, { status: 500 });\n }\n});\n\nexport default app;\n",[],[183,350,365],{"_106":372,"_98":373,"_156":374,"_158":351,"_159":142,"_160":358,"_162":121,"_108":375,"_102":185,"_164":213,"_166":376,"_167":25,"_168":-5,"_169":377,"_101":378},"fca2a0a2-2f6f-11f0-994d-569c3dd06744","project-branches.ts","0fc91e02-b2a4-4d82-8f0b-ffcdb2f9666e",["D",1747081847467],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const bearerToken = c.get(\"token\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const projectId = c.req.query(\"projectId\");\n if (!projectId) {\n return Response.json(\"Please provide a projectId\", { status: 400 });\n }\n\n const vt = new ValTown({ bearerToken });\n\n try {\n const branches = await vt.projects.branches.list(projectId, { limit: 100 });\n return c.json({ branches: branches.data });\n } catch (error) {\n console.error(\"Error fetching branches:\", error);\n return Response.json({ error: \"Failed to fetch branches\" }, { status: 500 });\n }\n});\n\nexport default app;\n",[],[183,350,373],{"_106":380,"_98":381,"_156":382,"_158":351,"_159":142,"_160":358,"_162":121,"_108":383,"_102":185,"_164":213,"_166":384,"_167":25,"_168":-5,"_169":385,"_101":386},"fca2a28c-2f6f-11f0-994d-569c3dd06744","project-files.ts","ff5bcf18-8064-4f11-8e8d-9971d23a2f68",["D",1747081847467],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const bearerToken = c.get(\"token\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const projectId = c.req.query(\"projectId\");\n const branchId = c.req.query(\"branchId\");\n\n if (!projectId) {\n return Response.json(\"Please provide a projectId\", { status: 400 });\n }\n\n const vt = new ValTown({ bearerToken });\n\n try {\n const files = await vt.projects.files.retrieve(projectId, {\n path: \"\",\n limit: 100,\n offset: 0,\n recursive: true,\n branch_id: branchId || undefined,\n });\n\n return c.json({ files: files.data });\n } catch (error) {\n console.error(\"Error fetching project files:\", error);\n return Response.json({ error: \"Failed to fetch project files\" }, { status: 500 });\n }\n});\n\nexport default app;\n",[],[183,350,381],{"_106":388,"_98":389,"_156":390,"_158":351,"_159":142,"_160":358,"_162":121,"_108":391,"_102":185,"_164":213,"_166":392,"_167":25,"_168":-5,"_169":393,"_101":394},"fca2a4a8-2f6f-11f0-994d-569c3dd06744","project.ts","9a5d94c9-1b91-4736-a49d-30e898a56434",["D",1747081847467],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const bearerToken = c.get(\"token\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n const projectId = c.req.query(\"projectId\");\n\n if (!projectId) {\n return Response.json(\"Please provide a projectId\", { status: 400 });\n }\n\n const vt = new ValTown({ bearerToken });\n\n const project = await vt.projects.retrieve(projectId);\n // console.log({ project }, Object.keys(project));\n\n return c.json({ project });\n});\n\nexport default app;\n",[],[183,350,389],{"_106":396,"_98":397,"_156":398,"_158":351,"_159":142,"_160":358,"_162":121,"_108":399,"_102":185,"_164":213,"_166":400,"_167":25,"_168":-5,"_169":401,"_101":402},"fca2a70a-2f6f-11f0-994d-569c3dd06744","projects-loader.ts","679e25ab-53cf-435e-a846-abbbc745b1a3",["D",1747081847467],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const bearerToken = c.get(\"token\");\n if (!bearerToken) {\n return Response.json(\"Unauthorized\", { status: 401 });\n }\n\n const vt = new ValTown({ bearerToken });\n\n const [profile, projects] = await Promise.all([\n vt.me.profile.retrieve(),\n vt.me.projects.list({\n limit: 100,\n }),\n ]);\n\n return c.json({ profile, projects: projects.data });\n});\n\nexport default app;\n",[],[183,350,397],{"_106":404,"_98":405,"_156":406,"_158":351,"_159":142,"_160":103,"_162":25,"_108":407,"_102":408,"_164":213,"_166":409,"_167":25,"_168":-5,"_169":410,"_101":411},"6f5fef24-3749-11f0-a6b6-9e149126039e","send-message.ts","4f953a1b-8373-4ddd-91f0-cf5971c5c0c8",["D",1747944898910],23,"import { readFile } from \"https://esm.town/v/std/utils@71-main/index.ts\";\nimport { createAnthropic } from \"npm:@ai-sdk/anthropic\";\nimport { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { convertToCoreMessages, type CoreUserMessage, streamText } from \"npm:ai\";\nimport { Hono } from \"npm:hono\";\nimport {\n finishTrackingUsage,\n getUser,\n insertInferenceCall,\n overLimit,\n startTrackingUsage,\n} from \"../database/queries.tsx\";\n// import { makeChangeValTypeTool, makeFetchTool, makeTextEditorTool, thinkTool } from \"../tools/index.ts\";\nimport fileWithLinesNumbers from \"../utils/fileWithLinesNumbers.ts\";\n\nconst app = new Hono();\n\n// Load system prompts\nconst systemPromptPromise = readFile(\"/prompts/system_prompt.txt\", import.meta.url);\nconst openTowniePromptAdditionsPromise = readFile(\"/prompts/open_townie_prompt_additions.txt\", import.meta.url);\n\napp.post(\"/\", async (c) => {\n const bearerToken = c.get(\"token\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();\n\n // do we want to allow user-provided tokens still\n const apiKey = anthropicApiKey || Deno.env.get(\"ANTHROPIC_API_KEY\");\n const our_api_token = apiKey === Deno.env.get(\"ANTHROPIC_API_KEY\");\n\n if (our_api_token) {\n if (await overLimit(bearerToken)) {\n const user = await getUser(bearerToken);\n if (user.tier === \"pro\") {\n return Response.json(\n \"You have reached the 24-hour Townie limit. Contact townie@val.town if you'd like to pay for increased limits.\",\n { status: 403 },\n );\n } else {\n return Response.json(\n \"You have reached the 24-hour Townie limit. Upgrade to Pro for 10x limits: https://val.town/pricing\",\n { status: 403 },\n );\n }\n }\n }\n\n const model = \"claude-sonnet-4-20250514\";\n\n const rowid = await startTrackingUsage({\n our_api_token,\n bearerToken, // will look up the userId from this\n branch_id: branchId,\n val_id: project.id,\n num_images: images?.length || 0,\n model,\n });\n\n const anthropic = createAnthropic({\n apiKey,\n });\n\n let coreMessages = convertToCoreMessages(messages);\n\n // If there are images, we need to add them to the last user message\n if (images && Array.isArray(images) && images.length > 0) {\n // Find the last user message\n const lastUserMessageIndex = coreMessages.findIndex(\n (msg, idx) => msg.role === \"user\" && idx === coreMessages.length - 1,\n );\n\n if (lastUserMessageIndex !== -1) {\n // Get the text content from the last user message\n const lastUserMessageContent = coreMessages[lastUserMessageIndex].content;\n\n // Create a new message with multimodal content\n // Format the message according to the Vercel AI SDK's expected format\n const newUserMessage: CoreUserMessage = {\n role: \"user\",\n content: typeof lastUserMessageContent === \"string\"\n ? [{\n type: \"text\",\n text: lastUserMessageContent,\n }]\n : lastUserMessageContent,\n };\n\n // Add each image to the content array using the correct ImagePart format\n for (const image of images) {\n if (image && image.url) {\n // Extract mime type from data URL if available\n let mimeType = undefined;\n if (image.url.startsWith(\"data:\")) {\n const matches = image.url.match(/^data:([^;]+);/);\n if (matches && matches.length > 1) {\n mimeType = matches[1];\n }\n }\n\n newUserMessage.content.push({\n type: \"image\",\n image: image.url,\n mimeType,\n });\n }\n }\n\n // Replace the last user message with our new multimodal message\n coreMessages[lastUserMessageIndex] = newUserMessage;\n }\n }\n\n // If there are selected files, fetch their content and add them to the messages\n if (selectedFiles && selectedFiles.length > 0) {\n const vt = new ValTown({ bearerToken });\n\n try {\n // Create a message with the file contents\n let fileContents = \"# Selected Project Files\\n\\n\";\n\n for (const filePath of selectedFiles) {\n if (filePath.endsWith(\"/\")) continue; // Skip directories\n\n try {\n const file = await vt.projects.files.getContent(project.id, {\n path: filePath.startsWith(\"/\") ? filePath.slice(1) : filePath,\n branch_id: branchId || undefined,\n });\n\n const content = await file.text();\n fileContents += `## File: ${filePath}\\n\\`\\`\\`\\n${fileWithLinesNumbers(content)}\\n\\`\\`\\`\\n\\n`;\n } catch (error) {\n console.error(`Error fetching file ${filePath}:`, error);\n fileContents += `## File: ${filePath}\\nError: Could not fetch file content\\n\\n`;\n }\n }\n\n // Add the file contents as the last message\n coreMessages.push({\n role: \"user\",\n content: [{ type: \"text\", text: fileContents }],\n });\n } catch (error) {\n console.error(\"Error processing selected files:\", error);\n }\n }\n\n // Add cache control to the last message\n let lastMessage = coreMessages.at(-1);\n if (lastMessage) {\n // If the last message is a string, convert it to the array type\n if (typeof lastMessage.content === \"string\") {\n lastMessage.content = [\n { type: \"text\", text: lastMessage.content },\n ];\n }\n // @ts-ignore\n lastMessage.content.at(-1).providerOptions = {\n anthropic: { cacheControl: { type: \"ephemeral\" } },\n };\n }\n\n // console.log(JSON.stringify(coreMessages, null, 2));\n\n // Await the system prompts\n const system = await systemPromptPromise;\n const open_townie_prompt_additions = await openTowniePromptAdditionsPromise;\n\n const result = await streamText({\n model: anthropic(model),\n messages: coreMessages,\n system: system + \"\\n\\n\" + open_townie_prompt_additions,\n tools: {\n str_replace_editor: makeTextEditorTool({ bearerToken, project, branch_id: branchId }),\n // think: thinkTool,\n change_val_type: makeChangeValTypeTool({ bearerToken, project, branch_id: branchId }),\n fetch: makeFetchTool({ bearerToken, project, branch_id: branchId }),\n },\n maxSteps: 20,\n maxTokens: 4_096 * 10,\n abortSignal: c.req.raw.signal,\n onStepFinish: async (result: any) => {\n await insertInferenceCall({\n usage_id: rowid,\n step_type: result.stepType,\n finish_reason: result.finishReason,\n input_tokens: result.usage.promptTokens,\n output_tokens: result.usage.completionTokens,\n cache_read_tokens: result.providerMetadata.anthropic.cacheReadInputTokens,\n cache_write_tokens: result.providerMetadata.anthropic.cacheCreationInputTokens,\n });\n },\n onFinish: async (result: any) => {\n await finishTrackingUsage({\n rowid,\n finish_reason: result.finishReason,\n input_tokens: result.usage.promptTokens,\n output_tokens: result.usage.completionTokens,\n cache_read_tokens: result.providerMetadata.anthropic.cacheReadInputTokens,\n cache_write_tokens: result.providerMetadata.anthropic.cacheCreationInputTokens,\n });\n },\n });\n\n return result.toDataStreamResponse({\n sendReasoning: true,\n experimental_sendFinish: true,\n getErrorMessage: error => {\n console.log(\"Error in toDataStreamResponse:\", error);\n if (error == null) {\n return \"unknown error\";\n }\n\n if (typeof error === \"string\") {\n return error;\n }\n\n if (error instanceof Error) {\n return error.message;\n }\n\n return JSON.stringify(error);\n },\n });\n});\n\nexport default app;",[],[183,350,405],{"_106":413,"_98":414,"_156":415,"_158":351,"_159":142,"_160":358,"_162":121,"_108":416,"_102":185,"_164":213,"_166":417,"_167":25,"_168":-5,"_169":418,"_101":419},"fca2b5e2-2f6f-11f0-994d-569c3dd06744","user.ts","4fde78df-8a7b-4bb6-8830-3c1f8d9090e9",["D",1747081847467],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// used to check authentication\napp.get(\"/\", async (c) => {\n const bearerToken = c.get(\"token\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const vt = new ValTown({ bearerToken });\n const user = await vt.me.profile.retrieve();\n\n return c.json(user);\n});\n\nexport default app;\n",[],[183,350,414],[183,350],{"_106":422,"_98":423,"_156":424,"_158":184,"_159":142,"_160":185,"_162":121,"_108":425,"_102":29,"_164":165,"_166":-5,"_167":25,"_168":-5,"_169":426,"_101":470},"83347424-29c6-11f0-8eda-569c3dd06744","tools","accd0756-95e2-46eb-a093-c1db41f44b0a",["D",1746459302919],[427,435,445,454,462],{"_106":428,"_98":429,"_156":430,"_158":424,"_159":142,"_160":185,"_162":25,"_108":431,"_102":29,"_164":213,"_166":432,"_167":25,"_168":-5,"_169":433,"_101":434},"83344df0-29c6-11f0-8eda-569c3dd06744","change-val-type.ts","69cd347f-37d8-4949-8672-2f4a17cd8d6c",["D",1746459302919],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { tool } from \"npm:ai\";\nimport { z } from \"npm:zod\";\n\n/**\n * Creates a tool for updated file triggers Val Town projects\n */\nexport const makeChangeValTypeTool = (\n { bearerToken, project, branch_id }: { bearerToken: string; project: any; branch_id: string },\n) =>\n tool({\n description: `Use this tool to edit the HTTP, cron or email triggers on a file.\nA file can only have zero or one triggers.\nThe cron schedule ccannot be set via this tool. If you create a cron, inform the user to change its schedule in the Val Town web UI.`,\n parameters: z.object({\n path: z.string().describe(\"The file path to add or remove the trigger to\"),\n type: z.enum([\"http\", \"email\", \"cron\", \"none\"]).describe(\"The type of trigger to add\"),\n }),\n execute: async ({ path, type }: { path: string, type: string }) => {\n const vt = new ValTown({ bearerToken });\n try {\n await vt.projects.files.update(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n branch_id,\n type: type === \"cron\" \n ? \"interval\"\n : type === \"none\" && [\".ts\", \".tsx\", \".js\", \".jsx\"].some(ext => path.endsWith(ext))\n ? \"script\"\n : type === \"none\"\n ? \"file\"\n : type\n });\n } catch (e: any) {\n return { \n type: 'error', \n message: \"Error updating file type: \" + e.message \n };\n }\n return { \n type: 'success', \n data: `File ${path} updated to have ${type} trigger` \n };\n },\n });",[],[183,423,429],{"_106":436,"_98":437,"_156":438,"_158":424,"_159":142,"_160":439,"_162":25,"_108":440,"_102":441,"_164":213,"_166":442,"_167":25,"_168":-5,"_169":443,"_101":444},"181b9b82-3587-11f0-9be1-9e149126039e","fetch.ts","24e83142-3585-11f0-9932-9e149126039e",90,["D",1747751478971],2,"/**\n * Tool for making HTTP requests to vals and returning the response\n * This allows the AI to debug HTTP vals by seeing their responses\n */\n\nimport { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { tool } from \"npm:ai\";\nimport { z } from \"npm:zod\";\n\n/**\n * Creates a tool for making HTTP requests to vals in a Val Town project\n */\nexport const makeFetchTool = (\n { bearerToken, project, branch_id }: { bearerToken?: string; project?: any; branch_id?: string } = {},\n) =>\n tool({\n name: \"fetch\",\n description: \"Make an HTTP request to a Val Town val and return the response. Useful for testing HTTP vals.\",\n parameters: z.object({\n valPath: z.string().describe(\n \"The path to the val in the current project (e.g., '/index.ts', '/backend/routes/user.ts')\",\n ),\n urlPath: z.string().optional().describe(\"The URL path to make the request to. Defaults to '/'.\"),\n method: z.enum([\"GET\", \"POST\", \"PUT\", \"DELETE\", \"PATCH\", \"HEAD\", \"OPTIONS\"]).optional().describe(\n \"The HTTP method to use. Defaults to GET.\",\n ),\n headers: z.record(z.string()).optional().describe(\"Optional headers to include in the request.\"),\n body: z.string().optional().describe(\n \"Optional body to include in the request. For JSON, provide a stringified JSON object.\",\n ),\n }),\n execute: async ({ valPath, urlPath = \"/\", method = \"GET\", headers = {}, body }: {\n valPath: string;\n urlPath: string;\n method: string;\n headers: Record;\n body: string;\n }) => {\n if (!bearerToken) {\n return {\n type: \"error\",\n message: \"No bearer token provided\",\n };\n }\n\n if (!project || !project.id) {\n return {\n type: \"error\",\n message: \"No project information provided\",\n };\n }\n\n // Create ValTown client\n const vt = new ValTown({ bearerToken });\n\n // Normalize the path (remove leading slash if present)\n const normalizedPath = valPath.startsWith(\"/\") ? valPath.slice(1) : valPath;\n\n let filesResponse;\n try {\n // Get the val's metadata to check if it's an HTTP val\n filesResponse = await vt.projects.files.retrieve(project.id, {\n path: normalizedPath,\n recursive: false,\n branch_id: branch_id || undefined,\n });\n } catch (error) {\n return {\n type: \"error\",\n message: `Error fetching val at path '${valPath}': ${error.message}`,\n };\n }\n const file = filesResponse?.data[0];\n\n if (!file) {\n return {\n type: \"error\",\n message: `Could not find val at path '${valPath}'`,\n };\n }\n\n if (file.type !== \"http\") {\n return {\n type: \"error\",\n message: `The val at path '${valPath}' is not an HTTP val. Only HTTP vals can be called with fetch.`,\n };\n }\n\n // Get the HTTP endpoint URL\n const valEndpoint = file.links?.endpoint;\n\n if (!valEndpoint) {\n return {\n type: \"error\",\n message: `Could not find HTTP endpoint for val at path '${valPath}'`,\n };\n }\n\n // Make the HTTP request to the val's endpoint\n const options: RequestInit = {\n method,\n headers,\n };\n\n if (body && [\"POST\", \"PUT\", \"PATCH\"].includes(method)) {\n options.body = body;\n }\n\n // Make the request and measure response time\n const startTime = Date.now();\n let response;\n try {\n response = await fetch(valEndpoint + urlPath, options);\n } catch (error: any) {\n // Return error information\n return {\n type: \"error\",\n message: `Error making request: ${error.message}`,\n };\n }\n const endTime = Date.now();\n const responseTime = endTime - startTime;\n\n // Get response headers\n const responseHeaders: Record = {};\n response.headers.forEach((value, key) => {\n responseHeaders[key] = value;\n });\n\n // Get content type\n const contentType = response.headers.get(\"content-type\") || \"\";\n\n // Process response body based on content type\n let responseBody = await response.text();\n\n return {\n type: \"success\",\n data: {\n status: response.status,\n statusText: response.statusText,\n headers: responseHeaders,\n body: responseBody,\n contentType,\n responseTime,\n url: valEndpoint,\n },\n };\n },\n });",[],[183,423,437],{"_106":446,"_98":210,"_156":447,"_158":424,"_159":142,"_160":448,"_162":25,"_108":449,"_102":450,"_164":213,"_166":451,"_167":25,"_168":-5,"_169":452,"_101":453},"475dff30-3743-11f0-b6b8-9e149126039e","c32c69e0-2ac0-4ec1-8df8-80f5384a4178",145,["D",1747942254806],3,"import { makeChangeValTypeTool } from \"./change-val-type.ts\";\nimport { makeFetchTool } from \"./fetch.ts\";\nimport { makeTextEditorTool } from \"./text-editor.ts\";\nimport { thinkTool } from \"./think.ts\";\n\nexport { \n makeTextEditorTool, \n makeChangeValTypeTool, \n makeFetchTool,\n thinkTool \n};",[],[183,423,210],{"_106":455,"_98":456,"_156":457,"_158":424,"_159":142,"_160":448,"_162":25,"_108":458,"_102":185,"_164":213,"_166":459,"_167":25,"_168":-5,"_169":460,"_101":461},"475e00d4-3743-11f0-b6b8-9e149126039e","text-editor.ts","35e2f282-12e8-49a6-85b4-3db08df4856c",["D",1747942254806],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { tool } from \"npm:ai\";\nimport { z } from \"npm:zod\";\nimport fileWithLinesNumbers from \"../utils/fileWithLinesNumbers.ts\";\n\nfunction printFileType(file: any) {\n if (file.type === \"interval\")\n return \" (cron)\";\n else if (file.type === \"http\" || file.type === \"email\")\n return \" (\" + file.type + \")\";\n else return \"\";\n}\n\n/**\n * Creates a comprehensive text editor tool for editing files in a Val Town project\n * Combines all file operations: view, create, edit, delete, and overwrite\n */\nexport const makeTextEditorTool = (\n { bearerToken, project, branch_id }: { bearerToken: string; project: any; branch_id: string | undefined },\n) =>\n tool({\n description: `Tool for viewing, creating and editing files\n* State is persistent across command calls and discussions with the user\n* If \\`path\\` is a file, \\`view\\` displays the result of applying \\`cat -n\\`. If \\`path\\` is a directory, \\`view\\` lists files and directories\n* The \\`create\\` command cannot be used if the specified \\`path\\` already exists as a file\n\nNotes for using the \\`str_replace\\` command:\n* The \\`old_str\\` parameter should match EXACTLY one or more consecutive lines from the original file. Be mindful of whitespaces!\n* If the \\`old_str\\` parameter is not unique in the file, the replacement will not be performed. Make sure to include enough context in \\`old_str\\` to make it unique\n* The \\`new_str\\` parameter should contain the edited lines that should replace the \\`old_str\\``,\n parameters: z.object({\n command: z.enum([\"view\", \"create\", \"str_replace\", \"insert\", \"undo_edit\", \"delete\", \"overwrite\"]).describe(\n \"The commands to run. Allowed options are: `view`, `create`, `str_replace`, `insert`, `delete`, `overwrite`.\",\n ),\n path: z.string().describe(\"Absolute path to file or directory, e.g. `/repo/file.py` or `/repo`.\"),\n file_text: z.string().optional().describe(\n \"Required parameter of `create` command, with the content of the file to be created.\",\n ),\n insert_line: z.number().optional().describe(\n \"Required parameter of `insert` command. The `new_str` will be inserted AFTER the line `insert_line` of `path`.\",\n ),\n new_str: z.string().optional().describe(\n \"Optional parameter of `str_replace` command containing the new string (if not given, no string will be added). Required parameter of `insert` command containing the string to insert.\",\n ),\n old_str: z.string().optional().describe(\n \"Required parameter of `str_replace` command containing the string in `path` to replace.\",\n ),\n view_range: z.array(z.number()).optional().describe(\n \"Optional parameter of `view` command when `path` points to a file. If none is given, the full file is shown. If provided, the file will be shown in the indicated line number range, e.g. [11, 12] will show lines 11 and 12. Indexing at 1 to start. Setting `[start_line, -1]` shows all lines from `start_line` to the end of the file.\",\n ),\n content: z.string().optional().describe(\n \"Required parameter of `overwrite` command containing the new content for the file.\",\n ),\n }),\n execute: async ({ command, path, file_text, insert_line, new_str, old_str, view_range, content }) => {\n const vt = new ValTown({ bearerToken });\n\n try {\n console.log({\n command,\n path,\n file_text,\n insert_line,\n new_str,\n old_str,\n view_range,\n content,\n });\n\n // VIEW command\n if (command === \"view\") {\n if (path.endsWith(\"/\")) {\n try {\n const files = await vt.projects.files.retrieve(project.id, {\n path: path.slice(0, -1),\n limit: 100,\n offset: 0,\n recursive: true,\n branch_id,\n });\n return {\n type: \"success\",\n data: files.data.map(file => file.path + printFileType(file)).join(\"\\n\"),\n };\n } catch (e: any) {\n return {\n type: \"error\",\n message: `Error listing directory: ${e.message}`,\n };\n }\n }\n try {\n const file = await vt.projects.files.getContent(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n branch_id,\n });\n const text = await file.text();\n return {\n type: \"success\",\n data: fileWithLinesNumbers(text),\n };\n } catch (e: any) {\n console.log(e.stack);\n return {\n type: \"error\",\n message: \"File not found\",\n };\n }\n }\n\n // STR_REPLACE command\n if (command === \"str_replace\") {\n if (old_str === undefined) {\n return {\n type: \"error\",\n message: \"Missing required parameter 'old_str' for str_replace command\",\n };\n }\n\n try {\n const file = await vt.projects.files.getContent(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n branch_id,\n });\n console.log(\"Found file\");\n const text = await file.text();\n let matches = text.split(old_str).length - 1;\n\n if (matches === 0) {\n return {\n type: \"error\",\n message: \"No match found for replacement. Please check your text and try again.\",\n };\n }\n\n if (matches > 1) {\n return {\n type: \"error\",\n message:\n `Found ${matches} matches for replacement text. Please provide more context to make a unique match.`,\n };\n }\n\n let newText = text.replace(old_str, new_str || \"\");\n const resp = await vt.projects.files.update(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n content: newText,\n branch_id,\n });\n\n return {\n type: \"success\",\n data: \"String replaced successfully\",\n };\n } catch (e: any) {\n console.log(e.stack);\n return {\n type: \"error\",\n message: \"File not found\",\n };\n }\n }\n\n // CREATE command\n if (command === \"create\") {\n let type_: \"file\" | \"http\" | \"script\";\n if (path.includes(\"backend/index.ts\")) type_ = \"http\";\n if (file_text?.includes(\"export default app.fetch\")) type_ = \"http\";\n if ([\".ts\", \".tsx\", \".js\", \".jsx\"].some(ext => path.endsWith(ext))) {\n type_ = \"script\";\n } else {\n type_ = \"file\";\n }\n\n try {\n const resp = await vt.projects.files.create(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n content: file_text ?? \"\",\n type: type_, // For now, folks have to change the types in the UI\n branch_id,\n });\n\n return {\n type: \"success\",\n data: \"File created successfully\",\n };\n } catch (e) {\n console.log(e.stack);\n return {\n type: \"error\",\n message: \"Could not create file. It likely already exists.\",\n };\n }\n }\n\n // INSERT command\n if (command === \"insert\") {\n try {\n const file = await vt.projects.files.getContent(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n branch_id,\n });\n console.log(\"found file\");\n const text = await file.text();\n\n const lines = text.split(\"\\n\");\n lines.splice(insert_line ?? 0, 0, new_str ?? \"\");\n\n const newText = lines.join(\"\\n\");\n const resp = await vt.projects.files.update(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n content: newText,\n branch_id,\n });\n\n return {\n type: \"success\",\n data: \"Text inserted successfully\",\n };\n } catch (e: any) {\n console.log(e.stack);\n return {\n type: \"error\",\n message: \"File not found\",\n };\n }\n }\n\n // DELETE command\n if (command === \"delete\") {\n try {\n await vt.projects.files.delete(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n branch_id,\n });\n return {\n type: \"success\",\n data: \"File deleted\",\n };\n } catch (e: any) {\n return {\n type: \"error\",\n message: \"Error deleting file: \" + e.message,\n };\n }\n }\n\n // OVERWRITE command\n if (command === \"overwrite\") {\n if (!content) {\n return {\n type: \"error\",\n message: \"Missing required parameter 'content' for overwrite command\",\n };\n }\n\n try {\n await vt.projects.files.update(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n content,\n branch_id,\n });\n\n return {\n type: \"success\",\n data: \"File replaced successfully\",\n };\n } catch (e: any) {\n return {\n type: \"error\",\n message: \"Error replacing file: \" + e.message,\n };\n }\n }\n\n return {\n type: \"error\",\n message: \"Command unknown\",\n };\n } catch (e: any) {\n console.error(e);\n return {\n type: \"error\",\n message: e.stack,\n };\n }\n },\n });",[],[183,423,456],{"_106":463,"_98":464,"_156":465,"_158":424,"_159":142,"_160":185,"_162":25,"_108":466,"_102":29,"_164":213,"_166":467,"_167":25,"_168":-5,"_169":468,"_101":469},"83347294-29c6-11f0-8eda-569c3dd06744","think.ts","1097a4d1-12f8-4bb5-a168-9f04b71aa411",["D",1746459302919],"import { tool } from \"npm:ai\";\nimport { z } from \"npm:zod\";\n\n/**\n * Tool for thinking through complex problems without making external changes\n */\nexport const thinkTool = tool({\n description:\n \"Use the tool to think about something. It will not obtain new information or change the database, but just append the thought to the log. Use it when complex reasoning or some cache memory is needed.\",\n parameters: z.object({\n thought: z.string().describe(\"A thought to think about.\"),\n }),\n execute: async ({ thought }) => {\n return { \n type: 'success', \n data: \"Thought recorded\" \n };\n },\n});",[],[183,423,464],[183,423],{"_106":472,"_98":244,"_156":473,"_158":184,"_159":142,"_160":185,"_162":121,"_108":474,"_102":29,"_164":165,"_166":-5,"_167":25,"_168":-5,"_169":475,"_101":493},"833476c2-29c6-11f0-8eda-569c3dd06744","585d6ed5-56e4-4d4f-8593-762d1ac3b55a",["D",1746459302919],[476,485],{"_106":477,"_98":478,"_156":479,"_158":473,"_159":142,"_160":480,"_162":121,"_108":481,"_102":185,"_164":213,"_166":482,"_167":25,"_168":-5,"_169":483,"_101":484},"e2e641c0-3747-11f0-ace5-9e149126039e","calculateCost.tsx","b89e9afc-29f5-11f0-9d70-569c3dd06744",146,["D",1747944233727],"// Rates for Claude 4 Sonnet (per million tokens)\nconst INPUT_RATE = 3.0; // $3.00 per M input tokens\nconst OUTPUT_RATE = 15.0; // $15.00 per M output tokens\nconst CACHE_READ_RATE = 0.30; // $0.30 per M cache-read tokens\nconst CACHE_WRITE_RATE = 3.75; // $3.75 per M cache-write tokens\n\nexport function calculateCost({\n input_tokens,\n output_tokens,\n cache_read_tokens = 0,\n cache_write_tokens = 0,\n}: {\n input_tokens: number;\n output_tokens: number;\n cache_read_tokens?: number;\n cache_write_tokens?: number;\n}): number {\n // Convert token counts to millions\n const inMillions = (n: number) => n / 1_000_000;\n\n const inputCost = inMillions(input_tokens) * INPUT_RATE;\n const outputCost = inMillions(output_tokens) * OUTPUT_RATE;\n const cacheReadCost = inMillions(cache_read_tokens) * CACHE_READ_RATE;\n const cacheWriteCost = inMillions(cache_write_tokens) * CACHE_WRITE_RATE;\n\n return inputCost + outputCost + cacheReadCost + cacheWriteCost;\n}",[],[183,244,478],{"_106":486,"_98":487,"_156":488,"_158":473,"_159":142,"_160":185,"_162":25,"_108":489,"_102":29,"_164":213,"_166":490,"_167":25,"_168":-5,"_169":491,"_101":492},"83347564-29c6-11f0-8eda-569c3dd06744","fileWithLinesNumbers.ts","138c70c8-67dc-4756-b72c-9360a79d1e74",["D",1746459302919],"export default function fileWithLineNumbers(text: string, view_range = []) {\n return [\n undefined, // Line numbers are 1-indexed\n ...text.split(\"\\n\"),\n ]\n .map((line, index) => index + \": \" + line)\n .slice(...view_range)\n .join(\"\\n\");\n}",[],[183,244,487],[183,244],{"_106":495,"_98":210,"_156":496,"_158":184,"_159":142,"_160":185,"_162":25,"_108":497,"_102":29,"_164":213,"_166":498,"_167":25,"_168":-5,"_169":499,"_101":500},"83347820-29c6-11f0-8eda-569c3dd06744","972d78fd-506d-4ea5-883e-a41ebe25bd77",["D",1746459302919],"import { Hono } from \"npm:hono\";\nimport createBranchApp from \"./routes/create-branch.ts\";\nimport createProjectApp from \"./routes/create-project.ts\";\nimport projectBranchesApp from \"./routes/project-branches.ts\";\nimport projectFilesApp from \"./routes/project-files.ts\";\nimport projectsLoaderApp from \"./routes/projects-loader.ts\";\nimport projectApp from \"./routes/project.ts\";\nimport sendMessageApp from \"./routes/send-message.ts\";\nimport userRoute from \"./routes/user.ts\";\n\nexport const app = new Hono();\n\napp.route(\"/send-message\", sendMessageApp);\napp.route(\"/projects-loader\", projectsLoaderApp);\napp.route(\"/project-files\", projectFilesApp);\napp.route(\"/project-branches\", projectBranchesApp);\napp.route(\"/project\", projectApp);\napp.route(\"/create-branch\", createBranchApp);\napp.route(\"/create-project\", createProjectApp);\napp.route(\"/user\", userRoute);\n\n// This is the entry point for HTTP vals\nexport default app.fetch;\n",[],[183,210],[183],{"_106":503,"_98":504,"_156":505,"_158":-5,"_159":142,"_160":185,"_162":121,"_108":506,"_102":29,"_164":165,"_166":-5,"_167":25,"_168":-5,"_169":507,"_101":824},"83350bfa-29c6-11f0-8eda-569c3dd06744","frontend","8afd8b5e-cc3b-4155-9346-70207f0413a3",["D",1746459302919],[508,675,762,776,798,806,814],{"_106":509,"_98":510,"_156":511,"_158":505,"_159":142,"_160":185,"_162":121,"_108":512,"_102":29,"_164":165,"_166":-5,"_167":25,"_168":-5,"_169":513,"_101":674},"8334d874-29c6-11f0-8eda-569c3dd06744","components","c924c5bf-586a-4f40-b65c-232f934ee8b3",["D",1746459302919],[514,524,533,542,550,558,567,575,583,591,599,607,615,624,632,640,648,657,665],{"_106":515,"_98":516,"_156":517,"_158":511,"_159":142,"_160":518,"_162":25,"_108":519,"_102":520,"_164":213,"_166":521,"_167":25,"_168":-5,"_169":522,"_101":523},"bc242836-34ea-11f0-892f-9e149126039e","App.tsx","55dd879e-5950-4cab-86e8-238cfa25ff4a",85,["D",1747684323182],11,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { createContext, useState } from \"react\";\nimport { BrowserRouter, Link, Navigate, Outlet, Route, Routes, useLocation } from \"react-router\";\nimport { useLocalStorage } from \"react-use\";\nimport { useUser } from \"../hooks/useUser.tsx\";\nimport { ChatRouteSingleColumn } from \"./ChatRouteSingleColumn.tsx\";\nimport { DebugStyles } from \"./DebugStyles.tsx\";\nimport { LayoutRoute } from \"./LayoutRoute.tsx\";\nimport { NewProjectRoute } from \"./NewProjectRoute.tsx\";\nimport { NotFoundRoute } from \"./NotFoundRoute.tsx\";\nimport { ProjectsRoute } from \"./ProjectsRoute.tsx\";\n\nexport const AppContext = createContext({\n audio: false,\n setAudio: () => {},\n user: null,\n});\n\nexport function App() {\n const [audio, setAudio] = useLocalStorage(\"AUDIO\", false);\n const user = useUser();\n\n return (\n \n \n \n }>\n } />\n } />\n } />\n } />\n \n \n \n \n );\n}\n",[],[504,510,516],{"_106":525,"_98":526,"_156":527,"_158":511,"_159":142,"_160":161,"_162":121,"_108":528,"_102":529,"_164":213,"_166":530,"_167":25,"_168":-5,"_169":531,"_101":532},"0d2294bc-3198-11f0-b3fb-569c3dd06744","BranchSelect.tsx","f2c19fd8-ee9d-42a2-89a7-0fede8e401ca",["D",1747318957334],8,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useMemo } from \"react\";\nimport { useNavigate, useParams } from \"react-router\";\nimport { useBranches } from \"../hooks/useBranches.tsx\";\nimport { useCreateBranch } from \"../hooks/useCreateBranch.tsx\";\n\nconst NEW_BRANCH_VAL = \"__NEW_BRANCH__\";\n\nexport function BranchSelect() {\n const { projectId, branchId } = useParams() as {\n projectId: string;\n branchId: string;\n };\n const navigate = useNavigate();\n const branches = useBranches(projectId);\n const createBranch = useCreateBranch(projectId);\n\n const branch = useMemo(() => {\n if (!branchId) return \"main\";\n if (!branches.data) return \"\";\n const b = branches.data.find((b) => b.id === branchId);\n return b?.name ?? \"main\";\n }, [branchId, branches.data]);\n\n const createBranchPrompt = () => {\n const branchName = window.prompt(\"Create new branch\");\n if (branchName === null || branchName === \"\") return;\n console.log(\"create branch\", branchName);\n createBranch.createBranch({ name: branchName }).then((res) => {\n if (res.error) {\n window.alert(res.error);\n return;\n }\n branches.refetch();\n if (res?.branch?.id) {\n navigate(`/chat/${projectId}/branch/${res.branch.id}`);\n }\n });\n };\n\n const handleChange = (e) => {\n const name = e.target.value;\n if (name === NEW_BRANCH_VAL) {\n return createBranchPrompt();\n }\n const next = branches.data?.find((b) => b.name === name);\n if (next?.id) {\n navigate(`/chat/${projectId}/branch/${next.id}`);\n }\n };\n\n return (\n <>\n \n Branch\n \n \n {branches.loading && }\n {branches.data?.map((branch) => (\n \n ))}\n \n \n \n );\n}\n",[],[504,510,526],{"_106":534,"_98":535,"_156":536,"_158":511,"_159":142,"_160":518,"_162":25,"_108":537,"_102":538,"_164":213,"_166":539,"_167":25,"_168":-5,"_169":540,"_101":541},"bc242a98-34ea-11f0-892f-9e149126039e","ChatRouteSingleColumn.tsx","55a5dc26-30da-11f0-bcb1-569c3dd06744",["D",1747684323182],10,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useState, useEffect, useContext, createContext } from \"react\";\nimport { useParams } from \"react-router\";\n\nimport { AppContext } from \"./App.tsx\";\nimport { useProject } from \"../hooks/useProject.tsx\";\nimport { useChatLogic } from \"../hooks/useChatLogic.ts\";\nimport { useLoadingFavicon } from \"../hooks/useLoadingFavicon.ts\";\nimport { useUsageStats } from \"../hooks/useUsageStats.ts\";\nimport { Messages } from \"./Messages.tsx\";\nimport { InputBox, ImageDropContainer } from \"./InputBox.tsx\";\nimport { PreviewFrame } from \"./PreviewFrame.tsx\";\nimport { BranchSelect } from \"./BranchSelect.tsx\";\nimport { Loading } from \"./Loading.tsx\";\nimport { Footer } from \"./Footer.tsx\";\n\nexport const ProjectContext = createContext(null);\n\n// alt single-column version of /chat route\nexport function ChatRouteSingleColumn () {\n const { projectId, branchId } = useParams() as {\n projectId: string;\n branchId?: string;\n };\n\n const project = useProject(projectId, branchId);\n\n if (project.loading) {\n return \n }\n\n if (project.error) {\n return (\n

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

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

\n Error loading project\n

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

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

\n ) : user?.profileImageUrl ? (\n \n ) : (\n

\n )}\n

{project.name}

\n \n

\n\n \n {error && (\n

{error.stack}

\n )}\n\n

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

\n \n );\n}\n\nfunction shouldRefetch (message) {\n for (let i = 0; i < message?.parts?.length; i++) {\n let part = message.parts[i];\n if (part.type === \"tool-invocation\") {\n switch (part.toolInvocation?.toolName) {\n case \"str_replace_editor\":\n if (part.toolInvocation?.args?.command === \"create\") {\n return true;\n }\n break;\n case \"delete_file\":\n case \"change_val_type\":\n return true;\n }\n }\n }\n return false;\n}\n",[],[504,510,535],{"_106":543,"_98":544,"_156":545,"_158":511,"_159":142,"_160":161,"_162":121,"_108":546,"_102":185,"_164":213,"_166":547,"_167":25,"_168":-5,"_169":548,"_101":549},"0d22b8de-3198-11f0-b3fb-569c3dd06744","DebugStyles.tsx","866f1d08-3303-437f-b158-6933e67b6836",["D",1747318957334],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useRef, useEffect, useState } from \"react\";\nimport { TownieIcon } from \"./icons.tsx\";\nimport { Messages } from \"./Messages.tsx\";\n\nexport function DebugStyles() {\n const [pathname, setPathname] = useState(\"\");\n return (\n

Debug styles

\n\n

\n \n

\n\n

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

\n {/*\n

\n \n

\n */}\n\n

Example user message

\n \n Thinking...\n

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

\n\n

\n \n

view:

\n main.tsx\n

Just looking at files

\n\n

This is a block of prose assistant messages

\n );\n}\n",[],[504,510,544],{"_106":551,"_98":552,"_156":553,"_158":511,"_159":142,"_160":518,"_162":25,"_108":554,"_102":29,"_164":213,"_166":555,"_167":25,"_168":-5,"_169":556,"_101":557},"bc23bb62-34ea-11f0-892f-9e149126039e","Footer.tsx","bc23bc0c-34ea-11f0-892f-9e149126039e",["D",1747684323182],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nexport const SOURCE_URL = \"https://val.town/x/valdottown/Townie\";\n\nexport function Footer () {\n return (\n \n );\n}\n",[],[504,510,552],{"_106":559,"_98":560,"_156":561,"_158":511,"_159":142,"_160":518,"_162":25,"_108":562,"_102":563,"_164":213,"_166":564,"_167":25,"_168":-5,"_169":565,"_101":566},"bc243060-34ea-11f0-892f-9e149126039e","Header.tsx","5e7b47f6-435b-48f9-b079-b2444345ce41",["D",1747684323182],12,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useEffect, useContext } from \"react\";\nimport { Link, useNavigate } from \"react-router\";\nimport { useLocalStorage } from \"react-use\";\nimport { Circle, Volume2Icon, VolumeOffIcon } from \"./icons.tsx\";\nimport { AppContext } from \"./App.tsx\";\nimport { ValTownLogo } from \"./ValTownLogo.tsx\";\n\nexport function Header () {\n const navigate = useNavigate();\n\n return (\n

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

\n \n \n \n

\n );\n}\n\nfunction LogOut () {\n const { user } = useContext(AppContext);\n return (\n <>\n \n {user?.profileImageUrl && (\n \n )}\n \n );\n}\n\nfunction DarkButton () {\n const [dark, setDark] = useLocalStorage(\"DARK_MODE\", false);\n const toggle = () => {\n document.body.classList.toggle(\"dark\");\n setDark(!dark);\n }\n\n useEffect(() => {\n const cl = document.body.classList;\n if (dark && !cl.contains(\"dark\")) {\n cl.add(\"dark\");\n }\n }, []);\n\n return (\n \n \n \n );\n}\n\nfunction AudioButton () {\n const {audio, setAudio} = useContext(AppContext);\n\n const toggle = () => {\n setAudio(!audio);\n }\n\n return (\n \n {audio ? (\n \n ) : (\n \n )}\n \n );\n}\n",[],[504,510,560],{"_106":568,"_98":569,"_156":570,"_158":511,"_159":142,"_160":480,"_162":25,"_108":571,"_102":563,"_164":213,"_166":572,"_167":25,"_168":-5,"_169":573,"_101":574},"e2e643dc-3747-11f0-ace5-9e149126039e","Home.tsx","d1504bb4-40ef-4218-9d06-ae6767ccefa1",["D",1747944233727],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"react\";\nimport { Link } from \"react-router\";\nimport { EyeIcon, FileCode2Icon, SparklesIcon, SquarePenIcon } from \"./icons.tsx\";\n\nexport function Home() {\n return (\n

Welcome to Townie

Your AI-powered development assistant for Val Town projects

\n \n Get Started\n \n

\n\n

What is Townie?

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

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

\n\n

Getting Started

\n Login with your Val Town API token (with projects:read, projects:write, user:read permissions)\n
Select a project to work on
Chat with Claude about your code
Watch as it makes changes directly to your files

\n\n

\n \n

AI-Assisted Editing

Chat with Claude about your code and let it make changes

\n\n

\n \n

File Browser

Select specific files to include in the context window

\n\n

\n \n

Branch Management

View, select, and create branches without leaving the app

\n\n

\n \n

Cost Tracking

See estimated API usage costs for each interaction

\n\n

Technical Details

Townie is built with:

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

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

\n \n View Source\n \n

\n );\n}",[],[504,510,569],{"_106":576,"_98":577,"_156":578,"_158":511,"_159":142,"_160":161,"_162":121,"_108":579,"_102":185,"_164":213,"_166":580,"_167":25,"_168":-5,"_169":581,"_101":582},"0d22de68-3198-11f0-b3fb-569c3dd06744","InlinePreview.tsx","55a62eb0-30da-11f0-bcb1-569c3dd06744",["D",1747318957334],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useContext } from \"react\";\nimport { ProjectContext } from \"./ChatRouteSingleColumn.tsx\";\nimport { MessageContext } from \"./Messages.tsx\";\n\nexport function InlinePreview ({ part }) {\n const project = useContext(ProjectContext);\n const message = useContext(MessageContext);\n const {\n toolCallId,\n toolName,\n args,\n result,\n } = part.toolInvocation;\n\n if (!project.files?.length) return null;\n if (!args.path) return null;\n\n const path = args.path.replace(/^\\//, \"\");\n const file = project.files.find(f => f.path === path);\n if (!file) return null;\n if (!file.links.endpoint) return null;\n\n const lastFileToolCall = message?.parts\n .filter(p => p.toolInvocation)\n .map(p => p.toolInvocation)\n .findLast(t => t.args.path === args.path);\n const showPreview = message?.tail === message?.id && lastFileToolCall.toolCallId === toolCallId;\n\n return (\n

\n        {args.command} {file.path} {file.links.endpoint}\n

\n \n {file.path}\n \n

\n \n Open >>\n \n

\n {showPreview ? (\n \n ) : (\n null\n /* use screenshots when they support historical versions\n \n */\n )}\n

\n );\n}\n\n/*\nconst SCREENSHOT_URL = \"https://screenshots.valtown.net/screenshot.png\";\n\nfunction getScreenshotURL ({\n version,\n endpoint,\n width = 1024,\n height = 768,\n}) {\n const url = new URL(SCREENSHOT_URL);\n url.searchParams.append(\"width\", width);\n url.searchParams.append(\"height\", height);\n url.searchParams.append(\"version\", version);\n url.searchParams.append(\"url\", endpoint);\n return url;\n}\n*/\n",[],[504,510,577],{"_106":584,"_98":585,"_156":586,"_158":511,"_159":142,"_160":161,"_162":25,"_108":587,"_102":185,"_164":213,"_166":588,"_167":25,"_168":-5,"_169":589,"_101":590},"0d231270-3198-11f0-b3fb-569c3dd06744","InputBox.tsx","d80b7433-4fa8-4adc-846c-68551f6277e9",["D",1747318957334],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useRef, useState, useEffect } from \"react\";\nimport { PlusIcon, ArrowUpIcon, Square, XIcon } from \"./icons.tsx\";\nimport { processFiles } from \"../utils/images.ts\";\n\nexport function InputBox ({\n value,\n onChange,\n onSubmit,\n onCancel,\n running,\n error,\n images,\n setImages,\n} : {\n value: string;\n onChange: (e: React.KeyboardEvent) => void;\n onSubmit: (event: any) => void;\n onCancel: () => void;\n running: boolean;\n error: any;\n images: (string|null)[];\n setImages: (images: (string|null)[]) => void;\n}) {\n const form = useRef(null);\n\n if (error) console.error(error);\n\n const onKeyDown = (e) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n if (running) return;\n e.preventDefault();\n form.current?.dispatchEvent(new Event('submit', {\n bubbles: true,\n cancelable: true\n }));\n }\n }\n\n return (\n

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

\n \n

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

\n \n

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

\n Drop images here to upload\n

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

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

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

\n \n \n \n \n

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

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

\n Upload image\n

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

\n );\n}\n",[],[504,510,585],{"_106":592,"_98":593,"_156":594,"_158":511,"_159":142,"_160":161,"_162":121,"_108":595,"_102":529,"_164":213,"_166":596,"_167":25,"_168":-5,"_169":597,"_101":598},"0d231c7a-3198-11f0-b3fb-569c3dd06744","LayoutRoute.tsx","bc607d02-394e-4c7a-8d42-d122b071b065",["D",1747318957334],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { Outlet } from \"react-router\";\nimport { Header } from \"./Header.tsx\";\n\nexport function LayoutRoute() {\n return (\n <>\n

\n \n \n );\n}\n",[],[504,510,593],{"_106":600,"_98":601,"_156":602,"_158":511,"_159":142,"_160":185,"_162":121,"_108":603,"_102":29,"_164":213,"_166":604,"_167":25,"_168":-5,"_169":605,"_101":606},"8334b6f0-29c6-11f0-8eda-569c3dd06744","Loading.tsx","28b61df0-cc1d-4bb2-b29f-5b84f29de5f6",["D",1746459302919],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\n\nexport function Loading () {\n return (\n

\n loading…\n

\n );\n}\n",[],[504,510,601],{"_106":608,"_98":609,"_156":610,"_158":511,"_159":142,"_160":161,"_162":121,"_108":611,"_102":185,"_164":213,"_166":612,"_167":25,"_168":-5,"_169":613,"_101":614},"0d232634-3198-11f0-b3fb-569c3dd06744","MessageTimer.tsx","733c8317-cb04-48c3-ae49-a145cab6212d",["D",1747318957334],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useEffect, useState } from \"react\";\n\nconst formatTime = (ms: number): string => {\n const seconds = Math.floor(ms / 1000);\n const minutes = Math.floor(seconds / 60);\n const remainingSeconds = seconds % 60;\n return `${minutes}:${remainingSeconds.toString().padStart(2, \"0\")}`;\n};\n\nexport const MessageTimer = ({\n createdAt,\n endTime,\n isStopped,\n}: {\n createdAt: number;\n endTime?: number;\n isStopped?: boolean;\n}) => {\n const [currentTime, setCurrentTime] = useState(Date.now());\n\n useEffect(() => {\n if (endTime !== undefined || isStopped) return;\n const interval = setInterval(() => {\n setCurrentTime(Date.now());\n }, 100);\n\n return () => clearInterval(interval);\n }, [endTime, isStopped]);\n\n const elapsedTime =\n endTime !== undefined ? endTime - createdAt : currentTime - createdAt;\n\n return

Time: {formatTime(elapsedTime)}

;\n};\n",[],[504,510,609],{"_106":616,"_98":617,"_156":618,"_158":511,"_159":142,"_160":619,"_162":25,"_108":620,"_102":520,"_164":213,"_166":621,"_167":25,"_168":-5,"_169":622,"_101":623},"14e6d4a8-3588-11f0-a7e1-9e149126039e","Messages.tsx","abec370c-c1f7-4755-9754-08e668f31c8b",94,["D",1747751903090],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useState, createContext, useContext } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\n\nimport { Loading } from \"./Loading.tsx\";\nimport { TownieIcon } from \"./icons.tsx\";\nimport { MessageTimer } from \"./MessageTimer.tsx\";\nimport { InlinePreview } from \"./InlinePreview.tsx\";\nimport { useScrollToBottom } from \"../hooks/useScrollToBottom.tsx\";\n\ntype Message = {\n id: string;\n role: \"user\"|\"assistant;\n parts: any[];\n createdAt?: number;\n};\n\nexport const MessageContext = createContext({\n openSummaries: {},\n setOpenSummaries: () => {},\n id: null,\n parts: [],\n});\n\nexport function Messages ({\n messages,\n messageEndTimes,\n running,\n}: {\n messages: Message[];\n messageEndTimes: Record;\n running: boolean;\n}) {\n const { bottomRef } = useScrollToBottom([ messages.length ]);\n const [openSummaries, setOpenSummaries] = useState({});\n const tail = messages.at(-1)?.id;\n\n return (\n \n

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

\n \n );\n}\n\nfunction Message ({\n message,\n messageEndTimes,\n running,\n}: {\n message: Message;\n messageEndTimes: Record;\n running: boolean;\n}) {\n const context = useContext(MessageContext);\n if (message.role === \"user\") return ;\n\n return (\n \n \n \n );\n}\n\nfunction AssistantMessage ({ message, messageEndTimes, running }: {\n message: Message;\n messageEndTimes: Record;\n running: boolean;\n}) {\n return (\n <>\n {message.parts.map((part, i) => )}\n {!messageEndTimes[message.id] && running && }\n\n {message.createdAt && (\n \n )}\n \n );\n}\n\nfunction Part ({ part }) {\n switch (part.type) {\n case \"text\":\n return ;\n case \"tool-invocation\":\n return ;\n case \"step-start\":\n return null; // ;\n default:\n return (\n

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

\n );\n }\n}\n\nfunction TextPart ({ part }) {\n return (\n \n {part.text}\n \n );\n}\n\nfunction Details ({ open, onClick, children, summary }) {\n return (\n \n

\n \n {summary}\n

\n {children}\n

\n \n );\n}\n\nfunction ToolPart ({ part }) {\n const { openSummaries, setOpenSummaries } = useContext(MessageContext);\n const {\n toolName,\n args,\n result,\n toolCallId,\n } = part.toolInvocation;\n\n switch (toolName) {\n case \"think\":\n return (\n {\n e.preventDefault();\n setOpenSummaries(prev => ({\n ...prev,\n [toolCallId]: !prev[toolCallId],\n }));\n }}\n >\n {args?.thought}\n \n );\n case \"str_replace_editor\":\n return \n case \"delete_file\":\n return (\n

\n \n

delete:

{args?.path}

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

\n \n

change type:

{args?.type}

{args?.path}

\n \n \n );\n case \"overwrite_file\":\n return (\n <>\n {\n e.preventDefault();\n setOpenSummaries(prev => ({\n ...prev,\n [toolCallId]: !prev[toolCallId],\n }));\n }}\n summary={(\n <>\n

overwrite:

{args?.path}

\n \n )}>\n

{args?.content}

\n \n \n \n );\n case \"fetch\":\n return (\n {\n e.preventDefault();\n setOpenSummaries(prev => ({\n ...prev,\n [toolCallId]: !prev[toolCallId],\n }));\n }}\n summary={(\n <>\n

fetch:

{args?.valPath}

{args?.urlPath || \"/\"}

\n \n )}>\n {result?.type === \"success\" ? (\n

\n = 200 && result.data.status < 300 ? 'success' : \n result.data.status >= 300 && result.data.status < 400 ? 'redirect' : \n result.data.status >= 400 && result.data.status < 500 ? 'client-error' : 'server-error'}`}>\n {result.data.status} {result.data.statusText}\n \n {result.data.responseTime}ms\n

Headers

{JSON.stringify(result.data.headers, null, 2)}

Response Body

\n                  {typeof result.data.body === 'object' \n                    ? JSON.stringify(result.data.body, null, 2) \n                    : result.data.body}\n

\n ) : (\n

Error

{result?.message || \"Unknown error\"}

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

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

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

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

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

{args.file_text}

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

{result?.data}

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

{args.old_str}

{args.new_str}

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

{args.insert_line}

{args.new_str}

\n );\n break;\n case \"undo_edit\":\n // not implemented\n break;\n }\n\n return (\n <>\n {\n e.preventDefault();\n setOpenSummaries(prev => ({\n ...prev,\n [toolCallId]: !prev[toolCallId],\n }));\n }}\n summary={(\n <>\n

{args?.command}:

{args?.path}

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

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

\n ) : (\n \n )}\n \n );\n}",[],[504,510,617],{"_106":625,"_98":626,"_156":627,"_158":511,"_159":142,"_160":161,"_162":121,"_108":628,"_102":192,"_164":213,"_166":629,"_167":25,"_168":-5,"_169":630,"_101":631},"0d2375b2-3198-11f0-b3fb-569c3dd06744","NewProjectRoute.tsx","a81ad3f4-fac8-4ca6-ac14-dae956757f49",["D",1747318957334],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useState } from \"react\";\nimport { useNavigate } from \"react-router\";\nimport { useCreateProject } from \"../hooks/useCreateProject.tsx\";\n\nexport function NewProjectRoute () {\n const [name, setName] = useState(\"\");\n const [privacy, setPrivacy] = useState(\"public\");\n const navigate = useNavigate();\n\n const { data, error, createProject } = useCreateProject();\n\n const handleSubmit = (e) => {\n e.preventDefault();\n if (!name) return;\n\n createProject({ name, privacy })\n .then((_data) => {\n if (_data.error) return;\n navigate(`/chat/${_data.project.id}`);\n });\n };\n\n return (\n

Create new val

\n {error && (\n

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

\n )}\n

\n );\n}\n\nconst privacyOptions = [\n { value: \"public\", label: \"Public\" },\n { value: \"unlisted\", label: \"Unlisted\" },\n { value: \"private\", label: \"Private\" },\n]\n\nfunction PrivacyRadios ({\n value,\n onChange,\n}: {\n value: string;\n onChange: (value: string) => void;\n}) {\n\n return (\n <>\n {privacyOptions.map(opt => (\n \n onChange(opt.value)}\n />\n {opt.label}\n \n )}\n \n );\n}\n",[],[504,510,626],{"_106":633,"_98":634,"_156":635,"_158":511,"_159":142,"_160":185,"_162":121,"_108":636,"_102":29,"_164":213,"_166":637,"_167":25,"_168":-5,"_169":638,"_101":639},"8334c460-29c6-11f0-8eda-569c3dd06744","NotFoundRoute.tsx","ea133283-2187-49ae-aeb3-d24188ae31bd",["D",1746459302919],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\n\nexport function NotFoundRoute () {\n return (\n

Page not found

\n );\n}\n",[],[504,510,634],{"_106":641,"_98":642,"_156":643,"_158":511,"_159":142,"_160":161,"_162":121,"_108":644,"_102":441,"_164":213,"_166":645,"_167":25,"_168":-5,"_169":646,"_101":647},"0d239416-3198-11f0-b3fb-569c3dd06744","PreviewFrame.tsx","5432cbd1-120e-4838-ab20-5d6b2cbd6c09",["D",1747318957334],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useEffect, useRef, useState } from \"react\";\nimport { RefreshIcon } from \"./icons.tsx\";\n\ninterface PreviewProps {\n files: any[];\n messages: any[];\n running: boolean;\n}\n\nexport function PreviewFrame(props: PreviewProps) {\n const previewKey = useRef(\"new-chat\");\n const [count, setCount] = useState(0);\n\n useEffect(() => {\n if (props.running) return;\n previewKey.current = props.messages?.at(-1)?.id ?? \"new-chat\";\n }, [props.running, props.messages]);\n\n const { url, htmlVals, index, setIndex } = usePreviewURL(props);\n const [pathname, setPathname] = useState(\"\");\n\n const reload = () => {\n setCount(c => c + 1);\n previewKey.current += count;\n };\n\n if (!url) {\n return (\n

\n No HTML files to preview\n

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

\n \n

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

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

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

\n );\n}\n\nfunction usePreviewURL({ files }) {\n const [index, setIndex] = useState(0);\n const htmlVals = files?.filter(file => file.links?.endpoint !== undefined);\n\n const url = htmlVals?.length ? htmlVals[index]?.links.endpoint : null;\n\n return {\n index,\n setIndex,\n url,\n htmlVals,\n };\n}",[],[504,510,642],{"_106":649,"_98":650,"_156":651,"_158":511,"_159":142,"_160":518,"_162":25,"_108":652,"_102":653,"_164":213,"_166":654,"_167":25,"_168":-5,"_169":655,"_101":656},"bc243362-34ea-11f0-892f-9e149126039e","ProjectsRoute.tsx","1512f10f-5784-4d30-a7e5-a2380c90b9ea",["D",1747684323182],9,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { Link } from \"react-router\";\nimport { useProjects } from \"../hooks/useProjects.tsx\";\nimport { Loading } from \"./Loading.tsx\";\nimport { Footer } from \"./Footer.tsx\";\n\nexport function ProjectsRoute() {\n const projects = useProjects();\n\n return (\n

Your vals

\n Create new val\n

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

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

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

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

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

\n {project.imageUrl ? (\n

\n ) : user.profileImageUrl ? (\n

\n \n

\n ) : (\n

\n )}\n

{user.username}

\n {project.name}\n \n

{project.description}

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

public

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

(Unlisted)

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

(Private)

;\n }\n}\n",[],[504,510,650],{"_106":658,"_98":659,"_156":660,"_158":511,"_159":142,"_160":518,"_162":121,"_108":661,"_102":29,"_164":213,"_166":662,"_167":25,"_168":-5,"_169":663,"_101":664},"bc23ef6a-34ea-11f0-892f-9e149126039e","ValTownLogo.tsx","bc23f01e-34ea-11f0-892f-9e149126039e",["D",1747684323182],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\n\nexport function ValTownLogo () {\n return (\n \n \n \n \n );\n}\n",[],[504,510,659],{"_106":666,"_98":667,"_156":668,"_158":511,"_159":142,"_160":669,"_162":121,"_108":670,"_102":185,"_164":213,"_166":671,"_167":25,"_168":-5,"_169":672,"_101":673},"4250aa3e-30f3-11f0-8eb1-569c3dd06744","icons.tsx","f39c1ed8-1912-4bea-bad9-8daa634eeff6",65,["D",1747248179608],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\n\nexport function TownieIcon({\n size = 24,\n color = \"currentColor\",\n className,\n circle,\n}: {\n size?: number;\n color?: string;\n className?: string;\n circle?: string;\n}) {\n return (\n \n {circle && (\n \n )}\n\n \n \n \n \n \n \n \n );\n}\n\nexport function Circle ({\n filled,\n}: {\n filled: boolean;\n}) {\n return (\n \n \n \n );\n}\n\nexport function Square ({\n size = 24,\n}: {\n size?: number;\n}) {\n return (\n \n \n \n );\n}\n\n// icons from https://lucide.dev\nexport function SquarePenIcon () {\n return (\n \n );\n}\n\nexport function FileCode2Icon () {\n return (\n \n );\n}\n\nexport function SparklesIcon () {\n return (\n \n );\n}\n\nexport function EyeIcon () {\n return (\n \n );\n}\n\nexport function ExternalLinkIcon () {\n return (\n \n );\n}\n\nexport function KeyRoundIcon () {\n return (\n \n );\n}\n\nexport function LockKeyholeIcon () {\n return (\n \n );\n}\n\nexport function PlusIcon () {\n return (\n \n );\n}\n\nexport function ArrowUpIcon () {\n return (\n \n );\n}\n\nexport function RefreshIcon ({ size = 24 }: { size: number }) {\n return (\n \n );\n}\n\nexport function XIcon ({ size = 24 }: {\n size?: number;\n}) {\n return (\n \n );\n}\n\nexport function VolumeOffIcon ({ size = 24 }) {\n return (\n \n );\n}\n\nexport function Volume2Icon ({ size = 24 }) {\n return (\n \n );\n}\n",[],[504,510,667],[504,510],{"_106":676,"_98":677,"_156":678,"_158":505,"_159":142,"_160":185,"_162":121,"_108":679,"_102":29,"_164":165,"_166":-5,"_167":25,"_168":-5,"_169":680,"_101":761},"8334f39a-29c6-11f0-8eda-569c3dd06744","hooks","9a759a0e-1f7f-4621-bc18-ea49cffb301e",["D",1746459302919],[681,689,697,705,713,721,729,737,745,753],{"_106":682,"_98":683,"_156":684,"_158":678,"_159":142,"_160":161,"_162":121,"_108":685,"_102":450,"_164":213,"_166":686,"_167":25,"_168":-5,"_169":687,"_101":688},"0d23aef6-3198-11f0-b3fb-569c3dd06744","useBranches.tsx","0fb20799-728b-40fb-b74f-66acedd8c743",["D",1747318957334],"import { useState, useEffect } from \"react\";\n\nconst ENDPOINT = \"/api/project-branches\";\n\nexport function useBranches (projectId: string) {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n\n const fetchData = async () => {\n const endpoint = new URL(ENDPOINT, window.location.origin);\n endpoint.searchParams.append(\"projectId\", projectId);\n\n const res = await fetch(endpoint)\n .then(res => res.json());\n setData(res.branches);\n setLoading(false);\n };\n\n useEffect(() => {\n if (!projectId) return;\n fetchData();\n }, [projectId]);\n\n return { data, loading, refetch: fetchData };\n}",[],[504,677,683],{"_106":690,"_98":691,"_156":692,"_158":678,"_159":142,"_160":161,"_162":25,"_108":693,"_102":343,"_164":213,"_166":694,"_167":25,"_168":-5,"_169":695,"_101":696},"0d23b0ea-3198-11f0-b3fb-569c3dd06744","useChatLogic.ts","b69945d3-60da-4e87-b6de-0975d3e3d100",["D",1747318957334],"import { useChat } from \"@ai-sdk/react\";\nimport React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport { playBellSound } from \"../utils/soundEffects.ts\";\n\ninterface UseChatLogicProps {\n project: any;\n branchId: string | undefined;\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 Record\n >({});\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 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(\n \"Invalid image format:\",\n img?.substring(0, 50) + \"...\"\n );\n }\n return isValid;\n })\n .map((img) => ({ url: img })),\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.filter(\n (msg) => msg.role === \"assistant\" && !messageEndTimes[msg.id]\n );\n return pendingMessages.length > 0\n ? pendingMessages[pendingMessages.length - 1].id\n : null;\n }, [messages, messageEndTimes, running]);\n\n const handleStop = useCallback(() => {\n stop();\n\n if (pendingMessageId) {\n setMessageEndTimes((prev) => ({\n ...prev,\n [pendingMessageId]: Date.now(),\n }));\n\n if (soundEnabled) {\n playBellSound().catch((error) => {\n console.log(\"Error playing bell sound:\", error);\n });\n }\n }\n }, [stop, pendingMessageId, soundEnabled]);\n\n React.useEffect(() => {\n customStopRef.current = handleStop;\n }, [handleStop]);\n\n React.useEffect(() => {\n (window as any).customStopRef = customStopRef;\n }, []);\n\n return {\n messages,\n error,\n input,\n handleInputChange,\n handleSubmit: originalHandleSubmit,\n handleStop,\n running,\n usages,\n messageEndTimes,\n };\n}\n",[],[504,677,691],{"_106":698,"_98":699,"_156":700,"_158":678,"_159":142,"_160":161,"_162":121,"_108":701,"_102":441,"_164":213,"_166":702,"_167":25,"_168":-5,"_169":703,"_101":704},"0d23ca6c-3198-11f0-b3fb-569c3dd06744","useCreateBranch.tsx","095070dc-aa41-4f81-92b6-b956b8a114d9",["D",1747318957334],"import { useState, useEffect } from \"react\";\n\nconst ENDPOINT = \"/api/create-branch\";\n\nexport function useCreateBranch(projectId: string) {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const createBranch = async ({ name }: { name: string }) => {\n setLoading(true);\n setData(null);\n setError(null);\n const res = await fetch(ENDPOINT, {\n method: \"POST\",\n body: JSON.stringify({\n projectId,\n branchName: name,\n }),\n });\n const data = await res.json();\n if (!res.ok) {\n setError(data.error ?? \"Failed to create branch\");\n return data;\n }\n setData(data); // todo error handling\n setLoading(false);\n setError(null);\n return data;\n };\n\n return { data, loading, error, createBranch };\n}\n",[],[504,677,699],{"_106":706,"_98":707,"_156":708,"_158":678,"_159":142,"_160":161,"_162":121,"_108":709,"_102":441,"_164":213,"_166":710,"_167":25,"_168":-5,"_169":711,"_101":712},"0d23cc60-3198-11f0-b3fb-569c3dd06744","useCreateProject.tsx","76c4a72e-89e2-4039-930a-f770c576b853",["D",1747318957334],"import { useState, useEffect } from \"react\";\n\nconst ENDPOINT = \"/api/create-project\";\n\nexport function useCreateProject() {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const createProject = async ({\n name,\n privacy,\n }: {\n name: string;\n privacy: \"public\" | \"unlisted\" | \"private\";\n }) => {\n setLoading(true);\n setData(null);\n setError(null);\n try {\n const res = await fetch(ENDPOINT, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n name: name,\n privacy: privacy,\n }),\n });\n const data = await res.json();\n if (!res.ok) {\n console.error(data);\n setError(data.error ?? \"Failed to create project\");\n return data;\n }\n setData(data);\n setLoading(false);\n setError(null);\n return data;\n } catch (e) {\n console.error(e);\n setError(e);\n setLoading(false);\n setData(null);\n return e;\n }\n };\n\n return { data, loading, error, createProject };\n}\n",[],[504,677,707],{"_106":714,"_98":715,"_156":716,"_158":678,"_159":142,"_160":161,"_162":121,"_108":717,"_102":185,"_164":213,"_166":718,"_167":25,"_168":-5,"_169":719,"_101":720},"0d23ceae-3198-11f0-b3fb-569c3dd06744","useLoadingFavicon.ts","33ca9d55-dd55-4857-9df5-315a048574ea",["D",1747318957334],"import { useEffect } from \"react\";\n\nfunction setLoadingFavicon() {\n document.querySelector('link[rel=\"icon\"]').href = \"/favicon-loading.svg\";\n}\nfunction resetFavicon() {\n document.querySelector('link[rel=\"icon\"]').href = \"/favicon.svg\";\n}\n\nexport function useLoadingFavicon(loading: boolean) {\n useEffect(() => {\n if (loading) setLoadingFavicon();\n else resetFavicon();\n }, [loading]);\n}\n",[],[504,677,715],{"_106":722,"_98":723,"_156":724,"_158":678,"_159":142,"_160":161,"_162":121,"_108":725,"_102":450,"_164":213,"_166":726,"_167":25,"_168":-5,"_169":727,"_101":728},"0d23d246-3198-11f0-b3fb-569c3dd06744","useProject.tsx","cca22841-2adf-474f-a1e5-58b0f5503df4",["D",1747318957334],"import { useState, useEffect } from \"react\";\n\nconst PROJECT_ENDPOINT = \"/api/project\";\nconst FILES_ENDPOINT = \"/api/project-files\";\n\nexport function useProject(projectId: string, branchId?: string) {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n const fetchData = async () => {\n try {\n const projectEndpoint = new URL(PROJECT_ENDPOINT, window.location.origin);\n projectEndpoint.searchParams.append(\"projectId\", projectId);\n const filesEndpoint = new URL(FILES_ENDPOINT, window.location.origin);\n filesEndpoint.searchParams.append(\"projectId\", projectId);\n if (branchId) filesEndpoint.searchParams.append(\"branchId\", branchId);\n\n const { project } = await fetch(projectEndpoint).then((res) =>\n res.json()\n );\n const { files } = await fetch(filesEndpoint).then((res) => res.json());\n\n setData({ project, files });\n setLoading(false);\n setError(null);\n } catch (e) {\n setError(e);\n setLoading(false);\n setData(null);\n }\n };\n\n useEffect(() => {\n if (!projectId) return;\n fetchData();\n }, [projectId, branchId]);\n\n return { data, loading, error, refetch: fetchData };\n}\n",[],[504,677,723],{"_106":730,"_98":731,"_156":732,"_158":678,"_159":142,"_160":161,"_162":121,"_108":733,"_102":450,"_164":213,"_166":734,"_167":25,"_168":-5,"_169":735,"_101":736},"0d23e6fa-3198-11f0-b3fb-569c3dd06744","useProjects.tsx","973f47e9-1574-4ed6-b559-b08cdb07988a",["D",1747318957334],"import { useState, useEffect } from \"react\";\n\nconst ENDPOINT = \"/api/projects-loader\";\n\nexport function useProjects() {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n const fetchData = async () => {\n try {\n const res = await fetch(ENDPOINT);\n const data = await res.json();\n if (!res.ok) {\n console.error(data);\n setError(data.error);\n setData(null);\n setLoading(false);\n return;\n }\n\n setData(data);\n setLoading(false);\n setError(null);\n } catch (e) {\n console.error(e);\n setData(null);\n setError(e);\n setLoading(false);\n }\n };\n\n useEffect(() => {\n fetchData();\n }, []);\n\n return { data, loading, error, refetch: fetchData };\n}\n",[],[504,677,731],{"_106":738,"_98":739,"_156":740,"_158":678,"_159":142,"_160":185,"_162":121,"_108":741,"_102":29,"_164":213,"_166":742,"_167":25,"_168":-5,"_169":743,"_101":744},"8334ead0-29c6-11f0-8eda-569c3dd06744","useScrollToBottom.tsx","89716367-e768-40ba-8028-ca18b65936de",["D",1746459302919],"import { useEffect, useRef } from 'https://esm.sh/react@18.2.0?dev';\n\n\n/**\n * A custom hook that automatically scrolls a container to the bottom\n * when its content changes, based on the specified dependencies.\n *\n * @param {Array} dependencies - Array of dependencies that trigger scrolling when changed\n * @returns {Object} An object containing containerRef and scrollToBottom function\n */\nexport function useScrollToBottomContainer(dependencies = []) {\n const containerRef = useRef(null);\n\n const scrollToBottom = () => {\n if (containerRef.current) {\n setTimeout(() => {\n containerRef.current.scrollTop = containerRef.current.scrollHeight;\n }, 0);\n }\n };\n\n useEffect(() => {\n scrollToBottom();\n }, dependencies);\n\n return { containerRef, scrollToBottom };\n}\n\n// body scroll version\nexport function useScrollToBottom(dependencies = []) {\n const bottomRef = useRef(null);\n\n const scrollToBottom = () => {\n if (bottomRef.current) {\n bottomRef.current.scrollIntoView({ behavior: 'smooth' });\n }\n };\n\n useEffect(() => {\n scrollToBottom();\n }, dependencies);\n\n return { bottomRef, scrollToBottom };\n}\n\n",[],[504,677,739],{"_106":746,"_98":747,"_156":748,"_158":678,"_159":142,"_160":161,"_162":121,"_108":749,"_102":185,"_164":213,"_166":750,"_167":25,"_168":-5,"_169":751,"_101":752},"0d23e9a2-3198-11f0-b3fb-569c3dd06744","useUsageStats.ts","c30955a2-2451-4246-a195-27926a51d931",["D",1747318957334],"import { useEffect } from \"react\";\n\nexport function useUsageStats(messages: any[], usages: any[]) {\n useEffect(() => {\n if (!messages?.length) return;\n let last = messages.at(-1);\n let usage = usages ? usages[last.id] : null;\n if (usage) {\n const cost = calculateCost(usage);\n const stats = Object.entries(usage)\n .map(([key, val]) => `${key}: ${val}`)\n .join(\", \");\n console.log(`Estimated cost: ${cost} (${stats})`);\n }\n }, [messages, usages]);\n}\n\n// Calculate cost based on token usage\nconst calculateCost = (usage: any): string => {\n if (!usage || !usage.promptTokens) {\n return \"0.00\";\n }\n\n // Cost per million tokens\n const PROMPT_COST_PER_MILLION = 3;\n const COMPLETION_COST_PER_MILLION = 15;\n const CACHE_WRITE_COST_PER_MILLION = 3.75;\n const CACHE_READ_COST_PER_MILLION = 0.3;\n\n // Get reported values\n const promptTokens = usage.promptTokens || 0;\n const completionTokens = usage.completionTokens || 0;\n\n // Estimate cache read tokens\n // Approach: Estimate that 40% of prompt tokens come from cache read\n // This percentage can be adjusted based on observed patterns\n const estimatedCacheReadTokens = Math.round(promptTokens * 0.4);\n\n // Estimate cache write tokens\n // Approach: Assume cache write tokens are a portion of prompt tokens that aren't from cache read\n let estimatedCacheWriteTokens = 0;\n\n // If we have more prompt tokens than estimated cache read tokens,\n // estimate that 70% of the difference are cache write tokens\n estimatedCacheWriteTokens = Math.round(\n (promptTokens - estimatedCacheReadTokens) * 0.7\n );\n\n // Calculate costs\n // Subtract both cache read and write tokens from prompt tokens to avoid double counting\n const promptCost =\n ((promptTokens - estimatedCacheWriteTokens - estimatedCacheReadTokens) /\n 1000000) *\n PROMPT_COST_PER_MILLION;\n const completionCost =\n (completionTokens / 1000000) * COMPLETION_COST_PER_MILLION;\n const cacheWriteCost =\n (estimatedCacheWriteTokens / 1000000) * CACHE_WRITE_COST_PER_MILLION;\n const cacheReadCost =\n (estimatedCacheReadTokens / 1000000) * CACHE_READ_COST_PER_MILLION;\n\n // Total cost\n const totalCost =\n promptCost + completionCost + cacheWriteCost + cacheReadCost;\n\n // Add both estimated cache tokens to the usage object for transparency\n usage.estimatedCacheReadTokens = estimatedCacheReadTokens;\n usage.estimatedCacheWriteTokens = estimatedCacheWriteTokens;\n\n // Store the raw cost with more precision for debugging\n usage.rawCost = totalCost.toFixed(5);\n\n // Format to the nearest penny (2 decimal places)\n // If less than 1 penny, show \"< $0.01\"\n if (totalCost < 0.01) {\n return \"< $0.01\";\n } else {\n return \"$\" + totalCost.toFixed(2);\n }\n};\n",[],[504,677,747],{"_106":754,"_98":755,"_156":756,"_158":678,"_159":142,"_160":161,"_162":121,"_108":757,"_102":185,"_164":213,"_166":758,"_167":25,"_168":-5,"_169":759,"_101":760},"0d2402b6-3198-11f0-b3fb-569c3dd06744","useUser.tsx","55a633c4-30da-11f0-bcb1-569c3dd06744",["D",1747318957334],"import { useState, useEffect } from \"react\";\n\nconst USER_ENDPOINT = \"/api/user\";\n\nexport function useUser() {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n const fetchData = async () => {\n try {\n const userEndpoint = new URL(USER_ENDPOINT, window.location.origin);\n\n const res = await fetch(userEndpoint);\n const data = await res.json();\n if (!res.ok) {\n console.error(data);\n setError(data.error);\n setData(null);\n setLoading(false);\n return;\n }\n\n setData(data);\n setLoading(false);\n setError(null);\n } catch (e) {\n setError(e);\n setLoading(false);\n setData(null);\n }\n };\n\n useEffect(() => {\n fetchData();\n }, []);\n\n return { data, loading, error, refetch: fetchData };\n}\n",[],[504,677,755],[504,677],{"_106":763,"_98":350,"_156":764,"_158":505,"_159":142,"_160":518,"_162":121,"_108":765,"_102":29,"_164":165,"_166":-5,"_167":25,"_168":-5,"_169":766,"_101":775},"bc24046e-34ea-11f0-892f-9e149126039e","f5f2da82-5b49-42c4-8ea7-03089d628b4d",["D",1747684323182],[767],{"_106":768,"_98":769,"_156":770,"_158":764,"_159":142,"_160":480,"_162":25,"_108":771,"_102":185,"_164":213,"_166":772,"_167":25,"_168":-5,"_169":773,"_101":774},"e2e648be-3747-11f0-ace5-9e149126039e","login.tsx","bc240072-34ea-11f0-892f-9e149126039e",["D",1747944233727],"/** @jsxImportSource npm:react@18.2.0 */\nimport { Hono } from \"npm:hono\";\nimport { renderToString } from \"npm:react-dom@18.2.0/server\";\nimport { Footer, SOURCE_URL } from \"../components/Footer.tsx\";\nimport { TownieIcon } from \"../components/icons.tsx\";\nimport { ValTownLogo } from \"../components/ValTownLogo.tsx\";\n\nconst app = new Hono();\n\nconst STYLESHEET = import.meta.resolve(\"../styles.css\").replace(\"esm.town\", \"juicy.town\");\n\n// server-side route for /login page\nfunction LoginRoute() {\n return (\n \n \n Townie\n \n \n \n \n \n

\n \n \n \n

\n \n Log in\n \n

\n \n

\n Townie:{\" \"}\n \n Edit and deploy TypeScript apps with AI\n \n

\n
\n \n Log in\n \n

\n 100% open source and built on Val Town\n
\n Agentic AI reads & edits vals using Claude 4 Sonnet\n
\n Support for multiple files, folders, & branches\n
\n Instant deployments, auto-scaling, logs, free custom subdomains\n
\n Works on mobile – prompt, build, and edit when you’re on the go\n

\n\n