iTabs Studio

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_159":160,"_161":162},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_121":-5,"_20":122,"_22":123,"_124":125,"_126":127,"_25":128,"_24":-5,"_129":-5,"_130":-5,"_131":53,"_132":133,"_134":44,"_135":-5,"_136":-5,"_137":138},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","jgwynne7_4bf3679b","name","itabs-studio","branchName","main","version","path","","project",{"_33":62,"_13":63,"_45":64,"_65":-5,"_66":53,"_67":68,"_69":68,"_70":19,"_71":-5,"_72":73,"_74":-5,"_75":53,"_76":-5,"_77":-5,"_78":79,"_80":81,"_82":83,"_84":85,"_86":87,"_88":-5,"_89":90,"_91":90,"_92":93,"_94":93,"_95":93,"_96":90,"_97":90,"_98":99,"_100":101,"_102":103,"_104":53},"tree",[57],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":55,"_18":56},"id","8a9791f8-36d1-40d7-8db5-00d9d0e0b4a2","main.ts","fileId","6e7e2390-633b-11f1-8fda-1607ee4eb77e","parentId","branchId","ca9fffca-daca-49df-b037-61a07692c55f","branchVersion",8,"latest",true,"createdAt",["D",1781010345379],7,"fileType","http","content","// iTabs Studio - Missy Build Console\n\nasync function handleApiChat(req: Request): Promise {\n try {\n const { anthropicKey, message, image, history } = await req.json();\n if (!anthropicKey || (!message && !image)) {\n return new Response(JSON.stringify({ error: \"Missing fields\" }), {\n status: 400,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n });\n }\n const baseSystem =\n \"You are Missy, Jon's iTabs AI project manager and menu builder. Warm, direct, encouraging. Help Jon build iTabs menus for Perth cafes. Keep responses phone-friendly.\\n\\nWhen Jon asks you to build a menu and you have enough info, build the complete HTML and wrap it EXACTLY like this:\\n\\n\\n...full HTML here...\\n\\nPut your short explanation BEFORE the tags. HTML must be complete, self-contained, mobile-first, dark theme. No backtick template literals in any JS inside the HTML.\\n\\nCRITICAL: Every menu you build MUST be a fully interactive ordering app, not a static price list. Required elements every time, no exceptions:\\n\\n1. CART BAR - fixed at bottom, hidden until items added, shows item count + total + Order button. Use display:none by default, display:flex when cart has items, position:fixed bottom:0.\\n2. QTY BUTTONS - every item has - and + buttons with a quantity display between them. Pattern:

\\n3. ORDER SHEET - bottom sheet that slides up when Order is tapped, shows full order summary with item names, quantities and prices.\\n4. ORDER CONFIRMATION - shows 'Pay at counter and show this screen' message with a Confirm button.\\n5. SUCCESS STATE - 'Order Placed' confirmation after confirming, with a reset button.\\n\\nThe JS must include these functions: increment(name, price), decrement(name, price), updateCart(), openOrder(), confirmOrder(), resetOrder(). Body must have padding-bottom:120px so content clears the cart bar. A static price list is not an iTabs menu - never build one.\";\n const photoAddon =\n \"\\n\\nThe user has attached a photo of a physical menu. Extract:\\n- Venue name and location if visible\\n- All menu categories\\n- All items with exact prices as shown\\n- Brand colours from the design (header colour, accent colour, background)\\n- Any logo or branding details\\n\\nCRITICAL: Before building, you must know the venue name.\\n- If the user provided the venue name in their text message, use it.\\n- If the venue name IS clearly visible in the photo, use it.\\n- If the venue name is NOT clearly visible in the photo and the user did not provide it, DO NOT build yet. Instead respond with exactly: 'I can see the menu details clearly - items, prices and brand colours all extracted. Just need one thing: what is the venue name?' Then wait for the user to reply with the name before building.\\n- Never proceed with 'Unknown Venue' or any placeholder name.\\n\\nOnce you have the venue name, build the complete interactive iTabs menu matching their branding. Use the extracted colours as the theme. Include DEPLOY_HTML tags so it can be deployed immediately.\";\n const system = image ? baseSystem + photoAddon : baseSystem;\n\n // Build full conversation history for multi-turn context\n const claudeMessages: any[] = [];\n\n // Add previous turns from history (exclude the last user message, we add that below)\n if (history && history.length > 0) {\n for (let i = 0; i < history.length; i++) {\n const h = history[i];\n if (h.type === \"user\") {\n claudeMessages.push({ role: \"user\", content: h.content });\n } else if (h.type === \"missy\") {\n claudeMessages.push({ role: \"assistant\", content: h.content });\n }\n }\n }\n\n // Add the current message (with optional image)\n if (image) {\n const textContent = message ||\n \"Build an iTabs menu from this photo. Extract the venue name, all menu items with prices, categories, and match the colour theme to the brand colours visible in the menu. Build a complete interactive iTabs menu ready to deploy.\";\n claudeMessages.push({\n role: \"user\",\n content: [\n {\n type: \"image\",\n source: {\n type: \"base64\",\n media_type: image.mediaType,\n data: image.data,\n },\n },\n { type: \"text\", text: textContent },\n ],\n });\n } else {\n claudeMessages.push({ role: \"user\", content: message });\n }\n\n const r = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-api-key\": anthropicKey,\n \"anthropic-version\": \"2023-06-01\",\n },\n body: JSON.stringify({\n model: \"claude-sonnet-4-20250514\",\n max_tokens: 16000,\n system: system,\n messages: claudeMessages,\n }),\n });\n const data = await r.json();\n return new Response(JSON.stringify(data), {\n status: r.status,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n });\n } catch (e) {\n return new Response(JSON.stringify({ error: e.message }), {\n status: 500,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n });\n }\n}\n\nasync function handleDeploy(req: Request): Promise {\n try {\n const { deployHtml, valName } = await req.json();\n const valtownKey = \"vtwn_2khnH3QZvoBz2CPqe4zJY5cHr4TL\";\n if (!valtownKey || !deployHtml) {\n return new Response(JSON.stringify({ error: \"Missing fields\" }), {\n status: 400,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n });\n }\n const tsWrapper =\n \"export default async function handler(req: Request): Promise {\\n const html = \" +\n JSON.stringify(deployHtml) +\n ';\\n return new Response(html, { headers: { \"Content-Type\": \"text/html; charset=utf-8\" } });\\n}';\n const name = \"itabs-menu-\" + Date.now();\n\n // Step 1: Create the val\n const createRes = await fetch(\"https://api.val.town/v2/vals\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": \"Bearer \" + valtownKey,\n },\n body: JSON.stringify({ name: name, privacy: \"public\" }),\n });\n const createData = await createRes.json();\n if (!createData.id) {\n return new Response(\n JSON.stringify({ error: createData.message || \"Failed to create val\" }),\n {\n status: 400,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n },\n );\n }\n const valId = createData.id;\n\n // Step 2: PUT main.ts with content — correct v2 API format\n const fileRes = await fetch(\n \"https://api.val.town/v2/vals/\" + valId + \"/files?path=main.ts\",\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": \"Bearer \" + valtownKey,\n },\n body: JSON.stringify({\n content: tsWrapper,\n type: \"http\",\n }),\n },\n );\n if (!fileRes.ok) {\n const fileErr = await fileRes.text();\n return new Response(\n JSON.stringify({ error: \"File write failed: \" + fileErr }),\n {\n status: 400,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n },\n );\n }\n const fileData = await fileRes.json();\n\n // Build live URL from val data\n const liveUrl = (fileData.links && fileData.links.endpoint)\n ? fileData.links.endpoint\n : \"https://\" + valtownKey.split(\"_\")[0] + \"-\" + name + \".web.val.run\";\n\n return new Response(\n JSON.stringify({ name: name, id: valId, url: liveUrl }),\n {\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n },\n );\n } catch (e) {\n return new Response(JSON.stringify({ error: e.message }), {\n status: 500,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n });\n }\n}\n\nexport default async function (req: Request): Promise {\n if (req.method === \"OPTIONS\") {\n return new Response(null, {\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"POST, GET, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type\",\n },\n });\n }\n const url = new URL(req.url);\n if (url.pathname === \"/api/chat\" && req.method === \"POST\") {\n return handleApiChat(req);\n }\n if (url.pathname === \"/api/deploy\" && req.method === \"POST\") {\n return handleDeploy(req);\n }\n const html = `\n\n\n\n\niTabs Studio\n\n\n\n\n

\n \n

\n \n \n \n \n

\n \n

\n \n \n \n \n

\n\n\n`;\n\n return new Response(html, { headers: { \"Content-Type\": \"text/html\" } });\n}","deleted",false,"label","itabs-studio-3",[35],{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":58,"_17":47,"_48":49,"_50":51,"_52":53,"_54":55,"_59":60,"_18":61},["D",1781010345379],"children",[],[35],"7c0a0779-4636-426a-9d3a-b0fbe7f7b972","iTabs-studio",["D",1780924233296],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","9e73754f-780d-46b7-924e-110519305b47","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019d76ed-e14a-727a-b612-7191b6d5a9b7","tursoName","7c0a07794636426a9d3ab0fbe7f7b972","tursoHostname","7c0a07794636426a9d3ab0fbe7f7b972-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789470042795],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_120":116},"org",{"_11":12,"_113":114,"_115":116,"_72":73,"_117":118,"_119":53},"branch",{"_17":42,"_13":16,"_33":40,"_105":62,"_106":-5,"_107":-5,"_108":-5,"_109":-5,"_110":-5,"_111":63,"_112":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","iTabs-Menu","avatar","https://avatars.githubusercontent.com/u/177847225?v=4","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":62,"_13":63,"_45":154,"_65":-5,"_66":53,"_67":68,"_69":68,"_70":19,"_71":-5,"_72":73,"_74":-5,"_75":53,"_76":-5,"_77":-5,"_78":79,"_80":81,"_82":83,"_84":85,"_86":155,"_88":-5,"_89":90,"_91":90,"_92":93,"_94":93,"_95":93,"_96":90,"_97":90,"_98":156,"_100":157,"_102":158,"_104":53},[151],"files",[151],"counts",{"_141":79,"_142":143,"_144":79,"_31":145,"_146":147},[139],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":55,"_18":140},[35],"pulls","branches",1,"forks",{"_148":79,"_150":79},"connections",{"_148":79,"_149":79},"count","unfilledCount","emptyCount",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":58,"_17":47,"_48":49,"_50":51,"_52":53,"_54":55,"_59":152,"_18":153},[],[35],["D",1780924233296],["D",1789470042795],{"_11":12,"_120":116},{"_11":12,"_113":114,"_115":116,"_72":73,"_117":118,"_119":53},{"_17":42,"_13":16,"_33":40,"_105":62,"_106":-5,"_107":-5,"_108":-5,"_109":-5,"_110":-5,"_111":63,"_112":12},"ctx",{"_98":-5,"_136":192,"_193":194,"_195":196,"_197":53,"_198":53,"_199":53,"_200":44,"_201":-5,"_202":-7,"_203":-7,"_204":79,"_205":53,"_206":53,"_207":-5,"_208":53,"_209":53,"_210":53,"_211":-5},"ENV",{"_163":164,"_165":166,"_167":16,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code