[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_345":346,"_347":348},"routes/_app.x.$handle.$name",{"_102":101,"_32":46,"_110":88,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":123,"_124":125,"_126":25,"_127":128,"_129":59,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",467,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","backend/ai/inputer.ts","latestPath","fileId","c2424644-42f0-11f0-ae4f-76b3cceeab13","name","inputer.ts","fileType","script","content","import { Browser, Page } from \"npm:playwright-core\";\nimport { generateObject } from \"npm:ai\";\nimport { google } from \"npm:@ai-sdk/google\";\nimport { z } from \"npm:zod\";\n\nexport class Inputer {\n private page: Page;\n private selector: string;\n private interactionFunction: Function | null = null;\n\n constructor(private browser: Browser, selector: string) {\n this.selector = selector;\n const currentContext = this.browser.contexts()[0];\n this.page = currentContext.pages()[0];\n }\n\n public static of(browser: Browser, selector: string): Inputer {\n return new Inputer(browser, selector);\n }\n\n /**\n * Analyzes the element and generates a specialized interaction function\n */\n public async generateInteractionFunction() {\n if (this.interactionFunction) {\n return this.interactionFunction;\n }\n\n // Step 1: Analyze the element to understand its properties\n const elementInfo = await this.analyzeElement();\n\n // Step 2: Test the element with dummy data\n const interactionResults = await this.testElementInteraction();\n\n // Step 3: Generate the custom function using AI\n const functionCode = await this.generateFunctionWithAI(elementInfo, interactionResults);\n\n // Step 4: Create the function from the generated code\n this.interactionFunction = new Function('page', 'inputData', functionCode);\n\n return this.interactionFunction;\n }\n\n /**\n * Use the generated function with input data\n */\n public async interact(inputData: Record): Promise {\n const fn = await this.generateInteractionFunction();\n return await fn(this.page, inputData);\n }\n\n /**\n * Analyzes the target element to understand its properties\n */\n private async analyzeElement(): Promise {\n return await this.page.evaluate((selector) => {\n const element = document.querySelector(selector);\n if (!element) {\n return { exists: false };\n }\n\n // Get element properties\n const tagName = element.tagName.toLowerCase();\n const type = element.getAttribute('type') || '';\n const id = element.id || '';\n const name = element.getAttribute('name') || '';\n const classes = Array.from(element.classList).join(' ');\n const placeholder = element.getAttribute('placeholder') || '';\n\n // Get element attributes\n const attributes: Record = {};\n Array.from(element.attributes).forEach((attr) => {\n attributes[attr.name] = attr.value;\n });\n\n // Get parent form if exists\n let formInfo = null;\n const parentForm = element.closest('form');\n if (parentForm) {\n const formInputs = Array.from(parentForm.querySelectorAll('input, select, textarea'))\n .map(input => ({\n tagName: input.tagName.toLowerCase(),\n type: input.getAttribute('type') || '',\n id: (input as HTMLElement).id || '',\n name: input.getAttribute('name') || '',\n placeholder: input.getAttribute('placeholder') || '',\n }));\n\n formInfo = {\n action: parentForm.getAttribute('action') || '',\n method: parentForm.getAttribute('method') || '',\n inputs: formInputs,\n };\n }\n\n return {\n exists: true,\n tagName,\n type,\n id,\n name,\n classes,\n placeholder,\n attributes,\n formInfo,\n isEnabled: !(element as HTMLInputElement).disabled,\n isReadOnly: (element as HTMLInputElement).readOnly,\n };\n }, this.selector);\n }\n\n /**\n * Tests interaction with the element using dummy data\n */\n private async testElementInteraction(): Promise {\n return await this.page.evaluate((selector) => {\n const element = document.querySelector(selector);\n if (!element) {\n return { success: false, error: 'Element not found' };\n }\n\n const tagName = element.tagName.toLowerCase();\n const type = element.getAttribute('type') || '';\n const results: Record = { interactions: [] };\n\n try {\n // Test different interactions based on element type\n if (tagName === 'input') {\n if (type === 'text' || type === 'email' || type === 'password' || type === 'number' || type === '') {\n // Test text input\n const originalValue = (element as HTMLInputElement).value;\n (element as HTMLInputElement).value = 'Test input value';\n element.dispatchEvent(new Event('input', { bubbles: true }));\n element.dispatchEvent(new Event('change', { bubbles: true }));\n\n results.interactions.push({\n type: 'text-input',\n testValue: 'Test input value',\n result: 'Value set in field'\n });\n\n // Restore original value\n (element as HTMLInputElement).value = originalValue;\n } else if (type === 'checkbox' || type === 'radio') {\n // Test checkbox/radio\n const originalChecked = (element as HTMLInputElement).checked;\n (element as HTMLInputElement).checked = !originalChecked;\n element.dispatchEvent(new Event('change', { bubbles: true }));\n\n results.interactions.push({\n type: type,\n testValue: !originalChecked,\n result: `${type} state toggled`\n });\n\n // Restore original value\n (element as HTMLInputElement).checked = originalChecked;\n }\n } else if (tagName === 'select') {\n // Test select dropdown\n const select = element as HTMLSelectElement;\n const options = Array.from(select.options);\n const originalIndex = select.selectedIndex;\n\n if (options.length > 0) {\n // Select a different option\n const newIndex = (originalIndex + 1) % options.length;\n select.selectedIndex = newIndex;\n element.dispatchEvent(new Event('change', { bubbles: true }));\n\n results.interactions.push({\n type: 'select',\n testValue: options[newIndex].value,\n result: `Option selected: ${options[newIndex].text}`\n });\n\n // Restore original value\n select.selectedIndex = originalIndex;\n }\n } else if (tagName === 'textarea') {\n // Test textarea\n const originalValue = (element as HTMLTextAreaElement).value;\n (element as HTMLTextAreaElement).value = 'Test textarea content';\n element.dispatchEvent(new Event('input', { bubbles: true }));\n element.dispatchEvent(new Event('change', { bubbles: true }));\n\n results.interactions.push({\n type: 'textarea',\n testValue: 'Test textarea content',\n result: 'Value set in textarea'\n });\n\n // Restore original value\n (element as HTMLTextAreaElement).value = originalValue;\n } else if (tagName === 'button' ||\n (tagName === 'input' && (type === 'button' || type === 'submit'))) {\n // Just note the button's presence, don't actually click it\n results.interactions.push({\n type: 'button',\n testValue: null,\n result: 'Button detected (not clicked during analysis)'\n });\n }\n\n // Check for any visible changes or responses after interaction\n results.visibleChangesAfterInteraction = false; // This is a placeholder, hard to detect programmatically\n\n return {\n success: true,\n ...results\n };\n } catch (error) {\n return {\n success: false,\n error: error.toString(),\n partialResults: results\n };\n }\n }, this.selector);\n }\n\n /**\n * Generates a specialized interaction function using AI\n */\n private async generateFunctionWithAI(\n elementInfo: any,\n interactionResults: any\n ): Promise {\n const { object: generatedFunction } = await generateObject({\n model: google(\"gemini-2.0-flash\"),\n schema: z.object({\n functionCode: z.string().describe(\"JavaScript function code that will interact with the element\"),\n explanation: z.string().describe(\"Explanation of how the function works\"),\n }),\n prompt: `\n You are a specialized automation engineer. Your task is to create a JavaScript function that will\n interact with a specific element on a webpage.\n\n # ELEMENT INFORMATION\n Selector: \\`${this.selector}\\`\n Element details: ${JSON.stringify(elementInfo, null, 2)}\n\n # INTERACTION TEST RESULTS\n ${JSON.stringify(interactionResults, null, 2)}\n\n # REQUIREMENTS\n Create an async JavaScript function that:\n 1. Takes two parameters: 'page' (a Playwright Page object) and 'inputData' (an object containing input values)\n 2. Uses the 'page' object to interact with the element at selector: \"${this.selector}\"\n 3. Applies the values from inputData appropriately based on the element type\n 4. Returns any useful output (e.g., success status, validation messages, or resulting data)\n 5. Handles errors gracefully\n\n # IMPORTANT NOTES\n - The function should work with Playwright's Page API\n - Do not use any external libraries beyond Playwright\n - Make sure to handle different element types appropriately (input, select, button, etc.)\n - Include appropriate waits and error handling\n - Return meaningful output that would be useful to the caller\n\n # EXAMPLE FORMAT (adapt based on the actual element type):\n \\`\\`\\`javascript\n async function(page, inputData) {\n try {\n // Ensure element is visible/ready\n await page.waitForSelector('${this.selector}', { state: 'visible', timeout: 5000 });\n\n // Interact with the element based on its type\n // ...code to interact with the element...\n\n // Return useful information\n return {\n success: true,\n data: {\n // Any relevant data\n }\n };\n } catch (error) {\n return {\n success: false,\n error: error.toString()\n };\n }\n }\n \\`\\`\\`\n\n Generate ONLY the function body code that would be used between the function() { } brackets.\n Make it as specific as possible to this particular element and its behavior.\n `,\n });\n\n return generatedFunction.functionCode;\n }\n}\n","import { Browser, Page } from \"npm:playwright-core\";\nimport { generateObject } from \"npm:ai\";\nimport { google } from \"npm:@ai-sdk/google\";\nimport { z } from \"npm:zod\";\n\nexport class Inputer {\n private page: Page;\n private selector: string;\n private interactionFunction: string | null = null;\n\n constructor(private browser: Browser, selector: string) {\n this.selector = selector;\n const currentContext = this.browser.contexts()[0];\n this.page = currentContext.pages()[0];\n }\n\n public static of(browser: Browser, selector: string): Inputer {\n return new Inputer(browser, selector);\n }\n\n public async generateInteractionFunction() {\n if (this.interactionFunction) {\n return this.interactionFunction;\n }\n\n const elementInfo = await this.analyzeElement();\n const interactionResults = await this.testElementInteraction();\n this.interactionFunction = await this.generateFunctionWithAI(elementInfo, interactionResults);\n\n return this.interactionFunction;\n }\n\n private async analyzeElement(): Promise {\n return await this.page.evaluate((selector) => {\n const element = document.querySelector(selector);\n if (!element) {\n return { exists: false };\n }\n\n // Get element properties\n const tagName = element.tagName.toLowerCase();\n const type = element.getAttribute('type') || '';\n const id = element.id || '';\n const name = element.getAttribute('name') || '';\n const classes = Array.from(element.classList).join(' ');\n const placeholder = element.getAttribute('placeholder') || '';\n\n // Get element attributes\n const attributes: Record = {};\n Array.from(element.attributes).forEach((attr) => {\n attributes[attr.name] = attr.value;\n });\n\n // Get parent form if exists\n let formInfo = null;\n const parentForm = element.closest('form');\n if (parentForm) {\n const formInputs = Array.from(parentForm.querySelectorAll('input, select, textarea'))\n .map(input => ({\n tagName: input.tagName.toLowerCase(),\n type: input.getAttribute('type') || '',\n id: (input as HTMLElement).id || '',\n name: input.getAttribute('name') || '',\n placeholder: input.getAttribute('placeholder') || '',\n }));\n\n formInfo = {\n action: parentForm.getAttribute('action') || '',\n method: parentForm.getAttribute('method') || '',\n inputs: formInputs,\n };\n }\n\n return {\n exists: true,\n tagName,\n type,\n id,\n name,\n classes,\n placeholder,\n attributes,\n formInfo,\n isEnabled: !(element as HTMLInputElement).disabled,\n isReadOnly: (element as HTMLInputElement).readOnly,\n };\n }, this.selector);\n }\n\n private async testElementInteraction(): Promise {\n return await this.page.evaluate((selector) => {\n const element = document.querySelector(selector);\n if (!element) {\n return { success: false, error: 'Element not found' };\n }\n\n const tagName = element.tagName.toLowerCase();\n const type = element.getAttribute('type') || '';\n const results: Record = { interactions: [] };\n\n try {\n // Test different interactions based on element type\n if (tagName === 'input') {\n if (type === 'text' || type === 'email' || type === 'password' || type === 'number' || type === '') {\n // Test text input\n const originalValue = (element as HTMLInputElement).value;\n (element as HTMLInputElement).value = 'Test input value';\n element.dispatchEvent(new Event('input', { bubbles: true }));\n element.dispatchEvent(new Event('change', { bubbles: true }));\n\n results.interactions.push({\n type: 'text-input',\n testValue: 'Test input value',\n result: 'Value set in field'\n });\n\n // Restore original value\n (element as HTMLInputElement).value = originalValue;\n } else if (type === 'checkbox' || type === 'radio') {\n // Test checkbox/radio\n const originalChecked = (element as HTMLInputElement).checked;\n (element as HTMLInputElement).checked = !originalChecked;\n element.dispatchEvent(new Event('change', { bubbles: true }));\n\n results.interactions.push({\n type: type,\n testValue: !originalChecked,\n result: `${type} state toggled`\n });\n\n // Restore original value\n (element as HTMLInputElement).checked = originalChecked;\n }\n } else if (tagName === 'select') {\n // Test select dropdown\n const select = element as HTMLSelectElement;\n const options = Array.from(select.options);\n const originalIndex = select.selectedIndex;\n\n if (options.length > 0) {\n // Select a different option\n const newIndex = (originalIndex + 1) % options.length;\n select.selectedIndex = newIndex;\n element.dispatchEvent(new Event('change', { bubbles: true }));\n\n results.interactions.push({\n type: 'select',\n testValue: options[newIndex].value,\n result: `Option selected: ${options[newIndex].text}`\n });\n\n // Restore original value\n select.selectedIndex = originalIndex;\n }\n } else if (tagName === 'textarea') {\n // Test textarea\n const originalValue = (element as HTMLTextAreaElement).value;\n (element as HTMLTextAreaElement).value = 'Test textarea content';\n element.dispatchEvent(new Event('input', { bubbles: true }));\n element.dispatchEvent(new Event('change', { bubbles: true }));\n\n results.interactions.push({\n type: 'textarea',\n testValue: 'Test textarea content',\n result: 'Value set in textarea'\n });\n\n // Restore original value\n (element as HTMLTextAreaElement).value = originalValue;\n } else if (tagName === 'button' ||\n (tagName === 'input' && (type === 'button' || type === 'submit'))) {\n // Just note the button's presence, don't actually click it\n results.interactions.push({\n type: 'button',\n testValue: null,\n result: 'Button detected (not clicked during analysis)'\n });\n }\n\n // Check for any visible changes or responses after interaction\n results.visibleChangesAfterInteraction = false; // This is a placeholder, hard to detect programmatically\n\n return {\n success: true,\n ...results\n };\n } catch (error) {\n return {\n success: false,\n error: error.toString(),\n partialResults: results\n };\n }\n }, this.selector);\n }\n\n private async generateFunctionWithAI(\n elementInfo: any,\n interactionResults: any\n ): Promise {\n const { object: generatedFunction } = await generateObject({\n model: google(\"gemini-1.5-pro\"),\n schema: z.object({\n functionCode: z.string().describe(\"JavaScript function code that will interact with the element\"),\n inputArgSchema: z.string().describe(\"JSON schema for the input data that the function expects\"),\n }),\n prompt: `\n You are a specialized automation engineer. Your task is to create a JavaScript function that will\n interact with a specific element on a webpage.\n\n # ELEMENT INFORMATION\n Selector: \\`${this.selector}\\`\n Element details: ${JSON.stringify(elementInfo, null, 2)}\n\n # INTERACTION TEST RESULTS\n ${JSON.stringify(interactionResults, null, 2)}\n\n # REQUIREMENTS\n Create an async JavaScript function that:\n 1. Takes two parameters: 'page' (a Playwright Page object) and 'inputData' (an object containing input values)\n 2. Uses the 'page' object to interact with the element at selector: \"${this.selector}\"\n 3. Applies the values from inputData appropriately based on the element type\n 4. Returns any useful output (e.g., success status, validation messages, or resulting data)\n 5. Handles errors gracefully\n\n # IMPORTANT NOTES\n - The function should work with Playwright's Page API\n - Do not use any external libraries beyond Playwright\n - Make sure to handle different element types appropriately (input, select, button, etc.)\n - Include appropriate waits and error handling\n - Return meaningful output that would be useful to the caller\n\n # EXAMPLE FORMAT (adapt based on the actual element type):\n \\`\\`\\`javascript\n async function(page, inputData) {\n try {\n // Ensure element is visible/ready\n await page.waitForSelector('${this.selector}', { state: 'visible', timeout: 5000 });\n\n // Interact with the element based on its type\n // ...code to interact with the element...\n\n // Return useful information\n return {\n success: true,\n data: {\n // Any relevant data\n }\n };\n } catch (error) {\n return {\n success: false,\n error: error.toString()\n };\n }\n }\n \\`\\`\\`\n\n Generate ONLY the function body code that would be used between the function() { } brackets.\n Make it as specific as possible to this particular element and its behavior.\n `,\n });\n\n return generatedFunction.functionCode;\n }\n}\n","createdAt",["D",1749230961971],"branchVersion","branchId","2e2fb5a4-08c6-11f0-95cf-569c3dd06744","id","2e2c4c02-08c6-11f0-95cf-569c3dd06744","Apiify",["D",1742830771958],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","4555dd0e-707e-4444-acd3-049d206eb1db","pinnedFileId","76971c3b-c94e-4b49-b895-6b9840c6b2e4","pinPreview",true,"pinMigrated","screenshotVersion",601,"likeCount",0,"orgId","bced381e-9ab2-4b55-929d-e7c5064f7f38","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_102":101,"_109":105},"org",{"_102":101,"_103":-5,"_104":105,"_18":55,"_106":107,"_108":25},"branch",{"_13":87,"_32":88,"_44":43,"_89":45,"_90":91,"_92":93,"_94":51,"_95":96,"_97":98,"_99":46,"_100":101},"isOwned",608,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",38,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","wolf","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvVXpPVUZRTjZGTGd2Q2t4c0RRdFpNZWJ5UCJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":341,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":342,"_82":343,"_84":344,"_86":25},"tree",[198,209,214,215,216],"files",[198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216],"counts",{"_186":64,"_187":188,"_189":64,"_190":191,"_192":193},"contents",[146,147,148,149,150],"upstreamProject",{"_44":96,"_32":141,"_53":142,"_54":143,"_50":51,"_80":144},"upstreamBranch",{"_44":91,"_39":134,"_135":136,"_32":88,"_89":96,"_13":137,"_90":-5,"_92":-5,"_138":139,"_48":-5,"_86":25,"_50":51,"_100":140,"_65":98,"_99":141},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789592399&sig=9f2b8198a6bd290c0e4cd558a371acaf6bae0541324daebbd1636993bd403dce",{"_102":140,"_109":145},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789592399&sig=e3667930a878fd5db49e47cce78fe270a8ba33317e34775a1ada2dd4a7c49d8d",{"_44":181,"_32":182,"_30":183,"_154":-5,"_42":43,"_41":164,"_156":59,"_39":184,"_13":64,"_34":179,"_36":-5,"_24":25,"_159":-5,"_27":185},{"_44":175,"_32":176,"_30":177,"_154":-5,"_42":43,"_41":164,"_156":59,"_39":178,"_13":64,"_34":179,"_36":-5,"_24":25,"_159":-5,"_27":180},{"_44":168,"_32":169,"_30":170,"_154":-5,"_42":43,"_41":171,"_156":59,"_39":172,"_13":64,"_34":20,"_36":173,"_24":25,"_159":-5,"_27":174},{"_44":161,"_32":162,"_30":163,"_154":-5,"_42":43,"_41":164,"_156":25,"_39":165,"_13":64,"_34":20,"_36":166,"_24":25,"_159":-5,"_27":167},{"_44":151,"_32":152,"_30":153,"_154":-5,"_42":43,"_41":155,"_156":25,"_39":157,"_13":64,"_34":20,"_36":158,"_24":25,"_159":-5,"_27":160},"6d80bef0-42dd-11f0-828a-76b3cceeab13","deno.json","6d80bfb8-42dd-11f0-828a-76b3cceeab13","parentId",399,"latest",["D",1749217924036],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}","label",[152],"2e31f31e-08c6-11f0-95cf-569c3dd06744","README.md","b955ae38-8d6a-4999-885a-f02401a5a57c",1,["D",1742830771958],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n- **Remix** this starter template on the top right to get started.\n\n- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.\n\n[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.",[162],"6d774f0a-42dd-11f0-8567-76b3cceeab13",".vtignore","6d774fbe-42dd-11f0-8567-76b3cceeab13",397,["D",1749217924014],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[169],"2e31f134-08c6-11f0-95cf-569c3dd06744","frontend","ace2be34-3b25-41f0-98a9-deaf2a37046f",["D",1742830771958],"directory",[176],"2e31d258-08c6-11f0-95cf-569c3dd06744","backend","c42583f7-b9a9-4128-8e16-b83c81558d23",["D",1742830771958],[182],"pulls","branches",2,"forks","envVars",{"_194":196,"_197":64},"connections",{"_194":64,"_195":64},"count","unfilledCount",3,"emptyCount",{"_44":181,"_32":182,"_30":183,"_154":-5,"_42":43,"_41":164,"_156":59,"_39":338,"_13":64,"_34":179,"_36":-5,"_24":25,"_159":-5,"_218":339,"_27":340},{"_44":333,"_32":310,"_30":303,"_154":183,"_42":43,"_41":334,"_156":59,"_39":335,"_13":64,"_34":179,"_36":-5,"_24":25,"_159":-5,"_218":336,"_27":337},{"_44":324,"_32":325,"_30":326,"_154":303,"_42":43,"_41":327,"_156":25,"_39":328,"_13":329,"_34":35,"_36":330,"_24":25,"_159":-5,"_218":331,"_27":332},{"_44":315,"_32":316,"_30":317,"_154":303,"_42":43,"_41":318,"_156":25,"_39":319,"_13":320,"_34":35,"_36":321,"_24":25,"_159":-5,"_218":322,"_27":323},{"_44":311,"_32":33,"_30":31,"_154":303,"_42":43,"_41":14,"_156":25,"_39":312,"_13":196,"_34":35,"_36":38,"_24":25,"_159":-5,"_218":313,"_27":314},{"_44":300,"_32":301,"_30":302,"_154":303,"_42":43,"_41":304,"_156":25,"_39":305,"_13":306,"_34":35,"_36":307,"_24":25,"_159":-5,"_218":308,"_27":309},{"_44":295,"_32":286,"_30":279,"_154":183,"_42":43,"_41":296,"_156":25,"_39":297,"_13":64,"_34":179,"_36":-5,"_24":25,"_159":-5,"_218":298,"_27":299},{"_44":287,"_32":288,"_30":289,"_154":279,"_42":43,"_41":290,"_156":25,"_39":291,"_13":196,"_34":35,"_36":292,"_24":25,"_159":-5,"_218":293,"_27":294},{"_44":276,"_32":277,"_30":278,"_154":279,"_42":43,"_41":280,"_156":25,"_39":281,"_13":282,"_34":35,"_36":283,"_24":25,"_159":-5,"_218":284,"_27":285},{"_44":268,"_32":269,"_30":270,"_154":183,"_42":43,"_41":271,"_156":59,"_39":272,"_13":64,"_34":35,"_36":273,"_24":25,"_159":-5,"_218":274,"_27":275},{"_44":258,"_32":259,"_30":57,"_154":183,"_42":43,"_41":260,"_156":25,"_39":261,"_13":262,"_34":263,"_36":264,"_24":25,"_159":265,"_218":266,"_27":267},{"_44":175,"_32":176,"_30":177,"_154":-5,"_42":43,"_41":164,"_156":59,"_39":255,"_13":64,"_34":179,"_36":-5,"_24":25,"_159":-5,"_218":256,"_27":257},{"_44":251,"_32":250,"_30":244,"_154":177,"_42":43,"_41":164,"_156":59,"_39":252,"_13":64,"_34":179,"_36":-5,"_24":25,"_159":-5,"_218":253,"_27":254},{"_44":241,"_32":242,"_30":243,"_154":244,"_42":43,"_41":245,"_156":25,"_39":246,"_13":188,"_34":35,"_36":247,"_24":25,"_159":-5,"_218":248,"_27":249},{"_44":234,"_32":235,"_30":236,"_154":177,"_42":43,"_41":164,"_156":25,"_39":237,"_13":64,"_34":20,"_36":238,"_24":25,"_159":-5,"_218":239,"_27":240},{"_44":227,"_32":228,"_30":229,"_154":177,"_42":43,"_41":164,"_156":25,"_39":230,"_13":64,"_34":35,"_36":231,"_24":25,"_159":-5,"_218":232,"_27":233},{"_44":168,"_32":169,"_30":170,"_154":-5,"_42":43,"_41":171,"_156":59,"_39":224,"_13":64,"_34":20,"_36":173,"_24":25,"_159":-5,"_218":225,"_27":226},{"_44":161,"_32":162,"_30":163,"_154":-5,"_42":43,"_41":164,"_156":25,"_39":221,"_13":64,"_34":20,"_36":166,"_24":25,"_159":-5,"_218":222,"_27":223},{"_44":151,"_32":152,"_30":153,"_154":-5,"_42":43,"_41":155,"_156":25,"_39":217,"_13":64,"_34":20,"_36":158,"_24":25,"_159":-5,"_218":219,"_27":220},["D",1749217924036],"children",[],[152],["D",1742830771958],[],[162],["D",1749217924014],[],[169],"2e31d9ec-08c6-11f0-95cf-569c3dd06744","index.tsx","74271529-7341-46c2-918a-f4b5c09c2d30",["D",1742830771958],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[176,228],"2e31d7d0-08c6-11f0-95cf-569c3dd06744","index.html","6d659e0e-bf7f-4f2b-87cf-3df60d4105a6",["D",1742830771958],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[176,235],"85883f16-08ca-11f0-8255-569c3dd06744","App.tsx","fec0ec8e-b4f4-4da7-884a-019af796678b","5258744f-43e2-420e-83ea-1ed323ddcf10",233,["D",1742832636509],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const [clicked, setClicked] = useState(0);\n return (\n

Val Town React + Hono Starter

\n I've been clicked times\n

\n );\n}",[],[176,250,242],"components","2e31d64a-08c6-11f0-95cf-569c3dd06744",["D",1742830771958],[211],[176,250],["D",1742830771958],[210,212,213],[176],"94685ba2-08ce-11f0-9d64-569c3dd06744","index.ts",386,["D",1742834379454],34,"http","import { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { generateText } from \"npm:ai\";\nimport { anthropic } from \"npm:@ai-sdk/anthropic\";\nimport { queryUrl } from \"./ai/tools.ts\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async (c) => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Add your API routes here\napp.get(\"/api/data\", async (c) => {\n const result = await generateText({\n model: anthropic(\"claude-3-7-sonnet-20250219\"),\n // messages: coreMessages,\n system: system,\n tools: { queryUrl },\n maxSteps: 20,\n abortSignal: c.req.raw.signal,\n });\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","apiify",[],[182,259],"6d7babae-42dd-11f0-93ea-76b3cceeab13","env.ts","6d7bac76-42dd-11f0-93ea-76b3cceeab13",398,["D",1749217924020],"import { envsafe, str } from \"npm:envsafe\";\n\nexport const env = envsafe({\n STEEL_API_KEY: str({}),\n});\n",[],[182,269],"4da6dae0-08ce-11f0-b323-569c3dd06744","utils.ts","f5e17aa4-08cd-11f0-8d87-569c3dd06744","f4020d34-08cd-11f0-8d87-569c3dd06744",370,["D",1742834260747],32,"import ValTown from \"jsr:@valtown/sdk\";\nimport { vt } from \"./sdk.ts\";\n\n/**\n * Lists all branches for a given project and finds the ID of the specified branch name.\n *\n * @param {string} projectId - The ID of the project to search branches within.\n * @param {string} branchName - The name of the branch to find.\n * @returns {Promise} - The ID of the specified branch.\n * @throws {Deno.errors.NotFound} If the branch with the specified name is not found.\n */\nexport async function branchIdToBranch(\n projectId: string,\n branchName: string,\n): Promise {\n for await (\n const branch of vt.projects.branches.list(projectId, {\n limit: 100,\n offset: 0,\n })\n ) if (branch.name === branchName) return branch;\n throw new Deno.errors.NotFound(`Branch '${branchName}' not found`);\n}\n\n/**\n * Forks a new branch from a specified source branch within a project.\n *\n * @param {string} projectId - The ID of the project where the branch will be created.\n * @param {string} newBranchName - The name of the new branch to create.\n * @param {string} sourceBranchId - The ID of the branch to fork from.\n * @returns {Promise

Diff · v467