[{"_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",464,"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\"; \n import { generateObject } from \"npm:ai\"; \n import { google } from \"npm:@ai-sdk/google\"; \n import { z } from \"npm:zod\"; \n \n export 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(): Promise { \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 // Check for event listeners \n const hasClickListeners = element.onclick !== null || \n (window.getComputedStyle(element).cursor === 'pointer'); \n \n return { \n exists: true, \n tagName, \n type, \n id, \n name, \n classes, \n placeholder, \n attributes, \n formInfo, \n hasClickListeners, \n isVisible: element.offsetWidth > 0 && element.offsetHeight > 0, \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(async (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: 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(): Promise {\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 // Check for event listeners\n const hasClickListeners = element.onclick !== null ||\n (window.getComputedStyle(element).cursor === 'pointer');\n\n return {\n exists: true,\n tagName,\n type,\n id,\n name,\n classes,\n placeholder,\n attributes,\n formInfo,\n hasClickListeners,\n isVisible: element.offsetWidth > 0 && element.offsetHeight > 0,\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(async (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","createdAt",["D",1749226312862],"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=1789588799&sig=cc8cae5a3b06d460bba0e0803182f7ba2bd6e8f6e4c645b92fb51aa03192ad01",{"_102":140,"_109":145},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789588799&sig=6ce4a653b65ad390b6349a1b0a383cb839cc380a1beaf91551581c108538875d",{"_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":164,"_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 · v464